@agg-market/ui 9.0.0 → 11.0.0

package/dist/events.js

@@ -62,14 +62,15 @@ __export(events_exports, {
   EventList: () => EventList,
   EventListItem: () => EventListItem,
   EventListItemDetails: () => EventListItemDetails,
-  MarketDetails: () => MarketDetails
+  MarketDetails: () => MarketDetails,
+  MarketDetailsList: () => MarketDetailsList
 });
 module.exports = __toCommonJS(events_exports);
 
 // src/events/item/index.tsx
 var import_dayjs2 = __toESM(require("dayjs"));
 var import_react6 = require("react");
-var import_hooks15 = require("@agg-market/hooks");
+var import_hooks16 = require("@agg-market/hooks");
 
 // src/primitives/badge/index.tsx
 var import_hooks = require("@agg-market/hooks");
@@ -117,7 +118,9 @@ function Badge({
   onClick,
   isActive = false
 }) {
-  const { enableAnimations } = (0, import_hooks.useSdkUiConfig)();
+  const {
+    features: { enableAnimations }
+  } = (0, import_hooks.useSdkUiConfig)();
   const resolvedText = `${text}`;
   const resolvedAriaLabel = resolvedText.length > 0 ? resolvedText : void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
@@ -138,9 +141,9 @@ function Badge({
       )
     }, onClick && { onClick }), {
       children: [
-        prefix ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: classNames == null ? void 0 : classNames.prefix, children: prefix }) : null,
+        prefix ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: cn(classNames == null ? void 0 : classNames.prefix, "empty:hidden"), children: prefix }) : null,
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: cn("truncate", classNames == null ? void 0 : classNames.text), children: text }),
-        suffix ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: classNames == null ? void 0 : classNames.suffix, children: suffix }) : null
+        suffix ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: cn(classNames == null ? void 0 : classNames.suffix, "empty:hidden"), children: suffix }) : null
       ]
     })
   );
@@ -152,7 +155,9 @@ var import_hooks2 = require("@agg-market/hooks");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var Card = (_a) => {
   var _b = _a, { className, onClick } = _b, props = __objRest(_b, ["className", "onClick"]);
-  const { enableAnimations } = (0, import_hooks2.useSdkUiConfig)();
+  const {
+    features: { enableAnimations }
+  } = (0, import_hooks2.useSdkUiConfig)();
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "div",
     __spreadValues(__spreadValues({
@@ -1859,7 +1864,9 @@ var import_hooks5 = require("@agg-market/hooks");
 var import_hooks3 = require("@agg-market/hooks");
 var import_jsx_runtime53 = require("react/jsx-runtime");
 var SkeletonBlock = ({ className }) => {
-  const { enableAnimations } = (0, import_hooks3.useSdkUiConfig)();
+  const {
+    features: { enableAnimations }
+  } = (0, import_hooks3.useSdkUiConfig)();
   return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
     "div",
     {
@@ -2191,15 +2198,63 @@ var PlaceOrderSkeletonView = ({
 };
 PlaceOrderSkeletonView.displayName = "PlaceOrderSkeletonView";
 
-// src/primitives/skeleton/views/settlement-skeleton-view.tsx
+// src/primitives/skeleton/views/search-skeleton-view.tsx
 var import_hooks8 = require("@agg-market/hooks");
 var import_jsx_runtime59 = require("react/jsx-runtime");
+var SearchSkeletonRow = () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex w-full items-center gap-6 px-5 py-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(SkeletonBlock, { className: "size-12 shrink-0 rounded-[8px]" }),
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(SkeletonBlock, { className: "h-5 w-full max-w-[320px] rounded-agg-sm" }),
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex min-w-0 items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(SkeletonBlock, { className: "h-4 w-[104px] rounded-agg-sm" }),
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(SkeletonBlock, { className: "size-[14px] rounded-[4px]" }),
+          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(SkeletonBlock, { className: "size-[14px] rounded-[4px]" })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex w-[200px] shrink-0 items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(SkeletonBlock, { className: "size-4 rounded-[4px]" }),
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(SkeletonBlock, { className: "h-6 w-10 rounded-agg-sm" }),
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(SkeletonBlock, { className: "h-4 w-[60px] rounded-agg-sm" })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(SkeletonBlock, { className: "size-5 rounded-[4px]" })
+  ] });
+};
+var SearchSkeletonView = ({ className, ariaLabel }) => {
+  const labels = (0, import_hooks8.useLabels)();
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
+    "div",
+    {
+      className: cn(
+        "group/agg-search-skeleton",
+        "w-full overflow-hidden rounded-agg-xl border border-agg-separator bg-agg-secondary shadow-[0px_8px_16px_0px_rgba(0,0,0,0.1)]",
+        className
+      ),
+      role: "status",
+      "aria-label": ariaLabel != null ? ariaLabel : labels.search.loadingResults,
+      "aria-busy": true,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "pt-2", children: Array.from({ length: 4 }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: cn(index > 0 && "border-t border-agg-separator"), children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(SearchSkeletonRow, {}) }, index)) }),
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "border-t border-agg-separator px-5 py-5", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(SkeletonBlock, { className: "h-5 w-[116px] rounded-agg-sm" }) })
+      ]
+    }
+  );
+};
+SearchSkeletonView.displayName = "SearchSkeletonView";
+
+// src/primitives/skeleton/views/settlement-skeleton-view.tsx
+var import_hooks9 = require("@agg-market/hooks");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 var SettlementSkeletonView = ({
   className,
   ariaLabel
 }) => {
-  const labels = (0, import_hooks8.useLabels)();
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
+  const labels = (0, import_hooks9.useLabels)();
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
     Card,
     {
       className: cn(
@@ -2211,26 +2266,26 @@ var SettlementSkeletonView = ({
       "aria-label": ariaLabel != null ? ariaLabel : labels.trading.settlementLoading,
       "aria-busy": true,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex w-full items-center justify-between gap-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(SkeletonBlock, { className: "h-4 w-[81px] rounded-agg-sm" }),
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(SkeletonBlock, { className: "h-5 w-full max-w-[240px] rounded-agg-sm" })
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "flex w-full items-center justify-between gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(SkeletonBlock, { className: "h-4 w-[81px] rounded-agg-sm" }),
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(SkeletonBlock, { className: "h-5 w-full max-w-[240px] rounded-agg-sm" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex w-full flex-col gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(SkeletonBlock, { className: "h-5 w-[200px] rounded-agg-sm" }),
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex flex-col gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(SkeletonBlock, { className: "h-4 w-full max-w-[320px] rounded-agg-sm" }),
-            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(SkeletonBlock, { className: "h-4 w-full max-w-[280px] rounded-agg-sm" })
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "flex w-full flex-col gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(SkeletonBlock, { className: "h-5 w-[200px] rounded-agg-sm" }),
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "flex flex-col gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(SkeletonBlock, { className: "h-4 w-full max-w-[320px] rounded-agg-sm" }),
+            /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(SkeletonBlock, { className: "h-4 w-full max-w-[280px] rounded-agg-sm" })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "h-px w-full bg-agg-separator" }),
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex w-full flex-col gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(SkeletonBlock, { className: "size-4 rounded-agg-sm" }),
-            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(SkeletonBlock, { className: "h-5 w-[100px] rounded-agg-sm" })
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "h-px w-full bg-agg-separator" }),
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "flex w-full flex-col gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(SkeletonBlock, { className: "size-4 rounded-agg-sm" }),
+            /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(SkeletonBlock, { className: "h-5 w-[100px] rounded-agg-sm" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(SkeletonBlock, { className: "size-4 rounded-agg-sm" }),
-            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(SkeletonBlock, { className: "h-5 w-[60px] rounded-agg-sm" })
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(SkeletonBlock, { className: "size-4 rounded-agg-sm" }),
+            /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(SkeletonBlock, { className: "h-5 w-[60px] rounded-agg-sm" })
           ] })
         ] })
       ]
@@ -2247,36 +2302,40 @@ var skeletonViews = {
   marketDetailsDetailed: "market-details-detailed",
   eventList: "event-list",
   settlement: "settlement",
-  placeOrder: "place-order"
+  placeOrder: "place-order",
+  search: "search"
 };
 
 // src/primitives/skeleton/index.tsx
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 var Skeleton = ({ view, className, ariaLabel }) => {
   if (view === skeletonViews.eventListItem) {
-    return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(EventListItemSkeletonView, { className, ariaLabel, isStandalone: true });
+    return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(EventListItemSkeletonView, { className, ariaLabel, isStandalone: true });
   }
   if (view === skeletonViews.eventListItemDetails) {
-    return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(EventListItemDetailsSkeletonView, { className, ariaLabel });
+    return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(EventListItemDetailsSkeletonView, { className, ariaLabel });
   }
   if (view === skeletonViews.marketDetailsMinified) {
-    return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(MarketDetailsSkeletonView, { className, ariaLabel, isDetailed: false });
+    return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(MarketDetailsSkeletonView, { className, ariaLabel, isDetailed: false });
   }
   if (view === skeletonViews.marketDetailsDetailed) {
-    return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(MarketDetailsSkeletonView, { className, ariaLabel, isDetailed: true });
+    return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(MarketDetailsSkeletonView, { className, ariaLabel, isDetailed: true });
   }
   if (view === skeletonViews.settlement) {
-    return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(SettlementSkeletonView, { className, ariaLabel });
+    return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(SettlementSkeletonView, { className, ariaLabel });
   }
   if (view === skeletonViews.placeOrder) {
-    return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(PlaceOrderSkeletonView, { className, ariaLabel });
+    return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(PlaceOrderSkeletonView, { className, ariaLabel });
+  }
+  if (view === skeletonViews.search) {
+    return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(SearchSkeletonView, { className, ariaLabel });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(EventListSkeletonView, { className, ariaLabel });
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(EventListSkeletonView, { className, ariaLabel });
 };
 Skeleton.displayName = "Skeleton";
 
 // src/primitives/button/index.tsx
-var import_hooks9 = require("@agg-market/hooks");
+var import_hooks10 = require("@agg-market/hooks");
 
 // src/primitives/button/button.constants.ts
 var sizeClasses = {
@@ -2323,7 +2382,7 @@ var baseButtonClasses = cn(
 );
 
 // src/primitives/button/index.tsx
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_jsx_runtime62 = require("react/jsx-runtime");
 var Button = (_a) => {
   var _b = _a, {
     children,
@@ -2348,9 +2407,11 @@ var Button = (_a) => {
     "className",
     "aria-label"
   ]);
-  const { enableAnimations } = (0, import_hooks9.useSdkUiConfig)();
+  const {
+    features: { enableAnimations }
+  } = (0, import_hooks10.useSdkUiConfig)();
   const isDisabled = disabled || isLoading;
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
     "button",
     __spreadProps(__spreadValues({
       type,
@@ -2367,7 +2428,7 @@ var Button = (_a) => {
       "aria-busy": isLoading,
       "aria-label": ariaLabel
     }, other), {
-      children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+      children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
         "span",
         {
           className: cn(
@@ -2377,9 +2438,9 @@ var Button = (_a) => {
           ),
           "aria-hidden": "true"
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_jsx_runtime61.Fragment, { children: [
+      ) : /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(import_jsx_runtime62.Fragment, { children: [
         prefix != null ? prefix : null,
-        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { children }),
+        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { children }),
         suffix != null ? suffix : null
       ] })
     })
@@ -2388,10 +2449,10 @@ var Button = (_a) => {
 Button.displayName = "Button";
 
 // src/primitives/search/search-empty-icon.tsx
-var import_jsx_runtime62 = require("react/jsx-runtime");
+var import_jsx_runtime63 = require("react/jsx-runtime");
 var SearchEmptyIcon = (_a) => {
   var _b = _a, { title, className } = _b, props = __objRest(_b, ["title", "className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
     "svg",
     __spreadProps(__spreadValues(__spreadValues({
       viewBox: "0 0 40 40",
@@ -2400,9 +2461,9 @@ var SearchEmptyIcon = (_a) => {
       className
     }, getIconA11yProps(title)), props), {
       children: [
-        title ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("title", { children: title }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("circle", { cx: "19.9987", cy: "20.0013", r: "9.2", stroke: "currentColor", strokeWidth: "1.6" }),
-        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+        title ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("title", { children: title }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("circle", { cx: "19.9987", cy: "20.0013", r: "9.2", stroke: "currentColor", strokeWidth: "1.6" }),
+        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
           "ellipse",
           {
             cx: "19.9987",
@@ -2440,14 +2501,14 @@ var typographyVariantClasses = {
 };
 
 // src/primitives/typography/index.tsx
-var import_jsx_runtime63 = require("react/jsx-runtime");
+var import_jsx_runtime64 = require("react/jsx-runtime");
 var Typography = ({
   as: Component = "p",
   variant = "body",
   className,
   children
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
     Component,
     {
       className: cn(
@@ -2463,7 +2524,7 @@ var Typography = ({
 Typography.displayName = "Typography";
 
 // src/primitives/state-message/index.tsx
-var import_jsx_runtime64 = require("react/jsx-runtime");
+var import_jsx_runtime65 = require("react/jsx-runtime");
 var iconClassName = "h-9 w-9 text-agg-muted-foreground";
 var StateMessage = ({
   ariaLabel,
@@ -2474,8 +2535,8 @@ var StateMessage = ({
   onAction,
   className
 }) => {
-  const icon = tone === "warning" ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(WarningIcon, { className: iconClassName, "aria-hidden": true }) : /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(SearchEmptyIcon, { className: iconClassName, "aria-hidden": true });
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+  const icon = tone === "warning" ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(WarningIcon, { className: iconClassName, "aria-hidden": true }) : /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(SearchEmptyIcon, { className: iconClassName, "aria-hidden": true });
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
     "div",
     {
       className: cn(
@@ -2485,20 +2546,24 @@ var StateMessage = ({
       role: "status",
       "aria-live": "polite",
       "aria-label": ariaLabel,
-      children: /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "flex max-w-[360px] flex-col items-center gap-6", children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "flex flex-col items-center gap-6", children: [
         icon,
-        /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "flex flex-col items-center gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Typography, { variant: "body-large-strong", children: title }),
-          description ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Typography, { variant: "body", className: "whitespace-pre-line text-agg-muted-foreground", children: description }) : null
+        /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "flex flex-col items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Typography, { variant: "body-large-strong", children: title }),
+          description ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Typography, { variant: "body", className: "whitespace-pre-line text-agg-muted-foreground", children: description }) : null
         ] }),
-        actionLabel && onAction ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+        actionLabel && onAction ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
           Button,
           {
             variant: "tertiary",
             size: "large",
             className: "text-agg-base leading-agg-6",
             "aria-label": actionLabel,
-            onClick: onAction,
+            onClick: (e) => {
+              e.stopPropagation();
+              e.preventDefault();
+              onAction == null ? void 0 : onAction();
+            },
             children: actionLabel
           }
         ) : null
@@ -2509,7 +2574,7 @@ var StateMessage = ({
 StateMessage.displayName = "StateMessage";
 
 // src/primitives/venue-logo/index.tsx
-var import_hooks10 = require("@agg-market/hooks");
+var import_hooks11 = require("@agg-market/hooks");
 
 // src/primitives/remote-image/index.tsx
 var import_react = require("react");
@@ -2521,7 +2586,7 @@ var skeletonClasses = "h-full w-full rounded-agg-lg";
 var placeholderClasses = "flex h-full w-full items-center justify-center bg-agg-secondary-hover rounded-agg-lg";
 
 // src/primitives/remote-image/index.tsx
-var import_jsx_runtime65 = require("react/jsx-runtime");
+var import_jsx_runtime66 = require("react/jsx-runtime");
 var isValidSrc = (src) => typeof src === "string" && src.length > 0;
 var RemoteImage = ({
   src,
@@ -2552,7 +2617,7 @@ var RemoteImage = ({
     setStatus("error");
   };
   const sizeStyle = width !== void 0 || height !== void 0 ? { width: width != null ? width : void 0, height: height != null ? height : void 0 } : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
     "div",
     {
       className: cn(containerClasses, classNames == null ? void 0 : classNames.root, className),
@@ -2569,17 +2634,17 @@ var RemoteImage = ({
       "aria-label": ariaLabel,
       title,
       children: [
-        status === "loading" && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(SkeletonBlock, { className: cn(skeletonClasses, classNames == null ? void 0 : classNames.placeholder) }),
-        status === "error" && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+        status === "loading" && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(SkeletonBlock, { className: cn(skeletonClasses, classNames == null ? void 0 : classNames.placeholder) }),
+        status === "error" && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
           "div",
           {
             className: cn(placeholderClasses, classNames == null ? void 0 : classNames.placeholder),
             "aria-hidden": true,
             "aria-errormessage": "Image failed to load",
-            children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Icon, { name: "image", size: "medium", className: "text-agg-muted-foreground" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Icon, { name: "image", size: "medium", className: "text-agg-muted-foreground" })
           }
         ),
-        isValidSrc(src) && status !== "error" && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+        isValidSrc(src) && status !== "error" && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
           "img",
           {
             src,
@@ -2612,7 +2677,7 @@ var resolveLogoPrimaryColor = ({
 };
 
 // src/primitives/venue-logo/svg/logo-kalshi.tsx
-var import_jsx_runtime66 = require("react/jsx-runtime");
+var import_jsx_runtime67 = require("react/jsx-runtime");
 var KALSHI_GREEN = "#18C590";
 var LogoKalshiIcon = (_a) => {
   var _b = _a, {
@@ -2631,7 +2696,7 @@ var LogoKalshiIcon = (_a) => {
     isColor,
     color
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
     "svg",
     __spreadProps(__spreadValues(__spreadValues({
       viewBox: "0 0 100 100",
@@ -2639,8 +2704,8 @@ var LogoKalshiIcon = (_a) => {
       fill: "none"
     }, getIconA11yProps(title)), props), {
       children: [
-        title ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("title", { children: title }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+        title ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("title", { children: title }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
           "path",
           {
             d: "M54.9798 47.579L79.4249 85.9995H58.2273L38.2531 52.9344V85.9995H20.4189V13.9995H38.2531V45.4356L59.6547 13.9995H78.7119L54.9798 47.579Z",
@@ -2654,7 +2719,7 @@ var LogoKalshiIcon = (_a) => {
 LogoKalshiIcon.displayName = "LogoKalshiIcon";
 
 // src/primitives/venue-logo/svg/logo-limitless.tsx
-var import_jsx_runtime67 = require("react/jsx-runtime");
+var import_jsx_runtime68 = require("react/jsx-runtime");
 var LIMITLESS_BLACK = "#000000";
 var LogoLimitlessIcon = (_a) => {
   var _b = _a, {
@@ -2673,7 +2738,7 @@ var LogoLimitlessIcon = (_a) => {
     isColor,
     color
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
     "svg",
     __spreadProps(__spreadValues(__spreadValues({
       viewBox: "0 0 44 32",
@@ -2681,8 +2746,8 @@ var LogoLimitlessIcon = (_a) => {
       fill: "none"
     }, getIconA11yProps(title)), props), {
       children: [
-        title ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("title", { children: title }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+        title ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("title", { children: title }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
           "path",
           {
             fill: primaryColor,
@@ -2691,7 +2756,7 @@ var LogoLimitlessIcon = (_a) => {
             clipRule: "evenodd"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
           "path",
           {
             fill: primaryColor,
@@ -2700,7 +2765,7 @@ var LogoLimitlessIcon = (_a) => {
             clipRule: "evenodd"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
           "path",
           {
             fill: primaryColor,
@@ -2709,7 +2774,7 @@ var LogoLimitlessIcon = (_a) => {
             clipRule: "evenodd"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
           "path",
           {
             fill: primaryColor,
@@ -2718,7 +2783,7 @@ var LogoLimitlessIcon = (_a) => {
             clipRule: "evenodd"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
           "path",
           {
             fill: primaryColor,
@@ -2734,7 +2799,7 @@ var LogoLimitlessIcon = (_a) => {
 LogoLimitlessIcon.displayName = "LogoLimitlessIcon";
 
 // src/primitives/venue-logo/svg/logo-opinion.tsx
-var import_jsx_runtime68 = require("react/jsx-runtime");
+var import_jsx_runtime69 = require("react/jsx-runtime");
 var OPINION_BLACK = "#000000";
 var LogoOpinionIcon = (_a) => {
   var _b = _a, {
@@ -2753,7 +2818,7 @@ var LogoOpinionIcon = (_a) => {
     isColor,
     color
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
     "svg",
     __spreadProps(__spreadValues(__spreadValues({
       viewBox: "0 0 100 100",
@@ -2761,8 +2826,8 @@ var LogoOpinionIcon = (_a) => {
       fill: "none"
     }, getIconA11yProps(title)), props), {
       children: [
-        title ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("title", { children: title }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+        title ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("title", { children: title }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
           "path",
           {
             d: "M51.8239 68.4603L56.9659 68.0094L58.8049 89.0576C61.1459 88.5314 63.4349 87.7952 65.6437 86.8578V68.1879H71.9955V83.4385C74.6496 81.6828 77.0863 79.619 79.2548 77.2898L80.0716 67.958L85.516 68.433C88.6185 62.4381 90.156 55.7558 89.9858 49.0072C89.8154 42.2584 87.9429 35.6623 84.542 29.8316L84.3394 32.1494L77.9876 31.5927L78.8042 22.2668C76.7468 20.1288 74.4594 18.225 71.9835 16.5902V31.9164H65.6317V13.1739C62.9224 12.0205 60.0929 11.173 57.1957 10.6473L59.0317 31.6441L53.8897 32.0949L51.9599 10.0482C51.3128 10.0179 50.6593 9.99976 50.006 9.99976C47.4581 9.99976 44.9161 10.2419 42.414 10.723L46.0438 31.3899L42.1297 32.0798L38.5304 11.6701C35.1755 12.6725 31.9677 14.1143 28.9905 15.9578L33.0435 31.0873L29.9705 31.9134L26.2018 17.8369C23.2938 19.9923 20.6902 22.5308 18.4615 25.3835L20.4246 30.7787L18.1833 31.5956L16.7707 27.7134C14.5111 31.0771 12.7772 34.7657 11.6287 38.652L12.2639 38.4221L20.4306 60.8471L18.1893 61.6641L10.8877 41.5963C9.21542 49.4012 9.91256 57.528 12.8896 64.9338C15.8667 72.3395 20.9879 78.6865 27.5961 83.1601L23.8031 68.9989L26.8762 68.1728L31.5162 85.4991C34.6952 87.1593 38.0844 88.3808 41.5914 89.1303L38.0132 68.7296L41.9301 68.0397L45.7684 89.8262C47.1811 89.9757 48.6007 90.0505 50.0212 90.0502C51.2583 90.0502 52.4863 89.9926 53.6963 89.8807L51.8239 68.4603ZM80.1017 37.8985L86.4385 38.4524L84.3605 62.2299L78.0087 61.6761L80.1017 37.8985ZM65.6528 38.1315H72.0046V61.9969H65.6528V38.1315ZM56.975 37.9501L59.053 61.7277L53.911 62.1785L51.8299 38.4009L56.975 37.9501ZM29.9976 62.003L23.8243 38.9486L26.8974 38.1255L33.0707 61.1649L29.9976 62.003ZM42.157 62.1603L38.0132 38.658L41.9301 37.9683L46.0709 61.4674L42.157 62.1603Z",
@@ -2776,7 +2841,7 @@ var LogoOpinionIcon = (_a) => {
 LogoOpinionIcon.displayName = "LogoOpinionIcon";
 
 // src/primitives/venue-logo/svg/logo-polymarket.tsx
-var import_jsx_runtime69 = require("react/jsx-runtime");
+var import_jsx_runtime70 = require("react/jsx-runtime");
 var POLYMARKET_BLUE = "#2E5CFF";
 var LogoPolymarketIcon = (_a) => {
   var _b = _a, {
@@ -2795,7 +2860,7 @@ var LogoPolymarketIcon = (_a) => {
     isColor,
     color
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(
     "svg",
     __spreadProps(__spreadValues(__spreadValues({
       viewBox: "0 0 100 100",
@@ -2803,8 +2868,8 @@ var LogoPolymarketIcon = (_a) => {
       fill: "none"
     }, getIconA11yProps(title)), props), {
       children: [
-        title ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("title", { children: title }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+        title ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("title", { children: title }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
           "path",
           {
             d: "M81.0904 84.2882C81.0904 87.9246 81.0904 89.7428 79.901 90.644C78.7119 91.5456 76.9613 91.0542 73.4603 90.0717L17.1975 74.2838C15.0881 73.6919 14.0332 73.3959 13.4233 72.5913C12.8135 71.7866 12.8135 70.6911 12.8135 68.5002V31.4998C12.8135 29.309 12.8135 28.2134 13.4233 27.4088C14.0332 26.6042 15.0881 26.3081 17.1975 25.7163L73.4603 9.92806C76.9613 8.94572 78.7119 8.45448 79.901 9.35587C81.0904 10.2573 81.0904 12.0755 81.0904 15.7119V84.2882ZM26.8451 69.1363L73.4308 82.2104V56.0637L26.8451 69.1363ZM20.4723 63.0711L67.0487 50L20.4723 36.929V63.0711ZM26.8446 30.8638L73.4308 43.9366V17.7896L26.8446 30.8638Z",
@@ -2818,7 +2883,7 @@ var LogoPolymarketIcon = (_a) => {
 LogoPolymarketIcon.displayName = "LogoPolymarketIcon";
 
 // src/primitives/venue-logo/svg/logo-probable.tsx
-var import_jsx_runtime70 = require("react/jsx-runtime");
+var import_jsx_runtime71 = require("react/jsx-runtime");
 var PROBABLE_ORANGE = "#F05923";
 var LogoProbableIcon = (_a) => {
   var _b = _a, {
@@ -2837,7 +2902,7 @@ var LogoProbableIcon = (_a) => {
     isColor,
     color
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
     "svg",
     __spreadProps(__spreadValues(__spreadValues({
       viewBox: "0 0 100 100",
@@ -2845,16 +2910,16 @@ var LogoProbableIcon = (_a) => {
       fill: "none"
     }, getIconA11yProps(title)), props), {
       children: [
-        title ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("title", { children: title }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+        title ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("title", { children: title }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
           "path",
           {
             d: "M75.625 59.3489C75.6247 53.7323 71.0719 49.1792 65.4551 49.179H33.9209C28.3039 49.179 23.7503 53.7321 23.75 59.3489C23.75 64.9659 28.3038 69.5198 33.9209 69.5198H65.4551C71.0719 69.5195 75.625 64.9658 75.625 59.3489ZM90.625 59.3489C90.625 73.2501 79.3562 84.5195 65.4551 84.5198H33.9209C20.0196 84.5198 8.75 73.2502 8.75 59.3489C8.75026 45.4477 20.0198 34.179 33.9209 34.179H65.4551C79.3559 34.1792 90.6247 45.4478 90.625 59.3489Z",
             fill: primaryColor
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("path", { d: "M90.9329 15.4546V30.4546H8.90234V15.4546H90.9329Z", fill: primaryColor }),
-        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("path", { d: "M90.9329 15.4546V30.4546H8.90234V15.4546H90.9329Z", fill: primaryColor }),
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
           "path",
           {
             d: "M64.5742 51.3496C68.9894 51.3496 72.5742 54.9344 72.5742 59.3496C72.5742 63.7648 68.9894 67.3496 64.5742 67.3496C60.159 67.3496 56.5742 63.7648 56.5742 59.3496C56.5742 54.9344 60.159 51.3496 64.5742 51.3496Z",
@@ -2898,7 +2963,7 @@ var sizeClasses2 = {
 };
 
 // src/primitives/venue-logo/index.tsx
-var import_jsx_runtime71 = require("react/jsx-runtime");
+var import_jsx_runtime72 = require("react/jsx-runtime");
 var VenueLogo = ({
   venue,
   variant = "icon",
@@ -2911,11 +2976,16 @@ var VenueLogo = ({
   title
 }) => {
   var _a;
-  const labels = (0, import_hooks10.useLabels)();
+  const {
+    features: { showVenueLogo }
+  } = (0, import_hooks11.useAggUiConfig)();
+  const labels = (0, import_hooks11.useLabels)();
   const sizeClass = sizeClasses2[size];
   const resolvedLabel = (_a = ariaLabel != null ? ariaLabel : labels.venues[venue]) != null ? _a : venueLogoLabels[venue];
+  if (!showVenueLogo)
+    return null;
   if (variant === "logo") {
-    return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
       RemoteImage,
       {
         src: venueLogoUrlRegistry[venue],
@@ -2927,7 +2997,7 @@ var VenueLogo = ({
   }
   const Component = venueLogoRegistry[venue];
   const resolvedIsColor = isMonochromatic ? false : isColor;
-  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
     Component,
     {
       className: cn("group/agg-venue-logo", "shrink-0", sizeClass, className),
@@ -2953,8 +3023,8 @@ var isErrorWithStatus = (error, status) => {
 
 // src/primitives/switch-button/index.tsx
 var import_react2 = require("react");
-var import_hooks11 = require("@agg-market/hooks");
-var import_jsx_runtime72 = require("react/jsx-runtime");
+var import_hooks12 = require("@agg-market/hooks");
+var import_jsx_runtime73 = require("react/jsx-runtime");
 var resolveActiveIndex = (options, value) => {
   const activeIndex = options.findIndex((option) => option.value === value);
   if (activeIndex >= 0)
@@ -2981,7 +3051,9 @@ var SwitchButton = ({
   ariaLabel,
   className
 }) => {
-  const { enableAnimations } = (0, import_hooks11.useSdkUiConfig)();
+  const {
+    features: { enableAnimations }
+  } = (0, import_hooks12.useSdkUiConfig)();
   const activeIndex = (0, import_react2.useMemo)(() => {
     return resolveActiveIndex(options, value);
   }, [options, value]);
@@ -3023,17 +3095,17 @@ var SwitchButton = ({
     }
     onValueChange(nextOption.value);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
     "div",
     {
       className: cn(
-        "group/agg-switch",
+        "group/agg-switch min-w-fit",
         "inline-flex min-w-0 rounded-agg-full bg-agg-secondary-hover font-agg-sans",
         getMotionClassName(enableAnimations, "transition-background duration-200 ease-in-out"),
         "cursor-pointer hover:bg-agg-tertiary",
         className
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
         "div",
         {
           className: "relative grid min-w-0 flex-1 items-center",
@@ -3043,7 +3115,7 @@ var SwitchButton = ({
           role: "tablist",
           "aria-label": ariaLabel,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
               "span",
               {
                 className: cn(
@@ -3063,7 +3135,7 @@ var SwitchButton = ({
             options.map((option, optionIndex) => {
               var _a;
               const isActive = optionIndex === activeIndex;
-              return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
                 "button",
                 {
                   type: "button",
@@ -3073,6 +3145,7 @@ var SwitchButton = ({
                   tabIndex: isActive ? 0 : -1,
                   disabled: option.disabled,
                   className: cn(
+                    "whitespace-nowrap",
                     "relative z-10 min-w-0 rounded-agg-full px-5 py-1.5 font-agg-sans text-agg-base leading-agg-6 text-agg-foreground",
                     getMotionClassName(
                       enableAnimations,
@@ -3107,10 +3180,10 @@ SwitchButton.displayName = "SwitchButton";
 
 // src/primitives/chart/index.tsx
 var import_dayjs = __toESM(require("dayjs"));
-var import_hooks12 = require("@agg-market/hooks");
+var import_hooks13 = require("@agg-market/hooks");
 var import_react3 = require("react");
 var import_liveline = require("liveline");
-var import_jsx_runtime73 = require("react/jsx-runtime");
+var import_jsx_runtime74 = require("react/jsx-runtime");
 var normalizeSeries = (series) => {
   return series.map((seriesItem) => {
     const pointsByTime = /* @__PURE__ */ new Map();
@@ -3235,7 +3308,7 @@ var renderDefaultSeriesControls = ({
   seriesSwitchAriaLabel,
   formatSeriesOptionAriaLabel
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
     SwitchButton,
     {
       ariaLabel: seriesSwitchAriaLabel,
@@ -3269,11 +3342,15 @@ var LineChart = ({
   liveCandle: liveForming,
   lineData,
   lineValue,
-  live = false
+  live
 }) => {
   var _a, _b;
-  const labels = (0, import_hooks12.useLabels)();
-  const { theme } = (0, import_hooks12.useSdkUiConfig)();
+  const labels = (0, import_hooks13.useLabels)();
+  const {
+    general: { theme },
+    features: { enableGradients, enableLiveUpdates }
+  } = (0, import_hooks13.useSdkUiConfig)();
+  const isLive = enableLiveUpdates && (live != null ? live : true);
   const normalizedSeries = (0, import_react3.useMemo)(() => {
     return normalizeSeries(series);
   }, [series]);
@@ -3296,7 +3373,19 @@ var LineChart = ({
     if (!primarySeries) {
       return [];
     }
-    return toLivelinePoints(primarySeries.points);
+    const points = toLivelinePoints(primarySeries.points);
+    if (points.length < 3) {
+      return [
+        ...points,
+        ...points.map((point) => __spreadProps(__spreadValues({}, point), {
+          time: point.time + 1500
+        })),
+        ...points.map((point) => __spreadProps(__spreadValues({}, point), {
+          time: point.time + 3e3
+        }))
+      ];
+    }
+    return points;
   }, [primarySeries]);
   const primaryCandles = (0, import_react3.useMemo)(() => {
     if (!primarySeries) {
@@ -3330,7 +3419,7 @@ var LineChart = ({
   const timeFormatter = (0, import_react3.useMemo)(() => {
     return resolveTimeFormatter(windowSeconds);
   }, [windowSeconds]);
-  const seriesControls = showSeriesControls && normalizedSeries.length > 0 ? (_a = renderSeriesControls == null ? void 0 : renderSeriesControls({
+  const seriesControls = showSeriesControls ? (_a = renderSeriesControls == null ? void 0 : renderSeriesControls({
     series: normalizedSeries,
     activeSeriesId,
     handleSeriesChange
@@ -3342,9 +3431,9 @@ var LineChart = ({
     seriesSwitchAriaLabel: labels.common.lineChartSeriesSwitchAria,
     formatSeriesOptionAriaLabel: labels.common.lineChartSeriesOptionAria
   }) : null : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: cn("group/agg-chart", "w-full", classNames == null ? void 0 : classNames.root), style: { width }, children: [
-    !isLoading && seriesControls ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: cn("mb-3", classNames == null ? void 0 : classNames.controls), children: seriesControls }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: cn("group/agg-chart", "w-full", classNames == null ? void 0 : classNames.root), style: { width }, children: [
+    !isLoading && seriesControls ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: cn("mb-3", classNames == null ? void 0 : classNames.controls), children: seriesControls }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
       "div",
       {
         className: cn(
@@ -3354,7 +3443,7 @@ var LineChart = ({
         style: { height },
         role: "img",
         "aria-label": chartType === "candlestick" ? labels.common.candlestickChartAria : labels.common.lineChartAria,
-        children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
           import_liveline.Liveline,
           {
             className: cn("h-full w-full agg-livechart", classNames == null ? void 0 : classNames.liveline),
@@ -3363,9 +3452,10 @@ var LineChart = ({
             series: livelineSeries,
             color: (_b = primarySeries == null ? void 0 : primarySeries.color) != null ? _b : "var(--agg-color-primary)",
             theme: livelineTheme,
+            fill: enableGradients,
             grid: true,
-            momentum: live,
-            pulse: live,
+            momentum: isLive,
+            pulse: isLive,
             window: windowSeconds,
             mode: chartType === "candlestick" ? "candle" : "line",
             candles: chartType === "candlestick" ? primaryCandles : void 0,
@@ -3377,11 +3467,12 @@ var LineChart = ({
             formatTime: timeFormatter,
             padding: {
               top: 12,
-              right: 80,
+              right: 28,
               bottom: 28,
               left: 12
             },
-            loading: isLoading
+            loading: isLoading,
+            lineWidth: 1
           }
         )
       }
@@ -3392,8 +3483,8 @@ LineChart.displayName = "LineChart";
 
 // src/primitives/select/index.tsx
 var import_react4 = require("react");
-var import_hooks13 = require("@agg-market/hooks");
-var import_jsx_runtime74 = require("react/jsx-runtime");
+var import_hooks14 = require("@agg-market/hooks");
+var import_jsx_runtime75 = require("react/jsx-runtime");
 var Select = ({
   items,
   value,
@@ -3403,8 +3494,10 @@ var Select = ({
   disabled = false
 }) => {
   var _a;
-  const labels = (0, import_hooks13.useLabels)();
-  const { enableAnimations } = (0, import_hooks13.useSdkUiConfig)();
+  const labels = (0, import_hooks14.useLabels)();
+  const {
+    features: { enableAnimations }
+  } = (0, import_hooks14.useSdkUiConfig)();
   const hasEnabledItems = items.some((item) => !item.disabled);
   const hasAnyIcon = items.some((item) => item.iconUrl);
   const [isOpen, setIsOpen] = (0, import_react4.useState)(false);
@@ -3434,8 +3527,8 @@ var Select = ({
   const isDisabled = disabled || !hasEnabledItems;
   const selectedItem = items.find((item) => item.value === value);
   if (!hasAnyIcon) {
-    return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("label", { className: cn("group/agg-select", "relative inline-flex w-full", className), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("label", { className: cn("group/agg-select", "relative inline-flex w-full", className), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
         "select",
         {
           "aria-label": ariaLabel != null ? ariaLabel : labels.common.selectAria,
@@ -3451,19 +3544,19 @@ var Select = ({
           disabled: isDisabled,
           value,
           onChange: (event) => onChange(event.target.value),
-          children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("option", { value: item.value, disabled: item.disabled, children: item.label }, item.value))
+          children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("option", { value: item.value, disabled: item.disabled, children: item.label }, item.value))
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: "pointer-events-none absolute inset-y-0 right-3 inline-flex items-center justify-center text-agg-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(Icon, { name: "chevron-down", size: "small", color: "currentColor" }) })
+      /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: "pointer-events-none absolute inset-y-0 right-3 inline-flex items-center justify-center text-agg-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(Icon, { name: "chevron-down", size: "small", color: "currentColor" }) })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
     "div",
     {
       ref: containerRef,
       className: cn("group/agg-select", "relative inline-flex w-full", className),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
           "button",
           {
             type: "button",
@@ -3483,7 +3576,7 @@ var Select = ({
             ),
             onClick: () => setIsOpen((prev) => !prev),
             children: [
-              (selectedItem == null ? void 0 : selectedItem.iconUrl) ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+              (selectedItem == null ? void 0 : selectedItem.iconUrl) ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
                 RemoteImage,
                 {
                   src: selectedItem.iconUrl,
@@ -3491,12 +3584,12 @@ var Select = ({
                   className: "h-4 w-4 shrink-0 rounded-sm object-contain"
                 }
               ) : null,
-              /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: "flex-1 truncate", children: (_a = selectedItem == null ? void 0 : selectedItem.label) != null ? _a : "" })
+              /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: "flex-1 truncate", children: (_a = selectedItem == null ? void 0 : selectedItem.label) != null ? _a : "" })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: "pointer-events-none absolute inset-y-0 right-3 inline-flex items-center justify-center text-agg-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(Icon, { name: "chevron-down", size: "small", color: "currentColor" }) }),
-        isOpen ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: "pointer-events-none absolute inset-y-0 right-3 inline-flex items-center justify-center text-agg-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(Icon, { name: "chevron-down", size: "small", color: "currentColor" }) }),
+        isOpen ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
           "div",
           {
             role: "listbox",
@@ -3504,7 +3597,7 @@ var Select = ({
             className: "absolute top-full left-0 z-50 mt-1 w-full overflow-hidden rounded-agg-md border border-agg-separator bg-agg-secondary shadow-lg",
             children: items.map((item) => {
               const isSelected = item.value === value;
-              return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
+              return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
                 "button",
                 {
                   type: "button",
@@ -3524,7 +3617,7 @@ var Select = ({
                     }
                   },
                   children: [
-                    item.iconUrl ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+                    item.iconUrl ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
                       RemoteImage,
                       {
                         src: item.iconUrl,
@@ -3532,7 +3625,7 @@ var Select = ({
                         className: "h-4 w-4 shrink-0 rounded-sm object-contain"
                       }
                     ) : null,
-                    /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: "truncate", children: item.label })
+                    /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: "truncate", children: item.label })
                   ]
                 },
                 item.value
@@ -3546,65 +3639,201 @@ var Select = ({
 };
 Select.displayName = "Select";
 
-// src/primitives/tabs/index.tsx
-var import_react5 = require("react");
-var import_hooks14 = require("@agg-market/hooks");
-
-// src/primitives/tabs/tabs.utils.ts
-var findNextEnabledIndex = (items, startIndex, direction) => {
-  var _a;
-  if (items.length === 0)
-    return -1;
-  for (let step = 1; step <= items.length; step += 1) {
-    const nextIndex = (startIndex + direction * step + items.length) % items.length;
-    if (!((_a = items[nextIndex]) == null ? void 0 : _a.disabled))
-      return nextIndex;
+// src/events/item/event-list-item.utils.ts
+var resolveEventListItemEvent = (fetchedEvent) => {
+  if (!fetchedEvent)
+    return void 0;
+  if (!fetchedEvent.venueMarkets || fetchedEvent.venueMarkets.length === 0)
+    return void 0;
+  return fetchedEvent;
+};
+var normalizeProbability = (value) => {
+  if (typeof value !== "number" || !Number.isFinite(value))
+    return void 0;
+  if (value < 0)
+    return 0;
+  if (value > 1)
+    return 1;
+  return value;
+};
+var hasDateLabel = (outcome) => {
+  return !!toDate(outcome.label);
+};
+var sortOutcomes = (outcomes) => {
+  if (outcomes.length <= 1)
+    return outcomes;
+  const now = Date.now();
+  if (outcomes.some(hasDateLabel)) {
+    return [...outcomes].sort((a, b) => {
+      var _a, _b, _c, _d;
+      const aDate = (_b = (_a = toDate(a.label)) == null ? void 0 : _a.getTime()) != null ? _b : 0;
+      const bDate = (_d = (_c = toDate(b.label)) == null ? void 0 : _c.getTime()) != null ? _d : 0;
+      return Math.abs(aDate - now) - Math.abs(bDate - now);
+    });
   }
-  return -1;
+  return [...outcomes].sort((a, b) => {
+    var _a, _b;
+    const aPrice = (_a = normalizeProbability(a.price)) != null ? _a : 0;
+    const bPrice = (_b = normalizeProbability(b.price)) != null ? _b : 0;
+    return bPrice - aPrice;
+  });
 };
-var findEdgeEnabledIndex = (items, direction) => {
-  var _a;
-  if (direction === 1) {
-    return items.findIndex((item) => !item.disabled);
+var compareVisibleOutcomeRows = (left, right) => {
+  var _a, _b;
+  const leftDate = toDate(resolveOutcomeTitle(left.outcome));
+  const rightDate = toDate(resolveOutcomeTitle(right.outcome));
+  if (leftDate && rightDate) {
+    return leftDate.getTime() - rightDate.getTime();
   }
-  for (let index = items.length - 1; index >= 0; index -= 1) {
-    if (!((_a = items[index]) == null ? void 0 : _a.disabled))
-      return index;
+  const leftProbability = (_a = normalizeProbability(left.outcome.price)) != null ? _a : -1;
+  const rightProbability = (_b = normalizeProbability(right.outcome.price)) != null ? _b : -1;
+  return rightProbability - leftProbability;
+};
+var shouldReplaceVisibleOutcome = (current, next) => {
+  var _a, _b;
+  const currentVolume = typeof current.market.volume === "number" ? current.market.volume : -1;
+  const nextVolume = typeof next.market.volume === "number" ? next.market.volume : -1;
+  if (currentVolume !== nextVolume) {
+    return nextVolume > currentVolume;
   }
-  return -1;
+  const currentProbability = (_a = normalizeProbability(current.outcome.price)) != null ? _a : -1;
+  const nextProbability = (_b = normalizeProbability(next.outcome.price)) != null ? _b : -1;
+  return nextProbability > currentProbability;
 };
-
-// src/primitives/tabs/index.tsx
-var import_jsx_runtime75 = require("react/jsx-runtime");
-var mobileTabsMediaQuery = "(max-width: 512px)";
-var getTabButtonClassName = ({
-  enableAnimations,
-  isBarVariant,
-  isActive,
-  isDisabled,
-  size
-}) => {
-  const isSmall = size === "s";
-  return cn(
-    "cursor-pointer disabled:cursor-not-allowed",
-    "relative inline-flex h-full shrink-0 items-center justify-center gap-2 font-agg-sans",
-    isBarVariant ? "hover:text-agg-foreground hover:bg-agg-secondary-hover" : "hover:text-agg-foreground hover:font-bold",
-    getMotionClassName(
-      enableAnimations,
-      "transition-[colors] duration-300 ease-in-out motion-reduce:transition-none"
-    ),
-    isBarVariant ? cn(
-      "min-w-20 overflow-hidden border-r border-agg-separator last:border-r-0",
-      isSmall ? "px-3 text-agg-sm leading-agg-5" : "px-4 text-agg-base leading-agg-6"
-    ) : cn(isSmall ? "px-4 text-agg-sm leading-agg-5" : "px-5 text-agg-base leading-agg-6"),
-    isBarVariant && isActive && "font-agg-bold text-agg-primary",
-    isBarVariant && !isActive && "font-agg-normal text-agg-foreground",
-    !isBarVariant && isActive && "font-agg-bold text-agg-primary",
-    !isBarVariant && !isActive && "font-agg-normal text-agg-foreground",
-    isDisabled && "cursor-not-allowed opacity-60"
-  );
+var resolveVisibleOutcomes = (venueMarkets, maxOutcomes) => {
+  const visibleOutcomesByLabel = /* @__PURE__ */ new Map();
+  venueMarkets.forEach((market) => {
+    sortOutcomes(market.venueMarketOutcomes).forEach((outcome) => {
+      const title = resolveOutcomeTitle(outcome);
+      const normalizedTitle = title.trim().toLowerCase();
+      const nextVisibleOutcome = {
+        venue: market.venue,
+        market,
+        outcome,
+        title
+      };
+      const currentVisibleOutcome = visibleOutcomesByLabel.get(normalizedTitle);
+      if (!currentVisibleOutcome || shouldReplaceVisibleOutcome(currentVisibleOutcome, nextVisibleOutcome)) {
+        visibleOutcomesByLabel.set(normalizedTitle, nextVisibleOutcome);
+      }
+    });
+  });
+  return [...visibleOutcomesByLabel.values()].sort(compareVisibleOutcomeRows).slice(0, Math.max(1, maxOutcomes));
 };
-var Tabs = ({
+var resolveOutcomeTitle = (outcome) => {
+  if (outcome.title && outcome.title.trim())
+    return outcome.title;
+  return outcome.label;
+};
+var selectPrimaryVenueMarket = (venueMarkets) => {
+  if (venueMarkets.length === 0)
+    return void 0;
+  if (venueMarkets.length === 1)
+    return venueMarkets[0];
+  return [...venueMarkets].sort((a, b) => {
+    const aVolume = typeof a.volume === "number" ? a.volume : -1;
+    const bVolume = typeof b.volume === "number" ? b.volume : -1;
+    return bVolume - aVolume;
+  })[0];
+};
+var resolveTileTitle = (event, primaryVenueMarket, titleOverride) => {
+  if (typeof titleOverride === "string" && titleOverride.trim()) {
+    return titleOverride;
+  }
+  if (typeof (primaryVenueMarket == null ? void 0 : primaryVenueMarket.question) === "string" && primaryVenueMarket.question.trim()) {
+    return primaryVenueMarket.question;
+  }
+  return event.title;
+};
+var resolveTileImage = (event, primaryVenueMarket, imageOverride) => {
+  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 event.image === "string" && event.image.trim()) {
+    return event.image;
+  }
+  return void 0;
+};
+var formatCountLabel = (count, singular, plural) => {
+  return `${count} ${count === 1 ? singular : plural}`;
+};
+var getVenueSummary = (venueMarkets) => {
+  const uniqueVenues = Array.from(new Set(venueMarkets.map((market) => market.venue)));
+  return {
+    marketCount: venueMarkets.length,
+    venueCount: uniqueVenues.length,
+    singleVenue: uniqueVenues.length === 1 ? uniqueVenues[0] : void 0
+  };
+};
+var resolveVenueLabel = (venue, venueInfo, labels) => {
+  var _a, _b;
+  if (!venue)
+    return labels.eventItem.venueSingular;
+  return (_b = (_a = venueInfo == null ? void 0 : venueInfo[venue]) == null ? void 0 : _a.label) != null ? _b : labels.venues[venue];
+};
+
+// src/primitives/tabs/index.tsx
+var import_react5 = require("react");
+var import_hooks15 = require("@agg-market/hooks");
+
+// src/primitives/tabs/tabs.utils.ts
+var findNextEnabledIndex = (items, startIndex, direction) => {
+  var _a;
+  if (items.length === 0)
+    return -1;
+  for (let step = 1; step <= items.length; step += 1) {
+    const nextIndex = (startIndex + direction * step + items.length) % items.length;
+    if (!((_a = items[nextIndex]) == null ? void 0 : _a.disabled))
+      return nextIndex;
+  }
+  return -1;
+};
+var findEdgeEnabledIndex = (items, direction) => {
+  var _a;
+  if (direction === 1) {
+    return items.findIndex((item) => !item.disabled);
+  }
+  for (let index = items.length - 1; index >= 0; index -= 1) {
+    if (!((_a = items[index]) == null ? void 0 : _a.disabled))
+      return index;
+  }
+  return -1;
+};
+
+// src/primitives/tabs/index.tsx
+var import_jsx_runtime76 = require("react/jsx-runtime");
+var mobileTabsMediaQuery = "(max-width: 512px)";
+var getTabButtonClassName = ({
+  enableAnimations,
+  isBarVariant,
+  isActive,
+  isDisabled,
+  size
+}) => {
+  const isSmall = size === "s";
+  return cn(
+    "cursor-pointer disabled:cursor-not-allowed",
+    "relative inline-flex h-full shrink-0 items-center justify-center gap-2 font-agg-sans",
+    isBarVariant ? "hover:text-agg-foreground hover:bg-agg-secondary-hover" : "hover:text-agg-foreground hover:font-agg-bold",
+    getMotionClassName(
+      enableAnimations,
+      "transition-[colors] duration-300 ease-in-out motion-reduce:transition-none"
+    ),
+    isBarVariant ? cn(
+      "min-w-20 overflow-hidden border-r border-agg-separator last:border-r-0",
+      isSmall ? "px-3 text-agg-sm leading-agg-5" : "px-4 text-agg-base leading-agg-6"
+    ) : cn(isSmall ? "px-4 text-agg-sm leading-agg-5" : "px-5 text-agg-base leading-agg-6"),
+    isBarVariant && isActive && "font-agg-bold text-agg-primary",
+    isBarVariant && !isActive && "font-agg-normal text-agg-foreground",
+    !isBarVariant && isActive && "font-agg-bold text-agg-primary",
+    !isBarVariant && !isActive && "font-agg-normal text-agg-foreground",
+    isDisabled && "cursor-not-allowed opacity-60"
+  );
+};
+var Tabs = ({
   items,
   value,
   onChange,
@@ -3615,8 +3844,10 @@ var Tabs = ({
   className,
   classNames
 }) => {
-  const labels = (0, import_hooks14.useLabels)();
-  const { enableAnimations } = (0, import_hooks14.useSdkUiConfig)();
+  const labels = (0, import_hooks15.useLabels)();
+  const {
+    features: { enableAnimations }
+  } = (0, import_hooks15.useSdkUiConfig)();
   const buttonRefs = (0, import_react5.useRef)([]);
   const dragStateRef = (0, import_react5.useRef)({
     isPointerDown: false,
@@ -3932,7 +4163,7 @@ var Tabs = ({
     });
   }, [enableAnimations, renderedItems, shouldUseOverflowScroll, value]);
   if (shouldUseOverflowSelect) {
-    return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: cn("w-full", className, classNames == null ? void 0 : classNames.root), children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: cn("w-full", className, classNames == null ? void 0 : classNames.root), children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
       Select,
       {
         ariaLabel,
@@ -3944,7 +4175,7 @@ var Tabs = ({
       }
     ) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
     "div",
     {
       className: cn(
@@ -3955,7 +4186,7 @@ var Tabs = ({
         classNames == null ? void 0 : classNames.root
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
           "div",
           {
             ref: tabListRef,
@@ -3971,7 +4202,7 @@ var Tabs = ({
             children: [
               renderedItems.map((item, index) => {
                 const isActive = item.value === value;
-                return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
+                return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
                   "button",
                   {
                     ref: (buttonElement) => {
@@ -4000,7 +4231,7 @@ var Tabs = ({
                       shouldUseOverflowScroll && !isBarVariant && "snap-start"
                     ),
                     children: [
-                      isBarVariant ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_jsx_runtime75.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+                      isBarVariant ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(import_jsx_runtime76.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
                         "span",
                         {
                           "aria-hidden": true,
@@ -4014,14 +4245,23 @@ var Tabs = ({
                           )
                         }
                       ) }) : null,
-                      item.icon ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: "relative z-10 inline-flex shrink-0 items-center justify-center", children: item.icon }) : null,
-                      /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: "relative z-10 truncate whitespace-nowrap [&::first-letter]:uppercase", children: item.label })
+                      item.icon ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: "relative z-10 inline-flex shrink-0 items-center justify-center empty:hidden", children: item.icon }) : null,
+                      /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+                        "span",
+                        {
+                          className: cn(
+                            "relative z-10 truncate whitespace-nowrap [&::first-letter]:uppercase"
+                          ),
+                          "data-text": item.label,
+                          children: item.label
+                        }
+                      )
                     ]
                   },
                   item.value
                 );
               }),
-              !isBarVariant ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+              !isBarVariant ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
                 "span",
                 {
                   "aria-hidden": true,
@@ -4039,24 +4279,24 @@ var Tabs = ({
             ]
           }
         ),
-        shouldUseOverflowScroll && !isBarVariant ? /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(import_jsx_runtime75.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+        shouldUseOverflowScroll && !isBarVariant ? /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(import_jsx_runtime76.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
             "span",
             {
               "aria-hidden": true,
               className: cn(
-                "pointer-events-none absolute top-0 bottom-0 left-8 z-10 w-12 md:w-18 bg-linear-to-r from-agg-secondary via-agg-secondary to-transparent",
+                "pointer-events-none absolute top-0 bottom-0 left-0 z-10 w-12 md:w-18 bg-linear-to-r from-agg-secondary via-agg-secondary to-transparent",
                 getMotionClassName(enableAnimations, "transition-opacity duration-200"),
                 scrollAffordanceState.showStart ? "opacity-100" : "opacity-0"
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
             "span",
             {
               "aria-hidden": true,
               className: cn(
-                "pointer-events-none absolute top-0 right-8 bottom-0 z-10 w-12 md:w-18 bg-linear-to-l from-agg-secondary via-agg-secondary to-transparent",
+                "pointer-events-none absolute top-0 right-0 bottom-0 z-10 w-12 md:w-18 bg-linear-to-l from-agg-secondary via-agg-secondary to-transparent",
                 getMotionClassName(enableAnimations, "transition-opacity duration-200"),
                 scrollAffordanceState.showEnd ? "opacity-100" : "opacity-0"
               )
@@ -4069,150 +4309,14 @@ var Tabs = ({
 };
 Tabs.displayName = "Tabs";
 
-// src/events/item/event-list-item.utils.ts
-var resolveEventListItemEvent = (fetchedEvent) => {
-  if (!fetchedEvent)
-    return void 0;
-  if (!fetchedEvent.venueMarkets || fetchedEvent.venueMarkets.length === 0)
-    return void 0;
-  return fetchedEvent;
-};
-var normalizeProbability = (value) => {
-  if (typeof value !== "number" || !Number.isFinite(value))
-    return void 0;
-  if (value < 0)
-    return 0;
-  if (value > 1)
-    return 1;
-  return value;
-};
-var hasDateLabel = (outcome) => {
-  return !!toDate(outcome.label);
-};
-var sortOutcomes = (outcomes) => {
-  if (outcomes.length <= 1)
-    return outcomes;
-  const now = Date.now();
-  if (outcomes.some(hasDateLabel)) {
-    return [...outcomes].sort((a, b) => {
-      var _a, _b, _c, _d;
-      const aDate = (_b = (_a = toDate(a.label)) == null ? void 0 : _a.getTime()) != null ? _b : 0;
-      const bDate = (_d = (_c = toDate(b.label)) == null ? void 0 : _c.getTime()) != null ? _d : 0;
-      return Math.abs(aDate - now) - Math.abs(bDate - now);
-    });
-  }
-  return [...outcomes].sort((a, b) => {
-    var _a, _b;
-    const aPrice = (_a = normalizeProbability(a.price)) != null ? _a : 0;
-    const bPrice = (_b = normalizeProbability(b.price)) != null ? _b : 0;
-    return bPrice - aPrice;
-  });
-};
-var compareVisibleOutcomeRows = (left, right) => {
-  var _a, _b;
-  const leftDate = toDate(resolveOutcomeTitle(left.outcome));
-  const rightDate = toDate(resolveOutcomeTitle(right.outcome));
-  if (leftDate && rightDate) {
-    return leftDate.getTime() - rightDate.getTime();
-  }
-  const leftProbability = (_a = normalizeProbability(left.outcome.price)) != null ? _a : -1;
-  const rightProbability = (_b = normalizeProbability(right.outcome.price)) != null ? _b : -1;
-  return rightProbability - leftProbability;
-};
-var shouldReplaceVisibleOutcome = (current, next) => {
-  var _a, _b;
-  const currentVolume = typeof current.market.volume === "number" ? current.market.volume : -1;
-  const nextVolume = typeof next.market.volume === "number" ? next.market.volume : -1;
-  if (currentVolume !== nextVolume) {
-    return nextVolume > currentVolume;
-  }
-  const currentProbability = (_a = normalizeProbability(current.outcome.price)) != null ? _a : -1;
-  const nextProbability = (_b = normalizeProbability(next.outcome.price)) != null ? _b : -1;
-  return nextProbability > currentProbability;
-};
-var resolveVisibleOutcomes = (venueMarkets, maxOutcomes) => {
-  const visibleOutcomesByLabel = /* @__PURE__ */ new Map();
-  venueMarkets.forEach((market) => {
-    sortOutcomes(market.venueMarketOutcomes).forEach((outcome) => {
-      const title = resolveOutcomeTitle(outcome);
-      const normalizedTitle = title.trim().toLowerCase();
-      const nextVisibleOutcome = {
-        venue: market.venue,
-        market,
-        outcome,
-        title
-      };
-      const currentVisibleOutcome = visibleOutcomesByLabel.get(normalizedTitle);
-      if (!currentVisibleOutcome || shouldReplaceVisibleOutcome(currentVisibleOutcome, nextVisibleOutcome)) {
-        visibleOutcomesByLabel.set(normalizedTitle, nextVisibleOutcome);
-      }
-    });
-  });
-  return [...visibleOutcomesByLabel.values()].sort(compareVisibleOutcomeRows).slice(0, Math.max(1, maxOutcomes));
-};
-var resolveOutcomeTitle = (outcome) => {
-  if (outcome.title && outcome.title.trim())
-    return outcome.title;
-  return outcome.label;
-};
-var selectPrimaryVenueMarket = (venueMarkets) => {
-  if (venueMarkets.length === 0)
-    return void 0;
-  if (venueMarkets.length === 1)
-    return venueMarkets[0];
-  return [...venueMarkets].sort((a, b) => {
-    const aVolume = typeof a.volume === "number" ? a.volume : -1;
-    const bVolume = typeof b.volume === "number" ? b.volume : -1;
-    return bVolume - aVolume;
-  })[0];
-};
-var resolveTileTitle = (event, primaryVenueMarket, titleOverride) => {
-  if (typeof titleOverride === "string" && titleOverride.trim()) {
-    return titleOverride;
-  }
-  if (typeof (primaryVenueMarket == null ? void 0 : primaryVenueMarket.question) === "string" && primaryVenueMarket.question.trim()) {
-    return primaryVenueMarket.question;
-  }
-  return event.title;
-};
-var resolveTileImage = (event, primaryVenueMarket, imageOverride) => {
-  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 event.image === "string" && event.image.trim()) {
-    return event.image;
-  }
-  return void 0;
-};
-var formatCountLabel = (count, singular, plural) => {
-  return `${count} ${count === 1 ? singular : plural}`;
-};
-var getVenueSummary = (venueMarkets) => {
-  const uniqueVenues = Array.from(new Set(venueMarkets.map((market) => market.venue)));
-  return {
-    marketCount: venueMarkets.length,
-    venueCount: uniqueVenues.length,
-    singleVenue: uniqueVenues.length === 1 ? uniqueVenues[0] : void 0
-  };
-};
-var resolveVenueLabel = (venue, venueInfo, labels) => {
-  var _a, _b;
-  if (!venue)
-    return labels.eventItem.venueSingular;
-  return (_b = (_a = venueInfo == null ? void 0 : venueInfo[venue]) == null ? void 0 : _a.label) != null ? _b : labels.venues[venue];
-};
-
 // src/events/item/index.tsx
-var import_jsx_runtime76 = require("react/jsx-runtime");
+var import_jsx_runtime77 = require("react/jsx-runtime");
 var EventListItemLoadingState = ({
   classNames,
   ariaLabel
 }) => {
-  const labels = (0, import_hooks15.useLabels)();
-  return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+  const labels = (0, import_hooks16.useLabels)();
+  return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
     Skeleton,
     {
       view: "event-list-item",
@@ -4225,16 +4329,16 @@ var EventListItemUnavailableState = ({
   classNames,
   ariaLabel
 }) => {
-  const labels = (0, import_hooks15.useLabels)();
-  return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+  const labels = (0, import_hooks16.useLabels)();
+  return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
     Card,
     {
       className: cn(baseCardClassName, classNames == null ? void 0 : classNames.root),
       role: "status",
       "aria-label": ariaLabel != null ? ariaLabel : labels.eventItem.unavailableAria,
-      children: /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: cn("flex flex-col gap-1", classNames == null ? void 0 : classNames.header), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Typography, { variant: "body-large-strong", className: cn("truncate", classNames == null ? void 0 : classNames.title), children: labels.eventItem.unavailableTitle }),
-        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Typography, { variant: "body", className: "text-agg-muted-foreground", children: labels.eventItem.unavailableDescription })
+      children: /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: cn("flex flex-col gap-1", classNames == null ? void 0 : classNames.header), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(Typography, { variant: "body-large-strong", className: cn("truncate", classNames == null ? void 0 : classNames.title), children: labels.eventItem.unavailableTitle }),
+        /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(Typography, { variant: "body", className: "text-agg-muted-foreground", children: labels.eventItem.unavailableDescription })
       ] })
     }
   );
@@ -4243,8 +4347,8 @@ var EventListItemNotFoundState = ({
   classNames,
   ariaLabel
 }) => {
-  const labels = (0, import_hooks15.useLabels)();
-  return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Card, { className: cn("w-full gap-0 overflow-hidden p-0", classNames == null ? void 0 : classNames.root), children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+  const labels = (0, import_hooks16.useLabels)();
+  return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(Card, { className: cn("w-full gap-0 overflow-hidden p-0", classNames == null ? void 0 : classNames.root), children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
     StateMessage,
     {
       ariaLabel: ariaLabel != null ? ariaLabel : labels.eventItemDetails.notFoundAria,
@@ -4258,7 +4362,6 @@ var EventListItemContent = ({
   event,
   title,
   image,
-  showVenueLogo = true,
   maxOutcomes = 2,
   classNames,
   venueInfo,
@@ -4267,8 +4370,8 @@ var EventListItemContent = ({
   ariaLabel
 }) => {
   var _a;
-  const config = (0, import_hooks15.useSdkUiConfig)();
-  const labels = (0, import_hooks15.useLabels)();
+  const config = (0, import_hooks16.useSdkUiConfig)();
+  const labels = (0, import_hooks16.useLabels)();
   const allVenueMarkets = (0, import_react6.useMemo)(() => {
     return event.venueMarkets;
   }, [event.venueMarkets]);
@@ -4288,23 +4391,23 @@ var EventListItemContent = ({
     return Array.from(new Set(allVenueMarkets.map((market) => market.venue))).slice(0, 4);
   }, [allVenueMarkets]);
   const resolvedVolume = typeof event.volume === "number" ? event.volume : (_a = primaryVenueMarket == null ? void 0 : primaryVenueMarket.volume) != null ? _a : void 0;
-  const volumeLabel = typeof resolvedVolume === "number" ? `${config.formatCompactCurrency(resolvedVolume)} ${labels.eventItem.volumeSuffix}` : "";
+  const volumeLabel = typeof resolvedVolume === "number" ? `${config.formatting.formatCompactCurrency(resolvedVolume)} ${labels.eventItem.volumeSuffix}` : "";
   const handleKeyDown = (eventToHandle) => {
     if (!onClick)
       return;
     if ((eventToHandle == null ? void 0 : eventToHandle.key) === "Enter" || (eventToHandle == null ? void 0 : eventToHandle.key) === " ") {
       eventToHandle == null ? void 0 : eventToHandle.preventDefault();
-      onClick();
+      onClick == null ? void 0 : onClick(event);
     }
   };
   const renderArbitrage = (value) => {
     if (value == null)
       return null;
-    if (Math.abs(value) < config.arbitrageThreshold)
+    if (Math.abs(value) < config.market.arbitrageThreshold)
       return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: cn("flex items-center gap-1", "text-agg-success"), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Typography, { variant: "label-strong", className: "text-agg-success", children: config.formatPercent(value) }),
-      /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: cn("flex items-center gap-1", "text-agg-success"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(Typography, { variant: "label-strong", className: "text-agg-success", children: config.formatting.formatPercent(value) }),
+      /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
         Icon,
         {
           name: "triangle-up",
@@ -4315,18 +4418,18 @@ var EventListItemContent = ({
       )
     ] });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(
     Card,
     {
       className: cn(baseCardClassName, onClick && "cursor-pointer", classNames == null ? void 0 : classNames.root),
       role: onClick ? "button" : void 0,
       tabIndex: onClick ? 0 : void 0,
-      onClick,
+      onClick: () => onClick == null ? void 0 : onClick(event),
       onKeyDown: handleKeyDown,
       "aria-label": ariaLabel != null ? ariaLabel : resolvedTitle,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: cn("flex items-center gap-3", classNames == null ? void 0 : classNames.header), children: [
-          resolvedImage ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: cn("flex items-center gap-3", classNames == null ? void 0 : classNames.header), children: [
+          resolvedImage ? /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
             RemoteImage,
             {
               src: resolvedImage,
@@ -4334,7 +4437,7 @@ var EventListItemContent = ({
               className: cn("h-10 w-10", "rounded-agg-lg object-cover")
             }
           ) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
             Typography,
             {
               variant: "body-strong",
@@ -4347,13 +4450,13 @@ var EventListItemContent = ({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: cn("flex flex-col gap-3", classNames == null ? void 0 : classNames.outcomes), children: visibleOutcomes.map((visibleOutcome) => {
+        /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: cn("flex flex-col gap-3", classNames == null ? void 0 : classNames.outcomes), children: visibleOutcomes.map((visibleOutcome) => {
           const probability = normalizeProbability(visibleOutcome.outcome.price);
           const showBadge = typeof probability === "number";
           const arbitragePercent = arbitrageByOutcomeId == null ? void 0 : arbitrageByOutcomeId[visibleOutcome.outcome.id];
           const outcomeTitle = resolveOutcomeTitle(visibleOutcome.outcome);
           const formattedTitle = (0, import_dayjs2.default)(outcomeTitle).isValid() ? (0, import_dayjs2.default)(outcomeTitle).format("MMMM D, YYYY") : outcomeTitle;
-          return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(
             "div",
             {
               className: cn(
@@ -4361,7 +4464,7 @@ var EventListItemContent = ({
                 classNames == null ? void 0 : classNames.outcomeRow
               ),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
                   Typography,
                   {
                     variant: "body",
@@ -4369,13 +4472,13 @@ var EventListItemContent = ({
                     children: formattedTitle
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "flex flex-row gap-3 items-center justify-end", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: "flex flex-row gap-3 items-center justify-end", children: [
                   renderArbitrage(arbitragePercent),
-                  showBadge ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+                  showBadge ? /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
                     Badge,
                     {
-                      text: config.formatPercent(probability),
-                      prefix: showVenueLogo ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(VenueLogo, { venue: visibleOutcome.venue, size: "small" }) : void 0,
+                      text: config.formatting.formatPercent(probability),
+                      prefix: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(VenueLogo, { venue: visibleOutcome.venue, size: "small" }),
                       size: "large",
                       classNames: {
                         root: cn(
@@ -4391,7 +4494,7 @@ var EventListItemContent = ({
             `${visibleOutcome.market.id}-${visibleOutcome.outcome.id}`
           );
         }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(
           "div",
           {
             className: cn(
@@ -4400,15 +4503,15 @@ var EventListItemContent = ({
               classNames == null ? void 0 : classNames.footer
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: cn("flex items-center gap-1", "text-agg-sm leading-agg-5"), children: [
-                /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: "truncate text-agg-muted-foreground", children: formatCountLabel(
+              /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: cn("flex items-center gap-1", "text-agg-sm leading-agg-5"), children: [
+                /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("span", { className: "truncate text-agg-muted-foreground", children: formatCountLabel(
                   marketCount,
                   labels.eventItem.marketSingular,
                   labels.eventItem.marketPlural
                 ) }),
-                /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: "text-agg-muted-foreground", children: "\xD7" }),
-                singleVenue ? /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("span", { className: "flex items-center gap-1 truncate text-agg-muted-foreground", children: [
-                  showVenueLogo ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("span", { className: "text-agg-muted-foreground", children: "\xD7" }),
+                singleVenue ? /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("span", { className: "flex items-center gap-1 truncate text-agg-muted-foreground", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
                     VenueLogo,
                     {
                       venue: singleVenue,
@@ -4416,14 +4519,14 @@ var EventListItemContent = ({
                       isMonochromatic: true,
                       className: "text-agg-muted-foreground!"
                     }
-                  ) : null,
-                  /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { children: venueLabel })
-                ] }) : /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: "truncate text-agg-muted-foreground", children: formatCountLabel(
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("span", { children: venueLabel })
+                ] }) : /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("span", { className: "truncate text-agg-muted-foreground", children: formatCountLabel(
                   venueCount,
                   labels.eventItem.venueSingular,
                   labels.eventItem.venuePlural
                 ) }),
-                showVenueLogo && !singleVenue && visibleVenueLogos.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: "flex items-center gap-1 overflow-hidden", children: visibleVenueLogos.map((venue) => /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+                !singleVenue && visibleVenueLogos.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("span", { className: "flex items-center gap-1 overflow-hidden", children: visibleVenueLogos.map((venue) => /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
                   VenueLogo,
                   {
                     venue,
@@ -4434,7 +4537,7 @@ var EventListItemContent = ({
                   venue
                 )) }) : null
               ] }),
-              volumeLabel ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Typography, { variant: "label", className: "text-agg-sm text-agg-muted-foreground", children: volumeLabel }) : null
+              volumeLabel ? /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(Typography, { variant: "label", className: "text-agg-sm text-agg-muted-foreground", children: volumeLabel }) : null
             ]
           }
         )
@@ -4453,7 +4556,7 @@ var EventListItemByEventId = (_a) => {
     error,
     isError,
     isLoading
-  } = (0, import_hooks15.useVenueEvent)({
+  } = (0, import_hooks16.useVenueEvent)({
     eventId: eventId != null ? eventId : "",
     enabled: !!eventId
   });
@@ -4461,48 +4564,48 @@ var EventListItemByEventId = (_a) => {
     return resolveEventListItemEvent(fetchedEvent);
   }, [fetchedEvent]);
   if (!eventId) {
-    return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(EventListItemUnavailableState, { classNames: rest.classNames, ariaLabel: rest.ariaLabel });
+    return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(EventListItemUnavailableState, { classNames: rest.classNames, ariaLabel: rest.ariaLabel });
   }
   if (isLoading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(EventListItemLoadingState, { classNames: rest.classNames, ariaLabel: rest.ariaLabel });
+    return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(EventListItemLoadingState, { classNames: rest.classNames, ariaLabel: rest.ariaLabel });
   }
   if (isErrorWithStatus(error, 404)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(EventListItemNotFoundState, { classNames: rest.classNames, ariaLabel: rest.ariaLabel });
+    return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(EventListItemNotFoundState, { classNames: rest.classNames, ariaLabel: rest.ariaLabel });
   }
   if (!fetchedEvent && !isError) {
-    return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(EventListItemLoadingState, { classNames: rest.classNames, ariaLabel: rest.ariaLabel });
+    return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(EventListItemLoadingState, { classNames: rest.classNames, ariaLabel: rest.ariaLabel });
   }
   if (!resolvedEvent) {
-    return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(EventListItemUnavailableState, { classNames: rest.classNames, ariaLabel: rest.ariaLabel });
+    return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(EventListItemUnavailableState, { classNames: rest.classNames, ariaLabel: rest.ariaLabel });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(EventListItemContent, __spreadValues({ event: resolvedEvent }, rest));
+  return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(EventListItemContent, __spreadValues({ event: resolvedEvent }, rest));
 };
 var EventListItem = (props) => {
   if (props.isLoading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(EventListItemLoadingState, { classNames: props.classNames, ariaLabel: props.ariaLabel });
+    return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(EventListItemLoadingState, { classNames: props.classNames, ariaLabel: props.ariaLabel });
   }
   if ("event" in props && props.event) {
     const _a = props, { event } = _a, rest = __objRest(_a, ["event"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(EventListItemContent, __spreadValues({ event }, rest));
+    return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(EventListItemContent, __spreadValues({ event }, rest));
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(EventListItemByEventId, __spreadValues({}, props));
+  return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(EventListItemByEventId, __spreadValues({}, props));
 };
 EventListItem.displayName = "EventListItem";
 
 // src/events/item-details/index.tsx
 var import_react8 = require("react");
-var import_hooks17 = require("@agg-market/hooks");
+var import_hooks18 = require("@agg-market/hooks");
 
 // src/primitives/chart/chart-type-switch.tsx
-var import_hooks16 = require("@agg-market/hooks");
+var import_hooks17 = require("@agg-market/hooks");
 var import_react7 = require("react");
-var import_jsx_runtime77 = require("react/jsx-runtime");
+var import_jsx_runtime78 = require("react/jsx-runtime");
 var ChartTypeSwitch = ({
   value,
   onValueChange,
   className
 }) => {
-  const labels = (0, import_hooks16.useLabels)();
+  const labels = (0, import_hooks17.useLabels)();
   const options = (0, import_react7.useMemo)(
     () => [
       {
@@ -4531,7 +4634,7 @@ var ChartTypeSwitch = ({
     }
     onValueChange(nextOption.value);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
     "div",
     {
       className: cn("inline-flex items-center gap-2", className),
@@ -4539,7 +4642,7 @@ var ChartTypeSwitch = ({
       "aria-label": labels.common.chartTypeSwitchAria,
       children: options.map((option, index) => {
         const isActive = option.value === value;
-        return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
           "button",
           {
             type: "button",
@@ -4554,7 +4657,9 @@ var ChartTypeSwitch = ({
               "transition-colors duration-200 ease-in-out",
               isActive ? "text-agg-foreground" : "text-agg-muted-foreground"
             ),
-            onClick: () => {
+            onClick: (e) => {
+              e.stopPropagation();
+              e.preventDefault();
               if (isActive) {
                 return;
               }
@@ -4563,7 +4668,7 @@ var ChartTypeSwitch = ({
             onKeyDown: (event) => {
               handleKeyDown(event, index);
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(Icon, { name: option.iconName, color: "currentColor", className: "h-5 w-5" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Icon, { name: option.iconName, color: "currentColor", className: "h-5 w-5" })
           },
           option.value
         );
@@ -4583,14 +4688,9 @@ var isDateLikeLabel = (value) => {
     return false;
   return (0, import_dayjs3.default)(value).isValid();
 };
-var formatDateLabel = (value) => {
-  if (!isDateLikeLabel(value))
-    return value;
-  return (0, import_dayjs3.default)(value).format("MMM D, YYYY");
-};
-var getDefaultSelectedTimeRange = (value) => {
+var getDefaultSelectedTimeRange = (value, fallback = "1D") => {
   if (!value)
-    return "1M";
+    return fallback;
   return value;
 };
 var getTimeWindowByRange = (range) => {
@@ -4672,24 +4772,6 @@ var resolveOutcomesByVenue = (venueMarkets, selectedOutcomeLabel) => {
     };
   }).filter((item) => item != null);
 };
-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());
-    }
-    (_b = marketIdByVenue.get(venue)) == null ? void 0 : _b.add(canonicalMarketId);
-  });
-  return [...marketIdByVenue.entries()].map(([venue, marketIds]) => ({
-    venue,
-    venueMarketOutcomeIds: [...marketIds]
-  })).filter((group) => group.venueMarketOutcomeIds.length > 0);
-};
 var resolveSeriesColor = (venue, index) => {
   var _a;
   const colorFromVenue = lineColorByVenue[venue];
@@ -4697,15 +4779,107 @@ var resolveSeriesColor = (venue, index) => {
     return colorFromVenue;
   return (_a = fallbackLineColors[index % fallbackLineColors.length]) != null ? _a : "#2e5cff";
 };
+var toNonEmptyString = (value) => {
+  if (typeof value !== "string")
+    return void 0;
+  const trimmedValue = value.trim();
+  return trimmedValue ? trimmedValue : void 0;
+};
+var resolveCanonicalMarketId = (venueMarkets, fallbackMarketId) => {
+  var _a;
+  const uniqueMarketIds = Array.from(
+    new Set(venueMarkets.map((market) => toNonEmptyString(market.marketId)).filter(Boolean))
+  );
+  if (uniqueMarketIds.length === 1) {
+    return uniqueMarketIds[0];
+  }
+  return (_a = toNonEmptyString(fallbackMarketId)) != null ? _a : uniqueMarketIds[0];
+};
+var toChartDisplayValue = (value, transformProbability) => {
+  if (value == null || !Number.isFinite(value))
+    return void 0;
+  return transformProbability(value) * 100;
+};
+var marketChartCandleToLineChartPoint = (candle, transformProbability) => {
+  var _a, _b, _c, _d;
+  const open = (_a = toChartDisplayValue(candle.open, transformProbability)) != null ? _a : 0;
+  const high = (_b = toChartDisplayValue(candle.high, transformProbability)) != null ? _b : open;
+  const low = (_c = toChartDisplayValue(candle.low, transformProbability)) != null ? _c : open;
+  const close = (_d = toChartDisplayValue(candle.close, transformProbability)) != null ? _d : open;
+  return {
+    time: candle.time,
+    value: close,
+    open,
+    high,
+    low,
+    close
+  };
+};
+var marketChartCandleToScaledCandlePoint = (candle, transformProbability) => {
+  var _a, _b, _c, _d;
+  const point = marketChartCandleToLineChartPoint(candle, transformProbability);
+  return {
+    time: point.time,
+    open: (_a = point.open) != null ? _a : point.value,
+    high: (_b = point.high) != null ? _b : point.value,
+    low: (_c = point.low) != null ? _c : point.value,
+    close: (_d = point.close) != null ? _d : point.value,
+    v: candle.volume
+  };
+};
+var resolveMarketChartVenueSeries = ({
+  chartData,
+  transformProbability
+}) => {
+  if (!chartData)
+    return [];
+  return Object.entries(chartData.venues).map(([venue, venueData]) => ({
+    venue,
+    points: venueData.candles.map(
+      (candle) => marketChartCandleToLineChartPoint(candle, transformProbability)
+    )
+  })).filter((item) => item.points.length > 0);
+};
+var resolveMarketChartLiveState = ({
+  chartData,
+  selectedVenue,
+  transformProbability
+}) => {
+  var _a, _b;
+  if (!chartData) {
+    return {
+      liveCandle: null,
+      lineValue: void 0,
+      live: false
+    };
+  }
+  const venueEntries = selectedVenue ? Object.entries(chartData.venues).filter(([venue]) => venue === selectedVenue) : Object.entries(chartData.venues);
+  if (venueEntries.length === 0) {
+    return {
+      liveCandle: null,
+      lineValue: void 0,
+      live: false
+    };
+  }
+  const singleVenueView = selectedVenue != null || venueEntries.length === 1;
+  const liveCandleEntry = singleVenueView ? venueEntries.find(([, venueData]) => venueData.liveCandle != null) : null;
+  const primaryLineValue = (_b = (_a = venueEntries[0]) == null ? void 0 : _a[1]) == null ? void 0 : _b.lineValue;
+  const lineValue = primaryLineValue != null ? toChartDisplayValue(primaryLineValue, transformProbability) : void 0;
+  return {
+    liveCandle: (liveCandleEntry == null ? void 0 : liveCandleEntry[1].liveCandle) ? marketChartCandleToScaledCandlePoint(liveCandleEntry[1].liveCandle, transformProbability) : null,
+    lineValue,
+    live: liveCandleEntry != null
+  };
+};
 
 // src/events/item-details/index.tsx
-var import_jsx_runtime78 = require("react/jsx-runtime");
+var import_jsx_runtime79 = require("react/jsx-runtime");
 var EventListItemDetailsLoadingState = ({
   classNames,
   ariaLabel
 }) => {
-  const labels = (0, import_hooks17.useLabels)();
-  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+  const labels = (0, import_hooks18.useLabels)();
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
     Skeleton,
     {
       view: "event-list-item-details",
@@ -4718,16 +4892,16 @@ var EventListItemDetailsUnavailableState = ({
   classNames,
   ariaLabel
 }) => {
-  const labels = (0, import_hooks17.useLabels)();
-  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+  const labels = (0, import_hooks18.useLabels)();
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
     Card,
     {
       className: cn(detailsBaseCardClassName, classNames == null ? void 0 : classNames.root),
       role: "status",
       "aria-label": ariaLabel != null ? ariaLabel : labels.eventItemDetails.unavailableAria,
-      children: /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: cn("flex flex-col gap-1", classNames == null ? void 0 : classNames.header), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Typography, { variant: "body-large-strong", className: cn("truncate", classNames == null ? void 0 : classNames.title), children: labels.eventItemDetails.unavailableTitle }),
-        /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Typography, { variant: "body", className: "text-agg-muted-foreground", children: labels.eventItemDetails.unavailableDescription })
+      children: /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: cn("flex flex-col gap-1", classNames == null ? void 0 : classNames.header), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Typography, { variant: "body-large-strong", className: cn("truncate", classNames == null ? void 0 : classNames.title), children: labels.eventItemDetails.unavailableTitle }),
+        /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Typography, { variant: "body", className: "text-agg-muted-foreground", children: labels.eventItemDetails.unavailableDescription })
       ] })
     }
   );
@@ -4736,8 +4910,8 @@ var EventListItemDetailsNotFoundState = ({
   classNames,
   ariaLabel
 }) => {
-  const labels = (0, import_hooks17.useLabels)();
-  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Card, { className: cn(detailsBaseCardClassName, classNames == null ? void 0 : classNames.root), children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+  const labels = (0, import_hooks18.useLabels)();
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Card, { className: cn(detailsBaseCardClassName, classNames == null ? void 0 : classNames.root), children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
     StateMessage,
     {
       ariaLabel: ariaLabel != null ? ariaLabel : labels.eventItemDetails.notFoundAria,
@@ -4761,31 +4935,25 @@ var resolveAverageProbability = (values) => {
     return void 0;
   return validValues.reduce((sum, value) => sum + value, 0) / validValues.length;
 };
-var resolveOutcomeCandidateIds = (market, outcome) => {
-  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,
   isDateOutcomeMarket,
   classNames,
-  showVenueLogo,
   venueInfo,
   formatPercent,
   selectedTimeRange,
-  selectedChartType
+  selectedChartType,
+  selectedOutcome: _selectedOutcome,
+  selectedMarket
 }) => {
-  const labels = (0, import_hooks17.useLabels)();
+  var _a, _b;
+  const labels = (0, import_hooks18.useLabels)();
+  const {
+    features: { enableLiveUpdates }
+  } = (0, import_hooks18.useSdkUiConfig)();
   const [selectedVenue, setSelectedVenue] = (0, import_react8.useState)(null);
   const [activeProbabilityMode, setActiveProbabilityMode] = (0, import_react8.useState)("yes");
   const probabilityModeConfigs = (0, import_react8.useMemo)(() => {
@@ -4854,105 +5022,71 @@ var EventListItemDetailsGraphSection = ({
       no: buildModeData("no")
     };
   }, [labels, probabilityModeConfigs, selectedOutcomesByMode, venueInfo]);
-  const allOutcomesForHistory = (0, import_react8.useMemo)(() => {
-    const outcomeByModeAndId = /* @__PURE__ */ new Map();
-    probabilityModeOrder.forEach((mode) => {
-      selectedOutcomesByMode[mode].forEach((outcomeByVenue) => {
-        outcomeByModeAndId.set(
-          `${outcomeByVenue.venue}:${outcomeByVenue.outcome.id}`,
-          outcomeByVenue
-        );
-      });
-    });
-    return [...outcomeByModeAndId.values()];
-  }, [selectedOutcomesByMode]);
-  const priceHistoryGroups = (0, import_react8.useMemo)(() => {
-    return buildPriceHistoryGroups(allOutcomesForHistory, canonicalMarketId);
-  }, [allOutcomesForHistory, canonicalMarketId]);
   const timeWindow = (0, import_react8.useMemo)(() => {
     return getTimeWindowByRange(selectedTimeRange);
-  }, [selectedTimeRange]);
-  const {
-    data: priceHistoryData,
-    isLoading: isPriceHistoryLoading,
-    error: priceHistoryError,
-    results: priceHistoryResults
-  } = (0, import_hooks17.usePriceHistory)(__spreadProps(__spreadValues({
-    groups: priceHistoryGroups
-  }, timeWindow), {
-    enabled: priceHistoryGroups.length > 0
-  }));
-  const priceHistoryByVenue = (0, import_react8.useMemo)(() => {
-    const historyByVenue = /* @__PURE__ */ new Map();
-    if (!(priceHistoryData == null ? void 0 : priceHistoryData.length)) {
-      return historyByVenue;
-    }
-    priceHistoryData.forEach((historyItem) => {
-      const venue = historyItem.venue;
-      const venueHistory = historyByVenue.get(venue);
-      if (venueHistory) {
-        venueHistory.push(historyItem);
-        return;
-      }
-      historyByVenue.set(venue, [historyItem]);
-    });
-    return historyByVenue;
-  }, [priceHistoryData]);
-  const chartSeriesByMode = (0, import_react8.useMemo)(() => {
-    const buildSeries = (mode) => {
-      const modeConfig = probabilityModeConfigs[mode];
-      const chartSeries = [];
-      normalizedVenueDataByMode[mode].forEach((venueData) => {
-        var _a;
-        const venueHistory = priceHistoryByVenue.get(venueData.venue);
-        if (!(venueHistory == null ? void 0 : venueHistory.length))
-          return;
-        const candidateIds = resolveOutcomeCandidateIds(venueData.market, venueData.outcome);
-        const matchingHistory = (_a = venueHistory.find((historyItem) => candidateIds.includes(historyItem.marketId))) != null ? _a : venueHistory.length === 1 ? venueHistory[0] : void 0;
-        if (!matchingHistory)
-          return;
-        const points = matchingHistory.points.map((point) => {
-          const probability = normalizeProbability(point.price);
-          if (probability == null || !Number.isFinite(point.timestamp))
-            return null;
-          const open = normalizeProbability(point.open);
-          const high = normalizeProbability(point.high);
-          const low = normalizeProbability(point.low);
-          const close = normalizeProbability(point.close);
-          const transformedPoint = {
-            time: point.timestamp,
-            value: clampProbability(modeConfig.transformProbability(probability)) * 100,
-            open: open == null ? void 0 : clampProbability(modeConfig.transformProbability(open)) * 100,
-            high: high == null ? void 0 : clampProbability(modeConfig.transformProbability(high)) * 100,
-            low: low == null ? void 0 : clampProbability(modeConfig.transformProbability(low)) * 100,
-            close: close == null ? void 0 : clampProbability(modeConfig.transformProbability(close)) * 100
-          };
-          return transformedPoint;
-        }).filter((point) => point != null);
-        if (points.length === 0)
-          return;
-        chartSeries.push({
-          id: `${mode}-${venueData.venue}-${matchingHistory.marketId}`,
-          venue: venueData.venue,
-          color: venueData.color,
-          points,
-          lineWidth: 2,
-          lineStyle: "solid"
-        });
-      });
-      return chartSeries;
-    };
-    return {
-      yes: buildSeries("yes"),
-      no: buildSeries("no")
-    };
-  }, [normalizedVenueDataByMode, priceHistoryByVenue, probabilityModeConfigs]);
+  }, [selectedTimeRange]);
+  const activeOutcomes = selectedOutcomesByMode[activeProbabilityMode];
+  const activeCanonicalMarketId = (0, import_react8.useMemo)(() => {
+    return resolveCanonicalMarketId(activeOutcomes.map((item) => item.market));
+  }, [activeOutcomes]);
+  const venueMarketIds = (0, import_react8.useMemo)(() => {
+    return activeOutcomes.map((item) => item.market.id);
+  }, [activeOutcomes]);
+  const {
+    data: marketChartData,
+    isLoading: isMarketChartLoading,
+    error: marketChartError,
+    refetch: refetchMarketChart
+  } = (0, import_hooks18.useMarketChart)({
+    marketId: (_a = selectedMarket == null ? void 0 : selectedMarket.id) != null ? _a : null,
+    venueMarketIds,
+    interval: (0, import_hooks18.timeRangeToInterval)(selectedTimeRange),
+    startTs: timeWindow.startTs * 1e3,
+    endTs: timeWindow.endTs * 1e3,
+    enabled: !!(selectedMarket == null ? void 0 : selectedMarket.id),
+    live: enableLiveUpdates
+  });
   const visibleChartSeries = (0, import_react8.useMemo)(() => {
-    const modeSeries = chartSeriesByMode[activeProbabilityMode];
+    const transformProbability = probabilityModeConfigs[activeProbabilityMode].transformProbability;
+    const colorByVenue = new Map(
+      normalizedVenueDataByMode[activeProbabilityMode].map((venueData) => [
+        venueData.venue,
+        venueData.color
+      ])
+    );
+    const series = resolveMarketChartVenueSeries({
+      chartData: marketChartData,
+      transformProbability
+    }).map((seriesItem) => {
+      var _a2;
+      const resolvedVenue = seriesItem.venue;
+      return {
+        id: `${activeProbabilityMode}-${resolvedVenue}-${activeCanonicalMarketId != null ? activeCanonicalMarketId : "chart"}`,
+        venue: resolvedVenue,
+        color: (_a2 = colorByVenue.get(resolvedVenue)) != null ? _a2 : resolveSeriesColor(resolvedVenue, 0),
+        points: seriesItem.points,
+        lineWidth: 2,
+        lineStyle: "solid"
+      };
+    });
     if (!selectedVenue)
-      return modeSeries;
-    return modeSeries.filter((seriesItem) => seriesItem.venue === selectedVenue);
-  }, [activeProbabilityMode, chartSeriesByMode, selectedVenue]);
+      return series;
+    return series.filter((seriesItem) => seriesItem.venue === selectedVenue);
+  }, [
+    activeCanonicalMarketId,
+    activeProbabilityMode,
+    marketChartData,
+    normalizedVenueDataByMode,
+    probabilityModeConfigs,
+    selectedVenue
+  ]);
+  const chartLiveState = (0, import_react8.useMemo)(() => {
+    return resolveMarketChartLiveState({
+      chartData: marketChartData,
+      selectedVenue,
+      transformProbability: probabilityModeConfigs[activeProbabilityMode].transformProbability
+    });
+  }, [activeProbabilityMode, marketChartData, probabilityModeConfigs, selectedVenue]);
   const segmentedDisplayItems = (0, import_react8.useMemo)(() => {
     return probabilityModeOrder.map((mode) => {
       const averageProbability = resolveAverageProbability(
@@ -4990,48 +5124,41 @@ var EventListItemDetailsGraphSection = ({
       return venue;
     });
   };
-  const handleRetryPriceHistory = () => {
-    void Promise.all(priceHistoryResults.map((result) => result.refetch()));
+  const handleRetryMarketChart = () => {
+    void refetchMarketChart();
   };
-  if (priceHistoryError) {
-    return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
-      "div",
+  if (marketChartError) {
+    return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: cn("w-full", classNames == null ? void 0 : classNames.chart), children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+      StateMessage,
       {
-        className: cn(
-          "w-full rounded-agg-xl border border-agg-separator bg-agg-secondary",
-          classNames == null ? void 0 : classNames.chart
-        ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
-          StateMessage,
-          {
-            ariaLabel: labels.eventItemDetails.chartUnavailableAria,
-            tone: "warning",
-            title: labels.eventItemDetails.chartUnavailableTitle,
-            description: labels.eventItemDetails.chartUnavailableDescription,
-            actionLabel: labels.common.retry,
-            onAction: handleRetryPriceHistory,
-            className: "min-h-[300px] px-5 py-10 md:px-10"
-          }
-        )
+        tone: "warning",
+        ariaLabel: labels.eventItemDetails.chartUnavailableAria,
+        title: labels.eventItemDetails.chartUnavailableTitle,
+        description: labels.eventItemDetails.chartUnavailableDescription,
+        actionLabel: labels.common.retry,
+        onAction: handleRetryMarketChart,
+        className: "min-h-[300px] px-5 py-10 md:px-10"
       }
-    );
+    ) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
     LineChart,
     {
       classNames: { root: classNames == null ? void 0 : classNames.chart },
       series: visibleChartSeries,
       height: 300,
-      isLoading: isPriceHistoryLoading,
+      isLoading: isMarketChartLoading,
       chartType: selectedChartType,
+      liveCandle: selectedChartType === "candlestick" ? (_b = chartLiveState.liveCandle) != null ? _b : void 0 : void 0,
+      lineValue: chartLiveState.lineValue,
       showSeriesControls: activeModeVenueData.length > 0 || segmentedDisplayItems.length > 0,
       renderSeriesControls: () => {
-        return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(
           "div",
           {
             className: cn("flex flex-row items-center justify-between gap-4", classNames == null ? void 0 : classNames.summary),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
                 "div",
                 {
                   className: cn(
@@ -5039,10 +5166,10 @@ var EventListItemDetailsGraphSection = ({
                     classNames == null ? void 0 : classNames.outcomeBadges
                   ),
                   children: activeModeVenueData.map((venueData) => {
-                    var _a;
+                    var _a2;
                     const text = venueData.probability == null ? "-" : formatPercent(venueData.probability);
                     const isActiveVenue = selectedVenue === venueData.venue;
-                    return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+                    return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
                       "button",
                       {
                         type: "button",
@@ -5051,19 +5178,19 @@ var EventListItemDetailsGraphSection = ({
                         className: cn(
                           "rounded-agg-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-agg-primary focus-visible:ring-offset-2 focus-visible:ring-offset-agg-secondary-hover"
                         ),
-                        children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+                        children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
                           Badge,
                           {
                             text,
                             size: "large",
-                            prefix: showVenueLogo ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+                            prefix: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
                               VenueLogo,
                               {
                                 venue: venueData.venue,
                                 size: "small",
-                                title: (_a = venueInfo == null ? void 0 : venueInfo[venueData.venue]) == null ? void 0 : _a.label
+                                title: (_a2 = venueInfo == null ? void 0 : venueInfo[venueData.venue]) == null ? void 0 : _a2.label
                               }
-                            ) : void 0,
+                            ),
                             classNames: {
                               root: cn("h-9 shrink-0 border-2 px-4 text-agg-base leading-agg-6")
                             },
@@ -5081,7 +5208,7 @@ var EventListItemDetailsGraphSection = ({
                   })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
                 SwitchButton,
                 {
                   ariaLabel: labels.eventItemDetails.outcomeSelectorAria,
@@ -5104,45 +5231,55 @@ var EventListItemDetailsGraphSection = ({
 };
 var EventListItemDetailsContent = ({
   event,
-  title,
-  image,
-  showVenueLogo = true,
   classNames,
   venueInfo,
   detailsStats,
   ariaLabel,
-  defaultTimeRange
+  defaultTimeRange,
+  onClick
 }) => {
-  const config = (0, import_hooks17.useSdkUiConfig)();
-  const labels = (0, import_hooks17.useLabels)();
+  var _a;
+  const config = (0, import_hooks18.useSdkUiConfig)();
+  const labels = (0, import_hooks18.useLabels)();
   const venueMarkets = (0, import_react8.useMemo)(() => {
-    var _a;
-    return (_a = event.venueMarkets) != null ? _a : [];
+    var _a2;
+    return (_a2 = event.venueMarkets) != null ? _a2 : [];
   }, [event.venueMarkets]);
+  const [selectedMarket, setSelectedMarket] = (0, import_react8.useState)(venueMarkets[0]);
+  const [selectedOutcome] = (0, import_react8.useState)(
+    (_a = selectedMarket == null ? void 0 : selectedMarket.venueMarketOutcomes.find(
+      (outcome) => outcome.winner
+    )) != null ? _a : selectedMarket == null ? void 0 : selectedMarket.venueMarketOutcomes[0]
+  );
   const primaryVenueMarket = (0, import_react8.useMemo)(() => {
     return selectPrimaryVenueMarket(venueMarkets);
   }, [venueMarkets]);
+  const filteredVenueMarkets = (0, import_react8.useMemo)(() => {
+    if (!selectedMarket)
+      return venueMarkets;
+    return venueMarkets.filter(
+      (vm) => vm.question === (selectedMarket == null ? void 0 : selectedMarket.question)
+    );
+  }, [venueMarkets, selectedMarket]);
   const outcomeLabels = (0, import_react8.useMemo)(() => {
-    return resolveOutcomeLabels(venueMarkets);
-  }, [venueMarkets]);
+    return resolveOutcomeLabels(filteredVenueMarkets);
+  }, [filteredVenueMarkets]);
   const [selectedOutcomeLabel, setSelectedOutcomeLabel] = (0, import_react8.useState)(() => {
     return resolveDefaultOutcomeLabel(outcomeLabels);
   });
+  const configTimeRange = config.chart.defaultChartTimeRange;
   const [selectedTimeRange, setSelectedTimeRange] = (0, import_react8.useState)(() => {
-    return getDefaultSelectedTimeRange(defaultTimeRange);
+    return getDefaultSelectedTimeRange(defaultTimeRange, configTimeRange);
   });
   const [selectedChartType, setSelectedChartType] = (0, import_react8.useState)("line");
   (0, import_react8.useEffect)(() => {
-    setSelectedTimeRange(getDefaultSelectedTimeRange(defaultTimeRange));
-  }, [defaultTimeRange]);
-  const resolvedTitle = resolveTileTitle(event, primaryVenueMarket, title);
-  const resolvedImage = resolveTileImage(event, primaryVenueMarket, image);
+    setSelectedTimeRange(getDefaultSelectedTimeRange(defaultTimeRange, configTimeRange));
+  }, [defaultTimeRange, configTimeRange]);
   const isDateOutcomeMarket = outcomeLabels.length > 2 && outcomeLabels.every(isDateLikeLabel);
-  const outcomeSelectorLabels = outcomeLabels;
   const probabilityByLabel = (0, import_react8.useMemo)(() => {
     return new Map(
       outcomeLabels.map((label) => {
-        const outcomesByVenue = resolveOutcomesByVenue(venueMarkets, label);
+        const outcomesByVenue = resolveOutcomesByVenue(filteredVenueMarkets, label);
         const probabilities = outcomesByVenue.map((item) => normalizeProbability(item.outcome.price)).filter((value) => value != null);
         if (probabilities.length === 0) {
           return [label, void 0];
@@ -5151,13 +5288,13 @@ var EventListItemDetailsContent = ({
         return [label, averageProbability];
       })
     );
-  }, [outcomeLabels, venueMarkets]);
+  }, [outcomeLabels, filteredVenueMarkets]);
   const mainOutcomeLabel = (0, import_react8.useMemo)(() => {
     if (outcomeLabels.length === 0)
       return void 0;
     return [...outcomeLabels].sort((left, right) => {
-      var _a, _b;
-      const leftProbability = (_a = probabilityByLabel.get(left)) != null ? _a : -1;
+      var _a2, _b;
+      const leftProbability = (_a2 = probabilityByLabel.get(left)) != null ? _a2 : -1;
       const rightProbability = (_b = probabilityByLabel.get(right)) != null ? _b : -1;
       return rightProbability - leftProbability;
     })[0];
@@ -5174,17 +5311,17 @@ var EventListItemDetailsContent = ({
     setSelectedOutcomeLabel(fallbackOutcomeLabel);
   }, [isDateOutcomeMarket, mainOutcomeLabel, outcomeLabels, selectedOutcomeLabel]);
   const switchLabels = (0, import_react8.useMemo)(() => {
-    var _a, _b;
+    var _a2, _b;
     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;
+      var _a3, _b2;
+      const leftProbability = (_a3 = probabilityByLabel.get(left)) != null ? _a3 : -1;
       const rightProbability = (_b2 = probabilityByLabel.get(right)) != null ? _b2 : -1;
       return rightProbability - leftProbability;
     });
-    const firstLabel = (_a = sortedOutcomeLabels[0]) != null ? _a : labels.eventItemDetails.yes;
+    const firstLabel = (_a2 = sortedOutcomeLabels[0]) != null ? _a2 : labels.eventItemDetails.yes;
     const secondLabel = (_b = sortedOutcomeLabels.find((label) => label !== firstLabel)) != null ? _b : firstLabel;
     return [firstLabel, secondLabel];
   }, [
@@ -5195,40 +5332,50 @@ var EventListItemDetailsContent = ({
     probabilityByLabel
   ]);
   const volumeLabel = (0, import_react8.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}`;
+    return `${config.formatting.formatCompactCurrency(resolvedVolume)} ${labels.eventItemDetails.volumeSuffix}`;
   }, [config, event.volume, labels.eventItemDetails.volumeSuffix, primaryVenueMarket == null ? void 0 : primaryVenueMarket.volume]);
   if (!primaryVenueMarket || !selectedOutcomeLabel) {
-    return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(EventListItemDetailsUnavailableState, { classNames, ariaLabel });
+    return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+      EventListItemDetailsUnavailableState,
+      {
+        classNames,
+        ariaLabel: ariaLabel != null ? ariaLabel : event.title
+      }
+    );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(
     Card,
     {
       className: cn(detailsBaseCardClassName, classNames == null ? void 0 : classNames.root),
-      "aria-label": ariaLabel != null ? ariaLabel : resolvedTitle,
+      "aria-label": ariaLabel != null ? ariaLabel : event.title,
+      onClick: () => {
+        onClick == null ? void 0 : onClick(event);
+      },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(
           "div",
           {
             className: cn(
               "flex flex-row gap-3 md:gap-4",
-              "items-center justify-start",
+              venueMarkets.length > 1 ? "items-start" : "items-center",
+              "justify-start",
               classNames == null ? void 0 : classNames.header
             ),
             children: [
-              resolvedImage ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+              event.image ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
                 RemoteImage,
                 {
-                  src: resolvedImage,
+                  src: event.image,
                   alt: "",
                   className: "size-10 rounded-agg-lg object-cover md:size-[60px]"
                 }
               ) : null,
-              /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-3", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-3", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
                   Typography,
                   {
                     variant: "body-strong",
@@ -5237,20 +5384,19 @@ var EventListItemDetailsContent = ({
                       "truncate text-wrap wrap-break-word line-clamp-2",
                       classNames == null ? void 0 : classNames.title
                     ),
-                    children: resolvedTitle
+                    children: event.title
                   }
                 ),
-                outcomeSelectorLabels.length > 2 ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+                venueMarkets.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
                   "div",
                   {
                     className: cn(
-                      "flex items-center gap-2 overflow-x-auto pb-1 md:flex-wrap md:overflow-visible md:pb-0",
+                      "flex flex-row flex-nowrap items-center gap-2 overflow-x-auto pb-1 md:pb-0",
                       classNames == null ? void 0 : classNames.headerPills
                     ),
-                    children: outcomeSelectorLabels.map((outcomeSelectorLabel) => {
-                      const isActive = outcomeSelectorLabel === selectedOutcomeLabel;
-                      const displayLabel = isDateLikeLabel(outcomeSelectorLabel) ? formatDateLabel(outcomeSelectorLabel) : outcomeSelectorLabel;
-                      return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+                    children: venueMarkets.map((venueMarket) => {
+                      const isActive = (selectedMarket == null ? void 0 : selectedMarket.id) === venueMarket.id;
+                      return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
                         Button,
                         {
                           size: "small",
@@ -5261,10 +5407,14 @@ var EventListItemDetailsContent = ({
                             "border-2",
                             isActive ? "border-agg-primary bg-agg-secondary text-agg-foreground font-agg-bold" : "border-transparent bg-agg-secondary-hover text-agg-foreground font-agg-normal"
                           ),
-                          onClick: () => setSelectedOutcomeLabel(outcomeSelectorLabel),
-                          children: displayLabel
+                          onClick: (e) => {
+                            e.stopPropagation();
+                            e.preventDefault();
+                            setSelectedMarket(venueMarket);
+                          },
+                          children: venueMarket.question
                         },
-                        outcomeSelectorLabel
+                        venueMarket.id
                       );
                     })
                   }
@@ -5273,12 +5423,12 @@ var EventListItemDetailsContent = ({
             ]
           }
         ),
-        detailsStats && detailsStats.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: cn("flex flex-wrap items-start gap-4 md:gap-6", classNames == null ? void 0 : classNames.headerStats), children: detailsStats.map((statItem) => {
+        detailsStats && detailsStats.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: cn("flex flex-wrap items-start gap-4 md:gap-6", classNames == null ? void 0 : classNames.headerStats), children: detailsStats.map((statItem) => {
           const deltaClassName = statItem.deltaTone === "positive" ? "text-agg-success!" : statItem.deltaTone === "negative" ? "text-agg-error!" : "text-agg-muted-foreground";
-          return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "flex flex-col gap-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Typography, { variant: "caption-caps", className: "text-agg-muted-foreground", children: statItem.label }),
-            /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "flex items-baseline gap-1", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Typography, { variant: "caption-caps", className: "text-agg-muted-foreground", children: statItem.label }),
+            /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "flex items-baseline gap-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
                 Typography,
                 {
                   variant: "body",
@@ -5286,35 +5436,35 @@ var EventListItemDetailsContent = ({
                   children: statItem.value
                 }
               ),
-              statItem.delta ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Typography, { variant: "label", className: cn(deltaClassName), children: statItem.delta }) : null
+              statItem.delta ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Typography, { variant: "label", className: cn(deltaClassName), children: statItem.delta }) : null
             ] })
           ] }, `${statItem.label}-${statItem.value}`);
         }) }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
           EventListItemDetailsGraphSection,
           {
-            venueMarkets,
-            canonicalMarketId: event.id,
+            selectedOutcome,
+            selectedMarket,
+            venueMarkets: filteredVenueMarkets,
             selectedOutcomeLabel,
             onSelectedOutcomeLabelChange: setSelectedOutcomeLabel,
             switchLabels,
             isDateOutcomeMarket,
             classNames,
-            showVenueLogo,
             venueInfo,
-            formatPercent: config.formatPercent,
+            formatPercent: config.formatting.formatPercent,
             selectedTimeRange,
             selectedChartType
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: cn("flex flex-wrap items-center justify-between gap-4", classNames == null ? void 0 : classNames.footer), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Typography, { variant: "label", className: "text-agg-muted-foreground", children: volumeLabel || "-" }),
-          /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: cn("flex flex-wrap items-center gap-2 md:gap-3", classNames == null ? void 0 : classNames.timeRange), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(ChartTypeSwitch, { value: selectedChartType, onValueChange: setSelectedChartType }),
-            /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { "aria-hidden": "true", className: "hidden h-4 w-px bg-agg-separator md:block" }),
+        /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: cn("flex flex-wrap items-center justify-between gap-4", classNames == null ? void 0 : classNames.footer), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Typography, { variant: "label", className: "text-agg-muted-foreground", children: volumeLabel || "-" }),
+          /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: cn("flex flex-wrap items-center gap-2 md:gap-3", classNames == null ? void 0 : classNames.timeRange), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(ChartTypeSwitch, { value: selectedChartType, onValueChange: setSelectedChartType }),
+            /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("span", { "aria-hidden": "true", className: "hidden h-4 w-px bg-agg-separator md:block" }),
             eventListItemDetailsTimeRanges.map((timeRange) => {
               const isActive = timeRange === selectedTimeRange;
-              return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
                 Button,
                 {
                   size: "small",
@@ -5326,7 +5476,11 @@ var EventListItemDetailsContent = ({
                     isActive ? "font-agg-bold! text-agg-foreground!" : "font-agg-normal! text-agg-muted-foreground!"
                   ),
                   "aria-pressed": isActive,
-                  onClick: () => setSelectedTimeRange(timeRange),
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    setSelectedTimeRange(timeRange);
+                  },
                   children: timeRange === "ALL" ? labels.eventItemDetails.allTimeRange : timeRange
                 },
                 timeRange
@@ -5344,20 +5498,21 @@ var EventListItemDetailsByEventId = (_a) => {
   } = _b, rest = __objRest(_b, [
     "eventId"
   ]);
+  const resolvedEventId = eventId != null ? eventId : "";
   const {
     event: fetchedEvent,
     error,
     isError,
     isLoading
-  } = (0, import_hooks17.useVenueEvent)({
-    eventId: eventId != null ? eventId : "",
-    enabled: !!eventId
+  } = (0, import_hooks18.useVenueEvent)({
+    eventId: resolvedEventId,
+    enabled: !!resolvedEventId
   });
   const resolvedEvent = (0, import_react8.useMemo)(() => {
     return resolveEventListItemEvent(fetchedEvent);
   }, [fetchedEvent]);
-  if (!eventId) {
-    return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+  if (!resolvedEventId) {
+    return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
       EventListItemDetailsUnavailableState,
       {
         classNames: rest.classNames,
@@ -5366,16 +5521,16 @@ var EventListItemDetailsByEventId = (_a) => {
     );
   }
   if (isLoading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(EventListItemDetailsLoadingState, { classNames: rest.classNames, ariaLabel: rest.ariaLabel });
+    return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(EventListItemDetailsLoadingState, { classNames: rest.classNames, ariaLabel: rest.ariaLabel });
   }
   if (isErrorWithStatus(error, 404)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(EventListItemDetailsNotFoundState, { classNames: rest.classNames, ariaLabel: rest.ariaLabel });
+    return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(EventListItemDetailsNotFoundState, { classNames: rest.classNames, ariaLabel: rest.ariaLabel });
   }
   if (!fetchedEvent && !isError) {
-    return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(EventListItemDetailsLoadingState, { classNames: rest.classNames, ariaLabel: rest.ariaLabel });
+    return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(EventListItemDetailsLoadingState, { classNames: rest.classNames, ariaLabel: rest.ariaLabel });
   }
   if (!resolvedEvent) {
-    return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
       EventListItemDetailsUnavailableState,
       {
         classNames: rest.classNames,
@@ -5383,42 +5538,38 @@ var EventListItemDetailsByEventId = (_a) => {
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(EventListItemDetailsContent, __spreadValues({ event: resolvedEvent }, rest));
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(EventListItemDetailsContent, __spreadValues({ event: resolvedEvent }, rest));
 };
 var EventListItemDetails = (props) => {
   if (props.isLoading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(EventListItemDetailsLoadingState, { classNames: props.classNames, ariaLabel: props.ariaLabel });
+    return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(EventListItemDetailsLoadingState, { classNames: props.classNames, ariaLabel: props.ariaLabel });
   }
   if ("event" in props && props.event) {
     const _a = props, { event } = _a, rest = __objRest(_a, ["event"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(EventListItemDetailsContent, __spreadValues({ event }, rest));
+    return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(EventListItemDetailsContent, __spreadValues({ event }, rest));
   }
   if ("eventId" in props && typeof props.eventId === "string") {
     const {
-      title: titleOverride,
-      image: imageOverride,
-      showVenueLogo: showVenueLogoOverride,
       classNames,
       venueInfo,
       detailsStats,
       ariaLabel: ariaLabelOverride,
-      defaultTimeRange: defaultTimeRangeOverride
+      defaultTimeRange: defaultTimeRangeOverride,
+      onClick
     } = props;
     const byEventIdProps = {
       eventId: props.eventId,
       isLoading: false,
-      title: titleOverride,
-      image: imageOverride,
-      showVenueLogo: showVenueLogoOverride,
       classNames,
       venueInfo,
       detailsStats,
       ariaLabel: ariaLabelOverride,
-      defaultTimeRange: defaultTimeRangeOverride
+      defaultTimeRange: defaultTimeRangeOverride,
+      onClick
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(EventListItemDetailsByEventId, __spreadValues({}, byEventIdProps));
+    return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(EventListItemDetailsByEventId, __spreadValues({}, byEventIdProps));
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
     EventListItemDetailsUnavailableState,
     {
       classNames: props.classNames,
@@ -5430,7 +5581,7 @@ EventListItemDetails.displayName = "EventListItemDetails";
 
 // src/events/market-details/index.tsx
 var import_react9 = require("react");
-var import_hooks18 = require("@agg-market/hooks");
+var import_hooks19 = require("@agg-market/hooks");
 
 // src/events/market-details/market-details.utils.ts
 var import_dayjs4 = __toESM(require("dayjs"));
@@ -5461,24 +5612,29 @@ var resolveInitialTab = (defaultTab) => {
     return parsedTab.data;
   return "order-book";
 };
-var resolveMarket = (event, marketId) => {
-  var _a, _b, _c, _d, _e;
-  if (!event.venueMarkets || event.venueMarkets.length === 0)
+var resolveMarketFromVenueMarkets = (venueMarkets, marketId) => {
+  var _a, _b;
+  if (!venueMarkets || venueMarkets.length === 0)
     return void 0;
   if (!marketId) {
+    const primary = selectPrimaryVenueMarket(venueMarkets);
+    const totalVolume2 = venueMarkets.reduce((sum, vm) => {
+      return sum + (typeof vm.volume === "number" ? vm.volume : 0);
+    }, 0);
     return {
-      id: event.id,
-      venueMarkets: event.venueMarkets,
-      volume: event.volume,
-      status: event.status,
-      startDate: event.startDate,
-      endDate: event.endDate,
-      creationDate: event.creationDate,
-      question: event.title
+      id: (_a = primary == null ? void 0 : primary.id) != null ? _a : venueMarkets[0].id,
+      venueMarkets,
+      volume: totalVolume2 || (primary == null ? void 0 : primary.volume),
+      status: primary == null ? void 0 : primary.status,
+      startDate: primary == null ? void 0 : primary.startDate,
+      endDate: primary == null ? void 0 : primary.endDate,
+      creationDate: primary == null ? void 0 : primary.creationDate,
+      question: (_b = primary == null ? void 0 : primary.question) != null ? _b : venueMarkets[0].question
     };
   }
-  const venueMarkets = event.venueMarkets;
-  const matchedVenueMarket = venueMarkets.find((vm) => vm.id === marketId);
+  const matchedVenueMarket = venueMarkets.find(
+    (vm) => vm.id === marketId || vm.externalIdentifier === marketId
+  );
   if (!matchedVenueMarket)
     return void 0;
   const siblingVenueMarkets = venueMarkets.filter(
@@ -5491,11 +5647,11 @@ var resolveMarket = (event, marketId) => {
     id: matchedVenueMarket.id,
     venueMarkets: siblingVenueMarkets,
     volume: totalVolume || matchedVenueMarket.volume,
-    status: (_a = matchedVenueMarket.status) != null ? _a : event.status,
-    startDate: (_b = matchedVenueMarket.startDate) != null ? _b : event.startDate,
-    endDate: (_c = matchedVenueMarket.endDate) != null ? _c : event.endDate,
-    creationDate: (_d = matchedVenueMarket.creationDate) != null ? _d : event.creationDate,
-    question: (_e = matchedVenueMarket.question) != null ? _e : event.title
+    status: matchedVenueMarket.status,
+    startDate: matchedVenueMarket.startDate,
+    endDate: matchedVenueMarket.endDate,
+    creationDate: matchedVenueMarket.creationDate,
+    question: matchedVenueMarket.question
   };
 };
 var resolveDisplayOutcomeLabels = (labels) => {
@@ -5505,6 +5661,21 @@ var resolveDisplayOutcomeLabels = (labels) => {
     (label) => labels.some((value) => normalizeLabel2(value) === normalizeLabel2(label))
   );
 };
+var resolveMarketDetailsOutcomeLabels = (venueMarkets) => {
+  var _a;
+  const primaryMarket = selectPrimaryVenueMarket(venueMarkets);
+  const initialLabels = ((_a = primaryMarket == null ? void 0 : primaryMarket.venueMarketOutcomes) != null ? _a : []).map((outcome) => outcome.label.trim()).filter(Boolean);
+  const labels = new Set(initialLabels);
+  venueMarkets.forEach((market) => {
+    sortOutcomes(market.venueMarketOutcomes).forEach((outcome) => {
+      const label = outcome.label.trim();
+      if (!label)
+        return;
+      labels.add(label);
+    });
+  });
+  return [...labels];
+};
 var resolveInitialOutcomeLabel = (labels, defaultOutcomeLabel) => {
   var _a;
   if (labels.length === 0)
@@ -5556,7 +5727,7 @@ var resolveOutcomeTone = (label, index) => {
   return index === 0 ? "positive" : "negative";
 };
 var resolveHeaderOutcomeItems = (venueMarkets, defaultOutcomeLabel) => {
-  const labels = resolveDisplayOutcomeLabels(resolveOutcomeLabels(venueMarkets));
+  const labels = resolveDisplayOutcomeLabels(resolveMarketDetailsOutcomeLabels(venueMarkets));
   const probabilityByLabel = resolveAverageProbabilityByLabel(venueMarkets, labels);
   return labels.slice(0, 2).map((label, index) => {
     var _a;
@@ -5564,7 +5735,8 @@ var resolveHeaderOutcomeItems = (venueMarkets, defaultOutcomeLabel) => {
       label,
       probability: probabilityByLabel.get(label),
       tone: resolveOutcomeTone(label, index),
-      isDefault: normalizeLabel2(label) === normalizeLabel2((_a = defaultOutcomeLabel != null ? defaultOutcomeLabel : labels[0]) != null ? _a : "")
+      isDefault: normalizeLabel2(label) === normalizeLabel2((_a = defaultOutcomeLabel != null ? defaultOutcomeLabel : labels[0]) != null ? _a : ""),
+      venue: venueMarkets[0].venue
     };
   });
 };
@@ -5655,30 +5827,32 @@ var resolveOtherTabRows = (market, labels) => {
   return rows;
 };
 var buildMarketDetailsModel = ({
-  event,
+  venueMarkets,
   marketId,
   title,
   image,
   formatCompactCurrency,
   labels
 }) => {
-  var _a;
-  const market = resolveMarket(event, marketId);
+  var _a, _b;
+  const market = resolveMarketFromVenueMarkets(venueMarkets, marketId);
   if (!market)
     return void 0;
   const primaryVenueMarket = selectPrimaryVenueMarket(market.venueMarkets);
   if (!primaryVenueMarket)
     return void 0;
-  const resolvedTitle = resolveTileTitle(event, primaryVenueMarket, title);
-  const resolvedImage = resolveTileImage(event, primaryVenueMarket, image);
-  const resolvedVolume = typeof market.volume === "number" ? market.volume : (_a = primaryVenueMarket.volume) != null ? _a : void 0;
+  const resolvedTitle = (title == null ? void 0 : title.trim()) || primaryVenueMarket.question || market.question;
+  const resolvedImage = (_a = typeof image === "string" && image.trim() ? image : void 0) != null ? _a : typeof primaryVenueMarket.image === "string" && primaryVenueMarket.image.trim() ? primaryVenueMarket.image : void 0;
+  const resolvedVolume = typeof market.volume === "number" ? market.volume : (_b = primaryVenueMarket.volume) != null ? _b : void 0;
   const subtitle = resolveSubtitle({
     venueMarkets: market.venueMarkets,
     volume: resolvedVolume,
     formatCompactCurrency,
     labels
   });
-  const outcomeLabels = resolveDisplayOutcomeLabels(resolveOutcomeLabels(market.venueMarkets));
+  const outcomeLabels = resolveDisplayOutcomeLabels(
+    resolveMarketDetailsOutcomeLabels(market.venueMarkets)
+  );
   const probabilityByLabel = resolveAverageProbabilityByLabel(market.venueMarkets, outcomeLabels);
   return {
     market,
@@ -5692,14 +5866,14 @@ var buildMarketDetailsModel = ({
 };
 
 // src/events/market-details/index.tsx
-var import_jsx_runtime79 = require("react/jsx-runtime");
+var import_jsx_runtime80 = require("react/jsx-runtime");
 var MarketDetailsLoadingState = ({
   isOpened = marketDetailsDefaultIsOpened,
   ariaLabel,
   classNames
 }) => {
-  const labels = (0, import_hooks18.useLabels)();
-  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+  const labels = (0, import_hooks19.useLabels)();
+  return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
     Skeleton,
     {
       view: isOpened ? "market-details-detailed" : "market-details-minified",
@@ -5712,16 +5886,16 @@ var MarketDetailsUnavailableState = ({
   ariaLabel,
   classNames
 }) => {
-  const labels = (0, import_hooks18.useLabels)();
-  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+  const labels = (0, import_hooks19.useLabels)();
+  return /* @__PURE__ */ (0, import_jsx_runtime80.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_runtime79.jsxs)("div", { className: "flex flex-col gap-1 p-5", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Typography, { variant: "body-large-strong", children: labels.marketDetails.unavailableTitle }),
-        /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Typography, { variant: "label", className: "text-agg-muted-foreground", children: labels.marketDetails.unavailableDescription })
+      children: /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "flex flex-col gap-1 p-5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Typography, { variant: "body-large-strong", children: labels.marketDetails.unavailableTitle }),
+        /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Typography, { variant: "label", className: "text-agg-muted-foreground", children: labels.marketDetails.unavailableDescription })
       ] })
     }
   );
@@ -5730,8 +5904,8 @@ var MarketDetailsNotFoundState = ({
   ariaLabel,
   classNames
 }) => {
-  const labels = (0, import_hooks18.useLabels)();
-  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Card, { className: cn(marketDetailsBaseCardClassName, "p-0", classNames == null ? void 0 : classNames.root), children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+  const labels = (0, import_hooks19.useLabels)();
+  return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Card, { className: cn(marketDetailsBaseCardClassName, "p-0", classNames == null ? void 0 : classNames.root), children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
     StateMessage,
     {
       ariaLabel: ariaLabel != null ? ariaLabel : labels.marketDetails.notFoundAria,
@@ -5748,7 +5922,7 @@ var OrderBookRows = ({
   formatCurrency,
   visibleRows
 }) => {
-  const labels = (0, import_hooks18.useLabels)();
+  const labels = (0, import_hooks19.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";
@@ -5757,20 +5931,20 @@ var OrderBookRows = ({
   const orderBookDividerHeightPx = 1;
   const orderBookRowGapPx = 8;
   const orderBookVisibleHeightPx = maxVisibleRows * orderBookRowHeightPx + Math.max(0, maxVisibleRows - 1) * (orderBookDividerHeightPx + orderBookRowGapPx);
-  return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "flex flex-col gap-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Typography, { variant: "caption-caps", children: title }),
-    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Typography, { variant: "caption-caps", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime80.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_runtime79.jsxs)("div", { className: "flex flex-col gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime79.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_runtime79.jsxs)("div", { className: "flex items-center gap-1 md:gap-3", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(VenueLogo, { venue: row.venue, size: "small" }),
-              /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+        children: rows.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime80.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_runtime80.jsxs)("div", { className: "flex items-center gap-1 md:gap-3", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(VenueLogo, { venue: row.venue, size: "small" }),
+              /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
                 "span",
                 {
                   className: cn(
@@ -5781,9 +5955,9 @@ var OrderBookRows = ({
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime79.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_runtime79.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_runtime79.jsx)("div", { className: "flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime80.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_runtime80.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_runtime80.jsx)("div", { className: "flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
               "div",
               {
                 "aria-hidden": "true",
@@ -5794,7 +5968,7 @@ var OrderBookRows = ({
               }
             ) })
           ] }),
-          index < rows.length - 1 ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "h-px w-full bg-agg-separator" }) : null
+          index < rows.length - 1 ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "h-px w-full bg-agg-separator" }) : null
         ] }, row.id))
       }
     )
@@ -5808,7 +5982,7 @@ var getOutcomeButtonClassName = ({
   const defaultStateClassName = isPositive ? "border-[#18c15c]/50 bg-[#18c15c]/5 text-agg-foreground hover:bg-[#18c15c]/10" : "border-[#e5455f]/50 bg-[#e5455f]/5 text-agg-foreground hover:bg-[#e5455f]/10";
   const activeStateClassName = isPositive ? "border-transparent bg-[#18c15c] text-agg-on-primary" : "border-transparent bg-[#e5455f] text-agg-on-primary";
   return cn(
-    "h-auto min-h-10 flex-1 rounded-agg-full border px-4 py-1.5 text-agg-base leading-agg-6 shadow-none md:flex-none md:min-w-[168px]",
+    "h-auto flex-1 rounded-agg-full border px-4 py-1.5 text-agg-base leading-agg-6 shadow-none md:flex-none md:min-w-[168px]",
     getMotionClassName(enableAnimations, "transition-all duration-300 ease-in-out"),
     isActive ? activeStateClassName : defaultStateClassName,
     "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-agg-primary focus-visible:ring-offset-2 focus-visible:ring-offset-agg-secondary-hover",
@@ -5817,63 +5991,67 @@ var getOutcomeButtonClassName = ({
   );
 };
 var MarketDetailsContent = ({
-  event,
+  venueMarkets,
   marketId,
   title,
   image,
-  isOpened: defaultIsOpened = marketDetailsDefaultIsOpened,
+  isOpened: controlledIsOpened = marketDetailsDefaultIsOpened,
   onOpenChange,
   defaultTab,
   defaultOutcomeLabel,
-  defaultTimeRange = "1M",
+  defaultTimeRange,
   orderBookDepth = orderBookRowLimitDefault,
   ariaLabel,
   classNames,
-  otherContent,
-  liveUpdate = false
+  otherContent
 }) => {
-  const config = (0, import_hooks18.useSdkUiConfig)();
-  const labels = (0, import_hooks18.useLabels)();
+  var _a, _b, _c, _d;
+  const config = (0, import_hooks19.useSdkUiConfig)();
+  const labels = (0, import_hooks19.useLabels)();
   const detailsContentId = (0, import_react9.useId)();
   const model = (0, import_react9.useMemo)(() => {
     return buildMarketDetailsModel({
-      event,
+      venueMarkets,
       marketId,
       title,
       image,
-      formatCompactCurrency: config.formatCompactCurrency,
+      formatCompactCurrency: config.formatting.formatCompactCurrency,
       labels
     });
-  }, [config.formatCompactCurrency, event, image, labels, marketId, title]);
+  }, [config.formatting.formatCompactCurrency, venueMarkets, image, labels, marketId, title]);
   const resolvedMarket = (0, import_react9.useMemo)(() => {
-    return resolveMarket(event, marketId);
-  }, [event, marketId]);
+    return resolveMarketFromVenueMarkets(venueMarkets, marketId);
+  }, [venueMarkets, marketId]);
   const marketDetailsTabs = (0, import_react9.useMemo)(() => {
     return getMarketDetailsTabs(labels);
   }, [labels]);
   const [selectedTab, setSelectedTab] = (0, import_react9.useState)(
     () => resolveInitialTab(defaultTab)
   );
-  const [isOpened, setIsOpened] = (0, import_react9.useState)(defaultIsOpened);
+  const [isOpened, setIsOpened] = (0, import_react9.useState)(controlledIsOpened);
   (0, import_react9.useEffect)(() => {
     setSelectedTab(resolveInitialTab(defaultTab));
   }, [defaultTab]);
-  const [selectedTimeRange, setSelectedTimeRange] = (0, import_react9.useState)(defaultTimeRange);
+  (0, import_react9.useEffect)(() => {
+    setIsOpened(controlledIsOpened);
+  }, [controlledIsOpened]);
+  const resolvedDefaultTimeRange = (_a = defaultTimeRange != null ? defaultTimeRange : config.chart.defaultChartTimeRange) != null ? _a : "1D";
+  const [selectedTimeRange, setSelectedTimeRange] = (0, import_react9.useState)(resolvedDefaultTimeRange);
   const [selectedChartType, setSelectedChartType] = (0, import_react9.useState)("line");
   (0, import_react9.useEffect)(() => {
-    setSelectedTimeRange(defaultTimeRange);
-  }, [defaultTimeRange]);
+    setSelectedTimeRange(resolvedDefaultTimeRange);
+  }, [resolvedDefaultTimeRange]);
   const [selectedOutcomeLabel, setSelectedOutcomeLabel] = (0, import_react9.useState)(
     () => {
-      var _a;
-      return resolveInitialOutcomeLabel((_a = model == null ? void 0 : model.outcomeLabels) != null ? _a : [], defaultOutcomeLabel);
+      var _a2;
+      return resolveInitialOutcomeLabel((_a2 = model == null ? void 0 : model.outcomeLabels) != null ? _a2 : [], defaultOutcomeLabel);
     }
   );
   const [selectedGraphVenue, setSelectedGraphVenue] = (0, import_react9.useState)(null);
   (0, import_react9.useEffect)(() => {
-    var _a;
+    var _a2;
     setSelectedOutcomeLabel(
-      resolveInitialOutcomeLabel((_a = model == null ? void 0 : model.outcomeLabels) != null ? _a : [], defaultOutcomeLabel)
+      resolveInitialOutcomeLabel((_a2 = model == null ? void 0 : model.outcomeLabels) != null ? _a2 : [], defaultOutcomeLabel)
     );
   }, [defaultOutcomeLabel, model == null ? void 0 : model.outcomeLabels]);
   const headerOutcomeItems = (0, import_react9.useMemo)(() => {
@@ -5900,52 +6078,66 @@ var MarketDetailsContent = ({
     return outcomesByLabelMap;
   }, [headerOutcomeItems, model]);
   const selectedOutcomesByVenue = (0, import_react9.useMemo)(() => {
-    var _a;
+    var _a2;
     if (!selectedOutcomeLabel)
       return [];
-    return (_a = outcomesByLabel.get(selectedOutcomeLabel)) != null ? _a : [];
+    return (_a2 = outcomesByLabel.get(selectedOutcomeLabel)) != null ? _a2 : [];
   }, [outcomesByLabel, selectedOutcomeLabel]);
+  const chartEnabled = isOpened && selectedTab === "graph";
+  const orderBookEnabled = isOpened && selectedTab === "order-book";
   const timeWindow = (0, import_react9.useMemo)(() => {
     return getTimeWindowByRange(selectedTimeRange);
   }, [selectedTimeRange]);
-  const graphOutcomes = (0, import_react9.useMemo)(() => {
-    const uniqueOutcomesByVenueAndId = /* @__PURE__ */ new Map();
-    outcomesByLabel.forEach((outcomes) => {
-      outcomes.forEach((outcomeByVenue) => {
-        uniqueOutcomesByVenueAndId.set(
-          `${outcomeByVenue.venue}:${outcomeByVenue.outcome.id}`,
-          outcomeByVenue
-        );
-      });
-    });
-    return [...uniqueOutcomesByVenueAndId.values()];
-  }, [outcomesByLabel]);
-  const canonicalMarketIdForHistory = model == null ? void 0 : model.market.id;
-  const priceHistoryGroups = (0, import_react9.useMemo)(() => {
-    return buildPriceHistoryGroups(graphOutcomes, canonicalMarketIdForHistory);
-  }, [canonicalMarketIdForHistory, graphOutcomes]);
-  const { data: priceHistoryData, isLoading: isPriceHistoryLoading } = (0, import_hooks18.usePriceHistory)(__spreadProps(__spreadValues({
-    groups: priceHistoryGroups
-  }, timeWindow), {
-    enabled: isOpened && selectedTab === "graph" && priceHistoryGroups.length > 0
-  }));
-  const orderBookInputs = (0, import_react9.useMemo)(() => {
-    return selectedOutcomesByVenue.map(({ market, outcome }) => ({
-      market,
-      outcome,
-      liveUpdate
-    }));
-  }, [selectedOutcomesByVenue, liveUpdate]);
+  const primaryVenueMarketId = (_c = (_b = selectedOutcomesByVenue[0]) == null ? void 0 : _b.market.id) != null ? _c : null;
+  const venueMarketIds = (0, import_react9.useMemo)(() => {
+    return selectedOutcomesByVenue.map((item) => item.market.id);
+  }, [selectedOutcomesByVenue]);
+  const {
+    data: marketChartData,
+    isLoading: isMarketChartLoading,
+    error: marketChartError,
+    refetch: refetchMarketChart
+  } = (0, import_hooks19.useMarketChart)({
+    marketId: primaryVenueMarketId,
+    venueMarketIds,
+    interval: (0, import_hooks19.timeRangeToInterval)(selectedTimeRange),
+    startTs: timeWindow.startTs * 1e3,
+    endTs: timeWindow.endTs * 1e3,
+    enabled: chartEnabled && !!primaryVenueMarketId
+  });
   const {
-    data: orderBookData,
+    data: marketOrderbookData,
     isLoading: isOrderBookLoading,
     error: orderBookError,
-    results: orderBookResults
-  } = (0, import_hooks18.useOrderBook)({
-    orderbooks: orderBookInputs,
-    enabled: isOpened && selectedTab === "order-book" && orderBookInputs.length > 0,
-    canonicalMarketId: liveUpdate ? canonicalMarketIdForHistory : void 0
+    refetch: refetchOrderBook
+  } = (0, import_hooks19.useMarketOrderbook)({
+    marketId: primaryVenueMarketId,
+    enabled: orderBookEnabled && !!primaryVenueMarketId,
+    venueOutcomes: selectedOutcomesByVenue.map((item) => ({
+      venue: item.market.venue,
+      venueMarketOutcomeId: item.outcome.id
+    }))
   });
+  const orderBookData = (0, import_react9.useMemo)(() => {
+    if (!marketOrderbookData)
+      return void 0;
+    const results = selectedOutcomesByVenue.flatMap(({ market, outcome }) => {
+      const venueOrderbook = marketOrderbookData.venueOrderbooks[market.venue];
+      if (!venueOrderbook)
+        return [];
+      return [
+        {
+          market,
+          outcome,
+          orderbook: {
+            bids: venueOrderbook.bids,
+            asks: venueOrderbook.asks
+          }
+        }
+      ];
+    });
+    return results.length === selectedOutcomesByVenue.length ? results : void 0;
+  }, [marketOrderbookData, selectedOutcomesByVenue]);
   const askRows = (0, import_react9.useMemo)(() => {
     return resolveOrderBookRows({
       data: orderBookData,
@@ -5958,78 +6150,43 @@ var MarketDetailsContent = ({
       side: "bids"
     });
   }, [orderBookData]);
-  const priceHistoryByVenue = (0, import_react9.useMemo)(() => {
-    const historyByVenue = /* @__PURE__ */ new Map();
-    if (!(priceHistoryData == null ? void 0 : priceHistoryData.length)) {
-      return historyByVenue;
-    }
-    priceHistoryData.forEach((historyItem) => {
-      const venue = historyItem.venue;
-      const venueHistory = historyByVenue.get(venue);
-      if (venueHistory) {
-        venueHistory.push(historyItem);
-        return;
-      }
-      historyByVenue.set(venue, [historyItem]);
-    });
-    return historyByVenue;
-  }, [priceHistoryData]);
-  const graphSeriesByOutcomeLabel = (0, import_react9.useMemo)(() => {
-    const seriesByOutcomeLabel = /* @__PURE__ */ new Map();
-    const resolveOutcomeCandidateIds2 = (outcomeByVenue) => {
-      var _a, _b;
-      const marketWithCanonicalId = outcomeByVenue.market;
-      return [
-        outcomeByVenue.outcome.id,
-        (_a = outcomeByVenue.outcome.externalIdentifier) != null ? _a : void 0,
-        outcomeByVenue.market.externalIdentifier,
-        (_b = marketWithCanonicalId.marketId) != null ? _b : void 0,
-        canonicalMarketIdForHistory
-      ].filter((value) => typeof value === "string" && value.trim().length > 0);
-    };
-    headerOutcomeItems.forEach((headerOutcomeItem) => {
-      var _a;
-      const outcomes = (_a = outcomesByLabel.get(headerOutcomeItem.label)) != null ? _a : [];
-      const graphSeries2 = [];
-      outcomes.forEach((outcomeByVenue, index) => {
-        var _a2;
-        const venueHistory = priceHistoryByVenue.get(outcomeByVenue.venue);
-        if (!(venueHistory == null ? void 0 : venueHistory.length))
-          return;
-        const candidateIds = resolveOutcomeCandidateIds2(outcomeByVenue);
-        const matchingHistory = (_a2 = venueHistory.find((historyItem) => candidateIds.includes(historyItem.marketId))) != null ? _a2 : venueHistory.length === 1 ? venueHistory[0] : void 0;
-        if (!matchingHistory)
-          return;
-        const points = matchingHistory.points.map((point) => ({
-          time: point.timestamp,
-          value: point.price * 100,
-          open: point.open == null ? void 0 : point.open * 100,
-          high: point.high == null ? void 0 : point.high * 100,
-          low: point.low == null ? void 0 : point.low * 100,
-          close: point.close == null ? void 0 : point.close * 100
-        })).filter((point) => Number.isFinite(point.time) && Number.isFinite(point.value));
-        if (points.length === 0)
-          return;
-        graphSeries2.push({
-          id: `${headerOutcomeItem.label}-${outcomeByVenue.venue}-${matchingHistory.marketId}`,
-          venue: outcomeByVenue.venue,
-          color: resolveSeriesColor(outcomeByVenue.venue, index),
-          points
-        });
-      });
-      seriesByOutcomeLabel.set(headerOutcomeItem.label, graphSeries2);
-    });
-    return seriesByOutcomeLabel;
-  }, [canonicalMarketIdForHistory, headerOutcomeItems, outcomesByLabel, priceHistoryByVenue]);
   const graphSeries = (0, import_react9.useMemo)(() => {
-    var _a;
-    if (!selectedOutcomeLabel)
-      return [];
-    const seriesForOutcomeLabel = (_a = graphSeriesByOutcomeLabel.get(selectedOutcomeLabel)) != null ? _a : [];
+    const colorByVenue = new Map(
+      selectedOutcomesByVenue.map((item, index) => [
+        item.venue,
+        resolveSeriesColor(item.venue, index)
+      ])
+    );
+    const seriesForOutcomeLabel = resolveMarketChartVenueSeries({
+      chartData: marketChartData,
+      transformProbability: (value) => value
+    }).map((seriesItem) => {
+      var _a2;
+      const resolvedVenue = seriesItem.venue;
+      return {
+        id: `${selectedOutcomeLabel != null ? selectedOutcomeLabel : "graph"}-${resolvedVenue}-${primaryVenueMarketId != null ? primaryVenueMarketId : "chart"}`,
+        venue: resolvedVenue,
+        color: (_a2 = colorByVenue.get(resolvedVenue)) != null ? _a2 : resolveSeriesColor(resolvedVenue, 0),
+        points: seriesItem.points
+      };
+    });
     if (!selectedGraphVenue)
       return seriesForOutcomeLabel;
     return seriesForOutcomeLabel.filter((seriesItem) => seriesItem.venue === selectedGraphVenue);
-  }, [graphSeriesByOutcomeLabel, selectedGraphVenue, selectedOutcomeLabel]);
+  }, [
+    primaryVenueMarketId,
+    marketChartData,
+    selectedGraphVenue,
+    selectedOutcomeLabel,
+    selectedOutcomesByVenue
+  ]);
+  const graphLiveState = (0, import_react9.useMemo)(() => {
+    return resolveMarketChartLiveState({
+      chartData: marketChartData,
+      selectedVenue: selectedGraphVenue,
+      transformProbability: (value) => value
+    });
+  }, [marketChartData, selectedGraphVenue]);
   const otherRows = (0, import_react9.useMemo)(() => {
     if (!model)
       return [];
@@ -6037,9 +6194,10 @@ var MarketDetailsContent = ({
   }, [labels, model]);
   const isOrderBookNotFound = orderBookError && typeof orderBookError === "object" && "status" in orderBookError && orderBookError.status === 404;
   const hasOrderBookError = !!orderBookError && !isOrderBookNotFound;
-  const hasNoOrderBook = isOrderBookNotFound || !isOrderBookLoading && !hasOrderBookError && (orderBookInputs.length === 0 || askRows.length === 0 && bidRows.length === 0);
+  const hasNoOrderBook = isOrderBookNotFound || !isOrderBookLoading && !hasOrderBookError && (selectedOutcomesByVenue.length === 0 || askRows.length === 0 && bidRows.length === 0);
+  const hasChartError = !!marketChartError;
   const handleOutcomeKeyDown = (eventToHandle) => {
-    var _a;
+    var _a2;
     if ((eventToHandle == null ? void 0 : eventToHandle.key) !== "ArrowLeft" && (eventToHandle == null ? void 0 : eventToHandle.key) !== "ArrowRight") {
       return;
     }
@@ -6050,19 +6208,17 @@ var MarketDetailsContent = ({
     });
     const direction = eventToHandle.key === "ArrowRight" ? 1 : -1;
     const nextIndex = activeIndex < 0 ? 0 : (activeIndex + direction + headerOutcomeItems.length) % headerOutcomeItems.length;
-    setSelectedOutcomeLabel((_a = headerOutcomeItems[nextIndex]) == null ? void 0 : _a.label);
+    setSelectedOutcomeLabel((_a2 = headerOutcomeItems[nextIndex]) == null ? void 0 : _a2.label);
   };
-  const handleToggleExpanded = (event2) => {
-    if (event2 && "key" in event2 && (event2 == null ? void 0 : event2.key) !== "Enter" && (event2 == null ? void 0 : event2.key) !== " ") {
+  const handleToggleExpanded = (event) => {
+    if (!marketId)
+      return;
+    if (event && "key" in event && (event == null ? void 0 : event.key) !== "Enter" && (event == null ? void 0 : event.key) !== " ") {
       return;
     }
-    event2 == null ? void 0 : event2.preventDefault();
-    event2 == null ? void 0 : event2.stopPropagation();
-    setIsOpened((prev) => {
-      const next = !prev;
-      onOpenChange == null ? void 0 : onOpenChange(next);
-      return next;
-    });
+    event == null ? void 0 : event.preventDefault();
+    event == null ? void 0 : event.stopPropagation();
+    onOpenChange == null ? void 0 : onOpenChange(marketId);
   };
   const handleGraphVenueToggle = (venue) => {
     setSelectedGraphVenue((currentVenue) => {
@@ -6072,7 +6228,10 @@ var MarketDetailsContent = ({
     });
   };
   const handleRetryOrderBook = () => {
-    void Promise.all(orderBookResults.map((result) => result.refetch()));
+    void refetchOrderBook();
+  };
+  const handleRetryMarketChart = () => {
+    void refetchMarketChart();
   };
   (0, import_react9.useEffect)(() => {
     if (!selectedGraphVenue) {
@@ -6084,12 +6243,12 @@ var MarketDetailsContent = ({
     setSelectedGraphVenue(null);
   }, [selectedGraphVenue, selectedOutcomesByVenue]);
   if (marketId && !resolvedMarket) {
-    return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(MarketDetailsNotFoundState, { ariaLabel, classNames });
+    return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(MarketDetailsNotFoundState, { ariaLabel, classNames });
   }
   if (!model) {
-    return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(MarketDetailsUnavailableState, { ariaLabel, classNames });
+    return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(MarketDetailsUnavailableState, { ariaLabel, classNames });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(
     Card,
     {
       className: cn(
@@ -6098,12 +6257,12 @@ var MarketDetailsContent = ({
         classNames == null ? void 0 : classNames.root
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(
           "div",
           {
             className: cn(
               "cursor-pointer disabled:cursor-default",
-              "flex flex-wrap flex-row items-center justify-between gap-3 px-5 py-4",
+              "flex flex-nowrap flex-row items-center justify-between gap-3 px-5 py-4",
               isOpened && "pb-3",
               classNames == null ? void 0 : classNames.header
             ),
@@ -6115,8 +6274,8 @@ var MarketDetailsContent = ({
             onClick: handleToggleExpanded,
             onKeyDown: handleToggleExpanded,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "flex min-w-52 items-center gap-3 md:gap-4", children: [
-                model.image ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-3 md:gap-4", children: [
+                model.image ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
                   RemoteImage,
                   {
                     src: model.image,
@@ -6124,97 +6283,102 @@ var MarketDetailsContent = ({
                     className: "size-12 rounded-agg-lg object-cover md:size-[60px]"
                   }
                 ) : null,
-                /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "flex min-w-0 flex-col", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Typography, { as: "h3", variant: "body-large-strong", className: "truncate", children: model.title }),
-                  /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Typography, { variant: "label", className: "truncate text-agg-muted-foreground", children: model.subtitle }) })
+                /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "flex min-w-0 flex-col", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Typography, { as: "h3", variant: "body-large-strong", className: "truncate", children: model.title }),
+                  /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Typography, { variant: "label", className: "truncate text-agg-muted-foreground", children: model.subtitle }) })
                 ] })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Typography, { as: "div", variant: "heading", className: "shrink-0", children: formatProbabilityPercent(headlineProbability) }),
-              /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
-                "div",
-                {
-                  className: "flex gap-2",
-                  role: "tablist",
-                  "aria-label": labels.marketDetails.marketOutcomesAria,
-                  tabIndex: 0,
-                  onKeyDown: (e) => handleOutcomeKeyDown(e),
-                  children: headerOutcomeItems.map((item) => {
-                    const isPositive = item.tone === "positive";
-                    const isActiveOutcome = item.label === selectedOutcomeLabel;
-                    return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
-                      "button",
-                      {
-                        type: "button",
-                        role: "tab",
-                        "aria-selected": isActiveOutcome,
-                        tabIndex: isActiveOutcome ? 0 : -1,
-                        className: getOutcomeButtonClassName({
-                          enableAnimations: config.enableAnimations,
-                          isPositive,
-                          isActive: isActiveOutcome
-                        }),
-                        onClick: (e) => {
-                          e.preventDefault();
-                          e.stopPropagation();
-                          setSelectedOutcomeLabel(item.label);
+              /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "flex shrink-0 items-center gap-3", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Typography, { as: "div", variant: "heading", className: "shrink-0", children: formatProbabilityPercent(headlineProbability) }),
+                /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+                  "div",
+                  {
+                    className: "flex shrink-0 gap-2",
+                    role: "tablist",
+                    "aria-label": labels.marketDetails.marketOutcomesAria,
+                    tabIndex: 0,
+                    onKeyDown: (e) => handleOutcomeKeyDown(e),
+                    children: headerOutcomeItems.map((item) => {
+                      const isPositive = item.tone === "positive";
+                      const isActiveOutcome = item.label === selectedOutcomeLabel;
+                      return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+                        "button",
+                        {
+                          type: "button",
+                          role: "tab",
+                          "aria-selected": isActiveOutcome,
+                          tabIndex: isActiveOutcome ? 0 : -1,
+                          className: getOutcomeButtonClassName({
+                            enableAnimations: config.features.enableAnimations,
+                            isPositive,
+                            isActive: isActiveOutcome
+                          }),
+                          onClick: (e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            setSelectedOutcomeLabel(item.label);
+                          },
+                          children: /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("span", { className: "inline-flex items-center gap-2", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+                              VenueLogo,
+                              {
+                                venue: item.venue,
+                                size: "small",
+                                color: isActiveOutcome ? "var(--agg-color-on-primary)" : void 0
+                              }
+                            ),
+                            /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+                              Typography,
+                              {
+                                variant: isActiveOutcome ? "body-strong" : "body",
+                                className: cn(
+                                  "text-agg-base leading-agg-6",
+                                  isActiveOutcome ? "text-agg-on-primary" : "text-agg-foreground"
+                                ),
+                                children: `${item.label} ${formatProbabilityCents(item.probability)}`
+                              }
+                            )
+                          ] })
                         },
-                        children: /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("span", { className: "inline-flex items-center gap-2", children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
-                            VenueLogo,
-                            {
-                              venue: isPositive ? "polymarket" : "probable",
-                              size: "small",
-                              color: isActiveOutcome ? "var(--agg-color-on-primary)" : void 0
-                            }
-                          ),
-                          /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
-                            Typography,
-                            {
-                              variant: isActiveOutcome ? "body-strong" : "body",
-                              className: cn(
-                                "text-agg-base leading-agg-6",
-                                isActiveOutcome ? "text-agg-on-primary" : "text-agg-foreground"
-                              ),
-                              children: `${item.label} ${formatProbabilityCents(item.probability)}`
-                            }
-                          )
-                        ] })
-                      },
-                      item.label
-                    );
-                  })
-                }
-              )
+                        item.label
+                      );
+                    })
+                  }
+                )
+              ] })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
           "div",
           {
             id: detailsContentId,
             className: cn(
               "grid overflow-hidden",
-              getMotionClassName(config.enableAnimations, "transition-all duration-500 ease-in-out"),
+              getMotionClassName(
+                config.features.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_runtime79.jsxs)("div", { className: "min-h-0", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "h-px w-full bg-agg-separator" }),
-              /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "min-h-0", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "h-px w-full bg-agg-separator" }),
+              /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(
                 "div",
                 {
                   className: cn(
                     getMotionClassName(
-                      config.enableAnimations,
+                      config.features.enableAnimations,
                       "transition-all duration-500 ease-in-out"
                     ),
                     isOpened ? cn(
                       "translate-y-0 opacity-100",
-                      getMotionClassName(config.enableAnimations, "delay-100")
+                      getMotionClassName(config.features.enableAnimations, "delay-100")
                     ) : "translate-y-5 opacity-0"
                   ),
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: cn("block", classNames == null ? void 0 : classNames.tabs), children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: cn("block", classNames == null ? void 0 : classNames.tabs), children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
                       Tabs,
                       {
                         ariaLabel: labels.marketDetails.tabsAria,
@@ -6225,9 +6389,9 @@ var MarketDetailsContent = ({
                         className: "w-full px-5"
                       }
                     ) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "h-px w-full bg-agg-separator" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: cn("p-5", classNames == null ? void 0 : classNames.content), children: [
-                      selectedTab === "order-book" ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: cn("flex flex-col gap-5", classNames == null ? void 0 : classNames.orderBook), children: isOrderBookLoading ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(MarketDetailsOderbookSkeleton, {}) : hasOrderBookError ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "h-px w-full bg-agg-separator" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: cn("p-5", classNames == null ? void 0 : classNames.content), children: [
+                      selectedTab === "order-book" ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: cn("flex flex-col gap-5", classNames == null ? void 0 : classNames.orderBook), children: isOrderBookLoading ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(MarketDetailsOderbookSkeleton, {}) : hasOrderBookError ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
                         StateMessage,
                         {
                           ariaLabel: labels.marketDetails.orderBookUnavailableAria,
@@ -6238,7 +6402,7 @@ var MarketDetailsContent = ({
                           onAction: handleRetryOrderBook,
                           className: "min-h-[248px] px-5 py-10 md:min-h-[272px]"
                         }
-                      ) : hasNoOrderBook ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+                      ) : hasNoOrderBook ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
                         StateMessage,
                         {
                           ariaLabel: labels.marketDetails.orderBookEmptyAria,
@@ -6246,44 +6410,57 @@ var MarketDetailsContent = ({
                           description: labels.marketDetails.orderBookEmptyDescription,
                           className: "min-h-[248px] px-5 py-10 md:min-h-[272px]"
                         }
-                      ) : /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(import_jsx_runtime79.Fragment, { children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+                      ) : /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(import_jsx_runtime80.Fragment, { children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
                           OrderBookRows,
                           {
                             rows: askRows,
                             title: labels.marketDetails.asks,
-                            formatNumber: config.formatNumber,
-                            formatCurrency: config.formatCurrency,
+                            formatNumber: config.formatting.formatNumber,
+                            formatCurrency: config.formatting.formatCurrency,
                             visibleRows: orderBookDepth
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
                           OrderBookRows,
                           {
                             rows: bidRows,
                             title: labels.marketDetails.bids,
-                            formatNumber: config.formatNumber,
-                            formatCurrency: config.formatCurrency,
+                            formatNumber: config.formatting.formatNumber,
+                            formatCurrency: config.formatting.formatCurrency,
                             visibleRows: orderBookDepth
                           }
                         )
                       ] }) }) : null,
-                      selectedTab === "graph" ? /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: cn("flex flex-col gap-5", classNames == null ? void 0 : classNames.graph), children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+                      selectedTab === "graph" ? /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: cn("flex flex-col gap-5", classNames == null ? void 0 : classNames.graph), children: [
+                        hasChartError ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+                          StateMessage,
+                          {
+                            ariaLabel: labels.marketDetails.chartUnavailableAria,
+                            tone: "warning",
+                            title: labels.marketDetails.chartUnavailableTitle,
+                            description: labels.marketDetails.chartUnavailableDescription,
+                            actionLabel: labels.common.retry,
+                            onAction: handleRetryMarketChart,
+                            className: "min-h-[248px] px-5 py-10 md:min-h-[272px]"
+                          }
+                        ) : /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
                           LineChart,
                           {
                             series: graphSeries,
                             height: 260,
-                            isLoading: isPriceHistoryLoading,
+                            isLoading: isMarketChartLoading,
                             chartType: selectedChartType,
+                            liveCandle: selectedChartType === "candlestick" ? (_d = graphLiveState.liveCandle) != null ? _d : void 0 : void 0,
+                            lineValue: graphLiveState.lineValue,
                             classNames: { root: "w-full" },
                             showSeriesControls: selectedOutcomesByVenue.length > 0 || headerOutcomeItems.length > 0,
                             renderSeriesControls: () => {
-                              return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "flex flex-col gap-4 md:flex-row md:items-center md:justify-between", children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "flex flex-wrap gap-2", children: selectedOutcomesByVenue.map((item) => {
+                              return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "flex flex-col gap-4 md:flex-row md:items-center md:justify-between", children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime80.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_runtime79.jsxs)(
+                                  return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(
                                     "button",
                                     {
                                       type: "button",
@@ -6300,14 +6477,14 @@ var MarketDetailsContent = ({
                                         handleGraphVenueToggle(item.venue);
                                       },
                                       children: [
-                                        /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(VenueLogo, { venue: item.venue, size: "small" }),
-                                        /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("span", { className: "text-agg-base leading-agg-6 text-agg-foreground", children: probability })
+                                        /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(VenueLogo, { venue: item.venue, size: "small" }),
+                                        /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { className: "text-agg-base leading-agg-6 text-agg-foreground", children: probability })
                                       ]
                                     },
                                     `${item.market.id}-${item.outcome.id}`
                                   );
                                 }) }),
-                                /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+                                /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
                                   SwitchButton,
                                   {
                                     ariaLabel: labels.marketDetails.outcomeSelectorAria,
@@ -6325,7 +6502,7 @@ var MarketDetailsContent = ({
                             }
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(
+                        /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(
                           "div",
                           {
                             className: cn(
@@ -6333,9 +6510,9 @@ var MarketDetailsContent = ({
                               classNames == null ? void 0 : classNames.footer
                             ),
                             children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("span", { children: typeof model.market.volume === "number" ? `${config.formatCompactCurrency(model.market.volume)} ${labels.marketDetails.meta.volumeSuffix}` : labels.marketDetails.volumeUnavailable }),
-                              /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "flex flex-wrap items-center gap-3 md:gap-4", children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+                              /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { children: typeof model.market.volume === "number" ? `${config.formatting.formatCompactCurrency(model.market.volume)} ${labels.marketDetails.meta.volumeSuffix}` : labels.marketDetails.volumeUnavailable }),
+                              /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "flex flex-wrap items-center gap-3 md:gap-4", children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
                                   ChartTypeSwitch,
                                   {
                                     className: "shrink-0",
@@ -6343,7 +6520,7 @@ var MarketDetailsContent = ({
                                     onValueChange: setSelectedChartType
                                   }
                                 ),
-                                /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+                                /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
                                   "span",
                                   {
                                     "aria-hidden": "true",
@@ -6352,7 +6529,7 @@ var MarketDetailsContent = ({
                                 ),
                                 eventListItemDetailsTimeRanges.map((timeRange) => {
                                   const isActive = selectedTimeRange === timeRange;
-                                  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+                                  return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
                                     "button",
                                     {
                                       type: "button",
@@ -6376,13 +6553,13 @@ var MarketDetailsContent = ({
                           }
                         )
                       ] }) : null,
-                      selectedTab === "other" ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "flex flex-col gap-4", children: otherContent != null ? otherContent : /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "grid grid-cols-1 gap-3", children: otherRows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(
+                      selectedTab === "other" ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "flex flex-col gap-4", children: otherContent != null ? otherContent : /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "grid grid-cols-1 gap-3", children: otherRows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(
                         "div",
                         {
                           className: "flex items-center justify-between rounded-agg-xl bg-agg-secondary-hover px-4 py-3",
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Typography, { variant: "label", className: "text-agg-muted-foreground", children: row.label }),
-                            /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Typography, { variant: "body", className: "text-right", children: row.value })
+                            /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Typography, { variant: "label", className: "text-agg-muted-foreground", children: row.label }),
+                            /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Typography, { variant: "body", className: "text-right", children: row.value })
                           ]
                         },
                         row.label
@@ -6398,89 +6575,131 @@ var MarketDetailsContent = ({
     }
   );
 };
-var MarketDetails = (props) => {
-  var _a, _b;
-  const [uncontrolledIsOpened, setUncontrolledIsOpened] = (0, import_react9.useState)(
-    (_a = props.defaultIsOpened) != null ? _a : marketDetailsDefaultIsOpened
-  );
-  (0, import_react9.useEffect)(() => {
-    if (typeof props.isOpened !== "boolean")
-      return;
-    setUncontrolledIsOpened(props.isOpened);
-  }, [props.isOpened]);
-  const resolvedIsOpened = typeof props.isOpened === "boolean" ? props.isOpened : uncontrolledIsOpened;
-  const handleOpenChange = (nextIsOpened) => {
-    var _a2;
-    if (typeof props.isOpened !== "boolean") {
-      setUncontrolledIsOpened(nextIsOpened);
-    }
-    (_a2 = props.onOpenChange) == null ? void 0 : _a2.call(props, nextIsOpened);
-  };
-  const hasEventProp = "event" in props && !!props.event;
-  const {
-    event: fetchedEvent,
-    error: eventError,
-    isLoading: isFetchingEvent
-  } = (0, import_hooks18.useVenueEvent)({
-    eventId: hasEventProp ? "" : (_b = props.eventId) != null ? _b : "",
-    enabled: !props.isLoading && !hasEventProp && !!props.eventId
-  });
+var MarketDetails = (_a) => {
+  var _b = _a, { isOpened } = _b, props = __objRest(_b, ["isOpened"]);
   if (props.isLoading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
       MarketDetailsLoadingState,
       {
-        isOpened: resolvedIsOpened,
+        isOpened,
         ariaLabel: props.ariaLabel,
         classNames: props.classNames
       }
     );
   }
-  if ("event" in props && props.event) {
-    return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+  if ("venueMarkets" in props && props.venueMarkets) {
+    return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
       MarketDetailsContent,
       __spreadProps(__spreadValues({}, props), {
-        isOpened: resolvedIsOpened,
-        onOpenChange: handleOpenChange,
-        event: props.event
+        isOpened,
+        onOpenChange: props.onOpenChange,
+        venueMarkets: props.venueMarkets
       })
     );
   }
-  if (isFetchingEvent) {
-    return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
-      MarketDetailsLoadingState,
+  const { ariaLabel: fallbackAriaLabel, classNames: fallbackClassNames } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(MarketDetailsUnavailableState, { ariaLabel: fallbackAriaLabel, classNames: fallbackClassNames });
+};
+MarketDetails.displayName = "MarketDetails";
+var resolveInitialExpandedId = (markets) => {
+  var _a, _b;
+  if (!markets.length)
+    return null;
+  return (_b = (_a = markets[0]) == null ? void 0 : _a.id) != null ? _b : null;
+};
+var MarketDetailsList = ({
+  eventId,
+  onExpandedMarketChange,
+  defaultTab,
+  defaultTimeRange,
+  classNames,
+  ariaLabel
+}) => {
+  const labels = (0, import_hooks19.useLabels)();
+  const resolvedEventId = eventId || "";
+  const { markets, isLoading, error } = (0, import_hooks19.useVenueMarkets)({
+    venueEventId: resolvedEventId,
+    enabled: !!resolvedEventId
+  });
+  const [expandedMarketId, setExpandedMarketId] = (0, import_react9.useState)(
+    () => resolveInitialExpandedId(markets)
+  );
+  (0, import_react9.useEffect)(() => {
+    setExpandedMarketId((current) => {
+      if (current && markets.some((m) => m.id === current))
+        return current;
+      return resolveInitialExpandedId(markets);
+    });
+  }, [markets]);
+  const handleToggle = (marketId) => {
+    if (marketId === expandedMarketId) {
+      onExpandedMarketChange == null ? void 0 : onExpandedMarketChange(null);
+      setExpandedMarketId(null);
+      return;
+    }
+    onExpandedMarketChange == null ? void 0 : onExpandedMarketChange(marketId);
+    setExpandedMarketId(marketId);
+  };
+  if (isLoading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: cn("flex flex-col gap-3", classNames == null ? void 0 : classNames.root), "aria-label": ariaLabel, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(MarketDetailsLoadingState, { isOpened: true, classNames: { root: classNames == null ? void 0 : classNames.item } }),
+      /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(MarketDetailsLoadingState, { isOpened: false, classNames: { root: classNames == null ? void 0 : classNames.item } })
+    ] });
+  }
+  if (error) {
+    return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Card, { className: cn(marketDetailsBaseCardClassName, "p-0", classNames == null ? void 0 : classNames.root), children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+      StateMessage,
       {
-        isOpened: resolvedIsOpened,
-        ariaLabel: props.ariaLabel,
-        classNames: props.classNames
+        ariaLabel: ariaLabel != null ? ariaLabel : labels.marketDetails.unavailableAria,
+        title: labels.marketDetails.unavailableTitle,
+        description: labels.marketDetails.unavailableDescription,
+        className: "min-h-[280px] md:min-h-[320px]"
       }
-    );
+    ) });
   }
-  if (!fetchedEvent) {
-    if (isErrorWithStatus(eventError, 404)) {
-      return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(MarketDetailsNotFoundState, { ariaLabel: props.ariaLabel, classNames: props.classNames });
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(MarketDetailsUnavailableState, { ariaLabel: props.ariaLabel, classNames: props.classNames });
+  if (markets.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Card, { className: cn(marketDetailsBaseCardClassName, "p-0", classNames == null ? void 0 : classNames.root), children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+      StateMessage,
+      {
+        ariaLabel: ariaLabel != null ? ariaLabel : labels.marketDetails.notFoundAria,
+        title: labels.marketDetails.notFoundTitle,
+        description: labels.marketDetails.notFoundDescription,
+        className: "min-h-[280px] md:min-h-[320px]"
+      }
+    ) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
-    MarketDetailsContent,
-    __spreadProps(__spreadValues({}, props), {
-      isOpened: resolvedIsOpened,
-      onOpenChange: handleOpenChange,
-      event: fetchedEvent
-    })
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: cn("flex flex-col gap-3", classNames == null ? void 0 : classNames.root), "aria-label": ariaLabel, children: markets.map((market) => /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+    MarketDetails,
+    {
+      marketId: market.id,
+      venueMarkets: [market],
+      isOpened: expandedMarketId === market.id,
+      onOpenChange: (marketId) => {
+        handleToggle(marketId);
+      },
+      defaultTab,
+      defaultTimeRange,
+      ariaLabel: market.question,
+      classNames: { root: classNames == null ? void 0 : classNames.item }
+    },
+    market.id
+  )) });
 };
-MarketDetails.displayName = "MarketDetails";
+MarketDetailsList.displayName = "MarketDetailsList";
 
 // src/events/list/index.tsx
 var import_react10 = require("react");
-var import_hooks19 = require("@agg-market/hooks");
+var import_hooks20 = require("@agg-market/hooks");
 
 // src/events/list/event-list.constants.ts
 var POLYMARKET_VENUE = "polymarket";
 var KALSHI_VENUE = "kalshi";
+var OPINION_VENUE = "opinion";
+var PROBABLE_VENUE = "probable";
 var POLYMARKET_VENUE_LOGO = "polymarket";
 var KALSHI_VENUE_LOGO = "kalshi";
+var OPINION_VENUE_LOGO = "opinion";
+var PROBABLE_VENUE_LOGO = "probable";
 var getDefaultEventListTabs = (labels) => {
   return [
     {
@@ -6499,6 +6718,18 @@ var getDefaultEventListTabs = (labels) => {
       label: labels.venues.kalshi,
       venueLogo: KALSHI_VENUE_LOGO,
       venues: [KALSHI_VENUE]
+    },
+    {
+      value: "opinion",
+      label: labels.venues.opinion,
+      venueLogo: OPINION_VENUE_LOGO,
+      venues: [OPINION_VENUE]
+    },
+    {
+      value: "probable",
+      label: labels.venues.probable,
+      venueLogo: PROBABLE_VENUE_LOGO,
+      venues: [PROBABLE_VENUE]
     }
   ];
 };
@@ -6517,21 +6748,21 @@ var resolveTabVenus = (tab) => {
     return void 0;
   if (tab.venues && tab.venues.length > 0)
     return tab.venues;
-  if (tab.value === "polymarket" || tab.value === "kalshi") {
+  if (tab.value === "polymarket" || tab.value === "kalshi" || tab.value === "opinion" || tab.value === "probable") {
     return [tab.value];
   }
   return void 0;
 };
 
 // src/events/list/index.tsx
-var import_jsx_runtime80 = require("react/jsx-runtime");
+var import_jsx_runtime81 = require("react/jsx-runtime");
 var renderTabIcon = (tab, isActive) => {
   if (tab.venueLogo) {
-    return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(VenueLogo, { venue: tab.venueLogo, size: "small" });
+    return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(VenueLogo, { venue: tab.venueLogo, size: "small" });
   }
   if (!tab.iconName)
     return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
     Icon,
     {
       name: tab.iconName,
@@ -6569,14 +6800,14 @@ var estimateTabsWidth = (items) => {
 var EventList = ({
   title,
   maxItemsPerRow = 3,
-  limit = 3,
+  limit = 9,
   maxVisibleItems,
-  showVenueLogo = true,
   search,
-  categoryIds
+  categoryIds,
+  onClick
 }) => {
   var _a, _b;
-  const labels = (0, import_hooks19.useLabels)();
+  const labels = (0, import_hooks20.useLabels)();
   const defaultEventListTabs = (0, import_react10.useMemo)(() => {
     return getDefaultEventListTabs(labels);
   }, [labels]);
@@ -6597,7 +6828,8 @@ var EventList = ({
   }, [maxVisibleItems]);
   const requestLimit = resolvedMaxVisibleItems != null ? resolvedMaxVisibleItems : limit;
   const shouldPaginate = resolvedMaxVisibleItems == null;
-  const { events, isLoading, isError, fetchNextPage, hasNextPage, isFetchingNextPage } = (0, import_hooks19.useVenueEvents)({
+  const { events, isLoading, isError, fetchNextPage, hasNextPage, isFetchingNextPage } = (0, import_hooks20.useVenueEvents)({
+    queryKeyScope: "event-list",
     venues,
     search,
     categoryIds,
@@ -6701,17 +6933,17 @@ var EventList = ({
     "md:[grid-template-columns:repeat(var(--agg-event-list-columns),minmax(0,1fr))]"
   );
   if (shouldRenderLoadingState) {
-    return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Skeleton, { view: "event-list", ariaLabel: labels.eventList.loading(title) });
+    return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Skeleton, { view: "event-list", ariaLabel: labels.eventList.loading(title) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("section", { className: "flex w-full flex-col gap-5", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("section", { className: "flex w-full flex-col gap-5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
       "header",
       {
         ref: headerRef,
         className: "flex flex-col sm:flex-row w-full flex-nowrap items-start sm:items-center justify-between gap-2 sm:gap-4",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { ref: titleRef, className: "min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Typography, { as: "h2", variant: "title", className: "truncate [&::first-letter]:uppercase", children: title }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { ref: titleRef, className: "min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Typography, { as: "h2", variant: "title", className: "truncate [&::first-letter]:uppercase", children: title }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
             Tabs,
             {
               ariaLabel: labels.eventList.tabsAria(title),
@@ -6723,19 +6955,19 @@ var EventList = ({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: gridClassName, style: gridStyle, children: [
-      tileEvents.map((event) => /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: gridClassName, style: gridStyle, children: [
+      tileEvents.map((event) => /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
         EventListItem,
         {
           event,
-          showVenueLogo,
           classNames: {
             root: "w-full min-w-0 max-w-none"
-          }
+          },
+          onClick
         },
         event.id
       )),
-      Array.from({ length: loadingPlaceholderCount }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+      Array.from({ length: loadingPlaceholderCount }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
         EventListItem,
         {
           isLoading: true,
@@ -6745,16 +6977,15 @@ var EventList = ({
         },
         `loading-${index}`
       )),
-      !isLoading && !isError && (tileEvents == null ? void 0 : tileEvents.length) === 0 ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Card, { className: "col-span-full overflow-hidden shadow-none hover:shadow-none", children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+      !isLoading && !isError && (tileEvents == null ? void 0 : tileEvents.length) === 0 ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Card, { className: "col-span-full overflow-hidden shadow-none hover:shadow-none p-0! border-none! bg-transparent!", children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
         StateMessage,
         {
           ariaLabel: labels.eventList.emptyAria,
           title: labels.eventList.emptyTitle,
-          description: labels.eventList.emptyDescription,
-          className: "min-h-[320px]"
+          description: labels.eventList.emptyDescription
         }
       ) }) : null,
-      isError ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+      isError ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
         Typography,
         {
           variant: "body",
@@ -6763,7 +6994,7 @@ var EventList = ({
         }
       ) : null
     ] }),
-    shouldPaginate && hasNextPage ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { ref: loadMoreRef, className: "h-px w-full", "aria-hidden": true }) : null
+    shouldPaginate && hasNextPage ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { ref: loadMoreRef, className: "h-px w-full", "aria-hidden": true }) : null
   ] });
 };
 EventList.displayName = "EventList";
@@ -6772,5 +7003,6 @@ EventList.displayName = "EventList";
   EventList,
   EventListItem,
   EventListItemDetails,
-  MarketDetails
+  MarketDetails,
+  MarketDetailsList
 });