@mui/x-charts 8.0.0-alpha.6 → 8.0.0-alpha.8

package/modern/hooks/useAxis.js

@@ -1,19 +1,45 @@
 'use client';
 
-import { useCartesianContext } from "../context/CartesianProvider/index.js";
-export function useXAxis(identifier) {
+import { selectorChartXAxis, selectorChartYAxis } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.selectors.js";
+import { useSelector } from "../internals/store/useSelector.js";
+import { useStore } from "../internals/store/useStore.js";
+export function useXAxes() {
+  const store = useStore();
   const {
+    axis: xAxis,
+    axisIds: xAxisIds
+  } = useSelector(store, selectorChartXAxis);
+  return {
     xAxis,
     xAxisIds
-  } = useCartesianContext();
+  };
+}
+export function useYAxes() {
+  const store = useStore();
+  const {
+    axis: yAxis,
+    axisIds: yAxisIds
+  } = useSelector(store, selectorChartYAxis);
+  return {
+    yAxis,
+    yAxisIds
+  };
+}
+export function useXAxis(identifier) {
+  const store = useStore();
+  const {
+    axis: xAxis,
+    axisIds: xAxisIds
+  } = useSelector(store, selectorChartXAxis);
   const id = typeof identifier === 'string' ? identifier : xAxisIds[identifier ?? 0];
   return xAxis[id];
 }
 export function useYAxis(identifier) {
+  const store = useStore();
   const {
-    yAxis,
-    yAxisIds
-  } = useCartesianContext();
+    axis: yAxis,
+    axisIds: yAxisIds
+  } = useSelector(store, selectorChartYAxis);
   const id = typeof identifier === 'string' ? identifier : yAxisIds[identifier ?? 0];
   return yAxis[id];
 }

package/modern/hooks/useAxisEvents.js

@@ -2,25 +2,29 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useCartesianContext } from "../context/CartesianProvider/index.js";
 import { isBandScale } from "../internals/isBandScale.js";
 import { getSVGPoint } from "../internals/getSVGPoint.js";
 import { useSvgRef } from "./useSvgRef.js";
-import { useDrawingArea } from "./useDrawingArea.js";
 import { useStore } from "../internals/store/useStore.js";
+import { useChartContext } from "../context/ChartProvider/index.js";
+import { useXAxes, useYAxes } from "./useAxis.js";
 function getAsANumber(value) {
   return value instanceof Date ? value.getTime() : value;
 }
 export const useAxisEvents = disableAxisListener => {
   const svgRef = useSvgRef();
-  const drawingArea = useDrawingArea();
+  const {
+    instance
+  } = useChartContext();
   const {
     xAxis,
+    xAxisIds
+  } = useXAxes();
+  const {
     yAxis,
-    xAxisIds,
     yAxisIds
-  } = useCartesianContext();
-  const store = useStore(disableAxisListener);
+  } = useYAxes();
+  const store = useStore();
   const usedXAxis = xAxisIds[0];
   const usedYAxis = yAxisIds[0];
 
@@ -106,7 +110,7 @@ export const useAxisEvents = disableAxisListener => {
       const svgPoint = getSVGPoint(element, target);
       mousePosition.current.x = svgPoint.x;
       mousePosition.current.y = svgPoint.y;
-      if (!drawingArea.isPointInside(svgPoint, {
+      if (!instance.isPointInside(svgPoint, {
         targetElement: event.target
       })) {
         if (mousePosition.current.isInChart) {
@@ -157,5 +161,5 @@ export const useAxisEvents = disableAxisListener => {
       element.removeEventListener('pointercancel', handleOut);
       element.removeEventListener('pointerleave', handleOut);
     };
-  }, [svgRef, store, usedYAxis, yAxis, usedXAxis, xAxis, disableAxisListener, drawingArea]);
+  }, [svgRef, store, usedYAxis, yAxis, usedXAxis, xAxis, disableAxisListener, instance]);
 };

package/modern/hooks/useChartGradientId.js

@@ -0,0 +1,47 @@
+'use client';
+
+import * as React from 'react';
+import { useChartId } from "./useChartId.js";
+/**
+ * Returns a function that generates a gradient id for the given axis id.
+ */
+export function useChartGradientIdBuilder() {
+  const chartId = useChartId();
+  return React.useCallback(axisId => `${chartId}-gradient-${axisId}`, [chartId]);
+}
+
+/**
+ * Returns a function that generates a gradient id for the given axis id.
+ */
+export function useChartGradientIdObjectBoundBuilder() {
+  const chartId = useChartId();
+  return React.useCallback(axisId => `${chartId}-gradient-${axisId}-object-bound`, [chartId]);
+}
+
+/**
+ * Returns a gradient id for the given axis id.
+ *
+ * Can be useful when reusing the same gradient on custom components.
+ *
+ * For a gradient that respects the coordinates of the object on which it is applied, use `useChartGradientIdObjectBound` instead.
+ *
+ * @param axisId the axis id
+ * @returns the gradient id
+ */
+export function useChartGradientId(axisId) {
+  return useChartGradientIdBuilder()(axisId);
+}
+
+/**
+ * Returns a gradient id for the given axis id.
+ *
+ * Can be useful when reusing the same gradient on custom components.
+ *
+ * This gradient differs from `useChartGradientId` in that it respects the coordinates of the object on which it is applied.
+ *
+ * @param axisId the axis id
+ * @returns the gradient id
+ */
+export function useChartGradientIdObjectBound(axisId) {
+  return useChartGradientIdObjectBoundBuilder()(axisId);
+}

package/modern/hooks/useColorScale.js

@@ -1,12 +1,12 @@
 'use client';
 
-import { useCartesianContext } from "../context/CartesianProvider/index.js";
-import { useZAxis } from "./useZAxis.js";
+import { useXAxes, useYAxes } from "./useAxis.js";
+import { useZAxes } from "./useZAxis.js";
 export function useXColorScale(identifier) {
   const {
     xAxis,
     xAxisIds
-  } = useCartesianContext();
+  } = useXAxes();
   const id = typeof identifier === 'string' ? identifier : xAxisIds[identifier ?? 0];
   return xAxis[id].colorScale;
 }
@@ -14,7 +14,7 @@ export function useYColorScale(identifier) {
   const {
     yAxis,
     yAxisIds
-  } = useCartesianContext();
+  } = useYAxes();
   const id = typeof identifier === 'string' ? identifier : yAxisIds[identifier ?? 0];
   return yAxis[id].colorScale;
 }
@@ -22,7 +22,7 @@ export function useZColorScale(identifier) {
   const {
     zAxis,
     zAxisIds
-  } = useZAxis();
+  } = useZAxes();
   const id = typeof identifier === 'string' ? identifier : zAxisIds[identifier ?? 0];
   return zAxis[id]?.colorScale;
 }

package/modern/hooks/useDrawingArea.js

@@ -1,24 +1,9 @@
 'use client';
 
-import * as React from 'react';
-import { DrawingAreaContext } from "../context/DrawingAreaProvider/index.js";
+import { useStore } from "../internals/store/useStore.js";
+import { useSelector } from "../internals/store/useSelector.js";
+import { selectorChartDrawingArea } from "../internals/plugins/corePlugins/useChartDimensions/useChartDimensions.selectors.js";
 export function useDrawingArea() {
-  const {
-    left,
-    top,
-    width,
-    height,
-    bottom,
-    right,
-    isPointInside
-  } = React.useContext(DrawingAreaContext);
-  return React.useMemo(() => ({
-    left,
-    top,
-    width,
-    height,
-    bottom,
-    right,
-    isPointInside
-  }), [height, left, top, width, bottom, right, isPointInside]);
+  const store = useStore();
+  return useSelector(store, selectorChartDrawingArea);
 }

package/{ChartsLegend/utils.js → modern/hooks/useLegend.js}

@@ -1,16 +1,35 @@
+'use client';
+
 import getBarLegend from "../BarChart/legend.js";
 import getScatterLegend from "../ScatterChart/legend.js";
 import getLineLegend from "../LineChart/legend.js";
 import getPieLegend from "../PieChart/legend.js";
+import { useSeries } from "./useSeries.js";
 const legendGetter = {
   bar: getBarLegend,
   scatter: getScatterLegend,
   line: getLineLegend,
   pie: getPieLegend
 };
-export function getSeriesToDisplay(series) {
+function getSeriesToDisplay(series) {
   return Object.keys(series).flatMap(seriesType => {
     const getter = legendGetter[seriesType];
     return getter === undefined ? [] : getter(series[seriesType]);
   });
+}
+
+/**
+ * Get the legend items to display.
+ *
+ * This hook is used by the `ChartsLegend` component. And will return the legend items formatted for display.
+ *
+ * An alternative is to use the `useSeries` hook and format the legend items yourself.
+ *
+ * @returns legend data
+ */
+export function useLegend() {
+  const series = useSeries();
+  return {
+    items: getSeriesToDisplay(series)
+  };
 }

package/modern/hooks/useSeries.js

@@ -1,8 +1,9 @@
 'use client';
 
 import * as React from 'react';
-import { SeriesContext } from "../context/SeriesProvider/index.js";
-
+import { useStore } from "../internals/store/useStore.js";
+import { useSelector } from "../internals/store/useSelector.js";
+import { selectorChartSeriesProcessed } from "../internals/plugins/corePlugins/useChartSeries/useChartSeries.selectors.js";
 /**
  * Get access to the internal state of series.
  * Structured by type of series:
@@ -10,14 +11,8 @@ import { SeriesContext } from "../context/SeriesProvider/index.js";
  * @returns FormattedSeries series
  */
 export function useSeries() {
-  const {
-    isInitialized,
-    data
-  } = React.useContext(SeriesContext);
-  if (!isInitialized) {
-    throw new Error(['MUI X: Could not find the series ref context.', 'It looks like you rendered your component outside of a ChartsContainer parent component.'].join('\n'));
-  }
-  return data;
+  const store = useStore();
+  return useSelector(store, selectorChartSeriesProcessed);
 }
 
 /**

package/modern/hooks/useZAxis.js

@@ -1,8 +1,27 @@
 'use client';
 
-import * as React from 'react';
-import { ZAxisContext } from "../context/ZAxisContextProvider.js";
-export const useZAxis = () => {
-  const data = React.useContext(ZAxisContext);
-  return data;
-};
+import { useStore } from "../internals/store/useStore.js";
+import { selectorChartZAxis } from "../internals/plugins/featurePlugins/useChartZAxis/index.js";
+import { useSelector } from "../internals/store/useSelector.js";
+export function useZAxes() {
+  const store = useStore();
+  const {
+    axis: zAxis,
+    axisIds: zAxisIds
+  } = useSelector(store, selectorChartZAxis) ?? {
+    axis: {},
+    axisIds: []
+  };
+  return {
+    zAxis,
+    zAxisIds
+  };
+}
+export function useZAxis(identifier) {
+  const {
+    zAxis,
+    zAxisIds
+  } = useZAxes();
+  const id = typeof identifier === 'string' ? identifier : zAxisIds[identifier ?? 0];
+  return zAxis[id];
+}

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v8.0.0-alpha.6
+ * @mui/x-charts v8.0.0-alpha.8
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -18,6 +18,7 @@ export * from "./ChartsYAxis/index.js";
 export * from "./ChartsGrid/index.js";
 export * from "./ChartsText/index.js";
 export * from "./ChartsTooltip/index.js";
+export * from "./ChartsLabel/index.js";
 export * from "./ChartsLegend/index.js";
 export * from "./ChartsAxisHighlight/index.js";
 export * from "./ChartsVoronoiHandler/index.js";

package/modern/internals/calculateMargins.js

@@ -0,0 +1,25 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { DEFAULT_MARGINS, DEFAULT_LEGEND_FACING_MARGIN } from "../constants/index.js";
+export const calculateMargins = props => {
+  if (props.hideLegend || !props.series?.some(s => s.label)) {
+    return _extends({}, DEFAULT_MARGINS, props.margin);
+  }
+  if (props.slotProps?.legend?.direction === 'vertical') {
+    if (props.slotProps?.legend?.position?.horizontal === 'left') {
+      return _extends({}, DEFAULT_MARGINS, {
+        left: DEFAULT_LEGEND_FACING_MARGIN
+      }, props.margin);
+    }
+    return _extends({}, DEFAULT_MARGINS, {
+      right: DEFAULT_LEGEND_FACING_MARGIN
+    }, props.margin);
+  }
+  if (props.slotProps?.legend?.position?.vertical === 'bottom') {
+    return _extends({}, DEFAULT_MARGINS, {
+      bottom: DEFAULT_LEGEND_FACING_MARGIN
+    }, props.margin);
+  }
+  return _extends({}, DEFAULT_MARGINS, {
+    top: DEFAULT_LEGEND_FACING_MARGIN
+  }, props.margin);
+};

package/modern/internals/components/ChartsAxesGradients/ChartsAxesGradients.js

@@ -1,13 +1,11 @@
 import * as React from 'react';
-import { useCartesianContext } from "../../../context/CartesianProvider/index.js";
-import { useChartId, useDrawingArea } from "../../../hooks/index.js";
+import { useDrawingArea, useXAxes, useYAxes } from "../../../hooks/index.js";
 import ChartsPiecewiseGradient from "./ChartsPiecewiseGradient.js";
 import ChartsContinuousGradient from "./ChartsContinuousGradient.js";
+import ChartsContinuousGradientObjectBound from "./ChartsContinuousGradientObjectBound.js";
+import { useZAxes } from "../../../hooks/useZAxis.js";
+import { useChartGradientIdBuilder, useChartGradientIdObjectBoundBuilder } from "../../../hooks/useChartGradientId.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function useChartGradient() {
-  const chartId = useChartId();
-  return React.useCallback((axisId, direction) => `${chartId}-gradient-${direction}-${axisId}`, [chartId]);
-}
 export function ChartsAxesGradients() {
   const {
     top,
@@ -19,21 +17,30 @@ export function ChartsAxesGradients() {
   } = useDrawingArea();
   const svgHeight = top + height + bottom;
   const svgWidth = left + width + right;
-  const getGradientId = useChartGradient();
+  const getGradientId = useChartGradientIdBuilder();
+  const getObjectBoundGradientId = useChartGradientIdObjectBoundBuilder();
   const {
-    xAxisIds,
     xAxis,
-    yAxisIds,
-    yAxis
-  } = useCartesianContext();
+    xAxisIds
+  } = useXAxes();
+  const {
+    yAxis,
+    yAxisIds
+  } = useYAxes();
+  const {
+    zAxis,
+    zAxisIds
+  } = useZAxes();
   const filteredYAxisIds = yAxisIds.filter(axisId => yAxis[axisId].colorMap !== undefined);
   const filteredXAxisIds = xAxisIds.filter(axisId => xAxis[axisId].colorMap !== undefined);
-  if (filteredYAxisIds.length === 0 && filteredXAxisIds.length === 0) {
+  const filteredZAxisIds = zAxisIds.filter(axisId => zAxis[axisId].colorMap !== undefined);
+  if (filteredYAxisIds.length === 0 && filteredXAxisIds.length === 0 && filteredZAxisIds.length === 0) {
     return null;
   }
   return /*#__PURE__*/_jsxs("defs", {
     children: [filteredYAxisIds.map(axisId => {
-      const gradientId = getGradientId(axisId, 'y');
+      const gradientId = getGradientId(axisId);
+      const objectBoundGradientId = getObjectBoundGradientId(axisId);
       const {
         colorMap,
         scale,
@@ -51,19 +58,27 @@ export function ChartsAxesGradients() {
         }, gradientId);
       }
       if (colorMap?.type === 'continuous') {
-        return /*#__PURE__*/_jsx(ChartsContinuousGradient, {
-          isReversed: !reverse,
-          scale: scale,
-          colorScale: colorScale,
-          colorMap: colorMap,
-          size: svgHeight,
-          gradientId: gradientId,
-          direction: "y"
+        return /*#__PURE__*/_jsxs(React.Fragment, {
+          children: [/*#__PURE__*/_jsx(ChartsContinuousGradient, {
+            isReversed: !reverse,
+            scale: scale,
+            colorScale: colorScale,
+            colorMap: colorMap,
+            size: svgHeight,
+            gradientId: gradientId,
+            direction: "y"
+          }), /*#__PURE__*/_jsx(ChartsContinuousGradientObjectBound, {
+            isReversed: reverse,
+            colorScale: colorScale,
+            colorMap: colorMap,
+            gradientId: objectBoundGradientId
+          })]
         }, gradientId);
       }
       return null;
     }), filteredXAxisIds.map(axisId => {
-      const gradientId = getGradientId(axisId, 'x');
+      const gradientId = getGradientId(axisId);
+      const objectBoundGradientId = getObjectBoundGradientId(axisId);
       const {
         colorMap,
         scale,
@@ -81,15 +96,36 @@ export function ChartsAxesGradients() {
         }, gradientId);
       }
       if (colorMap?.type === 'continuous') {
-        return /*#__PURE__*/_jsx(ChartsContinuousGradient, {
-          isReversed: reverse,
-          scale: scale,
+        return /*#__PURE__*/_jsxs(React.Fragment, {
+          children: [/*#__PURE__*/_jsx(ChartsContinuousGradient, {
+            isReversed: reverse,
+            scale: scale,
+            colorScale: colorScale,
+            colorMap: colorMap,
+            size: svgWidth,
+            gradientId: gradientId,
+            direction: "x"
+          }), /*#__PURE__*/_jsx(ChartsContinuousGradientObjectBound, {
+            isReversed: reverse,
+            colorScale: colorScale,
+            colorMap: colorMap,
+            gradientId: objectBoundGradientId
+          })]
+        }, gradientId);
+      }
+      return null;
+    }), filteredZAxisIds.map(axisId => {
+      const objectBoundGradientId = getObjectBoundGradientId(axisId);
+      const {
+        colorMap,
+        colorScale
+      } = zAxis[axisId];
+      if (colorMap?.type === 'continuous') {
+        return /*#__PURE__*/_jsx(ChartsContinuousGradientObjectBound, {
           colorScale: colorScale,
           colorMap: colorMap,
-          size: svgWidth,
-          gradientId: gradientId,
-          direction: "x"
-        }, gradientId);
+          gradientId: objectBoundGradientId
+        }, objectBoundGradientId);
       }
       return null;
     })]

package/modern/internals/components/ChartsAxesGradients/ChartsContinuousGradient.js

@@ -13,14 +13,14 @@ export default function ChartsContinuousGradient(props) {
     colorScale,
     colorMap
   } = props;
-  const extremValues = [colorMap.min ?? 0, colorMap.max ?? 100];
-  const extremPositions = extremValues.map(scale).filter(p => p !== undefined);
-  if (extremPositions.length !== 2) {
+  const extremumValues = [colorMap.min ?? 0, colorMap.max ?? 100];
+  const extremumPositions = extremumValues.map(scale).filter(p => p !== undefined);
+  if (extremumPositions.length !== 2) {
     return null;
   }
-  const interpolator = typeof extremValues[0] === 'number' ? interpolateNumber(extremValues[0], extremValues[1]) : interpolateDate(extremValues[0], extremValues[1]);
-  const numberOfPoints = Math.round((Math.max(...extremPositions) - Math.min(...extremPositions)) / PX_PRECISION);
-  const keyPrefix = `${extremValues[0]}-${extremValues[1]}-`;
+  const interpolator = typeof extremumValues[0] === 'number' ? interpolateNumber(extremumValues[0], extremumValues[1]) : interpolateDate(extremumValues[0], extremumValues[1]);
+  const numberOfPoints = Math.round((Math.max(...extremumPositions) - Math.min(...extremumPositions)) / PX_PRECISION);
+  const keyPrefix = `${extremumValues[0]}-${extremumValues[1]}-`;
   return /*#__PURE__*/_jsx("linearGradient", {
     id: gradientId,
     x1: "0",

package/modern/internals/components/ChartsAxesGradients/ChartsContinuousGradientObjectBound.js

@@ -0,0 +1,61 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { interpolateDate, interpolateNumber } from '@mui/x-charts-vendor/d3-interpolate';
+import { jsx as _jsx } from "react/jsx-runtime";
+const PX_PRECISION = 10;
+const getDirection = isReversed => {
+  if (isReversed) {
+    return {
+      x1: '1',
+      x2: '0',
+      y1: '0',
+      y2: '0'
+    };
+  }
+  return {
+    x1: '0',
+    x2: '1',
+    y1: '0',
+    y2: '0'
+  };
+};
+
+/**
+ * Generates gradients to be used in tooltips and legends.
+ */
+export default function ChartsContinuousGradientObjectBound(props) {
+  const {
+    isReversed,
+    gradientId,
+    colorScale,
+    colorMap
+  } = props;
+  const extremumValues = [colorMap.min ?? 0, colorMap.max ?? 100];
+  const interpolator = typeof extremumValues[0] === 'number' ? interpolateNumber(extremumValues[0], extremumValues[1]) : interpolateDate(extremumValues[0], extremumValues[1]);
+  const numberOfPoints = PX_PRECISION;
+  const keyPrefix = `${extremumValues[0]}-${extremumValues[1]}-`;
+  return /*#__PURE__*/_jsx("linearGradient", _extends({
+    id: gradientId
+  }, getDirection(isReversed), {
+    gradientUnits: 'objectBoundingBox' // Use the SVG coordinate instead of the component ones.
+    ,
+    children: Array.from({
+      length: numberOfPoints + 1
+    }, (_, index) => {
+      const offset = index / numberOfPoints;
+      const value = interpolator(offset);
+      if (value === undefined) {
+        return null;
+      }
+      const color = colorScale(value);
+      if (color === null) {
+        return null;
+      }
+      return /*#__PURE__*/_jsx("stop", {
+        offset: offset,
+        stopColor: color,
+        stopOpacity: 1
+      }, keyPrefix + index);
+    })
+  }));
+}

package/modern/internals/components/ChartsAxesGradients/ChartsPiecewiseGradient.js

@@ -9,6 +9,9 @@ export default function ChartsPiecewiseGradient(props) {
     scale,
     colorMap
   } = props;
+  if (size <= 0) {
+    return null;
+  }
   return /*#__PURE__*/_jsx("linearGradient", {
     id: gradientId,
     x1: "0",
@@ -24,6 +27,9 @@ export default function ChartsPiecewiseGradient(props) {
         return null;
       }
       const offset = isReversed ? 1 - x / size : x / size;
+      if (Number.isNaN(offset)) {
+        return null;
+      }
       return /*#__PURE__*/_jsxs(React.Fragment, {
         children: [/*#__PURE__*/_jsx("stop", {
           offset: offset,

package/modern/internals/components/ChartsWrapper/ChartsWrapper.js

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+const getDirection = (direction, position) => {
+  if (direction === 'vertical') {
+    if (position?.horizontal === 'left') {
+      return 'row';
+    }
+    return 'row-reverse';
+  }
+  if (position?.vertical === 'bottom') {
+    return 'column-reverse';
+  }
+  return 'column';
+};
+const getAlign = (direction, position) => {
+  if (direction === 'vertical') {
+    if (position?.vertical === 'top') {
+      return 'flex-start';
+    }
+    if (position?.vertical === 'bottom') {
+      return 'flex-end';
+    }
+  }
+  if (direction === 'horizontal') {
+    if (position?.horizontal === 'left') {
+      return 'flex-start';
+    }
+    if (position?.horizontal === 'right') {
+      return 'flex-end';
+    }
+  }
+  return 'center';
+};
+const Root = styled('div', {
+  name: 'MuiChartsWrapper',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})(({
+  ownerState
+}) => ({
+  display: 'flex',
+  flexDirection: getDirection(ownerState.legendDirection, ownerState.legendPosition),
+  flex: 1,
+  justifyContent: 'center',
+  alignItems: getAlign(ownerState.legendDirection, ownerState.legendPosition)
+}));
+
+/**
+ * @ignore - internal component.
+ *
+ * Wrapper for the charts components.
+ * Its main purpose is to position the HTML legend in the correct place.
+ */
+function ChartsWrapper(props) {
+  const {
+    children,
+    sx
+  } = props;
+  return /*#__PURE__*/_jsx(Root, {
+    ownerState: props,
+    sx: sx,
+    children: children
+  });
+}
+export { ChartsWrapper };

package/modern/internals/components/ChartsWrapper/index.js

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