@agg-market/ui 5.0.0 → 6.0.0

package/dist/chunk-Q6DGDBPV.mjs

@@ -1,774 +0,0 @@
-import {
-  buildPriceHistoryGroups,
-  formatDateLabel,
-  getDefaultSelectedTimeRange,
-  getTimeWindowByRange,
-  isDateLikeLabel,
-  resolveDefaultOutcomeLabel,
-  resolveOutcomeLabels,
-  resolveOutcomesByVenue,
-  resolveSeriesColor
-} from "./chunk-34IRJYSU.mjs";
-import {
-  isErrorWithStatus,
-  normalizeProbability,
-  resolveEventListItemEvent,
-  resolveTileImage,
-  resolveTileTitle,
-  resolveVenueLabel,
-  selectPrimaryVenueMarket
-} from "./chunk-MKVGQ7AS.mjs";
-import {
-  StateMessage
-} from "./chunk-XUCS575S.mjs";
-import {
-  Badge
-} from "./chunk-K6IJ4WBM.mjs";
-import {
-  Skeleton,
-  detailsBaseCardClassName,
-  eventListItemDetailsTimeRanges
-} from "./chunk-M4RJHRFT.mjs";
-import {
-  VenueLogo
-} from "./chunk-PORVP72S.mjs";
-import {
-  Button
-} from "./chunk-KAGYJ4XT.mjs";
-import {
-  Typography
-} from "./chunk-ERGNR6UQ.mjs";
-import {
-  Card
-} from "./chunk-FO2QCB4Z.mjs";
-import {
-  LineChart
-} from "./chunk-OJVTGNIF.mjs";
-import {
-  SwitchButton
-} from "./chunk-LCZKSITC.mjs";
-import {
-  __objRest,
-  __spreadProps,
-  __spreadValues,
-  cn
-} from "./chunk-GJ4U5NCE.mjs";
-
-// src/events/item-details/index.tsx
-import { useEffect, useMemo, useState } from "react";
-import { useEvent, useLabels, usePriceHistory, useSdkUiConfig } from "@agg-market/hooks";
-import { jsx, jsxs } from "react/jsx-runtime";
-var EventListItemDetailsLoadingState = ({
-  classNames,
-  ariaLabel
-}) => {
-  const labels = useLabels();
-  return /* @__PURE__ */ jsx(
-    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 = useLabels();
-  return /* @__PURE__ */ jsx(
-    Card,
-    {
-      className: cn(detailsBaseCardClassName, classNames == null ? void 0 : classNames.root),
-      role: "status",
-      "aria-label": ariaLabel != null ? ariaLabel : labels.eventItemDetails.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.eventItemDetails.unavailableTitle }),
-        /* @__PURE__ */ jsx(Typography, { variant: "body", className: "text-agg-muted-foreground", children: labels.eventItemDetails.unavailableDescription })
-      ] })
-    }
-  );
-};
-var EventListItemDetailsNotFoundState = ({
-  classNames,
-  ariaLabel
-}) => {
-  const labels = useLabels();
-  return /* @__PURE__ */ jsx(Card, { className: cn(detailsBaseCardClassName, 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 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 = useLabels();
-  const [selectedVenue, setSelectedVenue] = useState(null);
-  const [activeProbabilityMode, setActiveProbabilityMode] = useState("yes");
-  const probabilityModeConfigs = useMemo(() => {
-    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 = useMemo(() => {
-    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 = useMemo(() => {
-    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 = useMemo(() => {
-    const outcomeByModeAndId = /* @__PURE__ */ new Map();
-    probabilityModeOrder.forEach((mode) => {
-      selectedOutcomesByMode[mode].forEach((outcomeByVenue) => {
-        outcomeByModeAndId.set(
-          `${outcomeByVenue.venue}:${outcomeByVenue.outcome.id}`,
-          outcomeByVenue
-        );
-      });
-    });
-    return [...outcomeByModeAndId.values()];
-  }, [selectedOutcomesByMode]);
-  const priceHistoryGroups = useMemo(() => {
-    return buildPriceHistoryGroups(allOutcomesForHistory, canonicalMarketId);
-  }, [allOutcomesForHistory, canonicalMarketId]);
-  const timeWindow = useMemo(() => {
-    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 = useMemo(() => {
-    const historyByVenue = /* @__PURE__ */ new Map();
-    if (!(priceHistoryData == null ? void 0 : priceHistoryData.length)) {
-      return historyByVenue;
-    }
-    priceHistoryData.forEach((historyItem) => {
-      const venue = historyItem.venue;
-      const venueHistory = historyByVenue.get(venue);
-      if (venueHistory) {
-        venueHistory.push(historyItem);
-        return;
-      }
-      historyByVenue.set(venue, [historyItem]);
-    });
-    return historyByVenue;
-  }, [priceHistoryData]);
-  const chartSeriesByMode = useMemo(() => {
-    const buildSeries = (mode) => {
-      const modeConfig = probabilityModeConfigs[mode];
-      const chartSeries = [];
-      normalizedVenueDataByMode[mode].forEach((venueData) => {
-        var _a;
-        const venueHistory = priceHistoryByVenue.get(venueData.venue);
-        if (!(venueHistory == null ? void 0 : venueHistory.length))
-          return;
-        const candidateIds = resolveOutcomeCandidateIds(venueData.market, venueData.outcome);
-        const matchingHistory = (_a = venueHistory.find((historyItem) => candidateIds.includes(historyItem.marketId))) != null ? _a : venueHistory.length === 1 ? venueHistory[0] : void 0;
-        if (!matchingHistory)
-          return;
-        const points = matchingHistory.points.map((point) => {
-          const probability = normalizeProbability(point.price);
-          if (probability == null || !Number.isFinite(point.timestamp))
-            return null;
-          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 = useMemo(() => {
-    const modeSeries = chartSeriesByMode[activeProbabilityMode];
-    if (!selectedVenue)
-      return modeSeries;
-    return modeSeries.filter((seriesItem) => seriesItem.venue === selectedVenue);
-  }, [activeProbabilityMode, chartSeriesByMode, selectedVenue]);
-  const segmentedDisplayItems = useMemo(() => {
-    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__ */ jsx(
-      "div",
-      {
-        className: cn(
-          "w-full rounded-agg-xl border border-agg-separator bg-agg-secondary",
-          classNames == null ? void 0 : classNames.chart
-        ),
-        children: /* @__PURE__ */ jsx(
-          StateMessage,
-          {
-            ariaLabel: labels.eventItemDetails.chartUnavailableAria,
-            tone: "warning",
-            title: labels.eventItemDetails.chartUnavailableTitle,
-            description: labels.eventItemDetails.chartUnavailableDescription,
-            actionLabel: labels.common.retry,
-            onAction: handleRetryPriceHistory,
-            className: "min-h-[300px] px-5 py-10 md:px-10"
-          }
-        )
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    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__ */ jsxs(
-          "div",
-          {
-            className: cn("flex flex-row items-center justify-between gap-4", classNames == null ? void 0 : classNames.summary),
-            children: [
-              /* @__PURE__ */ jsx(
-                "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__ */ jsx(
-                      "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__ */ jsx(
-                          Badge,
-                          {
-                            text,
-                            size: "large",
-                            prefix: showVenueLogo ? /* @__PURE__ */ jsx(
-                              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__ */ jsx(
-                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 = useSdkUiConfig();
-  const labels = useLabels();
-  const venueMarkets = useMemo(() => {
-    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 = useMemo(() => {
-    return selectPrimaryVenueMarket(venueMarkets);
-  }, [venueMarkets]);
-  const outcomeLabels = useMemo(() => {
-    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 = useMemo(() => {
-    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 = useMemo(() => {
-    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 = useMemo(() => {
-    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 = useMemo(() => {
-    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__ */ jsx(EventListItemDetailsUnavailableState, { classNames, ariaLabel });
-  }
-  return /* @__PURE__ */ jsxs(
-    Card,
-    {
-      className: cn(detailsBaseCardClassName, classNames == null ? void 0 : classNames.root),
-      "aria-label": ariaLabel != null ? ariaLabel : resolvedTitle,
-      children: [
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: cn(
-              "flex flex-row gap-3 md:gap-4",
-              "items-center justify-start",
-              classNames == null ? void 0 : classNames.header
-            ),
-            children: [
-              resolvedImage ? /* @__PURE__ */ jsx(
-                "img",
-                {
-                  src: resolvedImage,
-                  alt: "",
-                  className: "size-10 rounded-agg-lg object-cover md:size-[60px]"
-                }
-              ) : null,
-              /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-3", children: [
-                /* @__PURE__ */ jsx(
-                  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__ */ jsx(
-                  "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__ */ jsx(
-                        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__ */ jsx("div", { className: cn("flex flex-wrap items-start gap-4 md:gap-6", classNames == null ? void 0 : classNames.headerStats), children: detailsStats.map((statItem) => {
-          const deltaClassName = statItem.deltaTone === "positive" ? "text-agg-success!" : statItem.deltaTone === "negative" ? "text-agg-error!" : "text-agg-muted-foreground";
-          return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-            /* @__PURE__ */ jsx(Typography, { variant: "caption-caps", className: "text-agg-muted-foreground", children: statItem.label }),
-            /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-1", children: [
-              /* @__PURE__ */ jsx(
-                Typography,
-                {
-                  variant: "body",
-                  className: "text-agg-lg leading-agg-7 text-agg-foreground",
-                  children: statItem.value
-                }
-              ),
-              statItem.delta ? /* @__PURE__ */ jsx(Typography, { variant: "label", className: cn(deltaClassName), children: statItem.delta }) : null
-            ] })
-          ] }, `${statItem.label}-${statItem.value}`);
-        }) }) : null,
-        /* @__PURE__ */ jsx(
-          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__ */ jsxs("div", { className: cn("flex flex-wrap items-center justify-between gap-4", classNames == null ? void 0 : classNames.footer), children: [
-          /* @__PURE__ */ jsx(Typography, { variant: "label", className: "text-agg-muted-foreground", children: volumeLabel || "-" }),
-          /* @__PURE__ */ jsx("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__ */ jsx(
-              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
-  } = useEvent(eventId, {
-    enabled: !!eventId
-  });
-  const resolvedEvent = useMemo(() => {
-    return resolveEventListItemEvent(fetchedEvent);
-  }, [fetchedEvent]);
-  if (!eventId) {
-    return /* @__PURE__ */ jsx(
-      EventListItemDetailsUnavailableState,
-      {
-        classNames: rest.classNames,
-        ariaLabel: rest.ariaLabel
-      }
-    );
-  }
-  if (isLoading) {
-    return /* @__PURE__ */ jsx(EventListItemDetailsLoadingState, { classNames: rest.classNames, ariaLabel: rest.ariaLabel });
-  }
-  if (isErrorWithStatus(error, 404)) {
-    return /* @__PURE__ */ jsx(EventListItemDetailsNotFoundState, { classNames: rest.classNames, ariaLabel: rest.ariaLabel });
-  }
-  if (!fetchedEvent && !isError) {
-    return /* @__PURE__ */ jsx(EventListItemDetailsLoadingState, { classNames: rest.classNames, ariaLabel: rest.ariaLabel });
-  }
-  if (!resolvedEvent) {
-    return /* @__PURE__ */ jsx(
-      EventListItemDetailsUnavailableState,
-      {
-        classNames: rest.classNames,
-        ariaLabel: rest.ariaLabel
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(EventListItemDetailsContent, __spreadValues({ event: resolvedEvent }, rest));
-};
-var EventListItemDetails = (props) => {
-  if (props.isLoading) {
-    return /* @__PURE__ */ jsx(EventListItemDetailsLoadingState, { classNames: props.classNames, ariaLabel: props.ariaLabel });
-  }
-  if ("event" in props && props.event) {
-    const _a = props, { event } = _a, rest = __objRest(_a, ["event"]);
-    return /* @__PURE__ */ jsx(EventListItemDetailsContent, __spreadValues({ event }, rest));
-  }
-  if ("eventId" in props && typeof props.eventId === "string") {
-    const {
-      title: titleOverride,
-      image: imageOverride,
-      showVenueLogo: showVenueLogoOverride,
-      classNames,
-      venueInfo,
-      detailsStats,
-      ariaLabel: ariaLabelOverride,
-      defaultTimeRange: defaultTimeRangeOverride
-    } = props;
-    const byEventIdProps = {
-      eventId: props.eventId,
-      isLoading: false,
-      title: titleOverride,
-      image: imageOverride,
-      showVenueLogo: showVenueLogoOverride,
-      classNames,
-      venueInfo,
-      detailsStats,
-      ariaLabel: ariaLabelOverride,
-      defaultTimeRange: defaultTimeRangeOverride
-    };
-    return /* @__PURE__ */ jsx(EventListItemDetailsByEventId, __spreadValues({}, byEventIdProps));
-  }
-  return /* @__PURE__ */ jsx(
-    EventListItemDetailsUnavailableState,
-    {
-      classNames: props.classNames,
-      ariaLabel: props.ariaLabel
-    }
-  );
-};
-EventListItemDetails.displayName = "EventListItemDetails";
-
-export {
-  EventListItemDetails
-};