@trading-game/design-intelligence-layer 0.11.1 → 0.12.1

package/README.md

@@ -149,7 +149,7 @@ npm install react react-dom tailwindcss
 | Table | `Table, TableHeader, TableBody, TableRow, TableHead, TableCell` |
 | Tabs | `Tabs, TabsList, TabsTrigger, TabsContent` |
 | Textarea | `Textarea` |
-| Ticket Card | `TicketCard` |
+| Ticket Card | `TicketCard`, `CreditTicketCard` |
 | Toast | `Toaster` |
 | Toggle | `Toggle, toggleVariants` |
 | Toggle Group | `ToggleGroup, ToggleGroupItem` |
@@ -165,6 +165,8 @@ Blocks are pre-composed UI patterns built from design system primitives. They ar
 |---|---|---|
 | NavBar | Desktop, Mobile (closed), Mobile (open) | Landing page top navigation bar. Logo + ghost nav links (Products, Use Cases, Docs, Blog, FAQ) + Sign in / Sign up CTAs. |
 | Hero | Type 1 (Desktop + Mobile), Type 2 | Landing page hero sections. Type 1: tagline pill + heading + body + CTAs left, image right (responsive). Type 2: centred single-column, tagline pill + heading + body + primary CTA with arrow icon, no image. |
+| Sheet Open Positions | Active, Empty | Right-side sheet (desktop) / bottom drawer (mobile) listing open trading positions. Active state shows a scrollable position list with win/loss colouring and a history footer link. Empty state shows an empty state illustration. |
+| Header navigation | — | Product app top header bar. Back navigation button left, account balance + Demo badge centre, history and sound action buttons right. |
 
 ---
 
@@ -215,6 +217,8 @@ States: hover (`bg-secondary-hover`), focus (3px `ring-ring/50`), active (`opaci
 <Badge variant="fill" />            // Blue tint
 <Badge variant="fill-success" />    // Green tint
 <Badge variant="fill-fail" />       // Red tint
+<Badge variant="fill-warning" />    // Orange tint
+<Badge variant="fill-credit" />     // Amber-orange tint — credit/bonus labels (pair with TicketPlus icon)
 
 // Outline (black border, secondary-hover on hover)
 <Badge variant="outline" />
@@ -293,6 +297,7 @@ All tokens are CSS custom properties, loaded automatically via `@trading-game/de
 | `bg-secondary-hover` | `--secondary-hover` | `#EEEEEE` | Outline/secondary hover (light grey) |
 | `bg-semantic-win` | `--semantic-win` | green | Profit / positive state |
 | `bg-semantic-loss` | `--semantic-loss` | red | Loss / negative state |
+| `bg-semantic-credit` | `--semantic-credit` | `#F9840F` amber-orange | Credit / bonus badge background |
 
 ### Text tokens
 
@@ -306,6 +311,7 @@ All tokens are CSS custom properties, loaded automatically via `@trading-game/de
 | `text-primary` | `#2323FF` | Brand blue inline text |
 | `text-semantic-win` | green | Profit / positive text |
 | `text-semantic-loss` | red | Loss / negative text |
+| `text-semantic-credit-text` | `#713813` dark amber | Credit / bonus badge foreground |
 
 ### Border & focus tokens
 
@@ -577,6 +583,14 @@ Design tokens are managed in Figma and exported as CSS variables. To update:
 
 ## Changelog
 
+### v0.12.0
+- **New semantic tokens — credit:** `--semantic-credit` (`#F9840F` amber-orange) and `--semantic-credit-text` (`#713813` dark amber) added to both `src/styles.css` and `app/globals.css`. Tailwind utilities: `bg-semantic-credit`, `text-semantic-credit-text`.
+- **Badge — `fill-credit` variant:** New `fill-credit` variant for credit/bonus labels — `bg-semantic-credit/16` background with `text-semantic-credit-text` foreground. Pair with a `TicketPlus` icon. Badge base class no longer applies `tracking-wide`; letter spacing is default on all badge variants.
+- **New `CreditTicketCard` component:** Exported alongside `TicketCard`. Renders the same ticket shell (notches, tear-line, shimmer stub) but with a variable-height card body and an inline `<Badge variant="fill-credit">` below the value for credit/bonus display. Props: `icon`, `label`, `value`, `currency`, `stubLabel`, `onStubClick`, `stubDisabled`, `creditAmount` (default `"0.00"`), `creditCurrency` (default `"USDT"`), `compact`.
+- **`TicketCard` — `compact` prop:** New boolean prop (default `false`). When `true`, reduces left-content padding from `px-4 gap-4` to `px-2 gap-2` for mobile layouts.
+- **`TicketCard` — welcome-credit props removed:** `welcomeCredit`, `freeCredit` (deprecated alias), `creditUsed`, `creditTotal`, `creditCurrency`, `creditLabel`, `creditFullWidth`, and the `Progress`-based credit bar have been removed. Use `CreditTicketCard` for the credit use case.
+- **`tracking-wide` / `tracking-widest` removed from several components:** Badge base class, `Link` base class, `PaginationLink`, `CommandShortcut`, `ContextMenuShortcut`, `DropdownMenuShortcut`, and `MenubarShortcut` no longer apply letter-spacing overrides. All render with default tracking.
+
 ### v0.10.1
 - **TicketCard — Wallet icon:** Default icon in the circular badge is now a `Wallet` icon (replaces `CircleDollarSign`).
 - **TicketCard — sentence case labels:** The label above the value (e.g. "Total balance") and the stub label (e.g. "Deposit") no longer apply `uppercase` or `tracking-widest`. Both render in sentence case with default letter spacing.

package/dist/index.cjs

@@ -158,6 +158,7 @@ __export(index_exports, {
   ContextMenuSubContent: () => ContextMenuSubContent,
   ContextMenuSubTrigger: () => ContextMenuSubTrigger,
   ContextMenuTrigger: () => ContextMenuTrigger,
+  CreditTicketCard: () => CreditTicketCard,
   Dialog: () => Dialog,
   DialogClose: () => DialogClose,
   DialogContent: () => DialogContent,
@@ -935,7 +936,7 @@ var import_class_variance_authority3 = require("class-variance-authority");
 var import_radix_ui6 = require("radix-ui");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var badgeVariants = (0, import_class_variance_authority3.cva)(
-  "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent text-xs font-display font-semibold tracking-wide whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [&>svg]:pointer-events-none [&>svg]:size-3",
+  "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent text-xs font-display font-semibold whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [&>svg]:pointer-events-none [&>svg]:size-3",
   {
     variants: {
       variant: {
@@ -949,6 +950,7 @@ var badgeVariants = (0, import_class_variance_authority3.cva)(
         "fill-success": "bg-semantic-win/10 border-transparent text-semantic-win",
         "fill-fail": "bg-semantic-loss/10 border-transparent text-semantic-loss",
         "fill-warning": "bg-semantic-warning/10 border-transparent text-semantic-warning",
+        "fill-credit": "bg-semantic-credit/16 border-transparent text-semantic-credit-text !text-xs !font-semibold",
         // Ghost (transparent)
         ghost: "bg-transparent border-transparent text-primary [a&]:hover:bg-secondary-hover [a&]:hover:text-primary",
         "ghost-success": "bg-transparent border-transparent text-semantic-win [a&]:hover:bg-semantic-win/10 [a&]:hover:text-semantic-win",
@@ -2744,7 +2746,7 @@ function CommandShortcut(_a) {
     __spreadValues({
       "data-slot": "command-shortcut",
       className: cn(
-        "ml-auto text-xs tracking-widest text-on-subtle",
+        "ml-auto text-xs text-on-subtle",
         className
       )
     }, props)
@@ -2964,7 +2966,7 @@ function ContextMenuShortcut(_a) {
     __spreadValues({
       "data-slot": "context-menu-shortcut",
       className: cn(
-        "ml-auto text-xs tracking-widest text-on-subtle",
+        "ml-auto text-xs text-on-subtle",
         className
       )
     }, props)
@@ -3275,7 +3277,7 @@ function DropdownMenuShortcut(_a) {
     __spreadValues({
       "data-slot": "dropdown-menu-shortcut",
       className: cn(
-        "ml-auto text-xs tracking-widest text-on-subtle",
+        "ml-auto text-xs text-on-subtle",
         className
       )
     }, props)
@@ -4131,7 +4133,7 @@ var import_class_variance_authority9 = require("class-variance-authority");
 var import_radix_ui19 = require("radix-ui");
 var import_jsx_runtime35 = require("react/jsx-runtime");
 var linkVariants = (0, import_class_variance_authority9.cva)(
-  "inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 active:opacity-60 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:inline font-display font-bold normal-case tracking-wide text-primary hover:underline decoration-2 underline-offset-4",
+  "inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 active:opacity-60 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:inline font-display font-bold normal-case text-primary hover:underline decoration-2 underline-offset-4",
   {
     variants: {
       size: {
@@ -4365,7 +4367,7 @@ function MenubarShortcut(_a) {
     __spreadValues({
       "data-slot": "menubar-shortcut",
       className: cn(
-        "ml-auto text-xs tracking-widest text-on-subtle",
+        "ml-auto text-xs text-on-subtle",
         className
       )
     }, props)
@@ -4749,7 +4751,7 @@ function PaginationLink(_a) {
       "data-slot": "pagination-link",
       "data-active": isActive,
       className: cn(
-        "inline-flex shrink-0 items-center justify-center size-10 rounded-xs text-sm font-display font-bold uppercase tracking-wide whitespace-nowrap transition-[color,background-color,border-color] outline-none border",
+        "inline-flex shrink-0 items-center justify-center size-10 rounded-xs text-sm font-display font-bold uppercase whitespace-nowrap transition-[color,background-color,border-color] outline-none border",
         isActive ? "bg-primary/10 border-primary text-primary" : "bg-transparent border-transparent text-on-prominent hover:bg-secondary-hover",
         className
       )
@@ -6615,25 +6617,84 @@ function TicketCard({
   stubLabel,
   onStubClick,
   stubDisabled = false,
-  welcomeCredit,
-  freeCredit,
-  creditUsed = "10.00",
-  creditTotal = "10.00",
+  compact = false
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: cn("flex w-full flex-col gap-2", className), children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "relative flex h-20 w-full items-stretch justify-between rounded-sm bg-subtle", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: cn("flex flex-1 items-center overflow-hidden", compact ? "gap-2 px-2" : "gap-4 px-4"), children: [
+      icon && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "flex size-10 shrink-0 items-center justify-center rounded-full border-2 border-primary text-primary", children: icon }),
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex h-11 flex-col justify-center gap-1 whitespace-nowrap", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("p", { className: "text-xs text-on-subtle", children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("p", { className: "leading-none", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "text-[20px] font-bold text-on-prominent", children: value }),
+          currency && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
+            " ",
+            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "text-sm text-on-subtle", children: currency })
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { "aria-hidden": true, className: "pointer-events-none absolute right-[88px] top-[-12px] z-10 size-6 rounded-full bg-prominent" }),
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { "aria-hidden": true, className: "pointer-events-none absolute right-[88px] top-[68px] z-10 size-6 rounded-full bg-prominent" }),
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+      "div",
+      {
+        "aria-hidden": true,
+        className: "pointer-events-none absolute bottom-[12px] top-[12px] z-10 w-1 -translate-x-1/2",
+        style: {
+          right: 96,
+          backgroundImage: "repeating-linear-gradient(to bottom, color-mix(in oklch, var(--border-subtle) 80%, black) 0px, color-mix(in oklch, var(--border-subtle) 80%, black) 3px, transparent 3px, transparent 6px)"
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
+      "button",
+      {
+        type: "button",
+        onClick: onStubClick,
+        disabled: stubDisabled,
+        "aria-label": stubLabel,
+        className: cn(
+          "relative flex h-20 w-[100px] shrink-0 flex-col items-center justify-center gap-1 overflow-hidden rounded-r-sm bg-primary",
+          "transition-colors duration-fast ease-standard",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          stubDisabled ? "cursor-not-allowed opacity-50" : "hover:bg-primary-hover"
+        ),
+        children: [
+          !stubDisabled && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+            "span",
+            {
+              "aria-hidden": true,
+              className: "pointer-events-none absolute inset-0 [animation:stub-shimmer_1.5s_linear_infinite]",
+              style: {
+                background: "linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.30) 50%, transparent 100%)"
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lucide_react23.ArrowRight, { className: "size-4 text-on-prominent-static-inverse" }),
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "text-sm font-semibold text-on-prominent-static-inverse", children: stubLabel })
+        ]
+      }
+    )
+  ] }) });
+}
+function CreditTicketCard({
+  className,
+  icon,
+  label,
+  value,
+  currency,
+  stubLabel,
+  onStubClick,
+  stubDisabled = false,
+  creditAmount = "0.00",
   creditCurrency = "USDT",
-  creditLabel = "Welcome credit",
-  creditFullWidth = false
+  compact = false
 }) {
-  var _a;
-  const showCredit = (_a = welcomeCredit != null ? welcomeCredit : freeCredit) != null ? _a : false;
-  const creditPct = Math.min(
-    100,
-    Math.max(0, parseFloat(creditUsed) / parseFloat(creditTotal) * 100)
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: cn("flex w-full flex-col gap-2", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "relative flex h-20 w-full items-stretch justify-between rounded-sm bg-subtle", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex flex-1 items-center gap-4 overflow-hidden px-4", children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "flex size-10 shrink-0 items-center justify-center rounded-full border-2 border-primary text-primary", children: icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex h-11 flex-col justify-center gap-1 whitespace-nowrap", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: cn("flex w-full flex-col gap-2", className), children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "relative flex w-full items-stretch justify-between rounded-sm bg-subtle", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: cn("flex flex-1 items-center overflow-hidden py-4", compact ? "gap-2 px-2" : "gap-4 px-4"), children: [
+      icon && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "flex size-10 shrink-0 items-center justify-center rounded-full border-2 border-primary text-primary", children: icon }),
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex flex-col gap-2 whitespace-nowrap", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex flex-col gap-1", children: [
           /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("p", { className: "text-xs text-on-subtle", children: label }),
           /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("p", { className: "leading-none", children: [
             /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "text-[20px] font-bold text-on-prominent", children: value }),
@@ -6642,74 +6703,59 @@ function TicketCard({
               /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "text-sm text-on-subtle", children: currency })
             ] })
           ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(Badge, { variant: "fill-credit", size: "sm", className: "!gap-1 !font-medium !tracking-normal", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lucide_react23.TicketPlus, { className: "!size-3.5", strokeWidth: 2 }),
+          "Credit: ",
+          creditAmount,
+          " ",
+          creditCurrency
         ] })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { "aria-hidden": true, className: "pointer-events-none absolute right-[88px] top-[-12px] z-10 size-6 rounded-full bg-prominent" }),
-      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { "aria-hidden": true, className: "pointer-events-none absolute right-[88px] top-[68px] z-10 size-6 rounded-full bg-prominent" }),
-      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-        "div",
-        {
-          "aria-hidden": true,
-          className: "pointer-events-none absolute bottom-[12px] top-[12px] z-10 w-1 -translate-x-1/2",
-          style: {
-            right: 96,
-            backgroundImage: "repeating-linear-gradient(to bottom, color-mix(in oklch, var(--border-subtle) 80%, black) 0px, color-mix(in oklch, var(--border-subtle) 80%, black) 3px, transparent 3px, transparent 6px)"
-          }
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { "aria-hidden": true, className: "pointer-events-none absolute right-[88px] top-[-12px] z-10 size-6 rounded-full bg-prominent" }),
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { "aria-hidden": true, className: "pointer-events-none absolute right-[88px] bottom-[-12px] z-10 size-6 rounded-full bg-prominent" }),
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+      "div",
+      {
+        "aria-hidden": true,
+        className: "pointer-events-none absolute bottom-[12px] top-[12px] z-10 w-1 -translate-x-1/2",
+        style: {
+          right: 96,
+          backgroundImage: "repeating-linear-gradient(to bottom, color-mix(in oklch, var(--border-subtle) 80%, black) 0px, color-mix(in oklch, var(--border-subtle) 80%, black) 3px, transparent 3px, transparent 6px)"
         }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
-        "button",
-        {
-          type: "button",
-          onClick: onStubClick,
-          disabled: stubDisabled,
-          "aria-label": stubLabel,
-          className: cn(
-            "relative flex h-20 w-[100px] shrink-0 flex-col items-center justify-center gap-1 overflow-hidden rounded-r-sm bg-primary",
-            "transition-colors duration-fast ease-standard",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-            stubDisabled ? "cursor-not-allowed opacity-50" : "hover:bg-primary-hover"
-          ),
-          children: [
-            !stubDisabled && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-              "span",
-              {
-                "aria-hidden": true,
-                className: "pointer-events-none absolute inset-0 [animation:stub-shimmer_1.5s_linear_infinite]",
-                style: {
-                  background: "linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.30) 50%, transparent 100%)"
-                }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
+      "button",
+      {
+        type: "button",
+        onClick: onStubClick,
+        disabled: stubDisabled,
+        "aria-label": stubLabel,
+        className: cn(
+          "relative flex w-[100px] shrink-0 self-stretch flex-col items-center justify-center gap-1 overflow-hidden rounded-r-sm bg-primary",
+          "transition-colors duration-fast ease-standard",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          stubDisabled ? "cursor-not-allowed opacity-50" : "hover:bg-primary-hover"
+        ),
+        children: [
+          !stubDisabled && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+            "span",
+            {
+              "aria-hidden": true,
+              className: "pointer-events-none absolute inset-0 [animation:stub-shimmer_1.5s_linear_infinite]",
+              style: {
+                background: "linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.30) 50%, transparent 100%)"
               }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lucide_react23.ArrowRight, { className: "size-4 text-on-prominent-static-inverse" }),
-            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "text-sm font-semibold text-on-prominent-static-inverse", children: stubLabel })
-          ]
-        }
-      )
-    ] }),
-    showCredit && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: cn(
-      "flex items-center gap-2 rounded-sm bg-subtle p-2",
-      creditFullWidth ? "w-full" : "w-[calc(100%-112px)]"
-    ), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lucide_react23.TicketPlus, { className: "size-6 shrink-0", style: { color: "#713813" } }),
-      /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex items-center justify-between whitespace-nowrap text-[10px] font-semibold", style: { color: "#713813" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { children: creditLabel }),
-          /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("span", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "text-on-prominent", children: creditUsed }),
-            ` / ${creditTotal} ${creditCurrency}`
-          ] })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-          Progress,
-          {
-            value: creditPct,
-            className: "h-1 bg-black/8 [&>[data-slot=progress-indicator]]:bg-[#ef9f00]"
-          }
-        )
-      ] })
-    ] })
-  ] });
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lucide_react23.ArrowRight, { className: "size-4 text-on-prominent-static-inverse" }),
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "text-sm font-semibold text-on-prominent-static-inverse", children: stubLabel })
+        ]
+      }
+    )
+  ] }) });
 }
 var TicketCardDesktop = TicketCard;
 
@@ -6930,6 +6976,7 @@ function ToggleGroupItem(_a) {
   ContextMenuSubContent,
   ContextMenuSubTrigger,
   ContextMenuTrigger,
+  CreditTicketCard,
   Dialog,
   DialogClose,
   DialogContent,