@mui/x-charts-pro 9.0.0-alpha.2 → 9.0.0-alpha.4

package/ChartsToolbarPro/ChartsToolbarZoomOutTrigger.mjs

@@ -5,7 +5,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["render"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useChartContext, useChartsSlots } from '@mui/x-charts/internals';
+import { useChartsContext, useChartsSlots } from '@mui/x-charts/internals';
 import { useComponentRenderer } from '@mui/x-internals/useComponentRenderer';
 import { selectorChartCanZoomOut } from "../internals/plugins/useChartProZoom/index.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -25,7 +25,7 @@ const ChartsToolbarZoomOutTrigger = /*#__PURE__*/React.forwardRef(function Chart
   const {
     instance,
     store
-  } = useChartContext();
+  } = useChartsContext();
   const disabled = store.use(selectorChartCanZoomOut);
   const element = useComponentRenderer(slots.baseButton, render, _extends({}, slotProps.baseButton, {
     onClick: () => instance.zoomOut(),

package/ChartsToolbarPro/index.d.mts

@@ -2,4 +2,5 @@ export * from "./ChartsToolbarPro.mjs";
 export * from "./ChartsToolbarZoomInTrigger.mjs";
 export * from "./ChartsToolbarZoomOutTrigger.mjs";
 export * from "./ChartsToolbarPrintExportTrigger.mjs";
-export * from "./ChartsToolbarImageExportTrigger.mjs";
+export * from "./ChartsToolbarImageExportTrigger.mjs";
+export type { ChartsToolbarProSlots, ChartsToolbarProSlotProps } from "./Toolbar.types.mjs";

package/ChartsToolbarPro/index.d.ts

@@ -2,4 +2,5 @@ export * from "./ChartsToolbarPro.js";
 export * from "./ChartsToolbarZoomInTrigger.js";
 export * from "./ChartsToolbarZoomOutTrigger.js";
 export * from "./ChartsToolbarPrintExportTrigger.js";
-export * from "./ChartsToolbarImageExportTrigger.js";
+export * from "./ChartsToolbarImageExportTrigger.js";
+export type { ChartsToolbarProSlots, ChartsToolbarProSlotProps } from "./Toolbar.types.js";

package/ChartsToolbarPro/index.mjs

@@ -2,4 +2,5 @@ export * from "./ChartsToolbarPro.mjs";
 export * from "./ChartsToolbarZoomInTrigger.mjs";
 export * from "./ChartsToolbarZoomOutTrigger.mjs";
 export * from "./ChartsToolbarPrintExportTrigger.mjs";
-export * from "./ChartsToolbarImageExportTrigger.mjs";
+export * from "./ChartsToolbarImageExportTrigger.mjs";
+export {};

package/ChartsZoomSlider/internals/ChartsAxisZoomSliderActiveTrack.js

@@ -60,7 +60,7 @@ function ChartsAxisZoomSliderActiveTrack({
 }) {
   const {
     instance
-  } = (0, _internals.useChartContext)();
+  } = (0, _internals.useChartsContext)();
   const {
     chartsLayerContainerRef
   } = instance;

package/ChartsZoomSlider/internals/ChartsAxisZoomSliderActiveTrack.mjs

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { styled } from '@mui/material/styles';
-import { getChartPoint, invertScale, selectorChartAxis, selectorChartAxisZoomOptionsLookup, useChartContext, useDrawingArea, useStore } from '@mui/x-charts/internals';
+import { getChartPoint, invertScale, selectorChartAxis, selectorChartAxisZoomOptionsLookup, useChartsContext, useDrawingArea, useStore } from '@mui/x-charts/internals';
 import * as React from 'react';
 import { rafThrottle } from '@mui/x-internals/rafThrottle';
 import { shouldForwardProp } from '@mui/system';
@@ -53,7 +53,7 @@ export function ChartsAxisZoomSliderActiveTrack({
 }) {
   const {
     instance
-  } = useChartContext();
+  } = useChartsContext();
   const {
     chartsLayerContainerRef
   } = instance;

package/ChartsZoomSlider/internals/ChartsAxisZoomSliderTrack.js

@@ -59,7 +59,7 @@ function ChartsAxisZoomSliderTrack(_ref) {
   const ref = React.useRef(null);
   const {
     instance
-  } = (0, _internals.useChartContext)();
+  } = (0, _internals.useChartsContext)();
   const {
     chartsLayerContainerRef
   } = instance;

package/ChartsZoomSlider/internals/ChartsAxisZoomSliderTrack.mjs

@@ -4,7 +4,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["axisId", "axisDirection", "reverse", "onSelectStart", "onSelectEnd"];
 import * as React from 'react';
-import { useChartContext, getChartPoint, selectorChartAxisZoomOptionsLookup, useStore } from '@mui/x-charts/internals';
+import { useChartsContext, getChartPoint, selectorChartAxisZoomOptionsLookup, useStore } from '@mui/x-charts/internals';
 import { styled } from '@mui/material/styles';
 import { rafThrottle } from '@mui/x-internals/rafThrottle';
 import { shouldForwardProp } from '@mui/system';
@@ -52,7 +52,7 @@ export function ChartsAxisZoomSliderTrack(_ref) {
   const ref = React.useRef(null);
   const {
     instance
-  } = useChartContext();
+  } = useChartsContext();
   const {
     chartsLayerContainerRef
   } = instance;

package/FunnelChart/FunnelChart.d.mts

@@ -4,12 +4,12 @@ import { type MakeOptional } from '@mui/x-internals/types';
 import { type ChartsAxisHighlightProps } from '@mui/x-charts/ChartsAxisHighlight';
 import { type FunnelPlotProps } from "./FunnelPlot.mjs";
 import { type FunnelSeriesType } from "./funnel.types.mjs";
-import { type ChartContainerProProps } from "../ChartContainerPro/index.mjs";
+import { type ChartsContainerProProps } from "../ChartsContainerPro/index.mjs";
 import { type FunnelChartSlotExtension } from "./funnelSlots.types.mjs";
 import { type CategoryAxis } from "./categoryAxis.types.mjs";
 import { type FunnelChartPluginSignatures } from "./FunnelChart.plugins.mjs";
 export type FunnelSeries = MakeOptional<FunnelSeriesType, 'type'>;
-export interface FunnelChartProps extends Omit<ChartContainerProProps<'funnel', FunnelChartPluginSignatures>, 'series' | 'plugins' | 'zAxis' | 'zoom' | 'onZoomChange' | 'dataset' | 'yAxis' | 'xAxis' | 'rotationAxis' | 'radiusAxis' | 'slots' | 'slotProps' | 'experimentalFeatures'>, Omit<FunnelPlotProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, FunnelChartSlotExtension {
+export interface FunnelChartProps extends Omit<ChartsContainerProProps<'funnel', FunnelChartPluginSignatures>, 'series' | 'plugins' | 'zAxis' | 'zoom' | 'onZoomChange' | 'dataset' | 'yAxis' | 'xAxis' | 'rotationAxis' | 'radiusAxis' | 'slots' | 'slotProps'>, Omit<FunnelPlotProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, FunnelChartSlotExtension {
   /**
    * The series to display in the funnel chart.
    * An array of [[FunnelSeries]] objects.

package/FunnelChart/FunnelChart.d.ts

@@ -4,12 +4,12 @@ import { type MakeOptional } from '@mui/x-internals/types';
 import { type ChartsAxisHighlightProps } from '@mui/x-charts/ChartsAxisHighlight';
 import { type FunnelPlotProps } from "./FunnelPlot.js";
 import { type FunnelSeriesType } from "./funnel.types.js";
-import { type ChartContainerProProps } from "../ChartContainerPro/index.js";
+import { type ChartsContainerProProps } from "../ChartsContainerPro/index.js";
 import { type FunnelChartSlotExtension } from "./funnelSlots.types.js";
 import { type CategoryAxis } from "./categoryAxis.types.js";
 import { type FunnelChartPluginSignatures } from "./FunnelChart.plugins.js";
 export type FunnelSeries = MakeOptional<FunnelSeriesType, 'type'>;
-export interface FunnelChartProps extends Omit<ChartContainerProProps<'funnel', FunnelChartPluginSignatures>, 'series' | 'plugins' | 'zAxis' | 'zoom' | 'onZoomChange' | 'dataset' | 'yAxis' | 'xAxis' | 'rotationAxis' | 'radiusAxis' | 'slots' | 'slotProps' | 'experimentalFeatures'>, Omit<FunnelPlotProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, FunnelChartSlotExtension {
+export interface FunnelChartProps extends Omit<ChartsContainerProProps<'funnel', FunnelChartPluginSignatures>, 'series' | 'plugins' | 'zAxis' | 'zoom' | 'onZoomChange' | 'dataset' | 'yAxis' | 'xAxis' | 'rotationAxis' | 'radiusAxis' | 'slots' | 'slotProps'>, Omit<FunnelPlotProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, FunnelChartSlotExtension {
   /**
    * The series to display in the funnel chart.
    * An array of [[FunnelSeries]] objects.

package/FunnelChart/FunnelChart.js

@@ -21,8 +21,8 @@ var _ChartsWrapper = require("@mui/x-charts/ChartsWrapper");
 var _FunnelPlot = require("./FunnelPlot");
 var _useFunnelChartProps = require("./useFunnelChartProps");
 var _seriesConfig = require("./seriesConfig");
-var _useChartContainerProProps = require("../ChartContainerPro/useChartContainerProProps");
-var _ChartDataProviderPro = require("../ChartDataProviderPro");
+var _useChartsContainerProProps = require("../ChartsContainerPro/useChartsContainerProProps");
+var _ChartsDataProviderPro = require("../ChartsDataProviderPro");
 var _FunnelChart2 = require("./FunnelChart.plugins");
 var _FocusedFunnelSection = require("./FocusedFunnelSection");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -35,7 +35,7 @@ const FunnelChart = exports.FunnelChart = /*#__PURE__*/React.forwardRef(function
     name: 'MuiFunnelChart'
   });
   const {
-    chartContainerProps,
+    chartsContainerProps,
     funnelPlotProps,
     overlayProps,
     legendProps,
@@ -45,11 +45,11 @@ const FunnelChart = exports.FunnelChart = /*#__PURE__*/React.forwardRef(function
     children
   } = (0, _useFunnelChartProps.useFunnelChartProps)(themedProps);
   const {
-    chartDataProviderProProps,
+    chartsDataProviderProProps,
     chartsSurfaceProps
-  } = (0, _useChartContainerProProps.useChartContainerProProps)(chartContainerProps);
+  } = (0, _useChartsContainerProProps.useChartsContainerProProps)(chartsContainerProps);
   const Tooltip = themedProps.slots?.tooltip ?? _ChartsTooltip.ChartsTooltip;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProviderPro.ChartDataProviderPro, (0, _extends2.default)({}, chartDataProviderProProps, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsDataProviderPro.ChartsDataProviderPro, (0, _extends2.default)({}, chartsDataProviderProProps, {
     gap: themedProps.gap,
     seriesConfig: seriesConfig,
     plugins: _FunnelChart2.FUNNEL_CHART_PLUGINS,
@@ -177,6 +177,10 @@ process.env.NODE_ENV !== "production" ? FunnelChart.propTypes = {
    * @default rainbowSurgePalette
    */
   colors: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.func]),
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
   desc: _propTypes.default.string,
   /**
    * If `true`, the charts will not listen to the mouse move event.
@@ -184,7 +188,14 @@ process.env.NODE_ENV !== "production" ? FunnelChart.propTypes = {
    * @default false
    */
   disableAxisListener: _propTypes.default.bool,
-  enableKeyboardNavigation: _propTypes.default.bool,
+  /**
+   * If `true`, disables keyboard navigation for the chart.
+   */
+  disableKeyboardNavigation: _propTypes.default.bool,
+  /**
+   * Options to enable features planned for the next major.
+   */
+  experimentalFeatures: _propTypes.default.object,
   /**
    * The gap, in pixels, between funnel sections.
    * @default 0
@@ -323,7 +334,7 @@ process.env.NODE_ENV !== "production" ? FunnelChart.propTypes = {
   /**
    * The callback fired when the tooltip item changes.
    *
-   * @param {SeriesItemIdentifier<TSeries> | null} tooltipItem  The newly highlighted item.
+   * @param {SeriesItemIdentifier<SeriesType> | null} tooltipItem  The newly highlighted item.
    */
   onTooltipItemChange: _propTypes.default.func,
   /**
@@ -348,6 +359,10 @@ process.env.NODE_ENV !== "production" ? FunnelChart.propTypes = {
   slots: _propTypes.default.object,
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
   theme: _propTypes.default.oneOf(['dark', 'light']),
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
   title: _propTypes.default.string,
   /**
    * The tooltip item.

package/FunnelChart/FunnelChart.mjs

@@ -14,8 +14,8 @@ import { ChartsWrapper } from '@mui/x-charts/ChartsWrapper';
 import { FunnelPlot } from "./FunnelPlot.mjs";
 import { useFunnelChartProps } from "./useFunnelChartProps.mjs";
 import { funnelSeriesConfig } from "./seriesConfig/index.mjs";
-import { useChartContainerProProps } from "../ChartContainerPro/useChartContainerProProps.mjs";
-import { ChartDataProviderPro } from "../ChartDataProviderPro/index.mjs";
+import { useChartsContainerProProps } from "../ChartsContainerPro/useChartsContainerProProps.mjs";
+import { ChartsDataProviderPro } from "../ChartsDataProviderPro/index.mjs";
 import { FUNNEL_CHART_PLUGINS } from "./FunnelChart.plugins.mjs";
 import { FocusedFunnelSection } from "./FocusedFunnelSection.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -28,7 +28,7 @@ const FunnelChart = /*#__PURE__*/React.forwardRef(function FunnelChart(props, re
     name: 'MuiFunnelChart'
   });
   const {
-    chartContainerProps,
+    chartsContainerProps,
     funnelPlotProps,
     overlayProps,
     legendProps,
@@ -38,11 +38,11 @@ const FunnelChart = /*#__PURE__*/React.forwardRef(function FunnelChart(props, re
     children
   } = useFunnelChartProps(themedProps);
   const {
-    chartDataProviderProProps,
+    chartsDataProviderProProps,
     chartsSurfaceProps
-  } = useChartContainerProProps(chartContainerProps);
+  } = useChartsContainerProProps(chartsContainerProps);
   const Tooltip = themedProps.slots?.tooltip ?? ChartsTooltip;
-  return /*#__PURE__*/_jsx(ChartDataProviderPro, _extends({}, chartDataProviderProProps, {
+  return /*#__PURE__*/_jsx(ChartsDataProviderPro, _extends({}, chartsDataProviderProProps, {
     gap: themedProps.gap,
     seriesConfig: seriesConfig,
     plugins: FUNNEL_CHART_PLUGINS,
@@ -170,6 +170,10 @@ process.env.NODE_ENV !== "production" ? FunnelChart.propTypes = {
    * @default rainbowSurgePalette
    */
   colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
   desc: PropTypes.string,
   /**
    * If `true`, the charts will not listen to the mouse move event.
@@ -177,7 +181,14 @@ process.env.NODE_ENV !== "production" ? FunnelChart.propTypes = {
    * @default false
    */
   disableAxisListener: PropTypes.bool,
-  enableKeyboardNavigation: PropTypes.bool,
+  /**
+   * If `true`, disables keyboard navigation for the chart.
+   */
+  disableKeyboardNavigation: PropTypes.bool,
+  /**
+   * Options to enable features planned for the next major.
+   */
+  experimentalFeatures: PropTypes.object,
   /**
    * The gap, in pixels, between funnel sections.
    * @default 0
@@ -316,7 +327,7 @@ process.env.NODE_ENV !== "production" ? FunnelChart.propTypes = {
   /**
    * The callback fired when the tooltip item changes.
    *
-   * @param {SeriesItemIdentifier<TSeries> | null} tooltipItem  The newly highlighted item.
+   * @param {SeriesItemIdentifier<SeriesType> | null} tooltipItem  The newly highlighted item.
    */
   onTooltipItemChange: PropTypes.func,
   /**
@@ -341,6 +352,10 @@ process.env.NODE_ENV !== "production" ? FunnelChart.propTypes = {
   slots: PropTypes.object,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   theme: PropTypes.oneOf(['dark', 'light']),
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
   title: PropTypes.string,
   /**
    * The tooltip item.

package/FunnelChart/FunnelPlot.js

@@ -15,6 +15,7 @@ var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
 var _internals = require("@mui/x-charts/internals");
 var _FunnelSection = require("./FunnelSection");
 var _labelUtils = require("./labelUtils");
+var _funnelClasses = require("./funnelClasses");
 var _useFunnelSeries = require("../hooks/useFunnelSeries");
 var _curves = require("./curves");
 var _FunnelSectionLabel = require("./FunnelSectionLabel");
@@ -110,7 +111,9 @@ function FunnelPlot(props) {
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const data = useAggregatedData();
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+  const classes = (0, _funnelClasses.useUtilityClasses)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
+    className: classes.root,
     children: [data.map(series => {
       if (series.length === 0) {
         return null;
@@ -150,7 +153,8 @@ function FunnelPlot(props) {
           id,
           label,
           seriesId,
-          dataIndex
+          dataIndex,
+          variant
         }) => {
           if (!label || !label.value) {
             return null;
@@ -158,7 +162,8 @@ function FunnelPlot(props) {
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FunnelSectionLabel.FunnelSectionLabel, (0, _extends2.default)({
             label: label,
             dataIndex: dataIndex,
-            seriesId: seriesId
+            seriesId: seriesId,
+            variant: variant
           }, other), id);
         })
       }, series[0].seriesId);

package/FunnelChart/FunnelPlot.mjs

@@ -7,6 +7,7 @@ import { line as d3Line } from '@mui/x-charts-vendor/d3-shape';
 import { cartesianSeriesTypes, useStore } from '@mui/x-charts/internals';
 import { FunnelSection } from "./FunnelSection.mjs";
 import { alignLabel, positionLabel } from "./labelUtils.mjs";
+import { useUtilityClasses } from "./funnelClasses.mjs";
 import { useFunnelSeriesContext } from "../hooks/useFunnelSeries.mjs";
 import { getFunnelCurve } from "./curves/index.mjs";
 import { FunnelSectionLabel } from "./FunnelSectionLabel.mjs";
@@ -102,7 +103,9 @@ function FunnelPlot(props) {
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const data = useAggregatedData();
-  return /*#__PURE__*/_jsxs(React.Fragment, {
+  const classes = useUtilityClasses();
+  return /*#__PURE__*/_jsxs("g", {
+    className: classes.root,
     children: [data.map(series => {
       if (series.length === 0) {
         return null;
@@ -142,7 +145,8 @@ function FunnelPlot(props) {
           id,
           label,
           seriesId,
-          dataIndex
+          dataIndex,
+          variant
         }) => {
           if (!label || !label.value) {
             return null;
@@ -150,7 +154,8 @@ function FunnelPlot(props) {
           return /*#__PURE__*/_jsx(FunnelSectionLabel, _extends({
             label: label,
             dataIndex: dataIndex,
-            seriesId: seriesId
+            seriesId: seriesId,
+            variant: variant
           }, other), id);
         })
       }, series[0].seriesId);

package/FunnelChart/FunnelSection.d.mts

@@ -1,16 +1,16 @@
 import * as React from 'react';
 import { type SeriesId } from '@mui/x-charts/internals';
-import { type FunnelSectionClasses } from "./funnelSectionClasses.mjs";
+import { type FunnelClasses } from "./funnelClasses.mjs";
 export interface FunnelSectionProps extends Omit<React.SVGProps<SVGPathElement>, 'ref'> {
   seriesId: SeriesId;
   dataIndex: number;
   color: string;
-  classes?: Partial<FunnelSectionClasses>;
+  classes?: Partial<FunnelClasses>;
   variant?: 'filled' | 'outlined';
 }
 export declare const FunnelSectionPath: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<React.SVGProps<SVGPathElement>, keyof React.SVGProps<SVGPathElement>>, {}>;
 /**
  * @ignore - internal component.
  */
-declare const FunnelSection: React.ForwardRefExoticComponent<FunnelSectionProps & React.RefAttributes<{}>>;
+declare const FunnelSection: React.ForwardRefExoticComponent<FunnelSectionProps & React.RefAttributes<SVGPathElement>>;
 export { FunnelSection };

package/FunnelChart/FunnelSection.d.ts

@@ -1,16 +1,16 @@
 import * as React from 'react';
 import { type SeriesId } from '@mui/x-charts/internals';
-import { type FunnelSectionClasses } from "./funnelSectionClasses.js";
+import { type FunnelClasses } from "./funnelClasses.js";
 export interface FunnelSectionProps extends Omit<React.SVGProps<SVGPathElement>, 'ref'> {
   seriesId: SeriesId;
   dataIndex: number;
   color: string;
-  classes?: Partial<FunnelSectionClasses>;
+  classes?: Partial<FunnelClasses>;
   variant?: 'filled' | 'outlined';
 }
 export declare const FunnelSectionPath: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<React.SVGProps<SVGPathElement>, keyof React.SVGProps<SVGPathElement>>, {}>;
 /**
  * @ignore - internal component.
  */
-declare const FunnelSection: React.ForwardRefExoticComponent<FunnelSectionProps & React.RefAttributes<{}>>;
+declare const FunnelSection: React.ForwardRefExoticComponent<FunnelSectionProps & React.RefAttributes<SVGPathElement>>;
 export { FunnelSection };

package/FunnelChart/FunnelSection.js

@@ -14,12 +14,12 @@ var _styles = require("@mui/material/styles");
 var _internals = require("@mui/x-charts/internals");
 var _hooks = require("@mui/x-charts/hooks");
 var _clsx = _interopRequireDefault(require("clsx"));
-var _funnelSectionClasses = require("./funnelSectionClasses");
+var _funnelClasses = require("./funnelClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["seriesId", "dataIndex", "classes", "color", "onClick", "className", "variant"];
 const FunnelSectionPath = exports.FunnelSectionPath = (0, _styles.styled)('path', {
-  slot: 'internal',
-  shouldForwardProp: undefined
+  name: 'MuiFunnelChart',
+  slot: 'Section'
 })(() => ({
   transition: 'opacity 0.2s ease-in, fill 0.2s ease-in, fill-opacity 0.2s ease-in, filter 0.2s ease-in'
 }));
@@ -28,7 +28,7 @@ const FunnelSectionPath = exports.FunnelSectionPath = (0, _styles.styled)('path'
  * @ignore - internal component.
  */
 const FunnelSection = exports.FunnelSection = (0, _internals.consumeSlots)('MuiFunnelSection', 'funnelSection', {
-  classesResolver: _funnelSectionClasses.useUtilityClasses
+  classesResolver: _funnelClasses.useUtilityClasses
 }, /*#__PURE__*/React.forwardRef(function FunnelSection(props, ref) {
   const {
       seriesId,
@@ -46,10 +46,9 @@ const FunnelSection = exports.FunnelSection = (0, _internals.consumeSlots)('MuiF
     dataIndex
   }), [seriesId, dataIndex]);
   const interactionProps = (0, _internals.useInteractionItemProps)(identifier);
-  const {
-    isFaded,
-    isHighlighted
-  } = (0, _hooks.useItemHighlighted)(identifier);
+  const highlightState = (0, _hooks.useItemHighlightState)(identifier);
+  const isHighlighted = highlightState === 'highlighted';
+  const isFaded = highlightState === 'faded';
   const isOutlined = variant === 'outlined';
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(FunnelSectionPath, (0, _extends2.default)({}, interactionProps, {
     filter: isHighlighted && !isOutlined ? 'brightness(120%)' : undefined,
@@ -63,7 +62,7 @@ const FunnelSection = exports.FunnelSection = (0, _internals.consumeSlots)('MuiF
     onClick: onClick,
     "data-highlighted": isHighlighted || undefined,
     "data-faded": isFaded || undefined,
-    className: (0, _clsx.default)(classes?.root, className, isOutlined ? classes?.outlined : classes?.filled, isHighlighted && classes?.highlighted, isFaded && classes?.faded)
+    className: (0, _clsx.default)(classes?.section, className)
   }, other, {
     ref: ref
   }));

package/FunnelChart/FunnelSection.mjs

@@ -6,13 +6,13 @@ const _excluded = ["seriesId", "dataIndex", "classes", "color", "onClick", "clas
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import { useInteractionItemProps, consumeSlots } from '@mui/x-charts/internals';
-import { useItemHighlighted } from '@mui/x-charts/hooks';
+import { useItemHighlightState } from '@mui/x-charts/hooks';
 import clsx from 'clsx';
-import { useUtilityClasses } from "./funnelSectionClasses.mjs";
+import { useUtilityClasses } from "./funnelClasses.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const FunnelSectionPath = styled('path', {
-  slot: 'internal',
-  shouldForwardProp: undefined
+  name: 'MuiFunnelChart',
+  slot: 'Section'
 })(() => ({
   transition: 'opacity 0.2s ease-in, fill 0.2s ease-in, fill-opacity 0.2s ease-in, filter 0.2s ease-in'
 }));
@@ -39,10 +39,9 @@ const FunnelSection = consumeSlots('MuiFunnelSection', 'funnelSection', {
     dataIndex
   }), [seriesId, dataIndex]);
   const interactionProps = useInteractionItemProps(identifier);
-  const {
-    isFaded,
-    isHighlighted
-  } = useItemHighlighted(identifier);
+  const highlightState = useItemHighlightState(identifier);
+  const isHighlighted = highlightState === 'highlighted';
+  const isFaded = highlightState === 'faded';
   const isOutlined = variant === 'outlined';
   return /*#__PURE__*/_jsx(FunnelSectionPath, _extends({}, interactionProps, {
     filter: isHighlighted && !isOutlined ? 'brightness(120%)' : undefined,
@@ -56,7 +55,7 @@ const FunnelSection = consumeSlots('MuiFunnelSection', 'funnelSection', {
     onClick: onClick,
     "data-highlighted": isHighlighted || undefined,
     "data-faded": isFaded || undefined,
-    className: clsx(classes?.root, className, isOutlined ? classes?.outlined : classes?.filled, isHighlighted && classes?.highlighted, isFaded && classes?.faded)
+    className: clsx(classes?.section, className)
   }, other, {
     ref: ref
   }));

package/FunnelChart/FunnelSectionLabel.d.mts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type SeriesId } from '@mui/x-charts/internals';
-import { type FunnelSectionClasses } from "./funnelSectionClasses.mjs";
+import { type FunnelClasses } from "./funnelClasses.mjs";
 export interface FunnelSectionLabelConfig {
   x: number;
   y: number;
@@ -9,13 +9,19 @@ export interface FunnelSectionLabelConfig {
   dominantBaseline?: React.SVGProps<SVGTextElement>['dominantBaseline'];
 }
 export interface FunnelSectionLabelProps extends Omit<React.SVGProps<SVGTextElement>, 'ref' | 'id'> {
-  classes?: Partial<FunnelSectionClasses>;
+  classes?: Partial<FunnelClasses>;
   label: FunnelSectionLabelConfig;
+  /**
+   * Indicate if the section is filled or outlined.
+   * Can be used to apply different styles to the label.
+   */
+  variant?: 'filled' | 'outlined';
   seriesId: SeriesId;
   dataIndex: number;
 }
+export declare const FunnelSectionLabelText: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<React.SVGTextElementAttributes<SVGTextElement>, keyof React.SVGTextElementAttributes<SVGTextElement>>, {}>;
 /**
  * @ignore - internal component.
  */
-declare const FunnelSectionLabel: React.ForwardRefExoticComponent<FunnelSectionLabelProps & React.RefAttributes<{}>>;
+declare const FunnelSectionLabel: React.ForwardRefExoticComponent<FunnelSectionLabelProps & React.RefAttributes<SVGTextElement>>;
 export { FunnelSectionLabel };

package/FunnelChart/FunnelSectionLabel.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type SeriesId } from '@mui/x-charts/internals';
-import { type FunnelSectionClasses } from "./funnelSectionClasses.js";
+import { type FunnelClasses } from "./funnelClasses.js";
 export interface FunnelSectionLabelConfig {
   x: number;
   y: number;
@@ -9,13 +9,19 @@ export interface FunnelSectionLabelConfig {
   dominantBaseline?: React.SVGProps<SVGTextElement>['dominantBaseline'];
 }
 export interface FunnelSectionLabelProps extends Omit<React.SVGProps<SVGTextElement>, 'ref' | 'id'> {
-  classes?: Partial<FunnelSectionClasses>;
+  classes?: Partial<FunnelClasses>;
   label: FunnelSectionLabelConfig;
+  /**
+   * Indicate if the section is filled or outlined.
+   * Can be used to apply different styles to the label.
+   */
+  variant?: 'filled' | 'outlined';
   seriesId: SeriesId;
   dataIndex: number;
 }
+export declare const FunnelSectionLabelText: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<React.SVGTextElementAttributes<SVGTextElement>, keyof React.SVGTextElementAttributes<SVGTextElement>>, {}>;
 /**
  * @ignore - internal component.
  */
-declare const FunnelSectionLabel: React.ForwardRefExoticComponent<FunnelSectionLabelProps & React.RefAttributes<{}>>;
+declare const FunnelSectionLabel: React.ForwardRefExoticComponent<FunnelSectionLabelProps & React.RefAttributes<SVGTextElement>>;
 export { FunnelSectionLabel };

package/FunnelChart/FunnelSectionLabel.js

@@ -6,28 +6,37 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.FunnelSectionLabel = void 0;
+exports.FunnelSectionLabelText = exports.FunnelSectionLabel = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _styles = require("@mui/material/styles");
 var _internals = require("@mui/x-charts/internals");
-var _funnelSectionClasses = require("./funnelSectionClasses");
+var _clsx = _interopRequireDefault(require("clsx"));
+var _funnelClasses = require("./funnelClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["classes", "color", "onClick", "className", "label", "seriesId", "dataIndex"];
+const _excluded = ["classes", "color", "onClick", "className", "label", "variant", "seriesId", "dataIndex"];
+const FunnelSectionLabelText = exports.FunnelSectionLabelText = (0, _styles.styled)('text', {
+  name: 'MuiFunnelChart',
+  slot: 'SectionLabel'
+})(() => ({
+  transition: 'opacity 0.2s ease-in, fill 0.2s ease-in, fill-opacity 0.2s ease-in, filter 0.2s ease-in'
+}));
+
 /**
  * @ignore - internal component.
  */
 const FunnelSectionLabel = exports.FunnelSectionLabel = (0, _internals.consumeSlots)('MuiFunnelSectionLabel', 'funnelSectionLabel', {
-  classesResolver: _funnelSectionClasses.useLabelUtilityClasses
+  classesResolver: _funnelClasses.useUtilityClasses
 }, /*#__PURE__*/React.forwardRef(function FunnelSectionLabel(props, ref) {
   const {
       classes,
+      className,
       label
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const theme = (0, _styles.useTheme)();
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("text", (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(FunnelSectionLabelText, (0, _extends2.default)({
     stroke: "none",
     pointerEvents: "none",
     fontFamily: theme.typography.body2.fontFamily,
@@ -39,7 +48,7 @@ const FunnelSectionLabel = exports.FunnelSectionLabel = (0, _internals.consumeSl
     fontStyle: theme.typography.body2.fontStyle,
     fontVariant: theme.typography.body2.fontVariant,
     fill: (theme.vars || theme)?.palette?.text?.primary,
-    className: classes?.label,
+    className: (0, _clsx.default)(classes?.sectionLabel, className),
     x: label.x,
     y: label.y,
     textAnchor: label.textAnchor ?? 'middle',