@agg-market/ui 10.0.0 → 11.0.0

package/dist/{chunk-GYOCLZGH.mjs → chunk-2KGE5AJQ.mjs}

@@ -20,14 +20,24 @@ import {
   detailsBaseCardClassName,
   eventListItemDetailsTimeRanges,
   fallbackLineColors,
+  formatCountLabel,
   getMarketDetailsTabs,
   getMotionClassName,
+  getVenueSummary,
   lineColorByVenue,
   marketDetailsBaseCardClassName,
   marketDetailsDefaultIsOpened,
+  normalizeProbability,
   orderBookRowLimitDefault,
-  toDate
-} from "./chunk-XP7DREIX.mjs";
+  resolveEventListItemEvent,
+  resolveOutcomeTitle,
+  resolveTileImage,
+  resolveTileTitle,
+  resolveVenueLabel,
+  resolveVisibleOutcomes,
+  selectPrimaryVenueMarket,
+  sortOutcomes
+} from "./chunk-IUJXJEDQ.mjs";
 
 // src/events/item/index.tsx
 import dayjs from "dayjs";
@@ -49,142 +59,6 @@ var isErrorWithStatus = (error, status) => {
   return getErrorStatus(error) === status;
 };
 
-// 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
 import { jsx, jsxs } from "react/jsx-runtime";
 var EventListItemLoadingState = ({
@@ -267,7 +141,7 @@ 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;
@@ -279,10 +153,10 @@ var EventListItemContent = ({
   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__ */ jsxs("div", { className: cn("flex items-center gap-1", "text-agg-success"), children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "label-strong", className: "text-agg-success", children: config.formatPercent(value) }),
+      /* @__PURE__ */ jsx(Typography, { variant: "label-strong", className: "text-agg-success", children: config.formatting.formatPercent(value) }),
       /* @__PURE__ */ jsx(
         Icon,
         {
@@ -353,7 +227,7 @@ var EventListItemContent = ({
                   showBadge ? /* @__PURE__ */ jsx(
                     Badge,
                     {
-                      text: config.formatPercent(probability),
+                      text: config.formatting.formatPercent(probability),
                       prefix: /* @__PURE__ */ jsx(VenueLogo, { venue: visibleOutcome.venue, size: "small" }),
                       size: "large",
                       classNames: {
@@ -833,7 +707,9 @@ var EventListItemDetailsGraphSection = ({
 }) => {
   var _a, _b;
   const labels = useLabels3();
-  const { enableLiveUpdates } = useSdkUiConfig2();
+  const {
+    features: { enableLiveUpdates }
+  } = useSdkUiConfig2();
   const [selectedVenue, setSelectedVenue] = useState(null);
   const [activeProbabilityMode, setActiveProbabilityMode] = useState("yes");
   const probabilityModeConfigs = useMemo3(() => {
@@ -1147,7 +1023,7 @@ var EventListItemDetailsContent = ({
   const [selectedOutcomeLabel, setSelectedOutcomeLabel] = useState(() => {
     return resolveDefaultOutcomeLabel(outcomeLabels);
   });
-  const configTimeRange = config.defaultChartTimeRange;
+  const configTimeRange = config.chart.defaultChartTimeRange;
   const [selectedTimeRange, setSelectedTimeRange] = useState(() => {
     return getDefaultSelectedTimeRange(defaultTimeRange, configTimeRange);
   });
@@ -1216,7 +1092,7 @@ var EventListItemDetailsContent = ({
     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__ */ jsx3(
@@ -1332,7 +1208,7 @@ var EventListItemDetailsContent = ({
             isDateOutcomeMarket,
             classNames,
             venueInfo,
-            formatPercent: config.formatPercent,
+            formatPercent: config.formatting.formatPercent,
             selectedTimeRange,
             selectedChartType
           }
@@ -1548,6 +1424,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)
@@ -1599,7 +1490,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;
@@ -1722,7 +1613,9 @@ var buildMarketDetailsModel = ({
     formatCompactCurrency,
     labels
   });
-  const outcomeLabels = resolveDisplayOutcomeLabels(resolveOutcomeLabels(market.venueMarkets));
+  const outcomeLabels = resolveDisplayOutcomeLabels(
+    resolveMarketDetailsOutcomeLabels(market.venueMarkets)
+  );
   const probabilityByLabel = resolveAverageProbabilityByLabel(market.venueMarkets, outcomeLabels);
   return {
     market,
@@ -1852,7 +1745,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",
@@ -1865,7 +1758,7 @@ var MarketDetailsContent = ({
   marketId,
   title,
   image,
-  isOpened: defaultIsOpened = marketDetailsDefaultIsOpened,
+  isOpened: controlledIsOpened = marketDetailsDefaultIsOpened,
   onOpenChange,
   defaultTab,
   defaultOutcomeLabel,
@@ -1885,10 +1778,10 @@ var MarketDetailsContent = ({
       marketId,
       title,
       image,
-      formatCompactCurrency: config.formatCompactCurrency,
+      formatCompactCurrency: config.formatting.formatCompactCurrency,
       labels
     });
-  }, [config.formatCompactCurrency, venueMarkets, image, labels, marketId, title]);
+  }, [config.formatting.formatCompactCurrency, venueMarkets, image, labels, marketId, title]);
   const resolvedMarket = useMemo4(() => {
     return resolveMarketFromVenueMarkets(venueMarkets, marketId);
   }, [venueMarkets, marketId]);
@@ -1898,11 +1791,14 @@ var MarketDetailsContent = ({
   const [selectedTab, setSelectedTab] = useState2(
     () => resolveInitialTab(defaultTab)
   );
-  const [isOpened, setIsOpened] = useState2(defaultIsOpened);
+  const [isOpened, setIsOpened] = useState2(controlledIsOpened);
   useEffect2(() => {
     setSelectedTab(resolveInitialTab(defaultTab));
   }, [defaultTab]);
-  const resolvedDefaultTimeRange = (_a = defaultTimeRange != null ? defaultTimeRange : config.defaultChartTimeRange) != null ? _a : "1D";
+  useEffect2(() => {
+    setIsOpened(controlledIsOpened);
+  }, [controlledIsOpened]);
+  const resolvedDefaultTimeRange = (_a = defaultTimeRange != null ? defaultTimeRange : config.chart.defaultChartTimeRange) != null ? _a : "1D";
   const [selectedTimeRange, setSelectedTimeRange] = useState2(resolvedDefaultTimeRange);
   const [selectedChartType, setSelectedChartType] = useState2("line");
   useEffect2(() => {
@@ -2078,16 +1974,14 @@ var MarketDetailsContent = ({
     setSelectedOutcomeLabel((_a2 = headerOutcomeItems[nextIndex]) == null ? void 0 : _a2.label);
   };
   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;
     }
     event == null ? void 0 : event.preventDefault();
     event == null ? void 0 : event.stopPropagation();
-    setIsOpened((prev) => {
-      const next = !prev;
-      onOpenChange == null ? void 0 : onOpenChange(next);
-      return next;
-    });
+    onOpenChange == null ? void 0 : onOpenChange(marketId);
   };
   const handleGraphVenueToggle = (venue) => {
     setSelectedGraphVenue((currentVenue) => {
@@ -2131,7 +2025,7 @@ var MarketDetailsContent = ({
           {
             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
             ),
@@ -2143,7 +2037,7 @@ var MarketDetailsContent = ({
             onClick: handleToggleExpanded,
             onKeyDown: handleToggleExpanded,
             children: [
-              /* @__PURE__ */ jsxs3("div", { className: "flex min-w-52 max-w-3/4 items-center gap-3 md:gap-4", children: [
+              /* @__PURE__ */ jsxs3("div", { className: "flex min-w-0 flex-1 items-center gap-3 md:gap-4", children: [
                 model.image ? /* @__PURE__ */ jsx4(
                   RemoteImage,
                   {
@@ -2157,62 +2051,64 @@ var MarketDetailsContent = ({
                   /* @__PURE__ */ jsx4("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ jsx4(Typography, { variant: "label", className: "truncate text-agg-muted-foreground", children: model.subtitle }) })
                 ] })
               ] }),
-              /* @__PURE__ */ jsx4(Typography, { as: "div", variant: "heading", className: "shrink-0", children: formatProbabilityPercent(headlineProbability) }),
-              /* @__PURE__ */ jsx4(
-                "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__ */ jsx4(
-                      "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__ */ jsxs3("div", { className: "flex shrink-0 items-center gap-3", children: [
+                /* @__PURE__ */ jsx4(Typography, { as: "div", variant: "heading", className: "shrink-0", children: formatProbabilityPercent(headlineProbability) }),
+                /* @__PURE__ */ jsx4(
+                  "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__ */ jsx4(
+                        "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__ */ jsxs3("span", { className: "inline-flex items-center gap-2", children: [
+                            /* @__PURE__ */ jsx4(
+                              VenueLogo,
+                              {
+                                venue: item.venue,
+                                size: "small",
+                                color: isActiveOutcome ? "var(--agg-color-on-primary)" : void 0
+                              }
+                            ),
+                            /* @__PURE__ */ jsx4(
+                              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__ */ jsxs3("span", { className: "inline-flex items-center gap-2", children: [
-                          /* @__PURE__ */ jsx4(
-                            VenueLogo,
-                            {
-                              venue: "polymarket",
-                              size: "small",
-                              color: isActiveOutcome ? "var(--agg-color-on-primary)" : void 0
-                            }
-                          ),
-                          /* @__PURE__ */ jsx4(
-                            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
+                      );
+                    })
+                  }
+                )
+              ] })
             ]
           }
         ),
@@ -2222,7 +2118,10 @@ var MarketDetailsContent = ({
             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,
@@ -2233,12 +2132,12 @@ var MarketDetailsContent = ({
                 {
                   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: [
@@ -2280,8 +2179,8 @@ var MarketDetailsContent = ({
                           {
                             rows: askRows,
                             title: labels.marketDetails.asks,
-                            formatNumber: config.formatNumber,
-                            formatCurrency: config.formatCurrency,
+                            formatNumber: config.formatting.formatNumber,
+                            formatCurrency: config.formatting.formatCurrency,
                             visibleRows: orderBookDepth
                           }
                         ),
@@ -2290,8 +2189,8 @@ var MarketDetailsContent = ({
                           {
                             rows: bidRows,
                             title: labels.marketDetails.bids,
-                            formatNumber: config.formatNumber,
-                            formatCurrency: config.formatCurrency,
+                            formatNumber: config.formatting.formatNumber,
+                            formatCurrency: config.formatting.formatCurrency,
                             visibleRows: orderBookDepth
                           }
                         )
@@ -2374,7 +2273,7 @@ var MarketDetailsContent = ({
                               classNames == null ? void 0 : classNames.footer
                             ),
                             children: [
-                              /* @__PURE__ */ jsx4("span", { children: typeof model.market.volume === "number" ? `${config.formatCompactCurrency(model.market.volume)} ${labels.marketDetails.meta.volumeSuffix}` : labels.marketDetails.volumeUnavailable }),
+                              /* @__PURE__ */ jsx4("span", { children: typeof model.market.volume === "number" ? `${config.formatting.formatCompactCurrency(model.market.volume)} ${labels.marketDetails.meta.volumeSuffix}` : labels.marketDetails.volumeUnavailable }),
                               /* @__PURE__ */ jsxs3("div", { className: "flex flex-wrap items-center gap-3 md:gap-4", children: [
                                 /* @__PURE__ */ jsx4(
                                   ChartTypeSwitch,
@@ -2439,29 +2338,13 @@ var MarketDetailsContent = ({
     }
   );
 };
-var MarketDetails = (props) => {
-  var _a;
-  const [uncontrolledIsOpened, setUncontrolledIsOpened] = useState2(
-    (_a = props.defaultIsOpened) != null ? _a : marketDetailsDefaultIsOpened
-  );
-  useEffect2(() => {
-    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);
-  };
+var MarketDetails = (_a) => {
+  var _b = _a, { isOpened } = _b, props = __objRest(_b, ["isOpened"]);
   if (props.isLoading) {
     return /* @__PURE__ */ jsx4(
       MarketDetailsLoadingState,
       {
-        isOpened: resolvedIsOpened,
+        isOpened,
         ariaLabel: props.ariaLabel,
         classNames: props.classNames
       }
@@ -2471,8 +2354,8 @@ var MarketDetails = (props) => {
     return /* @__PURE__ */ jsx4(
       MarketDetailsContent,
       __spreadProps(__spreadValues({}, props), {
-        isOpened: resolvedIsOpened,
-        onOpenChange: handleOpenChange,
+        isOpened,
+        onOpenChange: props.onOpenChange,
         venueMarkets: props.venueMarkets
       })
     );
@@ -2481,21 +2364,14 @@ var MarketDetails = (props) => {
   return /* @__PURE__ */ jsx4(MarketDetailsUnavailableState, { ariaLabel: fallbackAriaLabel, classNames: fallbackClassNames });
 };
 MarketDetails.displayName = "MarketDetails";
-var resolveInitialExpandedId = (markets, defaultId) => {
+var resolveInitialExpandedId = (markets) => {
   var _a, _b;
   if (!markets.length)
     return null;
-  if (defaultId) {
-    const match = markets.find((m) => m.id === defaultId);
-    if (match)
-      return match.id;
-  }
   return (_b = (_a = markets[0]) == null ? void 0 : _a.id) != null ? _b : null;
 };
 var MarketDetailsList = ({
   eventId,
-  expandedMarketId,
-  defaultExpandedMarketId,
   onExpandedMarketChange,
   defaultTab,
   defaultTimeRange,
@@ -2508,30 +2384,24 @@ var MarketDetailsList = ({
     venueEventId: resolvedEventId,
     enabled: !!resolvedEventId
   });
-  const [internalExpandedId, setInternalExpandedId] = useState2(
-    () => resolveInitialExpandedId(markets, defaultExpandedMarketId)
+  const [expandedMarketId, setExpandedMarketId] = useState2(
+    () => resolveInitialExpandedId(markets)
   );
   useEffect2(() => {
-    if (typeof expandedMarketId !== "undefined")
-      return;
-    setInternalExpandedId((current) => {
+    setExpandedMarketId((current) => {
       if (current && markets.some((m) => m.id === current))
         return current;
-      return resolveInitialExpandedId(markets, defaultExpandedMarketId);
+      return resolveInitialExpandedId(markets);
     });
-  }, [defaultExpandedMarketId, expandedMarketId, markets]);
-  useEffect2(() => {
-    if (typeof expandedMarketId === "undefined")
+  }, [markets]);
+  const handleToggle = (marketId) => {
+    if (marketId === expandedMarketId) {
+      onExpandedMarketChange == null ? void 0 : onExpandedMarketChange(null);
+      setExpandedMarketId(null);
       return;
-    setInternalExpandedId(expandedMarketId);
-  }, [expandedMarketId]);
-  const resolvedExpandedId = typeof expandedMarketId === "undefined" ? internalExpandedId : expandedMarketId;
-  const handleToggle = (marketId, isOpened) => {
-    const next = isOpened ? marketId : null;
-    if (typeof expandedMarketId === "undefined") {
-      setInternalExpandedId(next);
     }
-    onExpandedMarketChange == null ? void 0 : onExpandedMarketChange(next);
+    onExpandedMarketChange == null ? void 0 : onExpandedMarketChange(marketId);
+    setExpandedMarketId(marketId);
   };
   if (isLoading) {
     return /* @__PURE__ */ jsxs3("div", { className: cn("flex flex-col gap-3", classNames == null ? void 0 : classNames.root), "aria-label": ariaLabel, children: [
@@ -2564,9 +2434,12 @@ var MarketDetailsList = ({
   return /* @__PURE__ */ jsx4("div", { className: cn("flex flex-col gap-3", classNames == null ? void 0 : classNames.root), "aria-label": ariaLabel, children: markets.map((market) => /* @__PURE__ */ jsx4(
     MarketDetails,
     {
+      marketId: market.id,
       venueMarkets: [market],
-      isOpened: resolvedExpandedId === market.id,
-      onOpenChange: (nextIsOpened) => handleToggle(market.id, nextIsOpened),
+      isOpened: expandedMarketId === market.id,
+      onOpenChange: (marketId) => {
+        handleToggle(marketId);
+      },
       defaultTab,
       defaultTimeRange,
       ariaLabel: market.question,
@@ -2584,8 +2457,12 @@ import { useVenueEvents, useLabels as useLabels5 } from "@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 [
     {
@@ -2604,6 +2481,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]
     }
   ];
 };
@@ -2622,7 +2511,7 @@ 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;
@@ -2703,6 +2592,7 @@ var EventList = ({
   const requestLimit = resolvedMaxVisibleItems != null ? resolvedMaxVisibleItems : limit;
   const shouldPaginate = resolvedMaxVisibleItems == null;
   const { events, isLoading, isError, fetchNextPage, hasNextPage, isFetchingNextPage } = useVenueEvents({
+    queryKeyScope: "event-list",
     venues,
     search,
     categoryIds,
@@ -2850,13 +2740,12 @@ var EventList = ({
         },
         `loading-${index}`
       )),
-      !isLoading && !isError && (tileEvents == null ? void 0 : tileEvents.length) === 0 ? /* @__PURE__ */ jsx5(Card, { className: "col-span-full overflow-hidden shadow-none hover:shadow-none", children: /* @__PURE__ */ jsx5(
+      !isLoading && !isError && (tileEvents == null ? void 0 : tileEvents.length) === 0 ? /* @__PURE__ */ jsx5(Card, { className: "col-span-full overflow-hidden shadow-none hover:shadow-none p-0! border-none! bg-transparent!", children: /* @__PURE__ */ jsx5(
         StateMessage,
         {
           ariaLabel: labels.eventList.emptyAria,
           title: labels.eventList.emptyTitle,
-          description: labels.eventList.emptyDescription,
-          className: "min-h-[320px]"
+          description: labels.eventList.emptyDescription
         }
       ) }) : null,
       isError ? /* @__PURE__ */ jsx5(
@@ -2879,5 +2768,7 @@ export {
   EventListItemDetails,
   MarketDetails,
   MarketDetailsList,
+  getDefaultEventListTabs,
+  resolveTabVenus,
   EventList
 };