@mui/x-charts 7.14.0 → 7.16.0

package/models/layout.js

@@ -1,5 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+export {};

package/models/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
-  "module": "../esm/models/index.js",
-  "main": "./index.js",
+  "module": "./index.js",
+  "main": "../node/models/index.js",
   "types": "./index.d.ts"
 }

package/models/seriesType/bar.js

@@ -1,5 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+export {};

package/models/seriesType/common.js

@@ -1,5 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+export {};

package/models/seriesType/config.js

@@ -1,5 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+export {};

package/models/seriesType/index.js

@@ -1,71 +1,16 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _exportNames = {
-  isDefaultizedBarSeries: true,
-  isBarSeries: true
-};
-exports.isBarSeries = isBarSeries;
-exports.isDefaultizedBarSeries = isDefaultizedBarSeries;
-var _line = require("./line");
-Object.keys(_line).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _line[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _line[key];
-    }
-  });
-});
-var _bar = require("./bar");
-Object.keys(_bar).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _bar[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _bar[key];
-    }
-  });
-});
-var _scatter = require("./scatter");
-Object.keys(_scatter).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _scatter[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _scatter[key];
-    }
-  });
-});
-var _pie = require("./pie");
-Object.keys(_pie).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _pie[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _pie[key];
-    }
-  });
-});
 // Series definition
 
 // item identifier
 
+export * from "./line.js";
+export * from "./bar.js";
+export * from "./scatter.js";
+export * from "./pie.js";
 // Helpers
 
-function isDefaultizedBarSeries(series) {
+export function isDefaultizedBarSeries(series) {
   return series.type === 'bar';
 }
-function isBarSeries(series) {
+export function isBarSeries(series) {
   return series.type === 'bar';
 }

package/models/seriesType/line.js

@@ -1,5 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+export {};

package/models/seriesType/pie.js

@@ -1,5 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+export {};

package/models/seriesType/scatter.js

@@ -1,5 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+export {};

package/models/stacking.js

@@ -1,5 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+export {};

package/models/z-axis.js

@@ -1,5 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+export {};

package/modern/BarChart/BarChart.js

@@ -1,17 +1,18 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-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 { useThemeProps } from '@mui/material/styles';
+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:
@@ -24,7 +25,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *
  * - [BarChart API](https://mui.com/x/api/charts/bar-chart/)
  */
-const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
+const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiBarChart'
+  });
   const {
     chartContainerProps,
     barPlotProps,
@@ -42,7 +47,7 @@ const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, 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]
   }));
@@ -134,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',
@@ -29,12 +29,12 @@ export const BarLabelComponent = styled(animated.text, {
     opacity: 0.3
   }
 }));
-function BarLabel(props) {
-  const themeProps = useThemeProps({
-    props,
+function BarLabel(inProps) {
+  const props = useThemeProps({
+    props: inProps,
     name: 'MuiBarLabel'
   });
-  const otherProps = _objectWithoutPropertiesLoose(themeProps, _excluded);
+  const otherProps = _objectWithoutPropertiesLoose(props, _excluded);
   return /*#__PURE__*/_jsx(BarLabelComponent, _extends({}, otherProps));
 }
 process.env.NODE_ENV !== "production" ? BarLabel.propTypes = {

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({

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
 }) => {
@@ -49,67 +31,37 @@ const useUtilityClasses = ({
  *
  * - [ChartsGrid API](https://mui.com/x/api/charts/charts-axis/)
  */
-function ChartsGrid(props) {
-  const themeProps = useThemeProps({
-    props,
+function ChartsGrid(inProps) {
+  const props = useThemeProps({
+    props: inProps,
     name: 'MuiChartsGrid'
   });
   const drawingArea = useDrawingArea();
   const {
       vertical,
       horizontal
-    } = themeProps,
-    other = _objectWithoutPropertiesLoose(themeProps, _excluded);
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const {
     xAxis,
     xAxisIds,
     yAxis,
     yAxisIds
   } = useCartesianContext();
-  const classes = useUtilityClasses(themeProps);
-  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 classes = useUtilityClasses(props);
+  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 = {