@designa8/vibedesign-stripe-deepseek-85ea 0.2.3 → 0.3.0

package/dist/index.cjs

@@ -97,6 +97,7 @@ __export(src_exports, {
   PAYMENT_RANGES: () => PAYMENT_RANGES,
   PAYMENT_ROWS: () => PAYMENT_ROWS,
   Pagination: () => Pagination,
+  Panel: () => Panel,
   PaymentRoutingCanvas: () => PaymentRoutingCanvas,
   PricingTable: () => PricingTable,
   PricingTableDesktop: () => PricingTableDesktop,
@@ -240,7 +241,8 @@ var ICON_REGISTRY = {
   "grip-vertical": { viewBox: "0 0 24 24", nodes: [{ tag: "circle", cx: "9", cy: "12", r: "1" }, { tag: "circle", cx: "9", cy: "5", r: "1" }, { tag: "circle", cx: "9", cy: "19", r: "1" }, { tag: "circle", cx: "15", cy: "12", r: "1" }, { tag: "circle", cx: "15", cy: "5", r: "1" }, { tag: "circle", cx: "15", cy: "19", r: "1" }] },
   "euro": { viewBox: "0 0 24 24", nodes: [{ tag: "path", d: "M4 10h12" }, { tag: "path", d: "M4 14h9" }, { tag: "path", d: "M19 6a7.7 7.7 0 0 0-5.2-2A7.9 7.9 0 0 0 6 12c0 4.4 3.5 8 7.8 8 2 0 3.8-.8 5.2-2" }] },
   "square": { viewBox: "0 0 24 24", nodes: [{ tag: "rect", width: "18", height: "18", x: "3", y: "3", rx: "2" }] },
-  "eye-off": { viewBox: "0 0 24 24", nodes: [{ tag: "path", d: "M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49" }, { tag: "path", d: "M14.084 14.158a3 3 0 0 1-4.242-4.242" }, { tag: "path", d: "M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143" }, { tag: "path", d: "m2 2 20 20" }] }
+  "eye-off": { viewBox: "0 0 24 24", nodes: [{ tag: "path", d: "M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49" }, { tag: "path", d: "M14.084 14.158a3 3 0 0 1-4.242-4.242" }, { tag: "path", d: "M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143" }, { tag: "path", d: "m2 2 20 20" }] },
+  "chart-column": { viewBox: "0 0 24 24", nodes: [{ tag: "path", d: "M3 3v16a2 2 0 0 0 2 2h16" }, { tag: "path", d: "M18 17V9" }, { tag: "path", d: "M13 17V5" }, { tag: "path", d: "M8 17v-3" }] }
 };
 
 // virtual-pkg:src/atoms/Icon/Icon.tsx
@@ -5032,6 +5034,7 @@ function DataTableDesktopInner(props, ref) {
     onFilterChange,
     filterBy,
     searchPlaceholder,
+    searchable = true,
     query,
     onQueryChange,
     searchBy,
@@ -5195,6 +5198,7 @@ function DataTableDesktopInner(props, ref) {
   const headCell = HEAD_CELL;
   const bodyCell = dense ? "px-sm py-sm align-middle text-body-sm" : "px-sm py-md align-middle";
   const rangeTriggerLabel = activeRange?.detail ?? activeRange?.label ?? "";
+  const showToolRow = searchable || activeFilters.length > 0 || Boolean(activeRange) || Boolean(toolbar);
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
     "div",
     {
@@ -5210,8 +5214,8 @@ function DataTableDesktopInner(props, ref) {
             title ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "text-body-lg text-ink", children: title }) : null,
             description ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "text-body-sm text-muted", children: description }) : null
           ] }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex flex-wrap items-center gap-sm", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "w-full shrink-0 sm:w-64", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          showToolRow ? /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex flex-wrap items-center gap-sm", children: [
+            searchable ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "w-full shrink-0 sm:w-64", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
               Input,
               {
                 size: "md",
@@ -5222,7 +5226,7 @@ function DataTableDesktopInner(props, ref) {
                 placeholder: searchPlaceholder ?? "Search",
                 leading: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Icon, { name: "search", size: 16, strokeWidth: 2, tone: "default" })
               }
-            ) }),
+            ) }) : null,
             activeFilters.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex flex-wrap items-center gap-xs", children: activeFilters.map((item) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
               Chip,
               {
@@ -5278,7 +5282,7 @@ function DataTableDesktopInner(props, ref) {
               }
             ) }) : null,
             toolbar ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "ml-auto flex shrink-0 items-center gap-xs", children: toolbar }) : null
-          ] })
+          ] }) : null
         ] }),
         activeRange && typeof document !== "undefined" ? (0, import_react_dom2.createPortal)(
           /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
@@ -5704,6 +5708,7 @@ function DataTableMobileInner(props, ref) {
     onFilterChange,
     filterBy,
     searchPlaceholder,
+    searchable = true,
     query,
     onQueryChange,
     searchBy,
@@ -5790,6 +5795,10 @@ function DataTableMobileInner(props, ref) {
   const subtitleText = activeSpec?.subtitle;
   const trailingText = activeSpec?.trailing;
   const metaText = activeSpec?.meta;
+  const hasRanges = Boolean(ranges && ranges.length > 0);
+  const hasHeader = Boolean(
+    title || description || searchable || activeFilters.length > 0 || hasRanges || toolbar
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
     "div",
     {
@@ -5800,12 +5809,12 @@ function DataTableMobileInner(props, ref) {
       ),
       ...rest,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex w-full flex-col gap-base px-lg pt-lg pb-base", children: [
+        hasHeader ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex w-full flex-col gap-base px-lg pt-lg pb-base", children: [
           title || description ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex flex-col gap-xs", children: [
             title ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-body-lg text-ink", children: title }) : null,
             description ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-body-sm text-muted", children: description }) : null
           ] }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          searchable ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
             "div",
             {
               className: cn24(
@@ -5830,7 +5839,7 @@ function DataTableMobileInner(props, ref) {
                 }
               )
             }
-          ),
+          ) : null,
           activeFilters.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "flex flex-wrap items-center gap-xs", children: activeFilters.map((item) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
             Chip,
             {
@@ -5845,7 +5854,7 @@ function DataTableMobileInner(props, ref) {
             },
             item.value
           )) }) : null,
-          ranges && ranges.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "flex flex-wrap items-center gap-base", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          hasRanges && ranges ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "flex flex-wrap items-center gap-base", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
             FilterPill,
             {
               menuLabel: "Date range",
@@ -5858,7 +5867,7 @@ function DataTableMobileInner(props, ref) {
             }
           ) }) : null,
           toolbar ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "flex flex-wrap items-center gap-xs", children: toolbar }) : null
-        ] }),
+        ] }) : null,
         bulkActions && selected.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex flex-wrap items-center gap-sm border-t border-hairline bg-surface-soft px-lg py-sm", children: [
           /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { className: "text-body-sm text-ink", children: [
             selected.length,
@@ -6013,6 +6022,7 @@ function DataTableInner(props, ref) {
     onFilterChange,
     filterBy,
     searchPlaceholder,
+    searchable,
     query,
     onQueryChange,
     searchBy,
@@ -6074,6 +6084,7 @@ function DataTableInner(props, ref) {
     onFilterChange: handleFilter,
     filterBy,
     searchPlaceholder,
+    searchable,
     query: activeQuery,
     onQueryChange: handleQuery,
     searchBy,
@@ -11808,20 +11819,75 @@ var Pagination = React59.forwardRef(
 );
 Pagination.displayName = "Pagination";
 
+// virtual-pkg:src/atoms/Panel/Panel.tsx
+var React60 = __toESM(require("react"));
+var import_jsx_runtime60 = require("react/jsx-runtime");
+var cn51 = (...values) => values.filter(Boolean).join(" ");
+var Panel = React60.forwardRef(
+  ({
+    title,
+    meta,
+    actions,
+    headingLevel = 2,
+    id,
+    children,
+    className,
+    ...rest
+  }, ref) => {
+    const generatedId = React60.useId();
+    const baseId = id ?? generatedId;
+    const titleId = `${baseId}-title`;
+    const Heading = headingLevel === 3 ? "h3" : "h2";
+    const hasTrailing = Boolean(meta) || Boolean(actions);
+    return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
+      "section",
+      {
+        ref,
+        id,
+        "aria-labelledby": titleId,
+        className: cn51(
+          "w-full min-w-0 overflow-hidden rounded-xl border border-hairline",
+          "bg-surface p-xl shadow-card",
+          className
+        ),
+        ...rest,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "mb-lg flex min-w-0 flex-wrap items-center justify-between gap-x-md gap-y-sm", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+              Heading,
+              {
+                id: titleId,
+                className: "min-w-0 truncate text-heading-sm text-ink",
+                children: title
+              }
+            ),
+            hasTrailing ? /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "ml-auto flex shrink-0 items-center gap-md", children: [
+              meta ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: "whitespace-nowrap text-caption text-muted", children: meta }) : null,
+              actions
+            ] }) : null
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "flex min-w-0 flex-col gap-md", children })
+        ]
+      }
+    );
+  }
+);
+Panel.displayName = "Panel";
+
 // virtual-pkg:src/atoms/PaymentRoutingCanvas/PaymentRoutingCanvas.tsx
-var React63 = __toESM(require("react"));
+var React64 = __toESM(require("react"));
 var ReactDOM10 = __toESM(require("react-dom"));
 
 // virtual-pkg:src/atoms/RoutingEdge/RoutingEdge.tsx
-var React60 = __toESM(require("react"));
-var import_jsx_runtime60 = require("react/jsx-runtime");
-var cn51 = (...values) => values.filter(Boolean).join(" ");
+var React61 = __toESM(require("react"));
+var import_jsx_runtime61 = require("react/jsx-runtime");
+var cn52 = (...values) => values.filter(Boolean).join(" ");
 var toneColor = {
   primary: "var(--color-primary)",
   medium: "var(--color-hairline-strong)",
   light: "var(--color-hairline)"
 };
-var RoutingEdge = React60.forwardRef(
+var RoutingEdge = React61.forwardRef(
   ({
     from,
     to,
@@ -11843,11 +11909,11 @@ var RoutingEdge = React60.forwardRef(
     const gap = Math.abs(to.y - from.y);
     const fill = (axis) => dashed || isUnreachable ? `repeating-linear-gradient(${axis === "x" ? "90deg" : "180deg"}, ${color} 0 var(--spacing-xs), transparent var(--spacing-xs) var(--spacing-sm))` : color;
     const segment = "absolute rounded-full transition-all duration-200 ease-out";
-    return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
       "div",
       {
         ref,
-        className: cn51(
+        className: cn52(
           "pointer-events-none absolute inset-0",
           isDimmed ? "opacity-50" : "opacity-100",
           "transition-opacity duration-200 ease-out",
@@ -11857,7 +11923,7 @@ var RoutingEdge = React60.forwardRef(
         "data-edge-state": state,
         ...rest,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
             "span",
             {
               "aria-hidden": "true",
@@ -11871,7 +11937,7 @@ var RoutingEdge = React60.forwardRef(
               }
             }
           ),
-          gap > 0 ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+          gap > 0 ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
             "span",
             {
               "aria-hidden": "true",
@@ -11885,7 +11951,7 @@ var RoutingEdge = React60.forwardRef(
               }
             }
           ) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
             "span",
             {
               "aria-hidden": "true",
@@ -11899,10 +11965,10 @@ var RoutingEdge = React60.forwardRef(
               }
             }
           ),
-          label ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+          label ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
             "span",
             {
-              className: cn51(
+              className: cn52(
                 "absolute -translate-x-1/2 -translate-y-1/2 whitespace-nowrap rounded-sm border px-xs py-xxs",
                 "text-caption transition duration-200 ease-out",
                 isActive ? "border-transparent bg-primary text-on-primary shadow-sm" : isUnreachable ? "border-semantic-error/40 bg-surface text-semantic-error" : "border-hairline-soft bg-surface text-muted"
@@ -11919,9 +11985,9 @@ var RoutingEdge = React60.forwardRef(
 RoutingEdge.displayName = "RoutingEdge";
 
 // virtual-pkg:src/atoms/RoutingNode/RoutingNode.tsx
-var React61 = __toESM(require("react"));
-var import_jsx_runtime61 = require("react/jsx-runtime");
-var cn52 = (...values) => values.filter(Boolean).join(" ");
+var React62 = __toESM(require("react"));
+var import_jsx_runtime62 = require("react/jsx-runtime");
+var cn53 = (...values) => values.filter(Boolean).join(" ");
 var NODE_WIDTH = "var(--container-node, 228px)";
 var accentByType = {
   source: "bg-primary",
@@ -11947,7 +12013,7 @@ var eyebrowByType2 = {
   processor: "Processor",
   fallback: "Fallback"
 };
-var RoutingNode = React61.forwardRef(
+var RoutingNode = React62.forwardRef(
   ({
     type,
     title,
@@ -11970,21 +12036,21 @@ var RoutingNode = React61.forwardRef(
   }, ref) => {
     const glyph5 = icon ?? defaultIconByType[type];
     const highlighted = selected || active;
-    return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
       "div",
       {
         ref,
-        className: cn52("group/node relative shrink-0", className),
+        className: cn53("group/node relative shrink-0", className),
         style: { width: NODE_WIDTH, ...style },
         "data-node-type": type,
         "data-selected": selected || void 0,
         "data-active": active || void 0,
         ...rest,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
             "div",
             {
-              className: cn52(
+              className: cn53(
                 "flex items-stretch overflow-hidden rounded-md border bg-surface",
                 "transition duration-150 ease-out",
                 disabled ? "border-hairline-soft opacity-50" : selected && unreachable ? "border-dashed border-semantic-warning ring-2 ring-primary" : selected ? "border-primary ring-2 ring-primary" : unreachable ? "border-dashed border-semantic-warning" : active ? "border-primary ring-2 ring-primary/25" : conflict ? "border-semantic-error/50" : "border-hairline",
@@ -11992,29 +12058,29 @@ var RoutingNode = React61.forwardRef(
                 disabled ? "" : "group-hover/node:border-hairline-strong group-hover/node:shadow-md"
               ),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
                   "span",
                   {
                     "aria-hidden": "true",
-                    className: cn52("w-xs shrink-0", disabled ? "bg-hairline" : accentByType[type])
+                    className: cn53("w-xs shrink-0", disabled ? "bg-hairline" : accentByType[type])
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "flex min-w-0 flex-1 items-start gap-sm p-sm", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "flex min-w-0 flex-1 items-start gap-sm p-sm", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
                     "span",
                     {
                       "aria-hidden": "true",
-                      className: cn52(
+                      className: cn53(
                         "flex size-lg shrink-0 items-center justify-center rounded-xs",
                         disabled ? "bg-surface-strong text-muted-soft" : glyphTintByType[type]
                       ),
-                      children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Icon, { name: glyph5, size: 12, strokeWidth: 1.75 })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Icon, { name: glyph5, size: 12, strokeWidth: 1.75 })
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-xxs", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "flex items-center gap-xs", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "truncate text-micro-cap text-muted", children: eyebrowByType2[type] }),
-                      unreachable ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-xxs", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "flex items-center gap-xs", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "truncate text-micro-cap text-muted", children: eyebrowByType2[type] }),
+                      unreachable ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
                         Icon,
                         {
                           name: "triangle",
@@ -12024,45 +12090,45 @@ var RoutingNode = React61.forwardRef(
                         }
                       ) : null
                     ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "text-body-sm text-ink", children: title }),
-                    noFallback ? /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("span", { className: "mt-xxs inline-flex items-center gap-xs self-start rounded-xs bg-semantic-warning-soft px-sm py-xxs text-caption text-semantic-warning", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Icon, { name: "triangle", size: 11, strokeWidth: 2, className: "shrink-0" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "text-body-sm text-ink", children: title }),
+                    noFallback ? /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("span", { className: "mt-xxs inline-flex items-center gap-xs self-start rounded-xs bg-semantic-warning-soft px-sm py-xxs text-caption text-semantic-warning", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Icon, { name: "triangle", size: 11, strokeWidth: 2, className: "shrink-0" }),
                       "No fallback"
-                    ] }) : metric || trailing ? /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "flex min-w-0 items-baseline justify-between gap-xs", children: [
-                      metric ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "truncate text-caption text-muted", children: metric }) : null,
-                      trailing ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "shrink-0 text-caption text-muted", children: trailing }) : null
+                    ] }) : metric || trailing ? /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "flex min-w-0 items-baseline justify-between gap-xs", children: [
+                      metric ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "truncate text-caption text-muted", children: metric }) : null,
+                      trailing ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "shrink-0 text-caption text-muted", children: trailing }) : null
                     ] }) : null,
-                    conflict ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "text-caption text-semantic-error", children: conflict }) : null
+                    conflict ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "text-caption text-semantic-error", children: conflict }) : null
                   ] })
                 ] })
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
             "span",
             {
               "aria-hidden": "true",
-              className: cn52(
+              className: cn53(
                 "absolute -left-xs top-1/2 size-sm -translate-y-1/2 rounded-full border-2 transition-colors duration-150 ease-out",
                 highlighted ? "border-primary bg-primary" : "border-hairline-strong bg-surface"
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
             "span",
             {
               "aria-hidden": "true",
-              className: cn52(
+              className: cn53(
                 "absolute -right-xs top-1/2 size-sm -translate-y-1/2 rounded-full border-2 transition-colors duration-150 ease-out",
                 highlighted ? "border-primary bg-primary" : "border-hairline-strong bg-surface"
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
             "span",
             {
               "aria-hidden": "true",
-              className: cn52(
+              className: cn53(
                 "pointer-events-none absolute -top-xl left-md whitespace-nowrap rounded-full bg-primary px-md py-xs text-caption text-on-primary shadow-sm",
                 "transition duration-150 ease-out",
                 showHint ? "translate-y-0 opacity-100" : "-translate-y-xs opacity-0"
@@ -12070,7 +12136,7 @@ var RoutingNode = React61.forwardRef(
               children: "Press Enter"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
             Button,
             {
               variant: "bare",
@@ -12080,7 +12146,7 @@ var RoutingNode = React61.forwardRef(
               "aria-pressed": selected,
               onClick: onNodeSelect,
               className: "absolute inset-0 rounded-md focus-visible:ring-focus-blue focus-visible:ring-offset-0",
-              children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "sr-only", children: title })
+              children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "sr-only", children: title })
             }
           )
         ]
@@ -12091,10 +12157,10 @@ var RoutingNode = React61.forwardRef(
 RoutingNode.displayName = "RoutingNode";
 
 // virtual-pkg:src/atoms/SimulationControls/SimulationControls.tsx
-var React62 = __toESM(require("react"));
-var import_jsx_runtime62 = require("react/jsx-runtime");
-var cn53 = (...values) => values.filter(Boolean).join(" ");
-var SimulationControls = React62.forwardRef(
+var React63 = __toESM(require("react"));
+var import_jsx_runtime63 = require("react/jsx-runtime");
+var cn54 = (...values) => values.filter(Boolean).join(" ");
+var SimulationControls = React63.forwardRef(
   ({
     running = false,
     on = false,
@@ -12106,12 +12172,12 @@ var SimulationControls = React62.forwardRef(
     className,
     ...rest
   }, ref) => {
-    const trackRef = React62.useRef(null);
-    const segmentRef = React62.useRef(null);
-    const [pill, setPill] = React62.useState(
+    const trackRef = React63.useRef(null);
+    const segmentRef = React63.useRef(null);
+    const [pill, setPill] = React63.useState(
       null
     );
-    React62.useEffect(() => {
+    React63.useEffect(() => {
       const measure = () => {
         const track = trackRef.current;
         const segment = segmentRef.current;
@@ -12124,7 +12190,7 @@ var SimulationControls = React62.forwardRef(
       return () => observer.disconnect();
     }, []);
     const armed = on || running;
-    return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
       "div",
       {
         ref: (node) => {
@@ -12134,18 +12200,18 @@ var SimulationControls = React62.forwardRef(
         },
         role: "group",
         "aria-label": label,
-        className: cn53(
+        className: cn54(
           "relative inline-flex items-center gap-xxs rounded-full border border-hairline bg-surface-soft p-xxs",
           "transition-colors duration-150 ease-out",
           className
         ),
         ...rest,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
             "span",
             {
               "aria-hidden": "true",
-              className: cn53(
+              className: cn54(
                 "pointer-events-none absolute bottom-xxs top-xxs rounded-full bg-primary shadow-sm",
                 "transition duration-200 ease-out",
                 armed ? "opacity-100" : "opacity-0"
@@ -12153,7 +12219,7 @@ var SimulationControls = React62.forwardRef(
               style: { left: pill?.left ?? 0, width: pill?.width ?? 0 }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
             Button,
             {
               variant: "bare",
@@ -12161,14 +12227,14 @@ var SimulationControls = React62.forwardRef(
               onClick: onReplay,
               disabled: running,
               "aria-label": "Replay sample transaction",
-              className: cn53(
+              className: cn54(
                 "relative z-10 size-7 shrink-0 rounded-full text-body",
                 "hover:bg-surface-strong hover:text-ink disabled:hover:bg-transparent"
               ),
-              children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Icon, { name: "play", size: 13, strokeWidth: 2 })
+              children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Icon, { name: "play", size: 13, strokeWidth: 2 })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
             Button,
             {
               ref: segmentRef,
@@ -12177,20 +12243,20 @@ var SimulationControls = React62.forwardRef(
               onClick: () => onToggle?.(!on),
               "aria-pressed": armed,
               "aria-label": "Simulation mode",
-              className: cn53(
+              className: cn54(
                 "relative z-10 shrink-0 rounded-full",
                 armed ? "text-on-primary" : "text-muted"
               ),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Icon, { name: running ? "square" : "play", size: 10, strokeWidth: 2.5 }),
+                /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Icon, { name: running ? "square" : "play", size: 10, strokeWidth: 2.5 }),
                 "Simulation"
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
             "span",
             {
-              className: cn53(
+              className: cn54(
                 "relative z-10 px-sm text-caption",
                 armed ? "text-ink" : "text-muted"
               ),
@@ -12210,8 +12276,8 @@ var SimulationControls = React62.forwardRef(
 SimulationControls.displayName = "SimulationControls";
 
 // virtual-pkg:src/atoms/PaymentRoutingCanvas/PaymentRoutingCanvas.tsx
-var import_jsx_runtime63 = require("react/jsx-runtime");
-var cn54 = (...values) => values.filter(Boolean).join(" ");
+var import_jsx_runtime64 = require("react/jsx-runtime");
+var cn55 = (...values) => values.filter(Boolean).join(" ");
 var NODE_W = 228;
 var NODE_H = 78;
 var SOURCE_X = 0;
@@ -12378,7 +12444,7 @@ var computeIssues = (nodes, edges) => {
   return issues;
 };
 var sameIds = (a, b) => a.length === b.length && a.every((id, index) => id === b[index]);
-var PaymentRoutingCanvas = React63.forwardRef(
+var PaymentRoutingCanvas = React64.forwardRef(
   ({
     nodes,
     edges,
@@ -12397,50 +12463,50 @@ var PaymentRoutingCanvas = React63.forwardRef(
     const incomingNodes = nodes ?? DEFAULT_NODES;
     const graphEdges = edges ?? DEFAULT_EDGES;
     const samples = sampleTransaction ?? DEFAULT_SAMPLES;
-    const [localNodes, setLocalNodes] = React63.useState(incomingNodes);
-    const [panelNodeId, setPanelNodeId] = React63.useState("brand");
-    const [panelOpen, setPanelOpen] = React63.useState(true);
-    const [zoom, setZoom] = React63.useState(1);
-    const [fit, setFit] = React63.useState(1);
-    const [planeHeight, setPlaneHeight] = React63.useState(PLANE_H);
-    const [pan, setPan] = React63.useState({ x: 0, y: 0 });
-    const [issuesOpen, setIssuesOpen] = React63.useState(false);
-    const [priority, setPriority] = React63.useState([
+    const [localNodes, setLocalNodes] = React64.useState(incomingNodes);
+    const [panelNodeId, setPanelNodeId] = React64.useState("brand");
+    const [panelOpen, setPanelOpen] = React64.useState(true);
+    const [zoom, setZoom] = React64.useState(1);
+    const [fit, setFit] = React64.useState(1);
+    const [planeHeight, setPlaneHeight] = React64.useState(PLANE_H);
+    const [pan, setPan] = React64.useState({ x: 0, y: 0 });
+    const [issuesOpen, setIssuesOpen] = React64.useState(false);
+    const [priority, setPriority] = React64.useState([
       { id: "p1", label: "Card brand = credit" },
       { id: "p2", label: "Country = DE" },
       { id: "p3", label: "Risk score \u2265 70" }
     ]);
-    const [fallbackEnabled, setFallbackEnabled] = React63.useState(true);
-    const [sampleIndex, setSampleIndex] = React63.useState(0);
-    const [stepIndex, setStepIndex] = React63.useState(2);
-    const [replaying, setReplaying] = React63.useState(false);
-    const [focusedId, setFocusedId] = React63.useState(null);
-    const [anchor, setAnchor] = React63.useState({ top: 0, right: 16 });
+    const [fallbackEnabled, setFallbackEnabled] = React64.useState(true);
+    const [sampleIndex, setSampleIndex] = React64.useState(0);
+    const [stepIndex, setStepIndex] = React64.useState(2);
+    const [replaying, setReplaying] = React64.useState(false);
+    const [focusedId, setFocusedId] = React64.useState(null);
+    const [anchor, setAnchor] = React64.useState({ top: 0, right: 16 });
     const controlledSelection = selectedNodeIds !== void 0;
-    const [internalSelection, setInternalSelection] = React63.useState(
+    const [internalSelection, setInternalSelection] = React64.useState(
       () => defaultSelectedNodeIds ?? DEFAULT_SELECTION
     );
     const selection = controlledSelection ? selectedNodeIds : internalSelection;
-    const selectionRef = React63.useRef(selection);
+    const selectionRef = React64.useRef(selection);
     selectionRef.current = selection;
-    const onSelectionChangeRef = React63.useRef(onSelectionChange);
+    const onSelectionChangeRef = React64.useRef(onSelectionChange);
     onSelectionChangeRef.current = onSelectionChange;
-    const [marqueeBox, setMarqueeBox] = React63.useState(null);
-    const [marqueeIds, setMarqueeIds] = React63.useState(null);
-    const marqueeRef = React63.useRef(null);
-    const [modifierHeld, setModifierHeld] = React63.useState(false);
-    const rootRef = React63.useRef(null);
-    const planeRef = React63.useRef(null);
-    const triggerRef = React63.useRef(null);
-    const nodeRefs = React63.useRef({});
-    const suppressClick = React63.useRef(false);
-    const nodeDragActive = React63.useRef(false);
-    const nodesRef = React63.useRef(localNodes);
+    const [marqueeBox, setMarqueeBox] = React64.useState(null);
+    const [marqueeIds, setMarqueeIds] = React64.useState(null);
+    const marqueeRef = React64.useRef(null);
+    const [modifierHeld, setModifierHeld] = React64.useState(false);
+    const rootRef = React64.useRef(null);
+    const planeRef = React64.useRef(null);
+    const triggerRef = React64.useRef(null);
+    const nodeRefs = React64.useRef({});
+    const suppressClick = React64.useRef(false);
+    const nodeDragActive = React64.useRef(false);
+    const nodesRef = React64.useRef(localNodes);
     nodesRef.current = localNodes;
-    React63.useEffect(() => {
+    React64.useEffect(() => {
       setLocalNodes(incomingNodes);
     }, [incomingNodes]);
-    React63.useEffect(() => {
+    React64.useEffect(() => {
       const syncModifier = (event) => setModifierHeld(Boolean(event.metaKey || event.ctrlKey));
       const releaseModifier = () => setModifierHeld(false);
       window.addEventListener("keydown", syncModifier);
@@ -12452,7 +12518,7 @@ var PaymentRoutingCanvas = React63.forwardRef(
         window.removeEventListener("blur", releaseModifier);
       };
     }, []);
-    React63.useEffect(() => {
+    React64.useEffect(() => {
       const plane = planeRef.current;
       if (!plane) return;
       const measure = () => {
@@ -12473,16 +12539,16 @@ var PaymentRoutingCanvas = React63.forwardRef(
       observer.observe(plane);
       return () => observer.disconnect();
     }, []);
-    const issues = React63.useMemo(
+    const issues = React64.useMemo(
       () => computeIssues(localNodes, graphEdges),
       [localNodes, graphEdges]
     );
-    React63.useEffect(() => {
+    React64.useEffect(() => {
       onValidationChange?.(issues);
     }, [issues, onValidationChange]);
     const sample = samples[sampleIndex] ?? samples[0];
     const steps = sample?.steps ?? [];
-    React63.useEffect(() => {
+    React64.useEffect(() => {
       if (!replaying) return;
       if (stepIndex >= steps.length - 1) {
         setReplaying(false);
@@ -12497,11 +12563,11 @@ var PaymentRoutingCanvas = React63.forwardRef(
       }, 900);
       return () => window.clearTimeout(timer);
     }, [replaying, stepIndex, steps, onSimulationStep]);
-    const traversed = React63.useMemo(
+    const traversed = React64.useMemo(
       () => new Set(steps.slice(0, stepIndex + 1).map((step) => step.nodeId)),
       [steps, stepIndex]
     );
-    const activeEdges = React63.useMemo(() => {
+    const activeEdges = React64.useMemo(() => {
       const pairs = [];
       for (let index = 0; index < stepIndex; index += 1) {
         const from = steps[index]?.nodeId;
@@ -12510,7 +12576,7 @@ var PaymentRoutingCanvas = React63.forwardRef(
       }
       return new Set(pairs);
     }, [steps, stepIndex]);
-    const nodeById = React63.useMemo(() => {
+    const nodeById = React64.useMemo(() => {
       const map = /* @__PURE__ */ new Map();
       localNodes.forEach((node) => map.set(node.id, node));
       return map;
@@ -12520,9 +12586,9 @@ var PaymentRoutingCanvas = React63.forwardRef(
       y: node.y + (node.h ?? NODE_H) / 2
     });
     const focusedNode = panelNodeId ? nodeById.get(panelNodeId) : void 0;
-    const selectionSet = React63.useMemo(() => new Set(selection), [selection]);
-    const marqueeSet = React63.useMemo(() => new Set(marqueeIds ?? []), [marqueeIds]);
-    const commitSelection = React63.useCallback(
+    const selectionSet = React64.useMemo(() => new Set(selection), [selection]);
+    const marqueeSet = React64.useMemo(() => new Set(marqueeIds ?? []), [marqueeIds]);
+    const commitSelection = React64.useCallback(
       (next) => {
         const unique = next.filter((id, index) => next.indexOf(id) === index);
         if (sameIds(unique, selectionRef.current)) return;
@@ -12794,7 +12860,7 @@ var PaymentRoutingCanvas = React63.forwardRef(
       setIssuesOpen((current) => !current);
     };
     const scale = fit * zoom;
-    return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
       "div",
       {
         ref: (node) => {
@@ -12802,20 +12868,20 @@ var PaymentRoutingCanvas = React63.forwardRef(
           if (typeof ref === "function") ref(node);
           else if (ref) ref.current = node;
         },
-        className: cn54(
+        className: cn55(
           "flex min-h-0 w-full flex-col overflow-hidden rounded-lg border border-hairline bg-surface shadow-card",
           className
         ),
         "data-simulating": replaying || void 0,
         ...rest,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "flex shrink-0 flex-wrap items-center justify-between gap-md border-b border-hairline px-lg py-md", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "flex min-w-0 flex-col gap-xxs", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "text-body-md text-ink", children: "Payment routing" }),
-              /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "text-caption text-muted", children: "12,480 payments \xB7 last 24h" })
+          /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "flex shrink-0 flex-wrap items-center justify-between gap-md border-b border-hairline px-lg py-md", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "flex min-w-0 flex-col gap-xxs", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { className: "text-body-md text-ink", children: "Payment routing" }),
+              /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { className: "text-caption text-muted", children: "12,480 payments \xB7 last 24h" })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "flex flex-wrap items-center gap-md", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "flex flex-wrap items-center gap-md", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
                 SimulationControls,
                 {
                   running: replaying,
@@ -12832,7 +12898,7 @@ var PaymentRoutingCanvas = React63.forwardRef(
                   }
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
                 Button,
                 {
                   ref: triggerRef,
@@ -12841,7 +12907,7 @@ var PaymentRoutingCanvas = React63.forwardRef(
                   "aria-expanded": issuesOpen,
                   "aria-controls": "routing-validation-summary",
                   onClick: openIssues,
-                  leadingIcon: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+                  leadingIcon: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
                     Icon,
                     {
                       name: issues.length > 0 ? "triangle" : "check",
@@ -12849,7 +12915,7 @@ var PaymentRoutingCanvas = React63.forwardRef(
                       strokeWidth: 2
                     }
                   ),
-                  className: cn54(
+                  className: cn55(
                     "rounded-full border-transparent",
                     issues.length > 0 ? "bg-semantic-error-soft text-semantic-error hover:bg-semantic-error-soft/70" : "bg-semantic-success-soft text-semantic-success"
                   ),
@@ -12858,9 +12924,9 @@ var PaymentRoutingCanvas = React63.forwardRef(
               )
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "flex min-h-0 flex-1 items-stretch", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "flex min-h-0 flex-1 items-stretch", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
                 "div",
                 {
                   ref: planeRef,
@@ -12902,7 +12968,7 @@ var PaymentRoutingCanvas = React63.forwardRef(
                       setPan({ x: 0, y: 0 });
                     }
                   },
-                  className: cn54(
+                  className: cn55(
                     "relative min-h-0 min-w-0 flex-1 overflow-hidden bg-canvas",
                     // Held Cmd / Ctrl over the background means "drag to select".
                     modifierHeld || marqueeBox ? "cursor-crosshair" : "cursor-grab",
@@ -12916,8 +12982,8 @@ var PaymentRoutingCanvas = React63.forwardRef(
                     backgroundSize: "16px 16px"
                   },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("p", { id: "routing-selection-status", role: "status", "aria-live": "polite", className: "sr-only", children: selection.length === 0 ? "No nodes selected" : `${selection.length} node${selection.length === 1 ? "" : "s"} selected` }),
-                    /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("p", { id: "routing-selection-status", role: "status", "aria-live": "polite", className: "sr-only", children: selection.length === 0 ? "No nodes selected" : `${selection.length} node${selection.length === 1 ? "" : "s"} selected` }),
+                    /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
                       "div",
                       {
                         className: "relative",
@@ -12937,7 +13003,7 @@ var PaymentRoutingCanvas = React63.forwardRef(
                             const unreachable = issueByNode(to.id).some(
                               (issue) => issue.kind === "unreachable"
                             );
-                            return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+                            return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
                               RoutingEdge,
                               {
                                 from: portOf(from, "out"),
@@ -12962,7 +13028,7 @@ var PaymentRoutingCanvas = React63.forwardRef(
                             );
                             const active = traversed.has(node.id);
                             const isSelected = selectionSet.has(node.id) || marqueeSet.has(node.id);
-                            return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+                            return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
                               "div",
                               {
                                 ref: (element) => {
@@ -12971,7 +13037,7 @@ var PaymentRoutingCanvas = React63.forwardRef(
                                 className: "absolute",
                                 style: { left: node.x, top: node.y, width: NODE_W },
                                 onPointerDown: (event) => beginDrag(event, node),
-                                children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+                                children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
                                   RoutingNode,
                                   {
                                     type: node.type,
@@ -13019,12 +13085,12 @@ var PaymentRoutingCanvas = React63.forwardRef(
                         ]
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
                       "div",
                       {
                         "aria-hidden": "true",
                         "data-state": marqueeBox ? "active" : "idle",
-                        className: cn54(
+                        className: cn55(
                           "pointer-events-none absolute rounded-xs border border-dashed border-primary bg-primary/10",
                           "transition-opacity duration-150 ease-out",
                           marqueeBox ? "opacity-100" : "opacity-0"
@@ -13038,22 +13104,22 @@ var PaymentRoutingCanvas = React63.forwardRef(
                         }
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("ol", { className: "sr-only", children: graphEdges.map((edge) => {
+                    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("ol", { className: "sr-only", children: graphEdges.map((edge) => {
                       const from = nodeById.get(edge.from);
                       const to = nodeById.get(edge.to);
-                      return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("li", { children: `Edge: ${from?.title ?? edge.from} to ${to?.title ?? edge.to}${edge.label ? `, ${edge.label}` : ""}` }, edge.id);
+                      return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("li", { children: `Edge: ${from?.title ?? edge.from} to ${to?.title ?? edge.to}${edge.label ? `, ${edge.label}` : ""}` }, edge.id);
                     }) })
                   ]
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "flex shrink-0 flex-wrap items-center justify-between gap-md border-t border-hairline px-lg py-md", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("p", { className: "min-w-0 flex-1 text-caption text-body", children: currentStep ? currentStep.reason : "Replay a sample transaction to watch the path." }),
-                /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "flex shrink-0 items-center gap-sm", children: [
-                  settled ? /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("span", { className: "inline-flex items-center gap-xs rounded-full bg-semantic-success-soft px-sm py-xxs text-caption text-semantic-success", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Icon, { name: "check", size: 11, strokeWidth: 2 }),
+              /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "flex shrink-0 flex-wrap items-center justify-between gap-md border-t border-hairline px-lg py-md", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("p", { className: "min-w-0 flex-1 text-caption text-body", children: currentStep ? currentStep.reason : "Replay a sample transaction to watch the path." }),
+                /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "flex shrink-0 items-center gap-sm", children: [
+                  settled ? /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("span", { className: "inline-flex items-center gap-xs rounded-full bg-semantic-success-soft px-sm py-xxs text-caption text-semantic-success", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Icon, { name: "check", size: 11, strokeWidth: 2 }),
                     "Settlement"
                   ] }) : null,
-                  /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
                     CanvasMinimap,
                     {
                       blocks: minimapBlocks,
@@ -13067,8 +13133,8 @@ var PaymentRoutingCanvas = React63.forwardRef(
                       }
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "inline-flex items-center gap-xxs rounded-md border border-hairline bg-surface p-xxs shadow-sm", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "inline-flex items-center gap-xxs rounded-md border border-hairline bg-surface p-xxs shadow-sm", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
                       Button,
                       {
                         variant: "bare",
@@ -13076,10 +13142,10 @@ var PaymentRoutingCanvas = React63.forwardRef(
                         "aria-label": "Zoom out",
                         onClick: () => setZoom((current) => Math.max(current - 0.1, 0.6)),
                         className: "size-7 rounded-sm text-body hover:bg-surface-soft",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Icon, { name: "minus", size: 14, strokeWidth: 2 })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Icon, { name: "minus", size: 14, strokeWidth: 2 })
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
                       Button,
                       {
                         variant: "bare",
@@ -13087,10 +13153,10 @@ var PaymentRoutingCanvas = React63.forwardRef(
                         "aria-label": "Zoom in",
                         onClick: () => setZoom((current) => Math.min(current + 0.1, 1.6)),
                         className: "size-7 rounded-sm text-body hover:bg-surface-soft",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Icon, { name: "plus", size: 14, strokeWidth: 2 })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Icon, { name: "plus", size: 14, strokeWidth: 2 })
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
                       Button,
                       {
                         variant: "bare",
@@ -13101,19 +13167,19 @@ var PaymentRoutingCanvas = React63.forwardRef(
                           setPan({ x: 0, y: 0 });
                         },
                         className: "size-7 rounded-sm text-body hover:bg-surface-soft",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Icon, { name: "layers", size: 14, strokeWidth: 2 })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Icon, { name: "layers", size: 14, strokeWidth: 2 })
                       }
                     )
                   ] })
                 ] })
               ] })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
               "div",
               {
                 className: "flex min-h-0 shrink-0 flex-col self-stretch border-l border-hairline",
                 style: { width: PANEL_W },
-                children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
                   NodeConfigPanel,
                   {
                     open: panelOpen,
@@ -13133,7 +13199,7 @@ var PaymentRoutingCanvas = React63.forwardRef(
             )
           ] }),
           ReactDOM10.createPortal(
-            /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
               "div",
               {
                 id: "routing-validation-summary",
@@ -13147,27 +13213,27 @@ var PaymentRoutingCanvas = React63.forwardRef(
                   right: anchor.right,
                   zIndex: "var(--z-popover, 1300)"
                 },
-                className: cn54(
+                className: cn55(
                   "w-80 origin-top rounded-md border border-hairline bg-surface shadow-modal",
                   "transition duration-200 ease-out",
                   issuesOpen ? "pointer-events-auto translate-y-0 scale-100 opacity-100" : "pointer-events-none -translate-y-1 scale-95 opacity-0"
                 ),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("p", { className: "border-b border-hairline-soft px-md py-sm text-micro-cap text-muted", children: "Validation" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("ul", { className: "max-h-64 overflow-y-auto overscroll-contain p-xs", children: issues.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("li", { className: "px-sm py-sm text-caption text-muted", children: "Every rule resolves to a processor." }) : issues.map((issue) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "flex items-start gap-sm rounded-sm px-sm py-sm hover:bg-surface-soft", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("p", { className: "border-b border-hairline-soft px-md py-sm text-micro-cap text-muted", children: "Validation" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("ul", { className: "max-h-64 overflow-y-auto overscroll-contain p-xs", children: issues.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("li", { className: "px-sm py-sm text-caption text-muted", children: "Every rule resolves to a processor." }) : issues.map((issue) => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "flex items-start gap-sm rounded-sm px-sm py-sm hover:bg-surface-soft", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
                       Icon,
                       {
                         name: "triangle",
                         size: 12,
                         strokeWidth: 2,
-                        className: cn54(
+                        className: cn55(
                           "mt-xxs shrink-0",
                           issue.kind === "conflict" ? "text-semantic-error" : "text-semantic-warning"
                         )
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "min-w-0 text-caption text-body", children: issue.message })
+                    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { className: "min-w-0 text-caption text-body", children: issue.message })
                   ] }) }, issue.id)) })
                 ]
               }
@@ -13182,11 +13248,11 @@ var PaymentRoutingCanvas = React63.forwardRef(
 PaymentRoutingCanvas.displayName = "PaymentRoutingCanvas";
 
 // virtual-pkg:src/atoms/PricingTable/PricingTable.tsx
-var React66 = __toESM(require("react"));
+var React67 = __toESM(require("react"));
 
 // virtual-pkg:src/atoms/PricingTableDesktop/PricingTableDesktop.tsx
-var React64 = __toESM(require("react"));
-var import_jsx_runtime64 = require("react/jsx-runtime");
+var React65 = __toESM(require("react"));
+var import_jsx_runtime65 = require("react/jsx-runtime");
 var DEFAULT_TIERS = [
   {
     id: "starter",
@@ -13242,8 +13308,8 @@ var DEFAULT_TIERS = [
   }
 ];
 var TABULAR = { fontFeatureSettings: '"tnum"' };
-var cn55 = (...values) => values.filter(Boolean).join(" ");
-var PricingTableDesktop = React64.forwardRef(
+var cn56 = (...values) => values.filter(Boolean).join(" ");
+var PricingTableDesktop = React65.forwardRef(
   ({
     title = "Pricing table",
     subtitle,
@@ -13252,60 +13318,60 @@ var PricingTableDesktop = React64.forwardRef(
     className,
     ...rest
   }, ref) => {
-    const headingId = React64.useId();
-    return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
+    const headingId = React65.useId();
+    return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
       "section",
       {
         ref,
         "aria-labelledby": headingId,
-        className: cn55("w-full bg-canvas px-base py-xl", className),
+        className: cn56("w-full bg-canvas px-base py-xl", className),
         ...rest,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "flex w-full flex-col gap-sm px-sm pb-lg", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("h2", { id: headingId, className: "text-display-lg text-ink", children: title }),
-            subtitle ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("p", { className: "text-body-md text-muted", children: subtitle }) : null
+          /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "flex w-full flex-col gap-sm px-sm pb-lg", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("h2", { id: headingId, className: "text-display-lg text-ink", children: title }),
+            subtitle ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("p", { className: "text-body-md text-muted", children: subtitle }) : null
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "w-full rounded-xl bg-surface-soft p-base lg:p-xl", children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "grid grid-cols-1 items-stretch gap-base sm:grid-cols-2 md:grid-cols-system md:gap-md lg:gap-xl lg:py-md", children: tiers.map((tier) => {
+          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "w-full rounded-xl bg-surface-soft p-base lg:p-xl", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "grid grid-cols-1 items-stretch gap-base sm:grid-cols-2 md:grid-cols-system md:gap-md lg:gap-xl lg:py-md", children: tiers.map((tier) => {
             const featured = Boolean(tier.featured);
             const tierHeadingId = `${headingId}-${tier.id}`;
-            return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
+            return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
               "article",
               {
                 "aria-labelledby": tierHeadingId,
                 "data-featured": featured ? "true" : void 0,
-                className: cn55(
+                className: cn56(
                   "flex h-full flex-col rounded-lg border p-lg transition duration-200 ease-out md:col-span-3",
                   featured ? "border-transparent bg-brand-dark text-on-primary shadow-lg md:-my-md md:py-xxl" : "border-hairline bg-canvas text-ink shadow-sm hover:border-hairline-strong hover:shadow-md"
                 ),
                 children: [
-                  tier.badge ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "mb-md flex", children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Badge, { variant: "soft", tone: "info", size: "sm", children: tier.badge }) }) : null,
-                  /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+                  tier.badge ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "mb-md flex", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Badge, { variant: "soft", tone: "info", size: "sm", children: tier.badge }) }) : null,
+                  /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
                     "h3",
                     {
                       id: tierHeadingId,
-                      className: cn55(
+                      className: cn56(
                         "text-heading-lg",
                         featured ? "text-on-primary" : "text-ink"
                       ),
                       children: tier.name
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("p", { className: "mt-md flex items-baseline gap-sm whitespace-nowrap", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("p", { className: "mt-md flex items-baseline gap-sm whitespace-nowrap", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
                       "span",
                       {
                         style: TABULAR,
-                        className: cn55(
+                        className: cn56(
                           "text-display-md",
                           featured ? "text-on-primary" : "text-ink"
                         ),
                         children: tier.price
                       }
                     ),
-                    tier.period ? /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
+                    tier.period ? /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
                       "span",
                       {
-                        className: cn55(
+                        className: cn56(
                           "text-body-sm",
                           featured ? "text-on-primary/70" : "text-muted"
                         ),
@@ -13316,22 +13382,22 @@ var PricingTableDesktop = React64.forwardRef(
                       }
                     ) : null
                   ] }),
-                  featured ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+                  featured ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
                     "div",
                     {
                       "aria-hidden": "true",
                       className: "my-lg h-px w-full bg-on-primary/20"
                     }
-                  ) : /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Divider, { decorative: true, className: "my-lg" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("ul", { className: "flex flex-col gap-base", children: tier.features.map((feature) => /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
+                  ) : /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Divider, { decorative: true, className: "my-lg" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("ul", { className: "flex flex-col gap-base", children: tier.features.map((feature) => /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
                     "li",
                     {
-                      className: cn55(
+                      className: cn56(
                         "flex items-start gap-md text-body-md",
                         featured ? "text-on-primary" : "text-body"
                       ),
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
                           Icon,
                           {
                             name: "check",
@@ -13341,13 +13407,13 @@ var PricingTableDesktop = React64.forwardRef(
                             className: "mt-xxs"
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { className: "min-w-0", children: feature })
+                        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "min-w-0", children: feature })
                       ]
                     },
                     feature
                   )) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "mt-auto flex flex-col gap-sm pt-xl", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "mt-auto flex flex-col gap-sm pt-xl", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
                       Button,
                       {
                         variant: featured ? "primary" : "outline-brand",
@@ -13358,7 +13424,7 @@ var PricingTableDesktop = React64.forwardRef(
                         children: tier.primaryAction
                       }
                     ),
-                    tier.secondaryAction ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+                    tier.secondaryAction ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
                       Button,
                       {
                         variant: "inverse-outline",
@@ -13383,8 +13449,8 @@ var PricingTableDesktop = React64.forwardRef(
 PricingTableDesktop.displayName = "PricingTableDesktop";
 
 // virtual-pkg:src/atoms/PricingTableMobile/PricingTableMobile.tsx
-var React65 = __toESM(require("react"));
-var import_jsx_runtime65 = require("react/jsx-runtime");
+var React66 = __toESM(require("react"));
+var import_jsx_runtime66 = require("react/jsx-runtime");
 var DEFAULT_PLANS = [
   { id: "starter", name: "Starter", price: "$0.00", period: "mo" },
   { id: "growth", name: "Growth", price: "$49.00", period: "mo" },
@@ -13399,8 +13465,8 @@ var DEFAULT_PLANS = [
   { id: "enterprise", name: "Enterprise", price: "Custom" }
 ];
 var TABULAR2 = { fontFeatureSettings: '"tnum"' };
-var cn56 = (...values) => values.filter(Boolean).join(" ");
-var PricingTableMobile = React65.forwardRef(
+var cn57 = (...values) => values.filter(Boolean).join(" ");
+var PricingTableMobile = React66.forwardRef(
   ({
     title,
     subtitle,
@@ -13411,19 +13477,19 @@ var PricingTableMobile = React65.forwardRef(
     className,
     ...rest
   }, ref) => {
-    const headingId = React65.useId();
-    const [innerSelected, setInnerSelected] = React65.useState(void 0);
+    const headingId = React66.useId();
+    const [innerSelected, setInnerSelected] = React66.useState(void 0);
     const activeId = selectedId ?? innerSelected;
     const handleSelect = (planId) => {
       setInnerSelected(planId);
       onSelect?.(planId);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { ref, className: cn56("w-full", className), ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "mx-auto flex w-full max-w-md flex-col gap-md", children: [
-      title || subtitle ? /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "flex flex-col gap-xxs px-sm pb-xs", children: [
-        title ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("h2", { id: headingId, className: "text-heading-md text-ink", children: title }) : null,
-        subtitle ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("p", { className: "text-body-sm text-muted", children: subtitle }) : null
+    return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { ref, className: cn57("w-full", className), ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "mx-auto flex w-full max-w-md flex-col gap-md", children: [
+      title || subtitle ? /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex flex-col gap-xxs px-sm pb-xs", children: [
+        title ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("h2", { id: headingId, className: "text-heading-md text-ink", children: title }) : null,
+        subtitle ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("p", { className: "text-body-sm text-muted", children: subtitle }) : null
       ] }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
         "div",
         {
           role: "group",
@@ -13433,7 +13499,7 @@ var PricingTableMobile = React65.forwardRef(
           children: plans.map((plan) => {
             const featured = Boolean(plan.featured);
             const selected = activeId === plan.id;
-            return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
+            return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
               Button,
               {
                 variant: "card-row",
@@ -13445,36 +13511,36 @@ var PricingTableMobile = React65.forwardRef(
                 onClick: () => handleSelect(plan.id),
                 className: "group",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("span", { className: "flex min-w-0 flex-1 flex-col gap-xs", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("span", { className: "flex min-w-0 items-center gap-sm", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("span", { className: "flex min-w-0 flex-1 flex-col gap-xs", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("span", { className: "flex min-w-0 items-center gap-sm", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
                         "span",
                         {
-                          className: cn56(
+                          className: cn57(
                             "truncate text-body-lg",
                             featured ? "text-on-primary" : "text-body"
                           ),
                           children: plan.name
                         }
                       ),
-                      plan.badge ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Badge, { variant: "soft", tone: "info", size: "sm", children: plan.badge }) : null
+                      plan.badge ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Badge, { variant: "soft", tone: "info", size: "sm", children: plan.badge }) : null
                     ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("span", { className: "flex items-baseline gap-xxs whitespace-nowrap", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("span", { className: "flex items-baseline gap-xxs whitespace-nowrap", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
                         "span",
                         {
                           style: TABULAR2,
-                          className: cn56(
+                          className: cn57(
                             "text-display-lg",
                             featured ? "text-on-primary" : "text-ink"
                           ),
                           children: plan.price
                         }
                       ),
-                      plan.period ? /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
+                      plan.period ? /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
                         "span",
                         {
-                          className: cn56(
+                          className: cn57(
                             "text-heading-md",
                             featured ? "text-on-primary/85" : "text-body"
                           ),
@@ -13486,7 +13552,7 @@ var PricingTableMobile = React65.forwardRef(
                       ) : null
                     ] })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
                     Icon,
                     {
                       name: "chevron-right",
@@ -13509,7 +13575,7 @@ var PricingTableMobile = React65.forwardRef(
 PricingTableMobile.displayName = "PricingTableMobile";
 
 // virtual-pkg:src/atoms/PricingTable/PricingTable.tsx
-var import_jsx_runtime66 = require("react/jsx-runtime");
+var import_jsx_runtime67 = require("react/jsx-runtime");
 var DEFAULT_TIERS2 = [
   {
     id: "starter",
@@ -13546,7 +13612,7 @@ var DEFAULT_TIERS2 = [
     primaryAction: "Contact sales"
   }
 ];
-var cn57 = (...values) => values.filter(Boolean).join(" ");
+var cn58 = (...values) => values.filter(Boolean).join(" ");
 var toPlan = (tier) => ({
   id: tier.id,
   name: tier.name,
@@ -13555,7 +13621,7 @@ var toPlan = (tier) => ({
   badge: tier.badge,
   featured: tier.featured
 });
-var PricingTable = React66.forwardRef(
+var PricingTable = React67.forwardRef(
   ({
     title = "Pricing table",
     subtitle,
@@ -13570,12 +13636,12 @@ var PricingTable = React66.forwardRef(
     className,
     ...rest
   }, ref) => {
-    const derivedPlans = React66.useMemo(
+    const derivedPlans = React67.useMemo(
       () => plans ?? tiers.map(toPlan),
       [plans, tiers]
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { ref, className: cn57("w-full", className), ...rest, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: cn57("hidden w-full md:block", desktopClassName), children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { ref, className: cn58("w-full", className), ...rest, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: cn58("hidden w-full md:block", desktopClassName), children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
         PricingTableDesktop,
         {
           title,
@@ -13584,7 +13650,7 @@ var PricingTable = React66.forwardRef(
           onAction
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: cn57("w-full md:hidden", mobileClassName), children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: cn58("w-full md:hidden", mobileClassName), children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
         PricingTableMobile,
         {
           title,
@@ -13601,10 +13667,10 @@ var PricingTable = React66.forwardRef(
 PricingTable.displayName = "PricingTable";
 
 // virtual-pkg:src/atoms/ProductCard/ProductCard.tsx
-var React67 = __toESM(require("react"));
-var import_jsx_runtime67 = require("react/jsx-runtime");
-var cn58 = (...values) => values.filter(Boolean).join(" ");
-var ProductCard = React67.forwardRef(
+var React68 = __toESM(require("react"));
+var import_jsx_runtime68 = require("react/jsx-runtime");
+var cn59 = (...values) => values.filter(Boolean).join(" ");
+var ProductCard = React68.forwardRef(
   ({
     title = "Payment link \u2014 Standard",
     status = "Live mode",
@@ -13619,13 +13685,13 @@ var ProductCard = React67.forwardRef(
     className,
     ...rest
   }, ref) => {
-    const titleId = React67.useId();
-    return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
+    const titleId = React68.useId();
+    return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
       "article",
       {
         ref,
         "aria-labelledby": titleId,
-        className: cn58(
+        className: cn59(
           "flex w-full flex-col rounded-lg border bg-surface p-xl",
           "transition duration-200 ease-out",
           elevated ? "border-hairline-strong shadow-md" : "border-hairline shadow-card",
@@ -13633,14 +13699,14 @@ var ProductCard = React67.forwardRef(
         ),
         ...rest,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
             "div",
             {
               "aria-hidden": "true",
               className: "rounded-md bg-gradient-to-b from-surface-soft to-surface-strong p-md",
-              children: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "rounded-sm border border-hairline-soft bg-surface p-md shadow-sm", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex items-center gap-sm", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "rounded-sm border border-hairline-soft bg-surface p-md shadow-sm", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "flex items-center gap-sm", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
                     Icon,
                     {
                       name: icon,
@@ -13649,24 +13715,24 @@ var ProductCard = React67.forwardRef(
                       className: "text-primary"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "min-w-0 truncate text-body-sm text-ink", children: mockupLabel })
+                  /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "min-w-0 truncate text-body-sm text-ink", children: mockupLabel })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "mt-md flex flex-col gap-sm", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "h-2 w-full rounded-full bg-skeleton" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "h-2 w-4/5 rounded-full bg-skeleton" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "h-2 w-1/2 rounded-full bg-skeleton" })
+                /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "mt-md flex flex-col gap-sm", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "h-2 w-full rounded-full bg-skeleton" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "h-2 w-4/5 rounded-full bg-skeleton" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "h-2 w-1/2 rounded-full bg-skeleton" })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "mt-md block h-5 w-full rounded-full bg-primary" })
+                /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "mt-md block h-5 w-full rounded-full bg-primary" })
               ] })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("h3", { id: titleId, className: "mt-lg text-heading-lg text-ink text-balance", children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "mt-md", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Badge, { variant: "soft", tone: "info", size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "text-micro-cap", children: status }) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("p", { className: "mt-md flex flex-wrap items-baseline gap-sm", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "text-display-md text-ink tabular-nums", children: amount }),
-            period ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "text-body-lg text-muted", children: period }) : null
+          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("h3", { id: titleId, className: "mt-lg text-heading-lg text-ink text-balance", children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "mt-md", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Badge, { variant: "soft", tone: "info", size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "text-micro-cap", children: status }) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("p", { className: "mt-md flex flex-wrap items-baseline gap-sm", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "text-display-md text-ink tabular-nums", children: amount }),
+            period ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "text-body-lg text-muted", children: period }) : null
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "mt-auto pt-xl", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "mt-auto pt-xl", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
             Button,
             {
               variant: "primary",
@@ -13685,9 +13751,9 @@ var ProductCard = React67.forwardRef(
 ProductCard.displayName = "ProductCard";
 
 // virtual-pkg:src/atoms/ProductCardGrid/ProductCardGrid.tsx
-var React68 = __toESM(require("react"));
-var import_jsx_runtime68 = require("react/jsx-runtime");
-var cn59 = (...values) => values.filter(Boolean).join(" ");
+var React69 = __toESM(require("react"));
+var import_jsx_runtime69 = require("react/jsx-runtime");
+var cn60 = (...values) => values.filter(Boolean).join(" ");
 var DEFAULT_ITEMS5 = [
   {
     id: "standard",
@@ -13714,7 +13780,7 @@ var DEFAULT_ITEMS5 = [
     icon: "layers"
   }
 ];
-var ProductCardGrid = React68.forwardRef(
+var ProductCardGrid = React69.forwardRef(
   ({
     heading = "Product card grid",
     description,
@@ -13725,27 +13791,27 @@ var ProductCardGrid = React68.forwardRef(
     className,
     ...rest
   }, ref) => {
-    const [internalSelected, setInternalSelected] = React68.useState(defaultSelectedId);
+    const [internalSelected, setInternalSelected] = React69.useState(defaultSelectedId);
     const isControlled = selectedId !== void 0;
     const activeId = isControlled ? selectedId : internalSelected;
-    const headingId = React68.useId();
+    const headingId = React69.useId();
     const handleSelect = (id) => {
       if (!isControlled) setInternalSelected(id);
       onSelect?.(id);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
       "section",
       {
         ref,
         "aria-labelledby": headingId,
-        className: cn59("w-full rounded-lg", className),
+        className: cn60("w-full rounded-lg", className),
         ...rest,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("h2", { id: headingId, className: "text-display-lg text-ink", children: heading }),
-          description ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("p", { className: "mt-sm max-w-2xl text-body-lg text-muted", children: description }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "mt-xl grid grid-cols-1 gap-gutter sm:grid-cols-2 md:grid-cols-3", children: items.map((item) => {
+          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("h2", { id: headingId, className: "text-display-lg text-ink", children: heading }),
+          description ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("p", { className: "mt-sm max-w-2xl text-body-lg text-muted", children: description }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "mt-xl grid grid-cols-1 gap-gutter sm:grid-cols-2 md:grid-cols-3", children: items.map((item) => {
             const { id, className: itemClassName, ...cardProps } = item;
-            return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
               ProductCard,
               {
                 ...cardProps,
@@ -13767,9 +13833,9 @@ var ProductCardGrid = React68.forwardRef(
 ProductCardGrid.displayName = "ProductCardGrid";
 
 // virtual-pkg:src/atoms/ProgressBar/ProgressBar.tsx
-var React69 = __toESM(require("react"));
-var import_jsx_runtime69 = require("react/jsx-runtime");
-var cn60 = (...values) => values.filter(Boolean).join(" ");
+var React70 = __toESM(require("react"));
+var import_jsx_runtime70 = require("react/jsx-runtime");
+var cn61 = (...values) => values.filter(Boolean).join(" ");
 var STATE_TEXT = {
   complete: "complete",
   current: "current step",
@@ -13809,7 +13875,7 @@ var segmentStyles = {
   neutral: "bg-hairline-strong"
 };
 var tabular3 = { fontVariantNumeric: "tabular-nums" };
-var ProgressBar = React69.forwardRef(
+var ProgressBar = React70.forwardRef(
   ({
     variant = "segments",
     steps = [],
@@ -13825,14 +13891,14 @@ var ProgressBar = React69.forwardRef(
     ...rest
   }, ref) => {
     if (variant === "steps") {
-      return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(
         "div",
         {
           ref,
-          className: cn60("flex w-full items-center gap-lg", className),
+          className: cn61("flex w-full items-center gap-lg", className),
           ...rest,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
               "ol",
               {
                 "aria-label": ariaLabel,
@@ -13843,42 +13909,42 @@ var ProgressBar = React69.forwardRef(
                 children: steps.map((step, index) => {
                   const state = step.state ?? "upcoming";
                   const previous = index > 0 ? steps[index - 1] : void 0;
-                  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(
                     "li",
                     {
                       "aria-current": state === "current" ? "step" : void 0,
                       className: "relative flex flex-col items-center",
                       children: [
-                        previous ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+                        previous ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
                           "span",
                           {
                             "aria-hidden": "true",
-                            className: cn60(
+                            className: cn61(
                               "absolute left-0 right-1/2 top-3.5 h-0.5 -translate-y-1/2 rounded-full transition-colors duration-200 ease-out",
                               connectorColor(previous, step)
                             )
                           }
                         ) : null,
-                        /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("span", { className: "relative z-10 flex size-7 items-center justify-center", children: [
-                          state === "current" ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("span", { className: "relative z-10 flex size-7 items-center justify-center", children: [
+                          state === "current" ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
                             "span",
                             {
                               "aria-hidden": "true",
                               className: "absolute size-6 rounded-full bg-primary/15"
                             }
                           ) : null,
-                          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: cn60(nodeBase, nodeStyles[state]), children: state === "error" ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Icon, { name: "x", size: 10, tone: "on-dark", strokeWidth: 3 }) : null })
+                          /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: cn61(nodeBase, nodeStyles[state]), children: state === "error" ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Icon, { name: "x", size: 10, tone: "on-dark", strokeWidth: 3 }) : null })
                         ] }),
-                        /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
+                        /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(
                           "span",
                           {
-                            className: cn60(
+                            className: cn61(
                               "mt-sm whitespace-nowrap text-center text-body-sm",
                               labelStyles[state]
                             ),
                             children: [
                               step.label,
-                              /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "sr-only", children: ` (${STATE_TEXT[state]})` })
+                              /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "sr-only", children: ` (${STATE_TEXT[state]})` })
                             ]
                           }
                         )
@@ -13889,7 +13955,7 @@ var ProgressBar = React69.forwardRef(
                 })
               }
             ),
-            status ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "shrink-0 text-micro-cap uppercase tracking-micro-cap text-muted", children: status }) : null
+            status ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "shrink-0 text-micro-cap uppercase tracking-micro-cap text-muted", children: status }) : null
           ]
         }
       );
@@ -13897,20 +13963,20 @@ var ProgressBar = React69.forwardRef(
     const safeTotal = total > 0 ? total : 1;
     const counted = segments.reduce((sum, segment) => sum + segment.value, 0);
     const markerPercent = marker === void 0 ? null : Math.min(100, Math.max(0, marker / safeTotal * 100));
-    return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { ref, className: cn60("flex w-full flex-col", className), ...rest, children: [
-      valueLabel || valueDetail ? /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { ref, className: cn61("flex w-full flex-col", className), ...rest, children: [
+      valueLabel || valueDetail ? /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(
         "div",
         {
           className: "mb-md flex items-baseline justify-end gap-xs text-right",
           style: tabular3,
           children: [
-            valueLabel ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "text-body-md text-ink", children: valueLabel }) : null,
-            valueDetail ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "text-body-md text-muted", children: valueDetail }) : null
+            valueLabel ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "text-body-md text-ink", children: valueLabel }) : null,
+            valueDetail ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "text-body-md text-muted", children: valueDetail }) : null
           ]
         }
       ) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "relative", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "relative", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
           "div",
           {
             role: "progressbar",
@@ -13919,11 +13985,11 @@ var ProgressBar = React69.forwardRef(
             "aria-valuemax": safeTotal,
             "aria-valuenow": counted,
             className: "flex h-3 w-full overflow-hidden rounded-full bg-surface-strong",
-            children: segments.map((segment, index) => /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+            children: segments.map((segment, index) => /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
               "span",
               {
                 "aria-hidden": "true",
-                className: cn60(
+                className: cn61(
                   "h-full transition-[width,background-color] duration-200 ease-out",
                   segmentStyles[segment.tone ?? "primary"]
                 ),
@@ -13935,7 +14001,7 @@ var ProgressBar = React69.forwardRef(
             ))
           }
         ),
-        markerPercent !== null ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+        markerPercent !== null ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
           "span",
           {
             "aria-hidden": "true",
@@ -13944,26 +14010,26 @@ var ProgressBar = React69.forwardRef(
           }
         ) : null
       ] }),
-      showLegend && segments.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("ul", { className: "mt-lg flex list-none flex-wrap items-center gap-x-xl gap-y-sm p-0", children: segments.map((segment, index) => {
+      showLegend && segments.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("ul", { className: "mt-lg flex list-none flex-wrap items-center gap-x-xl gap-y-sm p-0", children: segments.map((segment, index) => {
         const tone = segment.tone ?? "primary";
-        return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(
           "li",
           {
             className: "flex items-center gap-sm text-body-sm text-body",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
                 "span",
                 {
                   "aria-hidden": "true",
-                  className: cn60(
+                  className: cn61(
                     "size-2.5 shrink-0 rounded-xs",
                     segmentStyles[tone]
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("span", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("span", { children: [
                 segment.label,
-                /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "ml-xxs text-body", style: tabular3, children: segment.value.toLocaleString("en-US") })
+                /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "ml-xxs text-body", style: tabular3, children: segment.value.toLocaleString("en-US") })
               ] })
             ]
           },
@@ -13976,10 +14042,10 @@ var ProgressBar = React69.forwardRef(
 ProgressBar.displayName = "ProgressBar";
 
 // virtual-pkg:src/atoms/Radio/Radio.tsx
-var React70 = __toESM(require("react"));
-var import_jsx_runtime70 = require("react/jsx-runtime");
-var cn61 = (...values) => values.filter(Boolean).join(" ");
-var Radio = React70.forwardRef(
+var React71 = __toESM(require("react"));
+var import_jsx_runtime71 = require("react/jsx-runtime");
+var cn62 = (...values) => values.filter(Boolean).join(" ");
+var Radio = React71.forwardRef(
   ({
     label,
     description,
@@ -13995,23 +14061,23 @@ var Radio = React70.forwardRef(
     className,
     ...rest
   }, ref) => {
-    const [internalChecked, setInternalChecked] = React70.useState(defaultChecked);
+    const [internalChecked, setInternalChecked] = React71.useState(defaultChecked);
     const isControlled = checked !== void 0;
     const isChecked = isControlled ? Boolean(checked) : internalChecked;
-    const generatedId = React70.useId();
+    const generatedId = React71.useId();
     const inputId = id ?? `radio-${generatedId}`;
     const isCard = chrome === "card";
     const handleChange = (event) => {
       if (!isControlled) setInternalChecked(event.target.checked);
       onChange?.(event.target.value, event);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
       "label",
       {
         htmlFor: inputId,
         "data-state": isChecked ? "selected" : "unselected",
         "data-disabled": disabled ? "" : void 0,
-        className: cn61(
+        className: cn62(
           "group/radio flex items-center gap-md transition duration-200 ease-out",
           isCard ? "w-full rounded-lg" : "w-auto",
           disabled ? "cursor-not-allowed" : "cursor-pointer",
@@ -14020,16 +14086,16 @@ var Radio = React70.forwardRef(
           className
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
             "span",
             {
-              className: cn61(
+              className: cn62(
                 "relative flex shrink-0 items-center justify-center rounded-full border-2 bg-canvas transition-colors duration-200 ease-out",
                 size === "sm" ? "size-4" : "size-5",
                 disabled ? "border-hairline" : isChecked ? "border-primary" : invalid ? "border-semantic-error" : "border-hairline-strong group-hover/radio:border-primary-focus"
               ),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
                   "input",
                   {
                     ref,
@@ -14044,11 +14110,11 @@ var Radio = React70.forwardRef(
                     ...rest
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
                   "span",
                   {
                     "aria-hidden": "true",
-                    className: cn61(
+                    className: cn62(
                       "rounded-full transition duration-200 ease-out",
                       size === "sm" ? "size-1.5" : "size-2",
                       disabled ? "bg-primary-disabled" : isChecked ? "scale-100 bg-primary opacity-100" : "scale-50 opacity-0"
@@ -14058,21 +14124,21 @@ var Radio = React70.forwardRef(
               ]
             }
           ),
-          label || description ? /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("span", { className: "flex min-w-0 flex-1 flex-col gap-xxs", children: [
-            label ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+          label || description ? /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("span", { className: "flex min-w-0 flex-1 flex-col gap-xxs", children: [
+            label ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
               "span",
               {
-                className: cn61(
+                className: cn62(
                   "text-label truncate transition-colors duration-200 ease-out",
                   disabled ? "text-muted" : isChecked ? "text-ink" : "text-body"
                 ),
                 children: label
               }
             ) : null,
-            description ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+            description ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
               "span",
               {
-                className: cn61(
+                className: cn62(
                   "text-caption truncate transition-colors duration-200 ease-out",
                   disabled ? "text-muted-soft" : "text-muted"
                 ),
@@ -14080,11 +14146,11 @@ var Radio = React70.forwardRef(
               }
             ) : null
           ] }) : null,
-          valueLabel ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+          valueLabel ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
             "span",
             {
               style: { fontVariantNumeric: "tabular-nums" },
-              className: cn61(
+              className: cn62(
                 "shrink-0 text-label transition-colors duration-200 ease-out",
                 disabled ? "text-muted-soft" : isChecked ? "text-ink" : "text-body"
               ),
@@ -14099,9 +14165,9 @@ var Radio = React70.forwardRef(
 Radio.displayName = "Radio";
 
 // virtual-pkg:src/atoms/Rating/Rating.tsx
-var React71 = __toESM(require("react"));
-var import_jsx_runtime71 = require("react/jsx-runtime");
-var cn62 = (...values) => values.filter(Boolean).join(" ");
+var React72 = __toESM(require("react"));
+var import_jsx_runtime72 = require("react/jsx-runtime");
+var cn63 = (...values) => values.filter(Boolean).join(" ");
 var STAR_PX = { sm: 16, md: 20, lg: 30 };
 var STAR_GAP = {
   sm: "gap-xxs",
@@ -14116,14 +14182,14 @@ var SCORE_TEXT = {
 var clamp = (input, min, max) => Math.min(max, Math.max(min, input));
 var formatScore = (input, precision) => input.toFixed(Math.max(0, precision));
 var tabular4 = { fontVariantNumeric: "tabular-nums" };
-var StarGlyph = ({ fill, px }) => /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
+var StarGlyph = ({ fill, px }) => /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
   "span",
   {
     "aria-hidden": "true",
     className: "relative inline-flex shrink-0",
     style: { width: px, height: px },
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
         Icon,
         {
           name: "star",
@@ -14132,12 +14198,12 @@ var StarGlyph = ({ fill, px }) => /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)
           style: { color: "var(--color-hairline-strong)" }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
         "span",
         {
           className: "absolute inset-y-0 left-0 overflow-hidden transition-[width] duration-200 ease-out",
           style: { width: `${fill * 100}%` },
-          children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
             Icon,
             {
               name: "star",
@@ -14152,7 +14218,7 @@ var StarGlyph = ({ fill, px }) => /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)
     ]
   }
 );
-var Rating = React71.forwardRef(
+var Rating = React72.forwardRef(
   ({
     value,
     defaultValue,
@@ -14172,10 +14238,10 @@ var Rating = React71.forwardRef(
     className,
     ...rest
   }, ref) => {
-    const [uncontrolled, setUncontrolled] = React71.useState(
+    const [uncontrolled, setUncontrolled] = React72.useState(
       defaultValue ?? value ?? 0
     );
-    const [hover, setHover] = React71.useState(null);
+    const [hover, setHover] = React72.useState(null);
     const isControlled = value !== void 0;
     const committed = clamp(isControlled ? value : uncontrolled, 0, max);
     const interactive = !readOnly;
@@ -14214,10 +14280,10 @@ var Rating = React71.forwardRef(
       commit(next);
     };
     const px = STAR_PX[size];
-    const starRow = /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+    const starRow = /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
       "div",
       {
-        className: cn62("inline-flex items-center", STAR_GAP[size]),
+        className: cn63("inline-flex items-center", STAR_GAP[size]),
         ...interactive ? {
           role: "radiogroup",
           "aria-label": label,
@@ -14232,9 +14298,9 @@ var Rating = React71.forwardRef(
         children: Array.from({ length: Math.max(1, max) }, (_, index) => {
           const fill = clamp(shown - index, 0, 1);
           if (!interactive) {
-            return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(StarGlyph, { fill, px }, index);
+            return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(StarGlyph, { fill, px }, index);
           }
-          return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
             Button,
             {
               variant: "bare",
@@ -14247,43 +14313,43 @@ var Rating = React71.forwardRef(
               onMouseEnter: () => setHover(index + 1),
               onFocus: () => setHover(index + 1),
               className: "text-primary focus-visible:ring-focus-blue focus-visible:ring-offset-0",
-              children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(StarGlyph, { fill, px })
+              children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(StarGlyph, { fill, px })
             },
             index
           );
         })
       }
     );
-    const scoreBlock = showValue || typeof count === "number" ? /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "flex flex-wrap items-baseline gap-sm", style: tabular4, children: [
-      showValue ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+    const scoreBlock = showValue || typeof count === "number" ? /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: "flex flex-wrap items-baseline gap-sm", style: tabular4, children: [
+      showValue ? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
         "span",
         {
           "aria-hidden": "true",
-          className: cn62("text-ink", SCORE_TEXT[size]),
+          className: cn63("text-ink", SCORE_TEXT[size]),
           children: formatScore(shown, precision)
         }
       ) : null,
-      typeof count === "number" ? /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("span", { "aria-hidden": "true", className: "text-body-sm text-muted", children: [
+      typeof count === "number" ? /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("span", { "aria-hidden": "true", className: "text-body-sm text-muted", children: [
         "(",
         count.toLocaleString("en-US"),
         ")"
       ] }) : null
     ] }) : null;
-    return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
       "div",
       {
         ref,
-        className: cn62("flex w-full flex-col items-start", className),
+        className: cn63("flex w-full flex-col items-start", className),
         ...rest,
         children: [
-          interactive ? null : /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("span", { className: "sr-only", children: [
+          interactive ? null : /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("span", { className: "sr-only", children: [
             `${formatScore(committed, precision)} out of ${max} stars`,
             typeof count === "number" ? ` from ${count.toLocaleString("en-US")} ${countLabel}` : ""
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
             "div",
             {
-              className: cn62(
+              className: cn63(
                 "flex w-full",
                 valuePlacement === "inline" ? "flex-wrap items-center gap-sm" : "flex-col items-start gap-sm"
               ),
@@ -14293,14 +14359,14 @@ var Rating = React71.forwardRef(
               ]
             }
           ),
-          caption ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("p", { className: "mt-xs text-body-sm text-muted", children: caption }) : null,
-          breakdown && breakdown.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("ul", { className: "mt-lg flex w-full list-none flex-col gap-md p-0", children: breakdown.map((item) => /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
+          caption ? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("p", { className: "mt-xs text-body-sm text-muted", children: caption }) : null,
+          breakdown && breakdown.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("ul", { className: "mt-lg flex w-full list-none flex-col gap-md p-0", children: breakdown.map((item) => /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
             "li",
             {
               className: "grid grid-cols-[minmax(0,5.5rem)_minmax(0,1fr)_auto] items-center gap-lg",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "truncate text-body-sm text-ink", children: item.label }),
-                /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("span", { className: "truncate text-body-sm text-ink", children: item.label }),
+                /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
                   ProgressBar,
                   {
                     ariaLabel: `${item.label}: ${formatScore(clamp(item.value, 0, max), precision)} out of ${max}`,
@@ -14308,7 +14374,7 @@ var Rating = React71.forwardRef(
                     total: max
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
                   "span",
                   {
                     className: "text-body-sm text-ink",
@@ -14328,10 +14394,10 @@ var Rating = React71.forwardRef(
 Rating.displayName = "Rating";
 
 // virtual-pkg:src/atoms/SearchBar/SearchBar.tsx
-var React72 = __toESM(require("react"));
-var import_jsx_runtime72 = require("react/jsx-runtime");
-var cn63 = (...values) => values.filter(Boolean).join(" ");
-var SearchBar = React72.forwardRef(
+var React73 = __toESM(require("react"));
+var import_jsx_runtime73 = require("react/jsx-runtime");
+var cn64 = (...values) => values.filter(Boolean).join(" ");
+var SearchBar = React73.forwardRef(
   ({
     ariaLabel = "Search",
     placeholder = "Search payments",
@@ -14346,7 +14412,7 @@ var SearchBar = React72.forwardRef(
     className,
     ...rest
   }, ref) => {
-    const [internalQuery, setInternalQuery] = React72.useState(
+    const [internalQuery, setInternalQuery] = React73.useState(
       defaultValue ?? ""
     );
     const query = value !== void 0 ? value : internalQuery;
@@ -14354,39 +14420,39 @@ var SearchBar = React72.forwardRef(
       if (value === void 0) setInternalQuery(event.target.value);
       onQueryChange?.(event.target.value);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
       "form",
       {
         role: "search",
-        className: cn63("w-full max-w-3xl", className),
+        className: cn64("w-full max-w-3xl", className),
         onSubmit: (event) => {
           event.preventDefault();
           if (disabled) return;
           onSearch?.(query);
         },
         ...rest,
-        children: /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
           "div",
           {
-            className: cn63(
+            className: cn64(
               "flex w-full items-center gap-sm rounded-xl border bg-surface py-xxs pl-base pr-xxs",
               "transition duration-200 ease-out",
               disabled ? "border-hairline-soft bg-surface-soft" : "border-hairline-strong focus-within:border-primary focus-within:ring-2 focus-within:ring-focus-blue/25",
               forceFocus && !disabled ? "border-primary ring-2 ring-focus-blue/25" : ""
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
                 "span",
                 {
                   "aria-hidden": "true",
-                  className: cn63(
+                  className: cn64(
                     "flex shrink-0 items-center pl-xs",
                     disabled ? "text-muted-soft" : "text-ink"
                   ),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(Icon, { name: "search", size: 20, strokeWidth: 1.75 })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Icon, { name: "search", size: 20, strokeWidth: 1.75 })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
                 Input,
                 {
                   ref,
@@ -14400,24 +14466,24 @@ var SearchBar = React72.forwardRef(
                   disabled,
                   autoComplete: "off",
                   className: "flex-1",
-                  inputClassName: cn63(
+                  inputClassName: cn64(
                     "text-body-lg placeholder:text-muted",
                     "[&::-webkit-search-cancel-button]:appearance-none"
                   )
                 }
               ),
-              hint ? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+              hint ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
                 "span",
                 {
                   "aria-live": "polite",
-                  className: cn63(
+                  className: cn64(
                     "hidden shrink-0 items-center rounded-xl bg-primary-subdued px-md py-xs",
                     "text-caption font-weight-label text-primary-on-subdued sm:inline-flex"
                   ),
                   children: hint
                 }
               ) : null,
-              /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
                 Button,
                 {
                   type: "submit",
@@ -14438,10 +14504,10 @@ var SearchBar = React72.forwardRef(
 SearchBar.displayName = "SearchBar";
 
 // virtual-pkg:src/atoms/SearchResultsList/SearchResultsList.tsx
-var React73 = __toESM(require("react"));
-var import_jsx_runtime73 = require("react/jsx-runtime");
-var cn64 = (...values) => values.filter(Boolean).join(" ");
-var SearchResultsList = React73.forwardRef(
+var React74 = __toESM(require("react"));
+var import_jsx_runtime74 = require("react/jsx-runtime");
+var cn65 = (...values) => values.filter(Boolean).join(" ");
+var SearchResultsList = React74.forwardRef(
   ({
     title = "Search results list",
     searchLabel = "Search results",
@@ -14461,9 +14527,9 @@ var SearchResultsList = React73.forwardRef(
     className,
     ...rest
   }, ref) => {
-    const [internalQuery, setInternalQuery] = React73.useState(defaultQuery);
+    const [internalQuery, setInternalQuery] = React74.useState(defaultQuery);
     const currentQuery = query !== void 0 ? query : internalQuery;
-    const [internalFilter, setInternalFilter] = React73.useState(
+    const [internalFilter, setInternalFilter] = React74.useState(
       defaultFilter ?? allFilterId
     );
     const currentFilter = activeFilter !== void 0 ? activeFilter : internalFilter;
@@ -14479,7 +14545,7 @@ var SearchResultsList = React73.forwardRef(
       if (activeFilter === void 0) setInternalFilter(filterId);
       onFilterChange?.(filterId);
     };
-    const visibleItems = React73.useMemo(() => {
+    const visibleItems = React74.useMemo(() => {
       const needle = currentQuery.trim().toLowerCase();
       return items.filter((item) => {
         const matchesFilter = currentFilter === allFilterId || !item.filter || item.filter === currentFilter;
@@ -14489,35 +14555,35 @@ var SearchResultsList = React73.forwardRef(
       });
     }, [items, currentQuery, currentFilter, allFilterId]);
     const hasQuery = currentQuery.length > 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
       "section",
       {
         ref,
         "aria-label": typeof title === "string" ? title : "Search results",
-        className: cn64("flex w-full flex-col gap-lg", className),
+        className: cn65("flex w-full flex-col gap-lg", className),
         ...rest,
         children: [
-          title ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("h2", { className: "text-display-lg text-ink", children: title }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "flex flex-col gap-sm md:flex-row md:items-center md:gap-md", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
+          title ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("h2", { className: "text-display-lg text-ink", children: title }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "flex flex-col gap-sm md:flex-row md:items-center md:gap-md", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
               "div",
               {
-                className: cn64(
+                className: cn65(
                   "flex w-full items-center gap-sm rounded-xl border bg-surface px-base py-xxs",
                   "border-hairline-strong transition duration-200 ease-out",
                   "focus-within:border-primary focus-within:ring-2 focus-within:ring-focus-blue/25",
                   "md:min-w-0 md:basis-[46%]"
                 ),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
                     "span",
                     {
                       "aria-hidden": "true",
                       className: "flex shrink-0 items-center text-muted",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Icon, { name: "search", size: 18, strokeWidth: 1.75 })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(Icon, { name: "search", size: 18, strokeWidth: 1.75 })
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
                     Input,
                     {
                       chrome: "embedded",
@@ -14528,13 +14594,13 @@ var SearchResultsList = React73.forwardRef(
                       ariaLabel: searchLabel,
                       autoComplete: "off",
                       className: "min-w-0 flex-1",
-                      inputClassName: cn64(
+                      inputClassName: cn65(
                         "text-body-md placeholder:text-muted",
                         "[&::-webkit-search-cancel-button]:appearance-none"
                       )
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
                     Button,
                     {
                       variant: "bare",
@@ -14542,18 +14608,18 @@ var SearchResultsList = React73.forwardRef(
                       "aria-label": "Clear search",
                       disabled: !hasQuery,
                       onClick: handleClear,
-                      className: cn64(
+                      className: cn65(
                         "text-muted transition duration-200 ease-out",
                         "hover:bg-surface-soft hover:text-ink",
                         hasQuery ? "opacity-100" : "pointer-events-none opacity-0"
                       ),
-                      leadingIcon: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Icon, { name: "x", size: 16, strokeWidth: 2 })
+                      leadingIcon: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(Icon, { name: "x", size: 16, strokeWidth: 2 })
                     }
                   )
                 ]
               }
             ),
-            filters.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "flex flex-wrap items-center gap-sm md:shrink-0", children: filters.map((filter) => /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+            filters.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "flex flex-wrap items-center gap-sm md:shrink-0", children: filters.map((filter) => /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
               Chip,
               {
                 appearance: "outline",
@@ -14565,14 +14631,14 @@ var SearchResultsList = React73.forwardRef(
               filter.id
             )) }) : null
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("p", { "aria-live": "polite", className: "sr-only", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("p", { "aria-live": "polite", className: "sr-only", children: [
             visibleItems.length,
             " results"
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "overflow-hidden rounded-lg border border-hairline bg-canvas shadow-card", children: visibleItems.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("ul", { className: "flex flex-col p-xs", children: visibleItems.map((item, index) => {
+          /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "overflow-hidden rounded-lg border border-hairline bg-canvas shadow-card", children: visibleItems.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("ul", { className: "flex flex-col p-xs", children: visibleItems.map((item, index) => {
             const isSelected = item.id === selectedId;
             const isSettled = item.statusKind !== "review";
-            return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("li", { className: "flex", children: /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
+            return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("li", { className: "flex", children: /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
               Button,
               {
                 variant: "row",
@@ -14580,42 +14646,42 @@ var SearchResultsList = React73.forwardRef(
                 "aria-current": isSelected ? "true" : void 0,
                 "data-selected": isSelected || void 0,
                 onClick: () => onSelect?.(item),
-                className: cn64(
+                className: cn65(
                   "py-md",
                   index > 0 && "border-t border-hairline-soft",
                   "[&>span:first-child]:w-full [&>span:first-child]:justify-start"
                 ),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
                     "span",
                     {
                       "aria-hidden": "true",
                       className: "flex size-11 shrink-0 items-center justify-center rounded-md border border-hairline bg-canvas text-ink",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Icon, { name: "store", size: 19, strokeWidth: 1.5 })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(Icon, { name: "store", size: 19, strokeWidth: 1.5 })
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("span", { className: "flex min-w-0 flex-1 flex-col gap-xxs pl-sm", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "truncate text-label text-ink", children: item.name }),
-                    /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "truncate text-body-sm text-muted", children: item.reference })
+                  /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("span", { className: "flex min-w-0 flex-1 flex-col gap-xxs pl-sm", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: "truncate text-label text-ink", children: item.name }),
+                    /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: "truncate text-body-sm text-muted", children: item.reference })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "hidden w-32 shrink-0 text-body-md text-muted sm:block", children: item.date }),
-                  /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "flex w-40 shrink-0 items-center", children: isSettled ? /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("span", { className: "inline-flex min-w-0 items-center gap-sm text-body-md text-ink", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: "hidden w-32 shrink-0 text-body-md text-muted sm:block", children: item.date }),
+                  /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: "flex w-40 shrink-0 items-center", children: isSettled ? /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("span", { className: "inline-flex min-w-0 items-center gap-sm text-body-md text-ink", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
                       "span",
                       {
                         "aria-hidden": "true",
                         className: "size-2 shrink-0 rounded-full bg-primary"
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "truncate", children: item.status })
-                  ] }) : /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Badge, { variant: "soft", tone: "info", size: "md", children: item.status }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "w-24 shrink-0 text-right text-body-tabular text-ink", children: item.amount })
+                    /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: "truncate", children: item.status })
+                  ] }) : /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(Badge, { variant: "soft", tone: "info", size: "md", children: item.status }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: "w-24 shrink-0 text-right text-body-tabular text-ink", children: item.amount })
                 ]
               }
             ) }, item.id);
-          }) }) : /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "flex flex-col items-center gap-xs px-lg py-xxl text-center", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("p", { className: "text-body-md text-ink", children: emptyLabel ?? "No results found" }),
-            /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("p", { className: "text-body-sm text-muted", children: "Try a different name, reference, or filter." })
+          }) }) : /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "flex flex-col items-center gap-xs px-lg py-xxl text-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("p", { className: "text-body-md text-ink", children: emptyLabel ?? "No results found" }),
+            /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("p", { className: "text-body-sm text-muted", children: "Try a different name, reference, or filter." })
           ] }) })
         ]
       }
@@ -14625,13 +14691,13 @@ var SearchResultsList = React73.forwardRef(
 SearchResultsList.displayName = "SearchResultsList";
 
 // virtual-pkg:src/atoms/Sidebar/Sidebar.tsx
-var React76 = __toESM(require("react"));
+var React77 = __toESM(require("react"));
 
 // virtual-pkg:src/atoms/SidebarDesktop/SidebarDesktop.tsx
-var React74 = __toESM(require("react"));
+var React75 = __toESM(require("react"));
 var ReactDOM11 = __toESM(require("react-dom"));
-var import_jsx_runtime74 = require("react/jsx-runtime");
-var cn65 = (...values) => values.filter(Boolean).join(" ");
+var import_jsx_runtime75 = require("react/jsx-runtime");
+var cn66 = (...values) => values.filter(Boolean).join(" ");
 var MENU_GAP2 = 6;
 var MENU_MIN_WIDTH = 224;
 var VIEWPORT_INSET6 = 12;
@@ -14661,7 +14727,7 @@ var SAMPLE_SECONDARY = [
   { id: "team", label: "Team", icon: "group", href: "#team" }
 ];
 var SAMPLE_PLAN = { name: "Pro", price: "$2,400.00 / month", href: "#plan" };
-var glyph3 = (name, size = 16, strokeWidth = 1.75) => /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+var glyph3 = (name, size = 16, strokeWidth = 1.75) => /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
   Icon,
   {
     name,
@@ -14690,12 +14756,12 @@ var rowAccessibleName = (label, badge) => {
 var RailBadge = ({
   badge,
   active
-}) => /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
   "span",
   {
     "aria-hidden": "true",
     "data-active": active || void 0,
-    className: cn65(
+    className: cn66(
       "ml-auto flex h-4 min-w-4 shrink-0 items-center justify-center rounded-full",
       "bg-primary px-xxs text-caption text-on-primary",
       "data-[active=true]:bg-on-primary data-[active=true]:text-primary"
@@ -14703,13 +14769,13 @@ var RailBadge = ({
     children: badgeText(badge)
   }
 );
-var railGlyph = (item, folded) => /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("span", { className: "relative inline-flex shrink-0 items-center", children: [
+var railGlyph = (item, folded) => /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("span", { className: "relative inline-flex shrink-0 items-center", children: [
   glyph3(item.icon, 16, 1.75),
-  folded && hasBadge(item.badge) ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+  folded && hasBadge(item.badge) ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
     "span",
     {
       "aria-hidden": "true",
-      className: cn65(
+      className: cn66(
         "pointer-events-none absolute -right-xxs -top-xxs size-2 rounded-full",
         "bg-primary",
         "group-data-[active=true]:bg-on-primary"
@@ -14720,8 +14786,8 @@ var railGlyph = (item, folded) => /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)
 var RowLabel = ({
   folded,
   children
-}) => folded ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: "sr-only", children }) : /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: "truncate", children });
-var railRowClass = (active, folded) => cn65(
+}) => folded ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: "sr-only", children }) : /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: "truncate", children });
+var railRowClass = (active, folded) => cn66(
   "group flex w-full cursor-pointer items-center rounded-lg border-0 bg-transparent",
   "text-body-md transition duration-150 ease-out",
   "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-blue",
@@ -14730,7 +14796,7 @@ var railRowClass = (active, folded) => cn65(
   folded ? "justify-center px-md py-sm" : "gap-md px-lg py-sm"
 );
 var isModified = (event) => event.metaKey || event.ctrlKey || event.shiftKey || event.altKey ? true : event.button !== 0;
-var SidebarDesktop = React74.forwardRef(
+var SidebarDesktop = React75.forwardRef(
   ({
     wordmark = "Nimbus",
     homeHref = "#home",
@@ -14760,27 +14826,27 @@ var SidebarDesktop = React74.forwardRef(
     className,
     ...rest
   }, ref) => {
-    const uid = React74.useId().replace(/[^a-zA-Z0-9-]/g, "");
+    const uid = React75.useId().replace(/[^a-zA-Z0-9-]/g, "");
     const primaryNavId = `${uid}-primary`;
     const accountsPanelId = `${uid}-accounts`;
-    const triggerRef = React74.useRef(null);
-    const panelRef = React74.useRef(null);
-    const [internalFolded, setInternalFolded] = React74.useState(defaultFolded);
+    const triggerRef = React75.useRef(null);
+    const panelRef = React75.useRef(null);
+    const [internalFolded, setInternalFolded] = React75.useState(defaultFolded);
     const isFolded = folded !== void 0 ? folded : internalFolded;
     const navItems = items ?? SAMPLE_ITEMS;
     const secondaryNav = secondaryItems ?? SAMPLE_SECONDARY;
     const accountList = accounts ?? SAMPLE_ACCOUNTS;
     const planTile = plan === void 0 ? SAMPLE_PLAN : plan;
-    const [internalAccount, setInternalAccount] = React74.useState(
+    const [internalAccount, setInternalAccount] = React75.useState(
       defaultAccountValue ?? accountList[0]?.value
     );
     const selectedAccount = accountValue !== void 0 ? accountValue : internalAccount;
     const currentAccount = accountList.find(
       (account) => account.value === selectedAccount
     );
-    const [accountsOpen, setAccountsOpen] = React74.useState(false);
-    const [box, setBox] = React74.useState(null);
-    const [expandedId, setExpandedId] = React74.useState(
+    const [accountsOpen, setAccountsOpen] = React75.useState(false);
+    const [box, setBox] = React75.useState(null);
+    const [expandedId, setExpandedId] = React75.useState(
       defaultExpandedId
     );
     const setFolded = (next) => {
@@ -14803,7 +14869,7 @@ var SidebarDesktop = React74.forwardRef(
         event.preventDefault();
       }
     };
-    const measure = React74.useCallback(() => {
+    const measure = React75.useCallback(() => {
       const trigger = triggerRef.current;
       if (!trigger) {
         return;
@@ -14836,7 +14902,7 @@ var SidebarDesktop = React74.forwardRef(
       );
       setBox({ top: clampedTop, left, width, maxHeight });
     }, []);
-    React74.useEffect(() => {
+    React75.useEffect(() => {
       if (!accountsOpen) {
         return;
       }
@@ -14884,7 +14950,7 @@ var SidebarDesktop = React74.forwardRef(
     const subRowClass2 = "flex w-full cursor-pointer items-center rounded-md px-lg py-xs text-body-sm text-on-primary/70 transition duration-150 ease-out hover:bg-on-primary/10 hover:text-on-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-blue focus-visible:ring-inset";
     const bellLabel = notificationCount > 0 ? `${notificationsLabel}, ${notificationCount} unread` : notificationsLabel;
     const accountsPanel = typeof document === "undefined" ? null : ReactDOM11.createPortal(
-      /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
         "div",
         {
           ref: panelRef,
@@ -14901,7 +14967,7 @@ var SidebarDesktop = React74.forwardRef(
             maxHeight: box?.maxHeight ?? void 0,
             zIndex: "var(--z-popover, 1300)"
           },
-          className: cn65(
+          className: cn66(
             "origin-top overflow-y-auto overscroll-contain rounded-lg border border-hairline",
             "bg-surface p-xs shadow-lg transition duration-200 ease-out",
             "data-[state=open]:translate-y-0 data-[state=open]:scale-100 data-[state=open]:opacity-100",
@@ -14909,7 +14975,7 @@ var SidebarDesktop = React74.forwardRef(
           ),
           children: accountList.map((account) => {
             const selected = account.value === selectedAccount;
-            return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
               Button,
               {
                 variant: "row",
@@ -14919,8 +14985,8 @@ var SidebarDesktop = React74.forwardRef(
                 "data-selected": selected,
                 tabIndex: -1,
                 onClick: () => chooseAccount(account),
-                leadingIcon: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(Icon, { name: "layers", size: 16, tone: "muted" }),
-                trailingIcon: selected ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+                leadingIcon: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(Icon, { name: "layers", size: 16, tone: "muted" }),
+                trailingIcon: selected ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
                   Icon,
                   {
                     name: "check",
@@ -14938,7 +15004,7 @@ var SidebarDesktop = React74.forwardRef(
       ),
       document.body
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
       "aside",
       {
         ref,
@@ -14946,7 +15012,7 @@ var SidebarDesktop = React74.forwardRef(
         style: {
           width: isFolded ? "var(--container-sidebar-rail, 72px)" : "var(--container-sidebar, 240px)"
         },
-        className: cn65(
+        className: cn66(
           "flex h-full min-h-0 shrink-0 flex-col bg-brand-dark text-on-primary",
           "transition-[width] duration-200 ease-out",
           isFolded ? "px-xs" : "px-md",
@@ -14955,31 +15021,31 @@ var SidebarDesktop = React74.forwardRef(
         ),
         ...rest,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
             "div",
             {
-              className: cn65(
+              className: cn66(
                 "flex w-full shrink-0 items-center pb-lg",
                 isFolded ? "justify-center" : "justify-between gap-sm"
               ),
               children: [
-                isFolded ? null : /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
+                isFolded ? null : /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
                   "a",
                   {
                     href: homeHref,
                     onClick: navigate({ id: "home", href: homeHref }),
-                    className: cn65(
+                    className: cn66(
                       "inline-flex min-w-0 cursor-pointer items-center gap-sm rounded-md px-xs text-on-primary",
                       "transition duration-150 ease-out hover:opacity-80",
                       "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-blue"
                     ),
                     children: [
                       glyph3("slash", 20, 3),
-                      /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: "truncate text-body-lg font-weight-label", children: wordmark })
+                      /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: "truncate text-body-lg font-weight-label", children: wordmark })
                     ]
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
                   Button,
                   {
                     variant: "bare",
@@ -14988,7 +15054,7 @@ var SidebarDesktop = React74.forwardRef(
                     "aria-expanded": !isFolded,
                     "aria-controls": primaryNavId,
                     onClick: () => setFolded(!isFolded),
-                    className: cn65(
+                    className: cn66(
                       "shrink-0 rounded-md text-on-primary/60",
                       "hover:bg-on-primary/10 hover:text-on-primary"
                     ),
@@ -14998,7 +15064,7 @@ var SidebarDesktop = React74.forwardRef(
               ]
             }
           ),
-          accountList.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+          accountList.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
             Button,
             {
               ref: triggerRef,
@@ -15014,43 +15080,43 @@ var SidebarDesktop = React74.forwardRef(
                 setAccountsOpen((previous) => !previous);
               },
               className: "shrink-0",
-              trailingIcon: isFolded ? void 0 : /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+              trailingIcon: isFolded ? void 0 : /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
                 "span",
                 {
                   "aria-hidden": "true",
-                  className: cn65(
+                  className: cn66(
                     "flex shrink-0 items-center transition-transform duration-200 ease-out",
                     accountsOpen ? "rotate-180" : "rotate-0"
                   ),
                   children: glyph3("chevron-down", 16, 2)
                 }
               ),
-              children: /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
                 "span",
                 {
-                  className: cn65("flex min-w-0 items-center", isFolded ? "" : "gap-sm"),
+                  className: cn66("flex min-w-0 items-center", isFolded ? "" : "gap-sm"),
                   children: [
                     glyph3("layers", 16, 1.75),
-                    isFolded ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: "sr-only", children: currentAccount?.label ?? "Choose account" }) : /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: "truncate", children: currentAccount?.label ?? "Choose account" })
+                    isFolded ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: "sr-only", children: currentAccount?.label ?? "Choose account" }) : /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: "truncate", children: currentAccount?.label ?? "Choose account" })
                   ]
                 }
               )
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
             "div",
             {
-              className: cn65(
+              className: cn66(
                 "flex w-full shrink-0 items-center rounded-lg bg-on-primary/10 py-sm text-body-md text-on-primary",
                 isFolded ? "justify-center px-md" : "gap-sm px-md"
               ),
               children: [
                 glyph3("layers", 16, 1.75),
-                isFolded ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: "sr-only", children: currentAccount?.label }) : /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: "truncate", children: currentAccount?.label })
+                isFolded ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: "sr-only", children: currentAccount?.label }) : /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: "truncate", children: currentAccount?.label })
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "mt-lg flex min-h-0 flex-1 flex-col overflow-y-auto overscroll-contain", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: "mt-lg flex min-h-0 flex-1 flex-col overflow-y-auto overscroll-contain", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
               "nav",
               {
                 id: primaryNavId,
@@ -15060,7 +15126,7 @@ var SidebarDesktop = React74.forwardRef(
                   const active = item.id === activeId;
                   const badged = hasBadge(item.badge);
                   if (!item.children?.length) {
-                    return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
+                    return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
                       "a",
                       {
                         href: item.href ?? `#${item.id}`,
@@ -15071,8 +15137,8 @@ var SidebarDesktop = React74.forwardRef(
                         className: railRowClass(active, isFolded),
                         children: [
                           railGlyph(item, isFolded),
-                          /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(RowLabel, { folded: isFolded, children: item.label }),
-                          !isFolded && badged ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(RailBadge, { badge: item.badge, active }) : null
+                          /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(RowLabel, { folded: isFolded, children: item.label }),
+                          !isFolded && badged ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(RailBadge, { badge: item.badge, active }) : null
                         ]
                       },
                       item.id
@@ -15080,8 +15146,8 @@ var SidebarDesktop = React74.forwardRef(
                   }
                   const expanded = expandedId === item.id;
                   const subId = `${uid}-${item.id}-sub`;
-                  return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "flex flex-col gap-xxs", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: "flex flex-col gap-xxs", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
                       Button,
                       {
                         variant: "rail-row",
@@ -15094,19 +15160,19 @@ var SidebarDesktop = React74.forwardRef(
                         onClick: () => toggleExpanded(item.id),
                         className: "group",
                         leadingIcon: railGlyph(item, isFolded),
-                        trailingIcon: isFolded ? void 0 : /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("span", { className: "flex items-center gap-xs", children: [
-                          badged ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+                        trailingIcon: isFolded ? void 0 : /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("span", { className: "flex items-center gap-xs", children: [
+                          badged ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
                             RailBadge,
                             {
                               badge: item.badge,
                               active
                             }
                           ) : null,
-                          /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
                             "span",
                             {
                               "aria-hidden": "true",
-                              className: cn65(
+                              className: cn66(
                                 "flex shrink-0 items-center transition-transform duration-200 ease-out",
                                 expanded ? "rotate-180" : "rotate-0"
                               ),
@@ -15114,19 +15180,19 @@ var SidebarDesktop = React74.forwardRef(
                             }
                           )
                         ] }),
-                        children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(RowLabel, { folded: isFolded, children: item.label })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(RowLabel, { folded: isFolded, children: item.label })
                       }
                     ),
-                    isFolded ? null : /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+                    isFolded ? null : /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
                       "div",
                       {
                         id: subId,
                         "data-state": expanded ? "open" : "closed",
-                        className: cn65(
+                        className: cn66(
                           "grid transition-[grid-template-rows,opacity] duration-200 ease-out",
                           expanded ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"
                         ),
-                        children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("ul", { className: "flex flex-col gap-xxs pb-xs pl-xl pt-xxs", children: item.children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+                        children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: "overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("ul", { className: "flex flex-col gap-xxs pb-xs pl-xl pt-xxs", children: item.children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
                           "a",
                           {
                             href: child.href ?? `#${child.id}`,
@@ -15136,7 +15202,7 @@ var SidebarDesktop = React74.forwardRef(
                             }),
                             tabIndex: expanded ? void 0 : -1,
                             className: subRowClass2,
-                            children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: "truncate", children: child.label })
+                            children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: "truncate", children: child.label })
                           }
                         ) }, child.id)) }) })
                       }
@@ -15145,7 +15211,7 @@ var SidebarDesktop = React74.forwardRef(
                 })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "mt-lg shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: "mt-lg shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
               Button,
               {
                 variant: "inverse-outline",
@@ -15157,17 +15223,17 @@ var SidebarDesktop = React74.forwardRef(
                 children: isFolded ? void 0 : primaryActionLabel
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
               "span",
               {
                 "aria-hidden": "true",
                 className: "mt-lg block h-px shrink-0 bg-on-primary/15"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("nav", { "aria-label": "Secondary", className: "mt-lg flex flex-col gap-xxs", children: secondaryNav.map((item) => {
+            /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("nav", { "aria-label": "Secondary", className: "mt-lg flex flex-col gap-xxs", children: secondaryNav.map((item) => {
               const active = item.id === secondaryActiveId;
               const badged = hasBadge(item.badge);
-              return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
+              return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
                 "a",
                 {
                   href: item.href ?? `#${item.id}`,
@@ -15178,21 +15244,21 @@ var SidebarDesktop = React74.forwardRef(
                   className: railRowClass(active, isFolded),
                   children: [
                     railGlyph(item, isFolded),
-                    /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(RowLabel, { folded: isFolded, children: item.label }),
-                    !isFolded && badged ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(RailBadge, { badge: item.badge, active }) : null
+                    /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(RowLabel, { folded: isFolded, children: item.label }),
+                    !isFolded && badged ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(RailBadge, { badge: item.badge, active }) : null
                   ]
                 },
                 item.id
               );
             }) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "mt-lg shrink-0", children: [
-            planTile ? /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: "mt-lg shrink-0", children: [
+            planTile ? /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
               "a",
               {
                 href: planTile.href ?? "#plan",
                 onClick: navigate({ id: "plan", href: planTile.href }),
-                className: cn65(
+                className: cn66(
                   "flex w-full cursor-pointer items-center rounded-lg bg-on-primary/10",
                   "transition duration-150 ease-out hover:bg-on-primary/15",
                   "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-blue",
@@ -15200,33 +15266,33 @@ var SidebarDesktop = React74.forwardRef(
                   isFolded ? "justify-center p-sm" : "gap-sm p-sm"
                 ),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: "flex size-8 shrink-0 items-center justify-center rounded-md bg-primary text-on-primary", children: glyph3("chart-bar", 16, 2) }),
-                  isFolded ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: "sr-only", children: `${planTile.name}, ${planTile.price}` }) : /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(import_jsx_runtime74.Fragment, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("span", { className: "flex min-w-0 flex-1 flex-col", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: "truncate text-body-md text-on-primary", children: planTile.name }),
-                      /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: "truncate text-caption text-on-primary/60", children: planTile.price })
+                  /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: "flex size-8 shrink-0 items-center justify-center rounded-md bg-primary text-on-primary", children: glyph3("chart-bar", 16, 2) }),
+                  isFolded ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: "sr-only", children: `${planTile.name}, ${planTile.price}` }) : /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(import_jsx_runtime75.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("span", { className: "flex min-w-0 flex-1 flex-col", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: "truncate text-body-md text-on-primary", children: planTile.name }),
+                      /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: "truncate text-caption text-on-primary/60", children: planTile.price })
                     ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { "aria-hidden": "true", className: "shrink-0 text-on-primary/60", children: glyph3("arrow-right", 16, 2) })
+                    /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { "aria-hidden": "true", className: "shrink-0 text-on-primary/60", children: glyph3("arrow-right", 16, 2) })
                   ] })
                 ]
               }
             ) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
               "div",
               {
-                className: cn65(
+                className: cn66(
                   "mt-sm flex items-center",
                   isFolded ? "justify-center" : "gap-sm pl-xs"
                 ),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(Avatar, { name: profile.name, src: profile.src, size: "sm" }),
-                  isFolded ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: "sr-only", children: profile.name }) : /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(import_jsx_runtime74.Fragment, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("span", { className: "flex min-w-0 flex-1 flex-col", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: "truncate text-body-sm text-on-primary", children: profile.name }),
-                      profile.email ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: "truncate text-caption text-on-primary/60", children: profile.email }) : null
+                  /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(Avatar, { name: profile.name, src: profile.src, size: "sm" }),
+                  isFolded ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: "sr-only", children: profile.name }) : /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(import_jsx_runtime75.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("span", { className: "flex min-w-0 flex-1 flex-col", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: "truncate text-body-sm text-on-primary", children: profile.name }),
+                      profile.email ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: "truncate text-caption text-on-primary/60", children: profile.email }) : null
                     ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("span", { className: "relative inline-flex shrink-0", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("span", { className: "relative inline-flex shrink-0", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
                         Button,
                         {
                           variant: "bare",
@@ -15237,11 +15303,11 @@ var SidebarDesktop = React74.forwardRef(
                           children: glyph3("bell", 16, 1.75)
                         }
                       ),
-                      notificationCount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+                      notificationCount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
                         "span",
                         {
                           "aria-hidden": "true",
-                          className: cn65(
+                          className: cn66(
                             "pointer-events-none absolute -right-xxs -top-xxs",
                             "flex h-4 min-w-4 items-center justify-center rounded-full",
                             "bg-primary px-xxs text-caption text-on-primary"
@@ -15250,7 +15316,7 @@ var SidebarDesktop = React74.forwardRef(
                         }
                       ) : null
                     ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
                       Button,
                       {
                         variant: "bare",
@@ -15275,10 +15341,10 @@ var SidebarDesktop = React74.forwardRef(
 SidebarDesktop.displayName = "SidebarDesktop";
 
 // virtual-pkg:src/atoms/SidebarMobile/SidebarMobile.tsx
-var React75 = __toESM(require("react"));
+var React76 = __toESM(require("react"));
 var import_react_dom4 = require("react-dom");
-var import_jsx_runtime75 = require("react/jsx-runtime");
-var cn66 = (...values) => values.filter(Boolean).join(" ");
+var import_jsx_runtime76 = require("react/jsx-runtime");
+var cn67 = (...values) => values.filter(Boolean).join(" ");
 var SAMPLE_ACCOUNTS2 = [
   { value: "acme", label: "Acme Payments" },
   { value: "northwind", label: "Northwind Labs" },
@@ -15305,7 +15371,7 @@ var SAMPLE_SECONDARY2 = [
   { id: "team", label: "Team", icon: "group", href: "#team" }
 ];
 var SAMPLE_PLAN2 = { name: "Pro", price: "$2,400.00 / month", href: "#plan" };
-var glyph4 = (name, size = 18, strokeWidth = 1.75) => /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(Icon, { name, size, strokeWidth, style: { color: "inherit" } });
+var glyph4 = (name, size = 18, strokeWidth = 1.75) => /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Icon, { name, size, strokeWidth, style: { color: "inherit" } });
 var hasBadge2 = (badge) => {
   if (badge === void 0 || badge === null) {
     return false;
@@ -15326,12 +15392,12 @@ var rowAccessibleName2 = (label, badge) => {
 var NavBadge = ({
   badge,
   active
-}) => /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
   "span",
   {
     "aria-hidden": "true",
     "data-active": active || void 0,
-    className: cn66(
+    className: cn67(
       "ml-auto flex h-4 min-w-4 shrink-0 items-center justify-center rounded-full",
       "bg-primary px-xxs text-caption text-on-primary",
       "data-[active=true]:bg-on-primary data-[active=true]:text-primary"
@@ -15339,14 +15405,14 @@ var NavBadge = ({
     children: badgeText2(badge)
   }
 );
-var rowClass = (active) => cn66(
+var rowClass = (active) => cn67(
   "flex min-h-10 w-full cursor-pointer items-center gap-md rounded-lg px-md py-sm",
   "text-body-md transition duration-150 ease-out",
   "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-blue",
   "focus-visible:ring-inset",
   active ? "bg-primary text-on-primary hover:bg-primary-hover active:bg-primary-active" : "text-ink hover:bg-surface-soft active:bg-surface-strong"
 );
-var subRowClass = cn66(
+var subRowClass = cn67(
   "flex min-h-7 w-full cursor-pointer items-center gap-md rounded-md px-md py-xxs",
   "text-body-sm text-body transition duration-150 ease-out",
   "hover:bg-surface-soft hover:text-ink active:bg-surface-strong",
@@ -15354,7 +15420,7 @@ var subRowClass = cn66(
   "focus-visible:ring-inset"
 );
 var isModified2 = (event) => event.metaKey || event.ctrlKey || event.shiftKey || event.altKey ? true : event.button !== 0;
-var SidebarMobile = React75.forwardRef(
+var SidebarMobile = React76.forwardRef(
   ({
     wordmark = "Nimbus",
     homeHref = "#home",
@@ -15389,31 +15455,31 @@ var SidebarMobile = React75.forwardRef(
     className,
     ...rest
   }, ref) => {
-    const uid = React75.useId().replace(/[^a-zA-Z0-9-]/g, "");
+    const uid = React76.useId().replace(/[^a-zA-Z0-9-]/g, "");
     const drawerId = `${uid}-drawer`;
     const accountsPanelId = `${uid}-accounts`;
-    const toggleRef = React75.useRef(null);
-    const closeRef = React75.useRef(null);
-    const triggerRef = React75.useRef(null);
-    const panelRef = React75.useRef(null);
-    const [internalOpen, setInternalOpen] = React75.useState(defaultOpen);
+    const toggleRef = React76.useRef(null);
+    const closeRef = React76.useRef(null);
+    const triggerRef = React76.useRef(null);
+    const panelRef = React76.useRef(null);
+    const [internalOpen, setInternalOpen] = React76.useState(defaultOpen);
     const isOpen = open !== void 0 ? open : internalOpen;
     const navItems = items ?? SAMPLE_ITEMS2;
     const secondaryNav = secondaryItems ?? SAMPLE_SECONDARY2;
     const accountList = accounts ?? SAMPLE_ACCOUNTS2;
     const planTile = plan === void 0 ? SAMPLE_PLAN2 : plan;
-    const [internalAccount, setInternalAccount] = React75.useState(
+    const [internalAccount, setInternalAccount] = React76.useState(
       defaultAccountValue ?? accountList[0]?.value
     );
     const selectedAccount = accountValue !== void 0 ? accountValue : internalAccount;
     const currentAccount = accountList.find(
       (account) => account.value === selectedAccount
     );
-    const [accountsOpen, setAccountsOpen] = React75.useState(false);
-    const [expandedId, setExpandedId] = React75.useState(
+    const [accountsOpen, setAccountsOpen] = React76.useState(false);
+    const [expandedId, setExpandedId] = React76.useState(
       defaultExpandedId
     );
-    const setOpen = React75.useCallback(
+    const setOpen = React76.useCallback(
       (next) => {
         if (open === void 0) {
           setInternalOpen(next);
@@ -15429,8 +15495,8 @@ var SidebarMobile = React75.forwardRef(
       }
       setOpen(false);
     };
-    const wasOpen = React75.useRef(isOpen);
-    React75.useEffect(() => {
+    const wasOpen = React76.useRef(isOpen);
+    React76.useEffect(() => {
       if (isOpen && !wasOpen.current) {
         closeRef.current?.focus();
       }
@@ -15440,7 +15506,7 @@ var SidebarMobile = React75.forwardRef(
       }
       wasOpen.current = isOpen;
     }, [isOpen]);
-    React75.useEffect(() => {
+    React76.useEffect(() => {
       if (!isOpen) {
         return;
       }
@@ -15450,7 +15516,7 @@ var SidebarMobile = React75.forwardRef(
         document.body.style.overflow = overflow;
       };
     }, [isOpen]);
-    React75.useEffect(() => {
+    React76.useEffect(() => {
       if (!isOpen) {
         return;
       }
@@ -15498,7 +15564,7 @@ var SidebarMobile = React75.forwardRef(
     };
     const bellLabel = notificationCount > 0 ? `${notificationsLabel}, ${notificationCount} unread` : notificationsLabel;
     const drawer = typeof document === "undefined" ? null : (0, import_react_dom4.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
         "div",
         {
           "data-state": isOpen ? "open" : "closed",
@@ -15509,22 +15575,22 @@ var SidebarMobile = React75.forwardRef(
             inset: 0,
             zIndex: "var(--z-modal, 1200)"
           },
-          className: cn66(
+          className: cn67(
             "transition-opacity duration-200 ease-out",
             isOpen ? "pointer-events-auto" : "pointer-events-none"
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
               "div",
               {
                 "aria-hidden": "true",
-                className: cn66(
+                className: cn67(
                   "absolute inset-0 bg-scrim/50 transition-opacity duration-200 ease-out",
                   isOpen ? "opacity-100" : "opacity-0"
                 )
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
               "div",
               {
                 id: drawerId,
@@ -15533,28 +15599,28 @@ var SidebarMobile = React75.forwardRef(
                 "aria-modal": "true",
                 "aria-label": menuLabel,
                 "data-state": isOpen ? "open" : "closed",
-                className: cn66(
+                className: cn67(
                   "absolute inset-y-sm left-sm flex w-[86%] flex-col overflow-hidden",
                   "max-w-[var(--container-drawer,360px)] rounded-xl bg-surface shadow-modal",
                   "transition-[transform,visibility] duration-200 ease-out",
                   isOpen ? "visible translate-x-0" : "invisible -translate-x-full"
                 ),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: "flex shrink-0 items-center justify-between gap-md px-lg pb-sm pt-md", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "flex shrink-0 items-center justify-between gap-md px-lg pb-sm pt-md", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
                       "a",
                       {
                         href: homeHref,
                         onClick: navigate({ id: "home", href: homeHref }),
-                        className: cn66(
+                        className: cn67(
                           "inline-flex min-w-0 cursor-pointer items-center rounded-xs",
                           "transition duration-150 ease-out hover:opacity-80",
                           "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-blue"
                         ),
-                        children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(Logo, { size: "md", wordmark })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Logo, { size: "md", wordmark })
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
                       Button,
                       {
                         ref: closeRef,
@@ -15567,9 +15633,9 @@ var SidebarMobile = React75.forwardRef(
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: "min-h-0 flex-1 overflow-y-auto overscroll-contain px-md pb-sm", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: "px-xs", children: [
-                      accountList.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "min-h-0 flex-1 overflow-y-auto overscroll-contain px-md pb-sm", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "px-xs", children: [
+                      accountList.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
                         Button,
                         {
                           ref: triggerRef,
@@ -15579,37 +15645,37 @@ var SidebarMobile = React75.forwardRef(
                           "aria-expanded": accountsOpen,
                           "aria-controls": accountsPanelId,
                           onClick: () => setAccountsOpen((previous) => !previous),
-                          trailingIcon: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+                          trailingIcon: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
                             "span",
                             {
                               "aria-hidden": "true",
-                              className: cn66(
+                              className: cn67(
                                 "flex shrink-0 items-center transition-transform duration-200 ease-out",
                                 accountsOpen ? "rotate-180" : "rotate-0"
                               ),
                               children: glyph4("chevron-down", 16, 2)
                             }
                           ),
-                          children: /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("span", { className: "flex min-w-0 items-center gap-sm", children: [
+                          children: /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("span", { className: "flex min-w-0 items-center gap-sm", children: [
                             glyph4("layers", 18, 1.75),
-                            /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: "truncate", children: currentAccount?.label ?? "Choose account" })
+                            /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: "truncate", children: currentAccount?.label ?? "Choose account" })
                           ] })
                         }
-                      ) : /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: "flex min-h-10 w-full items-center gap-sm rounded-lg bg-surface-soft px-md py-sm text-body-md text-ink", children: [
+                      ) : /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "flex min-h-10 w-full items-center gap-sm rounded-lg bg-surface-soft px-md py-sm text-body-md text-ink", children: [
                         glyph4("layers", 18, 1.75),
-                        /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: "truncate", children: currentAccount?.label })
+                        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: "truncate", children: currentAccount?.label })
                       ] }),
-                      accountList.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+                      accountList.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
                         "div",
                         {
                           id: accountsPanelId,
                           "data-state": accountsOpen ? "open" : "closed",
                           "aria-hidden": accountsOpen ? void 0 : true,
-                          className: cn66(
+                          className: cn67(
                             "grid transition-[grid-template-rows,opacity] duration-200 ease-out",
                             accountsOpen ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"
                           ),
-                          children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: "overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+                          children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: "overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
                             "div",
                             {
                               role: "listbox",
@@ -15617,7 +15683,7 @@ var SidebarMobile = React75.forwardRef(
                               className: "mt-xs flex flex-col gap-xxs rounded-lg border border-hairline bg-surface p-xs shadow-sm",
                               children: accountList.map((account) => {
                                 const selected = account.value === selectedAccount;
-                                return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+                                return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
                                   Button,
                                   {
                                     variant: "row",
@@ -15627,8 +15693,8 @@ var SidebarMobile = React75.forwardRef(
                                     "data-selected": selected,
                                     tabIndex: accountsOpen ? void 0 : -1,
                                     onClick: () => chooseAccount(account),
-                                    leadingIcon: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(Icon, { name: "layers", size: 16, tone: "muted" }),
-                                    trailingIcon: selected ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+                                    leadingIcon: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Icon, { name: "layers", size: 16, tone: "muted" }),
+                                    trailingIcon: selected ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
                                       Icon,
                                       {
                                         name: "check",
@@ -15639,7 +15705,7 @@ var SidebarMobile = React75.forwardRef(
                                         }
                                       }
                                     ) : void 0,
-                                    children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: "truncate", children: account.label })
+                                    children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: "truncate", children: account.label })
                                   },
                                   account.value
                                 );
@@ -15649,11 +15715,11 @@ var SidebarMobile = React75.forwardRef(
                         }
                       ) : null
                     ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("nav", { "aria-label": "Primary", className: "mt-md flex flex-col gap-xxs", children: navItems.map((item) => {
+                    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("nav", { "aria-label": "Primary", className: "mt-md flex flex-col gap-xxs", children: navItems.map((item) => {
                       const active = item.id === activeId;
                       const badged = hasBadge2(item.badge);
                       if (!item.children?.length) {
-                        return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
+                        return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
                           "a",
                           {
                             href: item.href ?? `#${item.id}`,
@@ -15663,8 +15729,8 @@ var SidebarMobile = React75.forwardRef(
                             className: rowClass(active),
                             children: [
                               glyph4(item.icon, 18, 1.75),
-                              /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: "truncate", children: item.label }),
-                              badged ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+                              /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: "truncate", children: item.label }),
+                              badged ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
                                 NavBadge,
                                 {
                                   badge: item.badge,
@@ -15678,8 +15744,8 @@ var SidebarMobile = React75.forwardRef(
                       }
                       const expanded = expandedId === item.id;
                       const subId = `${uid}-${item.id}-sub`;
-                      return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: "flex flex-col gap-xxs", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+                      return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "flex flex-col gap-xxs", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
                           Button,
                           {
                             variant: "nav-row",
@@ -15691,19 +15757,19 @@ var SidebarMobile = React75.forwardRef(
                             onClick: () => toggleExpanded(item.id),
                             className: "px-md",
                             leadingIcon: glyph4(item.icon, 18, 1.75),
-                            trailingIcon: /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("span", { className: "flex items-center gap-xs", children: [
-                              badged ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+                            trailingIcon: /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("span", { className: "flex items-center gap-xs", children: [
+                              badged ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
                                 NavBadge,
                                 {
                                   badge: item.badge,
                                   active
                                 }
                               ) : null,
-                              /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+                              /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
                                 "span",
                                 {
                                   "aria-hidden": "true",
-                                  className: cn66(
+                                  className: cn67(
                                     "flex shrink-0 items-center transition-transform duration-200 ease-out",
                                     expanded ? "rotate-180" : "rotate-0"
                                   ),
@@ -15711,20 +15777,20 @@ var SidebarMobile = React75.forwardRef(
                                 }
                               )
                             ] }),
-                            children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: "truncate text-left", children: item.label })
+                            children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: "truncate text-left", children: item.label })
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
                           "div",
                           {
                             id: subId,
                             "data-state": expanded ? "open" : "closed",
                             "aria-hidden": expanded ? void 0 : true,
-                            className: cn66(
+                            className: cn67(
                               "grid transition-[grid-template-rows,opacity] duration-200 ease-out",
                               expanded ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"
                             ),
-                            children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: "overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("ul", { className: "flex flex-col", children: item.children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
+                            children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: "overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("ul", { className: "flex flex-col", children: item.children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
                               "a",
                               {
                                 href: child.href ?? `#${child.id}`,
@@ -15735,14 +15801,14 @@ var SidebarMobile = React75.forwardRef(
                                 tabIndex: expanded ? void 0 : -1,
                                 className: subRowClass,
                                 children: [
-                                  /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+                                  /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
                                     "span",
                                     {
                                       "aria-hidden": "true",
                                       className: "size-4 shrink-0"
                                     }
                                   ),
-                                  /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: "truncate", children: child.label })
+                                  /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: "truncate", children: child.label })
                                 ]
                               }
                             ) }, child.id)) }) })
@@ -15750,8 +15816,8 @@ var SidebarMobile = React75.forwardRef(
                         )
                       ] }, item.id);
                     }) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(Divider, { className: "my-md" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Divider, { className: "my-md" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
                       Button,
                       {
                         variant: "outline-soft",
@@ -15763,11 +15829,11 @@ var SidebarMobile = React75.forwardRef(
                         children: primaryActionLabel
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(Divider, { className: "my-md" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("nav", { "aria-label": "Secondary", className: "flex flex-col gap-xxs", children: secondaryNav.map((item) => {
+                    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Divider, { className: "my-md" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("nav", { "aria-label": "Secondary", className: "flex flex-col gap-xxs", children: secondaryNav.map((item) => {
                       const active = item.id === secondaryActiveId;
                       const badged = hasBadge2(item.badge);
-                      return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
+                      return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
                         "a",
                         {
                           href: item.href ?? `#${item.id}`,
@@ -15777,8 +15843,8 @@ var SidebarMobile = React75.forwardRef(
                           className: rowClass(active),
                           children: [
                             glyph4(item.icon, 18, 1.75),
-                            /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: "truncate", children: item.label }),
-                            badged ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: "truncate", children: item.label }),
+                            badged ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
                               NavBadge,
                               {
                                 badge: item.badge,
@@ -15791,14 +15857,14 @@ var SidebarMobile = React75.forwardRef(
                       );
                     }) })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: "flex shrink-0 flex-col gap-sm bg-surface px-md pb-md pt-xs", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "flex shrink-0 flex-col gap-sm bg-surface px-md pb-md pt-xs", children: [
                     mobileDrawerFooter,
-                    planTile ? /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
+                    planTile ? /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
                       "a",
                       {
                         href: planTile.href ?? "#plan",
                         onClick: navigate({ id: "plan", href: planTile.href }),
-                        className: cn66(
+                        className: cn67(
                           "flex w-full cursor-pointer items-center gap-md rounded-lg bg-primary-subdued",
                           "px-md py-sm transition duration-150 ease-out",
                           "hover:bg-primary-subdued-hover active:bg-primary-subdued-hover",
@@ -15806,23 +15872,23 @@ var SidebarMobile = React75.forwardRef(
                           "focus-visible:ring-inset"
                         ),
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: "flex shrink-0 items-center text-primary-on-subdued", children: glyph4("chart-bar", 18, 2) }),
-                          /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("span", { className: "flex min-w-0 flex-1 flex-col", children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: "truncate text-body-md text-ink", children: planTile.name }),
-                            /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: "truncate text-body-tabular text-body", children: planTile.price })
+                          /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: "flex shrink-0 items-center text-primary-on-subdued", children: glyph4("chart-bar", 18, 2) }),
+                          /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("span", { className: "flex min-w-0 flex-1 flex-col", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: "truncate text-body-md text-ink", children: planTile.name }),
+                            /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: "truncate text-body-tabular text-body", children: planTile.price })
                           ] }),
-                          /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: "shrink-0 text-primary-on-subdued", children: glyph4("arrow-up-right", 18, 2) })
+                          /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: "shrink-0 text-primary-on-subdued", children: glyph4("arrow-up-right", 18, 2) })
                         ]
                       }
                     ) : null,
-                    /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: "flex items-center gap-sm px-xs", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(Avatar, { name: profile.name, src: profile.src, size: "md" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("span", { className: "flex min-w-0 flex-1 flex-col", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: "truncate text-body-md text-ink", children: profile.name }),
-                        profile.email ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: "truncate text-caption text-body", children: profile.email }) : null
+                    /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "flex items-center gap-sm px-xs", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Avatar, { name: profile.name, src: profile.src, size: "md" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("span", { className: "flex min-w-0 flex-1 flex-col", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: "truncate text-body-md text-ink", children: profile.name }),
+                        profile.email ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: "truncate text-caption text-body", children: profile.email }) : null
                       ] }),
-                      /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("span", { className: "relative inline-flex shrink-0", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("span", { className: "relative inline-flex shrink-0", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
                           Button,
                           {
                             variant: "bare",
@@ -15833,11 +15899,11 @@ var SidebarMobile = React75.forwardRef(
                             children: glyph4("bell", 20, 1.75)
                           }
                         ),
-                        notificationCount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+                        notificationCount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
                           "span",
                           {
                             "aria-hidden": "true",
-                            className: cn66(
+                            className: cn67(
                               "pointer-events-none absolute -right-xxs -top-xxs",
                               "flex h-4 min-w-4 items-center justify-center rounded-full",
                               "bg-primary px-xxs text-caption text-on-primary"
@@ -15846,7 +15912,7 @@ var SidebarMobile = React75.forwardRef(
                           }
                         ) : null
                       ] }),
-                      /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
                         Button,
                         {
                           variant: "bare",
@@ -15867,9 +15933,9 @@ var SidebarMobile = React75.forwardRef(
       ),
       document.body
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { ref, className: cn66("w-full", className), ...rest, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: "flex w-full items-center gap-xs border-b border-hairline bg-surface px-md py-sm", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { ref, className: cn67("w-full", className), ...rest, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "flex w-full items-center gap-xs border-b border-hairline bg-surface px-md py-sm", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
           Button,
           {
             ref: toggleRef,
@@ -15883,20 +15949,20 @@ var SidebarMobile = React75.forwardRef(
             children: glyph4("menu", 22, 2)
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
           "a",
           {
             href: homeHref,
             onClick: navigate({ id: "home", href: homeHref }),
-            className: cn66(
+            className: cn67(
               "inline-flex min-w-0 cursor-pointer items-center rounded-xs",
               "transition duration-150 ease-out hover:opacity-80",
               "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-blue"
             ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(Logo, { size: "md", wordmark })
+            children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Logo, { size: "md", wordmark })
           }
         ),
-        mobileActions ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: "ml-auto flex shrink-0 items-center gap-xs", children: mobileActions }) : null
+        mobileActions ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: "ml-auto flex shrink-0 items-center gap-xs", children: mobileActions }) : null
       ] }),
       drawer
     ] });
@@ -15905,9 +15971,9 @@ var SidebarMobile = React75.forwardRef(
 SidebarMobile.displayName = "SidebarMobile";
 
 // virtual-pkg:src/atoms/Sidebar/Sidebar.tsx
-var import_jsx_runtime76 = require("react/jsx-runtime");
-var cn67 = (...values) => values.filter(Boolean).join(" ");
-var Sidebar = React76.forwardRef(
+var import_jsx_runtime77 = require("react/jsx-runtime");
+var cn68 = (...values) => values.filter(Boolean).join(" ");
+var Sidebar = React77.forwardRef(
   ({
     wordmark,
     homeHref,
@@ -15946,8 +16012,8 @@ var Sidebar = React76.forwardRef(
     mobileClassName,
     className,
     ...rest
-  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { ref, className: cn67("h-full w-full", className), ...rest, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: "hidden h-full md:block", children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { ref, className: cn68("h-full w-full", className), ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: "hidden h-full md:block", children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
       SidebarDesktop,
       {
         className: desktopClassName,
@@ -15978,7 +16044,7 @@ var Sidebar = React76.forwardRef(
         onFoldedChange
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: "md:hidden", children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: "md:hidden", children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
       SidebarMobile,
       {
         className: mobileClassName,
@@ -16020,7 +16086,7 @@ Sidebar.displayName = "Sidebar";
 
 // virtual-pkg:src/atoms/Skeleton/Skeleton.tsx
 var import_react6 = __toESM(require("react"));
-var import_jsx_runtime77 = require("react/jsx-runtime");
+var import_jsx_runtime78 = require("react/jsx-runtime");
 var cx2 = (...parts) => parts.filter(Boolean).join(" ");
 var CARD_ROWS = [
   ["w-[18%]", "w-[24%]", "w-[13%]"],
@@ -16047,7 +16113,7 @@ var Skeleton = import_react6.default.forwardRef(
     let content;
     switch (variant) {
       case "circle":
-        content = /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+        content = /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
           "div",
           {
             "aria-hidden": "true",
@@ -16057,7 +16123,7 @@ var Skeleton = import_react6.default.forwardRef(
         break;
       case "text": {
         const count = Math.max(1, lines);
-        content = /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { "aria-hidden": "true", className: "flex w-full flex-col gap-sm", children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+        content = /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { "aria-hidden": "true", className: "flex w-full flex-col gap-sm", children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
           "div",
           {
             className: cx2(
@@ -16071,49 +16137,49 @@ var Skeleton = import_react6.default.forwardRef(
         break;
       }
       case "media":
-        content = /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { "aria-hidden": "true", className: "flex w-full items-center gap-md", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: cx2(fill("shrink-0 rounded-full"), "size-xxl") }),
-          /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: "flex w-full flex-col gap-sm", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: cx2(fill("rounded-xs"), "h-sm w-[62%]") }),
-            /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: cx2(fill("rounded-xs"), "h-sm w-full") })
+        content = /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { "aria-hidden": "true", className: "flex w-full items-center gap-md", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: cx2(fill("shrink-0 rounded-full"), "size-xxl") }),
+          /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "flex w-full flex-col gap-sm", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: cx2(fill("rounded-xs"), "h-sm w-[62%]") }),
+            /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: cx2(fill("rounded-xs"), "h-sm w-full") })
           ] })
         ] });
         break;
       case "list-row":
-        content = /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(
+        content = /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
           "div",
           {
             "aria-hidden": "true",
             className: "flex w-full items-center rounded-md border border-hairline bg-surface px-base py-md shadow-card",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: cx2(fill("rounded-sm"), "h-md w-[46%]") }),
-              /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: "ml-auto flex items-center gap-md", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: "h-lg w-px shrink-0 bg-hairline" }),
-                /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: cx2(fill("rounded-sm"), "size-md") }),
-                /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: cx2(fill("rounded-sm"), "size-md") })
+              /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: cx2(fill("rounded-sm"), "h-md w-[46%]") }),
+              /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "ml-auto flex items-center gap-md", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "h-lg w-px shrink-0 bg-hairline" }),
+                /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: cx2(fill("rounded-sm"), "size-md") }),
+                /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: cx2(fill("rounded-sm"), "size-md") })
               ] })
             ]
           }
         );
         break;
       case "card":
-        content = /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+        content = /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
           "div",
           {
             "aria-hidden": "true",
             className: "w-full overflow-hidden rounded-lg border border-hairline bg-surface shadow-card",
             children: Array.from({ length: Math.max(1, rows) }).map((_, i) => {
               const [lead, mid, trail] = CARD_ROWS[i % CARD_ROWS.length];
-              return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(
+              return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
                 "div",
                 {
                   className: "flex items-center justify-between gap-lg border-b border-hairline-soft px-lg py-md last:border-b-0",
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-lg", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: cx2(fill("shrink-0 rounded-sm"), "h-md", lead) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: cx2(fill("shrink-0 rounded-sm"), "h-md", mid) })
+                    /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-lg", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: cx2(fill("shrink-0 rounded-sm"), "h-md", lead) }),
+                      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: cx2(fill("shrink-0 rounded-sm"), "h-md", mid) })
                     ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: cx2(fill("shrink-0 rounded-sm"), "h-md", trail) })
+                    /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: cx2(fill("shrink-0 rounded-sm"), "h-md", trail) })
                   ]
                 },
                 i
@@ -16124,7 +16190,7 @@ var Skeleton = import_react6.default.forwardRef(
         break;
       case "bar":
       default:
-        content = /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+        content = /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
           "div",
           {
             "aria-hidden": "true",
@@ -16133,7 +16199,7 @@ var Skeleton = import_react6.default.forwardRef(
         );
         break;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
       "div",
       {
         ref,
@@ -16150,13 +16216,13 @@ var Skeleton = import_react6.default.forwardRef(
 Skeleton.displayName = "Skeleton";
 
 // virtual-pkg:src/atoms/Slider/Slider.tsx
-var React78 = __toESM(require("react"));
-var import_jsx_runtime78 = require("react/jsx-runtime");
-var cn68 = (...values) => values.filter(Boolean).join(" ");
+var React79 = __toESM(require("react"));
+var import_jsx_runtime79 = require("react/jsx-runtime");
+var cn69 = (...values) => values.filter(Boolean).join(" ");
 var THUMB_PX = 24;
 var TRAVEL_INSET = THUMB_PX / 2;
 var defaultFormat = (value) => value.toLocaleString();
-var Slider = React78.forwardRef(
+var Slider = React79.forwardRef(
   ({
     value,
     defaultValue,
@@ -16180,12 +16246,12 @@ var Slider = React78.forwardRef(
     "aria-label": ariaLabelProp,
     ...rest
   }, ref) => {
-    const generatedId = React78.useId();
+    const generatedId = React79.useId();
     const sliderId = id ?? `slider-${generatedId}`;
-    const [internalValue, setInternalValue] = React78.useState(
+    const [internalValue, setInternalValue] = React79.useState(
       defaultValue ?? min
     );
-    const [focused, setFocused] = React78.useState(false);
+    const [focused, setFocused] = React79.useState(false);
     const isControlled = value !== void 0;
     const current = isControlled ? Number(value) : internalValue;
     const span = max - min;
@@ -16201,16 +16267,16 @@ var Slider = React78.forwardRef(
     const readout = format(current);
     const thumbLeft = `calc(${TRAVEL_INSET}px + (100% - ${THUMB_PX}px) * ${ratio})`;
     const fillWidth = `calc(${TRAVEL_INSET}px + (100% - ${THUMB_PX}px) * ${ratio})`;
-    return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(
       "div",
       {
-        className: cn68(
+        className: cn69(
           "flex w-full flex-col gap-lg transition-opacity duration-150 ease-out",
           disabled ? "opacity-50" : "",
           className
         ),
         children: [
-          label ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+          label ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
             Label,
             {
               htmlFor: sliderId,
@@ -16219,11 +16285,11 @@ var Slider = React78.forwardRef(
               children: label
             }
           ) : null,
-          showValue ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+          showValue ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
             "output",
             {
               htmlFor: sliderId,
-              className: cn68(
+              className: cn69(
                 "flex min-h-12 w-full items-center rounded-md border bg-surface px-lg py-sm",
                 "transition-colors duration-150 ease-out",
                 disabled ? "border-hairline-soft" : "border-hairline-strong",
@@ -16234,14 +16300,14 @@ var Slider = React78.forwardRef(
               children: readout
             }
           ) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "flex w-full flex-col gap-sm", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "group relative w-full", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "pointer-events-none flex h-10 w-full items-center px-sm", children: /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "relative h-1.5 w-full rounded-full bg-surface-strong", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "flex w-full flex-col gap-sm", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "group relative w-full", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "pointer-events-none flex h-10 w-full items-center px-sm", children: /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "relative h-1.5 w-full rounded-full bg-surface-strong", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
                   "span",
                   {
                     "aria-hidden": "true",
-                    className: cn68(
+                    className: cn69(
                       "absolute left-0 top-0 h-full rounded-full",
                       "transition-[width,background-color] duration-150 ease-out",
                       disabled ? "bg-primary-disabled" : "bg-primary"
@@ -16249,11 +16315,11 @@ var Slider = React78.forwardRef(
                     style: { width: fillWidth }
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
                   "span",
                   {
                     "aria-hidden": "true",
-                    className: cn68(
+                    className: cn69(
                       "absolute top-1/2 size-6 -translate-x-1/2 -translate-y-1/2",
                       "rounded-full border-2 bg-canvas shadow-sm",
                       "transition duration-150 ease-out",
@@ -16264,7 +16330,7 @@ var Slider = React78.forwardRef(
                   }
                 )
               ] }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "absolute inset-0 z-10", children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "absolute inset-0 z-10", children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
                 Input,
                 {
                   ref,
@@ -16290,7 +16356,7 @@ var Slider = React78.forwardRef(
                   },
                   className: "h-full",
                   fieldClassName: "h-10 gap-0",
-                  inputClassName: cn68(
+                  inputClassName: cn69(
                     "h-10 w-full appearance-none bg-transparent p-0 opacity-0",
                     disabled ? "cursor-not-allowed" : "cursor-pointer"
                   ),
@@ -16298,18 +16364,18 @@ var Slider = React78.forwardRef(
                 }
               ) })
             ] }),
-            showBounds ? /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
+            showBounds ? /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(
               "div",
               {
-                className: cn68(
+                className: cn69(
                   "flex w-full items-center justify-between px-sm text-caption",
                   disabled ? "text-muted-soft" : "text-muted",
                   boundsClassName
                 ),
                 style: { fontVariantNumeric: "tabular-nums" },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { children: formatBounds(min) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { children: formatBounds(max) })
+                  /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("span", { children: formatBounds(min) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("span", { children: formatBounds(max) })
                 ]
               }
             ) : null
@@ -16322,20 +16388,20 @@ var Slider = React78.forwardRef(
 Slider.displayName = "Slider";
 
 // virtual-pkg:src/atoms/Spinner/Spinner.tsx
-var React79 = __toESM(require("react"));
-var import_jsx_runtime79 = require("react/jsx-runtime");
-var cn69 = (...values) => values.filter(Boolean).join(" ");
+var React80 = __toESM(require("react"));
+var import_jsx_runtime80 = require("react/jsx-runtime");
+var cn70 = (...values) => values.filter(Boolean).join(" ");
 var GEOMETRY = {
   sm: { box: 20, ring: 2, glyph: 11, stroke: 3.25, turn: 0.7 },
   md: { box: 32, ring: 3, glyph: 17, stroke: 2.9, turn: 0.9 },
   lg: { box: 56, ring: 4, glyph: 29, stroke: 2.4, turn: 1.1 }
 };
 var ARC = "conic-gradient(from 0deg, var(--color-hairline) 0deg, var(--color-primary) 62deg, var(--color-primary) 102deg, var(--color-hairline) 158deg, var(--color-hairline) 360deg)";
-var Spinner = React79.forwardRef(
+var Spinner = React80.forwardRef(
   ({ size = "md", status = "loading", message, caption, className, ...rest }, ref) => {
     const { box, ring, glyph: glyph5, stroke, turn } = GEOMETRY[size];
     const hole = `radial-gradient(closest-side, transparent calc(100% - ${ring}px), black calc(100% - ${ring}px))`;
-    const indicator = /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(
+    const indicator = /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(
       "span",
       {
         "aria-hidden": "true",
@@ -16343,10 +16409,10 @@ var Spinner = React79.forwardRef(
         className: "group relative inline-flex shrink-0 items-center justify-center",
         style: { width: box, height: box },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
             "span",
             {
-              className: cn69(
+              className: cn70(
                 "absolute inset-0 rounded-full",
                 "animate-spin motion-reduce:animate-none",
                 "transition duration-200 ease-out",
@@ -16360,23 +16426,23 @@ var Spinner = React79.forwardRef(
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
             "span",
             {
-              className: cn69(
+              className: cn70(
                 "absolute inset-0 inline-flex items-center justify-center rounded-full",
                 "bg-primary text-on-primary",
                 "transition duration-200 ease-out",
                 "group-data-[status=loading]:scale-90 group-data-[status=loading]:opacity-0"
               ),
-              children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
                 Icon,
                 {
                   name: "check",
                   size: glyph5,
                   strokeWidth: stroke,
                   tone: "on-dark",
-                  className: cn69(
+                  className: cn70(
                     "transition duration-200 ease-out",
                     "group-data-[status=success]:scale-100 group-data-[status=success]:opacity-100",
                     "group-data-[status=loading]:scale-50 group-data-[status=loading]:opacity-0"
@@ -16388,26 +16454,26 @@ var Spinner = React79.forwardRef(
         ]
       }
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(
       "div",
       {
         ref,
         role: "status",
         "aria-live": "polite",
         "data-status": status,
-        className: cn69(
+        className: cn70(
           "inline-flex",
           caption ? "flex-col items-center gap-sm" : "items-center",
           className
         ),
         ...rest,
         children: [
-          message ? /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("span", { className: "inline-flex items-center gap-md", children: [
+          message ? /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("span", { className: "inline-flex items-center gap-md", children: [
             indicator,
-            /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("span", { className: "text-body-md text-ink transition-colors duration-200 ease-out", children: message })
+            /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { className: "text-body-md text-ink transition-colors duration-200 ease-out", children: message })
           ] }) : indicator,
-          caption ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("span", { className: "text-body-sm text-ink", children: caption }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("span", { className: "sr-only", children: status === "success" ? caption ?? "Success" : message ?? "Loading" })
+          caption ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { className: "text-body-sm text-ink", children: caption }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { className: "sr-only", children: status === "success" ? caption ?? "Success" : message ?? "Loading" })
         ]
       }
     );
@@ -16416,9 +16482,9 @@ var Spinner = React79.forwardRef(
 Spinner.displayName = "Spinner";
 
 // virtual-pkg:src/atoms/StepperItem/StepperItem.tsx
-var React80 = __toESM(require("react"));
-var import_jsx_runtime80 = require("react/jsx-runtime");
-var cn70 = (...values) => values.filter(Boolean).join(" ");
+var React81 = __toESM(require("react"));
+var import_jsx_runtime81 = require("react/jsx-runtime");
+var cn71 = (...values) => values.filter(Boolean).join(" ");
 var STATUS_TEXT = {
   upcoming: "Upcoming",
   active: "In progress",
@@ -16437,7 +16503,7 @@ var DOT_SKIN = {
   complete: "size-4 bg-primary",
   error: "size-4 bg-semantic-error"
 };
-var StepperItem = React80.forwardRef(
+var StepperItem = React81.forwardRef(
   ({
     variant = "step",
     status = "upcoming",
@@ -16454,18 +16520,18 @@ var StepperItem = React80.forwardRef(
       const max = progressMax > 0 ? progressMax : 1;
       const value = Math.min(Math.max(progressValue, 0), max);
       const percent = Math.round(value / max * 100);
-      return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
         "div",
         {
           ref,
-          className: cn70(
+          className: cn71(
             "flex w-full items-center gap-md rounded-xl border border-hairline bg-surface p-base shadow-card",
             className
           ),
           ...rest,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "relative grid size-[4.5rem] shrink-0 place-items-center", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "relative grid size-[4.5rem] shrink-0 place-items-center", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
                 "span",
                 {
                   "aria-hidden": "true",
@@ -16475,48 +16541,48 @@ var StepperItem = React80.forwardRef(
                   }
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
                 "span",
                 {
                   "aria-hidden": "true",
                   className: "absolute inset-sm rounded-full bg-surface"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("span", { className: "relative text-center text-caption text-primary", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("span", { className: "block whitespace-nowrap", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("span", { className: "relative text-center text-caption text-primary", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("span", { className: "block whitespace-nowrap", children: [
                   value,
                   " of ",
                   max
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { className: "block", children: progressUnit })
+                /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { className: "block", children: progressUnit })
               ] })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("p", { className: "min-w-0 flex-1 text-body-lg text-ink", children: label })
+            /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("p", { className: "min-w-0 flex-1 text-body-lg text-ink", children: label })
           ]
         }
       );
     }
     const dot = DOT_SKIN[status];
-    return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
       "div",
       {
         ref,
         "aria-current": status === "active" ? "step" : void 0,
-        className: cn70("flex w-full items-stretch gap-md", className),
+        className: cn71("flex w-full items-stretch gap-md", className),
         ...rest,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "flex w-6 shrink-0 flex-col items-center", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "flex w-6 shrink-0 flex-col items-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
               "span",
               {
-                className: cn70(
+                className: cn71(
                   "grid size-6 shrink-0 place-items-center rounded-full transition-colors duration-200 ease-out",
                   RING_SKIN[status]
                 ),
-                children: dot ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+                children: dot ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
                   "span",
                   {
-                    className: cn70(
+                    className: cn71(
                       "rounded-full transition-colors duration-200 ease-out",
                       dot
                     )
@@ -16524,12 +16590,12 @@ var StepperItem = React80.forwardRef(
                 ) : null
               }
             ),
-            connector ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { "aria-hidden": "true", className: "mt-sm w-px flex-1 bg-hairline" }) : null
+            connector ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { "aria-hidden": "true", className: "mt-sm w-px flex-1 bg-hairline" }) : null
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: cn70("min-w-0 flex-1 pt-xl", connector ? "pb-xl" : "pb-0"), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("p", { className: "text-body-md text-ink", children: label }),
-            meta ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("p", { className: "mt-xxs text-body-tabular text-muted", children: meta }) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { className: "sr-only", children: STATUS_TEXT[status] })
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: cn71("min-w-0 flex-1 pt-xl", connector ? "pb-xl" : "pb-0"), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("p", { className: "text-body-md text-ink", children: label }),
+            meta ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("p", { className: "mt-xxs text-body-tabular text-muted", children: meta }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { className: "sr-only", children: STATUS_TEXT[status] })
           ] })
         ]
       }
@@ -16539,14 +16605,14 @@ var StepperItem = React80.forwardRef(
 StepperItem.displayName = "StepperItem";
 
 // virtual-pkg:src/atoms/Tab/Tab.tsx
-var React81 = __toESM(require("react"));
-var import_jsx_runtime81 = require("react/jsx-runtime");
-var cn71 = (...values) => values.filter(Boolean).join(" ");
+var React82 = __toESM(require("react"));
+var import_jsx_runtime82 = require("react/jsx-runtime");
+var cn72 = (...values) => values.filter(Boolean).join(" ");
 var pillPadding = {
   sm: "px-xs py-xxs text-caption",
   md: "px-sm py-xxs text-caption"
 };
-var Tab = React81.forwardRef(
+var Tab = React82.forwardRef(
   ({
     label,
     count,
@@ -16556,7 +16622,7 @@ var Tab = React81.forwardRef(
     disabled = false,
     className,
     ...rest
-  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(
     Button,
     {
       ref,
@@ -16567,7 +16633,7 @@ var Tab = React81.forwardRef(
       "aria-selected": active,
       disabled,
       "data-active": active || void 0,
-      className: cn71(
+      className: cn72(
         "cursor-pointer transition duration-150 ease-out active:scale-[0.98]",
         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-blue",
         "disabled:cursor-not-allowed disabled:opacity-50",
@@ -16576,20 +16642,20 @@ var Tab = React81.forwardRef(
       ),
       ...rest,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
           "span",
           {
-            className: cn71(
+            className: cn72(
               "whitespace-nowrap transition-colors duration-150 ease-out",
               size === "sm" ? "text-body-sm" : "text-label"
             ),
             children: label
           }
         ),
-        count !== void 0 && count !== null ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+        count !== void 0 && count !== null ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
           "span",
           {
-            className: cn71(
+            className: cn72(
               "inline-flex shrink-0 items-center justify-center rounded-full",
               "tabular-nums font-weight-label leading-none",
               "transition-colors duration-150 ease-out",
@@ -16599,11 +16665,11 @@ var Tab = React81.forwardRef(
             children: count
           }
         ) : null,
-        indicator ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+        indicator ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
           "span",
           {
             "aria-hidden": "true",
-            className: cn71(
+            className: cn72(
               "absolute -left-xs -right-xs bottom-0 rounded-full",
               "transition-colors duration-150 ease-out",
               active ? "h-xxs bg-primary" : "h-px bg-hairline"
@@ -16615,11 +16681,11 @@ var Tab = React81.forwardRef(
   )
 );
 Tab.displayName = "Tab";
-var TabList = React81.forwardRef(
+var TabList = React82.forwardRef(
   ({ children, className, indicator = true, onKeyDown, ...rest }, ref) => {
-    const railRef = React81.useRef(null);
-    const [bar, setBar] = React81.useState({ left: 0, width: 0, visible: false });
-    const measure = React81.useCallback(() => {
+    const railRef = React82.useRef(null);
+    const [bar, setBar] = React82.useState({ left: 0, width: 0, visible: false });
+    const measure = React82.useCallback(() => {
       const item = railRef.current?.querySelector(
         '[role="tab"][aria-selected="true"]'
       );
@@ -16632,19 +16698,19 @@ var TabList = React81.forwardRef(
         (prev) => prev.left === next.left && prev.width === next.width && prev.visible === next.visible ? prev : next
       );
     }, []);
-    React81.useLayoutEffect(() => {
+    React82.useLayoutEffect(() => {
       measure();
     });
-    React81.useEffect(() => {
+    React82.useEffect(() => {
       const rail = railRef.current;
       if (!rail || typeof ResizeObserver === "undefined") return;
       const observer = new ResizeObserver(measure);
       observer.observe(rail);
       return () => observer.disconnect();
     }, [measure]);
-    const items = React81.Children.map(
+    const items = React82.Children.map(
       children,
-      (child) => React81.isValidElement(child) && child.type === Tab ? React81.cloneElement(child, { indicator: false }) : child
+      (child) => React82.isValidElement(child) && child.type === Tab ? React82.cloneElement(child, { indicator: false }) : child
     );
     const handleKeyDown = (event) => {
       onKeyDown?.(event);
@@ -16661,7 +16727,7 @@ var TabList = React81.forwardRef(
       event.preventDefault();
       tabs[next]?.focus();
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(
       "div",
       {
         ref: (node) => {
@@ -16669,9 +16735,9 @@ var TabList = React81.forwardRef(
           if (typeof ref === "function") ref(node);
           else if (ref) ref.current = node;
         },
-        className: cn71("relative w-full", className),
+        className: cn72("relative w-full", className),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
             "div",
             {
               role: "tablist",
@@ -16682,14 +16748,14 @@ var TabList = React81.forwardRef(
               children: items
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
             "span",
             {
               "aria-hidden": "true",
               className: "pointer-events-none absolute inset-x-0 bottom-0 h-px bg-hairline"
             }
           ),
-          indicator ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+          indicator ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
             "span",
             {
               "aria-hidden": "true",
@@ -16698,7 +16764,7 @@ var TabList = React81.forwardRef(
                 width: bar.width ? `${bar.width}px` : 0,
                 opacity: bar.visible ? 1 : 0
               },
-              className: cn71(
+              className: cn72(
                 "pointer-events-none absolute bottom-0 left-0 h-xxs rounded-full bg-primary",
                 "transition-[transform,width,opacity] duration-200 ease-out"
               )
@@ -16712,9 +16778,9 @@ var TabList = React81.forwardRef(
 TabList.displayName = "TabList";
 
 // virtual-pkg:src/atoms/TableHeaderCell/TableHeaderCell.tsx
-var React82 = __toESM(require("react"));
-var import_jsx_runtime82 = require("react/jsx-runtime");
-var cn72 = (...values) => values.filter(Boolean).join(" ");
+var React83 = __toESM(require("react"));
+var import_jsx_runtime83 = require("react/jsx-runtime");
+var cn73 = (...values) => values.filter(Boolean).join(" ");
 var NEXT_SORT = {
   none: "asc",
   asc: "desc",
@@ -16726,7 +16792,7 @@ var ALIGN_STYLES = {
   right: "justify-end"
 };
 var iconTone = (active) => active ? "var(--color-primary)" : "var(--color-muted)";
-var TableHeaderCell = React82.forwardRef(
+var TableHeaderCell = React83.forwardRef(
   ({
     label,
     sort,
@@ -16737,7 +16803,7 @@ var TableHeaderCell = React82.forwardRef(
     ...rest
   }, ref) => {
     const isControlled = sort !== void 0;
-    const [internalSort, setInternalSort] = React82.useState(defaultSort);
+    const [internalSort, setInternalSort] = React83.useState(defaultSort);
     const current = isControlled ? sort : internalSort;
     const sorted = current !== "none";
     const handleSort = () => {
@@ -16747,15 +16813,15 @@ var TableHeaderCell = React82.forwardRef(
     };
     const ariaSort = current === "asc" ? "ascending" : current === "desc" ? "descending" : "none";
     const accessibleName = current === "asc" ? `${label}, sorted ascending` : current === "desc" ? `${label}, sorted descending` : `Sort by ${label}`;
-    return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
       "th",
       {
         ref,
         scope: "col",
         "aria-sort": ariaSort,
-        className: cn72("w-full p-0 align-middle", className),
+        className: cn73("w-full p-0 align-middle", className),
         ...rest,
-        children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
           Button,
           {
             variant: "band",
@@ -16763,27 +16829,27 @@ var TableHeaderCell = React82.forwardRef(
             "aria-label": accessibleName,
             onClick: handleSort,
             className: ALIGN_STYLES[align],
-            trailingIcon: /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("span", { className: "relative inline-flex size-5 items-center justify-center", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+            trailingIcon: /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("span", { className: "relative inline-flex size-5 items-center justify-center", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
                 Icon,
                 {
                   name: "chevrons-down-up",
                   size: 18,
                   strokeWidth: 2.25,
-                  className: cn72(
+                  className: cn73(
                     "absolute transition duration-200 ease-out",
                     sorted ? "scale-75 opacity-0" : "scale-100 opacity-100"
                   ),
                   style: { color: iconTone(sorted) }
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
                 Icon,
                 {
                   name: "chevron-down",
                   size: 20,
                   strokeWidth: 2.25,
-                  className: cn72(
+                  className: cn73(
                     "absolute transition duration-200 ease-out",
                     current === "asc" ? "rotate-180" : "rotate-0",
                     sorted ? "scale-100 opacity-100" : "scale-75 opacity-0"
@@ -16792,10 +16858,10 @@ var TableHeaderCell = React82.forwardRef(
                 }
               )
             ] }),
-            children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
               "span",
               {
-                className: cn72(
+                className: cn73(
                   "min-w-0 truncate uppercase",
                   "transition-colors duration-150 ease-out",
                   sorted ? "text-ink" : "text-muted"
@@ -16812,15 +16878,15 @@ var TableHeaderCell = React82.forwardRef(
 TableHeaderCell.displayName = "TableHeaderCell";
 
 // virtual-pkg:src/atoms/TableRow/TableRow.tsx
-var React83 = __toESM(require("react"));
-var import_jsx_runtime83 = require("react/jsx-runtime");
-var cn73 = (...values) => values.filter(Boolean).join(" ");
+var React84 = __toESM(require("react"));
+var import_jsx_runtime84 = require("react/jsx-runtime");
+var cn74 = (...values) => values.filter(Boolean).join(" ");
 var dotStyles = {
   live: "bg-primary",
   pending: "bg-semantic-warning",
   failed: "bg-semantic-error"
 };
-var TableRow = React83.forwardRef(
+var TableRow = React84.forwardRef(
   ({
     merchant,
     date,
@@ -16834,18 +16900,18 @@ var TableRow = React83.forwardRef(
     ...rest
   }, ref) => {
     const isControlled = selected !== void 0;
-    const [internalSelected, setInternalSelected] = React83.useState(defaultSelected);
+    const [internalSelected, setInternalSelected] = React84.useState(defaultSelected);
     const isSelected = isControlled ? Boolean(selected) : internalSelected;
     const handleSelectedChange = (next) => {
       if (!isControlled) setInternalSelected(next);
       onSelectedChange?.(next);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(
       "div",
       {
         ref,
         "data-state": isSelected ? "selected" : "default",
-        className: cn73(
+        className: cn74(
           "relative flex w-full items-center gap-xl overflow-hidden rounded-lg border py-md pl-lg pr-xl",
           "transition-colors duration-200 ease-out",
           "has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-focus-blue",
@@ -16854,17 +16920,17 @@ var TableRow = React83.forwardRef(
         ),
         ...rest,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
             "span",
             {
               "aria-hidden": "true",
-              className: cn73(
+              className: cn74(
                 "absolute inset-y-0 left-0 w-1 bg-primary transition-opacity duration-200 ease-out",
                 isSelected ? "opacity-100" : "opacity-0"
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
             Checkbox,
             {
               chrome: "bare",
@@ -16874,15 +16940,15 @@ var TableRow = React83.forwardRef(
               "aria-label": `Select ${merchant}`
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("span", { className: "min-w-0 flex-1 truncate text-body-md font-weight-label text-ink", children: merchant }),
-          /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("span", { className: "shrink-0 text-body-md text-muted", children: date }),
-          tag ? /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("span", { className: "inline-flex shrink-0 items-center rounded-full bg-primary-subdued px-sm py-xxs text-caption font-weight-label text-primary-on-subdued", children: tag }) : null,
-          status ? /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("span", { className: "inline-flex shrink-0 items-center gap-xs rounded-full bg-primary-subdued px-sm py-xxs text-caption font-weight-label text-primary-on-subdued", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: "min-w-0 flex-1 truncate text-body-md font-weight-label text-ink", children: merchant }),
+          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: "shrink-0 text-body-md text-muted", children: date }),
+          tag ? /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: "inline-flex shrink-0 items-center rounded-full bg-primary-subdued px-sm py-xxs text-caption font-weight-label text-primary-on-subdued", children: tag }) : null,
+          status ? /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("span", { className: "inline-flex shrink-0 items-center gap-xs rounded-full bg-primary-subdued px-sm py-xxs text-caption font-weight-label text-primary-on-subdued", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
               "span",
               {
                 "aria-hidden": "true",
-                className: cn73(
+                className: cn74(
                   "size-1.5 shrink-0 rounded-full",
                   dotStyles[status.tone ?? "live"]
                 )
@@ -16890,7 +16956,7 @@ var TableRow = React83.forwardRef(
             ),
             status.label
           ] }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("span", { className: "shrink-0 text-body-tabular font-weight-label text-ink", children: amount })
+          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: "shrink-0 text-body-tabular font-weight-label text-ink", children: amount })
         ]
       }
     );
@@ -16899,9 +16965,9 @@ var TableRow = React83.forwardRef(
 TableRow.displayName = "TableRow";
 
 // virtual-pkg:src/atoms/TestimonialBlock/TestimonialBlock.tsx
-var React84 = __toESM(require("react"));
-var import_jsx_runtime84 = require("react/jsx-runtime");
-var TestimonialBlock = React84.forwardRef(
+var React85 = __toESM(require("react"));
+var import_jsx_runtime85 = require("react/jsx-runtime");
+var TestimonialBlock = React85.forwardRef(
   ({
     quote,
     name,
@@ -16910,7 +16976,7 @@ var TestimonialBlock = React84.forwardRef(
     hideMark = false,
     className,
     ...rest
-  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
     "figure",
     {
       ref,
@@ -16921,10 +16987,10 @@ var TestimonialBlock = React84.forwardRef(
         className
       ].filter(Boolean).join(" "),
       ...rest,
-      children: /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: "flex flex-col items-start gap-lg md:flex-row md:items-stretch md:gap-0", children: [
-        !hideMark ? /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_jsx_runtime84.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: "flex aspect-square shrink-0 items-center justify-center self-center rounded-lg bg-surface-strong p-lg md:mr-xl", children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Icon, { name: iconName, size: 32, strokeWidth: 1.5 }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: "flex flex-col items-start gap-lg md:flex-row md:items-stretch md:gap-0", children: [
+        !hideMark ? /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(import_jsx_runtime85.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: "flex aspect-square shrink-0 items-center justify-center self-center rounded-lg bg-surface-strong p-lg md:mr-xl", children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(Icon, { name: iconName, size: 32, strokeWidth: 1.5 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
             "div",
             {
               "aria-hidden": "true",
@@ -16932,8 +16998,8 @@ var TestimonialBlock = React84.forwardRef(
             }
           )
         ] }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
             "span",
             {
               "aria-hidden": "true",
@@ -16941,14 +17007,14 @@ var TestimonialBlock = React84.forwardRef(
               children: "\u201C"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("blockquote", { className: "m-0 mt-sm text-display-md text-ink", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("blockquote", { className: "m-0 mt-sm text-display-md text-ink", children: [
             "\u201C",
             quote,
             "\u201D"
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("figcaption", { className: "mt-lg flex flex-col gap-xxs", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: "text-body-lg text-ink", children: name }),
-            role ? /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: "text-body-md text-muted", children: role }) : null
+          /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("figcaption", { className: "mt-lg flex flex-col gap-xxs", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { className: "text-body-lg text-ink", children: name }),
+            role ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { className: "text-body-md text-muted", children: role }) : null
           ] })
         ] })
       ] })
@@ -16958,15 +17024,15 @@ var TestimonialBlock = React84.forwardRef(
 TestimonialBlock.displayName = "TestimonialBlock";
 
 // virtual-pkg:src/atoms/Textarea/Textarea.tsx
-var React85 = __toESM(require("react"));
-var import_jsx_runtime85 = require("react/jsx-runtime");
-var cn74 = (...values) => values.filter(Boolean).join(" ");
+var React86 = __toESM(require("react"));
+var import_jsx_runtime86 = require("react/jsx-runtime");
+var cn75 = (...values) => values.filter(Boolean).join(" ");
 var resizeClass = {
   none: "resize-none",
   vertical: "resize-y",
   both: "resize"
 };
-var Textarea = React85.forwardRef(
+var Textarea = React86.forwardRef(
   ({
     label,
     ariaLabel,
@@ -16993,13 +17059,13 @@ var Textarea = React85.forwardRef(
     "aria-label": ariaLabelProp,
     ...rest
   }, ref) => {
-    const generatedId = React85.useId();
+    const generatedId = React86.useId();
     const fieldId = id ?? generatedId;
     const helperId = `${fieldId}-helper`;
     const errorId = `${fieldId}-error`;
     const countId = `${fieldId}-count`;
     const isControlled = value !== void 0;
-    const [uncontrolledLength, setUncontrolledLength] = React85.useState(
+    const [uncontrolledLength, setUncontrolledLength] = React86.useState(
       () => String(defaultValue ?? "").length
     );
     const length = isControlled ? String(value ?? "").length : uncontrolledLength;
@@ -17013,7 +17079,7 @@ var Textarea = React85.forwardRef(
       countVisible ? countId : null
     ].filter(Boolean).join(" ") || void 0;
     const isBare = chrome === "none";
-    const shell2 = isBare ? "flex w-full flex-col gap-xs transition-colors duration-150 ease-out" : cn74(
+    const shell2 = isBare ? "flex w-full flex-col gap-xs transition-colors duration-150 ease-out" : cn75(
       "flex w-full flex-col gap-xs rounded-lg border px-md py-sm",
       "transition duration-150 ease-out",
       disabled ? "border-hairline-soft bg-surface-strong" : isError ? "border-semantic-error bg-surface" : "border-hairline-strong bg-surface",
@@ -17021,8 +17087,8 @@ var Textarea = React85.forwardRef(
       forceFocus ? isError ? "border-semantic-error ring-1 ring-semantic-error" : "border-primary ring-1 ring-primary" : "",
       readOnly && !disabled ? "bg-surface-soft" : ""
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: cn74("flex w-full flex-col gap-xs", className), children: [
-      label ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: cn75("flex w-full flex-col gap-xs", className), children: [
+      label ? /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
         Label,
         {
           htmlFor: fieldId,
@@ -17031,8 +17097,8 @@ var Textarea = React85.forwardRef(
           children: label
         }
       ) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: cn74(shell2, fieldClassName), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: cn75(shell2, fieldClassName), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
           "textarea",
           {
             ref,
@@ -17052,7 +17118,7 @@ var Textarea = React85.forwardRef(
               }
               onChange?.(event);
             },
-            className: cn74(
+            className: cn75(
               "w-full appearance-none rounded-none border-0 bg-transparent p-0 text-body-md shadow-none ring-0",
               resizeClass[resize],
               "text-ink caret-primary placeholder:text-muted",
@@ -17063,11 +17129,11 @@ var Textarea = React85.forwardRef(
             ...rest
           }
         ),
-        countVisible ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+        countVisible ? /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
           "span",
           {
             id: countId,
-            className: cn74(
+            className: cn75(
               "self-end text-caption tabular-nums",
               disabled ? "text-muted-soft" : isError ? "text-semantic-error" : "text-muted",
               countClassName
@@ -17076,12 +17142,12 @@ var Textarea = React85.forwardRef(
           }
         ) : null
       ] }),
-      error ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("p", { id: errorId, className: "text-caption text-semantic-error", children: error }) : null,
-      helper ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+      error ? /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("p", { id: errorId, className: "text-caption text-semantic-error", children: error }) : null,
+      helper ? /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
         "p",
         {
           id: helperId,
-          className: cn74(
+          className: cn75(
             "text-caption",
             disabled ? "text-muted-soft" : "text-muted"
           ),
@@ -17094,10 +17160,10 @@ var Textarea = React85.forwardRef(
 Textarea.displayName = "Textarea";
 
 // virtual-pkg:src/atoms/Toast/Toast.tsx
-var React86 = __toESM(require("react"));
-var import_jsx_runtime86 = require("react/jsx-runtime");
-var cn75 = (...values) => values.filter(Boolean).join(" ");
-var Toast = React86.forwardRef(
+var React87 = __toESM(require("react"));
+var import_jsx_runtime87 = require("react/jsx-runtime");
+var cn76 = (...values) => values.filter(Boolean).join(" ");
+var Toast = React87.forwardRef(
   ({
     tone = "info",
     title,
@@ -17114,25 +17180,25 @@ var Toast = React86.forwardRef(
     const urgent = tone === "danger";
     const hasDetails = Boolean(details && details.length > 0);
     const hasTrailing = Boolean(action) || Boolean(onDismiss);
-    const mark = hideIcon ? null : tone === "neutral" ? /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+    const mark = hideIcon ? null : tone === "neutral" ? /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
       "span",
       {
         "aria-hidden": "true",
         className: "-my-base -ml-md w-1 shrink-0 self-stretch rounded-full bg-primary"
       }
-    ) : tone === "danger" ? /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+    ) : tone === "danger" ? /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
       "span",
       {
         "aria-hidden": "true",
         className: "mt-2 size-2.5 shrink-0 rounded-full bg-semantic-error"
       }
-    ) : tone === "success" ? /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
+    ) : tone === "success" ? /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(
       "span",
       {
         "aria-hidden": "true",
         className: "mt-0.5 grid size-5 shrink-0 place-items-center text-primary",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { className: "[grid-area:1/1] inline-flex", children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { className: "[grid-area:1/1] inline-flex", children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
             Icon,
             {
               name: "circle",
@@ -17141,7 +17207,7 @@ var Toast = React86.forwardRef(
               style: { color: "inherit" }
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { className: "[grid-area:1/1] inline-flex", children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { className: "[grid-area:1/1] inline-flex", children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
             Icon,
             {
               name: "check",
@@ -17152,12 +17218,12 @@ var Toast = React86.forwardRef(
           ) })
         ]
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+    ) : /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
       "span",
       {
         "aria-hidden": "true",
         className: "mt-0.5 inline-flex shrink-0 items-center text-primary",
-        children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
           Icon,
           {
             name: tone === "warning" ? "triangle-alert" : "info",
@@ -17168,7 +17234,7 @@ var Toast = React86.forwardRef(
         )
       }
     );
-    const actionNode = action ? urgent ? /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+    const actionNode = action ? urgent ? /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
       Button,
       {
         type: "button",
@@ -17178,7 +17244,7 @@ var Toast = React86.forwardRef(
         className: "shrink-0",
         children: action.label
       }
-    ) : action.href ? /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(Link, { href: action.href, size: "md", underline: "always", className: "shrink-0", children: action.label }) : /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+    ) : action.href ? /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Link, { href: action.href, size: "md", underline: "always", className: "shrink-0", children: action.label }) : /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
       Button,
       {
         type: "button",
@@ -17189,7 +17255,7 @@ var Toast = React86.forwardRef(
         children: action.label
       }
     ) : null;
-    return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(
       "div",
       {
         ref,
@@ -17198,7 +17264,7 @@ var Toast = React86.forwardRef(
         "aria-hidden": !open || void 0,
         "data-tone": tone,
         "data-state": open ? "open" : "closed",
-        className: cn75(
+        className: cn76(
           "relative flex w-full min-w-0 items-start gap-md rounded-lg border bg-surface py-base shadow-sm",
           "transition duration-200 ease-out",
           "data-[state=open]:translate-y-0 data-[state=open]:opacity-100",
@@ -17210,24 +17276,24 @@ var Toast = React86.forwardRef(
         ...rest,
         children: [
           mark,
-          /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("p", { className: "text-body-lg font-weight-label break-words text-ink", children: title }),
-            description ? /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("p", { className: "mt-xxs text-body-md break-words text-muted", children: description }) : null,
-            hasDetails ? /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("ul", { className: "mt-sm flex min-w-0 flex-col gap-xxs", children: details.map((detail, index) => /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("p", { className: "text-body-lg font-weight-label break-words text-ink", children: title }),
+            description ? /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("p", { className: "mt-xxs text-body-md break-words text-muted", children: description }) : null,
+            hasDetails ? /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("ul", { className: "mt-sm flex min-w-0 flex-col gap-xxs", children: details.map((detail, index) => /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(
               "li",
               {
                 className: "flex min-w-0 gap-sm text-body-sm text-muted",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { "aria-hidden": "true", className: "text-muted-soft", children: "\u2022" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { className: "min-w-0 break-words", children: detail })
+                  /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { "aria-hidden": "true", className: "text-muted-soft", children: "\u2022" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { className: "min-w-0 break-words", children: detail })
                 ]
               },
               index
             )) }) : null
           ] }),
-          hasTrailing ? /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "ml-auto flex shrink-0 items-center gap-md self-center", children: [
+          hasTrailing ? /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: "ml-auto flex shrink-0 items-center gap-md self-center", children: [
             actionNode,
-            onDismiss ? /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+            onDismiss ? /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
               Button,
               {
                 type: "button",
@@ -17236,7 +17302,7 @@ var Toast = React86.forwardRef(
                 "aria-label": dismissLabel,
                 onClick: onDismiss,
                 className: "rounded-xs p-xs text-muted-soft transition duration-150 ease-out hover:text-ink",
-                children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
                   Icon,
                   {
                     name: "x",
@@ -17256,9 +17322,9 @@ var Toast = React86.forwardRef(
 Toast.displayName = "Toast";
 
 // virtual-pkg:src/atoms/Tooltip/Tooltip.tsx
-var React87 = __toESM(require("react"));
-var import_jsx_runtime87 = require("react/jsx-runtime");
-var cn76 = (...values) => values.filter(Boolean).join(" ");
+var React88 = __toESM(require("react"));
+var import_jsx_runtime88 = require("react/jsx-runtime");
+var cn77 = (...values) => values.filter(Boolean).join(" ");
 var sidePosition = {
   top: "bottom-full left-1/2 -translate-x-1/2 mb-sm",
   bottom: "top-full left-1/2 -translate-x-1/2 mt-sm",
@@ -17283,7 +17349,7 @@ var sideOrigin = {
   left: "origin-right",
   right: "origin-left"
 };
-var Tooltip = React87.forwardRef(
+var Tooltip = React88.forwardRef(
   ({
     children,
     variant = "plain",
@@ -17304,8 +17370,8 @@ var Tooltip = React87.forwardRef(
     onKeyDown,
     ...rest
   }, ref) => {
-    const id = React87.useId();
-    const [uncontrolledOpen, setUncontrolledOpen] = React87.useState(defaultOpen);
+    const id = React88.useId();
+    const [uncontrolledOpen, setUncontrolledOpen] = React88.useState(defaultOpen);
     const isControlled = open !== void 0;
     const isOpen = isControlled ? Boolean(open) : uncontrolledOpen;
     const setOpenState = (next) => {
@@ -17313,21 +17379,21 @@ var Tooltip = React87.forwardRef(
       if (!isControlled) setUncontrolledOpen(next);
       onOpenChange?.(next);
     };
-    const body = children ?? (variant === "stat" ? /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("span", { className: "flex items-center justify-between gap-xl", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("span", { className: "flex items-center gap-sm", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+    const body = children ?? (variant === "stat" ? /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("span", { className: "flex items-center justify-between gap-xl", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("span", { className: "flex items-center gap-sm", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
           "span",
           {
             "aria-hidden": "true",
             className: "size-sm shrink-0 rounded-full bg-primary"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { className: "whitespace-nowrap text-body-sm text-muted", children: label })
+        /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", { className: "whitespace-nowrap text-body-sm text-muted", children: label })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { className: "whitespace-nowrap text-body-sm font-weight-label tabular-nums text-ink", children: value })
-    ] }) : variant === "shortcut" ? /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("span", { className: "flex items-center justify-between gap-xl", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { className: "whitespace-nowrap text-body-sm text-ink", children: label }),
-      /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { className: "flex items-center gap-xs", children: (keys ?? []).map((key) => /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", { className: "whitespace-nowrap text-body-sm font-weight-label tabular-nums text-ink", children: value })
+    ] }) : variant === "shortcut" ? /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("span", { className: "flex items-center justify-between gap-xl", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", { className: "whitespace-nowrap text-body-sm text-ink", children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", { className: "flex items-center gap-xs", children: (keys ?? []).map((key) => /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
         "kbd",
         {
           className: "inline-flex h-xl min-w-xl items-center justify-center rounded-sm border border-hairline bg-surface-strong px-xs text-caption text-body",
@@ -17335,15 +17401,15 @@ var Tooltip = React87.forwardRef(
         },
         key
       )) })
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { className: "whitespace-nowrap text-body-sm text-ink", children: label }));
-    const triggerNode = React87.isValidElement(trigger) ? React87.cloneElement(trigger, {
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", { className: "whitespace-nowrap text-body-sm text-ink", children: label }));
+    const triggerNode = React88.isValidElement(trigger) ? React88.cloneElement(trigger, {
       "aria-describedby": isOpen ? id : void 0
     }) : trigger;
-    return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(
       "div",
       {
         ref,
-        className: cn76("relative inline-flex items-center", className),
+        className: cn77("relative inline-flex items-center", className),
         style: { zIndex: isOpen ? "var(--z-tooltip, 1500)" : void 0 },
         onMouseEnter: (event) => {
           setOpenState(true);
@@ -17368,14 +17434,14 @@ var Tooltip = React87.forwardRef(
         ...rest,
         children: [
           triggerNode,
-          /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(
             "div",
             {
               id,
               role: "tooltip",
               "data-state": isOpen ? "open" : "closed",
               "aria-hidden": !isOpen,
-              className: cn76(
+              className: cn77(
                 "absolute w-max max-w-xs rounded-lg border border-hairline bg-surface",
                 "px-lg py-md shadow-md",
                 "transition duration-200 ease-out",
@@ -17387,11 +17453,11 @@ var Tooltip = React87.forwardRef(
               ),
               children: [
                 body,
-                /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
                   "span",
                   {
                     "aria-hidden": "true",
-                    className: cn76(
+                    className: cn77(
                       "absolute size-md rotate-45 border-hairline bg-surface",
                       caretPosition[side],
                       caretEdges[side]
@@ -17409,8 +17475,8 @@ var Tooltip = React87.forwardRef(
 Tooltip.displayName = "Tooltip";
 
 // virtual-pkg:src/atoms/Typography/Typography.tsx
-var React88 = __toESM(require("react"));
-var import_jsx_runtime88 = require("react/jsx-runtime");
+var React89 = __toESM(require("react"));
+var import_jsx_runtime89 = require("react/jsx-runtime");
 var SCALE_CLASS = {
   "display-xxl": "text-display-xxl",
   "display-lg": "text-display-lg",
@@ -17478,7 +17544,7 @@ var DEFAULT_TYPE_ROWS = [
     scale: "overline"
   }
 ];
-var Typography = React88.forwardRef(
+var Typography = React89.forwardRef(
   ({
     title = "Typography",
     rows = DEFAULT_TYPE_ROWS,
@@ -17486,7 +17552,7 @@ var Typography = React88.forwardRef(
     framed = true,
     className,
     ...rest
-  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
     "div",
     {
       ref,
@@ -17497,27 +17563,27 @@ var Typography = React88.forwardRef(
         className
       ].filter(Boolean).join(" "),
       ...rest,
-      children: /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: "grid grid-cols-1 gap-y-xs md:grid-cols-[8.5rem_1px_minmax(0,1fr)] md:gap-y-0", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("p", { className: "text-label-cap text-ink md:pb-xl md:pr-xl", children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { "aria-hidden": "true", className: "hidden md:block" }),
-        /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { "aria-hidden": "true", className: "hidden md:block" }),
-        rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(React88.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: "flex items-center gap-xs whitespace-nowrap pt-sm md:py-xs md:pr-xl md:pt-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", { className: "text-caption text-body", children: row.name }),
-            showSpec && row.spec ? /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("span", { className: "text-caption text-muted", children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: "grid grid-cols-1 gap-y-xs md:grid-cols-[8.5rem_1px_minmax(0,1fr)] md:gap-y-0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("p", { className: "text-label-cap text-ink md:pb-xl md:pr-xl", children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { "aria-hidden": "true", className: "hidden md:block" }),
+        /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { "aria-hidden": "true", className: "hidden md:block" }),
+        rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(React89.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: "flex items-center gap-xs whitespace-nowrap pt-sm md:py-xs md:pr-xl md:pt-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("span", { className: "text-caption text-body", children: row.name }),
+            showSpec && row.spec ? /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("span", { className: "text-caption text-muted", children: [
               "(",
               row.spec,
               ")"
             ] }) : null
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
             "div",
             {
               "aria-hidden": "true",
               className: "hidden self-stretch bg-hairline md:block"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
             "p",
             {
               className: [
@@ -17535,9 +17601,9 @@ var Typography = React88.forwardRef(
 Typography.displayName = "Typography";
 
 // virtual-pkg:src/atoms/Wizard/Wizard.tsx
-var React89 = __toESM(require("react"));
-var import_jsx_runtime89 = require("react/jsx-runtime");
-var cn77 = (...values) => values.filter(Boolean).join(" ");
+var React90 = __toESM(require("react"));
+var import_jsx_runtime90 = require("react/jsx-runtime");
+var cn78 = (...values) => values.filter(Boolean).join(" ");
 var statusCopy = {
   complete: "completed",
   current: "current step",
@@ -17553,37 +17619,37 @@ var labelStyles2 = {
   current: "font-weight-label text-ink",
   upcoming: "text-muted"
 };
-var StepRail = ({ steps, currentStep }) => /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("ol", { className: "flex w-full items-start", children: steps.map((step, index) => {
+var StepRail = ({ steps, currentStep }) => /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("ol", { className: "flex w-full items-start", children: steps.map((step, index) => {
   const status = index < currentStep ? "complete" : index === currentStep ? "current" : "upcoming";
   const leadDone = index - 1 >= 0 && index - 1 < currentStep;
   const trailDone = index < currentStep;
-  return /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
     "li",
     {
       "aria-current": status === "current" ? "step" : void 0,
       className: "flex min-w-0 flex-1 flex-col items-center gap-sm",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: "flex w-full items-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "flex w-full items-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
             "span",
             {
               "aria-hidden": "true",
-              className: cn77(
+              className: cn78(
                 "h-px flex-1 transition-colors duration-200 ease-out",
                 index === 0 ? "invisible bg-hairline" : leadDone ? "bg-primary" : "bg-hairline-strong"
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
             "span",
             {
               "aria-hidden": "true",
-              className: cn77(
+              className: cn78(
                 "flex size-lg shrink-0 items-center justify-center rounded-full",
                 "transition-colors duration-200 ease-out",
                 nodeStyles2[status]
               ),
-              children: status === "complete" ? /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+              children: status === "complete" ? /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
                 Icon,
                 {
                   name: "check",
@@ -17594,36 +17660,36 @@ var StepRail = ({ steps, currentStep }) => /* @__PURE__ */ (0, import_jsx_runtim
               ) : null
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
             "span",
             {
               "aria-hidden": "true",
-              className: cn77(
+              className: cn78(
                 "h-px flex-1 transition-colors duration-200 ease-out",
                 index === steps.length - 1 ? "invisible bg-hairline" : trailDone ? "bg-primary" : "bg-hairline-strong"
               )
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("span", { className: "flex max-w-full min-w-0 flex-col items-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("span", { className: "flex max-w-full min-w-0 flex-col items-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
             "span",
             {
-              className: cn77(
+              className: cn78(
                 "max-w-full truncate text-body-sm transition-colors duration-200 ease-out",
                 labelStyles2[status]
               ),
               children: step.label
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("span", { className: "sr-only", children: statusCopy[status] })
+          /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("span", { className: "sr-only", children: statusCopy[status] })
         ] })
       ]
     },
     step.id
   );
 }) });
-var Wizard = React89.forwardRef(
+var Wizard = React90.forwardRef(
   ({
     steps,
     currentStep,
@@ -17644,30 +17710,30 @@ var Wizard = React89.forwardRef(
     const index = Math.max(0, Math.min(currentStep, steps.length - 1));
     const eyebrowCopy = eyebrow ?? `Step ${index + 1} (${stateLabel})`;
     const showActions = !hideActions && Boolean(onNext || onBack);
-    return /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
       "section",
       {
         ref,
-        className: cn77(
+        className: cn78(
           "flex w-full flex-col gap-xl rounded-lg border border-hairline bg-surface p-xl text-ink shadow-sm",
           className
         ),
         ...rest,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("p", { className: "text-label-cap text-muted", children: eyebrowCopy }),
-          /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(StepRail, { steps, currentStep: index }),
-          /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: "flex flex-col gap-lg", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: "flex flex-col gap-xs", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("h3", { className: "text-display-md text-ink", children: title }),
-              description ? /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("p", { className: "max-w-prose text-body-md text-body", children: description }) : null
+          /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("p", { className: "text-label-cap text-muted", children: eyebrowCopy }),
+          /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(StepRail, { steps, currentStep: index }),
+          /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "flex flex-col gap-lg", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "flex flex-col gap-xs", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("h3", { className: "text-display-md text-ink", children: title }),
+              description ? /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("p", { className: "max-w-prose text-body-md text-body", children: description }) : null
             ] }),
-            children ? /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { className: "flex flex-col gap-md", children }) : null
+            children ? /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: "flex flex-col gap-md", children }) : null
           ] }),
-          showActions ? /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: "flex flex-col gap-lg", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Divider, { tone: "soft", decorative: true }),
-            /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: "flex flex-wrap items-center justify-between gap-md", children: [
-              onBack ? /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Button, { variant: "outline-soft", size: "md", onClick: onBack, children: backLabel }) : /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("span", { "aria-hidden": "true" }),
-              onNext ? /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+          showActions ? /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "flex flex-col gap-lg", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(Divider, { tone: "soft", decorative: true }),
+            /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "flex flex-wrap items-center justify-between gap-md", children: [
+              onBack ? /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(Button, { variant: "outline-soft", size: "md", onClick: onBack, children: backLabel }) : /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("span", { "aria-hidden": "true" }),
+              onNext ? /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
                 Button,
                 {
                   variant: "primary",