@mui/x-charts 6.0.0-alpha.10 → 6.0.0-alpha.12

package/esm/ChartsTooltip/ChartsTooltipTable.js

@@ -1,11 +1,18 @@
-import Box from '@mui/material/Box';
-import Paper from '@mui/material/Paper';
+import Box from '@mui/system/Box';
 import { styled } from '@mui/material/styles';
 import { tooltipClasses } from './tooltipClasses';
-export const ChartsTooltipPaper = styled(Paper, {
+export const ChartsTooltipPaper = styled('div', {
   name: 'MuiChartsTooltip',
-  slot: 'Table'
-})({});
+  slot: 'Container'
+})(({
+  theme
+}) => ({
+  backgroundColor: (theme.vars || theme).palette.background.paper,
+  color: (theme.vars || theme).palette.text.primary,
+  transition: theme.transitions.create('box-shadow'),
+  border: `1px solid ${(theme.vars || theme).palette.divider}`,
+  borderRadius: theme.shape.borderRadius
+}));
 export const ChartsTooltipTable = styled('table', {
   name: 'MuiChartsTooltip',
   slot: 'Table'
@@ -14,7 +21,7 @@ export const ChartsTooltipTable = styled('table', {
 }) => ({
   borderSpacing: 0,
   '& thead td': {
-    borderBottom: `solid ${theme.palette.divider} 1px`
+    borderBottom: `solid ${(theme.vars || theme).palette.divider} 1px`
   }
 }));
 export const ChartsTooltipRow = styled('tr', {
@@ -37,13 +44,13 @@ export const ChartsTooltipCell = styled('td', {
   theme
 }) => ({
   verticalAlign: 'middle',
-  color: theme.palette.text.secondary,
+  color: (theme.vars || theme).palette.text.secondary,
   [`&.${tooltipClasses.labelCell}`]: {
     paddingLeft: theme.spacing(1)
   },
   [`&.${tooltipClasses.valueCell}`]: {
     paddingLeft: theme.spacing(4),
-    color: theme.palette.text.primary
+    color: (theme.vars || theme).palette.text.primary
   },
   'td:first-of-type&': {
     paddingLeft: theme.spacing(2)
@@ -63,7 +70,7 @@ export const ChartsTooltipMark = styled(Box, {
   height: theme.spacing(1),
   borderRadius: '50%',
   backgroundColor: ownerState.color,
-  borderColor: theme.palette.background.paper,
-  border: `solid ${theme.palette.background.paper} ${theme.spacing(0.25)}`,
+  borderColor: (theme.vars || theme).palette.background.paper,
+  border: `solid ${(theme.vars || theme).palette.background.paper} ${theme.spacing(0.25)}`,
   boxSizing: 'content-box'
 }));

package/esm/LineChart/MarkElement.js

@@ -38,7 +38,7 @@ const MarkElementPath = styled('path', {
 }) => ({
   transform: `translate(${ownerState.x}px, ${ownerState.y}px)`,
   transformOrigin: `${ownerState.x}px ${ownerState.y}px`,
-  fill: theme.palette.background.paper,
+  fill: (theme.vars || theme).palette.background.paper,
   stroke: ownerState.color,
   strokeWidth: 2
 }));

package/esm/PieChart/PieArc.js

@@ -35,7 +35,7 @@ const PieArcRoot = styled('path', {
   ownerState,
   theme
 }) => ({
-  stroke: theme.palette.background.paper,
+  stroke: (theme.vars || theme).palette.background.paper,
   strokeWidth: 1,
   strokeLinejoin: 'round',
   fill: ownerState.color,

package/esm/PieChart/PieArcLabel.js

@@ -34,7 +34,7 @@ const PieArcLabelRoot = styled('text', {
 })(({
   theme
 }) => ({
-  fill: theme.palette.text.primary,
+  fill: (theme.vars || theme).palette.text.primary,
   textAnchor: 'middle'
 }));
 export default function PieArcLabel(props) {

package/esm/ResponsiveChartContainer/index.js

@@ -42,7 +42,7 @@ const useChartDimensions = (inWidth, inHeight) => {
     let animationFrame;
     const observer = new ResizeObserver(() => {
       // See https://github.com/mui/mui-x/issues/8733
-      animationFrame = window.requestAnimationFrame(() => {
+      animationFrame = requestAnimationFrame(() => {
         computeSize();
       });
     });

package/esm/SparkLineChart/SparkLineChart.js

@@ -58,7 +58,7 @@ const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(pro
     margin: margin,
     xAxis: [_extends({
       id: DEFAULT_X_AXIS_KEY,
-      scaleType: plotType === 'bar' ? 'band' : 'linear',
+      scaleType: plotType === 'bar' ? 'band' : 'point',
       data: Array.from({
         length: data.length
       }, (_, index) => index),
@@ -69,7 +69,10 @@ const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(pro
     disableAxisListener: (!showTooltip || (tooltip == null ? void 0 : tooltip.trigger) !== 'axis') && (axisHighlight == null ? void 0 : axisHighlight.x) === 'none' && (axisHighlight == null ? void 0 : axisHighlight.y) === 'none',
     children: [plotType === 'bar' && /*#__PURE__*/_jsx(BarPlot, {
       slots: slots,
-      slotProps: slotProps
+      slotProps: slotProps,
+      sx: {
+        shapeRendering: 'auto'
+      }
     }), plotType === 'line' && /*#__PURE__*/_jsxs(React.Fragment, {
       children: [/*#__PURE__*/_jsx(AreaPlot, {
         slots: slots,

package/esm/context/CartesianContextProvider.js

@@ -12,7 +12,8 @@ import { SeriesContext } from './SeriesContextProvider';
 import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants';
 import { getTicksNumber } from '../hooks/useTicks';
 import { jsx as _jsx } from "react/jsx-runtime";
-const DEFAULT_CATEGORY_GAP_RATIO = 0.1;
+const DEFAULT_CATEGORY_GAP_RATIO = 0.2;
+const DEFAULT_BAR_GAP_RATIO = 0.1;
 
 // TODO: those might be better placed in a distinct file
 const xExtremumGetters = {
@@ -104,11 +105,12 @@ function CartesianContextProvider({
       const [minData, maxData] = getAxisExtremum(axis, xExtremumGetters, isDefaultAxis);
       const range = [drawingArea.left, drawingArea.left + drawingArea.width];
       if (isBandScaleConfig(axis)) {
-        var _axis$categoryGapRati;
+        var _axis$categoryGapRati, _axis$barGapRatio;
         const categoryGapRatio = (_axis$categoryGapRati = axis.categoryGapRatio) != null ? _axis$categoryGapRati : DEFAULT_CATEGORY_GAP_RATIO;
+        const barGapRatio = (_axis$barGapRatio = axis.barGapRatio) != null ? _axis$barGapRatio : DEFAULT_BAR_GAP_RATIO;
         completedXAxis[axis.id] = _extends({
           categoryGapRatio,
-          barGapRatio: 0
+          barGapRatio
         }, axis, {
           scale: scaleBand(axis.data, range).paddingInner(categoryGapRatio).paddingOuter(categoryGapRatio / 2),
           ticksNumber: axis.data.length

package/esm/internals/components/AxisSharedComponents.js

@@ -47,7 +47,7 @@ export const ChartsLine = styled('line', {
 })(({
   theme
 }) => ({
-  stroke: theme.palette.text.primary,
+  stroke: (theme.vars || theme).palette.text.primary,
   shapeRendering: 'crispEdges',
   strokeWidth: 1
 }));
@@ -58,7 +58,7 @@ export const ChartsTick = styled('line', {
 })(({
   theme
 }) => ({
-  stroke: theme.palette.text.primary,
+  stroke: (theme.vars || theme).palette.text.primary,
   shapeRendering: 'crispEdges'
 }));
 export const ChartsTickLabel = styled('text', {
@@ -68,7 +68,7 @@ export const ChartsTickLabel = styled('text', {
 })(({
   theme
 }) => _extends({}, theme.typography.caption, {
-  fill: theme.palette.text.primary
+  fill: (theme.vars || theme).palette.text.primary
 }));
 export const ChartsLabel = styled('text', {
   name: 'MuiChartsAxis',
@@ -77,5 +77,5 @@ export const ChartsLabel = styled('text', {
 })(({
   theme
 }) => _extends({}, theme.typography.body1, {
-  fill: theme.palette.text.primary
+  fill: (theme.vars || theme).palette.text.primary
 }));

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v6.0.0-alpha.10
+ * @mui/x-charts v6.0.0-alpha.12
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/components/AxisSharedComponents.js

@@ -55,7 +55,7 @@ const ChartsLine = (0, _styles.styled)('line', {
 })(({
   theme
 }) => ({
-  stroke: theme.palette.text.primary,
+  stroke: (theme.vars || theme).palette.text.primary,
   shapeRendering: 'crispEdges',
   strokeWidth: 1
 }));
@@ -67,7 +67,7 @@ const ChartsTick = (0, _styles.styled)('line', {
 })(({
   theme
 }) => ({
-  stroke: theme.palette.text.primary,
+  stroke: (theme.vars || theme).palette.text.primary,
   shapeRendering: 'crispEdges'
 }));
 exports.ChartsTick = ChartsTick;
@@ -78,7 +78,7 @@ const ChartsTickLabel = (0, _styles.styled)('text', {
 })(({
   theme
 }) => (0, _extends2.default)({}, theme.typography.caption, {
-  fill: theme.palette.text.primary
+  fill: (theme.vars || theme).palette.text.primary
 }));
 exports.ChartsTickLabel = ChartsTickLabel;
 const ChartsLabel = (0, _styles.styled)('text', {
@@ -88,6 +88,6 @@ const ChartsLabel = (0, _styles.styled)('text', {
 })(({
   theme
 }) => (0, _extends2.default)({}, theme.typography.body1, {
-  fill: theme.palette.text.primary
+  fill: (theme.vars || theme).palette.text.primary
 }));
 exports.ChartsLabel = ChartsLabel;

package/legacy/ChartsLegend/ChartsLegend.js

@@ -123,7 +123,7 @@ export var ChartsLegendLabel = styled('text', {
   return _extends({}, theme.typography.body1, {
     color: 'inherit',
     transform: "translate(\n      calc(var(--ChartsLegend-itemMarkSize) + var(--ChartsLegend-labelSpacing)),\n      calc(0.5 * var(--ChartsLegend-itemMarkSize))\n      )",
-    fill: theme.palette.text.primary,
+    fill: (theme.vars || theme).palette.text.primary,
     dominantBaseline: 'central'
   });
 });

package/legacy/ChartsSurface.js

@@ -2,7 +2,7 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["children", "width", "height", "viewBox", "disableAxisListener", "className", "sx"];
-import { styled } from '@mui/system';
+import { styled } from '@mui/material/styles';
 import * as React from 'react';
 import { useAxisEvents } from './hooks/useAxisEvents';
 import { jsx as _jsx } from "react/jsx-runtime";

package/legacy/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -21,7 +21,6 @@ export function DefaultChartsAxisContent(props) {
   };
   return /*#__PURE__*/_jsx(ChartsTooltipPaper, {
     sx: sx,
-    variant: "outlined",
     className: classes.root,
     children: /*#__PURE__*/_jsxs(ChartsTooltipTable, {
       children: [axisValue != null && !axis.hideTooltip && /*#__PURE__*/_jsx("thead", {

package/legacy/ChartsTooltip/ChartsItemTooltipContent.js

@@ -26,7 +26,6 @@ export function DefaultChartsItemContent(props) {
   var formattedValue = series.valueFormatter(series.data[itemData.dataIndex]);
   return /*#__PURE__*/_jsx(ChartsTooltipPaper, {
     sx: sx,
-    variant: "outlined",
     className: classes.root,
     children: /*#__PURE__*/_jsx(ChartsTooltipTable, {
       children: /*#__PURE__*/_jsx("tbody", {

package/legacy/ChartsTooltip/ChartsTooltip.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
-import Popper from '@mui/material/Popper';
-import NoSsr from '@mui/material/NoSsr';
+import { Popper } from '@mui/base/Popper';
+import { NoSsr } from '@mui/base/NoSsr';
 import { InteractionContext } from '../context/InteractionProvider';
 import { generateVirtualElement, useMouseTracker, getTootipHasData } from './utils';
 import { ChartsItemTooltipContent } from './ChartsItemTooltipContent';

package/legacy/ChartsTooltip/ChartsTooltipTable.js

@@ -1,29 +1,37 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import Box from '@mui/material/Box';
-import Paper from '@mui/material/Paper';
+import Box from '@mui/system/Box';
 import { styled } from '@mui/material/styles';
 import { tooltipClasses } from './tooltipClasses';
-export var ChartsTooltipPaper = styled(Paper, {
+export var ChartsTooltipPaper = styled('div', {
   name: 'MuiChartsTooltip',
-  slot: 'Table'
-})({});
+  slot: 'Container'
+})(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    backgroundColor: (theme.vars || theme).palette.background.paper,
+    color: (theme.vars || theme).palette.text.primary,
+    transition: theme.transitions.create('box-shadow'),
+    border: "1px solid ".concat((theme.vars || theme).palette.divider),
+    borderRadius: theme.shape.borderRadius
+  };
+});
 export var ChartsTooltipTable = styled('table', {
   name: 'MuiChartsTooltip',
   slot: 'Table'
-})(function (_ref) {
-  var theme = _ref.theme;
+})(function (_ref2) {
+  var theme = _ref2.theme;
   return {
     borderSpacing: 0,
     '& thead td': {
-      borderBottom: "solid ".concat(theme.palette.divider, " 1px")
+      borderBottom: "solid ".concat((theme.vars || theme).palette.divider, " 1px")
     }
   };
 });
 export var ChartsTooltipRow = styled('tr', {
   name: 'MuiChartsTooltip',
   slot: 'Row'
-})(function (_ref2) {
-  var theme = _ref2.theme;
+})(function (_ref3) {
+  var theme = _ref3.theme;
   return {
     'tr:first-of-type& td': {
       paddingTop: theme.spacing(1)
@@ -36,36 +44,36 @@ export var ChartsTooltipRow = styled('tr', {
 export var ChartsTooltipCell = styled('td', {
   name: 'MuiChartsTooltip',
   slot: 'Cell'
-})(function (_ref3) {
-  var _ref4;
-  var theme = _ref3.theme;
-  return _ref4 = {
+})(function (_ref4) {
+  var _ref5;
+  var theme = _ref4.theme;
+  return _ref5 = {
     verticalAlign: 'middle',
-    color: theme.palette.text.secondary
-  }, _defineProperty(_ref4, "&.".concat(tooltipClasses.labelCell), {
+    color: (theme.vars || theme).palette.text.secondary
+  }, _defineProperty(_ref5, "&.".concat(tooltipClasses.labelCell), {
     paddingLeft: theme.spacing(1)
-  }), _defineProperty(_ref4, "&.".concat(tooltipClasses.valueCell), {
+  }), _defineProperty(_ref5, "&.".concat(tooltipClasses.valueCell), {
     paddingLeft: theme.spacing(4),
-    color: theme.palette.text.primary
-  }), _defineProperty(_ref4, 'td:first-of-type&', {
+    color: (theme.vars || theme).palette.text.primary
+  }), _defineProperty(_ref5, 'td:first-of-type&', {
     paddingLeft: theme.spacing(2)
-  }), _defineProperty(_ref4, 'td:last-of-type&', {
+  }), _defineProperty(_ref5, 'td:last-of-type&', {
     paddingRight: theme.spacing(2)
-  }), _ref4;
+  }), _ref5;
 });
 export var ChartsTooltipMark = styled(Box, {
   name: 'MuiChartsTooltip',
   slot: 'Mark'
-})(function (_ref5) {
-  var theme = _ref5.theme,
-    ownerState = _ref5.ownerState;
+})(function (_ref6) {
+  var theme = _ref6.theme,
+    ownerState = _ref6.ownerState;
   return {
     width: theme.spacing(1),
     height: theme.spacing(1),
     borderRadius: '50%',
     backgroundColor: ownerState.color,
-    borderColor: theme.palette.background.paper,
-    border: "solid ".concat(theme.palette.background.paper, " ").concat(theme.spacing(0.25)),
+    borderColor: (theme.vars || theme).palette.background.paper,
+    border: "solid ".concat((theme.vars || theme).palette.background.paper, " ").concat(theme.spacing(0.25)),
     boxSizing: 'content-box'
   };
 });

package/legacy/LineChart/MarkElement.js

@@ -38,7 +38,7 @@ var MarkElementPath = styled('path', {
   return {
     transform: "translate(".concat(ownerState.x, "px, ").concat(ownerState.y, "px)"),
     transformOrigin: "".concat(ownerState.x, "px ").concat(ownerState.y, "px"),
-    fill: theme.palette.background.paper,
+    fill: (theme.vars || theme).palette.background.paper,
     stroke: ownerState.color,
     strokeWidth: 2
   };

package/legacy/PieChart/PieArc.js

@@ -35,7 +35,7 @@ var PieArcRoot = styled('path', {
   var ownerState = _ref.ownerState,
     theme = _ref.theme;
   return {
-    stroke: theme.palette.background.paper,
+    stroke: (theme.vars || theme).palette.background.paper,
     strokeWidth: 1,
     strokeLinejoin: 'round',
     fill: ownerState.color,

package/legacy/PieChart/PieArcLabel.js

@@ -34,7 +34,7 @@ var PieArcLabelRoot = styled('text', {
 })(function (_ref) {
   var theme = _ref.theme;
   return {
-    fill: theme.palette.text.primary,
+    fill: (theme.vars || theme).palette.text.primary,
     textAnchor: 'middle'
   };
 });

package/legacy/ResponsiveChartContainer/index.js

@@ -49,7 +49,7 @@ var useChartDimensions = function useChartDimensions(inWidth, inHeight) {
     var animationFrame;
     var observer = new ResizeObserver(function () {
       // See https://github.com/mui/mui-x/issues/8733
-      animationFrame = window.requestAnimationFrame(function () {
+      animationFrame = requestAnimationFrame(function () {
         computeSize();
       });
     });

package/legacy/SparkLineChart/SparkLineChart.js

@@ -62,7 +62,7 @@ var SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(props
     margin: margin,
     xAxis: [_extends({
       id: DEFAULT_X_AXIS_KEY,
-      scaleType: plotType === 'bar' ? 'band' : 'linear',
+      scaleType: plotType === 'bar' ? 'band' : 'point',
       data: Array.from({
         length: data.length
       }, function (_, index) {
@@ -75,7 +75,10 @@ var SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(props
     disableAxisListener: (!showTooltip || (tooltip == null ? void 0 : tooltip.trigger) !== 'axis') && (axisHighlight == null ? void 0 : axisHighlight.x) === 'none' && (axisHighlight == null ? void 0 : axisHighlight.y) === 'none',
     children: [plotType === 'bar' && /*#__PURE__*/_jsx(BarPlot, {
       slots: slots,
-      slotProps: slotProps
+      slotProps: slotProps,
+      sx: {
+        shapeRendering: 'auto'
+      }
     }), plotType === 'line' && /*#__PURE__*/_jsxs(React.Fragment, {
       children: [/*#__PURE__*/_jsx(AreaPlot, {
         slots: slots,

package/legacy/context/CartesianContextProvider.js

@@ -14,7 +14,8 @@ import { SeriesContext } from './SeriesContextProvider';
 import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants';
 import { getTicksNumber } from '../hooks/useTicks';
 import { jsx as _jsx } from "react/jsx-runtime";
-var DEFAULT_CATEGORY_GAP_RATIO = 0.1;
+var DEFAULT_CATEGORY_GAP_RATIO = 0.2;
+var DEFAULT_BAR_GAP_RATIO = 0.1;
 
 // TODO: those might be better placed in a distinct file
 var xExtremumGetters = {
@@ -124,11 +125,12 @@ function CartesianContextProvider(_ref) {
         maxData = _getAxisExtremum2[1];
       var range = [drawingArea.left, drawingArea.left + drawingArea.width];
       if (isBandScaleConfig(axis)) {
-        var _axis$categoryGapRati;
+        var _axis$categoryGapRati, _axis$barGapRatio;
         var categoryGapRatio = (_axis$categoryGapRati = axis.categoryGapRatio) != null ? _axis$categoryGapRati : DEFAULT_CATEGORY_GAP_RATIO;
+        var barGapRatio = (_axis$barGapRatio = axis.barGapRatio) != null ? _axis$barGapRatio : DEFAULT_BAR_GAP_RATIO;
         completedXAxis[axis.id] = _extends({
           categoryGapRatio: categoryGapRatio,
-          barGapRatio: 0
+          barGapRatio: barGapRatio
         }, axis, {
           scale: scaleBand(axis.data, range).paddingInner(categoryGapRatio).paddingOuter(categoryGapRatio / 2),
           ticksNumber: axis.data.length

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v6.0.0-alpha.10
+ * @mui/x-charts v6.0.0-alpha.12
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/legacy/internals/components/AxisSharedComponents.js

@@ -36,7 +36,7 @@ export var ChartsLine = styled('line', {
 })(function (_ref) {
   var theme = _ref.theme;
   return {
-    stroke: theme.palette.text.primary,
+    stroke: (theme.vars || theme).palette.text.primary,
     shapeRendering: 'crispEdges',
     strokeWidth: 1
   };
@@ -50,7 +50,7 @@ export var ChartsTick = styled('line', {
 })(function (_ref2) {
   var theme = _ref2.theme;
   return {
-    stroke: theme.palette.text.primary,
+    stroke: (theme.vars || theme).palette.text.primary,
     shapeRendering: 'crispEdges'
   };
 });
@@ -63,7 +63,7 @@ export var ChartsTickLabel = styled('text', {
 })(function (_ref3) {
   var theme = _ref3.theme;
   return _extends({}, theme.typography.caption, {
-    fill: theme.palette.text.primary
+    fill: (theme.vars || theme).palette.text.primary
   });
 });
 export var ChartsLabel = styled('text', {
@@ -75,6 +75,6 @@ export var ChartsLabel = styled('text', {
 })(function (_ref4) {
   var theme = _ref4.theme;
   return _extends({}, theme.typography.body1, {
-    fill: theme.palette.text.primary
+    fill: (theme.vars || theme).palette.text.primary
   });
 });

package/models/axis.d.ts

@@ -96,13 +96,13 @@ interface AxisScaleConfig {
         /**
          * The ratio between the space allocated for padding between two categories and the category width.
          * 0 means no gap, and 1 no data.
-         * @default 0.1
+         * @default 0.2
          */
         categoryGapRatio: number;
         /**
          * The ratio between the width of a bar, and the gap between two bars.
          * 0 means no gap, and 1 no bar.
-         * @default 0
+         * @default 0.1
          */
         barGapRatio: number;
     };

package/modern/ChartsLegend/ChartsLegend.js

@@ -126,7 +126,7 @@ export const ChartsLegendLabel = styled('text', {
       calc(var(--ChartsLegend-itemMarkSize) + var(--ChartsLegend-labelSpacing)),
       calc(0.5 * var(--ChartsLegend-itemMarkSize))
       )`,
-  fill: theme.palette.text.primary,
+  fill: (theme.vars || theme).palette.text.primary,
   dominantBaseline: 'central'
 }));
 const defaultProps = {

package/modern/ChartsSurface.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["children", "width", "height", "viewBox", "disableAxisListener", "className", "sx"];
-import { styled } from '@mui/system';
+import { styled } from '@mui/material/styles';
 import * as React from 'react';
 import { useAxisEvents } from './hooks/useAxisEvents';
 import { jsx as _jsx } from "react/jsx-runtime";

package/modern/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -20,7 +20,6 @@ export function DefaultChartsAxisContent(props) {
   const axisFormatter = axis.valueFormatter ?? (v => v.toLocaleString());
   return /*#__PURE__*/_jsx(ChartsTooltipPaper, {
     sx: sx,
-    variant: "outlined",
     className: classes.root,
     children: /*#__PURE__*/_jsxs(ChartsTooltipTable, {
       children: [axisValue != null && !axis.hideTooltip && /*#__PURE__*/_jsx("thead", {

package/modern/ChartsTooltip/ChartsItemTooltipContent.js

@@ -29,7 +29,6 @@ export function DefaultChartsItemContent(props) {
   const formattedValue = series.valueFormatter(series.data[itemData.dataIndex]);
   return /*#__PURE__*/_jsx(ChartsTooltipPaper, {
     sx: sx,
-    variant: "outlined",
     className: classes.root,
     children: /*#__PURE__*/_jsx(ChartsTooltipTable, {
       children: /*#__PURE__*/_jsx("tbody", {

package/modern/ChartsTooltip/ChartsTooltip.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
-import Popper from '@mui/material/Popper';
-import NoSsr from '@mui/material/NoSsr';
+import { Popper } from '@mui/base/Popper';
+import { NoSsr } from '@mui/base/NoSsr';
 import { InteractionContext } from '../context/InteractionProvider';
 import { generateVirtualElement, useMouseTracker, getTootipHasData } from './utils';
 import { ChartsItemTooltipContent } from './ChartsItemTooltipContent';

package/modern/ChartsTooltip/ChartsTooltipTable.js

@@ -1,11 +1,18 @@
-import Box from '@mui/material/Box';
-import Paper from '@mui/material/Paper';
+import Box from '@mui/system/Box';
 import { styled } from '@mui/material/styles';
 import { tooltipClasses } from './tooltipClasses';
-export const ChartsTooltipPaper = styled(Paper, {
+export const ChartsTooltipPaper = styled('div', {
   name: 'MuiChartsTooltip',
-  slot: 'Table'
-})({});
+  slot: 'Container'
+})(({
+  theme
+}) => ({
+  backgroundColor: (theme.vars || theme).palette.background.paper,
+  color: (theme.vars || theme).palette.text.primary,
+  transition: theme.transitions.create('box-shadow'),
+  border: `1px solid ${(theme.vars || theme).palette.divider}`,
+  borderRadius: theme.shape.borderRadius
+}));
 export const ChartsTooltipTable = styled('table', {
   name: 'MuiChartsTooltip',
   slot: 'Table'
@@ -14,7 +21,7 @@ export const ChartsTooltipTable = styled('table', {
 }) => ({
   borderSpacing: 0,
   '& thead td': {
-    borderBottom: `solid ${theme.palette.divider} 1px`
+    borderBottom: `solid ${(theme.vars || theme).palette.divider} 1px`
   }
 }));
 export const ChartsTooltipRow = styled('tr', {
@@ -37,13 +44,13 @@ export const ChartsTooltipCell = styled('td', {
   theme
 }) => ({
   verticalAlign: 'middle',
-  color: theme.palette.text.secondary,
+  color: (theme.vars || theme).palette.text.secondary,
   [`&.${tooltipClasses.labelCell}`]: {
     paddingLeft: theme.spacing(1)
   },
   [`&.${tooltipClasses.valueCell}`]: {
     paddingLeft: theme.spacing(4),
-    color: theme.palette.text.primary
+    color: (theme.vars || theme).palette.text.primary
   },
   'td:first-of-type&': {
     paddingLeft: theme.spacing(2)
@@ -63,7 +70,7 @@ export const ChartsTooltipMark = styled(Box, {
   height: theme.spacing(1),
   borderRadius: '50%',
   backgroundColor: ownerState.color,
-  borderColor: theme.palette.background.paper,
-  border: `solid ${theme.palette.background.paper} ${theme.spacing(0.25)}`,
+  borderColor: (theme.vars || theme).palette.background.paper,
+  border: `solid ${(theme.vars || theme).palette.background.paper} ${theme.spacing(0.25)}`,
   boxSizing: 'content-box'
 }));

package/modern/LineChart/MarkElement.js

@@ -38,7 +38,7 @@ const MarkElementPath = styled('path', {
 }) => ({
   transform: `translate(${ownerState.x}px, ${ownerState.y}px)`,
   transformOrigin: `${ownerState.x}px ${ownerState.y}px`,
-  fill: theme.palette.background.paper,
+  fill: (theme.vars || theme).palette.background.paper,
   stroke: ownerState.color,
   strokeWidth: 2
 }));