@heroui/agent 0.2.0-beta.1

package/dist/chart-content-VZ66GD22.js

@@ -0,0 +1,1391 @@
+"use client";
+import {
+  ComponentExportActions,
+  TrendChange,
+  createComponentSelection,
+  formatAxisValue,
+  formatNumber,
+  paletteChartColor,
+  resolveChartColor
+} from "./chunk-DW4AQRM5.js";
+import {
+  Card
+} from "./chunk-TOOT6SZ2.js";
+import {
+  mergeClassNames
+} from "./chunk-3FG5NRTX.js";
+
+// ../agent-ui/src/components/data-visualization/charts/chart-content.tsx
+import { useId, useMemo as useMemo2, useState as useState2 } from "react";
+import {
+  Area,
+  Bar,
+  CartesianGrid,
+  Cell,
+  Label,
+  Line,
+  Pie,
+  PolarAngleAxis,
+  PolarGrid,
+  PolarRadiusAxis,
+  Radar,
+  RadialBar,
+  AreaChart as RechartsAreaChart,
+  BarChart as RechartsBarChart,
+  ComposedChart as RechartsComposedChart,
+  LineChart as RechartsLineChart,
+  PieChart as RechartsPieChart,
+  RadarChart as RechartsRadarChart,
+  RadialBarChart as RechartsRadialBarChart,
+  ScatterChart as RechartsScatterChart,
+  ResponsiveContainer,
+  Sankey,
+  Scatter,
+  Tooltip,
+  XAxis,
+  YAxis,
+  ZAxis
+} from "recharts";
+
+// ../agent-ui/src/components/data-visualization/segment/segment.tsx
+import { createContext, useCallback, useContext, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SegmentContext = createContext(null);
+function SegmentRoot({
+  children,
+  className,
+  defaultSelectedKey,
+  isDisabled = false,
+  onSelectionChange,
+  selectedKey,
+  size = "md",
+  variant = "default",
+  ...props
+}) {
+  const [uncontrolledKey, setUncontrolledKey] = useState(defaultSelectedKey);
+  const activeKey = selectedKey ?? uncontrolledKey;
+  const select = useCallback(
+    (key) => {
+      if (isDisabled || key === activeKey) return;
+      if (selectedKey === void 0) setUncontrolledKey(key);
+      onSelectionChange?.(key);
+    },
+    [activeKey, isDisabled, onSelectionChange, selectedKey]
+  );
+  const context = useMemo(
+    () => ({ isDisabled, select, selectedKey: activeKey }),
+    [activeKey, isDisabled, select]
+  );
+  return /* @__PURE__ */ jsx(SegmentContext, { value: context, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: mergeClassNames("aui-segment", className),
+      "data-disabled": isDisabled || void 0,
+      "data-size": size,
+      "data-slot": "agent-ui-segment",
+      "data-variant": variant,
+      role: "group",
+      ...props,
+      children
+    }
+  ) });
+}
+function SegmentItem({
+  children,
+  className,
+  disabled,
+  id,
+  onClick,
+  ...props
+}) {
+  const context = useContext(SegmentContext);
+  if (!context) throw new Error("Segment.Item must be rendered inside Segment.");
+  const isDisabled = context.isDisabled || disabled;
+  const isSelected = context.selectedKey === id;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      "aria-pressed": isSelected,
+      className: mergeClassNames("aui-segment__item", className),
+      "data-selected": isSelected,
+      "data-slot": "agent-ui-segment-item",
+      disabled: isDisabled,
+      type: "button",
+      onClick: (event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) context.select(id);
+      },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "aui-segment__indicator" }),
+        /* @__PURE__ */ jsx("span", { className: "aui-segment__label", children })
+      ]
+    }
+  );
+}
+function SegmentSeparator({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: mergeClassNames("aui-segment__separator", className),
+      "data-slot": "agent-ui-segment-separator",
+      ...props
+    }
+  );
+}
+
+// ../agent-ui/src/components/data-visualization/segment/index.ts
+var Segment = Object.assign(SegmentRoot, {
+  Item: SegmentItem,
+  Root: SegmentRoot,
+  Separator: SegmentSeparator
+});
+
+// ../agent-ui/src/components/data-visualization/charts/bar-radius.ts
+var FULL_RADIUS = [4, 4, 4, 4];
+var LEFT_RADIUS = [4, 0, 0, 4];
+var NO_RADIUS = [0, 0, 0, 0];
+var RIGHT_RADIUS = [0, 4, 4, 0];
+var TOP_RADIUS = [4, 4, 0, 0];
+function getBarRadius({
+  dataKey,
+  horizontal,
+  stacked,
+  visibleStackKeys
+}) {
+  if (!stacked) return horizontal ? RIGHT_RADIUS : TOP_RADIUS;
+  const index = visibleStackKeys.indexOf(dataKey);
+  if (index < 0) return NO_RADIUS;
+  if (horizontal && visibleStackKeys.length === 1) return FULL_RADIUS;
+  if (horizontal && index === 0) return LEFT_RADIUS;
+  if (horizontal && index === visibleStackKeys.length - 1) return RIGHT_RADIUS;
+  if (!horizontal && index === visibleStackKeys.length - 1) return TOP_RADIUS;
+  return NO_RADIUS;
+}
+
+// ../agent-ui/src/components/data-visualization/charts/chart-content.tsx
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function ChartLegend({
+  activeKeys,
+  ariaLabel,
+  items,
+  onToggle
+}) {
+  const interactive = onToggle != null && items.length > 1;
+  const hasValues = items.some((item) => item.value != null);
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      "aria-label": ariaLabel,
+      className: mergeClassNames("aui-legend", hasValues ? "aui-legend--values" : void 0),
+      "data-slot": "agent-ui-chart-legend",
+      role: interactive ? "group" : "list",
+      children: items.map((item) => {
+        const content = /* @__PURE__ */ jsxs2(Fragment, { children: [
+          /* @__PURE__ */ jsx2(
+            "span",
+            {
+              className: "aui-legend__dot",
+              "data-slot": "agent-ui-chart-legend-indicator",
+              style: { backgroundColor: item.color }
+            }
+          ),
+          /* @__PURE__ */ jsx2("span", { className: "aui-legend__label", children: item.label }),
+          item.value != null ? /* @__PURE__ */ jsx2("span", { className: "aui-legend__value", children: item.value }) : null
+        ] });
+        return interactive ? /* @__PURE__ */ jsx2(
+          "button",
+          {
+            "aria-pressed": activeKeys?.has(item.id) ?? true,
+            className: "aui-legend__button",
+            "data-slot": "agent-ui-chart-legend-item",
+            type: "button",
+            onClick: () => onToggle(item.id),
+            children: content
+          },
+          item.id
+        ) : /* @__PURE__ */ jsx2(
+          "span",
+          {
+            className: "aui-legend__item",
+            "data-slot": "agent-ui-chart-legend-item",
+            role: "listitem",
+            children: content
+          },
+          item.id
+        );
+      })
+    }
+  );
+}
+function ComponentTooltip({
+  active,
+  label,
+  payload,
+  series
+}) {
+  if (!active || !payload?.length) return null;
+  return /* @__PURE__ */ jsxs2("div", { className: "aui-chart-tooltip", "data-slot": "agent-ui-chart-tooltip", children: [
+    label !== void 0 && label !== "" ? /* @__PURE__ */ jsx2("div", { className: "aui-chart-tooltip__header", "data-slot": "agent-ui-chart-tooltip-header", children: label }) : null,
+    payload.map((entry, index) => {
+      const format = series?.find((item) => item.dataKey === entry.dataKey)?.format;
+      const indicatorColor = entry.stroke ?? entry.color ?? entry.fill ?? entry.payload?.fill ?? paletteChartColor(index);
+      const value = typeof entry.value === "number" ? formatNumber(entry.value, format) : entry.value;
+      return /* @__PURE__ */ jsxs2(
+        "div",
+        {
+          className: "aui-chart-tooltip__item",
+          "data-slot": "agent-ui-chart-tooltip-item",
+          children: [
+            /* @__PURE__ */ jsx2(
+              "span",
+              {
+                className: "aui-chart-tooltip__indicator",
+                "data-slot": "agent-ui-chart-tooltip-indicator",
+                style: { backgroundColor: indicatorColor }
+              }
+            ),
+            /* @__PURE__ */ jsx2("span", { className: "aui-chart-tooltip__label", "data-slot": "agent-ui-chart-tooltip-label", children: entry.name ?? entry.dataKey }),
+            /* @__PURE__ */ jsx2("span", { className: "aui-chart-tooltip__value", "data-slot": "agent-ui-chart-tooltip-value", children: value })
+          ]
+        },
+        `${entry.dataKey ?? entry.name ?? "series"}-${index}`
+      );
+    })
+  ] });
+}
+function datumAtActiveIndex(rows, activeIndex) {
+  const index = typeof activeIndex === "number" ? Number(activeIndex) : Number(activeIndex ?? NaN);
+  return Number.isInteger(index) ? rows[index] : void 0;
+}
+function CartesianChartComponentContent({
+  className,
+  component,
+  exportFormats,
+  onAction,
+  onSelect,
+  type
+}) {
+  const gradientPrefix = useId().replaceAll(":", "");
+  const [hidden, setHidden] = useState2(() => /* @__PURE__ */ new Set());
+  const ranges = component.ranges ?? [];
+  const fallbackRangeId = ranges.find((range) => range.id === component.defaultRangeId)?.id ?? ranges.at(-1)?.id;
+  const [selectedRangeId, setSelectedRangeId] = useState2(fallbackRangeId);
+  const activeRange = ranges.find((range) => range.id === selectedRangeId) ?? ranges.find((range) => range.id === fallbackRangeId);
+  const seriesKeys = useMemo2(
+    () => new Set(component.series.map((item) => item.dataKey)),
+    [component.series]
+  );
+  const activeHidden = useMemo2(() => {
+    const reconciled = new Set([...hidden].filter((dataKey) => seriesKeys.has(dataKey)));
+    return reconciled.size < component.series.length ? reconciled : /* @__PURE__ */ new Set();
+  }, [component.series.length, hidden, seriesKeys]);
+  const normalizedData = useMemo2(
+    () => component.data.map(
+      (datum) => Object.fromEntries(
+        Object.entries(datum).map(([key, value]) => [
+          key,
+          typeof value === "number" || typeof value === "string" ? value : String(value ?? "")
+        ])
+      )
+    ),
+    [component.data]
+  );
+  const data = activeRange?.maxItems ? normalizedData.slice(-activeRange.maxItems) : normalizedData;
+  const primarySeries = component.series[0];
+  const summary = (() => {
+    if (!component.showSummary || !primarySeries || data.length === 0) return null;
+    const first = Number(data[0]?.[primarySeries.dataKey]);
+    const latest = Number(data.at(-1)?.[primarySeries.dataKey]);
+    if (!Number.isFinite(first) || !Number.isFinite(latest)) return null;
+    return {
+      change: first === 0 ? void 0 : (latest - first) / Math.abs(first) * 100,
+      // The headline value stays exact even when the axis format is compact.
+      format: primarySeries.format && primarySeries.format.style !== "percent" ? { ...primarySeries.format, compact: false } : primarySeries.format,
+      label: primarySeries.label,
+      value: latest
+    };
+  })();
+  const horizontalBars = type === "bar" && component.kind === "bar-chart" && component.layout === "horizontal";
+  const isComposed = component.kind === "composed-chart";
+  const visibleBarKeys = component.series.filter((item) => !activeHidden.has(item.dataKey)).map((item) => item.dataKey);
+  const visibleComposedStackedBarKeys = isComposed ? component.series.filter((item) => item.type === "bar" && item.stacked && !activeHidden.has(item.dataKey)).map((item) => item.dataKey) : [];
+  const leftFormat = isComposed ? component.series.find((item) => item.axis !== "right")?.format : component.series[0]?.format;
+  const rightFormat = isComposed ? component.series.find((item) => item.axis === "right")?.format : void 0;
+  const hasRightAxis = isComposed && component.series.some((item) => item.axis === "right");
+  const formatChartAxis = (value, format = leftFormat) => format ? formatNumber(value, format) : formatAxisValue(value);
+  const activeSeriesKeys = new Set(
+    component.series.filter((item) => !activeHidden.has(item.dataKey)).map((item) => item.dataKey)
+  );
+  const legend = /* @__PURE__ */ jsx2(
+    ChartLegend,
+    {
+      activeKeys: activeSeriesKeys,
+      ariaLabel: "Chart series",
+      items: component.series.map((item, index) => ({
+        color: resolveChartColor(item.color, index),
+        id: item.dataKey,
+        label: item.label
+      })),
+      onToggle: component.series.length > 1 ? (dataKey) => setHidden(() => {
+        const next = new Set(activeHidden);
+        const visible = component.series.length - next.size;
+        if (next.has(dataKey)) next.delete(dataKey);
+        else if (visible > 1) next.add(dataKey);
+        return next;
+      }) : void 0
+    }
+  );
+  const axes = /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx2(CartesianGrid, { vertical: false }),
+    horizontalBars ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+      /* @__PURE__ */ jsx2(XAxis, { tickFormatter: (value) => formatChartAxis(value), type: "number" }),
+      /* @__PURE__ */ jsx2(YAxis, { dataKey: component.xKey, type: "category", width: 88 })
+    ] }) : /* @__PURE__ */ jsxs2(Fragment, { children: [
+      /* @__PURE__ */ jsx2(
+        XAxis,
+        {
+          dataKey: component.xKey,
+          interval: "preserveStartEnd",
+          minTickGap: 28,
+          tickMargin: 10
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        YAxis,
+        {
+          domain: type === "line" ? ["auto", "auto"] : void 0,
+          tickFormatter: (value) => formatChartAxis(value),
+          width: "auto",
+          yAxisId: isComposed ? "left" : void 0
+        }
+      ),
+      hasRightAxis ? /* @__PURE__ */ jsx2(
+        YAxis,
+        {
+          orientation: "right",
+          tickFormatter: (value) => formatChartAxis(value, rightFormat),
+          width: "auto",
+          yAxisId: "right"
+        }
+      ) : null
+    ] }),
+    /* @__PURE__ */ jsx2(Tooltip, { content: /* @__PURE__ */ jsx2(ComponentTooltip, { series: component.series }), isAnimationActive: false })
+  ] });
+  const common = {
+    data,
+    margin: { bottom: 2, left: 8, right: hasRightAxis ? 8 : 12, top: 8 },
+    // Taken from the chart rather than each Bar or Line so one handler covers
+    // every cartesian type, and so clicking anywhere in a category selects it
+    // instead of only the few pixels the mark occupies.
+    ...onSelect && {
+      onClick: (state) => {
+        const datum = datumAtActiveIndex(data, state.activeIndex);
+        if (datum) onSelect(createComponentSelection(component, datum));
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxs2(
+    Card,
+    {
+      className,
+      description: component.description,
+      title: component.title,
+      actions: exportFormats?.length ? /* @__PURE__ */ jsx2(
+        ComponentExportActions,
+        {
+          component,
+          formats: exportFormats,
+          onAction
+        }
+      ) : null,
+      children: [
+        summary || ranges.length > 0 ? /* @__PURE__ */ jsxs2("div", { className: "aui-chart-toolbar", "data-slot": "agent-ui-chart-toolbar", children: [
+          summary ? /* @__PURE__ */ jsxs2("div", { className: "aui-chart-summary", "data-slot": "agent-ui-chart-summary", children: [
+            /* @__PURE__ */ jsx2("span", { className: "aui-chart-summary__label", children: summary.label }),
+            /* @__PURE__ */ jsxs2("div", { className: "aui-chart-summary__value-row", children: [
+              /* @__PURE__ */ jsx2("strong", { className: "aui-chart-summary__value", children: formatNumber(summary.value, summary.format) }),
+              summary.change !== void 0 ? /* @__PURE__ */ jsx2(TrendChange, { value: summary.change }) : null,
+              activeRange ? /* @__PURE__ */ jsx2(
+                "span",
+                {
+                  className: "aui-chart-summary__range",
+                  "data-slot": "agent-ui-chart-summary-range",
+                  children: activeRange.label
+                }
+              ) : null
+            ] })
+          ] }) : null,
+          ranges.length > 0 ? /* @__PURE__ */ jsx2(
+            Segment,
+            {
+              "aria-label": "Chart range",
+              className: "aui-chart-ranges",
+              selectedKey: activeRange?.id,
+              variant: "text",
+              onSelectionChange: setSelectedRangeId,
+              children: ranges.map((range) => /* @__PURE__ */ jsx2(Segment.Item, { id: range.id, children: range.label }, range.id))
+            }
+          ) : null
+        ] }) : null,
+        /* @__PURE__ */ jsx2(
+          "div",
+          {
+            "aria-label": `${component.title} chart`,
+            className: `aui-chart aui-chart--${type}`,
+            "data-slot": "agent-ui-chart",
+            role: "img",
+            children: /* @__PURE__ */ jsx2(ResponsiveContainer, { height: 220, width: "100%", children: type === "composed" && component.kind === "composed-chart" ? /* @__PURE__ */ jsxs2(RechartsComposedChart, { accessibilityLayer: true, ...common, children: [
+              /* @__PURE__ */ jsx2("defs", { children: component.series.map((item, index) => /* @__PURE__ */ jsxs2(
+                "linearGradient",
+                {
+                  id: `${gradientPrefix}-${index}`,
+                  x1: "0",
+                  x2: "0",
+                  y1: "0",
+                  y2: "1",
+                  children: [
+                    /* @__PURE__ */ jsx2(
+                      "stop",
+                      {
+                        offset: "0%",
+                        stopColor: resolveChartColor(item.color, index),
+                        stopOpacity: 0.18
+                      }
+                    ),
+                    /* @__PURE__ */ jsx2(
+                      "stop",
+                      {
+                        offset: "100%",
+                        stopColor: resolveChartColor(item.color, index),
+                        stopOpacity: 0.02
+                      }
+                    )
+                  ]
+                },
+                item.dataKey
+              )) }),
+              axes,
+              component.series.map((item, index) => {
+                const color = resolveChartColor(item.color, index);
+                const yAxisId = item.axis ?? "left";
+                if (item.type === "area") {
+                  return /* @__PURE__ */ jsx2(
+                    Area,
+                    {
+                      dataKey: item.dataKey,
+                      dot: false,
+                      fill: `url(#${gradientPrefix}-${index})`,
+                      hide: activeHidden.has(item.dataKey),
+                      isAnimationActive: false,
+                      name: item.label,
+                      stackId: item.stacked ? "area-stack" : void 0,
+                      stroke: color,
+                      strokeWidth: 2,
+                      type: "monotone",
+                      yAxisId
+                    },
+                    item.dataKey
+                  );
+                }
+                if (item.type === "bar") {
+                  return /* @__PURE__ */ jsx2(
+                    Bar,
+                    {
+                      dataKey: item.dataKey,
+                      fill: color,
+                      hide: activeHidden.has(item.dataKey),
+                      isAnimationActive: false,
+                      name: item.label,
+                      stackId: item.stacked ? "bar-stack" : void 0,
+                      yAxisId,
+                      radius: getBarRadius({
+                        dataKey: item.dataKey,
+                        horizontal: false,
+                        stacked: Boolean(item.stacked),
+                        visibleStackKeys: visibleComposedStackedBarKeys
+                      })
+                    },
+                    item.dataKey
+                  );
+                }
+                return /* @__PURE__ */ jsx2(
+                  Line,
+                  {
+                    dataKey: item.dataKey,
+                    dot: false,
+                    hide: activeHidden.has(item.dataKey),
+                    isAnimationActive: false,
+                    name: item.label,
+                    stroke: color,
+                    strokeWidth: 2,
+                    type: "monotone",
+                    yAxisId
+                  },
+                  item.dataKey
+                );
+              })
+            ] }) : type === "line" ? /* @__PURE__ */ jsxs2(RechartsLineChart, { accessibilityLayer: true, ...common, children: [
+              axes,
+              component.series.map((item, index) => /* @__PURE__ */ jsx2(
+                Line,
+                {
+                  dataKey: item.dataKey,
+                  dot: false,
+                  hide: activeHidden.has(item.dataKey),
+                  isAnimationActive: false,
+                  name: item.label,
+                  stroke: resolveChartColor(item.color, index),
+                  strokeWidth: 2,
+                  type: "monotone"
+                },
+                item.dataKey
+              ))
+            ] }) : type === "area" ? /* @__PURE__ */ jsxs2(RechartsAreaChart, { accessibilityLayer: true, ...common, children: [
+              /* @__PURE__ */ jsx2("defs", { children: component.series.map((item, index) => /* @__PURE__ */ jsxs2(
+                "linearGradient",
+                {
+                  id: `${gradientPrefix}-${index}`,
+                  x1: "0",
+                  x2: "0",
+                  y1: "0",
+                  y2: "1",
+                  children: [
+                    /* @__PURE__ */ jsx2(
+                      "stop",
+                      {
+                        offset: "0%",
+                        stopColor: resolveChartColor(item.color, index),
+                        stopOpacity: 0.2
+                      }
+                    ),
+                    /* @__PURE__ */ jsx2(
+                      "stop",
+                      {
+                        offset: "100%",
+                        stopColor: resolveChartColor(item.color, index),
+                        stopOpacity: 0.01
+                      }
+                    )
+                  ]
+                },
+                item.dataKey
+              )) }),
+              axes,
+              component.series.map((item, index) => /* @__PURE__ */ jsx2(
+                Area,
+                {
+                  dataKey: item.dataKey,
+                  dot: false,
+                  fill: `url(#${gradientPrefix}-${index})`,
+                  hide: activeHidden.has(item.dataKey),
+                  isAnimationActive: false,
+                  name: item.label,
+                  stroke: resolveChartColor(item.color, index),
+                  strokeWidth: 2,
+                  type: "monotone",
+                  stackId: component.kind === "area-chart" && component.stacked ? "stack" : void 0
+                },
+                item.dataKey
+              ))
+            ] }) : /* @__PURE__ */ jsxs2(
+              RechartsBarChart,
+              {
+                accessibilityLayer: true,
+                ...common,
+                layout: horizontalBars ? "vertical" : "horizontal",
+                children: [
+                  axes,
+                  component.series.map((item, index) => /* @__PURE__ */ jsx2(
+                    Bar,
+                    {
+                      dataKey: item.dataKey,
+                      fill: resolveChartColor(item.color, index),
+                      hide: activeHidden.has(item.dataKey),
+                      isAnimationActive: false,
+                      name: item.label,
+                      radius: getBarRadius({
+                        dataKey: item.dataKey,
+                        horizontal: horizontalBars,
+                        stacked: component.kind === "bar-chart" && Boolean(component.stacked),
+                        visibleStackKeys: visibleBarKeys
+                      }),
+                      stackId: component.kind === "bar-chart" && component.stacked ? "stack" : void 0
+                    },
+                    item.dataKey
+                  ))
+                ]
+              }
+            ) })
+          }
+        ),
+        legend
+      ]
+    }
+  );
+}
+function LineChartComponentContent(props) {
+  return /* @__PURE__ */ jsx2(CartesianChartComponentContent, { ...props, type: "line" });
+}
+function AreaChartComponentContent(props) {
+  return /* @__PURE__ */ jsx2(CartesianChartComponentContent, { ...props, type: "area" });
+}
+function BarChartComponentContent(props) {
+  return /* @__PURE__ */ jsx2(CartesianChartComponentContent, { ...props, type: "bar" });
+}
+function ComposedChartComponentContent(props) {
+  return /* @__PURE__ */ jsx2(CartesianChartComponentContent, { ...props, type: "composed" });
+}
+function ProportionalChartComponentContent({
+  className,
+  component,
+  exportFormats,
+  onAction,
+  onSelect,
+  variant
+}) {
+  const [hidden, setHidden] = useState2(() => /* @__PURE__ */ new Set());
+  const labels = useMemo2(
+    () => new Set(component.data.map((datum) => String(datum[component.labelKey] ?? ""))),
+    [component.data, component.labelKey]
+  );
+  const activeHidden = useMemo2(() => {
+    const reconciled = new Set([...hidden].filter((label) => labels.has(label)));
+    return reconciled.size < component.data.length ? reconciled : /* @__PURE__ */ new Set();
+  }, [component.data.length, hidden, labels]);
+  const data = component.data.flatMap((datum, index) => {
+    const name = String(datum[component.labelKey] ?? "");
+    return activeHidden.has(name) ? [] : [
+      {
+        color: resolveChartColor(component.colors?.[name], index),
+        name,
+        original: datum,
+        value: Number(datum[component.valueKey] ?? 0)
+      }
+    ];
+  });
+  const total = data.reduce((sum, datum) => sum + datum.value, 0);
+  const activeCategoryKeys = new Set(
+    component.data.map((datum) => String(datum[component.labelKey] ?? "")).filter((label) => !activeHidden.has(label))
+  );
+  const legend = /* @__PURE__ */ jsx2(
+    ChartLegend,
+    {
+      activeKeys: activeCategoryKeys,
+      ariaLabel: "Chart categories",
+      items: component.data.map((datum, index) => {
+        const label = String(datum[component.labelKey] ?? "");
+        return {
+          color: resolveChartColor(component.colors?.[label], index),
+          id: label,
+          label,
+          value: formatNumber(Number(datum[component.valueKey] ?? 0), component.format)
+        };
+      }),
+      onToggle: (label) => setHidden(() => {
+        const next = new Set(activeHidden);
+        if (next.has(label)) next.delete(label);
+        else if (next.size < component.data.length - 1) next.add(label);
+        return next;
+      })
+    }
+  );
+  return /* @__PURE__ */ jsxs2(
+    Card,
+    {
+      className,
+      description: component.description,
+      title: component.title,
+      actions: exportFormats?.length ? /* @__PURE__ */ jsx2(
+        ComponentExportActions,
+        {
+          component,
+          formats: exportFormats,
+          onAction
+        }
+      ) : null,
+      children: [
+        /* @__PURE__ */ jsx2(
+          "div",
+          {
+            "aria-label": `${component.title} ${variant} chart`,
+            className: "aui-chart aui-chart--pie",
+            "data-slot": "agent-ui-chart",
+            role: "img",
+            children: /* @__PURE__ */ jsx2(ResponsiveContainer, { height: 220, width: "100%", children: /* @__PURE__ */ jsxs2(RechartsPieChart, { accessibilityLayer: true, children: [
+              /* @__PURE__ */ jsxs2(
+                Pie,
+                {
+                  cx: "50%",
+                  cy: "50%",
+                  data,
+                  dataKey: "value",
+                  innerRadius: variant === "donut" ? 58 : 0,
+                  isAnimationActive: false,
+                  nameKey: "name",
+                  outerRadius: 88,
+                  paddingAngle: 0,
+                  strokeWidth: 0,
+                  onClick: (_, index) => {
+                    const datum = data[index]?.original;
+                    if (datum) onSelect?.(createComponentSelection(component, datum));
+                  },
+                  children: [
+                    data.map((entry) => /* @__PURE__ */ jsx2(Cell, { fill: entry.color }, entry.name)),
+                    variant === "donut" ? /* @__PURE__ */ jsx2(
+                      Label,
+                      {
+                        className: "aui-donut-total",
+                        position: "center",
+                        value: formatNumber(total, component.format)
+                      }
+                    ) : null
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx2(
+                Tooltip,
+                {
+                  content: /* @__PURE__ */ jsx2(ComponentTooltip, { series: [{ dataKey: "value", format: component.format }] }),
+                  isAnimationActive: false
+                }
+              )
+            ] }) })
+          }
+        ),
+        legend
+      ]
+    }
+  );
+}
+function PieChartComponentContent(props) {
+  return /* @__PURE__ */ jsx2(ProportionalChartComponentContent, { ...props, variant: "pie" });
+}
+function DonutChartComponentContent(props) {
+  return /* @__PURE__ */ jsx2(ProportionalChartComponentContent, { ...props, variant: "donut" });
+}
+function RadarChartComponentContent({
+  className,
+  component,
+  exportFormats,
+  onAction
+}) {
+  const [hidden, setHidden] = useState2(() => /* @__PURE__ */ new Set());
+  const seriesKeys = useMemo2(
+    () => new Set(component.series.map((item) => item.dataKey)),
+    [component.series]
+  );
+  const activeHidden = useMemo2(() => {
+    const reconciled = new Set([...hidden].filter((dataKey) => seriesKeys.has(dataKey)));
+    return reconciled.size < component.series.length ? reconciled : /* @__PURE__ */ new Set();
+  }, [component.series.length, hidden, seriesKeys]);
+  const activeSeriesKeys = new Set(
+    component.series.filter((item) => !activeHidden.has(item.dataKey)).map((item) => item.dataKey)
+  );
+  const legend = /* @__PURE__ */ jsx2(
+    ChartLegend,
+    {
+      activeKeys: activeSeriesKeys,
+      ariaLabel: "Chart series",
+      items: component.series.map((item, index) => ({
+        color: resolveChartColor(item.color, index),
+        id: item.dataKey,
+        label: item.label
+      })),
+      onToggle: component.series.length > 1 ? (dataKey) => setHidden(() => {
+        const next = new Set(activeHidden);
+        const visible = component.series.length - next.size;
+        if (next.has(dataKey)) next.delete(dataKey);
+        else if (visible > 1) next.add(dataKey);
+        return next;
+      }) : void 0
+    }
+  );
+  return /* @__PURE__ */ jsxs2(
+    Card,
+    {
+      className,
+      description: component.description,
+      title: component.title,
+      actions: exportFormats?.length ? /* @__PURE__ */ jsx2(
+        ComponentExportActions,
+        {
+          component,
+          formats: exportFormats,
+          onAction
+        }
+      ) : null,
+      children: [
+        /* @__PURE__ */ jsx2(
+          "div",
+          {
+            "aria-label": `${component.title} radar chart`,
+            className: "aui-chart aui-chart--radar",
+            "data-slot": "agent-ui-chart",
+            role: "img",
+            children: /* @__PURE__ */ jsx2(ResponsiveContainer, { height: 240, width: "100%", children: /* @__PURE__ */ jsxs2(
+              RechartsRadarChart,
+              {
+                data: component.data,
+                margin: { bottom: 8, left: 20, right: 20, top: 8 },
+                children: [
+                  /* @__PURE__ */ jsx2(PolarGrid, {}),
+                  /* @__PURE__ */ jsx2(PolarAngleAxis, { dataKey: component.angleKey }),
+                  /* @__PURE__ */ jsx2(PolarRadiusAxis, { axisLine: false, tick: false }),
+                  component.series.map(
+                    (item, index) => activeHidden.has(item.dataKey) ? null : /* @__PURE__ */ jsx2(
+                      Radar,
+                      {
+                        dataKey: item.dataKey,
+                        fill: resolveChartColor(item.color, index),
+                        fillOpacity: 0.12,
+                        isAnimationActive: false,
+                        name: item.label,
+                        stroke: resolveChartColor(item.color, index),
+                        strokeWidth: 2
+                      },
+                      item.dataKey
+                    )
+                  ),
+                  /* @__PURE__ */ jsx2(
+                    Tooltip,
+                    {
+                      content: /* @__PURE__ */ jsx2(ComponentTooltip, { series: component.series }),
+                      isAnimationActive: false
+                    }
+                  )
+                ]
+              }
+            ) })
+          }
+        ),
+        legend
+      ]
+    }
+  );
+}
+function RadialChartComponentContent({
+  className,
+  component,
+  exportFormats,
+  onAction,
+  onSelect
+}) {
+  const data = component.data.map((datum, index) => ({
+    ...datum,
+    fill: resolveChartColor(component.colors?.[String(datum[component.labelKey] ?? "")], index)
+  }));
+  const legend = /* @__PURE__ */ jsx2(
+    ChartLegend,
+    {
+      ariaLabel: "Chart categories",
+      items: component.data.map((datum, index) => {
+        const label = String(datum[component.labelKey] ?? "");
+        return {
+          color: resolveChartColor(component.colors?.[label], index),
+          id: `${label}-${index}`,
+          label,
+          value: formatNumber(Number(datum[component.valueKey] ?? 0), component.format)
+        };
+      })
+    }
+  );
+  return /* @__PURE__ */ jsxs2(
+    Card,
+    {
+      className,
+      description: component.description,
+      title: component.title,
+      actions: exportFormats?.length ? /* @__PURE__ */ jsx2(
+        ComponentExportActions,
+        {
+          component,
+          formats: exportFormats,
+          onAction
+        }
+      ) : null,
+      children: [
+        /* @__PURE__ */ jsx2(
+          "div",
+          {
+            "aria-label": `${component.title} radial chart`,
+            className: "aui-chart aui-chart--radial",
+            "data-slot": "agent-ui-chart",
+            role: "img",
+            children: /* @__PURE__ */ jsx2(ResponsiveContainer, { height: 230, width: "100%", children: /* @__PURE__ */ jsxs2(
+              RechartsRadialBarChart,
+              {
+                cx: "50%",
+                cy: "50%",
+                data,
+                endAngle: component.endAngle ?? -270,
+                innerRadius: "24%",
+                outerRadius: "92%",
+                startAngle: component.startAngle ?? 90,
+                children: [
+                  /* @__PURE__ */ jsx2(PolarAngleAxis, { domain: [0, component.maxValue ?? "auto"], tick: false, type: "number" }),
+                  /* @__PURE__ */ jsx2(
+                    RadialBar,
+                    {
+                      background: true,
+                      dataKey: component.valueKey,
+                      isAnimationActive: false,
+                      name: component.labelKey,
+                      onClick: (datum) => onSelect?.(createComponentSelection(component, datum))
+                    }
+                  ),
+                  /* @__PURE__ */ jsx2(
+                    Tooltip,
+                    {
+                      isAnimationActive: false,
+                      content: /* @__PURE__ */ jsx2(
+                        ComponentTooltip,
+                        {
+                          series: [{ dataKey: component.valueKey, format: component.format }]
+                        }
+                      )
+                    }
+                  )
+                ]
+              }
+            ) })
+          }
+        ),
+        legend
+      ]
+    }
+  );
+}
+function ScatterChartComponentContent({
+  className,
+  component,
+  exportFormats,
+  onAction,
+  onSelect
+}) {
+  const groups = useMemo2(() => {
+    const grouped = /* @__PURE__ */ new Map();
+    for (const datum of component.data) {
+      const label = component.groupKey ? String(datum[component.groupKey] ?? "Other") : component.title;
+      const entries = grouped.get(label) ?? [];
+      entries.push(datum);
+      grouped.set(label, entries);
+    }
+    return [...grouped.entries()];
+  }, [component.data, component.groupKey, component.title]);
+  const series = [
+    { dataKey: component.xKey, format: component.format },
+    { dataKey: component.yKey, format: component.format },
+    ...component.sizeKey ? [{ dataKey: component.sizeKey, format: component.format }] : []
+  ];
+  const legend = /* @__PURE__ */ jsx2(
+    ChartLegend,
+    {
+      ariaLabel: "Chart groups",
+      items: groups.map(([label], index) => ({
+        color: resolveChartColor(component.colors?.[label], index),
+        id: label,
+        label
+      }))
+    }
+  );
+  return /* @__PURE__ */ jsxs2(
+    Card,
+    {
+      className,
+      description: component.description,
+      title: component.title,
+      actions: exportFormats?.length ? /* @__PURE__ */ jsx2(
+        ComponentExportActions,
+        {
+          component,
+          formats: exportFormats,
+          onAction
+        }
+      ) : null,
+      children: [
+        /* @__PURE__ */ jsx2(
+          "div",
+          {
+            "aria-label": `${component.title} scatter chart`,
+            className: "aui-chart aui-chart--scatter",
+            "data-slot": "agent-ui-chart",
+            role: "img",
+            children: /* @__PURE__ */ jsx2(ResponsiveContainer, { height: 240, width: "100%", children: /* @__PURE__ */ jsxs2(RechartsScatterChart, { accessibilityLayer: true, margin: { bottom: 8, left: 0, right: 8, top: 8 }, children: [
+              /* @__PURE__ */ jsx2(CartesianGrid, {}),
+              /* @__PURE__ */ jsx2(
+                XAxis,
+                {
+                  dataKey: component.xKey,
+                  name: component.xKey,
+                  tickFormatter: (value) => formatAxisValue(value),
+                  type: "number"
+                }
+              ),
+              /* @__PURE__ */ jsx2(
+                YAxis,
+                {
+                  dataKey: component.yKey,
+                  name: component.yKey,
+                  tickFormatter: (value) => formatAxisValue(value),
+                  type: "number",
+                  width: 42
+                }
+              ),
+              component.sizeKey ? /* @__PURE__ */ jsx2(ZAxis, { dataKey: component.sizeKey, range: [48, 320], type: "number" }) : null,
+              /* @__PURE__ */ jsx2(
+                Tooltip,
+                {
+                  content: /* @__PURE__ */ jsx2(ComponentTooltip, { series }),
+                  cursor: { strokeDasharray: "4 4" },
+                  isAnimationActive: false
+                }
+              ),
+              groups.map(([label, data], index) => /* @__PURE__ */ jsx2(
+                Scatter,
+                {
+                  data,
+                  fill: resolveChartColor(component.colors?.[label], index),
+                  isAnimationActive: false,
+                  name: label,
+                  onClick: (point) => {
+                    const datum = "payload" in point ? point.payload : point;
+                    onSelect?.(createComponentSelection(component, datum));
+                  }
+                },
+                label
+              ))
+            ] }) })
+          }
+        ),
+        legend
+      ]
+    }
+  );
+}
+function HeatmapComponentContent({
+  className,
+  component,
+  exportFormats,
+  onAction,
+  onSelect
+}) {
+  const xValues = [...new Set(component.data.map((datum) => String(datum[component.xKey] ?? "")))];
+  const yValues = [...new Set(component.data.map((datum) => String(datum[component.yKey] ?? "")))];
+  const values = component.data.map((datum) => Number(datum[component.valueKey] ?? 0));
+  const minimum = Math.min(...values);
+  const maximum = Math.max(...values);
+  const range = maximum - minimum || 1;
+  const width = 420;
+  const left = 84;
+  const top = 28;
+  const right = 8;
+  const bottom = 44;
+  const cellWidth = (width - left - right) / Math.max(1, xValues.length);
+  const cellHeight = Math.max(26, Math.min(44, 230 / Math.max(1, yValues.length)));
+  const height = top + yValues.length * cellHeight + bottom;
+  const dataByCoordinate = new Map(
+    component.data.map((datum) => [
+      `${String(datum[component.xKey] ?? "")}\0${String(datum[component.yKey] ?? "")}`,
+      datum
+    ])
+  );
+  const heatmapColor = resolveChartColor(component.color, 0);
+  const legend = /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      "aria-label": "Heatmap intensity",
+      className: "aui-legend aui-legend--scale",
+      "data-slot": "agent-ui-chart-legend",
+      role: "img",
+      children: [
+        /* @__PURE__ */ jsx2("span", { className: "aui-legend__value", children: formatNumber(minimum, component.format) }),
+        /* @__PURE__ */ jsx2(
+          "span",
+          {
+            className: "aui-legend__scale",
+            style: {
+              background: `linear-gradient(90deg, color-mix(in srgb, ${heatmapColor} 8%, transparent), ${heatmapColor})`
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx2("span", { className: "aui-legend__value", children: formatNumber(maximum, component.format) })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs2(
+    Card,
+    {
+      className,
+      description: component.description,
+      title: component.title,
+      actions: exportFormats?.length ? /* @__PURE__ */ jsx2(
+        ComponentExportActions,
+        {
+          component,
+          formats: exportFormats,
+          onAction
+        }
+      ) : null,
+      children: [
+        /* @__PURE__ */ jsx2(
+          "div",
+          {
+            "aria-label": `${component.title} heatmap`,
+            className: "aui-chart aui-chart--heatmap",
+            "data-slot": "agent-ui-chart",
+            role: "img",
+            children: /* @__PURE__ */ jsxs2(
+              "svg",
+              {
+                "aria-hidden": "true",
+                preserveAspectRatio: "xMidYMid meet",
+                viewBox: `0 0 ${width} ${height}`,
+                children: [
+                  xValues.map((label, index) => /* @__PURE__ */ jsx2(
+                    "text",
+                    {
+                      className: "aui-heatmap__axis",
+                      textAnchor: "middle",
+                      x: left + index * cellWidth + cellWidth / 2,
+                      y: height - 14,
+                      children: label
+                    },
+                    label
+                  )),
+                  yValues.map((label, row) => /* @__PURE__ */ jsxs2("g", { children: [
+                    /* @__PURE__ */ jsx2(
+                      "text",
+                      {
+                        className: "aui-heatmap__axis",
+                        dominantBaseline: "middle",
+                        textAnchor: "end",
+                        x: left - 8,
+                        y: top + row * cellHeight + cellHeight / 2,
+                        children: label
+                      }
+                    ),
+                    xValues.map((xLabel, column) => {
+                      const datum = dataByCoordinate.get(`${xLabel}\0${label}`);
+                      const value = Number(datum?.[component.valueKey] ?? 0);
+                      const opacity = datum ? 0.14 + (value - minimum) / range * 0.76 : 0.04;
+                      return /* @__PURE__ */ jsxs2(
+                        "g",
+                        {
+                          className: "aui-heatmap__cell",
+                          "data-slot": "agent-ui-heatmap-cell",
+                          role: datum && onSelect ? "button" : void 0,
+                          tabIndex: datum && onSelect ? 0 : void 0,
+                          onClick: () => {
+                            if (datum) onSelect?.(createComponentSelection(component, datum));
+                          },
+                          onKeyDown: (event) => {
+                            if (!datum || !onSelect || event.key !== "Enter" && event.key !== " ")
+                              return;
+                            event.preventDefault();
+                            onSelect(createComponentSelection(component, datum));
+                          },
+                          children: [
+                            /* @__PURE__ */ jsx2(
+                              "rect",
+                              {
+                                fill: heatmapColor,
+                                fillOpacity: opacity,
+                                height: Math.max(1, cellHeight - 3),
+                                rx: 6,
+                                width: Math.max(1, cellWidth - 3),
+                                x: left + column * cellWidth + 1.5,
+                                y: top + row * cellHeight + 1.5
+                              }
+                            ),
+                            datum ? /* @__PURE__ */ jsx2("title", { children: `${label}, ${xLabel}: ${formatNumber(value, component.format)}` }) : null
+                          ]
+                        },
+                        xLabel
+                      );
+                    })
+                  ] }, label))
+                ]
+              }
+            )
+          }
+        ),
+        legend
+      ]
+    }
+  );
+}
+function SankeyNode({ height, index, payload, width, x, y }) {
+  return /* @__PURE__ */ jsxs2("g", { children: [
+    /* @__PURE__ */ jsx2(
+      "rect",
+      {
+        className: "aui-sankey__node",
+        fill: paletteChartColor(index),
+        height,
+        rx: 4,
+        width,
+        x,
+        y
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      "text",
+      {
+        className: "aui-sankey__label",
+        dominantBaseline: "middle",
+        x: x + width + 7,
+        y: y + height / 2,
+        children: payload.name
+      }
+    )
+  ] });
+}
+function SankeyLink({
+  chartId,
+  index,
+  linkWidth,
+  payload,
+  sourceControlX,
+  sourceX,
+  sourceY,
+  targetControlX,
+  targetX,
+  targetY
+}) {
+  const half = Math.max(1, linkWidth) / 2;
+  const path = `M${sourceX},${sourceY - half} C${sourceControlX},${sourceY - half} ${targetControlX},${targetY - half} ${targetX},${targetY - half} L${targetX},${targetY + half} C${targetControlX},${targetY + half} ${sourceControlX},${sourceY + half} ${sourceX},${sourceY + half} Z`;
+  return /* @__PURE__ */ jsxs2("g", { children: [
+    /* @__PURE__ */ jsxs2("defs", { children: [
+      /* @__PURE__ */ jsxs2("linearGradient", { id: `${chartId}-link-${index}`, x1: "0", x2: "1", children: [
+        /* @__PURE__ */ jsx2("stop", { offset: "0%", stopColor: "var(--chart-3, var(--accent))", stopOpacity: 0.2 }),
+        /* @__PURE__ */ jsx2(
+          "stop",
+          {
+            offset: "50%",
+            stopColor: "var(--chart-4, oklch(from var(--accent) calc(l + 0.12) c h))",
+            stopOpacity: 0.55
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "stop",
+          {
+            offset: "100%",
+            stopColor: "var(--chart-1, oklch(from var(--accent) calc(l - 0.24) c h))",
+            stopOpacity: 0.25
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx2("filter", { height: "180%", id: `${chartId}-glow-${index}`, width: "180%", x: "-40%", y: "-40%", children: /* @__PURE__ */ jsx2("feGaussianBlur", { stdDeviation: "2.5" }) })
+    ] }),
+    /* @__PURE__ */ jsx2(
+      "path",
+      {
+        d: path,
+        fill: `url(#${chartId}-link-${index})`,
+        filter: `url(#${chartId}-glow-${index})`,
+        opacity: 0.35
+      }
+    ),
+    /* @__PURE__ */ jsx2("path", { d: path, fill: `url(#${chartId}-link-${index})`, opacity: 0.8 }),
+    /* @__PURE__ */ jsx2("title", { children: `${payload.source.name} \u2192 ${payload.target.name}: ${payload.value}` })
+  ] });
+}
+function SankeyChartComponentContent({
+  className,
+  component,
+  exportFormats,
+  onAction,
+  onSelect
+}) {
+  const chartId = useId().replaceAll(":", "");
+  const nodeIndex = new Map(component.nodes.map((node, index) => [node.id, index]));
+  const data = {
+    links: component.links.flatMap((link) => {
+      const source = nodeIndex.get(link.source);
+      const target = nodeIndex.get(link.target);
+      return source === void 0 || target === void 0 ? [] : [{ source, target, value: link.value }];
+    }),
+    nodes: component.nodes.map((node) => ({ name: node.label }))
+  };
+  return /* @__PURE__ */ jsxs2(
+    Card,
+    {
+      className,
+      description: component.description,
+      title: component.title,
+      actions: exportFormats?.length ? /* @__PURE__ */ jsx2(
+        ComponentExportActions,
+        {
+          component,
+          formats: exportFormats,
+          onAction
+        }
+      ) : null,
+      children: [
+        /* @__PURE__ */ jsx2(
+          "div",
+          {
+            "aria-label": `${component.title} sankey chart`,
+            className: "aui-chart aui-chart--sankey aui-sankey",
+            "data-slot": "agent-ui-chart",
+            role: "img",
+            children: /* @__PURE__ */ jsx2(ResponsiveContainer, { height: 260, width: "100%", children: /* @__PURE__ */ jsx2(
+              Sankey,
+              {
+                data,
+                link: (props) => /* @__PURE__ */ jsx2(SankeyLink, { ...props, chartId }),
+                linkCurvature: 0.55,
+                margin: { bottom: 12, left: 8, right: 92, top: 12 },
+                node: (props) => /* @__PURE__ */ jsx2(SankeyNode, { ...props }),
+                nodePadding: 18,
+                nodeWidth: 12,
+                onClick: (item, type) => onSelect?.(
+                  createComponentSelection(component, {
+                    element: type,
+                    index: item.index,
+                    value: "payload" in item ? item.payload.value : void 0
+                  })
+                ),
+                children: /* @__PURE__ */ jsx2(
+                  Tooltip,
+                  {
+                    content: /* @__PURE__ */ jsx2(ComponentTooltip, { series: [{ dataKey: "value", format: component.format }] }),
+                    isAnimationActive: false
+                  }
+                )
+              }
+            ) })
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "div",
+          {
+            "aria-label": "Chart encoding",
+            className: "aui-legend",
+            "data-slot": "agent-ui-chart-legend",
+            role: "list",
+            children: /* @__PURE__ */ jsxs2("span", { className: "aui-legend__item", "data-slot": "agent-ui-chart-legend-item", role: "listitem", children: [
+              /* @__PURE__ */ jsx2("span", { className: "aui-legend__flow" }),
+              /* @__PURE__ */ jsx2("span", { className: "aui-legend__label", children: "Flow volume" })
+            ] })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  AreaChartComponentContent,
+  BarChartComponentContent,
+  ComposedChartComponentContent,
+  DonutChartComponentContent,
+  HeatmapComponentContent,
+  LineChartComponentContent,
+  PieChartComponentContent,
+  RadarChartComponentContent,
+  RadialChartComponentContent,
+  SankeyChartComponentContent,
+  ScatterChartComponentContent
+};