@mui/x-charts 8.0.0-beta.3 → 8.1.0

package/esm/ChartsTooltip/index.js

@@ -4,7 +4,7 @@ export { getChartsTooltipUtilityClass, chartsTooltipClasses } from "./chartsTool
 export * from "./ChartsAxisTooltipContent.js";
 export * from "./ChartsItemTooltipContent.js";
 export * from "./ChartsTooltipTable.js";
-export * from "./useItemTooltip.js";
+export { useItemTooltip, useRadarItemTooltip } from "./useItemTooltip.js";
 export * from "./useAxisTooltip.js";
 export * from "./useAxesTooltip.js";
 export { useMouseTracker } from "./utils.js";

package/esm/ChartsTooltip/useAxisTooltip.d.ts

@@ -1,9 +1,10 @@
 import { SeriesId } from "../models/seriesType/common.js";
-import { AxisId } from "../models/axis.js";
-import { CartesianChartSeriesType, ChartsSeriesConfig } from "../models/seriesType/config.js";
+import { CartesianChartSeriesType, ChartsSeriesConfig, PolarChartSeriesType } from "../models/seriesType/config.js";
+import { AxisDefaultized, PolarAxisDefaultized, AxisId } from "../models/axis.js";
 import { ChartsLabelMarkProps } from "../ChartsLabel/index.js";
-export interface UseAxisTooltipReturnValue<SeriesT extends CartesianChartSeriesType = CartesianChartSeriesType, AxisValueT extends string | number | Date = string | number | Date> {
-  axisDirection: 'x' | 'y';
+export interface UseAxisTooltipReturnValue<SeriesT extends CartesianChartSeriesType | PolarChartSeriesType = CartesianChartSeriesType | PolarChartSeriesType, AxisValueT extends string | number | Date = string | number | Date> {
+  axisDirection: SeriesT extends CartesianChartSeriesType ? 'x' | 'y' : 'rotation' | 'radius';
+  mainAxis: SeriesT extends CartesianChartSeriesType ? AxisDefaultized : PolarAxisDefaultized;
   axisId: AxisId;
   axisValue: AxisValueT;
   axisFormattedValue: string;
@@ -19,9 +20,9 @@ export interface UseAxisTooltipParams {
    * The axis directions to consider.
    * If not defined, all directions are considered
    */
-  directions?: ('x' | 'y')[];
+  directions?: ('x' | 'y' | 'rotation')[];
 }
-interface SeriesItem<T extends CartesianChartSeriesType> {
+interface SeriesItem<T extends CartesianChartSeriesType | PolarChartSeriesType> {
   seriesId: SeriesId;
   color: string;
   value: ChartsSeriesConfig[T]['valueType'];

package/esm/ChartsTooltip/useAxisTooltip.js

@@ -7,9 +7,11 @@ import { useSelector } from "../internals/store/useSelector.js";
 import { getLabel } from "../internals/getLabel.js";
 import { isCartesianSeriesType } from "../internals/isCartesian.js";
 import { utcFormatter } from "./utils.js";
-import { useXAxes, useXAxis, useYAxes, useYAxis } from "../hooks/useAxis.js";
+import { useRotationAxes, useRotationAxis, useXAxes, useXAxis, useYAxes, useYAxis } from "../hooks/useAxis.js";
 import { useZAxes } from "../hooks/useZAxis.js";
 import { selectorChartsInteractionTooltipXAxes, selectorChartsInteractionTooltipYAxes } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
+import { selectorChartsInteractionTooltipRotationAxes } from "../internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarInteraction.selectors.js";
+import { isPolarSeriesType } from "../internals/isPolar.js";
 function defaultAxisTooltipConfig(axis, dataIndex, axisDirection) {
   const axisValue = axis.data?.[dataIndex] ?? null;
   const axisFormatter = axis.valueFormatter ?? (v => axis.scaleType === 'utc' ? utcFormatter(v) : v.toLocaleString());
@@ -20,6 +22,7 @@ function defaultAxisTooltipConfig(axis, dataIndex, axisDirection) {
   return {
     axisDirection,
     axisId: axis.id,
+    mainAxis: axis,
     dataIndex,
     axisValue,
     axisFormattedValue,
@@ -38,9 +41,11 @@ export function useAxisTooltip(params = {}) {
   } = params;
   const defaultXAxis = useXAxis();
   const defaultYAxis = useYAxis();
+  const defaultRotationAxis = useRotationAxis();
   const store = useStore();
   const tooltipXAxes = useSelector(store, selectorChartsInteractionTooltipXAxes);
   const tooltipYAxes = useSelector(store, selectorChartsInteractionTooltipYAxes);
+  const tooltipRotationAxes = useSelector(store, selectorChartsInteractionTooltipRotationAxes);
   const series = useSeries();
   const {
     xAxis
@@ -52,8 +57,11 @@ export function useAxisTooltip(params = {}) {
     zAxis,
     zAxisIds
   } = useZAxes();
+  const {
+    rotationAxis
+  } = useRotationAxes();
   const colorProcessors = useColorProcessor();
-  if (tooltipXAxes.length === 0 && tooltipYAxes.length === 0) {
+  if (tooltipXAxes.length === 0 && tooltipYAxes.length === 0 && tooltipRotationAxes.length === 0) {
     return null;
   }
   const tooltipAxes = [];
@@ -79,7 +87,18 @@ export function useAxisTooltip(params = {}) {
       tooltipAxes.push(defaultAxisTooltipConfig(yAxis[axisId], dataIndex, 'y'));
     });
   }
-  Object.keys(series).filter(isCartesianSeriesType).flatMap(seriesType => {
+  if (directions === undefined || directions.includes('rotation')) {
+    tooltipRotationAxes.forEach(({
+      axisId,
+      dataIndex
+    }) => {
+      if (!multipleAxes && tooltipAxes.length > 1) {
+        return;
+      }
+      tooltipAxes.push(defaultAxisTooltipConfig(rotationAxis[axisId], dataIndex, 'rotation'));
+    });
+  }
+  Object.keys(series).filter(isCartesianSeriesType).forEach(seriesType => {
     const seriesOfType = series[seriesType];
     if (!seriesOfType) {
       return [];
@@ -115,6 +134,42 @@ export function useAxisTooltip(params = {}) {
       }
     });
   });
+  Object.keys(series).filter(isPolarSeriesType).forEach(seriesType => {
+    const seriesOfType = series[seriesType];
+    if (!seriesOfType) {
+      return [];
+    }
+    return seriesOfType.seriesOrder.forEach(seriesId => {
+      const seriesToAdd = seriesOfType.series[seriesId];
+      const providedRotationAxisId =
+      // @ts-expect-error Should be fixed when we introduce a polar series with a rotationAxisId
+      seriesToAdd.rotationAxisId ?? defaultRotationAxis?.id;
+      const tooltipItemIndex = tooltipAxes.findIndex(({
+        axisDirection,
+        axisId
+      }) => axisDirection === 'rotation' && axisId === providedRotationAxisId);
+      // Test if the series uses the default axis
+      if (tooltipItemIndex >= 0) {
+        const {
+          dataIndex
+        } = tooltipAxes[tooltipItemIndex];
+        const color = colorProcessors[seriesType]?.(seriesToAdd)(dataIndex) ?? '';
+        const value = seriesToAdd.data[dataIndex] ?? null;
+        const formattedValue = seriesToAdd.valueFormatter(value, {
+          dataIndex
+        });
+        const formattedLabel = getLabel(seriesToAdd.label, 'tooltip') ?? null;
+        tooltipAxes[tooltipItemIndex].seriesItems.push({
+          seriesId,
+          color,
+          value,
+          formattedValue,
+          formattedLabel,
+          markType: seriesToAdd.labelMarkType
+        });
+      }
+    });
+  });
   if (!multipleAxes) {
     return tooltipAxes.length === 0 ? tooltipAxes[0] : null;
   }

package/esm/ChartsTooltip/useItemTooltip.d.ts

@@ -1,12 +1,16 @@
-import { ChartItemIdentifier, ChartSeriesType, ChartsSeriesConfig } from "../models/seriesType/config.js";
-import { ChartsLabelMarkProps } from "../ChartsLabel/index.js";
-export interface ItemTooltip<T extends ChartSeriesType> {
-  identifier: ChartItemIdentifier<T>;
-  color: string;
-  label: string | undefined;
-  value: ChartsSeriesConfig[T]['valueType'];
-  formattedValue: string | null;
-  markType: ChartsLabelMarkProps['type'];
-}
+import { ChartSeriesType } from "../models/seriesType/config.js";
+import { ItemTooltip, ItemTooltipWithMultipleValues } from "../internals/plugins/models/seriesConfig/tooltipGetter.types.js";
 export type UseItemTooltipReturnValue<T extends ChartSeriesType> = ItemTooltip<T>;
-export declare function useItemTooltip<T extends ChartSeriesType>(): UseItemTooltipReturnValue<T> | null;
+export type UseRadarItemTooltipReturnValue = ItemTooltipWithMultipleValues<'radar'>;
+export declare function useInternalItemTooltip<T extends ChartSeriesType>(): (T extends 'radar' ? ItemTooltipWithMultipleValues<T> : ItemTooltip<T>) | null;
+/**
+ * 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.
+ * @returns The tooltip item config
+ */
+export declare const useItemTooltip: <T extends Exclude<ChartSeriesType, "radar">>() => UseItemTooltipReturnValue<T> | null;
+/**
+ * Contains an object per value with their content and the label of the associated metric.
+ * @returns The tooltip item configs
+ */
+export declare const useRadarItemTooltip: () => UseRadarItemTooltipReturnValue | null;

package/esm/ChartsTooltip/useItemTooltip.js

@@ -4,10 +4,10 @@ import { useSeries } from "../hooks/useSeries.js";
 import { selectorChartsInteractionItem } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
 import { useSelector } from "../internals/store/useSelector.js";
 import { useStore } from "../internals/store/useStore.js";
-import { useXAxes, useYAxes } from "../hooks/useAxis.js";
+import { useRadiusAxes, useRotationAxes, useXAxes, useYAxes } from "../hooks/useAxis.js";
 import { useZAxes } from "../hooks/useZAxis.js";
 import { selectorChartSeriesConfig } from "../internals/plugins/corePlugins/useChartSeries/useChartSeries.selectors.js";
-export function useItemTooltip() {
+export function useInternalItemTooltip() {
   const store = useStore();
   const identifier = useSelector(store, selectorChartsInteractionItem);
   const seriesConfig = useSelector(store, selectorChartSeriesConfig);
@@ -24,10 +24,20 @@ export function useItemTooltip() {
     zAxis,
     zAxisIds
   } = useZAxes();
+  const {
+    rotationAxis,
+    rotationAxisIds
+  } = useRotationAxes();
+  const {
+    radiusAxis,
+    radiusAxisIds
+  } = useRadiusAxes();
   const xAxisId = series.xAxisId ?? xAxisIds[0];
   const yAxisId = series.yAxisId ?? yAxisIds[0];
   const zAxisId = series.zAxisId ?? zAxisIds[0];
-  if (!identifier || identifier.dataIndex === undefined) {
+  const rotationAxisId = series.rotationAxisId ?? rotationAxisIds[0];
+  const radiusAxisId = series.radiusAxisId ?? radiusAxisIds[0];
+  if (!identifier) {
     return null;
   }
   const itemSeries = series[identifier.type]?.series[identifier.seriesId];
@@ -35,9 +45,40 @@ export function useItemTooltip() {
     return null;
   }
   const getColor = seriesConfig[itemSeries.type].colorProcessor?.(itemSeries, xAxisId && xAxis[xAxisId], yAxisId && yAxis[yAxisId], zAxisId && zAxis[zAxisId]) ?? (() => '');
+  const axesConfig = {};
+  if (xAxisId !== undefined) {
+    axesConfig.x = xAxis[xAxisId];
+  }
+  if (yAxisId !== undefined) {
+    axesConfig.y = yAxis[yAxisId];
+  }
+  if (rotationAxisId !== undefined) {
+    axesConfig.rotation = rotationAxis[rotationAxisId];
+  }
+  if (radiusAxisId !== undefined) {
+    axesConfig.radius = radiusAxis[radiusAxisId];
+  }
   return seriesConfig[itemSeries.type].tooltipGetter({
     series: itemSeries,
+    axesConfig,
     getColor,
     identifier
   });
-}
+}
+
+/**
+ * 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.
+ * @returns The tooltip item config
+ */
+export const useItemTooltip = () => {
+  return useInternalItemTooltip();
+};
+
+/**
+ * Contains an object per value with their content and the label of the associated metric.
+ * @returns The tooltip item configs
+ */
+export const useRadarItemTooltip = () => {
+  return useInternalItemTooltip();
+};

package/esm/ChartsTooltip/utils.d.ts

@@ -9,7 +9,7 @@ export type UseMouseTrackerReturnValue = null | MousePosition;
  * @deprecated We recommend using vanilla JS to let popper track mouse position.
  */
 export declare function useMouseTracker(): UseMouseTrackerReturnValue;
-type PointerType = Pick<MousePosition, 'height' | 'pointerType'>;
+type PointerType = Pick<MousePosition, 'pointerType'>;
 export declare function usePointerType(): null | PointerType;
 export type TriggerOptions = 'item' | 'axis' | 'none';
 export declare function utcFormatter(v: string | number | Date): string;

package/esm/ChartsTooltip/utils.js

@@ -63,7 +63,6 @@ export function usePointerType() {
     };
     const handleEnter = event => {
       setPointerType({
-        height: event.height,
         pointerType: event.pointerType
       });
     };

package/esm/ChartsXAxis/ChartsXAxis.js

@@ -152,8 +152,7 @@ function shortenLabels(visibleLabels, drawingArea, maxHeight, isRtl, tickLabelSt
 }
 const XAxisRoot = styled(AxisRoot, {
   name: 'MuiChartsXAxis',
-  slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
+  slot: 'Root'
 })({});
 const defaultProps = {
   disableLine: false,

package/esm/ChartsYAxis/ChartsYAxis.js

@@ -83,8 +83,7 @@ function shortenLabels(visibleLabels, drawingArea, maxWidth, isRtl, tickLabelSty
 }
 const YAxisRoot = styled(AxisRoot, {
   name: 'MuiChartsYAxis',
-  slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
+  slot: 'Root'
 })({});
 const defaultProps = {
   disableLine: false,

package/esm/Gauge/Gauge.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["text", "children", "classes", "className"];
+const _excluded = ["text", "children", "classes", "className", "skipAnimation"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
@@ -29,7 +29,8 @@ const Gauge = /*#__PURE__*/React.forwardRef(function Gauge(props, ref) {
   const {
       text,
       children,
-      className
+      className,
+      skipAnimation
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const classes = useUtilityClasses(props);
@@ -39,7 +40,8 @@ const Gauge = /*#__PURE__*/React.forwardRef(function Gauge(props, ref) {
     children: [/*#__PURE__*/_jsx(GaugeReferenceArc, {
       className: classes.referenceArc
     }), /*#__PURE__*/_jsx(GaugeValueArc, {
-      className: classes.valueArc
+      className: classes.valueArc,
+      skipAnimation: skipAnimation
     }), /*#__PURE__*/_jsx(GaugeValueText, {
       className: classes.valueText,
       text: text
@@ -113,6 +115,11 @@ process.env.NODE_ENV !== "production" ? Gauge.propTypes = {
    * @default '100%'
    */
   outerRadius: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation: PropTypes.bool,
   /**
    * The start angle (deg).
    * @default 0

package/esm/Gauge/GaugeContainer.js

@@ -144,6 +144,11 @@ process.env.NODE_ENV !== "production" ? GaugeContainer.propTypes = {
    * @default '100%'
    */
   outerRadius: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * If `true`, animations are skipped.
+   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
+   */
+  skipAnimation: PropTypes.bool,
   /**
    * The start angle (deg).
    * @default 0

package/esm/Gauge/GaugeReferenceArc.js

@@ -8,8 +8,7 @@ import { useGaugeState } from "./GaugeProvider.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const StyledPath = styled('path', {
   name: 'MuiGauge',
-  slot: 'ReferenceArc',
-  overridesResolver: (props, styles) => styles.referenceArc
+  slot: 'ReferenceArc'
 })(({
   theme
 }) => ({

package/esm/Gauge/GaugeValueArc.d.ts

@@ -1,2 +1,8 @@
 import * as React from 'react';
-export declare function GaugeValueArc(props: React.ComponentProps<'path'>): React.JSX.Element | null;
+declare function GaugeValueArc(props: React.ComponentProps<'path'> & {
+  skipAnimation?: boolean;
+}): React.JSX.Element | null;
+declare namespace GaugeValueArc {
+  var propTypes: any;
+}
+export { GaugeValueArc };

package/esm/Gauge/GaugeValueArc.js

@@ -1,21 +1,24 @@
 'use client';
 
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["cx", "cy", "startAngle", "endAngle", "cornerRadius", "innerRadius", "outerRadius", "skipAnimation"];
 import * as React from 'react';
-import { arc as d3Arc } from '@mui/x-charts-vendor/d3-shape';
+import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
+import { useSkipAnimation } from "../hooks/useSkipAnimation.js";
+import { useAnimateGaugeValueArc } from "../hooks/animation/useAnimateGaugeValueArc.js";
 import { useGaugeState } from "./GaugeProvider.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const StyledPath = styled('path', {
   name: 'MuiGauge',
-  slot: 'ReferenceArc',
-  overridesResolver: (props, styles) => styles.referenceArc
+  slot: 'ReferenceArc'
 })(({
   theme
 }) => ({
   fill: (theme.vars || theme).palette.primary.main
 }));
-export function GaugeValueArc(props) {
+function GaugeValueArc(props) {
   const {
     value,
     valueMin,
@@ -32,13 +35,60 @@ export function GaugeValueArc(props) {
     return null;
   }
   const valueAngle = startAngle + (value - valueMin) / (valueMax - valueMin) * (endAngle - startAngle);
-  return /*#__PURE__*/_jsx(StyledPath, _extends({
-    transform: `translate(${cx}, ${cy})`,
-    d: d3Arc().cornerRadius(cornerRadius)({
+  return /*#__PURE__*/_jsx(AnimatedGaugeValueArc, _extends({}, props, {
+    cx: cx,
+    cy: cy,
+    startAngle: startAngle,
+    endAngle: valueAngle,
+    cornerRadius: cornerRadius,
+    innerRadius: innerRadius,
+    outerRadius: outerRadius
+  }));
+}
+process.env.NODE_ENV !== "production" ? GaugeValueArc.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  skipAnimation: PropTypes.bool
+} : void 0;
+export { GaugeValueArc };
+function AnimatedGaugeValueArc(_ref) {
+  let {
+      cx,
+      cy,
       startAngle,
-      endAngle: valueAngle,
+      endAngle,
+      cornerRadius,
       innerRadius,
-      outerRadius
-    })
-  }, props));
-}
+      outerRadius,
+      skipAnimation: inSkipAnimation
+    } = _ref,
+    other = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const skipAnimation = useSkipAnimation(inSkipAnimation);
+  const animatedProps = useAnimateGaugeValueArc({
+    startAngle,
+    endAngle,
+    cornerRadius,
+    innerRadius,
+    outerRadius,
+    skipAnimation
+  });
+  return /*#__PURE__*/_jsx(StyledPath, _extends({}, animatedProps, {
+    transform: `translate(${cx}, ${cy})`
+  }, other));
+}
+process.env.NODE_ENV !== "production" ? AnimatedGaugeValueArc.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  cornerRadius: PropTypes.number.isRequired,
+  cx: PropTypes.number.isRequired,
+  cy: PropTypes.number.isRequired,
+  endAngle: PropTypes.number.isRequired,
+  innerRadius: PropTypes.number.isRequired,
+  outerRadius: PropTypes.number.isRequired,
+  skipAnimation: PropTypes.bool,
+  startAngle: PropTypes.number.isRequired
+} : void 0;

package/esm/Gauge/gaugeClasses.d.ts

@@ -10,5 +10,4 @@ export interface GaugeClasses {
 }
 export type GaugeClassKey = keyof GaugeClasses;
 export declare function getGaugeUtilityClass(slot: string): string;
-export declare const gaugeClasses: GaugeClasses;
-export default gaugeClasses;
+export declare const gaugeClasses: GaugeClasses;

package/esm/Gauge/gaugeClasses.js

@@ -3,5 +3,4 @@ import generateUtilityClass from '@mui/utils/generateUtilityClass';
 export function getGaugeUtilityClass(slot) {
   return generateUtilityClass('MuiGauge', slot);
 }
-export const gaugeClasses = generateUtilityClasses('MuiGauge', ['root', 'valueArc', 'referenceArc', 'valueText']);
-export default gaugeClasses;
+export const gaugeClasses = generateUtilityClasses('MuiGauge', ['root', 'valueArc', 'referenceArc', 'valueText']);

package/esm/LineChart/AreaElement.d.ts

@@ -9,6 +9,11 @@ export interface AreaElementClasses {
   highlighted: string;
   /** Styles applied to the root element when faded. */
   faded: string;
+  /**
+   * Styles applied to the root element for a specified series.
+   * Needs to be suffixed with the series ID: `.${areaElementClasses.series}-${seriesId}`.
+   */
+  series: string;
 }
 export type AreaElementClassKey = keyof AreaElementClasses;
 export interface AreaElementOwnerState {

package/esm/LineChart/AreaElement.js

@@ -16,7 +16,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 export function getAreaElementUtilityClass(slot) {
   return generateUtilityClass('MuiAreaElement', slot);
 }
-export const areaElementClasses = generateUtilityClasses('MuiAreaElement', ['root', 'highlighted', 'faded']);
+export const areaElementClasses = generateUtilityClasses('MuiAreaElement', ['root', 'highlighted', 'faded', 'series']);
 const useUtilityClasses = ownerState => {
   const {
     classes,

package/esm/LineChart/AreaPlot.js

@@ -13,15 +13,14 @@ import { getCurveFactory } from "../internals/getCurve.js";
 import { isBandScale } from "../internals/isBandScale.js";
 import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
 import { useLineSeriesContext } from "../hooks/useLineSeries.js";
-import { useSkipAnimation } from "../context/AnimationProvider/index.js";
+import { useSkipAnimation } from "../hooks/useSkipAnimation.js";
 import { useChartGradientIdBuilder } from "../hooks/useChartGradientId.js";
 import { useXAxes, useYAxes } from "../hooks/useAxis.js";
 import { useInternalIsZoomInteracting } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const AreaPlotRoot = styled('g', {
   name: 'MuiAreaPlot',
-  slot: 'Root',
-  overridesResolver: (_, styles) => styles.root
+  slot: 'Root'
 })({
   [`& .${areaElementClasses.root}`]: {
     transition: 'opacity 0.2s ease-in, fill 0.2s ease-in'