@agg-market/ui 5.0.0 → 6.0.0

package/dist/{home-page.js → pages.js}

@@ -56,12 +56,16 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/pages/home/index.tsx
-var home_exports = {};
-__export(home_exports, {
-  HomePage: () => HomePage
+// src/pages/index.ts
+var pages_exports = {};
+__export(pages_exports, {
+  EventMarketPage: () => EventMarketPage,
+  HomePage: () => HomePage,
+  UserProfilePage: () => UserProfilePage
 });
-module.exports = __toCommonJS(home_exports);
+module.exports = __toCommonJS(pages_exports);
+
+// src/pages/home/index.tsx
 var import_react5 = require("react");
 var import_hooks15 = require("@agg-market/hooks");
 
@@ -1552,6 +1556,21 @@ var import_hooks5 = require("@agg-market/hooks");
 
 // src/events/item-details/event-list-item-details.constants.ts
 var detailsBaseCardClassName = "w-full overflow-hidden gap-6 p-5 md:gap-8 md:p-10";
+var eventListItemDetailsTimeRanges = [
+  "1H",
+  "6H",
+  "1D",
+  "1W",
+  "1M",
+  "ALL"
+];
+var lineColorByVenue = {
+  polymarket: "#2e5cff",
+  kalshi: "#00d295",
+  probable: "#f05923",
+  opinion: "#020205"
+};
+var fallbackLineColors = ["#2e5cff", "#00d295", "#f05923", "#020205"];
 
 // src/primitives/skeleton/views/event-list-item-details-skeleton-view.tsx
 var import_jsx_runtime47 = require("react/jsx-runtime");
@@ -1600,6 +1619,14 @@ var import_hooks6 = require("@agg-market/hooks");
 
 // src/events/market-details/market-details.constants.ts
 var marketDetailsBaseCardClassName = "w-full overflow-hidden rounded-agg-lg border border-agg-separator bg-agg-secondary text-agg-foreground shadow-none hover:shadow-none";
+var getMarketDetailsTabs = (labels) => {
+  return [
+    { value: "order-book", label: labels.marketDetails.tabs.orderBook },
+    { value: "graph", label: labels.marketDetails.tabs.graph }
+  ];
+};
+var marketDetailsDefaultIsOpened = false;
+var orderBookRowLimitDefault = 4;
 
 // src/primitives/skeleton/views/market-details-skeleton-view.tsx
 var import_jsx_runtime48 = require("react/jsx-runtime");
@@ -4060,7 +4087,3842 @@ var HomePage = ({
   ] });
 };
 HomePage.displayName = "HomePage";
+
+// src/pages/event-market/index.tsx
+var import_react12 = require("react");
+var import_hooks23 = require("@agg-market/hooks");
+var import_dayjs6 = __toESM(require("dayjs"));
+
+// src/events/item-details/index.tsx
+var import_react8 = require("react");
+var import_hooks18 = require("@agg-market/hooks");
+
+// src/primitives/chart/index.tsx
+var import_dayjs2 = __toESM(require("dayjs"));
+var import_hooks17 = require("@agg-market/hooks");
+var import_react7 = require("react");
+var import_liveline = require("liveline");
+
+// src/primitives/switch-button/index.tsx
+var import_react6 = require("react");
+var import_hooks16 = require("@agg-market/hooks");
+var import_jsx_runtime67 = require("react/jsx-runtime");
+var resolveActiveIndex = (options, value) => {
+  const activeIndex = options.findIndex((option) => option.value === value);
+  if (activeIndex >= 0)
+    return activeIndex;
+  return 0;
+};
+var resolveNextEnabledIndex = (options, currentIndex, direction) => {
+  if (options.length <= 1)
+    return currentIndex;
+  const step = direction === "next" ? 1 : -1;
+  for (let offset = 1; offset <= options.length; offset += 1) {
+    const candidateIndex = (currentIndex + step * offset + options.length) % options.length;
+    const candidate = options[candidateIndex];
+    if (candidate && !candidate.disabled) {
+      return candidateIndex;
+    }
+  }
+  return currentIndex;
+};
+var SwitchButton = ({
+  options,
+  value,
+  onValueChange,
+  ariaLabel,
+  className
+}) => {
+  const { enableAnimations } = (0, import_hooks16.useSdkUiConfig)();
+  const activeIndex = (0, import_react6.useMemo)(() => {
+    return resolveActiveIndex(options, value);
+  }, [options, value]);
+  const [isAnimating, setIsAnimating] = (0, import_react6.useState)(false);
+  const [lastAnimatedIndex, setLastAnimatedIndex] = (0, import_react6.useState)(activeIndex);
+  (0, import_react6.useEffect)(() => {
+    if (lastAnimatedIndex === activeIndex) {
+      return;
+    }
+    setLastAnimatedIndex(activeIndex);
+    if (!enableAnimations) {
+      setIsAnimating(false);
+      return;
+    }
+    setIsAnimating(true);
+    const timeoutId = window.setTimeout(() => {
+      setIsAnimating(false);
+    }, 350);
+    return () => {
+      window.clearTimeout(timeoutId);
+    };
+  }, [activeIndex, enableAnimations, lastAnimatedIndex]);
+  if (options.length === 0) {
+    return null;
+  }
+  const handleKeyDown = (event, optionIndex) => {
+    if ((event == null ? void 0 : event.key) !== "ArrowLeft" && (event == null ? void 0 : event.key) !== "ArrowRight") {
+      return;
+    }
+    event == null ? void 0 : event.preventDefault();
+    const nextOptionIndex = resolveNextEnabledIndex(
+      options,
+      optionIndex,
+      event.key === "ArrowRight" ? "next" : "previous"
+    );
+    const nextOption = options[nextOptionIndex];
+    if (!nextOption || nextOption.disabled) {
+      return;
+    }
+    onValueChange(nextOption.value);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+    "div",
+    {
+      className: cn(
+        "group/agg-switch",
+        "inline-flex min-w-0 rounded-agg-full bg-agg-secondary-hover font-agg-sans",
+        getMotionClassName(enableAnimations, "transition-background duration-200 ease-in-out"),
+        "cursor-pointer hover:bg-agg-tertiary",
+        className
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
+        "div",
+        {
+          className: "relative grid min-w-0 flex-1 items-center",
+          style: {
+            gridTemplateColumns: `repeat(${options.length}, minmax(0, 1fr))`
+          },
+          role: "tablist",
+          "aria-label": ariaLabel,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+              "span",
+              {
+                className: cn(
+                  "pointer-events-none absolute inset-y-0 left-0 rounded-agg-full border-2 border-agg-primary bg-agg-secondary",
+                  getMotionClassName(
+                    enableAnimations,
+                    "transition-transform duration-500 ease-[cubic-bezier(0.77,0,0.175,1)]"
+                  )
+                ),
+                style: {
+                  width: `${100 / options.length}%`,
+                  transform: `translateX(${activeIndex * 100}%) scaleX(${isAnimating ? 1.08 : 1})`
+                },
+                "aria-hidden": "true"
+              }
+            ),
+            options.map((option, optionIndex) => {
+              var _a;
+              const isActive = optionIndex === activeIndex;
+              return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+                "button",
+                {
+                  type: "button",
+                  role: "tab",
+                  "aria-selected": isActive,
+                  "aria-label": (_a = option.ariaLabel) != null ? _a : void 0,
+                  tabIndex: isActive ? 0 : -1,
+                  disabled: option.disabled,
+                  className: cn(
+                    "relative z-10 min-w-0 rounded-agg-full px-5 py-1.5 font-agg-sans text-agg-base leading-agg-6 text-agg-foreground",
+                    getMotionClassName(
+                      enableAnimations,
+                      "transition-[colors] duration-200 ease-in-out"
+                    ),
+                    "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"
+                  ),
+                  onClick: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    if (option.disabled || isActive)
+                      return;
+                    onValueChange(option.value);
+                  },
+                  onKeyDown: (event) => {
+                    handleKeyDown(event, optionIndex);
+                  },
+                  children: option.label
+                },
+                option.value
+              );
+            })
+          ]
+        }
+      )
+    }
+  );
+};
+SwitchButton.displayName = "SwitchButton";
+
+// src/primitives/chart/index.tsx
+var import_jsx_runtime68 = require("react/jsx-runtime");
+var normalizeSeries = (series) => {
+  return series.map((seriesItem) => {
+    const pointsByTime = /* @__PURE__ */ new Map();
+    seriesItem.points.forEach((point) => {
+      if (!Number.isFinite(point.time) || !Number.isFinite(point.value)) {
+        return;
+      }
+      pointsByTime.set(Math.floor(point.time), point.value);
+    });
+    const sortedPoints = [...pointsByTime.entries()].sort((left, right) => left[0] - right[0]).map(([time, value]) => ({
+      time,
+      value
+    }));
+    return __spreadProps(__spreadValues({}, seriesItem), {
+      points: sortedPoints
+    });
+  }).filter((seriesItem) => seriesItem.points.length > 0);
+};
+var defaultValueFormatter = (value) => {
+  return `${Math.round(value)}%`;
+};
+var resolveTimeFormatter = (windowSeconds) => {
+  return (timestamp) => {
+    if (!Number.isFinite(timestamp))
+      return "";
+    if (windowSeconds <= 48 * 60 * 60) {
+      return import_dayjs2.default.unix(timestamp).format("HH:mm");
+    }
+    if (windowSeconds <= 14 * 24 * 60 * 60) {
+      return import_dayjs2.default.unix(timestamp).format("MMM D HH:mm");
+    }
+    return import_dayjs2.default.unix(timestamp).format("MMM D");
+  };
+};
+var toLivelinePoints = (points) => {
+  return points.map((point) => ({
+    time: point.time,
+    value: point.value
+  }));
+};
+var resolveWindowSeconds = (normalizedSeries) => {
+  const timestamps = normalizedSeries.flatMap(
+    (seriesItem) => seriesItem.points.map((point) => point.time)
+  );
+  if (timestamps.length <= 1)
+    return 30;
+  const minTimestamp = Math.min(...timestamps);
+  const maxTimestamp = Math.max(...timestamps);
+  const span = maxTimestamp - minTimestamp;
+  if (!Number.isFinite(span) || span <= 0)
+    return 30;
+  return Math.max(1, Math.floor(span));
+};
+var resolveLatestValue = (points) => {
+  const latestPoint = points[points.length - 1];
+  if (!latestPoint)
+    return 0;
+  return latestPoint.value;
+};
+var resolveActiveSeriesId = (series, activeSeriesId) => {
+  var _a, _b;
+  if (activeSeriesId) {
+    const matchingSeries = series.find((seriesItem) => seriesItem.id === activeSeriesId);
+    if (matchingSeries) {
+      return matchingSeries.id;
+    }
+  }
+  return (_b = (_a = series[0]) == null ? void 0 : _a.id) != null ? _b : "";
+};
+var formatDefaultSeriesLabel = (seriesItem) => {
+  return seriesItem.id.charAt(0).toUpperCase() + seriesItem.id.slice(1);
+};
+var renderDefaultSeriesControls = ({
+  series,
+  activeSeriesId,
+  handleSeriesChange,
+  defaultSeriesSwitchClassName,
+  seriesSwitchAriaLabel,
+  formatSeriesOptionAriaLabel
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+    SwitchButton,
+    {
+      ariaLabel: seriesSwitchAriaLabel,
+      className: defaultSeriesSwitchClassName,
+      options: series.map((seriesItem) => ({
+        value: seriesItem.id,
+        label: formatDefaultSeriesLabel(seriesItem),
+        ariaLabel: formatSeriesOptionAriaLabel(formatDefaultSeriesLabel(seriesItem))
+      })),
+      value: activeSeriesId,
+      onValueChange: handleSeriesChange
+    }
+  );
+};
+var resolveSelectedSeries = (series, activeSeriesId) => {
+  const availableSeriesIds = new Set(series.map((seriesItem) => seriesItem.id));
+  if (!availableSeriesIds.has(activeSeriesId)) {
+    return series[0];
+  }
+  return series.find((seriesItem) => seriesItem.id === activeSeriesId);
+};
+var LineChart = ({
+  series,
+  height = 280,
+  width,
+  classNames,
+  isLoading = false,
+  showSeriesControls = true,
+  renderSeriesControls
+}) => {
+  var _a, _b;
+  const labels = (0, import_hooks17.useLabels)();
+  const { theme } = (0, import_hooks17.useSdkUiConfig)();
+  const normalizedSeries = (0, import_react7.useMemo)(() => {
+    return normalizeSeries(series);
+  }, [series]);
+  const [activeSeriesId, setActiveSeriesId] = (0, import_react7.useState)(
+    () => resolveActiveSeriesId(normalizedSeries, null)
+  );
+  (0, import_react7.useEffect)(() => {
+    setActiveSeriesId(
+      (currentActiveSeriesId) => resolveActiveSeriesId(normalizedSeries, currentActiveSeriesId)
+    );
+  }, [normalizedSeries]);
+  const livelineTheme = theme;
+  const handleSeriesChange = (seriesId) => {
+    setActiveSeriesId(seriesId);
+  };
+  const primarySeries = (0, import_react7.useMemo)(() => {
+    return resolveSelectedSeries(normalizedSeries, activeSeriesId);
+  }, [activeSeriesId, normalizedSeries]);
+  const primaryData = (0, import_react7.useMemo)(() => {
+    if (!primarySeries) {
+      return [];
+    }
+    return toLivelinePoints(primarySeries.points);
+  }, [primarySeries]);
+  const primaryValue = (0, import_react7.useMemo)(() => {
+    if (!primarySeries) {
+      return 0;
+    }
+    return resolveLatestValue(primarySeries.points);
+  }, [primarySeries]);
+  const livelineSeries = (0, import_react7.useMemo)(() => {
+    return normalizedSeries.map((seriesItem) => ({
+      id: seriesItem.id,
+      color: seriesItem.color,
+      data: toLivelinePoints(seriesItem.points),
+      value: resolveLatestValue(seriesItem.points)
+    }));
+  }, [normalizedSeries]);
+  const windowSeconds = (0, import_react7.useMemo)(() => {
+    return resolveWindowSeconds(normalizedSeries);
+  }, [normalizedSeries]);
+  const timeFormatter = (0, import_react7.useMemo)(() => {
+    return resolveTimeFormatter(windowSeconds);
+  }, [windowSeconds]);
+  const seriesControls = showSeriesControls && normalizedSeries.length > 0 ? (_a = renderSeriesControls == null ? void 0 : renderSeriesControls({
+    series: normalizedSeries,
+    activeSeriesId,
+    handleSeriesChange
+  })) != null ? _a : normalizedSeries.length > 1 ? renderDefaultSeriesControls({
+    series: normalizedSeries,
+    activeSeriesId,
+    handleSeriesChange,
+    defaultSeriesSwitchClassName: classNames == null ? void 0 : classNames.defaultSeriesSwitch,
+    seriesSwitchAriaLabel: labels.common.lineChartSeriesSwitchAria,
+    formatSeriesOptionAriaLabel: labels.common.lineChartSeriesOptionAria
+  }) : null : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: cn("group/agg-chart", "w-full", classNames == null ? void 0 : classNames.root), style: { width }, children: [
+    !isLoading && seriesControls ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: cn("mb-3", classNames == null ? void 0 : classNames.controls), children: seriesControls }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+      "div",
+      {
+        className: cn(
+          "overflow-hidden [&>div:not(.agg-livechart):first-of-type]:hidden!",
+          classNames == null ? void 0 : classNames.chartViewport
+        ),
+        style: { height },
+        role: "img",
+        "aria-label": labels.common.lineChartAria,
+        children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+          import_liveline.Liveline,
+          {
+            className: cn("h-full w-full agg-livechart", classNames == null ? void 0 : classNames.liveline),
+            data: primaryData,
+            value: primaryValue,
+            series: livelineSeries,
+            color: (_b = primarySeries == null ? void 0 : primarySeries.color) != null ? _b : "var(--agg-color-primary)",
+            theme: livelineTheme,
+            grid: true,
+            momentum: false,
+            pulse: false,
+            window: windowSeconds,
+            formatValue: defaultValueFormatter,
+            formatTime: timeFormatter,
+            padding: {
+              top: 12,
+              right: 80,
+              bottom: 28,
+              left: 12
+            },
+            loading: isLoading
+          }
+        )
+      }
+    )
+  ] });
+};
+LineChart.displayName = "LineChart";
+
+// src/events/item-details/event-list-item-details.utils.ts
+var import_dayjs3 = __toESM(require("dayjs"));
+var normalizeLabel = (value) => {
+  return value.trim().toLowerCase();
+};
+var isDateLikeLabel = (value) => {
+  if (!value.trim())
+    return false;
+  return (0, import_dayjs3.default)(value).isValid();
+};
+var formatDateLabel = (value) => {
+  if (!isDateLikeLabel(value))
+    return value;
+  return (0, import_dayjs3.default)(value).format("MMM D, YYYY");
+};
+var getDefaultSelectedTimeRange = (value) => {
+  if (!value)
+    return "1M";
+  return value;
+};
+var getTimeWindowByRange = (range) => {
+  const endTs = (0, import_dayjs3.default)().unix();
+  if (range === "1H") {
+    return {
+      startTs: import_dayjs3.default.unix(endTs).subtract(1, "hour").unix(),
+      endTs,
+      intervalMinutes: 5
+    };
+  }
+  if (range === "6H") {
+    return {
+      startTs: import_dayjs3.default.unix(endTs).subtract(6, "hour").unix(),
+      endTs,
+      intervalMinutes: 15
+    };
+  }
+  if (range === "1D") {
+    return {
+      startTs: import_dayjs3.default.unix(endTs).subtract(1, "day").unix(),
+      endTs,
+      intervalMinutes: 30
+    };
+  }
+  if (range === "1W") {
+    return {
+      startTs: import_dayjs3.default.unix(endTs).subtract(7, "day").unix(),
+      endTs,
+      intervalMinutes: 60
+    };
+  }
+  if (range === "1M") {
+    return {
+      startTs: import_dayjs3.default.unix(endTs).subtract(1, "month").unix(),
+      endTs,
+      intervalMinutes: 240
+    };
+  }
+  return {
+    startTs: import_dayjs3.default.unix(endTs).subtract(6, "month").unix(),
+    endTs,
+    intervalMinutes: 720
+  };
+};
+var resolveOutcomeLabels = (venueMarkets) => {
+  var _a;
+  const primaryMarket = selectPrimaryVenueMarket(venueMarkets);
+  const initialLabels = ((_a = primaryMarket == null ? void 0 : primaryMarket.venueMarketOutcomes) != null ? _a : []).map(
+    (outcome) => resolveOutcomeTitle(outcome)
+  );
+  const labels = new Set(initialLabels);
+  venueMarkets.forEach((market) => {
+    sortOutcomes(market.venueMarketOutcomes).forEach((outcome) => {
+      labels.add(resolveOutcomeTitle(outcome));
+    });
+  });
+  return [...labels];
+};
+var resolveDefaultOutcomeLabel = (outcomeLabels) => {
+  return outcomeLabels[0];
+};
+var matchOutcomeByLabel = (outcome, selectedOutcomeLabel) => {
+  const normalizedSelectedLabel = normalizeLabel(selectedOutcomeLabel);
+  const resolvedTitle = resolveOutcomeTitle(outcome);
+  return normalizeLabel(resolvedTitle) === normalizedSelectedLabel || normalizeLabel(outcome.label) === normalizedSelectedLabel;
+};
+var resolveOutcomesByVenue = (venueMarkets, selectedOutcomeLabel) => {
+  return venueMarkets.map((market) => {
+    const matchedOutcome = sortOutcomes(market.venueMarketOutcomes).find((outcome) => {
+      return matchOutcomeByLabel(outcome, selectedOutcomeLabel);
+    });
+    if (!matchedOutcome)
+      return null;
+    return {
+      venue: market.venue,
+      market,
+      outcome: matchedOutcome
+    };
+  }).filter((item) => item != null);
+};
+var buildPriceHistoryGroups = (selectedOutcomes, fallbackMarketId) => {
+  const marketIdByVenue = /* @__PURE__ */ new Map();
+  selectedOutcomes.forEach(({ venue, market }) => {
+    var _a, _b;
+    const marketWithCanonicalId = market;
+    const canonicalMarketId = (_a = marketWithCanonicalId.marketId) != null ? _a : fallbackMarketId;
+    if (!canonicalMarketId)
+      return;
+    if (!marketIdByVenue.has(venue)) {
+      marketIdByVenue.set(venue, /* @__PURE__ */ new Set());
+    }
+    (_b = marketIdByVenue.get(venue)) == null ? void 0 : _b.add(canonicalMarketId);
+  });
+  return [...marketIdByVenue.entries()].map(([venue, marketIds]) => ({
+    venue,
+    venueMarketOutcomeIds: [...marketIds]
+  })).filter((group) => group.venueMarketOutcomeIds.length > 0);
+};
+var resolveSeriesColor = (venue, index) => {
+  var _a;
+  const colorFromVenue = lineColorByVenue[venue];
+  if (colorFromVenue)
+    return colorFromVenue;
+  return (_a = fallbackLineColors[index % fallbackLineColors.length]) != null ? _a : "#2e5cff";
+};
+
+// src/events/item-details/index.tsx
+var import_jsx_runtime69 = require("react/jsx-runtime");
+var EventListItemDetailsLoadingState = ({
+  classNames,
+  ariaLabel
+}) => {
+  const labels = (0, import_hooks18.useLabels)();
+  return /* @__PURE__ */ (0, import_jsx_runtime69.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 = (0, import_hooks18.useLabels)();
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+    Card,
+    {
+      className: cn(detailsBaseCardClassName, classNames == null ? void 0 : classNames.root),
+      role: "status",
+      "aria-label": ariaLabel != null ? ariaLabel : labels.eventItemDetails.unavailableAria,
+      children: /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: cn("flex flex-col gap-1", classNames == null ? void 0 : classNames.header), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Typography, { variant: "body-large-strong", className: cn("truncate", classNames == null ? void 0 : classNames.title), children: labels.eventItemDetails.unavailableTitle }),
+        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Typography, { variant: "body", className: "text-agg-muted-foreground", children: labels.eventItemDetails.unavailableDescription })
+      ] })
+    }
+  );
+};
+var EventListItemDetailsNotFoundState = ({
+  classNames,
+  ariaLabel
+}) => {
+  const labels = (0, import_hooks18.useLabels)();
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Card, { className: cn(detailsBaseCardClassName, classNames == null ? void 0 : classNames.root), children: /* @__PURE__ */ (0, import_jsx_runtime69.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 = (0, import_hooks18.useLabels)();
+  const [selectedVenue, setSelectedVenue] = (0, import_react8.useState)(null);
+  const [activeProbabilityMode, setActiveProbabilityMode] = (0, import_react8.useState)("yes");
+  const probabilityModeConfigs = (0, import_react8.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 = (0, import_react8.useMemo)(() => {
+    return {
+      yes: resolveOutcomesByVenue(venueMarkets, probabilityModeConfigs.yes.sourceOutcomeLabel),
+      no: resolveOutcomesByVenue(venueMarkets, probabilityModeConfigs.no.sourceOutcomeLabel)
+    };
+  }, [
+    probabilityModeConfigs.no.sourceOutcomeLabel,
+    probabilityModeConfigs.yes.sourceOutcomeLabel,
+    venueMarkets
+  ]);
+  (0, import_react8.useEffect)(() => {
+    if (isDateOutcomeMarket) {
+      return;
+    }
+    const nextMode = selectedOutcomeLabel === probabilityModeConfigs.no.sourceOutcomeLabel ? "no" : "yes";
+    setActiveProbabilityMode(nextMode);
+  }, [isDateOutcomeMarket, probabilityModeConfigs.no.sourceOutcomeLabel, selectedOutcomeLabel]);
+  const normalizedVenueDataByMode = (0, import_react8.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 = (0, import_react8.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 = (0, import_react8.useMemo)(() => {
+    return buildPriceHistoryGroups(allOutcomesForHistory, canonicalMarketId);
+  }, [allOutcomesForHistory, canonicalMarketId]);
+  const timeWindow = (0, import_react8.useMemo)(() => {
+    return getTimeWindowByRange(selectedTimeRange);
+  }, [selectedTimeRange]);
+  const {
+    data: priceHistoryData,
+    isLoading: isPriceHistoryLoading,
+    error: priceHistoryError,
+    results: priceHistoryResults
+  } = (0, import_hooks18.usePriceHistory)(__spreadProps(__spreadValues({
+    groups: priceHistoryGroups
+  }, timeWindow), {
+    enabled: priceHistoryGroups.length > 0
+  }));
+  const priceHistoryByVenue = (0, import_react8.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 = (0, import_react8.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 = (0, import_react8.useMemo)(() => {
+    const modeSeries = chartSeriesByMode[activeProbabilityMode];
+    if (!selectedVenue)
+      return modeSeries;
+    return modeSeries.filter((seriesItem) => seriesItem.venue === selectedVenue);
+  }, [activeProbabilityMode, chartSeriesByMode, selectedVenue]);
+  const segmentedDisplayItems = (0, import_react8.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];
+  (0, import_react8.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__ */ (0, import_jsx_runtime69.jsx)(
+      "div",
+      {
+        className: cn(
+          "w-full rounded-agg-xl border border-agg-separator bg-agg-secondary",
+          classNames == null ? void 0 : classNames.chart
+        ),
+        children: /* @__PURE__ */ (0, import_jsx_runtime69.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__ */ (0, import_jsx_runtime69.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__ */ (0, import_jsx_runtime69.jsxs)(
+          "div",
+          {
+            className: cn("flex flex-row items-center justify-between gap-4", classNames == null ? void 0 : classNames.summary),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime69.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__ */ (0, import_jsx_runtime69.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__ */ (0, import_jsx_runtime69.jsx)(
+                          Badge,
+                          {
+                            text,
+                            size: "large",
+                            prefix: showVenueLogo ? /* @__PURE__ */ (0, import_jsx_runtime69.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__ */ (0, import_jsx_runtime69.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 = (0, import_hooks18.useSdkUiConfig)();
+  const labels = (0, import_hooks18.useLabels)();
+  const venueMarkets = (0, import_react8.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 = (0, import_react8.useMemo)(() => {
+    return selectPrimaryVenueMarket(venueMarkets);
+  }, [venueMarkets]);
+  const outcomeLabels = (0, import_react8.useMemo)(() => {
+    return resolveOutcomeLabels(venueMarkets);
+  }, [venueMarkets]);
+  const [selectedOutcomeLabel, setSelectedOutcomeLabel] = (0, import_react8.useState)(() => {
+    return resolveDefaultOutcomeLabel(outcomeLabels);
+  });
+  const [selectedTimeRange, setSelectedTimeRange] = (0, import_react8.useState)(() => {
+    return getDefaultSelectedTimeRange(defaultTimeRange);
+  });
+  (0, import_react8.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 = (0, import_react8.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 = (0, import_react8.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]);
+  (0, import_react8.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 = (0, import_react8.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 = (0, import_react8.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__ */ (0, import_jsx_runtime69.jsx)(EventListItemDetailsUnavailableState, { classNames, ariaLabel });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
+    Card,
+    {
+      className: cn(detailsBaseCardClassName, classNames == null ? void 0 : classNames.root),
+      "aria-label": ariaLabel != null ? ariaLabel : resolvedTitle,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime69.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__ */ (0, import_jsx_runtime69.jsx)(
+                "img",
+                {
+                  src: resolvedImage,
+                  alt: "",
+                  className: "size-10 rounded-agg-lg object-cover md:size-[60px]"
+                }
+              ) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-3", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime69.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__ */ (0, import_jsx_runtime69.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__ */ (0, import_jsx_runtime69.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__ */ (0, import_jsx_runtime69.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__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Typography, { variant: "caption-caps", className: "text-agg-muted-foreground", children: statItem.label }),
+            /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "flex items-baseline gap-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+                Typography,
+                {
+                  variant: "body",
+                  className: "text-agg-lg leading-agg-7 text-agg-foreground",
+                  children: statItem.value
+                }
+              ),
+              statItem.delta ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Typography, { variant: "label", className: cn(deltaClassName), children: statItem.delta }) : null
+            ] })
+          ] }, `${statItem.label}-${statItem.value}`);
+        }) }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime69.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__ */ (0, import_jsx_runtime69.jsxs)("div", { className: cn("flex flex-wrap items-center justify-between gap-4", classNames == null ? void 0 : classNames.footer), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Typography, { variant: "label", className: "text-agg-muted-foreground", children: volumeLabel || "-" }),
+          /* @__PURE__ */ (0, import_jsx_runtime69.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__ */ (0, import_jsx_runtime69.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
+  } = (0, import_hooks18.useEvent)(eventId, {
+    enabled: !!eventId
+  });
+  const resolvedEvent = (0, import_react8.useMemo)(() => {
+    return resolveEventListItemEvent(fetchedEvent);
+  }, [fetchedEvent]);
+  if (!eventId) {
+    return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+      EventListItemDetailsUnavailableState,
+      {
+        classNames: rest.classNames,
+        ariaLabel: rest.ariaLabel
+      }
+    );
+  }
+  if (isLoading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(EventListItemDetailsLoadingState, { classNames: rest.classNames, ariaLabel: rest.ariaLabel });
+  }
+  if (isErrorWithStatus(error, 404)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(EventListItemDetailsNotFoundState, { classNames: rest.classNames, ariaLabel: rest.ariaLabel });
+  }
+  if (!fetchedEvent && !isError) {
+    return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(EventListItemDetailsLoadingState, { classNames: rest.classNames, ariaLabel: rest.ariaLabel });
+  }
+  if (!resolvedEvent) {
+    return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+      EventListItemDetailsUnavailableState,
+      {
+        classNames: rest.classNames,
+        ariaLabel: rest.ariaLabel
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(EventListItemDetailsContent, __spreadValues({ event: resolvedEvent }, rest));
+};
+var EventListItemDetails = (props) => {
+  if (props.isLoading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime69.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__ */ (0, import_jsx_runtime69.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__ */ (0, import_jsx_runtime69.jsx)(EventListItemDetailsByEventId, __spreadValues({}, byEventIdProps));
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+    EventListItemDetailsUnavailableState,
+    {
+      classNames: props.classNames,
+      ariaLabel: props.ariaLabel
+    }
+  );
+};
+EventListItemDetails.displayName = "EventListItemDetails";
+
+// src/events/market-details/index.tsx
+var import_react9 = require("react");
+var import_hooks19 = require("@agg-market/hooks");
+
+// src/events/market-details/market-details.utils.ts
+var import_dayjs4 = __toESM(require("dayjs"));
+var import_zod = require("zod");
+var MarketDetailsTabSchema = import_zod.z.enum(["order-book", "graph", "other"]);
+var OrderBookLevelSchema = import_zod.z.object({
+  price: import_zod.z.number().min(0).max(1),
+  size: import_zod.z.number().nonnegative()
+});
+var OrderBookRowSchema = import_zod.z.object({
+  id: import_zod.z.string(),
+  venue: import_zod.z.enum(["kalshi", "polymarket"]),
+  price: import_zod.z.number().min(0).max(1),
+  size: import_zod.z.number().nonnegative(),
+  total: import_zod.z.number().nonnegative(),
+  tone: import_zod.z.enum(["positive", "negative"])
+});
+var normalizeLabel2 = (value) => {
+  return value.trim().toLowerCase();
+};
+var hasBinaryLabels = (labels) => {
+  const normalizedLabels = labels.map(normalizeLabel2);
+  return normalizedLabels.includes("yes") && normalizedLabels.includes("no");
+};
+var resolveInitialTab = (defaultTab) => {
+  const parsedTab = MarketDetailsTabSchema.safeParse(defaultTab);
+  if (parsedTab.success)
+    return parsedTab.data;
+  return "order-book";
+};
+var resolveMarket = (event, marketId) => {
+  if (!event.markets.length)
+    return void 0;
+  if (!marketId)
+    return event.markets[0];
+  return event.markets.find((market) => market.id === marketId);
+};
+var resolveDisplayOutcomeLabels = (labels) => {
+  if (!hasBinaryLabels(labels))
+    return labels;
+  return ["Yes", "No"].filter(
+    (label) => labels.some((value) => normalizeLabel2(value) === normalizeLabel2(label))
+  );
+};
+var resolveInitialOutcomeLabel = (labels, defaultOutcomeLabel) => {
+  var _a;
+  if (labels.length === 0)
+    return void 0;
+  if (defaultOutcomeLabel) {
+    const matchedLabel = labels.find(
+      (label) => normalizeLabel2(label) === normalizeLabel2(defaultOutcomeLabel)
+    );
+    if (matchedLabel)
+      return matchedLabel;
+  }
+  if (hasBinaryLabels(labels)) {
+    return (_a = labels.find((label) => normalizeLabel2(label) === "yes")) != null ? _a : labels[0];
+  }
+  return labels[0];
+};
+var resolveAverageProbabilityByLabel = (venueMarkets, labels) => {
+  return new Map(
+    labels.map((label) => {
+      const matchingOutcomes = resolveOutcomesByVenue(venueMarkets, label);
+      const probabilities = matchingOutcomes.map((item) => normalizeProbability(item.outcome.price)).filter((value) => value != null);
+      if (!probabilities.length) {
+        return [label, void 0];
+      }
+      const averageProbability = probabilities.reduce((sum, value) => sum + value, 0) / probabilities.length;
+      return [label, averageProbability];
+    })
+  );
+};
+var formatProbabilityPercent = (value) => {
+  if (value == null)
+    return "-";
+  return `${Math.round(value * 100)}%`;
+};
+var formatProbabilityCents = (value) => {
+  if (value == null)
+    return "-";
+  const cents = (value * 100).toFixed(1).replace(/\.0$/, "");
+  return `${cents}\xA2`;
+};
+var resolveOutcomeTone = (label, index) => {
+  const normalizedLabel = normalizeLabel2(label);
+  if (normalizedLabel === "yes" || normalizedLabel === "up" || normalizedLabel === "buy") {
+    return "positive";
+  }
+  if (normalizedLabel === "no" || normalizedLabel === "down" || normalizedLabel === "sell") {
+    return "negative";
+  }
+  return index === 0 ? "positive" : "negative";
+};
+var resolveHeaderOutcomeItems = (venueMarkets, defaultOutcomeLabel) => {
+  const labels = resolveDisplayOutcomeLabels(resolveOutcomeLabels(venueMarkets));
+  const probabilityByLabel = resolveAverageProbabilityByLabel(venueMarkets, labels);
+  return labels.slice(0, 2).map((label, index) => {
+    var _a;
+    return {
+      label,
+      probability: probabilityByLabel.get(label),
+      tone: resolveOutcomeTone(label, index),
+      isDefault: normalizeLabel2(label) === normalizeLabel2((_a = defaultOutcomeLabel != null ? defaultOutcomeLabel : labels[0]) != null ? _a : "")
+    };
+  });
+};
+var resolveSubtitle = ({
+  venueMarkets,
+  volume,
+  formatCompactCurrency,
+  labels
+}) => {
+  const { venueCount } = getVenueSummary(venueMarkets);
+  const parts = [
+    `${venueCount} ${venueCount === 1 ? labels.marketDetails.meta.venueSingular : labels.marketDetails.meta.venuePlural}`
+  ];
+  if (typeof volume === "number") {
+    parts.push(`${formatCompactCurrency(volume)} ${labels.marketDetails.meta.volumeSuffix}`);
+  }
+  return parts.join(" \xB7 ");
+};
+var resolveOrderBookRows = ({
+  data,
+  side
+}) => {
+  if (!(data == null ? void 0 : data.length))
+    return [];
+  const tone = side === "asks" ? "negative" : "positive";
+  const rows = data.flatMap((result) => {
+    var _a;
+    return ((_a = result.orderbook[side]) != null ? _a : []).flatMap(
+      (level, index) => {
+        const parsedLevel = OrderBookLevelSchema.safeParse(level);
+        if (!parsedLevel.success)
+          return [];
+        const parsedRow = OrderBookRowSchema.safeParse({
+          id: `${result.market.id}-${side}-${index}-${parsedLevel.data.price}`,
+          venue: result.market.venue,
+          price: parsedLevel.data.price,
+          size: parsedLevel.data.size,
+          total: parsedLevel.data.price * parsedLevel.data.size,
+          tone
+        });
+        if (!parsedRow.success)
+          return [];
+        return [parsedRow.data];
+      }
+    );
+  });
+  const sortedRows = [...rows].sort((left, right) => {
+    if (side === "asks")
+      return left.price - right.price;
+    return right.price - left.price;
+  });
+  const maxTotal = sortedRows.reduce((currentMax, row) => Math.max(currentMax, row.total), 0) || 1;
+  return sortedRows.map((row) => __spreadProps(__spreadValues({}, row), {
+    barScale: row.total / maxTotal
+  }));
+};
+var resolveOtherTabRows = (market, labels) => {
+  var _a;
+  const rows = [];
+  rows.push({
+    label: labels.marketDetails.meta.status,
+    value: (_a = market.status) != null ? _a : labels.marketDetails.meta.unknown
+  });
+  if (market.creationDate) {
+    rows.push({
+      label: labels.marketDetails.meta.created,
+      value: (0, import_dayjs4.default)(market.creationDate).format("MMM D, YYYY")
+    });
+  }
+  if (market.startDate) {
+    rows.push({
+      label: labels.marketDetails.meta.opens,
+      value: (0, import_dayjs4.default)(market.startDate).format("MMM D, YYYY")
+    });
+  }
+  if (market.endDate) {
+    rows.push({
+      label: labels.marketDetails.meta.closes,
+      value: (0, import_dayjs4.default)(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
+var import_jsx_runtime70 = require("react/jsx-runtime");
+var MarketDetailsLoadingState = ({
+  isOpened = marketDetailsDefaultIsOpened,
+  ariaLabel,
+  classNames
+}) => {
+  const labels = (0, import_hooks19.useLabels)();
+  return /* @__PURE__ */ (0, import_jsx_runtime70.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 = (0, import_hooks19.useLabels)();
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+    Card,
+    {
+      className: cn(marketDetailsBaseCardClassName, classNames == null ? void 0 : classNames.root),
+      role: "status",
+      "aria-label": ariaLabel != null ? ariaLabel : labels.marketDetails.unavailableAria,
+      children: /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "flex flex-col gap-1 p-5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Typography, { variant: "body-large-strong", children: labels.marketDetails.unavailableTitle }),
+        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Typography, { variant: "label", className: "text-agg-muted-foreground", children: labels.marketDetails.unavailableDescription })
+      ] })
+    }
+  );
+};
+var MarketDetailsNotFoundState = ({
+  ariaLabel,
+  classNames
+}) => {
+  const labels = (0, import_hooks19.useLabels)();
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Card, { className: cn(marketDetailsBaseCardClassName, "p-0", classNames == null ? void 0 : classNames.root), children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+    StateMessage,
+    {
+      ariaLabel: ariaLabel != null ? ariaLabel : labels.marketDetails.notFoundAria,
+      title: labels.marketDetails.notFoundTitle,
+      description: labels.marketDetails.notFoundDescription,
+      className: "min-h-[280px] md:min-h-[320px]"
+    }
+  ) });
+};
+var OrderBookRows = ({
+  rows,
+  title,
+  formatNumber,
+  formatCurrency,
+  visibleRows
+}) => {
+  const labels = (0, import_hooks19.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__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Typography, { variant: "caption-caps", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime70.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__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime70.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__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "flex items-center gap-1 md:gap-3", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(VenueLogo, { venue: row.venue, size: "small" }),
+              /* @__PURE__ */ (0, import_jsx_runtime70.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__ */ (0, import_jsx_runtime70.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__ */ (0, import_jsx_runtime70.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__ */ (0, import_jsx_runtime70.jsx)("div", { className: "flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime70.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__ */ (0, import_jsx_runtime70.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 = (0, import_hooks19.useSdkUiConfig)();
+  const labels = (0, import_hooks19.useLabels)();
+  const detailsContentId = (0, import_react9.useId)();
+  const model = (0, import_react9.useMemo)(() => {
+    return buildMarketDetailsModel({
+      event,
+      marketId,
+      title,
+      image,
+      formatCompactCurrency: config.formatCompactCurrency,
+      labels
+    });
+  }, [config.formatCompactCurrency, event, image, labels, marketId, title]);
+  const resolvedMarket = (0, import_react9.useMemo)(() => {
+    return resolveMarket(event, marketId);
+  }, [event, marketId]);
+  const marketDetailsTabs = (0, import_react9.useMemo)(() => {
+    return getMarketDetailsTabs(labels);
+  }, [labels]);
+  const [selectedTab, setSelectedTab] = (0, import_react9.useState)(
+    () => resolveInitialTab(defaultTab)
+  );
+  const [isOpened, setIsOpened] = (0, import_react9.useState)(defaultIsOpened);
+  (0, import_react9.useEffect)(() => {
+    setSelectedTab(resolveInitialTab(defaultTab));
+  }, [defaultTab]);
+  const [selectedTimeRange, setSelectedTimeRange] = (0, import_react9.useState)(defaultTimeRange);
+  (0, import_react9.useEffect)(() => {
+    setSelectedTimeRange(defaultTimeRange);
+  }, [defaultTimeRange]);
+  const [selectedOutcomeLabel, setSelectedOutcomeLabel] = (0, import_react9.useState)(
+    () => {
+      var _a;
+      return resolveInitialOutcomeLabel((_a = model == null ? void 0 : model.outcomeLabels) != null ? _a : [], defaultOutcomeLabel);
+    }
+  );
+  const [selectedGraphVenue, setSelectedGraphVenue] = (0, import_react9.useState)(null);
+  (0, import_react9.useEffect)(() => {
+    var _a;
+    setSelectedOutcomeLabel(
+      resolveInitialOutcomeLabel((_a = model == null ? void 0 : model.outcomeLabels) != null ? _a : [], defaultOutcomeLabel)
+    );
+  }, [defaultOutcomeLabel, model == null ? void 0 : model.outcomeLabels]);
+  const headerOutcomeItems = (0, import_react9.useMemo)(() => {
+    if (!model)
+      return [];
+    return resolveHeaderOutcomeItems(model.market.venueMarkets, selectedOutcomeLabel);
+  }, [model, selectedOutcomeLabel]);
+  const headlineProbability = (0, import_react9.useMemo)(() => {
+    if (!model || !selectedOutcomeLabel)
+      return void 0;
+    return model.probabilityByLabel.get(selectedOutcomeLabel);
+  }, [model, selectedOutcomeLabel]);
+  const outcomesByLabel = (0, import_react9.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 = (0, import_react9.useMemo)(() => {
+    var _a;
+    if (!selectedOutcomeLabel)
+      return [];
+    return (_a = outcomesByLabel.get(selectedOutcomeLabel)) != null ? _a : [];
+  }, [outcomesByLabel, selectedOutcomeLabel]);
+  const timeWindow = (0, import_react9.useMemo)(() => {
+    return getTimeWindowByRange(selectedTimeRange);
+  }, [selectedTimeRange]);
+  const graphOutcomes = (0, import_react9.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 = (0, import_react9.useMemo)(() => {
+    return buildPriceHistoryGroups(graphOutcomes, canonicalMarketIdForHistory);
+  }, [canonicalMarketIdForHistory, graphOutcomes]);
+  const { data: priceHistoryData, isLoading: isPriceHistoryLoading } = (0, import_hooks19.usePriceHistory)(__spreadProps(__spreadValues({
+    groups: priceHistoryGroups
+  }, timeWindow), {
+    enabled: isOpened && selectedTab === "graph" && priceHistoryGroups.length > 0
+  }));
+  const orderBookInputs = (0, import_react9.useMemo)(() => {
+    return selectedOutcomesByVenue.map(({ market, outcome }) => ({
+      market,
+      outcome,
+      liveUpdate: true
+    }));
+  }, [selectedOutcomesByVenue]);
+  const {
+    data: orderBookData,
+    isLoading: isOrderBookLoading,
+    error: orderBookError,
+    results: orderBookResults
+  } = (0, import_hooks19.useOrderBook)({
+    orderbooks: orderBookInputs,
+    enabled: isOpened && selectedTab === "order-book" && orderBookInputs.length > 0
+  });
+  const askRows = (0, import_react9.useMemo)(() => {
+    return resolveOrderBookRows({
+      data: orderBookData,
+      side: "asks"
+    });
+  }, [orderBookData]);
+  const bidRows = (0, import_react9.useMemo)(() => {
+    return resolveOrderBookRows({
+      data: orderBookData,
+      side: "bids"
+    });
+  }, [orderBookData]);
+  const priceHistoryByVenue = (0, import_react9.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 = (0, import_react9.useMemo)(() => {
+    const seriesByOutcomeLabel = /* @__PURE__ */ new Map();
+    const resolveOutcomeCandidateIds2 = (outcomeByVenue) => {
+      var _a, _b;
+      const marketWithCanonicalId = outcomeByVenue.market;
+      return [
+        outcomeByVenue.outcome.id,
+        (_a = outcomeByVenue.outcome.externalIdentifier) != null ? _a : void 0,
+        outcomeByVenue.market.externalIdentifier,
+        (_b = marketWithCanonicalId.marketId) != null ? _b : void 0,
+        canonicalMarketIdForHistory
+      ].filter((value) => typeof value === "string" && value.trim().length > 0);
+    };
+    headerOutcomeItems.forEach((headerOutcomeItem) => {
+      var _a;
+      const outcomes = (_a = outcomesByLabel.get(headerOutcomeItem.label)) != null ? _a : [];
+      const graphSeries2 = [];
+      outcomes.forEach((outcomeByVenue, index) => {
+        var _a2;
+        const venueHistory = priceHistoryByVenue.get(outcomeByVenue.venue);
+        if (!(venueHistory == null ? void 0 : venueHistory.length))
+          return;
+        const candidateIds = resolveOutcomeCandidateIds2(outcomeByVenue);
+        const matchingHistory = (_a2 = venueHistory.find((historyItem) => candidateIds.includes(historyItem.marketId))) != null ? _a2 : venueHistory.length === 1 ? venueHistory[0] : void 0;
+        if (!matchingHistory)
+          return;
+        const points = matchingHistory.points.map((point) => ({
+          time: point.timestamp,
+          value: point.price * 100
+        })).filter((point) => Number.isFinite(point.time) && Number.isFinite(point.value));
+        if (points.length === 0)
+          return;
+        graphSeries2.push({
+          id: `${headerOutcomeItem.label}-${outcomeByVenue.venue}-${matchingHistory.marketId}`,
+          venue: outcomeByVenue.venue,
+          color: resolveSeriesColor(outcomeByVenue.venue, index),
+          points
+        });
+      });
+      seriesByOutcomeLabel.set(headerOutcomeItem.label, graphSeries2);
+    });
+    return seriesByOutcomeLabel;
+  }, [canonicalMarketIdForHistory, headerOutcomeItems, outcomesByLabel, priceHistoryByVenue]);
+  const graphSeries = (0, import_react9.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 = (0, import_react9.useMemo)(() => {
+    if (!model)
+      return [];
+    return resolveOtherTabRows(model.market, labels);
+  }, [labels, model]);
+  const isOrderBookNotFound = isErrorWithStatus(orderBookError, 404);
+  const hasOrderBookError = !!orderBookError && !isOrderBookNotFound;
+  const hasNoOrderBook = isOrderBookNotFound || !isOrderBookLoading && !hasOrderBookError && (orderBookInputs.length === 0 || askRows.length === 0 && bidRows.length === 0);
+  const handleOutcomeKeyDown = (eventToHandle) => {
+    var _a;
+    if ((eventToHandle == null ? void 0 : eventToHandle.key) !== "ArrowLeft" && (eventToHandle == null ? void 0 : eventToHandle.key) !== "ArrowRight") {
+      return;
+    }
+    if (headerOutcomeItems.length <= 1)
+      return;
+    const activeIndex = headerOutcomeItems.findIndex((item) => {
+      return item.label === selectedOutcomeLabel;
+    });
+    const direction = eventToHandle.key === "ArrowRight" ? 1 : -1;
+    const nextIndex = activeIndex < 0 ? 0 : (activeIndex + direction + headerOutcomeItems.length) % headerOutcomeItems.length;
+    setSelectedOutcomeLabel((_a = headerOutcomeItems[nextIndex]) == null ? void 0 : _a.label);
+  };
+  const handleToggleExpanded = (event2) => {
+    if (event2 && "key" in event2 && (event2 == null ? void 0 : event2.key) !== "Enter" && (event2 == null ? void 0 : event2.key) !== " ") {
+      return;
+    }
+    event2 == null ? void 0 : event2.preventDefault();
+    event2 == null ? void 0 : event2.stopPropagation();
+    setIsOpened((prev) => {
+      const next = !prev;
+      onOpenChange == null ? void 0 : onOpenChange(next);
+      return next;
+    });
+  };
+  const handleGraphVenueToggle = (venue) => {
+    setSelectedGraphVenue((currentVenue) => {
+      if (currentVenue === venue)
+        return null;
+      return venue;
+    });
+  };
+  const handleRetryOrderBook = () => {
+    void Promise.all(orderBookResults.map((result) => result.refetch()));
+  };
+  (0, import_react9.useEffect)(() => {
+    if (!selectedGraphVenue) {
+      return;
+    }
+    if (selectedOutcomesByVenue.some((item) => item.venue === selectedGraphVenue)) {
+      return;
+    }
+    setSelectedGraphVenue(null);
+  }, [selectedGraphVenue, selectedOutcomesByVenue]);
+  if (marketId && !resolvedMarket) {
+    return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(MarketDetailsNotFoundState, { ariaLabel, classNames });
+  }
+  if (!model) {
+    return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(MarketDetailsUnavailableState, { ariaLabel, classNames });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(
+    Card,
+    {
+      className: cn(
+        "w-full rounded-agg-2xl text-left outline-none",
+        marketDetailsBaseCardClassName,
+        classNames == null ? void 0 : classNames.root
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime70.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__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "flex min-w-52 items-center gap-3 md:gap-4", children: [
+                model.image ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+                  "img",
+                  {
+                    src: model.image,
+                    alt: "",
+                    className: "size-12 rounded-agg-lg object-cover md:size-[60px]"
+                  }
+                ) : null,
+                /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "flex min-w-0 flex-col", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Typography, { as: "h3", variant: "body-large-strong", className: "truncate", children: model.title }),
+                  /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Typography, { variant: "label", className: "truncate text-agg-muted-foreground", children: model.subtitle }) })
+                ] })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Typography, { as: "div", variant: "heading", className: "shrink-0", children: formatProbabilityPercent(headlineProbability) }),
+              /* @__PURE__ */ (0, import_jsx_runtime70.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__ */ (0, import_jsx_runtime70.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__ */ (0, import_jsx_runtime70.jsxs)("span", { className: "inline-flex items-center gap-2", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+                            VenueLogo,
+                            {
+                              venue: isPositive ? "polymarket" : "probable",
+                              size: "small",
+                              color: isActiveOutcome ? "var(--agg-color-on-primary)" : void 0
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime70.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__ */ (0, import_jsx_runtime70.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__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "min-h-0", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "h-px w-full bg-agg-separator" }),
+              /* @__PURE__ */ (0, import_jsx_runtime70.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__ */ (0, import_jsx_runtime70.jsx)("div", { className: cn("block", classNames == null ? void 0 : classNames.tabs), children: /* @__PURE__ */ (0, import_jsx_runtime70.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__ */ (0, import_jsx_runtime70.jsx)("div", { className: "h-px w-full bg-agg-separator" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: cn("p-5", classNames == null ? void 0 : classNames.content), children: [
+                      selectedTab === "order-book" ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: cn("flex flex-col gap-5", classNames == null ? void 0 : classNames.orderBook), children: isOrderBookLoading ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(MarketDetailsOderbookSkeleton, {}) : hasOrderBookError ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+                        StateMessage,
+                        {
+                          ariaLabel: labels.marketDetails.orderBookUnavailableAria,
+                          tone: "warning",
+                          title: labels.marketDetails.orderBookUnavailableTitle,
+                          description: labels.marketDetails.orderBookUnavailableDescription,
+                          actionLabel: labels.common.retry,
+                          onAction: handleRetryOrderBook,
+                          className: "min-h-[248px] px-5 py-10 md:min-h-[272px]"
+                        }
+                      ) : hasNoOrderBook ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+                        StateMessage,
+                        {
+                          ariaLabel: labels.marketDetails.orderBookEmptyAria,
+                          title: labels.marketDetails.orderBookEmptyTitle,
+                          description: labels.marketDetails.orderBookEmptyDescription,
+                          className: "min-h-[248px] px-5 py-10 md:min-h-[272px]"
+                        }
+                      ) : /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(import_jsx_runtime70.Fragment, { children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+                          OrderBookRows,
+                          {
+                            rows: askRows,
+                            title: labels.marketDetails.asks,
+                            formatNumber: config.formatNumber,
+                            formatCurrency: config.formatCurrency,
+                            visibleRows: orderBookDepth
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+                          OrderBookRows,
+                          {
+                            rows: bidRows,
+                            title: labels.marketDetails.bids,
+                            formatNumber: config.formatNumber,
+                            formatCurrency: config.formatCurrency,
+                            visibleRows: orderBookDepth
+                          }
+                        )
+                      ] }) }) : null,
+                      selectedTab === "graph" ? /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: cn("flex flex-col gap-5", classNames == null ? void 0 : classNames.graph), children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+                          LineChart,
+                          {
+                            series: graphSeries,
+                            height: 260,
+                            isLoading: isPriceHistoryLoading,
+                            classNames: { root: "w-full" },
+                            showSeriesControls: selectedOutcomesByVenue.length > 0 || headerOutcomeItems.length > 0,
+                            renderSeriesControls: () => {
+                              return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "flex flex-col gap-4 md:flex-row md:items-center md:justify-between", children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime70.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__ */ (0, import_jsx_runtime70.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__ */ (0, import_jsx_runtime70.jsx)(VenueLogo, { venue: item.venue, size: "small" }),
+                                        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "text-agg-base leading-agg-6 text-agg-foreground", children: probability })
+                                      ]
+                                    },
+                                    `${item.market.id}-${item.outcome.id}`
+                                  );
+                                }) }),
+                                /* @__PURE__ */ (0, import_jsx_runtime70.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__ */ (0, import_jsx_runtime70.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__ */ (0, import_jsx_runtime70.jsx)("span", { children: typeof model.market.volume === "number" ? `${config.formatCompactCurrency(model.market.volume)} ${labels.marketDetails.meta.volumeSuffix}` : labels.marketDetails.volumeUnavailable }),
+                              /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "flex flex-wrap items-center gap-3 md:gap-4", children: eventListItemDetailsTimeRanges.map((timeRange) => {
+                                const isActive = selectedTimeRange === timeRange;
+                                return /* @__PURE__ */ (0, import_jsx_runtime70.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__ */ (0, import_jsx_runtime70.jsx)("div", { className: "flex flex-col gap-4", children: otherContent != null ? otherContent : /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "grid grid-cols-1 gap-3", children: otherRows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(
+                        "div",
+                        {
+                          className: "flex items-center justify-between rounded-agg-xl bg-agg-secondary-hover px-4 py-3",
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Typography, { variant: "label", className: "text-agg-muted-foreground", children: row.label }),
+                            /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Typography, { variant: "body", className: "text-right", children: row.value })
+                          ]
+                        },
+                        row.label
+                      )) }) }) : null
+                    ] })
+                  ]
+                }
+              )
+            ] })
+          }
+        )
+      ]
+    }
+  );
+};
+var MarketDetails = (props) => {
+  var _a;
+  const [uncontrolledIsOpened, setUncontrolledIsOpened] = (0, import_react9.useState)(
+    (_a = props.defaultIsOpened) != null ? _a : marketDetailsDefaultIsOpened
+  );
+  (0, import_react9.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,
+    error: eventError,
+    isLoading: isFetchingEvent
+  } = (0, import_hooks19.useEvent)(hasEventProp ? void 0 : props.eventId, {
+    enabled: !props.isLoading && !hasEventProp && !!props.eventId
+  });
+  if (props.isLoading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+      MarketDetailsLoadingState,
+      {
+        isOpened: resolvedIsOpened,
+        ariaLabel: props.ariaLabel,
+        classNames: props.classNames
+      }
+    );
+  }
+  if ("event" in props && props.event) {
+    return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+      MarketDetailsContent,
+      __spreadProps(__spreadValues({}, props), {
+        isOpened: resolvedIsOpened,
+        onOpenChange: handleOpenChange,
+        event: props.event
+      })
+    );
+  }
+  if (isFetchingEvent) {
+    return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+      MarketDetailsLoadingState,
+      {
+        isOpened: resolvedIsOpened,
+        ariaLabel: props.ariaLabel,
+        classNames: props.classNames
+      }
+    );
+  }
+  if (!fetchedEvent) {
+    if (isErrorWithStatus(eventError, 404)) {
+      return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(MarketDetailsNotFoundState, { ariaLabel: props.ariaLabel, classNames: props.classNames });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(MarketDetailsUnavailableState, { ariaLabel: props.ariaLabel, classNames: props.classNames });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+    MarketDetailsContent,
+    __spreadProps(__spreadValues({}, props), {
+      isOpened: resolvedIsOpened,
+      onOpenChange: handleOpenChange,
+      event: fetchedEvent
+    })
+  );
+};
+MarketDetails.displayName = "MarketDetails";
+
+// src/trading/place-order/index.tsx
+var import_react10 = require("react");
+var import_hooks21 = require("@agg-market/hooks");
+
+// src/trading/utils.ts
+var import_hooks20 = require("@agg-market/hooks");
+var import_dayjs5 = __toESM(require("dayjs"));
+var defaultLabels = (0, import_hooks20.resolveAggUiLabels)("en-US");
+var defaultSettlementSectionLabel = defaultLabels.trading.settlementSection;
+var defaultSettlementDifferencesTitle = defaultLabels.trading.settlementDifferencesTitle;
+var defaultTradingDisclaimer = defaultLabels.trading.disclaimer;
+var getTradingDateLabel = (value) => {
+  const parsedValue = (0, import_dayjs5.default)(value);
+  if (!parsedValue.isValid()) {
+    return typeof value === "string" ? value : "";
+  }
+  return parsedValue.format("MMM D, YYYY");
+};
+var getTradingVenueLabel = (venue, label) => {
+  if (label)
+    return label;
+  return defaultLabels.venues[venue];
+};
+
+// src/trading/place-order/index.tsx
+var import_jsx_runtime71 = require("react/jsx-runtime");
+var WarningFilledIcon2 = ({ className }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
+    "svg",
+    {
+      viewBox: "0 0 16 16",
+      fill: "none",
+      className: cn("text-agg-warning", className),
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("path", { d: "M8 1.33301L15.3333 14.6663H0.666656L8 1.33301Z", fill: "currentColor" }),
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("path", { d: "M8 5.33301V8.66634", stroke: "white", strokeWidth: "1.4", strokeLinecap: "round" }),
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("circle", { cx: "8", cy: "11.1667", r: "0.833333", fill: "white" })
+      ]
+    }
+  );
+};
+var ErrorFilledIcon = ({ className }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
+    "svg",
+    {
+      viewBox: "0 0 16 16",
+      fill: "none",
+      className: cn("text-agg-error", className),
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("circle", { cx: "8", cy: "8", r: "8", fill: "currentColor" }),
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("path", { d: "M8 4.16699V8.50033", stroke: "white", strokeWidth: "1.4", strokeLinecap: "round" }),
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("circle", { cx: "8", cy: "11.167", r: "0.833333", fill: "white" })
+      ]
+    }
+  );
+};
+var getPlaceOrderContainerClassName = () => {
+  return "overflow-hidden rounded-agg-xl border border-agg-border bg-agg-secondary shadow-none hover:shadow-none";
+};
+var getRoutingCardClassName = (isHighlighted) => {
+  if (!isHighlighted) {
+    return "border-agg-border bg-agg-secondary";
+  }
+  return "border-agg-trade-highlight-border bg-agg-trade-highlight-surface";
+};
+var getResultValueClassName = (tone) => {
+  if (tone === "default")
+    return "text-agg-foreground";
+  return "text-agg-success";
+};
+var negativeOutcomePattern = /\b(no|down|against|under|lose|false)\b/i;
+var resolveIsPositiveOutcome = (outcome, index) => {
+  const outcomeText = `${outcome.id} ${outcome.label}`;
+  if (negativeOutcomePattern.test(outcomeText))
+    return false;
+  if (index === 1)
+    return false;
+  return true;
+};
+var getOutcomeButtonClassName2 = ({
+  enableAnimations,
+  isActive,
+  isPositive
+}) => {
+  return cn(
+    "flex-1 cursor-pointer rounded-agg-full border px-6 py-2.5 text-agg-base leading-agg-6",
+    getMotionClassName(enableAnimations, "transition-all duration-300 ease-in-out"),
+    isActive ? isPositive ? "border-transparent bg-[#18c15c] font-agg-bold text-agg-on-primary" : "border-transparent bg-[#e5455f] font-agg-bold text-agg-on-primary" : "border-transparent bg-agg-secondary-hover font-agg-normal text-agg-foreground hover:bg-agg-tertiary"
+  );
+};
+var getStatusContent = ({
+  placement,
+  status,
+  onStatusAction
+}) => {
+  if (!status || status.placement !== placement)
+    return null;
+  if (status.tone === "warning") {
+    return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "flex items-center justify-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(WarningFilledIcon2, { className: "h-4 w-4 shrink-0" }),
+      /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("p", { className: "text-agg-sm leading-agg-5 text-agg-foreground", children: status.message })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "flex items-center gap-3 rounded-agg-lg bg-agg-status-error-surface px-3 py-2.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ErrorFilledIcon, { className: "h-4 w-4 shrink-0" }),
+      /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("p", { className: "min-w-0 flex-1 text-agg-sm leading-agg-5 text-agg-foreground", children: status.message })
+    ] }),
+    status.actionLabel ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+      "button",
+      {
+        type: "button",
+        className: "shrink-0 text-agg-sm font-agg-bold leading-agg-5 text-agg-primary",
+        "aria-label": status.actionLabel,
+        onClick: onStatusAction,
+        children: status.actionLabel
+      }
+    ) : null
+  ] });
+};
+var PlaceOrder = ({
+  title,
+  marketDate,
+  marketImageUrl,
+  activeTab,
+  buyLabel,
+  sellLabel,
+  outcomes,
+  selectedOutcomeId,
+  primaryMetric,
+  routing,
+  result,
+  actionLabel,
+  disclaimer = defaultTradingDisclaimer,
+  isDismissible = false,
+  isLoading = false,
+  status,
+  className,
+  isPrimaryActionDisabled = false,
+  isPrimaryActionLoading = false,
+  onClose,
+  onOutcomeChange,
+  onPrimaryAction,
+  onStatusAction,
+  onTabChange
+}) => {
+  const { enableAnimations } = (0, import_hooks21.useSdkUiConfig)();
+  const labels = (0, import_hooks21.useLabels)();
+  const resolvedDisclaimer = disclaimer === defaultTradingDisclaimer ? labels.trading.disclaimer : disclaimer;
+  if (isLoading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+      Skeleton,
+      {
+        ariaLabel: labels.common.loading,
+        className,
+        view: skeletonViews.placeOrder
+      }
+    );
+  }
+  const [internalTab, setInternalTab] = (0, import_react10.useState)(activeTab);
+  const [internalOutcomeId, setInternalOutcomeId] = (0, import_react10.useState)(selectedOutcomeId);
+  (0, import_react10.useEffect)(() => {
+    setInternalTab(activeTab);
+  }, [activeTab]);
+  (0, import_react10.useEffect)(() => {
+    setInternalOutcomeId(selectedOutcomeId);
+  }, [selectedOutcomeId]);
+  const resolvedTab = onTabChange ? activeTab : internalTab;
+  const resolvedOutcomeId = onOutcomeChange ? selectedOutcomeId : internalOutcomeId;
+  const hasHighlightedRouting = routing.tone === "highlighted";
+  const dateLabel = getTradingDateLabel(marketDate);
+  const tabItems2 = (0, import_react10.useMemo)(() => {
+    return [
+      { value: "buy", label: buyLabel },
+      { value: "sell", label: sellLabel }
+    ];
+  }, [buyLabel, sellLabel]);
+  const handleTabChange = (nextTab) => {
+    if (!onTabChange) {
+      setInternalTab(nextTab);
+    }
+    onTabChange == null ? void 0 : onTabChange(nextTab);
+  };
+  const handleOutcomeChange = (nextOutcomeId) => {
+    if (!onOutcomeChange) {
+      setInternalOutcomeId(nextOutcomeId);
+    }
+    onOutcomeChange == null ? void 0 : onOutcomeChange(nextOutcomeId);
+  };
+  const actionButton = /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+    Button,
+    {
+      size: "large",
+      className: "w-full",
+      disabled: isPrimaryActionDisabled,
+      isLoading: isPrimaryActionLoading,
+      "aria-label": actionLabel,
+      onClick: onPrimaryAction,
+      children: actionLabel
+    }
+  );
+  const contentBody = /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "flex flex-col gap-6 p-5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "flex items-start justify-between gap-5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
+          marketImageUrl ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+            "img",
+            {
+              src: marketImageUrl,
+              alt: "",
+              className: "h-12 w-12 shrink-0 rounded-agg-lg object-cover"
+            }
+          ) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("p", { className: "min-w-0 text-agg-base font-agg-bold leading-agg-6 text-agg-foreground", children: title })
+        ] }),
+        isDismissible ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+          "button",
+          {
+            type: "button",
+            "aria-label": labels.common.close,
+            className: "shrink-0 text-agg-foreground",
+            onClick: onClose,
+            children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+              Icon,
+              {
+                name: "close",
+                size: "medium",
+                className: "h-6 w-6 text-agg-foreground",
+                color: "currentColor"
+              }
+            )
+          }
+        ) : null
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("p", { className: "text-agg-base leading-agg-6 text-agg-foreground", children: dateLabel })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+      Tabs,
+      {
+        ariaLabel: labels.common.tabsAria,
+        items: tabItems2,
+        value: resolvedTab,
+        onChange: handleTabChange,
+        variant: "underline",
+        size: "s",
+        overflowBehavior: "scroll",
+        classNames: {
+          root: "w-full",
+          tabList: "w-full"
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "flex flex-col gap-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "flex w-full gap-2", children: outcomes.map((outcome, index) => {
+        const isActive = outcome.id === resolvedOutcomeId;
+        const isPositive = resolveIsPositiveOutcome(outcome, index);
+        return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+          "button",
+          {
+            type: "button",
+            className: getOutcomeButtonClassName2({
+              enableAnimations,
+              isActive,
+              isPositive
+            }),
+            "aria-pressed": isActive,
+            "aria-label": `${outcome.label} ${outcome.priceLabel}`,
+            onClick: () => handleOutcomeChange(outcome.id),
+            children: `${outcome.label} ${outcome.priceLabel}`
+          },
+          outcome.id
+        );
+      }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("p", { className: "text-agg-base font-agg-bold leading-agg-6 text-agg-foreground", children: primaryMetric.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("p", { className: "text-agg-sm leading-agg-5 text-agg-muted-foreground", children: primaryMetric.hint })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("p", { className: "text-agg-3xl font-agg-bold leading-agg-9 text-agg-foreground", children: primaryMetric.value })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
+        "div",
+        {
+          className: cn(
+            "relative overflow-hidden rounded-agg-lg border p-3",
+            getRoutingCardClassName(hasHighlightedRouting)
+          ),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+              "div",
+              {
+                className: cn(
+                  "pointer-events-none absolute inset-x-0 bottom-0 h-11 bg-linear-to-b from-transparent to-agg-trade-highlight-glow",
+                  hasHighlightedRouting ? "opacity-100" : "opacity-0"
+                )
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "relative flex flex-col gap-3", children: [
+              routing.rows.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "flex flex-col gap-3", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "flex min-w-0 items-center gap-2", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+                      VenueLogo,
+                      {
+                        venue: row.venue,
+                        size: "small",
+                        ariaLabel: getTradingVenueLabel(row.venue)
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("p", { className: "truncate text-agg-base leading-agg-6 text-agg-foreground", children: row.label })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("p", { className: "shrink-0 text-agg-base leading-agg-6 text-agg-foreground", children: row.priceLabel })
+                ] }),
+                index < routing.rows.length - 1 ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+                  "div",
+                  {
+                    className: cn(
+                      "h-px w-full",
+                      hasHighlightedRouting ? "bg-agg-trade-highlight-border" : "bg-agg-separator"
+                    )
+                  }
+                ) : null
+              ] }, `${row.venue}-${row.label}`)),
+              routing.highlightLabel ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("p", { className: "text-center text-agg-sm font-agg-bold leading-agg-5 uppercase text-agg-trade-highlight-accent", children: routing.highlightLabel }) : null
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("p", { className: "text-agg-sm leading-agg-5 text-agg-muted-foreground", children: routing.helperLabel })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "flex flex-col", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("p", { className: "text-agg-base font-agg-bold leading-agg-6 text-agg-foreground", children: result.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("p", { className: "text-agg-sm leading-agg-5 text-agg-muted-foreground", children: result.hint })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+        "p",
+        {
+          className: cn(
+            "text-agg-3xl font-agg-bold leading-agg-9",
+            getResultValueClassName(result.tone)
+          ),
+          children: result.value
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_jsx_runtime71.Fragment, { children: [
+      getStatusContent({
+        placement: "above-action",
+        status,
+        onStatusAction
+      }),
+      actionButton,
+      getStatusContent({
+        placement: "below-action",
+        status,
+        onStatusAction
+      })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("p", { className: "text-center text-agg-xs leading-agg-4 text-agg-muted-foreground", children: resolvedDisclaimer })
+  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Card, { className: cn(getPlaceOrderContainerClassName(), className), children: contentBody });
+};
+PlaceOrder.displayName = "PlaceOrder";
+
+// src/trading/settlement/index.tsx
+var import_react11 = require("react");
+var import_hooks22 = require("@agg-market/hooks");
+var import_jsx_runtime72 = require("react/jsx-runtime");
+var getSettlementHeaderClassName = () => {
+  return "flex items-center justify-between gap-4";
+};
+var Settlement = ({
+  sectionLabel = defaultSettlementSectionLabel,
+  question,
+  differencesTitle = defaultSettlementDifferencesTitle,
+  differences,
+  venues,
+  defaultExpandedVenue,
+  expandedVenue,
+  isLoading = false,
+  onExpandedVenueChange,
+  onShowMore,
+  className
+}) => {
+  var _a, _b;
+  const labels = (0, import_hooks22.useLabels)();
+  const { enableAnimations } = (0, import_hooks22.useSdkUiConfig)();
+  const resolvedSectionLabel = sectionLabel === defaultSettlementSectionLabel ? labels.trading.settlementSection : sectionLabel;
+  const resolvedDifferencesTitle = differencesTitle === defaultSettlementDifferencesTitle ? labels.trading.settlementDifferencesTitle : differencesTitle;
+  const [internalExpandedVenue, setInternalExpandedVenue] = (0, import_react11.useState)(
+    (_b = defaultExpandedVenue != null ? defaultExpandedVenue : (_a = venues[0]) == null ? void 0 : _a.venue) != null ? _b : null
+  );
+  const [expandedDescriptionByVenue, setExpandedDescriptionByVenue] = (0, import_react11.useState)({});
+  const [overflowingDescriptionByVenue, setOverflowingDescriptionByVenue] = (0, import_react11.useState)({});
+  const [collapsedDescriptionByVenue, setCollapsedDescriptionByVenue] = (0, import_react11.useState)({});
+  const descriptionWrapperRefs = (0, import_react11.useRef)(/* @__PURE__ */ new Map());
+  const descriptionMeasureRefs = (0, import_react11.useRef)(/* @__PURE__ */ new Map());
+  (0, import_react11.useEffect)(() => {
+    if (expandedVenue === void 0)
+      return;
+    setInternalExpandedVenue(expandedVenue);
+  }, [expandedVenue]);
+  const resolvedExpandedVenue = expandedVenue === void 0 ? internalExpandedVenue : expandedVenue;
+  const handleVenueClick = (venue) => {
+    const nextVenue = resolvedExpandedVenue === venue ? null : venue;
+    if (expandedVenue === void 0) {
+      setInternalExpandedVenue(nextVenue);
+    }
+    onExpandedVenueChange == null ? void 0 : onExpandedVenueChange(nextVenue);
+  };
+  const handleDescriptionWrapperRef = (0, import_react11.useCallback)(
+    (venue, element) => {
+      if (!element) {
+        descriptionWrapperRefs.current.delete(venue);
+        return;
+      }
+      descriptionWrapperRefs.current.set(venue, element);
+    },
+    []
+  );
+  const handleDescriptionMeasureRef = (0, import_react11.useCallback)(
+    (venue, element) => {
+      if (!element) {
+        descriptionMeasureRefs.current.delete(venue);
+        return;
+      }
+      descriptionMeasureRefs.current.set(venue, element);
+    },
+    []
+  );
+  const updateDescriptionLayout = (0, import_react11.useCallback)(
+    (venue, description, showMoreLabel) => {
+      const descriptionWrapperElement = descriptionWrapperRefs.current.get(venue);
+      const descriptionMeasureElement = descriptionMeasureRefs.current.get(venue);
+      if (!descriptionWrapperElement || !descriptionMeasureElement)
+        return;
+      const wrapperWidth = descriptionWrapperElement.clientWidth;
+      if (wrapperWidth <= 0)
+        return;
+      const computedStyles = window.getComputedStyle(descriptionWrapperElement);
+      const parsedLineHeight = Number.parseFloat(computedStyles.lineHeight);
+      const lineHeight = Number.isFinite(parsedLineHeight) ? parsedLineHeight : 20;
+      const maxHeight = lineHeight * 2 + 1;
+      descriptionMeasureElement.style.width = `${wrapperWidth}px`;
+      const getHeight = (value) => {
+        descriptionMeasureElement.textContent = value;
+        return descriptionMeasureElement.scrollHeight;
+      };
+      const fullHeight = getHeight(description);
+      if (fullHeight <= maxHeight) {
+        setOverflowingDescriptionByVenue((currentState) => {
+          if (currentState[venue] === false)
+            return currentState;
+          return __spreadProps(__spreadValues({}, currentState), {
+            [venue]: false
+          });
+        });
+        setCollapsedDescriptionByVenue((currentState) => {
+          if (currentState[venue] === description)
+            return currentState;
+          return __spreadProps(__spreadValues({}, currentState), {
+            [venue]: description
+          });
+        });
+        return;
+      }
+      const suffix = `... ${showMoreLabel}`;
+      let left = 0;
+      let right = description.length;
+      let bestLength = 0;
+      while (left <= right) {
+        const middle = Math.floor((left + right) / 2);
+        const candidate = description.slice(0, middle).trimEnd();
+        const candidateHeight = getHeight(`${candidate}${suffix}`);
+        if (candidateHeight <= maxHeight) {
+          bestLength = middle;
+          left = middle + 1;
+          continue;
+        }
+        right = middle - 1;
+      }
+      const collapsedDescription = description.slice(0, bestLength).trimEnd();
+      setOverflowingDescriptionByVenue((currentState) => {
+        if (currentState[venue] === true)
+          return currentState;
+        return __spreadProps(__spreadValues({}, currentState), {
+          [venue]: true
+        });
+      });
+      setCollapsedDescriptionByVenue((currentState) => {
+        if (currentState[venue] === collapsedDescription)
+          return currentState;
+        return __spreadProps(__spreadValues({}, currentState), {
+          [venue]: collapsedDescription
+        });
+      });
+    },
+    []
+  );
+  (0, import_react11.useEffect)(() => {
+    if (typeof window === "undefined")
+      return;
+    if (!resolvedExpandedVenue)
+      return;
+    if (expandedDescriptionByVenue[resolvedExpandedVenue])
+      return;
+    const expandedVenueItem = venues.find((venueItem) => venueItem.venue === resolvedExpandedVenue);
+    if (!expandedVenueItem)
+      return;
+    const frameId = window.requestAnimationFrame(() => {
+      var _a2;
+      updateDescriptionLayout(
+        resolvedExpandedVenue,
+        expandedVenueItem.description,
+        (_a2 = expandedVenueItem.showMoreLabel) != null ? _a2 : "Show more"
+      );
+    });
+    return () => {
+      window.cancelAnimationFrame(frameId);
+    };
+  }, [expandedDescriptionByVenue, resolvedExpandedVenue, updateDescriptionLayout, venues]);
+  (0, import_react11.useEffect)(() => {
+    if (!resolvedExpandedVenue)
+      return;
+    if (expandedDescriptionByVenue[resolvedExpandedVenue])
+      return;
+    if (typeof ResizeObserver === "undefined")
+      return;
+    const expandedVenueItem = venues.find((venueItem) => venueItem.venue === resolvedExpandedVenue);
+    if (!expandedVenueItem)
+      return;
+    const descriptionWrapperElement = descriptionWrapperRefs.current.get(resolvedExpandedVenue);
+    if (!descriptionWrapperElement)
+      return;
+    const resizeObserver = new ResizeObserver(() => {
+      var _a2;
+      updateDescriptionLayout(
+        resolvedExpandedVenue,
+        expandedVenueItem.description,
+        (_a2 = expandedVenueItem.showMoreLabel) != null ? _a2 : "Show more"
+      );
+    });
+    resizeObserver.observe(descriptionWrapperElement);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [expandedDescriptionByVenue, resolvedExpandedVenue, updateDescriptionLayout, venues]);
+  const handleDescriptionShowMoreClick = (event, venue) => {
+    event == null ? void 0 : event.stopPropagation();
+    setExpandedDescriptionByVenue((currentState) => {
+      if (currentState[venue])
+        return currentState;
+      return __spreadProps(__spreadValues({}, currentState), {
+        [venue]: true
+      });
+    });
+    onShowMore == null ? void 0 : onShowMore(venue);
+  };
+  if (isLoading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+      Skeleton,
+      {
+        ariaLabel: labels.trading.settlementLoading,
+        className,
+        view: skeletonViews.settlement
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
+    Card,
+    {
+      className: cn(
+        "flex flex-col w-full gap-5 rounded-agg-xl border border-agg-separator bg-agg-secondary p-5 shadow-none hover:shadow-none",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: getSettlementHeaderClassName(), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("p", { className: "text-agg-xs font-agg-bold leading-agg-4 uppercase text-agg-muted-foreground", children: resolvedSectionLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("p", { className: "text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground", children: question })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("p", { className: "text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground", children: resolvedDifferencesTitle }),
+          /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("ul", { className: "list-disc pl-5 text-agg-sm leading-agg-5 text-agg-foreground", children: differences.map((difference) => /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("li", { children: difference }, difference)) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: "h-px w-full bg-agg-separator" }),
+        /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: "flex flex-col gap-3", children: venues.map((venue) => {
+          var _a2, _b2;
+          const venueLabel = getTradingVenueLabel(venue.venue, venue.label);
+          const isExpanded = resolvedExpandedVenue === venue.venue;
+          const isDescriptionExpanded = !!expandedDescriptionByVenue[venue.venue];
+          const isDescriptionOverflowing = !!overflowingDescriptionByVenue[venue.venue];
+          const shouldShowDescriptionCta = isExpanded && isDescriptionOverflowing && !isDescriptionExpanded;
+          const resolvedShowMoreLabel = (_a2 = venue.showMoreLabel) != null ? _a2 : "Show more";
+          return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
+              "button",
+              {
+                type: "button",
+                className: cn(
+                  "flex items-center gap-2 text-left",
+                  "cursor-pointer disabled:cursor-not-allowed hover:opacity-50",
+                  getMotionClassName(
+                    enableAnimations,
+                    "transition-[opacity,color] duration-200 ease-in-out"
+                  )
+                ),
+                "aria-expanded": isExpanded,
+                "aria-label": labels.trading.settlementDetailsAria(venueLabel),
+                onClick: () => handleVenueClick(venue.venue),
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+                    VenueLogo,
+                    {
+                      venue: venue.venue,
+                      size: "small",
+                      ariaLabel: venueLabel
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+                    "span",
+                    {
+                      className: cn(
+                        "text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground",
+                        isExpanded ? "text-agg-primary" : "text-agg-foreground"
+                      ),
+                      children: venueLabel
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+                    Icon,
+                    {
+                      name: isExpanded ? "chevron-up" : "chevron-down",
+                      size: "small",
+                      className: "text-agg-foreground",
+                      color: "currentColor"
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+              "div",
+              {
+                "aria-hidden": !isExpanded,
+                className: cn(
+                  "grid overflow-hidden",
+                  isExpanded ? "mt-2 grid-rows-[1fr] opacity-100" : "mt-0 grid-rows-[0fr] opacity-0",
+                  !isExpanded && "pointer-events-none",
+                  getMotionClassName(
+                    enableAnimations,
+                    "transition-[grid-template-rows,opacity,margin-top] duration-300 ease-in-out"
+                  )
+                ),
+                children: /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
+                  "div",
+                  {
+                    ref: (element) => handleDescriptionWrapperRef(venue.venue, element),
+                    className: "relative min-h-0",
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("p", { className: "min-h-0 text-agg-sm leading-agg-5 text-agg-foreground", children: [
+                        isDescriptionExpanded || !isDescriptionOverflowing ? venue.description : (_b2 = collapsedDescriptionByVenue[venue.venue]) != null ? _b2 : venue.description,
+                        shouldShowDescriptionCta ? /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(import_jsx_runtime72.Fragment, { children: [
+                          "... ",
+                          /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+                            "button",
+                            {
+                              type: "button",
+                              tabIndex: isExpanded ? 0 : -1,
+                              className: cn(
+                                "cursor-pointer disabled:cursor-not-allowed",
+                                "text-agg-sm leading-agg-5 text-agg-foreground underline-offset-2 hover:underline hover:font-agg-bold",
+                                getMotionClassName(
+                                  enableAnimations,
+                                  "transition-[text-decoration] duration-200 ease-in-out"
+                                )
+                              ),
+                              "aria-label": labels.trading.settlementShowMoreAria(
+                                resolvedShowMoreLabel,
+                                venueLabel
+                              ),
+                              onClick: (event) => handleDescriptionShowMoreClick(event, venue.venue),
+                              children: resolvedShowMoreLabel
+                            }
+                          )
+                        ] }) : null
+                      ] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+                        "p",
+                        {
+                          ref: (element) => handleDescriptionMeasureRef(venue.venue, element),
+                          "aria-hidden": true,
+                          className: "pointer-events-none invisible fixed top-0 left-0 -z-10 whitespace-normal text-agg-sm leading-agg-5"
+                        }
+                      )
+                    ]
+                  }
+                )
+              }
+            )
+          ] }, venue.venue);
+        }) })
+      ]
+    }
+  );
+};
+Settlement.displayName = "Settlement";
+
+// src/pages/event-market/index.tsx
+var import_jsx_runtime73 = require("react/jsx-runtime");
+var getMarketDateValue = (market, fallbackIndex) => {
+  var _a, _b, _c;
+  const candidateDate = (_c = (_b = (_a = market.endDate) != null ? _a : market.startDate) != null ? _b : market.creationDate) != null ? _c : null;
+  if (!candidateDate)
+    return Number.MAX_SAFE_INTEGER - 1 + fallbackIndex;
+  const parsedDate = (0, import_dayjs6.default)(candidateDate);
+  if (!parsedDate.isValid()) {
+    return Number.MAX_SAFE_INTEGER - 1 + fallbackIndex;
+  }
+  return parsedDate.valueOf();
+};
+var resolveHeroMarketId = (event, heroMarketId) => {
+  var _a, _b;
+  if (!((_a = event == null ? void 0 : event.markets) == null ? void 0 : _a.length))
+    return void 0;
+  if (heroMarketId) {
+    const matchingHeroMarket = event.markets.find(
+      (market) => market.id === heroMarketId
+    );
+    if (matchingHeroMarket)
+      return matchingHeroMarket.id;
+  }
+  return (_b = event.markets[0]) == null ? void 0 : _b.id;
+};
+var buildHeroEvent = (event, heroMarketId) => {
+  if (!heroMarketId)
+    return void 0;
+  const heroMarket = event.markets.find((market) => market.id === heroMarketId);
+  if (!heroMarket)
+    return void 0;
+  return __spreadProps(__spreadValues({}, event), {
+    markets: [heroMarket]
+  });
+};
+var resolveDetailedMarkets = (event, heroMarketId) => {
+  return event.markets.filter((market) => market.id !== heroMarketId).map((market, index) => ({
+    market,
+    index
+  })).sort(
+    (leftItem, rightItem) => {
+      return getMarketDateValue(leftItem.market, leftItem.index) - getMarketDateValue(rightItem.market, rightItem.index);
+    }
+  ).map((item) => item.market);
+};
+var resolveInitialExpandedMarketId = (detailedMarkets, defaultExpandedMarketId) => {
+  var _a, _b;
+  if (!detailedMarkets.length)
+    return null;
+  if (defaultExpandedMarketId) {
+    const matchingMarket = detailedMarkets.find((market) => market.id === defaultExpandedMarketId);
+    if (matchingMarket)
+      return matchingMarket.id;
+  }
+  return (_b = (_a = detailedMarkets[0]) == null ? void 0 : _a.id) != null ? _b : null;
+};
+var EventMarketPageUnavailableState = ({
+  ariaLabel
+}) => {
+  const labels = (0, import_hooks23.useLabels)();
+  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+    Card,
+    {
+      className: "rounded-agg-xl border border-agg-separator bg-agg-secondary p-6 shadow-none hover:shadow-none",
+      role: "status",
+      "aria-label": ariaLabel != null ? ariaLabel : labels.eventMarketPage.unavailableAria,
+      children: /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Typography, { variant: "body-large-strong", children: labels.eventMarketPage.unavailableTitle }),
+        /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Typography, { variant: "label", className: "text-agg-muted-foreground", children: labels.eventMarketPage.unavailableDescription })
+      ] })
+    }
+  );
+};
+var EventMarketPageNotFoundState = ({
+  ariaLabel
+}) => {
+  const labels = (0, import_hooks23.useLabels)();
+  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Card, { className: "overflow-hidden rounded-agg-xl border border-agg-separator bg-agg-secondary p-0 shadow-none hover:shadow-none", children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+    StateMessage,
+    {
+      ariaLabel: ariaLabel != null ? ariaLabel : labels.eventItemDetails.notFoundAria,
+      title: labels.eventItemDetails.notFoundTitle,
+      description: labels.eventItemDetails.notFoundDescription,
+      className: "min-h-[320px] md:min-h-[360px]"
+    }
+  ) });
+};
+var EventMarketPageLoadingState = ({
+  placeOrder,
+  settlement,
+  classNames
+}) => {
+  const labels = (0, import_hooks23.useLabels)();
+  const fallbackSettlement = settlement != null ? settlement : {
+    sectionLabel: labels.trading.settlementSection,
+    question: labels.eventMarketPage.loadingSettlementQuestion,
+    differencesTitle: labels.eventMarketPage.loadingSettlementDifferencesTitle,
+    differences: [labels.eventMarketPage.loadingSettlementPlaceholder],
+    venues: [
+      {
+        venue: "polymarket",
+        description: labels.eventMarketPage.loadingSettlementPlaceholder
+      }
+    ]
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("section", { className: cn("w-full", classNames == null ? void 0 : classNames.root), children: /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
+    "div",
+    {
+      className: cn(
+        "mx-auto flex w-full max-w-[1200px] flex-col gap-6 px-3 py-3 md:px-6 md:py-6 lg:flex-row lg:items-start lg:gap-8",
+        classNames == null ? void 0 : classNames.content
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: cn("flex min-w-0 flex-1 flex-col gap-6", classNames == null ? void 0 : classNames.main), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+            EventListItemDetails,
+            {
+              isLoading: true,
+              classNames: {
+                root: classNames == null ? void 0 : classNames.hero
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: cn("flex flex-col gap-3", classNames == null ? void 0 : classNames.markets), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(MarketDetails, { isLoading: true, isOpened: true, classNames: { root: "w-full" } }),
+            /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(MarketDetails, { isLoading: true, isOpened: false, classNames: { root: "w-full" } }),
+            /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(MarketDetails, { isLoading: true, isOpened: false, classNames: { root: "w-full" } })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "md:hidden", children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Settlement, __spreadProps(__spreadValues({}, fallbackSettlement), { isLoading: true, className: classNames == null ? void 0 : classNames.settlement })) }),
+          /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "hidden md:block", children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Settlement, __spreadProps(__spreadValues({}, fallbackSettlement), { isLoading: true, className: classNames == null ? void 0 : classNames.settlement })) }),
+          placeOrder ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "md:hidden", children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(PlaceOrder, __spreadProps(__spreadValues({}, placeOrder), { isLoading: true, className: classNames == null ? void 0 : classNames.mobileTrade })) }) : null
+        ] }),
+        placeOrder ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+          "aside",
+          {
+            className: cn(
+              "hidden w-full shrink-0 lg:sticky lg:top-6 lg:block lg:w-[343px]",
+              classNames == null ? void 0 : classNames.sidebar
+            ),
+            children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(PlaceOrder, __spreadProps(__spreadValues({}, placeOrder), { isLoading: true, className: classNames == null ? void 0 : classNames.trade }))
+          }
+        ) : null
+      ]
+    }
+  ) });
+};
+var EventMarketPageContent = ({
+  event,
+  heroMarketId,
+  defaultExpandedMarketId,
+  expandedMarketId,
+  onExpandedMarketChange,
+  heroDefaultTimeRange,
+  placeOrder,
+  settlement,
+  classNames,
+  ariaLabel
+}) => {
+  const labels = (0, import_hooks23.useLabels)();
+  const resolvedHeroMarketId = (0, import_react12.useMemo)(() => {
+    return resolveHeroMarketId(event, heroMarketId);
+  }, [event, heroMarketId]);
+  const heroEvent = (0, import_react12.useMemo)(() => {
+    return buildHeroEvent(event, resolvedHeroMarketId);
+  }, [event, resolvedHeroMarketId]);
+  const detailedMarkets = (0, import_react12.useMemo)(() => {
+    return resolveDetailedMarkets(event, resolvedHeroMarketId);
+  }, [event, resolvedHeroMarketId]);
+  const [internalExpandedMarketId, setInternalExpandedMarketId] = (0, import_react12.useState)(() => {
+    return resolveInitialExpandedMarketId(detailedMarkets, defaultExpandedMarketId);
+  });
+  (0, import_react12.useEffect)(() => {
+    if (typeof expandedMarketId === "undefined")
+      return;
+    setInternalExpandedMarketId(expandedMarketId);
+  }, [expandedMarketId]);
+  (0, import_react12.useEffect)(() => {
+    if (typeof expandedMarketId !== "undefined")
+      return;
+    setInternalExpandedMarketId((currentExpandedMarketId) => {
+      if (currentExpandedMarketId && detailedMarkets.some((market) => market.id === currentExpandedMarketId)) {
+        return currentExpandedMarketId;
+      }
+      return resolveInitialExpandedMarketId(detailedMarkets, defaultExpandedMarketId);
+    });
+  }, [defaultExpandedMarketId, detailedMarkets, expandedMarketId]);
+  const resolvedExpandedMarketId = typeof expandedMarketId === "undefined" ? internalExpandedMarketId : expandedMarketId;
+  const handleExpandedMarketChange = (marketId, isOpened) => {
+    const nextExpandedMarketId = isOpened ? marketId : null;
+    if (typeof expandedMarketId === "undefined") {
+      setInternalExpandedMarketId(nextExpandedMarketId);
+    }
+    onExpandedMarketChange == null ? void 0 : onExpandedMarketChange(nextExpandedMarketId);
+  };
+  if (!heroEvent || !event.markets.length) {
+    return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(EventMarketPageUnavailableState, { ariaLabel });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("section", { className: cn("w-full", classNames == null ? void 0 : classNames.root), "aria-label": ariaLabel != null ? ariaLabel : event.title, children: /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
+    "div",
+    {
+      className: cn(
+        "mx-auto flex w-full max-w-[1200px] flex-row gap-6 px-3 py-3 md:px-6 md:py-6 lg:flex-row lg:items-start lg:gap-8",
+        classNames == null ? void 0 : classNames.content
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: cn("flex min-w-0 flex-1 flex-col gap-6", classNames == null ? void 0 : classNames.main), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+            EventListItemDetails,
+            {
+              event: heroEvent,
+              defaultTimeRange: heroDefaultTimeRange,
+              classNames: {
+                root: classNames == null ? void 0 : classNames.hero
+              }
+            }
+          ),
+          detailedMarkets.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: cn("flex flex-col gap-3", classNames == null ? void 0 : classNames.markets), children: detailedMarkets.map((market) => {
+            const isOpened = resolvedExpandedMarketId === market.id;
+            return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+              MarketDetails,
+              {
+                event,
+                marketId: market.id,
+                isOpened,
+                defaultTab: "order-book",
+                ariaLabel: market.endDate && (0, import_dayjs6.default)(market.endDate).isValid() ? labels.eventMarketPage.marketDetailsAriaByDate(
+                  (0, import_dayjs6.default)(market.endDate).format("MMM D, YYYY")
+                ) : labels.eventMarketPage.marketDetailsAriaByQuestion(market.question),
+                onOpenChange: (nextIsOpened) => handleExpandedMarketChange(market.id, nextIsOpened)
+              },
+              market.id
+            );
+          }) }) : null,
+          settlement ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "md:hidden", children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Settlement, __spreadProps(__spreadValues({}, settlement), { className: classNames == null ? void 0 : classNames.settlement })) }) : null,
+          settlement ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "hidden md:block", children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Settlement, __spreadProps(__spreadValues({}, settlement), { className: classNames == null ? void 0 : classNames.settlement })) }) : null
+        ] }),
+        placeOrder ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("aside", { className: cn("w-full lg:block lg:max-w-[360px]", classNames == null ? void 0 : classNames.sidebar), children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(PlaceOrder, __spreadProps(__spreadValues({}, placeOrder), { className: classNames == null ? void 0 : classNames.trade })) }) : null
+      ]
+    }
+  ) });
+};
+var EventMarketPage = (props) => {
+  const hasEventProp = "event" in props && !!props.event;
+  const {
+    event: fetchedEvent,
+    error: eventError,
+    isLoading: isFetchingEvent
+  } = (0, import_hooks23.useEvent)(hasEventProp ? void 0 : props.eventId, {
+    enabled: !props.isLoading && !hasEventProp && !!props.eventId
+  });
+  if (props.isLoading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(EventMarketPageLoadingState, { placeOrder: props.placeOrder, settlement: props.settlement });
+  }
+  if ("event" in props && props.event) {
+    return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(EventMarketPageContent, __spreadProps(__spreadValues({}, props), { event: props.event }));
+  }
+  if (isFetchingEvent) {
+    return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+      EventMarketPageLoadingState,
+      {
+        placeOrder: props.placeOrder,
+        settlement: props.settlement,
+        classNames: props.classNames
+      }
+    );
+  }
+  if (!fetchedEvent) {
+    if (isErrorWithStatus(eventError, 404)) {
+      return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(EventMarketPageNotFoundState, { ariaLabel: props.ariaLabel });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(EventMarketPageUnavailableState, { ariaLabel: props.ariaLabel });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(EventMarketPageContent, __spreadProps(__spreadValues({}, props), { event: fetchedEvent }));
+};
+EventMarketPage.displayName = "EventMarketPage";
+
+// src/pages/user-profile/components/balance-display.tsx
+var import_react13 = require("react");
+
+// src/pages/user-profile/user-profile.constants.ts
+var USER_PROFILE_TAB_POSITIONS = "positions";
+var USER_PROFILE_TAB_ACTIVITY = "activity";
+var USER_PROFILE_TIME_RANGES = ["1D", "1W", "1M", "All"];
+var USER_PROFILE_POSITION_FILTERS = [
+  { value: "active", label: "Active" },
+  { value: "closed", label: "Closed" }
+];
+
+// src/pages/user-profile/components/balance-display.tsx
+var import_jsx_runtime74 = require("react/jsx-runtime");
+var BalanceDisplay = ({
+  balance,
+  defaultTimeRange = "All",
+  onTimeRangeChange,
+  className
+}) => {
+  var _a, _b;
+  const [activeRange, setActiveRange] = (0, import_react13.useState)(defaultTimeRange);
+  const currentBalance = balance == null ? void 0 : balance[activeRange];
+  const handleRangeChange = (range) => {
+    setActiveRange(range);
+    onTimeRangeChange == null ? void 0 : onTimeRangeChange(range);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
+    "div",
+    {
+      className: cn(
+        "flex items-end justify-between overflow-clip rounded-agg-md border border-agg-separator bg-agg-secondary p-5",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "flex items-end gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: "agg-type-display text-agg-foreground", children: (_a = currentBalance == null ? void 0 : currentBalance.totalLabel) != null ? _a : "$0.00" }),
+          /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: "font-agg-sans text-agg-base leading-6 font-agg-normal text-agg-muted-foreground", children: "Profit/Loss" }),
+          /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+              "span",
+              {
+                className: cn(
+                  "font-agg-sans text-agg-base leading-6 font-agg-bold",
+                  (currentBalance == null ? void 0 : currentBalance.isPositive) ? "text-agg-success" : "text-agg-error"
+                ),
+                children: (_b = currentBalance == null ? void 0 : currentBalance.changePercentLabel) != null ? _b : "0%"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+              Icon,
+              {
+                name: "triangle-up-filled",
+                size: "small",
+                className: cn(
+                  (currentBalance == null ? void 0 : currentBalance.isPositive) ? "text-agg-success" : "rotate-180 text-agg-error"
+                )
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "flex w-[100px] items-center justify-between", children: USER_PROFILE_TIME_RANGES.map((range) => {
+          const isActive = range === activeRange;
+          return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: () => handleRangeChange(range),
+              className: cn(
+                "cursor-pointer bg-transparent font-agg-sans text-agg-sm leading-agg-5",
+                isActive ? "font-agg-bold text-agg-foreground" : "font-agg-normal text-agg-muted-foreground hover:text-agg-foreground"
+              ),
+              children: range
+            },
+            range
+          );
+        }) })
+      ]
+    }
+  );
+};
+BalanceDisplay.displayName = "BalanceDisplay";
+
+// src/pages/user-profile/components/balances-card.tsx
+var import_jsx_runtime75 = require("react/jsx-runtime");
+var BalancesCard = ({
+  venueBalances = [],
+  onDeposit,
+  onWithdraw,
+  className
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
+    "div",
+    {
+      className: cn(
+        "flex flex-col gap-4 rounded-agg-md border border-agg-separator bg-agg-secondary p-5",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("h3", { className: "agg-type-body-large-strong text-agg-foreground", children: "Balances" }),
+        /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: "relative min-h-0 flex-1 overflow-clip", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: "flex max-h-full flex-col gap-3 overflow-y-auto pr-1", children: venueBalances.map((balance, idx) => /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(VenueLogo, { venue: balance.venue, size: "small" }),
+              /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: "font-agg-sans text-agg-base leading-6 font-agg-normal text-agg-foreground capitalize", children: balance.venue })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: "font-agg-sans text-agg-base leading-6 font-agg-bold text-agg-foreground", children: balance.balanceLabel })
+          ] }, `${balance.venue}-${idx}`)) }),
+          /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+            "div",
+            {
+              "aria-hidden": true,
+              className: "pointer-events-none absolute bottom-0 left-0 h-10 w-full bg-gradient-to-b from-transparent to-white"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: "flex items-center gap-3", children: [
+          onDeposit ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(Button, { variant: "primary", size: "small", onClick: onDeposit, className: "flex-1", children: "Deposit" }) : null,
+          onWithdraw ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(Button, { variant: "secondary", size: "small", onClick: onWithdraw, className: "flex-1", children: "Withdraw" }) : null
+        ] })
+      ]
+    }
+  );
+};
+BalancesCard.displayName = "BalancesCard";
+
+// src/pages/user-profile/components/positions-activity.tsx
+var import_react14 = require("react");
+
+// src/pages/user-profile/components/activity-row.tsx
+var import_jsx_runtime76 = require("react/jsx-runtime");
+var ActivityRow = ({ activity, onClick }) => {
+  const handleClick = () => {
+    onClick == null ? void 0 : onClick(activity);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
+    "button",
+    {
+      type: "button",
+      className: cn(
+        "flex w-full items-center gap-6 rounded-agg-sm p-0 text-left",
+        "hover:bg-agg-secondary-hover focus-visible:outline-none focus-visible:bg-agg-secondary-hover",
+        "cursor-pointer"
+      ),
+      onClick: handleClick,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("p", { className: "w-[60px] shrink-0 font-agg-sans text-agg-base leading-agg-6 font-agg-normal text-agg-foreground", children: activity.type }),
+        /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(VenueLogo, { venue: activity.venue, size: "small", className: "shrink-0" }),
+          /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+              "img",
+              {
+                src: activity.thumbnailSrc,
+                alt: "",
+                className: "h-[60px] w-[60px] shrink-0 rounded-agg-sm object-cover"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-2 justify-center", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("p", { className: "min-w-full overflow-hidden text-ellipsis whitespace-nowrap font-agg-sans text-agg-base leading-agg-6 font-agg-bold text-agg-foreground", children: activity.title }),
+              /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "flex items-center gap-3", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: "inline-flex items-center justify-center gap-1.5 rounded-full bg-agg-secondary-hover px-4 py-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: "font-agg-sans text-agg-sm leading-agg-5 font-agg-normal text-agg-foreground whitespace-nowrap", children: activity.outcomeLabel }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: "font-agg-sans text-agg-sm leading-agg-5 font-agg-normal text-black whitespace-nowrap", children: activity.sharesLabel })
+              ] })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "flex w-[120px] shrink-0 flex-col items-end justify-center gap-1 text-agg-base leading-agg-6 whitespace-nowrap", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("p", { className: "font-agg-sans font-agg-bold text-black", children: activity.amountLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("p", { className: "font-agg-sans font-agg-normal text-agg-muted-foreground", children: activity.timeLabel })
+        ] })
+      ]
+    }
+  );
+};
+ActivityRow.displayName = "ActivityRow";
+
+// src/pages/user-profile/components/empty-state.tsx
+var import_jsx_runtime77 = require("react/jsx-runtime");
+var EmptyIcon = () => /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(
+  "svg",
+  {
+    width: "40",
+    height: "40",
+    viewBox: "0 0 40 40",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "text-agg-muted-foreground",
+    "aria-hidden": true,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+        "path",
+        {
+          d: "M33.3333 5H6.66667C5.74619 5 5 5.74619 5 6.66667V33.3333C5 34.2538 5.74619 35 6.66667 35H33.3333C34.2538 35 35 34.2538 35 33.3333V6.66667C35 5.74619 34.2538 5 33.3333 5Z",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+        "path",
+        {
+          d: "M14.1667 16.6667C15.5474 16.6667 16.6667 15.5474 16.6667 14.1667C16.6667 12.786 15.5474 11.6667 14.1667 11.6667C12.786 11.6667 11.6667 12.786 11.6667 14.1667C11.6667 15.5474 12.786 16.6667 14.1667 16.6667Z",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+        "path",
+        {
+          d: "M35 25L26.6667 16.6667L6.66667 36.6667",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    ]
+  }
+);
+var EmptyState = ({ title, description, className }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+    "div",
+    {
+      className: cn("flex flex-col items-center justify-center gap-8 p-10", className),
+      role: "status",
+      "aria-live": "polite",
+      children: /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: "flex flex-col items-center gap-5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(EmptyIcon, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: "flex flex-col items-center gap-1 text-center text-agg-foreground", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("p", { className: "font-agg-sans text-agg-base leading-agg-6 font-agg-bold", children: title }),
+          description ? /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("p", { className: "font-agg-sans text-agg-sm leading-agg-5 font-agg-normal", children: description }) : null
+        ] })
+      ] })
+    }
+  );
+};
+EmptyState.displayName = "EmptyState";
+
+// src/pages/user-profile/components/position-row.tsx
+var import_jsx_runtime78 = require("react/jsx-runtime");
+var PositionRow = ({ position, onClick }) => {
+  const handleClick = () => {
+    onClick == null ? void 0 : onClick(position);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
+    "button",
+    {
+      type: "button",
+      className: cn(
+        "flex w-full items-center gap-6 rounded-agg-sm p-0 text-left",
+        "hover:bg-agg-secondary-hover focus-visible:outline-none focus-visible:bg-agg-secondary-hover",
+        "cursor-pointer"
+      ),
+      onClick: handleClick,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(VenueLogo, { venue: position.venue, size: "small", className: "shrink-0" }),
+          /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+              "img",
+              {
+                src: position.thumbnailSrc,
+                alt: "",
+                className: "h-[60px] w-[60px] shrink-0 rounded-agg-sm object-cover"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-2 justify-center", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("p", { className: "min-w-full overflow-hidden text-ellipsis whitespace-nowrap font-agg-sans text-agg-base leading-agg-6 font-agg-bold text-agg-foreground", children: position.title }),
+              /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "flex items-center gap-3", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "inline-flex items-center justify-center gap-1.5 rounded-full bg-agg-secondary-hover px-4 py-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "font-agg-sans text-agg-sm leading-agg-5 font-agg-normal text-agg-foreground whitespace-nowrap", children: position.outcomeLabel }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "font-agg-sans text-agg-sm leading-agg-5 font-agg-normal text-black whitespace-nowrap", children: position.sharesLabel })
+              ] })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("p", { className: "w-[120px] shrink-0 agg-type-title text-agg-foreground", children: position.averageLabel }),
+        /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("p", { className: "w-[120px] shrink-0 agg-type-title text-agg-foreground", children: position.currentLabel }),
+        /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "flex items-center gap-6 shrink-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "flex w-[140px] flex-col items-end justify-center gap-1 text-agg-base leading-agg-6 whitespace-nowrap", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("p", { className: "font-agg-sans font-agg-bold text-black", children: position.valueLabel }),
+            /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+              "p",
+              {
+                className: cn(
+                  "font-agg-sans font-agg-normal",
+                  position.isPnlPositive ? "text-[#00c853]" : "text-[#e5455f]"
+                ),
+                children: position.pnlLabel
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Icon, { name: "chevron-right", size: "small", className: "shrink-0 text-agg-muted-foreground" })
+        ] })
+      ]
+    }
+  );
+};
+PositionRow.displayName = "PositionRow";
+
+// src/pages/user-profile/components/positions-activity.tsx
+var import_jsx_runtime79 = require("react/jsx-runtime");
+var tabItems = [
+  { value: USER_PROFILE_TAB_POSITIONS, label: "Positions" },
+  { value: USER_PROFILE_TAB_ACTIVITY, label: "Activity" }
+];
+var PositionsActivity = ({
+  activePositions = [],
+  closedPositions = [],
+  activities = [],
+  onPositionClick,
+  onActivityClick,
+  className
+}) => {
+  const [activeTab, setActiveTab] = (0, import_react14.useState)(USER_PROFILE_TAB_POSITIONS);
+  const [positionFilter, setPositionFilter] = (0, import_react14.useState)("active");
+  const [searchValue, setSearchValue] = (0, import_react14.useState)("");
+  const isPositionsTab = activeTab === USER_PROFILE_TAB_POSITIONS;
+  const filteredPositions = (0, import_react14.useMemo)(() => {
+    const positions = positionFilter === "active" ? activePositions : closedPositions;
+    if (!searchValue.trim())
+      return positions;
+    const query = searchValue.toLowerCase();
+    return positions.filter((p) => p.title.toLowerCase().includes(query));
+  }, [activePositions, closedPositions, positionFilter, searchValue]);
+  const filteredActivities = (0, import_react14.useMemo)(() => {
+    if (!searchValue.trim())
+      return activities;
+    const query = searchValue.toLowerCase();
+    return activities.filter((a) => a.title.toLowerCase().includes(query));
+  }, [activities, searchValue]);
+  const handleSearchChange = (event) => {
+    setSearchValue(event.target.value);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(
+    "div",
+    {
+      className: cn(
+        "flex flex-col items-start overflow-clip rounded-agg-md border border-agg-separator bg-agg-secondary",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+          Tabs,
+          {
+            items: tabItems,
+            value: activeTab,
+            onChange: setActiveTab,
+            variant: "underline",
+            className: "w-full [&>div]:w-full"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "flex w-full flex-col gap-6 p-6", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "flex items-start gap-5", children: [
+            isPositionsTab ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "flex h-10 w-[270px] shrink-0 items-stretch overflow-clip rounded-agg-sm border border-agg-separator", children: USER_PROFILE_POSITION_FILTERS.map((filter, idx) => {
+              const isActive = filter.value === positionFilter;
+              return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "flex flex-1 items-stretch", children: [
+                idx > 0 ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "w-px bg-agg-separator", "aria-hidden": true }) : null,
+                /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setPositionFilter(filter.value),
+                    className: cn(
+                      "flex flex-1 items-center justify-center px-4 py-3 font-agg-sans text-agg-base leading-agg-6 cursor-pointer",
+                      isActive ? "bg-agg-secondary-hover font-agg-bold text-agg-primary" : "bg-agg-secondary font-agg-normal text-agg-foreground hover:bg-agg-secondary-hover"
+                    ),
+                    children: filter.label
+                  }
+                )
+              ] }, filter.value);
+            }) }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("label", { className: "flex min-w-0 flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "flex h-10 w-full items-center gap-3 rounded-agg-sm border border-agg-separator bg-agg-secondary px-3 py-2.5 focus-within:border-2 focus-within:border-agg-primary", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Icon, { name: "search", size: "small", className: "shrink-0 text-agg-muted-foreground" }),
+              /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+                "input",
+                {
+                  value: searchValue,
+                  onChange: handleSearchChange,
+                  placeholder: "Search...",
+                  className: cn(
+                    "h-6 w-full min-w-0 border-0 bg-transparent p-0",
+                    "font-agg-sans text-agg-base leading-agg-6 font-agg-normal text-agg-foreground",
+                    "placeholder:text-agg-muted-foreground",
+                    "outline-none focus:outline-none"
+                  )
+                }
+              )
+            ] }) })
+          ] }),
+          isPositionsTab && filteredPositions.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "flex items-center gap-6 px-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("p", { className: "min-w-0 flex-1 font-agg-sans text-agg-sm leading-agg-5 font-agg-normal text-agg-muted-foreground", children: "Market" }),
+            /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("p", { className: "w-[120px] shrink-0 font-agg-sans text-agg-sm leading-agg-5 font-agg-normal text-agg-muted-foreground", children: "Average" }),
+            /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("p", { className: "w-[120px] shrink-0 font-agg-sans text-agg-sm leading-agg-5 font-agg-normal text-agg-muted-foreground", children: "Current" }),
+            /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("p", { className: "w-[184px] shrink-0 font-agg-sans text-agg-sm leading-agg-5 font-agg-normal text-agg-muted-foreground text-right", children: "Value" })
+          ] }) : null,
+          !isPositionsTab && filteredActivities.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "flex items-center gap-6 px-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("p", { className: "w-[60px] shrink-0 font-agg-sans text-agg-sm leading-agg-5 font-agg-normal text-agg-muted-foreground", children: "Type" }),
+            /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("p", { className: "min-w-0 flex-1 font-agg-sans text-agg-sm leading-agg-5 font-agg-normal text-agg-muted-foreground", children: "Market" }),
+            /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("p", { className: "w-[120px] shrink-0 font-agg-sans text-agg-sm leading-agg-5 font-agg-normal text-agg-muted-foreground text-right", children: "Amount" })
+          ] }) : null,
+          isPositionsTab ? filteredPositions.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "flex flex-col gap-4", children: filteredPositions.map((position) => /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(PositionRow, { position, onClick: onPositionClick }, position.id)) }) : /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+            EmptyState,
+            {
+              title: "No positions yet",
+              description: "Your open trades will appear here once you place an order."
+            }
+          ) : filteredActivities.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "flex flex-col gap-4", children: filteredActivities.map((activity) => /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(ActivityRow, { activity, onClick: onActivityClick }, activity.id)) }) : /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+            EmptyState,
+            {
+              title: "No activity yet",
+              description: "Your trading activity will appear here."
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+PositionsActivity.displayName = "PositionsActivity";
+
+// src/pages/user-profile/components/default-avatar.tsx
+var import_jsx_runtime80 = require("react/jsx-runtime");
+var DefaultAvatar = ({ className }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "120",
+      height: "120",
+      viewBox: "0 0 120 120",
+      fill: "none",
+      className: cn("shrink-0", className),
+      "aria-hidden": true,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("g", { clipPath: "url(#clip0_default_avatar)", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+            "path",
+            {
+              d: "M60 120C93.1371 120 120 93.1371 120 60C120 26.8629 93.1371 0 60 0C26.8629 0 0 26.8629 0 60C0 93.1371 26.8629 120 60 120Z",
+              fill: "white"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+            "path",
+            {
+              d: "M60 120C93.1371 120 120 93.1371 120 60C120 26.8629 93.1371 0 60 0C26.8629 0 0 26.8629 0 60C0 93.1371 26.8629 120 60 120Z",
+              fill: "black",
+              fillOpacity: "0.1"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+            "path",
+            {
+              d: "M73.7338 64.1259C80.4187 59.6756 84.8276 52.0804 84.8276 43.4487C84.8276 29.7376 73.7111 18.6211 60 18.6211C46.2890 18.6211 35.1724 29.7376 35.1724 43.4487C35.1724 52.0804 39.5814 59.6756 46.2662 64.1259C46.2662 64.1259 46.2683 64.1280 46.2704 64.1280C46.2683 64.1280 46.2683 64.1259 46.2683 64.1259C30.2669 68.9487 17.8076 81.9356 13.7959 98.2742L13.7980 98.2763C14.4518 99.0645 15.1304 99.8342 15.8235 100.589C15.9911 100.774 16.1669 100.949 16.3387 101.129C16.8724 101.696 17.4124 102.255 17.9669 102.801C18.1966 103.027 18.4304 103.244 18.6642 103.465C19.1773 103.954 19.6966 104.436 20.2262 104.905C20.4890 105.137 20.7559 105.367 21.0207 105.594C21.5400 106.039 22.0656 106.476 22.6014 106.902C22.8828 107.127 23.1662 107.349 23.4497 107.570C23.9918 107.988 24.5421 108.394 25.0987 108.791C25.3862 108.996 25.6697 109.205 25.9614 109.405C26.5490 109.811 27.1469 110.200 27.7490 110.585C28.0200 110.756 28.2849 110.934 28.5580 111.104C29.2531 111.532 29.9607 111.942 30.6745 112.343C30.8628 112.449 31.0469 112.562 31.2373 112.666C32.1600 113.171 33.0973 113.655 34.0490 114.112C34.0718 114.122 34.0966 114.133 34.1193 114.143C35.0276 114.578 35.9504 114.989 36.8835 115.378C37.1731 115.500 37.4690 115.608 37.7607 115.724C38.4352 115.993 39.1097 116.258 39.7966 116.502C40.1607 116.632 40.5290 116.750 40.8952 116.874C41.5200 117.085 42.1490 117.290 42.7821 117.478C43.1835 117.598 43.5869 117.710 43.9924 117.822C44.6049 117.991 45.2214 118.153 45.8442 118.304C46.2642 118.405 46.6862 118.502 47.1104 118.596C47.7331 118.732 48.3580 118.856 48.9869 118.972C49.4131 119.051 49.8373 119.131 50.2676 119.200C50.9173 119.305 51.5711 119.394 52.2269 119.479C52.6407 119.533 53.0524 119.593 53.4683 119.636C54.1924 119.715 54.9228 119.771 55.6531 119.822C56.0069 119.847 56.3566 119.885 56.7104 119.903C57.8007 119.965 58.8952 120 60 120C61.1049 120 62.1993 119.965 63.2897 119.907C63.6435 119.889 63.9952 119.851 64.3469 119.827C65.0793 119.775 65.8097 119.719 66.5318 119.640C66.9476 119.595 67.3593 119.537 67.7731 119.483C68.4290 119.398 69.0828 119.309 69.7324 119.204C70.1607 119.134 70.5869 119.055 71.0131 118.976C71.6421 118.860 72.2690 118.736 72.8897 118.600C73.3138 118.507 73.7359 118.409 74.1559 118.308C74.7766 118.157 75.3931 117.996 76.0076 117.826C76.4111 117.714 76.8166 117.602 77.2180 117.482C77.8531 117.292 78.4800 117.087 79.1049 116.878C79.4711 116.754 79.8414 116.636 80.2035 116.506C80.8883 116.260 81.5649 115.997 82.2393 115.728C82.5311 115.612 82.8269 115.502 83.1166 115.382C84.0456 114.994 84.9642 114.586 85.8683 114.151C85.8952 114.139 85.9242 114.127 85.9511 114.114C86.9028 113.657 87.8400 113.173 88.7628 112.668C88.9531 112.565 89.1373 112.451 89.3256 112.345C90.0393 111.944 90.7469 111.534 91.4421 111.106C91.7152 110.938 91.9821 110.760 92.2511 110.587C92.8531 110.202 93.4511 109.811 94.0387 109.407C94.3283 109.207 94.6138 109.000 94.9014 108.793C95.4580 108.394 96.0083 107.988 96.5504 107.572C96.8359 107.353 97.1173 107.129 97.3987 106.904C97.9324 106.478 98.4600 106.041 98.9793 105.596C99.2462 105.369 99.5131 105.139 99.7738 104.907C100.303 104.438 100.823 103.956 101.336 103.467C101.568 103.246 101.803 103.027 102.033 102.803C102.588 102.257 103.130 101.698 103.661 101.131C103.831 100.949 104.007 100.774 104.177 100.591C104.870 99.8363 105.548 99.0666 106.202 98.2783L106.204 98.2763C102.195 81.9356 89.7352 68.9487 73.7338 64.1259Z",
+              fill: "black",
+              fillOpacity: "0.1"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("clipPath", { id: "clip0_default_avatar", children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("rect", { width: "120", height: "120", fill: "white" }) }) })
+      ]
+    }
+  );
+};
+DefaultAvatar.displayName = "DefaultAvatar";
+
+// src/pages/user-profile/components/user-info-card.tsx
+var import_jsx_runtime81 = require("react/jsx-runtime");
+var UserInfoCard = ({
+  user,
+  onEditProfile,
+  className
+}) => {
+  var _a, _b, _c;
+  const evmExchanges = ((_a = user.connectedExchanges) != null ? _a : []).filter((ex) => ex.venue !== "kalshi");
+  const totalExchangeCount = (_c = (_b = user.connectedExchanges) == null ? void 0 : _b.length) != null ? _c : 0;
+  const hasEvmExchanges = evmExchanges.length > 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+    "div",
+    {
+      className: cn(
+        "flex flex-col items-start rounded-agg-md border border-agg-separator bg-agg-secondary p-5",
+        className
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "flex w-full items-start gap-5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "shrink-0", children: user.avatarUrl ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+          "img",
+          {
+            src: user.avatarUrl,
+            alt: user.username,
+            className: "h-[120px] w-[120px] rounded-full object-cover"
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(DefaultAvatar, { className: "h-[120px] w-[120px]" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("h2", { className: "agg-type-heading text-agg-foreground", children: user.username }),
+              user.socialLinks && user.socialLinks.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "flex items-center gap-2", children: user.socialLinks.map((social) => {
+                const iconName = social.platform === "twitter" ? "twitter" : social.platform === "discord" ? "discord" : "telegram";
+                return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+                  "span",
+                  {
+                    className: "flex size-8 shrink-0 items-center justify-center rounded-full border border-agg-separator bg-agg-secondary",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Icon, { name: iconName, size: "small", className: "text-agg-foreground" })
+                  },
+                  social.platform
+                );
+              }) }) : null
+            ] }),
+            onEditProfile ? /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
+              "button",
+              {
+                type: "button",
+                onClick: onEditProfile,
+                className: "flex shrink-0 cursor-pointer items-center gap-1.5 bg-transparent text-agg-primary hover:opacity-80",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Icon, { name: "pencil", size: "small", className: "text-agg-primary" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { className: "text-agg-base font-agg-bold leading-6", children: "Edit" })
+                ]
+              }
+            ) : null
+          ] }),
+          totalExchangeCount > 0 || user.socialHandle ? /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "flex flex-col gap-3", children: [
+            hasEvmExchanges ? /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "flex items-center gap-3", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "flex items-center", children: evmExchanges.map((exchange, idx) => /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+                "div",
+                {
+                  className: cn(
+                    "relative flex h-5 w-5 shrink-0 items-center justify-center overflow-hidden rounded-[4px]",
+                    idx > 0 && "-ml-2"
+                  ),
+                  style: { zIndex: evmExchanges.length - idx },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(VenueLogo, { venue: exchange.venue, size: "small", className: "h-5 w-5" })
+                },
+                `${exchange.venue}-${idx}`
+              )) }),
+              user.displayAddress ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { className: "text-agg-base font-agg-normal leading-6 text-agg-foreground", children: user.displayAddress }) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "flex items-center gap-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("span", { className: "text-agg-sm font-agg-normal leading-5 text-agg-muted-foreground", children: [
+                  totalExchangeCount,
+                  " exchange",
+                  totalExchangeCount !== 1 ? "s" : ""
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Icon, { name: "info", size: "small", className: "text-agg-muted-foreground" })
+              ] })
+            ] }) : null,
+            user.socialHandle ? /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "flex items-center gap-3", children: [
+              user.socialHandleVenue ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "flex h-5 w-5 shrink-0 items-center justify-center overflow-hidden rounded-[4px]", children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(VenueLogo, { venue: user.socialHandleVenue, size: "small", className: "h-5 w-5" }) }) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { className: "text-agg-base font-agg-normal leading-6 text-agg-foreground", children: user.socialHandle })
+            ] }) : null
+          ] }) : null
+        ] })
+      ] })
+    }
+  );
+};
+UserInfoCard.displayName = "UserInfoCard";
+
+// src/pages/user-profile/index.tsx
+var import_jsx_runtime82 = require("react/jsx-runtime");
+var UserProfilePage = ({
+  user,
+  venueBalances,
+  balance,
+  defaultTimeRange,
+  onTimeRangeChange,
+  activePositions,
+  closedPositions,
+  activities,
+  onEditProfile,
+  onDeposit,
+  onWithdraw,
+  onPositionClick,
+  onActivityClick,
+  classNames
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "box-border w-full overflow-x-hidden p-10", children: /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(
+    "section",
+    {
+      className: cn(
+        "flex w-full flex-col gap-10 rounded-agg-xl border border-agg-separator bg-agg-secondary p-10 overflow-clip",
+        classNames == null ? void 0 : classNames.root
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: cn("flex items-stretch gap-6", classNames == null ? void 0 : classNames.topRow), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: cn("flex min-w-0 flex-1 flex-col gap-6", classNames == null ? void 0 : classNames.leftColumn), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+              UserInfoCard,
+              {
+                user,
+                onEditProfile,
+                className: classNames == null ? void 0 : classNames.userInfoCard
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+              BalanceDisplay,
+              {
+                balance,
+                defaultTimeRange,
+                onTimeRangeChange,
+                className: classNames == null ? void 0 : classNames.balanceDisplay
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "relative w-[465px] shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+            BalancesCard,
+            {
+              venueBalances,
+              onDeposit,
+              onWithdraw,
+              className: cn("absolute inset-0", classNames == null ? void 0 : classNames.balancesCard)
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+          PositionsActivity,
+          {
+            activePositions,
+            closedPositions,
+            activities,
+            onPositionClick,
+            onActivityClick,
+            className: classNames == null ? void 0 : classNames.positionsActivity
+          }
+        )
+      ]
+    }
+  ) });
+};
+UserProfilePage.displayName = "UserProfilePage";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  HomePage
+  EventMarketPage,
+  HomePage,
+  UserProfilePage
 });