@mui/x-charts 8.27.5 → 8.28.2

package/esm/PieChart/PieArcPlot.js

@@ -5,9 +5,14 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["slots", "slotProps", "innerRadius", "outerRadius", "cornerRadius", "paddingAngle", "id", "highlighted", "faded", "data", "onItemClick", "skipAnimation"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
 import { PieArc } from "./PieArc.js";
 import { useTransformData } from "./dataTransform/useTransformData.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+const PieArcPlotRoot = styled('g', {
+  name: 'MuiPieArcPlot',
+  slot: 'Root'
+})();
 function PieArcPlot(props) {
   const {
       slots,
@@ -40,7 +45,7 @@ function PieArcPlot(props) {
     return null;
   }
   const Arc = slots?.pieArc ?? PieArc;
-  return /*#__PURE__*/_jsx("g", _extends({}, other, {
+  return /*#__PURE__*/_jsx(PieArcPlotRoot, _extends({}, other, {
     children: transformedData.map((item, index) => /*#__PURE__*/_jsx(Arc, _extends({
       startAngle: item.startAngle,
       endAngle: item.endAngle,

package/esm/PieChart/PiePlot.d.ts

@@ -3,6 +3,7 @@ import { type PieArcLabelPlotSlots, type PieArcLabelPlotSlotProps } from "./PieA
 export interface PiePlotSlots extends PieArcPlotSlots, PieArcLabelPlotSlots {}
 export interface PiePlotSlotProps extends PieArcPlotSlotProps, PieArcLabelPlotSlotProps {}
 export interface PiePlotProps extends Pick<PieArcPlotProps, 'skipAnimation' | 'onItemClick'> {
+  className?: string;
   /**
    * Overridable component slots.
    * @default {}

package/esm/PieChart/PiePlot.js

@@ -1,5 +1,6 @@
 'use client';
 
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import { PieArcPlot } from "./PieArcPlot.js";
 import { PieArcLabelPlot } from "./PieArcLabelPlot.js";
@@ -22,7 +23,8 @@ function PiePlot(props) {
     skipAnimation: inSkipAnimation,
     slots,
     slotProps,
-    onItemClick
+    onItemClick,
+    className
   } = props;
   const seriesData = usePieSeriesContext();
   const seriesLayout = usePieSeriesLayout();
@@ -36,6 +38,7 @@ function PiePlot(props) {
     seriesOrder
   } = seriesData;
   return /*#__PURE__*/_jsxs("g", {
+    className: clsx(classes.root, className),
     children: [seriesOrder.map(seriesId => {
       const {
         cornerRadius,

package/esm/PieChart/pieClasses.d.ts

@@ -1,3 +1,4 @@
+import { type SeriesId } from "../models/seriesType/common.js";
 export interface PieClasses {
   /** Styles applied to the root element. */
   root: string;
@@ -5,8 +6,28 @@ export interface PieClasses {
   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;
 }
 export type PieClassKey = keyof PieClasses;
+export interface PieArcOwnerState {
+  id: SeriesId;
+  dataIndex: number;
+  color: string;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  isFocused: boolean;
+  classes?: Partial<PieClasses>;
+}
 export declare function getPieUtilityClass(slot: string): string;
 export declare const pieClasses: PieClasses;
-export declare const useUtilityClasses: (classes?: Partial<PieClasses>) => Record<"series" | "root" | "seriesLabels", string>;
+export declare const useUtilityClasses: (options?: {
+  classes?: Partial<PieClasses>;
+  skipAnimation?: boolean;
+}) => Record<"series" | "root" | "seriesLabels" | "arcLabel" | "arc" | "focusIndicator", string>;

package/esm/PieChart/pieClasses.js

@@ -4,12 +4,19 @@ import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 export function getPieUtilityClass(slot) {
   return generateUtilityClass('MuiPieChart', slot);
 }
-export const pieClasses = generateUtilityClasses('MuiPieChart', ['root', 'series', 'seriesLabels']);
-export const useUtilityClasses = classes => {
+export const pieClasses = generateUtilityClasses('MuiPieChart', ['root', 'series', 'seriesLabels', 'arc', 'arcLabel', 'animate', 'focusIndicator']);
+export const useUtilityClasses = options => {
+  const {
+    classes,
+    skipAnimation
+  } = options ?? {};
   const slots = {
     root: ['root'],
     series: ['series'],
-    seriesLabels: ['seriesLabels']
+    seriesLabels: ['seriesLabels'],
+    arc: ['arc'],
+    arcLabel: ['arcLabel', !skipAnimation && 'animate'],
+    focusIndicator: ['focusIndicator']
   };
   return composeClasses(slots, getPieUtilityClass, classes);
 };

package/esm/RadarChart/RadarAxis/RadarAxis.js

@@ -4,7 +4,8 @@ import PropTypes from 'prop-types';
 import { useTheme } from '@mui/material/styles';
 import { useRadarAxis } from "./useRadarAxis.js";
 import { getLabelAttributes } from "./RadarAxis.utils.js";
-import { useUtilityClasses } from "./radarAxisClasses.js";
+import { useUtilityClasses as useDeprecatedUtilityClasses } from "./radarAxisClasses.js";
+import { useUtilityClasses } from "../radarClasses.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function RadarAxis(props) {
   const {
@@ -12,7 +13,8 @@ function RadarAxis(props) {
     textAnchor,
     dominantBaseline
   } = props;
-  const classes = useUtilityClasses(props.classes);
+  const classes = useUtilityClasses();
+  const deprecatedClasses = useDeprecatedUtilityClasses(props.classes);
   const theme = useTheme();
   const data = useRadarAxis(props);
   if (data === null) {
@@ -24,12 +26,12 @@ function RadarAxis(props) {
     labels
   } = data;
   return /*#__PURE__*/_jsxs("g", {
-    className: classes.root,
+    className: `${classes.axisRoot} ${deprecatedClasses.root}`,
     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} ${deprecatedClasses.line}`
     }), 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} ${deprecatedClasses.label}`
     }, getLabelAttributes({
       labelOrientation,
       x,

package/esm/RadarChart/RadarAxis/radarAxisClasses.d.ts

@@ -1,12 +1,36 @@
+/**
+ * @deprecated Use `RadarClasses` instead.
+ */
 export interface RadarAxisClasses {
-  /** Styles applied to the root element. */
+  /**
+   * Styles applied to the root element.
+   * @deprecated Use `radarClasses.axisRoot` instead.
+   */
   root: string;
-  /** Styles applied to the line element. */
+  /**
+   * Styles applied to the line element.
+   * @deprecated Use `radarClasses.axisLine` instead.
+   */
   line: string;
-  /** Styles applied to every label element. */
+  /**
+   * Styles applied to every label element.
+   * @deprecated Use `radarClasses.axisLabel` instead.
+   */
   label: string;
 }
+/**
+ * @deprecated Use `RadarClassKey` instead.
+ */
 export type RadarAxisClassKey = keyof RadarAxisClasses;
+/**
+ * @deprecated Use `getRadarUtilityClass` instead.
+ */
 export declare function getRadarAxisUtilityClass(slot: string): string;
+/**
+ * @deprecated Use `radarClasses` instead.
+ */
 export declare const chartsAxisClasses: RadarAxisClasses;
+/**
+ * @deprecated Use `useUtilityClasses` instead.
+ */
 export declare const useUtilityClasses: (classes?: Partial<RadarAxisClasses>) => Record<"root" | "line" | "label", string>;

package/esm/RadarChart/RadarAxis/radarAxisClasses.js

@@ -1,10 +1,30 @@
 import composeClasses from '@mui/utils/composeClasses';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+
+/**
+ * @deprecated Use `RadarClasses` instead.
+ */
+
+/**
+ * @deprecated Use `RadarClassKey` instead.
+ */
+
+/**
+ * @deprecated Use `getRadarUtilityClass` instead.
+ */
 export function getRadarAxisUtilityClass(slot) {
   return generateUtilityClass('MuiRadarAxis', slot);
 }
+
+/**
+ * @deprecated Use `radarClasses` instead.
+ */
 export const chartsAxisClasses = generateUtilityClasses('MuiRadarAxis', ['root', 'line', 'label']);
+
+/**
+ * @deprecated Use `useUtilityClasses` instead.
+ */
 export const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],

package/esm/RadarChart/RadarAxisHighlight/RadarAxisHighlight.js

@@ -1,19 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import PropTypes from 'prop-types';
 import { useTheme } from '@mui/material/styles';
-import composeClasses from '@mui/utils/composeClasses';
 import { useRadarAxisHighlight } from "./useRadarAxisHighlight.js";
-import { getRadarAxisHighlightUtilityClass } from "./radarAxisHighlightClasses.js";
+import { useUtilityClasses as useDeprecatedUtilityClasses } from "./radarAxisHighlightClasses.js";
+import { useUtilityClasses } from "../radarClasses.js";
 import { getSeriesColorFn } from "../../internals/getSeriesColorFn.js";
 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,7 +22,8 @@ const highlightMark = {
   opacity: 1
 };
 function RadarAxisHighlight(props) {
-  const classes = useUtilityClasses(props.classes);
+  const classes = useUtilityClasses();
+  const deprecatedClasses = useDeprecatedUtilityClasses(props.classes);
   const theme = useTheme();
   const data = useRadarAxisHighlight();
   if (data === null) {
@@ -47,12 +40,12 @@ function RadarAxisHighlight(props) {
   } = data;
   const [x, y] = instance.polar2svg(radius, highlightedAngle);
   return /*#__PURE__*/_jsxs("g", {
-    className: classes.root,
+    className: `${classes.axisHighlightRoot} ${deprecatedClasses.root}`,
     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} ${deprecatedClasses.line}`,
       pointerEvents: "none",
       strokeDasharray: "4 4"
     }), points.map((point, seriesIndex) => {
@@ -64,7 +57,7 @@ function RadarAxisHighlight(props) {
         }),
         cx: point.x,
         cy: point.y,
-        className: classes.dot,
+        className: `${classes.axisHighlightDot} ${deprecatedClasses.dot}`,
         pointerEvents: "none"
       }, series[seriesIndex].hideMark ? highlightMark : highlightMarkShadow), series[seriesIndex].id);
     })]

package/esm/RadarChart/RadarAxisHighlight/radarAxisHighlightClasses.d.ts

@@ -1,11 +1,36 @@
+/**
+ * @deprecated Use `RadarClasses` instead.
+ */
 export interface RadarAxisHighlightClasses {
-  /** Styles applied to the root element. */
+  /**
+   * Styles applied to the root element.
+   * @deprecated Use `radarClasses.axisHighlightRoot` instead.
+   */
   root: string;
-  /** Styles applied to the highlighted axis line element. */
+  /**
+   * Styles applied to the highlighted axis line element.
+   * @deprecated Use `radarClasses.axisHighlightLine` instead.
+   */
   line: string;
-  /** Styles applied to every highlight dot. */
+  /**
+   * Styles applied to every highlight dot.
+   * @deprecated Use `radarClasses.axisHighlightDot` instead.
+   */
   dot: string;
 }
+/**
+ * @deprecated Use `RadarClassKey` instead.
+ */
 export type RadarAxisHighlightClassKey = keyof RadarAxisHighlightClasses;
+/**
+ * @deprecated Use `getRadarUtilityClass` instead.
+ */
 export declare function getRadarAxisHighlightUtilityClass(slot: string): string;
-export declare const chartsAxisHighlightClasses: RadarAxisHighlightClasses;
+/**
+ * @deprecated Use `radarClasses` instead.
+ */
+export declare const chartsAxisHighlightClasses: RadarAxisHighlightClasses;
+/**
+ * @deprecated Use `useUtilityClasses` instead.
+ */
+export declare const useUtilityClasses: (classes?: Partial<RadarAxisHighlightClasses>) => Record<"root" | "line" | "dot", string>;

package/esm/RadarChart/RadarAxisHighlight/radarAxisHighlightClasses.js

@@ -1,6 +1,35 @@
+import composeClasses from '@mui/utils/composeClasses';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+
+/**
+ * @deprecated Use `RadarClasses` instead.
+ */
+
+/**
+ * @deprecated Use `RadarClassKey` instead.
+ */
+
+/**
+ * @deprecated Use `getRadarUtilityClass` instead.
+ */
 export function getRadarAxisHighlightUtilityClass(slot) {
   return generateUtilityClass('MuiRadarAxisHighlight', slot);
 }
-export const chartsAxisHighlightClasses = generateUtilityClasses('MuiRadarAxisHighlight', ['root', 'line', 'dot']);
+
+/**
+ * @deprecated Use `radarClasses` instead.
+ */
+export const chartsAxisHighlightClasses = generateUtilityClasses('MuiRadarAxisHighlight', ['root', 'line', 'dot']);
+
+/**
+ * @deprecated Use `useUtilityClasses` instead.
+ */
+export const useUtilityClasses = classes => {
+  const slots = {
+    root: ['root'],
+    line: ['line'],
+    dot: ['dot']
+  };
+  return composeClasses(slots, getRadarAxisHighlightUtilityClass, classes);
+};

package/esm/RadarChart/RadarGrid/RadarGrid.js

@@ -6,7 +6,8 @@ import { SharpRadarGrid } from "./SharpRadarGrid.js";
 import { CircularRadarGrid } from "./CircularRadarGrid.js";
 import { SharpRadarStripes } from "./SharpRadarStripes.js";
 import { CircularRadarStripes } from "./CircularRadarStripes.js";
-import { useUtilityClasses } from "./radarGridClasses.js";
+import { useUtilityClasses as useDeprecatedUtilityClasses } from "./radarGridClasses.js";
+import { useUtilityClasses } from "../radarClasses.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function RadarGrid(props) {
   const theme = useTheme();
@@ -16,7 +17,13 @@ function RadarGrid(props) {
     stripeColor = index => index % 2 === 1 ? (theme.vars || theme).palette.text.secondary : 'none'
   } = props;
   const gridData = useRadarGridData();
-  const classes = useUtilityClasses(props.classes);
+  const newClasses = useUtilityClasses();
+  const deprecatedClasses = useDeprecatedUtilityClasses(props.classes);
+  const classes = {
+    radial: `${newClasses.gridRadial} ${deprecatedClasses.radial}`,
+    divider: `${newClasses.gridDivider} ${deprecatedClasses.divider}`,
+    stripe: `${newClasses.gridStripe} ${deprecatedClasses.stripe}`
+  };
   if (gridData === null) {
     return null;
   }

package/esm/RadarChart/RadarGrid/radarGridClasses.d.ts

@@ -1,12 +1,36 @@
+/**
+ * @deprecated Use `RadarClasses` instead.
+ */
 export interface RadarGridClasses {
-  /** Styles applied to every radial line element. */
+  /**
+   * Styles applied to every radial line element.
+   * @deprecated Use `radarClasses.gridRadial` instead.
+   */
   radial: string;
-  /** Styles applied to every divider element. */
+  /**
+   * Styles applied to every divider element.
+   * @deprecated Use `radarClasses.gridDivider` instead.
+   */
   divider: string;
-  /** Styles applied to every stripe element. */
+  /**
+   * Styles applied to every stripe element.
+   * @deprecated Use `radarClasses.gridStripe` instead.
+   */
   stripe: string;
 }
+/**
+ * @deprecated Use `RadarClassKey` instead.
+ */
 export type RadarGridClassKey = keyof RadarGridClasses;
+/**
+ * @deprecated Use `getRadarUtilityClass` instead.
+ */
 export declare function getRadarGridUtilityClass(slot: string): string;
+/**
+ * @deprecated Use `radarClasses` instead.
+ */
 export declare const chartsGridClasses: RadarGridClasses;
+/**
+ * @deprecated Use `useUtilityClasses` instead.
+ */
 export declare const useUtilityClasses: (classes?: Partial<RadarGridClasses>) => Record<"divider" | "radial" | "stripe", string>;

package/esm/RadarChart/RadarGrid/radarGridClasses.js

@@ -1,10 +1,30 @@
 import composeClasses from '@mui/utils/composeClasses';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+
+/**
+ * @deprecated Use `RadarClasses` instead.
+ */
+
+/**
+ * @deprecated Use `RadarClassKey` instead.
+ */
+
+/**
+ * @deprecated Use `getRadarUtilityClass` instead.
+ */
 export function getRadarGridUtilityClass(slot) {
   return generateUtilityClass('MuiRadarGrid', slot);
 }
+
+/**
+ * @deprecated Use `radarClasses` instead.
+ */
 export const chartsGridClasses = generateUtilityClasses('MuiRadarGrid', ['radial', 'divider', 'stripe']);
+
+/**
+ * @deprecated Use `useUtilityClasses` instead.
+ */
 export const useUtilityClasses = classes => {
   const slots = {
     radial: ['radial'],

package/esm/RadarChart/RadarSeriesPlot/RadarSeriesArea.js

@@ -6,7 +6,8 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { useRadarSeriesData } from "./useRadarSeriesData.js";
 import { getAreaPath } from "./getAreaPath.js";
-import { useUtilityClasses } from "./radarSeriesPlotClasses.js";
+import { useUtilityClasses as useDeprecatedUtilityClasses } from "./radarSeriesPlotClasses.js";
+import { useUtilityClasses } from "../radarClasses.js";
 import { useItemHighlightedGetter } from "../../hooks/useItemHighlightedGetter.js";
 import { useInteractionAllItemProps } from "./useInteractionAllItemProps.js";
 import { useRadarRotationIndex } from "./useRadarRotationIndex.js";
@@ -50,7 +51,12 @@ function RadarSeriesArea(props) {
     isFaded,
     isHighlighted
   } = useItemHighlightedGetter();
-  const classes = useUtilityClasses(props.classes);
+  const newClasses = useUtilityClasses();
+  const deprecatedClasses = useDeprecatedUtilityClasses(props.classes);
+  const classes = _extends({}, deprecatedClasses, {
+    area: `${newClasses.seriesArea} ${deprecatedClasses.area}`,
+    mark: `${newClasses.seriesMark} ${deprecatedClasses.mark}`
+  });
   return /*#__PURE__*/_jsx(React.Fragment, {
     children: seriesCoordinates?.map(({
       seriesId: id,

package/esm/RadarChart/RadarSeriesPlot/RadarSeriesMarks.js

@@ -5,8 +5,9 @@ import * as React from 'react';
 import { clsx } from 'clsx';
 import PropTypes from 'prop-types';
 import { useRadarSeriesData } from "./useRadarSeriesData.js";
+import { useUtilityClasses as useDeprecatedUtilityClasses } from "./radarSeriesPlotClasses.js";
+import { useUtilityClasses } from "../radarClasses.js";
 import { useItemHighlightedGetter } from "../../hooks/useItemHighlightedGetter.js";
-import { useUtilityClasses } from "./radarSeriesPlotClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function getCircleProps(params) {
   const {
@@ -40,7 +41,12 @@ function RadarSeriesMarks(props) {
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const seriesCoordinates = useRadarSeriesData(props.seriesId);
-  const classes = useUtilityClasses(props.classes);
+  const newClasses = useUtilityClasses();
+  const deprecatedClasses = useDeprecatedUtilityClasses(props.classes);
+  const classes = _extends({}, deprecatedClasses, {
+    area: `${newClasses.seriesArea} ${deprecatedClasses.area}`,
+    mark: `${newClasses.seriesMark} ${deprecatedClasses.mark}`
+  });
   const {
     isFaded,
     isHighlighted

package/esm/RadarChart/RadarSeriesPlot/RadarSeriesPlot.js

@@ -2,8 +2,9 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import PropTypes from 'prop-types';
 import { useRadarSeriesData } from "./useRadarSeriesData.js";
 import { useInteractionAllItemProps } from "./useInteractionAllItemProps.js";
+import { useUtilityClasses as useDeprecatedUtilityClasses } from "./radarSeriesPlotClasses.js";
+import { useUtilityClasses } from "../radarClasses.js";
 import { useItemHighlightedGetter } from "../../hooks/useItemHighlightedGetter.js";
-import { useUtilityClasses } from "./radarSeriesPlotClasses.js";
 import { getPathProps } from "./RadarSeriesArea.js";
 import { getCircleProps } from "./RadarSeriesMarks.js";
 import { useRadarRotationIndex } from "./useRadarRotationIndex.js";
@@ -22,9 +23,14 @@ function RadarSeriesPlot(props) {
     isFaded,
     isHighlighted
   } = useItemHighlightedGetter();
-  const classes = useUtilityClasses(inClasses);
+  const newClasses = useUtilityClasses();
+  const deprecatedClasses = useDeprecatedUtilityClasses(inClasses);
+  const classes = _extends({}, deprecatedClasses, {
+    area: `${newClasses.seriesArea} ${deprecatedClasses.area}`,
+    mark: `${newClasses.seriesMark} ${deprecatedClasses.mark}`
+  });
   return /*#__PURE__*/_jsx("g", {
-    className: classes.root,
+    className: `${newClasses.seriesRoot} ${deprecatedClasses.root}`,
     children: seriesCoordinates?.map(({
       seriesId,
       points,

package/esm/RadarChart/RadarSeriesPlot/radarSeriesPlotClasses.d.ts

@@ -1,16 +1,39 @@
+/**
+ * @deprecated Use `RadarClasses` instead.
+ */
 export interface RadarSeriesPlotClasses {
-  /** Styles applied to the root element. */
+  /**
+   * Styles applied to the root element.
+   * @deprecated Use `radarClasses.seriesRoot` instead.
+   */
   root: string;
   /** Styles applied to the series element if it is highlighted. */
   highlighted: string;
   /** Styles applied to the series element if it is faded. */
   faded: string;
-  /** Styles applied to the series area element. */
+  /**
+   * Styles applied to the series area element.
+   * @deprecated Use `radarClasses.seriesArea` instead.
+   */
   area: string;
-  /** Styles applied to the series mark element. */
+  /** Styles applied to the series mark element.
+   * @deprecated Use `radarClasses.seriesMark` instead.
+   */
   mark: string;
 }
+/**
+ * @deprecated Use `RadarClassKey` instead.
+ */
 export type RadarSeriesPlotClassKey = keyof RadarSeriesPlotClasses;
+/**
+ * @deprecated Use `getRadarUtilityClass` instead.
+ */
 export declare function getRadarSeriesPlotUtilityClass(slot: string): string;
+/**
+ * @deprecated Use `radarClasses` instead.
+ */
 export declare const radarSeriesPlotClasses: Record<"root" | "area" | "mark" | "highlighted" | "faded", string>;
+/**
+ * @deprecated Use `useUtilityClasses` instead.
+ */
 export declare const useUtilityClasses: (classes?: Partial<RadarSeriesPlotClasses>) => Record<"root" | "area" | "mark" | "highlighted" | "faded", string>;

package/esm/RadarChart/RadarSeriesPlot/radarSeriesPlotClasses.js

@@ -1,10 +1,30 @@
 import composeClasses from '@mui/utils/composeClasses';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+
+/**
+ * @deprecated Use `RadarClasses` instead.
+ */
+
+/**
+ * @deprecated Use `RadarClassKey` instead.
+ */
+
+/**
+ * @deprecated Use `getRadarUtilityClass` instead.
+ */
 export function getRadarSeriesPlotUtilityClass(slot) {
   return generateUtilityClass('MuiRadarSeriesPlot', slot);
 }
+
+/**
+ * @deprecated Use `radarClasses` instead.
+ */
 export const radarSeriesPlotClasses = generateUtilityClasses('MuiRadarSeriesPlot', ['root', 'area', 'mark', 'highlighted', 'faded']);
+
+/**
+ * @deprecated Use `useUtilityClasses` instead.
+ */
 export const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],

package/esm/RadarChart/index.d.ts

@@ -17,4 +17,6 @@ export * from "./RadarAxis/index.js";
 export * from "./RadarAxisHighlight/index.js";
 export * from "./RadarMetricLabels/index.js";
 export * from "./RadarSeriesPlot/index.js";
-export * from "./RadarChart.plugins.js";
+export * from "./RadarChart.plugins.js";
+export { radarClasses } from "./radarClasses.js";
+export type { RadarClassKey, RadarClasses } from "./radarClasses.js";

package/esm/RadarChart/index.js

@@ -18,4 +18,5 @@ export * from "./RadarAxis/index.js";
 export * from "./RadarAxisHighlight/index.js";
 export * from "./RadarMetricLabels/index.js";
 export * from "./RadarSeriesPlot/index.js";
-export * from "./RadarChart.plugins.js";
+export * from "./RadarChart.plugins.js";
+export { radarClasses } from "./radarClasses.js";