@agg-build/ui 1.0.0

package/dist/chunk-I2WBGEWK.mjs

@@ -0,0 +1,4512 @@
+"use client";
+import {
+  buildMarketDetailsModel,
+  formatProbabilityCents,
+  formatProbabilityPercent,
+  getTimeWindowByRange,
+  resolveHeaderOutcomeItems,
+  resolveInitialOutcomeLabel,
+  resolveInitialTab,
+  resolveMarketChartDisplaySeries,
+  resolveMarketChartLiveState,
+  resolveMarketChartVenueSeries,
+  resolveMarketFromVenueMarkets,
+  resolveOtherTabRows,
+  resolveOutcomesByVenue,
+  resolveSeriesColor,
+  resolveTradingStateBadgeClassName,
+  resolveTradingStatePresentation,
+  resolveUnifiedOrderBookEntries,
+  sortOutcomeSelectorOutcomes,
+  useEventTradingContext
+} from "./chunk-C7T56TJR.mjs";
+import {
+  AutocompleteSelect,
+  Badge,
+  Button,
+  Card,
+  DEFAULT_EVENTS_LIMIT,
+  Icon,
+  LineChart,
+  MOBILE_TABS_MEDIA_QUERY,
+  MarketDetailsOderbookSkeleton,
+  RemoteImage,
+  SearchEmptyIcon,
+  Skeleton,
+  StateMessage,
+  SwitchButton,
+  Tabs,
+  Tooltip,
+  Typography,
+  VenueLogo,
+  WarningIcon,
+  __objRest,
+  __spreadProps,
+  __spreadValues,
+  baseCardClassName,
+  cn,
+  dedupeVenueMarketsById,
+  detailsBaseCardClassName,
+  filterEventsByTabValue,
+  formatCountLabel,
+  formatMarketProbabilityPercent,
+  formatPriceGapPercent,
+  getDefaultEventListTabs,
+  getMarketDetailsTabs,
+  getMotionClassName,
+  isYesLabel,
+  mapEventToEventListItemEvent,
+  marketDetailsBaseCardClassName,
+  marketDetailsDefaultIsOpened,
+  normalizeProbability,
+  normalizeVenueMarketCluster,
+  orderBookRowLimitDefault,
+  resolveDisplayVolume,
+  resolveEventListItemEvent,
+  resolveOutcomeTitle,
+  resolveTabVenus,
+  resolveYesOutcome,
+  selectPrimaryVenueMarket,
+  sortMarketsByYesOddsDesc,
+  sortOutcomes,
+  splitEventsByLifecycle
+} from "./chunk-6NS7D73S.mjs";
+
+// src/events/item/index.tsx
+import {
+  computePriceGaps,
+  optimizedImageUrl,
+  sortVenues,
+  useLabels,
+  useSdkUiConfig,
+  useVenueEvent,
+  useVenueMarketMidpoints,
+  useVenueMarkets
+} from "@agg-build/hooks";
+import { useCallback, useMemo, useState } from "react";
+
+// src/shared/query-error.ts
+var getErrorStatus = (error) => {
+  if (!error || typeof error !== "object") return null;
+  const status = error.status;
+  return typeof status === "number" ? status : null;
+};
+var isErrorWithStatus = (error, status) => {
+  return getErrorStatus(error) === status;
+};
+
+// src/events/item/index.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var EventListItemLoadingState = ({
+  classNames,
+  ariaLabel
+}) => {
+  const labels = useLabels();
+  return /* @__PURE__ */ jsx(
+    Skeleton,
+    {
+      view: "event-list-item",
+      className: classNames == null ? void 0 : classNames.root,
+      ariaLabel: ariaLabel != null ? ariaLabel : labels.eventItem.loading
+    }
+  );
+};
+var EventListItemUnavailableState = ({
+  classNames,
+  ariaLabel
+}) => {
+  const labels = useLabels();
+  return /* @__PURE__ */ jsx(
+    Card,
+    {
+      className: cn(
+        "group/agg-event-card agg-event-card-unavailable",
+        baseCardClassName,
+        classNames == null ? void 0 : classNames.root
+      ),
+      role: "status",
+      "aria-label": ariaLabel != null ? ariaLabel : labels.eventItem.unavailableAria,
+      children: /* @__PURE__ */ jsxs("div", { className: cn("agg-event-card-header min-h-12 flex flex-col gap-1", classNames == null ? void 0 : classNames.header), children: [
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            variant: "body-large-strong",
+            className: cn("agg-event-title truncate", classNames == null ? void 0 : classNames.title),
+            children: labels.eventItem.unavailableTitle
+          }
+        ),
+        /* @__PURE__ */ jsx(Typography, { variant: "body", className: "text-agg-muted-foreground", children: labels.eventItem.unavailableDescription })
+      ] })
+    }
+  );
+};
+var EventListItemNotFoundState = ({
+  classNames: _classNames,
+  ariaLabel: _ariaLabel
+}) => {
+  const labels = useLabels();
+  return /* @__PURE__ */ jsx(
+    StateMessage,
+    {
+      title: labels.eventItemDetails.notFoundTitle,
+      description: labels.eventItemDetails.notFoundDescription,
+      icon: /* @__PURE__ */ jsx(SearchEmptyIcon, {}),
+      classNames: { root: "agg-event-card-state min-h-[280px] md:min-h-[320px]" }
+    }
+  );
+};
+var OUTCOMES_SCROLL_LOAD_THRESHOLD_PX = 16;
+var isNoLabel = (label) => label.trim().toLowerCase() === "no";
+var MARKET_ID_QUERY_PARAM = "marketId";
+var OUTCOME_ID_QUERY_PARAM = "outcomeId";
+var resolveMarketHrefFromEventHref = (eventHref, marketId, outcomeId) => {
+  if (!eventHref) return void 0;
+  if (typeof window === "undefined") return void 0;
+  try {
+    const url = new URL(eventHref, window.location.origin);
+    url.searchParams.set(MARKET_ID_QUERY_PARAM, marketId);
+    url.searchParams.set(OUTCOME_ID_QUERY_PARAM, outcomeId);
+    return url.toString();
+  } catch (e) {
+    return void 0;
+  }
+};
+var EventListItemContent = ({
+  event,
+  classNames,
+  arbitrageByOutcomeId,
+  onEventClick,
+  onMarketClick,
+  getMarketHref,
+  href,
+  ariaLabel
+}) => {
+  const config = useSdkUiConfig();
+  const labels = useLabels();
+  const allVenueMarkets = useMemo(() => {
+    return dedupeVenueMarketsById(event.venueMarkets);
+  }, [event.venueMarkets]);
+  const _primaryVenueMarket = useMemo(() => {
+    return selectPrimaryVenueMarket(allVenueMarkets);
+  }, [allVenueMarkets]);
+  const resolvedTitle = event.title;
+  const resolvedImage = event.image;
+  const visibleVenueLogos = useMemo(() => {
+    var _a;
+    return sortVenues(Array.from(new Set(((_a = event.venues) != null ? _a : []).map((venue) => venue))));
+  }, [event.venues]);
+  const resolvedMarketCount = typeof event.marketCount === "number" && Number.isFinite(event.marketCount) ? Math.max(0, Math.floor(event.marketCount)) : allVenueMarkets.length;
+  const resolvedVenueCount = typeof event.venueCount === "number" && Number.isFinite(event.venueCount) ? Math.max(0, Math.floor(event.venueCount)) : visibleVenueLogos.length;
+  const [isLazyMarketsQueryEnabled, setIsLazyMarketsQueryEnabled] = useState(false);
+  const shouldEnableLazyMarketLoading = useMemo(() => {
+    if (allVenueMarkets.length <= 1) return false;
+    if (!event.id) return false;
+    const hasExplicitMarketCount = typeof event.marketCount === "number" && Number.isFinite(event.marketCount);
+    if (!hasExplicitMarketCount) return true;
+    return resolvedMarketCount > allVenueMarkets.length;
+  }, [allVenueMarkets.length, event.id, event.marketCount, resolvedMarketCount]);
+  const {
+    markets: lazyLoadedMarkets,
+    fetchNextPage: fetchNextLazyMarketsPage,
+    hasNextPage: hasNextLazyMarketsPage,
+    isLoading: isLoadingLazyMarkets,
+    isFetchingNextPage: isFetchingNextLazyMarketsPage
+  } = useVenueMarkets({
+    venueEventId: event.id,
+    enabled: shouldEnableLazyMarketLoading && isLazyMarketsQueryEnabled,
+    sortBy: "yesPrice",
+    sortDir: "desc"
+  });
+  const resolvedOutcomeMarkets = useMemo(() => {
+    if (!isLazyMarketsQueryEnabled || lazyLoadedMarkets.length === 0) return allVenueMarkets;
+    return dedupeVenueMarketsById([...allVenueMarkets, ...lazyLoadedMarkets]);
+  }, [allVenueMarkets, isLazyMarketsQueryEnabled, lazyLoadedMarkets]);
+  const midpointVenueMarketIds = useMemo(() => {
+    var _a;
+    const ids = [];
+    for (const market of resolvedOutcomeMarkets) {
+      ids.push(market.id);
+      for (const sibling of (_a = market.matchedVenueMarkets) != null ? _a : []) {
+        ids.push(sibling.id);
+      }
+    }
+    return [...new Set(ids)];
+  }, [resolvedOutcomeMarkets]);
+  const {
+    midpointsByVenueMarketId,
+    isLoading: isLoadingMidpoints,
+    isFetching: isFetchingMidpoints
+  } = useVenueMarketMidpoints({
+    venueMarketIds: midpointVenueMarketIds,
+    enabled: midpointVenueMarketIds.length > 0
+  });
+  const gapsByVenueMarketId = useMemo(
+    () => computePriceGaps({
+      markets: resolvedOutcomeMarkets,
+      midpointsByVenueMarketId
+    }),
+    [resolvedOutcomeMarkets, midpointsByVenueMarketId]
+  );
+  const isMidpointQueryInFlight = isLoadingMidpoints || isFetchingMidpoints;
+  const resolveMarketMidpoint = useCallback(
+    (marketId) => {
+      return normalizeProbability(midpointsByVenueMarketId.get(marketId));
+    },
+    [midpointsByVenueMarketId]
+  );
+  const shouldRenderLoadingOutcomeRow = shouldEnableLazyMarketLoading && isLazyMarketsQueryEnabled && (isLoadingLazyMarkets || isFetchingNextLazyMarketsPage);
+  const resolvedVolume = resolveDisplayVolume(event.volume, allVenueMarkets);
+  const volumeLabel = typeof resolvedVolume === "number" ? `${config.formatting.formatCompactCurrency(resolvedVolume)} ${labels.eventItem.volumeSuffix}` : "";
+  const shouldUseNativeLinkNavigation = (eventToHandle) => {
+    return eventToHandle.metaKey || eventToHandle.ctrlKey || eventToHandle.shiftKey || eventToHandle.altKey || eventToHandle.button === 1;
+  };
+  const handleClick = (eventToHandle) => {
+    if (!eventToHandle) {
+      onEventClick == null ? void 0 : onEventClick(event);
+      return;
+    }
+    if (!href) {
+      onEventClick == null ? void 0 : onEventClick(event);
+      return;
+    }
+    if (shouldUseNativeLinkNavigation(eventToHandle)) {
+      return;
+    }
+    if (!onEventClick) {
+      return;
+    }
+    eventToHandle.preventDefault();
+    eventToHandle.stopPropagation();
+    onEventClick(event);
+  };
+  const handleOutcomeBadgeClick = (eventToHandle, market, outcome, marketHref) => {
+    eventToHandle.preventDefault();
+    eventToHandle.stopPropagation();
+    if (marketHref && shouldUseNativeLinkNavigation(eventToHandle)) {
+      window.open(marketHref, "_blank", "noopener,noreferrer");
+      return;
+    }
+    if (onMarketClick) {
+      onMarketClick(event, market, outcome);
+      return;
+    }
+    if (marketHref) {
+      window.location.assign(marketHref);
+    }
+  };
+  const handleKeyDown = (eventToHandle) => {
+    if (href) {
+      if ((eventToHandle == null ? void 0 : eventToHandle.key) === " ") {
+        eventToHandle == null ? void 0 : eventToHandle.preventDefault();
+        eventToHandle.currentTarget.click();
+      }
+      return;
+    }
+    if (!onEventClick) return;
+    if ((eventToHandle == null ? void 0 : eventToHandle.key) === "Enter" || (eventToHandle == null ? void 0 : eventToHandle.key) === " ") {
+      eventToHandle == null ? void 0 : eventToHandle.preventDefault();
+      onEventClick == null ? void 0 : onEventClick(event);
+    }
+  };
+  const handleOutcomesScroll = useCallback(
+    (eventToHandle) => {
+      if (!shouldEnableLazyMarketLoading) return;
+      const element = eventToHandle.currentTarget;
+      const distanceToBottom = element.scrollHeight - element.scrollTop - element.clientHeight;
+      if (distanceToBottom > OUTCOMES_SCROLL_LOAD_THRESHOLD_PX) return;
+      if (!isLazyMarketsQueryEnabled) {
+        setIsLazyMarketsQueryEnabled(true);
+        return;
+      }
+      if (!hasNextLazyMarketsPage) return;
+      if (isLoadingLazyMarkets || isFetchingNextLazyMarketsPage) return;
+      void fetchNextLazyMarketsPage();
+    },
+    [
+      fetchNextLazyMarketsPage,
+      hasNextLazyMarketsPage,
+      isFetchingNextLazyMarketsPage,
+      isLazyMarketsQueryEnabled,
+      isLoadingLazyMarkets,
+      shouldEnableLazyMarketLoading
+    ]
+  );
+  const renderArbitrage = (value) => {
+    if (value == null) return null;
+    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.formatting.formatPercent(value) }),
+      /* @__PURE__ */ jsx(
+        Icon,
+        {
+          name: "triangle-up",
+          size: "small",
+          title: labels.eventItem.arbitrage,
+          className: "size-2!"
+        }
+      )
+    ] });
+  };
+  const _renderPriceGapPill = (value) => {
+    const formattedPriceGap = formatPriceGapPercent(value);
+    if (!formattedPriceGap) return null;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "agg-price-gap-pill",
+          "inline-flex shrink-0 items-center gap-1 rounded-agg-sm border border-agg-success/50 px-2 py-0.5",
+          "bg-agg-success/10"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "overline", className: "text-agg-success", children: formattedPriceGap }),
+          /* @__PURE__ */ jsx(Typography, { variant: "overline", className: "text-agg-success uppercase", children: labels.eventItem.priceGap })
+        ]
+      }
+    );
+  };
+  const renderOutcomePriceBadge = (probability, venue, shouldRenderLoadingSkeleton, market, outcome) => {
+    var _a;
+    if (shouldRenderLoadingSkeleton) {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-hidden": "true",
+          className: cn(
+            "agg-outcome-price-loading bg-agg-separator animate-pulse h-8 w-[100px] rounded-agg-full"
+          )
+        }
+      );
+    }
+    if (typeof probability !== "number") return null;
+    const marketHref = (_a = getMarketHref == null ? void 0 : getMarketHref(event, market, outcome)) != null ? _a : resolveMarketHrefFromEventHref(href, market.id, outcome.id);
+    const isInteractive = Boolean(onMarketClick || marketHref);
+    return /* @__PURE__ */ jsx(
+      Badge,
+      {
+        text: formatMarketProbabilityPercent(probability, config.formatting.formatPercent),
+        prefix: /* @__PURE__ */ jsx(VenueLogo, { venue, size: "small" }),
+        size: "small",
+        classNames: {
+          root: cn(
+            "agg-outcome-price",
+            "h-8 min-w-25 justify-center px-4 text-agg-base leading-agg-6",
+            isInteractive && "cursor-pointer",
+            classNames == null ? void 0 : classNames.badge
+          ),
+          text: "text-agg-foreground"
+        },
+        onClick: isInteractive ? (eventToHandle) => {
+          handleOutcomeBadgeClick(eventToHandle, market, outcome, marketHref);
+        } : void 0,
+        onAuxClick: isInteractive ? (eventToHandle) => {
+          handleOutcomeBadgeClick(eventToHandle, market, outcome, marketHref);
+        } : void 0
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      className: cn(
+        "group/agg-event-card min-w-60 md:min-w-90",
+        baseCardClassName,
+        (onEventClick || href) && "cursor-pointer",
+        classNames == null ? void 0 : classNames.root
+      ),
+      role: !href && onEventClick ? "button" : void 0,
+      tabIndex: !href && onEventClick ? 0 : void 0,
+      href,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      "aria-label": ariaLabel != null ? ariaLabel : resolvedTitle,
+      withGradient: true,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn("agg-event-card-header min-h-12 flex items-center gap-3", classNames == null ? void 0 : classNames.header),
+            children: [
+              /* @__PURE__ */ jsx(
+                RemoteImage,
+                {
+                  src: optimizedImageUrl(resolvedImage, 40),
+                  alt: "",
+                  className: cn("agg-event-image h-10 w-10 rounded-agg-lg object-cover")
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Typography,
+                {
+                  variant: "body-strong",
+                  className: cn(
+                    "agg-event-title",
+                    "min-w-0 text-agg-base font-agg-bold leading-agg-6 ",
+                    "truncate text-wrap wrap-break-word line-clamp-2",
+                    classNames == null ? void 0 : classNames.title
+                  ),
+                  children: resolvedTitle
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "agg-outcomes flex flex-col gap-3 max-h-20 overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+              classNames == null ? void 0 : classNames.outcomes
+            ),
+            onScroll: handleOutcomesScroll,
+            children: [
+              resolvedOutcomeMarkets.length === 1 ? sortOutcomes(resolvedOutcomeMarkets[0].venueMarketOutcomes).map((outcome) => {
+                const market = resolvedOutcomeMarkets[0];
+                const marketMidpoint = resolveMarketMidpoint(market.id);
+                const hasYesOutcome = market.venueMarketOutcomes.some(
+                  (item) => isYesLabel(item.label)
+                );
+                const hasNoOutcome = market.venueMarketOutcomes.some((item) => isNoLabel(item.label));
+                const shouldUseMidpoint = hasYesOutcome && hasNoOutcome;
+                const probability = (() => {
+                  if (!shouldUseMidpoint) {
+                    return normalizeProbability(outcome.price);
+                  }
+                  if (marketMidpoint == null) {
+                    if (isMidpointQueryInFlight) return void 0;
+                    return normalizeProbability(outcome.price);
+                  }
+                  if (isYesLabel(outcome.label)) {
+                    return marketMidpoint;
+                  }
+                  if (isNoLabel(outcome.label)) {
+                    return normalizeProbability(1 - marketMidpoint);
+                  }
+                  return normalizeProbability(outcome.price);
+                })();
+                const shouldRenderMidpointSkeleton = shouldUseMidpoint && marketMidpoint == null && isMidpointQueryInFlight;
+                const arbitragePercent = arbitrageByOutcomeId == null ? void 0 : arbitrageByOutcomeId[outcome.id];
+                const _priceGapPct = gapsByVenueMarketId.get(market.id);
+                return /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: cn(
+                      "agg-outcome-row",
+                      "flex flex-row gap-3 w-full items-center justify-between",
+                      classNames == null ? void 0 : classNames.outcomeRow
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsx("div", { className: "agg-outcome-label-row flex min-w-0 flex-row items-center justify-start gap-2", children: /* @__PURE__ */ jsx(
+                        Typography,
+                        {
+                          variant: "body",
+                          className: "agg-outcome-label min-w-0 truncate text-agg-sm leading-agg-5 md:text-agg-base md:leading-agg-6",
+                          children: resolveOutcomeTitle(outcome)
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsxs("div", { className: "agg-outcome-meta flex flex-row items-center justify-end gap-3", children: [
+                        renderArbitrage(arbitragePercent),
+                        renderOutcomePriceBadge(
+                          probability,
+                          market.venue,
+                          shouldRenderMidpointSkeleton,
+                          market,
+                          outcome
+                        )
+                      ] })
+                    ]
+                  },
+                  outcome.id
+                );
+              }) : sortMarketsByYesOddsDesc(resolvedOutcomeMarkets).map((market) => {
+                var _a, _b;
+                const yesOutcome = resolveYesOutcome(market);
+                const displayOutcome = yesOutcome != null ? yesOutcome : (_b = market.venueMarketOutcomes) == null ? void 0 : _b.reduce(
+                  (acc, o) => o.price > acc.price ? o : acc,
+                  (_a = market.venueMarketOutcomes) == null ? void 0 : _a[0]
+                );
+                const marketMidpoint = resolveMarketMidpoint(market.id);
+                const probability = marketMidpoint != null ? marketMidpoint : isMidpointQueryInFlight ? void 0 : normalizeProbability(displayOutcome == null ? void 0 : displayOutcome.price);
+                const shouldRenderMidpointSkeleton = marketMidpoint == null && isMidpointQueryInFlight;
+                const arbitragePercent = arbitrageByOutcomeId == null ? void 0 : arbitrageByOutcomeId[market.id];
+                const outcomeTitle = market.question;
+                const _priceGapPct = gapsByVenueMarketId.get(market.id);
+                return /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: cn(
+                      "agg-outcome-row",
+                      "flex flex-row gap-3 w-full items-center justify-between",
+                      classNames == null ? void 0 : classNames.outcomeRow
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsx("div", { className: "agg-outcome-label-row flex min-w-0 flex-row items-center justify-start gap-2", children: /* @__PURE__ */ jsx(
+                        Typography,
+                        {
+                          variant: "body",
+                          className: "agg-outcome-label min-w-0 truncate text-agg-sm leading-agg-5 md:text-agg-base md:leading-agg-6",
+                          children: outcomeTitle
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsxs("div", { className: "agg-outcome-meta flex flex-row items-center justify-end gap-3", children: [
+                        renderArbitrage(arbitragePercent),
+                        renderOutcomePriceBadge(
+                          probability,
+                          market.venue,
+                          shouldRenderMidpointSkeleton,
+                          market,
+                          displayOutcome
+                        )
+                      ] })
+                    ]
+                  },
+                  `${market.id}`
+                );
+              }),
+              shouldRenderLoadingOutcomeRow ? /* @__PURE__ */ jsxs("div", { className: "agg-outcome-row-loading flex w-full items-center justify-between gap-3", children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    "aria-hidden": "true",
+                    className: "bg-agg-separator animate-pulse h-5 rounded-agg-sm w-[200px]"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    "aria-hidden": "true",
+                    className: "bg-agg-separator animate-pulse h-9 w-[100px] rounded-agg-full"
+                  }
+                )
+              ] }) : null
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "agg-event-card-footer",
+              "flex items-center justify-between gap-2",
+              "text-agg-muted-foreground",
+              classNames == null ? void 0 : classNames.footer
+            ),
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn(
+                    "agg-event-meta flex items-center gap-1 text-agg-sm leading-agg-5 truncate"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "truncate text-agg-muted-foreground", children: formatCountLabel(
+                      resolvedMarketCount,
+                      labels.eventItem.marketSingular,
+                      labels.eventItem.marketPlural
+                    ) }),
+                    /* @__PURE__ */ jsx("span", { className: "text-agg-muted-foreground", children: "\xD7" }),
+                    /* @__PURE__ */ jsx("span", { className: "truncate text-agg-muted-foreground", children: formatCountLabel(
+                      resolvedVenueCount,
+                      labels.eventItem.venueSingular,
+                      labels.eventItem.venuePlural
+                    ) }),
+                    visibleVenueLogos.length > 0 ? /* @__PURE__ */ jsx("span", { className: "agg-event-venues flex items-center gap-1 overflow-hidden", children: visibleVenueLogos.map((venue) => /* @__PURE__ */ jsx(
+                      VenueLogo,
+                      {
+                        venue,
+                        size: "small",
+                        isMonochromatic: true,
+                        className: "text-agg-muted-foreground! size-[14px]!"
+                      },
+                      venue
+                    )) }) : null
+                  ]
+                }
+              ),
+              volumeLabel ? /* @__PURE__ */ jsx(
+                Typography,
+                {
+                  variant: "label",
+                  className: "agg-event-volume max-w-16 sm:max-w-20 min-w-12 sm:min-w-14 truncate whitespace-pre text-agg-sm text-agg-muted-foreground line-clamp-1",
+                  children: volumeLabel
+                }
+              ) : null
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var EventListItemByEventId = (_a) => {
+  var _b = _a, {
+    eventId
+  } = _b, rest = __objRest(_b, [
+    "eventId"
+  ]);
+  const {
+    event: fetchedEvent,
+    error,
+    isError,
+    isLoading
+  } = useVenueEvent({
+    eventId: eventId != null ? eventId : "",
+    enabled: !!eventId
+  });
+  const resolvedEvent = useMemo(() => {
+    return resolveEventListItemEvent(fetchedEvent);
+  }, [fetchedEvent]);
+  if (!eventId) {
+    return /* @__PURE__ */ jsx(EventListItemUnavailableState, { classNames: rest.classNames, ariaLabel: rest.ariaLabel });
+  }
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(EventListItemLoadingState, { classNames: rest.classNames, ariaLabel: rest.ariaLabel });
+  }
+  if (isErrorWithStatus(error, 404)) {
+    return /* @__PURE__ */ jsx(EventListItemNotFoundState, { classNames: rest.classNames, ariaLabel: rest.ariaLabel });
+  }
+  if (!fetchedEvent && !isError) {
+    return /* @__PURE__ */ jsx(EventListItemLoadingState, { classNames: rest.classNames, ariaLabel: rest.ariaLabel });
+  }
+  if (!resolvedEvent) {
+    return /* @__PURE__ */ jsx(EventListItemUnavailableState, { classNames: rest.classNames, ariaLabel: rest.ariaLabel });
+  }
+  return /* @__PURE__ */ jsx(EventListItemContent, __spreadValues({ event: resolvedEvent }, rest));
+};
+var EventListItem = (props) => {
+  if (props.isLoading) {
+    return /* @__PURE__ */ 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__ */ jsx(EventListItemContent, __spreadValues({ event }, rest));
+  }
+  return /* @__PURE__ */ jsx(EventListItemByEventId, __spreadValues({}, props));
+};
+EventListItem.displayName = "EventListItem";
+
+// src/events/market-details/orderbook-aggregation.ts
+import {
+  Venue
+} from "@agg-build/hooks";
+var PRICE_PRECISION = 1e6;
+var SIZE_PRECISION = 1e8;
+var POSITIVE_OUTCOME_KEYS = /* @__PURE__ */ new Set(["yes", "y", "true", "up", "buy", "long"]);
+var NEGATIVE_OUTCOME_KEYS = /* @__PURE__ */ new Set(["no", "n", "false", "down", "sell", "short"]);
+var roundTo = (value, precision) => {
+  return Math.round(value * precision) / precision;
+};
+var toScaled = (value, precision) => {
+  return Math.round(value * precision);
+};
+var fromScaled = (value, precision) => {
+  return value / precision;
+};
+var toPriceKey = (price) => {
+  return String(toScaled(price, PRICE_PRECISION));
+};
+var normalizeOutcomeLabel = (value) => {
+  if (typeof value !== "string") return "";
+  return value.trim().toLowerCase().replace(/[_-]+/g, " ").replace(/[^\p{L}\p{N}\s]/gu, " ").replace(/\s+/g, " ");
+};
+var toSemanticOutcomeLabel = (value) => {
+  const normalizedValue = normalizeOutcomeLabel(value);
+  if (!normalizedValue) return "";
+  if (POSITIVE_OUTCOME_KEYS.has(normalizedValue)) return "yes";
+  if (NEGATIVE_OUTCOME_KEYS.has(normalizedValue)) return "no";
+  return normalizedValue;
+};
+var getOutcomeLabelCandidates = (outcome) => {
+  return Array.from(
+    new Set(
+      [outcome.label, outcome.title].map((value) => typeof value === "string" ? value : "").filter(Boolean)
+    )
+  );
+};
+var matchesSelectedOutcomeLabel = (outcome, selectedOutcomeLabel) => {
+  const normalizedSelectedLabel = normalizeOutcomeLabel(selectedOutcomeLabel);
+  const semanticSelectedLabel = toSemanticOutcomeLabel(selectedOutcomeLabel);
+  return getOutcomeLabelCandidates(outcome).some((candidate) => {
+    const normalizedCandidate = normalizeOutcomeLabel(candidate);
+    if (!normalizedCandidate) return false;
+    return normalizedCandidate === normalizedSelectedLabel || toSemanticOutcomeLabel(candidate) === semanticSelectedLabel;
+  });
+};
+var isValidLevel = (level) => {
+  return level != null && Number.isFinite(level.price) && Number.isFinite(level.size) && level.price >= 0 && level.price <= 1 && level.size > 0;
+};
+var buildAttributedVenueLevels = (orderbook, venue, side) => {
+  return orderbook[side].flatMap((level) => {
+    var _a;
+    const attributedSize = (_a = level.venues) == null ? void 0 : _a[venue];
+    if (!Number.isFinite(attributedSize) || attributedSize == null || attributedSize <= 0) {
+      return [];
+    }
+    return [
+      {
+        price: level.price,
+        size: attributedSize
+      }
+    ];
+  }).filter(isValidLevel);
+};
+var resolveVenueLevels = (orderbook, venue, side) => {
+  var _a, _b, _c;
+  const explicitVenueLevels = (_c = (_b = (_a = orderbook.venueOrderbooks[venue]) == null ? void 0 : _a[side]) == null ? void 0 : _b.filter(isValidLevel)) != null ? _c : [];
+  const attributedVenueLevels = buildAttributedVenueLevels(orderbook.orderbook, venue, side);
+  if (explicitVenueLevels.length === 0) {
+    return attributedVenueLevels;
+  }
+  if (attributedVenueLevels.length === 0) {
+    return explicitVenueLevels;
+  }
+  const mergedByPrice = /* @__PURE__ */ new Map();
+  explicitVenueLevels.forEach((level) => {
+    mergedByPrice.set(toPriceKey(level.price), level);
+  });
+  attributedVenueLevels.forEach((level) => {
+    mergedByPrice.set(toPriceKey(level.price), level);
+  });
+  return [...mergedByPrice.values()].sort(
+    (left, right) => side === "asks" ? left.price - right.price : right.price - left.price
+  );
+};
+var resolvePrimaryVenue = (venueBreakdown, fallbackVenue) => {
+  var _a, _b;
+  const sortedVenues = Object.entries(venueBreakdown).filter(([, size]) => size > 0).sort((left, right) => {
+    if (right[1] !== left[1]) return right[1] - left[1];
+    return left[0].localeCompare(right[0]);
+  });
+  return (_b = (_a = sortedVenues[0]) == null ? void 0 : _a[0]) != null ? _b : fallbackVenue;
+};
+var resolveVenues = (venueBreakdown, fallbackVenue) => {
+  const venues = Object.entries(venueBreakdown).filter(([, size]) => size > 0).sort((left, right) => {
+    if (right[1] !== left[1]) return right[1] - left[1];
+    return left[0].localeCompare(right[0]);
+  }).map(([venue]) => venue);
+  if (venues.length > 0) return venues;
+  return [fallbackVenue];
+};
+var buildRowsFromAccumulator = ({
+  side,
+  tone,
+  levelsByPrice,
+  fallbackVenue
+}) => {
+  const rows = [...levelsByPrice.values()].map((level) => {
+    const size = fromScaled(level.sizeScaled, SIZE_PRECISION);
+    const venueBreakdown = Object.fromEntries(
+      Object.entries(level.venueBreakdownScaled).filter(([, scaledSize]) => scaledSize > 0).map(([venue2, scaledSize]) => [venue2, fromScaled(scaledSize, SIZE_PRECISION)])
+    );
+    const resolvedFallbackVenue = fallbackVenue != null ? fallbackVenue : Venue.polymarket;
+    const venues = resolveVenues(venueBreakdown, resolvedFallbackVenue);
+    const venue = resolvePrimaryVenue(venueBreakdown, resolvedFallbackVenue);
+    return {
+      id: `${side}-${roundTo(level.price, PRICE_PRECISION)}`,
+      venue,
+      venues,
+      price: roundTo(level.price, PRICE_PRECISION),
+      size,
+      total: roundTo(level.price * size, SIZE_PRECISION),
+      tone,
+      barScale: 0,
+      venueBreakdown,
+      sourceOutcomeIds: [...level.sourceOutcomeIds]
+    };
+  }).sort((left, right) => side === "asks" ? left.price - right.price : right.price - left.price);
+  const maxTotal = rows.reduce((currentMax, row) => Math.max(currentMax, row.total), 0) || 1;
+  return rows.map((row) => __spreadProps(__spreadValues({}, row), {
+    barScale: row.total / maxTotal
+  }));
+};
+var accumulateSideLevels = ({
+  side,
+  eligibleOutcomes,
+  orderbooksByOutcomeId
+}) => {
+  const levelsByPrice = /* @__PURE__ */ new Map();
+  const includedOutcomeIds = /* @__PURE__ */ new Set();
+  const missingOutcomeIds = /* @__PURE__ */ new Set();
+  eligibleOutcomes.forEach((eligibleOutcome) => {
+    const orderbook = orderbooksByOutcomeId[eligibleOutcome.outcomeId];
+    if (!orderbook) {
+      missingOutcomeIds.add(eligibleOutcome.outcomeId);
+      return;
+    }
+    const venueLevels = resolveVenueLevels(orderbook, eligibleOutcome.venue, side);
+    if (venueLevels.length === 0) {
+      return;
+    }
+    includedOutcomeIds.add(eligibleOutcome.outcomeId);
+    venueLevels.forEach((level) => {
+      var _a;
+      const priceKey = toPriceKey(level.price);
+      const scaledSize = toScaled(level.size, SIZE_PRECISION);
+      const currentLevel = levelsByPrice.get(priceKey);
+      if (currentLevel) {
+        currentLevel.sizeScaled += scaledSize;
+        currentLevel.venueBreakdownScaled[eligibleOutcome.venue] = ((_a = currentLevel.venueBreakdownScaled[eligibleOutcome.venue]) != null ? _a : 0) + scaledSize;
+        currentLevel.sourceOutcomeIds.add(eligibleOutcome.outcomeId);
+        return;
+      }
+      levelsByPrice.set(priceKey, {
+        price: level.price,
+        sizeScaled: scaledSize,
+        venueBreakdownScaled: {
+          [eligibleOutcome.venue]: scaledSize
+        },
+        sourceOutcomeIds: /* @__PURE__ */ new Set([eligibleOutcome.outcomeId])
+      });
+    });
+  });
+  return {
+    levelsByPrice,
+    includedOutcomeIds,
+    missingOutcomeIds
+  };
+};
+var collectEligibleVenueOutcomes = ({
+  venueMarkets,
+  selectedOutcomeLabel
+}) => {
+  if (!selectedOutcomeLabel) return [];
+  const seenOutcomeIds = /* @__PURE__ */ new Set();
+  return venueMarkets.flatMap((market) => {
+    const matchedOutcome = sortOutcomes(market.venueMarketOutcomes).find(
+      (outcome) => matchesSelectedOutcomeLabel(outcome, selectedOutcomeLabel)
+    );
+    if (!matchedOutcome || seenOutcomeIds.has(matchedOutcome.id)) {
+      return [];
+    }
+    seenOutcomeIds.add(matchedOutcome.id);
+    return [
+      {
+        venue: market.venue,
+        market,
+        outcome: matchedOutcome,
+        outcomeId: matchedOutcome.id,
+        semanticLabel: toSemanticOutcomeLabel(selectedOutcomeLabel)
+      }
+    ];
+  });
+};
+var collectEligibleVenueOutcomeIds = ({
+  venueMarkets,
+  selectedOutcomeLabel
+}) => {
+  return collectEligibleVenueOutcomes({ venueMarkets, selectedOutcomeLabel }).map(
+    (eligibleOutcome) => eligibleOutcome.outcomeId
+  );
+};
+var mergeVenueOutcomeOrderbooks = ({
+  eligibleOutcomes,
+  orderbooksByOutcomeId
+}) => {
+  var _a, _b, _c, _d, _e, _f;
+  const bidState = accumulateSideLevels({
+    side: "bids",
+    eligibleOutcomes,
+    orderbooksByOutcomeId
+  });
+  const askState = accumulateSideLevels({
+    side: "asks",
+    eligibleOutcomes,
+    orderbooksByOutcomeId
+  });
+  const bidRows = buildRowsFromAccumulator({
+    side: "bids",
+    tone: "positive",
+    levelsByPrice: bidState.levelsByPrice,
+    fallbackVenue: (_a = eligibleOutcomes[0]) == null ? void 0 : _a.venue
+  });
+  const askRows = buildRowsFromAccumulator({
+    side: "asks",
+    tone: "negative",
+    levelsByPrice: askState.levelsByPrice,
+    fallbackVenue: (_b = eligibleOutcomes[0]) == null ? void 0 : _b.venue
+  });
+  const bestBid = (_d = (_c = bidRows[0]) == null ? void 0 : _c.price) != null ? _d : null;
+  const bestAsk = (_f = (_e = askRows[0]) == null ? void 0 : _e.price) != null ? _f : null;
+  return {
+    askRows,
+    bidRows,
+    midpoint: bestBid != null && bestAsk != null ? roundTo((bestBid + bestAsk) / 2, PRICE_PRECISION) : null,
+    spread: bestBid != null && bestAsk != null ? roundTo(bestAsk - bestBid, PRICE_PRECISION) : null,
+    hasNoOrderBook: askRows.length === 0 && bidRows.length === 0,
+    includedOutcomeIds: [
+      .../* @__PURE__ */ new Set([...bidState.includedOutcomeIds, ...askState.includedOutcomeIds])
+    ],
+    missingOutcomeIds: [.../* @__PURE__ */ new Set([...bidState.missingOutcomeIds, ...askState.missingOutcomeIds])]
+  };
+};
+
+// src/events/item-details/settlement-summary.tsx
+import { useLabels as useLabels2 } from "@agg-build/hooks";
+import { useCallback as useCallback2, useEffect, useId, useRef, useState as useState2 } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var SettlementSummary = ({
+  content,
+  onToggle,
+  className
+}) => {
+  var _a;
+  const labels = useLabels2();
+  const contentId = useId();
+  const containerRef = useRef(null);
+  const measureRef = useRef(null);
+  const [isExpanded, setIsExpanded] = useState2(false);
+  const [canExpand, setCanExpand] = useState2(false);
+  const resolvedContent = (_a = content == null ? void 0 : content.trim()) != null ? _a : "";
+  const measureOverflow = useCallback2(() => {
+    const measureElement = measureRef.current;
+    if (!measureElement) return;
+    const nextCanExpand = measureElement.scrollWidth > measureElement.clientWidth + 1;
+    setCanExpand((currentValue) => {
+      if (currentValue === nextCanExpand) return currentValue;
+      return nextCanExpand;
+    });
+  }, []);
+  useEffect(() => {
+    if (!resolvedContent) {
+      setCanExpand(false);
+      setIsExpanded(false);
+      return;
+    }
+    setCanExpand(false);
+    setIsExpanded(false);
+    measureOverflow();
+  }, [measureOverflow, resolvedContent]);
+  useEffect(() => {
+    if (!resolvedContent) return;
+    const containerElement = containerRef.current;
+    if (!containerElement) return;
+    if (typeof ResizeObserver === "function") {
+      const resizeObserver = new ResizeObserver(() => {
+        measureOverflow();
+      });
+      resizeObserver.observe(containerElement);
+      return () => {
+        resizeObserver.disconnect();
+      };
+    }
+    const handleResize = () => {
+      measureOverflow();
+    };
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [measureOverflow, resolvedContent]);
+  if (!resolvedContent) return null;
+  const shouldShowToggle = canExpand || isExpanded;
+  const toggleLabel = isExpanded ? labels.settlementSummary.showLess : labels.settlementSummary.readFullDetails;
+  const handleToggle = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    const nextExpanded = !isExpanded;
+    setIsExpanded(nextExpanded);
+    onToggle == null ? void 0 : onToggle(nextExpanded);
+  };
+  return /* @__PURE__ */ jsxs2("div", { className: cn("agg-settlement-summary flex w-full flex-col gap-2", className), children: [
+    /* @__PURE__ */ jsx2(
+      Typography,
+      {
+        variant: "caption-caps",
+        className: "agg-settlement-summary-label text-agg-muted-foreground",
+        children: labels.settlementSummary.title
+      }
+    ),
+    /* @__PURE__ */ jsxs2("div", { ref: containerRef, className: "relative w-full", children: [
+      /* @__PURE__ */ jsx2(
+        "p",
+        {
+          ref: measureRef,
+          "aria-hidden": "true",
+          className: cn(
+            "agg-settlement-summary-measure",
+            "pointer-events-none absolute inset-x-0 top-0 block overflow-hidden whitespace-nowrap opacity-0",
+            "text-agg-sm leading-agg-5 text-agg-foreground"
+          ),
+          children: resolvedContent
+        }
+      ),
+      isExpanded ? /* @__PURE__ */ jsxs2("div", { className: "agg-settlement-summary-expanded flex flex-col gap-2", children: [
+        /* @__PURE__ */ jsx2(
+          "p",
+          {
+            id: contentId,
+            className: cn(
+              "agg-settlement-summary-text",
+              "text-agg-sm leading-agg-5 text-agg-foreground",
+              "break-words [overflow-wrap:anywhere]"
+            ),
+            children: resolvedContent
+          }
+        ),
+        shouldShowToggle ? /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            className: cn(
+              "agg-settlement-summary-toggle",
+              "w-fit shrink-0 cursor-pointer whitespace-nowrap text-left text-agg-sm font-agg-bold leading-agg-5 text-agg-primary",
+              "hover:opacity-80",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-agg-primary focus-visible:ring-offset-0 focus-visible:ring-offset-agg-secondary"
+            ),
+            "aria-controls": contentId,
+            "aria-expanded": isExpanded,
+            onClick: handleToggle,
+            children: toggleLabel
+          }
+        ) : null
+      ] }) : /* @__PURE__ */ jsxs2("div", { className: "agg-settlement-summary-collapsed flex w-full items-start gap-3", children: [
+        /* @__PURE__ */ jsx2(
+          "p",
+          {
+            id: contentId,
+            className: cn(
+              "agg-settlement-summary-text",
+              "min-w-0 flex-1 truncate text-agg-sm leading-agg-5 text-agg-foreground"
+            ),
+            children: resolvedContent
+          }
+        ),
+        shouldShowToggle ? /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            className: cn(
+              "agg-settlement-summary-toggle",
+              "shrink-0 cursor-pointer whitespace-nowrap text-agg-sm font-agg-bold leading-agg-5 text-agg-primary",
+              "hover:opacity-80",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-agg-primary focus-visible:ring-offset-0 focus-visible:ring-offset-agg-secondary"
+            ),
+            "aria-controls": contentId,
+            "aria-expanded": isExpanded,
+            onClick: handleToggle,
+            children: toggleLabel
+          }
+        ) : null
+      ] })
+    ] })
+  ] });
+};
+SettlementSummary.displayName = "SettlementSummary";
+
+// src/events/item-details/index.tsx
+import {
+  CHART_TIME_RANGES,
+  optimizedImageUrl as optimizedImageUrl2,
+  resolveEventTradingState,
+  timeRangeToInterval,
+  useEventOrderbookData,
+  useLabels as useLabels5,
+  useLiveOutcomePrices,
+  useMarketChart,
+  useMidpoints,
+  useSdkUiConfig as useSdkUiConfig2,
+  useVenueEvent as useVenueEvent2
+} from "@agg-build/hooks";
+import { useEffect as useEffect3, useMemo as useMemo4, useRef as useRef3, useState as useState4 } from "react";
+
+// src/primitives/chart/chart-type-switch.tsx
+import { useLabels as useLabels3 } from "@agg-build/hooks";
+import { useMemo as useMemo2 } from "react";
+
+// src/primitives/chart/chart-type-switch.constants.ts
+var CHART_TYPE_SWITCH_OPTION_KEYS = ["line", "candlestick"];
+
+// src/primitives/chart/chart-type-switch.utils.ts
+var resolveNextChartTypeIndex = ({
+  currentIndex,
+  direction,
+  optionsLength
+}) => {
+  return (currentIndex + direction + optionsLength) % optionsLength;
+};
+var resolveChartTypeOptionAriaLabel = ({
+  chartType,
+  candlestickLabel,
+  lineLabel
+}) => {
+  return chartType === "line" ? lineLabel : candlestickLabel;
+};
+var resolveChartTypeOptionIconName = (chartType) => {
+  return chartType === "line" ? "chart-line" : "chart-candlestick";
+};
+
+// src/primitives/chart/chart-type-switch.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var ChartTypeSwitch = ({
+  value,
+  onValueChange,
+  className
+}) => {
+  const labels = useLabels3();
+  const options = useMemo2(
+    () => CHART_TYPE_SWITCH_OPTION_KEYS.map((chartType) => ({
+      value: chartType,
+      iconName: resolveChartTypeOptionIconName(chartType),
+      ariaLabel: resolveChartTypeOptionAriaLabel({
+        chartType,
+        lineLabel: labels.common.lineChartType,
+        candlestickLabel: labels.common.candlestickChartType
+      })
+    })),
+    [labels]
+  );
+  const handleKeyDown = (event, index) => {
+    if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") {
+      return;
+    }
+    event.preventDefault();
+    const direction = event.key === "ArrowRight" ? 1 : -1;
+    const nextIndex = resolveNextChartTypeIndex({
+      currentIndex: index,
+      direction,
+      optionsLength: options.length
+    });
+    const nextOption = options[nextIndex];
+    if (!nextOption || nextOption.value === value) {
+      return;
+    }
+    onValueChange(nextOption.value);
+  };
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      className: cn("agg-chart-type-switch inline-flex items-center gap-2", className),
+      role: "tablist",
+      "aria-label": labels.common.chartTypeSwitchAria,
+      children: options.map((option, index) => {
+        const isActive = option.value === value;
+        return /* @__PURE__ */ jsx3(
+          "button",
+          {
+            type: "button",
+            role: "tab",
+            "aria-selected": isActive,
+            "aria-label": option.ariaLabel,
+            tabIndex: isActive ? 0 : -1,
+            className: cn(
+              "agg-chart-type-trigger",
+              "cursor-pointer hover:text-agg-foreground",
+              "inline-flex size-5 items-center justify-center rounded-agg-sm bg-transparent p-0",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-agg-primary focus-visible:ring-offset-0 focus-visible:ring-offset-agg-background",
+              "transition-colors duration-200 ease-in-out",
+              isActive ? "text-agg-foreground" : "text-agg-muted-foreground"
+            ),
+            onClick: (event) => {
+              event.stopPropagation();
+              event.preventDefault();
+              if (isActive) {
+                return;
+              }
+              onValueChange(option.value);
+            },
+            onKeyDown: (event) => {
+              handleKeyDown(event, index);
+            },
+            children: /* @__PURE__ */ jsx3(Icon, { name: option.iconName, color: "currentColor", className: "h-5 w-5" })
+          },
+          option.value
+        );
+      })
+    }
+  );
+};
+ChartTypeSwitch.displayName = "ChartTypeSwitch";
+
+// src/events/shared/chart-venue-selection.ts
+import { sortVenues as sortVenues2 } from "@agg-build/hooks";
+var resolveChartVenueOutcomes = ({
+  eligibleVenueOutcomes,
+  livePrices
+}) => {
+  if (eligibleVenueOutcomes.length <= 1) return eligibleVenueOutcomes;
+  const sortedEligibleVenueOutcomes = [...eligibleVenueOutcomes].sort((left, right) => {
+    var _a, _b;
+    const leftProbability = normalizeProbability(
+      (_a = livePrices.get(left.outcome.id)) != null ? _a : left.outcome.price
+    );
+    const rightProbability = normalizeProbability(
+      (_b = livePrices.get(right.outcome.id)) != null ? _b : right.outcome.price
+    );
+    const probabilityDifference = (leftProbability != null ? leftProbability : 2) - (rightProbability != null ? rightProbability : 2);
+    if (probabilityDifference !== 0) return probabilityDifference;
+    if (left.venue === right.venue) return 0;
+    const sortedVenues = sortVenues2([left.venue, right.venue]);
+    return sortedVenues[0] === left.venue ? -1 : 1;
+  });
+  const venueOutcomesByVenue = /* @__PURE__ */ new Map();
+  sortedEligibleVenueOutcomes.forEach((eligibleVenueOutcome) => {
+    if (venueOutcomesByVenue.has(eligibleVenueOutcome.venue)) return;
+    venueOutcomesByVenue.set(eligibleVenueOutcome.venue, eligibleVenueOutcome);
+  });
+  return [...venueOutcomesByVenue.values()];
+};
+var filterChartVenueOutcomesByRenderableVenues = ({
+  chartData,
+  venueOutcomes
+}) => {
+  if (!chartData) return venueOutcomes;
+  const renderableVenues = new Set(
+    Object.entries(chartData.venues).filter(([, venueData]) => venueData.candles.length > 0).map(([venue]) => venue)
+  );
+  if (renderableVenues.size === 0) return venueOutcomes;
+  return venueOutcomes.filter((venueOutcome) => renderableVenues.has(venueOutcome.venue));
+};
+
+// src/events/item-details/event-list-item-details-market-selector.tsx
+import { useLabels as useLabels4 } from "@agg-build/hooks";
+import { useEffect as useEffect2, useLayoutEffect, useMemo as useMemo3, useRef as useRef2, useState as useState3 } from "react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var MARKET_PILL_MAX_ROWS = 2;
+var MARKET_PILL_FALLBACK_CONTAINER_WIDTH = 640;
+var MARKET_PILL_FALLBACK_GAP = 8;
+var MARKET_PILL_FALLBACK_WIDTH = 72;
+var MARKET_PILL_FALLBACK_MORE_WIDTH = 88;
+var MARKET_PILL_MORE_LABEL = "More";
+var MARKET_DROPDOWN_MAX_VISIBLE_OPTIONS = 6;
+var MARKET_DROPDOWN_OPTION_HEIGHT = 48;
+var MARKET_DROPDOWN_MAX_HEIGHT = MARKET_DROPDOWN_MAX_VISIBLE_OPTIONS * MARKET_DROPDOWN_OPTION_HEIGHT;
+var estimateMarketPillWidth = (label) => {
+  return Math.max(MARKET_PILL_FALLBACK_WIDTH, Math.min(320, Math.ceil(label.length * 7.5 + 32)));
+};
+var countWrappedRows = ({
+  containerWidth,
+  gap,
+  itemWidths
+}) => {
+  if (!Number.isFinite(containerWidth) || containerWidth <= 0) return 1;
+  if (itemWidths.length === 0) return 0;
+  let rowCount = 1;
+  let usedWidth = 0;
+  for (const itemWidth of itemWidths) {
+    const resolvedWidth = Math.max(1, itemWidth);
+    if (usedWidth === 0) {
+      usedWidth = resolvedWidth;
+      continue;
+    }
+    if (usedWidth + gap + resolvedWidth <= containerWidth) {
+      usedWidth += gap + resolvedWidth;
+      continue;
+    }
+    rowCount += 1;
+    usedWidth = resolvedWidth;
+  }
+  return rowCount;
+};
+var resolveMarketPillLayout = ({
+  items,
+  containerWidth,
+  moreButtonWidth,
+  itemWidthByValue
+}) => {
+  if (items.length === 0) {
+    return {
+      visibleItems: [],
+      hiddenItems: []
+    };
+  }
+  if (!Number.isFinite(containerWidth) || containerWidth <= 0) {
+    return {
+      visibleItems: items,
+      hiddenItems: []
+    };
+  }
+  const resolvedMoreButtonWidth = Math.max(1, moreButtonWidth || MARKET_PILL_FALLBACK_MORE_WIDTH);
+  const buildVisibleIndices = (count) => {
+    return new Set(Array.from({ length: count }, (_, index) => index));
+  };
+  const doesLayoutFit = (visibleIndices2) => {
+    const visibleWidths = items.filter((_, index) => visibleIndices2.has(index)).map((item) => {
+      var _a;
+      return Math.max(1, (_a = itemWidthByValue.get(item.value)) != null ? _a : estimateMarketPillWidth(item.label));
+    });
+    if (visibleIndices2.size < items.length) {
+      visibleWidths.push(resolvedMoreButtonWidth);
+    }
+    return countWrappedRows({
+      containerWidth,
+      gap: MARKET_PILL_FALLBACK_GAP,
+      itemWidths: visibleWidths
+    }) <= MARKET_PILL_MAX_ROWS;
+  };
+  let visibleIndices = buildVisibleIndices(items.length);
+  if (!doesLayoutFit(visibleIndices)) {
+    for (let count = items.length - 1; count >= 0; count -= 1) {
+      const nextVisibleIndices = buildVisibleIndices(count);
+      if (doesLayoutFit(nextVisibleIndices)) {
+        visibleIndices = nextVisibleIndices;
+        break;
+      }
+    }
+  }
+  return {
+    visibleItems: items.filter((_, index) => visibleIndices.has(index)),
+    hiddenItems: items.filter((_, index) => !visibleIndices.has(index))
+  };
+};
+var EventListItemDetailsMarketSelector = ({
+  className,
+  options,
+  selectedValue,
+  onChange
+}) => {
+  var _a;
+  const labels = useLabels4();
+  const containerRef = useRef2(null);
+  const measurementContainerRef = useRef2(null);
+  const moreButtonRef = useRef2(null);
+  const dropdownInputRef = useRef2(null);
+  const moreButtonMeasureRef = useRef2(null);
+  const optionMeasureRefs = useRef2({});
+  const [layout, setLayout] = useState3(() => ({
+    visibleItems: options,
+    hiddenItems: []
+  }));
+  const [isDropdownOpen, setIsDropdownOpen] = useState3(false);
+  const [isMobileViewport, setIsMobileViewport] = useState3(false);
+  const [searchValue, setSearchValue] = useState3("");
+  const [dropdownPosition, setDropdownPosition] = useState3({
+    left: 0,
+    top: 0,
+    width: 0
+  });
+  const selectedHiddenOption = useMemo3(() => {
+    var _a2;
+    return (_a2 = layout.hiddenItems.find((option) => option.value === selectedValue)) != null ? _a2 : null;
+  }, [layout.hiddenItems, selectedValue]);
+  const moreButtonLabel = (_a = selectedHiddenOption == null ? void 0 : selectedHiddenOption.label) != null ? _a : MARKET_PILL_MORE_LABEL;
+  const isMoreButtonSelected = selectedHiddenOption != null;
+  const filteredOptions = useMemo3(() => {
+    const normalizedSearchValue = searchValue.trim().toLowerCase();
+    if (!normalizedSearchValue) return options;
+    return options.filter((option) => option.label.toLowerCase().includes(normalizedSearchValue));
+  }, [options, searchValue]);
+  const lastMeasuredKeyRef = useRef2(null);
+  const measureFrameRef = useRef2(null);
+  useLayoutEffect(() => {
+    const measureLayout = () => {
+      var _a2, _b, _c, _d, _e;
+      const measurementContainer = measurementContainerRef.current;
+      const fallbackWidth = ((_a2 = containerRef.current) == null ? void 0 : _a2.clientWidth) || (measurementContainer == null ? void 0 : measurementContainer.clientWidth) || MARKET_PILL_FALLBACK_CONTAINER_WIDTH;
+      const containerWidth = Math.max(1, Math.ceil(fallbackWidth));
+      const itemWidthByValue = /* @__PURE__ */ new Map();
+      for (const option of options) {
+        const element = optionMeasureRefs.current[option.value];
+        const measuredWidth = (element == null ? void 0 : element.offsetWidth) || Math.ceil((_b = element == null ? void 0 : element.getBoundingClientRect().width) != null ? _b : 0) || estimateMarketPillWidth(option.label);
+        itemWidthByValue.set(option.value, Math.max(1, measuredWidth));
+      }
+      const measuredMoreButtonWidth = ((_c = moreButtonMeasureRef.current) == null ? void 0 : _c.offsetWidth) || Math.ceil((_e = (_d = moreButtonMeasureRef.current) == null ? void 0 : _d.getBoundingClientRect().width) != null ? _e : 0) || estimateMarketPillWidth(moreButtonLabel);
+      const measurementKey = [
+        containerWidth,
+        measuredMoreButtonWidth,
+        moreButtonLabel,
+        ...options.map((option) => {
+          var _a3;
+          return `${option.value}:${(_a3 = itemWidthByValue.get(option.value)) != null ? _a3 : 0}`;
+        })
+      ].join("|");
+      if (lastMeasuredKeyRef.current === measurementKey) {
+        return;
+      }
+      lastMeasuredKeyRef.current = measurementKey;
+      const nextLayout = resolveMarketPillLayout({
+        items: options,
+        containerWidth,
+        moreButtonWidth: measuredMoreButtonWidth,
+        itemWidthByValue
+      });
+      setLayout((previousLayout) => {
+        const previousVisible = previousLayout.visibleItems.map((item) => item.value).join("|");
+        const nextVisible = nextLayout.visibleItems.map((item) => item.value).join("|");
+        const previousHidden = previousLayout.hiddenItems.map((item) => item.value).join("|");
+        const nextHidden = nextLayout.hiddenItems.map((item) => item.value).join("|");
+        if (previousVisible === nextVisible && previousHidden === nextHidden) {
+          return previousLayout;
+        }
+        return nextLayout;
+      });
+    };
+    const scheduleMeasureLayout = () => {
+      if (typeof window === "undefined") {
+        measureLayout();
+        return;
+      }
+      if (measureFrameRef.current != null) {
+        window.cancelAnimationFrame(measureFrameRef.current);
+      }
+      measureFrameRef.current = window.requestAnimationFrame(() => {
+        measureFrameRef.current = null;
+        measureLayout();
+      });
+    };
+    measureLayout();
+    if (typeof ResizeObserver === "undefined") {
+      window.addEventListener("resize", scheduleMeasureLayout);
+      return () => {
+        window.removeEventListener("resize", scheduleMeasureLayout);
+        if (measureFrameRef.current != null) {
+          window.cancelAnimationFrame(measureFrameRef.current);
+          measureFrameRef.current = null;
+        }
+      };
+    }
+    const resizeObserver = new ResizeObserver(() => {
+      scheduleMeasureLayout();
+    });
+    if (containerRef.current) {
+      resizeObserver.observe(containerRef.current);
+    }
+    return () => {
+      resizeObserver.disconnect();
+      if (measureFrameRef.current != null) {
+        window.cancelAnimationFrame(measureFrameRef.current);
+        measureFrameRef.current = null;
+      }
+    };
+  }, [moreButtonLabel, options]);
+  useEffect2(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+    const mediaQueryList = window.matchMedia(MOBILE_TABS_MEDIA_QUERY);
+    const handleMediaQueryChange = (event) => {
+      setIsMobileViewport(event.matches);
+    };
+    handleMediaQueryChange(mediaQueryList);
+    if (typeof mediaQueryList.addEventListener === "function") {
+      mediaQueryList.addEventListener("change", handleMediaQueryChange);
+      return () => {
+        mediaQueryList.removeEventListener("change", handleMediaQueryChange);
+      };
+    }
+    mediaQueryList.addListener(handleMediaQueryChange);
+    return () => {
+      mediaQueryList.removeListener(handleMediaQueryChange);
+    };
+  }, []);
+  useEffect2(() => {
+    if (!isDropdownOpen) {
+      setSearchValue("");
+      return;
+    }
+    const animationFrameId = window.requestAnimationFrame(() => {
+      var _a2;
+      (_a2 = dropdownInputRef.current) == null ? void 0 : _a2.focus();
+    });
+    return () => {
+      window.cancelAnimationFrame(animationFrameId);
+    };
+  }, [isDropdownOpen]);
+  useLayoutEffect(() => {
+    if (!isDropdownOpen || isMobileViewport) return;
+    const updateDropdownPosition = () => {
+      const containerElement = containerRef.current;
+      const moreButtonElement = moreButtonRef.current;
+      if (!containerElement || !moreButtonElement) return;
+      const containerWidth = Math.max(1, containerElement.clientWidth);
+      const dropdownWidth = Math.min(400, containerWidth);
+      const maxLeft = Math.max(0, containerWidth - dropdownWidth);
+      const nextLeft = Math.min(Math.max(0, moreButtonElement.offsetLeft), maxLeft);
+      setDropdownPosition({
+        left: nextLeft,
+        top: moreButtonElement.offsetTop + moreButtonElement.offsetHeight + 8,
+        width: dropdownWidth
+      });
+    };
+    updateDropdownPosition();
+    if (typeof ResizeObserver === "undefined") {
+      window.addEventListener("resize", updateDropdownPosition);
+      return () => {
+        window.removeEventListener("resize", updateDropdownPosition);
+      };
+    }
+    const resizeObserver = new ResizeObserver(() => {
+      updateDropdownPosition();
+    });
+    if (containerRef.current) {
+      resizeObserver.observe(containerRef.current);
+    }
+    if (moreButtonRef.current) {
+      resizeObserver.observe(moreButtonRef.current);
+    }
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [isDropdownOpen, isMobileViewport, moreButtonLabel]);
+  useEffect2(() => {
+    if (!isDropdownOpen) return;
+    const handlePointerDown = (event) => {
+      var _a2;
+      const eventTarget = event.target;
+      if (!(eventTarget instanceof Node)) {
+        return;
+      }
+      if ((_a2 = containerRef.current) == null ? void 0 : _a2.contains(eventTarget)) {
+        return;
+      }
+      setIsDropdownOpen(false);
+    };
+    const handleEscapeKey = (event) => {
+      if (event.key !== "Escape") return;
+      setIsDropdownOpen(false);
+    };
+    document.addEventListener("mousedown", handlePointerDown);
+    document.addEventListener("keydown", handleEscapeKey);
+    return () => {
+      document.removeEventListener("mousedown", handlePointerDown);
+      document.removeEventListener("keydown", handleEscapeKey);
+    };
+  }, [isDropdownOpen]);
+  const handleSelectMarket = (marketId) => {
+    onChange(marketId);
+    setIsDropdownOpen(false);
+  };
+  if (isMobileViewport) {
+    return /* @__PURE__ */ jsx4(
+      AutocompleteSelect,
+      {
+        options,
+        value: selectedValue,
+        onChange,
+        placeholder: labels.eventItemDetails.marketSelectPlaceholder,
+        searchPlaceholder: labels.eventItemDetails.marketSelectSearchPlaceholder,
+        emptyLabel: labels.eventItemDetails.marketSelectEmpty,
+        ariaLabel: labels.eventItemDetails.marketSelectPlaceholder,
+        className: cn("agg-market-select-mobile w-full", className)
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs3("div", { ref: containerRef, className: cn("agg-market-select relative w-full", className), children: [
+    /* @__PURE__ */ jsxs3("div", { className: "agg-market-pill-list flex flex-wrap gap-2", children: [
+      layout.visibleItems.map((option) => {
+        const isSelected = option.value === selectedValue;
+        return /* @__PURE__ */ jsx4(
+          "button",
+          {
+            type: "button",
+            "aria-pressed": isSelected,
+            className: cn(
+              "agg-market-pill inline-flex min-h-8 items-center justify-center rounded-agg-full border px-4 py-1.5 text-left text-agg-sm leading-agg-5 text-agg-foreground transition-colors",
+              "cursor-pointer hover:bg-agg-tertiary!",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-agg-primary focus-visible:ring-offset-0 focus-visible:ring-offset-agg-secondary",
+              isSelected ? "border-agg-primary bg-agg-secondary font-agg-bold" : "border-transparent bg-agg-secondary-hover font-agg-normal hover:bg-agg-secondary"
+            ),
+            onClick: (eventToHandle) => {
+              eventToHandle.preventDefault();
+              eventToHandle.stopPropagation();
+              handleSelectMarket(option.value);
+            },
+            children: /* @__PURE__ */ jsx4("span", { className: "truncate", children: option.label })
+          },
+          option.value
+        );
+      }),
+      layout.hiddenItems.length > 0 ? /* @__PURE__ */ jsxs3(
+        "button",
+        {
+          ref: moreButtonRef,
+          type: "button",
+          "aria-pressed": isMoreButtonSelected,
+          "aria-expanded": isDropdownOpen,
+          "aria-haspopup": "listbox",
+          "aria-controls": "agg-event-details-market-dropdown",
+          className: cn(
+            "agg-market-pill-more inline-flex max-w-full min-h-8 items-center justify-center gap-1.5 rounded-agg-full border px-4 py-1.5 text-agg-sm leading-agg-5 text-agg-foreground transition-colors",
+            "cursor-pointer hover:bg-agg-tertiary!",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-agg-primary focus-visible:ring-offset-0 focus-visible:ring-offset-agg-secondary",
+            isMoreButtonSelected ? "border-agg-primary bg-agg-secondary font-agg-bold" : "border-transparent bg-agg-secondary-hover font-agg-normal hover:bg-agg-secondary"
+          ),
+          onClick: (eventToHandle) => {
+            eventToHandle.preventDefault();
+            eventToHandle.stopPropagation();
+            setIsDropdownOpen((previousValue) => !previousValue);
+          },
+          children: [
+            /* @__PURE__ */ jsx4("span", { className: "truncate", children: moreButtonLabel }),
+            /* @__PURE__ */ jsx4(
+              Icon,
+              {
+                name: isDropdownOpen ? "chevron-up" : "chevron-down",
+                size: "small",
+                color: "currentColor",
+                className: "h-4 w-4",
+                "aria-hidden": "true"
+              }
+            )
+          ]
+        }
+      ) : null
+    ] }),
+    isDropdownOpen ? /* @__PURE__ */ jsxs3(
+      "div",
+      {
+        id: "agg-event-details-market-dropdown",
+        role: "presentation",
+        className: cn(
+          "absolute z-20 overflow-hidden rounded-agg-lg border border-agg-separator bg-agg-secondary shadow-[0px_8px_16px_0px_rgba(0,0,0,0.10)]"
+        ),
+        style: {
+          left: dropdownPosition.left,
+          top: dropdownPosition.top,
+          width: dropdownPosition.width
+        },
+        onClick: (eventToHandle) => {
+          eventToHandle.stopPropagation();
+        },
+        children: [
+          /* @__PURE__ */ jsxs3("div", { className: "border-b border-agg-separator", children: [
+            /* @__PURE__ */ jsx4("label", { className: "sr-only", htmlFor: "agg-event-details-market-search", children: labels.eventItemDetails.marketSelectSearchPlaceholder }),
+            /* @__PURE__ */ jsx4(
+              "input",
+              {
+                ref: dropdownInputRef,
+                id: "agg-event-details-market-search",
+                type: "text",
+                value: searchValue,
+                placeholder: labels.eventItemDetails.marketSelectSearchPlaceholder,
+                "aria-label": labels.eventItemDetails.marketSelectSearchPlaceholder,
+                className: cn(
+                  "h-12 w-full bg-transparent px-5 text-agg-sm leading-agg-5 text-agg-foreground placeholder:text-agg-muted-foreground",
+                  "focus:outline-none"
+                ),
+                onChange: (eventToHandle) => {
+                  setSearchValue(eventToHandle.target.value);
+                },
+                onClick: (eventToHandle) => {
+                  eventToHandle.stopPropagation();
+                }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx4(
+            "div",
+            {
+              role: "listbox",
+              "aria-label": labels.eventItemDetails.marketSelectPlaceholder,
+              className: "max-h-[288px] overflow-y-auto",
+              style: { maxHeight: `${MARKET_DROPDOWN_MAX_HEIGHT}px` },
+              children: filteredOptions.length > 0 ? filteredOptions.map((option) => {
+                const isSelected = option.value === selectedValue;
+                return /* @__PURE__ */ jsxs3(
+                  "button",
+                  {
+                    type: "button",
+                    role: "option",
+                    "aria-selected": isSelected,
+                    className: cn(
+                      "relative flex w-full items-center px-5 py-3 text-left text-agg-sm leading-agg-5 text-agg-foreground",
+                      "cursor-pointer",
+                      "focus-visible:bg-agg-secondary-hover focus-visible:outline-none",
+                      "hover:bg-agg-secondary-hover",
+                      isSelected ? "font-agg-bold" : "font-agg-normal"
+                    ),
+                    onClick: (eventToHandle) => {
+                      eventToHandle.preventDefault();
+                      eventToHandle.stopPropagation();
+                      handleSelectMarket(option.value);
+                    },
+                    children: [
+                      isSelected ? /* @__PURE__ */ jsx4(
+                        "span",
+                        {
+                          "aria-hidden": "true",
+                          className: "absolute bottom-2 left-0 top-2 w-1 bg-agg-primary"
+                        }
+                      ) : null,
+                      /* @__PURE__ */ jsx4("span", { className: "truncate", children: option.label })
+                    ]
+                  },
+                  option.value
+                );
+              }) : /* @__PURE__ */ jsx4("div", { className: "px-5 py-4 text-agg-sm leading-agg-5 text-agg-muted-foreground", children: labels.eventItemDetails.marketSelectEmpty })
+            }
+          )
+        ]
+      }
+    ) : null,
+    /* @__PURE__ */ jsxs3(
+      "div",
+      {
+        ref: measurementContainerRef,
+        "aria-hidden": "true",
+        className: "pointer-events-none invisible absolute inset-x-0 top-0 -z-10 flex flex-wrap gap-2",
+        children: [
+          options.map((option) => {
+            const isSelected = option.value === selectedValue;
+            return /* @__PURE__ */ jsx4(
+              "button",
+              {
+                ref: (element) => {
+                  optionMeasureRefs.current[option.value] = element;
+                },
+                type: "button",
+                tabIndex: -1,
+                className: cn(
+                  "inline-flex min-h-8 items-center justify-center rounded-agg-full border px-4 py-1.5 text-agg-sm leading-agg-5",
+                  isSelected ? "border-agg-primary bg-agg-secondary font-agg-bold" : "border-transparent bg-agg-secondary-hover font-agg-normal"
+                ),
+                children: /* @__PURE__ */ jsx4("span", { className: "truncate", children: option.label })
+              },
+              option.value
+            );
+          }),
+          /* @__PURE__ */ jsxs3(
+            "button",
+            {
+              ref: moreButtonMeasureRef,
+              type: "button",
+              tabIndex: -1,
+              className: "inline-flex min-h-8 items-center justify-center gap-1.5 rounded-agg-full border border-agg-primary bg-agg-secondary px-4 py-1.5 text-agg-sm leading-agg-5 text-agg-foreground",
+              children: [
+                /* @__PURE__ */ jsx4("span", { children: moreButtonLabel }),
+                /* @__PURE__ */ jsx4(
+                  Icon,
+                  {
+                    name: "chevron-down",
+                    size: "small",
+                    color: "currentColor",
+                    className: "h-4 w-4",
+                    "aria-hidden": "true"
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+
+// src/events/item-details/index.tsx
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var resolveEventDetailsSyncKey = (event) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  const parts = [
+    event.id,
+    (_a = event.status) != null ? _a : "",
+    (_b = event.startDate) != null ? _b : "",
+    (_c = event.endDate) != null ? _c : "",
+    (_d = event.creationDate) != null ? _d : ""
+  ];
+  for (const market of event.venueMarkets) {
+    parts.push(
+      market.id,
+      market.venue,
+      (_e = market.status) != null ? _e : "",
+      market.question,
+      market.volume == null ? "" : String(market.volume),
+      (_f = market.startDate) != null ? _f : "",
+      (_g = market.endDate) != null ? _g : "",
+      (_h = market.resolutionDate) != null ? _h : ""
+    );
+    const matched = market.matchedVenueMarkets;
+    if (matched && matched.length > 0) {
+      parts.push(String(matched.length));
+      for (const matchedVenueMarket of matched) {
+        parts.push(matchedVenueMarket.id);
+      }
+    } else {
+      parts.push("0");
+    }
+    for (const outcome of market.venueMarketOutcomes) {
+      parts.push(
+        outcome.id,
+        outcome.label,
+        String(outcome.price),
+        outcome.winner == null ? "" : outcome.winner ? "1" : "0"
+      );
+    }
+  }
+  return parts.join("|");
+};
+var EventListItemDetailsLoadingState = ({
+  classNames,
+  ariaLabel
+}) => {
+  const labels = useLabels5();
+  return /* @__PURE__ */ jsx5(
+    Skeleton,
+    {
+      view: "event-list-item-details",
+      className: classNames == null ? void 0 : classNames.root,
+      ariaLabel: ariaLabel != null ? ariaLabel : labels.eventItemDetails.loading
+    }
+  );
+};
+var EventListItemDetailsUnavailableState = ({
+  classNames,
+  ariaLabel
+}) => {
+  const labels = useLabels5();
+  return /* @__PURE__ */ jsx5(
+    Card,
+    {
+      className: cn(detailsBaseCardClassName, classNames == null ? void 0 : classNames.root),
+      role: "status",
+      "aria-label": ariaLabel != null ? ariaLabel : labels.eventItemDetails.unavailableAria,
+      children: /* @__PURE__ */ jsxs4("div", { className: cn("flex flex-col gap-1", classNames == null ? void 0 : classNames.header), children: [
+        /* @__PURE__ */ jsx5(Typography, { variant: "body-large-strong", className: cn("truncate", classNames == null ? void 0 : classNames.title), children: labels.eventItemDetails.unavailableTitle }),
+        /* @__PURE__ */ jsx5(Typography, { variant: "body", className: "text-agg-muted-foreground", children: labels.eventItemDetails.unavailableDescription })
+      ] })
+    }
+  );
+};
+var EventListItemDetailsNotFoundState = ({
+  classNames: _classNames,
+  ariaLabel: _ariaLabel
+}) => {
+  const labels = useLabels5();
+  return /* @__PURE__ */ jsx5(
+    StateMessage,
+    {
+      title: labels.eventItemDetails.notFoundTitle,
+      description: labels.eventItemDetails.notFoundDescription,
+      icon: /* @__PURE__ */ jsx5(SearchEmptyIcon, {}),
+      classNames: { root: "min-h-[280px] md:min-h-[320px]" }
+    }
+  );
+};
+var EventListItemDetailsGraphSection = ({
+  classNames,
+  selectedChartType,
+  venueMarkets,
+  livePrices,
+  live
+}) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+  const labels = useLabels5();
+  const tradingContext = useEventTradingContext();
+  const [selectedGraphVenue, setSelectedGraphVenue] = useState4(null);
+  const [chartOutcomeLabel, setChartOutcomeLabel] = useState4(
+    (_c = (_b = (_a = tradingContext == null ? void 0 : tradingContext.selectedOutcome) == null ? void 0 : _a.label) == null ? void 0 : _b.trim()) != null ? _c : null
+  );
+  useEffect3(() => {
+    var _a2, _b2, _c2;
+    if (chartOutcomeLabel != null) return;
+    const label = (_c2 = (_b2 = (_a2 = tradingContext == null ? void 0 : tradingContext.selectedOutcome) == null ? void 0 : _a2.label) == null ? void 0 : _b2.trim()) != null ? _c2 : null;
+    if (label) {
+      setChartOutcomeLabel(label);
+    }
+  }, [chartOutcomeLabel, (_d = tradingContext == null ? void 0 : tradingContext.selectedOutcome) == null ? void 0 : _d.label]);
+  const {
+    chart: { selectedChartTimeRange },
+    formatting: { formatPercent },
+    general: { theme }
+  } = useSdkUiConfig2();
+  const isDarkTheme = theme === "dark";
+  const timeWindow = useMemo4(() => {
+    return getTimeWindowByRange(selectedChartTimeRange);
+  }, [selectedChartTimeRange]);
+  const availableMarkets = useMemo4(() => {
+    if (venueMarkets.length === 0) return [];
+    return normalizeVenueMarketCluster(venueMarkets, tradingContext == null ? void 0 : tradingContext.selectedMarketId);
+  }, [tradingContext == null ? void 0 : tradingContext.selectedMarketId, venueMarkets]);
+  const resolvedChartOutcomeLabel = (_g = chartOutcomeLabel != null ? chartOutcomeLabel : (_f = (_e = tradingContext == null ? void 0 : tradingContext.selectedOutcome) == null ? void 0 : _e.label) == null ? void 0 : _f.trim()) != null ? _g : null;
+  const availableVenueOutcomes = useMemo4(() => {
+    return resolveChartVenueOutcomes({
+      eligibleVenueOutcomes: collectEligibleVenueOutcomes({
+        venueMarkets: availableMarkets,
+        selectedOutcomeLabel: resolvedChartOutcomeLabel
+      }),
+      livePrices
+    });
+  }, [availableMarkets, livePrices, resolvedChartOutcomeLabel]);
+  const chartPrimaryOutcomeId = (_i = (_h = availableVenueOutcomes[0]) == null ? void 0 : _h.outcome.id) != null ? _i : null;
+  const {
+    data: scopedMarketChartData,
+    isLoading: isScopedMarketChartLoading,
+    error: scopedMarketChartError,
+    refetch: refetchScopedMarketChart
+  } = useMarketChart({
+    marketId: chartPrimaryOutcomeId,
+    venueMarketIds: availableVenueOutcomes.map((item) => item.outcome.id),
+    interval: timeRangeToInterval(selectedChartTimeRange),
+    startTs: timeWindow.startTs * 1e3,
+    endTs: timeWindow.endTs * 1e3,
+    enabled: availableVenueOutcomes.length > 0,
+    live
+  });
+  const selectedMarketOutcomes = useMemo4(() => {
+    var _a2, _b2;
+    const selectedMarket = (_b2 = (_a2 = tradingContext == null ? void 0 : tradingContext.selectedMarket) != null ? _a2 : availableMarkets[0]) != null ? _b2 : null;
+    if (!selectedMarket) return [];
+    return sortOutcomeSelectorOutcomes(selectedMarket.venueMarketOutcomes);
+  }, [availableMarkets, tradingContext == null ? void 0 : tradingContext.selectedMarket]);
+  const resolvedVenueChartSeries = useMemo4(() => {
+    return resolveMarketChartVenueSeries({
+      chartData: scopedMarketChartData,
+      transformProbability: (v) => v
+    }).map((seriesItem, index) => ({
+      id: `${seriesItem.venue}-chart`,
+      venue: seriesItem.venue,
+      color: resolveSeriesColor(seriesItem.venue, index, isDarkTheme),
+      points: seriesItem.points,
+      lineWidth: 2,
+      lineStyle: "solid"
+    }));
+  }, [isDarkTheme, scopedMarketChartData]);
+  const chartAvailableVenueOutcomes = useMemo4(() => {
+    return filterChartVenueOutcomesByRenderableVenues({
+      chartData: scopedMarketChartData,
+      venueOutcomes: availableVenueOutcomes
+    });
+  }, [availableVenueOutcomes, scopedMarketChartData]);
+  const defaultCandlestickVenue = useMemo4(() => {
+    var _a2, _b2, _c2, _d2, _e2, _f2;
+    return (_f2 = (_e2 = (_c2 = (_a2 = chartAvailableVenueOutcomes.find((item) => item.venue === (tradingContext == null ? void 0 : tradingContext.selectedVenue))) == null ? void 0 : _a2.venue) != null ? _c2 : (_b2 = chartAvailableVenueOutcomes[0]) == null ? void 0 : _b2.venue) != null ? _e2 : (_d2 = availableVenueOutcomes[0]) == null ? void 0 : _d2.venue) != null ? _f2 : null;
+  }, [availableVenueOutcomes, chartAvailableVenueOutcomes, tradingContext == null ? void 0 : tradingContext.selectedVenue]);
+  const activeGraphVenue = selectedChartType === "candlestick" ? selectedGraphVenue != null ? selectedGraphVenue : defaultCandlestickVenue : selectedGraphVenue;
+  const visibleChartSeries = useMemo4(() => {
+    if (!activeGraphVenue) {
+      return resolvedVenueChartSeries;
+    }
+    return resolvedVenueChartSeries.filter((seriesItem) => seriesItem.venue === activeGraphVenue);
+  }, [activeGraphVenue, resolvedVenueChartSeries]);
+  const chartLiveState = useMemo4(() => {
+    return resolveMarketChartLiveState({
+      chartData: scopedMarketChartData,
+      selectedVenue: activeGraphVenue,
+      transformProbability: (v) => v
+    });
+  }, [activeGraphVenue, scopedMarketChartData]);
+  useEffect3(() => {
+    if (!selectedGraphVenue) return;
+    const hasSelectedGraphVenue = chartAvailableVenueOutcomes.some(
+      (item) => item.venue === selectedGraphVenue
+    );
+    if (!hasSelectedGraphVenue) {
+      setSelectedGraphVenue(null);
+    }
+  }, [chartAvailableVenueOutcomes, selectedGraphVenue]);
+  const handleRetryMarketChart = () => {
+    void refetchScopedMarketChart();
+  };
+  if (scopedMarketChartError) {
+    return /* @__PURE__ */ jsx5("div", { className: cn("agg-chart-region w-full", classNames == null ? void 0 : classNames.chart), children: /* @__PURE__ */ jsx5(
+      StateMessage,
+      {
+        title: labels.eventItemDetails.chartUnavailableTitle,
+        description: labels.eventItemDetails.chartUnavailableDescription,
+        icon: /* @__PURE__ */ jsx5(WarningIcon, {}),
+        onAction: handleRetryMarketChart,
+        classNames: { root: "min-h-[300px] px-5 py-10 md:px-10" }
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx5(
+    LineChart,
+    {
+      classNames: { root: cn("agg-chart-region", classNames == null ? void 0 : classNames.chart) },
+      series: visibleChartSeries,
+      height: 300,
+      isLoading: isScopedMarketChartLoading,
+      chartType: selectedChartType,
+      liveCandle: selectedChartType === "candlestick" ? (_j = chartLiveState.liveCandle) != null ? _j : void 0 : void 0,
+      lineValue: chartLiveState.lineValue,
+      showSeriesControls: selectedMarketOutcomes.length > 0,
+      renderSeriesControls: ({ handleSeriesChange }) => {
+        var _a2, _b2, _c2, _d2;
+        return /* @__PURE__ */ jsxs4(
+          "div",
+          {
+            className: cn(
+              "agg-chart-toolbar",
+              "w-full flex flex-col gap-4",
+              "md:flex-row md:items-center md:justify-between",
+              "flex-col-reverse md:flex-col",
+              classNames == null ? void 0 : classNames.summary
+            ),
+            children: [
+              /* @__PURE__ */ jsx5(
+                "div",
+                {
+                  className: cn(
+                    "agg-market-badges",
+                    "flex min-w-0 gap-2 overflow-x-auto pb-1 md:flex-wrap md:overflow-visible md:pb-0",
+                    classNames == null ? void 0 : classNames.outcomeBadges
+                  ),
+                  children: chartAvailableVenueOutcomes.map((item) => {
+                    var _a3;
+                    const percentage = (_a3 = livePrices.get(item.outcome.id)) != null ? _a3 : item.outcome.price;
+                    const text = formatMarketProbabilityPercent(percentage, formatPercent);
+                    const seriesId = `${item.venue}-chart`;
+                    const isActiveVenue = activeGraphVenue === item.venue;
+                    return /* @__PURE__ */ jsx5(
+                      "button",
+                      {
+                        type: "button",
+                        "aria-label": `${item.venue} ${text}`,
+                        "aria-pressed": isActiveVenue,
+                        className: cn(
+                          "agg-market-badge",
+                          "cursor-pointer",
+                          "rounded-agg-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-agg-primary focus-visible:ring-offset-0 focus-visible:ring-offset-agg-secondary-hover"
+                        ),
+                        onClick: (eventToHandle) => {
+                          eventToHandle.preventDefault();
+                          eventToHandle.stopPropagation();
+                          const nextSelectedGraphVenue = selectedChartType === "candlestick" ? item.venue : selectedGraphVenue === item.venue ? null : item.venue;
+                          setSelectedGraphVenue(nextSelectedGraphVenue);
+                          handleSeriesChange(seriesId);
+                        },
+                        children: /* @__PURE__ */ jsx5(
+                          Badge,
+                          {
+                            text,
+                            size: "large",
+                            prefix: /* @__PURE__ */ jsx5(
+                              VenueLogo,
+                              {
+                                venue: item.market.venue,
+                                size: "small",
+                                title: item.market.venue
+                              }
+                            ),
+                            classNames: {
+                              root: cn("h-9 shrink-0 border px-4 text-agg-base leading-agg-6")
+                            },
+                            isActive: isActiveVenue
+                          }
+                        )
+                      },
+                      item.outcome.id
+                    );
+                  })
+                }
+              ),
+              /* @__PURE__ */ jsx5(
+                SwitchButton,
+                {
+                  ariaLabel: labels.eventItemDetails.outcomeSelectorAria,
+                  className: cn("agg-outcome-switch w-full md:w-fit", classNames == null ? void 0 : classNames.segmentedControl),
+                  value: (_d2 = (_c2 = (_a2 = selectedMarketOutcomes.find((o) => o.label === resolvedChartOutcomeLabel)) == null ? void 0 : _a2.id) != null ? _c2 : (_b2 = selectedMarketOutcomes[0]) == null ? void 0 : _b2.id) != null ? _d2 : "",
+                  onValueChange: (outcomeId) => {
+                    const outcome = selectedMarketOutcomes.find((o) => o.id === outcomeId);
+                    if (outcome) {
+                      setChartOutcomeLabel(outcome.label);
+                    }
+                    tradingContext == null ? void 0 : tradingContext.selectOutcome(outcomeId);
+                  },
+                  options: selectedMarketOutcomes.map((outcome) => {
+                    var _a3;
+                    const price = (_a3 = livePrices.get(outcome.id)) != null ? _a3 : outcome.price;
+                    return {
+                      value: outcome.id,
+                      label: `${outcome.label} ${formatProbabilityCents(price)}`,
+                      ariaLabel: `${outcome.label} ${formatProbabilityCents(price)}`
+                    };
+                  })
+                }
+              )
+            ]
+          }
+        );
+      }
+    }
+  );
+};
+var EventListItemDetailsContent = ({
+  event,
+  defaultMarketId,
+  defaultOutcomeId,
+  classNames,
+  venueInfo,
+  detailsStats,
+  eventTradingState,
+  ariaLabel,
+  onClick
+}) => {
+  var _a, _b;
+  const [selectedChartType, setSelectedChartType] = useState4("line");
+  const lastAppliedEventSyncKeyRef = useRef3(null);
+  const lastAppliedDefaultRef = useRef3(null);
+  const config = useSdkUiConfig2();
+  const labels = useLabels5();
+  const tradingContext = useEventTradingContext();
+  const eventSyncKey = useMemo4(() => resolveEventDetailsSyncKey(event), [event]);
+  const resolvedEventTradingState = useMemo4(() => {
+    return eventTradingState != null ? eventTradingState : resolveEventTradingState(event);
+  }, [event, eventTradingState]);
+  const scopedSelectedMarket = (tradingContext == null ? void 0 : tradingContext.selectedEventId) === event.id ? (_a = tradingContext.selectedMarket) != null ? _a : resolvedEventTradingState.primaryMarket : resolvedEventTradingState.primaryMarket;
+  const scopedSelectedMarketId = (tradingContext == null ? void 0 : tradingContext.selectedEventId) === event.id ? tradingContext.selectedMarketId : null;
+  useEventOrderbookData(
+    resolvedEventTradingState.isTradingDisabled ? [] : resolvedEventTradingState.displayMarkets,
+    scopedSelectedMarketId
+  );
+  const wsLivePrices = useLiveOutcomePrices(resolvedEventTradingState.displayMarkets);
+  const midpointsClusterMarkets = useMemo4(() => {
+    if (resolvedEventTradingState.isTradingDisabled) return [];
+    return normalizeVenueMarketCluster(
+      resolvedEventTradingState.displayMarkets,
+      scopedSelectedMarketId
+    );
+  }, [
+    resolvedEventTradingState.displayMarkets,
+    resolvedEventTradingState.isTradingDisabled,
+    scopedSelectedMarketId
+  ]);
+  const { prices: restMidpoints } = useMidpoints(midpointsClusterMarkets);
+  const livePrices = useMemo4(() => {
+    if (!restMidpoints.size) return wsLivePrices;
+    if (!wsLivePrices.size) return restMidpoints;
+    const merged = new Map(restMidpoints);
+    for (const [k, v] of wsLivePrices) merged.set(k, v);
+    return merged;
+  }, [restMidpoints, wsLivePrices]);
+  useEffect3(() => {
+    if (!tradingContext) return;
+    if (lastAppliedEventSyncKeyRef.current === eventSyncKey) return;
+    if ((tradingContext == null ? void 0 : tradingContext.selectedEventId) !== event.id) {
+      tradingContext == null ? void 0 : tradingContext.initializeFromEvent(event);
+    } else {
+      tradingContext == null ? void 0 : tradingContext.syncEvent(event);
+    }
+    lastAppliedEventSyncKeyRef.current = eventSyncKey;
+  }, [event, eventSyncKey, tradingContext]);
+  useEffect3(() => {
+    if (!tradingContext) return;
+    if (!defaultMarketId) return;
+    if (tradingContext.selectedEventId !== event.id) return;
+    const applyKey = `${event.id}::${defaultMarketId}::${defaultOutcomeId != null ? defaultOutcomeId : ""}`;
+    if (lastAppliedDefaultRef.current === applyKey) return;
+    const nextMarket = event.venueMarkets.find((market) => market.id === defaultMarketId);
+    if (!nextMarket) return;
+    if (defaultOutcomeId) {
+      const nextOutcome = nextMarket.venueMarketOutcomes.find(
+        (outcome) => outcome.id === defaultOutcomeId
+      );
+      if (!nextOutcome) return;
+      tradingContext.selectMarketAndOutcome(defaultMarketId, defaultOutcomeId);
+      lastAppliedDefaultRef.current = applyKey;
+      return;
+    }
+    tradingContext.selectMarket(defaultMarketId, nextMarket);
+    lastAppliedDefaultRef.current = applyKey;
+  }, [
+    defaultMarketId,
+    defaultOutcomeId,
+    event.id,
+    event.venueMarkets,
+    tradingContext,
+    tradingContext == null ? void 0 : tradingContext.selectedEventId
+  ]);
+  const venueMarkets = useMemo4(
+    () => resolvedEventTradingState.displayMarkets,
+    [resolvedEventTradingState.displayMarkets]
+  );
+  const sortedVenueMarkets = useMemo4(() => sortMarketsByYesOddsDesc(venueMarkets), [venueMarkets]);
+  const marketOptions = useMemo4(
+    () => sortedVenueMarkets.map((vm) => ({
+      value: vm.id,
+      label: vm.question
+    })),
+    [sortedVenueMarkets]
+  );
+  const volumeLabel = useMemo4(() => {
+    const resolvedVolume = resolveDisplayVolume(event.volume, venueMarkets);
+    if (typeof resolvedVolume !== "number") return "";
+    return `${config.formatting.formatCompactCurrency(resolvedVolume)} ${labels.eventItemDetails.volumeSuffix}`;
+  }, [config, event.volume, labels.eventItemDetails.volumeSuffix, venueMarkets]);
+  return /* @__PURE__ */ jsxs4(
+    Card,
+    {
+      className: cn("group/agg-event-details", detailsBaseCardClassName, classNames == null ? void 0 : classNames.root),
+      "aria-label": ariaLabel != null ? ariaLabel : event.title,
+      onClick: () => {
+        onClick == null ? void 0 : onClick(event);
+      },
+      children: [
+        /* @__PURE__ */ jsxs4(
+          "div",
+          {
+            className: cn(
+              "agg-event-details-header",
+              "flex flex-row gap-3 md:gap-4",
+              venueMarkets.length > 1 ? "items-start" : "items-center",
+              "justify-start",
+              classNames == null ? void 0 : classNames.header
+            ),
+            children: [
+              /* @__PURE__ */ jsx5(
+                RemoteImage,
+                {
+                  src: optimizedImageUrl2(event.image, 60),
+                  alt: "",
+                  className: "agg-event-image size-10 rounded-agg-lg object-cover md:size-[60px]"
+                }
+              ),
+              /* @__PURE__ */ jsxs4("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [
+                /* @__PURE__ */ jsx5(
+                  Typography,
+                  {
+                    variant: "body-strong",
+                    className: cn(
+                      "agg-event-title",
+                      "min-w-0 text-agg-base font-agg-bold! leading-agg-6 md:text-agg-2xl md:leading-agg-8",
+                      "truncate text-wrap wrap-break-word line-clamp-2",
+                      classNames == null ? void 0 : classNames.title
+                    ),
+                    children: event.title
+                  }
+                ),
+                venueMarkets.length > 1 ? /* @__PURE__ */ jsx5(
+                  EventListItemDetailsMarketSelector,
+                  {
+                    className: classNames == null ? void 0 : classNames.headerPills,
+                    options: marketOptions,
+                    selectedValue: (_b = scopedSelectedMarket == null ? void 0 : scopedSelectedMarket.id) != null ? _b : "",
+                    onChange: (marketId) => {
+                      tradingContext == null ? void 0 : tradingContext.selectMarket(marketId);
+                    }
+                  }
+                ) : null
+              ] })
+            ]
+          }
+        ),
+        detailsStats && detailsStats.length > 0 ? /* @__PURE__ */ jsx5(
+          "div",
+          {
+            className: cn(
+              "agg-event-stats 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__ */ jsxs4(
+                "div",
+                {
+                  className: "agg-event-stat flex flex-col gap-1",
+                  children: [
+                    /* @__PURE__ */ jsx5(Typography, { variant: "caption-caps", className: "text-agg-muted-foreground", children: statItem.label }),
+                    /* @__PURE__ */ jsxs4("div", { className: "flex items-baseline gap-1", children: [
+                      /* @__PURE__ */ jsx5(
+                        Typography,
+                        {
+                          variant: "body",
+                          className: "text-agg-lg leading-agg-7 text-agg-foreground",
+                          children: statItem.value
+                        }
+                      ),
+                      statItem.delta ? /* @__PURE__ */ jsx5(Typography, { variant: "label", className: cn(deltaClassName), children: statItem.delta }) : null
+                    ] })
+                  ]
+                },
+                `${statItem.label}-${statItem.value}`
+              );
+            })
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs4("div", { className: cn("agg-event-details-chart", "flex flex-col gap-2"), children: [
+          /* @__PURE__ */ jsx5(
+            EventListItemDetailsGraphSection,
+            {
+              classNames,
+              selectedChartType,
+              venueInfo,
+              venueMarkets,
+              livePrices,
+              live: false
+            }
+          ),
+          /* @__PURE__ */ jsxs4(
+            "div",
+            {
+              className: cn(
+                "agg-chart-footer flex flex-wrap items-center justify-between gap-4",
+                classNames == null ? void 0 : classNames.footer
+              ),
+              children: [
+                /* @__PURE__ */ jsx5(Typography, { variant: "label", className: "agg-chart-volume text-agg-muted-foreground", children: volumeLabel || "-" }),
+                /* @__PURE__ */ jsxs4(
+                  "div",
+                  {
+                    className: cn(
+                      "agg-chart-time-ranges flex flex-wrap items-center gap-2 md:gap-3",
+                      classNames == null ? void 0 : classNames.timeRange
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsx5(
+                        ChartTypeSwitch,
+                        {
+                          className: "agg-chart-type-switch",
+                          value: selectedChartType,
+                          onValueChange: setSelectedChartType
+                        }
+                      ),
+                      /* @__PURE__ */ jsx5("span", { "aria-hidden": "true", className: "hidden h-4 w-px bg-agg-separator md:block" }),
+                      CHART_TIME_RANGES.map((timeRange) => {
+                        const isActive = timeRange === config.chart.selectedChartTimeRange;
+                        return /* @__PURE__ */ jsx5(
+                          Button,
+                          {
+                            size: "small",
+                            variant: "tertiary",
+                            className: cn(
+                              "agg-chart-time-range-trigger",
+                              "h-auto min-w-0 rounded-none px-0 py-0 text-agg-xs leading-agg-4 md:text-agg-sm md:leading-agg-5",
+                              "border-0 bg-transparent shadow-none",
+                              "hover:text-agg-foreground!",
+                              isActive ? "font-agg-bold! text-agg-foreground!" : "font-agg-normal! text-agg-muted-foreground!"
+                            ),
+                            "aria-pressed": isActive,
+                            onClick: (e) => {
+                              e.stopPropagation();
+                              e.preventDefault();
+                              config.chart.setSelectedChartTimeRange(timeRange);
+                            },
+                            children: timeRange === "ALL" ? labels.eventItemDetails.allTimeRange : timeRange
+                          },
+                          timeRange
+                        );
+                      })
+                    ]
+                  }
+                )
+              ]
+            }
+          )
+        ] }),
+        event.description ? /* @__PURE__ */ jsx5(SettlementSummary, { content: event.description }) : null
+      ]
+    }
+  );
+};
+var EventListItemDetailsByEventId = (_a) => {
+  var _b = _a, {
+    eventId
+  } = _b, rest = __objRest(_b, [
+    "eventId"
+  ]);
+  const resolvedEventId = eventId != null ? eventId : "";
+  const {
+    event: fetchedEvent,
+    error,
+    isError,
+    isLoading
+  } = useVenueEvent2({
+    eventId: resolvedEventId,
+    enabled: !!resolvedEventId
+  });
+  if (!resolvedEventId) {
+    return /* @__PURE__ */ jsx5(
+      EventListItemDetailsUnavailableState,
+      {
+        classNames: rest.classNames,
+        ariaLabel: rest.ariaLabel
+      }
+    );
+  }
+  if (isLoading) {
+    return /* @__PURE__ */ jsx5(EventListItemDetailsLoadingState, { classNames: rest.classNames, ariaLabel: rest.ariaLabel });
+  }
+  if (isErrorWithStatus(error, 404)) {
+    return /* @__PURE__ */ jsx5(EventListItemDetailsNotFoundState, { classNames: rest.classNames, ariaLabel: rest.ariaLabel });
+  }
+  if (!fetchedEvent && !isError) {
+    return /* @__PURE__ */ jsx5(EventListItemDetailsLoadingState, { classNames: rest.classNames, ariaLabel: rest.ariaLabel });
+  }
+  if (!fetchedEvent) {
+    return /* @__PURE__ */ jsx5(
+      EventListItemDetailsUnavailableState,
+      {
+        classNames: rest.classNames,
+        ariaLabel: rest.ariaLabel
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx5(EventListItemDetailsContent, __spreadValues({ event: fetchedEvent }, rest));
+};
+var EventListItemDetails = (props) => {
+  if (props.isLoading) {
+    return /* @__PURE__ */ jsx5(EventListItemDetailsLoadingState, { classNames: props.classNames, ariaLabel: props.ariaLabel });
+  }
+  if ("event" in props && props.event) {
+    const _a = props, { event } = _a, rest = __objRest(_a, ["event"]);
+    return /* @__PURE__ */ jsx5(EventListItemDetailsContent, __spreadValues({ event }, rest));
+  }
+  if ("eventId" in props && typeof props.eventId === "string") {
+    const {
+      classNames,
+      defaultMarketId,
+      defaultOutcomeId,
+      venueInfo,
+      detailsStats,
+      ariaLabel: ariaLabelOverride,
+      onClick
+    } = props;
+    const byEventIdProps = {
+      eventId: props.eventId,
+      isLoading: false,
+      classNames,
+      defaultMarketId,
+      defaultOutcomeId,
+      venueInfo,
+      detailsStats,
+      ariaLabel: ariaLabelOverride,
+      onClick
+    };
+    return /* @__PURE__ */ jsx5(EventListItemDetailsByEventId, __spreadValues({}, byEventIdProps));
+  }
+  return /* @__PURE__ */ jsx5(
+    EventListItemDetailsUnavailableState,
+    {
+      classNames: props.classNames,
+      ariaLabel: props.ariaLabel
+    }
+  );
+};
+EventListItemDetails.displayName = "EventListItemDetails";
+
+// src/events/orderbook/orderbook.constants.ts
+var orderbookRowLimitDefault = 4;
+var orderbookRowHeightPx = 36;
+var orderbookDividerHeightPx = 0;
+var orderbookRowGapPx = 0;
+var orderbookSpreadRowHeightPx = 36;
+var orderbookMaxVisibleVenues = 2;
+var orderbookDefaultLabels = {
+  midPrice: "Mid Price",
+  spread: "Spread",
+  tradeOutcome: "Trade",
+  price: "Price",
+  shares: "Shares",
+  total: "Total",
+  asks: "Asks",
+  bids: "Bids"
+};
+
+// src/events/orderbook/use-center-orderbook-spread.ts
+import { useCallback as useCallback3, useLayoutEffect as useLayoutEffect2, useRef as useRef4 } from "react";
+var maxAutoCenterAttempts = 12;
+var userScrollKeys = /* @__PURE__ */ new Set(["ArrowDown", "ArrowUp", "PageDown", "PageUp", "Home", "End", " "]);
+var useCenterOrderbookSpread = ({
+  containerRef,
+  spreadRef,
+  marketId,
+  snapshotKey: _snapshotKey,
+  rowCount,
+  enabled = true
+}) => {
+  const hasAutoCenteredRef = useRef4(false);
+  const hasUserScrolledRef = useRef4(false);
+  const animationFrameRef = useRef4(null);
+  const retryCountRef = useRef4(0);
+  const resetKey = marketId != null ? marketId : "";
+  useLayoutEffect2(() => {
+    const cancelPendingFrame = () => {
+      if (animationFrameRef.current === null) return;
+      window.cancelAnimationFrame(animationFrameRef.current);
+      animationFrameRef.current = null;
+    };
+    hasAutoCenteredRef.current = false;
+    hasUserScrolledRef.current = false;
+    retryCountRef.current = 0;
+    cancelPendingFrame();
+  }, [resetKey]);
+  useLayoutEffect2(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const cancelPendingFrame = () => {
+      if (animationFrameRef.current === null) return;
+      window.cancelAnimationFrame(animationFrameRef.current);
+      animationFrameRef.current = null;
+    };
+    const handleUserScrollIntent = () => {
+      hasUserScrolledRef.current = true;
+      cancelPendingFrame();
+    };
+    const handleKeyDown = (event) => {
+      if (!userScrollKeys.has(event.key)) return;
+      handleUserScrollIntent();
+    };
+    container.addEventListener("pointerdown", handleUserScrollIntent);
+    container.addEventListener("wheel", handleUserScrollIntent, { passive: true });
+    container.addEventListener("touchstart", handleUserScrollIntent, { passive: true });
+    container.addEventListener("keydown", handleKeyDown);
+    return () => {
+      container.removeEventListener("pointerdown", handleUserScrollIntent);
+      container.removeEventListener("wheel", handleUserScrollIntent);
+      container.removeEventListener("touchstart", handleUserScrollIntent);
+      container.removeEventListener("keydown", handleKeyDown);
+      cancelPendingFrame();
+    };
+  }, [containerRef]);
+  useLayoutEffect2(() => {
+    if (!enabled) return;
+    if (hasAutoCenteredRef.current || hasUserScrolledRef.current) return;
+    let isCancelled = false;
+    const cancelPendingFrame = () => {
+      if (animationFrameRef.current === null) return;
+      window.cancelAnimationFrame(animationFrameRef.current);
+      animationFrameRef.current = null;
+    };
+    const scheduleMeasurement = () => {
+      cancelPendingFrame();
+      animationFrameRef.current = window.requestAnimationFrame(measureAndCenter);
+    };
+    const scheduleRetry = () => {
+      if (isCancelled || hasUserScrolledRef.current || hasAutoCenteredRef.current) return;
+      if (retryCountRef.current >= maxAutoCenterAttempts) return;
+      retryCountRef.current += 1;
+      scheduleMeasurement();
+    };
+    const measureAndCenter = () => {
+      if (isCancelled) return;
+      const container = containerRef.current;
+      const spread = spreadRef.current;
+      if (!container || !spread) {
+        scheduleRetry();
+        return;
+      }
+      const containerHeight = container.clientHeight;
+      if (containerHeight <= 0) {
+        scheduleRetry();
+        return;
+      }
+      const containerRect = container.getBoundingClientRect();
+      const spreadRect = spread.getBoundingClientRect();
+      if (containerRect.height <= 0 || spreadRect.height <= 0) {
+        scheduleRetry();
+        return;
+      }
+      const spreadOffsetTop = container.scrollTop + (spreadRect.top - containerRect.top);
+      const maxScrollTop = Math.max(0, container.scrollHeight - containerHeight);
+      const targetScrollTop = Math.max(
+        0,
+        Math.min(maxScrollTop, spreadOffsetTop - containerHeight / 2 + spreadRect.height / 2)
+      );
+      container.scrollTo({ top: targetScrollTop, behavior: "auto" });
+      hasAutoCenteredRef.current = true;
+      retryCountRef.current = 0;
+      animationFrameRef.current = null;
+    };
+    scheduleMeasurement();
+    return () => {
+      isCancelled = true;
+      cancelPendingFrame();
+    };
+  }, [containerRef, enabled, resetKey, rowCount, spreadRef]);
+  const recenter = useCallback3(() => {
+    const container = containerRef.current;
+    const spread = spreadRef.current;
+    if (!container || !spread) return;
+    const containerRect = container.getBoundingClientRect();
+    const spreadRect = spread.getBoundingClientRect();
+    if (containerRect.height <= 0 || spreadRect.height <= 0) return;
+    const spreadOffsetTop = container.scrollTop + (spreadRect.top - containerRect.top);
+    const maxScrollTop = Math.max(0, container.scrollHeight - container.clientHeight);
+    const targetScrollTop = Math.max(
+      0,
+      Math.min(maxScrollTop, spreadOffsetTop - container.clientHeight / 2 + spreadRect.height / 2)
+    );
+    container.scrollTo({ top: targetScrollTop, behavior: "smooth" });
+    hasUserScrolledRef.current = false;
+  }, [containerRef, spreadRef]);
+  return { recenter };
+};
+
+// src/events/orderbook/index.tsx
+import { sortVenues as sortVenues3, useAggUiConfig } from "@agg-build/hooks";
+import { useEffect as useEffect4, useRef as useRef5 } from "react";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var OrderbookVenueLogos = ({ venues }) => {
+  const visible = sortVenues3(venues).slice(0, orderbookMaxVisibleVenues);
+  const overflow = venues.length - visible.length;
+  return /* @__PURE__ */ jsxs5("div", { className: "flex flex-row items-center justify-start gap-0.5 md:gap-1", children: [
+    visible.map((venue) => /* @__PURE__ */ jsx6(VenueLogo, { venue, size: "small" }, venue)),
+    overflow > 0 ? /* @__PURE__ */ jsxs5("span", { className: "text-agg-xs font-agg-bold leading-agg-4 text-agg-muted-foreground", children: [
+      "+",
+      overflow
+    ] }) : null
+  ] });
+};
+var OrderbookRow = ({
+  entry,
+  formatNumber,
+  formatCurrency,
+  enableAnimations,
+  showBadge,
+  badgeLabel
+}) => {
+  var _a;
+  const isAsk = entry.kind === "ask";
+  const priceClassName = isAsk ? "text-agg-orderbook-ask" : "text-agg-orderbook-bid";
+  const barClassName = isAsk ? "bg-agg-orderbook-ask/10" : "bg-agg-orderbook-bid/10";
+  const badgeBorderClassName = isAsk ? "border-agg-orderbook-ask/50 bg-agg-orderbook-ask/10" : "border-agg-orderbook-bid/50 bg-agg-orderbook-bid/10";
+  const badgeTextClassName = isAsk ? "text-agg-orderbook-ask" : "text-agg-orderbook-bid";
+  const venuesFromBreakdown = Object.entries((_a = entry.row.venueBreakdown) != null ? _a : {}).filter(([, size]) => typeof size === "number" && size > 0).sort((left, right) => {
+    if (right[1] !== left[1]) return right[1] - left[1];
+    return left[0].localeCompare(right[0]);
+  }).map(([venue]) => venue);
+  const venues = entry.row.venues && entry.row.venues.length > 0 ? entry.row.venues : venuesFromBreakdown.length > 0 ? venuesFromBreakdown : [entry.row.venue];
+  const barPercent = Math.max(2, Number((entry.unifiedBarScale * 100).toFixed(2)));
+  return /* @__PURE__ */ jsxs5("div", { className: "agg-orderbook-row relative flex h-9 items-center gap-2.5 overflow-clip md:gap-10 pr-2.5 md:pr-5", children: [
+    /* @__PURE__ */ jsxs5("div", { className: "md:relative min-w-0 flex-1 self-stretch", children: [
+      /* @__PURE__ */ jsx6(
+        "div",
+        {
+          "aria-hidden": "true",
+          className: cn(
+            "agg-orderbook-bar absolute inset-y-0 left-0",
+            barClassName,
+            getMotionClassName(enableAnimations, "transition-[width] duration-200 ease-in-out")
+          ),
+          style: { width: `${barPercent}%` }
+        }
+      ),
+      showBadge && badgeLabel ? /* @__PURE__ */ jsx6(
+        "div",
+        {
+          className: cn(
+            "absolute flex left-5 top-1/2 -translate-y-1/2 rounded-[4px] border px-2 py-0.5",
+            badgeBorderClassName
+          ),
+          children: /* @__PURE__ */ jsx6(
+            "span",
+            {
+              className: cn("text-[10px] font-bold uppercase leading-[14px]", badgeTextClassName),
+              children: badgeLabel
+            }
+          )
+        }
+      ) : null
+    ] }),
+    /* @__PURE__ */ jsxs5("div", { className: "flex w-20 shrink-0 items-center justify-start gap-2 md:w-[120px]", children: [
+      /* @__PURE__ */ jsx6(
+        "span",
+        {
+          className: cn(
+            "agg-orderbook-price",
+            "w-9 min-w-9 md:min-w-10 md:w-10 text-agg-sm font-agg-bold leading-agg-5",
+            priceClassName
+          ),
+          children: formatProbabilityCents(entry.row.price)
+        }
+      ),
+      /* @__PURE__ */ jsx6(OrderbookVenueLogos, { venues })
+    ] }),
+    /* @__PURE__ */ jsx6("span", { className: "agg-orderbook-size w-20 shrink-0 truncate text-center text-agg-sm leading-agg-5 text-agg-foreground md:w-[120px]", children: formatNumber(entry.row.size) }),
+    /* @__PURE__ */ jsx6("span", { className: "agg-orderbook-total w-20 shrink-0 truncate text-center text-agg-sm leading-agg-5 text-agg-foreground md:w-[120px]", children: formatCurrency(entry.row.total) })
+  ] });
+};
+var Orderbook = ({
+  entries,
+  formatNumber,
+  formatCurrency,
+  visibleRows = orderbookRowLimitDefault,
+  enableAnimations = true,
+  marketId,
+  snapshotKey,
+  outcomeId,
+  labels: labelsProp,
+  className
+}) => {
+  var _a, _b, _c, _d, _e;
+  const { enableWebsocketsLogs } = useAggUiConfig();
+  const labels = __spreadValues(__spreadValues({}, orderbookDefaultLabels), labelsProp);
+  const scrollContainerRef = useRef5(null);
+  const spreadRowRef = useRef5(null);
+  const autoCenterMarketId = (_a = marketId != null ? marketId : outcomeId) != null ? _a : null;
+  const maxVisibleRows = Math.max(1, visibleRows);
+  const totalVisibleRows = maxVisibleRows * 2 + 1;
+  const orderBookVisibleHeightPx = maxVisibleRows * 2 * orderbookRowHeightPx + Math.max(0, totalVisibleRows - 1) * (orderbookDividerHeightPx + orderbookRowGapPx) + orderbookSpreadRowHeightPx;
+  const { recenter } = useCenterOrderbookSpread({
+    containerRef: scrollContainerRef,
+    spreadRef: spreadRowRef,
+    marketId: autoCenterMarketId,
+    snapshotKey,
+    rowCount: entries.length
+  });
+  const askEntries = entries.filter((e) => e.kind === "ask");
+  const bidEntries = entries.filter((e) => e.kind === "bid");
+  const spreadEntry = entries.find(
+    (e) => e.kind === "spread"
+  );
+  useEffect4(() => {
+    var _a2, _b2;
+    if (!enableWebsocketsLogs) return;
+    console.debug("[AggUI][orderbook] component_rendered", {
+      outcomeId: outcomeId != null ? outcomeId : null,
+      marketId: marketId != null ? marketId : null,
+      snapshotKey: snapshotKey != null ? snapshotKey : null,
+      askCount: askEntries.length,
+      bidCount: bidEntries.length,
+      spreadMidPrice: (_a2 = spreadEntry == null ? void 0 : spreadEntry.midPrice) != null ? _a2 : null,
+      spreadValue: (_b2 = spreadEntry == null ? void 0 : spreadEntry.spread) != null ? _b2 : null
+    });
+  }, [
+    askEntries.length,
+    bidEntries.length,
+    enableWebsocketsLogs,
+    marketId,
+    outcomeId,
+    snapshotKey,
+    spreadEntry
+  ]);
+  return /* @__PURE__ */ jsxs5("div", { className: cn("agg-orderbook-unified flex flex-col", className), children: [
+    /* @__PURE__ */ jsxs5("div", { className: "flex h-9 items-center gap-2.5 overflow-clip border-b border-agg-separator pr-5 md:gap-10", children: [
+      /* @__PURE__ */ jsx6("span", { className: "flex min-w-0 flex-1 items-center gap-2 pl-5", children: /* @__PURE__ */ jsx6("span", { className: "text-agg-xs font-agg-bold uppercase leading-agg-4 text-agg-muted-foreground", children: labels.tradeOutcome }) }),
+      /* @__PURE__ */ jsx6("span", { className: "w-20 shrink-0 text-agg-xs font-agg-bold uppercase leading-agg-4 text-agg-muted-foreground md:w-[120px]", children: labels.price }),
+      /* @__PURE__ */ jsx6("span", { className: "w-20 shrink-0 text-center text-agg-xs font-agg-bold uppercase leading-agg-4 text-agg-muted-foreground md:w-[120px]", children: labels.shares }),
+      /* @__PURE__ */ jsx6("span", { className: "w-20 shrink-0 text-center text-agg-xs font-agg-bold uppercase leading-agg-4 text-agg-muted-foreground md:w-[120px]", children: labels.total })
+    ] }),
+    /* @__PURE__ */ jsxs5("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxs5(
+        "div",
+        {
+          ref: scrollContainerRef,
+          className: "agg-orderbook-list flex flex-col overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+          style: { maxHeight: `${orderBookVisibleHeightPx}px` },
+          role: "region",
+          "aria-label": "Order book",
+          tabIndex: 0,
+          children: [
+            askEntries.length > 0 ? /* @__PURE__ */ jsx6("div", { className: "agg-orderbook-asks flex flex-col", children: askEntries.map((entry, index) => /* @__PURE__ */ jsx6(
+              OrderbookRow,
+              {
+                entry,
+                formatNumber,
+                formatCurrency,
+                enableAnimations,
+                showBadge: index === askEntries.length - 1,
+                badgeLabel: labels.asks
+              },
+              entry.row.id
+            )) }) : null,
+            /* @__PURE__ */ jsxs5(
+              "div",
+              {
+                ref: spreadRowRef,
+                className: "agg-orderbook-spread flex items-center border-y border-agg-separator h-9 px-5 py-2 gap-3 md:gap-10",
+                role: "separator",
+                "aria-label": `${labels.midPrice}: ${formatProbabilityCents((_b = spreadEntry == null ? void 0 : spreadEntry.midPrice) != null ? _b : null)}, ${labels.spread}: ${formatProbabilityCents((_c = spreadEntry == null ? void 0 : spreadEntry.spread) != null ? _c : null)}`,
+                children: [
+                  /* @__PURE__ */ jsxs5(
+                    Typography,
+                    {
+                      variant: "label",
+                      className: "min-w-0 md:flex-1 text-agg-foreground whitespace-nowrap text-ellipsis max-w-1/2 truncate md:max-w-unset",
+                      children: [
+                        "Last: ",
+                        labels.lastOutcome ? `${labels.lastOutcome} ` : "",
+                        formatProbabilityCents((_d = spreadEntry == null ? void 0 : spreadEntry.midPrice) != null ? _d : null)
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs5(
+                    Typography,
+                    {
+                      variant: "label",
+                      className: "w-26 shrink-0 text-agg-foreground md:w-[120px] whitespace-nowrap text-ellipsis max-w-1/2 truncate md:max-w-unset",
+                      children: [
+                        labels.spread,
+                        ": ",
+                        formatProbabilityCents((_e = spreadEntry == null ? void 0 : spreadEntry.spread) != null ? _e : null)
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx6("div", { className: "hidden md:inline-flex w-20 shrink-0 md:w-[120px]" }),
+                  /* @__PURE__ */ jsx6("div", { className: "hidden md:inline-flex w-20 shrink-0 md:w-[120px]" })
+                ]
+              }
+            ),
+            bidEntries.length > 0 ? /* @__PURE__ */ jsx6("div", { className: "agg-orderbook-bids flex flex-col", children: bidEntries.map((entry, index) => /* @__PURE__ */ jsx6(
+              OrderbookRow,
+              {
+                entry,
+                formatNumber,
+                formatCurrency,
+                enableAnimations,
+                showBadge: index === 0,
+                badgeLabel: labels.bids
+              },
+              entry.row.id
+            )) }) : null
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx6(
+        "button",
+        {
+          type: "button",
+          onClick: recenter,
+          className: "absolute bottom-3 left-5 z-10 flex size-8 cursor-pointer items-center justify-center rounded-lg border border-agg-separator bg-agg-secondary text-agg-muted-foreground transition-colors hover:text-agg-foreground",
+          "aria-label": "Re-center orderbook",
+          children: /* @__PURE__ */ jsx6(Icon, { name: "recenter", size: "small", className: "!size-4 text-current" })
+        }
+      )
+    ] })
+  ] });
+};
+Orderbook.displayName = "Orderbook";
+
+// src/events/orderbook/orderbook-with-states.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+var stateMessageMinHeight = "min-h-[248px] px-5 py-10 md:min-h-[272px]";
+var OrderbookWithStates = (_a) => {
+  var _b = _a, {
+    state,
+    wrapperClassName
+  } = _b, orderbookProps = __objRest(_b, [
+    "state",
+    "wrapperClassName"
+  ]);
+  var _a2;
+  if (state.kind === "loading") {
+    return /* @__PURE__ */ jsx7("div", { className: cn("agg-orderbook flex flex-col gap-5", wrapperClassName), children: /* @__PURE__ */ jsx7(MarketDetailsOderbookSkeleton, {}) });
+  }
+  if (state.kind === "disabled") {
+    return /* @__PURE__ */ jsx7("div", { className: cn("agg-orderbook flex flex-col gap-5", wrapperClassName), children: /* @__PURE__ */ jsx7(
+      StateMessage,
+      {
+        title: state.title,
+        description: state.description,
+        icon: (_a2 = state.icon) != null ? _a2 : /* @__PURE__ */ jsx7(WarningIcon, {}),
+        classNames: { root: stateMessageMinHeight }
+      }
+    ) });
+  }
+  if (state.kind === "error") {
+    return /* @__PURE__ */ jsx7("div", { className: cn("agg-orderbook flex flex-col gap-5", wrapperClassName), children: /* @__PURE__ */ jsx7(
+      StateMessage,
+      {
+        title: state.title,
+        description: state.description,
+        icon: /* @__PURE__ */ jsx7(WarningIcon, {}),
+        onAction: state.onRetry,
+        classNames: { root: stateMessageMinHeight }
+      }
+    ) });
+  }
+  if (state.kind === "resolved") {
+    return /* @__PURE__ */ jsx7("div", { className: cn("agg-orderbook flex flex-col gap-5", wrapperClassName), children: /* @__PURE__ */ jsx7(
+      StateMessage,
+      {
+        title: state.title,
+        description: state.description,
+        icon: /* @__PURE__ */ jsx7(WarningIcon, {}),
+        classNames: { root: stateMessageMinHeight }
+      }
+    ) });
+  }
+  if (state.kind === "empty") {
+    return /* @__PURE__ */ jsx7("div", { className: cn("agg-orderbook flex flex-col gap-5", wrapperClassName), children: /* @__PURE__ */ jsx7(
+      StateMessage,
+      {
+        title: state.title,
+        description: state.description,
+        icon: /* @__PURE__ */ jsx7(SearchEmptyIcon, {}),
+        classNames: { root: stateMessageMinHeight }
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx7("div", { className: cn("agg-orderbook flex flex-col gap-5", wrapperClassName), children: /* @__PURE__ */ jsx7(Orderbook, __spreadValues({}, orderbookProps)) });
+};
+OrderbookWithStates.displayName = "OrderbookWithStates";
+
+// src/events/market-details/index.tsx
+import {
+  CHART_TIME_RANGES as CHART_TIME_RANGES2,
+  findLivePriceById,
+  MarketStatus,
+  optimizedImageUrl as optimizedImageUrl3,
+  resolveMarketTradingState,
+  timeRangeToInterval as timeRangeToInterval2,
+  useEventTradingContext as useEventTradingContext2,
+  useLabels as useLabels6,
+  useLiveOutcomePrices as useLiveOutcomePrices2,
+  useMarketChart as useMarketChart2,
+  useMarketOrderbook,
+  useMidpoints as useMidpoints2,
+  useSdkUiConfig as useSdkUiConfig3,
+  useVenueMarkets as useVenueMarkets2,
+  useViewportMidpoints
+} from "@agg-build/hooks";
+import { useEffect as useEffect5, useId as useId2, useMemo as useMemo5, useRef as useRef6, useState as useState5 } from "react";
+
+// src/events/market-details/market-details-outcome-button.tsx
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+var marketDetailsOutcomeButtonToneClasses = {
+  positive: {
+    activeSurface: "bg-agg-success/15",
+    border: "border-agg-success/50",
+    defaultSurface: "bg-agg-success/5",
+    hoverSurface: "hover:bg-agg-success/10",
+    pressedSurface: "active:bg-agg-success/15",
+    text: "text-agg-success!"
+  },
+  negative: {
+    activeSurface: "bg-agg-error/15",
+    border: "border-agg-error/50",
+    defaultSurface: "bg-agg-error/5",
+    hoverSurface: "hover:bg-agg-error/10",
+    pressedSurface: "active:bg-agg-error/15",
+    text: "text-agg-error!"
+  }
+};
+var getMarketDetailsOutcomeButtonClassNames = ({
+  enableAnimations,
+  isSelected,
+  tone
+}) => {
+  const toneClasses = marketDetailsOutcomeButtonToneClasses[tone];
+  return {
+    root: cn(
+      "w-[140px]",
+      "flex h-9 shrink-0 cursor-pointer select-none items-center justify-center gap-2 rounded-agg-full border px-5 py-1.5 text-left shadow-none",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-agg-primary focus-visible:ring-offset-0 focus-visible:ring-offset-agg-secondary",
+      "disabled:cursor-not-allowed disabled:opacity-60",
+      getMotionClassName(
+        enableAnimations,
+        "transition-[background-color,border-color,color] duration-200 ease-[cubic-bezier(0.22,1,0.36,1)]"
+      ),
+      isSelected ? cn(toneClasses.activeSurface, toneClasses.border) : cn("border-transparent", toneClasses.defaultSurface, toneClasses.hoverSurface),
+      toneClasses.pressedSurface
+    ),
+    text: cn(isSelected ? toneClasses.text : "text-agg-foreground")
+  };
+};
+var MarketDetailsOutcomeButton = ({
+  ariaControls,
+  enableAnimations,
+  isSelected,
+  item,
+  onSelect
+}) => {
+  const classNames = getMarketDetailsOutcomeButtonClassNames({
+    enableAnimations,
+    isSelected,
+    tone: item.tone
+  });
+  return /* @__PURE__ */ jsxs6(
+    "button",
+    {
+      type: "button",
+      role: "tab",
+      "data-id": item.id,
+      "aria-controls": ariaControls,
+      "aria-selected": isSelected,
+      tabIndex: isSelected ? 0 : -1,
+      className: cn(classNames.root, "flex-1 md:flex-auto", "gap-1!"),
+      onClick: () => onSelect(item.label),
+      children: [
+        /* @__PURE__ */ jsx8(VenueLogo, { venue: item.venue, size: "small" }),
+        /* @__PURE__ */ jsxs6("div", { className: "flex flex-row items-center gap-1 min-w-0", children: [
+          /* @__PURE__ */ jsx8(
+            Typography,
+            {
+              as: "span",
+              variant: isSelected ? "body-strong" : "body",
+              className: cn("whitespace-nowrap truncate", classNames.text),
+              children: item.label
+            }
+          ),
+          /* @__PURE__ */ jsx8(
+            Typography,
+            {
+              as: "span",
+              variant: isSelected ? "body-strong" : "body",
+              className: cn(classNames.text),
+              children: formatProbabilityCents(item.probability)
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+MarketDetailsOutcomeButton.displayName = "MarketDetailsOutcomeButton";
+
+// src/events/market-details/index.tsx
+import { Fragment, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+var MarketDetailsLoadingState = ({
+  isOpened = marketDetailsDefaultIsOpened,
+  ariaLabel,
+  classNames
+}) => {
+  const labels = useLabels6();
+  return /* @__PURE__ */ jsx9(
+    Skeleton,
+    {
+      view: isOpened ? "market-details-detailed" : "market-details-minified",
+      className: classNames == null ? void 0 : classNames.root,
+      ariaLabel: ariaLabel != null ? ariaLabel : labels.marketDetails.loading
+    }
+  );
+};
+var MarketDetailsUnavailableState = ({
+  ariaLabel,
+  classNames
+}) => {
+  const labels = useLabels6();
+  return /* @__PURE__ */ jsx9(
+    Card,
+    {
+      className: cn(
+        "group/agg-market-card agg-market-card-unavailable",
+        marketDetailsBaseCardClassName,
+        classNames == null ? void 0 : classNames.root
+      ),
+      role: "status",
+      "aria-label": ariaLabel != null ? ariaLabel : labels.marketDetails.unavailableAria,
+      children: /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-1 p-5", children: [
+        /* @__PURE__ */ jsx9(Typography, { variant: "body-large-strong", children: labels.marketDetails.unavailableTitle }),
+        /* @__PURE__ */ jsx9(Typography, { variant: "label", className: "text-agg-muted-foreground", children: labels.marketDetails.unavailableDescription })
+      ] })
+    }
+  );
+};
+var MarketDetailsNotFoundState = ({
+  ariaLabel: _ariaLabel,
+  classNames: _classNames
+}) => {
+  const labels = useLabels6();
+  return /* @__PURE__ */ jsx9(
+    StateMessage,
+    {
+      title: labels.marketDetails.notFoundTitle,
+      description: labels.marketDetails.notFoundDescription,
+      icon: /* @__PURE__ */ jsx9(SearchEmptyIcon, {}),
+      classNames: { root: "min-h-[280px] md:min-h-[320px]" }
+    }
+  );
+};
+var MarketDetailsContent = ({
+  venueMarkets,
+  marketId,
+  title,
+  image,
+  isOpened: controlledIsOpened = marketDetailsDefaultIsOpened,
+  onOpenChange,
+  defaultTab,
+  defaultOutcomeLabel,
+  orderBookDepth = orderBookRowLimitDefault,
+  ariaLabel,
+  classNames,
+  otherContent,
+  live,
+  midpointsFallback
+}) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+  const config = useSdkUiConfig3();
+  const {
+    features: { enableAnimations },
+    formatting: { formatPercent },
+    general: { theme }
+  } = config;
+  const isDarkTheme = theme === "dark";
+  const labels = useLabels6();
+  const tradingContext = useEventTradingContext2();
+  const detailsContentId = useId2();
+  const wsLivePrices = useLiveOutcomePrices2(venueMarkets);
+  const model = useMemo5(() => {
+    return buildMarketDetailsModel({
+      venueMarkets,
+      marketId,
+      title,
+      image,
+      formatCompactCurrency: config.formatting.formatCompactCurrency,
+      labels
+    });
+  }, [config.formatting.formatCompactCurrency, venueMarkets, image, labels, marketId, title]);
+  const resolvedMarket = useMemo5(() => {
+    return resolveMarketFromVenueMarkets(venueMarkets, marketId);
+  }, [venueMarkets, marketId]);
+  const clusterMidpointMarkets = useMemo5(() => {
+    if (!controlledIsOpened || !resolvedMarket) return [];
+    return resolvedMarket.venueMarkets;
+  }, [controlledIsOpened, resolvedMarket]);
+  const { prices: clusterMidpoints } = useMidpoints2(clusterMidpointMarkets);
+  const livePrices = useMemo5(() => {
+    const merged = /* @__PURE__ */ new Map();
+    if (midpointsFallback == null ? void 0 : midpointsFallback.size) {
+      for (const [outcomeId, price] of midpointsFallback) {
+        merged.set(outcomeId, price);
+      }
+    }
+    if (clusterMidpoints.size) {
+      for (const [outcomeId, price] of clusterMidpoints) {
+        merged.set(outcomeId, price);
+      }
+    }
+    for (const [k, v] of wsLivePrices) merged.set(k, v);
+    return merged;
+  }, [clusterMidpoints, midpointsFallback, wsLivePrices]);
+  const scopedMarketForCard = useMemo5(() => {
+    var _a2;
+    if (!model) return null;
+    return (_a2 = model.market.venueMarkets.find((venueMarket) => venueMarket.id === model.market.id)) != null ? _a2 : model.primaryVenueMarket;
+  }, [model]);
+  const marketTradingState = useMemo5(() => {
+    return resolveMarketTradingState(scopedMarketForCard);
+  }, [scopedMarketForCard]);
+  const isResolvedMarket = marketTradingState.kind === "resolved";
+  const isOutcomeSelectionLocked = marketTradingState.isTradingDisabled;
+  const isUpcomingMarket = marketTradingState.kind === "unopened";
+  const marketStatePresentation = resolveTradingStatePresentation(labels, marketTradingState);
+  const marketDetailsTabs = useMemo5(() => {
+    return getMarketDetailsTabs(labels);
+  }, [labels]);
+  const [selectedTab, setSelectedTab] = useState5(
+    () => resolveInitialTab(defaultTab)
+  );
+  const [isOpened, setIsOpened] = useState5(controlledIsOpened);
+  useEffect5(() => {
+    setSelectedTab(resolveInitialTab(defaultTab));
+  }, [defaultTab]);
+  useEffect5(() => {
+    setIsOpened(controlledIsOpened);
+  }, [controlledIsOpened]);
+  const selectedTimeRange = config.chart.selectedChartTimeRange;
+  const setSelectedTimeRange = config.chart.setSelectedChartTimeRange;
+  const effectiveSelectedTab = isResolvedMarket ? "graph" : selectedTab;
+  const effectiveChartTimeRange = isResolvedMarket ? "ALL" : selectedTimeRange;
+  const [selectedChartType, setSelectedChartType] = useState5("line");
+  const scopedSelectedOutcome = (_a = tradingContext == null ? void 0 : tradingContext.selectedOutcome) != null ? _a : null;
+  const selectedOutcomeId = (_b = scopedSelectedOutcome == null ? void 0 : scopedSelectedOutcome.id) != null ? _b : null;
+  const selectedOutcomeLabel = (_c = scopedSelectedOutcome == null ? void 0 : scopedSelectedOutcome.label) != null ? _c : null;
+  const selectOutcome = tradingContext == null ? void 0 : tradingContext.selectOutcome;
+  const [selectedGraphVenue, setSelectedGraphVenue] = useState5(null);
+  const [chartOutcomeLabel, setChartOutcomeLabel] = useState5(selectedOutcomeLabel);
+  useEffect5(() => {
+    if (!isOpened) return;
+    if (selectedOutcomeLabel) {
+      setChartOutcomeLabel(selectedOutcomeLabel);
+    }
+  }, [isOpened]);
+  useEffect5(() => {
+    var _a2;
+    if (!isOpened || !model) return;
+    if (isOutcomeSelectionLocked) return;
+    if (selectedOutcomeId) return;
+    const initialLabel = resolveInitialOutcomeLabel(model.outcomeLabels, defaultOutcomeLabel);
+    if (!initialLabel) return;
+    const outcomes = resolveOutcomesByVenue(model.market.venueMarkets, initialLabel);
+    const firstOutcomeId = (_a2 = outcomes[0]) == null ? void 0 : _a2.outcome.id;
+    if (firstOutcomeId) {
+      selectOutcome == null ? void 0 : selectOutcome(firstOutcomeId);
+    }
+  }, [
+    defaultOutcomeLabel,
+    isOpened,
+    isOutcomeSelectionLocked,
+    model,
+    selectedOutcomeId,
+    selectOutcome
+  ]);
+  const headerOutcomeItems = useMemo5(() => {
+    if (!model) return [];
+    const items = resolveHeaderOutcomeItems(model.market.venueMarkets);
+    return items.map((item) => {
+      const livePrice = findLivePriceById(livePrices, item.id);
+      return livePrice != null ? __spreadProps(__spreadValues({}, item), { probability: livePrice }) : item;
+    });
+  }, [model, livePrices]);
+  const headlineProbability = useMemo5(() => {
+    var _a2, _b2;
+    if (!model || !scopedMarketForCard) return void 0;
+    const resolveLiveProbability = (outcomeId, fallbackPrice) => {
+      const liveProbability = findLivePriceById(livePrices, outcomeId);
+      return liveProbability != null ? liveProbability : fallbackPrice;
+    };
+    const yesOutcome = resolveYesOutcome(scopedMarketForCard);
+    const displayOutcome = yesOutcome != null ? yesOutcome : (_b2 = scopedMarketForCard.venueMarketOutcomes) == null ? void 0 : _b2.reduce(
+      (acc, outcome) => outcome.price > acc.price ? outcome : acc,
+      (_a2 = scopedMarketForCard.venueMarketOutcomes) == null ? void 0 : _a2[0]
+    );
+    return resolveLiveProbability(displayOutcome.id, displayOutcome.price);
+  }, [model, scopedMarketForCard, livePrices]);
+  const selectedOutcomesByVenue = useMemo5(() => {
+    if (!model) return [];
+    return collectEligibleVenueOutcomes({
+      venueMarkets: model.market.venueMarkets,
+      selectedOutcomeLabel
+    });
+  }, [model, selectedOutcomeLabel]);
+  const resolvedChartOutcomeLabel = chartOutcomeLabel != null ? chartOutcomeLabel : selectedOutcomeLabel;
+  const chartOutcomesByVenue = useMemo5(() => {
+    if (!model) return [];
+    return resolveChartVenueOutcomes({
+      eligibleVenueOutcomes: collectEligibleVenueOutcomes({
+        venueMarkets: model.market.venueMarkets,
+        selectedOutcomeLabel: resolvedChartOutcomeLabel
+      }),
+      livePrices
+    });
+  }, [livePrices, model, resolvedChartOutcomeLabel]);
+  const chartEnabled = isOpened && effectiveSelectedTab === "graph";
+  const orderBookEnabled = isOpened && effectiveSelectedTab === "order-book" && !marketTradingState.isTradingDisabled;
+  const timeWindow = useMemo5(() => {
+    return getTimeWindowByRange(effectiveChartTimeRange);
+  }, [effectiveChartTimeRange]);
+  const primaryVenueMarketId = (_e = (_d = selectedOutcomesByVenue[0]) == null ? void 0 : _d.market.id) != null ? _e : null;
+  const primaryOutcomeId = (_g = (_f = selectedOutcomesByVenue[0]) == null ? void 0 : _f.outcome.id) != null ? _g : null;
+  const chartPrimaryOutcomeId = (_i = (_h = chartOutcomesByVenue[0]) == null ? void 0 : _h.outcome.id) != null ? _i : null;
+  const chartVenueOutcomeIds = useMemo5(() => {
+    return chartOutcomesByVenue.map((item) => item.outcome.id);
+  }, [chartOutcomesByVenue]);
+  const {
+    data: marketChartData,
+    isLoading: isMarketChartLoading,
+    error: marketChartError,
+    refetch: refetchMarketChart
+  } = useMarketChart2({
+    marketId: chartPrimaryOutcomeId,
+    venueMarketIds: chartVenueOutcomeIds,
+    interval: timeRangeToInterval2(effectiveChartTimeRange),
+    startTs: timeWindow.startTs * 1e3,
+    endTs: timeWindow.endTs * 1e3,
+    enabled: chartEnabled && !!chartPrimaryOutcomeId,
+    live
+  });
+  const marketOrderbookResult = useMarketOrderbook({
+    marketId: primaryVenueMarketId,
+    enabled: orderBookEnabled && !!primaryVenueMarketId,
+    venueOutcomes: selectedOutcomesByVenue.map((item) => ({
+      venue: item.venue,
+      venueMarketOutcomeId: item.outcomeId
+    })),
+    live
+  });
+  const marketOrderbookDataById = useMemo5(() => {
+    var _a2;
+    return (_a2 = marketOrderbookResult.dataById) != null ? _a2 : {};
+  }, [marketOrderbookResult]);
+  const isOrderBookLoading = marketOrderbookResult.isLoading;
+  const orderBookError = marketOrderbookResult.error;
+  const refetchOrderBook = marketOrderbookResult.refetch;
+  const aggregatedOrderbookRows = useMemo5(() => {
+    return mergeVenueOutcomeOrderbooks({
+      eligibleOutcomes: selectedOutcomesByVenue,
+      orderbooksByOutcomeId: marketOrderbookDataById
+    });
+  }, [marketOrderbookDataById, selectedOutcomesByVenue]);
+  const askRows = aggregatedOrderbookRows.askRows;
+  const bidRows = aggregatedOrderbookRows.bidRows;
+  const unifiedEntries = useMemo5(() => {
+    return resolveUnifiedOrderBookEntries({
+      askRows,
+      bidRows,
+      midPrice: aggregatedOrderbookRows.midpoint,
+      spread: aggregatedOrderbookRows.spread
+    });
+  }, [aggregatedOrderbookRows.midpoint, aggregatedOrderbookRows.spread, askRows, bidRows]);
+  const orderbookSnapshotKey = useMemo5(() => {
+    if (selectedOutcomesByVenue.length === 0) return null;
+    return selectedOutcomesByVenue.map((item) => {
+      var _a2, _b2;
+      const snapshotVersion = (_b2 = (_a2 = marketOrderbookDataById[item.outcomeId]) == null ? void 0 : _a2.snapshotVersion) != null ? _b2 : 0;
+      return `${item.outcomeId}:${snapshotVersion}`;
+    }).join("|");
+  }, [marketOrderbookDataById, selectedOutcomesByVenue]);
+  const chartAvailableOutcomesByVenue = useMemo5(() => {
+    return filterChartVenueOutcomesByRenderableVenues({
+      chartData: marketChartData,
+      venueOutcomes: chartOutcomesByVenue
+    });
+  }, [chartOutcomesByVenue, marketChartData]);
+  const graphSeries = useMemo5(() => {
+    var _a2, _b2, _c2, _d2;
+    const baseColor = resolveSeriesColor(
+      (_d2 = (_c2 = selectedGraphVenue != null ? selectedGraphVenue : (_a2 = chartAvailableOutcomesByVenue[0]) == null ? void 0 : _a2.venue) != null ? _c2 : (_b2 = chartOutcomesByVenue[0]) == null ? void 0 : _b2.venue) != null ? _d2 : "polymarket",
+      0,
+      isDarkTheme
+    );
+    return resolveMarketChartDisplaySeries({
+      chartData: marketChartData,
+      selectedVenue: selectedGraphVenue,
+      transformProbability: (value) => value
+    }).map((seriesItem) => {
+      return {
+        id: `${resolvedChartOutcomeLabel != null ? resolvedChartOutcomeLabel : "graph"}-${seriesItem.venue}-${chartPrimaryOutcomeId != null ? chartPrimaryOutcomeId : "chart"}`,
+        venue: selectedGraphVenue != null ? selectedGraphVenue : seriesItem.venue,
+        color: seriesItem.venue === "aggregate" ? baseColor : resolveSeriesColor(seriesItem.venue, 0, isDarkTheme),
+        points: seriesItem.points
+      };
+    });
+  }, [
+    isDarkTheme,
+    chartPrimaryOutcomeId,
+    marketChartData,
+    selectedGraphVenue,
+    resolvedChartOutcomeLabel,
+    chartAvailableOutcomesByVenue,
+    chartOutcomesByVenue
+  ]);
+  const graphLiveState = useMemo5(() => {
+    return resolveMarketChartLiveState({
+      chartData: marketChartData,
+      selectedVenue: selectedGraphVenue,
+      transformProbability: (value) => value
+    });
+  }, [marketChartData, selectedGraphVenue]);
+  const otherRows = useMemo5(() => {
+    if (!model) return [];
+    return resolveOtherTabRows(model.market, labels);
+  }, [labels, model]);
+  const isOrderBookNotFound = orderBookError && typeof orderBookError === "object" && "status" in orderBookError && orderBookError.status === 404;
+  const isMarketResolved = isOrderBookNotFound && "code" in orderBookError && (orderBookError.code === "market_resolved" || orderBookError.code === "market_closed");
+  const hasOrderBookError = !!orderBookError && !isOrderBookNotFound;
+  const isSnapshotUnavailableError = typeof orderBookError === "object" && orderBookError != null && "message" in orderBookError && typeof orderBookError.message === "string" && /^snapshot unavailable for\s+\S+/i.test(orderBookError.message);
+  const orderBookErrorDescription = isSnapshotUnavailableError ? labels.marketDetails.orderBookUnavailableDescription : typeof orderBookError === "object" && orderBookError != null && "message" in orderBookError && typeof orderBookError.message === "string" && orderBookError.message.trim().length > 0 ? orderBookError.message : labels.marketDetails.orderBookUnavailableDescription;
+  const hasNoOrderBook = isOrderBookNotFound && !isMarketResolved || !isOrderBookLoading && !hasOrderBookError && (selectedOutcomesByVenue.length === 0 || aggregatedOrderbookRows.hasNoOrderBook);
+  const hasChartError = !!marketChartError;
+  const selectHeaderOutcome = (item) => {
+    if (isOutcomeSelectionLocked) return;
+    if (item == null ? void 0 : item.id) {
+      tradingContext == null ? void 0 : tradingContext.selectOutcome(item.id);
+    }
+  };
+  const handleOutcomeKeyDown = (eventToHandle) => {
+    if (isOutcomeSelectionLocked) return;
+    if ((eventToHandle == null ? void 0 : eventToHandle.key) !== "ArrowLeft" && (eventToHandle == null ? void 0 : eventToHandle.key) !== "ArrowRight" && (eventToHandle == null ? void 0 : eventToHandle.key) !== "Home" && (eventToHandle == null ? void 0 : eventToHandle.key) !== "End") {
+      return;
+    }
+    if (headerOutcomeItems.length <= 1) return;
+    eventToHandle.preventDefault();
+    const activeIndex = headerOutcomeItems.findIndex((item) => {
+      return item.label === selectedOutcomeLabel;
+    });
+    if (eventToHandle.key === "Home") {
+      selectHeaderOutcome(headerOutcomeItems[0]);
+      return;
+    }
+    if (eventToHandle.key === "End") {
+      selectHeaderOutcome(headerOutcomeItems[headerOutcomeItems.length - 1]);
+      return;
+    }
+    const direction = eventToHandle.key === "ArrowRight" ? 1 : -1;
+    const nextIndex = activeIndex < 0 ? 0 : (activeIndex + direction + headerOutcomeItems.length) % headerOutcomeItems.length;
+    selectHeaderOutcome(headerOutcomeItems[nextIndex]);
+  };
+  const handleToggleExpanded = () => {
+    if (!marketId) return;
+    onOpenChange == null ? void 0 : onOpenChange(marketId);
+  };
+  const handleGraphVenueToggle = (venue) => {
+    setSelectedGraphVenue((currentVenue) => {
+      if (currentVenue === venue) return null;
+      return venue;
+    });
+  };
+  const handleRetryOrderBook = () => {
+    void refetchOrderBook();
+  };
+  const handleRetryMarketChart = () => {
+    void refetchMarketChart();
+  };
+  const orderbookState = marketTradingState.isTradingDisabled ? {
+    kind: "disabled",
+    title: marketStatePresentation.title,
+    description: marketStatePresentation.description,
+    icon: /* @__PURE__ */ jsx9(Icon, { name: marketStatePresentation.iconName, className: "h-5 w-5", "aria-hidden": "true" })
+  } : isOrderBookLoading ? { kind: "loading" } : hasOrderBookError ? {
+    kind: "error",
+    title: labels.marketDetails.orderBookUnavailableTitle,
+    description: orderBookErrorDescription,
+    onRetry: handleRetryOrderBook
+  } : isMarketResolved ? {
+    kind: "resolved",
+    title: labels.marketDetails.orderBookResolvedTitle,
+    description: labels.marketDetails.orderBookResolvedDescription
+  } : hasNoOrderBook ? {
+    kind: "empty",
+    title: labels.marketDetails.orderBookEmptyTitle,
+    description: labels.marketDetails.orderBookEmptyDescription
+  } : { kind: "data" };
+  useEffect5(() => {
+    if (!selectedGraphVenue) {
+      return;
+    }
+    if (chartAvailableOutcomesByVenue.some((item) => item.venue === selectedGraphVenue)) {
+      return;
+    }
+    setSelectedGraphVenue(null);
+  }, [selectedGraphVenue, chartAvailableOutcomesByVenue]);
+  if (marketId && !resolvedMarket) {
+    return /* @__PURE__ */ jsx9(MarketDetailsNotFoundState, { ariaLabel, classNames });
+  }
+  if (!model) {
+    return /* @__PURE__ */ jsx9(MarketDetailsUnavailableState, { ariaLabel, classNames });
+  }
+  return /* @__PURE__ */ jsxs7(
+    Card,
+    {
+      className: cn(
+        "group/agg-market-card",
+        "w-full rounded-agg-2xl text-left outline-none",
+        marketTradingState.isTradingDisabled && "agg-market-card-readonly",
+        marketDetailsBaseCardClassName,
+        classNames == null ? void 0 : classNames.root
+      ),
+      children: [
+        /* @__PURE__ */ jsxs7(
+          "div",
+          {
+            className: cn(
+              "agg-market-card-header",
+              "cursor-pointer",
+              "flex flex-col items-stretch gap-3 px-5 py-3 md:flex-row md:flex-nowrap md:items-center md:justify-between",
+              isOpened && "pb-3",
+              classNames == null ? void 0 : classNames.header
+            ),
+            onClick: handleToggleExpanded,
+            children: [
+              /* @__PURE__ */ jsxs7(
+                "button",
+                {
+                  type: "button",
+                  className: cn(
+                    "agg-market-card-summary",
+                    "flex min-w-0 w-full items-center justify-between gap-4 text-left md:flex-1",
+                    "cursor-pointer rounded-agg-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-agg-primary focus-visible:ring-offset-0 focus-visible:ring-offset-agg-secondary"
+                  ),
+                  "aria-expanded": isOpened,
+                  "aria-controls": detailsContentId,
+                  "aria-label": isOpened ? labels.marketDetails.toggleCloseDetailsAria(model.title) : labels.marketDetails.toggleOpenDetailsAria(model.title),
+                  onClick: handleToggleExpanded,
+                  children: [
+                    /* @__PURE__ */ jsxs7("div", { className: "agg-market-summary flex min-w-24 flex-1 items-center gap-3 md:gap-4", children: [
+                      /* @__PURE__ */ jsx9(
+                        RemoteImage,
+                        {
+                          src: optimizedImageUrl3(model.image, 60),
+                          alt: "",
+                          className: "agg-market-image size-12 rounded-agg-lg object-cover md:size-[60px]"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs7("div", { className: "flex min-w-24 flex-col", children: [
+                        /* @__PURE__ */ jsx9(Tooltip, { content: model.title, side: "top", children: /* @__PURE__ */ jsx9("div", { className: "min-w-0", children: /* @__PURE__ */ jsx9(
+                          Typography,
+                          {
+                            as: "h3",
+                            variant: "body-large-strong",
+                            className: "agg-market-title line-clamp-2",
+                            children: model.title
+                          }
+                        ) }) }),
+                        /* @__PURE__ */ jsx9("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ jsx9(
+                          Typography,
+                          {
+                            variant: "label",
+                            className: "agg-market-meta truncate text-agg-muted-foreground",
+                            children: model.subtitle
+                          }
+                        ) }),
+                        marketTradingState.isTradingDisabled && marketTradingState.kind !== "resolved" && !isUpcomingMarket ? /* @__PURE__ */ jsxs7("div", { className: "mt-2 flex flex-wrap items-center gap-2", children: [
+                          /* @__PURE__ */ jsxs7(
+                            "span",
+                            {
+                              className: cn(
+                                "inline-flex items-center gap-2 rounded-agg-full border px-3 py-1 text-agg-xs font-agg-bold uppercase tracking-[0.08em]",
+                                resolveTradingStateBadgeClassName(marketTradingState.kind)
+                              ),
+                              children: [
+                                /* @__PURE__ */ jsx9(
+                                  Icon,
+                                  {
+                                    name: marketStatePresentation.iconName,
+                                    size: "small",
+                                    className: "h-3.5 w-3.5"
+                                  }
+                                ),
+                                /* @__PURE__ */ jsx9("span", { children: marketStatePresentation.badgeLabel })
+                              ]
+                            }
+                          ),
+                          marketStatePresentation.timestampLabel ? /* @__PURE__ */ jsx9(Typography, { variant: "label", className: "text-agg-muted-foreground", children: marketStatePresentation.timestampLabel }) : null,
+                          marketStatePresentation.winningOutcomeLabel ? /* @__PURE__ */ jsx9(Typography, { variant: "label", className: "text-agg-muted-foreground", children: marketStatePresentation.winningOutcomeLabel }) : null
+                        ] }) : null
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsx9(Typography, { as: "div", variant: "heading", className: "agg-market-headline shrink-0", children: formatProbabilityPercent(headlineProbability, formatPercent) })
+                  ]
+                }
+              ),
+              marketTradingState.kind === "resolved" && marketTradingState.winningOutcome ? /* @__PURE__ */ jsx9(
+                "div",
+                {
+                  className: "agg-outcomes flex w-full items-center justify-end md:w-auto md:shrink-0",
+                  onClick: (e) => e.stopPropagation(),
+                  children: /* @__PURE__ */ jsxs7(
+                    "span",
+                    {
+                      className: cn(
+                        "min-w-35 inline-flex h-9 items-center justify-center gap-2 rounded-agg-full",
+                        "border px-5 py-1.5 text-agg-sm font-agg-bold",
+                        getMotionClassName(
+                          enableAnimations,
+                          "transition-[background-color,border-color,color] duration-200 ease-[cubic-bezier(0.22,1,0.36,1)]"
+                        ),
+                        "border-transparent bg-agg-secondary-hover"
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsx9(
+                          Icon,
+                          {
+                            name: marketTradingState.winningOutcome.label.trim().toLowerCase() === "yes" ? "check-circle" : "cross-circle",
+                            size: "small",
+                            className: cn(
+                              "h-4 w-4",
+                              marketTradingState.winningOutcome.label.trim().toLowerCase() === "yes" ? "text-agg-success" : "text-agg-error"
+                            )
+                          }
+                        ),
+                        /* @__PURE__ */ jsx9(Typography, { variant: "body", children: labels.eventMarketPage.resolvedOutcome(marketTradingState.winningOutcome.label) })
+                      ]
+                    }
+                  )
+                }
+              ) : isUpcomingMarket ? /* @__PURE__ */ jsx9(
+                "div",
+                {
+                  className: "agg-outcomes flex w-full items-center justify-end md:w-auto md:shrink-0",
+                  onClick: (e) => e.stopPropagation(),
+                  children: /* @__PURE__ */ jsxs7(
+                    "span",
+                    {
+                      className: cn(
+                        "min-w-35 inline-flex h-9 items-center justify-center gap-2 rounded-agg-full",
+                        "border px-5 py-1.5 text-agg-xs font-agg-bold uppercase tracking-[0.08em]",
+                        resolveTradingStateBadgeClassName(marketTradingState.kind)
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsx9(
+                          Icon,
+                          {
+                            name: marketStatePresentation.iconName,
+                            size: "small",
+                            className: "h-3.5 w-3.5",
+                            "aria-hidden": "true"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx9("span", { children: marketStatePresentation.badgeLabel })
+                      ]
+                    }
+                  )
+                }
+              ) : /* @__PURE__ */ jsx9(
+                "div",
+                {
+                  className: "agg-outcomes flex w-full flex-wrap gap-2 md:w-auto md:shrink-0 md:flex-nowrap",
+                  role: "tablist",
+                  "aria-label": labels.marketDetails.marketOutcomesAria,
+                  onClick: (e) => e.stopPropagation(),
+                  onKeyDown: (eventToHandle) => handleOutcomeKeyDown(eventToHandle),
+                  children: headerOutcomeItems.map((item) => {
+                    const isActiveOutcome = item.id === selectedOutcomeId;
+                    return /* @__PURE__ */ jsx9(
+                      MarketDetailsOutcomeButton,
+                      {
+                        item,
+                        isSelected: isActiveOutcome,
+                        enableAnimations: config.features.enableAnimations,
+                        ariaControls: detailsContentId,
+                        onSelect: (label) => {
+                          if (isOutcomeSelectionLocked) return;
+                          const selectedOutcomeItem = headerOutcomeItems.find(
+                            (headerOutcomeItem) => headerOutcomeItem.label === label
+                          );
+                          selectHeaderOutcome(selectedOutcomeItem);
+                        }
+                      },
+                      item.label
+                    );
+                  })
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx9(
+          "div",
+          {
+            id: detailsContentId,
+            className: cn(
+              "grid overflow-hidden",
+              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__ */ jsxs7("div", { className: "min-h-0", children: [
+              /* @__PURE__ */ jsx9("div", { className: "h-px w-full bg-agg-separator" }),
+              /* @__PURE__ */ jsxs7(
+                "div",
+                {
+                  className: cn(
+                    getMotionClassName(
+                      config.features.enableAnimations,
+                      "transition-all duration-500 ease-in-out"
+                    ),
+                    isOpened ? cn(
+                      "translate-y-0 opacity-100",
+                      getMotionClassName(config.features.enableAnimations, "delay-100")
+                    ) : "translate-y-5 opacity-0"
+                  ),
+                  children: [
+                    !isResolvedMarket ? /* @__PURE__ */ jsxs7(Fragment, { children: [
+                      /* @__PURE__ */ jsx9("div", { className: cn("block", classNames == null ? void 0 : classNames.tabs), children: /* @__PURE__ */ jsx9(
+                        Tabs,
+                        {
+                          ariaLabel: labels.marketDetails.tabsAria,
+                          items: marketDetailsTabs,
+                          value: selectedTab === "other" ? "order-book" : selectedTab,
+                          onChange: (nextValue) => setSelectedTab(nextValue),
+                          variant: "underline",
+                          className: "agg-market-tabs w-full px-5"
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsx9("div", { className: "h-px w-full bg-agg-separator" })
+                    ] }) : null,
+                    /* @__PURE__ */ jsxs7("div", { className: cn("agg-market-card-body p-0", classNames == null ? void 0 : classNames.content), children: [
+                      effectiveSelectedTab === "order-book" ? /* @__PURE__ */ jsx9(
+                        OrderbookWithStates,
+                        {
+                          state: orderbookState,
+                          entries: unifiedEntries,
+                          formatNumber: config.formatting.formatNumber,
+                          formatCurrency: config.formatting.formatCurrency,
+                          visibleRows: orderBookDepth,
+                          enableAnimations: config.features.enableAnimations,
+                          marketId: primaryOutcomeId,
+                          snapshotKey: orderbookSnapshotKey,
+                          outcomeId: primaryOutcomeId,
+                          labels: {
+                            midPrice: labels.marketDetails.midPrice,
+                            spread: labels.marketDetails.spread,
+                            tradeOutcome: `${labels.marketDetails.tradePrefix} ${selectedOutcomeLabel != null ? selectedOutcomeLabel : ""}`.trim(),
+                            price: labels.marketDetails.priceColumn,
+                            shares: labels.marketDetails.sharesColumn,
+                            total: labels.marketDetails.totalColumn,
+                            asks: labels.marketDetails.asks,
+                            bids: labels.marketDetails.bids,
+                            lastOutcome: selectedOutcomeLabel != null ? selectedOutcomeLabel : void 0
+                          },
+                          wrapperClassName: classNames == null ? void 0 : classNames.orderBook
+                        }
+                      ) : null,
+                      effectiveSelectedTab === "graph" ? /* @__PURE__ */ jsxs7("div", { className: cn("agg-price-chart flex flex-col gap-5 p-5", classNames == null ? void 0 : classNames.graph), children: [
+                        hasChartError ? /* @__PURE__ */ jsx9(
+                          StateMessage,
+                          {
+                            title: labels.marketDetails.chartUnavailableTitle,
+                            description: labels.marketDetails.chartUnavailableDescription,
+                            icon: /* @__PURE__ */ jsx9(WarningIcon, {}),
+                            onAction: handleRetryMarketChart,
+                            classNames: { root: "min-h-[248px] px-5 py-10 md:min-h-[272px]" }
+                          }
+                        ) : /* @__PURE__ */ jsx9(
+                          LineChart,
+                          {
+                            series: graphSeries,
+                            height: 260,
+                            isLoading: isMarketChartLoading,
+                            chartType: selectedChartType,
+                            liveCandle: selectedChartType === "candlestick" ? (_j = graphLiveState.liveCandle) != null ? _j : void 0 : void 0,
+                            lineValue: graphLiveState.lineValue,
+                            classNames: { root: "agg-chart-region w-full" },
+                            showSeriesControls: chartAvailableOutcomesByVenue.length > 0 || headerOutcomeItems.length > 0,
+                            renderSeriesControls: () => {
+                              var _a2, _b2, _c2, _d2;
+                              return /* @__PURE__ */ jsxs7("div", { className: "agg-chart-toolbar w-full flex flex-col gap-4 md:flex-row md:items-center md:justify-between", children: [
+                                /* @__PURE__ */ jsx9("div", { className: "agg-market-venues flex flex-wrap gap-2", children: chartAvailableOutcomesByVenue.map((item) => {
+                                  var _a3;
+                                  const probability = formatProbabilityPercent(
+                                    (_a3 = livePrices.get(item.outcome.id)) != null ? _a3 : item.outcome.price,
+                                    formatPercent
+                                  );
+                                  const isActiveVenue = selectedGraphVenue === item.venue;
+                                  return /* @__PURE__ */ jsxs7(
+                                    "button",
+                                    {
+                                      type: "button",
+                                      "aria-label": `${item.venue} ${probability}`,
+                                      "aria-pressed": isActiveVenue,
+                                      className: cn(
+                                        "agg-market-venue",
+                                        "cursor-pointer",
+                                        "inline-flex items-center gap-2 rounded-agg-full border px-4 py-2",
+                                        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-agg-primary focus-visible:ring-offset-0 focus-visible:ring-offset-agg-secondary-hover",
+                                        isActiveVenue ? "border-agg-primary bg-agg-secondary" : "border-transparent bg-agg-secondary-hover"
+                                      ),
+                                      onClick: (e) => {
+                                        e.preventDefault();
+                                        e.stopPropagation();
+                                        handleGraphVenueToggle(item.venue);
+                                      },
+                                      children: [
+                                        /* @__PURE__ */ jsx9(VenueLogo, { venue: item.venue, size: "small" }),
+                                        /* @__PURE__ */ jsx9("span", { className: "text-agg-base leading-agg-6 text-agg-foreground", children: probability })
+                                      ]
+                                    },
+                                    `${item.market.id}-${item.outcome.id}`
+                                  );
+                                }) }),
+                                !isOutcomeSelectionLocked ? /* @__PURE__ */ jsx9(
+                                  SwitchButton,
+                                  {
+                                    ariaLabel: labels.marketDetails.outcomeSelectorAria,
+                                    className: "agg-outcome-switch w-full shrink-0 md:w-fit",
+                                    value: (_d2 = (_c2 = (_a2 = headerOutcomeItems.find(
+                                      (outcome) => outcome.label === resolvedChartOutcomeLabel
+                                    )) == null ? void 0 : _a2.id) != null ? _c2 : (_b2 = headerOutcomeItems[0]) == null ? void 0 : _b2.id) != null ? _d2 : "",
+                                    onValueChange: (outcomeId) => {
+                                      const outcome = headerOutcomeItems.find(
+                                        (headerOutcomeItem) => headerOutcomeItem.id === outcomeId
+                                      );
+                                      if (!outcome) return;
+                                      setChartOutcomeLabel(outcome.label);
+                                    },
+                                    options: headerOutcomeItems.map((outcome) => {
+                                      var _a3;
+                                      const price = (_a3 = livePrices.get(outcome.id)) != null ? _a3 : outcome.probability;
+                                      const outcomeLabel = `${outcome.label} ${formatProbabilityCents(price)}`;
+                                      return {
+                                        value: outcome.id,
+                                        label: outcomeLabel,
+                                        ariaLabel: outcomeLabel
+                                      };
+                                    })
+                                  }
+                                ) : null
+                              ] });
+                            }
+                          }
+                        ),
+                        /* @__PURE__ */ jsxs7(
+                          "div",
+                          {
+                            className: cn(
+                              "agg-chart-footer",
+                              "flex flex-row justify-between gap-2 text-agg-sm leading-agg-5 text-agg-muted-foreground md:flex-row md:items-center md:justify-between",
+                              classNames == null ? void 0 : classNames.footer
+                            ),
+                            children: [
+                              /* @__PURE__ */ jsx9("span", { children: typeof model.market.volume !== "number" ? labels.marketDetails.volumeUnavailable : model.market.volume > 0 ? `${config.formatting.formatCompactCurrency(model.market.volume)} ${labels.marketDetails.meta.volumeSuffix}` : "" }),
+                              /* @__PURE__ */ jsxs7("div", { className: "flex flex-wrap items-center gap-3 md:gap-4", children: [
+                                /* @__PURE__ */ jsx9(
+                                  ChartTypeSwitch,
+                                  {
+                                    className: "agg-chart-type-switch shrink-0",
+                                    value: selectedChartType,
+                                    onValueChange: setSelectedChartType
+                                  }
+                                ),
+                                /* @__PURE__ */ jsx9(
+                                  "span",
+                                  {
+                                    "aria-hidden": "true",
+                                    className: "hidden h-4 w-px bg-agg-separator md:block"
+                                  }
+                                ),
+                                CHART_TIME_RANGES2.map((timeRange) => {
+                                  const isActive = effectiveChartTimeRange === timeRange;
+                                  const isDisabled = isResolvedMarket && timeRange !== "ALL";
+                                  return /* @__PURE__ */ jsx9(
+                                    "button",
+                                    {
+                                      type: "button",
+                                      disabled: isDisabled,
+                                      className: cn(
+                                        "agg-chart-time-range-trigger",
+                                        "cursor-pointer text-agg-sm leading-agg-5",
+                                        isDisabled && "cursor-not-allowed opacity-50",
+                                        isActive ? "font-agg-bold text-agg-foreground" : "font-agg-normal text-agg-muted-foreground"
+                                      ),
+                                      "aria-pressed": isActive,
+                                      "aria-disabled": isDisabled,
+                                      onClick: (e) => {
+                                        e.preventDefault();
+                                        e.stopPropagation();
+                                        if (isDisabled) return;
+                                        setSelectedTimeRange(timeRange);
+                                      },
+                                      children: timeRange === "ALL" ? labels.eventItemDetails.allTimeRange : timeRange
+                                    },
+                                    timeRange
+                                  );
+                                })
+                              ] })
+                            ]
+                          }
+                        )
+                      ] }) : null,
+                      effectiveSelectedTab === "other" ? /* @__PURE__ */ jsx9("div", { className: "agg-market-meta flex flex-col gap-4", children: otherContent != null ? otherContent : /* @__PURE__ */ jsx9("div", { className: "agg-market-meta-list grid grid-cols-1 gap-3", children: otherRows.map((row) => /* @__PURE__ */ jsxs7(
+                        "div",
+                        {
+                          className: "agg-market-meta-row flex items-center justify-between rounded-agg-xl bg-agg-secondary-hover px-4 py-3",
+                          children: [
+                            /* @__PURE__ */ jsx9(Typography, { variant: "label", className: "text-agg-muted-foreground", children: row.label }),
+                            /* @__PURE__ */ jsx9(Typography, { variant: "body", className: "text-right", children: row.value })
+                          ]
+                        },
+                        row.label
+                      )) }) }) : null
+                    ] })
+                  ]
+                }
+              )
+            ] })
+          }
+        )
+      ]
+    }
+  );
+};
+var MarketDetails = (_a) => {
+  var _b = _a, { isOpened } = _b, props = __objRest(_b, ["isOpened"]);
+  if (props.isLoading) {
+    return /* @__PURE__ */ jsx9(MarketDetailsLoadingState, { isOpened, classNames: props.classNames });
+  }
+  if ("venueMarkets" in props && props.venueMarkets) {
+    return /* @__PURE__ */ jsx9(
+      MarketDetailsContent,
+      __spreadProps(__spreadValues({}, props), {
+        isOpened,
+        onOpenChange: props.onOpenChange,
+        venueMarkets: props.venueMarkets,
+        midpointsFallback: props.midpointsFallback
+      })
+    );
+  }
+  const { classNames: fallbackClassNames } = props;
+  return /* @__PURE__ */ jsx9(MarketDetailsUnavailableState, { classNames: fallbackClassNames });
+};
+MarketDetails.displayName = "MarketDetails";
+var AFFIRMATIVE_WINNER_LABELS = /* @__PURE__ */ new Set(["yes", "up", "buy", "long", "true"]);
+var isAffirmativeWinnerOutcomeLabel = (label) => {
+  if (!label) return false;
+  return AFFIRMATIVE_WINNER_LABELS.has(label.trim().toLowerCase());
+};
+var hasWinningOutcome = (market) => {
+  return market.venueMarketOutcomes.some((outcome) => outcome.winner === true);
+};
+var hasAffirmativeWinningOutcome = (market) => {
+  return market.venueMarketOutcomes.some((outcome) => {
+    return outcome.winner === true && isAffirmativeWinnerOutcomeLabel(outcome.label);
+  });
+};
+var moveMarketToFront = (markets, preferredMarketId) => {
+  if (!preferredMarketId) return markets;
+  const marketIndex = markets.findIndex((market) => market.id === preferredMarketId);
+  if (marketIndex <= 0) return markets;
+  return [
+    markets[marketIndex],
+    ...markets.slice(0, marketIndex),
+    ...markets.slice(marketIndex + 1)
+  ];
+};
+var resolveIsResolvedEvent = (sourceMarkets, eventTradingState) => {
+  if (eventTradingState == null ? void 0 : eventTradingState.kind) {
+    return eventTradingState.kind === "resolved";
+  }
+  if (sourceMarkets.length === 0) return false;
+  return sourceMarkets.every((market) => resolveMarketTradingState(market).kind === "resolved");
+};
+var resolveResolvedWinnerMarketId = (sourceMarkets, eventTradingState) => {
+  var _a, _b, _c, _d, _e;
+  const preferredMarket = (_a = eventTradingState == null ? void 0 : eventTradingState.primaryMarket) != null ? _a : null;
+  if (preferredMarket && sourceMarkets.some((market) => market.id === preferredMarket.id)) {
+    if (resolveMarketTradingState(preferredMarket).kind === "resolved") {
+      return preferredMarket.id;
+    }
+  }
+  return (_e = (_d = (_b = sourceMarkets.find((market) => hasAffirmativeWinningOutcome(market))) == null ? void 0 : _b.id) != null ? _d : (_c = sourceMarkets.find((market) => hasWinningOutcome(market))) == null ? void 0 : _c.id) != null ? _e : null;
+};
+var MarketDetailsList = ({
+  eventId,
+  markets: providedMarkets,
+  eventTradingState,
+  onClick,
+  onExpandedMarketChange,
+  defaultTab,
+  classNames,
+  live
+}) => {
+  var _a, _b;
+  const labels = useLabels6();
+  const tradingContext = useEventTradingContext2();
+  const selectedMarketId = (_a = tradingContext == null ? void 0 : tradingContext.selectedMarketId) != null ? _a : null;
+  const [expandedMarketId, setExpandedMarketId] = useState5(selectedMarketId);
+  const previousSelectedMarketIdRef = useRef6(selectedMarketId);
+  const [areResolvedMarketsVisible, setAreResolvedMarketsVisible] = useState5(false);
+  const resolvedEventId = eventId || "";
+  const {
+    markets: rawMarkets,
+    isLoading,
+    error
+  } = useVenueMarkets2({
+    venueEventId: resolvedEventId,
+    enabled: !providedMarkets && !!resolvedEventId,
+    status: MarketStatus.open,
+    sortBy: "yesPrice",
+    sortDir: "desc"
+  });
+  const sourceMarkets = useMemo5(() => {
+    var _a2;
+    if ((_a2 = eventTradingState == null ? void 0 : eventTradingState.marketStates) == null ? void 0 : _a2.length) {
+      return eventTradingState.marketStates.map((item) => item.market);
+    }
+    if (providedMarkets) return providedMarkets;
+    return rawMarkets;
+  }, [eventTradingState == null ? void 0 : eventTradingState.marketStates, providedMarkets, rawMarkets]);
+  const isResolvedEvent = useMemo5(() => {
+    return resolveIsResolvedEvent(sourceMarkets, eventTradingState);
+  }, [eventTradingState, sourceMarkets]);
+  const groupedMarkets = useMemo5(() => {
+    const sortedMarkets = sortMarketsByYesOddsDesc(sourceMarkets);
+    if (sortedMarkets.length === 0) {
+      return {
+        primary: [],
+        closed: [],
+        upcoming: [],
+        resolved: []
+      };
+    }
+    if (isResolvedEvent) {
+      const winnerMarketId = resolveResolvedWinnerMarketId(sortedMarkets, eventTradingState);
+      return {
+        primary: moveMarketToFront(sortedMarkets, winnerMarketId),
+        upcoming: [],
+        resolved: []
+      };
+    }
+    const primary = [];
+    const upcoming = [];
+    const resolved = [];
+    const closed = [];
+    sortedMarkets.forEach((market) => {
+      const marketStateKind = resolveMarketTradingState(market).kind;
+      if (marketStateKind === "resolved") {
+        resolved.push(market);
+        return;
+      }
+      if (marketStateKind === "unopened") {
+        upcoming.push(market);
+        return;
+      }
+      if (marketStateKind === "closed") {
+        closed.push(market);
+        return;
+      }
+      primary.push(market);
+    });
+    return { primary, upcoming, resolved, closed };
+  }, [eventTradingState, isResolvedEvent, sourceMarkets]);
+  const shouldShowResolvedToggle = !isResolvedEvent && groupedMarkets.resolved.length > 0;
+  const visibleResolvedMarkets = useMemo5(() => {
+    if (isResolvedEvent || areResolvedMarketsVisible) return groupedMarkets.resolved;
+    return [];
+  }, [areResolvedMarketsVisible, groupedMarkets.resolved, isResolvedEvent]);
+  const displayedMarkets = useMemo5(() => {
+    return [...groupedMarkets.primary, ...visibleResolvedMarkets];
+  }, [groupedMarkets.primary, visibleResolvedMarkets]);
+  const hasPrefetchedMarkets = !!providedMarkets || !!((_b = eventTradingState == null ? void 0 : eventTradingState.marketStates) == null ? void 0 : _b.length);
+  const { prices: midpointsFallback } = useViewportMidpoints(displayedMarkets);
+  useEffect5(() => {
+    if (isResolvedEvent) {
+      setAreResolvedMarketsVisible(false);
+      return;
+    }
+    if (groupedMarkets.resolved.length === 0) {
+      setAreResolvedMarketsVisible(false);
+    }
+  }, [groupedMarkets.resolved.length, isResolvedEvent]);
+  useEffect5(() => {
+    if (previousSelectedMarketIdRef.current === selectedMarketId) return;
+    previousSelectedMarketIdRef.current = selectedMarketId;
+    if (!selectedMarketId) return;
+    if (!displayedMarkets.some((market) => market.id === selectedMarketId)) return;
+    setExpandedMarketId(selectedMarketId);
+  }, [displayedMarkets, selectedMarketId]);
+  useEffect5(() => {
+    if (displayedMarkets.length === 0) return;
+    if (selectedMarketId && displayedMarkets.some((market) => market.id === selectedMarketId)) {
+      return;
+    }
+    if (selectedMarketId && sourceMarkets.some((market) => market.id === selectedMarketId)) {
+      return;
+    }
+    const fallbackSelectableMarket = displayedMarkets.find(
+      (market) => !resolveMarketTradingState(market).isTradingDisabled
+    );
+    if (!fallbackSelectableMarket) {
+      return;
+    }
+    if (!expandedMarketId) {
+      setExpandedMarketId(fallbackSelectableMarket.id);
+    }
+    tradingContext == null ? void 0 : tradingContext.selectMarket(fallbackSelectableMarket.id, fallbackSelectableMarket);
+  }, [displayedMarkets, expandedMarketId, selectedMarketId, sourceMarkets, tradingContext]);
+  useEffect5(() => {
+    var _a2, _b2;
+    if (!expandedMarketId) return;
+    if (displayedMarkets.some((market) => market.id === expandedMarketId)) return;
+    if (selectedMarketId && displayedMarkets.some((market) => market.id === selectedMarketId)) {
+      setExpandedMarketId(selectedMarketId);
+      return;
+    }
+    setExpandedMarketId((_b2 = (_a2 = displayedMarkets[0]) == null ? void 0 : _a2.id) != null ? _b2 : null);
+  }, [displayedMarkets, expandedMarketId, selectedMarketId]);
+  const handleToggle = (marketId, market) => {
+    if (marketId === expandedMarketId) {
+      setExpandedMarketId(null);
+      onExpandedMarketChange == null ? void 0 : onExpandedMarketChange(null);
+      return;
+    }
+    setExpandedMarketId(marketId);
+    onExpandedMarketChange == null ? void 0 : onExpandedMarketChange(marketId);
+    if (marketId === selectedMarketId) return;
+    if (resolveMarketTradingState(market).isTradingDisabled) return;
+    tradingContext == null ? void 0 : tradingContext.selectMarket(market.id, market);
+  };
+  if (!hasPrefetchedMarkets && isLoading) {
+    return /* @__PURE__ */ jsxs7("div", { className: cn("agg-market-list flex flex-col gap-3", classNames == null ? void 0 : classNames.root), children: [
+      /* @__PURE__ */ jsx9(
+        MarketDetailsLoadingState,
+        {
+          isOpened: true,
+          classNames: { root: cn("agg-market-list-item", classNames == null ? void 0 : classNames.item) }
+        }
+      ),
+      /* @__PURE__ */ jsx9(
+        MarketDetailsLoadingState,
+        {
+          isOpened: false,
+          classNames: { root: cn("agg-market-list-item", classNames == null ? void 0 : classNames.item) }
+        }
+      )
+    ] });
+  }
+  if (!hasPrefetchedMarkets && error) {
+    return /* @__PURE__ */ jsx9(
+      StateMessage,
+      {
+        title: labels.marketDetails.unavailableTitle,
+        description: labels.marketDetails.unavailableDescription,
+        icon: /* @__PURE__ */ jsx9(SearchEmptyIcon, {}),
+        classNames: { root: "min-h-[280px] md:min-h-[320px]" }
+      }
+    );
+  }
+  if (displayedMarkets.length === 0 && !shouldShowResolvedToggle) {
+    const hasSourceMarkets = sourceMarkets.length > 0;
+    return /* @__PURE__ */ jsx9(
+      StateMessage,
+      {
+        title: hasSourceMarkets ? isResolvedEvent ? labels.markets.emptyResolved : labels.markets.emptyNoOpen : labels.marketDetails.notFoundTitle,
+        description: hasSourceMarkets ? void 0 : labels.marketDetails.notFoundDescription,
+        icon: /* @__PURE__ */ jsx9(SearchEmptyIcon, {}),
+        classNames: { root: "min-h-[280px] md:min-h-[320px]" }
+      }
+    );
+  }
+  const renderMarketCard = (market) => /* @__PURE__ */ jsx9("div", { children: /* @__PURE__ */ jsx9(
+    MarketDetails,
+    {
+      marketId: market.id,
+      venueMarkets: sourceMarkets,
+      isOpened: expandedMarketId === market.id,
+      onOpenChange: (marketId) => {
+        onClick == null ? void 0 : onClick(market);
+        handleToggle(marketId, market);
+      },
+      defaultTab,
+      ariaLabel: market.question,
+      classNames: { root: cn("agg-market-list-item", classNames == null ? void 0 : classNames.item) },
+      live,
+      midpointsFallback
+    }
+  ) }, market.id);
+  return /* @__PURE__ */ jsxs7("div", { className: cn("agg-market-list flex flex-col gap-3", classNames == null ? void 0 : classNames.root), children: [
+    groupedMarkets.primary.map((market) => renderMarketCard(market)),
+    shouldShowResolvedToggle ? /* @__PURE__ */ jsx9(
+      Button,
+      {
+        variant: "tertiary",
+        size: "small",
+        className: "agg-market-view-resolved-toggle self-start",
+        onClick: () => {
+          setAreResolvedMarketsVisible((isVisible) => !isVisible);
+        },
+        "aria-expanded": areResolvedMarketsVisible,
+        suffix: /* @__PURE__ */ jsx9(
+          Icon,
+          {
+            name: areResolvedMarketsVisible ? "chevron-up" : "chevron-down",
+            size: "small",
+            className: "h-4 w-4",
+            "aria-hidden": "true"
+          }
+        ),
+        children: areResolvedMarketsVisible ? labels.marketDetails.hideResolved : labels.marketDetails.viewResolved
+      }
+    ) : null,
+    visibleResolvedMarkets.map((market) => renderMarketCard(market))
+  ] });
+};
+MarketDetailsList.displayName = "MarketDetailsList";
+
+// src/events/list/index.tsx
+import { MarketStatus as MarketStatus2, useAppConfig as useAppConfig2, useLabels as useLabels8, useVenueEvents } from "@agg-build/hooks";
+import { VENUES } from "@agg-build/sdk";
+import { useEffect as useEffect7, useMemo as useMemo7, useRef as useRef8, useState as useState7 } from "react";
+
+// src/events/list/event-list-tabs.tsx
+import { useAppConfig, useLabels as useLabels7 } from "@agg-build/hooks";
+import { useCallback as useCallback4, useEffect as useEffect6, useMemo as useMemo6, useRef as useRef7, useState as useState6 } from "react";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var renderTabIcon = (tab, isActive) => {
+  if (tab.venueLogo) {
+    return /* @__PURE__ */ jsx10(VenueLogo, { venue: tab.venueLogo, size: "small" });
+  }
+  if (!tab.iconName) return null;
+  return /* @__PURE__ */ jsx10(
+    Icon,
+    {
+      name: tab.iconName,
+      size: "small",
+      color: isActive ? "var(--agg-color-primary)" : "var(--agg-color-foreground)"
+    }
+  );
+};
+var useEventListTabs = (tabs) => {
+  const labels = useLabels7();
+  const { disabledVenues } = useAppConfig();
+  return useMemo6(() => {
+    const baseTabs = tabs != null ? tabs : getDefaultEventListTabs(labels);
+    if (disabledVenues.length === 0) return baseTabs;
+    const disabled = new Set(disabledVenues);
+    return baseTabs.filter((tab) => {
+      if (!tab.venueLogo) return true;
+      return !disabled.has(tab.venueLogo);
+    });
+  }, [tabs, labels, disabledVenues]);
+};
+var EventListTabs = ({
+  tabs,
+  activeTab,
+  onTabChange,
+  ariaLabel,
+  className,
+  overflowBehavior
+}) => {
+  const resolvedTabs = useEventListTabs(tabs);
+  useEffect6(() => {
+    if (resolvedTabs.length === 0) return;
+    if (resolvedTabs.some((tab) => tab.value === activeTab)) return;
+    onTabChange(resolvedTabs[0].value);
+  }, [activeTab, onTabChange, resolvedTabs]);
+  const items = useMemo6(() => {
+    return resolvedTabs.map((tab) => {
+      const isActive = tab.value === activeTab;
+      return {
+        value: tab.value,
+        label: tab.label,
+        icon: renderTabIcon(tab, isActive),
+        disabled: tab.disabled,
+        isComingSoon: tab.isComingSoon
+      };
+    });
+  }, [activeTab, resolvedTabs]);
+  return /* @__PURE__ */ jsx10(
+    Tabs,
+    {
+      ariaLabel,
+      className,
+      items,
+      overflowBehavior,
+      value: activeTab,
+      onChange: onTabChange
+    }
+  );
+};
+EventListTabs.displayName = "EventListTabs";
+var useEventListTabsHeaderOverflow = (recomputeOn) => {
+  const headerRef = useRef7(null);
+  const titleRef = useRef7(null);
+  const requiredTabsWidthRef = useRef7(0);
+  const [shouldUseSelectOverflow, setShouldUseSelectOverflow] = useState6(false);
+  const updateTabsOverflowBehavior = useCallback4(() => {
+    if (typeof window === "undefined") return;
+    const headerElement = headerRef.current;
+    const titleElement = titleRef.current;
+    if (!headerElement || !titleElement) return;
+    const headerStyles = window.getComputedStyle(headerElement);
+    const rawGap = headerStyles.columnGap || headerStyles.gap || "0";
+    const horizontalGap = Number.parseFloat(rawGap) || 0;
+    const availableTabsWidth = headerElement.clientWidth - titleElement.getBoundingClientRect().width - horizontalGap;
+    if (availableTabsWidth <= 0) {
+      setShouldUseSelectOverflow(true);
+      return;
+    }
+    const tabListElement = headerElement.querySelector(".agg-tab-list");
+    if (tabListElement) {
+      const currentRequiredWidth = tabListElement.scrollWidth;
+      if (currentRequiredWidth > 0) {
+        requiredTabsWidthRef.current = currentRequiredWidth;
+      }
+      const hasRealOverflow = tabListElement.scrollWidth - tabListElement.clientWidth > 1;
+      setShouldUseSelectOverflow(hasRealOverflow);
+      return;
+    }
+    if (requiredTabsWidthRef.current <= 0) return;
+    setShouldUseSelectOverflow(requiredTabsWidthRef.current > availableTabsWidth);
+  }, []);
+  useEffect6(() => {
+    updateTabsOverflowBehavior();
+  }, [recomputeOn, updateTabsOverflowBehavior]);
+  useEffect6(() => {
+    if (typeof window === "undefined") return;
+    const handleResize = () => {
+      updateTabsOverflowBehavior();
+    };
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [updateTabsOverflowBehavior]);
+  useEffect6(() => {
+    if (typeof ResizeObserver === "undefined") return;
+    const headerElement = headerRef.current;
+    const titleElement = titleRef.current;
+    if (!headerElement || !titleElement) return;
+    const resizeObserver = new ResizeObserver(() => {
+      updateTabsOverflowBehavior();
+    });
+    resizeObserver.observe(headerElement);
+    resizeObserver.observe(titleElement);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [updateTabsOverflowBehavior]);
+  return { headerRef, titleRef, shouldUseSelectOverflow };
+};
+
+// src/events/list/index.tsx
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+var EventList = ({
+  title,
+  limit = DEFAULT_EVENTS_LIMIT,
+  maxVisibleItems,
+  search,
+  categoryIds,
+  onEventClick,
+  onMarketClick,
+  getMarketHref,
+  getEventHref,
+  initialVenueTab,
+  initialLoadedPageCount,
+  stateRef
+}) => {
+  var _a, _b;
+  const labels = useLabels8();
+  const { disabledVenues } = useAppConfig2();
+  const resolvedTabs = useEventListTabs();
+  const visibleVenues = useMemo7(
+    () => disabledVenues.length === 0 ? void 0 : VENUES.filter(
+      (v) => !disabledVenues.includes(v)
+    ),
+    [disabledVenues]
+  );
+  const [activeTabValue, setActiveTabValue] = useState7(
+    (_b = initialVenueTab != null ? initialVenueTab : (_a = resolvedTabs[0]) == null ? void 0 : _a.value) != null ? _b : "matched"
+  );
+  const { headerRef, titleRef, shouldUseSelectOverflow } = useEventListTabsHeaderOverflow(resolvedTabs);
+  const activeTab = useMemo7(() => {
+    return resolvedTabs.find((tab) => tab.value === activeTabValue);
+  }, [activeTabValue, resolvedTabs]);
+  const venues = useMemo7(() => {
+    return resolveTabVenus(activeTab, visibleVenues);
+  }, [activeTab, visibleVenues]);
+  const matchStatus = useMemo7(() => {
+    return activeTabValue === "matched" ? activeTab == null ? void 0 : activeTab.matchStatus : void 0;
+  }, [activeTabValue, activeTab]);
+  const resolvedMaxVisibleItems = useMemo7(() => {
+    if (!Number.isFinite(maxVisibleItems)) return void 0;
+    return Math.max(1, Math.floor(maxVisibleItems));
+  }, [maxVisibleItems]);
+  const requestLimit = resolvedMaxVisibleItems != null ? resolvedMaxVisibleItems : limit;
+  const shouldPaginate = resolvedMaxVisibleItems == null;
+  const endDateFrom = useMemo7(() => {
+    if (search) return void 0;
+    const BUCKET_MINUTES = 5;
+    const bucket = /* @__PURE__ */ new Date();
+    bucket.setMinutes(Math.floor(bucket.getMinutes() / BUCKET_MINUTES) * BUCKET_MINUTES, 0, 0);
+    return bucket.toISOString();
+  }, [search]);
+  const {
+    events,
+    isLoading,
+    isError,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+    isPlaceholderData,
+    loadedPageCount
+  } = useVenueEvents(__spreadProps(__spreadValues({
+    queryKeyScope: "event-list",
+    venues,
+    search,
+    categoryIds,
+    matchStatus,
+    limit: requestLimit,
+    status: [MarketStatus2.open],
+    sortBy: "volume24hr",
+    sortDir: "desc",
+    endDateFrom
+  }, !search ? {
+    minYesPrice: 0.03,
+    maxYesPrice: 0.97
+  } : {}), {
+    initialPages: initialLoadedPageCount
+  }));
+  useEffect7(() => {
+    if (stateRef) {
+      stateRef.current = { venueTab: activeTabValue, loadedPageCount };
+    }
+  }, [stateRef, activeTabValue, loadedPageCount]);
+  const filteredEvents = useMemo7(() => {
+    return filterEventsByTabValue(events, activeTabValue);
+  }, [events, activeTabValue]);
+  const groupedEvents = useMemo7(() => {
+    return splitEventsByLifecycle(filteredEvents);
+  }, [filteredEvents]);
+  const orderedEvents = useMemo7(() => {
+    return groupedEvents.open;
+  }, [groupedEvents.open]);
+  const tileEvents = useMemo7(() => {
+    const normalizedEvents = orderedEvents.map((event) => mapEventToEventListItemEvent(event)).filter((event) => event != null);
+    if (resolvedMaxVisibleItems == null) return normalizedEvents;
+    return normalizedEvents.slice(0, resolvedMaxVisibleItems);
+  }, [orderedEvents, resolvedMaxVisibleItems]);
+  const shouldRenderLoadingState = isLoading && !isPlaceholderData && tileEvents.length === 0;
+  const shouldRenderEmptyState = !isLoading && !isError && tileEvents.length === 0;
+  const shouldRenderPaginationLoadingItems = shouldPaginate && hasNextPage;
+  const loadMoreRef = useRef8(null);
+  useEffect7(() => {
+    if (!shouldPaginate) return;
+    if (!hasNextPage) return;
+    if (typeof IntersectionObserver === "undefined") return;
+    const target = loadMoreRef.current;
+    if (!target) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const entry = entries[0];
+        if (!(entry == null ? void 0 : entry.isIntersecting)) return;
+        if (isLoading || isFetchingNextPage || !hasNextPage) return;
+        void fetchNextPage();
+      },
+      {
+        rootMargin: "320px 0px"
+      }
+    );
+    observer.observe(target);
+    return () => {
+      observer.disconnect();
+    };
+  }, [fetchNextPage, hasNextPage, isFetchingNextPage, isLoading, shouldPaginate]);
+  const gridClassName = cn(
+    "grid grid-cols-[repeat(auto-fill,minmax(240px,1fr))] md:grid-cols-[repeat(auto-fill,minmax(360px,1fr))] gap-4"
+  );
+  if (shouldRenderLoadingState) {
+    return /* @__PURE__ */ jsx11(Skeleton, { view: "event-list", ariaLabel: labels.eventList.loading(title) });
+  }
+  return /* @__PURE__ */ jsxs8("section", { className: "agg-event-list flex w-full flex-col gap-5", children: [
+    /* @__PURE__ */ jsxs8(
+      "header",
+      {
+        ref: headerRef,
+        className: cn(
+          "agg-event-list-header",
+          "flex flex-col w-full items-start justify-between",
+          "gap-2 sm:flex-row sm:items-center sm:gap-4"
+        ),
+        children: [
+          /* @__PURE__ */ jsx11("div", { ref: titleRef, className: "agg-event-list-title min-w-32", children: /* @__PURE__ */ jsx11(Typography, { as: "h2", variant: "title", className: "truncate first-letter:uppercase", children: title }) }),
+          /* @__PURE__ */ jsx11(
+            EventListTabs,
+            {
+              ariaLabel: labels.eventList.tabsAria(title),
+              className: "agg-event-list-tabs min-w-0 max-w-full",
+              activeTab: activeTabValue,
+              onTabChange: setActiveTabValue,
+              overflowBehavior: shouldUseSelectOverflow ? "select" : void 0
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs8("div", { className: cn("agg-event-list-grid", isPlaceholderData && "opacity-60", gridClassName), children: [
+      tileEvents.map((event) => /* @__PURE__ */ jsx11(
+        EventListItem,
+        {
+          event,
+          classNames: {
+            root: "agg-event-list-item w-full min-w-0 max-w-none"
+          },
+          onEventClick,
+          onMarketClick,
+          getMarketHref,
+          href: getEventHref == null ? void 0 : getEventHref(event)
+        },
+        event.id
+      )),
+      shouldRenderPaginationLoadingItems ? Array.from({ length: 6 }).map((_, index) => /* @__PURE__ */ jsx11(
+        EventListItem,
+        {
+          isLoading: true,
+          classNames: {
+            root: "agg-event-list-item w-full min-w-0 max-w-none"
+          }
+        },
+        `loading-${index}`
+      )) : null,
+      shouldRenderEmptyState ? /* @__PURE__ */ jsx11("div", { className: "col-span-full w-full", children: /* @__PURE__ */ jsx11(
+        StateMessage,
+        {
+          title: labels.eventList.emptyTitle,
+          description: labels.eventList.emptyDescription,
+          icon: /* @__PURE__ */ jsx11(Icon, { name: "search-empty" })
+        }
+      ) }) : null,
+      isError ? /* @__PURE__ */ jsx11(
+        StateMessage,
+        {
+          title: labels.eventList.errorTitle,
+          description: labels.eventList.errorDescription,
+          icon: /* @__PURE__ */ jsx11(Icon, { name: "warning" })
+        }
+      ) : null
+    ] }),
+    shouldPaginate && hasNextPage ? /* @__PURE__ */ jsx11("div", { ref: loadMoreRef, className: "agg-event-list-sentinel h-px w-full", "aria-hidden": true }) : null
+  ] });
+};
+EventList.displayName = "EventList";
+
+export {
+  isErrorWithStatus,
+  EventListItem,
+  collectEligibleVenueOutcomes,
+  collectEligibleVenueOutcomeIds,
+  mergeVenueOutcomeOrderbooks,
+  SettlementSummary,
+  EventListItemDetails,
+  orderbookRowLimitDefault,
+  useCenterOrderbookSpread,
+  OrderbookWithStates,
+  Orderbook,
+  MarketDetails,
+  MarketDetailsList,
+  useEventListTabs,
+  EventListTabs,
+  useEventListTabsHeaderOverflow,
+  EventList
+};