@mui/x-charts 7.15.0 → 7.16.0

package/hooks/useInteractionItemProps.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { InteractionContext } from '../context/InteractionProvider';
-import { useHighlighted } from '../context';
+import { InteractionContext } from "../context/InteractionProvider.js";
+import { useHighlighted } from "../context/index.js";
 export const useInteractionItemProps = skip => {
   const {
     dispatch: dispatchInteraction

package/hooks/useReducedMotion.js

@@ -1,4 +1,10 @@
 import { useIsomorphicLayoutEffect, Globals } from '@react-spring/web';
+const handleMediaChange = e => {
+  Globals.assign({
+    // Modification such the react-spring implementation such that this hook can remove animation but never activate animation.
+    skipAnimation: e.matches || undefined
+  });
+};
 
 /**
  * Returns `boolean` or `null`, used to automatically
@@ -8,23 +14,18 @@ import { useIsomorphicLayoutEffect, Globals } from '@react-spring/web';
  * The return value, post-effect, is the value of their preferred setting
  */
 export const useReducedMotion = () => {
-  // Taken from: https://github.com/pmndrs/react-spring/blob/02ec877bbfab0df46da0e4a47d5f68d3e731206a/packages/shared/src/hooks/useReducedMotion.ts#L13
+  // Taken from: https://github.com/pmndrs/react-spring/blob/fd65b605b85c3a24143c4ce9dd322fdfca9c66be/packages/shared/src/hooks/useReducedMotion.ts
 
   useIsomorphicLayoutEffect(() => {
-    if (!window.matchMedia) {
-      // skip animation in environments where `window.matchMedia` would not be available (i.e. test/jsdom)
-      Globals.assign({
-        skipAnimation: true
+    // Skip animation test/jsdom
+    const shouldSkipAnimation = !window?.matchMedia;
+    if (shouldSkipAnimation) {
+      handleMediaChange({
+        matches: true
       });
-      return () => {};
+      return undefined;
     }
     const mql = window.matchMedia('(prefers-reduced-motion)');
-    const handleMediaChange = event => {
-      Globals.assign({
-        // Modification such the react-spring implementation such that this hook can remove animation but never activate animation.
-        skipAnimation: event.matches || undefined
-      });
-    };
     handleMediaChange(mql);
 
     // MatchMedia is not fully supported in all environments, so we need to check if it exists before calling addEventListener

package/hooks/useScale.js

@@ -1,5 +1,5 @@
-import { isBandScale } from '../internals/isBandScale';
-import { useXAxis, useYAxis } from './useAxis';
+import { isBandScale } from "../internals/isBandScale.js";
+import { useXAxis, useYAxis } from "./useAxis.js";
 
 /**
  * For a given scale return a function that map value to their position.

package/hooks/useSeries.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { SeriesContext } from '../context/SeriesProvider';
+import { SeriesContext } from "../context/SeriesProvider/index.js";
 
 /**
  * Get access to the internal state of series.

package/hooks/useSvgRef.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { SvgContext } from '../context/DrawingProvider';
+import { SvgContext } from "../context/DrawingProvider.js";
 export function useSvgRef() {
   const {
     isInitialized,

package/hooks/useTicks.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { isBandScale } from '../internals/isBandScale';
-import { isInfinity } from '../internals/isInfinity';
+import { isBandScale } from "../internals/isBandScale.js";
+import { isInfinity } from "../internals/isInfinity.js";
 export function getTickNumber(params) {
   const {
     tickMaxStep,

package/index.js

@@ -1,33 +1,33 @@
 /**
- * @mui/x-charts v7.15.0
+ * @mui/x-charts v7.16.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-export * from './constants';
-export * from './context';
-export * from './hooks';
-export * from './colorPalettes';
-export * from './models';
-export * from './ChartsClipPath';
-export * from './ChartsReferenceLine';
-export * from './ChartsAxis';
-export * from './ChartsXAxis';
-export * from './ChartsYAxis';
-export * from './ChartsGrid';
-export * from './ChartsText';
-export * from './ChartsTooltip';
-export * from './ChartsLegend';
-export * from './ChartsAxisHighlight';
-export * from './ChartsVoronoiHandler';
-export * from './ChartsOnAxisClickHandler';
-export * from './BarChart';
-export * from './LineChart';
-export * from './PieChart';
-export * from './ScatterChart';
-export * from './SparkLineChart';
-export * from './Gauge';
-export * from './ChartContainer';
-export * from './ChartsSurface';
-export * from './ResponsiveChartContainer';
+export * from "./constants/index.js";
+export * from "./context/index.js";
+export * from "./hooks/index.js";
+export * from "./colorPalettes/index.js";
+export * from "./models/index.js";
+export * from "./ChartsClipPath/index.js";
+export * from "./ChartsReferenceLine/index.js";
+export * from "./ChartsAxis/index.js";
+export * from "./ChartsXAxis/index.js";
+export * from "./ChartsYAxis/index.js";
+export * from "./ChartsGrid/index.js";
+export * from "./ChartsText/index.js";
+export * from "./ChartsTooltip/index.js";
+export * from "./ChartsLegend/index.js";
+export * from "./ChartsAxisHighlight/index.js";
+export * from "./ChartsVoronoiHandler/index.js";
+export * from "./ChartsOnAxisClickHandler/index.js";
+export * from "./BarChart/index.js";
+export * from "./LineChart/index.js";
+export * from "./PieChart/index.js";
+export * from "./ScatterChart/index.js";
+export * from "./SparkLineChart/index.js";
+export * from "./Gauge/index.js";
+export * from "./ChartContainer/index.js";
+export * from "./ChartsSurface/index.js";
+export * from "./ResponsiveChartContainer/index.js";

package/internals/components/AxisSharedComponents.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { styled } from '@mui/material/styles';
-import { axisClasses } from '../../ChartsAxis/axisClasses';
+import { axisClasses } from "../../ChartsAxis/axisClasses.js";
 export const AxisRoot = styled('g', {
   name: 'MuiChartsAxis',
   slot: 'Root',

package/internals/components/ChartsAxesGradients/ChartsAxesGradients.js

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { useCartesianContext } from '../../../context/CartesianProvider';
-import { DrawingContext } from '../../../context/DrawingProvider';
-import { useDrawingArea } from '../../../hooks';
-import ChartsPiecewiseGradient from './ChartsPiecewiseGradient';
-import ChartsContinuousGradient from './ChartsContinuousGradient';
+import { useCartesianContext } from "../../../context/CartesianProvider/index.js";
+import { DrawingContext } from "../../../context/DrawingProvider.js";
+import { useDrawingArea } from "../../../hooks/index.js";
+import ChartsPiecewiseGradient from "./ChartsPiecewiseGradient.js";
+import ChartsContinuousGradient from "./ChartsContinuousGradient.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function useChartGradient() {
   const {

package/internals/components/ChartsAxesGradients/index.js

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

package/internals/getWordsByLines.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { getStringSize } from './domUtils';
+import { getStringSize } from "./domUtils.js";
 export function getWordsByLines({
   style,
   needsComputation,

package/internals/index.js

@@ -1,41 +1,41 @@
 // Components
-export * from './components/ChartsAxesGradients';
-export * from '../ResponsiveChartContainer/useChartContainerDimensions';
-export * from '../ResponsiveChartContainer/ResizableContainer';
+export * from "./components/ChartsAxesGradients/index.js";
+export * from "../ResponsiveChartContainer/useChartContainerDimensions.js";
+export * from "../ResponsiveChartContainer/ResizableContainer.js";
 
 // hooks
-export { useReducedMotion } from '../hooks/useReducedMotion';
-export { useSeries } from '../hooks/useSeries';
-export { useInteractionItemProps } from '../hooks/useInteractionItemProps';
-export { useDrawingArea } from '../hooks/useDrawingArea';
-export { useScatterChartProps } from '../ScatterChart/useScatterChartProps';
-export { useLineChartProps } from '../LineChart/useLineChartProps';
-export { useBarChartProps } from '../BarChart/useBarChartProps';
-export { useResponsiveChartContainerProps } from '../ResponsiveChartContainer/useResponsiveChartContainerProps';
-export { useChartContainerProps } from '../ChartContainer/useChartContainerProps';
+export { useReducedMotion } from "../hooks/useReducedMotion.js";
+export { useSeries } from "../hooks/useSeries.js";
+export { useInteractionItemProps } from "../hooks/useInteractionItemProps.js";
+export { useDrawingArea } from "../hooks/useDrawingArea.js";
+export { useScatterChartProps } from "../ScatterChart/useScatterChartProps.js";
+export { useLineChartProps } from "../LineChart/useLineChartProps.js";
+export { useBarChartProps } from "../BarChart/useBarChartProps.js";
+export { useResponsiveChartContainerProps } from "../ResponsiveChartContainer/useResponsiveChartContainerProps.js";
+export { useChartContainerProps } from "../ChartContainer/useChartContainerProps.js";
 
 // utils
-export * from './defaultizeValueFormatter';
-export * from './configInit';
-export * from './getLabel';
-export * from './getSVGPoint';
-export * from './isDefined';
-export { unstable_cleanupDOM } from './domUtils';
-export * from './getScale';
+export * from "./defaultizeValueFormatter.js";
+export * from "./configInit.js";
+export * from "./getLabel.js";
+export * from "./getSVGPoint.js";
+export * from "./isDefined.js";
+export { unstable_cleanupDOM } from "./domUtils.js";
+export * from "./getScale.js";
 
 // contexts
 
-export * from '../context/CartesianProvider';
-export * from '../context/DrawingProvider';
-export * from '../context/InteractionProvider';
-export * from '../context/SeriesProvider';
-export * from '../context/ZAxisContextProvider';
-export * from '../context/PluginProvider';
-export { getAxisExtremum } from '../context/CartesianProvider/getAxisExtremum';
+export * from "../context/CartesianProvider/index.js";
+export * from "../context/DrawingProvider.js";
+export * from "../context/InteractionProvider.js";
+export * from "../context/SeriesProvider/index.js";
+export * from "../context/ZAxisContextProvider.js";
+export * from "../context/PluginProvider/index.js";
+export { getAxisExtremum } from "../context/CartesianProvider/getAxisExtremum.js";
 
 // series configuration
-export * from '../models/seriesType/config';
-export * from '../models/seriesType/common';
-export * from '../models/helpers';
-export * from '../models/z-axis';
-export * from '../models/axis';
+export * from "../models/seriesType/config.js";
+export * from "../models/seriesType/common.js";
+export * from "../models/helpers.js";
+export * from "../models/z-axis.js";
+export * from "../models/axis.js";

package/internals/isCartesian.js

@@ -1,4 +1,4 @@
-import { cartesianSeriesTypes } from './configInit';
+import { cartesianSeriesTypes } from "./configInit.js";
 export function isCartesianSeriesType(seriesType) {
   return cartesianSeriesTypes.getTypes().has(seriesType);
 }

package/internals/useStringInterpolator.d.ts

@@ -0,0 +1 @@
+export declare const useStringInterpolator: (path: string) => (t: number) => string;

package/internals/{useAnimatedPath.js → useStringInterpolator.js}

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { interpolateString } from '@mui/x-charts-vendor/d3-interpolate';
-import { useSpring } from '@react-spring/web';
 function usePrevious(value) {
   const ref = React.useRef({
     currentPath: value,
@@ -14,20 +13,8 @@ function usePrevious(value) {
   }
   return ref.current;
 }
-export const useAnimatedPath = (path, skipAnimation) => {
+export const useStringInterpolator = path => {
   const memoryRef = usePrevious(path);
   const interpolator = React.useMemo(() => memoryRef.previousPath ? interpolateString(memoryRef.previousPath, memoryRef.currentPath) : () => memoryRef.currentPath, [memoryRef.currentPath, memoryRef.previousPath]);
-  const [{
-    value
-  }] = useSpring({
-    from: {
-      value: 0
-    },
-    to: {
-      value: 1
-    },
-    reset: true,
-    immediate: skipAnimation
-  }, [memoryRef.currentPath]);
-  return value.to(interpolator);
+  return interpolator;
 };

package/models/index.d.ts

@@ -2,3 +2,4 @@ export * from './seriesType';
 export * from './layout';
 export * from './stacking';
 export type { AxisConfig, ChartsYAxisProps, ChartsXAxisProps, ScaleName, ContinuousScaleName, } from './axis';
+export type { PropsFromSlot } from '@mui/x-internals/slots';

package/models/index.js

@@ -1,4 +1,6 @@
-export * from './seriesType';
-export * from './layout';
-export * from './stacking';
+export * from "./seriesType/index.js";
+export * from "./layout.js";
+export * from "./stacking.js";
+
+// Utils shared across the X packages
 export {};

package/models/seriesType/index.js

@@ -2,10 +2,10 @@
 
 // item identifier
 
-export * from './line';
-export * from './bar';
-export * from './scatter';
-export * from './pie';
+export * from "./line.js";
+export * from "./bar.js";
+export * from "./scatter.js";
+export * from "./pie.js";
 // Helpers
 
 export function isDefaultizedBarSeries(series) {

package/modern/BarChart/BarChart.js

@@ -2,17 +2,17 @@ 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 { BarPlot } from './BarPlot';
-import { ResponsiveChartContainer } from '../ResponsiveChartContainer';
-import { ChartsAxis } from '../ChartsAxis';
-import { ChartsTooltip } from '../ChartsTooltip';
-import { ChartsLegend } from '../ChartsLegend';
-import { ChartsAxisHighlight } from '../ChartsAxisHighlight';
-import { ChartsClipPath } from '../ChartsClipPath';
-import { ChartsGrid } from '../ChartsGrid';
-import { ChartsOnAxisClickHandler } from '../ChartsOnAxisClickHandler';
-import { ChartsOverlay } from '../ChartsOverlay/ChartsOverlay';
-import { useBarChartProps } from './useBarChartProps';
+import { BarPlot } from "./BarPlot.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 { ChartsAxisHighlight } from "../ChartsAxisHighlight/index.js";
+import { ChartsClipPath } from "../ChartsClipPath/index.js";
+import { ChartsGrid } from "../ChartsGrid/index.js";
+import { ChartsOnAxisClickHandler } from "../ChartsOnAxisClickHandler/index.js";
+import { ChartsOverlay } from "../ChartsOverlay/ChartsOverlay.js";
+import { useBarChartProps } from "./useBarChartProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Demos:
@@ -47,7 +47,7 @@ const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(inProps, ref) {
   return /*#__PURE__*/_jsxs(ResponsiveChartContainer, _extends({
     ref: ref
   }, chartContainerProps, {
-    children: [props.onAxisClick && /*#__PURE__*/_jsx(ChartsOnAxisClickHandler, _extends({}, axisClickHandlerProps)), props.grid && /*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsxs("g", _extends({}, clipPathGroupProps, {
+    children: [props.onAxisClick && /*#__PURE__*/_jsx(ChartsOnAxisClickHandler, _extends({}, axisClickHandlerProps)), /*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsxs("g", _extends({}, clipPathGroupProps, {
       children: [/*#__PURE__*/_jsx(BarPlot, _extends({}, barPlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps))]
     })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), !props.loading && /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltipProps)), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
   }));
@@ -139,6 +139,17 @@ process.env.NODE_ENV !== "production" ? BarChart.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,
+    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/modern/BarChart/BarClipPath.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["style", "maskId"];
 import * as React from 'react';
 import { animated } from '@react-spring/web';
-import { getRadius } from './getRadius';
+import { getRadius } from "./getRadius.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const buildInset = corners => `inset(0px round ${corners.topLeft}px ${corners.topRight}px ${corners.bottomRight}px ${corners.bottomLeft}px)`;
 function BarClipRect(props) {

package/modern/BarChart/BarElement.js

@@ -10,8 +10,8 @@ import { styled } from '@mui/material/styles';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 import { color as d3Color } from '@mui/x-charts-vendor/d3-color';
 import { animated } from '@react-spring/web';
-import { useInteractionItemProps } from '../hooks/useInteractionItemProps';
-import { useItemHighlighted } from '../context';
+import { useInteractionItemProps } from "../hooks/useInteractionItemProps.js";
+import { useItemHighlighted } from "../context/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function getBarElementUtilityClass(slot) {
   return generateUtilityClass('MuiBarElement', slot);

package/modern/BarChart/BarLabel/BarLabel.js

@@ -5,7 +5,7 @@ import * as React from 'react';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { animated } from '@react-spring/web';
 import PropTypes from 'prop-types';
-import { barLabelClasses } from './barLabelClasses';
+import { barLabelClasses } from "./barLabelClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const BarLabelComponent = styled(animated.text, {
   name: 'MuiBarLabel',

package/modern/BarChart/BarLabel/BarLabelItem.js

@@ -5,10 +5,10 @@ const _excluded = ["seriesId", "classes", "color", "style", "dataIndex", "barLab
 import * as React from 'react';
 import useSlotProps from '@mui/utils/useSlotProps';
 import PropTypes from 'prop-types';
-import { useUtilityClasses } from './barLabelClasses';
-import { getBarLabel } from './getBarLabel';
-import { BarLabel } from './BarLabel';
-import { useItemHighlighted } from '../../context';
+import { useUtilityClasses } from "./barLabelClasses.js";
+import { getBarLabel } from "./getBarLabel.js";
+import { BarLabel } from "./BarLabel.js";
+import { useItemHighlighted } from "../../context/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * @ignore - internal component.

package/modern/BarChart/BarLabel/BarLabelPlot.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["bars", "skipAnimation"];
 import * as React from 'react';
 import { useTransition } from '@react-spring/web';
-import { BarLabelItem } from './BarLabelItem';
+import { BarLabelItem } from "./BarLabelItem.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const leaveStyle = ({
   layout,

package/modern/BarChart/BarLabel/index.js

@@ -1,2 +1,2 @@
-export { BarLabel } from './BarLabel';
-export { barLabelClasses, getBarLabelUtilityClass } from './barLabelClasses';
+export { BarLabel } from "./BarLabel.js";
+export { barLabelClasses, getBarLabelUtilityClass } from "./barLabelClasses.js";

package/modern/BarChart/BarPlot.js

@@ -4,14 +4,14 @@ const _excluded = ["skipAnimation", "onItemClick", "borderRadius", "barLabel"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTransition } from '@react-spring/web';
-import { useCartesianContext } from '../context/CartesianProvider';
-import { BarElement } from './BarElement';
-import getColor from './getColor';
-import { useChartId } from '../hooks';
-import { BarClipPath } from './BarClipPath';
-import { BarLabelPlot } from './BarLabel/BarLabelPlot';
-import { checkScaleErrors } from './checkScaleErrors';
-import { useBarSeries } from '../hooks/useSeries';
+import { useCartesianContext } from "../context/CartesianProvider/index.js";
+import { BarElement } from "./BarElement.js";
+import getColor from "./getColor.js";
+import { useChartId } from "../hooks/index.js";
+import { BarClipPath } from "./BarClipPath.js";
+import { BarLabelPlot } from "./BarLabel/BarLabelPlot.js";
+import { checkScaleErrors } from "./checkScaleErrors.js";
+import { useBarSeries } from "../hooks/useSeries.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Solution of the equations

package/modern/BarChart/checkScaleErrors.js

@@ -1,5 +1,5 @@
-import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants';
-import { isBandScaleConfig, isPointScaleConfig } from '../models/axis';
+import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from "../constants/index.js";
+import { isBandScaleConfig, isPointScaleConfig } from "../models/axis.js";
 const getAxisMessage = (axisDirection, axisId) => {
   const axisName = `${axisDirection}-axis`;
   const axisIdName = `${axisDirection}Axis`;

package/modern/BarChart/formatter.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { stack as d3Stack } from '@mui/x-charts-vendor/d3-shape';
-import { getStackingGroups } from '../internals/stackSeries';
-import { defaultizeValueFormatter } from '../internals/defaultizeValueFormatter';
+import { getStackingGroups } from "../internals/stackSeries.js";
+import { defaultizeValueFormatter } from "../internals/defaultizeValueFormatter.js";
 let warnOnce = false;
 const formatter = (params, dataset) => {
   const {

package/modern/BarChart/index.js

@@ -1,4 +1,4 @@
-export * from './BarChart';
-export * from './BarPlot';
-export * from './BarElement';
-export * from './BarLabel';
+export * from "./BarChart.js";
+export * from "./BarPlot.js";
+export * from "./BarElement.js";
+export * from "./BarLabel/index.js";

package/modern/BarChart/legend.js

@@ -1,4 +1,4 @@
-import { getLabel } from '../internals/getLabel';
+import { getLabel } from "../internals/getLabel.js";
 const legendGetter = params => {
   const {
     seriesOrder,

package/modern/BarChart/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: 'bar',
   seriesFormatter: formatter,

package/modern/BarChart/useBarChartProps.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "tooltip", "onAxisClick", "axisHighlight", "legend", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "children", "slots", "slotProps", "skipAnimation", "loading", "layout", "onItemClick", "highlightedItem", "onHighlightChange", "borderRadius", "barLabel", "className"];
 import useId from '@mui/utils/useId';
-import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants';
+import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from "../constants/index.js";
 /**
  * A helper function that extracts BarChartProps from the input props
  * and returns an object with props for the children components of BarChart.

package/modern/ChartContainer/ChartContainer.js

@@ -1,15 +1,15 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { DrawingProvider } from '../context/DrawingProvider';
-import { SeriesProvider } from '../context/SeriesProvider';
-import { InteractionProvider } from '../context/InteractionProvider';
-import { ChartsSurface } from '../ChartsSurface';
-import { CartesianProvider } from '../context/CartesianProvider';
-import { ChartsAxesGradients } from '../internals/components/ChartsAxesGradients';
-import { HighlightedProvider, ZAxisContextProvider } from '../context';
-import { PluginProvider } from '../context/PluginProvider';
-import { useChartContainerProps } from './useChartContainerProps';
+import { DrawingProvider } from "../context/DrawingProvider.js";
+import { SeriesProvider } from "../context/SeriesProvider/index.js";
+import { InteractionProvider } from "../context/InteractionProvider.js";
+import { ChartsSurface } from "../ChartsSurface/index.js";
+import { CartesianProvider } from "../context/CartesianProvider/index.js";
+import { ChartsAxesGradients } from "../internals/components/ChartsAxesGradients/index.js";
+import { HighlightedProvider, ZAxisContextProvider } from "../context/index.js";
+import { PluginProvider } from "../context/PluginProvider/index.js";
+import { useChartContainerProps } from "./useChartContainerProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContainer(props, ref) {
   const {

package/modern/ChartContainer/index.js

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

package/modern/ChartContainer/useChartContainerProps.js

@@ -3,8 +3,8 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["width", "height", "series", "margin", "xAxis", "yAxis", "zAxis", "colors", "dataset", "sx", "title", "desc", "disableAxisListener", "highlightedItem", "onHighlightChange", "plugins", "children"];
 import * as React from 'react';
 import useForkRef from '@mui/utils/useForkRef';
-import { useDefaultizeAxis } from './useDefaultizeAxis';
-import { useReducedMotion } from '../hooks/useReducedMotion';
+import { useDefaultizeAxis } from "./useDefaultizeAxis.js";
+import { useReducedMotion } from "../hooks/useReducedMotion.js";
 export const useChartContainerProps = (props, ref) => {
   const {
       width,

package/modern/ChartContainer/useDefaultizeAxis.js

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