@agg-market/ui 4.0.0 → 6.0.0

package/dist/chunk-GNSPZ53C.mjs

@@ -1,991 +0,0 @@
-import {
-  buildPriceHistoryGroups,
-  getTimeWindowByRange,
-  resolveOutcomeLabels,
-  resolveOutcomesByVenue,
-  resolveSeriesColor
-} from "./chunk-HOXTJ742.mjs";
-import {
-  Tabs
-} from "./chunk-S3H63TQ5.mjs";
-import {
-  getVenueSummary,
-  normalizeProbability,
-  resolveTileImage,
-  resolveTileTitle,
-  selectPrimaryVenueMarket
-} from "./chunk-QM7CGMFG.mjs";
-import {
-  MarketDetailsOderbookSkeleton,
-  Skeleton,
-  eventListItemDetailsTimeRanges,
-  getMarketDetailsTabs,
-  marketDetailsBaseCardClassName,
-  marketDetailsDefaultIsOpened,
-  orderBookRowLimitDefault
-} from "./chunk-M4RJHRFT.mjs";
-import {
-  VenueLogo
-} from "./chunk-PORVP72S.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 {
-  __spreadProps,
-  __spreadValues,
-  cn,
-  getMotionClassName
-} from "./chunk-GJ4U5NCE.mjs";
-
-// src/events/market-details/index.tsx
-import { useEffect, useId, useMemo, useState } from "react";
-import {
-  useEvent,
-  useLabels,
-  useOrderBook,
-  usePriceHistory,
-  useSdkUiConfig
-} from "@agg-market/hooks";
-
-// src/events/market-details/market-details.utils.ts
-import dayjs 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 normalizeLabel = (value) => {
-  return value.trim().toLowerCase();
-};
-var hasBinaryLabels = (labels) => {
-  const normalizedLabels = labels.map(normalizeLabel);
-  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) => {
-  var _a;
-  if (!event.markets.length)
-    return void 0;
-  if (!marketId)
-    return event.markets[0];
-  return (_a = event.markets.find((market) => market.id === marketId)) != null ? _a : event.markets[0];
-};
-var resolveDisplayOutcomeLabels = (labels) => {
-  if (!hasBinaryLabels(labels))
-    return labels;
-  return ["Yes", "No"].filter(
-    (label) => labels.some((value) => normalizeLabel(value) === normalizeLabel(label))
-  );
-};
-var resolveInitialOutcomeLabel = (labels, defaultOutcomeLabel) => {
-  var _a;
-  if (labels.length === 0)
-    return void 0;
-  if (defaultOutcomeLabel) {
-    const matchedLabel = labels.find(
-      (label) => normalizeLabel(label) === normalizeLabel(defaultOutcomeLabel)
-    );
-    if (matchedLabel)
-      return matchedLabel;
-  }
-  if (hasBinaryLabels(labels)) {
-    return (_a = labels.find((label) => normalizeLabel(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 = normalizeLabel(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: normalizeLabel(label) === normalizeLabel((_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: dayjs(market.creationDate).format("MMM D, YYYY")
-    });
-  }
-  if (market.startDate) {
-    rows.push({
-      label: labels.marketDetails.meta.opens,
-      value: dayjs(market.startDate).format("MMM D, YYYY")
-    });
-  }
-  if (market.endDate) {
-    rows.push({
-      label: labels.marketDetails.meta.closes,
-      value: dayjs(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, jsxs } from "react/jsx-runtime";
-var MarketDetailsLoadingState = ({
-  isOpened = marketDetailsDefaultIsOpened,
-  ariaLabel,
-  classNames
-}) => {
-  const labels = useLabels();
-  return /* @__PURE__ */ jsx(
-    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 = useLabels();
-  return /* @__PURE__ */ jsx(
-    Card,
-    {
-      className: cn(marketDetailsBaseCardClassName, classNames == null ? void 0 : classNames.root),
-      role: "status",
-      "aria-label": ariaLabel != null ? ariaLabel : labels.marketDetails.unavailableAria,
-      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 p-5", children: [
-        /* @__PURE__ */ jsx(Typography, { variant: "body-large-strong", children: labels.marketDetails.unavailableTitle }),
-        /* @__PURE__ */ jsx(Typography, { variant: "label", className: "text-agg-muted-foreground", children: labels.marketDetails.unavailableDescription })
-      ] })
-    }
-  );
-};
-var OrderBookRows = ({
-  rows,
-  title,
-  formatNumber,
-  formatCurrency,
-  visibleRows
-}) => {
-  const labels = useLabels();
-  const isAsks = title === labels.marketDetails.asks;
-  const priceClassName = isAsks ? "text-agg-orderbook-ask" : "text-agg-orderbook-bid";
-  const barClassName = isAsks ? "bg-agg-orderbook-ask/10" : "bg-agg-orderbook-bid/10";
-  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__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-    /* @__PURE__ */ jsx(Typography, { variant: "caption-caps", children: title }),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "overflow-y-auto pr-1 flex flex-col gap-2",
-        style: { maxHeight: `${orderBookVisibleHeightPx}px` },
-        role: "region",
-        "aria-label": `${title} order book levels`,
-        children: rows.map((row, index) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[52px_1fr_1fr_52px] items-center gap-2 md:grid-cols-[88px_1fr_1fr_minmax(120px,220px)] md:gap-6", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 md:gap-3", children: [
-              /* @__PURE__ */ jsx(VenueLogo, { venue: row.venue, size: "small" }),
-              /* @__PURE__ */ jsx(
-                "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__ */ jsx("span", { className: "truncate text-agg-xs leading-agg-4 text-center text-agg-foreground md:text-agg-sm md:leading-agg-5", children: formatNumber(row.size) }),
-            /* @__PURE__ */ jsx("span", { className: "truncate text-agg-xs leading-agg-4 text-center text-agg-foreground md:text-agg-sm md:leading-agg-5", children: formatCurrency(row.total) }),
-            /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(
-              "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__ */ jsx("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 = useSdkUiConfig();
-  const labels = useLabels();
-  const detailsContentId = useId();
-  const model = useMemo(() => {
-    return buildMarketDetailsModel({
-      event,
-      marketId,
-      title,
-      image,
-      formatCompactCurrency: config.formatCompactCurrency,
-      labels
-    });
-  }, [config.formatCompactCurrency, event, image, labels, marketId, title]);
-  const marketDetailsTabs = useMemo(() => {
-    return getMarketDetailsTabs(labels);
-  }, [labels]);
-  const [selectedTab, setSelectedTab] = useState(
-    () => resolveInitialTab(defaultTab)
-  );
-  const [isOpened, setIsOpened] = useState(defaultIsOpened);
-  useEffect(() => {
-    setSelectedTab(resolveInitialTab(defaultTab));
-  }, [defaultTab]);
-  const [selectedTimeRange, setSelectedTimeRange] = useState(defaultTimeRange);
-  useEffect(() => {
-    setSelectedTimeRange(defaultTimeRange);
-  }, [defaultTimeRange]);
-  const [selectedOutcomeLabel, setSelectedOutcomeLabel] = useState(
-    () => {
-      var _a;
-      return resolveInitialOutcomeLabel((_a = model == null ? void 0 : model.outcomeLabels) != null ? _a : [], defaultOutcomeLabel);
-    }
-  );
-  const [selectedGraphVenue, setSelectedGraphVenue] = useState(null);
-  useEffect(() => {
-    var _a;
-    setSelectedOutcomeLabel(
-      resolveInitialOutcomeLabel((_a = model == null ? void 0 : model.outcomeLabels) != null ? _a : [], defaultOutcomeLabel)
-    );
-  }, [defaultOutcomeLabel, model == null ? void 0 : model.outcomeLabels]);
-  const headerOutcomeItems = useMemo(() => {
-    if (!model)
-      return [];
-    return resolveHeaderOutcomeItems(model.market.venueMarkets, selectedOutcomeLabel);
-  }, [model, selectedOutcomeLabel]);
-  const headlineProbability = useMemo(() => {
-    if (!model || !selectedOutcomeLabel)
-      return void 0;
-    return model.probabilityByLabel.get(selectedOutcomeLabel);
-  }, [model, selectedOutcomeLabel]);
-  const outcomesByLabel = useMemo(() => {
-    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 = useMemo(() => {
-    var _a;
-    if (!selectedOutcomeLabel)
-      return [];
-    return (_a = outcomesByLabel.get(selectedOutcomeLabel)) != null ? _a : [];
-  }, [outcomesByLabel, selectedOutcomeLabel]);
-  const timeWindow = useMemo(() => {
-    return getTimeWindowByRange(selectedTimeRange);
-  }, [selectedTimeRange]);
-  const graphOutcomes = useMemo(() => {
-    const uniqueOutcomesByVenueAndId = /* @__PURE__ */ new Map();
-    outcomesByLabel.forEach((outcomes) => {
-      outcomes.forEach((outcomeByVenue) => {
-        uniqueOutcomesByVenueAndId.set(
-          `${outcomeByVenue.venue}:${outcomeByVenue.outcome.id}`,
-          outcomeByVenue
-        );
-      });
-    });
-    return [...uniqueOutcomesByVenueAndId.values()];
-  }, [outcomesByLabel]);
-  const canonicalMarketIdForHistory = model == null ? void 0 : model.market.id;
-  const priceHistoryGroups = useMemo(() => {
-    return buildPriceHistoryGroups(graphOutcomes, canonicalMarketIdForHistory);
-  }, [canonicalMarketIdForHistory, graphOutcomes]);
-  const { data: priceHistoryData, isLoading: isPriceHistoryLoading } = usePriceHistory(__spreadProps(__spreadValues({
-    groups: priceHistoryGroups
-  }, timeWindow), {
-    enabled: isOpened && selectedTab === "graph" && priceHistoryGroups.length > 0
-  }));
-  const orderBookInputs = useMemo(() => {
-    return selectedOutcomesByVenue.map(({ market, outcome }) => ({
-      market,
-      outcome,
-      liveUpdate: true
-    }));
-  }, [selectedOutcomesByVenue]);
-  const { data: orderBookData, isLoading: isOrderBookLoading } = useOrderBook({
-    orderbooks: orderBookInputs,
-    enabled: isOpened && selectedTab === "order-book" && orderBookInputs.length > 0
-  });
-  const askRows = useMemo(() => {
-    return resolveOrderBookRows({
-      data: orderBookData,
-      side: "asks"
-    });
-  }, [orderBookData]);
-  const bidRows = useMemo(() => {
-    return resolveOrderBookRows({
-      data: orderBookData,
-      side: "bids"
-    });
-  }, [orderBookData]);
-  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 graphSeriesByOutcomeLabel = useMemo(() => {
-    const seriesByOutcomeLabel = /* @__PURE__ */ new Map();
-    const resolveOutcomeCandidateIds = (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 = resolveOutcomeCandidateIds(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 = useMemo(() => {
-    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 = useMemo(() => {
-    if (!model)
-      return [];
-    return resolveOtherTabRows(model.market, labels);
-  }, [labels, model]);
-  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;
-    });
-  };
-  useEffect(() => {
-    if (!selectedGraphVenue) {
-      return;
-    }
-    if (selectedOutcomesByVenue.some((item) => item.venue === selectedGraphVenue)) {
-      return;
-    }
-    setSelectedGraphVenue(null);
-  }, [selectedGraphVenue, selectedOutcomesByVenue]);
-  if (!model) {
-    return /* @__PURE__ */ jsx(MarketDetailsUnavailableState, { ariaLabel, classNames });
-  }
-  return /* @__PURE__ */ jsxs(
-    Card,
-    {
-      className: cn(
-        "w-full rounded-agg-2xl text-left outline-none",
-        marketDetailsBaseCardClassName,
-        classNames == null ? void 0 : classNames.root
-      ),
-      children: [
-        /* @__PURE__ */ jsxs(
-          "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__ */ jsxs("div", { className: "flex min-w-52 items-center gap-3 md:gap-4", children: [
-                model.image ? /* @__PURE__ */ jsx(
-                  "img",
-                  {
-                    src: model.image,
-                    alt: "",
-                    className: "size-12 rounded-agg-lg object-cover md:size-[60px]"
-                  }
-                ) : null,
-                /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col", children: [
-                  /* @__PURE__ */ jsx(Typography, { as: "h3", variant: "body-large-strong", className: "truncate", children: model.title }),
-                  /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ jsx(Typography, { variant: "label", className: "truncate text-agg-muted-foreground", children: model.subtitle }) })
-                ] })
-              ] }),
-              /* @__PURE__ */ jsx(Typography, { as: "div", variant: "heading", className: "shrink-0", children: formatProbabilityPercent(headlineProbability) }),
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: "flex gap-2",
-                  role: "tablist",
-                  "aria-label": labels.marketDetails.marketOutcomesAria,
-                  tabIndex: 0,
-                  onKeyDown: (e) => handleOutcomeKeyDown(e),
-                  children: headerOutcomeItems.map((item) => {
-                    const isPositive = item.tone === "positive";
-                    const isActiveOutcome = item.label === selectedOutcomeLabel;
-                    return /* @__PURE__ */ jsx(
-                      "button",
-                      {
-                        type: "button",
-                        role: "tab",
-                        "aria-selected": isActiveOutcome,
-                        tabIndex: isActiveOutcome ? 0 : -1,
-                        className: getOutcomeButtonClassName({
-                          enableAnimations: config.enableAnimations,
-                          isPositive,
-                          isActive: isActiveOutcome
-                        }),
-                        onClick: (e) => {
-                          e.preventDefault();
-                          e.stopPropagation();
-                          setSelectedOutcomeLabel(item.label);
-                        },
-                        children: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2", children: [
-                          /* @__PURE__ */ jsx(
-                            VenueLogo,
-                            {
-                              venue: isPositive ? "polymarket" : "probable",
-                              size: "small",
-                              color: isActiveOutcome ? "var(--agg-color-on-primary)" : void 0
-                            }
-                          ),
-                          /* @__PURE__ */ jsx(
-                            Typography,
-                            {
-                              variant: isActiveOutcome ? "body-strong" : "body",
-                              className: cn(
-                                "text-agg-base leading-agg-6",
-                                isActiveOutcome ? "text-agg-on-primary" : "text-agg-foreground"
-                              ),
-                              children: `${item.label} ${formatProbabilityCents(item.probability)}`
-                            }
-                          )
-                        ] })
-                      },
-                      item.label
-                    );
-                  })
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "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__ */ jsxs("div", { className: "min-h-0", children: [
-              /* @__PURE__ */ jsx("div", { className: "h-px w-full bg-agg-separator" }),
-              /* @__PURE__ */ jsxs(
-                "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__ */ jsx("div", { className: cn("block", classNames == null ? void 0 : classNames.tabs), children: /* @__PURE__ */ jsx(
-                      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__ */ jsx("div", { className: "h-px w-full bg-agg-separator" }),
-                    /* @__PURE__ */ jsxs("div", { className: cn("p-5", classNames == null ? void 0 : classNames.content), children: [
-                      selectedTab === "order-book" ? /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-5", classNames == null ? void 0 : classNames.orderBook), children: isOrderBookLoading ? /* @__PURE__ */ jsx(MarketDetailsOderbookSkeleton, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                        /* @__PURE__ */ jsx(
-                          OrderBookRows,
-                          {
-                            rows: askRows,
-                            title: labels.marketDetails.asks,
-                            formatNumber: config.formatNumber,
-                            formatCurrency: config.formatCurrency,
-                            visibleRows: orderBookDepth
-                          }
-                        ),
-                        /* @__PURE__ */ jsx(
-                          OrderBookRows,
-                          {
-                            rows: bidRows,
-                            title: labels.marketDetails.bids,
-                            formatNumber: config.formatNumber,
-                            formatCurrency: config.formatCurrency,
-                            visibleRows: orderBookDepth
-                          }
-                        )
-                      ] }) }) : null,
-                      selectedTab === "graph" ? /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-5", classNames == null ? void 0 : classNames.graph), children: [
-                        /* @__PURE__ */ jsx(
-                          LineChart,
-                          {
-                            series: graphSeries,
-                            height: 260,
-                            isLoading: isPriceHistoryLoading,
-                            classNames: { root: "w-full" },
-                            showSeriesControls: selectedOutcomesByVenue.length > 0 || headerOutcomeItems.length > 0,
-                            renderSeriesControls: () => {
-                              return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 md:flex-row md:items-center md:justify-between", children: [
-                                /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: selectedOutcomesByVenue.map((item) => {
-                                  const probability = formatProbabilityPercent(item.outcome.price);
-                                  const isActiveVenue = selectedGraphVenue === item.venue;
-                                  return /* @__PURE__ */ jsxs(
-                                    "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__ */ jsx(VenueLogo, { venue: item.venue, size: "small" }),
-                                        /* @__PURE__ */ jsx("span", { className: "text-agg-base leading-agg-6 text-agg-foreground", children: probability })
-                                      ]
-                                    },
-                                    `${item.market.id}-${item.outcome.id}`
-                                  );
-                                }) }),
-                                /* @__PURE__ */ jsx(
-                                  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__ */ jsxs(
-                          "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__ */ jsx("span", { children: typeof model.market.volume === "number" ? `${config.formatCompactCurrency(model.market.volume)} ${labels.marketDetails.meta.volumeSuffix}` : labels.marketDetails.volumeUnavailable }),
-                              /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-3 md:gap-4", children: eventListItemDetailsTimeRanges.map((timeRange) => {
-                                const isActive = selectedTimeRange === timeRange;
-                                return /* @__PURE__ */ jsx(
-                                  "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__ */ jsx("div", { className: "flex flex-col gap-4", children: otherContent != null ? otherContent : /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-3", children: otherRows.map((row) => /* @__PURE__ */ jsxs(
-                        "div",
-                        {
-                          className: "flex items-center justify-between rounded-agg-xl bg-agg-secondary-hover px-4 py-3",
-                          children: [
-                            /* @__PURE__ */ jsx(Typography, { variant: "label", className: "text-agg-muted-foreground", children: row.label }),
-                            /* @__PURE__ */ jsx(Typography, { variant: "body", className: "text-right", children: row.value })
-                          ]
-                        },
-                        row.label
-                      )) }) }) : null
-                    ] })
-                  ]
-                }
-              )
-            ] })
-          }
-        )
-      ]
-    }
-  );
-};
-var MarketDetails = (props) => {
-  var _a;
-  const [uncontrolledIsOpened, setUncontrolledIsOpened] = useState(
-    (_a = props.defaultIsOpened) != null ? _a : marketDetailsDefaultIsOpened
-  );
-  useEffect(() => {
-    if (typeof props.isOpened !== "boolean")
-      return;
-    setUncontrolledIsOpened(props.isOpened);
-  }, [props.isOpened]);
-  const resolvedIsOpened = typeof props.isOpened === "boolean" ? props.isOpened : uncontrolledIsOpened;
-  const handleOpenChange = (nextIsOpened) => {
-    var _a2;
-    if (typeof props.isOpened !== "boolean") {
-      setUncontrolledIsOpened(nextIsOpened);
-    }
-    (_a2 = props.onOpenChange) == null ? void 0 : _a2.call(props, nextIsOpened);
-  };
-  const hasEventProp = "event" in props && !!props.event;
-  const { event: fetchedEvent, isLoading: isFetchingEvent } = useEvent(
-    hasEventProp ? void 0 : props.eventId,
-    {
-      enabled: !props.isLoading && !hasEventProp && !!props.eventId
-    }
-  );
-  if (props.isLoading) {
-    return /* @__PURE__ */ jsx(
-      MarketDetailsLoadingState,
-      {
-        isOpened: resolvedIsOpened,
-        ariaLabel: props.ariaLabel,
-        classNames: props.classNames
-      }
-    );
-  }
-  if ("event" in props && props.event) {
-    return /* @__PURE__ */ jsx(
-      MarketDetailsContent,
-      __spreadProps(__spreadValues({}, props), {
-        isOpened: resolvedIsOpened,
-        onOpenChange: handleOpenChange,
-        event: props.event
-      })
-    );
-  }
-  if (isFetchingEvent) {
-    return /* @__PURE__ */ jsx(
-      MarketDetailsLoadingState,
-      {
-        isOpened: resolvedIsOpened,
-        ariaLabel: props.ariaLabel,
-        classNames: props.classNames
-      }
-    );
-  }
-  if (!fetchedEvent) {
-    return /* @__PURE__ */ jsx(MarketDetailsUnavailableState, { ariaLabel: props.ariaLabel, classNames: props.classNames });
-  }
-  return /* @__PURE__ */ jsx(
-    MarketDetailsContent,
-    __spreadProps(__spreadValues({}, props), {
-      isOpened: resolvedIsOpened,
-      onOpenChange: handleOpenChange,
-      event: fetchedEvent
-    })
-  );
-};
-MarketDetails.displayName = "MarketDetails";
-
-export {
-  MarketDetails
-};