@salesmind-ai/design-system 0.3.3 → 0.3.4

package/dist/chunk-GUZIMHWS.js

@@ -1,1608 +0,0 @@
-import { useReportMode, useChartData, DataCoverageBadge, DataStateIndicator, CHART_REGISTRY, getDefaultChartForIntent, getAllowedSwitchTargets, validateChartData, ConfidenceIndicator } from './chunk-B6AVAX4F.js';
-import { Tooltip as Tooltip$1 } from './chunk-C2BCDNAV.js';
-import clsx7 from 'clsx';
-import { LineChart as LineChart$1, CartesianGrid, XAxis, YAxis, Tooltip, Legend, Line, BarChart as BarChart$1, Bar, Cell, PieChart as PieChart$1, Pie, RadarChart, PolarGrid, PolarAngleAxis, PolarRadiusAxis, Radar, ResponsiveContainer, AreaChart, Area } from 'recharts';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import React, { useMemo, useState } from 'react';
-
-function ChartContainer({
-  title,
-  subtitle,
-  height = 300,
-  data = [],
-  requiredFields = [],
-  minSampleSize = 30,
-  showCoverage = true,
-  dateRange,
-  loading,
-  emptyMessage = "No data available",
-  children,
-  className,
-  ...props
-}) {
-  const { features } = useReportMode();
-  const { state, isRenderable, message } = useChartData({
-    data,
-    requiredFields,
-    minSampleSize
-  });
-  const renderContent = () => {
-    if (loading) {
-      return /* @__PURE__ */ jsxs("div", { className: "ds-chart-container__loading", children: [
-        /* @__PURE__ */ jsx("div", { className: "ds-chart-container__spinner" }),
-        /* @__PURE__ */ jsx("span", { children: "Loading chart..." })
-      ] });
-    }
-    if (!isRenderable && state !== "VALID") {
-      return /* @__PURE__ */ jsxs("div", { className: "ds-chart-container__empty", children: [
-        /* @__PURE__ */ jsx(
-          DataStateIndicator,
-          {
-            state,
-            variant: "full",
-            details: { message, sampleSize: data.length, requiredSize: minSampleSize }
-          }
-        ),
-        state === "INSUFFICIENT_SAMPLE" && data.length === 0 && /* @__PURE__ */ jsx("p", { className: "ds-chart-container__empty-message", children: emptyMessage })
-      ] });
-    }
-    return /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children });
-  };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: clsx7(
-        "ds-chart-container",
-        loading && "ds-chart-container--loading",
-        !isRenderable && "ds-chart-container--invalid",
-        className
-      ),
-      ...props,
-      children: [
-        (title || subtitle || showCoverage && features.showMethodology) && /* @__PURE__ */ jsxs("header", { className: "ds-chart-container__header", children: [
-          /* @__PURE__ */ jsxs("div", { className: "ds-chart-container__header-content", children: [
-            title && /* @__PURE__ */ jsx("h4", { className: "ds-chart-container__title", children: title }),
-            subtitle && /* @__PURE__ */ jsx("p", { className: "ds-chart-container__subtitle", children: subtitle })
-          ] }),
-          showCoverage && features.showMethodology && data.length > 0 && /* @__PURE__ */ jsx(
-            DataCoverageBadge,
-            {
-              sampleSize: data.length,
-              requiredSize: minSampleSize,
-              dateRange,
-              size: "sm"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "ds-chart-container__chart",
-            style: { height: typeof height === "number" ? height : void 0 },
-            children: renderContent()
-          }
-        ),
-        isRenderable && state !== "VALID" && /* @__PURE__ */ jsx("footer", { className: "ds-chart-container__footer", children: /* @__PURE__ */ jsx(DataStateIndicator, { state, variant: "compact" }) })
-      ]
-    }
-  );
-}
-ChartContainer.displayName = "ChartContainer";
-var DEFAULT_COLORS = [
-  "var(--brand-pink)",
-  "var(--brand-yellow)",
-  "var(--status-info)",
-  "var(--status-success)",
-  "var(--status-warning)"
-];
-function LineChart({
-  data,
-  xKey,
-  lines,
-  title,
-  subtitle,
-  height = 300,
-  grid = true,
-  legend: showLegend = true,
-  curve = "monotone",
-  minSampleSize = 7,
-  dateRange,
-  className
-}) {
-  const requiredFields = [xKey, ...lines.map((l) => l.key)];
-  const chartData = React.useMemo(() => data.map((item) => ({ ...item })), [data]);
-  return /* @__PURE__ */ jsx(
-    ChartContainer,
-    {
-      title,
-      subtitle,
-      height,
-      data,
-      requiredFields,
-      minSampleSize,
-      dateRange,
-      className,
-      children: /* @__PURE__ */ jsxs(LineChart$1, { data: chartData, margin: { top: 5, right: 20, left: 0, bottom: 5 }, children: [
-        grid && /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", vertical: false }),
-        /* @__PURE__ */ jsx(
-          XAxis,
-          {
-            dataKey: xKey,
-            tick: { fontSize: 12 },
-            tickLine: false,
-            axisLine: { strokeWidth: 1 }
-          }
-        ),
-        /* @__PURE__ */ jsx(YAxis, { tick: { fontSize: 12 }, tickLine: false, axisLine: false, width: 40 }),
-        /* @__PURE__ */ jsx(Tooltip, {}),
-        showLegend && /* @__PURE__ */ jsx(Legend, {}),
-        lines.map((line, index) => /* @__PURE__ */ jsx(
-          Line,
-          {
-            type: curve,
-            dataKey: line.key,
-            name: line.name || line.key,
-            stroke: line.color || DEFAULT_COLORS[index % DEFAULT_COLORS.length],
-            strokeWidth: 2,
-            strokeDasharray: line.dashed ? "5 5" : void 0,
-            dot: line.dot !== false,
-            activeDot: { r: 6 }
-          },
-          line.key
-        ))
-      ] })
-    }
-  );
-}
-LineChart.displayName = "LineChart";
-var DEFAULT_COLORS2 = [
-  "var(--brand-pink)",
-  "var(--brand-yellow)",
-  "var(--status-info)",
-  "var(--status-success)",
-  "var(--status-warning)"
-];
-function BarChart({
-  data,
-  xKey,
-  bars,
-  title,
-  subtitle,
-  height = 300,
-  layout = "horizontal",
-  grid = true,
-  legend: showLegend = true,
-  radius = 4,
-  showLabels = false,
-  minSampleSize = 5,
-  categoryColors,
-  className
-}) {
-  const requiredFields = [xKey, ...bars.map((b) => b.key)];
-  const isVertical = layout === "vertical";
-  const chartData = useMemo(() => data.map((item) => ({ ...item })), [data]);
-  return /* @__PURE__ */ jsx(
-    ChartContainer,
-    {
-      title,
-      subtitle,
-      height,
-      data: chartData,
-      requiredFields,
-      minSampleSize,
-      className,
-      children: /* @__PURE__ */ jsxs(
-        BarChart$1,
-        {
-          data: chartData,
-          layout: isVertical ? "vertical" : "horizontal",
-          margin: { top: 5, right: 20, left: isVertical ? 80 : 0, bottom: 5 },
-          children: [
-            grid && /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", horizontal: !isVertical, vertical: isVertical }),
-            isVertical ? /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(XAxis, { type: "number", tick: { fontSize: 12 }, tickLine: false, axisLine: false }),
-              /* @__PURE__ */ jsx(
-                YAxis,
-                {
-                  type: "category",
-                  dataKey: xKey,
-                  tick: { fontSize: 12 },
-                  tickLine: false,
-                  axisLine: false,
-                  width: 80
-                }
-              )
-            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(
-                XAxis,
-                {
-                  dataKey: xKey,
-                  tick: { fontSize: 12 },
-                  tickLine: false,
-                  axisLine: { strokeWidth: 1 }
-                }
-              ),
-              /* @__PURE__ */ jsx(YAxis, { tick: { fontSize: 12 }, tickLine: false, axisLine: false, width: 40 })
-            ] }),
-            /* @__PURE__ */ jsx(Tooltip, {}),
-            showLegend && bars.length > 1 && /* @__PURE__ */ jsx(Legend, {}),
-            bars.map((bar, barIndex) => /* @__PURE__ */ jsx(
-              Bar,
-              {
-                dataKey: bar.key,
-                name: bar.name || bar.key,
-                fill: bar.color || DEFAULT_COLORS2[barIndex % DEFAULT_COLORS2.length],
-                stackId: bar.stackId,
-                radius: [radius, radius, 0, 0],
-                label: showLabels ? { position: "top", fontSize: 10 } : false,
-                children: categoryColors && chartData.map((_, index) => /* @__PURE__ */ jsx(Cell, { fill: categoryColors[index % categoryColors.length] }, `cell-${index}`))
-              },
-              bar.key
-            ))
-          ]
-        }
-      )
-    }
-  );
-}
-BarChart.displayName = "BarChart";
-var DEFAULT_COLORS3 = [
-  "var(--brand-pink)",
-  "var(--brand-yellow)",
-  "var(--status-info)",
-  "var(--status-success)",
-  "var(--status-warning)",
-  "var(--status-error)",
-  "#8884d8",
-  "#82ca9d"
-];
-function PieChart({
-  data,
-  title,
-  subtitle,
-  height = 300,
-  innerRadius = 0,
-  outerRadius = 80,
-  showLabels = true,
-  labelType = "percent",
-  legend: showLegend = true,
-  minSampleSize = 30,
-  className
-}) {
-  const safeData = useMemo(() => data.map((item) => ({ ...item })), [data]);
-  const renderLabel = (props) => {
-    const { name, value, percent } = props;
-    switch (labelType) {
-      case "percent":
-        return `${((percent ?? 0) * 100).toFixed(0)}%`;
-      case "value":
-        return (value ?? 0).toLocaleString();
-      case "name":
-        return name ?? "";
-      default:
-        return "";
-    }
-  };
-  return /* @__PURE__ */ jsx(
-    ChartContainer,
-    {
-      title,
-      subtitle,
-      height,
-      data: safeData,
-      requiredFields: ["name", "value"],
-      minSampleSize,
-      className,
-      children: /* @__PURE__ */ jsxs(PieChart$1, { children: [
-        /* @__PURE__ */ jsx(
-          Pie,
-          {
-            data: safeData,
-            cx: "50%",
-            cy: "50%",
-            innerRadius,
-            outerRadius,
-            paddingAngle: 2,
-            dataKey: "value",
-            label: showLabels ? renderLabel : void 0,
-            labelLine: showLabels,
-            children: safeData.map((entry, index) => /* @__PURE__ */ jsx(
-              Cell,
-              {
-                fill: entry.color || DEFAULT_COLORS3[index % DEFAULT_COLORS3.length]
-              },
-              `cell-${index}`
-            ))
-          }
-        ),
-        /* @__PURE__ */ jsx(Tooltip, {}),
-        showLegend && /* @__PURE__ */ jsx(Legend, {})
-      ] })
-    }
-  );
-}
-PieChart.displayName = "PieChart";
-var DEFAULT_COLORS4 = [
-  "var(--brand-pink)",
-  "var(--brand-yellow)",
-  "var(--status-info)",
-  "var(--status-success)",
-  "var(--status-warning)"
-];
-function FunnelChart({
-  stages,
-  title,
-  subtitle,
-  showConversionRates = true,
-  showDropOff = true,
-  showValues = true,
-  height = 300,
-  className
-}) {
-  const { features } = useReportMode();
-  const isValid = stages.length >= 3;
-  const maxValue = stages.length > 0 ? Math.max(...stages.map((s) => s.value)) : 0;
-  const stagesWithMetrics = useMemo(() => {
-    return stages.map((stage, index) => {
-      const prevStage = index > 0 ? stages[index - 1] : null;
-      const conversionRate = prevStage ? stage.value / prevStage.value * 100 : 100;
-      const dropOff = prevStage ? (prevStage.value - stage.value) / prevStage.value * 100 : 0;
-      const widthPercent = maxValue > 0 ? stage.value / maxValue * 100 : 0;
-      return {
-        ...stage,
-        conversionRate,
-        dropOff,
-        widthPercent,
-        color: stage.color || DEFAULT_COLORS4[index % DEFAULT_COLORS4.length]
-      };
-    });
-  }, [stages, maxValue]);
-  if (!isValid) {
-    return /* @__PURE__ */ jsxs("div", { className: clsx7("ds-funnel-chart", "ds-funnel-chart--invalid", className), children: [
-      title && /* @__PURE__ */ jsx("h4", { className: "ds-funnel-chart__title", children: title }),
-      /* @__PURE__ */ jsx("div", { className: "ds-funnel-chart__empty", children: /* @__PURE__ */ jsx(
-        DataStateIndicator,
-        {
-          state: "INSUFFICIENT_SAMPLE",
-          variant: "full",
-          details: {
-            message: "Funnel requires at least 3 stages",
-            sampleSize: stages.length,
-            requiredSize: 3
-          }
-        }
-      ) })
-    ] });
-  }
-  const totalConversion = stages.length > 1 ? (stages[stages.length - 1].value / stages[0].value * 100).toFixed(1) : "100";
-  return /* @__PURE__ */ jsxs("div", { className: clsx7("ds-funnel-chart", className), style: { minHeight: height }, children: [
-    (title || subtitle) && /* @__PURE__ */ jsxs("header", { className: "ds-funnel-chart__header", children: [
-      /* @__PURE__ */ jsxs("div", { children: [
-        title && /* @__PURE__ */ jsx("h4", { className: "ds-funnel-chart__title", children: title }),
-        subtitle && /* @__PURE__ */ jsx("p", { className: "ds-funnel-chart__subtitle", children: subtitle })
-      ] }),
-      features.showMethodology && /* @__PURE__ */ jsx(DataCoverageBadge, { sampleSize: stages[0].value, size: "sm" })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "ds-funnel-chart__stages", children: stagesWithMetrics.map((stage, index) => /* @__PURE__ */ jsxs("div", { className: "ds-funnel-chart__stage", children: [
-      /* @__PURE__ */ jsx("div", { className: "ds-funnel-chart__bar-container", children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "ds-funnel-chart__bar",
-          style: {
-            width: `${stage.widthPercent}%`,
-            backgroundColor: stage.color
-          },
-          children: showValues && /* @__PURE__ */ jsx("span", { className: "ds-funnel-chart__value", children: stage.value.toLocaleString() })
-        }
-      ) }),
-      /* @__PURE__ */ jsxs("div", { className: "ds-funnel-chart__label", children: [
-        /* @__PURE__ */ jsx("span", { className: "ds-funnel-chart__stage-name", children: stage.name }),
-        showConversionRates && index > 0 && /* @__PURE__ */ jsxs("span", { className: "ds-funnel-chart__conversion", children: [
-          stage.conversionRate.toFixed(1),
-          "% converted"
-        ] })
-      ] }),
-      showDropOff && index > 0 && stage.dropOff > 0 && /* @__PURE__ */ jsxs("div", { className: "ds-funnel-chart__dropoff", children: [
-        /* @__PURE__ */ jsx("span", { className: "ds-funnel-chart__dropoff-arrow", children: "\u2193" }),
-        /* @__PURE__ */ jsxs("span", { className: "ds-funnel-chart__dropoff-value", children: [
-          "-",
-          stage.dropOff.toFixed(1),
-          "%"
-        ] })
-      ] })
-    ] }, stage.name)) }),
-    /* @__PURE__ */ jsx("footer", { className: "ds-funnel-chart__footer", children: /* @__PURE__ */ jsxs("span", { className: "ds-funnel-chart__total", children: [
-      "Overall Conversion: ",
-      /* @__PURE__ */ jsxs("strong", { children: [
-        totalConversion,
-        "%"
-      ] })
-    ] }) })
-  ] });
-}
-FunnelChart.displayName = "FunnelChart";
-function HeatmapChart({
-  data,
-  title,
-  subtitle,
-  xLabel,
-  yLabel,
-  colorScale = ["var(--glass-elevated)", "var(--brand-pink)"],
-  showValues = true,
-  valueFormatter = (v) => v.toFixed(0),
-  minCells = 25,
-  className
-}) {
-  const { features } = useReportMode();
-  const { xValues, yValues, cellMap, minValue, maxValue } = useMemo(() => {
-    const xSet = /* @__PURE__ */ new Set();
-    const ySet = /* @__PURE__ */ new Set();
-    const map = /* @__PURE__ */ new Map();
-    let min = Infinity;
-    let max = -Infinity;
-    for (const cell of data) {
-      xSet.add(cell.x);
-      ySet.add(cell.y);
-      map.set(`${cell.x}-${cell.y}`, cell.value);
-      min = Math.min(min, cell.value);
-      max = Math.max(max, cell.value);
-    }
-    return {
-      xValues: Array.from(xSet),
-      yValues: Array.from(ySet),
-      cellMap: map,
-      minValue: min === Infinity ? 0 : min,
-      maxValue: max === -Infinity ? 0 : max
-    };
-  }, [data]);
-  const isValid = data.length >= minCells;
-  const getCellColor = (value) => {
-    if (maxValue === minValue) return colorScale[0];
-    const ratio = (value - minValue) / (maxValue - minValue);
-    return `color-mix(in srgb, ${colorScale[1]} ${ratio * 100}%, ${colorScale[0]})`;
-  };
-  const getTextColor = (value) => {
-    const ratio = (value - minValue) / (maxValue - minValue);
-    return ratio > 0.5 ? "white" : "var(--text-primary)";
-  };
-  if (!isValid) {
-    return /* @__PURE__ */ jsxs("div", { className: clsx7("ds-heatmap-chart", "ds-heatmap-chart--invalid", className), children: [
-      title && /* @__PURE__ */ jsx("h4", { className: "ds-heatmap-chart__title", children: title }),
-      /* @__PURE__ */ jsxs("div", { className: "ds-heatmap-chart__empty", children: [
-        /* @__PURE__ */ jsx("p", { children: "Insufficient data for heatmap visualization" }),
-        /* @__PURE__ */ jsxs("p", { className: "ds-heatmap-chart__empty-detail", children: [
-          data.length,
-          " cells provided, ",
-          minCells,
-          " required"
-        ] })
-      ] })
-    ] });
-  }
-  return /* @__PURE__ */ jsxs("div", { className: clsx7("ds-heatmap-chart", className), children: [
-    (title || subtitle) && /* @__PURE__ */ jsxs("header", { className: "ds-heatmap-chart__header", children: [
-      /* @__PURE__ */ jsxs("div", { children: [
-        title && /* @__PURE__ */ jsx("h4", { className: "ds-heatmap-chart__title", children: title }),
-        subtitle && /* @__PURE__ */ jsx("p", { className: "ds-heatmap-chart__subtitle", children: subtitle })
-      ] }),
-      features.showMethodology && /* @__PURE__ */ jsx(DataCoverageBadge, { sampleSize: data.length, requiredSize: minCells, size: "sm" })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "ds-heatmap-chart__container", children: [
-      yLabel && /* @__PURE__ */ jsx("div", { className: "ds-heatmap-chart__y-label", children: /* @__PURE__ */ jsx("span", { children: yLabel }) }),
-      /* @__PURE__ */ jsxs("div", { className: "ds-heatmap-chart__grid-wrapper", children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "ds-heatmap-chart__grid",
-            style: {
-              gridTemplateColumns: `repeat(${xValues.length}, 1fr)`,
-              gridTemplateRows: `repeat(${yValues.length}, 1fr)`
-            },
-            children: yValues.map(
-              (y) => xValues.map((x) => {
-                const value = cellMap.get(`${x}-${y}`) ?? 0;
-                const cellContent = /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: "ds-heatmap-chart__cell",
-                    style: {
-                      backgroundColor: getCellColor(value),
-                      color: getTextColor(value)
-                    },
-                    children: showValues && /* @__PURE__ */ jsx("span", { className: "ds-heatmap-chart__cell-value", children: valueFormatter(value) })
-                  },
-                  `${x}-${y}`
-                );
-                return /* @__PURE__ */ jsx(Tooltip$1, { content: `${x}, ${y}: ${valueFormatter(value)}`, children: cellContent }, `${x}-${y}`);
-              })
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "ds-heatmap-chart__x-labels",
-            style: { gridTemplateColumns: `repeat(${xValues.length}, 1fr)` },
-            children: xValues.map((x) => /* @__PURE__ */ jsx("span", { className: "ds-heatmap-chart__x-label", children: x }, x))
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "ds-heatmap-chart__y-labels",
-          style: { gridTemplateRows: `repeat(${yValues.length}, 1fr)` },
-          children: yValues.map((y) => /* @__PURE__ */ jsx("span", { className: "ds-heatmap-chart__y-label-item", children: y }, y))
-        }
-      )
-    ] }),
-    xLabel && /* @__PURE__ */ jsx("div", { className: "ds-heatmap-chart__x-axis-label", children: /* @__PURE__ */ jsx("span", { children: xLabel }) }),
-    /* @__PURE__ */ jsxs("div", { className: "ds-heatmap-chart__legend", children: [
-      /* @__PURE__ */ jsx("span", { className: "ds-heatmap-chart__legend-label", children: "Low" }),
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "ds-heatmap-chart__legend-bar",
-          style: {
-            background: `linear-gradient(to right, ${colorScale[0]}, ${colorScale[1]})`
-          }
-        }
-      ),
-      /* @__PURE__ */ jsx("span", { className: "ds-heatmap-chart__legend-label", children: "High" })
-    ] })
-  ] });
-}
-HeatmapChart.displayName = "HeatmapChart";
-function ChartSwitchControl({
-  currentType,
-  allowedTypes,
-  onTypeChange,
-  size = "sm",
-  className
-}) {
-  if (allowedTypes.length <= 1) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx("div", { className: clsx7("ds-chart-switch", `ds-chart-switch--${size}`, className), children: allowedTypes.map((type) => {
-    const meta = CHART_REGISTRY[type];
-    if (!meta) return null;
-    const isActive = type === currentType;
-    const Icon = getChartIcon(type);
-    return /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        className: clsx7(
-          "ds-chart-switch__option",
-          isActive && "ds-chart-switch__option--active"
-        ),
-        onClick: () => onTypeChange(type),
-        title: meta.name,
-        "aria-pressed": isActive,
-        children: [
-          /* @__PURE__ */ jsx(Icon, {}),
-          /* @__PURE__ */ jsx("span", { className: "ds-chart-switch__label", children: getShortLabel(type) })
-        ]
-      },
-      type
-    );
-  }) });
-}
-ChartSwitchControl.displayName = "ChartSwitchControl";
-function getChartIcon(type) {
-  const icons = {
-    line: LineIcon,
-    smooth_line: SmoothLineIcon,
-    area: AreaIcon,
-    stacked_area: StackedAreaIcon,
-    area_100pct: StackedAreaIcon,
-    bar: BarIcon,
-    column: ColumnIcon,
-    stacked_bar: StackedBarIcon,
-    stacked_column: StackedColumnIcon,
-    column_100pct: StackedColumnIcon,
-    pie: PieIcon,
-    donut: DonutIcon,
-    histogram: HistogramIcon,
-    funnel: FunnelIcon,
-    heatmap: HeatmapIcon
-  };
-  return icons[type] || DefaultChartIcon;
-}
-function getShortLabel(type) {
-  const labels = {
-    line: "Line",
-    smooth_line: "Smooth",
-    area: "Area",
-    stacked_area: "Stacked",
-    area_100pct: "100%",
-    bar: "Bar",
-    column: "Column",
-    stacked_bar: "Stacked",
-    stacked_column: "Stacked",
-    column_100pct: "100%",
-    pie: "Pie",
-    donut: "Donut",
-    histogram: "Histogram",
-    funnel: "Funnel",
-    heatmap: "Heatmap"
-  };
-  return labels[type] || type;
-}
-function LineIcon() {
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      width: "16",
-      height: "16",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      children: /* @__PURE__ */ jsx("polyline", { points: "22 12 18 8 13 13 9 9 2 16" })
-    }
-  );
-}
-function SmoothLineIcon() {
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      width: "16",
-      height: "16",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      children: /* @__PURE__ */ jsx("path", { d: "M2 16 C6 16, 8 8, 12 12 S18 6, 22 10" })
-    }
-  );
-}
-function AreaIcon() {
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      width: "16",
-      height: "16",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      children: [
-        /* @__PURE__ */ jsx("path", { d: "M2 20 L2 16 L8 10 L14 14 L22 6 L22 20 Z", fill: "currentColor", fillOpacity: "0.2" }),
-        /* @__PURE__ */ jsx("polyline", { points: "2 16 8 10 14 14 22 6" })
-      ]
-    }
-  );
-}
-function StackedAreaIcon() {
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      width: "16",
-      height: "16",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      children: [
-        /* @__PURE__ */ jsx("path", { d: "M2 20 L2 14 L8 10 L14 12 L22 8 L22 20 Z", fill: "currentColor", fillOpacity: "0.3" }),
-        /* @__PURE__ */ jsx("path", { d: "M2 20 L2 16 L8 14 L14 15 L22 12 L22 20 Z", fill: "currentColor", fillOpacity: "0.2" })
-      ]
-    }
-  );
-}
-function BarIcon() {
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      width: "16",
-      height: "16",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      children: [
-        /* @__PURE__ */ jsx("rect", { x: "2", y: "4", width: "14", height: "4", rx: "1", fill: "currentColor", fillOpacity: "0.2" }),
-        /* @__PURE__ */ jsx("rect", { x: "2", y: "10", width: "18", height: "4", rx: "1", fill: "currentColor", fillOpacity: "0.2" }),
-        /* @__PURE__ */ jsx("rect", { x: "2", y: "16", width: "10", height: "4", rx: "1", fill: "currentColor", fillOpacity: "0.2" })
-      ]
-    }
-  );
-}
-function ColumnIcon() {
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      width: "16",
-      height: "16",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      children: [
-        /* @__PURE__ */ jsx("rect", { x: "4", y: "8", width: "4", height: "14", rx: "1", fill: "currentColor", fillOpacity: "0.2" }),
-        /* @__PURE__ */ jsx("rect", { x: "10", y: "4", width: "4", height: "18", rx: "1", fill: "currentColor", fillOpacity: "0.2" }),
-        /* @__PURE__ */ jsx("rect", { x: "16", y: "12", width: "4", height: "10", rx: "1", fill: "currentColor", fillOpacity: "0.2" })
-      ]
-    }
-  );
-}
-function StackedBarIcon() {
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      width: "16",
-      height: "16",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      children: [
-        /* @__PURE__ */ jsx("rect", { x: "2", y: "4", width: "8", height: "4", rx: "1", fill: "currentColor", fillOpacity: "0.3" }),
-        /* @__PURE__ */ jsx("rect", { x: "10", y: "4", width: "6", height: "4", rx: "1", fill: "currentColor", fillOpacity: "0.15" }),
-        /* @__PURE__ */ jsx("rect", { x: "2", y: "10", width: "12", height: "4", rx: "1", fill: "currentColor", fillOpacity: "0.3" }),
-        /* @__PURE__ */ jsx("rect", { x: "14", y: "10", width: "6", height: "4", rx: "1", fill: "currentColor", fillOpacity: "0.15" }),
-        /* @__PURE__ */ jsx("rect", { x: "2", y: "16", width: "6", height: "4", rx: "1", fill: "currentColor", fillOpacity: "0.3" }),
-        /* @__PURE__ */ jsx("rect", { x: "8", y: "16", width: "4", height: "4", rx: "1", fill: "currentColor", fillOpacity: "0.15" })
-      ]
-    }
-  );
-}
-function StackedColumnIcon() {
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      width: "16",
-      height: "16",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      children: [
-        /* @__PURE__ */ jsx("rect", { x: "4", y: "14", width: "4", height: "8", rx: "1", fill: "currentColor", fillOpacity: "0.3" }),
-        /* @__PURE__ */ jsx("rect", { x: "4", y: "8", width: "4", height: "6", rx: "1", fill: "currentColor", fillOpacity: "0.15" }),
-        /* @__PURE__ */ jsx("rect", { x: "10", y: "10", width: "4", height: "12", rx: "1", fill: "currentColor", fillOpacity: "0.3" }),
-        /* @__PURE__ */ jsx("rect", { x: "10", y: "4", width: "4", height: "6", rx: "1", fill: "currentColor", fillOpacity: "0.15" }),
-        /* @__PURE__ */ jsx("rect", { x: "16", y: "16", width: "4", height: "6", rx: "1", fill: "currentColor", fillOpacity: "0.3" }),
-        /* @__PURE__ */ jsx("rect", { x: "16", y: "12", width: "4", height: "4", rx: "1", fill: "currentColor", fillOpacity: "0.15" })
-      ]
-    }
-  );
-}
-function PieIcon() {
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      width: "16",
-      height: "16",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      children: [
-        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", fill: "currentColor", fillOpacity: "0.2" }),
-        /* @__PURE__ */ jsx("path", { d: "M12 2 A10 10 0 0 1 22 12 L12 12 Z", fill: "currentColor", fillOpacity: "0.3" })
-      ]
-    }
-  );
-}
-function DonutIcon() {
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      width: "16",
-      height: "16",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      children: [
-        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", fill: "currentColor", fillOpacity: "0.2" }),
-        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "5", fill: "var(--glass-elevated)", stroke: "none" }),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M12 2 A10 10 0 0 1 22 12 L17 12 A5 5 0 0 0 12 7 Z",
-            fill: "currentColor",
-            fillOpacity: "0.3"
-          }
-        )
-      ]
-    }
-  );
-}
-function HistogramIcon() {
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      width: "16",
-      height: "16",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      children: [
-        /* @__PURE__ */ jsx("rect", { x: "2", y: "14", width: "4", height: "8", rx: "0", fill: "currentColor", fillOpacity: "0.2" }),
-        /* @__PURE__ */ jsx("rect", { x: "6", y: "10", width: "4", height: "12", rx: "0", fill: "currentColor", fillOpacity: "0.2" }),
-        /* @__PURE__ */ jsx("rect", { x: "10", y: "4", width: "4", height: "18", rx: "0", fill: "currentColor", fillOpacity: "0.2" }),
-        /* @__PURE__ */ jsx("rect", { x: "14", y: "8", width: "4", height: "14", rx: "0", fill: "currentColor", fillOpacity: "0.2" }),
-        /* @__PURE__ */ jsx("rect", { x: "18", y: "12", width: "4", height: "10", rx: "0", fill: "currentColor", fillOpacity: "0.2" })
-      ]
-    }
-  );
-}
-function FunnelIcon() {
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      width: "16",
-      height: "16",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      children: [
-        /* @__PURE__ */ jsx("path", { d: "M2 4 H22 L18 10 H6 Z", fill: "currentColor", fillOpacity: "0.3" }),
-        /* @__PURE__ */ jsx("path", { d: "M6 10 H18 L15 16 H9 Z", fill: "currentColor", fillOpacity: "0.25" }),
-        /* @__PURE__ */ jsx("path", { d: "M9 16 H15 L13 22 H11 Z", fill: "currentColor", fillOpacity: "0.2" })
-      ]
-    }
-  );
-}
-function HeatmapIcon() {
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      width: "16",
-      height: "16",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "1",
-      children: [
-        /* @__PURE__ */ jsx("rect", { x: "2", y: "2", width: "6", height: "6", fill: "currentColor", fillOpacity: "0.1" }),
-        /* @__PURE__ */ jsx("rect", { x: "9", y: "2", width: "6", height: "6", fill: "currentColor", fillOpacity: "0.3" }),
-        /* @__PURE__ */ jsx("rect", { x: "16", y: "2", width: "6", height: "6", fill: "currentColor", fillOpacity: "0.2" }),
-        /* @__PURE__ */ jsx("rect", { x: "2", y: "9", width: "6", height: "6", fill: "currentColor", fillOpacity: "0.4" }),
-        /* @__PURE__ */ jsx("rect", { x: "9", y: "9", width: "6", height: "6", fill: "currentColor", fillOpacity: "0.6" }),
-        /* @__PURE__ */ jsx("rect", { x: "16", y: "9", width: "6", height: "6", fill: "currentColor", fillOpacity: "0.3" }),
-        /* @__PURE__ */ jsx("rect", { x: "2", y: "16", width: "6", height: "6", fill: "currentColor", fillOpacity: "0.2" }),
-        /* @__PURE__ */ jsx("rect", { x: "9", y: "16", width: "6", height: "6", fill: "currentColor", fillOpacity: "0.5" }),
-        /* @__PURE__ */ jsx("rect", { x: "16", y: "16", width: "6", height: "6", fill: "currentColor", fillOpacity: "0.4" })
-      ]
-    }
-  );
-}
-function DefaultChartIcon() {
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      width: "16",
-      height: "16",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      children: [
-        /* @__PURE__ */ jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
-        /* @__PURE__ */ jsx("path", { d: "M3 15 L9 9 L13 13 L21 5" })
-      ]
-    }
-  );
-}
-var CHART_COLORS = [
-  "var(--brand-pink)",
-  "var(--brand-yellow)",
-  "var(--status-info)",
-  "var(--status-success)",
-  "var(--status-warning)",
-  "var(--status-error)"
-];
-function getColor(index, customColor) {
-  return customColor || CHART_COLORS[index % CHART_COLORS.length];
-}
-function Chart({
-  intent,
-  data,
-  dimensions,
-  measures,
-  defaultType,
-  allowedTypes,
-  chartType: controlledType,
-  onChartTypeChange,
-  allowSwitching = false,
-  title,
-  subtitle,
-  height = 300,
-  legend: showLegend = true,
-  grid = true,
-  className
-}) {
-  const { features } = useReportMode();
-  const resolvedDefault = defaultType || getDefaultChartForIntent(intent);
-  const [internalType, setInternalType] = useState(resolvedDefault);
-  const activeType = controlledType ?? internalType;
-  const resolvedAllowedTypes = useMemo(() => {
-    if (allowedTypes) return allowedTypes;
-    return getAllowedSwitchTargets(activeType);
-  }, [allowedTypes, activeType]);
-  const validation = useMemo(() => {
-    return validateChartData(
-      activeType,
-      data,
-      dimensions.map((d) => d.key),
-      measures.map((m) => m.key)
-    );
-  }, [activeType, data, dimensions, measures]);
-  const handleTypeChange = (newType) => {
-    if (onChartTypeChange) {
-      onChartTypeChange(newType);
-    } else {
-      setInternalType(newType);
-    }
-  };
-  const chartMeta = CHART_REGISTRY[activeType];
-  const renderChart = () => {
-    if (!validation.isValid) {
-      return /* @__PURE__ */ jsx("div", { className: "ds-chart__invalid", children: /* @__PURE__ */ jsx(
-        DataStateIndicator,
-        {
-          state: "INSUFFICIENT_SAMPLE",
-          variant: "full",
-          details: {
-            message: validation.errors[0],
-            sampleSize: data.length,
-            requiredSize: chartMeta?.contract.minDataPoints || 0
-          }
-        }
-      ) });
-    }
-    const xKey = dimensions[0]?.key || "x";
-    switch (activeType) {
-      case "line":
-      case "smooth_line":
-        return renderLineChart(xKey, activeType === "smooth_line");
-      case "area":
-      case "stacked_area":
-      case "area_100pct":
-        return renderAreaChart(xKey, activeType);
-      case "bar":
-      case "stacked_bar":
-        return renderBarChart(xKey, activeType, "horizontal");
-      case "column":
-      case "stacked_column":
-      case "column_100pct":
-        return renderBarChart(xKey, activeType, "vertical");
-      case "pie":
-      case "donut":
-        return renderPieChart(xKey, activeType === "donut");
-      case "histogram":
-        return renderHistogram();
-      default:
-        return /* @__PURE__ */ jsxs("div", { className: "ds-chart__unsupported", children: [
-          'Chart type "',
-          activeType,
-          '" is not yet implemented'
-        ] });
-    }
-  };
-  const renderLineChart = (xKey, smooth) => /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(LineChart$1, { data, margin: { top: 5, right: 20, left: 0, bottom: 5 }, children: [
-    grid && /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", vertical: false }),
-    /* @__PURE__ */ jsx(
-      XAxis,
-      {
-        dataKey: xKey,
-        tick: { fontSize: 12 },
-        tickLine: false,
-        axisLine: { strokeWidth: 1 }
-      }
-    ),
-    /* @__PURE__ */ jsx(YAxis, { tick: { fontSize: 12 }, tickLine: false, axisLine: false, width: 40 }),
-    /* @__PURE__ */ jsx(
-      Tooltip,
-      {
-        contentStyle: {
-          background: "var(--glass-elevated)",
-          border: "1px solid var(--glass-border)"
-        }
-      }
-    ),
-    showLegend && measures.length > 1 && /* @__PURE__ */ jsx(Legend, {}),
-    measures.map((measure, idx) => /* @__PURE__ */ jsx(
-      Line,
-      {
-        type: smooth ? "monotone" : "linear",
-        dataKey: measure.key,
-        name: measure.label || measure.key,
-        stroke: getColor(idx, measure.color),
-        strokeWidth: 2,
-        dot: true,
-        activeDot: { r: 6 }
-      },
-      measure.key
-    ))
-  ] }) });
-  const renderAreaChart = (xKey, type) => {
-    const isStacked = type === "stacked_area" || type === "area_100pct";
-    const is100Pct = type === "area_100pct";
-    const chartData = is100Pct ? normalizeData(data, measures) : data;
-    return /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(AreaChart, { data: chartData, margin: { top: 5, right: 20, left: 0, bottom: 5 }, children: [
-      grid && /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", vertical: false }),
-      /* @__PURE__ */ jsx(
-        XAxis,
-        {
-          dataKey: xKey,
-          tick: { fontSize: 12 },
-          tickLine: false,
-          axisLine: { strokeWidth: 1 }
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        YAxis,
-        {
-          tick: { fontSize: 12 },
-          tickLine: false,
-          axisLine: false,
-          width: 40,
-          domain: is100Pct ? [0, 100] : void 0,
-          tickFormatter: is100Pct ? (v) => `${v}%` : void 0
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        Tooltip,
-        {
-          contentStyle: {
-            background: "var(--glass-elevated)",
-            border: "1px solid var(--glass-border)"
-          }
-        }
-      ),
-      showLegend && /* @__PURE__ */ jsx(Legend, {}),
-      measures.map((measure, idx) => /* @__PURE__ */ jsx(
-        Area,
-        {
-          type: "monotone",
-          dataKey: measure.key,
-          name: measure.label || measure.key,
-          stroke: getColor(idx, measure.color),
-          fill: getColor(idx, measure.color),
-          fillOpacity: 0.3,
-          stackId: isStacked ? "stack" : void 0
-        },
-        measure.key
-      ))
-    ] }) });
-  };
-  const renderBarChart = (xKey, type, layout) => {
-    const isStacked = type.includes("stacked") || type.includes("100pct");
-    const is100Pct = type.includes("100pct");
-    const isHorizontal = layout === "horizontal";
-    const chartData = is100Pct ? normalizeData(data, measures) : data;
-    return /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(
-      BarChart$1,
-      {
-        data: chartData,
-        layout: isHorizontal ? "vertical" : "horizontal",
-        margin: { top: 5, right: 20, left: isHorizontal ? 80 : 0, bottom: 5 },
-        children: [
-          grid && /* @__PURE__ */ jsx(
-            CartesianGrid,
-            {
-              strokeDasharray: "3 3",
-              horizontal: !isHorizontal,
-              vertical: isHorizontal
-            }
-          ),
-          isHorizontal ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(
-              XAxis,
-              {
-                type: "number",
-                tick: { fontSize: 12 },
-                tickLine: false,
-                axisLine: false,
-                domain: is100Pct ? [0, 100] : void 0,
-                tickFormatter: is100Pct ? (v) => `${v}%` : void 0
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              YAxis,
-              {
-                type: "category",
-                dataKey: xKey,
-                tick: { fontSize: 12 },
-                tickLine: false,
-                axisLine: false,
-                width: 80
-              }
-            )
-          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(
-              XAxis,
-              {
-                dataKey: xKey,
-                tick: { fontSize: 12 },
-                tickLine: false,
-                axisLine: { strokeWidth: 1 }
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              YAxis,
-              {
-                tick: { fontSize: 12 },
-                tickLine: false,
-                axisLine: false,
-                width: 40,
-                domain: is100Pct ? [0, 100] : void 0,
-                tickFormatter: is100Pct ? (v) => `${v}%` : void 0
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx(
-            Tooltip,
-            {
-              contentStyle: {
-                background: "var(--glass-elevated)",
-                border: "1px solid var(--glass-border)"
-              }
-            }
-          ),
-          showLegend && measures.length > 1 && /* @__PURE__ */ jsx(Legend, {}),
-          measures.map((measure, idx) => /* @__PURE__ */ jsx(
-            Bar,
-            {
-              dataKey: measure.key,
-              name: measure.label || measure.key,
-              fill: getColor(idx, measure.color),
-              stackId: isStacked ? "stack" : void 0,
-              radius: isStacked ? void 0 : [4, 4, 0, 0]
-            },
-            measure.key
-          ))
-        ]
-      }
-    ) });
-  };
-  const renderPieChart = (nameKey, isDonut) => {
-    const valueKey = measures[0]?.key || "value";
-    return /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(PieChart$1, { children: [
-      /* @__PURE__ */ jsx(
-        Pie,
-        {
-          data,
-          dataKey: valueKey,
-          nameKey,
-          cx: "50%",
-          cy: "50%",
-          innerRadius: isDonut ? "50%" : 0,
-          outerRadius: "80%",
-          label: ({ name, percent }) => `${name}: ${((percent ?? 0) * 100).toFixed(0)}%`,
-          labelLine: false,
-          children: data.map((_, idx) => /* @__PURE__ */ jsx(Cell, { fill: getColor(idx) }, `cell-${idx}`))
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        Tooltip,
-        {
-          contentStyle: {
-            background: "var(--glass-elevated)",
-            border: "1px solid var(--glass-border)"
-          }
-        }
-      ),
-      showLegend && /* @__PURE__ */ jsx(Legend, {})
-    ] }) });
-  };
-  const renderHistogram = () => {
-    const valueKey = measures[0]?.key || "value";
-    const binKey = dimensions[0]?.key || "bin";
-    return /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(BarChart$1, { data, margin: { top: 5, right: 20, left: 0, bottom: 5 }, children: [
-      grid && /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", vertical: false }),
-      /* @__PURE__ */ jsx(
-        XAxis,
-        {
-          dataKey: binKey,
-          tick: { fontSize: 12 },
-          tickLine: false,
-          axisLine: { strokeWidth: 1 }
-        }
-      ),
-      /* @__PURE__ */ jsx(YAxis, { tick: { fontSize: 12 }, tickLine: false, axisLine: false, width: 40 }),
-      /* @__PURE__ */ jsx(
-        Tooltip,
-        {
-          contentStyle: {
-            background: "var(--glass-elevated)",
-            border: "1px solid var(--glass-border)"
-          }
-        }
-      ),
-      /* @__PURE__ */ jsx(Bar, { dataKey: valueKey, fill: getColor(0), radius: [4, 4, 0, 0] })
-    ] }) });
-  };
-  const normalizeData = (sourceData, sourceMeasures) => {
-    return sourceData.map((row) => {
-      const total = sourceMeasures.reduce((sum, m) => {
-        const val = row[m.key];
-        return sum + (typeof val === "number" ? val : 0);
-      }, 0);
-      if (total === 0) return row;
-      const normalized = { ...row };
-      sourceMeasures.forEach((m) => {
-        const val = row[m.key];
-        if (typeof val === "number") {
-          normalized[m.key] = val / total * 100;
-        }
-      });
-      return normalized;
-    });
-  };
-  return /* @__PURE__ */ jsxs("div", { className: clsx7("ds-chart", className), children: [
-    (title || subtitle || allowSwitching) && /* @__PURE__ */ jsxs("header", { className: "ds-chart__header", children: [
-      /* @__PURE__ */ jsxs("div", { className: "ds-chart__header-text", children: [
-        title && /* @__PURE__ */ jsx("h4", { className: "ds-chart__title", children: title }),
-        subtitle && /* @__PURE__ */ jsx("p", { className: "ds-chart__subtitle", children: subtitle })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "ds-chart__header-actions", children: [
-        features.showMethodology && data.length > 0 && /* @__PURE__ */ jsx(
-          DataCoverageBadge,
-          {
-            sampleSize: data.length,
-            requiredSize: chartMeta?.contract.minDataPoints || 0,
-            size: "sm"
-          }
-        ),
-        allowSwitching && resolvedAllowedTypes.length > 0 && /* @__PURE__ */ jsx(
-          ChartSwitchControl,
-          {
-            currentType: activeType,
-            allowedTypes: [activeType, ...resolvedAllowedTypes],
-            onTypeChange: handleTypeChange
-          }
-        )
-      ] })
-    ] }),
-    validation.warnings.length > 0 && /* @__PURE__ */ jsx("div", { className: "ds-chart__warnings", children: validation.warnings.map((warning, idx) => /* @__PURE__ */ jsx("div", { className: "ds-chart__warning", children: warning }, idx)) }),
-    /* @__PURE__ */ jsx("div", { className: "ds-chart__body", style: { height }, children: renderChart() })
-  ] });
-}
-Chart.displayName = "Chart";
-var DIMENSION_LABELS = {
-  EI: { left: "Extraversion", right: "Introversion", full: "E/I" },
-  SN: { left: "Sensing", right: "Intuition", full: "S/N" },
-  TF: { left: "Thinking", right: "Feeling", full: "T/F" },
-  JP: { left: "Judging", right: "Perceiving", full: "J/P" }
-};
-function MBTIRadar({
-  dimensions,
-  sampleSize,
-  comparison,
-  title,
-  subtitle,
-  size = 300,
-  showLabels = true,
-  showValues = true,
-  minSampleSize = 20,
-  confidence,
-  className
-}) {
-  const { features } = useReportMode();
-  const isValid = sampleSize >= minSampleSize;
-  const radarData = useMemo(() => {
-    return Object.keys(dimensions).map((key) => ({
-      dimension: DIMENSION_LABELS[key].full,
-      fullName: `${DIMENSION_LABELS[key].left} vs ${DIMENSION_LABELS[key].right}`,
-      value: dimensions[key],
-      comparison: comparison?.[key],
-      leftLabel: DIMENSION_LABELS[key].left,
-      rightLabel: DIMENSION_LABELS[key].right
-    }));
-  }, [dimensions, comparison]);
-  const derivedType = useMemo(() => {
-    const e = dimensions.EI < 50 ? "E" : "I";
-    const s = dimensions.SN < 50 ? "S" : "N";
-    const t = dimensions.TF < 50 ? "T" : "F";
-    const j = dimensions.JP < 50 ? "J" : "P";
-    return `${e}${s}${t}${j}`;
-  }, [dimensions]);
-  if (!isValid) {
-    return /* @__PURE__ */ jsxs("div", { className: clsx7("ds-mbti-radar", "ds-mbti-radar--invalid", className), children: [
-      title && /* @__PURE__ */ jsx("h4", { className: "ds-mbti-radar__title", children: title }),
-      /* @__PURE__ */ jsx("div", { className: "ds-mbti-radar__empty", children: /* @__PURE__ */ jsx(
-        DataStateIndicator,
-        {
-          state: "INSUFFICIENT_SAMPLE",
-          variant: "full",
-          details: {
-            message: "MBTI analysis requires sufficient sample size",
-            sampleSize,
-            requiredSize: minSampleSize
-          }
-        }
-      ) })
-    ] });
-  }
-  const CustomTooltip = ({
-    active,
-    payload
-  }) => {
-    if (!active || !payload?.length) return null;
-    const data = payload[0].payload;
-    return /* @__PURE__ */ jsxs("div", { className: "ds-mbti-radar__tooltip", children: [
-      /* @__PURE__ */ jsx("p", { className: "ds-mbti-radar__tooltip-title", children: data.fullName }),
-      /* @__PURE__ */ jsxs("p", { className: "ds-mbti-radar__tooltip-value", children: [
-        data.leftLabel,
-        ": ",
-        100 - data.value,
-        "%"
-      ] }),
-      /* @__PURE__ */ jsxs("p", { className: "ds-mbti-radar__tooltip-value", children: [
-        data.rightLabel,
-        ": ",
-        data.value,
-        "%"
-      ] }),
-      data.comparison !== void 0 && /* @__PURE__ */ jsxs("p", { className: "ds-mbti-radar__tooltip-comparison", children: [
-        "Benchmark: ",
-        data.comparison,
-        "%"
-      ] })
-    ] });
-  };
-  return /* @__PURE__ */ jsxs("div", { className: clsx7("ds-mbti-radar", className), children: [
-    (title || subtitle) && /* @__PURE__ */ jsxs("header", { className: "ds-mbti-radar__header", children: [
-      /* @__PURE__ */ jsxs("div", { className: "ds-mbti-radar__header-text", children: [
-        title && /* @__PURE__ */ jsx("h4", { className: "ds-mbti-radar__title", children: title }),
-        subtitle && /* @__PURE__ */ jsx("p", { className: "ds-mbti-radar__subtitle", children: subtitle })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "ds-mbti-radar__header-badges", children: [
-        features.showConfidenceScores && confidence !== void 0 && /* @__PURE__ */ jsx(ConfidenceIndicator, { score: confidence, size: "sm" }),
-        features.showMethodology && /* @__PURE__ */ jsx(DataCoverageBadge, { sampleSize, requiredSize: minSampleSize, size: "sm" })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "ds-mbti-radar__type-badge", children: [
-      /* @__PURE__ */ jsx("span", { className: "ds-mbti-radar__type-label", children: "Derived Type" }),
-      /* @__PURE__ */ jsx("span", { className: "ds-mbti-radar__type-value", children: derivedType })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "ds-mbti-radar__chart", style: { width: size, height: size }, children: /* @__PURE__ */ jsxs(RadarChart, { cx: "50%", cy: "50%", outerRadius: "70%", width: size, height: size, data: radarData, children: [
-      /* @__PURE__ */ jsx(PolarGrid, { stroke: "var(--glass-border)" }),
-      /* @__PURE__ */ jsx(
-        PolarAngleAxis,
-        {
-          dataKey: "dimension",
-          tick: { fill: "var(--text-secondary)", fontSize: 12 }
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        PolarRadiusAxis,
-        {
-          angle: 45,
-          domain: [0, 100],
-          tick: { fill: "var(--text-tertiary)", fontSize: 10 },
-          tickCount: 5
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        Radar,
-        {
-          name: "Profile",
-          dataKey: "value",
-          stroke: "var(--brand-pink)",
-          fill: "var(--brand-pink)",
-          fillOpacity: 0.3,
-          strokeWidth: 2
-        }
-      ),
-      comparison && /* @__PURE__ */ jsx(
-        Radar,
-        {
-          name: "Benchmark",
-          dataKey: "comparison",
-          stroke: "var(--brand-yellow)",
-          fill: "var(--brand-yellow)",
-          fillOpacity: 0.1,
-          strokeWidth: 2,
-          strokeDasharray: "5 5"
-        }
-      ),
-      showValues && /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomTooltip, {}) }),
-      comparison && /* @__PURE__ */ jsx(Legend, {})
-    ] }) }),
-    showLabels && /* @__PURE__ */ jsx("div", { className: "ds-mbti-radar__dimensions", children: radarData.map((d) => /* @__PURE__ */ jsxs("div", { className: "ds-mbti-radar__dimension", children: [
-      /* @__PURE__ */ jsx("span", { className: "ds-mbti-radar__dimension-left", children: d.leftLabel }),
-      /* @__PURE__ */ jsxs("div", { className: "ds-mbti-radar__dimension-bar", children: [
-        /* @__PURE__ */ jsx("div", { className: "ds-mbti-radar__dimension-fill", style: { width: `${d.value}%` } }),
-        /* @__PURE__ */ jsx("div", { className: "ds-mbti-radar__dimension-marker", style: { left: `${d.value}%` } })
-      ] }),
-      /* @__PURE__ */ jsx("span", { className: "ds-mbti-radar__dimension-right", children: d.rightLabel })
-    ] }, d.dimension)) })
-  ] });
-}
-MBTIRadar.displayName = "MBTIRadar";
-var MBTI_GRID = [
-  ["ISTJ", "ISFJ", "INFJ", "INTJ"],
-  ["ISTP", "ISFP", "INFP", "INTP"],
-  ["ESTP", "ESFP", "ENFP", "ENTP"],
-  ["ESTJ", "ESFJ", "ENFJ", "ENTJ"]
-];
-var TYPE_DESCRIPTIONS = {
-  ISTJ: "The Inspector - Practical, reliable, systematic",
-  ISFJ: "The Protector - Caring, supportive, traditional",
-  INFJ: "The Advocate - Insightful, principled, compassionate",
-  INTJ: "The Architect - Strategic, independent, determined",
-  ISTP: "The Virtuoso - Observant, practical, analytical",
-  ISFP: "The Adventurer - Artistic, sensitive, exploratory",
-  INFP: "The Mediator - Idealistic, empathetic, creative",
-  INTP: "The Logician - Inventive, logical, objective",
-  ESTP: "The Entrepreneur - Energetic, pragmatic, observant",
-  ESFP: "The Entertainer - Spontaneous, energetic, friendly",
-  ENFP: "The Campaigner - Enthusiastic, creative, sociable",
-  ENTP: "The Debater - Clever, curious, innovative",
-  ESTJ: "The Executive - Organized, logical, assertive",
-  ESFJ: "The Consul - Caring, sociable, traditional",
-  ENFJ: "The Protagonist - Charismatic, empathetic, organized",
-  ENTJ: "The Commander - Strategic, efficient, energetic"
-};
-var COLUMN_LABELS = ["ST", "SF", "NF", "NT"];
-var ROW_LABELS = ["I-J", "I-P", "E-P", "E-J"];
-function MBTITypeGrid({
-  data,
-  sampleSize: propSampleSize,
-  title,
-  subtitle,
-  showPercentages = true,
-  showCounts = true,
-  highlightThreshold,
-  minSampleSize = 50,
-  confidence,
-  onTypeClick,
-  selectedType,
-  className
-}) {
-  const { features } = useReportMode();
-  const typeMap = useMemo(() => {
-    const map = /* @__PURE__ */ new Map();
-    for (const item of data) {
-      map.set(item.type, item);
-    }
-    return map;
-  }, [data]);
-  const totalSampleSize = propSampleSize ?? data.reduce((sum, d) => sum + d.count, 0);
-  const isValid = totalSampleSize >= minSampleSize;
-  const maxCount = useMemo(() => Math.max(...data.map((d) => d.count), 1), [data]);
-  const getPercentage = (count) => {
-    return totalSampleSize > 0 ? (count / totalSampleSize * 100).toFixed(1) : "0.0";
-  };
-  const getIntensity = (count) => {
-    if (maxCount === 0) return 0;
-    return count / maxCount * 100;
-  };
-  const isHighlighted = (type) => {
-    if (!highlightThreshold) return false;
-    const item = typeMap.get(type);
-    if (!item) return false;
-    const percentage = item.count / totalSampleSize * 100;
-    return percentage >= highlightThreshold;
-  };
-  if (!isValid) {
-    return /* @__PURE__ */ jsxs("div", { className: clsx7("ds-mbti-type-grid", "ds-mbti-type-grid--invalid", className), children: [
-      title && /* @__PURE__ */ jsx("h4", { className: "ds-mbti-type-grid__title", children: title }),
-      /* @__PURE__ */ jsx("div", { className: "ds-mbti-type-grid__empty", children: /* @__PURE__ */ jsx(
-        DataStateIndicator,
-        {
-          state: "INSUFFICIENT_SAMPLE",
-          variant: "full",
-          details: {
-            message: "MBTI distribution analysis requires sufficient sample size",
-            sampleSize: totalSampleSize,
-            requiredSize: minSampleSize
-          }
-        }
-      ) })
-    ] });
-  }
-  return /* @__PURE__ */ jsxs("div", { className: clsx7("ds-mbti-type-grid", className), children: [
-    (title || subtitle) && /* @__PURE__ */ jsxs("header", { className: "ds-mbti-type-grid__header", children: [
-      /* @__PURE__ */ jsxs("div", { className: "ds-mbti-type-grid__header-text", children: [
-        title && /* @__PURE__ */ jsx("h4", { className: "ds-mbti-type-grid__title", children: title }),
-        subtitle && /* @__PURE__ */ jsx("p", { className: "ds-mbti-type-grid__subtitle", children: subtitle })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "ds-mbti-type-grid__header-badges", children: [
-        features.showConfidenceScores && confidence !== void 0 && /* @__PURE__ */ jsx(ConfidenceIndicator, { score: confidence, size: "sm" }),
-        features.showMethodology && /* @__PURE__ */ jsx(
-          DataCoverageBadge,
-          {
-            sampleSize: totalSampleSize,
-            requiredSize: minSampleSize,
-            size: "sm"
-          }
-        )
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "ds-mbti-type-grid__container", children: [
-      /* @__PURE__ */ jsxs("div", { className: "ds-mbti-type-grid__column-headers", children: [
-        /* @__PURE__ */ jsx("div", { className: "ds-mbti-type-grid__corner" }),
-        COLUMN_LABELS.map((label) => /* @__PURE__ */ jsx("div", { className: "ds-mbti-type-grid__column-header", children: label }, label))
-      ] }),
-      MBTI_GRID.map((row, rowIndex) => /* @__PURE__ */ jsxs("div", { className: "ds-mbti-type-grid__row", children: [
-        /* @__PURE__ */ jsx("div", { className: "ds-mbti-type-grid__row-header", children: ROW_LABELS[rowIndex] }),
-        row.map((type) => {
-          const typeData = typeMap.get(type);
-          const count = typeData?.count ?? 0;
-          const percentage = getPercentage(count);
-          const intensity = getIntensity(count);
-          const highlighted = isHighlighted(type);
-          const selected = selectedType === type;
-          return /* @__PURE__ */ jsx(
-            Tooltip$1,
-            {
-              content: /* @__PURE__ */ jsxs("div", { className: "ds-mbti-type-grid__tooltip-content", children: [
-                /* @__PURE__ */ jsx("strong", { children: type }),
-                /* @__PURE__ */ jsx("p", { children: TYPE_DESCRIPTIONS[type] }),
-                /* @__PURE__ */ jsxs("p", { children: [
-                  "Count: ",
-                  count.toLocaleString()
-                ] }),
-                /* @__PURE__ */ jsxs("p", { children: [
-                  "Percentage: ",
-                  percentage,
-                  "%"
-                ] }),
-                typeData?.responseRate !== void 0 && /* @__PURE__ */ jsxs("p", { children: [
-                  "Response Rate: ",
-                  typeData.responseRate.toFixed(1),
-                  "%"
-                ] })
-              ] }),
-              children: /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  type: "button",
-                  className: clsx7(
-                    "ds-mbti-type-grid__cell",
-                    highlighted && "ds-mbti-type-grid__cell--highlighted",
-                    selected && "ds-mbti-type-grid__cell--selected",
-                    onTypeClick && "ds-mbti-type-grid__cell--clickable"
-                  ),
-                  onClick: () => onTypeClick?.(type),
-                  disabled: !onTypeClick,
-                  style: {
-                    "--cell-intensity": `${intensity}%`
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx("span", { className: "ds-mbti-type-grid__cell-type", children: type }),
-                    showCounts && /* @__PURE__ */ jsx("span", { className: "ds-mbti-type-grid__cell-count", children: count.toLocaleString() }),
-                    showPercentages && /* @__PURE__ */ jsxs("span", { className: "ds-mbti-type-grid__cell-percentage", children: [
-                      percentage,
-                      "%"
-                    ] })
-                  ]
-                }
-              )
-            },
-            type
-          );
-        })
-      ] }, rowIndex))
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "ds-mbti-type-grid__legend", children: [
-      /* @__PURE__ */ jsxs("div", { className: "ds-mbti-type-grid__legend-item", children: [
-        /* @__PURE__ */ jsx("span", { className: "ds-mbti-type-grid__legend-bar ds-mbti-type-grid__legend-bar--gradient" }),
-        /* @__PURE__ */ jsx("span", { className: "ds-mbti-type-grid__legend-label", children: "Distribution density" })
-      ] }),
-      highlightThreshold && /* @__PURE__ */ jsxs("div", { className: "ds-mbti-type-grid__legend-item", children: [
-        /* @__PURE__ */ jsx("span", { className: "ds-mbti-type-grid__legend-bar ds-mbti-type-grid__legend-bar--highlight" }),
-        /* @__PURE__ */ jsxs("span", { className: "ds-mbti-type-grid__legend-label", children: [
-          ">=",
-          highlightThreshold,
-          "% of sample"
-        ] })
-      ] })
-    ] })
-  ] });
-}
-MBTITypeGrid.displayName = "MBTITypeGrid";
-
-export { BarChart, Chart, ChartContainer, ChartSwitchControl, FunnelChart, HeatmapChart, LineChart, MBTIRadar, MBTITypeGrid, PieChart };
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-GUZIMHWS.js.map