@agg-build/ui 2.7.2 → 2.8.0

package/dist/events.js

@@ -6321,7 +6321,11 @@ var Select = ({
   triggerClassName,
   contentClassName,
   itemClassName,
-  disabled = SELECT_DEFAULT_IS_DISABLED
+  disabled = SELECT_DEFAULT_IS_DISABLED,
+  variant = "default",
+  openOnHover = false,
+  contentAlign = "start",
+  contentSideOffset = 8
 }) => {
   var _a;
   const labels = (0, import_hooks27.useLabels)();
@@ -6332,17 +6336,30 @@ var Select = ({
   const isDisabled = resolveIsSelectDisabled({ disabled, items });
   const selectedItem = resolveSelectedItem(items, value);
   const [isOpen, setIsOpen] = (0, import_react5.useState)(false);
-  const [menuRect, setMenuRect] = (0, import_react5.useState)(
-    null
-  );
+  const [menuRect, setMenuRect] = (0, import_react5.useState)(null);
   const containerRef = (0, import_react5.useRef)(null);
   const portalRef = (0, import_react5.useRef)(null);
-  const handleClose = (0, import_react5.useCallback)(() => setIsOpen(false), []);
+  const closeTimerRef = (0, import_react5.useRef)(null);
+  const openedByHoverRef = (0, import_react5.useRef)(false);
+  const handleClose = (0, import_react5.useCallback)(() => {
+    setIsOpen(false);
+    openedByHoverRef.current = false;
+  }, []);
   const updateMenuRect = (0, import_react5.useCallback)(() => {
     const el = containerRef.current;
     if (!el) return;
     const r = el.getBoundingClientRect();
-    setMenuRect({ top: r.bottom + 8, left: r.left, width: r.width });
+    setMenuRect({
+      top: r.bottom + contentSideOffset,
+      left: r.left,
+      right: r.right,
+      width: r.width
+    });
+  }, [contentSideOffset]);
+  (0, import_react5.useEffect)(() => {
+    return () => {
+      if (closeTimerRef.current) clearTimeout(closeTimerRef.current);
+    };
   }, []);
   (0, import_react5.useLayoutEffect)(() => {
     if (!isOpen) {
@@ -6380,7 +6397,33 @@ var Select = ({
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [isOpen, handleClose]);
-  const triggerRadiusClass = triggerClassName != null ? triggerClassName : "rounded-agg-md";
+  const handlePointerEnter = (event) => {
+    if (!openOnHover || isDisabled || event.pointerType === "touch") return;
+    if (closeTimerRef.current) {
+      clearTimeout(closeTimerRef.current);
+      closeTimerRef.current = null;
+    }
+    if (isOpen) return;
+    openedByHoverRef.current = true;
+    setIsOpen(true);
+  };
+  const handlePointerLeave = (event) => {
+    if (!openOnHover || event.pointerType === "touch") return;
+    if (closeTimerRef.current) clearTimeout(closeTimerRef.current);
+    closeTimerRef.current = setTimeout(() => {
+      handleClose();
+      closeTimerRef.current = null;
+    }, 120);
+  };
+  const handleTriggerClick = () => {
+    if (openedByHoverRef.current && isOpen) {
+      openedByHoverRef.current = false;
+      return;
+    }
+    setIsOpen((previousValue) => !previousValue);
+  };
+  const isInline = variant === "inline";
+  const triggerRadiusClass = triggerClassName != null ? triggerClassName : isInline ? "rounded-agg-sm" : "rounded-agg-md";
   const listbox = menuRect ? /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
     "div",
     {
@@ -6391,16 +6434,20 @@ var Select = ({
       style: {
         position: "fixed",
         top: menuRect.top,
-        left: menuRect.left,
+        left: contentAlign === "start" ? menuRect.left : void 0,
+        right: contentAlign === "end" ? window.innerWidth - menuRect.right : void 0,
         width: menuRect.width,
         zIndex: SELECT_DROPDOWN_Z
       },
       className: cn(
         AGG_ROOT_CLASS_NAME,
         rootClassName,
-        "agg-select-content pointer-events-auto max-h-[min(20rem,calc(100vh-4rem))] overflow-y-auto rounded-[12px] border border-agg-separator bg-agg-secondary p-2 shadow-[0_8px_16px_rgba(0,0,0,0.1)] flex flex-col gap-1",
+        "agg-select-content pointer-events-auto max-h-[min(20rem,calc(100vh-4rem))] overflow-y-auto border border-agg-separator bg-agg-secondary flex flex-col",
+        isInline ? "min-w-[120px] gap-0 rounded-agg-lg py-1 shadow-[0_8px_16px_rgba(0,0,0,0.12)]" : "gap-1 rounded-[12px] p-2 shadow-[0_8px_16px_rgba(0,0,0,0.1)]",
         contentClassName
       ),
+      onPointerEnter: handlePointerEnter,
+      onPointerLeave: handlePointerLeave,
       children: items.map((item) => {
         const isSelected = item.value === value;
         const isHidden = item.hidden === true;
@@ -6414,9 +6461,10 @@ var Select = ({
             disabled: item.disabled,
             className: cn(
               "agg-select-item",
-              "relative flex w-full items-center gap-3 rounded-[6px] pl-3 pr-5 py-3 text-left text-agg-sm leading-agg-5 outline-none",
+              "relative flex w-full items-center text-left text-agg-sm leading-agg-5 outline-none",
+              isInline ? "gap-2 px-4 py-2" : "gap-3 rounded-[6px] py-3 pl-3 pr-5",
               "hover:bg-agg-secondary-hover focus-visible:bg-agg-secondary-hover",
-              isSelected ? "bg-agg-primary/10 font-agg-normal text-agg-primary" : "font-agg-normal text-agg-foreground",
+              isSelected ? isInline ? "font-agg-bold text-agg-foreground" : "bg-agg-primary/10 font-agg-normal text-agg-primary" : "font-agg-normal text-agg-foreground",
               item.disabled && "cursor-not-allowed opacity-60",
               itemClassName
             ),
@@ -6428,6 +6476,13 @@ var Select = ({
               handleClose();
             },
             children: [
+              isInline && isSelected ? /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
+                "span",
+                {
+                  className: "agg-select-item-indicator absolute bottom-2 left-0 top-2 w-1 bg-agg-primary",
+                  "aria-hidden": true
+                }
+              ) : null,
               item.icon ? /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
                 "span",
                 {
@@ -6457,7 +6512,11 @@ var Select = ({
     "div",
     {
       ref: containerRef,
-      className: cn("group/agg-select", "relative inline-flex w-full", className),
+      className: cn(
+        "group/agg-select relative inline-flex",
+        isInline ? "w-auto" : "w-full",
+        className
+      ),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(
           "button",
@@ -6469,19 +6528,19 @@ var Select = ({
             disabled: isDisabled,
             className: cn(
               "agg-select-trigger",
-              "flex h-10 w-full items-center gap-2 rounded-[8px] border border-agg-separator bg-agg-secondary px-3 py-[9px] pr-10 font-agg-sans text-agg-sm leading-agg-5 text-agg-foreground outline-none",
-              "flex items-center gap-2 text-left",
+              "flex cursor-pointer items-center gap-2 font-agg-sans text-agg-foreground outline-none disabled:cursor-not-allowed disabled:opacity-60",
+              isInline ? "h-auto w-auto bg-transparent px-2 py-1 pr-8 text-left text-agg-base leading-agg-6" : "h-10 w-full border border-agg-separator bg-agg-secondary px-3 py-[9px] pr-10 text-left text-agg-sm leading-agg-5",
               triggerRadiusClass,
-              getMotionClassName(
+              !isInline && getMotionClassName(
                 enableAnimations,
                 "transition-[border-color,box-shadow] duration-200 ease-in-out"
               ),
-              isOpen && "border-2 border-agg-primary px-[11px] py-2 ring-0",
-              "hover:border-agg-primary",
-              "focus:border-agg-primary focus:ring-0",
-              "disabled:cursor-not-allowed disabled:opacity-60"
+              !isInline && isOpen && "border-2 border-agg-primary px-[11px] py-2 ring-0",
+              !isInline && "hover:border-agg-primary focus:border-agg-primary focus:ring-0"
             ),
-            onClick: () => setIsOpen((previousValue) => !previousValue),
+            onClick: handleTriggerClick,
+            onPointerEnter: handlePointerEnter,
+            onPointerLeave: handlePointerLeave,
             children: [
               (selectedItem == null ? void 0 : selectedItem.icon) ? /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("span", { className: "h-4 w-4 shrink-0 [&_svg]:h-full [&_svg]:w-full", children: selectedItem.icon }) : (selectedItem == null ? void 0 : selectedItem.iconUrl) ? /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
                 RemoteImage,
@@ -6495,14 +6554,23 @@ var Select = ({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("span", { className: "agg-select-chevron pointer-events-none absolute inset-y-0 right-3 inline-flex items-center justify-center text-agg-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
-          Icon,
+        /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
+          "span",
           {
-            name: isOpen ? "chevron-up" : "chevron-down-thin",
-            size: "small",
-            color: "currentColor"
+            className: cn(
+              "agg-select-chevron pointer-events-none absolute inset-y-0 inline-flex items-center justify-center",
+              isInline ? "right-2 text-agg-foreground" : "right-3 text-agg-muted-foreground"
+            ),
+            children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
+              Icon,
+              {
+                name: isOpen ? "chevron-up" : "chevron-down-thin",
+                size: "small",
+                color: "currentColor"
+              }
+            )
           }
-        ) }),
+        ),
         isOpen && typeof document !== "undefined" && listbox ? (0, import_react_dom.createPortal)(listbox, resolveSelectPortalContainer(containerRef.current)) : null
       ]
     }
@@ -8815,8 +8883,9 @@ var isOrderBookRow = (v) => (0, import_sdk11.hasShape)(v, {
   total: (t) => typeof t === "number" && t >= 0,
   tone: (x) => x === "positive" || x === "negative"
 });
-var formatProbabilityCents = (value) => {
+var formatProbabilityCents = (value, formatPrice) => {
   if (value == null) return "-";
+  if (formatPrice) return formatPrice(value);
   const cents = (value * 100).toFixed(1).replace(/\.0$/, "");
   return `${cents}\xA2`;
 };
@@ -9251,6 +9320,17 @@ var matchesSelectedOutcomeLabel = (outcome, selectedOutcomeLabel) => {
     return normalizedCandidate === normalizedSelectedLabel || toSemanticOutcomeLabel(candidate) === semanticSelectedLabel;
   });
 };
+var isTeamFramedMarket = (market) => {
+  var _a;
+  const outcomes = (_a = market.venueMarketOutcomes) != null ? _a : [];
+  if (outcomes.length < 2) return false;
+  return outcomes.every(
+    (outcome) => getOutcomeLabelCandidates(outcome).some((candidate) => {
+      const semanticCandidate = toSemanticOutcomeLabel(candidate);
+      return semanticCandidate !== "" && semanticCandidate !== "yes" && semanticCandidate !== "no";
+    })
+  );
+};
 var isValidLevel = (level) => {
   return level != null && Number.isFinite(level.price) && Number.isFinite(level.size) && level.price >= 0 && level.price <= 1 && level.size > 0;
 };
@@ -9395,6 +9475,7 @@ var collectEligibleVenueOutcomes = ({
   const seenMarketIds = /* @__PURE__ */ new Set();
   const seenOutcomeIds = /* @__PURE__ */ new Set();
   const result = [];
+  let selectedAnchorMarket = null;
   if (selectedOutcomeId) {
     for (const market of venueMarkets) {
       const outcome = market.venueMarketOutcomes.find((o) => o.id === selectedOutcomeId);
@@ -9448,6 +9529,16 @@ var collectEligibleVenueOutcomes = ({
         });
         return result;
       }
+      selectedAnchorMarket = market;
+      seenMarketIds.add(market.id);
+      seenOutcomeIds.add(outcome.id);
+      result.push({
+        venue: market.venue,
+        market,
+        outcome,
+        outcomeId: outcome.id,
+        semanticLabel
+      });
       break;
     }
   }
@@ -9490,10 +9581,18 @@ var collectEligibleVenueOutcomes = ({
   }
   for (const market of venueMarkets) {
     if (seenMarketIds.has(market.id)) continue;
+    if (selectedAnchorMarket && result.some(
+      (entry) => entry.venue === market.venue && entry.market.question.trim() !== market.question.trim()
+    )) {
+      continue;
+    }
     const matchedOutcome = sortOutcomes(market.venueMarketOutcomes).find(
       (outcome) => matchesSelectedOutcomeLabel(outcome, selectedOutcomeLabel)
     );
     if (!matchedOutcome || seenOutcomeIds.has(matchedOutcome.id)) continue;
+    if (selectedAnchorMarket && isTeamFramedMarket(market) !== isTeamFramedMarket(selectedAnchorMarket)) {
+      continue;
+    }
     const candidateRefs = (_c = matchedOutcome.matchedVenueMarketOutcomes) != null ? _c : [];
     if (candidateRefs.length > 0) {
       const sharesAnchor = candidateRefs.some(
@@ -11047,7 +11146,7 @@ var EventListItemDetailsGraphSection = ({
   }, [chartOutcomeLabel, (_d = tradingContext == null ? void 0 : tradingContext.selectedOutcome) == null ? void 0 : _d.label]);
   const {
     chart: { selectedChartTimeRange },
-    formatting: { formatPercent },
+    formatting: { formatPercent, formatPrice },
     general: { theme }
   } = (0, import_hooks40.useSdkUiConfig)();
   const isDarkTheme = theme === "dark";
@@ -11322,8 +11421,8 @@ var EventListItemDetailsGraphSection = ({
                     });
                     return {
                       value: outcome.id,
-                      label: `${(_d3 = outcome.title) != null ? _d3 : outcome.label} ${formatProbabilityCents(price)}`,
-                      ariaLabel: `${(_e2 = outcome.title) != null ? _e2 : outcome.label} ${formatProbabilityCents(price)}`
+                      label: `${(_d3 = outcome.title) != null ? _d3 : outcome.label} ${formatProbabilityCents(price, formatPrice)}`,
+                      ariaLabel: `${(_e2 = outcome.title) != null ? _e2 : outcome.label} ${formatProbabilityCents(price, formatPrice)}`
                     };
                   })
                 }
@@ -11745,7 +11844,7 @@ var EventListItemDetails = (props) => {
 EventListItemDetails.displayName = "EventListItemDetails";
 
 // src/events/market-details/index.tsx
-var import_hooks43 = require("@agg-build/hooks");
+var import_hooks44 = require("@agg-build/hooks");
 var import_react20 = require("react");
 
 // src/events/orderbook/index.tsx
@@ -11993,6 +12092,7 @@ var OrderbookRow = ({
   entry,
   formatNumber,
   formatCurrency,
+  formatPrice,
   enableAnimations,
   showBadge,
   badgeLabel
@@ -12061,7 +12161,7 @@ var OrderbookRow = ({
             "w-9 min-w-9 md:min-w-10 md:w-10 text-agg-sm font-agg-bold leading-agg-5",
             priceClassName
           ),
-          children: formatProbabilityCents(entry.row.price)
+          children: formatProbabilityCents(entry.row.price, formatPrice)
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(OrderbookVenueLogos, { venues })
@@ -12083,7 +12183,10 @@ var Orderbook = ({
   className
 }) => {
   var _a, _b, _c, _d, _e;
-  const { enableWebsocketsLogs } = (0, import_hooks41.useAggUiConfig)();
+  const {
+    enableWebsocketsLogs,
+    formatting: { formatPrice }
+  } = (0, import_hooks41.useAggUiConfig)();
   const labels = __spreadValues(__spreadValues({}, orderbookDefaultLabels), labelsProp);
   const scrollContainerRef = (0, import_react18.useRef)(null);
   const spreadRowRef = (0, import_react18.useRef)(null);
@@ -12148,6 +12251,7 @@ var Orderbook = ({
                 entry,
                 formatNumber,
                 formatCurrency,
+                formatPrice,
                 enableAnimations,
                 showBadge: index === askEntries.length - 1,
                 badgeLabel: labels.asks
@@ -12160,7 +12264,7 @@ var Orderbook = ({
                 ref: spreadRowRef,
                 className: "agg-orderbook-spread flex items-center border-y border-agg-separator h-9 px-5 py-2 gap-3 md:gap-10",
                 role: "separator",
-                "aria-label": `${labels.midPrice}: ${formatProbabilityCents((_b = spreadEntry == null ? void 0 : spreadEntry.midPrice) != null ? _b : null)}, ${labels.spread}: ${formatProbabilityCents((_c = spreadEntry == null ? void 0 : spreadEntry.spread) != null ? _c : null)}`,
+                "aria-label": `${labels.midPrice}: ${formatProbabilityCents((_b = spreadEntry == null ? void 0 : spreadEntry.midPrice) != null ? _b : null, formatPrice)}, ${labels.spread}: ${formatProbabilityCents((_c = spreadEntry == null ? void 0 : spreadEntry.spread) != null ? _c : null)}`,
                 children: [
                   /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
                     Typography,
@@ -12170,7 +12274,7 @@ var Orderbook = ({
                       children: [
                         "Last: ",
                         labels.lastOutcome ? `${labels.lastOutcome} ` : "",
-                        formatProbabilityCents((_d = spreadEntry == null ? void 0 : spreadEntry.midPrice) != null ? _d : null)
+                        formatProbabilityCents((_d = spreadEntry == null ? void 0 : spreadEntry.midPrice) != null ? _d : null, formatPrice)
                       ]
                     }
                   ),
@@ -12197,6 +12301,7 @@ var Orderbook = ({
                 entry,
                 formatNumber,
                 formatCurrency,
+                formatPrice,
                 enableAnimations,
                 showBadge: index === 0,
                 badgeLabel: labels.bids
@@ -12373,6 +12478,7 @@ var resolveTradingStateBadgeClassName = (kind) => {
 };
 
 // src/events/market-details/market-details-outcome-button.tsx
+var import_hooks42 = require("@agg-build/hooks");
 var import_jsx_runtime131 = require("react/jsx-runtime");
 var marketDetailsOutcomeButtonToneClasses = {
   positive: {
@@ -12423,6 +12529,7 @@ var OutcomePriceContent = ({
   value,
   textClassName
 }) => {
+  const { formatPrice } = (0, import_hooks42.useAggUiConfig)().formatting;
   if (isLoading) {
     return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
       "span",
@@ -12441,7 +12548,7 @@ var OutcomePriceContent = ({
       as: "span",
       variant: isSelected ? "body-strong" : "body",
       className: cn("shrink-0 whitespace-nowrap", textClassName),
-      children: formatProbabilityCents(value)
+      children: formatProbabilityCents(value, formatPrice)
     }
   );
 };
@@ -12535,7 +12642,7 @@ var MarketDetailsOutcomeButton = ({
 MarketDetailsOutcomeButton.displayName = "MarketDetailsOutcomeButton";
 
 // src/events/market-details/market-details-graph-panel.tsx
-var import_hooks42 = require("@agg-build/hooks");
+var import_hooks43 = require("@agg-build/hooks");
 var import_react19 = require("react");
 var import_jsx_runtime132 = require("react/jsx-runtime");
 var MarketDetailsGraphPanel = ({
@@ -12552,13 +12659,13 @@ var MarketDetailsGraphPanel = ({
   classNames
 }) => {
   var _a, _b, _c;
-  const config = (0, import_hooks42.useSdkUiConfig)();
+  const config = (0, import_hooks43.useSdkUiConfig)();
   const {
-    formatting: { formatPercent, formatCompactCurrency },
+    formatting: { formatPercent, formatCompactCurrency, formatPrice },
     general: { theme }
   } = config;
   const isDarkTheme = theme === "dark";
-  const labels = (0, import_hooks42.useLabels)();
+  const labels = (0, import_hooks43.useLabels)();
   const selectedTimeRange = config.chart.selectedChartTimeRange;
   const setSelectedTimeRange = config.chart.setSelectedChartTimeRange;
   const [chartRangeOverride, setChartRangeOverride] = (0, import_react19.useState)(null);
@@ -12578,7 +12685,7 @@ var MarketDetailsGraphPanel = ({
       livePrices
     });
   }, [livePrices, venueMarkets, resolvedChartOutcomeLabel, chartSelectedOutcomeId]);
-  const rollingWindow = (0, import_hooks42.useRollingChartWindow)({ range: effectiveChartTimeRange });
+  const rollingWindow = (0, import_hooks43.useRollingChartWindow)({ range: effectiveChartTimeRange });
   const chartPrimaryOutcomeId = (_b = (_a = chartOutcomesByVenue[0]) == null ? void 0 : _a.outcome.id) != null ? _b : null;
   const chartVenueOutcomeIds = (0, import_react19.useMemo)(() => {
     return chartOutcomesByVenue.map((item) => item.outcome.id);
@@ -12588,7 +12695,7 @@ var MarketDetailsGraphPanel = ({
     isLoading: isMarketChartLoading,
     error: marketChartError,
     refetch: refetchMarketChart
-  } = (0, import_hooks42.useMarketChart)({
+  } = (0, import_hooks43.useMarketChart)({
     marketId: chartPrimaryOutcomeId,
     venueMarketIds: chartVenueOutcomeIds,
     interval: rollingWindow.interval,
@@ -12768,8 +12875,8 @@ var MarketDetailsGraphPanel = ({
                   const price = outcome.probability;
                   return {
                     value: outcome.id,
-                    label: `${(_a3 = outcome == null ? void 0 : outcome.title) != null ? _a3 : outcome.label} ${formatProbabilityCents(price)}`,
-                    ariaLabel: `${(_b3 = outcome == null ? void 0 : outcome.title) != null ? _b3 : outcome.label} ${formatProbabilityCents(price)}`
+                    label: `${(_a3 = outcome == null ? void 0 : outcome.title) != null ? _a3 : outcome.label} ${formatProbabilityCents(price, formatPrice)}`,
+                    ariaLabel: `${(_b3 = outcome == null ? void 0 : outcome.title) != null ? _b3 : outcome.label} ${formatProbabilityCents(price, formatPrice)}`
                   };
                 })
               }
@@ -12798,7 +12905,7 @@ var MarketDetailsGraphPanel = ({
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("span", { "aria-hidden": "true", className: "hidden h-4 w-px bg-agg-separator md:block" }),
-            import_hooks42.CHART_TIME_RANGES.map((timeRange) => {
+            import_hooks43.CHART_TIME_RANGES.map((timeRange) => {
               const isActive = effectiveChartTimeRange === timeRange;
               const isDisabled = isResolvedMarket && timeRange !== "ALL";
               return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
@@ -12841,7 +12948,7 @@ var MarketDetailsUnavailableState = ({
   ariaLabel,
   classNames
 }) => {
-  const labels = (0, import_hooks43.useLabels)();
+  const labels = (0, import_hooks44.useLabels)();
   return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
     Card,
     {
@@ -12865,7 +12972,7 @@ var MarketDetailsNotFoundState = ({
   ariaLabel: _ariaLabel,
   classNames: _classNames
 }) => {
-  const labels = (0, import_hooks43.useLabels)();
+  const labels = (0, import_hooks44.useLabels)();
   return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
     StateMessage,
     {
@@ -12903,33 +13010,33 @@ var MarketDetailsContent = ({
   midpointsResult
 }) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i;
-  const config = (0, import_hooks43.useSdkUiConfig)();
+  const config = (0, import_hooks44.useSdkUiConfig)();
   const {
     features: { enableAnimations },
     formatting: { formatPercent }
   } = config;
-  const labels = (0, import_hooks43.useLabels)();
-  const tradingContext = (0, import_hooks43.useEventTradingContext)();
+  const labels = (0, import_hooks44.useLabels)();
+  const tradingContext = (0, import_hooks44.useEventTradingContext)();
   const detailsContentId = (0, import_react20.useId)();
   const tradeSide = (_a = tradingContext == null ? void 0 : tradingContext.tradeSide) != null ? _a : "buy";
   const resolvedMarket = (0, import_react20.useMemo)(() => {
     return resolveMarketFromVenueMarkets(venueMarkets, marketId);
   }, [venueMarkets, marketId]);
   const clusterVenueMarkets = resolvedMarket == null ? void 0 : resolvedMarket.venueMarkets;
-  const wsLivePrices = (0, import_hooks43.useLiveOutcomePrices)(clusterVenueMarkets);
-  const wsBestPrices = (0, import_hooks43.useLiveBestPrices)(clusterVenueMarkets);
-  const wsBestCandidates = (0, import_hooks43.useLiveBestPriceCandidates)(clusterVenueMarkets);
+  const wsLivePrices = (0, import_hooks44.useLiveOutcomePrices)(clusterVenueMarkets);
+  const wsBestPrices = (0, import_hooks44.useLiveBestPrices)(clusterVenueMarkets);
+  const wsBestCandidates = (0, import_hooks44.useLiveBestPriceCandidates)(clusterVenueMarkets);
   const scopedResolvedMarket = (0, import_react20.useMemo)(() => {
     var _a2, _b2;
     if (!resolvedMarket) return null;
     return (_b2 = (_a2 = resolvedMarket.venueMarkets.find((venueMarket) => venueMarket.id === resolvedMarket.id)) != null ? _a2 : resolvedMarket.venueMarkets[0]) != null ? _b2 : null;
   }, [resolvedMarket]);
-  const isResolvedMarket = (0, import_hooks43.resolveMarketTradingState)(scopedResolvedMarket).kind === "resolved";
-  (0, import_hooks43.useEventOrderbookData)(
+  const isResolvedMarket = (0, import_hooks44.resolveMarketTradingState)(scopedResolvedMarket).kind === "resolved";
+  (0, import_hooks44.useEventOrderbookData)(
     isResolvedMarket ? [] : resolvedMarket == null ? void 0 : resolvedMarket.venueMarkets,
     (_b = scopedResolvedMarket == null ? void 0 : scopedResolvedMarket.id) != null ? _b : null
   );
-  const fetchedClusterMidpointResult = (0, import_hooks43.useMidpoints)(midpointsResult ? [] : clusterVenueMarkets);
+  const fetchedClusterMidpointResult = (0, import_hooks44.useMidpoints)(midpointsResult ? [] : clusterVenueMarkets);
   const clusterMidpointResult = midpointsResult != null ? midpointsResult : fetchedClusterMidpointResult;
   const clusterMidpoints = (_c = clusterMidpointResult.bestMidpointsByOutcomeId) != null ? _c : clusterMidpointResult.prices;
   const clusterBestMidpointsByOutcomeId = clusterMidpoints;
@@ -12938,7 +13045,7 @@ var MarketDetailsContent = ({
   const clusterBestMidpointVenue = clusterMidpointResult.bestMidpointVenue;
   const clusterBestPricesRest = clusterMidpointResult.bestPrices;
   const clusterBestPrices = (0, import_react20.useMemo)(
-    () => (0, import_hooks43.mergeBestPricesPreferringLive)(clusterBestPricesRest, wsBestPrices),
+    () => (0, import_hooks44.mergeBestPricesPreferringLive)(clusterBestPricesRest, wsBestPrices),
     [clusterBestPricesRest, wsBestPrices]
   );
   const clusterBestPriceVenuesByOutcomeId = clusterMidpointResult.bestPriceVenuesByOutcomeId;
@@ -12993,7 +13100,7 @@ var MarketDetailsContent = ({
     return (_a2 = model.market.venueMarkets.find((venueMarket) => venueMarket.id === model.market.id)) != null ? _a2 : model.primaryVenueMarket;
   }, [model]);
   const marketTradingState = (0, import_react20.useMemo)(() => {
-    return (0, import_hooks43.resolveMarketTradingState)(scopedMarketForCard);
+    return (0, import_hooks44.resolveMarketTradingState)(scopedMarketForCard);
   }, [scopedMarketForCard]);
   const isOutcomeSelectionLocked = marketTradingState.isTradingDisabled;
   const isUpcomingMarket = marketTradingState.kind === "unopened";
@@ -13154,7 +13261,7 @@ var MarketDetailsContent = ({
       fallbackPrice: midpointsFallback == null ? void 0 : midpointsFallback.get(displayOutcome.id)
     });
     if (referencePrice != null) return referencePrice;
-    return (0, import_hooks43.findLivePriceById)(wsLivePrices, displayOutcome.id);
+    return (0, import_hooks44.findLivePriceById)(wsLivePrices, displayOutcome.id);
   }, [
     clusterBestMidpoint,
     clusterBestMidpointsByOutcomeId,
@@ -13180,7 +13287,7 @@ var MarketDetailsContent = ({
   const orderBookEnabled = isOpened && effectiveSelectedTab === "order-book" && !marketTradingState.isTradingDisabled;
   const primaryVenueMarketId = (_g = (_f = selectedOutcomesByVenue[0]) == null ? void 0 : _f.market.id) != null ? _g : null;
   const primaryOutcomeId = (_i = (_h = selectedOutcomesByVenue[0]) == null ? void 0 : _h.outcome.id) != null ? _i : null;
-  const marketOrderbookResult = (0, import_hooks43.useMarketOrderbook)({
+  const marketOrderbookResult = (0, import_hooks44.useMarketOrderbook)({
     marketId: primaryVenueMarketId,
     enabled: orderBookEnabled && !!primaryVenueMarketId,
     venueOutcomes: selectedOutcomesByVenue.map((item) => ({
@@ -13361,7 +13468,7 @@ var MarketDetailsContent = ({
                       !compactHeader ? /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
                         RemoteImage,
                         {
-                          src: (0, import_hooks43.optimizedImageUrl)(model.image, 60),
+                          src: (0, import_hooks44.optimizedImageUrl)(model.image, 60),
                           alt: "",
                           className: "agg-market-image size-12 rounded-agg-lg object-cover md:size-[60px]"
                         }
@@ -13612,7 +13719,7 @@ var MarketDetailsContent = ({
 };
 var MarketDetails = (_a) => {
   var _b = _a, { isOpened } = _b, props = __objRest(_b, ["isOpened"]);
-  const labels = (0, import_hooks43.useLabels)();
+  const labels = (0, import_hooks44.useLabels)();
   if (props.isLoading) {
     return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
       Skeleton,
@@ -13667,13 +13774,13 @@ var resolveIsResolvedEvent = (sourceMarkets, eventTradingState) => {
     return eventTradingState.kind === "resolved";
   }
   if (sourceMarkets.length === 0) return false;
-  return sourceMarkets.every((market) => (0, import_hooks43.resolveMarketTradingState)(market).kind === "resolved");
+  return sourceMarkets.every((market) => (0, import_hooks44.resolveMarketTradingState)(market).kind === "resolved");
 };
 var resolveResolvedWinnerMarketId = (sourceMarkets, eventTradingState) => {
   var _a, _b, _c, _d, _e;
   const preferredMarket = (_a = eventTradingState == null ? void 0 : eventTradingState.primaryMarket) != null ? _a : null;
   if (preferredMarket && sourceMarkets.some((market) => market.id === preferredMarket.id)) {
-    if ((0, import_hooks43.resolveMarketTradingState)(preferredMarket).kind === "resolved") {
+    if ((0, import_hooks44.resolveMarketTradingState)(preferredMarket).kind === "resolved") {
       return preferredMarket.id;
     }
   }
@@ -13693,8 +13800,8 @@ var MarketDetailsList = ({
   midpointsResult
 }) => {
   var _a, _b;
-  const labels = (0, import_hooks43.useLabels)();
-  const tradingContext = (0, import_hooks43.useEventTradingContext)();
+  const labels = (0, import_hooks44.useLabels)();
+  const tradingContext = (0, import_hooks44.useEventTradingContext)();
   const selectedMarketId = (_a = tradingContext == null ? void 0 : tradingContext.selectedMarketId) != null ? _a : null;
   const [expandedMarketId, setExpandedMarketId] = (0, import_react20.useState)(null);
   const [areResolvedMarketsVisible, setAreResolvedMarketsVisible] = (0, import_react20.useState)(false);
@@ -13703,10 +13810,10 @@ var MarketDetailsList = ({
     markets: rawMarkets,
     isLoading,
     error
-  } = (0, import_hooks43.useVenueMarkets)({
+  } = (0, import_hooks44.useVenueMarkets)({
     venueEventId: resolvedEventId,
     enabled: !providedMarkets && !!resolvedEventId,
-    status: import_hooks43.MarketStatus.open,
+    status: import_hooks44.MarketStatus.open,
     // Keep in lockstep with useEnrichedVenueEvent: limit is part of the React
     // Query key, so a mismatch would fork the shared cache into two requests.
     // fetchAll drains every page — events can exceed any single-page limit
@@ -13750,7 +13857,7 @@ var MarketDetailsList = ({
     const resolved = [];
     const closed = [];
     sourceMarkets.forEach((market) => {
-      const marketStateKind = (0, import_hooks43.resolveMarketTradingState)(market).kind;
+      const marketStateKind = (0, import_hooks44.resolveMarketTradingState)(market).kind;
       if (marketStateKind === "resolved") {
         resolved.push(market);
         return;
@@ -13778,10 +13885,10 @@ var MarketDetailsList = ({
   const hasPrefetchedMarkets = !!providedMarkets || !!((_b = eventTradingState == null ? void 0 : eventTradingState.marketStates) == null ? void 0 : _b.length);
   const midpointEligibleMarkets = (0, import_react20.useMemo)(() => {
     return displayedMarkets.filter(
-      (market) => (0, import_hooks43.resolveMarketTradingState)(market).kind !== "resolved"
+      (market) => (0, import_hooks44.resolveMarketTradingState)(market).kind !== "resolved"
     );
   }, [displayedMarkets]);
-  const { prices: midpointsFallback, venueByOutcomeId: midpointsFallbackVenues } = (0, import_hooks43.useViewportMidpoints)(midpointEligibleMarkets);
+  const { prices: midpointsFallback, venueByOutcomeId: midpointsFallbackVenues } = (0, import_hooks44.useViewportMidpoints)(midpointEligibleMarkets);
   (0, import_react20.useEffect)(() => {
     if (isResolvedEvent) {
       setAreResolvedMarketsVisible(false);
@@ -13800,7 +13907,7 @@ var MarketDetailsList = ({
       return;
     }
     const fallbackSelectableMarket = displayedMarkets.find(
-      (market) => !(0, import_hooks43.resolveMarketTradingState)(market).isTradingDisabled
+      (market) => !(0, import_hooks44.resolveMarketTradingState)(market).isTradingDisabled
     );
     if (!fallbackSelectableMarket) {
       return;
@@ -13822,7 +13929,7 @@ var MarketDetailsList = ({
     setExpandedMarketId(marketId);
     onExpandedMarketChange == null ? void 0 : onExpandedMarketChange(marketId);
     if (marketId === selectedMarketId) return;
-    if ((0, import_hooks43.resolveMarketTradingState)(market).isTradingDisabled) return;
+    if ((0, import_hooks44.resolveMarketTradingState)(market).isTradingDisabled) return;
     tradingContext == null ? void 0 : tradingContext.selectMarket(market.id, market);
   };
   if (!hasPrefetchedMarkets && isLoading) {
@@ -13915,7 +14022,7 @@ var MarketDetailsList = ({
 MarketDetailsList.displayName = "MarketDetailsList";
 
 // src/events/list/index.tsx
-var import_hooks45 = require("@agg-build/hooks");
+var import_hooks46 = require("@agg-build/hooks");
 var import_sdk15 = require("@agg-build/sdk");
 var Dialog2 = __toESM(require("@radix-ui/react-dialog"));
 var import_react23 = require("react");
@@ -14038,7 +14145,7 @@ var CategorySidebar = ({
 CategorySidebar.displayName = "CategorySidebar";
 
 // src/events/list/event-list-tabs.tsx
-var import_hooks44 = require("@agg-build/hooks");
+var import_hooks45 = require("@agg-build/hooks");
 var import_sdk14 = require("@agg-build/sdk");
 var import_react22 = require("react");
 
@@ -14126,14 +14233,14 @@ var renderTabIcon = (tab, isActive) => {
   );
 };
 var useEventListTabs = (tabs) => {
-  const labels = (0, import_hooks44.useLabels)();
-  const { disabledVenues, isLoading: isAppConfigLoading } = (0, import_hooks44.useAppConfig)();
-  const { isLocationBlocked } = (0, import_hooks44.useGeoBlock)();
+  const labels = (0, import_hooks45.useLabels)();
+  const { disabledVenues, isLoading: isAppConfigLoading } = (0, import_hooks45.useAppConfig)();
+  const { isLocationBlocked } = (0, import_hooks45.useGeoBlock)();
   return (0, import_react22.useMemo)(() => {
     const baseTabs = tabs != null ? tabs : getDefaultEventListTabs(labels);
     return baseTabs.flatMap((tab) => {
       if (!tab.venueLogo) return [tab];
-      const availabilityState = (0, import_hooks44.getVenueAvailabilityState)({
+      const availabilityState = (0, import_hooks45.getVenueAvailabilityState)({
         venueId: tab.venueLogo,
         disabledVenues,
         isConfigLoading: isAppConfigLoading && tab.venueLogo === import_sdk14.Venue.kalshi,
@@ -14247,15 +14354,15 @@ var EventList = ({
   stateRef
 }) => {
   var _a, _b, _c, _d, _e;
-  const labels = (0, import_hooks45.useLabels)();
-  const { disabledVenues } = (0, import_hooks45.useAppConfig)();
+  const labels = (0, import_hooks46.useLabels)();
+  const { disabledVenues } = (0, import_hooks46.useAppConfig)();
   const {
     features: { enableVenueEventDiscoveryFilters, showSportsMarkets }
-  } = (0, import_hooks45.useSdkUiConfig)();
+  } = (0, import_hooks46.useSdkUiConfig)();
   const isDiscoveryFiltersEnabled = enableVenueEventDiscoveryFilters && !search;
   const resolvedTabs = useEventListTabs();
   const visibleVenues = (0, import_react23.useMemo)(
-    () => disabledVenues.length === 0 ? void 0 : (0, import_hooks45.getVisibleVenueIdsByConfig)(import_sdk15.VENUES, disabledVenues),
+    () => disabledVenues.length === 0 ? void 0 : (0, import_hooks46.getVisibleVenueIdsByConfig)(import_sdk15.VENUES, disabledVenues),
     [disabledVenues]
   );
   const [activeTabValue, setActiveTabValue] = (0, import_react23.useState)(
@@ -14300,7 +14407,7 @@ var EventList = ({
     setCategoryPath([]);
     setCollapsedCategoryIds(/* @__PURE__ */ new Set());
   }, [baseCategoryId, isDiscoveryFiltersEnabled]);
-  const { categories: topLevelCategories } = (0, import_hooks45.useCategories)({
+  const { categories: topLevelCategories } = (0, import_hooks46.useCategories)({
     queryKeyScope: "event-list-top-categories",
     enabled: isDiscoveryFiltersEnabled,
     limit: 100
@@ -14316,7 +14423,7 @@ var EventList = ({
       ])
     );
   }, [categoryPath, sortedTopLevelCategories]);
-  const { childrenByParentId: baseChildrenByParentId } = (0, import_hooks45.useCategoryChildren)({
+  const { childrenByParentId: baseChildrenByParentId } = (0, import_hooks46.useCategoryChildren)({
     queryKeyScope: "event-list-category-children",
     enabled: isDiscoveryFiltersEnabled,
     parentIds: baseCategoryChildPrefetchIds,
@@ -14337,7 +14444,7 @@ var EventList = ({
     }
     return Array.from(ids);
   }, [baseCategoryId, baseChildrenByParentId, categoryPath]);
-  const { childrenByParentId: visibleChildrenByParentId } = (0, import_hooks45.useCategoryChildren)({
+  const { childrenByParentId: visibleChildrenByParentId } = (0, import_hooks46.useCategoryChildren)({
     queryKeyScope: "event-list-category-children",
     enabled: isDiscoveryFiltersEnabled,
     parentIds: visibleChildPrefetchIds,
@@ -14353,7 +14460,7 @@ var EventList = ({
     }
     return Array.from(ids);
   }, [categoryPath, visibleChildrenByParentId]);
-  const { childrenByParentId: visibleGrandchildrenByParentId } = (0, import_hooks45.useCategoryChildren)({
+  const { childrenByParentId: visibleGrandchildrenByParentId } = (0, import_hooks46.useCategoryChildren)({
     queryKeyScope: "event-list-category-children",
     enabled: isDiscoveryFiltersEnabled,
     parentIds: visibleGrandchildPrefetchIds,
@@ -14409,14 +14516,14 @@ var EventList = ({
     isFetchingNextPage,
     isPlaceholderData,
     loadedPageCount
-  } = (0, import_hooks45.useVenueEvents)({
+  } = (0, import_hooks46.useVenueEvents)({
     queryKeyScope: "event-list",
     venues,
     search,
     categoryIds: resolvedCategoryIds,
     matchStatus,
     limit: requestLimit,
-    status: [import_hooks45.MarketStatus.open],
+    status: [import_hooks46.MarketStatus.open],
     sortBy: sortQueryParams.sortBy,
     sortDir: sortQueryParams.sortDir,
     endDateFrom,
@@ -14451,7 +14558,7 @@ var EventList = ({
   const visibleMidpointVenueMarketIds = (0, import_react23.useMemo)(() => {
     return collectMidpointVenueMarketIds(visibleVenueMarkets);
   }, [visibleVenueMarkets]);
-  const { midpointRows: sharedMidpointRows, isLoading: isSharedMidpointsLoading } = (0, import_hooks45.useVenueMarketMidpoints)({
+  const { midpointRows: sharedMidpointRows, isLoading: isSharedMidpointsLoading } = (0, import_hooks46.useVenueMarketMidpoints)({
     venueMarketIds: visibleMidpointVenueMarketIds,
     enabled: visibleMidpointVenueMarketIds.length > 0
   });
@@ -14632,7 +14739,7 @@ var EventList = ({
                     onMarketClick,
                     getMarketHref,
                     href: getEventHref == null ? void 0 : getEventHref(event),
-                    marketStatus: import_hooks45.MarketStatus.open
+                    marketStatus: import_hooks46.MarketStatus.open
                   },
                   event.id
                 )),