@trading-game/design-intelligence-layer 0.9.0 → 0.9.2

package/AGENTS.md

@@ -23,14 +23,14 @@ node_modules/@trading-game/design-intelligence-layer/guides/accessibility-standa
 node_modules/@trading-game/design-intelligence-layer/guides/personas/trading-game-player-field-guide.md
 ```
 
-**Tone of voice** — the creative foundation, campaign territories, and the mirror test for all player-facing copy:
+**Brand voice** — channel-specific voice application, banned phrases, vocabulary reference, and formatting rules for all player-facing copy:
 ```
-node_modules/@trading-game/design-intelligence-layer/guides/tone-of-voice/trading-game-tone-of-voice-and-campaign-brief.md
+node_modules/@trading-game/design-intelligence-layer/guides/brand-voice/trading-game-brand-voice.md
 ```
 
 All four files apply to all projects built with this package — landing pages, product screens, and games.
 
-Run the checklists at the end of the design principles and accessibility standards files before considering any screen complete. Use the personas and tone of voice to guide all player-facing copy.
+Run the checklists at the end of the design principles and accessibility standards files before considering any screen complete. Use the personas and brand voice to guide all player-facing copy.
 
 ---
 
@@ -67,5 +67,5 @@ cp node_modules/@trading-game/design-intelligence-layer/guides/rules/design-syst
 - Design principles: `node_modules/@trading-game/design-intelligence-layer/guides/design-principles/trading-game-design-principles.md`
 - Accessibility standards: `node_modules/@trading-game/design-intelligence-layer/guides/accessibility-standards/trading-game-accessibility-standards.md`
 - Personas: `node_modules/@trading-game/design-intelligence-layer/guides/personas/trading-game-player-field-guide.md`
-- Tone of voice: `node_modules/@trading-game/design-intelligence-layer/guides/tone-of-voice/trading-game-tone-of-voice-and-campaign-brief.md`
+- Brand voice: `node_modules/@trading-game/design-intelligence-layer/guides/brand-voice/trading-game-brand-voice.md`
 - Full agent rules: `node_modules/@trading-game/design-intelligence-layer/guides/rules/design-system-consuming-project.mdc`

package/README.md

@@ -273,7 +273,7 @@ All tokens are CSS custom properties, loaded automatically via `@trading-game/de
 | `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-muted` | dark grey | Low-emphasis text |
+
 | `text-primary` | `#2323FF` | Brand blue inline text |
 | `text-semantic-win` | green | Profit / positive text |
 | `text-semantic-loss` | red | Loss / negative text |
@@ -429,12 +429,12 @@ node_modules/@trading-game/design-intelligence-layer/guides/accessibility-standa
 node_modules/@trading-game/design-intelligence-layer/guides/personas/trading-game-player-field-guide.md
 ```
 
-**Tone of voice file** (bundled in the package):
+**Brand voice** (bundled in the package):
 ```
-node_modules/@trading-game/design-intelligence-layer/guides/tone-of-voice/trading-game-tone-of-voice-and-campaign-brief.md
+node_modules/@trading-game/design-intelligence-layer/guides/brand-voice/trading-game-brand-voice.md
 ```
 
-All four files apply to all projects built with this package — landing pages, product screens, and games. Every AI agent must read all of them before starting any build. Run the design principles and accessibility checklists before completing any screen. Use the personas and tone of voice to guide all player-facing copy.
+All four files apply to all projects built with this package — landing pages, product screens, and games. Every AI agent must read all of them before starting any build. Run the design principles and accessibility checklists before completing any screen. Use the personas and brand voice to guide all player-facing copy.
 
 ### Cursor
 
@@ -458,7 +458,7 @@ This project uses @trading-game/design-intelligence-layer. Before writing any UI
 1. Read node_modules/@trading-game/design-intelligence-layer/guides/design-principles/trading-game-design-principles.md — apply the 8 principles and run the 7-point checklist on every screen
 2. Read node_modules/@trading-game/design-intelligence-layer/guides/accessibility-standards/trading-game-accessibility-standards.md — apply WCAG 2.1 AA standards and run the 9-point accessibility checklist on every screen
 3. Read node_modules/@trading-game/design-intelligence-layer/guides/personas/trading-game-player-field-guide.md — understand the 3 player modes (Edge Seeker, System Runner, Public Predictor) that shape all copy and UX
-4. Read node_modules/@trading-game/design-intelligence-layer/guides/tone-of-voice/trading-game-tone-of-voice-and-campaign-brief.md — apply the voice, campaign territories, and mirror test for all player-facing copy
+4. Read node_modules/@trading-game/design-intelligence-layer/guides/brand-voice/trading-game-brand-voice.md — apply the brand voice: channel-specific voice, banned phrases, vocabulary, and formatting rules for all player-facing copy
 5. Check if the component exists in the package — import it, don't re-implement
 6. Use only design token classes (bg-prominent, text-on-prominent, border-border-subtle, etc.) — no hardcoded hex or raw Tailwind palette colors
 7. Do not install lucide-react, tailwindcss, or other bundled dependencies separately

package/dist/index.cjs

@@ -339,6 +339,7 @@ __export(index_exports, {
   Skeleton: () => Skeleton,
   Slider: () => Slider,
   Spinner: () => Spinner,
+  Stepper: () => Stepper,
   Switch: () => Switch,
   Table: () => Table,
   TableBody: () => TableBody,
@@ -524,7 +525,7 @@ var import_class_variance_authority2 = require("class-variance-authority");
 var import_radix_ui2 = require("radix-ui");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var buttonVariants = (0, import_class_variance_authority2.cva)(
-  "inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 active:opacity-60 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 font-display font-bold",
+  "inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 active:opacity-60 disabled:pointer-events-none disabled:opacity-24 aria-invalid:border-destructive aria-invalid:ring-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 font-display font-bold",
   {
     variants: {
       variant: {
@@ -573,7 +574,7 @@ function Button(_a) {
       "data-variant": variant,
       "data-size": size,
       "data-loading": loading || void 0,
-      className: cn(buttonVariants({ variant, size, className }), loading && "pointer-events-none opacity-50"),
+      className: cn(buttonVariants({ variant, size, className }), loading && "pointer-events-none opacity-24"),
       "aria-busy": loading || void 0
     }, props)
   );
@@ -1820,7 +1821,7 @@ function Input(_a) {
       type,
       "data-slot": "input",
       className: cn(
-        "h-9 w-full min-w-0 rounded-sm border border-border-subtle bg-white/5 px-3 py-1 text-base text-on-prominent font-body shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-on-prominent-static-inverse file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-on-prominent placeholder:text-on-muted disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "h-9 w-full min-w-0 rounded-sm border border-border-subtle bg-white/5 px-3 py-1 text-base text-on-prominent font-body shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-on-prominent-static-inverse file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-on-prominent placeholder:text-on-subtle disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
         "focus-visible:border-primary focus-visible:ring-[3px] focus-visible:ring-primary/[0.08]",
         className
       )
@@ -1837,7 +1838,7 @@ function Textarea(_a) {
     __spreadValues({
       "data-slot": "textarea",
       className: cn(
-        "flex field-sizing-content min-h-16 w-full rounded-sm border border-border-subtle bg-white/5 px-3 py-2 text-base text-on-prominent font-body shadow-xs transition-[color,box-shadow] outline-none placeholder:text-on-muted focus-visible:border-primary focus-visible:ring-[3px] focus-visible:ring-primary/[0.08] disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 md:text-sm",
+        "flex field-sizing-content min-h-16 w-full rounded-sm border border-border-subtle bg-white/5 px-3 py-2 text-base text-on-prominent font-body shadow-xs transition-[color,box-shadow] outline-none placeholder:text-on-subtle focus-visible:border-primary focus-visible:ring-[3px] focus-visible:ring-primary/[0.08] disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 md:text-sm",
         className
       )
     }, props)
@@ -5999,12 +6000,157 @@ var Toaster = (_a) => {
   );
 };
 
-// components/ui/spinner.tsx
+// components/ui/stepper.tsx
+var React10 = __toESM(require("react"), 1);
+var import_lucide_react22 = require("lucide-react");
 var import_jsx_runtime51 = require("react/jsx-runtime");
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function getDecimalPlaces(n) {
+  const s = String(n);
+  const i = s.indexOf(".");
+  return i === -1 ? 0 : s.length - i - 1;
+}
+function formatValue(value, decimalPlaces) {
+  return decimalPlaces > 0 ? value.toFixed(decimalPlaces) : String(value);
+}
+function Stepper({
+  value: controlledValue,
+  defaultValue = 0,
+  onValueChange,
+  min = -Infinity,
+  max = Infinity,
+  step = 1,
+  disabled,
+  placeholder,
+  className,
+  id,
+  name,
+  "aria-label": ariaLabel
+}) {
+  const isControlled = controlledValue !== void 0;
+  const [internalValue, setInternalValue] = React10.useState(
+    clamp(defaultValue, min, max)
+  );
+  const currentValue = isControlled ? controlledValue : internalValue;
+  const decimalPlaces = getDecimalPlaces(step);
+  const [displayString, setDisplayString] = React10.useState(
+    formatValue(currentValue, decimalPlaces)
+  );
+  const [isFocused, setIsFocused] = React10.useState(false);
+  React10.useEffect(() => {
+    if (!isFocused) {
+      setDisplayString(formatValue(currentValue, decimalPlaces));
+    }
+  }, [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);
+  }
+  function handleDecrement() {
+    commit(currentValue - step);
+  }
+  function handleIncrement() {
+    commit(currentValue + step);
+  }
+  function handleInputChange(e) {
+    setDisplayString(e.target.value);
+  }
+  function handleBlur() {
+    setIsFocused(false);
+    const parsed = parseFloat(displayString);
+    if (Number.isNaN(parsed)) {
+      setDisplayString(formatValue(currentValue, decimalPlaces));
+    } else {
+      commit(parsed);
+    }
+  }
+  function handleFocus() {
+    setIsFocused(true);
+  }
+  function handleKeyDown(e) {
+    if (e.key === "ArrowUp") {
+      e.preventDefault();
+      handleIncrement();
+    } else if (e.key === "ArrowDown") {
+      e.preventDefault();
+      handleDecrement();
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      const parsed = parseFloat(displayString);
+      if (Number.isNaN(parsed)) {
+        setDisplayString(formatValue(currentValue, decimalPlaces));
+      } else {
+        commit(parsed);
+      }
+    }
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+    InputGroup,
+    {
+      "data-slot": "stepper",
+      "data-disabled": disabled || void 0,
+      className: cn("w-32", className),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(InputGroupAddon, { align: "inline-start", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+          InputGroupButton,
+          {
+            size: "icon-xs",
+            variant: "secondary",
+            onClick: handleDecrement,
+            disabled: disabled || currentValue <= min,
+            "aria-label": "Decrease value",
+            children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_lucide_react22.Minus, { className: "size-3.5" })
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+          InputGroupInput,
+          {
+            type: "text",
+            inputMode: "numeric",
+            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,
+            className: "text-center [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(InputGroupAddon, { align: "inline-end", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+          InputGroupButton,
+          {
+            size: "icon-xs",
+            variant: "secondary",
+            onClick: handleIncrement,
+            disabled: disabled || currentValue >= max,
+            "aria-label": "Increase value",
+            children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_lucide_react22.Plus, { className: "size-3.5" })
+          }
+        ) })
+      ]
+    }
+  );
+}
+
+// components/ui/spinner.tsx
+var import_jsx_runtime52 = require("react/jsx-runtime");
 var PILL_COUNT = 8;
 function Spinner(_a) {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
     "div",
     __spreadProps(__spreadValues({
       role: "status",
@@ -6012,13 +6158,13 @@ function Spinner(_a) {
       className: cn("relative inline-block size-4 text-current", className)
     }, props), {
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("style", { children: `
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("style", { children: `
         @keyframes spinner-fade {
           0% { opacity: 1; }
           100% { opacity: 0.15; }
         }
       ` }),
-        Array.from({ length: PILL_COUNT }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+        Array.from({ length: PILL_COUNT }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
           "span",
           {
             style: {
@@ -6043,7 +6189,7 @@ function Spinner(_a) {
 
 // components/ui/switch.tsx
 var import_radix_ui31 = require("radix-ui");
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 function Switch(_a) {
   var _b = _a, {
     className,
@@ -6052,7 +6198,7 @@ function Switch(_a) {
     "className",
     "size"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
     import_radix_ui31.Switch.Root,
     __spreadProps(__spreadValues({
       "data-slot": "switch",
@@ -6062,7 +6208,7 @@ function Switch(_a) {
         className
       )
     }, props), {
-      children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
         import_radix_ui31.Switch.Thumb,
         {
           "data-slot": "switch-thumb",
@@ -6076,15 +6222,15 @@ function Switch(_a) {
 }
 
 // components/ui/table.tsx
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 function Table(_a) {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
     "div",
     {
       "data-slot": "table-container",
       className: "relative w-full overflow-x-auto",
-      children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
         "table",
         __spreadValues({
           "data-slot": "table",
@@ -6096,7 +6242,7 @@ function Table(_a) {
 }
 function TableHeader(_a) {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
     "thead",
     __spreadValues({
       "data-slot": "table-header",
@@ -6106,7 +6252,7 @@ function TableHeader(_a) {
 }
 function TableBody(_a) {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
     "tbody",
     __spreadValues({
       "data-slot": "table-body",
@@ -6116,7 +6262,7 @@ function TableBody(_a) {
 }
 function TableFooter(_a) {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
     "tfoot",
     __spreadValues({
       "data-slot": "table-footer",
@@ -6129,7 +6275,7 @@ function TableFooter(_a) {
 }
 function TableRow(_a) {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
     "tr",
     __spreadValues({
       "data-slot": "table-row",
@@ -6142,7 +6288,7 @@ function TableRow(_a) {
 }
 function TableHead(_a) {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
     "th",
     __spreadValues({
       "data-slot": "table-head",
@@ -6155,7 +6301,7 @@ function TableHead(_a) {
 }
 function TableCell(_a) {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
     "td",
     __spreadValues({
       "data-slot": "table-cell",
@@ -6172,7 +6318,7 @@ function TableCaption(_a) {
   } = _b, props = __objRest(_b, [
     "className"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
     "caption",
     __spreadValues({
       "data-slot": "table-caption",
@@ -6184,7 +6330,7 @@ function TableCaption(_a) {
 // components/ui/tabs.tsx
 var import_class_variance_authority11 = require("class-variance-authority");
 var import_radix_ui32 = require("radix-ui");
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 function Tabs(_a) {
   var _b = _a, {
     className,
@@ -6193,7 +6339,7 @@ function Tabs(_a) {
     "className",
     "orientation"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
     import_radix_ui32.Tabs.Root,
     __spreadValues({
       "data-slot": "tabs",
@@ -6236,7 +6382,7 @@ function TabsList(_a) {
     "variant",
     "size"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
     import_radix_ui32.Tabs.List,
     __spreadValues({
       "data-slot": "tabs-list",
@@ -6254,7 +6400,7 @@ function TabsTrigger(_a) {
     "className",
     "iconPosition"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
     import_radix_ui32.Tabs.Trigger,
     __spreadValues({
       "data-slot": "tabs-trigger",
@@ -6280,7 +6426,7 @@ function TabsContent(_a) {
   } = _b, props = __objRest(_b, [
     "className"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
     import_radix_ui32.Tabs.Content,
     __spreadValues({
       "data-slot": "tabs-content",
@@ -6290,8 +6436,8 @@ function TabsContent(_a) {
 }
 
 // components/ui/ticket-card.tsx
-var import_lucide_react22 = require("lucide-react");
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_lucide_react23 = require("lucide-react");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 function TicketCard({
   icon,
   label,
@@ -6302,7 +6448,7 @@ function TicketCard({
   stubDisabled = false,
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
     "div",
     {
       "data-slot": "ticket-card",
@@ -6312,27 +6458,27 @@ function TicketCard({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "relative flex min-w-0 flex-1 items-center gap-3 px-4 py-4 sm:gap-4 sm:px-5", children: [
-          icon && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "flex shrink-0 size-11 rounded-full border-2 border-primary items-center justify-center text-primary sm:size-12", children: icon }),
-          /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5 overflow-hidden", children: [
-            label && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "text-on-subtle uppercase tracking-widest text-xs font-semibold", children: label }),
-            value && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "truncate text-lg font-bold text-on-prominent sm:text-xl", children: value })
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "relative flex min-w-0 flex-1 items-center gap-3 px-4 py-4 sm:gap-4 sm:px-5", children: [
+          icon && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "flex shrink-0 size-11 rounded-full border-2 border-primary items-center justify-center text-primary sm:size-12", children: icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5 overflow-hidden", children: [
+            label && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "text-on-subtle uppercase tracking-widest text-xs font-semibold", children: label }),
+            value && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "truncate text-lg font-bold text-on-prominent sm:text-xl", children: value })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
             "div",
             {
               "aria-hidden": true,
               className: "pointer-events-none absolute right-0 top-0 z-10 size-5 -translate-y-1/2 translate-x-1/2 rounded-full bg-prominent"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
             "div",
             {
               "aria-hidden": true,
               className: "pointer-events-none absolute bottom-0 right-0 z-10 size-5 translate-x-1/2 translate-y-1/2 rounded-full bg-prominent"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
             "div",
             {
               "aria-hidden": true,
@@ -6340,13 +6486,13 @@ function TicketCard({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
           "div",
           {
             className: cn(
               "relative z-[1] inline-flex max-w-[72%] shrink-0 self-stretch sm:max-w-[44%]"
             ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
               "button",
               {
                 type: "button",
@@ -6358,7 +6504,7 @@ function TicketCard({
                   stubDisabled ? "bg-primary/30 cursor-not-allowed opacity-50 pointer-events-none" : "bg-primary cursor-pointer hover:bg-primary-hover"
                 ),
                 children: [
-                  !stubDisabled && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+                  !stubDisabled && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
                     "span",
                     {
                       "aria-hidden": true,
@@ -6368,8 +6514,8 @@ function TicketCard({
                       }
                     }
                   ),
-                  stubIcon != null ? stubIcon : /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_lucide_react22.ArrowRight, { className: "relative size-5 shrink-0 text-on-prominent-static-inverse" }),
-                  stubLabel && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "max-w-full text-balance text-center text-xs font-bold uppercase leading-tight tracking-wide text-on-prominent-static-inverse sm:tracking-widest", children: stubLabel })
+                  stubIcon != null ? stubIcon : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_lucide_react23.ArrowRight, { className: "relative size-5 shrink-0 text-on-prominent-static-inverse" }),
+                  stubLabel && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "max-w-full text-balance text-center text-xs font-bold uppercase leading-tight tracking-wide text-on-prominent-static-inverse sm:tracking-widest", children: stubLabel })
                 ]
               }
             )
@@ -6383,7 +6529,7 @@ function TicketCard({
 // components/ui/toggle.tsx
 var import_class_variance_authority12 = require("class-variance-authority");
 var import_radix_ui33 = require("radix-ui");
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 var toggleVariants = (0, import_class_variance_authority12.cva)(
   "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-secondary-hover hover:text-on-prominent focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-secondary-hover data-[state=on]:border-transparent data-[state=on]:text-primary [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
@@ -6414,7 +6560,7 @@ function Toggle(_a) {
     "variant",
     "size"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
     import_radix_ui33.Toggle.Root,
     __spreadValues({
       "data-slot": "toggle",
@@ -6424,10 +6570,10 @@ function Toggle(_a) {
 }
 
 // components/ui/toggle-group.tsx
-var React10 = __toESM(require("react"), 1);
+var React11 = __toESM(require("react"), 1);
 var import_radix_ui34 = require("radix-ui");
-var import_jsx_runtime57 = require("react/jsx-runtime");
-var ToggleGroupContext = React10.createContext({
+var import_jsx_runtime58 = require("react/jsx-runtime");
+var ToggleGroupContext = React11.createContext({
   size: "default",
   variant: "default",
   spacing: 0
@@ -6446,7 +6592,7 @@ function ToggleGroup(_a) {
     "spacing",
     "children"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
     import_radix_ui34.ToggleGroup.Root,
     __spreadProps(__spreadValues({
       "data-slot": "toggle-group",
@@ -6459,7 +6605,7 @@ function ToggleGroup(_a) {
         className
       )
     }, props), {
-      children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(ToggleGroupContext.Provider, { value: { variant, size, spacing }, children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(ToggleGroupContext.Provider, { value: { variant, size, spacing }, children })
     })
   );
 }
@@ -6475,8 +6621,8 @@ function ToggleGroupItem(_a) {
     "variant",
     "size"
   ]);
-  const context = React10.useContext(ToggleGroupContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+  const context = React11.useContext(ToggleGroupContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
     import_radix_ui34.ToggleGroup.Item,
     __spreadProps(__spreadValues({
       "data-slot": "toggle-group-item",
@@ -6778,6 +6924,7 @@ function ToggleGroupItem(_a) {
   Skeleton,
   Slider,
   Spinner,
+  Stepper,
   Switch,
   Table,
   TableBody,