@mui/x-charts 8.1.0 → 8.3.0

package/esm/RadarChart/RadarSeriesPlot/useRadarSeriesData.d.ts

@@ -17,12 +17,12 @@ export declare function useRadarSeriesData(querySeriesId?: SeriesId): {
   }[];
   type: "radar";
   label?: string | ((location: "tooltip" | "legend") => string) | undefined;
-  highlightScope?: Partial<import("../..").HighlightScope> | undefined;
-  labelMarkType?: "line" | "square" | "circle" | import("react").ComponentType<import("../..").ChartsLabelCustomMarkProps> | undefined;
+  highlightScope?: Partial<import("../../index.js").HighlightScope> | undefined;
+  labelMarkType?: "line" | "square" | "circle" | import("react").ComponentType<import("../../index.js").ChartsLabelCustomMarkProps> | undefined;
   hideMark?: boolean | undefined;
   fillArea?: boolean | undefined;
   data: number[];
   color: string;
   id: SeriesId;
-  valueFormatter: import("../../internals").SeriesValueFormatter<number>;
+  valueFormatter: import("../../internals/index.js").SeriesValueFormatter<number>;
 }[];

package/esm/RadarChart/index.d.ts

@@ -1,7 +1,7 @@
 export { RadarChart as Unstable_RadarChart } from "./RadarChart.js";
 export { RadarDataProvider as Unstable_RadarDataProvider } from "./RadarDataProvider/index.js";
-export type { RadarChartProps } from './RadarChart';
-export type { RadarDataProviderProps } from './RadarDataProvider';
+export type { RadarChartProps } from "./RadarChart.js";
+export type { RadarDataProviderProps } from "./RadarDataProvider/index.js";
 export * from "./RadarGrid/index.js";
 export * from "./RadarAxisHighlight/index.js";
 export * from "./RadarMetricLabels/index.js";

package/esm/RadarChart/seriesConfig/getSeriesWithDefaultValues.d.ts

@@ -1,3 +1,3 @@
-import type { GetSeriesWithDefaultValues } from '../../internals/plugins/models/seriesConfig';
+import type { GetSeriesWithDefaultValues } from "../../internals/plugins/models/seriesConfig/index.js";
 declare const getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'radar'>;
 export default getSeriesWithDefaultValues;

package/esm/RadarChart/seriesConfig/tooltip.d.ts

@@ -1,4 +1,4 @@
-import type { AxisTooltipGetter, TooltipGetter } from '../../internals/plugins/models';
+import type { AxisTooltipGetter, TooltipGetter } from "../../internals/plugins/models/index.js";
 declare const tooltipGetter: TooltipGetter<'radar'>;
 export declare const axisTooltipGetter: AxisTooltipGetter<'radar', 'rotation'>;
 export default tooltipGetter;

package/esm/RadarChart/useRadarChartProps.d.ts

@@ -1,7 +1,7 @@
-import type { RadarChartProps } from './RadarChart';
+import type { RadarChartProps } from "./RadarChart.js";
 import { ChartsOverlayProps } from "../ChartsOverlay/index.js";
 import { ChartsLegendSlotExtension } from "../ChartsLegend/index.js";
-import type { ChartsWrapperProps } from '../internals/components/ChartsWrapper';
+import type { ChartsWrapperProps } from "../internals/components/ChartsWrapper/index.js";
 import { RadarDataProviderProps } from "./RadarDataProvider/RadarDataProvider.js";
 import { ChartsSurfaceProps } from "../ChartsSurface/index.js";
 import { RadarGridProps } from "./RadarGrid/index.js";

package/esm/ScatterChart/ScatterChart.js

@@ -154,7 +154,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    * The function called for onClick events.
    * The second argument contains information about all line/bar elements at the current mouse position.
    * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element.
-   * @param {null | AxisData} data The data about the clicked axis and items associated with it.
+   * @param {null | ChartsAxisData} data The data about the clicked axis and items associated with it.
    */
   onAxisClick: PropTypes.func,
   /**

package/esm/ScatterChart/ScatterMarker.types.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { ScatterMarkerProps } from './ScatterMarker';
+import type { ScatterMarkerProps } from "./ScatterMarker.js";
 export interface ScatterMarkerSlots {
   /**
    * The component that renders the marker for a scatter point.

package/esm/ScatterChart/seriesConfig/getSeriesWithDefaultValues.d.ts

@@ -1,3 +1,3 @@
-import type { GetSeriesWithDefaultValues } from '../../internals/plugins/models/seriesConfig';
+import type { GetSeriesWithDefaultValues } from "../../internals/plugins/models/seriesConfig/index.js";
 declare const getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'scatter'>;
 export default getSeriesWithDefaultValues;

package/esm/ScatterChart/seriesConfig/seriesProcessor.js

@@ -7,7 +7,7 @@ const seriesProcessor = ({
     const datasetKeys = seriesData?.datasetKeys;
     const missingKeys = ['x', 'y', 'id'].filter(key => typeof datasetKeys?.[key] !== 'string');
     if (seriesData?.datasetKeys && missingKeys.length > 0) {
-      throw new Error([`MUI X: scatter series with id='${seriesId}' has incomplete datasetKeys.`, `Properties ${missingKeys.map(key => `"${key}"`).join(', ')} are missing.`].join('\n'));
+      throw new Error([`MUI X Charts: scatter series with id='${seriesId}' has incomplete datasetKeys.`, `Properties ${missingKeys.map(key => `"${key}"`).join(', ')} are missing.`].join('\n'));
     }
     const data = !datasetKeys ? seriesData.data ?? [] : dataset?.map(d => {
       return {

package/esm/ScatterChart/seriesConfig/tooltip.d.ts

@@ -1,3 +1,3 @@
-import type { TooltipGetter } from '../../internals/plugins/models';
+import type { TooltipGetter } from "../../internals/plugins/models/index.js";
 declare const tooltipGetter: TooltipGetter<'scatter'>;
 export default tooltipGetter;

package/esm/ScatterChart/useScatterChartProps.d.ts

@@ -5,9 +5,9 @@ import { ChartsGridProps } from "../ChartsGrid/index.js";
 import { ChartsLegendSlotExtension } from "../ChartsLegend/index.js";
 import { ChartsOverlayProps } from "../ChartsOverlay/index.js";
 import { ChartContainerProps } from "../ChartContainer/index.js";
-import type { ScatterChartProps } from './ScatterChart';
-import type { ScatterPlotProps } from './ScatterPlot';
-import type { ChartsWrapperProps } from '../internals/components/ChartsWrapper';
+import type { ScatterChartProps } from "./ScatterChart.js";
+import type { ScatterPlotProps } from "./ScatterPlot.js";
+import type { ChartsWrapperProps } from "../internals/components/ChartsWrapper/index.js";
 import { ScatterChartPluginsSignatures } from "./ScatterChart.plugins.js";
 /**
  * A helper function that extracts ScatterChartProps from the input props

package/esm/SparkLineChart/SparkLineChart.d.ts

@@ -86,6 +86,25 @@ export interface SparkLineChartProps extends Omit<ChartContainerProps, 'series'
    * @default rainbowSurgePalette[0]
    */
   color?: ChartsColor;
+  /**
+   * When `true`, the chart's drawing area will not be clipped and elements within can visually overflow the chart.
+   *
+   * @default false
+   */
+  disableClipping?: boolean;
+  /**
+   * The clipped area offset in pixels.
+   *
+   * This prevents partial clipping of lines when they are drawn on the edge of the drawing area.
+   *
+   * @default { top: 1, right: 1, bottom: 1, left: 1 }
+   */
+  clipAreaOffset?: {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+  };
 }
 /**
  * Demos:

package/esm/SparkLineChart/SparkLineChart.js

@@ -2,9 +2,11 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["xAxis", "yAxis", "width", "height", "margin", "color", "sx", "showTooltip", "showHighlight", "axisHighlight", "children", "slots", "slotProps", "data", "plotType", "valueFormatter", "area", "curve", "className"];
+const _excluded = ["xAxis", "yAxis", "width", "height", "margin", "color", "sx", "showTooltip", "showHighlight", "axisHighlight", "children", "slots", "slotProps", "data", "plotType", "valueFormatter", "area", "curve", "className", "disableClipping", "clipAreaOffset"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import useId from '@mui/utils/useId';
+import { ChartsClipPath } from "../ChartsClipPath/index.js";
 import { BarPlot } from "../BarChart/index.js";
 import { LinePlot, AreaPlot, LineHighlightPlot } from "../LineChart/index.js";
 import { ChartContainer } from "../ChartContainer/index.js";
@@ -43,9 +45,19 @@ const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(pro
       valueFormatter = value => value === null ? '' : value.toString(),
       area,
       curve = 'linear',
-      className
+      className,
+      disableClipping,
+      clipAreaOffset
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
+  const id = useId();
+  const clipPathId = `${id}-clip-path`;
+  const clipPathOffset = {
+    top: clipAreaOffset?.top ?? 1,
+    right: clipAreaOffset?.right ?? 1,
+    bottom: clipAreaOffset?.bottom ?? 1,
+    left: clipAreaOffset?.left ?? 1
+  };
   const defaultXHighlight = showHighlight && plotType === 'bar' ? {
     x: 'band'
   } : {
@@ -92,23 +104,29 @@ const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(pro
     colors: colors,
     sx: sx,
     disableAxisListener: (!showTooltip || slotProps?.tooltip?.trigger !== 'axis') && axisHighlight?.x === 'none' && axisHighlight?.y === 'none',
-    children: [plotType === 'bar' && /*#__PURE__*/_jsx(BarPlot, {
-      skipAnimation: true,
-      slots: slots,
-      slotProps: slotProps
-    }), plotType === 'line' && /*#__PURE__*/_jsxs(React.Fragment, {
-      children: [/*#__PURE__*/_jsx(AreaPlot, {
-        skipAnimation: true,
-        slots: slots,
-        slotProps: slotProps
-      }), /*#__PURE__*/_jsx(LinePlot, {
+    children: [/*#__PURE__*/_jsxs("g", {
+      clipPath: `url(#${clipPathId})`,
+      children: [plotType === 'bar' && /*#__PURE__*/_jsx(BarPlot, {
         skipAnimation: true,
         slots: slots,
         slotProps: slotProps
-      }), /*#__PURE__*/_jsx(LineHighlightPlot, {
-        slots: slots,
-        slotProps: slotProps
+      }), plotType === 'line' && /*#__PURE__*/_jsxs(React.Fragment, {
+        children: [/*#__PURE__*/_jsx(AreaPlot, {
+          skipAnimation: true,
+          slots: slots,
+          slotProps: slotProps
+        }), /*#__PURE__*/_jsx(LinePlot, {
+          skipAnimation: true,
+          slots: slots,
+          slotProps: slotProps
+        })]
       })]
+    }), plotType === 'line' && /*#__PURE__*/_jsx(LineHighlightPlot, {
+      slots: slots,
+      slotProps: slotProps
+    }), disableClipping ? null : /*#__PURE__*/_jsx(ChartsClipPath, {
+      id: clipPathId,
+      offset: clipPathOffset
     }), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlight)), showTooltip && /*#__PURE__*/_jsx(Tooltip, _extends({}, props.slotProps?.tooltip)), children]
   }));
 });
@@ -132,6 +150,19 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
   }),
   children: PropTypes.node,
   className: PropTypes.string,
+  /**
+   * The clipped area offset in pixels.
+   *
+   * This prevents partial clipping of lines when they are drawn on the edge of the drawing area.
+   *
+   * @default { top: 1, right: 1, bottom: 1, left: 1 }
+   */
+  clipAreaOffset: PropTypes.shape({
+    bottom: PropTypes.number,
+    left: PropTypes.number,
+    right: PropTypes.number,
+    top: PropTypes.number
+  }),
   /**
    * Color used to colorize the sparkline.
    * @default rainbowSurgePalette[0]
@@ -156,6 +187,12 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    * @default false
    */
   disableAxisListener: PropTypes.bool,
+  /**
+   * When `true`, the chart's drawing area will not be clipped and elements within can visually overflow the chart.
+   *
+   * @default false
+   */
+  disableClipping: PropTypes.bool,
   /**
    * If true, the voronoi interaction are ignored.
    */
@@ -198,7 +235,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    * The function called for onClick events.
    * The second argument contains information about all line/bar elements at the current mouse position.
    * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element.
-   * @param {null | AxisData} data The data about the clicked axis and items associated with it.
+   * @param {null | ChartsAxisData} data The data about the clicked axis and items associated with it.
    */
   onAxisClick: PropTypes.func,
   /**

package/esm/Toolbar/Toolbar.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export interface ToolbarProps extends React.PropsWithChildren {}
+export declare function Toolbar({
+  children
+}: ToolbarProps): React.JSX.Element;

package/esm/Toolbar/Toolbar.js

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+const ToolbarRoot = styled('div', {
+  name: 'MuiChartsToolbar',
+  slot: 'Root'
+})(({
+  theme
+}) => ({
+  flex: 0,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'end',
+  gap: theme.spacing(0.25),
+  padding: theme.spacing(0.5),
+  minHeight: 44,
+  boxSizing: 'border-box',
+  border: `1px solid ${(theme.vars || theme).palette.divider}`,
+  borderRadius: 4
+}));
+export function Toolbar({
+  children
+}) {
+  return /*#__PURE__*/_jsx(ToolbarRoot, {
+    children: children
+  });
+}

package/esm/Toolbar/ToolbarButton.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { ChartBaseIconButtonProps } from "../models/slots/chartsBaseSlotProps.js";
+export interface ToolbarButtonProps extends ChartBaseIconButtonProps {}
+declare const ToolbarButton: React.ForwardRefExoticComponent<Omit<ToolbarButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { ToolbarButton };

package/esm/Toolbar/ToolbarButton.js

@@ -0,0 +1,20 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import PropTypes from 'prop-types';
+import * as React from 'react';
+import { defaultSlotsMaterial } from "../internals/material/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const ToolbarButton = /*#__PURE__*/React.forwardRef(function ToolbarButton(props, ref) {
+  const IconButton = defaultSlotsMaterial.baseIconButton;
+  return /*#__PURE__*/_jsx(IconButton, _extends({
+    ref: ref
+  }, props));
+});
+process.env.NODE_ENV !== "production" ? ToolbarButton.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  className: PropTypes.string,
+  style: PropTypes.object
+} : void 0;
+export { ToolbarButton };

package/esm/Toolbar/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Toolbar.js";
+export * from "./ToolbarButton.js";

package/esm/Toolbar/index.js

@@ -0,0 +1,2 @@
+export * from "./Toolbar.js";
+export * from "./ToolbarButton.js";

package/esm/colorPalettes/categorical/blueberryTwilight.d.ts

@@ -0,0 +1,4 @@
+import { ChartsColorPaletteCallback } from "../types.js";
+export declare const blueberryTwilightPaletteLight: string[];
+export declare const blueberryTwilightPaletteDark: string[];
+export declare const blueberryTwilightPalette: ChartsColorPaletteCallback;

package/esm/colorPalettes/categorical/blueberryTwilight.js

@@ -0,0 +1,3 @@
+export const blueberryTwilightPaletteLight = ['#02B2AF', '#2E96FF', '#B800D8', '#60009B', '#2731C8', '#03008D'];
+export const blueberryTwilightPaletteDark = ['#02B2AF', '#72CCFF', '#DA00FF', '#9001CB', '#2E96FF', '#3B48E0'];
+export const blueberryTwilightPalette = mode => mode === 'dark' ? blueberryTwilightPaletteDark : blueberryTwilightPaletteLight;

package/esm/colorPalettes/categorical/cheerfulFiesta.d.ts

@@ -0,0 +1,4 @@
+import { ChartsColorPaletteCallback } from "../types.js";
+export declare const cheerfulFiestaPaletteDark: string[];
+export declare const cheerfulFiestaPaletteLight: string[];
+export declare const cheerfulFiestaPalette: ChartsColorPaletteCallback;

package/esm/colorPalettes/categorical/cheerfulFiesta.js

@@ -0,0 +1,3 @@
+export const cheerfulFiestaPaletteDark = ['#0059B2', '#2E96FF', '#FFC24C', '#FF9F0E', '#F38200', '#2ABFDE', '#1F94AD', '#BD2C38', '#FF3143', '#FF8282'];
+export const cheerfulFiestaPaletteLight = ['#003A75', '#007FFF', '#FFC24C', '#FF9D09', '#CA6C00', '#127D94', '#1F94AD', '#C82634', '#FF3143', '#FF7E7E'];
+export const cheerfulFiestaPalette = mode => mode === 'dark' ? cheerfulFiestaPaletteDark : cheerfulFiestaPaletteLight;

package/esm/colorPalettes/categorical/mangoFusion.d.ts

@@ -0,0 +1,4 @@
+import { ChartsColorPaletteCallback } from "../types.js";
+export declare const mangoFusionPaletteLight: string[];
+export declare const mangoFusionPaletteDark: string[];
+export declare const mangoFusionPalette: ChartsColorPaletteCallback;

package/esm/colorPalettes/categorical/mangoFusion.js

@@ -0,0 +1,3 @@
+export const mangoFusionPaletteLight = ['#173A5E', '#00A3A0', '#C91B63', '#EF5350', '#FFA726', '#B800D8', '#60009B', '#2E96FF', '#2731C8', '#03008D'];
+export const mangoFusionPaletteDark = ['#41698F', '#19D0CD', '#DE196B', '#FC5F5C', '#FFD771', '#DA00FF', '#9001CB', '#72CCFF', '#2E96FF', '#3B48E0'];
+export const mangoFusionPalette = mode => mode === 'dark' ? mangoFusionPaletteDark : mangoFusionPaletteLight;

package/esm/colorPalettes/categorical/rainbowSurge.d.ts

@@ -0,0 +1,4 @@
+import { ChartsColorPaletteCallback } from "../types.js";
+export declare const rainbowSurgePaletteLight: string[];
+export declare const rainbowSurgePaletteDark: string[];
+export declare const rainbowSurgePalette: ChartsColorPaletteCallback;

package/esm/colorPalettes/categorical/rainbowSurge.js

@@ -0,0 +1,3 @@
+export const rainbowSurgePaletteLight = ['#4254FB', '#FFB422', '#FA4F58', '#0DBEFF', '#22BF75', '#FA83B4', '#FF7511'];
+export const rainbowSurgePaletteDark = ['#495AFB', '#FFC758', '#F35865', '#30C8FF', '#44CE8D', '#F286B3', '#FF8C39'];
+export const rainbowSurgePalette = mode => mode === 'dark' ? rainbowSurgePaletteDark : rainbowSurgePaletteLight;

package/esm/colorPalettes/index.d.ts

@@ -1 +1,14 @@
-export * from "./colorPalettes.js";
+export * from "./types.js";
+export * from "./categorical/rainbowSurge.js";
+export * from "./categorical/blueberryTwilight.js";
+export * from "./categorical/mangoFusion.js";
+export * from "./categorical/cheerfulFiesta.js";
+export * from "./sequential/strawberrySky.js";
+export * from "./sequential/blue.js";
+export * from "./sequential/cyan.js";
+export * from "./sequential/green.js";
+export * from "./sequential/orange.js";
+export * from "./sequential/pink.js";
+export * from "./sequential/purple.js";
+export * from "./sequential/red.js";
+export * from "./sequential/yellow.js";

package/esm/colorPalettes/index.js

@@ -1 +1,20 @@
-export * from "./colorPalettes.js";
+export * from "./types.js";
+
+// CATEGORICAL PALETTES
+export * from "./categorical/rainbowSurge.js";
+export * from "./categorical/blueberryTwilight.js";
+export * from "./categorical/mangoFusion.js";
+export * from "./categorical/cheerfulFiesta.js";
+
+// SEQUENTIAL PALETTES
+export * from "./sequential/strawberrySky.js";
+
+// SEQUENTIAL PALETTES - MONOCHROMATIC
+export * from "./sequential/blue.js";
+export * from "./sequential/cyan.js";
+export * from "./sequential/green.js";
+export * from "./sequential/orange.js";
+export * from "./sequential/pink.js";
+export * from "./sequential/purple.js";
+export * from "./sequential/red.js";
+export * from "./sequential/yellow.js";

package/esm/colorPalettes/sequential/blue.d.ts

@@ -0,0 +1,4 @@
+import { ChartsColorPaletteCallback } from "../types.js";
+export declare const bluePaletteLight: string[];
+export declare const bluePaletteDark: string[];
+export declare const bluePalette: ChartsColorPaletteCallback;

package/esm/colorPalettes/sequential/blue.js

@@ -0,0 +1,5 @@
+// Blue sequential gradient palette based on the color scheme
+
+export const bluePaletteLight = ['#BDDEFF', '#99CCFF', '#66B2FF', '#2E96FF', '#0064D6', '#0D47A1', '#0A367B', '#072555'];
+export const bluePaletteDark = bluePaletteLight;
+export const bluePalette = mode => mode === 'dark' ? bluePaletteDark : bluePaletteLight;

package/esm/colorPalettes/sequential/cyan.d.ts

@@ -0,0 +1,4 @@
+import { ChartsColorPaletteCallback } from "../types.js";
+export declare const cyanPaletteLight: string[];
+export declare const cyanPaletteDark: string[];
+export declare const cyanPalette: ChartsColorPaletteCallback;

package/esm/colorPalettes/sequential/cyan.js

@@ -0,0 +1,5 @@
+// Cyan sequential gradient palette based on the color scheme
+
+export const cyanPaletteLight = ['#CFE9E8', '#A3DAD8', '#7ED0CE', '#44BDBA', '#299896', '#137370', '#0E5A58', '#073938'];
+export const cyanPaletteDark = cyanPaletteLight;
+export const cyanPalette = mode => mode === 'dark' ? cyanPaletteDark : cyanPaletteLight;

package/esm/colorPalettes/sequential/green.d.ts

@@ -0,0 +1,4 @@
+import { ChartsColorPaletteCallback } from "../types.js";
+export declare const greenPaletteLight: string[];
+export declare const greenPaletteDark: string[];
+export declare const greenPalette: ChartsColorPaletteCallback;

package/esm/colorPalettes/sequential/green.js

@@ -0,0 +1,5 @@
+// Green sequential gradient palette based on the color scheme
+
+export const greenPaletteLight = ['#CDEBDD', '#B2E2CB', '#8FD8B5', '#54C690', '#31B375', '#359F6D', '#0F7746', '#065731'];
+export const greenPaletteDark = greenPaletteLight;
+export const greenPalette = mode => mode === 'dark' ? greenPaletteDark : greenPaletteLight;

package/esm/colorPalettes/sequential/orange.d.ts

@@ -0,0 +1,4 @@
+import { ChartsColorPaletteCallback } from "../types.js";
+export declare const orangePaletteLight: string[];
+export declare const orangePaletteDark: string[];
+export declare const orangePalette: ChartsColorPaletteCallback;

package/esm/colorPalettes/sequential/orange.js

@@ -0,0 +1,5 @@
+// Orange sequential gradient palette based on the color scheme
+
+export const orangePaletteLight = ['#FBDBC3', '#F9BD92', '#F99F5D', '#FF7A19', '#FD620B', '#E15100', '#AC3E00', '#822F00'];
+export const orangePaletteDark = orangePaletteLight;
+export const orangePalette = mode => mode === 'dark' ? orangePaletteDark : orangePaletteLight;

package/esm/colorPalettes/sequential/pink.d.ts

@@ -0,0 +1,4 @@
+import { ChartsColorPaletteCallback } from "../types.js";
+export declare const pinkPaletteLight: string[];
+export declare const pinkPaletteDark: string[];
+export declare const pinkPalette: ChartsColorPaletteCallback;

package/esm/colorPalettes/sequential/pink.js

@@ -0,0 +1,5 @@
+// Pink sequential gradient palette based on the color scheme
+
+export const pinkPaletteLight = ['#F7D2E1', '#F6BED5', '#F4A0C3', '#F6619F', '#EE448B', '#E32977', '#B6215F', '#8B1F4C'];
+export const pinkPaletteDark = pinkPaletteLight;
+export const pinkPalette = mode => mode === 'dark' ? pinkPaletteDark : pinkPaletteLight;

package/esm/colorPalettes/sequential/purple.d.ts

@@ -0,0 +1,4 @@
+import { ChartsColorPaletteCallback } from "../types.js";
+export declare const purplePaletteLight: string[];
+export declare const purplePaletteDark: string[];
+export declare const purplePalette: ChartsColorPaletteCallback;

package/esm/colorPalettes/sequential/purple.js

@@ -0,0 +1,5 @@
+// Purple sequential gradient palette based on the color scheme
+
+export const purplePaletteLight = ['#CAD4EE', '#98ADE5', '#577EE3', '#4254FB', '#2638DF', '#222FA6', '#111C7F', '#091159'];
+export const purplePaletteDark = purplePaletteLight;
+export const purplePalette = mode => mode === 'dark' ? purplePaletteDark : purplePaletteLight;

package/esm/colorPalettes/sequential/red.d.ts

@@ -0,0 +1,4 @@
+import { ChartsColorPaletteCallback } from "../types.js";
+export declare const redPaletteLight: string[];
+export declare const redPaletteDark: string[];
+export declare const redPalette: ChartsColorPaletteCallback;

package/esm/colorPalettes/sequential/red.js

@@ -0,0 +1,5 @@
+// Red sequential gradient palette based on the color scheme
+
+export const redPaletteLight = ['#FAE0E0', '#F7C0BF', '#F3A2A0', '#EF5350', '#E53935', '#DC2B27', '#860B08', '#560503 '];
+export const redPaletteDark = redPaletteLight;
+export const redPalette = mode => mode === 'dark' ? redPaletteDark : redPaletteLight;

package/esm/colorPalettes/sequential/strawberrySky.d.ts

@@ -0,0 +1,4 @@
+import { ChartsColorPaletteCallback } from "../types.js";
+export declare const strawberrySkyPaletteLight: string[];
+export declare const strawberrySkyPaletteDark: string[];
+export declare const strawberrySkyPalette: ChartsColorPaletteCallback;

package/esm/colorPalettes/sequential/strawberrySky.js

@@ -0,0 +1,3 @@
+export const strawberrySkyPaletteLight = ['#6877FF', '#694FFD', '#A94FFD', '#DA4FFD', '#F050A5', '#FF5E6C'];
+export const strawberrySkyPaletteDark = strawberrySkyPaletteLight;
+export const strawberrySkyPalette = mode => mode === 'dark' ? strawberrySkyPaletteDark : strawberrySkyPaletteLight;

package/esm/colorPalettes/sequential/yellow.d.ts

@@ -0,0 +1,4 @@
+import { ChartsColorPaletteCallback } from "../types.js";
+export declare const yellowPaletteLight: string[];
+export declare const yellowPaletteDark: string[];
+export declare const yellowPalette: ChartsColorPaletteCallback;

package/esm/colorPalettes/sequential/yellow.js

@@ -0,0 +1,5 @@
+// Yellow sequential gradient palette based on the color scheme
+
+export const yellowPaletteLight = ['#FBEFD6', '#F5DEB0', '#F3CD80', '#FAC14F', '#FFB219', '#EF9801', '#DA7D0B', '#AB6208'];
+export const yellowPaletteDark = yellowPaletteLight;
+export const yellowPalette = mode => mode === 'dark' ? yellowPaletteDark : yellowPaletteLight;

package/esm/colorPalettes/types.d.ts

@@ -0,0 +1,4 @@
+export type ChartsColorPaletteCallback = (mode: 'light' | 'dark') => string[];
+export type ChartsColorPalette = string[] | ChartsColorPaletteCallback;
+export type ChartsColorCallback = (mode: 'light' | 'dark') => string;
+export type ChartsColor = string | ChartsColorCallback;

package/esm/colorPalettes/types.js

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

package/esm/context/ChartProvider/ChartContext.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { ChartContextValue } from './ChartProvider.types';
+import type { ChartContextValue } from "./ChartProvider.types.js";
 /**
  * @ignore - internal component.
  */

package/esm/context/ChartProvider/ChartProvider.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { ChartProviderProps } from './ChartProvider.types';
+import type { ChartProviderProps } from "./ChartProvider.types.js";
 import { ChartAnyPluginSignature } from "../../internals/plugins/models/index.js";
 import { ChartSeriesConfig } from "../../internals/plugins/models/seriesConfig/index.js";
 import { ChartSeriesType } from "../../models/seriesType/config.js";

package/esm/context/ChartProvider/ChartProvider.types.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import type { ChartAnyPluginSignature, ChartInstance, ChartPublicAPI, ConvertSignaturesIntoPlugins, MergeSignaturesProperty } from '../../internals/plugins/models';
-import type { ChartStore } from '../../internals/plugins/utils/ChartStore';
-import type { ChartCorePluginSignatures } from '../../internals/plugins/corePlugins';
-import type { ChartSeriesConfig } from '../../internals/plugins/models/seriesConfig';
-import type { UseChartBaseProps } from '../../internals/store/useCharts.types';
-import type { ChartSeriesType } from '../../models/seriesType/config';
+import type { ChartAnyPluginSignature, ChartInstance, ChartPublicAPI, ConvertSignaturesIntoPlugins, MergeSignaturesProperty } from "../../internals/plugins/models/index.js";
+import type { ChartStore } from "../../internals/plugins/utils/ChartStore.js";
+import type { ChartCorePluginSignatures } from "../../internals/plugins/corePlugins/index.js";
+import type { ChartSeriesConfig } from "../../internals/plugins/models/seriesConfig/index.js";
+import type { UseChartBaseProps } from "../../internals/store/useCharts.types.js";
+import type { ChartSeriesType } from "../../models/seriesType/config.js";
 export type ChartContextValue<TSignatures extends readonly ChartAnyPluginSignature[], TOptionalSignatures extends readonly ChartAnyPluginSignature[] = []> = {
   /**
    * And object with all the methods needed to interact with the chart.

package/esm/context/ChartProvider/useChartContext.js

@@ -5,7 +5,7 @@ import { ChartContext } from "./ChartContext.js";
 export const useChartContext = () => {
   const context = React.useContext(ChartContext);
   if (context == null) {
-    throw new Error(['MUI X: Could not find the Chart context.', 'It looks like you rendered your component outside of a ChartDataProvider.', 'This can also happen if you are bundling multiple versions of the library.'].join('\n'));
+    throw new Error(['MUI X Charts: Could not find the Chart context.', 'It looks like you rendered your component outside of a ChartDataProvider.', 'This can also happen if you are bundling multiple versions of the library.'].join('\n'));
   }
   return context;
 };

package/esm/context/index.d.ts

@@ -1 +1 @@
-export type { HighlightScope, FadeOptions, HighlightItemData, HighlightOptions } from '../internals/plugins/featurePlugins/useChartHighlight';
+export type { HighlightScope, FadeOptions, HighlightItemData, HighlightOptions } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";

package/esm/hooks/animation/useAnimateArea.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { AnimatedAreaProps } from '../../LineChart';
+import type { AnimatedAreaProps } from "../../LineChart/index.js";
 type UseAnimateAreaParams = Pick<AnimatedAreaProps, 'd' | 'skipAnimation'> & {
   ref?: React.Ref<SVGPathElement>;
 };

package/esm/hooks/animation/useAnimateBar.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BarProps } from '../../BarChart/AnimatedBarElement';
+import type { BarProps } from "../../BarChart/AnimatedBarElement.js";
 type UseAnimateBarParams = Pick<BarProps, 'x' | 'y' | 'xOrigin' | 'yOrigin' | 'width' | 'height' | 'skipAnimation' | 'layout'> & {
   ref?: React.Ref<SVGRectElement>;
 };