@trading-game/design-intelligence-layer 1.0.5 → 1.0.7

package/dist/index.cjs

@@ -496,7 +496,7 @@ var buttonVariants = (0, import_class_variance_authority.cva)(
     variants: {
       variant: {
         // Primary brand blue (#2323FF)
-        primary: "bg-background-brand-default text-text-on-brand-static hover:bg-background-brand-hover active:bg-background-brand-pressed active:opacity-100 disabled:[background-image:linear-gradient(var(--background-disabled-default),var(--background-disabled-default))] disabled:text-text-disabled-default",
+        primary: "bg-background-brand-default text-text-on-brand-static hover:bg-background-brand-hover active:bg-background-brand-pressed active:opacity-100 disabled:opacity-(--opacity-disabled)",
         // Primary Inverse — white bg + blue text; for use on dark/coloured surfaces
         // On-brand family — for buttons standing on a brand-coloured surface
         // (NOT theme inverses): white pill with primary ink, white outline,
@@ -515,7 +515,7 @@ var buttonVariants = (0, import_class_variance_authority.cva)(
         // (white-alpha-32 = 1.84:1 on brand, against 1.71:1 here) so both
         // read as the same quiet edge. Its contrast is higher only because it
         // has no fill behind it — there, the border IS the button.
-        secondary: "bg-background-primary-surface border-[1.5px] border-border-control-default text-text-prominent-default hover:bg-background-secondary-surface disabled:[background-image:linear-gradient(var(--background-disabled-default),var(--background-disabled-default))] disabled:border-border-disabled-default disabled:text-text-disabled-default",
+        secondary: "button-disabled-secondary bg-background-primary-surface border-[1.5px] border-border-control-default text-text-prominent-default hover:bg-background-secondary-surface",
         // Secondary Inverse — white border + white text; for use on dark/coloured surfaces
         "secondary-on-brand": "bg-transparent border-[1.5px] border-(--primitive-white-alpha-32) text-text-on-brand-static hover:bg-(--primitive-white-alpha-8) disabled:border-(--primitive-white-alpha-16) disabled:text-text-on-brand-disabled-default",
         tertiary: "bg-transparent text-text-prominent-default hover:bg-background-hover-default disabled:text-text-disabled-default",
@@ -526,7 +526,7 @@ var buttonVariants = (0, import_class_variance_authority.cva)(
         // hover/pressed via the state-layer glazes stacked over the solid
         // fill); `frosted-on-brand` is the white frost for coloured/art
         // surfaces (hover thickens the frost, press thins it).
-        frosted: "bg-background-brand-selected text-text-brand-selected active:opacity-100 hover:[background-image:linear-gradient(var(--background-hover-default),var(--background-hover-default))] active:[background-image:linear-gradient(var(--background-pressed-default),var(--background-pressed-default))] disabled:[background-image:linear-gradient(var(--background-disabled-default),var(--background-disabled-default))] disabled:text-text-disabled-default",
+        frosted: "bg-background-brand-selected text-text-brand-selected active:opacity-100 hover:[background-image:linear-gradient(var(--background-hover-default),var(--background-hover-default))] active:[background-image:linear-gradient(var(--background-pressed-default),var(--background-pressed-default))] disabled:opacity-(--opacity-disabled-frosted)",
         "frosted-on-brand": "bg-(--primitive-white-alpha-24) backdrop-blur-md text-text-on-brand-static hover:bg-(--primitive-white-alpha-32) active:bg-(--primitive-white-alpha-16) active:opacity-100 disabled:bg-(--primitive-white-alpha-8) disabled:text-text-on-brand-disabled-default",
         /* @deprecated aliases — shimmer became the `shimmer` boolean prop;
            the inverse names became the on-brand family; `glass` became
@@ -2788,7 +2788,7 @@ function Checkbox(_a) {
     __spreadProps(__spreadValues({
       "data-slot": "checkbox",
       className: cn(
-        "peer size-4 shrink-0 rounded-2xs border border-border-default-default bg-background-primary-surface transition-colors outline-none focus-visible:border-ring-focus-default focus-visible:ring-[3px] focus-visible:ring-ring-focus-strong disabled:cursor-not-allowed disabled:border-border-default-default disabled:text-text-disabled-default data-[state=checked]:border-transparent data-[state=checked]:bg-background-brand-default data-[state=checked]:text-text-on-brand-static",
+        "peer size-4 shrink-0 rounded-2xs border border-border-default-default bg-background-primary-surface transition-colors outline-none focus-visible:border-ring-focus-default focus-visible:ring-[3px] focus-visible:ring-ring-focus-strong disabled:cursor-not-allowed disabled:opacity-(--opacity-disabled) data-[state=checked]:border-transparent data-[state=checked]:bg-background-brand-default data-[state=checked]:text-text-on-brand-static",
         className
       )
     }, props), {
@@ -3337,6 +3337,7 @@ function ContextMenuShortcut(_a) {
 }
 
 // components/ui/drawer.tsx
+var import_lucide_react14 = require("lucide-react");
 var import_vaul = require("vaul");
 var import_jsx_runtime23 = require("react/jsx-runtime");
 function Drawer(_a) {
@@ -3375,10 +3376,12 @@ function DrawerOverlay(_a) {
 function DrawerContent(_a) {
   var _b = _a, {
     className,
-    children
+    children,
+    dismiss = "handle"
   } = _b, props = __objRest(_b, [
     "className",
-    "children"
+    "children",
+    "dismiss"
   ]);
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(DrawerPortal, { "data-slot": "drawer-portal", children: [
     /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DrawerOverlay, {}),
@@ -3396,7 +3399,15 @@ function DrawerContent(_a) {
         )
       }, props), {
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full bg-border-default-default group-data-[vaul-drawer-direction=bottom]/drawer-content:block" }),
+          dismiss === "handle" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full bg-border-default-default group-data-[vaul-drawer-direction=bottom]/drawer-content:block" }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex shrink-0 justify-end p-4 pb-0", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_vaul.Drawer.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            NavigationButton,
+            {
+              "data-slot": "drawer-close",
+              size: "sm",
+              "aria-label": "Close",
+              children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react14.XIcon, { className: "size-4" })
+            }
+          ) }) }),
           children
         ]
       })
@@ -3456,7 +3467,7 @@ function DrawerDescription(_a) {
 }
 
 // components/ui/dropdown-menu.tsx
-var import_lucide_react14 = require("lucide-react");
+var import_lucide_react15 = require("lucide-react");
 var import_radix_ui14 = require("radix-ui");
 var import_jsx_runtime24 = require("react/jsx-runtime");
 function DropdownMenu(_a) {
@@ -3544,7 +3555,7 @@ function DropdownMenuCheckboxItem(_a) {
       checked
     }, props), {
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_radix_ui14.DropdownMenu.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react14.CheckIcon, { className: "size-4" }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_radix_ui14.DropdownMenu.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react15.CheckIcon, { className: "size-4" }) }) }),
         children
       ]
     })
@@ -3577,7 +3588,7 @@ function DropdownMenuRadioItem(_a) {
       )
     }, props), {
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_radix_ui14.DropdownMenu.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react14.CircleIcon, { className: "size-2 fill-current" }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_radix_ui14.DropdownMenu.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react15.CircleIcon, { className: "size-2 fill-current" }) }) }),
         children
       ]
     })
@@ -3660,7 +3671,7 @@ function DropdownMenuSubTrigger(_a) {
     }, props), {
       children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react14.ChevronRightIcon, { className: "ml-auto size-4" })
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react15.ChevronRightIcon, { className: "ml-auto size-4" })
       ]
     })
   );
@@ -4473,7 +4484,7 @@ function InputGroupTextarea(_a) {
 // components/ui/input-otp.tsx
 var React9 = __toESM(require("react"), 1);
 var import_input_otp = require("input-otp");
-var import_lucide_react15 = require("lucide-react");
+var import_lucide_react16 = require("lucide-react");
 var import_jsx_runtime33 = require("react/jsx-runtime");
 function InputOTP(_a) {
   var _b = _a, {
@@ -4535,7 +4546,7 @@ function InputOTPSlot(_a) {
 }
 function InputOTPSeparator(_a) {
   var props = __objRest(_a, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", __spreadProps(__spreadValues({ "data-slot": "input-otp-separator", role: "separator" }, props), { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react15.MinusIcon, {}) }));
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", __spreadProps(__spreadValues({ "data-slot": "input-otp-separator", role: "separator" }, props), { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react16.MinusIcon, {}) }));
 }
 
 // components/ui/item.tsx
@@ -4801,7 +4812,7 @@ function Link(_a) {
 }
 
 // components/ui/menubar.tsx
-var import_lucide_react16 = require("lucide-react");
+var import_lucide_react17 = require("lucide-react");
 var import_radix_ui20 = require("radix-ui");
 var import_jsx_runtime36 = require("react/jsx-runtime");
 function Menubar(_a) {
@@ -4924,7 +4935,7 @@ function MenubarCheckboxItem(_a) {
       checked
     }, props), {
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_radix_ui20.Menubar.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react16.CheckIcon, { className: "size-4" }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_radix_ui20.Menubar.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react17.CheckIcon, { className: "size-4" }) }) }),
         children
       ]
     })
@@ -4948,7 +4959,7 @@ function MenubarRadioItem(_a) {
       )
     }, props), {
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_radix_ui20.Menubar.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react16.CircleIcon, { className: "size-2 fill-current" }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_radix_ui20.Menubar.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react17.CircleIcon, { className: "size-2 fill-current" }) }) }),
         children
       ]
     })
@@ -5031,7 +5042,7 @@ function MenubarSubTrigger(_a) {
     }, props), {
       children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react16.ChevronRightIcon, { className: "ml-auto" })
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react17.ChevronRightIcon, { className: "ml-auto" })
       ]
     })
   );
@@ -5055,7 +5066,7 @@ function MenubarSubContent(_a) {
 }
 
 // components/ui/native-select.tsx
-var import_lucide_react17 = require("lucide-react");
+var import_lucide_react18 = require("lucide-react");
 var import_jsx_runtime37 = require("react/jsx-runtime");
 var sizeClasses = {
   sm: "type-native-select-sm h-8 py-1",
@@ -5084,7 +5095,7 @@ function NativeSelect(_a) {
             "data-slot": "native-select",
             "data-size": resolvedSize,
             className: cn(
-              "w-full min-w-0 appearance-none rounded-xs border border-border-default-default bg-background-primary-surface px-3 pr-9 text-text-prominent-default transition-[color,box-shadow] outline-none selection:bg-background-brand-default selection:text-text-on-brand-static disabled:pointer-events-none disabled:cursor-not-allowed disabled:[background-image:linear-gradient(var(--background-disabled-default),var(--background-disabled-default))]",
+              "w-full min-w-0 appearance-none rounded-xs border border-border-default-default bg-background-primary-surface px-3 pr-9 text-text-prominent-default transition-[color,box-shadow] outline-none disabled:text-text-disabled-default selection:bg-background-brand-default selection:text-text-on-brand-static disabled:pointer-events-none disabled:cursor-not-allowed disabled:[background-image:linear-gradient(var(--background-disabled-default),var(--background-disabled-default))]",
               "focus-visible:border-ring-focus-default focus-visible:ring-[3px] focus-visible:ring-ring-focus-soft",
               sizeClasses[resolvedSize],
               className
@@ -5092,9 +5103,9 @@ function NativeSelect(_a) {
           }, props)
         ),
         /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-          import_lucide_react17.ChevronDownIcon,
+          import_lucide_react18.ChevronDownIcon,
           {
-            className: "pointer-events-none absolute top-1/2 right-3.5 size-4 -translate-y-1/2 text-icon-subtle-default select-none",
+            className: "pointer-events-none absolute top-1/2 right-3.5 size-4 -translate-y-1/2 text-icon-subtle-default select-none group-has-[select:disabled]/native-select:text-icon-disabled-default",
             "aria-hidden": "true",
             "data-slot": "native-select-icon"
           }
@@ -5124,7 +5135,7 @@ function NativeSelectOptGroup(_a) {
 
 // components/ui/navigation-menu.tsx
 var import_class_variance_authority12 = require("class-variance-authority");
-var import_lucide_react18 = require("lucide-react");
+var import_lucide_react19 = require("lucide-react");
 var import_radix_ui21 = require("radix-ui");
 var import_jsx_runtime38 = require("react/jsx-runtime");
 function NavigationMenu(_a) {
@@ -5206,7 +5217,7 @@ function NavigationMenuTrigger(_a) {
         children,
         " ",
         /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-          import_lucide_react18.ChevronDownIcon,
+          import_lucide_react19.ChevronDownIcon,
           {
             className: "relative top-[1px] ml-1 size-3 transition duration-slow group-data-[state=open]:rotate-180",
             "aria-hidden": "true"
@@ -5298,7 +5309,7 @@ function NavigationMenuIndicator(_a) {
 
 // components/ui/numpad.tsx
 var React10 = __toESM(require("react"), 1);
-var import_lucide_react19 = require("lucide-react");
+var import_lucide_react20 = require("lucide-react");
 var import_jsx_runtime39 = require("react/jsx-runtime");
 var LONG_PRESS_MS = 600;
 function Numpad(_a) {
@@ -5381,7 +5392,7 @@ function Numpad(_a) {
               }
               onKeyPress == null ? void 0 : onKeyPress(key);
             },
-            children: key === "backspace" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_lucide_react19.Delete, { className: "size-5.5" }) : key
+            children: key === "backspace" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_lucide_react20.Delete, { className: "size-5.5" }) : key
           },
           key
         )
@@ -5664,7 +5675,7 @@ function Progress(_a) {
 }
 
 // components/ui/profile-photo.tsx
-var import_lucide_react20 = require("lucide-react");
+var import_lucide_react21 = require("lucide-react");
 var import_jsx_runtime42 = require("react/jsx-runtime");
 var BOX = 112;
 var PHOTO = 96;
@@ -5745,7 +5756,7 @@ function ProfilePhoto(_a) {
             "data-slot": "profile-photo-image",
             className: "absolute flex items-center justify-center overflow-hidden rounded-full bg-background-secondary-surface",
             style: { inset: INSET },
-            children: src ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("img", { src, alt, className: "size-full object-cover" }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react20.User, { className: "size-10 text-icon-subtle-default", strokeWidth: 1.5, "aria-hidden": "true" })
+            children: src ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("img", { src, alt, className: "size-full object-cover" }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react21.User, { className: "size-10 text-icon-subtle-default", strokeWidth: 1.5, "aria-hidden": "true" })
           }
         ),
         onPhotoChange ? (
@@ -5760,7 +5771,7 @@ function ProfilePhoto(_a) {
               onClick: onPhotoChange,
               "data-slot": "profile-photo-camera",
               className: "absolute right-0.5 bottom-5 rounded-full border-2 border-prominent after:absolute after:-inset-2.5 after:content-['']",
-              children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react20.Camera, {})
+              children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react21.Camera, {})
             }
           )
         ) : null,
@@ -5778,7 +5789,7 @@ function ProfilePhoto(_a) {
 }
 
 // components/ui/radio-group.tsx
-var import_lucide_react21 = require("lucide-react");
+var import_lucide_react22 = require("lucide-react");
 var import_radix_ui24 = require("radix-ui");
 var import_jsx_runtime43 = require("react/jsx-runtime");
 function RadioGroup(_a) {
@@ -5806,7 +5817,7 @@ function RadioGroupItem(_a) {
     __spreadProps(__spreadValues({
       "data-slot": "radio-group-item",
       className: cn(
-        "aspect-square size-4 shrink-0 rounded-full border border-border-default-default bg-background-primary-surface transition-[color,box-shadow] outline-none focus-visible:border-ring-focus-default focus-visible:ring-[3px] focus-visible:ring-ring-focus-strong data-[state=checked]:border-border-brand-selected disabled:cursor-not-allowed disabled:border-border-default-default disabled:text-text-disabled-default aria-invalid:border-border-error-default aria-invalid:ring-ring-error-soft",
+        "aspect-square size-4 shrink-0 rounded-full border border-border-default-default bg-background-primary-surface transition-[color,box-shadow] outline-none focus-visible:border-ring-focus-default focus-visible:ring-[3px] focus-visible:ring-ring-focus-strong data-[state=checked]:border-border-brand-selected disabled:cursor-not-allowed disabled:opacity-(--opacity-disabled) aria-invalid:border-border-error-default aria-invalid:ring-ring-error-soft",
         className
       )
     }, props), {
@@ -5815,7 +5826,7 @@ function RadioGroupItem(_a) {
         {
           "data-slot": "radio-group-indicator",
           className: "relative flex items-center justify-center",
-          children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react21.CircleIcon, { className: "absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-text-brand-selected text-background-brand-default" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react22.CircleIcon, { className: "absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-text-brand-selected text-background-brand-default" })
         }
       )
     })
@@ -5823,7 +5834,7 @@ function RadioGroupItem(_a) {
 }
 
 // components/ui/resizable.tsx
-var import_lucide_react22 = require("lucide-react");
+var import_lucide_react23 = require("lucide-react");
 var ResizablePrimitive = __toESM(require("react-resizable-panels"), 1);
 var import_jsx_runtime44 = require("react/jsx-runtime");
 function ResizablePanelGroup(_a) {
@@ -5864,7 +5875,7 @@ function ResizableHandle(_a) {
         className
       )
     }, props), {
-      children: withHandle && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "z-10 flex h-4 w-3 items-center justify-center rounded-xs border border-border-default-default bg-border-default-default text-icon-subtle-default", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react22.GripVerticalIcon, { className: "size-2.5" }) })
+      children: withHandle && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "z-10 flex h-4 w-3 items-center justify-center rounded-xs border border-border-default-default bg-border-default-default text-icon-subtle-default", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react23.GripVerticalIcon, { className: "size-2.5" }) })
     })
   );
 }
@@ -5933,7 +5944,7 @@ function ScrollBar(_a) {
 }
 
 // components/ui/sheet.tsx
-var import_lucide_react23 = require("lucide-react");
+var import_lucide_react24 = require("lucide-react");
 var import_radix_ui26 = require("radix-ui");
 var import_jsx_runtime46 = require("react/jsx-runtime");
 function Sheet(_a) {
@@ -6005,7 +6016,7 @@ function SheetContent(_a) {
               size: "sm",
               "aria-label": "Close",
               className: "absolute top-4 right-4",
-              children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react23.XIcon, { className: "size-4" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react24.XIcon, { className: "size-4" })
             }
           ) })
         ]
@@ -6065,7 +6076,7 @@ function SheetDescription(_a) {
 // components/ui/sidebar.tsx
 var React14 = __toESM(require("react"), 1);
 var import_class_variance_authority13 = require("class-variance-authority");
-var import_lucide_react24 = require("lucide-react");
+var import_lucide_react25 = require("lucide-react");
 var import_radix_ui28 = require("radix-ui");
 
 // hooks/use-mobile.ts
@@ -6406,7 +6417,7 @@ function SidebarTrigger(_a) {
       }
     }, props), {
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react24.PanelLeftIcon, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react25.PanelLeftIcon, {}),
         /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "sr-only", children: "Toggle Sidebar" })
       ]
     })
@@ -6911,7 +6922,7 @@ function Slider(_a) {
 
 // components/ui/toast.tsx
 var React16 = __toESM(require("react"), 1);
-var import_lucide_react25 = require("lucide-react");
+var import_lucide_react26 = require("lucide-react");
 var import_next_themes = require("next-themes");
 var import_sonner = require("sonner");
 var import_jsx_runtime51 = require("react/jsx-runtime");
@@ -6928,11 +6939,11 @@ var Toaster = (_a) => {
       visibleToasts: isMobile ? 1 : 3,
       duration: 4e3,
       icons: {
-        success: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_lucide_react25.CircleCheckIcon, { className: "size-4" }),
-        info: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_lucide_react25.InfoIcon, { className: "size-4" }),
-        warning: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_lucide_react25.TriangleAlertIcon, { className: "size-4" }),
-        error: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_lucide_react25.OctagonXIcon, { className: "size-4" }),
-        loading: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_lucide_react25.Loader2Icon, { className: "size-4 animate-spin" })
+        success: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_lucide_react26.CircleCheckIcon, { className: "size-4" }),
+        info: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_lucide_react26.InfoIcon, { className: "size-4" }),
+        warning: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_lucide_react26.TriangleAlertIcon, { className: "size-4" }),
+        error: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_lucide_react26.OctagonXIcon, { className: "size-4" }),
+        loading: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_lucide_react26.Loader2Icon, { className: "size-4 animate-spin" })
       },
       toastOptions: {
         classNames: {
@@ -7119,7 +7130,7 @@ function usePrefersReducedMotion() {
 
 // components/ui/slide-to-confirm.tsx
 var React17 = __toESM(require("react"), 1);
-var import_lucide_react26 = require("lucide-react");
+var import_lucide_react27 = require("lucide-react");
 var import_jsx_runtime52 = require("react/jsx-runtime");
 var CONFIRM_AT = 0.9;
 var HANDLE = 46;
@@ -7285,7 +7296,7 @@ function SlideToConfirm(_a) {
               // the keyboard, where dragX never moved.
               translate: `${confirmed ? maxTravel : dragX}px -50%`
             },
-            children: confirmed ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_lucide_react26.Check, { className: "size-4.5 [animation:slide-confirm-pop_var(--motion-pop)_var(--primitive-ease-overshoot)]" }) : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_lucide_react26.ArrowRight, { className: "size-4.5" })
+            children: confirmed ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_lucide_react27.Check, { className: "size-4.5 [animation:slide-confirm-pop_var(--motion-pop)_var(--primitive-ease-overshoot)]" }) : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_lucide_react27.ArrowRight, { className: "size-4.5" })
           }
         )
       ]
@@ -7295,7 +7306,7 @@ function SlideToConfirm(_a) {
 
 // components/ui/stepper.tsx
 var React18 = __toESM(require("react"), 1);
-var import_lucide_react27 = require("lucide-react");
+var import_lucide_react28 = require("lucide-react");
 var import_jsx_runtime53 = require("react/jsx-runtime");
 function clamp(value, min, max) {
   return Math.min(Math.max(value, min), max);
@@ -7339,11 +7350,18 @@ function Stepper({
     }
   }, [currentValue, decimalPlaces, isFocused]);
   function commit(next) {
-    const clamped = clamp(next, min, max);
-    const rounded = decimalPlaces > 0 ? parseFloat(clamped.toFixed(decimalPlaces)) : Math.round(clamped);
-    if (!isControlled) setInternalValue(rounded);
-    setDisplayString(formatValue(rounded, decimalPlaces));
-    onValueChange == null ? void 0 : onValueChange(rounded);
+    let committed;
+    if (next <= min) {
+      committed = min;
+    } else if (next >= max) {
+      committed = max;
+    } else {
+      const rounded = decimalPlaces > 0 ? parseFloat(next.toFixed(decimalPlaces)) : Math.round(next);
+      committed = clamp(rounded, min, max);
+    }
+    if (!isControlled) setInternalValue(committed);
+    setDisplayString(formatValue(committed, decimalPlaces));
+    onValueChange == null ? void 0 : onValueChange(committed);
   }
   function handleDecrement() {
     commit(currentValue - step);
@@ -7389,7 +7407,11 @@ function Stepper({
       "data-slot": "stepper",
       "data-disabled": disabled || void 0,
       className: cn(
-        "flex w-full items-center justify-between gap-4",
+        // Two rows: the label spans the control, then the -/value/+ row sits
+        // under it with a 4px gap. The label is deliberately NOT inside the
+        // value column — nesting it there makes the buttons centre against the
+        // label+value stack, which drops them below the number.
+        "flex w-full flex-col gap-1",
         // No opacity here on purpose. The +/- are Buttons and already carry
         // their own disabled treatment; dimming the wrapper too multiplied
         // with theirs (24% × 24% ≈ 6%) and made them all but invisible.
@@ -7398,63 +7420,72 @@ function Stepper({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-          Button,
+        label != null && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+          "span",
           {
-            type: "button",
-            variant: "frosted",
-            size: "icon-lg",
-            onClick: handleDecrement,
-            disabled: disabled || currentValue <= min,
-            "aria-label": "Decrease value",
-            children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_lucide_react27.Minus, {})
+            "data-slot": "stepper-label",
+            className: cn(
+              "type-stepper-stake-label text-center",
+              disabled ? "text-text-disabled-default" : "text-text-subtle-default"
+            ),
+            children: label
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "flex min-w-0 flex-col items-center", children: [
-          label != null && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-            "span",
-            {
-              className: cn(
-                "type-stepper-stake-label",
-                disabled ? "text-text-disabled-default" : "text-text-subtle-default"
-              ),
-              children: label
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-            "input",
-            {
-              type: "text",
-              inputMode: "decimal",
-              role: "spinbutton",
-              "aria-valuemin": min === -Infinity ? void 0 : min,
-              "aria-valuemax": max === Infinity ? void 0 : max,
-              "aria-valuenow": currentValue,
-              "aria-label": ariaLabel,
-              value: displayString,
-              onChange: handleInputChange,
-              onBlur: handleBlur,
-              onFocus: handleFocus,
-              onKeyDown: handleKeyDown,
-              disabled,
-              placeholder,
-              id,
-              name,
-              size: Math.max(displayString.length, 1),
-              className: "type-stepper-stake-amount w-full min-w-0 border-0 bg-transparent text-center text-text-prominent-default outline-none disabled:text-text-disabled-default [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-          Button,
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+          "div",
           {
-            type: "button",
-            variant: "frosted",
-            size: "icon-lg",
-            onClick: handleIncrement,
-            disabled: disabled || currentValue >= max,
-            "aria-label": "Increase value",
-            children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_lucide_react27.Plus, {})
+            "data-slot": "stepper-row",
+            className: "flex w-full items-center justify-between gap-4",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+                Button,
+                {
+                  type: "button",
+                  variant: "frosted",
+                  size: "icon-lg",
+                  onClick: handleDecrement,
+                  disabled: disabled || currentValue <= min,
+                  "aria-label": "Decrease value",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_lucide_react28.Minus, {})
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+                "input",
+                {
+                  type: "text",
+                  inputMode: "decimal",
+                  role: "spinbutton",
+                  "aria-valuemin": min === -Infinity ? void 0 : min,
+                  "aria-valuemax": max === Infinity ? void 0 : max,
+                  "aria-valuenow": currentValue,
+                  "aria-label": ariaLabel,
+                  value: displayString,
+                  onChange: handleInputChange,
+                  onBlur: handleBlur,
+                  onFocus: handleFocus,
+                  onKeyDown: handleKeyDown,
+                  disabled,
+                  placeholder,
+                  id,
+                  name,
+                  size: Math.max(displayString.length, 1),
+                  "data-slot": "stepper-value",
+                  className: "type-stepper-stake-amount min-w-0 flex-1 border-0 bg-transparent text-center text-text-prominent-default outline-none disabled:text-text-disabled-default [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+                Button,
+                {
+                  type: "button",
+                  variant: "frosted",
+                  size: "icon-lg",
+                  onClick: handleIncrement,
+                  disabled: disabled || currentValue >= max,
+                  "aria-label": "Increase value",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_lucide_react28.Plus, {})
+                }
+              )
+            ]
           }
         )
       ]
@@ -7464,7 +7495,7 @@ function Stepper({
 
 // components/ui/steps.tsx
 var React19 = __toESM(require("react"), 1);
-var import_lucide_react28 = require("lucide-react");
+var import_lucide_react29 = require("lucide-react");
 var import_jsx_runtime54 = require("react/jsx-runtime");
 var StepsContext = React19.createContext({ shape: "circle", orientation: "horizontal", size: "md" });
 function Steps(_a) {
@@ -7544,7 +7575,7 @@ function Step(_a) {
         "[&_svg]:pointer-events-none [&_svg]:shrink-0",
         sm ? "[&_svg:not([class*='size-'])]:size-3.5" : "[&_svg:not([class*='size-'])]:size-4"
       ),
-      children: state === "done" ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react28.Check, {}) : icon != null ? icon : index
+      children: state === "done" ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react29.Check, {}) : icon != null ? icon : index
     }
   );
   if (horizontal) {
@@ -7684,7 +7715,7 @@ function Switch(_a) {
       "data-slot": "switch",
       "data-size": size,
       className: cn(
-        "peer group/switch inline-flex shrink-0 items-center rounded-full border border-transparent p-[3px] transition-all outline-none focus-visible:border-ring-focus-default focus-visible:ring-[3px] focus-visible:ring-ring-focus-strong disabled:cursor-not-allowed disabled:border-border-default-default disabled:text-text-disabled-default data-[size=default]:h-6 data-[size=default]:w-11 data-[size=sm]:h-5 data-[size=sm]:w-9 data-[state=checked]:bg-background-brand-default data-[state=unchecked]:bg-border-default-default",
+        "peer group/switch inline-flex shrink-0 items-center rounded-full border border-transparent p-[3px] transition-all outline-none focus-visible:border-ring-focus-default focus-visible:ring-[3px] focus-visible:ring-ring-focus-strong disabled:cursor-not-allowed disabled:opacity-(--opacity-disabled) data-[size=default]:h-6 data-[size=default]:w-11 data-[size=sm]:h-5 data-[size=sm]:w-9 data-[state=checked]:bg-background-brand-default data-[state=unchecked]:bg-border-default-default",
         className
       )
     }, props), {
@@ -7920,7 +7951,7 @@ var import_class_variance_authority15 = require("class-variance-authority");
 var import_radix_ui32 = require("radix-ui");
 var import_jsx_runtime58 = require("react/jsx-runtime");
 var toggleVariants = (0, import_class_variance_authority15.cva)(
-  "type-toggle inline-flex items-center justify-center gap-2 rounded-md border border-border-default-default bg-background-primary-surface text-text-prominent-default whitespace-nowrap transition-[color,background-color,border-color,box-shadow] outline-none hover:bg-background-secondary-surface active:bg-background-secondary-wash focus-visible:border-ring-focus-default focus-visible:ring-[3px] focus-visible:ring-ring-focus-strong disabled:pointer-events-none disabled:border-border-default-default disabled:text-text-disabled-default aria-invalid:border-border-error-default aria-invalid:ring-ring-error-soft data-[state=on]:border-transparent data-[state=on]:bg-background-brand-default data-[state=on]:text-text-on-brand-static [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  "type-toggle inline-flex items-center justify-center gap-2 rounded-md border border-border-default-default bg-background-primary-surface text-text-prominent-default whitespace-nowrap transition-[color,background-color,border-color,box-shadow] outline-none hover:bg-background-secondary-surface active:bg-background-secondary-wash focus-visible:border-ring-focus-default focus-visible:ring-[3px] focus-visible:ring-ring-focus-strong disabled:pointer-events-none disabled:opacity-(--opacity-disabled) aria-invalid:border-border-error-default aria-invalid:ring-ring-error-soft data-[state=on]:border-transparent data-[state=on]:bg-background-brand-default data-[state=on]:text-text-on-brand-static [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       size: {
@@ -8103,7 +8134,7 @@ function ResultDialog({
 }
 
 // components/blocks/header-navigation-block.tsx
-var import_lucide_react29 = require("lucide-react");
+var import_lucide_react30 = require("lucide-react");
 var import_jsx_runtime61 = require("react/jsx-runtime");
 function HeaderNavigationBlock({
   onBack,
@@ -8114,7 +8145,7 @@ function HeaderNavigationBlock({
 }) {
   var _a;
   return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "w-full min-w-80 max-w-layout-diagram-small rounded-md overflow-hidden bg-prominent", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("header", { className: "flex items-center gap-2 border-b border-border-subtle bg-prominent px-layout-margin-inline py-3", children: [
-    onBack && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(NavigationButton, { type: "button", size: "md", "aria-label": "Back", onClick: onBack, children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_lucide_react29.ArrowLeft, { className: "size-5" }) }),
+    onBack && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(NavigationButton, { type: "button", size: "md", "aria-label": "Back", onClick: onBack, children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_lucide_react30.ArrowLeft, { className: "size-5" }) }),
     /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "flex min-w-0 flex-1 items-center justify-center gap-2", children: [
       badge && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Badge, { variant: (_a = badge.variant) != null ? _a : "tint-warning", size: "sm", children: badge.label }),
       /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "font-display font-semibold tabular-nums text-on-prominent", children: balance.amount }),
@@ -8135,7 +8166,7 @@ function HistoryButton({
   const label = show ? count > 99 ? "99+" : String(count) : null;
   const ariaLabel = ariaLabelOverride != null ? ariaLabelOverride : show ? `Open history, ${count} new` : "Open history";
   return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "relative inline-flex", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(NavigationButton, { type: "button", size: "md", "aria-label": ariaLabel, onClick, children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_lucide_react29.History, { className: "size-5" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(NavigationButton, { type: "button", size: "md", "aria-label": ariaLabel, onClick, children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_lucide_react30.History, { className: "size-5" }) }),
     show && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
       "span",
       {
@@ -8148,7 +8179,7 @@ function HistoryButton({
 }
 
 // components/blocks/faq-block.tsx
-var import_lucide_react30 = require("lucide-react");
+var import_lucide_react31 = require("lucide-react");
 var import_radix_ui34 = require("radix-ui");
 var import_jsx_runtime62 = require("react/jsx-runtime");
 function FAQBlock({
@@ -8189,7 +8220,7 @@ function FAQBlock({
                     "shrink-0 size-7 flex items-center justify-center rounded-sm border transition-all duration-200",
                     "group-data-[state=open]:bg-primary group-data-[state=open]:border-primary",
                     "group-data-[state=closed]:bg-transparent group-data-[state=closed]:border-border-subtle"
-                  ), children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_lucide_react30.Plus, { className: cn(
+                  ), children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_lucide_react31.Plus, { className: cn(
                     "size-4 transition-all duration-200",
                     "group-data-[state=open]:rotate-45 group-data-[state=open]:text-on-primary",
                     "group-data-[state=closed]:text-on-prominent"
@@ -8238,7 +8269,7 @@ function FAQBlock({
 }
 
 // components/blocks/hero-block.tsx
-var import_lucide_react31 = require("lucide-react");
+var import_lucide_react32 = require("lucide-react");
 var import_jsx_runtime63 = require("react/jsx-runtime");
 function HeroBlock({
   layout = "centered",
@@ -8258,7 +8289,7 @@ function HeroBlock({
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(Button, { size: "sm", onClick: primaryCta.onClick, children: [
         primaryCta.label,
-        primaryCta.trailingArrow !== false && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_lucide_react31.ArrowRight, { className: "size-4" })
+        primaryCta.trailingArrow !== false && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_lucide_react32.ArrowRight, { className: "size-4" })
       ] })
     ] }) });
   }
@@ -8294,7 +8325,7 @@ function TaglinePill({
       label,
       suffix && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "text-on-subtle", children: ` \xB7 ${suffix}` })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_lucide_react31.ArrowUpRight, { className: "size-4 text-on-subtle shrink-0", "aria-hidden": "true" })
+    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_lucide_react32.ArrowUpRight, { className: "size-4 text-on-subtle shrink-0", "aria-hidden": "true" })
   ] });
 }
 
@@ -8384,7 +8415,7 @@ function ProviderButton({ provider }) {
 
 // components/blocks/navbar-block.tsx
 var React22 = __toESM(require("react"), 1);
-var import_lucide_react32 = require("lucide-react");
+var import_lucide_react33 = require("lucide-react");
 var import_jsx_runtime65 = require("react/jsx-runtime");
 function NavBarBlock({ brand, links, signIn, signUp }) {
   var _a, _b, _c, _d;
@@ -8423,7 +8454,7 @@ function NavBarBlock({ brand, links, signIn, signUp }) {
           "aria-expanded": mobileMenuOpen,
           className: "min-[600px]:hidden",
           onClick: () => setMobileMenuOpen((prev) => !prev),
-          children: mobileMenuOpen ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_lucide_react32.X, { className: "size-4" }) : /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_lucide_react32.Menu, { className: "size-4" })
+          children: mobileMenuOpen ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_lucide_react33.X, { className: "size-4" }) : /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_lucide_react33.Menu, { className: "size-4" })
         }
       )
     ] }),
@@ -8448,7 +8479,7 @@ function NavBarBlock({ brand, links, signIn, signUp }) {
 }
 
 // components/blocks/open-positions-block.tsx
-var import_lucide_react33 = require("lucide-react");
+var import_lucide_react34 = require("lucide-react");
 var import_jsx_runtime66 = require("react/jsx-runtime");
 function OpenPositionsBlock({
   trigger,
@@ -8465,7 +8496,7 @@ function OpenPositionsBlock({
       /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(DrawerContent, { className: "p-0 flex flex-col", children: [
         /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(DrawerHeader, { className: "flex-row items-center justify-between px-4 py-3 shrink-0 text-left", children: [
           /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(DrawerTitle, { className: "text-base font-semibold font-display text-on-prominent", children: sheetTitle }),
-          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(DrawerClose, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(NavigationButton, { size: "sm", "aria-label": "Close", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react33.X, {}) }) })
+          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(DrawerClose, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(NavigationButton, { size: "sm", "aria-label": "Close", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react34.X, {}) }) })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Separator, {}),
         body
@@ -8477,7 +8508,7 @@ function OpenPositionsBlock({
     /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(SheetContent, { side: "right", showCloseButton: false, className: "p-0 flex flex-col w-80 sm:max-w-xs", children: [
       /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(SheetHeader, { className: "flex-row items-center justify-between px-4 py-3 shrink-0", children: [
         /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(SheetTitle, { className: "text-base font-semibold font-display text-on-prominent", children: sheetTitle }),
-        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(SheetClose, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(NavigationButton, { size: "sm", "aria-label": "Close", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react33.X, {}) }) })
+        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(SheetClose, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(NavigationButton, { size: "sm", "aria-label": "Close", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react34.X, {}) }) })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Separator, {}),
       body
@@ -8544,7 +8575,7 @@ function PnlMeta({ pnl, win, stake }) {
 }
 function DefaultEmptyState({ onViewHistory }) {
   return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Empty, { className: "flex min-h-0 flex-1 flex-col justify-center border-none rounded-none p-6 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(EmptyHeader, { className: "gap-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(EmptyMedia, { children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react33.History, { className: "size-8 text-on-subtle" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(EmptyMedia, { children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react34.History, { className: "size-8 text-on-subtle" }) }),
     /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(EmptyTitle, { className: "h6 text-on-subtle", children: "No trades yet." }),
     /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Button, { variant: "tertiary", size: "md", onClick: onViewHistory, children: "View trade history" })
   ] }) });
@@ -8617,7 +8648,6 @@ function useSmoothProgress({
   const label = done && progress >= 99.5 ? readyLabel : (_b = (_a = checkpoints[idx]) == null ? void 0 : _a.label) != null ? _b : readyLabel;
   return { progress, label, delayed, complete: done && progress >= 100 };
 }
-var MONOGRAM_D = "M513.51,265.27l12.26-58.98H183.8l-12.26,58.98h105.29l-46.92,225.76,29.68-.85c1.65-.05,40.84-1.34,87-18.36,64.47-23.76,111.8-66.23,136.88-122.83l15.77-35.6h-139.02l-12.26,58.98h58.44l-6.31,6.26c-3.16,3.14-6.56,6.2-10.11,9.12-14.15,11.63-31.27,21.29-50.86,28.7-10.01,3.79-20.64,6.97-31.57,9.45l-5.55,1.26,33.65-161.89h177.86Z";
 function GameLoadingBlock({
   progress = 0,
   label = "",
@@ -8625,6 +8655,7 @@ function GameLoadingBlock({
   exiting = false,
   onExitEnd,
   contained = false,
+  logoSrc,
   backgroundImageUrl,
   className
 }) {
@@ -8638,13 +8669,15 @@ function GameLoadingBlock({
   React23.useEffect(() => {
     if (!exiting) return;
     const raf = requestAnimationFrame(() => setGo(true));
-    const timer = setTimeout(() => onExitEnd == null ? void 0 : onExitEnd(), reduced ? 240 : 520);
+    const timer = setTimeout(() => onExitEnd == null ? void 0 : onExitEnd(), reduced ? 240 : 700);
     return () => {
       cancelAnimationFrame(raf);
       clearTimeout(timer);
     };
   }, [exiting, reduced, onExitEnd]);
   const isAbsolute = exiting || contained;
+  const punched = Boolean(logoSrc);
+  const animate = exiting && go && !reduced;
   return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
     "div",
     {
@@ -8653,39 +8686,51 @@ function GameLoadingBlock({
       "aria-label": "Loading game",
       "data-slot": "game-loading-block",
       className: cn(
-        "z-50 inset-0 flex flex-col items-center justify-center gap-8 overflow-hidden",
+        "z-50 inset-0 overflow-hidden",
         isAbsolute ? "absolute" : "fixed",
-        // Token-derived dotted brand backdrop; skipped when a real image is passed.
-        !backgroundImageUrl && "game-loader-backdrop",
-        backgroundImageUrl && "bg-primary bg-cover bg-center bg-no-repeat",
-        exiting && (reduced ? "transition-opacity duration-200" : "transition-opacity duration-[180ms] delay-[260ms]"),
-        exiting && go ? "opacity-0" : "opacity-100",
+        // Reduced motion, and the no-mark fallback, fade the whole layer.
+        exiting && (reduced || !punched) && "transition-opacity duration-200",
+        exiting && go && (reduced || !punched) ? "opacity-0" : "opacity-100",
         className
       ),
-      style: backgroundImageUrl ? { backgroundImage: `url(${backgroundImageUrl})` } : void 0,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
-          "svg",
+          "div",
+          {
+            "aria-hidden": "true",
+            "data-slot": "game-loading-backdrop",
+            className: cn(
+              "game-loader-field",
+              punched && "game-loader-punch",
+              animate && punched && "game-loader-field-exit"
+            ),
+            style: __spreadValues(__spreadValues({}, logoSrc ? { "--game-loader-mark": `url(${logoSrc})` } : null), backgroundImageUrl ? {
+              backgroundImage: `url(${backgroundImageUrl})`,
+              backgroundSize: "cover",
+              backgroundPosition: "center",
+              backgroundRepeat: "no-repeat"
+            } : null)
+          }
+        ),
+        logoSrc && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+          "img",
           {
-            width: "120",
-            height: "120",
-            viewBox: "0 0 697.31 697.31",
-            xmlns: "http://www.w3.org/2000/svg",
+            src: logoSrc,
+            alt: "",
             "aria-hidden": "true",
-            className: cn("game-loader-mark fill-on-primary", exiting && go && !reduced && "game-loader-mark-exit"),
-            children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("path", { d: MONOGRAM_D })
+            className: cn("game-loader-mark", animate && "game-loader-mark-exit")
           }
         ),
-        !exiting && /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex w-[200px] flex-col items-start gap-3.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "relative h-2 w-full overflow-hidden rounded-xs bg-on-primary/25", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+        !exiting && /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "absolute bottom-10 left-1/2 flex w-[200px] -translate-x-1/2 flex-col items-start gap-3.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "relative h-2 w-full overflow-hidden rounded-xs bg-background-secondary-surface", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
             "div",
             {
-              className: "absolute inset-y-0 left-0 overflow-hidden rounded-xs bg-on-primary",
+              className: "absolute inset-y-0 left-0 overflow-hidden rounded-xs bg-background-brand-default",
               style: { width: `${progress}%` },
               children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { "aria-hidden": "true", className: "game-loader-shimmer absolute inset-y-0 left-[-60%] w-[60%]" })
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "caption text-on-primary/90", children: delayed ? "Taking longer than usual\u2026" : label })
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "caption text-text-subtle-default", children: delayed ? "Taking longer than usual\u2026" : label })
         ] })
       ]
     }