@agg-market/ui 4.0.0 → 6.0.0

package/dist/chunk-LMOJKJOY.mjs

@@ -0,0 +1,2616 @@
+import {
+  Badge,
+  LineChart,
+  StateMessage,
+  SwitchButton,
+  Typography
+} from "./chunk-CN7GI2RJ.mjs";
+import {
+  Card,
+  MarketDetailsOderbookSkeleton,
+  Skeleton,
+  Tabs,
+  baseCardClassName,
+  detailsBaseCardClassName,
+  eventListItemDetailsTimeRanges,
+  fallbackLineColors,
+  getMarketDetailsTabs,
+  lineColorByVenue,
+  marketDetailsBaseCardClassName,
+  marketDetailsDefaultIsOpened,
+  orderBookRowLimitDefault
+} from "./chunk-UBBOLLOS.mjs";
+import {
+  Button,
+  Icon,
+  VenueLogo,
+  __objRest,
+  __spreadProps,
+  __spreadValues,
+  cn,
+  getMotionClassName,
+  toDate
+} from "./chunk-HI4EEDN5.mjs";
+
+// src/events/item/index.tsx
+import dayjs from "dayjs";
+import { useMemo } from "react";
+import {
+  useEvent,
+  useLabels,
+  useSdkUiConfig
+} from "@agg-market/hooks";
+
+// 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/event-list-item.utils.ts
+var resolveEventListItemEvent = (fetchedEvent) => {
+  if (!fetchedEvent)
+    return void 0;
+  const mergedVenueMarkets = fetchedEvent.markets.flatMap(
+    (market) => market.venueMarkets
+  );
+  if (mergedVenueMarkets.length === 0)
+    return void 0;
+  return fetchedEvent;
+};
+var normalizeProbability = (value) => {
+  if (typeof value !== "number" || !Number.isFinite(value))
+    return void 0;
+  if (value < 0)
+    return 0;
+  if (value > 1)
+    return 1;
+  return value;
+};
+var hasDateLabel = (outcome) => {
+  return !!toDate(outcome.label);
+};
+var sortOutcomes = (outcomes) => {
+  if (outcomes.length <= 1)
+    return outcomes;
+  const now = Date.now();
+  if (outcomes.some(hasDateLabel)) {
+    return [...outcomes].sort((a, b) => {
+      var _a, _b, _c, _d;
+      const aDate = (_b = (_a = toDate(a.label)) == null ? void 0 : _a.getTime()) != null ? _b : 0;
+      const bDate = (_d = (_c = toDate(b.label)) == null ? void 0 : _c.getTime()) != null ? _d : 0;
+      return Math.abs(aDate - now) - Math.abs(bDate - now);
+    });
+  }
+  return [...outcomes].sort((a, b) => {
+    var _a, _b;
+    const aPrice = (_a = normalizeProbability(a.price)) != null ? _a : 0;
+    const bPrice = (_b = normalizeProbability(b.price)) != null ? _b : 0;
+    return bPrice - aPrice;
+  });
+};
+var compareVisibleOutcomeRows = (left, right) => {
+  var _a, _b;
+  const leftDate = toDate(resolveOutcomeTitle(left.outcome));
+  const rightDate = toDate(resolveOutcomeTitle(right.outcome));
+  if (leftDate && rightDate) {
+    return leftDate.getTime() - rightDate.getTime();
+  }
+  const leftProbability = (_a = normalizeProbability(left.outcome.price)) != null ? _a : -1;
+  const rightProbability = (_b = normalizeProbability(right.outcome.price)) != null ? _b : -1;
+  return rightProbability - leftProbability;
+};
+var shouldReplaceVisibleOutcome = (current, next) => {
+  var _a, _b;
+  const currentVolume = typeof current.market.volume === "number" ? current.market.volume : -1;
+  const nextVolume = typeof next.market.volume === "number" ? next.market.volume : -1;
+  if (currentVolume !== nextVolume) {
+    return nextVolume > currentVolume;
+  }
+  const currentProbability = (_a = normalizeProbability(current.outcome.price)) != null ? _a : -1;
+  const nextProbability = (_b = normalizeProbability(next.outcome.price)) != null ? _b : -1;
+  return nextProbability > currentProbability;
+};
+var resolveVisibleOutcomes = (venueMarkets, maxOutcomes) => {
+  const visibleOutcomesByLabel = /* @__PURE__ */ new Map();
+  venueMarkets.forEach((market) => {
+    sortOutcomes(market.venueMarketOutcomes).forEach((outcome) => {
+      const title = resolveOutcomeTitle(outcome);
+      const normalizedTitle = title.trim().toLowerCase();
+      const nextVisibleOutcome = {
+        venue: market.venue,
+        market,
+        outcome,
+        title
+      };
+      const currentVisibleOutcome = visibleOutcomesByLabel.get(normalizedTitle);
+      if (!currentVisibleOutcome || shouldReplaceVisibleOutcome(currentVisibleOutcome, nextVisibleOutcome)) {
+        visibleOutcomesByLabel.set(normalizedTitle, nextVisibleOutcome);
+      }
+    });
+  });
+  return [...visibleOutcomesByLabel.values()].sort(compareVisibleOutcomeRows).slice(0, Math.max(1, maxOutcomes));
+};
+var resolveOutcomeTitle = (outcome) => {
+  if (outcome.title && outcome.title.trim())
+    return outcome.title;
+  return outcome.label;
+};
+var selectPrimaryVenueMarket = (venueMarkets) => {
+  if (venueMarkets.length === 0)
+    return void 0;
+  if (venueMarkets.length === 1)
+    return venueMarkets[0];
+  return [...venueMarkets].sort((a, b) => {
+    const aVolume = typeof a.volume === "number" ? a.volume : -1;
+    const bVolume = typeof b.volume === "number" ? b.volume : -1;
+    return bVolume - aVolume;
+  })[0];
+};
+var resolveTileTitle = (event, primaryVenueMarket, titleOverride) => {
+  if (typeof titleOverride === "string" && titleOverride.trim()) {
+    return titleOverride;
+  }
+  if (typeof (primaryVenueMarket == null ? void 0 : primaryVenueMarket.question) === "string" && primaryVenueMarket.question.trim()) {
+    return primaryVenueMarket.question;
+  }
+  return event.title;
+};
+var resolveTileImage = (event, primaryVenueMarket, imageOverride) => {
+  if (typeof imageOverride === "string" && imageOverride.trim()) {
+    return imageOverride;
+  }
+  if (typeof (primaryVenueMarket == null ? void 0 : primaryVenueMarket.image) === "string" && primaryVenueMarket.image.trim()) {
+    return primaryVenueMarket.image;
+  }
+  if (typeof event.image === "string" && event.image.trim()) {
+    return event.image;
+  }
+  return void 0;
+};
+var formatCountLabel = (count, singular, plural) => {
+  return `${count} ${count === 1 ? singular : plural}`;
+};
+var getVenueSummary = (venueMarkets) => {
+  const uniqueVenues = Array.from(new Set(venueMarkets.map((market) => market.venue)));
+  return {
+    marketCount: venueMarkets.length,
+    venueCount: uniqueVenues.length,
+    singleVenue: uniqueVenues.length === 1 ? uniqueVenues[0] : void 0
+  };
+};
+var resolveVenueLabel = (venue, venueInfo, labels) => {
+  var _a, _b;
+  if (!venue)
+    return labels.eventItem.venueSingular;
+  return (_b = (_a = venueInfo == null ? void 0 : venueInfo[venue]) == null ? void 0 : _a.label) != null ? _b : labels.venues[venue];
+};
+
+// src/events/item/index.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var EventListItemLoadingState = ({
+  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(baseCardClassName, classNames == null ? void 0 : classNames.root),
+      role: "status",
+      "aria-label": ariaLabel != null ? ariaLabel : labels.eventItem.unavailableAria,
+      children: /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1", classNames == null ? void 0 : classNames.header), children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "body-large-strong", className: cn("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,
+  ariaLabel
+}) => {
+  const labels = useLabels();
+  return /* @__PURE__ */ jsx(Card, { className: cn("w-full gap-0 overflow-hidden p-0", classNames == null ? void 0 : classNames.root), children: /* @__PURE__ */ jsx(
+    StateMessage,
+    {
+      ariaLabel: ariaLabel != null ? ariaLabel : labels.eventItemDetails.notFoundAria,
+      title: labels.eventItemDetails.notFoundTitle,
+      description: labels.eventItemDetails.notFoundDescription,
+      className: "min-h-[280px] md:min-h-[320px]"
+    }
+  ) });
+};
+var EventListItemContent = ({
+  event,
+  title,
+  image,
+  showVenueLogo = true,
+  maxOutcomes = 2,
+  classNames,
+  venueInfo,
+  arbitrageByOutcomeId,
+  onClick,
+  ariaLabel
+}) => {
+  var _a;
+  const config = useSdkUiConfig();
+  const labels = useLabels();
+  const allVenueMarkets = useMemo(() => {
+    return event.markets.flatMap((market) => market.venueMarkets);
+  }, [event.markets]);
+  const primaryVenueMarket = useMemo(() => {
+    return selectPrimaryVenueMarket(allVenueMarkets);
+  }, [allVenueMarkets]);
+  const visibleOutcomes = useMemo(() => {
+    if (allVenueMarkets.length === 0)
+      return [];
+    return resolveVisibleOutcomes(allVenueMarkets, maxOutcomes);
+  }, [allVenueMarkets, maxOutcomes]);
+  const resolvedTitle = resolveTileTitle(event, primaryVenueMarket, title);
+  const resolvedImage = resolveTileImage(event, primaryVenueMarket, image);
+  const { marketCount, venueCount, singleVenue } = getVenueSummary(allVenueMarkets);
+  const venueLabel = resolveVenueLabel(singleVenue, venueInfo, labels);
+  const visibleVenueLogos = useMemo(() => {
+    return Array.from(new Set(allVenueMarkets.map((market) => market.venue))).slice(0, 4);
+  }, [allVenueMarkets]);
+  const resolvedVolume = typeof event.volume === "number" ? event.volume : (_a = primaryVenueMarket == null ? void 0 : primaryVenueMarket.volume) != null ? _a : void 0;
+  const volumeLabel = typeof resolvedVolume === "number" ? `${config.formatCompactCurrency(resolvedVolume)} ${labels.eventItem.volumeSuffix}` : "";
+  const handleKeyDown = (eventToHandle) => {
+    if (!onClick)
+      return;
+    if ((eventToHandle == null ? void 0 : eventToHandle.key) === "Enter" || (eventToHandle == null ? void 0 : eventToHandle.key) === " ") {
+      eventToHandle == null ? void 0 : eventToHandle.preventDefault();
+      onClick();
+    }
+  };
+  const renderArbitrage = (value) => {
+    if (value == null)
+      return null;
+    if (Math.abs(value) < config.arbitrageThreshold)
+      return null;
+    return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-1", "text-agg-success"), children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "label-strong", className: "text-agg-success", children: config.formatPercent(value) }),
+      /* @__PURE__ */ jsx(
+        Icon,
+        {
+          name: "triangle-up",
+          size: "small",
+          title: labels.eventItem.arbitrage,
+          className: "size-2!"
+        }
+      )
+    ] });
+  };
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      className: cn(baseCardClassName, onClick && "cursor-pointer", classNames == null ? void 0 : classNames.root),
+      role: onClick ? "button" : void 0,
+      tabIndex: onClick ? 0 : void 0,
+      onClick,
+      onKeyDown: handleKeyDown,
+      "aria-label": ariaLabel != null ? ariaLabel : resolvedTitle,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-3", classNames == null ? void 0 : classNames.header), children: [
+          resolvedImage ? /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: resolvedImage,
+              alt: "",
+              className: cn("h-10 w-10", "rounded-agg-lg object-cover")
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "body-strong",
+              className: cn(
+                "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__ */ jsx("div", { className: cn("flex flex-col gap-3", classNames == null ? void 0 : classNames.outcomes), children: visibleOutcomes.map((visibleOutcome) => {
+          const probability = normalizeProbability(visibleOutcome.outcome.price);
+          const showBadge = typeof probability === "number";
+          const arbitragePercent = arbitrageByOutcomeId == null ? void 0 : arbitrageByOutcomeId[visibleOutcome.outcome.id];
+          const outcomeTitle = resolveOutcomeTitle(visibleOutcome.outcome);
+          const formattedTitle = dayjs(outcomeTitle).isValid() ? dayjs(outcomeTitle).format("MMMM D, YYYY") : outcomeTitle;
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "flex flex-row gap-3 w-full items-center justify-between",
+                classNames == null ? void 0 : classNames.outcomeRow
+              ),
+              children: [
+                /* @__PURE__ */ jsx(
+                  Typography,
+                  {
+                    variant: "body",
+                    className: "min-w-0 truncate text-agg-sm leading-agg-5 md:text-agg-base md:leading-agg-6",
+                    children: formattedTitle
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-3 items-center justify-end", children: [
+                  renderArbitrage(arbitragePercent),
+                  showBadge ? /* @__PURE__ */ jsx(
+                    Badge,
+                    {
+                      text: config.formatPercent(probability),
+                      prefix: showVenueLogo ? /* @__PURE__ */ jsx(VenueLogo, { venue: visibleOutcome.venue, size: "small" }) : void 0,
+                      size: "large",
+                      classNames: {
+                        root: cn(
+                          "h-9 min-w-[101px] justify-center px-4 text-agg-base leading-agg-6",
+                          classNames == null ? void 0 : classNames.badge
+                        )
+                      }
+                    }
+                  ) : null
+                ] })
+              ]
+            },
+            `${visibleOutcome.market.id}-${visibleOutcome.outcome.id}`
+          );
+        }) }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex items-center justify-between gap-2",
+              "text-agg-muted-foreground",
+              classNames == null ? void 0 : classNames.footer
+            ),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-1", "text-agg-sm leading-agg-5"), children: [
+                /* @__PURE__ */ jsx("span", { className: "truncate text-agg-muted-foreground", children: formatCountLabel(
+                  marketCount,
+                  labels.eventItem.marketSingular,
+                  labels.eventItem.marketPlural
+                ) }),
+                /* @__PURE__ */ jsx("span", { className: "text-agg-muted-foreground", children: "\xD7" }),
+                singleVenue ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 truncate text-agg-muted-foreground", children: [
+                  showVenueLogo ? /* @__PURE__ */ jsx(
+                    VenueLogo,
+                    {
+                      venue: singleVenue,
+                      size: "small",
+                      isMonochromatic: true,
+                      className: "text-agg-muted-foreground!"
+                    }
+                  ) : null,
+                  /* @__PURE__ */ jsx("span", { children: venueLabel })
+                ] }) : /* @__PURE__ */ jsx("span", { className: "truncate text-agg-muted-foreground", children: formatCountLabel(
+                  venueCount,
+                  labels.eventItem.venueSingular,
+                  labels.eventItem.venuePlural
+                ) }),
+                showVenueLogo && !singleVenue && visibleVenueLogos.length > 0 ? /* @__PURE__ */ jsx("span", { className: "flex items-center gap-1 overflow-hidden", children: visibleVenueLogos.map((venue) => /* @__PURE__ */ jsx(
+                  VenueLogo,
+                  {
+                    venue,
+                    size: "small",
+                    isMonochromatic: true,
+                    className: "text-agg-muted-foreground!"
+                  },
+                  venue
+                )) }) : null
+              ] }),
+              volumeLabel ? /* @__PURE__ */ jsx(Typography, { variant: "label", className: "text-agg-sm text-agg-muted-foreground", children: volumeLabel }) : null
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var EventListItemByEventId = (_a) => {
+  var _b = _a, {
+    eventId
+  } = _b, rest = __objRest(_b, [
+    "eventId"
+  ]);
+  const {
+    event: fetchedEvent,
+    error,
+    isError,
+    isLoading
+  } = useEvent(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/item-details/index.tsx
+import { useEffect, useMemo as useMemo2, useState } from "react";
+import { useEvent as useEvent2, useLabels as useLabels2, usePriceHistory, useSdkUiConfig as useSdkUiConfig2 } from "@agg-market/hooks";
+
+// src/events/item-details/event-list-item-details.utils.ts
+import dayjs2 from "dayjs";
+var normalizeLabel = (value) => {
+  return value.trim().toLowerCase();
+};
+var isDateLikeLabel = (value) => {
+  if (!value.trim())
+    return false;
+  return dayjs2(value).isValid();
+};
+var formatDateLabel = (value) => {
+  if (!isDateLikeLabel(value))
+    return value;
+  return dayjs2(value).format("MMM D, YYYY");
+};
+var getDefaultSelectedTimeRange = (value) => {
+  if (!value)
+    return "1M";
+  return value;
+};
+var getTimeWindowByRange = (range) => {
+  const endTs = dayjs2().unix();
+  if (range === "1H") {
+    return {
+      startTs: dayjs2.unix(endTs).subtract(1, "hour").unix(),
+      endTs,
+      intervalMinutes: 5
+    };
+  }
+  if (range === "6H") {
+    return {
+      startTs: dayjs2.unix(endTs).subtract(6, "hour").unix(),
+      endTs,
+      intervalMinutes: 15
+    };
+  }
+  if (range === "1D") {
+    return {
+      startTs: dayjs2.unix(endTs).subtract(1, "day").unix(),
+      endTs,
+      intervalMinutes: 30
+    };
+  }
+  if (range === "1W") {
+    return {
+      startTs: dayjs2.unix(endTs).subtract(7, "day").unix(),
+      endTs,
+      intervalMinutes: 60
+    };
+  }
+  if (range === "1M") {
+    return {
+      startTs: dayjs2.unix(endTs).subtract(1, "month").unix(),
+      endTs,
+      intervalMinutes: 240
+    };
+  }
+  return {
+    startTs: dayjs2.unix(endTs).subtract(6, "month").unix(),
+    endTs,
+    intervalMinutes: 720
+  };
+};
+var resolveOutcomeLabels = (venueMarkets) => {
+  var _a;
+  const primaryMarket = selectPrimaryVenueMarket(venueMarkets);
+  const initialLabels = ((_a = primaryMarket == null ? void 0 : primaryMarket.venueMarketOutcomes) != null ? _a : []).map(
+    (outcome) => resolveOutcomeTitle(outcome)
+  );
+  const labels = new Set(initialLabels);
+  venueMarkets.forEach((market) => {
+    sortOutcomes(market.venueMarketOutcomes).forEach((outcome) => {
+      labels.add(resolveOutcomeTitle(outcome));
+    });
+  });
+  return [...labels];
+};
+var resolveDefaultOutcomeLabel = (outcomeLabels) => {
+  return outcomeLabels[0];
+};
+var matchOutcomeByLabel = (outcome, selectedOutcomeLabel) => {
+  const normalizedSelectedLabel = normalizeLabel(selectedOutcomeLabel);
+  const resolvedTitle = resolveOutcomeTitle(outcome);
+  return normalizeLabel(resolvedTitle) === normalizedSelectedLabel || normalizeLabel(outcome.label) === normalizedSelectedLabel;
+};
+var resolveOutcomesByVenue = (venueMarkets, selectedOutcomeLabel) => {
+  return venueMarkets.map((market) => {
+    const matchedOutcome = sortOutcomes(market.venueMarketOutcomes).find((outcome) => {
+      return matchOutcomeByLabel(outcome, selectedOutcomeLabel);
+    });
+    if (!matchedOutcome)
+      return null;
+    return {
+      venue: market.venue,
+      market,
+      outcome: matchedOutcome
+    };
+  }).filter((item) => item != null);
+};
+var buildPriceHistoryGroups = (selectedOutcomes, fallbackMarketId) => {
+  const marketIdByVenue = /* @__PURE__ */ new Map();
+  selectedOutcomes.forEach(({ venue, market }) => {
+    var _a, _b;
+    const marketWithCanonicalId = market;
+    const canonicalMarketId = (_a = marketWithCanonicalId.marketId) != null ? _a : fallbackMarketId;
+    if (!canonicalMarketId)
+      return;
+    if (!marketIdByVenue.has(venue)) {
+      marketIdByVenue.set(venue, /* @__PURE__ */ new Set());
+    }
+    (_b = marketIdByVenue.get(venue)) == null ? void 0 : _b.add(canonicalMarketId);
+  });
+  return [...marketIdByVenue.entries()].map(([venue, marketIds]) => ({
+    venue,
+    venueMarketOutcomeIds: [...marketIds]
+  })).filter((group) => group.venueMarketOutcomeIds.length > 0);
+};
+var resolveSeriesColor = (venue, index) => {
+  var _a;
+  const colorFromVenue = lineColorByVenue[venue];
+  if (colorFromVenue)
+    return colorFromVenue;
+  return (_a = fallbackLineColors[index % fallbackLineColors.length]) != null ? _a : "#2e5cff";
+};
+
+// src/events/item-details/index.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var EventListItemDetailsLoadingState = ({
+  classNames,
+  ariaLabel
+}) => {
+  const labels = useLabels2();
+  return /* @__PURE__ */ jsx2(
+    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 = useLabels2();
+  return /* @__PURE__ */ jsx2(
+    Card,
+    {
+      className: cn(detailsBaseCardClassName, classNames == null ? void 0 : classNames.root),
+      role: "status",
+      "aria-label": ariaLabel != null ? ariaLabel : labels.eventItemDetails.unavailableAria,
+      children: /* @__PURE__ */ jsxs2("div", { className: cn("flex flex-col gap-1", classNames == null ? void 0 : classNames.header), children: [
+        /* @__PURE__ */ jsx2(Typography, { variant: "body-large-strong", className: cn("truncate", classNames == null ? void 0 : classNames.title), children: labels.eventItemDetails.unavailableTitle }),
+        /* @__PURE__ */ jsx2(Typography, { variant: "body", className: "text-agg-muted-foreground", children: labels.eventItemDetails.unavailableDescription })
+      ] })
+    }
+  );
+};
+var EventListItemDetailsNotFoundState = ({
+  classNames,
+  ariaLabel
+}) => {
+  const labels = useLabels2();
+  return /* @__PURE__ */ jsx2(Card, { className: cn(detailsBaseCardClassName, classNames == null ? void 0 : classNames.root), children: /* @__PURE__ */ jsx2(
+    StateMessage,
+    {
+      ariaLabel: ariaLabel != null ? ariaLabel : labels.eventItemDetails.notFoundAria,
+      title: labels.eventItemDetails.notFoundTitle,
+      description: labels.eventItemDetails.notFoundDescription,
+      className: "min-h-[280px] md:min-h-[320px]"
+    }
+  ) });
+};
+var probabilityModeOrder = ["yes", "no"];
+var clampProbability = (value) => {
+  if (value < 0)
+    return 0;
+  if (value > 1)
+    return 1;
+  return value;
+};
+var resolveAverageProbability = (values) => {
+  const validValues = values.filter((value) => value != null);
+  if (validValues.length === 0)
+    return void 0;
+  return validValues.reduce((sum, value) => sum + value, 0) / validValues.length;
+};
+var resolveOutcomeCandidateIds = (market, outcome) => {
+  var _a, _b;
+  const marketWithCanonicalId = market;
+  return [
+    outcome.id,
+    (_a = outcome.externalIdentifier) != null ? _a : void 0,
+    market.externalIdentifier,
+    (_b = marketWithCanonicalId.marketId) != null ? _b : void 0
+  ].filter((value) => typeof value === "string" && value.trim().length > 0);
+};
+var EventListItemDetailsGraphSection = ({
+  venueMarkets,
+  canonicalMarketId,
+  selectedOutcomeLabel,
+  onSelectedOutcomeLabelChange,
+  switchLabels,
+  isDateOutcomeMarket,
+  classNames,
+  showVenueLogo,
+  venueInfo,
+  formatPercent,
+  selectedTimeRange
+}) => {
+  const labels = useLabels2();
+  const [selectedVenue, setSelectedVenue] = useState(null);
+  const [activeProbabilityMode, setActiveProbabilityMode] = useState("yes");
+  const probabilityModeConfigs = useMemo2(() => {
+    if (isDateOutcomeMarket) {
+      return {
+        yes: {
+          switchLabel: switchLabels[0],
+          sourceOutcomeLabel: selectedOutcomeLabel,
+          transformProbability: (value) => value
+        },
+        no: {
+          switchLabel: switchLabels[1],
+          sourceOutcomeLabel: selectedOutcomeLabel,
+          transformProbability: (value) => 1 - value
+        }
+      };
+    }
+    return {
+      yes: {
+        switchLabel: switchLabels[0],
+        sourceOutcomeLabel: switchLabels[0],
+        transformProbability: (value) => value
+      },
+      no: {
+        switchLabel: switchLabels[1],
+        sourceOutcomeLabel: switchLabels[1],
+        transformProbability: (value) => value
+      }
+    };
+  }, [isDateOutcomeMarket, selectedOutcomeLabel, switchLabels]);
+  const selectedOutcomesByMode = useMemo2(() => {
+    return {
+      yes: resolveOutcomesByVenue(venueMarkets, probabilityModeConfigs.yes.sourceOutcomeLabel),
+      no: resolveOutcomesByVenue(venueMarkets, probabilityModeConfigs.no.sourceOutcomeLabel)
+    };
+  }, [
+    probabilityModeConfigs.no.sourceOutcomeLabel,
+    probabilityModeConfigs.yes.sourceOutcomeLabel,
+    venueMarkets
+  ]);
+  useEffect(() => {
+    if (isDateOutcomeMarket) {
+      return;
+    }
+    const nextMode = selectedOutcomeLabel === probabilityModeConfigs.no.sourceOutcomeLabel ? "no" : "yes";
+    setActiveProbabilityMode(nextMode);
+  }, [isDateOutcomeMarket, probabilityModeConfigs.no.sourceOutcomeLabel, selectedOutcomeLabel]);
+  const normalizedVenueDataByMode = useMemo2(() => {
+    const buildModeData = (mode) => {
+      const modeConfig = probabilityModeConfigs[mode];
+      return selectedOutcomesByMode[mode].map((outcomeByVenue, index) => {
+        const rawProbability = normalizeProbability(outcomeByVenue.outcome.price);
+        const transformedProbability = rawProbability == null ? void 0 : clampProbability(modeConfig.transformProbability(rawProbability));
+        return {
+          venue: outcomeByVenue.venue,
+          venueLabel: resolveVenueLabel(outcomeByVenue.venue, venueInfo, labels),
+          market: outcomeByVenue.market,
+          outcome: outcomeByVenue.outcome,
+          probability: transformedProbability,
+          color: resolveSeriesColor(outcomeByVenue.venue, index)
+        };
+      });
+    };
+    return {
+      yes: buildModeData("yes"),
+      no: buildModeData("no")
+    };
+  }, [labels, probabilityModeConfigs, selectedOutcomesByMode, venueInfo]);
+  const allOutcomesForHistory = useMemo2(() => {
+    const outcomeByModeAndId = /* @__PURE__ */ new Map();
+    probabilityModeOrder.forEach((mode) => {
+      selectedOutcomesByMode[mode].forEach((outcomeByVenue) => {
+        outcomeByModeAndId.set(
+          `${outcomeByVenue.venue}:${outcomeByVenue.outcome.id}`,
+          outcomeByVenue
+        );
+      });
+    });
+    return [...outcomeByModeAndId.values()];
+  }, [selectedOutcomesByMode]);
+  const priceHistoryGroups = useMemo2(() => {
+    return buildPriceHistoryGroups(allOutcomesForHistory, canonicalMarketId);
+  }, [allOutcomesForHistory, canonicalMarketId]);
+  const timeWindow = useMemo2(() => {
+    return getTimeWindowByRange(selectedTimeRange);
+  }, [selectedTimeRange]);
+  const {
+    data: priceHistoryData,
+    isLoading: isPriceHistoryLoading,
+    error: priceHistoryError,
+    results: priceHistoryResults
+  } = usePriceHistory(__spreadProps(__spreadValues({
+    groups: priceHistoryGroups
+  }, timeWindow), {
+    enabled: priceHistoryGroups.length > 0
+  }));
+  const priceHistoryByVenue = useMemo2(() => {
+    const historyByVenue = /* @__PURE__ */ new Map();
+    if (!(priceHistoryData == null ? void 0 : priceHistoryData.length)) {
+      return historyByVenue;
+    }
+    priceHistoryData.forEach((historyItem) => {
+      const venue = historyItem.venue;
+      const venueHistory = historyByVenue.get(venue);
+      if (venueHistory) {
+        venueHistory.push(historyItem);
+        return;
+      }
+      historyByVenue.set(venue, [historyItem]);
+    });
+    return historyByVenue;
+  }, [priceHistoryData]);
+  const chartSeriesByMode = useMemo2(() => {
+    const buildSeries = (mode) => {
+      const modeConfig = probabilityModeConfigs[mode];
+      const chartSeries = [];
+      normalizedVenueDataByMode[mode].forEach((venueData) => {
+        var _a;
+        const venueHistory = priceHistoryByVenue.get(venueData.venue);
+        if (!(venueHistory == null ? void 0 : venueHistory.length))
+          return;
+        const candidateIds = resolveOutcomeCandidateIds(venueData.market, venueData.outcome);
+        const matchingHistory = (_a = venueHistory.find((historyItem) => candidateIds.includes(historyItem.marketId))) != null ? _a : venueHistory.length === 1 ? venueHistory[0] : void 0;
+        if (!matchingHistory)
+          return;
+        const points = matchingHistory.points.map((point) => {
+          const probability = normalizeProbability(point.price);
+          if (probability == null || !Number.isFinite(point.timestamp))
+            return null;
+          return {
+            time: point.timestamp,
+            value: clampProbability(modeConfig.transformProbability(probability)) * 100
+          };
+        }).filter((point) => point != null);
+        if (points.length === 0)
+          return;
+        chartSeries.push({
+          id: `${mode}-${venueData.venue}-${matchingHistory.marketId}`,
+          venue: venueData.venue,
+          color: venueData.color,
+          points,
+          lineWidth: 2,
+          lineStyle: "solid"
+        });
+      });
+      return chartSeries;
+    };
+    return {
+      yes: buildSeries("yes"),
+      no: buildSeries("no")
+    };
+  }, [normalizedVenueDataByMode, priceHistoryByVenue, probabilityModeConfigs]);
+  const visibleChartSeries = useMemo2(() => {
+    const modeSeries = chartSeriesByMode[activeProbabilityMode];
+    if (!selectedVenue)
+      return modeSeries;
+    return modeSeries.filter((seriesItem) => seriesItem.venue === selectedVenue);
+  }, [activeProbabilityMode, chartSeriesByMode, selectedVenue]);
+  const segmentedDisplayItems = useMemo2(() => {
+    return probabilityModeOrder.map((mode) => {
+      const averageProbability = resolveAverageProbability(
+        normalizedVenueDataByMode[mode].map((venueData) => venueData.probability)
+      );
+      const suffix = averageProbability == null ? "" : ` ${formatPercent(averageProbability)}`;
+      const switchLabel = probabilityModeConfigs[mode].switchLabel;
+      return {
+        mode,
+        display: `${switchLabel}${suffix}`
+      };
+    });
+  }, [formatPercent, normalizedVenueDataByMode, probabilityModeConfigs]);
+  const activeModeVenueData = normalizedVenueDataByMode[activeProbabilityMode];
+  useEffect(() => {
+    if (!selectedVenue) {
+      return;
+    }
+    if (activeModeVenueData.some((item) => item.venue === selectedVenue)) {
+      return;
+    }
+    setSelectedVenue(null);
+  }, [activeModeVenueData, selectedVenue]);
+  const handleProbabilityModeChange = (nextMode) => {
+    setActiveProbabilityMode(nextMode);
+    if (isDateOutcomeMarket) {
+      return;
+    }
+    onSelectedOutcomeLabelChange(probabilityModeConfigs[nextMode].sourceOutcomeLabel);
+  };
+  const handleVenueToggle = (venue) => {
+    setSelectedVenue((currentSelectedVenue) => {
+      if (currentSelectedVenue === venue)
+        return null;
+      return venue;
+    });
+  };
+  const handleRetryPriceHistory = () => {
+    void Promise.all(priceHistoryResults.map((result) => result.refetch()));
+  };
+  if (priceHistoryError) {
+    return /* @__PURE__ */ jsx2(
+      "div",
+      {
+        className: cn(
+          "w-full rounded-agg-xl border border-agg-separator bg-agg-secondary",
+          classNames == null ? void 0 : classNames.chart
+        ),
+        children: /* @__PURE__ */ jsx2(
+          StateMessage,
+          {
+            ariaLabel: labels.eventItemDetails.chartUnavailableAria,
+            tone: "warning",
+            title: labels.eventItemDetails.chartUnavailableTitle,
+            description: labels.eventItemDetails.chartUnavailableDescription,
+            actionLabel: labels.common.retry,
+            onAction: handleRetryPriceHistory,
+            className: "min-h-[300px] px-5 py-10 md:px-10"
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx2(
+    LineChart,
+    {
+      classNames: { root: classNames == null ? void 0 : classNames.chart },
+      series: visibleChartSeries,
+      height: 300,
+      isLoading: isPriceHistoryLoading,
+      showSeriesControls: activeModeVenueData.length > 0 || segmentedDisplayItems.length > 0,
+      renderSeriesControls: () => {
+        return /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            className: cn("flex flex-row items-center justify-between gap-4", classNames == null ? void 0 : classNames.summary),
+            children: [
+              /* @__PURE__ */ jsx2(
+                "div",
+                {
+                  className: cn(
+                    "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: activeModeVenueData.map((venueData) => {
+                    var _a;
+                    const text = venueData.probability == null ? "-" : formatPercent(venueData.probability);
+                    const isActiveVenue = selectedVenue === venueData.venue;
+                    return /* @__PURE__ */ jsx2(
+                      "button",
+                      {
+                        type: "button",
+                        "aria-label": `${venueData.venueLabel} ${text}`,
+                        "aria-pressed": isActiveVenue,
+                        className: cn(
+                          "rounded-agg-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-agg-primary focus-visible:ring-offset-2 focus-visible:ring-offset-agg-secondary-hover"
+                        ),
+                        children: /* @__PURE__ */ jsx2(
+                          Badge,
+                          {
+                            text,
+                            size: "large",
+                            prefix: showVenueLogo ? /* @__PURE__ */ jsx2(
+                              VenueLogo,
+                              {
+                                venue: venueData.venue,
+                                size: "small",
+                                title: (_a = venueInfo == null ? void 0 : venueInfo[venueData.venue]) == null ? void 0 : _a.label
+                              }
+                            ) : void 0,
+                            classNames: {
+                              root: cn("h-9 shrink-0 border-2 px-4 text-agg-base leading-agg-6")
+                            },
+                            isActive: isActiveVenue,
+                            onClick: (e) => {
+                              e.preventDefault();
+                              e.stopPropagation();
+                              handleVenueToggle(venueData.venue);
+                            }
+                          }
+                        )
+                      },
+                      `${activeProbabilityMode}-${venueData.market.id}-${venueData.outcome.id}`
+                    );
+                  })
+                }
+              ),
+              /* @__PURE__ */ jsx2(
+                SwitchButton,
+                {
+                  ariaLabel: labels.eventItemDetails.outcomeSelectorAria,
+                  className: cn("w-full md:w-fit", classNames == null ? void 0 : classNames.segmentedControl),
+                  value: activeProbabilityMode,
+                  onValueChange: handleProbabilityModeChange,
+                  options: segmentedDisplayItems.map((segmentedItem) => ({
+                    value: segmentedItem.mode,
+                    label: segmentedItem.display,
+                    ariaLabel: segmentedItem.display
+                  }))
+                }
+              )
+            ]
+          }
+        );
+      }
+    }
+  );
+};
+var EventListItemDetailsContent = ({
+  event,
+  title,
+  image,
+  showVenueLogo = true,
+  classNames,
+  venueInfo,
+  detailsStats,
+  ariaLabel,
+  defaultTimeRange
+}) => {
+  var _a, _b;
+  const config = useSdkUiConfig2();
+  const labels = useLabels2();
+  const venueMarkets = useMemo2(() => {
+    var _a2, _b2, _c;
+    return (_c = (_b2 = (_a2 = event.markets) == null ? void 0 : _a2[0]) == null ? void 0 : _b2.venueMarkets) != null ? _c : [];
+  }, [event.markets]);
+  const primaryVenueMarket = useMemo2(() => {
+    return selectPrimaryVenueMarket(venueMarkets);
+  }, [venueMarkets]);
+  const outcomeLabels = useMemo2(() => {
+    return resolveOutcomeLabels(venueMarkets);
+  }, [venueMarkets]);
+  const [selectedOutcomeLabel, setSelectedOutcomeLabel] = useState(() => {
+    return resolveDefaultOutcomeLabel(outcomeLabels);
+  });
+  const [selectedTimeRange, setSelectedTimeRange] = useState(() => {
+    return getDefaultSelectedTimeRange(defaultTimeRange);
+  });
+  useEffect(() => {
+    setSelectedTimeRange(getDefaultSelectedTimeRange(defaultTimeRange));
+  }, [defaultTimeRange]);
+  const resolvedTitle = resolveTileTitle(event, primaryVenueMarket, title);
+  const resolvedImage = resolveTileImage(event, primaryVenueMarket, image);
+  const isDateOutcomeMarket = outcomeLabels.length > 2 && outcomeLabels.every(isDateLikeLabel);
+  const outcomeSelectorLabels = outcomeLabels;
+  const probabilityByLabel = useMemo2(() => {
+    return new Map(
+      outcomeLabels.map((label) => {
+        const outcomesByVenue = resolveOutcomesByVenue(venueMarkets, label);
+        const probabilities = outcomesByVenue.map((item) => normalizeProbability(item.outcome.price)).filter((value) => value != null);
+        if (probabilities.length === 0) {
+          return [label, void 0];
+        }
+        const averageProbability = probabilities.reduce((sum, value) => sum + value, 0) / probabilities.length;
+        return [label, averageProbability];
+      })
+    );
+  }, [outcomeLabels, venueMarkets]);
+  const mainOutcomeLabel = useMemo2(() => {
+    if (outcomeLabels.length === 0)
+      return void 0;
+    return [...outcomeLabels].sort((left, right) => {
+      var _a2, _b2;
+      const leftProbability = (_a2 = probabilityByLabel.get(left)) != null ? _a2 : -1;
+      const rightProbability = (_b2 = probabilityByLabel.get(right)) != null ? _b2 : -1;
+      return rightProbability - leftProbability;
+    })[0];
+  }, [outcomeLabels, probabilityByLabel]);
+  useEffect(() => {
+    if (!outcomeLabels.length) {
+      setSelectedOutcomeLabel(void 0);
+      return;
+    }
+    if (selectedOutcomeLabel && outcomeLabels.includes(selectedOutcomeLabel)) {
+      return;
+    }
+    const fallbackOutcomeLabel = isDateOutcomeMarket ? resolveDefaultOutcomeLabel(outcomeLabels) : mainOutcomeLabel != null ? mainOutcomeLabel : resolveDefaultOutcomeLabel(outcomeLabels);
+    setSelectedOutcomeLabel(fallbackOutcomeLabel);
+  }, [isDateOutcomeMarket, mainOutcomeLabel, outcomeLabels, selectedOutcomeLabel]);
+  const switchLabels = useMemo2(() => {
+    var _a2, _b2;
+    if (isDateOutcomeMarket) {
+      return [labels.eventItemDetails.yes, labels.eventItemDetails.no];
+    }
+    const sortedOutcomeLabels = [...outcomeLabels].sort((left, right) => {
+      var _a3, _b3;
+      const leftProbability = (_a3 = probabilityByLabel.get(left)) != null ? _a3 : -1;
+      const rightProbability = (_b3 = probabilityByLabel.get(right)) != null ? _b3 : -1;
+      return rightProbability - leftProbability;
+    });
+    const firstLabel = (_a2 = sortedOutcomeLabels[0]) != null ? _a2 : labels.eventItemDetails.yes;
+    const secondLabel = (_b2 = sortedOutcomeLabels.find((label) => label !== firstLabel)) != null ? _b2 : firstLabel;
+    return [firstLabel, secondLabel];
+  }, [
+    isDateOutcomeMarket,
+    labels.eventItemDetails.no,
+    labels.eventItemDetails.yes,
+    outcomeLabels,
+    probabilityByLabel
+  ]);
+  const volumeLabel = useMemo2(() => {
+    var _a2;
+    const resolvedVolume = typeof event.volume === "number" ? event.volume : (_a2 = primaryVenueMarket == null ? void 0 : primaryVenueMarket.volume) != null ? _a2 : void 0;
+    if (typeof resolvedVolume !== "number")
+      return "";
+    return `${config.formatCompactCurrency(resolvedVolume)} ${labels.eventItemDetails.volumeSuffix}`;
+  }, [config, event.volume, labels.eventItemDetails.volumeSuffix, primaryVenueMarket == null ? void 0 : primaryVenueMarket.volume]);
+  if (!primaryVenueMarket || !selectedOutcomeLabel) {
+    return /* @__PURE__ */ jsx2(EventListItemDetailsUnavailableState, { classNames, ariaLabel });
+  }
+  return /* @__PURE__ */ jsxs2(
+    Card,
+    {
+      className: cn(detailsBaseCardClassName, classNames == null ? void 0 : classNames.root),
+      "aria-label": ariaLabel != null ? ariaLabel : resolvedTitle,
+      children: [
+        /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            className: cn(
+              "flex flex-row gap-3 md:gap-4",
+              "items-center justify-start",
+              classNames == null ? void 0 : classNames.header
+            ),
+            children: [
+              resolvedImage ? /* @__PURE__ */ jsx2(
+                "img",
+                {
+                  src: resolvedImage,
+                  alt: "",
+                  className: "size-10 rounded-agg-lg object-cover md:size-[60px]"
+                }
+              ) : null,
+              /* @__PURE__ */ jsxs2("div", { className: "flex min-w-0 flex-1 flex-col gap-3", children: [
+                /* @__PURE__ */ jsx2(
+                  Typography,
+                  {
+                    variant: "body-strong",
+                    className: cn(
+                      "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: resolvedTitle
+                  }
+                ),
+                outcomeSelectorLabels.length > 2 ? /* @__PURE__ */ jsx2(
+                  "div",
+                  {
+                    className: cn(
+                      "flex items-center gap-2 overflow-x-auto pb-1 md:flex-wrap md:overflow-visible md:pb-0",
+                      classNames == null ? void 0 : classNames.headerPills
+                    ),
+                    children: outcomeSelectorLabels.map((outcomeSelectorLabel) => {
+                      const isActive = outcomeSelectorLabel === selectedOutcomeLabel;
+                      const displayLabel = isDateLikeLabel(outcomeSelectorLabel) ? formatDateLabel(outcomeSelectorLabel) : outcomeSelectorLabel;
+                      return /* @__PURE__ */ jsx2(
+                        Button,
+                        {
+                          size: "small",
+                          variant: "secondary",
+                          "aria-pressed": isActive,
+                          className: cn(
+                            "h-auto shrink-0 rounded-agg-full px-4 py-1.5 text-agg-sm leading-agg-5",
+                            "border-2",
+                            isActive ? "border-agg-primary bg-agg-secondary text-agg-foreground font-agg-bold" : "border-transparent bg-agg-secondary-hover text-agg-foreground font-agg-normal"
+                          ),
+                          onClick: () => setSelectedOutcomeLabel(outcomeSelectorLabel),
+                          children: displayLabel
+                        },
+                        outcomeSelectorLabel
+                      );
+                    })
+                  }
+                ) : null
+              ] })
+            ]
+          }
+        ),
+        detailsStats && detailsStats.length > 0 ? /* @__PURE__ */ jsx2("div", { className: cn("flex flex-wrap items-start gap-4 md:gap-6", classNames == null ? void 0 : classNames.headerStats), children: detailsStats.map((statItem) => {
+          const deltaClassName = statItem.deltaTone === "positive" ? "text-agg-success!" : statItem.deltaTone === "negative" ? "text-agg-error!" : "text-agg-muted-foreground";
+          return /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ jsx2(Typography, { variant: "caption-caps", className: "text-agg-muted-foreground", children: statItem.label }),
+            /* @__PURE__ */ jsxs2("div", { className: "flex items-baseline gap-1", children: [
+              /* @__PURE__ */ jsx2(
+                Typography,
+                {
+                  variant: "body",
+                  className: "text-agg-lg leading-agg-7 text-agg-foreground",
+                  children: statItem.value
+                }
+              ),
+              statItem.delta ? /* @__PURE__ */ jsx2(Typography, { variant: "label", className: cn(deltaClassName), children: statItem.delta }) : null
+            ] })
+          ] }, `${statItem.label}-${statItem.value}`);
+        }) }) : null,
+        /* @__PURE__ */ jsx2(
+          EventListItemDetailsGraphSection,
+          {
+            venueMarkets,
+            canonicalMarketId: (_b = (_a = event.markets) == null ? void 0 : _a[0]) == null ? void 0 : _b.id,
+            selectedOutcomeLabel,
+            onSelectedOutcomeLabelChange: setSelectedOutcomeLabel,
+            switchLabels,
+            isDateOutcomeMarket,
+            classNames,
+            showVenueLogo,
+            venueInfo,
+            formatPercent: config.formatPercent,
+            selectedTimeRange
+          }
+        ),
+        /* @__PURE__ */ jsxs2("div", { className: cn("flex flex-wrap items-center justify-between gap-4", classNames == null ? void 0 : classNames.footer), children: [
+          /* @__PURE__ */ jsx2(Typography, { variant: "label", className: "text-agg-muted-foreground", children: volumeLabel || "-" }),
+          /* @__PURE__ */ jsx2("div", { className: cn("flex items-center gap-2 md:gap-3", classNames == null ? void 0 : classNames.timeRange), children: eventListItemDetailsTimeRanges.map((timeRange) => {
+            const isActive = timeRange === selectedTimeRange;
+            return /* @__PURE__ */ jsx2(
+              Button,
+              {
+                size: "small",
+                variant: "tertiary",
+                className: cn(
+                  "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: () => setSelectedTimeRange(timeRange),
+                children: timeRange === "ALL" ? labels.eventItemDetails.allTimeRange : timeRange
+              },
+              timeRange
+            );
+          }) })
+        ] })
+      ]
+    }
+  );
+};
+var EventListItemDetailsByEventId = (_a) => {
+  var _b = _a, {
+    eventId
+  } = _b, rest = __objRest(_b, [
+    "eventId"
+  ]);
+  const {
+    event: fetchedEvent,
+    error,
+    isError,
+    isLoading
+  } = useEvent2(eventId, {
+    enabled: !!eventId
+  });
+  const resolvedEvent = useMemo2(() => {
+    return resolveEventListItemEvent(fetchedEvent);
+  }, [fetchedEvent]);
+  if (!eventId) {
+    return /* @__PURE__ */ jsx2(
+      EventListItemDetailsUnavailableState,
+      {
+        classNames: rest.classNames,
+        ariaLabel: rest.ariaLabel
+      }
+    );
+  }
+  if (isLoading) {
+    return /* @__PURE__ */ jsx2(EventListItemDetailsLoadingState, { classNames: rest.classNames, ariaLabel: rest.ariaLabel });
+  }
+  if (isErrorWithStatus(error, 404)) {
+    return /* @__PURE__ */ jsx2(EventListItemDetailsNotFoundState, { classNames: rest.classNames, ariaLabel: rest.ariaLabel });
+  }
+  if (!fetchedEvent && !isError) {
+    return /* @__PURE__ */ jsx2(EventListItemDetailsLoadingState, { classNames: rest.classNames, ariaLabel: rest.ariaLabel });
+  }
+  if (!resolvedEvent) {
+    return /* @__PURE__ */ jsx2(
+      EventListItemDetailsUnavailableState,
+      {
+        classNames: rest.classNames,
+        ariaLabel: rest.ariaLabel
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx2(EventListItemDetailsContent, __spreadValues({ event: resolvedEvent }, rest));
+};
+var EventListItemDetails = (props) => {
+  if (props.isLoading) {
+    return /* @__PURE__ */ jsx2(EventListItemDetailsLoadingState, { classNames: props.classNames, ariaLabel: props.ariaLabel });
+  }
+  if ("event" in props && props.event) {
+    const _a = props, { event } = _a, rest = __objRest(_a, ["event"]);
+    return /* @__PURE__ */ jsx2(EventListItemDetailsContent, __spreadValues({ event }, rest));
+  }
+  if ("eventId" in props && typeof props.eventId === "string") {
+    const {
+      title: titleOverride,
+      image: imageOverride,
+      showVenueLogo: showVenueLogoOverride,
+      classNames,
+      venueInfo,
+      detailsStats,
+      ariaLabel: ariaLabelOverride,
+      defaultTimeRange: defaultTimeRangeOverride
+    } = props;
+    const byEventIdProps = {
+      eventId: props.eventId,
+      isLoading: false,
+      title: titleOverride,
+      image: imageOverride,
+      showVenueLogo: showVenueLogoOverride,
+      classNames,
+      venueInfo,
+      detailsStats,
+      ariaLabel: ariaLabelOverride,
+      defaultTimeRange: defaultTimeRangeOverride
+    };
+    return /* @__PURE__ */ jsx2(EventListItemDetailsByEventId, __spreadValues({}, byEventIdProps));
+  }
+  return /* @__PURE__ */ jsx2(
+    EventListItemDetailsUnavailableState,
+    {
+      classNames: props.classNames,
+      ariaLabel: props.ariaLabel
+    }
+  );
+};
+EventListItemDetails.displayName = "EventListItemDetails";
+
+// src/events/market-details/index.tsx
+import { useEffect as useEffect2, useId, useMemo as useMemo3, useState as useState2 } from "react";
+import {
+  useEvent as useEvent3,
+  useLabels as useLabels3,
+  useOrderBook,
+  usePriceHistory as usePriceHistory2,
+  useSdkUiConfig as useSdkUiConfig3
+} from "@agg-market/hooks";
+
+// src/events/market-details/market-details.utils.ts
+import dayjs3 from "dayjs";
+import { z } from "zod";
+var MarketDetailsTabSchema = z.enum(["order-book", "graph", "other"]);
+var OrderBookLevelSchema = z.object({
+  price: z.number().min(0).max(1),
+  size: z.number().nonnegative()
+});
+var OrderBookRowSchema = z.object({
+  id: z.string(),
+  venue: z.enum(["kalshi", "polymarket"]),
+  price: z.number().min(0).max(1),
+  size: z.number().nonnegative(),
+  total: z.number().nonnegative(),
+  tone: z.enum(["positive", "negative"])
+});
+var normalizeLabel2 = (value) => {
+  return value.trim().toLowerCase();
+};
+var hasBinaryLabels = (labels) => {
+  const normalizedLabels = labels.map(normalizeLabel2);
+  return normalizedLabels.includes("yes") && normalizedLabels.includes("no");
+};
+var resolveInitialTab = (defaultTab) => {
+  const parsedTab = MarketDetailsTabSchema.safeParse(defaultTab);
+  if (parsedTab.success)
+    return parsedTab.data;
+  return "order-book";
+};
+var resolveMarket = (event, marketId) => {
+  if (!event.markets.length)
+    return void 0;
+  if (!marketId)
+    return event.markets[0];
+  return event.markets.find((market) => market.id === marketId);
+};
+var resolveDisplayOutcomeLabels = (labels) => {
+  if (!hasBinaryLabels(labels))
+    return labels;
+  return ["Yes", "No"].filter(
+    (label) => labels.some((value) => normalizeLabel2(value) === normalizeLabel2(label))
+  );
+};
+var resolveInitialOutcomeLabel = (labels, defaultOutcomeLabel) => {
+  var _a;
+  if (labels.length === 0)
+    return void 0;
+  if (defaultOutcomeLabel) {
+    const matchedLabel = labels.find(
+      (label) => normalizeLabel2(label) === normalizeLabel2(defaultOutcomeLabel)
+    );
+    if (matchedLabel)
+      return matchedLabel;
+  }
+  if (hasBinaryLabels(labels)) {
+    return (_a = labels.find((label) => normalizeLabel2(label) === "yes")) != null ? _a : labels[0];
+  }
+  return labels[0];
+};
+var resolveAverageProbabilityByLabel = (venueMarkets, labels) => {
+  return new Map(
+    labels.map((label) => {
+      const matchingOutcomes = resolveOutcomesByVenue(venueMarkets, label);
+      const probabilities = matchingOutcomes.map((item) => normalizeProbability(item.outcome.price)).filter((value) => value != null);
+      if (!probabilities.length) {
+        return [label, void 0];
+      }
+      const averageProbability = probabilities.reduce((sum, value) => sum + value, 0) / probabilities.length;
+      return [label, averageProbability];
+    })
+  );
+};
+var formatProbabilityPercent = (value) => {
+  if (value == null)
+    return "-";
+  return `${Math.round(value * 100)}%`;
+};
+var formatProbabilityCents = (value) => {
+  if (value == null)
+    return "-";
+  const cents = (value * 100).toFixed(1).replace(/\.0$/, "");
+  return `${cents}\xA2`;
+};
+var resolveOutcomeTone = (label, index) => {
+  const normalizedLabel = normalizeLabel2(label);
+  if (normalizedLabel === "yes" || normalizedLabel === "up" || normalizedLabel === "buy") {
+    return "positive";
+  }
+  if (normalizedLabel === "no" || normalizedLabel === "down" || normalizedLabel === "sell") {
+    return "negative";
+  }
+  return index === 0 ? "positive" : "negative";
+};
+var resolveHeaderOutcomeItems = (venueMarkets, defaultOutcomeLabel) => {
+  const labels = resolveDisplayOutcomeLabels(resolveOutcomeLabels(venueMarkets));
+  const probabilityByLabel = resolveAverageProbabilityByLabel(venueMarkets, labels);
+  return labels.slice(0, 2).map((label, index) => {
+    var _a;
+    return {
+      label,
+      probability: probabilityByLabel.get(label),
+      tone: resolveOutcomeTone(label, index),
+      isDefault: normalizeLabel2(label) === normalizeLabel2((_a = defaultOutcomeLabel != null ? defaultOutcomeLabel : labels[0]) != null ? _a : "")
+    };
+  });
+};
+var resolveSubtitle = ({
+  venueMarkets,
+  volume,
+  formatCompactCurrency,
+  labels
+}) => {
+  const { venueCount } = getVenueSummary(venueMarkets);
+  const parts = [
+    `${venueCount} ${venueCount === 1 ? labels.marketDetails.meta.venueSingular : labels.marketDetails.meta.venuePlural}`
+  ];
+  if (typeof volume === "number") {
+    parts.push(`${formatCompactCurrency(volume)} ${labels.marketDetails.meta.volumeSuffix}`);
+  }
+  return parts.join(" \xB7 ");
+};
+var resolveOrderBookRows = ({
+  data,
+  side
+}) => {
+  if (!(data == null ? void 0 : data.length))
+    return [];
+  const tone = side === "asks" ? "negative" : "positive";
+  const rows = data.flatMap((result) => {
+    var _a;
+    return ((_a = result.orderbook[side]) != null ? _a : []).flatMap(
+      (level, index) => {
+        const parsedLevel = OrderBookLevelSchema.safeParse(level);
+        if (!parsedLevel.success)
+          return [];
+        const parsedRow = OrderBookRowSchema.safeParse({
+          id: `${result.market.id}-${side}-${index}-${parsedLevel.data.price}`,
+          venue: result.market.venue,
+          price: parsedLevel.data.price,
+          size: parsedLevel.data.size,
+          total: parsedLevel.data.price * parsedLevel.data.size,
+          tone
+        });
+        if (!parsedRow.success)
+          return [];
+        return [parsedRow.data];
+      }
+    );
+  });
+  const sortedRows = [...rows].sort((left, right) => {
+    if (side === "asks")
+      return left.price - right.price;
+    return right.price - left.price;
+  });
+  const maxTotal = sortedRows.reduce((currentMax, row) => Math.max(currentMax, row.total), 0) || 1;
+  return sortedRows.map((row) => __spreadProps(__spreadValues({}, row), {
+    barScale: row.total / maxTotal
+  }));
+};
+var resolveOtherTabRows = (market, labels) => {
+  var _a;
+  const rows = [];
+  rows.push({
+    label: labels.marketDetails.meta.status,
+    value: (_a = market.status) != null ? _a : labels.marketDetails.meta.unknown
+  });
+  if (market.creationDate) {
+    rows.push({
+      label: labels.marketDetails.meta.created,
+      value: dayjs3(market.creationDate).format("MMM D, YYYY")
+    });
+  }
+  if (market.startDate) {
+    rows.push({
+      label: labels.marketDetails.meta.opens,
+      value: dayjs3(market.startDate).format("MMM D, YYYY")
+    });
+  }
+  if (market.endDate) {
+    rows.push({
+      label: labels.marketDetails.meta.closes,
+      value: dayjs3(market.endDate).format("MMM D, YYYY")
+    });
+  }
+  if (rows.length === 1) {
+    rows.push({
+      label: labels.marketDetails.meta.markets,
+      value: `${market.venueMarkets.length}`
+    });
+  }
+  return rows;
+};
+var buildMarketDetailsModel = ({
+  event,
+  marketId,
+  title,
+  image,
+  formatCompactCurrency,
+  labels
+}) => {
+  var _a;
+  const market = resolveMarket(event, marketId);
+  if (!market)
+    return void 0;
+  const primaryVenueMarket = selectPrimaryVenueMarket(market.venueMarkets);
+  if (!primaryVenueMarket)
+    return void 0;
+  const resolvedTitle = resolveTileTitle(event, primaryVenueMarket, title);
+  const resolvedImage = resolveTileImage(event, primaryVenueMarket, image);
+  const resolvedVolume = typeof market.volume === "number" ? market.volume : (_a = primaryVenueMarket.volume) != null ? _a : void 0;
+  const subtitle = resolveSubtitle({
+    venueMarkets: market.venueMarkets,
+    volume: resolvedVolume,
+    formatCompactCurrency,
+    labels
+  });
+  const outcomeLabels = resolveDisplayOutcomeLabels(resolveOutcomeLabels(market.venueMarkets));
+  const probabilityByLabel = resolveAverageProbabilityByLabel(market.venueMarkets, outcomeLabels);
+  return {
+    market,
+    primaryVenueMarket,
+    title: resolvedTitle,
+    image: resolvedImage,
+    subtitle,
+    outcomeLabels,
+    probabilityByLabel
+  };
+};
+
+// src/events/market-details/index.tsx
+import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var MarketDetailsLoadingState = ({
+  isOpened = marketDetailsDefaultIsOpened,
+  ariaLabel,
+  classNames
+}) => {
+  const labels = useLabels3();
+  return /* @__PURE__ */ jsx3(
+    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 = useLabels3();
+  return /* @__PURE__ */ jsx3(
+    Card,
+    {
+      className: cn(marketDetailsBaseCardClassName, classNames == null ? void 0 : classNames.root),
+      role: "status",
+      "aria-label": ariaLabel != null ? ariaLabel : labels.marketDetails.unavailableAria,
+      children: /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-1 p-5", children: [
+        /* @__PURE__ */ jsx3(Typography, { variant: "body-large-strong", children: labels.marketDetails.unavailableTitle }),
+        /* @__PURE__ */ jsx3(Typography, { variant: "label", className: "text-agg-muted-foreground", children: labels.marketDetails.unavailableDescription })
+      ] })
+    }
+  );
+};
+var MarketDetailsNotFoundState = ({
+  ariaLabel,
+  classNames
+}) => {
+  const labels = useLabels3();
+  return /* @__PURE__ */ jsx3(Card, { className: cn(marketDetailsBaseCardClassName, "p-0", classNames == null ? void 0 : classNames.root), children: /* @__PURE__ */ jsx3(
+    StateMessage,
+    {
+      ariaLabel: ariaLabel != null ? ariaLabel : labels.marketDetails.notFoundAria,
+      title: labels.marketDetails.notFoundTitle,
+      description: labels.marketDetails.notFoundDescription,
+      className: "min-h-[280px] md:min-h-[320px]"
+    }
+  ) });
+};
+var OrderBookRows = ({
+  rows,
+  title,
+  formatNumber,
+  formatCurrency,
+  visibleRows
+}) => {
+  const labels = useLabels3();
+  const isAsks = title === labels.marketDetails.asks;
+  const priceClassName = isAsks ? "text-agg-orderbook-ask" : "text-agg-orderbook-bid";
+  const barClassName = isAsks ? "bg-agg-orderbook-ask/10" : "bg-agg-orderbook-bid/10";
+  const maxVisibleRows = Math.max(1, visibleRows);
+  const orderBookRowHeightPx = 28;
+  const orderBookDividerHeightPx = 1;
+  const orderBookRowGapPx = 8;
+  const orderBookVisibleHeightPx = maxVisibleRows * orderBookRowHeightPx + Math.max(0, maxVisibleRows - 1) * (orderBookDividerHeightPx + orderBookRowGapPx);
+  return /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsx3(Typography, { variant: "caption-caps", children: title }),
+    /* @__PURE__ */ jsx3(
+      "div",
+      {
+        className: "overflow-y-auto pr-1 flex flex-col gap-2",
+        style: { maxHeight: `${orderBookVisibleHeightPx}px` },
+        role: "region",
+        "aria-label": `${title} order book levels`,
+        children: rows.map((row, index) => /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ jsxs3("div", { className: "grid grid-cols-[52px_1fr_1fr_52px] items-center gap-2 md:grid-cols-[88px_1fr_1fr_minmax(120px,220px)] md:gap-6", children: [
+            /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-1 md:gap-3", children: [
+              /* @__PURE__ */ jsx3(VenueLogo, { venue: row.venue, size: "small" }),
+              /* @__PURE__ */ jsx3(
+                "span",
+                {
+                  className: cn(
+                    "text-agg-xs font-agg-bold leading-agg-4 md:text-agg-sm md:leading-agg-5",
+                    priceClassName
+                  ),
+                  children: formatProbabilityCents(row.price)
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx3("span", { className: "truncate text-agg-xs leading-agg-4 text-center text-agg-foreground md:text-agg-sm md:leading-agg-5", children: formatNumber(row.size) }),
+            /* @__PURE__ */ jsx3("span", { className: "truncate text-agg-xs leading-agg-4 text-center text-agg-foreground md:text-agg-sm md:leading-agg-5", children: formatCurrency(row.total) }),
+            /* @__PURE__ */ jsx3("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx3(
+              "div",
+              {
+                "aria-hidden": "true",
+                className: cn("h-2 rounded-agg-full", barClassName),
+                style: {
+                  width: `${Math.max(20, Math.round(row.barScale * 100))}%`
+                }
+              }
+            ) })
+          ] }),
+          index < rows.length - 1 ? /* @__PURE__ */ jsx3("div", { className: "h-px w-full bg-agg-separator" }) : null
+        ] }, row.id))
+      }
+    )
+  ] });
+};
+var getOutcomeButtonClassName = ({
+  enableAnimations,
+  isPositive,
+  isActive
+}) => {
+  const defaultStateClassName = isPositive ? "border-[#18c15c]/50 bg-[#18c15c]/5 text-agg-foreground hover:bg-[#18c15c]/10" : "border-[#e5455f]/50 bg-[#e5455f]/5 text-agg-foreground hover:bg-[#e5455f]/10";
+  const activeStateClassName = isPositive ? "border-transparent bg-[#18c15c] text-agg-on-primary" : "border-transparent bg-[#e5455f] text-agg-on-primary";
+  return cn(
+    "h-auto min-h-10 flex-1 rounded-agg-full border px-4 py-1.5 text-agg-base leading-agg-6 shadow-none md:flex-none md:min-w-[168px]",
+    getMotionClassName(enableAnimations, "transition-all duration-300 ease-in-out"),
+    isActive ? activeStateClassName : defaultStateClassName,
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-agg-primary focus-visible:ring-offset-2 focus-visible:ring-offset-agg-secondary-hover",
+    "cursor-pointer disabled:cursor-not-allowed disabled:text-agg-muted-foreground",
+    isActive ? "font-agg-bold" : "font-agg-normal"
+  );
+};
+var MarketDetailsContent = ({
+  event,
+  marketId,
+  title,
+  image,
+  isOpened: defaultIsOpened = marketDetailsDefaultIsOpened,
+  onOpenChange,
+  defaultTab,
+  defaultOutcomeLabel,
+  defaultTimeRange = "1M",
+  orderBookDepth = orderBookRowLimitDefault,
+  ariaLabel,
+  classNames,
+  otherContent
+}) => {
+  const config = useSdkUiConfig3();
+  const labels = useLabels3();
+  const detailsContentId = useId();
+  const model = useMemo3(() => {
+    return buildMarketDetailsModel({
+      event,
+      marketId,
+      title,
+      image,
+      formatCompactCurrency: config.formatCompactCurrency,
+      labels
+    });
+  }, [config.formatCompactCurrency, event, image, labels, marketId, title]);
+  const resolvedMarket = useMemo3(() => {
+    return resolveMarket(event, marketId);
+  }, [event, marketId]);
+  const marketDetailsTabs = useMemo3(() => {
+    return getMarketDetailsTabs(labels);
+  }, [labels]);
+  const [selectedTab, setSelectedTab] = useState2(
+    () => resolveInitialTab(defaultTab)
+  );
+  const [isOpened, setIsOpened] = useState2(defaultIsOpened);
+  useEffect2(() => {
+    setSelectedTab(resolveInitialTab(defaultTab));
+  }, [defaultTab]);
+  const [selectedTimeRange, setSelectedTimeRange] = useState2(defaultTimeRange);
+  useEffect2(() => {
+    setSelectedTimeRange(defaultTimeRange);
+  }, [defaultTimeRange]);
+  const [selectedOutcomeLabel, setSelectedOutcomeLabel] = useState2(
+    () => {
+      var _a;
+      return resolveInitialOutcomeLabel((_a = model == null ? void 0 : model.outcomeLabels) != null ? _a : [], defaultOutcomeLabel);
+    }
+  );
+  const [selectedGraphVenue, setSelectedGraphVenue] = useState2(null);
+  useEffect2(() => {
+    var _a;
+    setSelectedOutcomeLabel(
+      resolveInitialOutcomeLabel((_a = model == null ? void 0 : model.outcomeLabels) != null ? _a : [], defaultOutcomeLabel)
+    );
+  }, [defaultOutcomeLabel, model == null ? void 0 : model.outcomeLabels]);
+  const headerOutcomeItems = useMemo3(() => {
+    if (!model)
+      return [];
+    return resolveHeaderOutcomeItems(model.market.venueMarkets, selectedOutcomeLabel);
+  }, [model, selectedOutcomeLabel]);
+  const headlineProbability = useMemo3(() => {
+    if (!model || !selectedOutcomeLabel)
+      return void 0;
+    return model.probabilityByLabel.get(selectedOutcomeLabel);
+  }, [model, selectedOutcomeLabel]);
+  const outcomesByLabel = useMemo3(() => {
+    const outcomesByLabelMap = /* @__PURE__ */ new Map();
+    if (!model) {
+      return outcomesByLabelMap;
+    }
+    headerOutcomeItems.forEach((headerOutcomeItem) => {
+      outcomesByLabelMap.set(
+        headerOutcomeItem.label,
+        resolveOutcomesByVenue(model.market.venueMarkets, headerOutcomeItem.label)
+      );
+    });
+    return outcomesByLabelMap;
+  }, [headerOutcomeItems, model]);
+  const selectedOutcomesByVenue = useMemo3(() => {
+    var _a;
+    if (!selectedOutcomeLabel)
+      return [];
+    return (_a = outcomesByLabel.get(selectedOutcomeLabel)) != null ? _a : [];
+  }, [outcomesByLabel, selectedOutcomeLabel]);
+  const timeWindow = useMemo3(() => {
+    return getTimeWindowByRange(selectedTimeRange);
+  }, [selectedTimeRange]);
+  const graphOutcomes = useMemo3(() => {
+    const uniqueOutcomesByVenueAndId = /* @__PURE__ */ new Map();
+    outcomesByLabel.forEach((outcomes) => {
+      outcomes.forEach((outcomeByVenue) => {
+        uniqueOutcomesByVenueAndId.set(
+          `${outcomeByVenue.venue}:${outcomeByVenue.outcome.id}`,
+          outcomeByVenue
+        );
+      });
+    });
+    return [...uniqueOutcomesByVenueAndId.values()];
+  }, [outcomesByLabel]);
+  const canonicalMarketIdForHistory = model == null ? void 0 : model.market.id;
+  const priceHistoryGroups = useMemo3(() => {
+    return buildPriceHistoryGroups(graphOutcomes, canonicalMarketIdForHistory);
+  }, [canonicalMarketIdForHistory, graphOutcomes]);
+  const { data: priceHistoryData, isLoading: isPriceHistoryLoading } = usePriceHistory2(__spreadProps(__spreadValues({
+    groups: priceHistoryGroups
+  }, timeWindow), {
+    enabled: isOpened && selectedTab === "graph" && priceHistoryGroups.length > 0
+  }));
+  const orderBookInputs = useMemo3(() => {
+    return selectedOutcomesByVenue.map(({ market, outcome }) => ({
+      market,
+      outcome,
+      liveUpdate: true
+    }));
+  }, [selectedOutcomesByVenue]);
+  const {
+    data: orderBookData,
+    isLoading: isOrderBookLoading,
+    error: orderBookError,
+    results: orderBookResults
+  } = useOrderBook({
+    orderbooks: orderBookInputs,
+    enabled: isOpened && selectedTab === "order-book" && orderBookInputs.length > 0
+  });
+  const askRows = useMemo3(() => {
+    return resolveOrderBookRows({
+      data: orderBookData,
+      side: "asks"
+    });
+  }, [orderBookData]);
+  const bidRows = useMemo3(() => {
+    return resolveOrderBookRows({
+      data: orderBookData,
+      side: "bids"
+    });
+  }, [orderBookData]);
+  const priceHistoryByVenue = useMemo3(() => {
+    const historyByVenue = /* @__PURE__ */ new Map();
+    if (!(priceHistoryData == null ? void 0 : priceHistoryData.length)) {
+      return historyByVenue;
+    }
+    priceHistoryData.forEach((historyItem) => {
+      const venue = historyItem.venue;
+      const venueHistory = historyByVenue.get(venue);
+      if (venueHistory) {
+        venueHistory.push(historyItem);
+        return;
+      }
+      historyByVenue.set(venue, [historyItem]);
+    });
+    return historyByVenue;
+  }, [priceHistoryData]);
+  const graphSeriesByOutcomeLabel = useMemo3(() => {
+    const seriesByOutcomeLabel = /* @__PURE__ */ new Map();
+    const resolveOutcomeCandidateIds2 = (outcomeByVenue) => {
+      var _a, _b;
+      const marketWithCanonicalId = outcomeByVenue.market;
+      return [
+        outcomeByVenue.outcome.id,
+        (_a = outcomeByVenue.outcome.externalIdentifier) != null ? _a : void 0,
+        outcomeByVenue.market.externalIdentifier,
+        (_b = marketWithCanonicalId.marketId) != null ? _b : void 0,
+        canonicalMarketIdForHistory
+      ].filter((value) => typeof value === "string" && value.trim().length > 0);
+    };
+    headerOutcomeItems.forEach((headerOutcomeItem) => {
+      var _a;
+      const outcomes = (_a = outcomesByLabel.get(headerOutcomeItem.label)) != null ? _a : [];
+      const graphSeries2 = [];
+      outcomes.forEach((outcomeByVenue, index) => {
+        var _a2;
+        const venueHistory = priceHistoryByVenue.get(outcomeByVenue.venue);
+        if (!(venueHistory == null ? void 0 : venueHistory.length))
+          return;
+        const candidateIds = resolveOutcomeCandidateIds2(outcomeByVenue);
+        const matchingHistory = (_a2 = venueHistory.find((historyItem) => candidateIds.includes(historyItem.marketId))) != null ? _a2 : venueHistory.length === 1 ? venueHistory[0] : void 0;
+        if (!matchingHistory)
+          return;
+        const points = matchingHistory.points.map((point) => ({
+          time: point.timestamp,
+          value: point.price * 100
+        })).filter((point) => Number.isFinite(point.time) && Number.isFinite(point.value));
+        if (points.length === 0)
+          return;
+        graphSeries2.push({
+          id: `${headerOutcomeItem.label}-${outcomeByVenue.venue}-${matchingHistory.marketId}`,
+          venue: outcomeByVenue.venue,
+          color: resolveSeriesColor(outcomeByVenue.venue, index),
+          points
+        });
+      });
+      seriesByOutcomeLabel.set(headerOutcomeItem.label, graphSeries2);
+    });
+    return seriesByOutcomeLabel;
+  }, [canonicalMarketIdForHistory, headerOutcomeItems, outcomesByLabel, priceHistoryByVenue]);
+  const graphSeries = useMemo3(() => {
+    var _a;
+    if (!selectedOutcomeLabel)
+      return [];
+    const seriesForOutcomeLabel = (_a = graphSeriesByOutcomeLabel.get(selectedOutcomeLabel)) != null ? _a : [];
+    if (!selectedGraphVenue)
+      return seriesForOutcomeLabel;
+    return seriesForOutcomeLabel.filter((seriesItem) => seriesItem.venue === selectedGraphVenue);
+  }, [graphSeriesByOutcomeLabel, selectedGraphVenue, selectedOutcomeLabel]);
+  const otherRows = useMemo3(() => {
+    if (!model)
+      return [];
+    return resolveOtherTabRows(model.market, labels);
+  }, [labels, model]);
+  const isOrderBookNotFound = isErrorWithStatus(orderBookError, 404);
+  const hasOrderBookError = !!orderBookError && !isOrderBookNotFound;
+  const hasNoOrderBook = isOrderBookNotFound || !isOrderBookLoading && !hasOrderBookError && (orderBookInputs.length === 0 || askRows.length === 0 && bidRows.length === 0);
+  const handleOutcomeKeyDown = (eventToHandle) => {
+    var _a;
+    if ((eventToHandle == null ? void 0 : eventToHandle.key) !== "ArrowLeft" && (eventToHandle == null ? void 0 : eventToHandle.key) !== "ArrowRight") {
+      return;
+    }
+    if (headerOutcomeItems.length <= 1)
+      return;
+    const activeIndex = headerOutcomeItems.findIndex((item) => {
+      return item.label === selectedOutcomeLabel;
+    });
+    const direction = eventToHandle.key === "ArrowRight" ? 1 : -1;
+    const nextIndex = activeIndex < 0 ? 0 : (activeIndex + direction + headerOutcomeItems.length) % headerOutcomeItems.length;
+    setSelectedOutcomeLabel((_a = headerOutcomeItems[nextIndex]) == null ? void 0 : _a.label);
+  };
+  const handleToggleExpanded = (event2) => {
+    if (event2 && "key" in event2 && (event2 == null ? void 0 : event2.key) !== "Enter" && (event2 == null ? void 0 : event2.key) !== " ") {
+      return;
+    }
+    event2 == null ? void 0 : event2.preventDefault();
+    event2 == null ? void 0 : event2.stopPropagation();
+    setIsOpened((prev) => {
+      const next = !prev;
+      onOpenChange == null ? void 0 : onOpenChange(next);
+      return next;
+    });
+  };
+  const handleGraphVenueToggle = (venue) => {
+    setSelectedGraphVenue((currentVenue) => {
+      if (currentVenue === venue)
+        return null;
+      return venue;
+    });
+  };
+  const handleRetryOrderBook = () => {
+    void Promise.all(orderBookResults.map((result) => result.refetch()));
+  };
+  useEffect2(() => {
+    if (!selectedGraphVenue) {
+      return;
+    }
+    if (selectedOutcomesByVenue.some((item) => item.venue === selectedGraphVenue)) {
+      return;
+    }
+    setSelectedGraphVenue(null);
+  }, [selectedGraphVenue, selectedOutcomesByVenue]);
+  if (marketId && !resolvedMarket) {
+    return /* @__PURE__ */ jsx3(MarketDetailsNotFoundState, { ariaLabel, classNames });
+  }
+  if (!model) {
+    return /* @__PURE__ */ jsx3(MarketDetailsUnavailableState, { ariaLabel, classNames });
+  }
+  return /* @__PURE__ */ jsxs3(
+    Card,
+    {
+      className: cn(
+        "w-full rounded-agg-2xl text-left outline-none",
+        marketDetailsBaseCardClassName,
+        classNames == null ? void 0 : classNames.root
+      ),
+      children: [
+        /* @__PURE__ */ jsxs3(
+          "div",
+          {
+            className: cn(
+              "cursor-pointer disabled:cursor-default",
+              "flex flex-wrap flex-row items-center justify-between gap-3 px-5 py-4",
+              isOpened && "pb-3",
+              classNames == null ? void 0 : classNames.header
+            ),
+            "aria-expanded": isOpened,
+            "aria-controls": detailsContentId,
+            role: "button",
+            tabIndex: 0,
+            "aria-label": isOpened ? labels.marketDetails.toggleCloseDetailsAria(model.title) : labels.marketDetails.toggleOpenDetailsAria(model.title),
+            onClick: handleToggleExpanded,
+            onKeyDown: handleToggleExpanded,
+            children: [
+              /* @__PURE__ */ jsxs3("div", { className: "flex min-w-52 items-center gap-3 md:gap-4", children: [
+                model.image ? /* @__PURE__ */ jsx3(
+                  "img",
+                  {
+                    src: model.image,
+                    alt: "",
+                    className: "size-12 rounded-agg-lg object-cover md:size-[60px]"
+                  }
+                ) : null,
+                /* @__PURE__ */ jsxs3("div", { className: "flex min-w-0 flex-col", children: [
+                  /* @__PURE__ */ jsx3(Typography, { as: "h3", variant: "body-large-strong", className: "truncate", children: model.title }),
+                  /* @__PURE__ */ jsx3("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ jsx3(Typography, { variant: "label", className: "truncate text-agg-muted-foreground", children: model.subtitle }) })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx3(Typography, { as: "div", variant: "heading", className: "shrink-0", children: formatProbabilityPercent(headlineProbability) }),
+              /* @__PURE__ */ jsx3(
+                "div",
+                {
+                  className: "flex gap-2",
+                  role: "tablist",
+                  "aria-label": labels.marketDetails.marketOutcomesAria,
+                  tabIndex: 0,
+                  onKeyDown: (e) => handleOutcomeKeyDown(e),
+                  children: headerOutcomeItems.map((item) => {
+                    const isPositive = item.tone === "positive";
+                    const isActiveOutcome = item.label === selectedOutcomeLabel;
+                    return /* @__PURE__ */ jsx3(
+                      "button",
+                      {
+                        type: "button",
+                        role: "tab",
+                        "aria-selected": isActiveOutcome,
+                        tabIndex: isActiveOutcome ? 0 : -1,
+                        className: getOutcomeButtonClassName({
+                          enableAnimations: config.enableAnimations,
+                          isPositive,
+                          isActive: isActiveOutcome
+                        }),
+                        onClick: (e) => {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          setSelectedOutcomeLabel(item.label);
+                        },
+                        children: /* @__PURE__ */ jsxs3("span", { className: "inline-flex items-center gap-2", children: [
+                          /* @__PURE__ */ jsx3(
+                            VenueLogo,
+                            {
+                              venue: isPositive ? "polymarket" : "probable",
+                              size: "small",
+                              color: isActiveOutcome ? "var(--agg-color-on-primary)" : void 0
+                            }
+                          ),
+                          /* @__PURE__ */ jsx3(
+                            Typography,
+                            {
+                              variant: isActiveOutcome ? "body-strong" : "body",
+                              className: cn(
+                                "text-agg-base leading-agg-6",
+                                isActiveOutcome ? "text-agg-on-primary" : "text-agg-foreground"
+                              ),
+                              children: `${item.label} ${formatProbabilityCents(item.probability)}`
+                            }
+                          )
+                        ] })
+                      },
+                      item.label
+                    );
+                  })
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          "div",
+          {
+            id: detailsContentId,
+            className: cn(
+              "grid overflow-hidden",
+              getMotionClassName(config.enableAnimations, "transition-all duration-500 ease-in-out"),
+              isOpened ? "grid-rows-[1fr] opacity-100" : "pointer-events-none grid-rows-[0fr] opacity-0"
+            ),
+            "aria-hidden": !isOpened,
+            children: /* @__PURE__ */ jsxs3("div", { className: "min-h-0", children: [
+              /* @__PURE__ */ jsx3("div", { className: "h-px w-full bg-agg-separator" }),
+              /* @__PURE__ */ jsxs3(
+                "div",
+                {
+                  className: cn(
+                    getMotionClassName(
+                      config.enableAnimations,
+                      "transition-all duration-500 ease-in-out"
+                    ),
+                    isOpened ? cn(
+                      "translate-y-0 opacity-100",
+                      getMotionClassName(config.enableAnimations, "delay-100")
+                    ) : "translate-y-5 opacity-0"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx3("div", { className: cn("block", classNames == null ? void 0 : classNames.tabs), children: /* @__PURE__ */ jsx3(
+                      Tabs,
+                      {
+                        ariaLabel: labels.marketDetails.tabsAria,
+                        items: marketDetailsTabs,
+                        value: selectedTab === "other" ? "order-book" : selectedTab,
+                        onChange: (nextValue) => setSelectedTab(nextValue),
+                        variant: "underline",
+                        className: "w-full px-5"
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx3("div", { className: "h-px w-full bg-agg-separator" }),
+                    /* @__PURE__ */ jsxs3("div", { className: cn("p-5", classNames == null ? void 0 : classNames.content), children: [
+                      selectedTab === "order-book" ? /* @__PURE__ */ jsx3("div", { className: cn("flex flex-col gap-5", classNames == null ? void 0 : classNames.orderBook), children: isOrderBookLoading ? /* @__PURE__ */ jsx3(MarketDetailsOderbookSkeleton, {}) : hasOrderBookError ? /* @__PURE__ */ jsx3(
+                        StateMessage,
+                        {
+                          ariaLabel: labels.marketDetails.orderBookUnavailableAria,
+                          tone: "warning",
+                          title: labels.marketDetails.orderBookUnavailableTitle,
+                          description: labels.marketDetails.orderBookUnavailableDescription,
+                          actionLabel: labels.common.retry,
+                          onAction: handleRetryOrderBook,
+                          className: "min-h-[248px] px-5 py-10 md:min-h-[272px]"
+                        }
+                      ) : hasNoOrderBook ? /* @__PURE__ */ jsx3(
+                        StateMessage,
+                        {
+                          ariaLabel: labels.marketDetails.orderBookEmptyAria,
+                          title: labels.marketDetails.orderBookEmptyTitle,
+                          description: labels.marketDetails.orderBookEmptyDescription,
+                          className: "min-h-[248px] px-5 py-10 md:min-h-[272px]"
+                        }
+                      ) : /* @__PURE__ */ jsxs3(Fragment, { children: [
+                        /* @__PURE__ */ jsx3(
+                          OrderBookRows,
+                          {
+                            rows: askRows,
+                            title: labels.marketDetails.asks,
+                            formatNumber: config.formatNumber,
+                            formatCurrency: config.formatCurrency,
+                            visibleRows: orderBookDepth
+                          }
+                        ),
+                        /* @__PURE__ */ jsx3(
+                          OrderBookRows,
+                          {
+                            rows: bidRows,
+                            title: labels.marketDetails.bids,
+                            formatNumber: config.formatNumber,
+                            formatCurrency: config.formatCurrency,
+                            visibleRows: orderBookDepth
+                          }
+                        )
+                      ] }) }) : null,
+                      selectedTab === "graph" ? /* @__PURE__ */ jsxs3("div", { className: cn("flex flex-col gap-5", classNames == null ? void 0 : classNames.graph), children: [
+                        /* @__PURE__ */ jsx3(
+                          LineChart,
+                          {
+                            series: graphSeries,
+                            height: 260,
+                            isLoading: isPriceHistoryLoading,
+                            classNames: { root: "w-full" },
+                            showSeriesControls: selectedOutcomesByVenue.length > 0 || headerOutcomeItems.length > 0,
+                            renderSeriesControls: () => {
+                              return /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-4 md:flex-row md:items-center md:justify-between", children: [
+                                /* @__PURE__ */ jsx3("div", { className: "flex flex-wrap gap-2", children: selectedOutcomesByVenue.map((item) => {
+                                  const probability = formatProbabilityPercent(item.outcome.price);
+                                  const isActiveVenue = selectedGraphVenue === item.venue;
+                                  return /* @__PURE__ */ jsxs3(
+                                    "button",
+                                    {
+                                      type: "button",
+                                      "aria-label": `${item.venue} ${probability}`,
+                                      "aria-pressed": isActiveVenue,
+                                      className: cn(
+                                        "inline-flex items-center gap-2 rounded-agg-full border-2 px-4 py-2",
+                                        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-agg-primary focus-visible:ring-offset-2 focus-visible:ring-offset-agg-secondary-hover",
+                                        isActiveVenue ? "border-agg-primary bg-agg-secondary" : "border-transparent bg-agg-secondary-hover"
+                                      ),
+                                      onClick: (e) => {
+                                        e.preventDefault();
+                                        e.stopPropagation();
+                                        handleGraphVenueToggle(item.venue);
+                                      },
+                                      children: [
+                                        /* @__PURE__ */ jsx3(VenueLogo, { venue: item.venue, size: "small" }),
+                                        /* @__PURE__ */ jsx3("span", { className: "text-agg-base leading-agg-6 text-agg-foreground", children: probability })
+                                      ]
+                                    },
+                                    `${item.market.id}-${item.outcome.id}`
+                                  );
+                                }) }),
+                                /* @__PURE__ */ jsx3(
+                                  SwitchButton,
+                                  {
+                                    ariaLabel: labels.marketDetails.outcomeSelectorAria,
+                                    className: "shrink-0",
+                                    value: selectedOutcomeLabel != null ? selectedOutcomeLabel : "",
+                                    onValueChange: (nextValue) => setSelectedOutcomeLabel(nextValue),
+                                    options: headerOutcomeItems.map((item) => ({
+                                      value: item.label,
+                                      label: `${item.label} ${formatProbabilityCents(item.probability)}`,
+                                      ariaLabel: labels.marketDetails.showOutcomeAria(item.label)
+                                    }))
+                                  }
+                                )
+                              ] });
+                            }
+                          }
+                        ),
+                        /* @__PURE__ */ jsxs3(
+                          "div",
+                          {
+                            className: cn(
+                              "flex flex-col gap-3 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__ */ jsx3("span", { children: typeof model.market.volume === "number" ? `${config.formatCompactCurrency(model.market.volume)} ${labels.marketDetails.meta.volumeSuffix}` : labels.marketDetails.volumeUnavailable }),
+                              /* @__PURE__ */ jsx3("div", { className: "flex flex-wrap items-center gap-3 md:gap-4", children: eventListItemDetailsTimeRanges.map((timeRange) => {
+                                const isActive = selectedTimeRange === timeRange;
+                                return /* @__PURE__ */ jsx3(
+                                  "button",
+                                  {
+                                    type: "button",
+                                    className: cn(
+                                      "cursor-pointer text-agg-sm leading-agg-5",
+                                      isActive ? "font-agg-bold text-agg-foreground" : "font-agg-normal text-agg-muted-foreground"
+                                    ),
+                                    "aria-pressed": isActive,
+                                    onClick: (e) => {
+                                      e.preventDefault();
+                                      e.stopPropagation();
+                                      setSelectedTimeRange(timeRange);
+                                    },
+                                    children: timeRange === "ALL" ? labels.eventItemDetails.allTimeRange : timeRange
+                                  },
+                                  timeRange
+                                );
+                              }) })
+                            ]
+                          }
+                        )
+                      ] }) : null,
+                      selectedTab === "other" ? /* @__PURE__ */ jsx3("div", { className: "flex flex-col gap-4", children: otherContent != null ? otherContent : /* @__PURE__ */ jsx3("div", { className: "grid grid-cols-1 gap-3", children: otherRows.map((row) => /* @__PURE__ */ jsxs3(
+                        "div",
+                        {
+                          className: "flex items-center justify-between rounded-agg-xl bg-agg-secondary-hover px-4 py-3",
+                          children: [
+                            /* @__PURE__ */ jsx3(Typography, { variant: "label", className: "text-agg-muted-foreground", children: row.label }),
+                            /* @__PURE__ */ jsx3(Typography, { variant: "body", className: "text-right", children: row.value })
+                          ]
+                        },
+                        row.label
+                      )) }) }) : null
+                    ] })
+                  ]
+                }
+              )
+            ] })
+          }
+        )
+      ]
+    }
+  );
+};
+var MarketDetails = (props) => {
+  var _a;
+  const [uncontrolledIsOpened, setUncontrolledIsOpened] = useState2(
+    (_a = props.defaultIsOpened) != null ? _a : marketDetailsDefaultIsOpened
+  );
+  useEffect2(() => {
+    if (typeof props.isOpened !== "boolean")
+      return;
+    setUncontrolledIsOpened(props.isOpened);
+  }, [props.isOpened]);
+  const resolvedIsOpened = typeof props.isOpened === "boolean" ? props.isOpened : uncontrolledIsOpened;
+  const handleOpenChange = (nextIsOpened) => {
+    var _a2;
+    if (typeof props.isOpened !== "boolean") {
+      setUncontrolledIsOpened(nextIsOpened);
+    }
+    (_a2 = props.onOpenChange) == null ? void 0 : _a2.call(props, nextIsOpened);
+  };
+  const hasEventProp = "event" in props && !!props.event;
+  const {
+    event: fetchedEvent,
+    error: eventError,
+    isLoading: isFetchingEvent
+  } = useEvent3(hasEventProp ? void 0 : props.eventId, {
+    enabled: !props.isLoading && !hasEventProp && !!props.eventId
+  });
+  if (props.isLoading) {
+    return /* @__PURE__ */ jsx3(
+      MarketDetailsLoadingState,
+      {
+        isOpened: resolvedIsOpened,
+        ariaLabel: props.ariaLabel,
+        classNames: props.classNames
+      }
+    );
+  }
+  if ("event" in props && props.event) {
+    return /* @__PURE__ */ jsx3(
+      MarketDetailsContent,
+      __spreadProps(__spreadValues({}, props), {
+        isOpened: resolvedIsOpened,
+        onOpenChange: handleOpenChange,
+        event: props.event
+      })
+    );
+  }
+  if (isFetchingEvent) {
+    return /* @__PURE__ */ jsx3(
+      MarketDetailsLoadingState,
+      {
+        isOpened: resolvedIsOpened,
+        ariaLabel: props.ariaLabel,
+        classNames: props.classNames
+      }
+    );
+  }
+  if (!fetchedEvent) {
+    if (isErrorWithStatus(eventError, 404)) {
+      return /* @__PURE__ */ jsx3(MarketDetailsNotFoundState, { ariaLabel: props.ariaLabel, classNames: props.classNames });
+    }
+    return /* @__PURE__ */ jsx3(MarketDetailsUnavailableState, { ariaLabel: props.ariaLabel, classNames: props.classNames });
+  }
+  return /* @__PURE__ */ jsx3(
+    MarketDetailsContent,
+    __spreadProps(__spreadValues({}, props), {
+      isOpened: resolvedIsOpened,
+      onOpenChange: handleOpenChange,
+      event: fetchedEvent
+    })
+  );
+};
+MarketDetails.displayName = "MarketDetails";
+
+// src/events/list/index.tsx
+import { useCallback, useEffect as useEffect3, useMemo as useMemo4, useRef, useState as useState3 } from "react";
+import { useEvents, useLabels as useLabels4 } from "@agg-market/hooks";
+
+// src/events/list/event-list.constants.ts
+var POLYMARKET_VENUE = "polymarket";
+var KALSHI_VENUE = "kalshi";
+var POLYMARKET_VENUE_LOGO = "polymarket";
+var KALSHI_VENUE_LOGO = "kalshi";
+var getDefaultEventListTabs = (labels) => {
+  return [
+    {
+      value: "matched",
+      label: labels.eventList.matchedTab,
+      iconName: "arrows-to-dot"
+    },
+    {
+      value: "polymarket",
+      label: labels.venues.polymarket,
+      venueLogo: POLYMARKET_VENUE_LOGO,
+      venues: [POLYMARKET_VENUE]
+    },
+    {
+      value: "kalshi",
+      label: labels.venues.kalshi,
+      venueLogo: KALSHI_VENUE_LOGO,
+      venues: [KALSHI_VENUE]
+    }
+  ];
+};
+
+// src/events/list/event-list.utils.ts
+var mapEventToEventListItemEvent = (event) => {
+  const mergedVenueMarkets = event.markets.flatMap((m) => m.venueMarkets);
+  if (mergedVenueMarkets.length === 0)
+    return null;
+  return event;
+};
+var filterEventsByTabValue = (events, _tabValue) => {
+  return events;
+};
+var resolveTabVenus = (tab) => {
+  if (!tab)
+    return void 0;
+  if (tab.venues && tab.venues.length > 0)
+    return tab.venues;
+  if (tab.value === "polymarket" || tab.value === "kalshi") {
+    return [tab.value];
+  }
+  return void 0;
+};
+
+// src/events/list/index.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var renderTabIcon = (tab, isActive) => {
+  if (tab.venueLogo) {
+    return /* @__PURE__ */ jsx4(VenueLogo, { venue: tab.venueLogo, size: "small" });
+  }
+  if (!tab.iconName)
+    return null;
+  return /* @__PURE__ */ jsx4(
+    Icon,
+    {
+      name: tab.iconName,
+      size: "small",
+      color: isActive ? "var(--agg-color-primary)" : "var(--agg-color-foreground)"
+    }
+  );
+};
+var TAB_MIN_WIDTH = 80;
+var TAB_HORIZONTAL_PADDING = 32;
+var TAB_ICON_AND_GAP_WIDTH = 24;
+var TAB_OUTER_BORDER_WIDTH = 2;
+var TAB_INNER_BORDER_WIDTH = 1;
+var measureTabLabelWidth = (label) => {
+  if (typeof document === "undefined")
+    return label.length * 9;
+  const canvas = document.createElement("canvas");
+  const context = canvas.getContext("2d");
+  if (!context)
+    return label.length * 9;
+  context.font = "700 16px Inter";
+  return context.measureText(label).width;
+};
+var estimateTabsWidth = (items) => {
+  if (items.length === 0)
+    return 0;
+  const tabsWidth = items.reduce((sum, item) => {
+    const textWidth = Math.ceil(measureTabLabelWidth(item.label));
+    const iconWidth = item.icon ? TAB_ICON_AND_GAP_WIDTH : 0;
+    const buttonWidth = Math.max(TAB_MIN_WIDTH, textWidth + iconWidth + TAB_HORIZONTAL_PADDING);
+    return sum + buttonWidth;
+  }, 0);
+  return tabsWidth + TAB_OUTER_BORDER_WIDTH + (items.length - 1) * TAB_INNER_BORDER_WIDTH;
+};
+var EventList = ({
+  title,
+  maxItemsPerRow = 3,
+  limit = 3,
+  maxVisibleItems,
+  showVenueLogo = true,
+  search,
+  categoryIds
+}) => {
+  var _a, _b;
+  const labels = useLabels4();
+  const defaultEventListTabs = useMemo4(() => {
+    return getDefaultEventListTabs(labels);
+  }, [labels]);
+  const [activeTabValue, setActiveTabValue] = useState3(
+    (_b = (_a = defaultEventListTabs[0]) == null ? void 0 : _a.value) != null ? _b : "matched"
+  );
+  const [_shouldUseSelectOverflow, setShouldUseSelectOverflow] = useState3(false);
+  const activeTab = useMemo4(() => {
+    return defaultEventListTabs.find((tab) => tab.value === activeTabValue);
+  }, [activeTabValue]);
+  const venues = useMemo4(() => {
+    return resolveTabVenus(activeTab);
+  }, [activeTab]);
+  const resolvedMaxVisibleItems = useMemo4(() => {
+    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 { events, isLoading, isError, fetchNextPage, hasNextPage, isFetchingNextPage } = useEvents({
+    venues,
+    search,
+    categoryIds,
+    limit: requestLimit
+  });
+  const filteredEvents = useMemo4(() => {
+    return filterEventsByTabValue(events, activeTabValue);
+  }, [events, activeTabValue]);
+  const tileEvents = useMemo4(() => {
+    const normalizedEvents = filteredEvents.map((event) => mapEventToEventListItemEvent(event)).filter((event) => event != null);
+    if (resolvedMaxVisibleItems == null)
+      return normalizedEvents;
+    return normalizedEvents.slice(0, resolvedMaxVisibleItems);
+  }, [filteredEvents, resolvedMaxVisibleItems]);
+  const tabsItems = useMemo4(() => {
+    return defaultEventListTabs.map((tab) => {
+      const isActive = tab.value === activeTabValue;
+      return {
+        value: tab.value,
+        label: tab.label,
+        icon: renderTabIcon(tab, isActive),
+        disabled: tab.disabled
+      };
+    });
+  }, [activeTabValue]);
+  const headerRef = useRef(null);
+  const titleRef = useRef(null);
+  const updateTabsOverflowBehavior = useCallback(() => {
+    if (typeof window === "undefined")
+      return;
+    const headerElement = headerRef.current;
+    const titleElement = titleRef.current;
+    if (!headerElement || !titleElement)
+      return;
+    const isDesktop = window.matchMedia("(min-width: 768px)").matches;
+    if (!isDesktop) {
+      setShouldUseSelectOverflow(false);
+      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;
+    const estimatedTabsWidth = estimateTabsWidth(tabsItems);
+    setShouldUseSelectOverflow(availableTabsWidth > 0 && estimatedTabsWidth > availableTabsWidth);
+  }, [tabsItems]);
+  useEffect3(() => {
+    updateTabsOverflowBehavior();
+  }, [updateTabsOverflowBehavior]);
+  useEffect3(() => {
+    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]);
+  const resolvedMaxItemsPerRow = Number.isFinite(maxItemsPerRow) ? Math.max(1, Math.floor(maxItemsPerRow)) : 1;
+  const loadingPlaceholderCount = isFetchingNextPage ? Math.min(resolvedMaxItemsPerRow, resolvedMaxVisibleItems != null ? resolvedMaxVisibleItems : Infinity) : 0;
+  const shouldRenderLoadingState = isLoading && tileEvents.length === 0;
+  const loadMoreRef = useRef(null);
+  useEffect3(() => {
+    if (!shouldPaginate)
+      return;
+    if (!hasNextPage)
+      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 gridStyle = {
+    ["--agg-event-list-columns"]: String(resolvedMaxItemsPerRow)
+  };
+  const gridClassName = cn(
+    "grid grid-cols-1 gap-5",
+    "md:[grid-template-columns:repeat(var(--agg-event-list-columns),minmax(0,1fr))]"
+  );
+  if (shouldRenderLoadingState) {
+    return /* @__PURE__ */ jsx4(Skeleton, { view: "event-list", ariaLabel: labels.eventList.loading(title) });
+  }
+  return /* @__PURE__ */ jsxs4("section", { className: "flex w-full flex-col gap-5", children: [
+    /* @__PURE__ */ jsxs4(
+      "header",
+      {
+        ref: headerRef,
+        className: "flex flex-col sm:flex-row w-full flex-nowrap items-start sm:items-center justify-between gap-2 sm:gap-4",
+        children: [
+          /* @__PURE__ */ jsx4("div", { ref: titleRef, className: "min-w-0", children: /* @__PURE__ */ jsx4(Typography, { as: "h2", variant: "title", className: "truncate [&::first-letter]:uppercase", children: title }) }),
+          /* @__PURE__ */ jsx4(
+            Tabs,
+            {
+              ariaLabel: labels.eventList.tabsAria(title),
+              items: tabsItems,
+              value: activeTabValue,
+              onChange: setActiveTabValue
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs4("div", { className: gridClassName, style: gridStyle, children: [
+      tileEvents.map((event) => /* @__PURE__ */ jsx4(
+        EventListItem,
+        {
+          event,
+          showVenueLogo,
+          classNames: {
+            root: "w-full min-w-0 max-w-none"
+          }
+        },
+        event.id
+      )),
+      Array.from({ length: loadingPlaceholderCount }).map((_, index) => /* @__PURE__ */ jsx4(
+        EventListItem,
+        {
+          isLoading: true,
+          classNames: {
+            root: "w-full min-w-0 max-w-none"
+          }
+        },
+        `loading-${index}`
+      )),
+      !isLoading && !isError && (tileEvents == null ? void 0 : tileEvents.length) === 0 ? /* @__PURE__ */ jsx4(Card, { className: "col-span-full overflow-hidden shadow-none hover:shadow-none", children: /* @__PURE__ */ jsx4(
+        StateMessage,
+        {
+          ariaLabel: labels.eventList.emptyAria,
+          title: labels.eventList.emptyTitle,
+          description: labels.eventList.emptyDescription,
+          className: "min-h-[320px]"
+        }
+      ) }) : null,
+      isError ? /* @__PURE__ */ jsx4(
+        Typography,
+        {
+          variant: "body",
+          className: "w-full col-span-full flex flex-col items-center justify-center h-32",
+          children: labels.eventList.error
+        }
+      ) : null
+    ] }),
+    shouldPaginate && hasNextPage ? /* @__PURE__ */ jsx4("div", { ref: loadMoreRef, className: "h-px w-full", "aria-hidden": true }) : null
+  ] });
+};
+EventList.displayName = "EventList";
+
+export {
+  isErrorWithStatus,
+  EventListItem,
+  EventListItemDetails,
+  MarketDetails,
+  EventList
+};