@giddaa-housing/ui 0.1.0 → 1.1.0

package/dist/funnel-chart.js

@@ -1,569 +1,174 @@
-// src/components/ui/funnel-chart.tsx
-import { cva as cva2 } from "class-variance-authority";
-import {
-  Bar,
-  BarChart,
-  Funnel,
-  FunnelChart as RechartsFunnelChart,
-  XAxis,
-  YAxis
-} from "recharts";
-
-// src/lib/cn.ts
-import { clsx } from "clsx";
-import { extendTailwindMerge } from "tailwind-merge";
-var twMerge = extendTailwindMerge({
-  extend: {
-    classGroups: {
-      "font-size": [
-        {
-          text: [
-            "gdt-display",
-            "gdt-h1",
-            "gdt-h2",
-            "gdt-h3",
-            "gdt-h4",
-            "gdt-h5",
-            "gdt-xl",
-            "gdt-lg",
-            "gdt-md",
-            "gdt-sm",
-            "gdt-xs",
-            "gdt-subtext",
-            "gdt-capitalized"
-          ]
-        }
-      ]
-    }
-  }
-});
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-
-// src/components/ui/chart.tsx
+"use client";
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { useComponentSize } from "./size-context.js";
+import { ChartCard, ChartContainer, ChartDescription, ChartHeader, ChartTitle, ChartTooltip, ChartTooltipContent } from "./chart.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
-import * as React from "react";
-import * as RechartsPrimitive from "recharts";
-
-// src/components/ui/size-context.tsx
-import { createContext, useContext } from "react";
-import { Fragment, jsx } from "react/jsx-runtime";
-var SizeContext = createContext(void 0);
-function SizeProvider({
-  children,
-  size
-}) {
-  if (!size) {
-    return /* @__PURE__ */ jsx(Fragment, { children });
-  }
-  return /* @__PURE__ */ jsx(SizeContext.Provider, { value: size, children });
-}
-function useComponentSize(size, fallback = "md") {
-  const inheritedSize = useContext(SizeContext);
-  return size ?? inheritedSize ?? fallback;
-}
-
-// src/components/ui/chart.tsx
-import { Fragment as Fragment2, jsx as jsx2, jsxs } from "react/jsx-runtime";
-var SERIES_COLOR_PLACEHOLDER = "var(--color-surface-brand)";
-function formatChartValue(value, type) {
-  if (Array.isArray(value)) {
-    return value.join(", ");
-  }
-  if (typeof value !== "number") {
-    return value == null ? "" : String(value);
-  }
-  switch (type) {
-    case "currency":
-      return `\u20A6${value.toLocaleString("en-NG")}`;
-    case "percentage":
-      return `${value.toLocaleString("en-NG", {
-        minimumFractionDigits: 1,
-        maximumFractionDigits: 1
-      })}%`;
-    default:
-      return value.toLocaleString("en-NG");
-  }
-}
-var THEMES = { light: "", dark: ".dark" };
-var INITIAL_DIMENSION = { width: 320, height: 200 };
-var ChartContext = React.createContext(null);
-function useChart() {
-  const context = React.useContext(ChartContext);
-  if (!context) {
-    throw new Error("useChart must be used within a <ChartContainer />");
-  }
-  return context;
-}
-var chartCardVariants = cva(
-  "flex w-full min-w-0 flex-col rounded-2xl border border-line-subtle bg-surface-raised text-fg-primary shadow-1",
-  {
-    variants: {
-      size: {
-        sm: "gap-3 p-4",
-        md: "gap-4 p-5",
-        lg: "gap-5 p-6"
-      }
-    },
-    defaultVariants: { size: "md" }
-  }
-);
-function ChartCard({
-  className,
-  size,
-  children,
-  ...props
-}) {
-  const resolvedSize = useComponentSize(size);
-  return /* @__PURE__ */ jsx2(SizeProvider, { size: resolvedSize, children: /* @__PURE__ */ jsx2(
-    "section",
-    {
-      "data-slot": "chart-card",
-      className: cn(chartCardVariants({ size: resolvedSize }), className),
-      ...props,
-      children
-    }
-  ) });
-}
-function ChartHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx2(
-    "div",
-    {
-      "data-slot": "chart-header",
-      className: cn("flex min-w-0 flex-col gap-1", className),
-      ...props
-    }
-  );
-}
-var chartTitleVariants = cva("min-w-0 font-bold text-fg-primary", {
-  variants: {
-    size: {
-      sm: "text-gdt-md",
-      md: "text-gdt-lg",
-      lg: "text-gdt-h5"
-    }
-  },
-  defaultVariants: { size: "md" }
-});
-function ChartTitle({
-  className,
-  size,
-  ...props
-}) {
-  const resolvedSize = useComponentSize(size);
-  return /* @__PURE__ */ jsx2(
-    "h3",
-    {
-      "data-slot": "chart-title",
-      className: cn(chartTitleVariants({ size: resolvedSize }), className),
-      ...props
-    }
-  );
-}
-var chartDescriptionVariants = cva("min-w-0 font-normal text-fg-secondary", {
-  variants: {
-    size: {
-      sm: "text-gdt-xs",
-      md: "text-gdt-sm",
-      lg: "text-gdt-sm"
-    }
-  },
-  defaultVariants: { size: "md" }
-});
-function ChartDescription({
-  className,
-  size,
-  ...props
-}) {
-  const resolvedSize = useComponentSize(size);
-  return /* @__PURE__ */ jsx2(
-    "p",
-    {
-      "data-slot": "chart-description",
-      className: cn(
-        chartDescriptionVariants({ size: resolvedSize }),
-        className
-      ),
-      ...props
-    }
-  );
-}
-function ChartContainer({
-  id,
-  className,
-  children,
-  config,
-  initialDimension = INITIAL_DIMENSION,
-  ...props
-}) {
-  const uniqueId = React.useId();
-  const chartId = `chart-${id ?? uniqueId.replace(/:/g, "")}`;
-  return /* @__PURE__ */ jsx2(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ jsxs(
-    "div",
-    {
-      "data-slot": "chart",
-      "data-chart": chartId,
-      className: cn(
-        "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
-        className
-      ),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx2(ChartStyle, { id: chartId, config }),
-        /* @__PURE__ */ jsx2(
-          RechartsPrimitive.ResponsiveContainer,
-          {
-            initialDimension,
-            children
-          }
-        )
-      ]
-    }
-  ) });
-}
-var ChartStyle = ({ id, config }) => {
-  const colorConfig = Object.entries(config).filter(
-    ([, config2]) => config2.theme ?? config2.color
-  );
-  if (!colorConfig.length) {
-    return null;
-  }
-  const styleContent = Object.entries(THEMES).map(
-    ([theme, prefix]) => `
-${prefix} [data-chart=${id}] {
-${colorConfig.map(([key, itemConfig]) => {
-      const color = itemConfig.theme?.[theme] ?? itemConfig.color;
-      return color ? `  --color-${key}: ${color};` : null;
-    }).join("\n")}
-}
-`
-  ).join("\n");
-  return /* @__PURE__ */ jsx2("style", { children: styleContent });
-};
-var ChartTooltip = RechartsPrimitive.Tooltip;
-var chartTooltipVariants = cva(
-  "flex flex-col bg-surface-overlay border border-line-subtle shadow-2",
-  {
-    variants: {
-      size: {
-        xs: "gap-0.5 rounded-md p-2",
-        sm: "gap-0.5 rounded-md p-2.5",
-        md: "gap-1 rounded-lg p-3",
-        lg: "gap-1 rounded-xl p-3.5"
-      }
-    },
-    defaultVariants: {
-      size: "md"
-    }
-  }
-);
-var chartTooltipDotVariants = cva("shrink-0 rounded-full", {
-  variants: {
-    size: {
-      xs: "size-1.5",
-      sm: "size-2",
-      md: "size-2.5",
-      lg: "size-2.5"
-    }
-  },
-  defaultVariants: {
-    size: "md"
-  }
-});
-var chartTooltipLabelVariants = cva("font-medium text-fg-secondary", {
-  variants: {
-    size: {
-      xs: "text-gdt-xs",
-      sm: "text-gdt-xs",
-      md: "text-gdt-sm",
-      lg: "text-gdt-sm"
-    }
-  },
-  defaultVariants: { size: "md" }
-});
-var chartTooltipValueVariants = cva(
-  "font-extrabold text-fg-primary tabular-nums",
-  {
-    variants: {
-      size: {
-        xs: "text-gdt-sm",
-        sm: "text-gdt-md",
-        md: "text-gdt-lg",
-        lg: "text-gdt-xl"
-      }
-    },
-    defaultVariants: { size: "md" }
-  }
-);
-function ChartTooltipContent({
-  active,
-  payload,
-  className,
-  hideIndicator = false,
-  label,
-  labelFormatter,
-  formatter,
-  color,
-  nameKey,
-  valueType = "number",
-  size = "md"
-}) {
-  const { config } = useChart();
-  if (!active || !payload?.length) {
-    return null;
-  }
-  const [item] = payload.filter((entry) => entry.type !== "none");
-  if (!item) {
-    return null;
-  }
-  const key = `${nameKey ?? item.name ?? item.dataKey ?? "value"}`;
-  const itemConfig = getPayloadConfigFromPayload(config, item, key);
-  const dotColor = color ?? item.payload?.fill ?? item.color ?? SERIES_COLOR_PLACEHOLDER;
-  const metricLabel = itemConfig?.label ?? item.name;
-  const heroValue = formatter ? formatter(item.value, item.name ?? "", item, 0, item.payload) : formatChartValue(item.value, valueType);
-  const periodCaption = labelFormatter ? labelFormatter(label, payload) : (typeof label === "string" ? config[label]?.label : null) ?? label;
-  return /* @__PURE__ */ jsxs("div", { className: cn(chartTooltipVariants({ size }), className), children: [
-    metricLabel != null && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 [&>svg]:size-3 [&>svg]:shrink-0", children: [
-      !hideIndicator && (itemConfig?.icon ? /* @__PURE__ */ jsx2(itemConfig.icon, {}) : /* @__PURE__ */ jsx2(
-        "span",
-        {
-          "aria-hidden": "true",
-          className: cn(chartTooltipDotVariants({ size })),
-          style: { backgroundColor: dotColor }
-        }
-      )),
-      /* @__PURE__ */ jsx2("span", { className: cn(chartTooltipLabelVariants({ size })), children: metricLabel })
-    ] }),
-    /* @__PURE__ */ jsx2("p", { className: cn(chartTooltipValueVariants({ size })), children: heroValue }),
-    periodCaption != null && periodCaption !== "" && /* @__PURE__ */ jsx2("p", { className: "text-gdt-xs text-fg-caption-placeholder", children: periodCaption })
-  ] });
-}
-var chartLegendItemVariants = cva(
-  "group/legend-item flex items-center rounded-md leading-none text-fg-primary transition-colors [&>svg]:shrink-0",
-  {
-    variants: {
-      size: {
-        sm: "gap-1.5 px-2 py-1 text-gdt-xs [&>svg]:size-3",
-        md: "gap-2 px-2.5 py-1.5 text-gdt-sm [&>svg]:size-3.5"
-      },
-      interactive: {
-        true: "cursor-pointer outline-none hover:bg-surface-raised focus-visible:bg-surface-raised",
-        false: ""
-      },
-      inactive: {
-        true: "text-fg-caption-placeholder line-through",
-        false: ""
-      }
-    },
-    defaultVariants: {
-      size: "md",
-      interactive: false,
-      inactive: false
-    }
-  }
-);
-var chartLegendMarkerSizeVariants = cva("shrink-0", {
-  variants: {
-    marker: {
-      dot: "rounded-full",
-      square: "rounded-[2px]",
-      line: "rounded-full"
-    },
-    size: {
-      sm: "",
-      md: ""
-    }
-  },
-  compoundVariants: [
-    { marker: ["dot", "square"], size: "sm", className: "size-2" },
-    { marker: ["dot", "square"], size: "md", className: "size-2.5" },
-    { marker: "line", size: "sm", className: "h-[3px] w-3" },
-    { marker: "line", size: "md", className: "h-[3px] w-3.5" }
-  ],
-  defaultVariants: { marker: "dot", size: "md" }
-});
-function getPayloadConfigFromPayload(config, payload, key) {
-  if (typeof payload !== "object" || payload === null) {
-    return void 0;
-  }
-  const payloadPayload = "payload" in payload && typeof payload.payload === "object" && payload.payload !== null ? payload.payload : void 0;
-  let configLabelKey = key;
-  if (key in payload && typeof payload[key] === "string") {
-    configLabelKey = payload[key];
-  } else if (payloadPayload && key in payloadPayload && typeof payloadPayload[key] === "string") {
-    configLabelKey = payloadPayload[key];
-  }
-  return configLabelKey in config ? config[configLabelKey] : config[key];
-}
-
-// src/components/ui/funnel-chart.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var FUNNEL_CHART_PALETTE = [
-  "var(--color-forest-700)",
-  "var(--color-brass-500)",
-  "var(--color-moss-600)",
-  "var(--color-clay-500)",
-  "var(--color-stone-500)"
+import { Bar, BarChart, Funnel, FunnelChart as FunnelChart$1, XAxis, YAxis } from "recharts";
+//#region src/funnel-chart.tsx
+/**
+* Stage palette, ordered top-of-funnel → bottom: forest → brass → moss → clay →
+* stone. Giddaa has no `chart-1`…`chart-N` tokens yet, so these map to the brand
+* scales; assign by order, or override per stage with `fill`.
+*/
+const FUNNEL_CHART_PALETTE = [
+	"var(--color-forest-700)",
+	"var(--color-brass-500)",
+	"var(--color-moss-600)",
+	"var(--color-clay-500)",
+	"var(--color-stone-500)"
 ];
-var FUNNEL_CHART_LAYOUT = {
-  sm: { height: 150, width: 150, barRadius: 3, barMaxSize: 14 },
-  md: { height: 200, width: 220, barRadius: 4, barMaxSize: 18 },
-  lg: { height: 264, width: 288, barRadius: 5, barMaxSize: 22 }
+const FUNNEL_CHART_LAYOUT = {
+	sm: {
+		height: 150,
+		width: 150,
+		barRadius: 3,
+		barMaxSize: 14
+	},
+	md: {
+		height: 200,
+		width: 220,
+		barRadius: 4,
+		barMaxSize: 18
+	},
+	lg: {
+		height: 264,
+		width: 288,
+		barRadius: 5,
+		barMaxSize: 22
+	}
 };
-var funnelStageListVariants = cva2("flex min-w-0 flex-col", {
-  variants: {
-    size: {
-      sm: "gap-2 text-gdt-xs",
-      md: "gap-3 text-gdt-sm",
-      lg: "gap-3.5 text-gdt-sm"
-    }
-  },
-  defaultVariants: { size: "md" }
+/** Vertical stage list — value-label column and the right-hand legend share it. */
+const funnelStageListVariants = cva("flex min-w-0 flex-col", {
+	variants: { size: {
+		sm: "gap-2 text-gdt-xs",
+		md: "gap-3 text-gdt-sm",
+		lg: "gap-3.5 text-gdt-sm"
+	} },
+	defaultVariants: { size: "md" }
 });
-var funnelLegendDotVariants = cva2("shrink-0 rounded-full", {
-  variants: {
-    size: { sm: "size-2", md: "size-2.5", lg: "size-3" }
-  },
-  defaultVariants: { size: "md" }
+const funnelLegendDotVariants = cva("shrink-0 rounded-full", {
+	variants: { size: {
+		sm: "size-2",
+		md: "size-2.5",
+		lg: "size-3"
+	} },
+	defaultVariants: { size: "md" }
 });
-function FunnelChart({
-  data,
-  type = "funnel",
-  size,
-  title,
-  description,
-  tooltip = false,
-  legend = "right",
-  valueFormatter = (value) => value.toLocaleString("en-NG"),
-  valueType = "number",
-  className,
-  ...props
-}) {
-  const resolvedSize = useComponentSize(size);
-  const layout = FUNNEL_CHART_LAYOUT[resolvedSize];
-  const stages = data.map((stage, i) => ({
-    ...stage,
-    fill: stage.fill ?? FUNNEL_CHART_PALETTE[i % FUNNEL_CHART_PALETTE.length]
-  }));
-  const top = stages[0]?.value || 1;
-  const config = Object.fromEntries(
-    stages.map((stage) => [
-      stage.label,
-      { label: stage.label, color: stage.fill }
-    ])
-  );
-  const tooltipNode = tooltip ? /* @__PURE__ */ jsx3(
-    ChartTooltip,
-    {
-      cursor: false,
-      content: /* @__PURE__ */ jsx3(ChartTooltipContent, { nameKey: "label", valueType })
-    }
-  ) : null;
-  const chartNode = type === "bars" ? /* @__PURE__ */ jsxs2(
-    BarChart,
-    {
-      accessibilityLayer: true,
-      layout: "vertical",
-      data: stages,
-      margin: { top: 0, right: 0, bottom: 0, left: 0 },
-      barCategoryGap: "0%",
-      children: [
-        tooltipNode,
-        /* @__PURE__ */ jsx3(XAxis, { type: "number", domain: [0, top], hide: true }),
-        /* @__PURE__ */ jsx3(YAxis, { type: "category", dataKey: "label", hide: true }),
-        /* @__PURE__ */ jsx3(
-          Bar,
-          {
-            dataKey: "value",
-            radius: layout.barRadius,
-            color: "var(--color-line-subtle)",
-            isAnimationActive: false
-          }
-        )
-      ]
-    }
-  ) : /* @__PURE__ */ jsxs2(RechartsFunnelChart, { margin: { top: 0, right: 0, bottom: 0, left: 0 }, children: [
-    tooltipNode,
-    /* @__PURE__ */ jsx3(
-      Funnel,
-      {
-        data: stages,
-        dataKey: "value",
-        nameKey: "label",
-        isAnimationActive: false
-      }
-    )
-  ] });
-  const valueLabels = /* @__PURE__ */ jsx3("ul", { className: cn(funnelStageListVariants({ size: resolvedSize })), children: stages.map((stage) => /* @__PURE__ */ jsxs2(
-    "li",
-    {
-      className: "whitespace-nowrap tabular-nums text-fg-primary",
-      children: [
-        valueFormatter(stage.value),
-        " \xB7",
-        " ",
-        Math.round(stage.value / top * 100),
-        "%"
-      ]
-    },
-    stage.label
-  )) });
-  const legendNode = /* @__PURE__ */ jsx3(
-    "ul",
-    {
-      className: cn(
-        legend === "right" ? funnelStageListVariants({ size: resolvedSize }) : cn(
-          "flex flex-row flex-wrap items-center gap-x-4 gap-y-2",
-          resolvedSize === "sm" ? "text-gdt-xs" : "text-gdt-sm"
-        )
-      ),
-      children: stages.map((stage) => /* @__PURE__ */ jsxs2(
-        "li",
-        {
-          className: "flex items-center gap-2 text-fg-primary",
-          children: [
-            /* @__PURE__ */ jsx3(
-              "span",
-              {
-                "aria-hidden": "true",
-                className: cn(funnelLegendDotVariants({ size: resolvedSize })),
-                style: { backgroundColor: stage.fill }
-              }
-            ),
-            /* @__PURE__ */ jsx3("span", { className: "min-w-0 truncate", children: stage.label })
-          ]
-        },
-        stage.label
-      ))
-    }
-  );
-  return /* @__PURE__ */ jsxs2(ChartCard, { size: resolvedSize, className, ...props, children: [
-    (title != null || description != null) && /* @__PURE__ */ jsxs2(ChartHeader, { children: [
-      title != null && /* @__PURE__ */ jsx3(ChartTitle, { children: title }),
-      description != null && /* @__PURE__ */ jsx3(ChartDescription, { children: description })
-    ] }),
-    /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-4", children: [
-      /* @__PURE__ */ jsxs2("div", { className: "flex flex-wrap items-center gap-x-6 gap-y-4", children: [
-        /* @__PURE__ */ jsx3(
-          ChartContainer,
-          {
-            config,
-            className: "aspect-auto shrink-0",
-            style: { width: layout.width, height: layout.height },
-            children: chartNode
-          }
-        ),
-        valueLabels,
-        legend === "right" && legendNode
-      ] }),
-      legend === "bottom" && legendNode
-    ] })
-  ] });
+function FunnelChart({ data, type = "funnel", size, title, description, tooltip = false, legend = "right", valueFormatter = (value) => value.toLocaleString("en-NG"), valueType = "number", className, ...props }) {
+	const resolvedSize = useComponentSize(size);
+	const layout = FUNNEL_CHART_LAYOUT[resolvedSize];
+	const stages = data.map((stage, i) => ({
+		...stage,
+		fill: stage.fill ?? FUNNEL_CHART_PALETTE[i % FUNNEL_CHART_PALETTE.length]
+	}));
+	const top = stages[0]?.value || 1;
+	const config = Object.fromEntries(stages.map((stage) => [stage.label, {
+		label: stage.label,
+		color: stage.fill
+	}]));
+	const tooltipNode = tooltip ? /* @__PURE__ */ jsx(ChartTooltip, {
+		cursor: false,
+		content: /* @__PURE__ */ jsx(ChartTooltipContent, {
+			nameKey: "label",
+			valueType
+		})
+	}) : null;
+	const chartNode = type === "bars" ? /* @__PURE__ */ jsxs(BarChart, {
+		accessibilityLayer: true,
+		layout: "vertical",
+		data: stages,
+		margin: {
+			top: 0,
+			right: 0,
+			bottom: 0,
+			left: 0
+		},
+		barCategoryGap: "0%",
+		children: [
+			tooltipNode,
+			/* @__PURE__ */ jsx(XAxis, {
+				type: "number",
+				domain: [0, top],
+				hide: true
+			}),
+			/* @__PURE__ */ jsx(YAxis, {
+				type: "category",
+				dataKey: "label",
+				hide: true
+			}),
+			/* @__PURE__ */ jsx(Bar, {
+				dataKey: "value",
+				radius: layout.barRadius,
+				color: "var(--color-line-subtle)",
+				isAnimationActive: false
+			})
+		]
+	}) : /* @__PURE__ */ jsxs(FunnelChart$1, {
+		margin: {
+			top: 0,
+			right: 0,
+			bottom: 0,
+			left: 0
+		},
+		children: [tooltipNode, /* @__PURE__ */ jsx(Funnel, {
+			data: stages,
+			dataKey: "value",
+			nameKey: "label",
+			isAnimationActive: false
+		})]
+	});
+	const valueLabels = /* @__PURE__ */ jsx("ul", {
+		className: cn(funnelStageListVariants({ size: resolvedSize })),
+		children: stages.map((stage) => /* @__PURE__ */ jsxs("li", {
+			className: "whitespace-nowrap tabular-nums text-fg-primary",
+			children: [
+				valueFormatter(stage.value),
+				" ·",
+				" ",
+				Math.round(stage.value / top * 100),
+				"%"
+			]
+		}, stage.label))
+	});
+	const legendNode = /* @__PURE__ */ jsx("ul", {
+		className: cn(legend === "right" ? funnelStageListVariants({ size: resolvedSize }) : cn("flex flex-row flex-wrap items-center gap-x-4 gap-y-2", resolvedSize === "sm" ? "text-gdt-xs" : "text-gdt-sm")),
+		children: stages.map((stage) => /* @__PURE__ */ jsxs("li", {
+			className: "flex items-center gap-2 text-fg-primary",
+			children: [/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: cn(funnelLegendDotVariants({ size: resolvedSize })),
+				style: { backgroundColor: stage.fill }
+			}), /* @__PURE__ */ jsx("span", {
+				className: "min-w-0 truncate",
+				children: stage.label
+			})]
+		}, stage.label))
+	});
+	return /* @__PURE__ */ jsxs(ChartCard, {
+		size: resolvedSize,
+		className,
+		...props,
+		children: [(title != null || description != null) && /* @__PURE__ */ jsxs(ChartHeader, { children: [title != null && /* @__PURE__ */ jsx(ChartTitle, { children: title }), description != null && /* @__PURE__ */ jsx(ChartDescription, { children: description })] }), /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-4",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-center gap-x-6 gap-y-4",
+				children: [
+					/* @__PURE__ */ jsx(ChartContainer, {
+						config,
+						className: "aspect-auto shrink-0",
+						style: {
+							width: layout.width,
+							height: layout.height
+						},
+						children: chartNode
+					}),
+					valueLabels,
+					legend === "right" && legendNode
+				]
+			}), legend === "bottom" && legendNode]
+		})]
+	});
 }
-export {
-  FUNNEL_CHART_LAYOUT,
-  FUNNEL_CHART_PALETTE,
-  FunnelChart
-};
-//# sourceMappingURL=funnel-chart.js.map
+//#endregion
+export { FUNNEL_CHART_LAYOUT, FUNNEL_CHART_PALETTE, FunnelChart };