@trading-game/design-intelligence-layer 0.12.4 → 0.13.0

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`, `CreditTicketCard` |
+| Ticket Card | `TicketCard`, `BoostTicketCard` |
 | Toast | `Toaster` |
 | Toggle | `Toggle, toggleVariants` |
 | Toggle Group | `ToggleGroup, ToggleGroupItem` |
@@ -220,7 +220,7 @@ States: hover (`bg-secondary-hover`), focus (3px `ring-ring/50`), active (`opaci
 <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)
+<Badge variant="fill-boost" />      // Amber-orange tint — boost/bonus labels (pair with a Rocket icon)
 
 // Outline (black border, secondary-hover on hover)
 <Badge variant="outline" />
@@ -288,6 +288,7 @@ All tokens are CSS custom properties, loaded automatically via `@trading-game/de
 | Tailwind class | CSS variable | Value | Usage |
 |---|---|---|---|
 | `bg-prominent` | `--prominent` | `#FFFFFF` | Page background |
+| `bg-prominent-inverse` | `--prominent-inverse` | `#000000` | Dark surface for use on light pages (e.g. toasts) |
 | `bg-card` | `--card` | `#FFFFFF` | Card/panel surface |
 | `bg-popover` | `--popover` | `#FFFFFF` | Popover/dropdown surface |
 | `bg-subtle` | `--subtle` | `#F5F5F5` | Subtle tinted surface |
@@ -296,24 +297,33 @@ All tokens are CSS custom properties, loaded automatically via `@trading-game/de
 | `bg-tabs-active` | `--tabs-active` | `#FFFFFF` | Active / selected tab pill |
 | `bg-primary` | `--primary` | `#2323FF` | Brand blue — CTAs |
 | `bg-primary-hover` | `--primary-hover` | `#0B0BD2` | Primary button hover (darker blue) |
+| `bg-primary-inverse` | `--primary-inverse` | `#FFFFFF` | Inverted primary surface — white bg for use on dark/coloured areas |
 | `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 |
+| `bg-semantic-boost` | `--semantic-boost` | `#F9840F` amber-orange | Boost / bonus badge background |
 
 ### Text tokens
 
+> **Naming convention:** every surface (bg) token has a paired `text-on-<surface>` foreground (text/icon) token. Always use the pair together — `bg-primary` + `text-on-primary`, `bg-semantic-win` + `text-on-semantic-win`, etc. — for guaranteed legibility regardless of theme.
+
 | Tailwind class | Value | Usage |
 |---|---|---|
-| `text-on-prominent` | `#000000` | Primary text on light backgrounds |
-| `text-on-prominent-static-inverse` | `#FFFFFF` | Always white — for text on dark/primary backgrounds |
-| `text-on-subtle` | mid grey | Secondary / supporting text |
+| `text-on-prominent` | `#000000` | Text on `bg-prominent` (default body text on light surfaces) |
+| `text-on-prominent-inverse` | `#FFFFFF` | Text on `bg-prominent-inverse` (e.g. toast title/description) |
+| `text-on-subtle` | mid grey | Text on `bg-subtle` (secondary / supporting text) |
 | `text-on-disabled` | `#BBBBBB` | Disabled / inactive text |
-
-| `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 |
+| `text-on-primary` | `#FFFFFF` | Text on `bg-primary` (e.g. primary button label, tooltip text) |
+| `text-on-primary-inverse` | `#2323FF` | Text on `bg-primary-inverse` (e.g. primary-inverse button label) |
+| `text-on-semantic-win` | `#FFFFFF` | Text on `bg-semantic-win` (e.g. success badge label) |
+| `text-on-semantic-loss` | `#FFFFFF` | Text on `bg-semantic-loss` (e.g. fail badge label) |
+| `text-on-semantic-warning` | `#FFFFFF` | Text on `bg-semantic-warning` (e.g. warning badge label) |
+| `text-on-semantic-boost` | `#713813` dark amber | Text on `bg-semantic-boost` (e.g. boost badge label) |
+| `text-primary` | `#2323FF` | Brand blue inline text (use as a foreground over neutral surfaces) |
+| `text-semantic-win` | green | Profit / positive inline text |
+| `text-semantic-loss` | red | Loss / negative inline text |
+
+> **Deprecated:** `text-on-prominent-static-inverse` and the matching `--on-prominent-static-inverse` CSS variable are still defined for backwards-compat with external code that references them via raw `var()`. Internal components no longer use them. For new code, pick the explicit `text-on-<surface>` paired with the actual background.
 
 ### Border & focus tokens
 
@@ -514,7 +524,7 @@ See node_modules/@trading-game/design-intelligence-layer/README.md for complete
 |---|---|---|
 | `bg-gray-100` | `bg-subtle` | Raw Tailwind palette — use tokens |
 | `bg-white` | `bg-prominent` or `bg-card` | Not a semantic token |
-| `text-white` | `text-on-prominent-static-inverse` | Use the semantic inverse token |
+| `text-white` | `text-on-<surface>` (e.g. `text-on-primary`, `text-on-prominent-inverse`, `text-on-semantic-win`) | Pick the paired foreground for the actual background |
 | `text-black` | `text-on-prominent` | Not a semantic token |
 | `text-gray-400` | `text-on-disabled` | Use the disabled text token |
 | `bg-black/50` | `bg-overlay` | Overlay has its own token |
@@ -585,10 +595,26 @@ Design tokens are managed in Figma and exported as CSS variables. To update:
 
 ## Changelog
 
+### Unreleased
+- **Token convention — `on-<surface>` foreground pairs:** Added a Material-style paired foreground for every semantic surface so colour roles are self-documenting and resolve robustly across consumer setups (incl. Module Federation, where raw `var()` fallbacks were previously needed). New CSS variables and Tailwind utilities:
+  - `--on-primary` (white) / `text-on-primary` — paired with `bg-primary`
+  - `--primary-inverse` (white) / `bg-primary-inverse` — inverted primary surface for use on dark/coloured areas
+  - `--on-primary-inverse` (blue) / `text-on-primary-inverse` — paired with `bg-primary-inverse`
+  - `--prominent-inverse` (black) / `bg-prominent-inverse` — dark surface for use on light pages (e.g. toasts)
+  - `--on-prominent-inverse` (white) / `text-on-prominent-inverse` — paired with `bg-prominent-inverse`
+  - `--on-semantic-win` / `--on-semantic-loss` / `--on-semantic-warning` (all white) and `--on-semantic-boost` (dark amber) — paired with the matching `bg-semantic-*` surfaces.
+- **Internal sweep:** all internal components (Button, Badge, Tooltip, Toast, Checkbox, Avatar, Input, NativeSelect, TicketCard, BoostTicketCard, sidebar mini-avatar) now use the explicit `on-<surface>` foregrounds — no more catch-all `text-on-prominent-static-inverse`.
+- **Backwards-compat aliases preserved:** `--on-prominent-static-inverse` (→ `var(--on-prominent-inverse)`) and `--surface-inverse-static` (→ `var(--primary-inverse)`) remain defined in CSS so existing consumer code referencing them via raw `var()` (e.g. `var(--on-prominent-static-inverse, #fff)`) keeps working. The Tailwind utility `text-on-prominent-static-inverse` is also still emitted, but new code should pick the explicit paired token.
+- **Sonner → Toast rename:** The toast wrapper file moved from `components/ui/sonner.tsx` to `components/ui/toast.tsx`. The wrapper component is still `Toaster`, and `toast` is now re-exported from this module so consumers no longer need `import { toast } from "sonner"` directly. Import path: `@trading-game/design-intelligence-layer` (was `... from "sonner"`).
+- **`fill-credit` → `fill-boost` Badge variant rename:** The amber-orange badge variant for bonus labels is now `fill-boost` (uses `bg-semantic-boost/16` + `text-on-semantic-boost`). The CSS tokens were correspondingly renamed: `--semantic-credit` → `--semantic-boost`, `--semantic-credit-text` → `--on-semantic-boost`. **Breaking change** for consumers that referenced these by name.
+- **`CreditTicketCard` → `BoostTicketCard` rename:** Component, props (`creditAmount` → `boostAmount`, `creditCurrency` → `boostCurrency`), and badge text (`"Credit: …"` → `"Boost: …"`) all renamed for consistency. The boost badge now uses a leading `Rocket` icon and a trailing `Info` icon (replacing the prior `TicketPlus`). **Breaking change.**
+- **Button `primary-inverse` / `secondary-inverse`:** Now built from the new `bg-primary-inverse` / `text-on-primary-inverse` / `border-primary-inverse` / `text-on-prominent-inverse` tokens. Visually identical to before, but the underlying class names are different.
+- **Toast — action button visual fix:** The toast action button (the inverse-coloured "Undo" pill) now uses `primary-inverse` colouring (white bg + blue text) to match the dark toast surface, instead of the previous `bg-primary` (blue on dark — low hierarchy / wrong surface-context).
+
 ### 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`.
+- **New semantic tokens — credit:** _(superseded — see Unreleased above for the `boost` rename)_ `--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:** _(superseded — now `fill-boost`)_ 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:** _(superseded — now `BoostTicketCard`)_ 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.

package/dist/index.cjs

@@ -87,6 +87,7 @@ __export(index_exports, {
   AvatarGroupCount: () => AvatarGroupCount,
   AvatarImage: () => AvatarImage,
   Badge: () => Badge,
+  BoostTicketCard: () => BoostTicketCard,
   Breadcrumb: () => Breadcrumb,
   BreadcrumbEllipsis: () => BreadcrumbEllipsis,
   BreadcrumbItem: () => BreadcrumbItem,
@@ -158,7 +159,6 @@ __export(index_exports, {
   ContextMenuSubContent: () => ContextMenuSubContent,
   ContextMenuSubTrigger: () => ContextMenuSubTrigger,
   ContextMenuTrigger: () => ContextMenuTrigger,
-  CreditTicketCard: () => CreditTicketCard,
   Dialog: () => Dialog,
   DialogClose: () => DialogClose,
   DialogContent: () => DialogContent,
@@ -374,6 +374,7 @@ __export(index_exports, {
   navigationButtonVariants: () => navigationButtonVariants,
   navigationMenuTriggerStyle: () => navigationMenuTriggerStyle,
   tabsListVariants: () => tabsListVariants,
+  toast: () => import_sonner.toast,
   toggleVariants: () => toggleVariants,
   useComboboxAnchor: () => useComboboxAnchor,
   useDirection: () => useDirection,
@@ -579,12 +580,12 @@ var buttonVariants = (0, import_class_variance_authority2.cva)(
     variants: {
       variant: {
         // Primary brand blue (#2323FF)
-        primary: "bg-primary text-on-prominent-static-inverse hover:bg-primary-hover",
+        primary: "bg-primary text-on-primary hover:bg-primary-hover",
         // Primary Inverse — white bg + blue text; for use on dark/coloured surfaces
-        "primary-inverse": "bg-on-prominent-static-inverse text-primary hover:bg-on-prominent-static-inverse/80",
+        "primary-inverse": "bg-primary-inverse text-on-primary-inverse hover:bg-primary-inverse/80",
         secondary: "bg-transparent border-[1.5px] border-border-prominent text-on-prominent hover:bg-secondary-hover",
         // Secondary Inverse — white border + white text; for use on dark/coloured surfaces
-        "secondary-inverse": "bg-transparent border-[1.5px] border-on-prominent-static-inverse text-on-prominent-static-inverse hover:bg-on-prominent-static-inverse/10",
+        "secondary-inverse": "bg-transparent border-[1.5px] border-primary-inverse text-on-prominent-inverse hover:bg-primary-inverse/10",
         tertiary: "bg-transparent text-primary hover:bg-primary/[0.08]"
       },
       size: {
@@ -894,7 +895,7 @@ function AvatarBadge(_a) {
     __spreadValues({
       "data-slot": "avatar-badge",
       className: cn(
-        "absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-on-prominent-static-inverse ring-2 ring-prominent select-none",
+        "absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-on-primary ring-2 ring-prominent select-none",
         "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
         "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
         "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
@@ -945,16 +946,16 @@ var badgeVariants = (0, import_class_variance_authority3.cva)(
     variants: {
       variant: {
         // Default (solid)
-        default: "bg-primary text-on-prominent-static-inverse [a&]:hover:bg-primary/90",
-        "default-success": "bg-semantic-win text-on-prominent-static-inverse [a&]:hover:bg-semantic-win/90",
-        "default-fail": "bg-semantic-loss text-on-prominent-static-inverse [a&]:hover:bg-semantic-loss/90",
-        "default-warning": "bg-semantic-warning text-on-prominent-static-inverse [a&]:hover:bg-semantic-warning/90",
+        default: "bg-primary text-on-primary [a&]:hover:bg-primary/90",
+        "default-success": "bg-semantic-win text-on-semantic-win [a&]:hover:bg-semantic-win/90",
+        "default-fail": "bg-semantic-loss text-on-semantic-loss [a&]:hover:bg-semantic-loss/90",
+        "default-warning": "bg-semantic-warning text-on-semantic-warning [a&]:hover:bg-semantic-warning/90",
         // Fill (tint)
         fill: "bg-primary/10 border-transparent text-primary",
         "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",
+        "fill-boost": "bg-semantic-boost/16 border-transparent text-on-semantic-boost !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",
@@ -1836,7 +1837,7 @@ function Checkbox(_a) {
     __spreadProps(__spreadValues({
       "data-slot": "checkbox",
       className: cn(
-        "peer size-4 shrink-0 rounded-[2px] border border-input shadow-xs transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-on-prominent-static-inverse",
+        "peer size-4 shrink-0 rounded-[2px] border border-input shadow-xs transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-on-primary",
         className
       )
     }, props), {
@@ -1894,7 +1895,7 @@ var inputVariants = (0, import_class_variance_authority4.cva)(
   [
     "w-full min-w-0 rounded-sm border border-border-subtle bg-white/5",
     "text-on-prominent font-body shadow-xs transition-[color,box-shadow] outline-none",
-    "selection:bg-primary selection:text-on-prominent-static-inverse",
+    "selection:bg-primary selection:text-on-primary",
     "file:inline-flex file:border-0 file:bg-transparent file:font-medium file:text-on-prominent",
     "placeholder:text-on-subtle",
     "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
@@ -4449,7 +4450,7 @@ function NativeSelect(_a) {
             "data-slot": "native-select",
             "data-size": size,
             className: cn(
-              "h-9 w-full min-w-0 appearance-none rounded-md border border-input bg-transparent px-3 py-2 pr-9 text-sm shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-on-prominent-static-inverse placeholder:text-on-subtle disabled:pointer-events-none disabled:cursor-not-allowed data-[size=sm]:h-8 data-[size=sm]:py-1",
+              "h-9 w-full min-w-0 appearance-none rounded-md border border-input bg-transparent px-3 py-2 pr-9 text-sm shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-on-primary placeholder:text-on-subtle disabled:pointer-events-none disabled:cursor-not-allowed data-[size=sm]:h-8 data-[size=sm]:py-1",
               "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
               className
             )
@@ -5446,7 +5447,7 @@ function TooltipContent(_a) {
       "data-slot": "tooltip-content",
       sideOffset,
       className: cn(
-        "z-50 w-fit origin-(--radix-tooltip-content-transform-origin) animate-in rounded-md bg-primary border-0 px-3 py-1.5 text-xs font-medium text-balance text-on-prominent-static-inverse fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+        "z-50 w-fit origin-(--radix-tooltip-content-transform-origin) animate-in rounded-md bg-primary border-0 px-3 py-1.5 text-xs font-medium text-balance text-on-primary fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
         className
       )
     }, props), {
@@ -6164,7 +6165,7 @@ function Slider(_a) {
   );
 }
 
-// components/ui/sonner.tsx
+// components/ui/toast.tsx
 var import_lucide_react21 = require("lucide-react");
 var import_next_themes = require("next-themes");
 var import_sonner = require("sonner");
@@ -6190,15 +6191,15 @@ var Toaster = (_a) => {
       },
       toastOptions: {
         classNames: {
-          toast: "!bg-[var(--on-prominent)] !border-none",
-          title: "!text-[var(--on-prominent-static-inverse)] !font-display !font-bold",
-          description: "!text-[var(--on-prominent-static-inverse)] !opacity-60 !font-body",
-          actionButton: "!bg-[var(--primary)] !text-[var(--on-prominent-static-inverse)]"
+          toast: "!bg-[var(--prominent-inverse)] !border-none",
+          title: "!text-[var(--on-prominent-inverse)] !font-display !font-bold",
+          description: "!text-[var(--on-prominent-inverse)] !opacity-60 !font-body",
+          actionButton: "!bg-[var(--primary-inverse)] !text-[var(--on-primary-inverse)]"
         }
       },
       style: {
-        "--normal-bg": "var(--on-prominent)",
-        "--normal-text": "var(--on-prominent-static-inverse)",
+        "--normal-bg": "var(--prominent-inverse)",
+        "--normal-text": "var(--on-prominent-inverse)",
         "--normal-border": "transparent",
         "--border-radius": "var(--radius)"
       }
@@ -6674,14 +6675,14 @@ function TicketCard({
               }
             }
           ),
-          /* @__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 })
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lucide_react23.ArrowRight, { className: "size-4 text-on-primary" }),
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "text-sm font-semibold text-on-primary", children: stubLabel })
         ]
       }
     )
   ] }) });
 }
-function CreditTicketCard({
+function BoostTicketCard({
   className,
   icon,
   label,
@@ -6690,8 +6691,8 @@ function CreditTicketCard({
   stubLabel,
   onStubClick,
   stubDisabled = false,
-  creditAmount = "0.00",
-  creditCurrency = "USDT",
+  boostAmount = "0.00",
+  boostCurrency = "USDT",
   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 w-full items-stretch justify-between rounded-sm bg-subtle", children: [
@@ -6708,12 +6709,13 @@ function CreditTicketCard({
             ] })
           ] })
         ] }),
-        /* @__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,
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(Badge, { variant: "fill-boost", size: "sm", className: "!gap-1 !font-medium !tracking-normal", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lucide_react23.Rocket, { className: "!size-3.5", strokeWidth: 2 }),
+          "Boost: ",
+          boostAmount,
           " ",
-          creditCurrency
+          boostCurrency,
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lucide_react23.Info, { className: "!size-3.5", strokeWidth: 2, "aria-label": "More info about boost" })
         ] })
       ] })
     ] }),
@@ -6754,8 +6756,8 @@ function CreditTicketCard({
               }
             }
           ),
-          /* @__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 })
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lucide_react23.ArrowRight, { className: "size-4 text-on-primary" }),
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "text-sm font-semibold text-on-primary", children: stubLabel })
         ]
       }
     )
@@ -6909,6 +6911,7 @@ function ToggleGroupItem(_a) {
   AvatarGroupCount,
   AvatarImage,
   Badge,
+  BoostTicketCard,
   Breadcrumb,
   BreadcrumbEllipsis,
   BreadcrumbItem,
@@ -6980,7 +6983,6 @@ function ToggleGroupItem(_a) {
   ContextMenuSubContent,
   ContextMenuSubTrigger,
   ContextMenuTrigger,
-  CreditTicketCard,
   Dialog,
   DialogClose,
   DialogContent,
@@ -7196,6 +7198,7 @@ function ToggleGroupItem(_a) {
   navigationButtonVariants,
   navigationMenuTriggerStyle,
   tabsListVariants,
+  toast,
   toggleVariants,
   useComboboxAnchor,
   useDirection,