rift-ds 1.0.1 → 1.1.0

package/components/Chart/AreaChart.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useCallback } from "react";
+import { useId, useCallback } from "react";
 import { ResponsiveContainer, AreaChart as AreaChart$1, CartesianGrid, XAxis, YAxis, Tooltip, Area, Legend } from "recharts";
 import { getChartSeriesColors } from "./palette.js";
 import "./Chart.css";
@@ -30,6 +30,8 @@ const AreaChart = ({
   bare = false,
   className = ""
 }) => {
+  const titleId = useId();
+  const subtitleId = useId();
   const baseClass = "ds-chart";
   const classes = [baseClass, bare ? `${baseClass}--bare` : "", className].filter(Boolean).join(" ");
   const textSecondary = getCSSVar("--color-text-secondary", "#303030");
@@ -40,61 +42,70 @@ const AreaChart = ({
     (props) => /* @__PURE__ */ jsx(AreaTooltip, { ...props }),
     []
   );
-  return /* @__PURE__ */ jsxs("div", { className: classes, children: [
-    (title || subtitle || summaryItems) && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header`, children: [
-      /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header-text`, children: [
-        title && /* @__PURE__ */ jsx("h3", { className: `${baseClass}__title`, children: title }),
-        subtitle && /* @__PURE__ */ jsx("p", { className: `${baseClass}__subtitle`, children: subtitle })
-      ] }),
-      summaryItems && summaryItems.length > 0 && /* @__PURE__ */ jsx("div", { className: `${baseClass}__summary`, children: summaryItems.map((item, i) => /* @__PURE__ */ jsxs("div", { className: `${baseClass}__summary-item`, children: [
-        /* @__PURE__ */ jsx("span", { className: `${baseClass}__summary-label`, children: item.label }),
-        /* @__PURE__ */ jsx("span", { className: `${baseClass}__summary-value`, children: typeof item.value === "number" ? item.value.toLocaleString() : item.value })
-      ] }, i)) })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: `${baseClass}__body`, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(AreaChart$1, { data, margin: { top: 8, right: 4, bottom: 0, left: -12 }, children: [
-      /* @__PURE__ */ jsx("defs", { children: series.map((s, i) => {
-        const color = s.color || seriesColors[i % seriesColors.length];
-        return /* @__PURE__ */ jsxs("linearGradient", { id: `area-gradient-${s.dataKey}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
-          /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.4 }),
-          /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0.05 })
-        ] }, `grad-${s.dataKey}`);
-      }) }),
-      /* @__PURE__ */ jsx(CartesianGrid, { vertical: false, stroke: gridColor }),
-      /* @__PURE__ */ jsx(
-        XAxis,
-        {
-          dataKey: xKey,
-          tick: { fill: textSecondary, fontSize: 12 },
-          tickLine: false,
-          axisLine: { stroke: gridColor }
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        YAxis,
-        {
-          tick: { fill: textSecondary, fontSize: 12 },
-          tickLine: false,
-          axisLine: false
-        }
-      ),
-      /* @__PURE__ */ jsx(Tooltip, { content: renderTooltip }),
-      series.map((s, i) => /* @__PURE__ */ jsx(
-        Area,
-        {
-          type: "monotone",
-          dataKey: s.dataKey,
-          name: s.label,
-          stroke: s.color || seriesColors[i % seriesColors.length],
-          strokeWidth: 2,
-          fill: `url(#area-gradient-${s.dataKey})`,
-          fillOpacity: s.fillOpacity ?? 1,
-          stackId: stacked ? "stack" : void 0
-        },
-        s.dataKey
-      )),
-      showLegend && series.length > 1 && /* @__PURE__ */ jsx(Legend, { wrapperStyle: { color: textSecondary, fontSize: 12 } })
-    ] }) }) })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classes,
+      role: "figure",
+      "aria-labelledby": title ? titleId : void 0,
+      "aria-describedby": subtitle ? subtitleId : void 0,
+      children: [
+        (title || subtitle || summaryItems) && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header`, children: [
+          /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header-text`, children: [
+            title && /* @__PURE__ */ jsx("h3", { id: titleId, className: `${baseClass}__title`, children: title }),
+            subtitle && /* @__PURE__ */ jsx("p", { id: subtitleId, className: `${baseClass}__subtitle`, children: subtitle })
+          ] }),
+          summaryItems && summaryItems.length > 0 && /* @__PURE__ */ jsx("div", { className: `${baseClass}__summary`, children: summaryItems.map((item, i) => /* @__PURE__ */ jsxs("div", { className: `${baseClass}__summary-item`, children: [
+            /* @__PURE__ */ jsx("span", { className: `${baseClass}__summary-label`, children: item.label }),
+            /* @__PURE__ */ jsx("span", { className: `${baseClass}__summary-value`, children: typeof item.value === "number" ? item.value.toLocaleString() : item.value })
+          ] }, i)) })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: `${baseClass}__body`, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(AreaChart$1, { data, margin: { top: 8, right: 4, bottom: 0, left: -12 }, children: [
+          /* @__PURE__ */ jsx("defs", { children: series.map((s, i) => {
+            const color = s.color || seriesColors[i % seriesColors.length];
+            return /* @__PURE__ */ jsxs("linearGradient", { id: `area-gradient-${s.dataKey}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+              /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.4 }),
+              /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0.05 })
+            ] }, `grad-${s.dataKey}`);
+          }) }),
+          /* @__PURE__ */ jsx(CartesianGrid, { vertical: false, stroke: gridColor }),
+          /* @__PURE__ */ jsx(
+            XAxis,
+            {
+              dataKey: xKey,
+              tick: { fill: textSecondary, fontSize: 12 },
+              tickLine: false,
+              axisLine: { stroke: gridColor }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            YAxis,
+            {
+              tick: { fill: textSecondary, fontSize: 12 },
+              tickLine: false,
+              axisLine: false
+            }
+          ),
+          /* @__PURE__ */ jsx(Tooltip, { content: renderTooltip }),
+          series.map((s, i) => /* @__PURE__ */ jsx(
+            Area,
+            {
+              type: "monotone",
+              dataKey: s.dataKey,
+              name: s.label,
+              stroke: s.color || seriesColors[i % seriesColors.length],
+              strokeWidth: 2,
+              fill: `url(#area-gradient-${s.dataKey})`,
+              fillOpacity: s.fillOpacity ?? 1,
+              stackId: stacked ? "stack" : void 0
+            },
+            s.dataKey
+          )),
+          showLegend && series.length > 1 && /* @__PURE__ */ jsx(Legend, { wrapperStyle: { color: textSecondary, fontSize: 12 } })
+        ] }) }) })
+      ]
+    }
+  );
 };
 export {
   AreaChart

package/components/Chart/BarChart.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useCallback } from "react";
+import { useId, useCallback } from "react";
 import { ResponsiveContainer, BarChart as BarChart$1, CartesianGrid, XAxis, YAxis, Tooltip, Bar } from "recharts";
 import "./Chart.css";
 function getCSSVar(name, fallback) {
@@ -35,6 +35,8 @@ const BarChart = ({
   bare = false,
   className = ""
 }) => {
+  const titleId = useId();
+  const subtitleId = useId();
   const baseClass = "ds-chart";
   const classes = [baseClass, bare ? `${baseClass}--bare` : "", className].filter(Boolean).join(" ");
   const resolvedBarColor = barColor || getCSSVar("--color-action-primary-bg", "#0E6E8F");
@@ -46,61 +48,70 @@ const BarChart = ({
     (props) => /* @__PURE__ */ jsx(ChartTooltip, { ...props, barColor: resolvedBarColor, dataLabel }),
     [resolvedBarColor, dataLabel]
   );
-  return /* @__PURE__ */ jsxs("div", { className: classes, children: [
-    (title || subtitle || summaryItems) && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header`, children: [
-      /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header-text`, children: [
-        title && /* @__PURE__ */ jsx("h3", { className: `${baseClass}__title`, children: title }),
-        subtitle && /* @__PURE__ */ jsx("p", { className: `${baseClass}__subtitle`, children: subtitle })
-      ] }),
-      summaryItems && summaryItems.length > 0 && /* @__PURE__ */ jsx("div", { className: `${baseClass}__summary`, children: summaryItems.map((item, i) => /* @__PURE__ */ jsxs("div", { className: `${baseClass}__summary-item`, children: [
-        /* @__PURE__ */ jsx("span", { className: `${baseClass}__summary-label`, children: item.label }),
-        /* @__PURE__ */ jsx("span", { className: `${baseClass}__summary-value`, children: typeof item.value === "number" ? item.value.toLocaleString() : item.value })
-      ] }, i)) })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: `${baseClass}__body`, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(BarChart$1, { data, margin: { top: 8, right: 4, bottom: 0, left: -12 }, children: [
-      /* @__PURE__ */ jsx(
-        CartesianGrid,
-        {
-          vertical: false,
-          stroke: gridColor,
-          strokeDasharray: ""
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        XAxis,
-        {
-          dataKey: xKey,
-          tick: { fill: textSecondary, fontSize: 12 },
-          tickLine: false,
-          axisLine: { stroke: gridColor }
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        YAxis,
-        {
-          tick: { fill: textSecondary, fontSize: 12 },
-          tickLine: false,
-          axisLine: false
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        Tooltip,
-        {
-          content: renderTooltip,
-          cursor: { fill: cursorColor, opacity: 0.4 }
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        Bar,
-        {
-          dataKey: yKey,
-          fill: resolvedBarColor,
-          radius: [3, 3, 0, 0],
-          maxBarSize: 32
-        }
-      )
-    ] }) }) })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classes,
+      role: "figure",
+      "aria-labelledby": title ? titleId : void 0,
+      "aria-describedby": subtitle ? subtitleId : void 0,
+      children: [
+        (title || subtitle || summaryItems) && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header`, children: [
+          /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header-text`, children: [
+            title && /* @__PURE__ */ jsx("h3", { id: titleId, className: `${baseClass}__title`, children: title }),
+            subtitle && /* @__PURE__ */ jsx("p", { id: subtitleId, className: `${baseClass}__subtitle`, children: subtitle })
+          ] }),
+          summaryItems && summaryItems.length > 0 && /* @__PURE__ */ jsx("div", { className: `${baseClass}__summary`, children: summaryItems.map((item, i) => /* @__PURE__ */ jsxs("div", { className: `${baseClass}__summary-item`, children: [
+            /* @__PURE__ */ jsx("span", { className: `${baseClass}__summary-label`, children: item.label }),
+            /* @__PURE__ */ jsx("span", { className: `${baseClass}__summary-value`, children: typeof item.value === "number" ? item.value.toLocaleString() : item.value })
+          ] }, i)) })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: `${baseClass}__body`, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(BarChart$1, { data, margin: { top: 8, right: 4, bottom: 0, left: -12 }, children: [
+          /* @__PURE__ */ jsx(
+            CartesianGrid,
+            {
+              vertical: false,
+              stroke: gridColor,
+              strokeDasharray: ""
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            XAxis,
+            {
+              dataKey: xKey,
+              tick: { fill: textSecondary, fontSize: 12 },
+              tickLine: false,
+              axisLine: { stroke: gridColor }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            YAxis,
+            {
+              tick: { fill: textSecondary, fontSize: 12 },
+              tickLine: false,
+              axisLine: false
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Tooltip,
+            {
+              content: renderTooltip,
+              cursor: { fill: cursorColor, opacity: 0.4 }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Bar,
+            {
+              dataKey: yKey,
+              fill: resolvedBarColor,
+              radius: [3, 3, 0, 0],
+              maxBarSize: 32
+            }
+          )
+        ] }) }) })
+      ]
+    }
+  );
 };
 export {
   BarChart

package/components/Chart/ComboChart.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useCallback } from "react";
+import { useId, useCallback } from "react";
 import { ResponsiveContainer, ComposedChart, CartesianGrid, XAxis, YAxis, Tooltip, Bar, Line } from "recharts";
 import { getChartSeriesColors } from "./palette.js";
 import "./Chart.css";
@@ -40,6 +40,8 @@ const ComboChart = ({
   bare = false,
   className = ""
 }) => {
+  const titleId = useId();
+  const subtitleId = useId();
   const baseClass = "ds-chart";
   const classes = [baseClass, bare ? `${baseClass}--bare` : "", className].filter(Boolean).join(" ");
   const seriesColors = getChartSeriesColors();
@@ -55,87 +57,96 @@ const ComboChart = ({
     (props) => /* @__PURE__ */ jsx(ComboTooltip, { ...props }),
     []
   );
-  return /* @__PURE__ */ jsxs("div", { className: classes, children: [
-    (title || subtitle || summaryItems) && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header`, children: [
-      /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header-text`, children: [
-        title && /* @__PURE__ */ jsx("h3", { className: `${baseClass}__title`, children: title }),
-        subtitle && /* @__PURE__ */ jsx("p", { className: `${baseClass}__subtitle`, children: subtitle })
-      ] }),
-      summaryItems && summaryItems.length > 0 && /* @__PURE__ */ jsx("div", { className: `${baseClass}__summary`, children: summaryItems.map((item, i) => /* @__PURE__ */ jsxs("div", { className: `${baseClass}__summary-item`, children: [
-        /* @__PURE__ */ jsx("span", { className: `${baseClass}__summary-label`, children: item.label }),
-        /* @__PURE__ */ jsx("span", { className: `${baseClass}__summary-value`, children: typeof item.value === "number" ? item.value.toLocaleString() : item.value })
-      ] }, i)) })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: `${baseClass}__body`, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(
-      ComposedChart,
-      {
-        data,
-        margin: { top: 8, right: secondaryAxis ? -12 : 4, bottom: 0, left: -12 },
-        children: [
-          /* @__PURE__ */ jsx(CartesianGrid, { vertical: false, stroke: gridColor }),
-          /* @__PURE__ */ jsx(
-            XAxis,
-            {
-              dataKey: xKey,
-              tick: { fill: textSecondary, fontSize: 12 },
-              tickLine: false,
-              axisLine: { stroke: gridColor }
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            YAxis,
-            {
-              yAxisId: "bar",
-              tick: { fill: textSecondary, fontSize: 12 },
-              tickLine: false,
-              axisLine: false
-            }
-          ),
-          secondaryAxis && /* @__PURE__ */ jsx(
-            YAxis,
-            {
-              yAxisId: "line",
-              orientation: "right",
-              tick: { fill: textSecondary, fontSize: 12 },
-              tickLine: false,
-              axisLine: false
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Tooltip,
-            {
-              content: renderTooltip,
-              cursor: { fill: cursorColor, opacity: 0.4 }
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Bar,
-            {
-              yAxisId: "bar",
-              dataKey: barKey,
-              name: resolvedBarLabel,
-              fill: resolvedBarColor,
-              radius: [3, 3, 0, 0],
-              maxBarSize: 32
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Line,
-            {
-              yAxisId: secondaryAxis ? "line" : "bar",
-              type: "monotone",
-              dataKey: lineKey,
-              name: resolvedLineLabel,
-              stroke: resolvedLineColor,
-              strokeWidth: 2,
-              dot: false,
-              activeDot: { r: 4, strokeWidth: 0 }
-            }
-          )
-        ]
-      }
-    ) }) })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classes,
+      role: "figure",
+      "aria-labelledby": title ? titleId : void 0,
+      "aria-describedby": subtitle ? subtitleId : void 0,
+      children: [
+        (title || subtitle || summaryItems) && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header`, children: [
+          /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header-text`, children: [
+            title && /* @__PURE__ */ jsx("h3", { id: titleId, className: `${baseClass}__title`, children: title }),
+            subtitle && /* @__PURE__ */ jsx("p", { id: subtitleId, className: `${baseClass}__subtitle`, children: subtitle })
+          ] }),
+          summaryItems && summaryItems.length > 0 && /* @__PURE__ */ jsx("div", { className: `${baseClass}__summary`, children: summaryItems.map((item, i) => /* @__PURE__ */ jsxs("div", { className: `${baseClass}__summary-item`, children: [
+            /* @__PURE__ */ jsx("span", { className: `${baseClass}__summary-label`, children: item.label }),
+            /* @__PURE__ */ jsx("span", { className: `${baseClass}__summary-value`, children: typeof item.value === "number" ? item.value.toLocaleString() : item.value })
+          ] }, i)) })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: `${baseClass}__body`, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(
+          ComposedChart,
+          {
+            data,
+            margin: { top: 8, right: secondaryAxis ? -12 : 4, bottom: 0, left: -12 },
+            children: [
+              /* @__PURE__ */ jsx(CartesianGrid, { vertical: false, stroke: gridColor }),
+              /* @__PURE__ */ jsx(
+                XAxis,
+                {
+                  dataKey: xKey,
+                  tick: { fill: textSecondary, fontSize: 12 },
+                  tickLine: false,
+                  axisLine: { stroke: gridColor }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                YAxis,
+                {
+                  yAxisId: "bar",
+                  tick: { fill: textSecondary, fontSize: 12 },
+                  tickLine: false,
+                  axisLine: false
+                }
+              ),
+              secondaryAxis && /* @__PURE__ */ jsx(
+                YAxis,
+                {
+                  yAxisId: "line",
+                  orientation: "right",
+                  tick: { fill: textSecondary, fontSize: 12 },
+                  tickLine: false,
+                  axisLine: false
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Tooltip,
+                {
+                  content: renderTooltip,
+                  cursor: { fill: cursorColor, opacity: 0.4 }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Bar,
+                {
+                  yAxisId: "bar",
+                  dataKey: barKey,
+                  name: resolvedBarLabel,
+                  fill: resolvedBarColor,
+                  radius: [3, 3, 0, 0],
+                  maxBarSize: 32
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Line,
+                {
+                  yAxisId: secondaryAxis ? "line" : "bar",
+                  type: "monotone",
+                  dataKey: lineKey,
+                  name: resolvedLineLabel,
+                  stroke: resolvedLineColor,
+                  strokeWidth: 2,
+                  dot: false,
+                  activeDot: { r: 4, strokeWidth: 0 }
+                }
+              )
+            ]
+          }
+        ) }) })
+      ]
+    }
+  );
 };
 export {
   ComboChart

package/components/Chart/LineChart.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useCallback } from "react";
+import { useId, useCallback } from "react";
 import { ResponsiveContainer, LineChart as LineChart$1, CartesianGrid, XAxis, YAxis, Tooltip, Line } from "recharts";
 import { getChartSeriesColors } from "./palette.js";
 import "./Chart.css";
@@ -28,6 +28,8 @@ const LineChart = ({
   bare = false,
   className = ""
 }) => {
+  const titleId = useId();
+  const subtitleId = useId();
   const baseClass = "ds-chart";
   const classes = [baseClass, bare ? `${baseClass}--bare` : "", className].filter(Boolean).join(" ");
   const textSecondary = getCSSVar("--color-text-secondary", "#303030");
@@ -38,53 +40,62 @@ const LineChart = ({
     (props) => /* @__PURE__ */ jsx(LineChartTooltip, { ...props }),
     []
   );
-  return /* @__PURE__ */ jsxs("div", { className: classes, children: [
-    (title || subtitle || summaryItems) && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header`, children: [
-      /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header-text`, children: [
-        title && /* @__PURE__ */ jsx("h3", { className: `${baseClass}__title`, children: title }),
-        subtitle && /* @__PURE__ */ jsx("p", { className: `${baseClass}__subtitle`, children: subtitle })
-      ] }),
-      summaryItems && summaryItems.length > 0 && /* @__PURE__ */ jsx("div", { className: `${baseClass}__summary`, children: summaryItems.map((item, i) => /* @__PURE__ */ jsxs("div", { className: `${baseClass}__summary-item`, children: [
-        /* @__PURE__ */ jsx("span", { className: `${baseClass}__summary-label`, children: item.label }),
-        /* @__PURE__ */ jsx("span", { className: `${baseClass}__summary-value`, children: typeof item.value === "number" ? item.value.toLocaleString() : item.value })
-      ] }, i)) })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: `${baseClass}__body`, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(LineChart$1, { data, margin: { top: 8, right: 4, bottom: 0, left: -12 }, children: [
-      /* @__PURE__ */ jsx(CartesianGrid, { vertical: false, stroke: gridColor }),
-      /* @__PURE__ */ jsx(
-        XAxis,
-        {
-          dataKey: xKey,
-          tick: { fill: textSecondary, fontSize: 12 },
-          tickLine: false,
-          axisLine: { stroke: gridColor }
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        YAxis,
-        {
-          tick: { fill: textSecondary, fontSize: 12 },
-          tickLine: false,
-          axisLine: false
-        }
-      ),
-      /* @__PURE__ */ jsx(Tooltip, { content: renderTooltip }),
-      series.map((s, i) => /* @__PURE__ */ jsx(
-        Line,
-        {
-          type: "monotone",
-          dataKey: s.dataKey,
-          name: s.label,
-          stroke: s.color || seriesColors[i % seriesColors.length],
-          strokeWidth: 2,
-          strokeDasharray: s.strokeDasharray,
-          dot: false,
-          activeDot: { r: 4, strokeWidth: 0 }
-        },
-        s.dataKey
-      ))
-    ] }) }) })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classes,
+      role: "figure",
+      "aria-labelledby": title ? titleId : void 0,
+      "aria-describedby": subtitle ? subtitleId : void 0,
+      children: [
+        (title || subtitle || summaryItems) && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header`, children: [
+          /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header-text`, children: [
+            title && /* @__PURE__ */ jsx("h3", { id: titleId, className: `${baseClass}__title`, children: title }),
+            subtitle && /* @__PURE__ */ jsx("p", { id: subtitleId, className: `${baseClass}__subtitle`, children: subtitle })
+          ] }),
+          summaryItems && summaryItems.length > 0 && /* @__PURE__ */ jsx("div", { className: `${baseClass}__summary`, children: summaryItems.map((item, i) => /* @__PURE__ */ jsxs("div", { className: `${baseClass}__summary-item`, children: [
+            /* @__PURE__ */ jsx("span", { className: `${baseClass}__summary-label`, children: item.label }),
+            /* @__PURE__ */ jsx("span", { className: `${baseClass}__summary-value`, children: typeof item.value === "number" ? item.value.toLocaleString() : item.value })
+          ] }, i)) })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: `${baseClass}__body`, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(LineChart$1, { data, margin: { top: 8, right: 4, bottom: 0, left: -12 }, children: [
+          /* @__PURE__ */ jsx(CartesianGrid, { vertical: false, stroke: gridColor }),
+          /* @__PURE__ */ jsx(
+            XAxis,
+            {
+              dataKey: xKey,
+              tick: { fill: textSecondary, fontSize: 12 },
+              tickLine: false,
+              axisLine: { stroke: gridColor }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            YAxis,
+            {
+              tick: { fill: textSecondary, fontSize: 12 },
+              tickLine: false,
+              axisLine: false
+            }
+          ),
+          /* @__PURE__ */ jsx(Tooltip, { content: renderTooltip }),
+          series.map((s, i) => /* @__PURE__ */ jsx(
+            Line,
+            {
+              type: "monotone",
+              dataKey: s.dataKey,
+              name: s.label,
+              stroke: s.color || seriesColors[i % seriesColors.length],
+              strokeWidth: 2,
+              strokeDasharray: s.strokeDasharray,
+              dot: false,
+              activeDot: { r: 4, strokeWidth: 0 }
+            },
+            s.dataKey
+          ))
+        ] }) }) })
+      ]
+    }
+  );
 };
 export {
   LineChart