@mui/x-charts 7.15.0 → 7.17.0

package/PieChart/legend.js

@@ -1,4 +1,4 @@
-import { getLabel } from '../internals/getLabel';
+import { getLabel } from "../internals/getLabel.js";
 const legendGetter = params => {
   const {
     seriesOrder,
@@ -11,9 +11,11 @@ const legendGetter = params => {
         return;
       }
       acc.push({
+        id: item.id,
+        seriesId,
         color: item.color,
         label: formattedLabel,
-        id: item.id
+        itemId: item.id
       });
     });
     return acc;

package/PieChart/plugin.js

@@ -1,5 +1,5 @@
-import formatter from './formatter';
-import getColor from './getColor';
+import formatter from "./formatter.js";
+import getColor from "./getColor.js";
 export const plugin = {
   seriesType: 'pie',
   colorProcessor: getColor,

package/ResponsiveChartContainer/ResponsiveChartContainer.js

@@ -1,9 +1,11 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { ChartContainer } from '../ChartContainer';
-import { ResizableContainer } from './ResizableContainer';
-import { useResponsiveChartContainerProps } from './useResponsiveChartContainerProps';
+import { ChartContainer } from "../ChartContainer/index.js";
+import { ResizableContainer } from "./ResizableContainer.js";
+import { useResponsiveChartContainerProps } from "./useResponsiveChartContainerProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const ResponsiveChartContainer = /*#__PURE__*/React.forwardRef(function ResponsiveChartContainer(props, ref) {
   const {

package/ResponsiveChartContainer/index.js

@@ -1 +1 @@
-export * from './ResponsiveChartContainer';
+export * from "./ResponsiveChartContainer.js";

package/ResponsiveChartContainer/useChartContainerDimensions.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import ownerWindow from '@mui/utils/ownerWindow';
@@ -45,7 +47,7 @@ export const useChartContainerDimensions = (inWidth, inHeight) => {
     }
     return () => {
       if (animationFrame) {
-        window.cancelAnimationFrame(animationFrame);
+        cancelAnimationFrame(animationFrame);
       }
       if (elementToObserve) {
         observer.unobserve(elementToObserve);

package/ResponsiveChartContainer/useResponsiveChartContainerProps.js

@@ -1,7 +1,9 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["width", "height", "margin", "children", "series", "colors", "dataset", "desc", "disableAxisListener", "highlightedItem", "onHighlightChange", "plugins", "sx", "title", "viewBox", "xAxis", "yAxis", "zAxis"];
-import { useChartContainerDimensions } from './useChartContainerDimensions';
+import { useChartContainerDimensions } from "./useChartContainerDimensions.js";
 export const useResponsiveChartContainerProps = (props, ref) => {
   const {
       width,

package/ScatterChart/Scatter.js

@@ -1,11 +1,13 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { getValueToPositionMapper } from '../hooks/useScale';
-import { useInteractionItemProps } from '../hooks/useInteractionItemProps';
-import { InteractionContext } from '../context/InteractionProvider';
-import { useHighlighted } from '../context';
-import { useDrawingArea } from '../hooks/useDrawingArea';
+import { getValueToPositionMapper } from "../hooks/useScale.js";
+import { useInteractionItemProps } from "../hooks/useInteractionItemProps.js";
+import { InteractionContext } from "../context/InteractionProvider.js";
+import { useHighlighted } from "../context/index.js";
+import { useDrawingArea } from "../hooks/useDrawingArea.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:

package/ScatterChart/ScatterChart.js

@@ -1,18 +1,20 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useThemeProps } from '@mui/material/styles';
-import { ScatterPlot } from './ScatterPlot';
-import { ResponsiveChartContainer } from '../ResponsiveChartContainer';
-import { ChartsAxis } from '../ChartsAxis';
-import { ChartsTooltip } from '../ChartsTooltip';
-import { ChartsLegend } from '../ChartsLegend';
-import { ChartsOverlay } from '../ChartsOverlay';
-import { ChartsAxisHighlight } from '../ChartsAxisHighlight';
-import { ChartsVoronoiHandler } from '../ChartsVoronoiHandler/ChartsVoronoiHandler';
-import { ChartsGrid } from '../ChartsGrid';
-import { ZAxisContextProvider } from '../context/ZAxisContextProvider';
-import { useScatterChartProps } from './useScatterChartProps';
+import { ScatterPlot } from "./ScatterPlot.js";
+import { ResponsiveChartContainer } from "../ResponsiveChartContainer/index.js";
+import { ChartsAxis } from "../ChartsAxis/index.js";
+import { ChartsTooltip } from "../ChartsTooltip/index.js";
+import { ChartsLegend } from "../ChartsLegend/index.js";
+import { ChartsOverlay } from "../ChartsOverlay/index.js";
+import { ChartsAxisHighlight } from "../ChartsAxisHighlight/index.js";
+import { ChartsVoronoiHandler } from "../ChartsVoronoiHandler/ChartsVoronoiHandler.js";
+import { ChartsGrid } from "../ChartsGrid/index.js";
+import { ZAxisContextProvider } from "../context/ZAxisContextProvider.js";
+import { useScatterChartProps } from "./useScatterChartProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Demos:
@@ -46,7 +48,7 @@ const ScatterChart = /*#__PURE__*/React.forwardRef(function ScatterChart(inProps
     ref: ref
   }, chartContainerProps, {
     children: /*#__PURE__*/_jsxs(ZAxisContextProvider, _extends({}, zAxisProps, {
-      children: [!props.disableVoronoi && /*#__PURE__*/_jsx(ChartsVoronoiHandler, _extends({}, voronoiHandlerProps)), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), props.grid && /*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsx("g", {
+      children: [!props.disableVoronoi && /*#__PURE__*/_jsx(ChartsVoronoiHandler, _extends({}, voronoiHandlerProps)), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsx("g", {
         "data-drawing-container": true,
         children: /*#__PURE__*/_jsx(ScatterPlot, _extends({}, scatterPlotProps))
       }), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps)), !props.loading && /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltipProps)), children]
@@ -127,6 +129,18 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     classes: PropTypes.object,
     direction: PropTypes.oneOf(['column', 'row']),
     hidden: PropTypes.bool,
+    itemGap: PropTypes.number,
+    itemMarkHeight: PropTypes.number,
+    itemMarkWidth: PropTypes.number,
+    labelStyle: PropTypes.object,
+    markGap: PropTypes.number,
+    onItemClick: PropTypes.func,
+    padding: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
+      bottom: PropTypes.number,
+      left: PropTypes.number,
+      right: PropTypes.number,
+      top: PropTypes.number
+    })]),
     position: PropTypes.shape({
       horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired,
       vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired

package/ScatterChart/ScatterPlot.js

@@ -1,11 +1,13 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { Scatter } from './Scatter';
-import { useCartesianContext } from '../context/CartesianProvider';
-import getColor from './getColor';
-import { ZAxisContext } from '../context/ZAxisContextProvider';
-import { useScatterSeries } from '../hooks/useSeries';
+import { Scatter } from "./Scatter.js";
+import { useCartesianContext } from "../context/CartesianProvider/index.js";
+import getColor from "./getColor.js";
+import { ZAxisContext } from "../context/ZAxisContextProvider.js";
+import { useScatterSeries } from "../hooks/useSeries.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:

package/ScatterChart/formatter.js

@@ -1,4 +1,4 @@
-import { defaultizeValueFormatter } from '../internals/defaultizeValueFormatter';
+import { defaultizeValueFormatter } from "../internals/defaultizeValueFormatter.js";
 const formatter = ({
   series,
   seriesOrder

package/ScatterChart/index.js

@@ -1,3 +1,3 @@
-export * from './ScatterChart';
-export * from './ScatterPlot';
-export * from './Scatter';
+export * from "./ScatterChart.js";
+export * from "./ScatterPlot.js";
+export * from "./Scatter.js";

package/ScatterChart/legend.js

@@ -1,4 +1,4 @@
-import { getLabel } from '../internals/getLabel';
+import { getLabel } from "../internals/getLabel.js";
 const legendGetter = params => {
   const {
     seriesOrder,
@@ -10,9 +10,10 @@ const legendGetter = params => {
       return acc;
     }
     acc.push({
+      id: seriesId,
+      seriesId,
       color: series[seriesId].color,
-      label: formattedLabel,
-      id: seriesId
+      label: formattedLabel
     });
     return acc;
   }, []);

package/ScatterChart/plugin.js

@@ -1,6 +1,6 @@
-import { getExtremumX, getExtremumY } from './extremums';
-import formatter from './formatter';
-import getColor from './getColor';
+import { getExtremumX, getExtremumY } from "./extremums.js";
+import formatter from "./formatter.js";
+import getColor from "./getColor.js";
 export const plugin = {
   seriesType: 'scatter',
   seriesFormatter: formatter,

package/ScatterChart/useScatterChartProps.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["xAxis", "yAxis", "zAxis", "series", "tooltip", "axisHighlight", "voronoiMaxRadius", "disableVoronoi", "legend", "width", "height", "margin", "colors", "sx", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "onItemClick", "children", "slots", "slotProps", "loading", "highlightedItem", "onHighlightChange", "className"];

package/SparkLineChart/SparkLineChart.js

@@ -1,14 +1,16 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["xAxis", "yAxis", "width", "height", "margin", "colors", "sx", "showTooltip", "tooltip", "showHighlight", "axisHighlight", "children", "slots", "slotProps", "data", "plotType", "valueFormatter", "area", "curve", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { BarPlot } from '../BarChart';
-import { LinePlot, AreaPlot, LineHighlightPlot } from '../LineChart';
-import { ResponsiveChartContainer } from '../ResponsiveChartContainer';
-import { DEFAULT_X_AXIS_KEY } from '../constants';
-import { ChartsTooltip } from '../ChartsTooltip';
-import { ChartsAxisHighlight } from '../ChartsAxisHighlight';
+import { BarPlot } from "../BarChart/index.js";
+import { LinePlot, AreaPlot, LineHighlightPlot } from "../LineChart/index.js";
+import { ResponsiveChartContainer } from "../ResponsiveChartContainer/index.js";
+import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
+import { ChartsTooltip } from "../ChartsTooltip/index.js";
+import { ChartsAxisHighlight } from "../ChartsAxisHighlight/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const SPARKLINE_DEFAULT_MARGIN = {
   top: 5,

package/SparkLineChart/index.js

@@ -1 +1 @@
-export * from './SparkLineChart';
+export * from "./SparkLineChart.js";

package/colorPalettes/index.js

@@ -1 +1 @@
-export * from './colorPalettes';
+export * from "./colorPalettes.js";

package/context/CartesianProvider/CartesianProvider.js

@@ -1,10 +1,12 @@
+'use client';
+
 import * as React from 'react';
-import { useDrawingArea } from '../../hooks/useDrawingArea';
-import { useSeries } from '../../hooks/useSeries';
-import { CartesianContext } from './CartesianContext';
-import { computeValue } from './computeValue';
-import { useXExtremumGetter } from '../PluginProvider/useXExtremumGetter';
-import { useYExtremumGetter } from '../PluginProvider';
+import { useDrawingArea } from "../../hooks/useDrawingArea.js";
+import { useSeries } from "../../hooks/useSeries.js";
+import { CartesianContext } from "./CartesianContext.js";
+import { computeValue } from "./computeValue.js";
+import { useXExtremumGetter } from "../PluginProvider/useXExtremumGetter.js";
+import { useYExtremumGetter } from "../PluginProvider/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function CartesianProvider(props) {
   const {

package/context/CartesianProvider/computeValue.js

@@ -1,11 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { scaleBand, scalePoint, scaleTime } from '@mui/x-charts-vendor/d3-scale';
-import { isBandScaleConfig, isPointScaleConfig } from '../../models/axis';
-import { getColorScale, getOrdinalColorScale } from '../../internals/colorScale';
-import { getTickNumber } from '../../hooks/useTicks';
-import { getScale } from '../../internals/getScale';
-import { zoomScaleRange } from './zoom';
-import { getAxisExtremum } from './getAxisExtremum';
+import { isBandScaleConfig, isPointScaleConfig } from "../../models/axis.js";
+import { getColorScale, getOrdinalColorScale } from "../../internals/colorScale.js";
+import { getTickNumber } from "../../hooks/useTicks.js";
+import { getScale } from "../../internals/getScale.js";
+import { zoomScaleRange } from "./zoom.js";
+import { getAxisExtremum } from "./getAxisExtremum.js";
 const getRange = (drawingArea, axisDirection, isReverse) => {
   const range = axisDirection === 'x' ? [drawingArea.left, drawingArea.left + drawingArea.width] : [drawingArea.top + drawingArea.height, drawingArea.top];
   return isReverse ? range.reverse() : range;

package/context/CartesianProvider/defaultizeAxis.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../../constants';
+import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from "../../constants/index.js";
 export const defaultizeAxis = (inAxis, axisName) => {
   const DEFAULT_AXIS_KEY = axisName === 'x' ? DEFAULT_X_AXIS_KEY : DEFAULT_Y_AXIS_KEY;
   return [...(inAxis?.map((axis, index) => _extends({

package/context/CartesianProvider/index.js

@@ -1,8 +1,8 @@
-import { computeValue } from './computeValue';
-export * from './CartesianProvider';
-export * from './CartesianContext';
-export * from './useCartesianContext';
-export * from './Cartesian.types';
+import { computeValue } from "./computeValue.js";
+export * from "./CartesianProvider.js";
+export * from "./CartesianContext.js";
+export * from "./useCartesianContext.js";
+export * from "./Cartesian.types.js";
 const cartesianProviderUtils = {
   computeValue
 };

package/context/CartesianProvider/useCartesianContext.js

@@ -1,5 +1,7 @@
+'use client';
+
 import * as React from 'react';
-import { CartesianContext } from './CartesianContext';
+import { CartesianContext } from "./CartesianContext.js";
 export const useCartesianContext = () => {
   const {
     data

package/context/DrawingProvider.js

@@ -1,7 +1,9 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useId from '@mui/utils/useId';
-import useChartDimensions from '../hooks/useChartDimensions';
+import useChartDimensions from "../hooks/useChartDimensions.js";
 
 /**
  * Defines the area in which it is possible to draw the charts.

package/context/HighlightedProvider/HighlightedProvider.js

@@ -1,13 +1,15 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["highlighted", "faded"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import useControlled from '@mui/utils/useControlled';
-import { HighlightedContext } from './HighlightedContext';
-import { createIsFaded } from './createIsFaded';
-import { createIsHighlighted } from './createIsHighlighted';
-import { useSeries } from '../../hooks/useSeries';
+import { HighlightedContext } from "./HighlightedContext.js";
+import { createIsFaded } from "./createIsFaded.js";
+import { createIsHighlighted } from "./createIsHighlighted.js";
+import { useSeries } from "../../hooks/useSeries.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const mergeDeprecatedOptions = options => {
   const _ref = options ?? {},

package/context/HighlightedProvider/index.js

@@ -1,4 +1,4 @@
-export * from './HighlightedProvider';
-export * from './HighlightedContext';
-export * from './useHighlighted';
-export * from './useItemHighlighted';
+export * from "./HighlightedProvider.js";
+export * from "./HighlightedContext.js";
+export * from "./useHighlighted.js";
+export * from "./useItemHighlighted.js";

package/context/HighlightedProvider/useHighlighted.js

@@ -1,5 +1,7 @@
+'use client';
+
 import * as React from 'react';
-import { HighlightedContext } from './HighlightedContext';
+import { HighlightedContext } from "./HighlightedContext.js";
 
 /**
  * A hook to get the highlighted state of the chart.

package/context/HighlightedProvider/useItemHighlighted.js

@@ -1,4 +1,6 @@
-import { useHighlighted } from './useHighlighted';
+'use client';
+
+import { useHighlighted } from "./useHighlighted.js";
 /**
  * A hook to check the highlighted state of the item.
  * This function already calculates that an item is not faded if it is highlighted.

package/context/InteractionProvider.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";

package/context/PluginProvider/PluginProvider.js

@@ -1,6 +1,8 @@
+'use client';
+
 import * as React from 'react';
-import { PluginContext } from './PluginContext';
-import { mergePlugins } from './mergePlugins';
+import { PluginContext } from "./PluginContext.js";
+import { mergePlugins } from "./mergePlugins.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function PluginProvider(props) {
   const {

package/context/PluginProvider/index.js

@@ -1,10 +1,10 @@
-export * from './PluginProvider';
-export * from './Plugin.types';
-export * from './PluginContext';
-export * from './ColorProcessor.types';
-export * from './SeriesFormatter.types';
-export * from './ExtremumGetter.types';
-export * from './useColorProcessor';
-export * from './useSeriesFormatter';
-export * from './useXExtremumGetter';
-export * from './useYExtremumGetter';
+export * from "./PluginProvider.js";
+export * from "./Plugin.types.js";
+export * from "./PluginContext.js";
+export * from "./ColorProcessor.types.js";
+export * from "./SeriesFormatter.types.js";
+export * from "./ExtremumGetter.types.js";
+export * from "./useColorProcessor.js";
+export * from "./useSeriesFormatter.js";
+export * from "./useXExtremumGetter.js";
+export * from "./useYExtremumGetter.js";

package/context/PluginProvider/mergePlugins.js

@@ -1,7 +1,7 @@
-import { plugin as barPlugin } from '../../BarChart/plugin';
-import { plugin as scatterPlugin } from '../../ScatterChart/plugin';
-import { plugin as linePlugin } from '../../LineChart/plugin';
-import { plugin as piePlugin } from '../../PieChart/plugin';
+import { plugin as barPlugin } from "../../BarChart/plugin.js";
+import { plugin as scatterPlugin } from "../../ScatterChart/plugin.js";
+import { plugin as linePlugin } from "../../LineChart/plugin.js";
+import { plugin as piePlugin } from "../../PieChart/plugin.js";
 export const defaultPlugins = [barPlugin, scatterPlugin, linePlugin, piePlugin];
 export function mergePlugins(plugins) {
   const defaultizedPlugins = plugins ?? defaultPlugins;

package/context/PluginProvider/useColorProcessor.js

@@ -1,5 +1,7 @@
+'use client';
+
 import * as React from 'react';
-import { PluginContext } from './PluginContext';
+import { PluginContext } from "./PluginContext.js";
 export function useColorProcessor(seriesType) {
   const {
     isInitialized,

package/context/PluginProvider/useSeriesFormatter.js

@@ -1,5 +1,7 @@
+'use client';
+
 import * as React from 'react';
-import { PluginContext } from './PluginContext';
+import { PluginContext } from "./PluginContext.js";
 export function useSeriesFormatter(seriesType) {
   const {
     isInitialized,

package/context/PluginProvider/useXExtremumGetter.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { PluginContext } from './PluginContext';
+import { PluginContext } from "./PluginContext.js";
 export function useXExtremumGetter(seriesType) {
   const {
     isInitialized,

package/context/PluginProvider/useYExtremumGetter.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { PluginContext } from './PluginContext';
+import { PluginContext } from "./PluginContext.js";
 export function useYExtremumGetter(seriesType) {
   const {
     isInitialized,

package/context/SeriesProvider/SeriesProvider.js

@@ -1,9 +1,11 @@
+'use client';
+
 import * as React from 'react';
 import { useTheme } from '@mui/material/styles';
-import { blueberryTwilightPalette } from '../../colorPalettes';
-import { SeriesContext } from './SeriesContext';
-import { preprocessSeries } from './processSeries';
-import { useSeriesFormatter } from '../PluginProvider';
+import { blueberryTwilightPalette } from "../../colorPalettes/index.js";
+import { SeriesContext } from "./SeriesContext.js";
+import { preprocessSeries } from "./processSeries.js";
+import { useSeriesFormatter } from "../PluginProvider/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function SeriesProvider(props) {
   const {

package/context/SeriesProvider/index.js

@@ -1,7 +1,7 @@
-import { preprocessSeries } from './processSeries';
-export * from './SeriesProvider';
-export * from './SeriesContext';
-export * from './Series.types';
+import { preprocessSeries } from "./processSeries.js";
+export * from "./SeriesProvider.js";
+export * from "./SeriesContext.js";
+export * from "./Series.types.js";
 const seriesProviderUtils = {
   preprocessSeries
 };

package/context/SeriesProvider/processSeries.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { defaultizeColor } from '../../internals/defaultizeColor';
+import { defaultizeColor } from "../../internals/defaultizeColor.js";
 /**
  * This methods is the interface between what the developer is providing and what components receives
  * To simplify the components behaviors, it groups series by type, such that LinePlots props are not updated if some line data are modified

package/context/ZAxisContextProvider.js

@@ -1,7 +1,9 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { getColorScale, getOrdinalColorScale } from '../internals/colorScale';
+import { getColorScale, getOrdinalColorScale } from "../internals/colorScale.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const ZAxisContext = /*#__PURE__*/React.createContext({
   zAxis: {},

package/context/index.js

@@ -1,2 +1,2 @@
-export * from './HighlightedProvider';
-export { ZAxisContextProvider } from './ZAxisContextProvider';
+export * from "./HighlightedProvider/index.js";
+export { ZAxisContextProvider } from "./ZAxisContextProvider.js";

package/hooks/index.js

@@ -1,7 +1,7 @@
-export * from './useDrawingArea';
-export * from './useChartId';
-export * from './useScale';
-export * from './useAxis';
-export * from './useColorScale';
-export * from './useSvgRef';
-export { useSeries as unstable_useSeries, usePieSeries as unstable_usePieSeries, useLineSeries as unstable_useLineSeries, useBarSeries as unstable_useBarSeries, useScatterSeries as unstable_useScatterSeries } from './useSeries';
+export * from "./useDrawingArea.js";
+export * from "./useChartId.js";
+export * from "./useScale.js";
+export * from "./useAxis.js";
+export * from "./useColorScale.js";
+export * from "./useSvgRef.js";
+export { useSeries as unstable_useSeries, usePieSeries as unstable_usePieSeries, useLineSeries as unstable_useLineSeries, useBarSeries as unstable_useBarSeries, useScatterSeries as unstable_useScatterSeries } from "./useSeries.js";

package/hooks/useAxis.js

@@ -1,4 +1,6 @@
-import { useCartesianContext } from '../context/CartesianProvider';
+'use client';
+
+import { useCartesianContext } from "../context/CartesianProvider/index.js";
 export function useXAxis(identifier) {
   const {
     xAxis,

package/hooks/useAxisEvents.js

@@ -1,10 +1,12 @@
+'use client';
+
 import * as React from 'react';
-import { InteractionContext } from '../context/InteractionProvider';
-import { useCartesianContext } from '../context/CartesianProvider';
-import { isBandScale } from '../internals/isBandScale';
-import { getSVGPoint } from '../internals/getSVGPoint';
-import { useSvgRef } from './useSvgRef';
-import { useDrawingArea } from './useDrawingArea';
+import { InteractionContext } from "../context/InteractionProvider.js";
+import { useCartesianContext } from "../context/CartesianProvider/index.js";
+import { isBandScale } from "../internals/isBandScale.js";
+import { getSVGPoint } from "../internals/getSVGPoint.js";
+import { useSvgRef } from "./useSvgRef.js";
+import { useDrawingArea } from "./useDrawingArea.js";
 function getAsANumber(value) {
   return value instanceof Date ? value.getTime() : value;
 }

package/hooks/useChartDimensions.js

@@ -1,6 +1,8 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { DEFAULT_MARGINS } from '../constants';
+import { DEFAULT_MARGINS } from "../constants/index.js";
 const useChartDimensions = (width, height, margin) => {
   const defaultizedMargin = _extends({}, DEFAULT_MARGINS, margin);
   const drawingArea = React.useMemo(() => ({