@flytedan/flytebot-design-system 0.11.4 → 0.11.5

package/dist/index.d.cts

@@ -1354,8 +1354,9 @@ interface EntityRowMetric {
     icon?: string;
     /** Fixed cell width in px. Same value on the same column of every row is what makes
      *  the strip a real aligned column rather than text that happens to sit near text.
-     *  On a narrow screen (≤768px) cells size to their figure instead, so a phone-width row
-     *  shows every figure rather than clipping whole columns off its end. */
+     *  It is the width a cell takes when the strip has room for every column at its width;
+     *  in a strip too narrow for that, cells shrink toward their own figure first, so a
+     *  narrow row loses alignment before it loses a figure. */
     width?: number;
     tone?: "default" | "muted" | "danger";
 }

package/dist/index.d.ts

@@ -1354,8 +1354,9 @@ interface EntityRowMetric {
     icon?: string;
     /** Fixed cell width in px. Same value on the same column of every row is what makes
      *  the strip a real aligned column rather than text that happens to sit near text.
-     *  On a narrow screen (≤768px) cells size to their figure instead, so a phone-width row
-     *  shows every figure rather than clipping whole columns off its end. */
+     *  It is the width a cell takes when the strip has room for every column at its width;
+     *  in a strip too narrow for that, cells shrink toward their own figure first, so a
+     *  narrow row loses alignment before it loses a figure. */
     width?: number;
     tone?: "default" | "muted" | "danger";
 }

package/dist/index.js

@@ -2833,16 +2833,13 @@ function EntityRowMetrics({ metrics, className = "", style }) {
   return /* @__PURE__ */ jsx39("span", { className: ["fd-erow-metrics", className].filter(Boolean).join(" "), style, children: metrics.map((m, i) => {
     const key = m.id || m.label || i;
     const className2 = ["fd-erow-metric", m.tone && m.tone !== "default" ? "is-" + m.tone : "", m.tooltip != null ? "is-described" : ""].filter(Boolean).join(" ");
-    const cellStyle = { "--erow-metric-w": (m.width || ENTITY_ROW_METRIC_WIDTH) + "px", color: METRIC_TONE_COLOR[m.tone || "default"] };
+    const tone = { color: METRIC_TONE_COLOR[m.tone || "default"] };
     const content = /* @__PURE__ */ jsxs35(React17.Fragment, { children: [
       m.icon ? /* @__PURE__ */ jsx39("i", { className: "ph ph-" + m.icon, "aria-hidden": "true" }) : null,
       /* @__PURE__ */ jsx39("span", { className: "fd-erow-metric-value fd-tabular", children: m.value }),
       /* @__PURE__ */ jsx39("span", { className: "fd-sr", children: " " + m.label })
     ] });
-    if (m.tooltip == null) {
-      return /* @__PURE__ */ jsx39("span", { className: className2, style: cellStyle, title: m.label, children: content }, key);
-    }
-    return /* @__PURE__ */ jsx39(Tooltip, { label: m.tooltip, children: /* @__PURE__ */ jsx39("button", { type: "button", className: className2, style: cellStyle, children: content }) }, key);
+    return /* @__PURE__ */ jsx39("span", { className: "fd-erow-cell", style: { "--erow-metric-w": (m.width || ENTITY_ROW_METRIC_WIDTH) + "px" }, children: m.tooltip == null ? /* @__PURE__ */ jsx39("span", { className: className2, style: tone, title: m.label, children: content }) : /* @__PURE__ */ jsx39(Tooltip, { label: m.tooltip, children: /* @__PURE__ */ jsx39("button", { type: "button", className: className2, style: tone, children: content }) }) }, key);
   }) });
 }
 function EntityRow({
@@ -3198,8 +3195,10 @@ function TransferList({
     );
   };
   return /* @__PURE__ */ jsxs38("div", { className: ["fd-tlist", className].filter(Boolean).join(" "), children: [
-    renderSide("left", left, "right"),
-    renderSide("right", right, "left"),
+    /* @__PURE__ */ jsxs38("div", { className: "fd-tlist-panes", children: [
+      renderSide("left", left, "right"),
+      renderSide("right", right, "left")
+    ] }),
     drag ? createPortal4(
       /* @__PURE__ */ jsx43(
         "div",