@agg-market/ui 3.0.0 → 4.0.0

package/dist/event-market-page.js

@@ -63,7 +63,7 @@ __export(event_market_exports, {
 });
 module.exports = __toCommonJS(event_market_exports);
 var import_react9 = require("react");
-var import_hooks21 = require("@agg-market/hooks");
+var import_hooks20 = require("@agg-market/hooks");
 var import_dayjs5 = __toESM(require("dayjs"));
 
 // src/events/item-details/index.tsx
@@ -328,10 +328,10 @@ var SwitchButton = ({
     return null;
   }
   const handleKeyDown = (event, optionIndex) => {
-    if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") {
+    if ((event == null ? void 0 : event.key) !== "ArrowLeft" && (event == null ? void 0 : event.key) !== "ArrowRight") {
       return;
     }
-    event.preventDefault();
+    event == null ? void 0 : event.preventDefault();
     const nextOptionIndex = resolveNextEnabledIndex(
       options,
       optionIndex,
@@ -448,8 +448,18 @@ var normalizeSeries = (series) => {
 var defaultValueFormatter = (value) => {
   return `${Math.round(value)}%`;
 };
-var defaultTimeFormatter = (timestamp) => {
-  return import_dayjs.default.unix(timestamp).format("MMM D");
+var resolveTimeFormatter = (windowSeconds) => {
+  return (timestamp) => {
+    if (!Number.isFinite(timestamp))
+      return "";
+    if (windowSeconds <= 48 * 60 * 60) {
+      return import_dayjs.default.unix(timestamp).format("HH:mm");
+    }
+    if (windowSeconds <= 14 * 24 * 60 * 60) {
+      return import_dayjs.default.unix(timestamp).format("MMM D HH:mm");
+    }
+    return import_dayjs.default.unix(timestamp).format("MMM D");
+  };
 };
 var toLivelinePoints = (points) => {
   return points.map((point) => ({
@@ -572,6 +582,9 @@ var LineChart = ({
   const windowSeconds = (0, import_react2.useMemo)(() => {
     return resolveWindowSeconds(normalizedSeries);
   }, [normalizedSeries]);
+  const timeFormatter = (0, import_react2.useMemo)(() => {
+    return resolveTimeFormatter(windowSeconds);
+  }, [windowSeconds]);
   const seriesControls = showSeriesControls && normalizedSeries.length > 0 ? (_a = renderSeriesControls == null ? void 0 : renderSeriesControls({
     series: normalizedSeries,
     activeSeriesId,
@@ -610,7 +623,7 @@ var LineChart = ({
             pulse: false,
             window: windowSeconds,
             formatValue: defaultValueFormatter,
-            formatTime: defaultTimeFormatter,
+            formatTime: timeFormatter,
             padding: {
               top: 12,
               right: 80,
@@ -687,6 +700,7 @@ var EventListItemSkeletonView = ({
   isStandalone = false
 }) => {
   const labels = (0, import_hooks7.useLabels)();
+  const outcomeTitleWidths = ["w-40", "w-[200px]"];
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     Card,
     {
@@ -696,35 +710,23 @@ var EventListItemSkeletonView = ({
       "aria-busy": isStandalone || void 0,
       "aria-hidden": isStandalone ? void 0 : true,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex w-full items-start gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "h-10 w-10 rounded-agg-lg" }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-1 flex-col gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "h-5 w-[82%] rounded-agg-sm" }),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "h-5 w-[68%] rounded-agg-sm" })
-          ] })
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex h-14 w-full items-center gap-3 justify-stretch", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "size-10! rounded-agg-lg" }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "h-6 w-fit flex-1 rounded-agg-sm" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex flex-col gap-3", children: [0, 1].map((index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-          "div",
-          {
-            className: "grid w-full grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-3",
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "h-4 rounded-agg-sm" }),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "h-4 w-10 rounded-agg-sm" }),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "h-9 w-[101px] rounded-agg-full" })
-            ]
-          },
-          index
-        )) }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center justify-between gap-2 text-agg-muted-foreground", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "h-4 w-36 rounded-agg-sm" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex flex-col gap-3", children: outcomeTitleWidths.map((outcomeTitleWidth, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex w-full items-center justify-between gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: cn("h-5 rounded-agg-sm", outcomeTitleWidth) }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "h-9 w-[100px] rounded-agg-full" })
+        ] }, index)) }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center justify-between gap-5 text-agg-muted-foreground", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "h-5 w-[100px] rounded-agg-sm" }),
             /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-1", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "size-3 rounded-agg-full" }),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "size-3 rounded-agg-full" }),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "size-3 rounded-agg-full" })
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "size-[14px] rounded-agg-sm" }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "size-[14px] rounded-agg-sm" })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "h-4 w-20 rounded-agg-sm" })
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "h-5 w-[60px] rounded-agg-sm" })
         ] })
       ]
     }
@@ -744,13 +746,9 @@ var EventListSkeletonView = ({ className, ariaLabel }) => {
       "aria-label": ariaLabel != null ? ariaLabel : labels.eventList.loading("events"),
       "aria-busy": true,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("header", { className: "flex w-full flex-col items-start justify-between gap-2 md:flex-row md:flex-nowrap md:items-center md:gap-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SkeletonBlock, { className: "h-7 w-40 rounded-agg-sm" }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex max-w-full gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SkeletonBlock, { className: "h-10 w-20 rounded-agg-full" }),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SkeletonBlock, { className: "h-10 w-20 rounded-agg-full" }),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SkeletonBlock, { className: "h-10 w-24 rounded-agg-full" })
-          ] })
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("header", { className: "flex w-full flex-col items-start justify-between gap-3 md:flex-row md:flex-nowrap md:items-center md:gap-5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SkeletonBlock, { className: "h-7 w-[120px] rounded-agg-md" }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SkeletonBlock, { className: "h-8 w-full rounded-agg-md md:w-[400px]" })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "grid grid-cols-1 gap-5 md:grid-cols-3", children: Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           EventListItemSkeletonView,
@@ -802,30 +800,26 @@ var EventListItemDetailsSkeletonView = ({
       "aria-label": ariaLabel != null ? ariaLabel : labels.eventItemDetails.loading,
       "aria-busy": true,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex w-full items-start gap-3 md:gap-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SkeletonBlock, { className: "size-10 rounded-agg-lg md:size-[60px]" }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex flex-1 flex-col gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SkeletonBlock, { className: "h-5 w-[82%] rounded-agg-sm md:h-7 md:w-[55%]" }),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex gap-2 overflow-hidden", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SkeletonBlock, { className: "h-8 w-28 rounded-agg-full" }),
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SkeletonBlock, { className: "h-8 w-28 rounded-agg-full" }),
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SkeletonBlock, { className: "h-8 w-28 rounded-agg-full" })
-            ] })
-          ] })
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex h-14 w-full items-center gap-3 justify-stretch", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SkeletonBlock, { className: "size-10! rounded-agg-lg" }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SkeletonBlock, { className: "h-6 w-fit flex-1 rounded-agg-sm" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex flex-col gap-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SkeletonBlock, { className: "h-10 w-full rounded-agg-full md:w-[220px]" }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex gap-2 overflow-hidden", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SkeletonBlock, { className: "h-9 w-20 rounded-agg-full" }),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SkeletonBlock, { className: "h-9 w-20 rounded-agg-full" }),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SkeletonBlock, { className: "h-9 w-20 rounded-agg-full" }),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SkeletonBlock, { className: "h-9 w-20 rounded-agg-full" })
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex w-full flex-col gap-4 md:gap-6", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex w-full flex-col gap-3 md:flex-row md:items-center md:justify-between", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex max-w-full gap-2 overflow-hidden", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SkeletonBlock, { className: "h-9 w-[100px] rounded-agg-full" }),
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SkeletonBlock, { className: "h-9 w-[100px] rounded-agg-full" }),
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SkeletonBlock, { className: "h-9 w-[100px] rounded-agg-full" })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SkeletonBlock, { className: "h-9 w-full max-w-[221px] rounded-agg-full md:w-[221px]" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex w-full flex-col gap-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SkeletonBlock, { className: "h-[220px] w-full rounded-agg-xl md:h-[240px]" }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SkeletonBlock, { className: "h-5 w-[59px] rounded-agg-sm" }),
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SkeletonBlock, { className: "h-5 w-40 rounded-agg-sm" })
+            ] })
           ] })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "h-[300px] w-full rounded-agg-xl", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SkeletonBlock, { className: "h-full w-full rounded-agg-xl" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SkeletonBlock, { className: "h-5 w-24 rounded-agg-sm" }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SkeletonBlock, { className: "h-5 w-40 rounded-agg-sm" })
         ] })
       ]
     }
@@ -849,6 +843,77 @@ var orderBookRowLimitDefault = 4;
 
 // src/primitives/skeleton/views/market-details-skeleton-view.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
+var orderBookAskBarWidths = [
+  "w-[52px] md:w-[240px]",
+  "w-[48px] md:w-[200px]",
+  "w-[40px] md:w-[120px]",
+  "w-[36px] md:w-[60px]"
+];
+var orderBookBidBarWidths = [
+  "w-[36px] md:w-[60px]",
+  "w-[40px] md:w-[120px]",
+  "w-[48px] md:w-[200px]",
+  "w-[52px] md:w-[240px]"
+];
+var MarketDetailsHeaderSkeleton = () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-wrap items-center justify-between gap-3 px-4 py-3 md:px-5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex min-w-0 items-center gap-3 md:min-w-52 md:gap-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SkeletonBlock, { className: "size-12 rounded-agg-lg md:size-[60px]" }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex min-w-0 flex-col gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SkeletonBlock, { className: "h-6 w-[132px] rounded-agg-sm" }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SkeletonBlock, { className: "h-4 w-[141px] rounded-agg-sm" })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SkeletonBlock, { className: "h-9 w-[60px] rounded-agg-md" }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex w-full gap-2 md:w-auto", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SkeletonBlock, { className: "h-9 w-full rounded-agg-full md:w-[135px]" }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SkeletonBlock, { className: "h-9 w-full rounded-agg-full md:w-[131px]" })
+    ] })
+  ] });
+};
+var MarketDetailsTabsSkeleton = () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex h-14 items-end px-4 md:px-5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex h-full flex-col items-end justify-end rounded-t-agg-lg", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "px-4 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SkeletonBlock, { className: "h-6 w-20 rounded-agg-sm" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SkeletonBlock, { className: "h-[3px] w-full rounded-t-agg-sm" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex h-full flex-col justify-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "px-4 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SkeletonBlock, { className: "h-6 w-12 rounded-agg-sm" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "h-[3px] w-full" })
+    ] })
+  ] });
+};
+var MarketDetailsOrderBookRows = ({
+  side,
+  barWidths
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex flex-col gap-2", children: barWidths.map((barWidthClassName, index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "grid grid-cols-[52px_1fr_1fr_52px] items-center gap-2 md:grid-cols-[88px_1fr_1fr_minmax(120px,220px)] md:gap-6", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-1 md:gap-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SkeletonBlock, { className: "size-4 rounded-agg-sm" }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SkeletonBlock, { className: "h-5 w-[60px] rounded-agg-sm" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SkeletonBlock, { className: "h-5 rounded-agg-sm" }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SkeletonBlock, { className: "h-5 rounded-agg-sm" }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SkeletonBlock, { className: cn("h-2 rounded-agg-full", barWidthClassName) }) })
+    ] }),
+    index < barWidths.length - 1 ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "h-px w-full bg-agg-separator" }) : null
+  ] }, `${side}-row-${index}`)) });
+};
+var MarketDetailsOderbookSkeleton = ({
+  className
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: cn("flex flex-col gap-5", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SkeletonBlock, { className: "h-4 w-10 rounded-agg-sm" }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MarketDetailsOrderBookRows, { side: "ask", barWidths: orderBookAskBarWidths })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SkeletonBlock, { className: "h-4 w-10 rounded-agg-sm" }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MarketDetailsOrderBookRows, { side: "bid", barWidths: orderBookBidBarWidths })
+    ] })
+  ] });
+};
 var MarketDetailsSkeletonView = ({
   className,
   ariaLabel,
@@ -863,60 +928,12 @@ var MarketDetailsSkeletonView = ({
       "aria-label": ariaLabel != null ? ariaLabel : labels.marketDetails.loading,
       "aria-busy": true,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col gap-3 p-4 md:px-5 md:py-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex min-w-0 items-center gap-3 md:gap-4", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SkeletonBlock, { className: "size-12 rounded-agg-lg md:size-[60px]" }),
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex min-w-0 flex-col gap-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SkeletonBlock, { className: "h-6 w-40 rounded-agg-sm" }),
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SkeletonBlock, { className: "h-4 w-28 rounded-agg-sm" })
-              ] })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SkeletonBlock, { className: "h-8 w-16 rounded-agg-sm" })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SkeletonBlock, { className: "h-10 flex-1 rounded-agg-full" }),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SkeletonBlock, { className: "h-10 flex-1 rounded-agg-full" })
-          ] })
-        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MarketDetailsHeaderSkeleton, {}),
         isDetailed ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "h-px w-full bg-agg-separator" }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex h-14 items-end", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SkeletonBlock, { className: "h-full w-full rounded-none" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MarketDetailsTabsSkeleton, {}),
           /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "h-px w-full bg-agg-separator" }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col gap-4 p-5", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col gap-3", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SkeletonBlock, { className: "h-4 w-12 rounded-agg-sm" }),
-              [0, 1, 2, 3].map((index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
-                "div",
-                {
-                  className: "grid grid-cols-[52px_1fr_1fr_52px] items-center gap-2",
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SkeletonBlock, { className: "h-4 rounded-agg-sm" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SkeletonBlock, { className: "h-4 rounded-agg-sm" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SkeletonBlock, { className: "h-4 rounded-agg-sm" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SkeletonBlock, { className: "h-2 rounded-agg-full" })
-                  ]
-                },
-                `ask-${index}`
-              ))
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col gap-3", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SkeletonBlock, { className: "h-4 w-12 rounded-agg-sm" }),
-              [0, 1, 2, 3].map((index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
-                "div",
-                {
-                  className: "grid grid-cols-[52px_1fr_1fr_52px] items-center gap-2",
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SkeletonBlock, { className: "h-4 rounded-agg-sm" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SkeletonBlock, { className: "h-4 rounded-agg-sm" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SkeletonBlock, { className: "h-4 rounded-agg-sm" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SkeletonBlock, { className: "h-2 rounded-agg-full" })
-                  ]
-                },
-                `bid-${index}`
-              ))
-            ] })
-          ] })
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MarketDetailsOderbookSkeleton, { className: "p-5" })
         ] }) : null
       ]
     }
@@ -927,65 +944,46 @@ MarketDetailsSkeletonView.displayName = "MarketDetailsSkeletonView";
 // src/primitives/skeleton/views/place-order-skeleton-view.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var placeOrderCardClassName = "overflow-hidden rounded-agg-xl border border-agg-border bg-agg-secondary shadow-none hover:shadow-none";
+var TabsSkeletonBar = () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex w-full items-end border-b border-agg-border", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-col rounded-t-agg-lg", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "px-5 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SkeletonBlock, { className: "h-6 w-10 rounded-agg-sm" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SkeletonBlock, { className: "h-[3px] w-full rounded-t-agg-sm" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-col", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "px-5 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SkeletonBlock, { className: "h-6 w-10 rounded-agg-sm" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "h-[3px] w-full" })
+    ] })
+  ] });
+};
 var ContentBody = () => {
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: cn("flex flex-col gap-6 p-5"), children: [
     /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-col gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-start justify-between gap-5", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SkeletonBlock, { className: "h-12 w-12 shrink-0 rounded-agg-lg" }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SkeletonBlock, { className: "h-5 w-[92%] rounded-agg-sm" }),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SkeletonBlock, { className: "h-5 w-[80%] rounded-agg-sm" })
-          ] })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SkeletonBlock, { className: "h-6 w-6 rounded-agg-sm" })
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex min-w-0 items-center gap-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SkeletonBlock, { className: "size-12 shrink-0 rounded-agg-lg" }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SkeletonBlock, { className: "h-4 w-[92%] max-w-[240px] rounded-agg-sm" }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SkeletonBlock, { className: "h-4 w-[64%] max-w-[160px] rounded-agg-sm" })
+        ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SkeletonBlock, { className: "h-5 w-28 rounded-agg-sm" })
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SkeletonBlock, { className: "h-6 w-[92px] rounded-agg-sm" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TabsSkeletonBar, {})
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex h-11 items-end border-b border-agg-separator", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center gap-8", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-col gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SkeletonBlock, { className: "h-5 w-10 rounded-agg-sm" }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SkeletonBlock, { className: "h-[3px] w-12 rounded-t-agg-sm" })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SkeletonBlock, { className: "h-5 w-10 rounded-agg-sm" })
-    ] }) }),
     /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-col gap-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex w-full gap-2", children: [
         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SkeletonBlock, { className: "h-11 flex-1 rounded-agg-full" }),
         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SkeletonBlock, { className: "h-11 flex-1 rounded-agg-full" })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
         /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-col gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SkeletonBlock, { className: "h-6 w-20 rounded-agg-sm" }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SkeletonBlock, { className: "h-4 w-28 rounded-agg-sm" })
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SkeletonBlock, { className: "h-5 w-[63px] rounded-agg-sm" }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SkeletonBlock, { className: "h-4 w-[118px] rounded-agg-sm" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SkeletonBlock, { className: "h-9 w-28 rounded-agg-sm" })
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: cn("text-agg-3xl font-agg-bold leading-agg-9 text-agg-separator"), children: "$0" })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-col gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "rounded-agg-lg border border-agg-trade-highlight-border bg-agg-trade-highlight-surface p-3", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-col gap-3", children: [
-        [0, 1].map((index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-col gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SkeletonBlock, { className: "size-4 rounded-agg-full" }),
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SkeletonBlock, { className: "h-5 w-24 rounded-agg-sm" })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SkeletonBlock, { className: "h-5 w-10 rounded-agg-sm" })
-          ] }),
-          index === 0 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "h-px w-full bg-agg-trade-highlight-border" }) : null
-        ] }, `place-order-route-${index}`)),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SkeletonBlock, { className: "mx-auto h-5 w-40 rounded-agg-sm" })
-      ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SkeletonBlock, { className: "h-4 w-36 rounded-agg-sm" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-col gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SkeletonBlock, { className: "h-6 w-20 rounded-agg-sm" }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SkeletonBlock, { className: "h-4 w-24 rounded-agg-sm" })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SkeletonBlock, { className: "h-9 w-36 rounded-agg-sm" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SkeletonBlock, { className: "h-4 w-[88%] self-center rounded-agg-sm" })
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SkeletonBlock, { className: "h-12 w-full rounded-agg-full" }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SkeletonBlock, { className: "h-4 w-full max-w-[240px] self-center rounded-agg-sm" })
   ] });
 };
 var PlaceOrderSkeletonView = ({
@@ -999,19 +997,7 @@ var PlaceOrderSkeletonView = ({
       role: "status",
       "aria-label": ariaLabel != null ? ariaLabel : "Loading place order",
       "aria-busy": true,
-      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex w-full items-end justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
-        Card,
-        {
-          className: cn(
-            placeOrderCardClassName,
-            "w-full max-w-[400px] rounded-t-agg-xl rounded-b-none border-b-0"
-          ),
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ContentBody, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "border-t border-agg-separator bg-agg-secondary p-4", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SkeletonBlock, { className: "h-12 w-full rounded-agg-full" }) })
-          ]
-        }
-      ) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex w-full items-end justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Card, { className: cn(placeOrderCardClassName, "w-full"), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ContentBody, {}) }) })
     }
   );
 };
@@ -1037,38 +1023,27 @@ var SettlementSkeletonView = ({
       "aria-label": ariaLabel != null ? ariaLabel : labels.trading.settlementLoading,
       "aria-busy": true,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-col gap-1 md:flex-row md:items-center md:justify-between md:gap-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SkeletonBlock, { className: "h-4 w-20 rounded-agg-sm" }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SkeletonBlock, { className: "h-5 w-full max-w-80 rounded-agg-sm" })
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex w-full items-center justify-between gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SkeletonBlock, { className: "h-4 w-[81px] rounded-agg-sm" }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SkeletonBlock, { className: "h-5 w-full max-w-[240px] rounded-agg-sm" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-col gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SkeletonBlock, { className: "h-5 w-52 rounded-agg-sm" }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex w-full flex-col gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SkeletonBlock, { className: "h-5 w-[200px] rounded-agg-sm" }),
           /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-col gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SkeletonBlock, { className: "h-4 w-[88%] rounded-agg-sm" }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SkeletonBlock, { className: "h-4 w-[84%] rounded-agg-sm" }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SkeletonBlock, { className: "h-4 w-[80%] rounded-agg-sm" }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SkeletonBlock, { className: "h-4 w-[74%] rounded-agg-sm" })
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SkeletonBlock, { className: "h-4 w-full max-w-[320px] rounded-agg-sm" }),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SkeletonBlock, { className: "h-4 w-full max-w-[280px] rounded-agg-sm" })
           ] })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "h-px w-full bg-agg-separator" }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-col gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-col gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SkeletonBlock, { className: "size-4 rounded-agg-full" }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SkeletonBlock, { className: "h-5 w-24 rounded-agg-sm" }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SkeletonBlock, { className: "h-4 w-4 rounded-agg-sm" })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-col gap-2 pl-6", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SkeletonBlock, { className: "h-4 w-full rounded-agg-sm" }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SkeletonBlock, { className: "h-4 w-[92%] rounded-agg-sm" }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SkeletonBlock, { className: "h-4 w-[34%] rounded-agg-sm" })
-            ] })
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex w-full flex-col gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SkeletonBlock, { className: "size-4 rounded-agg-sm" }),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SkeletonBlock, { className: "h-5 w-[100px] rounded-agg-sm" })
           ] }),
-          [0, 1, 2].map((index) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SkeletonBlock, { className: "size-4 rounded-agg-full" }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SkeletonBlock, { className: "h-5 w-20 rounded-agg-sm" }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SkeletonBlock, { className: "h-4 w-4 rounded-agg-sm" })
-          ] }, `settlement-venue-${index}`))
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SkeletonBlock, { className: "size-4 rounded-agg-sm" }),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SkeletonBlock, { className: "h-5 w-[60px] rounded-agg-sm" })
+          ] })
         ] })
       ]
     }
@@ -1360,6 +1335,13 @@ var venueLogoRegistry = {
   opinion: LogoOpinionIcon,
   probable: LogoProbableIcon
 };
+var VENUE_LOGO_BASE_URL = "https://assets.snagsolutions.io/public/prediction-markets/logos";
+var venueLogoUrlRegistry = {
+  kalshi: `${VENUE_LOGO_BASE_URL}/kalshi.png`,
+  polymarket: `${VENUE_LOGO_BASE_URL}/polymarket.png`,
+  opinion: `${VENUE_LOGO_BASE_URL}/opinion.png`,
+  probable: `${VENUE_LOGO_BASE_URL}/probable.png`
+};
 var venueLogoNames = Object.keys(venueLogoRegistry);
 var sizeClasses2 = {
   small: "h-4 w-4",
@@ -1371,6 +1353,7 @@ var sizeClasses2 = {
 var import_jsx_runtime19 = require("react/jsx-runtime");
 var VenueLogo = ({
   venue,
+  variant = "icon",
   isColor = true,
   isMonochromatic = false,
   color,
@@ -1380,8 +1363,20 @@ var VenueLogo = ({
   title
 }) => {
   const labels = (0, import_hooks12.useLabels)();
-  const Component = venueLogoRegistry[venue];
   const sizeClass = sizeClasses2[size];
+  const resolvedLabel = ariaLabel != null ? ariaLabel : labels.venues[venue];
+  if (variant === "logo") {
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      "img",
+      {
+        src: venueLogoUrlRegistry[venue],
+        alt: resolvedLabel,
+        title,
+        className: cn("shrink-0 rounded-agg-lg object-cover", sizeClass, className)
+      }
+    );
+  }
+  const Component = venueLogoRegistry[venue];
   const resolvedIsColor = isMonochromatic ? false : isColor;
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     Component,
@@ -1389,7 +1384,7 @@ var VenueLogo = ({
       className: cn("group/agg-venue-logo", "shrink-0", sizeClass, className),
       isColor: resolvedIsColor,
       color,
-      "aria-label": ariaLabel != null ? ariaLabel : labels.venues[venue],
+      "aria-label": resolvedLabel,
       title
     }
   );
@@ -1398,27 +1393,14 @@ VenueLogo.displayName = "VenueLogo";
 
 // src/events/item/event-list-item.utils.ts
 var resolveEventListItemEvent = (fetchedEvent) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
   if (!fetchedEvent)
     return void 0;
-  const fallbackVenueEvent = fetchedEvent.venueEvents[0];
-  if (!fallbackVenueEvent)
-    return void 0;
   const mergedVenueMarkets = fetchedEvent.markets.flatMap(
-    (venueEvent) => venueEvent.venueMarkets
+    (market) => market.venueMarkets
   );
-  const venueMarkets = mergedVenueMarkets.length > 0 ? mergedVenueMarkets : [];
-  if ((venueMarkets == null ? void 0 : venueMarkets.length) === 0)
+  if (mergedVenueMarkets.length === 0)
     return void 0;
-  return __spreadProps(__spreadValues({}, fetchedEvent), {
-    id: fetchedEvent.id,
-    title: fetchedEvent.title || fallbackVenueEvent.title,
-    description: (_b = (_a = fetchedEvent.description) != null ? _a : fallbackVenueEvent.description) != null ? _b : null,
-    volume: (_d = (_c = fetchedEvent.volume) != null ? _c : fallbackVenueEvent.volume) != null ? _d : null,
-    startDate: (_f = (_e = fetchedEvent.startDate) != null ? _e : fallbackVenueEvent.startDate) != null ? _f : null,
-    endDate: (_h = (_g = fetchedEvent.endDate) != null ? _g : fallbackVenueEvent.endDate) != null ? _h : null,
-    creationDate: (_j = (_i = fetchedEvent.creationDate) != null ? _i : fallbackVenueEvent.creationDate) != null ? _j : null
-  });
+  return fetchedEvent;
 };
 var normalizeProbability = (value) => {
   if (typeof value !== "number" || !Number.isFinite(value))
@@ -1477,15 +1459,14 @@ var resolveTileTitle = (event, primaryVenueMarket, titleOverride) => {
   return event.title;
 };
 var resolveTileImage = (event, primaryVenueMarket, imageOverride) => {
-  var _a, _b, _c, _d, _e, _f;
   if (typeof imageOverride === "string" && imageOverride.trim()) {
     return imageOverride;
   }
   if (typeof (primaryVenueMarket == null ? void 0 : primaryVenueMarket.image) === "string" && primaryVenueMarket.image.trim()) {
     return primaryVenueMarket.image;
   }
-  if (typeof ((_b = (_a = event.venueEvents) == null ? void 0 : _a[0]) == null ? void 0 : _b.image) === "string" && ((_d = (_c = event.venueEvents) == null ? void 0 : _c[0]) == null ? void 0 : _d.image.trim())) {
-    return (_f = (_e = event.venueEvents) == null ? void 0 : _e[0]) == null ? void 0 : _f.image;
+  if (typeof event.image === "string" && event.image.trim()) {
+    return event.image;
   }
   return void 0;
 };
@@ -1603,18 +1584,22 @@ var resolveOutcomesByVenue = (venueMarkets, selectedOutcomeLabel) => {
     };
   }).filter((item) => item != null);
 };
-var buildPriceHistoryGroups = (selectedOutcomes) => {
-  const venueMarketOutcomeIdsByVenue = /* @__PURE__ */ new Map();
-  selectedOutcomes.forEach(({ venue, outcome }) => {
-    var _a;
-    if (!venueMarketOutcomeIdsByVenue.has(venue)) {
-      venueMarketOutcomeIdsByVenue.set(venue, []);
+var buildPriceHistoryGroups = (selectedOutcomes, fallbackMarketId) => {
+  const marketIdByVenue = /* @__PURE__ */ new Map();
+  selectedOutcomes.forEach(({ venue, market }) => {
+    var _a, _b;
+    const marketWithCanonicalId = market;
+    const canonicalMarketId = (_a = marketWithCanonicalId.marketId) != null ? _a : fallbackMarketId;
+    if (!canonicalMarketId)
+      return;
+    if (!marketIdByVenue.has(venue)) {
+      marketIdByVenue.set(venue, /* @__PURE__ */ new Set());
     }
-    (_a = venueMarketOutcomeIdsByVenue.get(venue)) == null ? void 0 : _a.push(outcome.id);
+    (_b = marketIdByVenue.get(venue)) == null ? void 0 : _b.add(canonicalMarketId);
   });
-  return [...venueMarketOutcomeIdsByVenue.entries()].map(([venue, venueMarketOutcomeIds]) => ({
+  return [...marketIdByVenue.entries()].map(([venue, marketIds]) => ({
     venue,
-    venueMarketOutcomeIds
+    venueMarketOutcomeIds: [...marketIds]
   })).filter((group) => group.venueMarketOutcomeIds.length > 0);
 };
 var resolveSeriesColor = (venue, index) => {
@@ -1674,13 +1659,18 @@ var resolveAverageProbability = (values) => {
   return validValues.reduce((sum, value) => sum + value, 0) / validValues.length;
 };
 var resolveOutcomeCandidateIds = (market, outcome) => {
-  var _a;
-  return [outcome.id, (_a = outcome.externalIdentifier) != null ? _a : void 0, market.externalIdentifier].filter(
-    (value) => typeof value === "string" && value.trim().length > 0
-  );
+  var _a, _b;
+  const marketWithCanonicalId = market;
+  return [
+    outcome.id,
+    (_a = outcome.externalIdentifier) != null ? _a : void 0,
+    market.externalIdentifier,
+    (_b = marketWithCanonicalId.marketId) != null ? _b : void 0
+  ].filter((value) => typeof value === "string" && value.trim().length > 0);
 };
 var EventListItemDetailsGraphSection = ({
   venueMarkets,
+  canonicalMarketId,
   selectedOutcomeLabel,
   onSelectedOutcomeLabelChange,
   switchLabels,
@@ -1773,8 +1763,8 @@ var EventListItemDetailsGraphSection = ({
     return [...outcomeByModeAndId.values()];
   }, [selectedOutcomesByMode]);
   const priceHistoryGroups = (0, import_react3.useMemo)(() => {
-    return buildPriceHistoryGroups(allOutcomesForHistory);
-  }, [allOutcomesForHistory]);
+    return buildPriceHistoryGroups(allOutcomesForHistory, canonicalMarketId);
+  }, [allOutcomesForHistory, canonicalMarketId]);
   const timeWindow = (0, import_react3.useMemo)(() => {
     return getTimeWindowByRange(selectedTimeRange);
   }, [selectedTimeRange]);
@@ -1978,11 +1968,12 @@ var EventListItemDetailsContent = ({
   ariaLabel,
   defaultTimeRange
 }) => {
+  var _a, _b;
   const config = (0, import_hooks13.useSdkUiConfig)();
   const labels = (0, import_hooks13.useLabels)();
   const venueMarkets = (0, import_react3.useMemo)(() => {
-    var _a, _b, _c;
-    return (_c = (_b = (_a = event.markets) == null ? void 0 : _a[0]) == null ? void 0 : _b.venueMarkets) != null ? _c : [];
+    var _a2, _b2, _c;
+    return (_c = (_b2 = (_a2 = event.markets) == null ? void 0 : _a2[0]) == null ? void 0 : _b2.venueMarkets) != null ? _c : [];
   }, [event.markets]);
   const primaryVenueMarket = (0, import_react3.useMemo)(() => {
     return selectPrimaryVenueMarket(venueMarkets);
@@ -2020,9 +2011,9 @@ var EventListItemDetailsContent = ({
     if (outcomeLabels.length === 0)
       return void 0;
     return [...outcomeLabels].sort((left, right) => {
-      var _a, _b;
-      const leftProbability = (_a = probabilityByLabel.get(left)) != null ? _a : -1;
-      const rightProbability = (_b = probabilityByLabel.get(right)) != null ? _b : -1;
+      var _a2, _b2;
+      const leftProbability = (_a2 = probabilityByLabel.get(left)) != null ? _a2 : -1;
+      const rightProbability = (_b2 = probabilityByLabel.get(right)) != null ? _b2 : -1;
       return rightProbability - leftProbability;
     })[0];
   }, [outcomeLabels, probabilityByLabel]);
@@ -2038,18 +2029,18 @@ var EventListItemDetailsContent = ({
     setSelectedOutcomeLabel(fallbackOutcomeLabel);
   }, [isDateOutcomeMarket, mainOutcomeLabel, outcomeLabels, selectedOutcomeLabel]);
   const switchLabels = (0, import_react3.useMemo)(() => {
-    var _a, _b;
+    var _a2, _b2;
     if (isDateOutcomeMarket) {
       return [labels.eventItemDetails.yes, labels.eventItemDetails.no];
     }
     const sortedOutcomeLabels = [...outcomeLabels].sort((left, right) => {
-      var _a2, _b2;
-      const leftProbability = (_a2 = probabilityByLabel.get(left)) != null ? _a2 : -1;
-      const rightProbability = (_b2 = probabilityByLabel.get(right)) != null ? _b2 : -1;
+      var _a3, _b3;
+      const leftProbability = (_a3 = probabilityByLabel.get(left)) != null ? _a3 : -1;
+      const rightProbability = (_b3 = probabilityByLabel.get(right)) != null ? _b3 : -1;
       return rightProbability - leftProbability;
     });
-    const firstLabel = (_a = sortedOutcomeLabels[0]) != null ? _a : labels.eventItemDetails.yes;
-    const secondLabel = (_b = sortedOutcomeLabels.find((label) => label !== firstLabel)) != null ? _b : firstLabel;
+    const firstLabel = (_a2 = sortedOutcomeLabels[0]) != null ? _a2 : labels.eventItemDetails.yes;
+    const secondLabel = (_b2 = sortedOutcomeLabels.find((label) => label !== firstLabel)) != null ? _b2 : firstLabel;
     return [firstLabel, secondLabel];
   }, [
     isDateOutcomeMarket,
@@ -2059,8 +2050,8 @@ var EventListItemDetailsContent = ({
     probabilityByLabel
   ]);
   const volumeLabel = (0, import_react3.useMemo)(() => {
-    var _a;
-    const resolvedVolume = typeof event.volume === "number" ? event.volume : (_a = primaryVenueMarket == null ? void 0 : primaryVenueMarket.volume) != null ? _a : void 0;
+    var _a2;
+    const resolvedVolume = typeof event.volume === "number" ? event.volume : (_a2 = primaryVenueMarket == null ? void 0 : primaryVenueMarket.volume) != null ? _a2 : void 0;
     if (typeof resolvedVolume !== "number")
       return "";
     return `${config.formatCompactCurrency(resolvedVolume)} ${labels.eventItemDetails.volumeSuffix}`;
@@ -2158,6 +2149,7 @@ var EventListItemDetailsContent = ({
           EventListItemDetailsGraphSection,
           {
             venueMarkets,
+            canonicalMarketId: (_b = (_a = event.markets) == null ? void 0 : _a[0]) == null ? void 0 : _b.id,
             selectedOutcomeLabel,
             onSelectedOutcomeLabelChange: setSelectedOutcomeLabel,
             switchLabels,
@@ -2283,7 +2275,7 @@ EventListItemDetails.displayName = "EventListItemDetails";
 
 // src/events/market-details/index.tsx
 var import_react6 = require("react");
-var import_hooks17 = require("@agg-market/hooks");
+var import_hooks16 = require("@agg-market/hooks");
 
 // src/primitives/tabs/index.tsx
 var import_react5 = require("react");
@@ -4283,79 +4275,6 @@ var Tabs = ({
 };
 Tabs.displayName = "Tabs";
 
-// src/primitives/loading-icon/index.tsx
-var import_hooks16 = require("@agg-market/hooks");
-var import_jsx_runtime65 = require("react/jsx-runtime");
-var LoadingIcon = ({
-  size = "medium",
-  className,
-  ariaLabel
-}) => {
-  const labels = (0, import_hooks16.useLabels)();
-  const { enableAnimations } = (0, import_hooks16.useSdkUiConfig)();
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
-    "span",
-    {
-      role: "status",
-      "aria-label": ariaLabel != null ? ariaLabel : labels.common.loading,
-      className: cn(
-        "group/agg-loading-icon",
-        "inline-grid place-items-center text-agg-primary will-change-transform",
-        className
-      ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "inline-grid place-items-center", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("svg", { viewBox: "0 0 44 44", className: cn("block", iconSizeClasses[size]), children: /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("g", { children: [
-        enableAnimations ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
-          "animateTransform",
-          {
-            attributeName: "transform",
-            attributeType: "XML",
-            type: "rotate",
-            from: "0 22 22",
-            to: "360 22 22",
-            dur: "1.4s",
-            repeatCount: "indefinite"
-          }
-        ) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
-          "circle",
-          {
-            cx: "22",
-            cy: "22",
-            r: "16",
-            fill: "none",
-            stroke: "currentColor",
-            strokeWidth: "6",
-            strokeLinecap: "round",
-            strokeDasharray: "60 100",
-            strokeDashoffset: "0",
-            children: enableAnimations ? /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(import_jsx_runtime65.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
-                "animate",
-                {
-                  attributeName: "stroke-dasharray",
-                  values: "1 100;60 100;1 100",
-                  dur: "1.2s",
-                  repeatCount: "indefinite"
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
-                "animate",
-                {
-                  attributeName: "stroke-dashoffset",
-                  values: "0;-25;-100",
-                  dur: "1.2s",
-                  repeatCount: "indefinite"
-                }
-              )
-            ] }) : null
-          }
-        )
-      ] }) }) })
-    }
-  );
-};
-LoadingIcon.displayName = "LoadingIcon";
-
 // src/events/market-details/market-details.utils.ts
 var import_dayjs3 = __toESM(require("dayjs"));
 var import_zod = require("zod");
@@ -4480,8 +4399,7 @@ var resolveSubtitle = ({
 };
 var resolveOrderBookRows = ({
   data,
-  side,
-  depth
+  side
 }) => {
   if (!(data == null ? void 0 : data.length))
     return [];
@@ -4512,9 +4430,8 @@ var resolveOrderBookRows = ({
       return left.price - right.price;
     return right.price - left.price;
   });
-  const limitedRows = sortedRows.slice(0, Math.max(1, depth));
-  const maxTotal = limitedRows.reduce((currentMax, row) => Math.max(currentMax, row.total), 0) || 1;
-  return limitedRows.map((row) => __spreadProps(__spreadValues({}, row), {
+  const maxTotal = sortedRows.reduce((currentMax, row) => Math.max(currentMax, row.total), 0) || 1;
+  return sortedRows.map((row) => __spreadProps(__spreadValues({}, row), {
     barScale: row.total / maxTotal
   }));
 };
@@ -4589,14 +4506,14 @@ var buildMarketDetailsModel = ({
 };
 
 // src/events/market-details/index.tsx
-var import_jsx_runtime66 = require("react/jsx-runtime");
+var import_jsx_runtime65 = require("react/jsx-runtime");
 var MarketDetailsLoadingState = ({
   isOpened = marketDetailsDefaultIsOpened,
   ariaLabel,
   classNames
 }) => {
-  const labels = (0, import_hooks17.useLabels)();
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+  const labels = (0, import_hooks16.useLabels)();
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
     Skeleton,
     {
       view: isOpened ? "market-details-detailed" : "market-details-minified",
@@ -4609,16 +4526,16 @@ var MarketDetailsUnavailableState = ({
   ariaLabel,
   classNames
 }) => {
-  const labels = (0, import_hooks17.useLabels)();
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+  const labels = (0, import_hooks16.useLabels)();
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
     Card,
     {
       className: cn(marketDetailsBaseCardClassName, classNames == null ? void 0 : classNames.root),
       role: "status",
       "aria-label": ariaLabel != null ? ariaLabel : labels.marketDetails.unavailableAria,
-      children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex flex-col gap-1 p-5", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Typography, { variant: "body-large-strong", children: labels.marketDetails.unavailableTitle }),
-        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Typography, { variant: "label", className: "text-agg-muted-foreground", children: labels.marketDetails.unavailableDescription })
+      children: /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "flex flex-col gap-1 p-5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Typography, { variant: "body-large-strong", children: labels.marketDetails.unavailableTitle }),
+        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Typography, { variant: "label", className: "text-agg-muted-foreground", children: labels.marketDetails.unavailableDescription })
       ] })
     }
   );
@@ -4627,44 +4544,59 @@ var OrderBookRows = ({
   rows,
   title,
   formatNumber,
-  formatCurrency
+  formatCurrency,
+  visibleRows
 }) => {
-  const labels = (0, import_hooks17.useLabels)();
+  const labels = (0, import_hooks16.useLabels)();
   const isAsks = title === labels.marketDetails.asks;
   const priceClassName = isAsks ? "text-agg-orderbook-ask" : "text-agg-orderbook-bid";
   const barClassName = isAsks ? "bg-agg-orderbook-ask/10" : "bg-agg-orderbook-bid/10";
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex flex-col gap-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Typography, { variant: "caption-caps", children: title }),
-    rows.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex flex-col gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "grid grid-cols-[52px_1fr_1fr_52px] items-center gap-2 md:grid-cols-[88px_1fr_1fr_minmax(120px,220px)] md:gap-6", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex items-center gap-1 md:gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(VenueLogo, { venue: row.venue, size: "small" }),
-          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
-            "span",
-            {
-              className: cn(
-                "text-agg-xs font-agg-bold leading-agg-4 md:text-agg-sm md:leading-agg-5",
-                priceClassName
-              ),
-              children: formatProbabilityCents(row.price)
-            }
-          )
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "truncate text-agg-xs leading-agg-4 text-center text-agg-foreground md:text-agg-sm md:leading-agg-5", children: formatNumber(row.size) }),
-        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "truncate text-agg-xs leading-agg-4 text-center text-agg-foreground md:text-agg-sm md:leading-agg-5", children: formatCurrency(row.total) }),
-        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
-          "div",
-          {
-            "aria-hidden": "true",
-            className: cn("h-2 rounded-agg-full", barClassName),
-            style: {
-              width: `${Math.max(20, Math.round(row.barScale * 100))}%`
-            }
-          }
-        ) })
-      ] }),
-      index < rows.length - 1 ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "h-px w-full bg-agg-separator" }) : null
-    ] }, row.id))
+  const maxVisibleRows = Math.max(1, visibleRows);
+  const orderBookRowHeightPx = 28;
+  const orderBookDividerHeightPx = 1;
+  const orderBookRowGapPx = 8;
+  const orderBookVisibleHeightPx = maxVisibleRows * orderBookRowHeightPx + Math.max(0, maxVisibleRows - 1) * (orderBookDividerHeightPx + orderBookRowGapPx);
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Typography, { variant: "caption-caps", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+      "div",
+      {
+        className: "overflow-y-auto pr-1 flex flex-col gap-2",
+        style: { maxHeight: `${orderBookVisibleHeightPx}px` },
+        role: "region",
+        "aria-label": `${title} order book levels`,
+        children: rows.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "grid grid-cols-[52px_1fr_1fr_52px] items-center gap-2 md:grid-cols-[88px_1fr_1fr_minmax(120px,220px)] md:gap-6", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "flex items-center gap-1 md:gap-3", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(VenueLogo, { venue: row.venue, size: "small" }),
+              /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+                "span",
+                {
+                  className: cn(
+                    "text-agg-xs font-agg-bold leading-agg-4 md:text-agg-sm md:leading-agg-5",
+                    priceClassName
+                  ),
+                  children: formatProbabilityCents(row.price)
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "truncate text-agg-xs leading-agg-4 text-center text-agg-foreground md:text-agg-sm md:leading-agg-5", children: formatNumber(row.size) }),
+            /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "truncate text-agg-xs leading-agg-4 text-center text-agg-foreground md:text-agg-sm md:leading-agg-5", children: formatCurrency(row.total) }),
+            /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+              "div",
+              {
+                "aria-hidden": "true",
+                className: cn("h-2 rounded-agg-full", barClassName),
+                style: {
+                  width: `${Math.max(20, Math.round(row.barScale * 100))}%`
+                }
+              }
+            ) })
+          ] }),
+          index < rows.length - 1 ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "h-px w-full bg-agg-separator" }) : null
+        ] }, row.id))
+      }
+    )
   ] });
 };
 var getOutcomeButtonClassName = ({
@@ -4698,8 +4630,8 @@ var MarketDetailsContent = ({
   classNames,
   otherContent
 }) => {
-  const config = (0, import_hooks17.useSdkUiConfig)();
-  const labels = (0, import_hooks17.useLabels)();
+  const config = (0, import_hooks16.useSdkUiConfig)();
+  const labels = (0, import_hooks16.useLabels)();
   const detailsContentId = (0, import_react6.useId)();
   const model = (0, import_react6.useMemo)(() => {
     return buildMarketDetailsModel({
@@ -4782,10 +4714,11 @@ var MarketDetailsContent = ({
     });
     return [...uniqueOutcomesByVenueAndId.values()];
   }, [outcomesByLabel]);
+  const canonicalMarketIdForHistory = model == null ? void 0 : model.market.id;
   const priceHistoryGroups = (0, import_react6.useMemo)(() => {
-    return buildPriceHistoryGroups(graphOutcomes);
-  }, [graphOutcomes]);
-  const { data: priceHistoryData, isLoading: isPriceHistoryLoading } = (0, import_hooks17.usePriceHistory)(__spreadProps(__spreadValues({
+    return buildPriceHistoryGroups(graphOutcomes, canonicalMarketIdForHistory);
+  }, [canonicalMarketIdForHistory, graphOutcomes]);
+  const { data: priceHistoryData, isLoading: isPriceHistoryLoading } = (0, import_hooks16.usePriceHistory)(__spreadProps(__spreadValues({
     groups: priceHistoryGroups
   }, timeWindow), {
     enabled: isOpened && selectedTab === "graph" && priceHistoryGroups.length > 0
@@ -4797,24 +4730,22 @@ var MarketDetailsContent = ({
       liveUpdate: true
     }));
   }, [selectedOutcomesByVenue]);
-  const { data: orderBookData, isLoading: isOrderBookLoading } = (0, import_hooks17.useOrderBook)({
+  const { data: orderBookData, isLoading: isOrderBookLoading } = (0, import_hooks16.useOrderBook)({
     orderbooks: orderBookInputs,
     enabled: isOpened && selectedTab === "order-book" && orderBookInputs.length > 0
   });
   const askRows = (0, import_react6.useMemo)(() => {
     return resolveOrderBookRows({
       data: orderBookData,
-      side: "asks",
-      depth: orderBookDepth
+      side: "asks"
     });
-  }, [orderBookData, orderBookDepth]);
+  }, [orderBookData]);
   const bidRows = (0, import_react6.useMemo)(() => {
     return resolveOrderBookRows({
       data: orderBookData,
-      side: "bids",
-      depth: orderBookDepth
+      side: "bids"
     });
-  }, [orderBookData, orderBookDepth]);
+  }, [orderBookData]);
   const priceHistoryByVenue = (0, import_react6.useMemo)(() => {
     const historyByVenue = /* @__PURE__ */ new Map();
     if (!(priceHistoryData == null ? void 0 : priceHistoryData.length)) {
@@ -4834,11 +4765,14 @@ var MarketDetailsContent = ({
   const graphSeriesByOutcomeLabel = (0, import_react6.useMemo)(() => {
     const seriesByOutcomeLabel = /* @__PURE__ */ new Map();
     const resolveOutcomeCandidateIds2 = (outcomeByVenue) => {
-      var _a;
+      var _a, _b;
+      const marketWithCanonicalId = outcomeByVenue.market;
       return [
         outcomeByVenue.outcome.id,
         (_a = outcomeByVenue.outcome.externalIdentifier) != null ? _a : void 0,
-        outcomeByVenue.market.externalIdentifier
+        outcomeByVenue.market.externalIdentifier,
+        (_b = marketWithCanonicalId.marketId) != null ? _b : void 0,
+        canonicalMarketIdForHistory
       ].filter((value) => typeof value === "string" && value.trim().length > 0);
     };
     headerOutcomeItems.forEach((headerOutcomeItem) => {
@@ -4870,7 +4804,7 @@ var MarketDetailsContent = ({
       seriesByOutcomeLabel.set(headerOutcomeItem.label, graphSeries2);
     });
     return seriesByOutcomeLabel;
-  }, [headerOutcomeItems, outcomesByLabel, priceHistoryByVenue]);
+  }, [canonicalMarketIdForHistory, headerOutcomeItems, outcomesByLabel, priceHistoryByVenue]);
   const graphSeries = (0, import_react6.useMemo)(() => {
     var _a;
     if (!selectedOutcomeLabel)
@@ -4928,35 +4862,36 @@ var MarketDetailsContent = ({
     setSelectedGraphVenue(null);
   }, [selectedGraphVenue, selectedOutcomesByVenue]);
   if (!model) {
-    return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(MarketDetailsUnavailableState, { ariaLabel, classNames });
+    return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(MarketDetailsUnavailableState, { ariaLabel, classNames });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
     Card,
     {
       className: cn(
-        "w-full cursor-pointer rounded-agg-2xl text-left outline-none",
+        "w-full rounded-agg-2xl text-left outline-none",
         marketDetailsBaseCardClassName,
         classNames == null ? void 0 : classNames.root
       ),
-      "aria-expanded": isOpened,
-      "aria-controls": detailsContentId,
-      role: "button",
-      tabIndex: 0,
-      "aria-label": isOpened ? labels.marketDetails.toggleCloseDetailsAria(model.title) : labels.marketDetails.toggleOpenDetailsAria(model.title),
-      onClick: handleToggleExpanded,
-      onKeyDown: handleToggleExpanded,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
           "div",
           {
             className: cn(
-              "flex flex-row items-center justify-between gap-3 px-5 py-4",
+              "cursor-pointer disabled:cursor-default",
+              "flex flex-wrap flex-row items-center justify-between gap-3 px-5 py-4",
               isOpened && "pb-3",
               classNames == null ? void 0 : classNames.header
             ),
+            "aria-expanded": isOpened,
+            "aria-controls": detailsContentId,
+            role: "button",
+            tabIndex: 0,
+            "aria-label": isOpened ? labels.marketDetails.toggleCloseDetailsAria(model.title) : labels.marketDetails.toggleOpenDetailsAria(model.title),
+            onClick: handleToggleExpanded,
+            onKeyDown: handleToggleExpanded,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex min-w-0 items-center gap-3 md:gap-4", children: [
-                model.image ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "flex min-w-52 items-center gap-3 md:gap-4", children: [
+                model.image ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
                   "img",
                   {
                     src: model.image,
@@ -4964,13 +4899,13 @@ var MarketDetailsContent = ({
                     className: "size-12 rounded-agg-lg object-cover md:size-[60px]"
                   }
                 ) : null,
-                /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex min-w-0 flex-col", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Typography, { as: "h3", variant: "body-large-strong", className: "truncate", children: model.title }),
-                  /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Typography, { variant: "label", className: "truncate text-agg-muted-foreground", children: model.subtitle }) })
+                /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "flex min-w-0 flex-col", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Typography, { as: "h3", variant: "body-large-strong", className: "truncate", children: model.title }),
+                  /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Typography, { variant: "label", className: "truncate text-agg-muted-foreground", children: model.subtitle }) })
                 ] })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Typography, { as: "div", variant: "heading", className: "shrink-0", children: formatProbabilityPercent(headlineProbability) }),
-              /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Typography, { as: "div", variant: "heading", className: "shrink-0", children: formatProbabilityPercent(headlineProbability) }),
+              /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
                 "div",
                 {
                   className: "flex gap-2",
@@ -4981,7 +4916,7 @@ var MarketDetailsContent = ({
                   children: headerOutcomeItems.map((item) => {
                     const isPositive = item.tone === "positive";
                     const isActiveOutcome = item.label === selectedOutcomeLabel;
-                    return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+                    return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
                       "button",
                       {
                         type: "button",
@@ -4998,8 +4933,8 @@ var MarketDetailsContent = ({
                           e.stopPropagation();
                           setSelectedOutcomeLabel(item.label);
                         },
-                        children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("span", { className: "inline-flex items-center gap-2", children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+                        children: /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("span", { className: "inline-flex items-center gap-2", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
                             VenueLogo,
                             {
                               venue: isPositive ? "polymarket" : "probable",
@@ -5007,7 +4942,7 @@ var MarketDetailsContent = ({
                               color: isActiveOutcome ? "var(--agg-color-on-primary)" : void 0
                             }
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
                             Typography,
                             {
                               variant: isActiveOutcome ? "body-strong" : "body",
@@ -5028,28 +4963,25 @@ var MarketDetailsContent = ({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
           "div",
           {
             id: detailsContentId,
             className: cn(
               "grid overflow-hidden",
-              getMotionClassName(
-                config.enableAnimations,
-                "transition-all duration-500 ease-[cubic-bezier(0.4,0,0.2,1)]"
-              ),
+              getMotionClassName(config.enableAnimations, "transition-all duration-500 ease-in-out"),
               isOpened ? "grid-rows-[1fr] opacity-100" : "pointer-events-none grid-rows-[0fr] opacity-0"
             ),
             "aria-hidden": !isOpened,
-            children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "min-h-0", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "h-px w-full bg-agg-separator" }),
-              /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "min-h-0", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "h-px w-full bg-agg-separator" }),
+              /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
                 "div",
                 {
                   className: cn(
                     getMotionClassName(
                       config.enableAnimations,
-                      "transition-all duration-500 ease-[cubic-bezier(0.4,0,0.2,1)]"
+                      "transition-all duration-500 ease-in-out"
                     ),
                     isOpened ? cn(
                       "translate-y-0 opacity-100",
@@ -5057,7 +4989,7 @@ var MarketDetailsContent = ({
                     ) : "translate-y-5 opacity-0"
                   ),
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: cn("block", classNames == null ? void 0 : classNames.tabs), children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: cn("block", classNames == null ? void 0 : classNames.tabs), children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
                       Tabs,
                       {
                         ariaLabel: labels.marketDetails.tabsAria,
@@ -5068,42 +5000,32 @@ var MarketDetailsContent = ({
                         className: "w-full px-5"
                       }
                     ) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "h-px w-full bg-agg-separator" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: cn("p-5", classNames == null ? void 0 : classNames.content), children: [
-                      selectedTab === "order-book" ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: cn("flex flex-col gap-5", classNames == null ? void 0 : classNames.orderBook), children: isOrderBookLoading ? /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
-                        "div",
-                        {
-                          className: "flex flex-col gap-2 min-h-40 items-center justify-center",
-                          role: "status",
-                          "aria-label": labels.marketDetails.loadingOrderbookAria,
-                          "aria-busy": true,
-                          children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(LoadingIcon, {}),
-                            /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Typography, { variant: "label", className: "text-agg-muted-foreground", children: labels.marketDetails.loadingOrderbookLabel })
-                          ]
-                        }
-                      ) : /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(import_jsx_runtime66.Fragment, { children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "h-px w-full bg-agg-separator" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: cn("p-5", classNames == null ? void 0 : classNames.content), children: [
+                      selectedTab === "order-book" ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: cn("flex flex-col gap-5", classNames == null ? void 0 : classNames.orderBook), children: isOrderBookLoading ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(MarketDetailsOderbookSkeleton, {}) : /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(import_jsx_runtime65.Fragment, { children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
                           OrderBookRows,
                           {
                             rows: askRows,
                             title: labels.marketDetails.asks,
                             formatNumber: config.formatNumber,
-                            formatCurrency: config.formatCurrency
+                            formatCurrency: config.formatCurrency,
+                            visibleRows: orderBookDepth
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
                           OrderBookRows,
                           {
                             rows: bidRows,
                             title: labels.marketDetails.bids,
                             formatNumber: config.formatNumber,
-                            formatCurrency: config.formatCurrency
+                            formatCurrency: config.formatCurrency,
+                            visibleRows: orderBookDepth
                           }
                         )
                       ] }) }) : null,
-                      selectedTab === "graph" ? /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: cn("flex flex-col gap-5", classNames == null ? void 0 : classNames.graph), children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+                      selectedTab === "graph" ? /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: cn("flex flex-col gap-5", classNames == null ? void 0 : classNames.graph), children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
                           LineChart,
                           {
                             series: graphSeries,
@@ -5112,11 +5034,11 @@ var MarketDetailsContent = ({
                             classNames: { root: "w-full" },
                             showSeriesControls: selectedOutcomesByVenue.length > 0 || headerOutcomeItems.length > 0,
                             renderSeriesControls: () => {
-                              return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex flex-col gap-4 md:flex-row md:items-center md:justify-between", children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "flex flex-wrap gap-2", children: selectedOutcomesByVenue.map((item) => {
+                              return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "flex flex-col gap-4 md:flex-row md:items-center md:justify-between", children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "flex flex-wrap gap-2", children: selectedOutcomesByVenue.map((item) => {
                                   const probability = formatProbabilityPercent(item.outcome.price);
                                   const isActiveVenue = selectedGraphVenue === item.venue;
-                                  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
+                                  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
                                     "button",
                                     {
                                       type: "button",
@@ -5133,14 +5055,14 @@ var MarketDetailsContent = ({
                                         handleGraphVenueToggle(item.venue);
                                       },
                                       children: [
-                                        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(VenueLogo, { venue: item.venue, size: "small" }),
-                                        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "text-agg-base leading-agg-6 text-agg-foreground", children: probability })
+                                        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(VenueLogo, { venue: item.venue, size: "small" }),
+                                        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "text-agg-base leading-agg-6 text-agg-foreground", children: probability })
                                       ]
                                     },
                                     `${item.market.id}-${item.outcome.id}`
                                   );
                                 }) }),
-                                /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+                                /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
                                   SwitchButton,
                                   {
                                     ariaLabel: labels.marketDetails.outcomeSelectorAria,
@@ -5158,7 +5080,7 @@ var MarketDetailsContent = ({
                             }
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
+                        /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
                           "div",
                           {
                             className: cn(
@@ -5166,10 +5088,10 @@ var MarketDetailsContent = ({
                               classNames == null ? void 0 : classNames.footer
                             ),
                             children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { children: typeof model.market.volume === "number" ? `${config.formatCompactCurrency(model.market.volume)} ${labels.marketDetails.meta.volumeSuffix}` : labels.marketDetails.volumeUnavailable }),
-                              /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "flex flex-wrap items-center gap-3 md:gap-4", children: eventListItemDetailsTimeRanges.map((timeRange) => {
+                              /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { children: typeof model.market.volume === "number" ? `${config.formatCompactCurrency(model.market.volume)} ${labels.marketDetails.meta.volumeSuffix}` : labels.marketDetails.volumeUnavailable }),
+                              /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "flex flex-wrap items-center gap-3 md:gap-4", children: eventListItemDetailsTimeRanges.map((timeRange) => {
                                 const isActive = selectedTimeRange === timeRange;
-                                return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+                                return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
                                   "button",
                                   {
                                     type: "button",
@@ -5192,13 +5114,13 @@ var MarketDetailsContent = ({
                           }
                         )
                       ] }) : null,
-                      selectedTab === "other" ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "flex flex-col gap-4", children: otherContent != null ? otherContent : /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "grid grid-cols-1 gap-3", children: otherRows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
+                      selectedTab === "other" ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "flex flex-col gap-4", children: otherContent != null ? otherContent : /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "grid grid-cols-1 gap-3", children: otherRows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
                         "div",
                         {
                           className: "flex items-center justify-between rounded-agg-xl bg-agg-secondary-hover px-4 py-3",
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Typography, { variant: "label", className: "text-agg-muted-foreground", children: row.label }),
-                            /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Typography, { variant: "body", className: "text-right", children: row.value })
+                            /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Typography, { variant: "label", className: "text-agg-muted-foreground", children: row.label }),
+                            /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Typography, { variant: "body", className: "text-right", children: row.value })
                           ]
                         },
                         row.label
@@ -5233,14 +5155,14 @@ var MarketDetails = (props) => {
     (_a2 = props.onOpenChange) == null ? void 0 : _a2.call(props, nextIsOpened);
   };
   const hasEventProp = "event" in props && !!props.event;
-  const { event: fetchedEvent, isLoading: isFetchingEvent } = (0, import_hooks17.useEvent)(
+  const { event: fetchedEvent, isLoading: isFetchingEvent } = (0, import_hooks16.useEvent)(
     hasEventProp ? void 0 : props.eventId,
     {
       enabled: !props.isLoading && !hasEventProp && !!props.eventId
     }
   );
   if (props.isLoading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
       MarketDetailsLoadingState,
       {
         isOpened: resolvedIsOpened,
@@ -5250,7 +5172,7 @@ var MarketDetails = (props) => {
     );
   }
   if ("event" in props && props.event) {
-    return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
       MarketDetailsContent,
       __spreadProps(__spreadValues({}, props), {
         isOpened: resolvedIsOpened,
@@ -5260,7 +5182,7 @@ var MarketDetails = (props) => {
     );
   }
   if (isFetchingEvent) {
-    return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
       MarketDetailsLoadingState,
       {
         isOpened: resolvedIsOpened,
@@ -5270,9 +5192,9 @@ var MarketDetails = (props) => {
     );
   }
   if (!fetchedEvent) {
-    return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(MarketDetailsUnavailableState, { ariaLabel: props.ariaLabel, classNames: props.classNames });
+    return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(MarketDetailsUnavailableState, { ariaLabel: props.ariaLabel, classNames: props.classNames });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
     MarketDetailsContent,
     __spreadProps(__spreadValues({}, props), {
       isOpened: resolvedIsOpened,
@@ -5285,12 +5207,12 @@ MarketDetails.displayName = "MarketDetails";
 
 // src/trading/place-order/index.tsx
 var import_react7 = require("react");
-var import_hooks19 = require("@agg-market/hooks");
+var import_hooks18 = require("@agg-market/hooks");
 
 // src/trading/utils.ts
-var import_hooks18 = require("@agg-market/hooks");
+var import_hooks17 = require("@agg-market/hooks");
 var import_dayjs4 = __toESM(require("dayjs"));
-var defaultLabels = (0, import_hooks18.resolveAggUiLabels)("en-US");
+var defaultLabels = (0, import_hooks17.resolveAggUiLabels)("en-US");
 var defaultSettlementSectionLabel = defaultLabels.trading.settlementSection;
 var defaultSettlementDifferencesTitle = defaultLabels.trading.settlementDifferencesTitle;
 var defaultTradingDisclaimer = defaultLabels.trading.disclaimer;
@@ -5308,9 +5230,9 @@ var getTradingVenueLabel = (venue, label) => {
 };
 
 // src/trading/place-order/index.tsx
-var import_jsx_runtime67 = require("react/jsx-runtime");
+var import_jsx_runtime66 = require("react/jsx-runtime");
 var WarningFilledIcon2 = ({ className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
     "svg",
     {
       viewBox: "0 0 16 16",
@@ -5318,15 +5240,15 @@ var WarningFilledIcon2 = ({ className }) => {
       className: cn("text-agg-warning", className),
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("path", { d: "M8 1.33301L15.3333 14.6663H0.666656L8 1.33301Z", fill: "currentColor" }),
-        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("path", { d: "M8 5.33301V8.66634", stroke: "white", strokeWidth: "1.4", strokeLinecap: "round" }),
-        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("circle", { cx: "8", cy: "11.1667", r: "0.833333", fill: "white" })
+        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("path", { d: "M8 1.33301L15.3333 14.6663H0.666656L8 1.33301Z", fill: "currentColor" }),
+        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("path", { d: "M8 5.33301V8.66634", stroke: "white", strokeWidth: "1.4", strokeLinecap: "round" }),
+        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("circle", { cx: "8", cy: "11.1667", r: "0.833333", fill: "white" })
       ]
     }
   );
 };
 var ErrorFilledIcon = ({ className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
     "svg",
     {
       viewBox: "0 0 16 16",
@@ -5334,9 +5256,9 @@ var ErrorFilledIcon = ({ className }) => {
       className: cn("text-agg-error", className),
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("circle", { cx: "8", cy: "8", r: "8", fill: "currentColor" }),
-        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("path", { d: "M8 4.16699V8.50033", stroke: "white", strokeWidth: "1.4", strokeLinecap: "round" }),
-        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("circle", { cx: "8", cy: "11.167", r: "0.833333", fill: "white" })
+        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("circle", { cx: "8", cy: "8", r: "8", fill: "currentColor" }),
+        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("path", { d: "M8 4.16699V8.50033", stroke: "white", strokeWidth: "1.4", strokeLinecap: "round" }),
+        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("circle", { cx: "8", cy: "11.167", r: "0.833333", fill: "white" })
       ]
     }
   );
@@ -5383,17 +5305,17 @@ var getStatusContent = ({
   if (!status || status.placement !== placement)
     return null;
   if (status.tone === "warning") {
-    return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex items-center justify-center gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(WarningFilledIcon2, { className: "h-4 w-4 shrink-0" }),
-      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("p", { className: "text-agg-sm leading-agg-5 text-agg-foreground", children: status.message })
+    return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex items-center justify-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(WarningFilledIcon2, { className: "h-4 w-4 shrink-0" }),
+      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("p", { className: "text-agg-sm leading-agg-5 text-agg-foreground", children: status.message })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex items-center gap-3 rounded-agg-lg bg-agg-status-error-surface px-3 py-2.5", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(ErrorFilledIcon, { className: "h-4 w-4 shrink-0" }),
-      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("p", { className: "min-w-0 flex-1 text-agg-sm leading-agg-5 text-agg-foreground", children: status.message })
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex items-center gap-3 rounded-agg-lg bg-agg-status-error-surface px-3 py-2.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(ErrorFilledIcon, { className: "h-4 w-4 shrink-0" }),
+      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("p", { className: "min-w-0 flex-1 text-agg-sm leading-agg-5 text-agg-foreground", children: status.message })
     ] }),
-    status.actionLabel ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+    status.actionLabel ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
       "button",
       {
         type: "button",
@@ -5431,11 +5353,11 @@ var PlaceOrder = ({
   onStatusAction,
   onTabChange
 }) => {
-  const { enableAnimations } = (0, import_hooks19.useSdkUiConfig)();
-  const labels = (0, import_hooks19.useLabels)();
+  const { enableAnimations } = (0, import_hooks18.useSdkUiConfig)();
+  const labels = (0, import_hooks18.useLabels)();
   const resolvedDisclaimer = disclaimer === defaultTradingDisclaimer ? labels.trading.disclaimer : disclaimer;
   if (isLoading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
       Skeleton,
       {
         ariaLabel: labels.common.loading,
@@ -5474,7 +5396,7 @@ var PlaceOrder = ({
     }
     onOutcomeChange == null ? void 0 : onOutcomeChange(nextOutcomeId);
   };
-  const actionButton = /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+  const actionButton = /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
     Button,
     {
       size: "large",
@@ -5486,11 +5408,11 @@ var PlaceOrder = ({
       children: actionLabel
     }
   );
-  const contentBody = /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex flex-col gap-6 p-5", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex flex-col gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex items-start justify-between gap-5", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
-          marketImageUrl ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+  const contentBody = /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex flex-col gap-6 p-5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex items-start justify-between gap-5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
+          marketImageUrl ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
             "img",
             {
               src: marketImageUrl,
@@ -5498,16 +5420,16 @@ var PlaceOrder = ({
               className: "h-12 w-12 shrink-0 rounded-agg-lg object-cover"
             }
           ) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("p", { className: "min-w-0 text-agg-base font-agg-bold leading-agg-6 text-agg-foreground", children: title })
+          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("p", { className: "min-w-0 text-agg-base font-agg-bold leading-agg-6 text-agg-foreground", children: title })
         ] }),
-        isDismissible ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+        isDismissible ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
           "button",
           {
             type: "button",
             "aria-label": labels.common.close,
             className: "shrink-0 text-agg-foreground",
             onClick: onClose,
-            children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
               Icon,
               {
                 name: "close",
@@ -5519,9 +5441,9 @@ var PlaceOrder = ({
           }
         ) : null
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("p", { className: "text-agg-base leading-agg-6 text-agg-foreground", children: dateLabel })
+      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("p", { className: "text-agg-base leading-agg-6 text-agg-foreground", children: dateLabel })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
       Tabs,
       {
         ariaLabel: labels.common.tabsAria,
@@ -5537,11 +5459,11 @@ var PlaceOrder = ({
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex flex-col gap-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "flex w-full gap-2", children: outcomes.map((outcome, index) => {
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex flex-col gap-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "flex w-full gap-2", children: outcomes.map((outcome, index) => {
         const isActive = outcome.id === resolvedOutcomeId;
         const isPositive = resolveIsPositiveOutcome(outcome, index);
-        return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
           "button",
           {
             type: "button",
@@ -5558,16 +5480,16 @@ var PlaceOrder = ({
           outcome.id
         );
       }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex flex-col", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("p", { className: "text-agg-base font-agg-bold leading-agg-6 text-agg-foreground", children: primaryMetric.label }),
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("p", { className: "text-agg-sm leading-agg-5 text-agg-muted-foreground", children: primaryMetric.hint })
+      /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("p", { className: "text-agg-base font-agg-bold leading-agg-6 text-agg-foreground", children: primaryMetric.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("p", { className: "text-agg-sm leading-agg-5 text-agg-muted-foreground", children: primaryMetric.hint })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("p", { className: "text-agg-3xl font-agg-bold leading-agg-9 text-agg-foreground", children: primaryMetric.value })
+        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("p", { className: "text-agg-3xl font-agg-bold leading-agg-9 text-agg-foreground", children: primaryMetric.value })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex flex-col gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
         "div",
         {
           className: cn(
@@ -5575,7 +5497,7 @@ var PlaceOrder = ({
             getRoutingCardClassName(hasHighlightedRouting)
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
               "div",
               {
                 className: cn(
@@ -5584,11 +5506,11 @@ var PlaceOrder = ({
                 )
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "relative flex flex-col gap-3", children: [
-              routing.rows.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex flex-col gap-3", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex min-w-0 items-center gap-2", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "relative flex flex-col gap-3", children: [
+              routing.rows.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex flex-col gap-3", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex min-w-0 items-center gap-2", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
                       VenueLogo,
                       {
                         venue: row.venue,
@@ -5596,11 +5518,11 @@ var PlaceOrder = ({
                         ariaLabel: getTradingVenueLabel(row.venue)
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("p", { className: "truncate text-agg-base leading-agg-6 text-agg-foreground", children: row.label })
+                    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("p", { className: "truncate text-agg-base leading-agg-6 text-agg-foreground", children: row.label })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("p", { className: "shrink-0 text-agg-base leading-agg-6 text-agg-foreground", children: row.priceLabel })
+                  /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("p", { className: "shrink-0 text-agg-base leading-agg-6 text-agg-foreground", children: row.priceLabel })
                 ] }),
-                index < routing.rows.length - 1 ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+                index < routing.rows.length - 1 ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
                   "div",
                   {
                     className: cn(
@@ -5610,19 +5532,19 @@ var PlaceOrder = ({
                   }
                 ) : null
               ] }, `${row.venue}-${row.label}`)),
-              routing.highlightLabel ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("p", { className: "text-center text-agg-sm font-agg-bold leading-agg-5 uppercase text-agg-trade-highlight-accent", children: routing.highlightLabel }) : null
+              routing.highlightLabel ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("p", { className: "text-center text-agg-sm font-agg-bold leading-agg-5 uppercase text-agg-trade-highlight-accent", children: routing.highlightLabel }) : null
             ] })
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("p", { className: "text-agg-sm leading-agg-5 text-agg-muted-foreground", children: routing.helperLabel })
+      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("p", { className: "text-agg-sm leading-agg-5 text-agg-muted-foreground", children: routing.helperLabel })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex flex-col", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("p", { className: "text-agg-base font-agg-bold leading-agg-6 text-agg-foreground", children: result.label }),
-        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("p", { className: "text-agg-sm leading-agg-5 text-agg-muted-foreground", children: result.hint })
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex flex-col", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("p", { className: "text-agg-base font-agg-bold leading-agg-6 text-agg-foreground", children: result.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("p", { className: "text-agg-sm leading-agg-5 text-agg-muted-foreground", children: result.hint })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
         "p",
         {
           className: cn(
@@ -5633,7 +5555,7 @@ var PlaceOrder = ({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_jsx_runtime67.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(import_jsx_runtime66.Fragment, { children: [
       getStatusContent({
         placement: "above-action",
         status,
@@ -5646,16 +5568,16 @@ var PlaceOrder = ({
         onStatusAction
       })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("p", { className: "text-center text-agg-xs leading-agg-4 text-agg-muted-foreground", children: resolvedDisclaimer })
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("p", { className: "text-center text-agg-xs leading-agg-4 text-agg-muted-foreground", children: resolvedDisclaimer })
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Card, { className: cn(getPlaceOrderContainerClassName(), className), children: contentBody });
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Card, { className: cn(getPlaceOrderContainerClassName(), className), children: contentBody });
 };
 PlaceOrder.displayName = "PlaceOrder";
 
 // src/trading/settlement/index.tsx
 var import_react8 = require("react");
-var import_hooks20 = require("@agg-market/hooks");
-var import_jsx_runtime68 = require("react/jsx-runtime");
+var import_hooks19 = require("@agg-market/hooks");
+var import_jsx_runtime67 = require("react/jsx-runtime");
 var getSettlementHeaderClassName = () => {
   return "flex items-center justify-between gap-4";
 };
@@ -5673,8 +5595,8 @@ var Settlement = ({
   className
 }) => {
   var _a, _b;
-  const labels = (0, import_hooks20.useLabels)();
-  const { enableAnimations } = (0, import_hooks20.useSdkUiConfig)();
+  const labels = (0, import_hooks19.useLabels)();
+  const { enableAnimations } = (0, import_hooks19.useSdkUiConfig)();
   const resolvedSectionLabel = sectionLabel === defaultSettlementSectionLabel ? labels.trading.settlementSection : sectionLabel;
   const resolvedDifferencesTitle = differencesTitle === defaultSettlementDifferencesTitle ? labels.trading.settlementDifferencesTitle : differencesTitle;
   const [internalExpandedVenue, setInternalExpandedVenue] = (0, import_react8.useState)(
@@ -5847,7 +5769,7 @@ var Settlement = ({
     onShowMore == null ? void 0 : onShowMore(venue);
   };
   if (isLoading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
       Skeleton,
       {
         ariaLabel: labels.trading.settlementLoading,
@@ -5856,7 +5778,7 @@ var Settlement = ({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
     Card,
     {
       className: cn(
@@ -5864,16 +5786,16 @@ var Settlement = ({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: getSettlementHeaderClassName(), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("p", { className: "text-agg-xs font-agg-bold leading-agg-4 uppercase text-agg-muted-foreground", children: resolvedSectionLabel }),
-          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("p", { className: "text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground", children: question })
+        /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: getSettlementHeaderClassName(), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("p", { className: "text-agg-xs font-agg-bold leading-agg-4 uppercase text-agg-muted-foreground", children: resolvedSectionLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("p", { className: "text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground", children: question })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "flex flex-col gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("p", { className: "text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground", children: resolvedDifferencesTitle }),
-          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("ul", { className: "list-disc pl-5 text-agg-sm leading-agg-5 text-agg-foreground", children: differences.map((difference) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("li", { children: difference }, difference)) })
+        /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("p", { className: "text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground", children: resolvedDifferencesTitle }),
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("ul", { className: "list-disc pl-5 text-agg-sm leading-agg-5 text-agg-foreground", children: differences.map((difference) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("li", { children: difference }, difference)) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "h-px w-full bg-agg-separator" }),
-        /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "flex flex-col gap-3", children: venues.map((venue) => {
+        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "h-px w-full bg-agg-separator" }),
+        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "flex flex-col gap-3", children: venues.map((venue) => {
           var _a2, _b2;
           const venueLabel = getTradingVenueLabel(venue.venue, venue.label);
           const isExpanded = resolvedExpandedVenue === venue.venue;
@@ -5881,8 +5803,8 @@ var Settlement = ({
           const isDescriptionOverflowing = !!overflowingDescriptionByVenue[venue.venue];
           const shouldShowDescriptionCta = isExpanded && isDescriptionOverflowing && !isDescriptionExpanded;
           const resolvedShowMoreLabel = (_a2 = venue.showMoreLabel) != null ? _a2 : "Show more";
-          return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "flex flex-col", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
               "button",
               {
                 type: "button",
@@ -5898,7 +5820,7 @@ var Settlement = ({
                 "aria-label": labels.trading.settlementDetailsAria(venueLabel),
                 onClick: () => handleVenueClick(venue.venue),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
                     VenueLogo,
                     {
                       venue: venue.venue,
@@ -5906,7 +5828,7 @@ var Settlement = ({
                       ariaLabel: venueLabel
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
                     "span",
                     {
                       className: cn(
@@ -5916,7 +5838,7 @@ var Settlement = ({
                       children: venueLabel
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
                     Icon,
                     {
                       name: isExpanded ? "chevron-up" : "chevron-down",
@@ -5928,7 +5850,7 @@ var Settlement = ({
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
               "div",
               {
                 "aria-hidden": !isExpanded,
@@ -5941,17 +5863,17 @@ var Settlement = ({
                     "transition-[grid-template-rows,opacity,margin-top] duration-300 ease-in-out"
                   )
                 ),
-                children: /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
                   "div",
                   {
                     ref: (element) => handleDescriptionWrapperRef(venue.venue, element),
                     className: "relative min-h-0",
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("p", { className: "min-h-0 text-agg-sm leading-agg-5 text-agg-foreground", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("p", { className: "min-h-0 text-agg-sm leading-agg-5 text-agg-foreground", children: [
                         isDescriptionExpanded || !isDescriptionOverflowing ? venue.description : (_b2 = collapsedDescriptionByVenue[venue.venue]) != null ? _b2 : venue.description,
-                        shouldShowDescriptionCta ? /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(import_jsx_runtime68.Fragment, { children: [
+                        shouldShowDescriptionCta ? /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_jsx_runtime67.Fragment, { children: [
                           "... ",
-                          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
                             "button",
                             {
                               type: "button",
@@ -5974,7 +5896,7 @@ var Settlement = ({
                           )
                         ] }) : null
                       ] }),
-                      /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
                         "p",
                         {
                           ref: (element) => handleDescriptionMeasureRef(venue.venue, element),
@@ -5996,7 +5918,7 @@ var Settlement = ({
 Settlement.displayName = "Settlement";
 
 // src/pages/event-market/index.tsx
-var import_jsx_runtime69 = require("react/jsx-runtime");
+var import_jsx_runtime68 = require("react/jsx-runtime");
 var getMarketDateValue = (market, fallbackIndex) => {
   var _a, _b, _c;
   const candidateDate = (_c = (_b = (_a = market.endDate) != null ? _a : market.startDate) != null ? _b : market.creationDate) != null ? _c : null;
@@ -6055,16 +5977,16 @@ var resolveInitialExpandedMarketId = (detailedMarkets, defaultExpandedMarketId)
 var EventMarketPageUnavailableState = ({
   ariaLabel
 }) => {
-  const labels = (0, import_hooks21.useLabels)();
-  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+  const labels = (0, import_hooks20.useLabels)();
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
     Card,
     {
       className: "rounded-agg-xl border border-agg-separator bg-agg-secondary p-6 shadow-none hover:shadow-none",
       role: "status",
       "aria-label": ariaLabel != null ? ariaLabel : labels.eventMarketPage.unavailableAria,
-      children: /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Typography, { variant: "body-large-strong", children: labels.eventMarketPage.unavailableTitle }),
-        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Typography, { variant: "label", className: "text-agg-muted-foreground", children: labels.eventMarketPage.unavailableDescription })
+      children: /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Typography, { variant: "body-large-strong", children: labels.eventMarketPage.unavailableTitle }),
+        /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Typography, { variant: "label", className: "text-agg-muted-foreground", children: labels.eventMarketPage.unavailableDescription })
       ] })
     }
   );
@@ -6074,7 +5996,7 @@ var EventMarketPageLoadingState = ({
   settlement,
   classNames
 }) => {
-  const labels = (0, import_hooks21.useLabels)();
+  const labels = (0, import_hooks20.useLabels)();
   const fallbackSettlement = settlement != null ? settlement : {
     sectionLabel: labels.trading.settlementSection,
     question: labels.eventMarketPage.loadingSettlementQuestion,
@@ -6087,7 +6009,7 @@ var EventMarketPageLoadingState = ({
       }
     ]
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("section", { className: cn("w-full", classNames == null ? void 0 : classNames.root), children: /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("section", { className: cn("w-full", classNames == null ? void 0 : classNames.root), children: /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
     "div",
     {
       className: cn(
@@ -6095,8 +6017,8 @@ var EventMarketPageLoadingState = ({
         classNames == null ? void 0 : classNames.content
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: cn("flex min-w-0 flex-1 flex-col gap-6", classNames == null ? void 0 : classNames.main), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: cn("flex min-w-0 flex-1 flex-col gap-6", classNames == null ? void 0 : classNames.main), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
             EventListItemDetails,
             {
               isLoading: true,
@@ -6105,23 +6027,23 @@ var EventMarketPageLoadingState = ({
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: cn("flex flex-col gap-3", classNames == null ? void 0 : classNames.markets), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(MarketDetails, { isLoading: true, isOpened: true, classNames: { root: "w-full" } }),
-            /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(MarketDetails, { isLoading: true, isOpened: false, classNames: { root: "w-full" } }),
-            /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(MarketDetails, { isLoading: true, isOpened: false, classNames: { root: "w-full" } })
+          /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: cn("flex flex-col gap-3", classNames == null ? void 0 : classNames.markets), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(MarketDetails, { isLoading: true, isOpened: true, classNames: { root: "w-full" } }),
+            /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(MarketDetails, { isLoading: true, isOpened: false, classNames: { root: "w-full" } }),
+            /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(MarketDetails, { isLoading: true, isOpened: false, classNames: { root: "w-full" } })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "md:hidden", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Settlement, __spreadProps(__spreadValues({}, fallbackSettlement), { isLoading: true, className: classNames == null ? void 0 : classNames.settlement })) }),
-          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "hidden md:block", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Settlement, __spreadProps(__spreadValues({}, fallbackSettlement), { isLoading: true, className: classNames == null ? void 0 : classNames.settlement })) }),
-          placeOrder ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "md:hidden", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(PlaceOrder, __spreadProps(__spreadValues({}, placeOrder), { isLoading: true, className: classNames == null ? void 0 : classNames.mobileTrade })) }) : null
+          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "md:hidden", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Settlement, __spreadProps(__spreadValues({}, fallbackSettlement), { isLoading: true, className: classNames == null ? void 0 : classNames.settlement })) }),
+          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "hidden md:block", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Settlement, __spreadProps(__spreadValues({}, fallbackSettlement), { isLoading: true, className: classNames == null ? void 0 : classNames.settlement })) }),
+          placeOrder ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "md:hidden", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(PlaceOrder, __spreadProps(__spreadValues({}, placeOrder), { isLoading: true, className: classNames == null ? void 0 : classNames.mobileTrade })) }) : null
         ] }),
-        placeOrder ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+        placeOrder ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
           "aside",
           {
             className: cn(
               "hidden w-full shrink-0 lg:sticky lg:top-6 lg:block lg:w-[343px]",
               classNames == null ? void 0 : classNames.sidebar
             ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(PlaceOrder, __spreadProps(__spreadValues({}, placeOrder), { isLoading: true, className: classNames == null ? void 0 : classNames.trade }))
+            children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(PlaceOrder, __spreadProps(__spreadValues({}, placeOrder), { isLoading: true, className: classNames == null ? void 0 : classNames.trade }))
           }
         ) : null
       ]
@@ -6140,7 +6062,7 @@ var EventMarketPageContent = ({
   classNames,
   ariaLabel
 }) => {
-  const labels = (0, import_hooks21.useLabels)();
+  const labels = (0, import_hooks20.useLabels)();
   const resolvedHeroMarketId = (0, import_react9.useMemo)(() => {
     return resolveHeroMarketId(event, heroMarketId);
   }, [event, heroMarketId]);
@@ -6177,9 +6099,9 @@ var EventMarketPageContent = ({
     onExpandedMarketChange == null ? void 0 : onExpandedMarketChange(nextExpandedMarketId);
   };
   if (!heroEvent || !event.markets.length) {
-    return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(EventMarketPageUnavailableState, { ariaLabel });
+    return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(EventMarketPageUnavailableState, { ariaLabel });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("section", { className: cn("w-full", classNames == null ? void 0 : classNames.root), "aria-label": ariaLabel != null ? ariaLabel : event.title, children: /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("section", { className: cn("w-full", classNames == null ? void 0 : classNames.root), "aria-label": ariaLabel != null ? ariaLabel : event.title, children: /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
     "div",
     {
       className: cn(
@@ -6187,8 +6109,8 @@ var EventMarketPageContent = ({
         classNames == null ? void 0 : classNames.content
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: cn("flex min-w-0 flex-1 flex-col gap-6", classNames == null ? void 0 : classNames.main), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: cn("flex min-w-0 flex-1 flex-col gap-6", classNames == null ? void 0 : classNames.main), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
             EventListItemDetails,
             {
               event: heroEvent,
@@ -6198,9 +6120,9 @@ var EventMarketPageContent = ({
               }
             }
           ),
-          detailedMarkets.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: cn("flex flex-col gap-3", classNames == null ? void 0 : classNames.markets), children: detailedMarkets.map((market) => {
+          detailedMarkets.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: cn("flex flex-col gap-3", classNames == null ? void 0 : classNames.markets), children: detailedMarkets.map((market) => {
             const isOpened = resolvedExpandedMarketId === market.id;
-            return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
               MarketDetails,
               {
                 event,
@@ -6215,30 +6137,30 @@ var EventMarketPageContent = ({
               market.id
             );
           }) }) : null,
-          settlement ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "md:hidden", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Settlement, __spreadProps(__spreadValues({}, settlement), { className: classNames == null ? void 0 : classNames.settlement })) }) : null,
-          settlement ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "hidden md:block", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Settlement, __spreadProps(__spreadValues({}, settlement), { className: classNames == null ? void 0 : classNames.settlement })) }) : null
+          settlement ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "md:hidden", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Settlement, __spreadProps(__spreadValues({}, settlement), { className: classNames == null ? void 0 : classNames.settlement })) }) : null,
+          settlement ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "hidden md:block", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Settlement, __spreadProps(__spreadValues({}, settlement), { className: classNames == null ? void 0 : classNames.settlement })) }) : null
         ] }),
-        placeOrder ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("aside", { className: cn("w-full lg:block lg:max-w-[360px]", classNames == null ? void 0 : classNames.sidebar), children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(PlaceOrder, __spreadProps(__spreadValues({}, placeOrder), { className: classNames == null ? void 0 : classNames.trade })) }) : null
+        placeOrder ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("aside", { className: cn("w-full lg:block lg:max-w-[360px]", classNames == null ? void 0 : classNames.sidebar), children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(PlaceOrder, __spreadProps(__spreadValues({}, placeOrder), { className: classNames == null ? void 0 : classNames.trade })) }) : null
       ]
     }
   ) });
 };
 var EventMarketPage = (props) => {
   const hasEventProp = "event" in props && !!props.event;
-  const { event: fetchedEvent, isLoading: isFetchingEvent } = (0, import_hooks21.useEvent)(
+  const { event: fetchedEvent, isLoading: isFetchingEvent } = (0, import_hooks20.useEvent)(
     hasEventProp ? void 0 : props.eventId,
     {
       enabled: !props.isLoading && !hasEventProp && !!props.eventId
     }
   );
   if (props.isLoading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(EventMarketPageLoadingState, { placeOrder: props.placeOrder, settlement: props.settlement });
+    return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(EventMarketPageLoadingState, { placeOrder: props.placeOrder, settlement: props.settlement });
   }
   if ("event" in props && props.event) {
-    return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(EventMarketPageContent, __spreadProps(__spreadValues({}, props), { event: props.event }));
+    return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(EventMarketPageContent, __spreadProps(__spreadValues({}, props), { event: props.event }));
   }
   if (isFetchingEvent) {
-    return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
       EventMarketPageLoadingState,
       {
         placeOrder: props.placeOrder,
@@ -6248,9 +6170,9 @@ var EventMarketPage = (props) => {
     );
   }
   if (!fetchedEvent) {
-    return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(EventMarketPageUnavailableState, { ariaLabel: props.ariaLabel });
+    return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(EventMarketPageUnavailableState, { ariaLabel: props.ariaLabel });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(EventMarketPageContent, __spreadProps(__spreadValues({}, props), { event: fetchedEvent }));
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(EventMarketPageContent, __spreadProps(__spreadValues({}, props), { event: fetchedEvent }));
 };
 EventMarketPage.displayName = "EventMarketPage";
 // Annotate the CommonJS export names for ESM import in node: