@mui/x-charts 9.0.0-alpha.3 → 9.0.0-alpha.4

package/PieChart/PieChart.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { type MakeOptional } from '@mui/x-internals/types';
 import { type ChartsToolbarSlotProps, type ChartsToolbarSlots } from "../Toolbar/index.js";
 import { type ChartsSlotProps, type ChartsSlots } from "../internals/material/index.js";
-import { type ChartContainerProps } from "../ChartContainer/index.js";
+import { type ChartsContainerProps } from "../ChartsContainer/index.js";
 import { type PieSeriesType } from "../models/seriesType/index.js";
 import { type ChartsTooltipSlots, type ChartsTooltipSlotProps } from "../ChartsTooltip/ChartTooltip.types.js";
 import { type ChartsLegendSlotProps, type ChartsLegendSlots } from "../ChartsLegend/index.js";
@@ -13,7 +13,7 @@ import { type PieChartPluginSignatures } from "./PieChart.plugins.js";
 export interface PieChartSlots extends PiePlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots<'item' | 'none'>, ChartsToolbarSlots, Partial<ChartsSlots> {}
 export interface PieChartSlotProps extends PiePlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsTooltipSlotProps<'item' | 'none'>, ChartsToolbarSlotProps, Partial<ChartsSlotProps> {}
 export type PieSeries = MakeOptional<PieSeriesType<MakeOptional<PieValueType, 'id'>>, 'type'>;
-export interface PieChartProps extends Omit<ChartContainerProps<'pie', PieChartPluginSignatures>, 'series' | 'slots' | 'slotProps' | 'experimentalFeatures'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, Pick<PiePlotProps, 'skipAnimation'> {
+export interface PieChartProps extends Omit<ChartsContainerProps<'pie', PieChartPluginSignatures>, 'series' | 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, Pick<PiePlotProps, 'skipAnimation'> {
   /**
    * The series to display in the pie chart.
    * An array of [[PieSeries]] objects.

package/PieChart/PieChart.js

@@ -18,8 +18,8 @@ var _ChartsLegend = require("../ChartsLegend");
 var _PiePlot = require("./PiePlot");
 var _ChartsOverlay = require("../ChartsOverlay");
 var _ChartsSurface = require("../ChartsSurface");
-var _ChartDataProvider = require("../ChartDataProvider");
-var _useChartContainerProps = require("../ChartContainer/useChartContainerProps");
+var _ChartsDataProvider = require("../ChartsDataProvider");
+var _useChartsContainerProps = require("../ChartsContainer/useChartsContainerProps");
 var _ChartsWrapper = require("../ChartsWrapper");
 var _PieChart2 = require("./PieChart.plugins");
 var _defaultizeMargin = require("../internals/defaultizeMargin");
@@ -63,9 +63,9 @@ const PieChart = exports.PieChart = /*#__PURE__*/React.forwardRef(function PieCh
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const margin = (0, _defaultizeMargin.defaultizeMargin)(marginProps, _constants.DEFAULT_PIE_CHART_MARGIN);
   const {
-    chartDataProviderProps,
+    chartsDataProviderProps,
     chartsSurfaceProps
-  } = (0, _useChartContainerProps.useChartContainerProps)((0, _extends2.default)({}, other, {
+  } = (0, _useChartsContainerProps.useChartsContainerProps)((0, _extends2.default)({}, other, {
     series: series.map(s => (0, _extends2.default)({
       type: 'pie'
     }, s)),
@@ -80,7 +80,7 @@ const PieChart = exports.PieChart = /*#__PURE__*/React.forwardRef(function PieCh
   }));
   const Tooltip = slots?.tooltip ?? _ChartsTooltip.ChartsTooltip;
   const Toolbar = slots?.toolbar;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProvider.ChartDataProvider, (0, _extends2.default)({}, chartDataProviderProps, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsDataProvider.ChartsDataProvider, (0, _extends2.default)({}, chartsDataProviderProps, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsWrapper.ChartsWrapper, {
       legendPosition: slotProps?.legend?.position,
       legendDirection: slotProps?.legend?.direction ?? 'vertical',
@@ -128,11 +128,19 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    * An array of objects that can be used to populate series and axes data using their `dataKey` property.
    */
   dataset: _propTypes.default.arrayOf(_propTypes.default.object),
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
   desc: _propTypes.default.string,
   /**
    * 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 height of the chart in px. If not defined, it takes the height of the parent element.
    */
@@ -286,6 +294,10 @@ process.env.NODE_ENV !== "production" ? PieChart.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/PieChart/PieChart.mjs

@@ -12,8 +12,8 @@ import { ChartsLegend } from "../ChartsLegend/index.mjs";
 import { PiePlot } from "./PiePlot.mjs";
 import { ChartsOverlay } from "../ChartsOverlay/index.mjs";
 import { ChartsSurface } from "../ChartsSurface/index.mjs";
-import { ChartDataProvider } from "../ChartDataProvider/index.mjs";
-import { useChartContainerProps } from "../ChartContainer/useChartContainerProps.mjs";
+import { ChartsDataProvider } from "../ChartsDataProvider/index.mjs";
+import { useChartsContainerProps } from "../ChartsContainer/useChartsContainerProps.mjs";
 import { ChartsWrapper } from "../ChartsWrapper/index.mjs";
 import { PIE_CHART_PLUGINS } from "./PieChart.plugins.mjs";
 import { defaultizeMargin } from "../internals/defaultizeMargin.mjs";
@@ -56,9 +56,9 @@ const PieChart = /*#__PURE__*/React.forwardRef(function PieChart(inProps, ref) {
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const margin = defaultizeMargin(marginProps, DEFAULT_PIE_CHART_MARGIN);
   const {
-    chartDataProviderProps,
+    chartsDataProviderProps,
     chartsSurfaceProps
-  } = useChartContainerProps(_extends({}, other, {
+  } = useChartsContainerProps(_extends({}, other, {
     series: series.map(s => _extends({
       type: 'pie'
     }, s)),
@@ -73,7 +73,7 @@ const PieChart = /*#__PURE__*/React.forwardRef(function PieChart(inProps, ref) {
   }));
   const Tooltip = slots?.tooltip ?? ChartsTooltip;
   const Toolbar = slots?.toolbar;
-  return /*#__PURE__*/_jsx(ChartDataProvider, _extends({}, chartDataProviderProps, {
+  return /*#__PURE__*/_jsx(ChartsDataProvider, _extends({}, chartsDataProviderProps, {
     children: /*#__PURE__*/_jsxs(ChartsWrapper, {
       legendPosition: slotProps?.legend?.position,
       legendDirection: slotProps?.legend?.direction ?? 'vertical',
@@ -121,11 +121,19 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    * An array of objects that can be used to populate series and axes data using their `dataKey` property.
    */
   dataset: PropTypes.arrayOf(PropTypes.object),
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
   desc: PropTypes.string,
   /**
    * If `true`, disables keyboard navigation for the chart.
    */
   disableKeyboardNavigation: PropTypes.bool,
+  /**
+   * Options to enable features planned for the next major.
+   */
+  experimentalFeatures: PropTypes.object,
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
@@ -279,6 +287,10 @@ process.env.NODE_ENV !== "production" ? PieChart.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/PieChart/index.d.mts

@@ -8,4 +8,4 @@ export * from "./PieArcLabel.mjs";
 export * from "./getPieCoordinates.mjs";
 export * from "./PieChart.plugins.mjs";
 export { pieClasses } from "./pieClasses.mjs";
-export type { PieClasses, PieClassKey } from "./pieClasses.mjs";
+export type { PieClasses, PieClassKey, PieArcOwnerState } from "./pieClasses.mjs";

package/PieChart/index.d.ts

@@ -8,4 +8,4 @@ export * from "./PieArcLabel.js";
 export * from "./getPieCoordinates.js";
 export * from "./PieChart.plugins.js";
 export { pieClasses } from "./pieClasses.js";
-export type { PieClasses, PieClassKey } from "./pieClasses.js";
+export type { PieClasses, PieClassKey, PieArcOwnerState } from "./pieClasses.js";

package/PieChart/seriesConfig/legend.js

@@ -16,12 +16,10 @@ const legendGetter = params => {
       if (formattedLabel === undefined) {
         return;
       }
-      const id = item.id ?? dataIndex;
       acc.push({
         type: 'pie',
         markType: item.labelMarkType ?? series[seriesId].labelMarkType,
         seriesId,
-        itemId: id,
         dataIndex,
         color: item.color,
         label: formattedLabel

package/PieChart/seriesConfig/legend.mjs

@@ -10,12 +10,10 @@ const legendGetter = params => {
       if (formattedLabel === undefined) {
         return;
       }
-      const id = item.id ?? dataIndex;
       acc.push({
         type: 'pie',
         markType: item.labelMarkType ?? series[seriesId].labelMarkType,
         seriesId,
-        itemId: id,
         dataIndex,
         color: item.color,
         label: formattedLabel

package/RadarChart/RadarAxis/RadarAxis.d.mts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type UseRadarAxisParams } from "./useRadarAxis.mjs";
-import { type RadarAxisClasses } from "./radarAxisClasses.mjs";
+import { type RadarClasses } from "../radarClasses.mjs";
 export interface RadarAxisProps extends UseRadarAxisParams {
   /**
    * Defines how label align with the axis.
@@ -17,10 +17,14 @@ export interface RadarAxisProps extends UseRadarAxisParams {
    * The labels dominant baseline or a function returning the dominant baseline for a given axis angle (in degree).
    */
   dominantBaseline?: React.SVGProps<SVGTextElement>['dominantBaseline'] | ((angle: number) => React.SVGProps<SVGTextElement>['dominantBaseline']);
+  /**
+   * A CSS class name applied to the root element.
+   */
+  className?: string;
   /**
    * Override or extend the styles applied to the component.
    */
-  classes?: Partial<RadarAxisClasses>;
+  classes?: Partial<Pick<RadarClasses, 'axisRoot' | 'axisLine' | 'axisLabel'>>;
 }
 declare function RadarAxis(props: RadarAxisProps): import("react/jsx-runtime").JSX.Element | null;
 declare namespace RadarAxis {

package/RadarChart/RadarAxis/RadarAxis.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type UseRadarAxisParams } from "./useRadarAxis.js";
-import { type RadarAxisClasses } from "./radarAxisClasses.js";
+import { type RadarClasses } from "../radarClasses.js";
 export interface RadarAxisProps extends UseRadarAxisParams {
   /**
    * Defines how label align with the axis.
@@ -17,10 +17,14 @@ export interface RadarAxisProps extends UseRadarAxisParams {
    * The labels dominant baseline or a function returning the dominant baseline for a given axis angle (in degree).
    */
   dominantBaseline?: React.SVGProps<SVGTextElement>['dominantBaseline'] | ((angle: number) => React.SVGProps<SVGTextElement>['dominantBaseline']);
+  /**
+   * A CSS class name applied to the root element.
+   */
+  className?: string;
   /**
    * Override or extend the styles applied to the component.
    */
-  classes?: Partial<RadarAxisClasses>;
+  classes?: Partial<Pick<RadarClasses, 'axisRoot' | 'axisLine' | 'axisLabel'>>;
 }
 declare function RadarAxis(props: RadarAxisProps): import("react/jsx-runtime").JSX.Element | null;
 declare namespace RadarAxis {

package/RadarChart/RadarAxis/RadarAxis.js

@@ -9,18 +9,20 @@ exports.RadarAxis = RadarAxis;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _styles = require("@mui/material/styles");
 var _useRadarAxis = require("./useRadarAxis");
 var _RadarAxis = require("./RadarAxis.utils");
-var _radarAxisClasses = require("./radarAxisClasses");
+var _radarClasses = require("../radarClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 function RadarAxis(props) {
   const {
+    className,
     labelOrientation = 'horizontal',
     textAnchor,
     dominantBaseline
   } = props;
-  const classes = (0, _radarAxisClasses.useUtilityClasses)(props.classes);
+  const classes = (0, _radarClasses.useUtilityClasses)(props.classes);
   const theme = (0, _styles.useTheme)();
   const data = (0, _useRadarAxis.useRadarAxis)(props);
   if (data === null) {
@@ -32,12 +34,12 @@ function RadarAxis(props) {
     labels
   } = data;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
-    className: classes.root,
+    className: (0, _clsx.default)(classes.axisRoot, className),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
       d: `M ${center.x} ${center.y} L ${labels[labels.length - 1].x} ${labels[labels.length - 1].y}`,
       stroke: (theme.vars ?? theme).palette.text.primary,
       strokeOpacity: 0.3,
-      className: classes.line
+      className: classes.axisLine
     }), labels.map(({
       x,
       y,
@@ -46,7 +48,7 @@ function RadarAxis(props) {
       fontSize: 12,
       fill: (theme.vars ?? theme).palette.text.primary,
       stroke: "none",
-      className: classes.label
+      className: classes.axisLabel
     }, (0, _RadarAxis.getLabelAttributes)({
       labelOrientation,
       x,

package/RadarChart/RadarAxis/RadarAxis.mjs

@@ -1,13 +1,15 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import clsx from 'clsx';
 import { useTheme } from '@mui/material/styles';
 import { useRadarAxis } from "./useRadarAxis.mjs";
 import { getLabelAttributes } from "./RadarAxis.utils.mjs";
-import { useUtilityClasses } from "./radarAxisClasses.mjs";
+import { useUtilityClasses } from "../radarClasses.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function RadarAxis(props) {
   const {
+    className,
     labelOrientation = 'horizontal',
     textAnchor,
     dominantBaseline
@@ -24,12 +26,12 @@ function RadarAxis(props) {
     labels
   } = data;
   return /*#__PURE__*/_jsxs("g", {
-    className: classes.root,
+    className: clsx(classes.axisRoot, className),
     children: [/*#__PURE__*/_jsx("path", {
       d: `M ${center.x} ${center.y} L ${labels[labels.length - 1].x} ${labels[labels.length - 1].y}`,
       stroke: (theme.vars ?? theme).palette.text.primary,
       strokeOpacity: 0.3,
-      className: classes.line
+      className: classes.axisLine
     }), labels.map(({
       x,
       y,
@@ -38,7 +40,7 @@ function RadarAxis(props) {
       fontSize: 12,
       fill: (theme.vars ?? theme).palette.text.primary,
       stroke: "none",
-      className: classes.label
+      className: classes.axisLabel
     }, getLabelAttributes({
       labelOrientation,
       x,

package/RadarChart/RadarAxis/index.d.mts

@@ -1,3 +1,2 @@
 export * from "./RadarAxis.mjs";
-export * from "./useRadarAxis.mjs";
-export { type RadarAxisClasses, chartsAxisClasses } from "./radarAxisClasses.mjs";
+export * from "./useRadarAxis.mjs";

package/RadarChart/RadarAxis/index.d.ts

@@ -1,3 +1,2 @@
 export * from "./RadarAxis.js";
-export * from "./useRadarAxis.js";
-export { type RadarAxisClasses, chartsAxisClasses } from "./radarAxisClasses.js";
+export * from "./useRadarAxis.js";

package/RadarChart/RadarAxis/index.js

@@ -3,19 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _exportNames = {
-  chartsAxisClasses: true
-};
-Object.defineProperty(exports, "chartsAxisClasses", {
-  enumerable: true,
-  get: function () {
-    return _radarAxisClasses.chartsAxisClasses;
-  }
-});
 var _RadarAxis = require("./RadarAxis");
 Object.keys(_RadarAxis).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _RadarAxis[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -27,7 +17,6 @@ Object.keys(_RadarAxis).forEach(function (key) {
 var _useRadarAxis = require("./useRadarAxis");
 Object.keys(_useRadarAxis).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _useRadarAxis[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -35,5 +24,4 @@ Object.keys(_useRadarAxis).forEach(function (key) {
       return _useRadarAxis[key];
     }
   });
-});
-var _radarAxisClasses = require("./radarAxisClasses");
+});

package/RadarChart/RadarAxis/index.mjs

@@ -1,3 +1,2 @@
 export * from "./RadarAxis.mjs";
-export * from "./useRadarAxis.mjs";
-export { chartsAxisClasses } from "./radarAxisClasses.mjs";
+export * from "./useRadarAxis.mjs";

package/RadarChart/RadarAxis/useRadarAxis.js

@@ -7,7 +7,7 @@ exports.useRadarAxis = useRadarAxis;
 var _warning = require("@mui/x-internals/warning");
 var _useAxis = require("../../hooks/useAxis");
 var _useScale = require("../../hooks/useScale");
-var _useChartContext = require("../../context/ChartProvider/useChartContext");
+var _useChartsContext = require("../../context/ChartsProvider/useChartsContext");
 var _useChartPolarAxis = require("../../internals/plugins/featurePlugins/useChartPolarAxis");
 var _scaleGuards = require("../../internals/scaleGuards");
 var _degToRad = require("../../internals/degToRad");
@@ -25,7 +25,7 @@ function useRadarAxis(params) {
   const {
     instance,
     store
-  } = (0, _useChartContext.useChartContext)();
+  } = (0, _useChartsContext.useChartsContext)();
   const rotationScale = (0, _useScale.useRotationScale)();
   const {
     radiusAxis

package/RadarChart/RadarAxis/useRadarAxis.mjs

@@ -1,7 +1,7 @@
 import { warnOnce } from '@mui/x-internals/warning';
 import { useRadiusAxes } from "../../hooks/useAxis.mjs";
 import { useRotationScale } from "../../hooks/useScale.mjs";
-import { useChartContext } from "../../context/ChartProvider/useChartContext.mjs";
+import { useChartsContext } from "../../context/ChartsProvider/useChartsContext.mjs";
 import { selectorChartPolarCenter } from "../../internals/plugins/featurePlugins/useChartPolarAxis/index.mjs";
 import { isOrdinalScale } from "../../internals/scaleGuards.mjs";
 import { degToRad } from "../../internals/degToRad.mjs";
@@ -19,7 +19,7 @@ export function useRadarAxis(params) {
   const {
     instance,
     store
-  } = useChartContext();
+  } = useChartsContext();
   const rotationScale = useRotationScale();
   const {
     radiusAxis

package/RadarChart/RadarAxisHighlight/RadarAxisHighlight.d.mts

@@ -1,9 +1,13 @@
-import { type RadarAxisHighlightClasses } from "./radarAxisHighlightClasses.mjs";
+import { type RadarClasses } from "../radarClasses.mjs";
 export interface RadarAxisHighlightProps {
+  /**
+   * A CSS class name applied to the root element.
+   */
+  className?: string;
   /**
    * Override or extend the styles applied to the component.
    */
-  classes?: Partial<RadarAxisHighlightClasses>;
+  classes?: Partial<Pick<RadarClasses, 'axisHighlightRoot' | 'axisHighlightLine' | 'axisHighlightDot'>>;
 }
 declare function RadarAxisHighlight(props: RadarAxisHighlightProps): import("react/jsx-runtime").JSX.Element | null;
 declare namespace RadarAxisHighlight {

package/RadarChart/RadarAxisHighlight/RadarAxisHighlight.d.ts

@@ -1,9 +1,13 @@
-import { type RadarAxisHighlightClasses } from "./radarAxisHighlightClasses.js";
+import { type RadarClasses } from "../radarClasses.js";
 export interface RadarAxisHighlightProps {
+  /**
+   * A CSS class name applied to the root element.
+   */
+  className?: string;
   /**
    * Override or extend the styles applied to the component.
    */
-  classes?: Partial<RadarAxisHighlightClasses>;
+  classes?: Partial<Pick<RadarClasses, 'axisHighlightRoot' | 'axisHighlightLine' | 'axisHighlightDot'>>;
 }
 declare function RadarAxisHighlight(props: RadarAxisHighlightProps): import("react/jsx-runtime").JSX.Element | null;
 declare namespace RadarAxisHighlight {

package/RadarChart/RadarAxisHighlight/RadarAxisHighlight.js

@@ -7,20 +7,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.RadarAxisHighlight = RadarAxisHighlight;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _styles = require("@mui/material/styles");
-var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _useRadarAxisHighlight = require("./useRadarAxisHighlight");
-var _radarAxisHighlightClasses = require("./radarAxisHighlightClasses");
+var _radarClasses = require("../radarClasses");
 var _getSeriesColorFn = require("../../internals/getSeriesColorFn");
 var _jsxRuntime = require("react/jsx-runtime");
-const useUtilityClasses = classes => {
-  const slots = {
-    root: ['root'],
-    line: ['line'],
-    dot: ['dot']
-  };
-  return (0, _composeClasses.default)(slots, _radarAxisHighlightClasses.getRadarAxisHighlightUtilityClass, classes);
-};
 /**
  * Attributes to display a shadow around a mark.
  */
@@ -37,7 +29,10 @@ const highlightMark = {
   opacity: 1
 };
 function RadarAxisHighlight(props) {
-  const classes = useUtilityClasses(props.classes);
+  const {
+    className
+  } = props;
+  const classes = (0, _radarClasses.useUtilityClasses)(props.classes);
   const theme = (0, _styles.useTheme)();
   const data = (0, _useRadarAxisHighlight.useRadarAxisHighlight)();
   if (data === null) {
@@ -54,12 +49,12 @@ function RadarAxisHighlight(props) {
   } = data;
   const [x, y] = instance.polar2svg(radius, highlightedAngle);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
-    className: classes.root,
+    className: (0, _clsx.default)(classes.axisHighlightRoot, className),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
       d: `M ${center.cx} ${center.cy} L ${x} ${y}`,
       stroke: (theme.vars || theme).palette.text.primary,
       strokeWidth: 1,
-      className: classes.line,
+      className: classes.axisHighlightLine,
       pointerEvents: "none",
       strokeDasharray: "4 4"
     }), points.map((point, seriesIndex) => {
@@ -71,7 +66,7 @@ function RadarAxisHighlight(props) {
         }),
         cx: point.x,
         cy: point.y,
-        className: classes.dot,
+        className: classes.axisHighlightDot,
         pointerEvents: "none"
       }, series[seriesIndex].hideMark ? highlightMark : highlightMarkShadow), series[seriesIndex].id);
     })]

package/RadarChart/RadarAxisHighlight/RadarAxisHighlight.mjs

@@ -1,19 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import PropTypes from 'prop-types';
+import clsx from 'clsx';
 import { useTheme } from '@mui/material/styles';
-import composeClasses from '@mui/utils/composeClasses';
 import { useRadarAxisHighlight } from "./useRadarAxisHighlight.mjs";
-import { getRadarAxisHighlightUtilityClass } from "./radarAxisHighlightClasses.mjs";
+import { useUtilityClasses } from "../radarClasses.mjs";
 import { getSeriesColorFn } from "../../internals/getSeriesColorFn.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useUtilityClasses = classes => {
-  const slots = {
-    root: ['root'],
-    line: ['line'],
-    dot: ['dot']
-  };
-  return composeClasses(slots, getRadarAxisHighlightUtilityClass, classes);
-};
 /**
  * Attributes to display a shadow around a mark.
  */
@@ -30,6 +22,9 @@ const highlightMark = {
   opacity: 1
 };
 function RadarAxisHighlight(props) {
+  const {
+    className
+  } = props;
   const classes = useUtilityClasses(props.classes);
   const theme = useTheme();
   const data = useRadarAxisHighlight();
@@ -47,12 +42,12 @@ function RadarAxisHighlight(props) {
   } = data;
   const [x, y] = instance.polar2svg(radius, highlightedAngle);
   return /*#__PURE__*/_jsxs("g", {
-    className: classes.root,
+    className: clsx(classes.axisHighlightRoot, className),
     children: [/*#__PURE__*/_jsx("path", {
       d: `M ${center.cx} ${center.cy} L ${x} ${y}`,
       stroke: (theme.vars || theme).palette.text.primary,
       strokeWidth: 1,
-      className: classes.line,
+      className: classes.axisHighlightLine,
       pointerEvents: "none",
       strokeDasharray: "4 4"
     }), points.map((point, seriesIndex) => {
@@ -64,7 +59,7 @@ function RadarAxisHighlight(props) {
         }),
         cx: point.x,
         cy: point.y,
-        className: classes.dot,
+        className: classes.axisHighlightDot,
         pointerEvents: "none"
       }, series[seriesIndex].hideMark ? highlightMark : highlightMarkShadow), series[seriesIndex].id);
     })]

package/RadarChart/RadarAxisHighlight/index.d.mts

@@ -1,2 +1 @@
-export * from "./RadarAxisHighlight.mjs";
-export { type RadarAxisHighlightClasses } from "./radarAxisHighlightClasses.mjs";
+export * from "./RadarAxisHighlight.mjs";

package/RadarChart/RadarAxisHighlight/index.d.ts

@@ -1,2 +1 @@
-export * from "./RadarAxisHighlight.js";
-export { type RadarAxisHighlightClasses } from "./radarAxisHighlightClasses.js";
+export * from "./RadarAxisHighlight.js";

package/RadarChart/RadarAxisHighlight/index.mjs

@@ -1,2 +1 @@
-export * from "./RadarAxisHighlight.mjs";
-export {};
+export * from "./RadarAxisHighlight.mjs";

package/RadarChart/RadarAxisHighlight/useRadarAxisHighlight.js

@@ -8,7 +8,7 @@ var _useAxis = require("../../hooks/useAxis");
 var _useRadarSeries = require("../../hooks/useRadarSeries");
 var _useScale = require("../../hooks/useScale");
 var _useStore = require("../../internals/store/useStore");
-var _useChartContext = require("../../context/ChartProvider/useChartContext");
+var _useChartsContext = require("../../context/ChartsProvider/useChartsContext");
 var _useChartPolarAxis = require("../../internals/plugins/featurePlugins/useChartPolarAxis");
 var _useChartPolarInteraction = require("../../internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarInteraction.selectors");
 function useRadarAxisHighlight() {
@@ -20,7 +20,7 @@ function useRadarAxisHighlight() {
   } = (0, _useAxis.useRadiusAxes)();
   const {
     instance
-  } = (0, _useChartContext.useChartContext)();
+  } = (0, _useChartsContext.useChartsContext)();
   const store = (0, _useStore.useStore)();
   const rotationAxisIndex = store.use(_useChartPolarInteraction.selectorChartsInteractionRotationAxisIndex);
   const rotationAxisValue = store.use(_useChartPolarInteraction.selectorChartsInteractionRotationAxisValue);

package/RadarChart/RadarAxisHighlight/useRadarAxisHighlight.mjs

@@ -2,7 +2,7 @@ import { useRadiusAxes } from "../../hooks/useAxis.mjs";
 import { useRadarSeries } from "../../hooks/useRadarSeries.mjs";
 import { useRotationScale } from "../../hooks/useScale.mjs";
 import { useStore } from "../../internals/store/useStore.mjs";
-import { useChartContext } from "../../context/ChartProvider/useChartContext.mjs";
+import { useChartsContext } from "../../context/ChartsProvider/useChartsContext.mjs";
 import { selectorChartPolarCenter } from "../../internals/plugins/featurePlugins/useChartPolarAxis/index.mjs";
 import { selectorChartsInteractionRotationAxisIndex, selectorChartsInteractionRotationAxisValue } from "../../internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarInteraction.selectors.mjs";
 export function useRadarAxisHighlight() {
@@ -14,7 +14,7 @@ export function useRadarAxisHighlight() {
   } = useRadiusAxes();
   const {
     instance
-  } = useChartContext();
+  } = useChartsContext();
   const store = useStore();
   const rotationAxisIndex = store.use(selectorChartsInteractionRotationAxisIndex);
   const rotationAxisValue = store.use(selectorChartsInteractionRotationAxisValue);