@flytedan/flytebot-design-system 0.11.5 → 0.12.0

package/dist/index.d.cts

@@ -457,14 +457,27 @@ interface TopbarProps {
         href?: string;
         onClick?: () => void;
     }>;
+    /** Rendered last, after any `overflowActions` — the one control every screen needs to
+     *  keep directly reachable (typically the account menu). Never collapses, at any width. */
     actions?: React.ReactNode;
+    /** Secondary controls (an assistant launcher, a version badge, appearance/dev-tools
+     *  toggles, undo — whatever a screen needs beside `actions`). Rendered inline, in the
+     *  same spot `actions` used to hold everything, on a viewport wider than
+     *  `overflowBreakpoint`. At or under it, they collapse into a single "More actions"
+     *  menu instead of pushing the rest of the bar past the screen edge. Decided once
+     *  here, so every Topbar consumer gets it without re-solving it per screen. */
+    overflowActions?: React.ReactNode;
+    /** Viewport width (px) at or under which `overflowActions` collapses into the "More
+     *  actions" menu. Default 640 — comfortably covers 320/375/430 phone widths without
+     *  touching any tablet or desktop layout above it. */
+    overflowBreakpoint?: number;
     /** Shows the indeterminate route loader on the top edge. */
     loading?: boolean;
     /** Mobile menu handler — renders the hamburger. */
     onMenu?: () => void;
     className?: string;
 }
-declare function Topbar({ crumbs, actions, loading, onMenu, className, ...rest }: TopbarProps): React.JSX.Element;
+declare function Topbar({ crumbs, actions, overflowActions, overflowBreakpoint, loading, onMenu, className, ...rest }: TopbarProps): React.JSX.Element;
 
 /** A person or organisation mark. Initials on a soft brand tint when no image exists. */
 interface AvatarProps {
@@ -2559,9 +2572,9 @@ declare function SaturationDistribution({ campuses, floorBand, floorScore, onSel
 
 /**
  * Realized media mix against the strategic target, one row per channel.
- * Realized is a solid brand bar, target a neutral tick on the same row, and the
- * gap is labelled directly on the bar — the gap is the story, so it never hides
- * in a legend.
+ * Realized is a solid tone bar, target a striped marker on the same row, and the
+ * realized share is labelled directly beside them — the gap is the story, so it
+ * never hides in a legend.
  */
 interface MixGapRow {
     channel: string;

package/dist/index.d.ts

@@ -457,14 +457,27 @@ interface TopbarProps {
         href?: string;
         onClick?: () => void;
     }>;
+    /** Rendered last, after any `overflowActions` — the one control every screen needs to
+     *  keep directly reachable (typically the account menu). Never collapses, at any width. */
     actions?: React.ReactNode;
+    /** Secondary controls (an assistant launcher, a version badge, appearance/dev-tools
+     *  toggles, undo — whatever a screen needs beside `actions`). Rendered inline, in the
+     *  same spot `actions` used to hold everything, on a viewport wider than
+     *  `overflowBreakpoint`. At or under it, they collapse into a single "More actions"
+     *  menu instead of pushing the rest of the bar past the screen edge. Decided once
+     *  here, so every Topbar consumer gets it without re-solving it per screen. */
+    overflowActions?: React.ReactNode;
+    /** Viewport width (px) at or under which `overflowActions` collapses into the "More
+     *  actions" menu. Default 640 — comfortably covers 320/375/430 phone widths without
+     *  touching any tablet or desktop layout above it. */
+    overflowBreakpoint?: number;
     /** Shows the indeterminate route loader on the top edge. */
     loading?: boolean;
     /** Mobile menu handler — renders the hamburger. */
     onMenu?: () => void;
     className?: string;
 }
-declare function Topbar({ crumbs, actions, loading, onMenu, className, ...rest }: TopbarProps): React.JSX.Element;
+declare function Topbar({ crumbs, actions, overflowActions, overflowBreakpoint, loading, onMenu, className, ...rest }: TopbarProps): React.JSX.Element;
 
 /** A person or organisation mark. Initials on a soft brand tint when no image exists. */
 interface AvatarProps {
@@ -2559,9 +2572,9 @@ declare function SaturationDistribution({ campuses, floorBand, floorScore, onSel
 
 /**
  * Realized media mix against the strategic target, one row per channel.
- * Realized is a solid brand bar, target a neutral tick on the same row, and the
- * gap is labelled directly on the bar — the gap is the story, so it never hides
- * in a legend.
+ * Realized is a solid tone bar, target a striped marker on the same row, and the
+ * realized share is labelled directly beside them — the gap is the story, so it
+ * never hides in a legend.
  */
 interface MixGapRow {
     channel: string;

package/dist/index.js

@@ -888,9 +888,35 @@ function Tabs({ tabs = [], value, onChange, className = "", ...rest }) {
 
 // src/components/navigation/Topbar.tsx
 import * as React5 from "react";
-import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
-function Topbar({ crumbs = [], actions, loading = false, onMenu, className = "", ...rest }) {
-  return /* @__PURE__ */ jsxs12("header", { className: ["fd-topbar", className].filter(Boolean).join(" "), ...rest, children: [
+import { Fragment as Fragment4, jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+function useIsNarrow(breakpoint) {
+  const [narrow, setNarrow] = React5.useState(
+    () => typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia(`(max-width: ${breakpoint}px)`).matches
+  );
+  React5.useEffect(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+    const mq = window.matchMedia(`(max-width: ${breakpoint}px)`);
+    const apply = () => setNarrow(mq.matches);
+    apply();
+    mq.addEventListener("change", apply);
+    return () => mq.removeEventListener("change", apply);
+  }, [breakpoint]);
+  return narrow;
+}
+function Topbar({
+  crumbs = [],
+  actions,
+  overflowActions,
+  overflowBreakpoint = 640,
+  loading = false,
+  onMenu,
+  className = "",
+  ...rest
+}) {
+  const narrow = useIsNarrow(overflowBreakpoint);
+  const [moreOpen, setMoreOpen] = React5.useState(false);
+  const moreRef = React5.useRef(null);
+  return /* @__PURE__ */ jsxs12("header", { className: ["fd-topbar", narrow ? "is-narrow" : "", className].filter(Boolean).join(" "), ...rest, children: [
     onMenu ? /* @__PURE__ */ jsx16("button", { type: "button", className: "fd-btn-icon", "aria-label": "Menu", onClick: onMenu, children: /* @__PURE__ */ jsx16("i", { className: "ph ph-list" }) }) : null,
     /* @__PURE__ */ jsx16("nav", { className: "fd-crumb", "aria-label": "Breadcrumb", children: crumbs.map((c, i) => /* @__PURE__ */ jsxs12(React5.Fragment, { children: [
       i > 0 ? /* @__PURE__ */ jsx16("i", { className: "ph ph-caret-right", style: { fontSize: 11, opacity: 0.6 }, "aria-hidden": "true" }) : null,
@@ -907,6 +933,34 @@ function Topbar({ crumbs = [], actions, loading = false, onMenu, className = "",
       )
     ] }, i)) }),
     /* @__PURE__ */ jsx16("span", { style: { flex: 1 } }),
+    overflowActions != null ? narrow ? /* @__PURE__ */ jsxs12(Fragment4, { children: [
+      /* @__PURE__ */ jsx16(
+        "button",
+        {
+          type: "button",
+          ref: moreRef,
+          className: "fd-btn-icon",
+          "aria-label": "More actions",
+          "aria-haspopup": "dialog",
+          "aria-expanded": moreOpen,
+          onClick: () => setMoreOpen((v) => !v),
+          children: /* @__PURE__ */ jsx16("i", { className: "ph ph-dots-three-vertical", "aria-hidden": "true" })
+        }
+      ),
+      /* @__PURE__ */ jsx16(
+        Popover,
+        {
+          open: moreOpen,
+          anchorRef: moreRef,
+          onClose: () => setMoreOpen(false),
+          placement: "bottom-end",
+          padded: true,
+          label: "More actions",
+          className: "fd-topbar-overflow",
+          children: /* @__PURE__ */ jsx16("div", { className: "fd-stack fd-topbar-overflow-list", children: overflowActions })
+        }
+      )
+    ] }) : overflowActions : null,
     actions,
     loading ? /* @__PURE__ */ jsx16("span", { className: "fd-topload", "aria-hidden": "true" }) : null
   ] });
@@ -958,12 +1012,12 @@ function EmptyState({ icon = "tray", title, children, action, className = "", ..
 }
 
 // src/components/feedback/Flag.tsx
-import { Fragment as Fragment4, jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
 function Flag({ statement, cost, actions, tone = "warning", className = "", ...rest }) {
   return /* @__PURE__ */ jsxs16("div", { className: ["fd-flag", "fd-flag-" + tone, className].filter(Boolean).join(" "), role: "status", ...rest, children: [
     /* @__PURE__ */ jsxs16("span", { className: "fd-flag-text", children: [
       statement,
-      cost ? /* @__PURE__ */ jsxs16(Fragment4, { children: [
+      cost ? /* @__PURE__ */ jsxs16(Fragment5, { children: [
         " ",
         /* @__PURE__ */ jsx20("span", { className: "fd-flag-cost", children: cost })
       ] }) : null
@@ -1546,7 +1600,7 @@ function StatTile({ label, value, sub, delta, loading = false, compact: compact3
 
 // src/components/data/CodeBlock.tsx
 import * as React9 from "react";
-import { Fragment as Fragment5, jsx as jsx30, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx30, jsxs as jsxs25 } from "react/jsx-runtime";
 var JS_KW = /^(?:const|let|var|function|return|if|else|for|while|do|new|class|extends|import|from|export|default|await|async|try|catch|finally|throw|typeof|instanceof|of|in|switch|case|break|continue|delete|void|yield|static|get|set|this|super|interface|type|enum|implements|public|private|protected|readonly|abstract|as|satisfies|declare|namespace)$/;
 var RULES = {
   js: [
@@ -1702,7 +1756,7 @@ function tokenize(src, lang) {
 }
 function Highlighted({ code, lang }) {
   const toks = React9.useMemo(() => tokenize(code, lang), [code, lang]);
-  return /* @__PURE__ */ jsx30(Fragment5, { children: toks.map((tk, i) => tk.c ? /* @__PURE__ */ jsx30("span", { className: "tok-" + tk.c, children: tk.t }, i) : tk.t) });
+  return /* @__PURE__ */ jsx30(Fragment6, { children: toks.map((tk, i) => tk.c ? /* @__PURE__ */ jsx30("span", { className: "tok-" + tk.c, children: tk.t }, i) : tk.t) });
 }
 function useCopy() {
   const [done, setDone] = React9.useState(false);
@@ -2066,7 +2120,7 @@ function Meter({ segments = [], unallocated = 0, height = 8, label, legend = fal
 }
 
 // src/components/data/Pagination.tsx
-import { Fragment as Fragment7, jsx as jsx33, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx33, jsxs as jsxs28 } from "react/jsx-runtime";
 function Pagination({
   page = 1,
   pageSize = 25,
@@ -2092,10 +2146,10 @@ function Pagination({
     else if (nums[nums.length - 1] !== "\u2026") nums.push("\u2026");
   }
   return /* @__PURE__ */ jsxs28("div", { className: ["fd-pag", className].filter(Boolean).join(" "), ...rest, children: [
-    /* @__PURE__ */ jsx33("span", { className: "fd-pag-count", children: loading ? /* @__PURE__ */ jsx33("span", { className: "fd-skel fd-skel-text", style: { display: "inline-block", height: 12, width: 108 } }) : total === 0 ? /* @__PURE__ */ jsxs28(Fragment7, { children: [
+    /* @__PURE__ */ jsx33("span", { className: "fd-pag-count", children: loading ? /* @__PURE__ */ jsx33("span", { className: "fd-skel fd-skel-text", style: { display: "inline-block", height: 12, width: 108 } }) : total === 0 ? /* @__PURE__ */ jsxs28(Fragment8, { children: [
       "No ",
       unit
-    ] }) : /* @__PURE__ */ jsxs28(Fragment7, { children: [
+    ] }) : /* @__PURE__ */ jsxs28(Fragment8, { children: [
       /* @__PURE__ */ jsxs28("strong", { children: [
         from.toLocaleString(),
         "\u2013",
@@ -6579,7 +6633,7 @@ var SessionKit = {
 };
 
 // src/components/platform/AccountMenu.tsx
-import { Fragment as Fragment14, jsx as jsx57, jsxs as jsxs52 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx57, jsxs as jsxs52 } from "react/jsx-runtime";
 var DEFAULT_LINKS = [
   { id: "profile", label: "Your profile", icon: "user-circle", href: "../admin/index.html#profile" },
   { id: "preferences", label: "Preferences", icon: "sliders-horizontal", href: "../admin/index.html#preferences" }
@@ -6632,7 +6686,7 @@ function AccountMenu({
     if (onSignOut) return onSignOut();
     window.alert("Signed out. (Simulated \u2014 no auth provider is wired up.)");
   };
-  return /* @__PURE__ */ jsxs52(Fragment14, { children: [
+  return /* @__PURE__ */ jsxs52(Fragment15, { children: [
     /* @__PURE__ */ jsxs52(
       "button",
       {
@@ -7469,7 +7523,7 @@ function RoadmapTimeline({ onOpenFlag, title = "Roadmap", lede }) {
 // src/components/platform/ComingSoon.tsx
 import * as React35 from "react";
 import { createPortal as createPortal5 } from "react-dom";
-import { Fragment as Fragment16, jsx as jsx61, jsxs as jsxs56 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx61, jsxs as jsxs56 } from "react/jsx-runtime";
 var BYPASS_STORE = "fd.soon.bypass.v1";
 function readBypassed() {
   try {
@@ -7499,7 +7553,7 @@ function useBypass(key) {
   return [on, set];
 }
 function SoonCard({ label, detail, backend, eta, effort, onRoadmap, allowed, onBypass }) {
-  return /* @__PURE__ */ jsxs56(Fragment16, { children: [
+  return /* @__PURE__ */ jsxs56(Fragment17, { children: [
     /* @__PURE__ */ jsxs56("span", { className: "fd-soon-badge", children: [
       /* @__PURE__ */ jsx61("i", { className: "ph ph-traffic-cone", "aria-hidden": "true" }),
       label
@@ -7850,7 +7904,7 @@ function PermissionHint({ perm, children }) {
 
 // src/components/platform/ModeSwitch.tsx
 import * as React36 from "react";
-import { Fragment as Fragment17, jsx as jsx63, jsxs as jsxs58 } from "react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx63, jsxs as jsxs58 } from "react/jsx-runtime";
 function ModeSwitch({ canToggle = false, requestCount = 0, onClearLog, renderLog, onOpenSpec, summary }) {
   const mode2 = useRuntimeMode();
   const [open, setOpen] = React36.useState(false);
@@ -7920,7 +7974,7 @@ function ModeSwitch({ canToggle = false, requestCount = 0, onClearLog, renderLog
             s.total,
             " features complete"
           ] }),
-          onOpenSpec ? /* @__PURE__ */ jsxs58(Fragment17, { children: [
+          onOpenSpec ? /* @__PURE__ */ jsxs58(Fragment18, { children: [
             /* @__PURE__ */ jsx63("span", { style: { flex: 1 } }),
             /* @__PURE__ */ jsxs58("button", { type: "button", className: "fd-soon-link", onClick: () => {
               setOpen(false);
@@ -8105,12 +8159,25 @@ function SaturationDistribution({ campuses = [], floorBand, floorScore, onSelect
 
 // src/components/planner/MixGap.tsx
 import * as React37 from "react";
-import { Fragment as Fragment18, jsx as jsx66, jsxs as jsxs61 } from "react/jsx-runtime";
+import { Fragment as Fragment19, jsx as jsx66, jsxs as jsxs61 } from "react/jsx-runtime";
+var MIX_GAP_LAYOUT = {
+  trackHeight: 30,
+  barHeight: 20,
+  targetWidth: 6,
+  labelGap: 6,
+  labelGutter: 50
+};
+var MIX_GAP_TARGET_STRIPE = "repeating-linear-gradient(135deg, var(--n-600) 0 2px, var(--n-300) 2px 4px)";
+function mixGapOffset(value, max) {
+  return `calc((100% - ${MIX_GAP_LAYOUT.labelGutter}px) * ${value / max})`;
+}
 function MixGap({ rows = [], loading = false, className = "" }) {
   const max = Math.max(1, ...rows.flatMap((r) => [r.target, r.realized]));
   const [hover, setHover] = React37.useState(null);
   const toneOf = (gap) => gap >= -1 ? "ok" : gap >= -4 ? "warn" : "danger";
   const TONE = { ok: "var(--ok-solid)", warn: "var(--warn-solid)", danger: "var(--danger-solid)" };
+  const { trackHeight, barHeight, targetWidth, labelGap } = MIX_GAP_LAYOUT;
+  const barTop = (trackHeight - barHeight) / 2;
   return /* @__PURE__ */ jsxs61("div", { className: ["fd-stack", className].filter(Boolean).join(" "), style: { gap: 4 }, children: [
     /* @__PURE__ */ jsxs61("div", { className: "fd-row", style: { gap: 16, justifyContent: "flex-end", paddingBottom: 6, flexWrap: "wrap" }, children: [
       [["On target", TONE.ok], ["Close", TONE.warn], ["Short", TONE.danger]].map(([l, c]) => /* @__PURE__ */ jsxs61("span", { className: "fd-row fd-body-sm fd-muted", style: { gap: 6 }, children: [
@@ -8118,7 +8185,7 @@ function MixGap({ rows = [], loading = false, className = "" }) {
         l
       ] }, l)),
       /* @__PURE__ */ jsxs61("span", { className: "fd-row fd-body-sm fd-muted", style: { gap: 6 }, children: [
-        /* @__PURE__ */ jsx66("span", { style: { width: 3, height: 14, background: "var(--n-500)" } }),
+        /* @__PURE__ */ jsx66("span", { "data-mixgap-legend-target": "", style: { width: targetWidth, height: 16, borderRadius: 1, background: MIX_GAP_TARGET_STRIPE } }),
         "Target"
       ] })
     ] }),
@@ -8126,6 +8193,7 @@ function MixGap({ rows = [], loading = false, className = "" }) {
       const gap = r.realized - r.target;
       const tone = toneOf(gap);
       const tip = "Realized " + r.realized + "% vs " + r.target + "% target" + (gap < -1 ? " \xB7 " + Math.abs(gap).toFixed(0) + " pts short" : gap > 1 ? " \xB7 " + gap.toFixed(0) + " pts over" : " \xB7 on target") + (r.note ? " \u2014 " + r.note : "");
+      const labelLeft = r.realized > r.target ? `calc(${mixGapOffset(r.realized, max)} + ${labelGap}px)` : `calc(${mixGapOffset(r.target, max)} + ${targetWidth / 2 + labelGap}px)`;
       return /* @__PURE__ */ jsxs61(
         "div",
         {
@@ -8135,14 +8203,14 @@ function MixGap({ rows = [], loading = false, className = "" }) {
           onMouseLeave: () => setHover(null),
           children: [
             /* @__PURE__ */ jsx66("span", { style: { width: 128, flex: "none" }, children: /* @__PURE__ */ jsx66(ChannelTag, { channel: r.channel, size: "sm" }) }),
-            /* @__PURE__ */ jsx66("span", { style: { position: "relative", flex: 1, height: 22, minWidth: 120 }, children: loading ? /* @__PURE__ */ jsx66("span", { className: "fd-skel", style: { position: "absolute", inset: "5px 0", borderRadius: 3 } }) : /* @__PURE__ */ jsxs61(Fragment18, { children: [
-              /* @__PURE__ */ jsx66("span", { style: { position: "absolute", left: 0, top: 5, height: 12, width: r.realized / max * 100 + "%", background: TONE[tone], borderRadius: "2px 3px 3px 2px", transition: "width var(--dur-slow) var(--ease), background var(--dur-base) var(--ease)" } }),
-              /* @__PURE__ */ jsx66("span", { style: { position: "absolute", left: r.target / max * 100 + "%", top: 0, width: 3, height: 22, background: "var(--n-500)", borderRadius: 1 } }),
-              /* @__PURE__ */ jsxs61("span", { className: "fd-num", style: { position: "absolute", right: Math.max(r.realized, r.target) / max > 0.82 ? 0 : "auto", left: Math.max(r.realized, r.target) / max > 0.82 ? "auto" : "calc(" + Math.max(r.realized, r.target) / max * 100 + "% + 10px)", top: 2, fontSize: 12, color: "var(--text-muted)", whiteSpace: "nowrap", background: Math.max(r.realized, r.target) / max > 0.82 ? "var(--surface)" : "none", paddingLeft: 3 }, children: [
+            /* @__PURE__ */ jsx66("span", { style: { position: "relative", flex: 1, height: trackHeight, minWidth: 120 }, children: loading ? /* @__PURE__ */ jsx66("span", { className: "fd-skel", style: { position: "absolute", left: 0, right: 0, top: barTop, height: barHeight, borderRadius: 3 } }) : /* @__PURE__ */ jsxs61(Fragment19, { children: [
+              /* @__PURE__ */ jsx66("span", { "data-mixgap-bar": "", style: { position: "absolute", left: 0, top: barTop, height: barHeight, width: mixGapOffset(r.realized, max), background: TONE[tone], borderRadius: "2px 3px 3px 2px", transition: "width var(--dur-slow) var(--ease), background var(--dur-base) var(--ease)" } }),
+              /* @__PURE__ */ jsx66("span", { "data-mixgap-target": "", style: { position: "absolute", left: `calc(${mixGapOffset(r.target, max)} - ${targetWidth / 2}px)`, top: 0, width: targetWidth, height: trackHeight, background: MIX_GAP_TARGET_STRIPE, borderRadius: 1 } }),
+              /* @__PURE__ */ jsxs61("span", { "data-mixgap-label": "", className: "fd-num", style: { position: "absolute", left: labelLeft, top: "50%", transform: "translateY(-50%)", fontSize: 12, color: "var(--text-muted)", whiteSpace: "nowrap" }, children: [
                 r.realized,
                 "%"
               ] }),
-              hover === r.channel ? /* @__PURE__ */ jsx66("span", { className: "fd-tooltip", role: "tooltip", style: { position: "absolute", left: 0, right: "auto", bottom: 26, maxWidth: "min(340px, 100%)", whiteSpace: "normal", textAlign: "left", width: "max-content" }, children: tip }) : null
+              hover === r.channel ? /* @__PURE__ */ jsx66("span", { className: "fd-tooltip", role: "tooltip", style: { position: "absolute", left: 0, right: "auto", bottom: trackHeight + 4, maxWidth: "min(340px, 100%)", whiteSpace: "normal", textAlign: "left", width: "max-content" }, children: tip }) : null
             ] }) })
           ]
         },
@@ -8249,7 +8317,7 @@ function ChannelContribution({
 
 // src/components/planner/BudgetReallocator.tsx
 import * as React38 from "react";
-import { Fragment as Fragment19, jsx as jsx68, jsxs as jsxs63 } from "react/jsx-runtime";
+import { Fragment as Fragment20, jsx as jsx68, jsxs as jsxs63 } from "react/jsx-runtime";
 var bandFor = (crp) => crp >= 200 ? "dominant" : crp >= 100 ? "strong" : crp >= 50 ? "adequate" : "weak";
 function BudgetReallocator({
   campus,
@@ -8289,7 +8357,7 @@ function BudgetReallocator({
         /* @__PURE__ */ jsxs63("div", { className: "fd-row", style: { gap: 12, flexWrap: "wrap" }, children: [
           /* @__PURE__ */ jsx68("span", { className: "fd-h4", style: { flex: 1, minWidth: 140 }, children: campus }),
           /* @__PURE__ */ jsx68(CsiBadge, { band: nowBand, crp, size: "medium" }),
-          dirty ? /* @__PURE__ */ jsxs63(Fragment19, { children: [
+          dirty ? /* @__PURE__ */ jsxs63(Fragment20, { children: [
             /* @__PURE__ */ jsx68("i", { className: "ph ph-arrow-right fd-muted", "aria-hidden": "true" }),
             /* @__PURE__ */ jsx68(CsiBadge, { band: nextBand, crp: nextCrp, size: "medium", preview: true })
           ] }) : null