@mui/x-charts 7.15.0 → 7.16.0

package/modern/ChartsAxis/ChartsAxis.js

@@ -1,9 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useCartesianContext } from '../context/CartesianProvider';
-import { ChartsXAxis } from '../ChartsXAxis';
-import { ChartsYAxis } from '../ChartsYAxis';
+import { useCartesianContext } from "../context/CartesianProvider/index.js";
+import { ChartsXAxis } from "../ChartsXAxis/index.js";
+import { ChartsYAxis } from "../ChartsYAxis/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getAxisId = (propsValue, defaultAxisId) => {
   if (propsValue == null) {

package/modern/ChartsAxis/index.js

@@ -1,2 +1,2 @@
-export * from './ChartsAxis';
-export * from './axisClasses';
+export * from "./ChartsAxis.js";
+export * from "./axisClasses.js";

package/modern/ChartsAxisHighlight/ChartsAxisHighlight.js

@@ -5,10 +5,10 @@ import composeClasses from '@mui/utils/composeClasses';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 import { styled } from '@mui/material/styles';
-import { InteractionContext } from '../context/InteractionProvider';
-import { useCartesianContext } from '../context/CartesianProvider';
-import { getValueToPositionMapper } from '../hooks/useScale';
-import { isBandScale } from '../internals/isBandScale';
+import { InteractionContext } from "../context/InteractionProvider.js";
+import { useCartesianContext } from "../context/CartesianProvider/index.js";
+import { getValueToPositionMapper } from "../hooks/useScale.js";
+import { isBandScale } from "../internals/isBandScale.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function getAxisHighlightUtilityClass(slot) {
   return generateUtilityClass('MuiChartsAxisHighlight', slot);

package/modern/ChartsAxisHighlight/index.js

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

package/modern/ChartsClipPath/ChartsClipPath.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useDrawingArea } from '../hooks/useDrawingArea';
+import { useDrawingArea } from "../hooks/useDrawingArea.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * API:

package/modern/ChartsClipPath/index.js

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

package/modern/ChartsGrid/ChartsGrid.js

@@ -4,32 +4,14 @@ const _excluded = ["vertical", "horizontal"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
-import { styled, useThemeProps } from '@mui/material/styles';
-import { useCartesianContext } from '../context/CartesianProvider';
-import { useTicks } from '../hooks/useTicks';
-import { getChartsGridUtilityClass, chartsGridClasses } from './chartsGridClasses';
-import { useDrawingArea } from '../hooks/useDrawingArea';
+import { useThemeProps } from '@mui/material/styles';
+import { useCartesianContext } from "../context/CartesianProvider/index.js";
+import { getChartsGridUtilityClass } from "./chartsGridClasses.js";
+import { useDrawingArea } from "../hooks/useDrawingArea.js";
+import { GridRoot } from "./styledCommonents.js";
+import { ChartsGridVertical } from "./ChartsVerticalGrid.js";
+import { ChartsGridHorizontal } from "./ChartsHorizontalGrid.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const GridRoot = styled('g', {
-  name: 'MuiChartsGrid',
-  slot: 'Root',
-  overridesResolver: (props, styles) => [{
-    [`&.${chartsGridClasses.verticalLine}`]: styles.verticalLine
-  }, {
-    [`&.${chartsGridClasses.horizontalLine}`]: styles.horizontalLine
-  }, styles.root]
-})({});
-const GridLine = styled('line', {
-  name: 'MuiChartsGrid',
-  slot: 'Line',
-  overridesResolver: (props, styles) => styles.line
-})(({
-  theme
-}) => ({
-  stroke: (theme.vars || theme).palette.divider,
-  shapeRendering: 'crispEdges',
-  strokeWidth: 1
-}));
 const useUtilityClasses = ({
   classes
 }) => {
@@ -67,49 +49,19 @@ function ChartsGrid(inProps) {
     yAxisIds
   } = useCartesianContext();
   const classes = useUtilityClasses(props);
-  const horizontalAxisId = yAxisIds[0];
-  const verticalAxisId = xAxisIds[0];
-  const {
-    scale: xScale,
-    tickNumber: xTickNumber,
-    tickInterval: xTickInterval
-  } = xAxis[verticalAxisId];
-  const {
-    scale: yScale,
-    tickNumber: yTickNumber,
-    tickInterval: yTickInterval
-  } = yAxis[horizontalAxisId];
-  const xTicks = useTicks({
-    scale: xScale,
-    tickNumber: xTickNumber,
-    tickInterval: xTickInterval
-  });
-  const yTicks = useTicks({
-    scale: yScale,
-    tickNumber: yTickNumber,
-    tickInterval: yTickInterval
-  });
+  const horizontalAxis = yAxis[yAxisIds[0]];
+  const verticalAxis = xAxis[xAxisIds[0]];
   return /*#__PURE__*/_jsxs(GridRoot, _extends({}, other, {
     className: classes.root,
-    children: [vertical && xTicks.map(({
-      formattedValue,
-      offset
-    }) => /*#__PURE__*/_jsx(GridLine, {
-      y1: drawingArea.top,
-      y2: drawingArea.top + drawingArea.height,
-      x1: offset,
-      x2: offset,
-      className: classes.verticalLine
-    }, `vertical-${formattedValue}`)), horizontal && yTicks.map(({
-      formattedValue,
-      offset
-    }) => /*#__PURE__*/_jsx(GridLine, {
-      y1: offset,
-      y2: offset,
-      x1: drawingArea.left,
-      x2: drawingArea.left + drawingArea.width,
-      className: classes.horizontalLine
-    }, `horizontal-${formattedValue}`))]
+    children: [vertical && /*#__PURE__*/_jsx(ChartsGridVertical, {
+      axis: verticalAxis,
+      drawingArea: drawingArea,
+      classes: classes
+    }), horizontal && /*#__PURE__*/_jsx(ChartsGridHorizontal, {
+      axis: horizontalAxis,
+      drawingArea: drawingArea,
+      classes: classes
+    })]
   }));
 }
 process.env.NODE_ENV !== "production" ? ChartsGrid.propTypes = {

package/modern/ChartsGrid/ChartsHorizontalGrid.js

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { useTicks } from "../hooks/useTicks.js";
+import { GridLine } from "./styledCommonents.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @ignore - internal component.
+ */
+export function ChartsGridHorizontal(props) {
+  const {
+    axis,
+    drawingArea,
+    classes
+  } = props;
+  const {
+    scale,
+    tickNumber,
+    tickInterval
+  } = axis;
+  const yTicks = useTicks({
+    scale,
+    tickNumber,
+    tickInterval
+  });
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: yTicks.map(({
+      formattedValue,
+      offset
+    }) => /*#__PURE__*/_jsx(GridLine, {
+      y1: offset,
+      y2: offset,
+      x1: drawingArea.left,
+      x2: drawingArea.left + drawingArea.width,
+      className: classes.horizontalLine
+    }, `horizontal-${formattedValue}`))
+  });
+}

package/modern/ChartsGrid/ChartsVerticalGrid.js

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { useTicks } from "../hooks/useTicks.js";
+import { GridLine } from "./styledCommonents.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @ignore - internal component.
+ */
+export function ChartsGridVertical(props) {
+  const {
+    axis,
+    drawingArea,
+    classes
+  } = props;
+  const {
+    scale,
+    tickNumber,
+    tickInterval
+  } = axis;
+  const xTicks = useTicks({
+    scale,
+    tickNumber,
+    tickInterval
+  });
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: xTicks.map(({
+      formattedValue,
+      offset
+    }) => /*#__PURE__*/_jsx(GridLine, {
+      y1: drawingArea.top,
+      y2: drawingArea.top + drawingArea.height,
+      x1: offset,
+      x2: offset,
+      className: classes.verticalLine
+    }, `vertical-${formattedValue}`))
+  });
+}

package/modern/ChartsGrid/index.js

@@ -1,2 +1,2 @@
-export * from './ChartsGrid';
-export * from './chartsGridClasses';
+export * from "./ChartsGrid.js";
+export * from "./chartsGridClasses.js";

package/modern/ChartsGrid/styledCommonents.js

@@ -0,0 +1,22 @@
+import { styled } from '@mui/material/styles';
+import { chartsGridClasses } from "./chartsGridClasses.js";
+export const GridRoot = styled('g', {
+  name: 'MuiChartsGrid',
+  slot: 'Root',
+  overridesResolver: (props, styles) => [{
+    [`&.${chartsGridClasses.verticalLine}`]: styles.verticalLine
+  }, {
+    [`&.${chartsGridClasses.horizontalLine}`]: styles.horizontalLine
+  }, styles.root]
+})({});
+export const GridLine = styled('line', {
+  name: 'MuiChartsGrid',
+  slot: 'Line',
+  overridesResolver: (props, styles) => styles.line
+})(({
+  theme
+}) => ({
+  stroke: (theme.vars || theme).palette.divider,
+  shapeRendering: 'crispEdges',
+  strokeWidth: 1
+}));

package/modern/ChartsLegend/ChartsLegend.js

@@ -1,14 +1,16 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["slots", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import useSlotProps from '@mui/utils/useSlotProps';
 import composeClasses from '@mui/utils/composeClasses';
 import { useThemeProps, useTheme } from '@mui/material/styles';
-import { getSeriesToDisplay } from './utils';
-import { getLegendUtilityClass } from './chartsLegendClasses';
-import { DefaultChartsLegend } from './DefaultChartsLegend';
-import { useDrawingArea } from '../hooks';
-import { useSeries } from '../hooks/useSeries';
+import { getSeriesToDisplay } from "./utils.js";
+import { getLegendUtilityClass } from "./chartsLegendClasses.js";
+import { DefaultChartsLegend } from "./DefaultChartsLegend.js";
+import { useDrawingArea } from "../hooks/index.js";
+import { useSeries } from "../hooks/useSeries.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -23,27 +25,26 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getLegendUtilityClass, classes);
 };
-const defaultProps = {
-  position: {
-    horizontal: 'middle',
-    vertical: 'top'
-  },
-  direction: 'row'
-};
 function ChartsLegend(inProps) {
   const props = useThemeProps({
-    props: _extends({}, defaultProps, inProps),
+    props: inProps,
     name: 'MuiChartsLegend'
   });
+  const defaultizedProps = _extends({
+    direction: 'row'
+  }, props, {
+    position: _extends({
+      horizontal: 'middle',
+      vertical: 'top'
+    }, props.position)
+  });
   const {
-    position,
-    direction,
-    hidden,
-    slots,
-    slotProps
-  } = props;
+      slots,
+      slotProps
+    } = defaultizedProps,
+    other = _objectWithoutPropertiesLoose(defaultizedProps, _excluded);
   const theme = useTheme();
-  const classes = useUtilityClasses(_extends({}, props, {
+  const classes = useUtilityClasses(_extends({}, defaultizedProps, {
     theme
   }));
   const drawingArea = useDrawingArea();
@@ -53,15 +54,12 @@ function ChartsLegend(inProps) {
   const chartLegendRenderProps = useSlotProps({
     elementType: ChartLegendRender,
     externalSlotProps: slotProps?.legend,
-    additionalProps: {
-      position,
-      direction,
+    additionalProps: _extends({}, other, {
       classes,
       drawingArea,
       series,
-      hidden,
       seriesToDisplay
-    },
+    }),
     ownerState: {}
   });
   return /*#__PURE__*/_jsx(ChartLegendRender, _extends({}, chartLegendRenderProps));
@@ -85,6 +83,42 @@ process.env.NODE_ENV !== "production" ? ChartsLegend.propTypes = {
    * @default false
    */
   hidden: PropTypes.bool,
+  /**
+   * Space between two legend items (in px).
+   * @default 10
+   */
+  itemGap: PropTypes.number,
+  /**
+   * Height of the item mark (in px).
+   * @default 20
+   */
+  itemMarkHeight: PropTypes.number,
+  /**
+   * Width of the item mark (in px).
+   * @default 20
+   */
+  itemMarkWidth: PropTypes.number,
+  /**
+   * Style applied to legend labels.
+   * @default theme.typography.subtitle1
+   */
+  labelStyle: PropTypes.object,
+  /**
+   * Space between the mark and the label (in px).
+   * @default 5
+   */
+  markGap: PropTypes.number,
+  /**
+   * Legend padding (in px).
+   * Can either be a single number, or an object with top, left, bottom, right properties.
+   * @default 10
+   */
+  padding: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
+    bottom: PropTypes.number,
+    left: PropTypes.number,
+    right: PropTypes.number,
+    top: PropTypes.number
+  })]),
   /**
    * The position of the legend.
    */

package/modern/ChartsLegend/ContinuousColorLegend.js

@@ -3,13 +3,13 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTheme } from '@mui/material/styles';
 import { useRtl } from '@mui/system/RtlProvider';
-import ChartsContinuousGradient from '../internals/components/ChartsAxesGradients/ChartsContinuousGradient';
-import { useChartId, useDrawingArea } from '../hooks';
-import { getScale } from '../internals/getScale';
-import { getPercentageValue } from '../internals/getPercentageValue';
-import { ChartsText } from '../ChartsText';
-import { getStringSize } from '../internals/domUtils';
-import { useAxis } from './useAxis';
+import ChartsContinuousGradient from "../internals/components/ChartsAxesGradients/ChartsContinuousGradient.js";
+import { useChartId, useDrawingArea } from "../hooks/index.js";
+import { getScale } from "../internals/getScale.js";
+import { getPercentageValue } from "../internals/getPercentageValue.js";
+import { ChartsText } from "../ChartsText/index.js";
+import { getStringSize } from "../internals/domUtils.js";
+import { useAxis } from "./useAxis.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function getPositionOffset(position, legendBox, svgBox) {
   let offsetX = 0;

package/modern/ChartsLegend/DefaultChartsLegend.js

@@ -1,15 +1,19 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["drawingArea", "seriesToDisplay"];
+const _excluded = ["drawingArea", "seriesToDisplay", "hidden"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { LegendPerItem } from './LegendPerItem';
+import { LegendPerItem } from "./LegendPerItem.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function DefaultChartsLegend(props) {
   const {
-      seriesToDisplay
+      seriesToDisplay,
+      hidden
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
+  if (hidden) {
+    return null;
+  }
   return /*#__PURE__*/_jsx(LegendPerItem, _extends({}, other, {
     itemsToDisplay: seriesToDisplay
   }));

package/modern/ChartsLegend/LegendPerItem.js

@@ -5,10 +5,10 @@ import * as React from 'react';
 import NoSsr from '@mui/material/NoSsr';
 import { useTheme, styled } from '@mui/material/styles';
 import { useRtl } from '@mui/system/RtlProvider';
-import { ChartsText } from '../ChartsText';
-import { getWordsByLines } from '../internals/getWordsByLines';
-import { legendItemPlacements } from './legendItemsPlacement';
-import { useDrawingArea } from '../hooks/useDrawingArea';
+import { ChartsText } from "../ChartsText/index.js";
+import { getWordsByLines } from "../internals/getWordsByLines.js";
+import { legendItemPlacements } from "./legendItemsPlacement.js";
+import { useDrawingArea } from "../hooks/useDrawingArea.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const ChartsLegendRoot = styled('g', {
   name: 'MuiChartsLegend',
@@ -42,7 +42,6 @@ const getStandardizedPadding = padding => {
  */
 export function LegendPerItem(props) {
   const {
-    hidden,
     position,
     direction,
     itemsToDisplay,
@@ -108,9 +107,6 @@ export function LegendPerItem(props) {
         return (totalHeight - legendHeight) / 2;
     }
   }, [position.vertical, padding.top, padding.bottom, totalHeight, legendHeight]);
-  if (hidden) {
-    return null;
-  }
   return /*#__PURE__*/_jsx(NoSsr, {
     children: /*#__PURE__*/_jsx(ChartsLegendRoot, {
       className: classes?.root,

package/modern/ChartsLegend/PiecewiseColorLegend.js

@@ -3,9 +3,9 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["axisDirection", "axisId", "hideFirst", "hideLast", "labelFormatter"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useAxis } from './useAxis';
-import { LegendPerItem } from './LegendPerItem';
-import { notNull } from '../internals/notNull';
+import { useAxis } from "./useAxis.js";
+import { LegendPerItem } from "./LegendPerItem.js";
+import { notNull } from "../internals/notNull.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function defaultLabelFormatter(params) {
   if (params.min === null) {
@@ -93,11 +93,6 @@ process.env.NODE_ENV !== "production" ? PiecewiseColorLegend.propTypes = {
    * The default depends on the chart.
    */
   direction: PropTypes.oneOf(['column', 'row']).isRequired,
-  /**
-   * Set to true to hide the legend.
-   * @default false
-   */
-  hidden: PropTypes.bool,
   /**
    * Hide the first item of the legend, corresponding to the [-infinity, min] piece.
    * @default false

package/modern/ChartsLegend/index.js

@@ -1,6 +1,6 @@
-export * from './ChartsLegend';
-export * from './DefaultChartsLegend';
-export * from './ContinuousColorLegend';
-export * from './PiecewiseColorLegend';
-export * from './chartsLegendClasses';
-export * from './utils';
+export * from "./ChartsLegend.js";
+export * from "./DefaultChartsLegend.js";
+export * from "./ContinuousColorLegend.js";
+export * from "./PiecewiseColorLegend.js";
+export * from "./chartsLegendClasses.js";
+export * from "./utils.js";

package/modern/ChartsLegend/useAxis.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { ZAxisContext } from '../context/ZAxisContextProvider';
-import { useCartesianContext } from '../context/CartesianProvider/useCartesianContext';
+import { ZAxisContext } from "../context/ZAxisContextProvider.js";
+import { useCartesianContext } from "../context/CartesianProvider/useCartesianContext.js";
 /**
  * Helper to select an axis definition according to its direction and id.
  */

package/modern/ChartsLegend/utils.js

@@ -1,7 +1,7 @@
-import getBarLegend from '../BarChart/legend';
-import getScatterLegend from '../ScatterChart/legend';
-import getLineLegend from '../LineChart/legend';
-import getPieLegend from '../PieChart/legend';
+import getBarLegend from "../BarChart/legend.js";
+import getScatterLegend from "../ScatterChart/legend.js";
+import getLineLegend from "../LineChart/legend.js";
+import getPieLegend from "../PieChart/legend.js";
 const legendGetter = {
   bar: getBarLegend,
   scatter: getScatterLegend,

package/modern/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.js

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { InteractionContext } from '../context/InteractionProvider';
-import { useSeries } from '../hooks/useSeries';
-import { useSvgRef } from '../hooks';
-import { useCartesianContext } from '../context/CartesianProvider';
+import { InteractionContext } from "../context/InteractionProvider.js";
+import { useSeries } from "../hooks/useSeries.js";
+import { useSvgRef } from "../hooks/index.js";
+import { useCartesianContext } from "../context/CartesianProvider/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function ChartsOnAxisClickHandler(props) {
   const {

package/modern/ChartsOnAxisClickHandler/index.js

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

package/modern/ChartsOverlay/ChartsLoadingOverlay.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["message"];
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
-import { useDrawingArea } from '../hooks/useDrawingArea';
+import { useDrawingArea } from "../hooks/useDrawingArea.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const StyledText = styled('text')(({
   theme

package/modern/ChartsOverlay/ChartsNoDataOverlay.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["message"];
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
-import { useDrawingArea } from '../hooks/useDrawingArea';
+import { useDrawingArea } from "../hooks/useDrawingArea.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const StyledText = styled('text')(({
   theme

package/modern/ChartsOverlay/ChartsOverlay.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { ChartsLoadingOverlay } from './ChartsLoadingOverlay';
-import { useSeries } from '../hooks/useSeries';
-import { ChartsNoDataOverlay } from './ChartsNoDataOverlay';
+import { ChartsLoadingOverlay } from "./ChartsLoadingOverlay.js";
+import { useSeries } from "../hooks/useSeries.js";
+import { ChartsNoDataOverlay } from "./ChartsNoDataOverlay.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function useNoData() {
   const seriesPerType = useSeries();

package/modern/ChartsOverlay/index.js

@@ -1,3 +1,3 @@
-export { ChartsOverlay } from './ChartsOverlay';
-export { ChartsLoadingOverlay } from './ChartsLoadingOverlay';
-export { ChartsNoDataOverlay } from './ChartsNoDataOverlay';
+export { ChartsOverlay } from "./ChartsOverlay.js";
+export { ChartsLoadingOverlay } from "./ChartsLoadingOverlay.js";
+export { ChartsNoDataOverlay } from "./ChartsNoDataOverlay.js";

package/modern/ChartsReferenceLine/ChartsReferenceLine.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { ChartsXReferenceLine } from './ChartsXReferenceLine';
-import { ChartsYReferenceLine } from './ChartsYReferenceLine';
+import { ChartsXReferenceLine } from "./ChartsXReferenceLine.js";
+import { ChartsYReferenceLine } from "./ChartsYReferenceLine.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function ChartsReferenceLine(props) {
   const {

package/modern/ChartsReferenceLine/ChartsXReferenceLine.js

@@ -1,11 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import composeClasses from '@mui/utils/composeClasses';
-import { useDrawingArea, useXScale } from '../hooks';
-import { ReferenceLineRoot } from './common';
-import { ChartsText } from '../ChartsText';
-import { getReferenceLineUtilityClass } from './chartsReferenceLineClasses';
-import { warnOnce } from '../internals/warning';
+import { useDrawingArea, useXScale } from "../hooks/index.js";
+import { ReferenceLineRoot } from "./common.js";
+import { ChartsText } from "../ChartsText/index.js";
+import { getReferenceLineUtilityClass } from "./chartsReferenceLineClasses.js";
+import { warnOnce } from "../internals/warning.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getTextParams = ({
   top,

package/modern/ChartsReferenceLine/ChartsYReferenceLine.js

@@ -1,11 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import composeClasses from '@mui/utils/composeClasses';
-import { useDrawingArea, useYScale } from '../hooks';
-import { ReferenceLineRoot } from './common';
-import { ChartsText } from '../ChartsText';
-import { getReferenceLineUtilityClass } from './chartsReferenceLineClasses';
-import { warnOnce } from '../internals/warning';
+import { useDrawingArea, useYScale } from "../hooks/index.js";
+import { ReferenceLineRoot } from "./common.js";
+import { ChartsText } from "../ChartsText/index.js";
+import { getReferenceLineUtilityClass } from "./chartsReferenceLineClasses.js";
+import { warnOnce } from "../internals/warning.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getTextParams = ({
   left,

package/modern/ChartsReferenceLine/common.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { styled } from '@mui/material/styles';
-import { referenceLineClasses } from './chartsReferenceLineClasses';
+import { referenceLineClasses } from "./chartsReferenceLineClasses.js";
 export const ReferenceLineRoot = styled('g')(({
   theme
 }) => ({