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

package/modern/ChartDataProvider/useChartDataProviderProps.js

@@ -1,31 +0,0 @@
-'use client';
-
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["children", "skipAnimation", "plugins", "seriesConfig"];
-import { useTheme } from '@mui/material/styles';
-export const useChartDataProviderProps = props => {
-  const {
-      children,
-      skipAnimation,
-      plugins,
-      seriesConfig
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const theme = useTheme();
-  const chartProviderProps = {
-    plugins,
-    seriesConfig,
-    pluginParams: _extends({
-      theme: theme.palette.mode
-    }, other)
-  };
-  const animationProviderProps = {
-    skipAnimation
-  };
-  return {
-    children,
-    animationProviderProps,
-    chartProviderProps
-  };
-};

package/modern/ChartsAxis/ChartsAxis.d.ts

@@ -1,28 +0,0 @@
-import * as React from 'react';
-import { ChartsAxisSlotProps, ChartsAxisSlots } from "../models/axis.js";
-export interface ChartsAxisProps {
-  /**
-   * Overridable component slots.
-   * @default {}
-   */
-  slots?: ChartsAxisSlots;
-  /**
-   * The props used for each component slot.
-   * @default {}
-   */
-  slotProps?: ChartsAxisSlotProps;
-}
-/**
- * Demos:
- *
- * - [Axis](https://mui.com/x/react-charts/axis/)
- *
- * API:
- *
- * - [ChartsAxis API](https://mui.com/x/api/charts/charts-axis/)
- */
-declare function ChartsAxis(props: ChartsAxisProps): React.JSX.Element;
-declare namespace ChartsAxis {
-  var propTypes: any;
-}
-export { ChartsAxis };

package/modern/ChartsAxis/ChartsAxis.js

@@ -1,69 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { ChartsXAxis } from "../ChartsXAxis/index.js";
-import { ChartsYAxis } from "../ChartsYAxis/index.js";
-import { useXAxes, useYAxes } from "../hooks/index.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * Demos:
- *
- * - [Axis](https://mui.com/x/react-charts/axis/)
- *
- * API:
- *
- * - [ChartsAxis API](https://mui.com/x/api/charts/charts-axis/)
- */
-function ChartsAxis(props) {
-  const {
-    slots,
-    slotProps
-  } = props;
-  const {
-    xAxisIds,
-    xAxis
-  } = useXAxes();
-  const {
-    yAxisIds,
-    yAxis
-  } = useYAxes();
-  return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [xAxisIds.map(axisId => {
-      if (!xAxis[axisId].position || xAxis[axisId].position === 'none') {
-        return null;
-      }
-      return /*#__PURE__*/_jsx(ChartsXAxis, {
-        slots: slots,
-        slotProps: slotProps,
-        axisId: axisId
-      }, axisId);
-    }), yAxisIds.map(axisId => {
-      if (!yAxis[axisId].position || yAxis[axisId].position === 'none') {
-        return null;
-      }
-      return /*#__PURE__*/_jsx(ChartsYAxis, {
-        slots: slots,
-        slotProps: slotProps,
-        axisId: axisId
-      }, axisId);
-    })]
-  });
-}
-process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  /**
-   * The props used for each component slot.
-   * @default {}
-   */
-  slotProps: PropTypes.object,
-  /**
-   * Overridable component slots.
-   * @default {}
-   */
-  slots: PropTypes.object
-} : void 0;
-export { ChartsAxis };

package/modern/ChartsAxis/axisClasses.d.ts

@@ -1,33 +0,0 @@
-export interface ChartsAxisClasses {
-  /** Styles applied to the root element. */
-  root: string;
-  /** Styles applied to the main line element. */
-  line: string;
-  /** Styles applied to group including the tick and its label. */
-  tickContainer: string;
-  /** Styles applied to ticks. */
-  tick: string;
-  /** Styles applied to ticks label.
-   *
-   * ⚠️ For performance reasons, only the inline styles get considered for bounding box computation.
-   * Modifying text size by adding properties like `font-size` or `letter-spacing` to this class might cause labels to overlap.
-   */
-  tickLabel: string;
-  /** Styles applied to the group containing the axis label. */
-  label: string;
-  /** Styles applied to x-axes. */
-  directionX: string;
-  /** Styles applied to y-axes. */
-  directionY: string;
-  /** Styles applied to the top axis. */
-  top: string;
-  /** Styles applied to the bottom axis. */
-  bottom: string;
-  /** Styles applied to the left axis. */
-  left: string;
-  /** Styles applied to the right axis. */
-  right: string;
-}
-export type ChartsAxisClassKey = keyof ChartsAxisClasses;
-export declare function getAxisUtilityClass(slot: string): string;
-export declare const axisClasses: ChartsAxisClasses;

package/modern/ChartsAxis/axisClasses.js

@@ -1,6 +0,0 @@
-import generateUtilityClass from '@mui/utils/generateUtilityClass';
-import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
-export function getAxisUtilityClass(slot) {
-  return generateUtilityClass('MuiChartsAxis', slot);
-}
-export const axisClasses = generateUtilityClasses('MuiChartsAxis', ['root', 'line', 'tickContainer', 'tick', 'tickLabel', 'label', 'directionX', 'directionY', 'top', 'bottom', 'left', 'right']);

package/modern/ChartsAxis/index.d.ts

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

package/modern/ChartsAxis/index.js

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

package/modern/ChartsAxisHighlight/ChartsAxisHighlight.d.ts

@@ -1,16 +0,0 @@
-import * as React from 'react';
-import { ChartsAxisHighlightProps } from "./ChartsAxisHighlight.types.js";
-/**
- * Demos:
- *
- * - [Custom components](https://mui.com/x/react-charts/components/)
- *
- * API:
- *
- * - [ChartsAxisHighlight API](https://mui.com/x/api/charts/charts-axis-highlight/)
- */
-declare function ChartsAxisHighlight(props: ChartsAxisHighlightProps): React.JSX.Element;
-declare namespace ChartsAxisHighlight {
-  var propTypes: any;
-}
-export { ChartsAxisHighlight };

package/modern/ChartsAxisHighlight/ChartsAxisHighlight.js

@@ -1,50 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import composeClasses from '@mui/utils/composeClasses';
-import { getAxisHighlightUtilityClass } from "./chartsAxisHighlightClasses.js";
-import ChartsYHighlight from "./ChartsYAxisHighlight.js";
-import ChartsXHighlight from "./ChartsXAxisHighlight.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useUtilityClasses = () => {
-  const slots = {
-    root: ['root']
-  };
-  return composeClasses(slots, getAxisHighlightUtilityClass);
-};
-
-/**
- * Demos:
- *
- * - [Custom components](https://mui.com/x/react-charts/components/)
- *
- * API:
- *
- * - [ChartsAxisHighlight API](https://mui.com/x/api/charts/charts-axis-highlight/)
- */
-function ChartsAxisHighlight(props) {
-  const {
-    x: xAxisHighlight,
-    y: yAxisHighlight
-  } = props;
-  const classes = useUtilityClasses();
-  return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [xAxisHighlight && /*#__PURE__*/_jsx(ChartsXHighlight, {
-      type: xAxisHighlight,
-      classes: classes
-    }), yAxisHighlight && /*#__PURE__*/_jsx(ChartsYHighlight, {
-      type: yAxisHighlight,
-      classes: classes
-    })]
-  });
-}
-process.env.NODE_ENV !== "production" ? ChartsAxisHighlight.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  x: PropTypes.oneOf(['band', 'line', 'none']),
-  y: PropTypes.oneOf(['band', 'line', 'none'])
-} : void 0;
-export { ChartsAxisHighlight };

package/modern/ChartsAxisHighlight/ChartsAxisHighlight.types.d.ts

@@ -1,5 +0,0 @@
-export type ChartsAxisHighlightType = 'none' | 'line' | 'band';
-export type ChartsAxisHighlightProps = {
-  x?: ChartsAxisHighlightType;
-  y?: ChartsAxisHighlightType;
-};

package/modern/ChartsAxisHighlight/ChartsAxisHighlight.types.js

@@ -1 +0,0 @@
-export {};

package/modern/ChartsAxisHighlight/ChartsAxisHighlightPath.d.ts

@@ -1,6 +0,0 @@
-import { ChartsAxisHighlightType } from "./ChartsAxisHighlight.types.js";
-export declare const ChartsAxisHighlightPath: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
-  ownerState: {
-    axisHighlight: ChartsAxisHighlightType;
-  };
-}, Pick<import("react").SVGProps<SVGPathElement>, keyof import("react").SVGProps<SVGPathElement>>, {}>;

package/modern/ChartsAxisHighlight/ChartsAxisHighlightPath.js

@@ -1,34 +0,0 @@
-'use client';
-
-import _extends from "@babel/runtime/helpers/esm/extends";
-import { styled } from '@mui/material/styles';
-export const ChartsAxisHighlightPath = styled('path', {
-  name: 'MuiChartsAxisHighlight',
-  slot: 'Root',
-  overridesResolver: (_, styles) => styles.root
-})(({
-  theme
-}) => ({
-  pointerEvents: 'none',
-  variants: [{
-    props: {
-      axisHighlight: 'band'
-    },
-    style: _extends({
-      fill: 'white',
-      fillOpacity: 0.1
-    }, theme.applyStyles('light', {
-      fill: 'gray'
-    }))
-  }, {
-    props: {
-      axisHighlight: 'line'
-    },
-    style: _extends({
-      strokeDasharray: '5 2',
-      stroke: '#ffffff'
-    }, theme.applyStyles('light', {
-      stroke: '#000000'
-    }))
-  }]
-}));

package/modern/ChartsAxisHighlight/ChartsXAxisHighlight.d.ts

@@ -1,10 +0,0 @@
-import * as React from 'react';
-import { ChartsAxisHighlightType } from "./ChartsAxisHighlight.types.js";
-import { ChartsAxisHighlightClasses } from "./chartsAxisHighlightClasses.js";
-/**
- * @ignore - internal component.
- */
-export default function ChartsXHighlight(props: {
-  type: ChartsAxisHighlightType;
-  classes: ChartsAxisHighlightClasses;
-}): React.JSX.Element;

package/modern/ChartsAxisHighlight/ChartsXAxisHighlight.js

@@ -1,53 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { getValueToPositionMapper, useXScale } from "../hooks/useScale.js";
-import { isBandScale } from "../internals/isBandScale.js";
-import { useSelector } from "../internals/store/useSelector.js";
-import { useStore } from "../internals/store/useStore.js";
-import { selectorChartsInteractionXAxisValue } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
-import { useDrawingArea } from "../hooks/index.js";
-import { ChartsAxisHighlightPath } from "./ChartsAxisHighlightPath.js";
-
-/**
- * @ignore - internal component.
- */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export default function ChartsXHighlight(props) {
-  const {
-    type,
-    classes
-  } = props;
-  const {
-    top,
-    height
-  } = useDrawingArea();
-  const xScale = useXScale();
-  const store = useStore();
-  const axisXValue = useSelector(store, selectorChartsInteractionXAxisValue);
-  const getXPosition = getValueToPositionMapper(xScale);
-  const isBandScaleX = type === 'band' && axisXValue !== null && isBandScale(xScale);
-  if (process.env.NODE_ENV !== 'production') {
-    const isError = isBandScaleX && xScale(axisXValue) === undefined;
-    if (isError) {
-      console.error([`MUI X: The position value provided for the axis is not valid for the current scale.`, `This probably means something is wrong with the data passed to the chart.`, `The ChartsAxisHighlight component will not be displayed.`].join('\n'));
-    }
-  }
-  return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [isBandScaleX && xScale(axisXValue) !== undefined && /*#__PURE__*/_jsx(ChartsAxisHighlightPath
-    // @ts-expect-error, xScale value is checked in the statement above
-    , {
-      d: `M ${xScale(axisXValue) - (xScale.step() - xScale.bandwidth()) / 2} ${top} l ${xScale.step()} 0 l 0 ${height} l ${-xScale.step()} 0 Z`,
-      className: classes.root,
-      ownerState: {
-        axisHighlight: 'band'
-      }
-    }), type === 'line' && axisXValue !== null && /*#__PURE__*/_jsx(ChartsAxisHighlightPath, {
-      d: `M ${getXPosition(axisXValue)} ${top} L ${getXPosition(axisXValue)} ${top + height}`,
-      className: classes.root,
-      ownerState: {
-        axisHighlight: 'line'
-      }
-    })]
-  });
-}

package/modern/ChartsAxisHighlight/ChartsYAxisHighlight.d.ts

@@ -1,10 +0,0 @@
-import * as React from 'react';
-import { ChartsAxisHighlightType } from "./ChartsAxisHighlight.types.js";
-import { ChartsAxisHighlightClasses } from "./chartsAxisHighlightClasses.js";
-/**
- * @ignore - internal component.
- */
-export default function ChartsYHighlight(props: {
-  type: ChartsAxisHighlightType;
-  classes: ChartsAxisHighlightClasses;
-}): React.JSX.Element;

package/modern/ChartsAxisHighlight/ChartsYAxisHighlight.js

@@ -1,53 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { getValueToPositionMapper, useYScale } from "../hooks/useScale.js";
-import { isBandScale } from "../internals/isBandScale.js";
-import { useSelector } from "../internals/store/useSelector.js";
-import { useStore } from "../internals/store/useStore.js";
-import { selectorChartsInteractionYAxisValue } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
-import { useDrawingArea } from "../hooks/index.js";
-import { ChartsAxisHighlightPath } from "./ChartsAxisHighlightPath.js";
-
-/**
- * @ignore - internal component.
- */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export default function ChartsYHighlight(props) {
-  const {
-    type,
-    classes
-  } = props;
-  const {
-    left,
-    width
-  } = useDrawingArea();
-  const yScale = useYScale();
-  const store = useStore();
-  const axisYValue = useSelector(store, selectorChartsInteractionYAxisValue);
-  const getYPosition = getValueToPositionMapper(yScale);
-  const isBandScaleY = type === 'band' && axisYValue !== null && isBandScale(yScale);
-  if (process.env.NODE_ENV !== 'production') {
-    const isError = isBandScaleY && yScale(axisYValue) === undefined;
-    if (isError) {
-      console.error([`MUI X: The position value provided for the axis is not valid for the current scale.`, `This probably means something is wrong with the data passed to the chart.`, `The ChartsAxisHighlight component will not be displayed.`].join('\n'));
-    }
-  }
-  return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [isBandScaleY && yScale(axisYValue) !== undefined && /*#__PURE__*/_jsx(ChartsAxisHighlightPath, {
-      d: `M ${left} ${
-      // @ts-expect-error, yScale value is checked in the statement above
-      yScale(axisYValue) - (yScale.step() - yScale.bandwidth()) / 2} l 0 ${yScale.step()} l ${width} 0 l 0 ${-yScale.step()} Z`,
-      className: classes.root,
-      ownerState: {
-        axisHighlight: 'band'
-      }
-    }), type === 'line' && axisYValue !== null && /*#__PURE__*/_jsx(ChartsAxisHighlightPath, {
-      d: `M ${left} ${getYPosition(axisYValue)} L ${left + width} ${getYPosition(axisYValue)}`,
-      className: classes.root,
-      ownerState: {
-        axisHighlight: 'line'
-      }
-    })]
-  });
-}

package/modern/ChartsAxisHighlight/chartsAxisHighlightClasses.d.ts

@@ -1,7 +0,0 @@
-export interface ChartsAxisHighlightClasses {
-  /** Styles applied to the root element. */
-  root: string;
-}
-export type ChartsAxisHighlightClassKey = keyof ChartsAxisHighlightClasses;
-export declare function getAxisHighlightUtilityClass(slot: string): string;
-export declare const chartsAxisHighlightClasses: ChartsAxisHighlightClasses;

package/modern/ChartsAxisHighlight/chartsAxisHighlightClasses.js

@@ -1,6 +0,0 @@
-import generateUtilityClass from '@mui/utils/generateUtilityClass';
-import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
-export function getAxisHighlightUtilityClass(slot) {
-  return generateUtilityClass('MuiChartsAxisHighlight', slot);
-}
-export const chartsAxisHighlightClasses = generateUtilityClasses('MuiChartsAxisHighlight', ['root']);

package/modern/ChartsAxisHighlight/index.d.ts

@@ -1,4 +0,0 @@
-export * from "./ChartsAxisHighlight.js";
-export * from "./chartsAxisHighlightClasses.js";
-export * from "./ChartsAxisHighlight.types.js";
-export * from "./ChartsAxisHighlightPath.js";

package/modern/ChartsAxisHighlight/index.js

@@ -1,4 +0,0 @@
-export * from "./ChartsAxisHighlight.js";
-export * from "./chartsAxisHighlightClasses.js";
-export * from "./ChartsAxisHighlight.types.js";
-export * from "./ChartsAxisHighlightPath.js";

package/modern/ChartsClipPath/ChartsClipPath.d.ts

@@ -1,20 +0,0 @@
-import * as React from 'react';
-export type ChartsClipPathProps = {
-  id: string;
-  offset?: {
-    top?: number;
-    right?: number;
-    bottom?: number;
-    left?: number;
-  };
-};
-/**
- * API:
- *
- * - [ChartsClipPath API](https://mui.com/x/api/charts/charts-clip-path/)
- */
-declare function ChartsClipPath(props: ChartsClipPathProps): React.JSX.Element;
-declare namespace ChartsClipPath {
-  var propTypes: any;
-}
-export { ChartsClipPath };

package/modern/ChartsClipPath/ChartsClipPath.js

@@ -1,53 +0,0 @@
-'use client';
-
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { useDrawingArea } from "../hooks/useDrawingArea.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * API:
- *
- * - [ChartsClipPath API](https://mui.com/x/api/charts/charts-clip-path/)
- */
-function ChartsClipPath(props) {
-  const {
-    id,
-    offset: offsetProps
-  } = props;
-  const {
-    left,
-    top,
-    width,
-    height
-  } = useDrawingArea();
-  const offset = _extends({
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0
-  }, offsetProps);
-  return /*#__PURE__*/_jsx("clipPath", {
-    id: id,
-    children: /*#__PURE__*/_jsx("rect", {
-      x: left - offset.left,
-      y: top - offset.top,
-      width: width + offset.left + offset.right,
-      height: height + offset.top + offset.bottom
-    })
-  });
-}
-process.env.NODE_ENV !== "production" ? ChartsClipPath.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  id: PropTypes.string.isRequired,
-  offset: PropTypes.shape({
-    bottom: PropTypes.number,
-    left: PropTypes.number,
-    right: PropTypes.number,
-    top: PropTypes.number
-  })
-} : void 0;
-export { ChartsClipPath };

package/modern/ChartsClipPath/index.d.ts

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

package/modern/ChartsClipPath/index.js

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

package/modern/ChartsGrid/ChartsGrid.d.ts

@@ -1,30 +0,0 @@
-import * as React from 'react';
-import { ChartsGridClasses } from "./chartsGridClasses.js";
-export interface ChartsGridProps {
-  /**
-   * Displays vertical grid.
-   */
-  vertical?: boolean;
-  /**
-   * Displays horizontal grid.
-   */
-  horizontal?: boolean;
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes?: Partial<ChartsGridClasses>;
-}
-/**
- * Demos:
- *
- * - [Axis](https://mui.com/x/react-charts/axis/)
- *
- * API:
- *
- * - [ChartsGrid API](https://mui.com/x/api/charts/charts-axis/)
- */
-declare function ChartsGrid(inProps: ChartsGridProps): React.JSX.Element;
-declare namespace ChartsGrid {
-  var propTypes: any;
-}
-export { ChartsGrid };

package/modern/ChartsGrid/ChartsGrid.js

@@ -1,91 +0,0 @@
-'use client';
-
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["vertical", "horizontal"];
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import composeClasses from '@mui/utils/composeClasses';
-import { useThemeProps } from '@mui/material/styles';
-import { getChartsGridUtilityClass } from "./chartsGridClasses.js";
-import { useDrawingArea } from "../hooks/useDrawingArea.js";
-import { GridRoot } from "./styledComponents.js";
-import { ChartsGridVertical } from "./ChartsVerticalGrid.js";
-import { ChartsGridHorizontal } from "./ChartsHorizontalGrid.js";
-import { useXAxes, useYAxes } from "../hooks/useAxis.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useUtilityClasses = ({
-  classes
-}) => {
-  const slots = {
-    root: ['root'],
-    verticalLine: ['line', 'verticalLine'],
-    horizontalLine: ['line', 'horizontalLine']
-  };
-  return composeClasses(slots, getChartsGridUtilityClass, classes);
-};
-/**
- * Demos:
- *
- * - [Axis](https://mui.com/x/react-charts/axis/)
- *
- * API:
- *
- * - [ChartsGrid API](https://mui.com/x/api/charts/charts-axis/)
- */
-function ChartsGrid(inProps) {
-  const props = useThemeProps({
-    props: inProps,
-    name: 'MuiChartsGrid'
-  });
-  const drawingArea = useDrawingArea();
-  const {
-      vertical,
-      horizontal
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const {
-    xAxis,
-    xAxisIds
-  } = useXAxes();
-  const {
-    yAxis,
-    yAxisIds
-  } = useYAxes();
-  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 && /*#__PURE__*/_jsx(ChartsGridVertical, {
-      axis: verticalAxis,
-      start: drawingArea.top,
-      end: drawingArea.height + drawingArea.top,
-      classes: classes
-    }), horizontal && /*#__PURE__*/_jsx(ChartsGridHorizontal, {
-      axis: horizontalAxis,
-      start: drawingArea.left,
-      end: drawingArea.width + drawingArea.left,
-      classes: classes
-    })]
-  }));
-}
-process.env.NODE_ENV !== "production" ? ChartsGrid.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: PropTypes.object,
-  /**
-   * Displays horizontal grid.
-   */
-  horizontal: PropTypes.bool,
-  /**
-   * Displays vertical grid.
-   */
-  vertical: PropTypes.bool
-} : void 0;
-export { ChartsGrid };