csv-charts-ai 1.11.0 → 1.11.2

package/README.md

@@ -343,13 +343,15 @@ useEffect(() => {
 
 ## React Components (`csv-charts-ai/charts`)
 
-Chart components are available as a **separate entry point** so projects that only need AI/parsing don't pull in React, Recharts, or Lucide.
+Chart components are available as a **separate entry point** so projects that only need AI/parsing don't pull in React or Recharts.
 
 ```bash
 # Optional peer dependencies — only needed if you import from csv-charts-ai/charts
-pnpm add react recharts lucide-react
+pnpm add react recharts
 ```
 
+Icons are **built-in** (SVG, zero dependency). To use your own icon library, see [Custom Icons](#custom-icons) below.
+
 ### Display Charts
 
 ```tsx
@@ -409,6 +411,23 @@ You can also pass `className` to any component to add classes alongside the buil
 <ChartDisplay data={data} charts={charts} className="my-extra-class" />
 ```
 
+### Custom Icons
+
+Chart toolbar icons are built-in as minimal SVGs (zero dependency). To use your own icon library (lucide-react, heroicons, phosphor, etc.), wrap your charts with `ChartIconProvider`:
+
+```tsx
+import { ChartDisplay, ChartIconProvider } from "csv-charts-ai/charts";
+import { RefreshCw, Download, ArrowUp, ArrowDown, RotateCcw, TrendingUp, Filter, Image } from "lucide-react";
+
+const icons = { RefreshCw, Download, SortAsc: ArrowUp, SortDesc: ArrowDown, RotateCcw, TrendingUp, Filter, ImageIcon: Image };
+
+<ChartIconProvider icons={icons}>
+  <ChartDisplay data={data} charts={charts} />
+</ChartIconProvider>
+```
+
+You only need to override the icons you want to change — the rest fall back to the built-in SVGs.
+
 ### Headless Usage (No React)
 
 The core entry point (`csv-charts-ai`) works without React — use it in Node.js scripts, APIs, or CLI tools:
@@ -439,7 +458,9 @@ console.log(result.summary.keyInsights);
 | `SingleChart` | Individual chart with toolbar (sort, zoom, trendline, CSV/PNG export) |
 | `ChartToolbar` | Standalone toolbar component |
 | `ChartThemeProvider` | React context for chart theming |
+| `ChartIconProvider` | React context for pluggable icons (default: built-in SVGs) |
 | `defaultDarkTheme` / `defaultLightTheme` | Built-in themes |
+| `defaultIcons` | Built-in SVG icon set |
 
 ## AI Functions Reference
 

package/dist/charts.d.ts

@@ -36,7 +36,7 @@ interface SingleChartProps {
     /** When true, removes all built-in Tailwind classes from toolbar and metadata tags */
     unstyled?: boolean;
 }
-declare function SingleChart({ data, chart, onRegenerate, className, unstyled }: SingleChartProps): react_jsx_runtime.JSX.Element;
+declare function SingleChart({ data, chart, onRegenerate, className, unstyled, }: SingleChartProps): react_jsx_runtime.JSX.Element;
 
 interface ChartToolbarProps {
     chartType: ChartType;

package/dist/charts.js

@@ -93,8 +93,8 @@ import { createContext as createContext2, useContext as useContext2 } from "reac
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var svgProps = {
   xmlns: "http://www.w3.org/2000/svg",
-  width: 24,
-  height: 24,
+  width: "1em",
+  height: "1em",
   viewBox: "0 0 24 24",
   fill: "none",
   stroke: "currentColor",
@@ -381,122 +381,148 @@ function ChartToolbar({
   const supportsTrendline = chartType === "bar" || chartType === "line" || chartType === "area";
   const cls = (defaultCls) => unstyled ? "" : defaultCls;
   const activeCls = (active, activeCls2, inactiveCls) => unstyled ? "" : `flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm transition-colors ${active ? activeCls2 : inactiveCls}`;
-  return /* @__PURE__ */ jsxs2("div", { className: unstyled ? className ?? "" : `mb-4 flex flex-wrap items-center gap-2 rounded-xl border border-white/10 bg-white/5 p-3 ${className ?? ""}`.trim(), children: [
-    /* @__PURE__ */ jsxs2(
-      "button",
-      {
-        onClick: onToggleSort,
-        className: activeCls(
-          sortOrder !== "none",
-          "border border-violet-500/30 bg-violet-500/20 text-violet-400",
-          "bg-white/5 text-gray-400 hover:bg-white/10 hover:text-white"
-        ),
-        title: "Sort by value",
-        children: [
-          sortOrder === "asc" ? /* @__PURE__ */ jsx3(icons.SortAsc, { className: "h-4 w-4" }) : sortOrder === "desc" ? /* @__PURE__ */ jsx3(icons.SortDesc, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx3(icons.SortDesc, { className: cls("h-4 w-4 opacity-50") }),
-          "Sort"
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxs2("div", { className: cls("flex items-center gap-2"), children: [
-      /* @__PURE__ */ jsx3(icons.Filter, { className: cls("h-4 w-4 text-gray-400"), "aria-hidden": "true" }),
-      /* @__PURE__ */ jsxs2(
-        "select",
-        {
-          value: limitResults,
-          onChange: (e) => onLimitChange(Number(e.target.value)),
-          "aria-label": "Limit number of results",
-          className: cls("rounded-lg border border-white/10 bg-white/5 px-2 py-1.5 text-sm text-gray-300 focus:border-violet-500/50 focus:outline-none"),
-          children: [
-            /* @__PURE__ */ jsx3("option", { value: 10, children: "Top 10" }),
-            /* @__PURE__ */ jsx3("option", { value: 20, children: "Top 20" }),
-            /* @__PURE__ */ jsx3("option", { value: 50, children: "Top 50" }),
-            /* @__PURE__ */ jsx3("option", { value: 100, children: "Top 100" }),
-            /* @__PURE__ */ jsx3("option", { value: 999999, children: "All" })
-          ]
-        }
-      )
-    ] }),
-    supportsBrush && /* @__PURE__ */ jsxs2(
-      "button",
-      {
-        onClick: onToggleBrush,
-        className: activeCls(
-          showBrush,
-          "border border-cyan-500/30 bg-cyan-500/20 text-cyan-400",
-          "bg-white/5 text-gray-400 hover:bg-white/10 hover:text-white"
-        ),
-        title: "Enable zoom/brush",
-        children: [
-          /* @__PURE__ */ jsx3(icons.RotateCcw, { className: "h-4 w-4" }),
-          "Zoom"
-        ]
-      }
-    ),
-    supportsTrendline && /* @__PURE__ */ jsxs2(
-      "button",
-      {
-        onClick: onToggleTrendline,
-        className: activeCls(
-          showTrendline,
-          "border border-emerald-500/30 bg-emerald-500/20 text-emerald-400",
-          "bg-white/5 text-gray-400 hover:bg-white/10 hover:text-white"
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: unstyled ? className ?? "" : `mb-4 flex flex-wrap items-center gap-2 rounded-xl border border-white/10 bg-white/5 p-3 ${className ?? ""}`.trim(),
+      children: [
+        /* @__PURE__ */ jsxs2(
+          "button",
+          {
+            onClick: onToggleSort,
+            className: activeCls(
+              sortOrder !== "none",
+              "border border-violet-500/30 bg-violet-500/20 text-violet-400",
+              "bg-white/5 text-gray-400 hover:bg-white/10 hover:text-white"
+            ),
+            title: "Sort by value",
+            children: [
+              sortOrder === "asc" ? /* @__PURE__ */ jsx3(icons.SortAsc, { className: "h-4 w-4" }) : sortOrder === "desc" ? /* @__PURE__ */ jsx3(icons.SortDesc, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx3(icons.SortDesc, { className: cls("h-4 w-4 opacity-50") }),
+              "Sort"
+            ]
+          }
         ),
-        title: "Show average line",
-        children: [
-          /* @__PURE__ */ jsx3(icons.TrendingUp, { className: "h-4 w-4" }),
-          "Average"
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx3("div", { className: cls("flex-1") }),
-    /* @__PURE__ */ jsxs2(
-      "button",
-      {
-        onClick: onExportPNG,
-        className: cls("flex items-center gap-1.5 rounded-lg bg-white/5 px-3 py-1.5 text-sm text-gray-400 transition-colors hover:bg-white/10 hover:text-white"),
-        title: "Export chart as PNG image",
-        children: [
-          /* @__PURE__ */ jsx3(icons.ImageIcon, { className: "h-4 w-4" }),
-          "PNG"
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxs2(
-      "button",
-      {
-        onClick: onExportCSV,
-        className: cls("flex items-center gap-1.5 rounded-lg bg-white/5 px-3 py-1.5 text-sm text-gray-400 transition-colors hover:bg-white/10 hover:text-white"),
-        title: "Export chart data as CSV",
-        children: [
-          /* @__PURE__ */ jsx3(icons.Download, { className: "h-4 w-4" }),
-          "CSV"
-        ]
-      }
-    ),
-    hasRegenerate && /* @__PURE__ */ jsxs2(
-      "button",
-      {
-        onClick: onRegenerate,
-        disabled: isRegenerating,
-        className: cls("flex items-center gap-1.5 rounded-lg bg-violet-500/20 px-3 py-1.5 text-sm text-violet-400 transition-colors hover:bg-violet-500/30 disabled:opacity-50"),
-        children: [
+        /* @__PURE__ */ jsxs2("div", { className: cls("flex items-center gap-2"), children: [
           /* @__PURE__ */ jsx3(
-            icons.RefreshCw,
+            icons.Filter,
             {
-              className: `h-4 w-4 ${isRegenerating ? "animate-spin" : ""}`
+              className: cls("h-4 w-4 text-gray-400"),
+              "aria-hidden": "true"
             }
           ),
-          isRegenerating ? "..." : "Regenerate"
-        ]
-      }
-    )
-  ] });
+          /* @__PURE__ */ jsxs2(
+            "select",
+            {
+              value: limitResults,
+              onChange: (e) => onLimitChange(Number(e.target.value)),
+              "aria-label": "Limit number of results",
+              className: cls(
+                "rounded-lg border border-white/10 bg-white/5 px-2 py-1.5 text-sm text-gray-300 focus:border-violet-500/50 focus:outline-none"
+              ),
+              children: [
+                /* @__PURE__ */ jsx3("option", { value: 10, children: "Top 10" }),
+                /* @__PURE__ */ jsx3("option", { value: 20, children: "Top 20" }),
+                /* @__PURE__ */ jsx3("option", { value: 50, children: "Top 50" }),
+                /* @__PURE__ */ jsx3("option", { value: 100, children: "Top 100" }),
+                /* @__PURE__ */ jsx3("option", { value: 999999, children: "All" })
+              ]
+            }
+          )
+        ] }),
+        supportsBrush && /* @__PURE__ */ jsxs2(
+          "button",
+          {
+            onClick: onToggleBrush,
+            className: activeCls(
+              showBrush,
+              "border border-cyan-500/30 bg-cyan-500/20 text-cyan-400",
+              "bg-white/5 text-gray-400 hover:bg-white/10 hover:text-white"
+            ),
+            title: "Enable zoom/brush",
+            children: [
+              /* @__PURE__ */ jsx3(icons.RotateCcw, { className: "h-4 w-4" }),
+              "Zoom"
+            ]
+          }
+        ),
+        supportsTrendline && /* @__PURE__ */ jsxs2(
+          "button",
+          {
+            onClick: onToggleTrendline,
+            className: activeCls(
+              showTrendline,
+              "border border-emerald-500/30 bg-emerald-500/20 text-emerald-400",
+              "bg-white/5 text-gray-400 hover:bg-white/10 hover:text-white"
+            ),
+            title: "Show average line",
+            children: [
+              /* @__PURE__ */ jsx3(icons.TrendingUp, { className: "h-4 w-4" }),
+              "Average"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx3("div", { className: cls("flex-1") }),
+        /* @__PURE__ */ jsxs2(
+          "button",
+          {
+            onClick: onExportPNG,
+            className: cls(
+              "flex items-center gap-1.5 rounded-lg bg-white/5 px-3 py-1.5 text-sm text-gray-400 transition-colors hover:bg-white/10 hover:text-white"
+            ),
+            title: "Export chart as PNG image",
+            children: [
+              /* @__PURE__ */ jsx3(icons.ImageIcon, { className: "h-4 w-4" }),
+              "PNG"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs2(
+          "button",
+          {
+            onClick: onExportCSV,
+            className: cls(
+              "flex items-center gap-1.5 rounded-lg bg-white/5 px-3 py-1.5 text-sm text-gray-400 transition-colors hover:bg-white/10 hover:text-white"
+            ),
+            title: "Export chart data as CSV",
+            children: [
+              /* @__PURE__ */ jsx3(icons.Download, { className: "h-4 w-4" }),
+              "CSV"
+            ]
+          }
+        ),
+        hasRegenerate && /* @__PURE__ */ jsxs2(
+          "button",
+          {
+            onClick: onRegenerate,
+            disabled: isRegenerating,
+            className: cls(
+              "flex items-center gap-1.5 rounded-lg bg-violet-500/20 px-3 py-1.5 text-sm text-violet-400 transition-colors hover:bg-violet-500/30 disabled:opacity-50"
+            ),
+            children: [
+              /* @__PURE__ */ jsx3(
+                icons.RefreshCw,
+                {
+                  className: `h-4 w-4 ${isRegenerating ? "animate-spin" : ""}`
+                }
+              ),
+              isRegenerating ? "..." : "Regenerate"
+            ]
+          }
+        )
+      ]
+    }
+  );
 }
 
 // src/SingleChart.tsx
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-function SingleChart({ data, chart, onRegenerate, className, unstyled = false }) {
+function SingleChart({
+  data,
+  chart,
+  onRegenerate,
+  className,
+  unstyled = false
+}) {
   const theme = useChartTheme();
   const icons = useChartIcons();
   const chartContainerRef = useRef(null);
@@ -556,10 +582,7 @@ ${rows}`;
     const svgElement = container.querySelector("svg");
     if (!svgElement) return;
     const svgClone = svgElement.cloneNode(true);
-    svgClone.setAttribute(
-      "xmlns",
-      "http://www.w3.org/2000/svg"
-    );
+    svgClone.setAttribute("xmlns", "http://www.w3.org/2000/svg");
     const rect = svgElement.getBoundingClientRect();
     svgClone.setAttribute("width", String(rect.width));
     svgClone.setAttribute("height", String(rect.height));
@@ -751,13 +774,21 @@ ${rows}`;
           /* @__PURE__ */ jsx4(Tooltip, { contentStyle: tooltipStyle }),
           /* @__PURE__ */ jsx4(Legend, {}),
           trendlineComponent,
-          /* @__PURE__ */ jsx4(Bar, { dataKey: yKey, fill: theme.accentPrimary, radius: [4, 4, 0, 0], children: chartData.map((_, index) => /* @__PURE__ */ jsx4(
-            Cell,
+          /* @__PURE__ */ jsx4(
+            Bar,
             {
-              fill: theme.colors[index % theme.colors.length]
-            },
-            `cell-${index}`
-          )) }),
+              dataKey: yKey,
+              fill: theme.accentPrimary,
+              radius: [4, 4, 0, 0],
+              children: chartData.map((_, index) => /* @__PURE__ */ jsx4(
+                Cell,
+                {
+                  fill: theme.colors[index % theme.colors.length]
+                },
+                `cell-${index}`
+              ))
+            }
+          ),
           brushComponent
         ] });
       case "line":
@@ -824,21 +855,8 @@ ${rows}`;
       case "scatter":
         return /* @__PURE__ */ jsxs3(ScatterChart, { ...commonProps, children: [
           /* @__PURE__ */ jsx4(CartesianGrid, { strokeDasharray: "3 3", stroke: theme.gridStroke }),
-          /* @__PURE__ */ jsx4(
-            XAxis,
-            {
-              type: "category",
-              ...xAxisProps
-            }
-          ),
-          /* @__PURE__ */ jsx4(
-            YAxis,
-            {
-              type: "number",
-              dataKey: yKey,
-              ...yAxisProps
-            }
-          ),
+          /* @__PURE__ */ jsx4(XAxis, { type: "category", ...xAxisProps }),
+          /* @__PURE__ */ jsx4(YAxis, { type: "number", dataKey: yKey, ...yAxisProps }),
           /* @__PURE__ */ jsx4(
             Tooltip,
             {
@@ -879,32 +897,38 @@ ${rows}`;
     }
   };
   if (processedData.length === 0) {
-    return /* @__PURE__ */ jsx4("div", { className: unstyled ? className ?? "" : `flex h-[300px] flex-col items-center justify-center gap-4 text-gray-400 ${className ?? ""}`.trim(), children: /* @__PURE__ */ jsxs3("div", { className: unstyled ? "" : "text-center", children: [
-      /* @__PURE__ */ jsx4("p", { className: unstyled ? "" : "mb-1 font-medium text-red-400", children: "Unable to generate this chart" }),
-      /* @__PURE__ */ jsxs3("p", { className: unstyled ? "" : "mb-4 text-sm text-gray-500", children: [
-        "Columns: ",
-        chart.xAxis,
-        ", ",
-        chart.yAxis
-      ] }),
-      onRegenerate && /* @__PURE__ */ jsxs3(
-        "button",
-        {
-          onClick: handleRegenerate,
-          disabled: isRegenerating,
-          className: unstyled ? "" : "flex items-center gap-2 rounded-lg bg-violet-600 px-4 py-2 text-sm text-white transition-colors hover:bg-violet-500 disabled:opacity-50",
-          children: [
-            /* @__PURE__ */ jsx4(
-              icons.RefreshCw,
-              {
-                className: `h-4 w-4 ${isRegenerating ? "animate-spin" : ""}`
-              }
-            ),
-            isRegenerating ? "Regenerating..." : "Regenerate with AI"
-          ]
-        }
-      )
-    ] }) });
+    return /* @__PURE__ */ jsx4(
+      "div",
+      {
+        className: unstyled ? className ?? "" : `flex h-[300px] flex-col items-center justify-center gap-4 text-gray-400 ${className ?? ""}`.trim(),
+        children: /* @__PURE__ */ jsxs3("div", { className: unstyled ? "" : "text-center", children: [
+          /* @__PURE__ */ jsx4("p", { className: unstyled ? "" : "mb-1 font-medium text-red-400", children: "Unable to generate this chart" }),
+          /* @__PURE__ */ jsxs3("p", { className: unstyled ? "" : "mb-4 text-sm text-gray-500", children: [
+            "Columns: ",
+            chart.xAxis,
+            ", ",
+            chart.yAxis
+          ] }),
+          onRegenerate && /* @__PURE__ */ jsxs3(
+            "button",
+            {
+              onClick: handleRegenerate,
+              disabled: isRegenerating,
+              className: unstyled ? "" : "flex items-center gap-2 rounded-lg bg-violet-600 px-4 py-2 text-sm text-white transition-colors hover:bg-violet-500 disabled:opacity-50",
+              children: [
+                /* @__PURE__ */ jsx4(
+                  icons.RefreshCw,
+                  {
+                    className: `h-4 w-4 ${isRegenerating ? "animate-spin" : ""}`
+                  }
+                ),
+                isRegenerating ? "Regenerating..." : "Regenerate with AI"
+              ]
+            }
+          )
+        ] })
+      }
+    );
   }
   return /* @__PURE__ */ jsxs3("div", { className, children: [
     /* @__PURE__ */ jsx4(
@@ -927,45 +951,89 @@ ${rows}`;
         unstyled
       }
     ),
-    /* @__PURE__ */ jsx4("div", { className: unstyled ? "" : "h-[450px] w-full", style: unstyled ? { height: 450, width: "100%" } : void 0, ref: chartContainerRef, children: /* @__PURE__ */ jsx4(
-      ResponsiveContainer,
+    /* @__PURE__ */ jsx4(
+      "div",
       {
-        width: "100%",
-        height: "100%",
-        children: renderChartContent(
-          chart.type,
-          processedData,
-          xColName,
-          isMultiSeries ? "" : yColName,
-          showBrush,
-          showTrendline,
-          average
+        className: unstyled ? "" : "h-[450px] w-full",
+        style: unstyled ? { height: 450, width: "100%" } : void 0,
+        ref: chartContainerRef,
+        children: /* @__PURE__ */ jsx4(
+          ResponsiveContainer,
+          {
+            width: "100%",
+            height: "100%",
+            children: renderChartContent(
+              chart.type,
+              processedData,
+              xColName,
+              isMultiSeries ? "" : yColName,
+              showBrush,
+              showTrendline,
+              average
+            )
+          },
+          `chart-${chart.id}-${showBrush ? "brush" : "no-brush"}`
         )
-      },
-      `chart-${chart.id}-${showBrush ? "brush" : "no-brush"}`
-    ) }),
+      }
+    ),
     /* @__PURE__ */ jsxs3("div", { className: unstyled ? "" : "mt-4 flex flex-wrap gap-2", children: [
-      /* @__PURE__ */ jsxs3("span", { className: unstyled ? "" : "rounded bg-white/10 px-2 py-0.5 text-xs text-gray-400", children: [
-        "X: ",
-        chart.xAxis
-      ] }),
-      /* @__PURE__ */ jsxs3("span", { className: unstyled ? "" : "rounded bg-white/10 px-2 py-0.5 text-xs text-gray-400", children: [
-        "Y: ",
-        chart.yAxis
-      ] }),
-      chart.groupBy && /* @__PURE__ */ jsxs3("span", { className: unstyled ? "" : "rounded bg-cyan-500/20 px-2 py-0.5 text-xs text-cyan-300", children: [
-        "Group: ",
-        chart.groupBy
-      ] }),
-      chart.aggregation && chart.aggregation !== "none" && /* @__PURE__ */ jsx4("span", { className: unstyled ? "" : "rounded bg-violet-500/20 px-2 py-0.5 text-xs text-violet-300", children: chart.aggregation }),
-      /* @__PURE__ */ jsxs3("span", { className: unstyled ? "" : "rounded bg-white/10 px-2 py-0.5 text-xs text-gray-400", children: [
-        processedData.length,
-        " items"
-      ] }),
-      isMultiSeries && /* @__PURE__ */ jsxs3("span", { className: unstyled ? "" : "rounded bg-emerald-500/20 px-2 py-0.5 text-xs text-emerald-300", children: [
-        seriesKeys.length,
-        " series"
-      ] })
+      /* @__PURE__ */ jsxs3(
+        "span",
+        {
+          className: unstyled ? "" : "rounded bg-white/10 px-2 py-0.5 text-xs text-gray-400",
+          children: [
+            "X: ",
+            chart.xAxis
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs3(
+        "span",
+        {
+          className: unstyled ? "" : "rounded bg-white/10 px-2 py-0.5 text-xs text-gray-400",
+          children: [
+            "Y: ",
+            chart.yAxis
+          ]
+        }
+      ),
+      chart.groupBy && /* @__PURE__ */ jsxs3(
+        "span",
+        {
+          className: unstyled ? "" : "rounded bg-cyan-500/20 px-2 py-0.5 text-xs text-cyan-300",
+          children: [
+            "Group: ",
+            chart.groupBy
+          ]
+        }
+      ),
+      chart.aggregation && chart.aggregation !== "none" && /* @__PURE__ */ jsx4(
+        "span",
+        {
+          className: unstyled ? "" : "rounded bg-violet-500/20 px-2 py-0.5 text-xs text-violet-300",
+          children: chart.aggregation
+        }
+      ),
+      /* @__PURE__ */ jsxs3(
+        "span",
+        {
+          className: unstyled ? "" : "rounded bg-white/10 px-2 py-0.5 text-xs text-gray-400",
+          children: [
+            processedData.length,
+            " items"
+          ]
+        }
+      ),
+      isMultiSeries && /* @__PURE__ */ jsxs3(
+        "span",
+        {
+          className: unstyled ? "" : "rounded bg-emerald-500/20 px-2 py-0.5 text-xs text-emerald-300",
+          children: [
+            seriesKeys.length,
+            " series"
+          ]
+        }
+      )
     ] })
   ] });
 }
@@ -996,27 +1064,19 @@ function ChartDisplay({
   const titleCls = unstyled ? titleClassName ?? "" : `mb-2 bg-linear-to-r from-violet-400 to-fuchsia-400 bg-clip-text text-xl font-bold text-transparent ${titleClassName ?? ""}`.trim();
   const descCls = unstyled ? descriptionClassName ?? "" : `mb-4 text-gray-400 ${descriptionClassName ?? ""}`.trim();
   const innerCls = unstyled ? "" : "p-6";
-  return /* @__PURE__ */ jsx5(ChartThemeProvider, { theme, children: /* @__PURE__ */ jsx5("div", { className: containerCls, children: charts.map((chart) => /* @__PURE__ */ jsx5(
-    CardWrapper,
-    {
-      title: chart.title,
-      className: cardCls,
-      children: /* @__PURE__ */ jsxs4("div", { className: innerCls, children: [
-        /* @__PURE__ */ jsx5("h3", { className: titleCls, children: chart.title }),
-        /* @__PURE__ */ jsx5("p", { className: descCls, children: chart.description }),
-        /* @__PURE__ */ jsx5(
-          SingleChart,
-          {
-            data,
-            chart,
-            onRegenerate,
-            unstyled
-          }
-        )
-      ] })
-    },
-    chart.id
-  )) }) });
+  return /* @__PURE__ */ jsx5(ChartThemeProvider, { theme, children: /* @__PURE__ */ jsx5("div", { className: containerCls, children: charts.map((chart) => /* @__PURE__ */ jsx5(CardWrapper, { title: chart.title, className: cardCls, children: /* @__PURE__ */ jsxs4("div", { className: innerCls, children: [
+    /* @__PURE__ */ jsx5("h3", { className: titleCls, children: chart.title }),
+    /* @__PURE__ */ jsx5("p", { className: descCls, children: chart.description }),
+    /* @__PURE__ */ jsx5(
+      SingleChart,
+      {
+        data,
+        chart,
+        onRegenerate,
+        unstyled
+      }
+    )
+  ] }) }, chart.id)) }) });
 }
 
 // src/constants.ts