@flytedan/flytebot-design-system 0.52.0 → 0.53.0

package/dist/index.d.cts

@@ -1109,7 +1109,7 @@ interface FunnelChartProps {
  * FunnelChart — ordered steps drawn as a tapering stack (Sent -> Delivered -> Clicked ->
  * Opted-out, the reference front end's own shape, PLN-2 SMS-20), each reporting its
  * value, its step rate (conversion from the step before it) and its percent of the
- * first step. Colour comes only from `--chart-1..8` (MP-210), one per step in order.
+ * first step. Each step's label (name, value, rates) sits above its own bar. Colour comes only from `--chart-1..8` (MP-210), one per step in order.
  *
  * Every step is a real `<button>` wrapped in the kit's `Tooltip`, keyboard-reachable
  * exactly like `BarList`'s rows — a funnel is a ranked, ordered list before it is a

package/dist/index.d.ts

@@ -1109,7 +1109,7 @@ interface FunnelChartProps {
  * FunnelChart — ordered steps drawn as a tapering stack (Sent -> Delivered -> Clicked ->
  * Opted-out, the reference front end's own shape, PLN-2 SMS-20), each reporting its
  * value, its step rate (conversion from the step before it) and its percent of the
- * first step. Colour comes only from `--chart-1..8` (MP-210), one per step in order.
+ * first step. Each step's label (name, value, rates) sits above its own bar. Colour comes only from `--chart-1..8` (MP-210), one per step in order.
  *
  * Every step is a real `<button>` wrapped in the kit's `Tooltip`, keyboard-reachable
  * exactly like `BarList`'s rows — a funnel is a ranked, ordered list before it is a

package/dist/index.js

@@ -2779,19 +2779,6 @@ function FunnelChart({
           const color = chartColor(i);
           const detail = `${s.label} \u2014 ${valueFormat(value)} \xB7 ${formatPercent(Math.round(pctFirst))} of ${steps[0]?.label || "first step"}` + (stepRate != null ? ` \xB7 ${formatPercent(Math.round(stepRate))} of ${steps[i - 1].label}` : "");
           return /* @__PURE__ */ jsx40("li", { className: "fd-funnel-row", children: /* @__PURE__ */ jsx40(Tooltip, { label: detail, children: /* @__PURE__ */ jsxs32("button", { type: "button", className: "fd-funnel-btn", children: [
-            /* @__PURE__ */ jsx40("span", { className: "fd-funnel-shape-wrap", style: { height: barHeight }, children: /* @__PURE__ */ jsx40(
-              "span",
-              {
-                className: "fd-funnel-shape",
-                role: "img",
-                "aria-label": detail,
-                style: {
-                  width: widthPct + "%",
-                  background: color,
-                  clipPath: `polygon(${insetTop}% 0, ${100 - insetTop}% 0, ${100 - insetBottom}% 100%, ${insetBottom}% 100%)`
-                }
-              }
-            ) }),
             /* @__PURE__ */ jsxs32("span", { className: "fd-funnel-meta", children: [
               /* @__PURE__ */ jsx40("span", { className: "fd-funnel-label", title: truncationTitle(s.label), children: s.label }),
               /* @__PURE__ */ jsx40("span", { className: "fd-funnel-value fd-tabular", children: valueFormat(value) }),
@@ -2805,7 +2792,20 @@ function FunnelChart({
                   " of first"
                 ] })
               ] })
-            ] })
+            ] }),
+            /* @__PURE__ */ jsx40("span", { className: "fd-funnel-shape-wrap", style: { height: barHeight }, children: /* @__PURE__ */ jsx40(
+              "span",
+              {
+                className: "fd-funnel-shape",
+                role: "img",
+                "aria-label": detail,
+                style: {
+                  width: widthPct + "%",
+                  background: color,
+                  clipPath: `polygon(${insetTop}% 0, ${100 - insetTop}% 0, ${100 - insetBottom}% 100%, ${insetBottom}% 100%)`
+                }
+              }
+            ) })
           ] }) }) }, s.id);
         }) }),
         /* @__PURE__ */ jsx40(