@agg-market/ui 0.0.1

package/dist/chunk-AOFP74IB.mjs

@@ -0,0 +1,850 @@
+import {
+  buildPriceHistoryGroups,
+  getTimeWindowByRange,
+  resolveOutcomeLabels,
+  resolveOutcomesByVenue,
+  resolveSeriesColor
+} from "./chunk-HJOBAMDU.mjs";
+import {
+  Tabs
+} from "./chunk-VLIJ7PQK.mjs";
+import {
+  getVenueSummary,
+  normalizeProbability,
+  resolveTileImage,
+  resolveTileTitle,
+  selectPrimaryVenueMarket
+} from "./chunk-PAQ542ER.mjs";
+import {
+  Skeleton,
+  eventListItemDetailsTimeRanges,
+  getMarketDetailsTabs,
+  marketDetailsBaseCardClassName,
+  marketDetailsDefaultIsOpened,
+  orderBookRowLimitDefault
+} from "./chunk-P674XRDY.mjs";
+import {
+  LoadingIcon
+} from "./chunk-VAZE267Q.mjs";
+import {
+  VenueLogo
+} from "./chunk-4ADCXJE6.mjs";
+import {
+  Typography
+} from "./chunk-DQ6XFBYJ.mjs";
+import {
+  Card
+} from "./chunk-P5PFQX75.mjs";
+import {
+  LineChart
+} from "./chunk-L6E6Q4C4.mjs";
+import {
+  SwitchButton
+} from "./chunk-3DV3D2LH.mjs";
+import {
+  __spreadProps,
+  __spreadValues,
+  cn,
+  getMotionClassName
+} from "./chunk-GC3QIIH7.mjs";
+
+// src/events/market-details/index.tsx
+import { useEffect, useId, useMemo, useState } from "react";
+import { useEvent, useLabels, useOrderBook, usePriceHistory, useSdkUiConfig } from "@agg/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,
+  depth
+}) => {
+  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 limitedRows = sortedRows.slice(0, Math.max(1, depth));
+  const maxTotal = limitedRows.reduce((currentMax, row) => Math.max(currentMax, row.total), 0) || 1;
+  return limitedRows.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: "title", children: labels.marketDetails.unavailableTitle }),
+        /* @__PURE__ */ jsx(Typography, { variant: "meta", children: labels.marketDetails.unavailableDescription })
+      ] })
+    }
+  );
+};
+var OrderBookRows = ({
+  rows,
+  title,
+  formatNumber,
+  formatCurrency
+}) => {
+  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";
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "label", className: "text-agg-xs leading-agg-4", children: title }),
+    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: "xs" }),
+          /* @__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
+}) => {
+  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"),
+    isPositive ? "border-agg-orderbook-bid/50 bg-agg-orderbook-bid/5 text-agg-foreground" : "border-agg-orderbook-ask/50 bg-agg-orderbook-ask/5 text-agg-foreground",
+    isActive && (isPositive ? "border-agg-orderbook-bid" : "border-agg-orderbook-ask")
+  );
+};
+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);
+    }
+  );
+  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 selectedOutcomesByVenue = useMemo(() => {
+    if (!model || !selectedOutcomeLabel)
+      return [];
+    return resolveOutcomesByVenue(model.market.venueMarkets, selectedOutcomeLabel);
+  }, [model, selectedOutcomeLabel]);
+  const timeWindow = useMemo(() => {
+    return getTimeWindowByRange(selectedTimeRange);
+  }, [selectedTimeRange]);
+  const priceHistoryGroups = useMemo(() => {
+    return buildPriceHistoryGroups(selectedOutcomesByVenue);
+  }, [selectedOutcomesByVenue]);
+  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",
+      depth: orderBookDepth
+    });
+  }, [orderBookData, orderBookDepth]);
+  const bidRows = useMemo(() => {
+    return resolveOrderBookRows({
+      data: orderBookData,
+      side: "bids",
+      depth: orderBookDepth
+    });
+  }, [orderBookData, orderBookDepth]);
+  const graphSeries = useMemo(() => {
+    if (!(priceHistoryData == null ? void 0 : priceHistoryData.length))
+      return [];
+    return priceHistoryData.map((history, index) => {
+      var _a;
+      const matchingOutcome = selectedOutcomesByVenue.find((item) => {
+        return item.outcome.id === history.marketId || item.outcome.externalIdentifier === history.marketId || item.market.externalIdentifier === history.marketId;
+      });
+      return {
+        id: `${history.venue}-${history.marketId}-${index}`,
+        color: resolveSeriesColor((_a = matchingOutcome == null ? void 0 : matchingOutcome.venue) != null ? _a : history.venue, index),
+        points: history.points.map((point) => ({
+          time: point.timestamp,
+          value: point.price * 100
+        }))
+      };
+    }).filter((seriesItem) => seriesItem.points.length > 0);
+  }, [priceHistoryData, selectedOutcomesByVenue]);
+  const otherRows = useMemo(() => {
+    if (!model)
+      return [];
+    return resolveOtherTabRows(model.market, labels);
+  }, [labels, model]);
+  const handleOutcomeKeyDown = (eventToHandle) => {
+    var _a;
+    if (eventToHandle.key !== "ArrowLeft" && 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 = () => {
+    setIsOpened((prev) => !prev);
+    onOpenChange == null ? void 0 : onOpenChange(!isOpened);
+  };
+  if (!model) {
+    return /* @__PURE__ */ jsx(MarketDetailsUnavailableState, { ariaLabel, classNames });
+  }
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      className: cn(marketDetailsBaseCardClassName, classNames == null ? void 0 : classNames.root),
+      "aria-label": ariaLabel != null ? ariaLabel : model.title,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-3 px-5 py-4", isOpened && "pb-3", classNames == null ? void 0 : classNames.header), children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: "flex w-full cursor-pointer items-center justify-between gap-4 rounded-agg-2xl text-left outline-none",
+              "aria-expanded": isOpened,
+              "aria-controls": detailsContentId,
+              "aria-label": isOpened ? labels.marketDetails.toggleCloseDetailsAria(model.title) : labels.marketDetails.toggleOpenDetailsAria(model.title),
+              onClick: handleToggleExpanded,
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 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: "title", className: "truncate text-agg-lg leading-agg-7", children: model.title }),
+                    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ jsx(Typography, { variant: "meta", className: "truncate text-agg-sm leading-agg-5", children: model.subtitle }) })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx(
+                  Typography,
+                  {
+                    as: "div",
+                    variant: "value",
+                    className: "shrink-0 text-agg-2xl font-agg-bold leading-agg-8",
+                    children: formatProbabilityPercent(headlineProbability)
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "flex gap-2",
+              role: "tablist",
+              "aria-label": labels.marketDetails.marketOutcomesAria,
+              tabIndex: 0,
+              onKeyDown: handleOutcomeKeyDown,
+              children: headerOutcomeItems.map((item) => {
+                const isPositive = item.tone === "positive";
+                return /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    role: "tab",
+                    "aria-selected": item.label === selectedOutcomeLabel,
+                    tabIndex: item.label === selectedOutcomeLabel ? 0 : -1,
+                    className: getOutcomeButtonClassName({
+                      enableAnimations: config.enableAnimations,
+                      isPositive,
+                      isActive: item.label === selectedOutcomeLabel
+                    }),
+                    onClick: () => {
+                      setSelectedOutcomeLabel(item.label);
+                    },
+                    children: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2", children: [
+                      /* @__PURE__ */ jsx(
+                        VenueLogo,
+                        {
+                          venue: isPositive ? "polymarket" : "probable",
+                          size: "xs"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(Typography, { className: "text-agg-base leading-agg-6", 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-[cubic-bezier(0.4,0,0.2,1)]"
+              ),
+              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-[cubic-bezier(0.4,0,0.2,1)]"
+                    ),
+                    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__ */ jsxs(
+                        "div",
+                        {
+                          className: "flex flex-col gap-2 min-h-40 items-center justify-center",
+                          role: "status",
+                          "aria-label": labels.marketDetails.loadingOrderbookAria,
+                          "aria-busy": true,
+                          children: [
+                            /* @__PURE__ */ jsx(LoadingIcon, {}),
+                            /* @__PURE__ */ jsx(Typography, { variant: "meta", children: labels.marketDetails.loadingOrderbookLabel })
+                          ]
+                        }
+                      ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                        /* @__PURE__ */ jsx(
+                          OrderBookRows,
+                          {
+                            rows: askRows,
+                            title: labels.marketDetails.asks,
+                            formatNumber: config.formatNumber,
+                            formatCurrency: config.formatCurrency
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          OrderBookRows,
+                          {
+                            rows: bidRows,
+                            title: labels.marketDetails.bids,
+                            formatNumber: config.formatNumber,
+                            formatCurrency: config.formatCurrency
+                          }
+                        )
+                      ] }) }) : 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);
+                                  return /* @__PURE__ */ jsxs(
+                                    "div",
+                                    {
+                                      className: "inline-flex items-center gap-2 rounded-agg-full bg-agg-secondary-hover px-4 py-2",
+                                      children: [
+                                        /* @__PURE__ */ jsx(VenueLogo, { venue: item.venue, size: "xs" }),
+                                        /* @__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: () => 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: "meta", 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
+};