@agg-build/ui 1.0.1 → 1.1.0

package/dist/{chunk-5ES2VJHO.mjs → chunk-7JEJIGG4.mjs}

@@ -1,8 +1,10 @@
 "use client";
 import {
+  SETTLEMENT_SECTION_ID,
   buildMarketDetailsModel,
   formatProbabilityCents,
   formatProbabilityPercent,
+  getFirstSettlementParagraph,
   getTimeWindowByRange,
   resolveHeaderOutcomeItems,
   resolveInitialOutcomeLabel,
@@ -19,7 +21,7 @@ import {
   resolveUnifiedOrderBookEntries,
   sortOutcomeSelectorOutcomes,
   useEventTradingContext
-} from "./chunk-HD6HBTK2.mjs";
+} from "./chunk-KDMNFHPL.mjs";
 import {
   AutocompleteSelect,
   Badge,
@@ -71,7 +73,7 @@ import {
   sortMarketsByYesOddsDesc,
   sortOutcomes,
   splitEventsByLifecycle
-} from "./chunk-YZNO6IUD.mjs";
+} from "./chunk-R6DETAZ6.mjs";
 
 // src/events/item/index.tsx
 import {
@@ -955,70 +957,23 @@ var mergeVenueOutcomeOrderbooks = ({
 
 // src/events/item-details/settlement-summary.tsx
 import { useLabels as useLabels2 } from "@agg-build/hooks";
-import { useCallback as useCallback2, useEffect, useId, useRef, useState as useState2 } from "react";
+import { useMemo as useMemo2 } from "react";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var SettlementSummary = ({
   content,
-  onToggle,
+  settlementSectionId = SETTLEMENT_SECTION_ID,
   className
 }) => {
-  var _a;
   const labels = useLabels2();
-  const contentId = useId();
-  const containerRef = useRef(null);
-  const measureRef = useRef(null);
-  const [isExpanded, setIsExpanded] = useState2(false);
-  const [canExpand, setCanExpand] = useState2(false);
-  const resolvedContent = (_a = content == null ? void 0 : content.trim()) != null ? _a : "";
-  const measureOverflow = useCallback2(() => {
-    const measureElement = measureRef.current;
-    if (!measureElement) return;
-    const nextCanExpand = measureElement.scrollWidth > measureElement.clientWidth + 1;
-    setCanExpand((currentValue) => {
-      if (currentValue === nextCanExpand) return currentValue;
-      return nextCanExpand;
-    });
-  }, []);
-  useEffect(() => {
-    if (!resolvedContent) {
-      setCanExpand(false);
-      setIsExpanded(false);
-      return;
-    }
-    setCanExpand(false);
-    setIsExpanded(false);
-    measureOverflow();
-  }, [measureOverflow, resolvedContent]);
-  useEffect(() => {
-    if (!resolvedContent) return;
-    const containerElement = containerRef.current;
-    if (!containerElement) return;
-    if (typeof ResizeObserver === "function") {
-      const resizeObserver = new ResizeObserver(() => {
-        measureOverflow();
-      });
-      resizeObserver.observe(containerElement);
-      return () => {
-        resizeObserver.disconnect();
-      };
-    }
-    const handleResize = () => {
-      measureOverflow();
-    };
-    window.addEventListener("resize", handleResize);
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, [measureOverflow, resolvedContent]);
-  if (!resolvedContent) return null;
-  const shouldShowToggle = canExpand || isExpanded;
-  const toggleLabel = isExpanded ? labels.settlementSummary.showLess : labels.settlementSummary.readFullDetails;
-  const handleToggle = (event) => {
+  const firstParagraph = useMemo2(() => getFirstSettlementParagraph(content), [content]);
+  if (!firstParagraph) return null;
+  const handleReadFullDetails = (event) => {
     event.preventDefault();
     event.stopPropagation();
-    const nextExpanded = !isExpanded;
-    setIsExpanded(nextExpanded);
-    onToggle == null ? void 0 : onToggle(nextExpanded);
+    if (typeof document === "undefined") return;
+    const target = document.getElementById(settlementSectionId);
+    if (!target) return;
+    target.scrollIntoView({ behavior: "smooth", block: "start" });
   };
   return /* @__PURE__ */ jsxs2("div", { className: cn("agg-settlement-summary flex w-full flex-col gap-2", className), children: [
     /* @__PURE__ */ jsx2(
@@ -1029,78 +984,32 @@ var SettlementSummary = ({
         children: labels.settlementSummary.title
       }
     ),
-    /* @__PURE__ */ jsxs2("div", { ref: containerRef, className: "relative w-full", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "agg-settlement-summary-row flex w-full items-center gap-3", children: [
       /* @__PURE__ */ jsx2(
         "p",
         {
-          ref: measureRef,
-          "aria-hidden": "true",
           className: cn(
-            "agg-settlement-summary-measure",
-            "pointer-events-none absolute inset-x-0 top-0 block overflow-hidden whitespace-nowrap opacity-0",
-            "text-agg-sm leading-agg-5 text-agg-foreground"
+            "agg-settlement-summary-text",
+            "min-w-0 flex-1 truncate text-agg-sm leading-agg-5 text-agg-foreground"
           ),
-          children: resolvedContent
+          children: firstParagraph
         }
       ),
-      isExpanded ? /* @__PURE__ */ jsxs2("div", { className: "agg-settlement-summary-expanded flex flex-col gap-2", children: [
-        /* @__PURE__ */ jsx2(
-          "p",
-          {
-            id: contentId,
-            className: cn(
-              "agg-settlement-summary-text",
-              "text-agg-sm leading-agg-5 text-agg-foreground",
-              "break-words [overflow-wrap:anywhere]"
-            ),
-            children: resolvedContent
-          }
-        ),
-        shouldShowToggle ? /* @__PURE__ */ jsx2(
-          "button",
-          {
-            type: "button",
-            className: cn(
-              "agg-settlement-summary-toggle",
-              "w-fit shrink-0 cursor-pointer whitespace-nowrap text-left text-agg-sm font-agg-bold leading-agg-5 text-agg-primary",
-              "hover:opacity-80",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-agg-primary focus-visible:ring-offset-0 focus-visible:ring-offset-agg-secondary"
-            ),
-            "aria-controls": contentId,
-            "aria-expanded": isExpanded,
-            onClick: handleToggle,
-            children: toggleLabel
-          }
-        ) : null
-      ] }) : /* @__PURE__ */ jsxs2("div", { className: "agg-settlement-summary-collapsed flex w-full items-start gap-3", children: [
-        /* @__PURE__ */ jsx2(
-          "p",
-          {
-            id: contentId,
-            className: cn(
-              "agg-settlement-summary-text",
-              "min-w-0 flex-1 truncate text-agg-sm leading-agg-5 text-agg-foreground"
-            ),
-            children: resolvedContent
-          }
-        ),
-        shouldShowToggle ? /* @__PURE__ */ jsx2(
-          "button",
-          {
-            type: "button",
-            className: cn(
-              "agg-settlement-summary-toggle",
-              "shrink-0 cursor-pointer whitespace-nowrap text-agg-sm font-agg-bold leading-agg-5 text-agg-primary",
-              "hover:opacity-80",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-agg-primary focus-visible:ring-offset-0 focus-visible:ring-offset-agg-secondary"
-            ),
-            "aria-controls": contentId,
-            "aria-expanded": isExpanded,
-            onClick: handleToggle,
-            children: toggleLabel
-          }
-        ) : null
-      ] })
+      /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          className: cn(
+            "agg-settlement-summary-toggle",
+            "shrink-0 cursor-pointer whitespace-nowrap text-agg-sm font-agg-bold leading-agg-5 text-agg-primary",
+            "hover:opacity-80",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-agg-primary focus-visible:ring-offset-0 focus-visible:ring-offset-agg-secondary"
+          ),
+          "aria-controls": settlementSectionId,
+          onClick: handleReadFullDetails,
+          children: labels.settlementSummary.readFullDetails
+        }
+      )
     ] })
   ] });
 };
@@ -1120,11 +1029,11 @@ import {
   useSdkUiConfig as useSdkUiConfig2,
   useVenueEvent as useVenueEvent2
 } from "@agg-build/hooks";
-import { useEffect as useEffect3, useMemo as useMemo4, useRef as useRef3, useState as useState4 } from "react";
+import { useEffect as useEffect2, useMemo as useMemo5, useRef as useRef2, useState as useState3 } from "react";
 
 // src/primitives/chart/chart-type-switch.tsx
 import { useLabels as useLabels3 } from "@agg-build/hooks";
-import { useMemo as useMemo2 } from "react";
+import { useMemo as useMemo3 } from "react";
 
 // src/primitives/chart/chart-type-switch.constants.ts
 var CHART_TYPE_SWITCH_OPTION_KEYS = ["line", "candlestick"];
@@ -1156,7 +1065,7 @@ var ChartTypeSwitch = ({
   className
 }) => {
   const labels = useLabels3();
-  const options = useMemo2(
+  const options = useMemo3(
     () => CHART_TYPE_SWITCH_OPTION_KEYS.map((chartType) => ({
       value: chartType,
       iconName: resolveChartTypeOptionIconName(chartType),
@@ -1272,7 +1181,7 @@ var filterChartVenueOutcomesByRenderableVenues = ({
 
 // src/events/item-details/event-list-item-details-market-selector.tsx
 import { useLabels as useLabels4 } from "@agg-build/hooks";
-import { useEffect as useEffect2, useLayoutEffect, useMemo as useMemo3, useRef as useRef2, useState as useState3 } from "react";
+import { useEffect, useLayoutEffect, useMemo as useMemo4, useRef, useState as useState2 } from "react";
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var MARKET_PILL_MAX_ROWS = 2;
 var MARKET_PILL_FALLBACK_CONTAINER_WIDTH = 640;
@@ -1369,37 +1278,37 @@ var EventListItemDetailsMarketSelector = ({
 }) => {
   var _a;
   const labels = useLabels4();
-  const containerRef = useRef2(null);
-  const measurementContainerRef = useRef2(null);
-  const moreButtonRef = useRef2(null);
-  const dropdownInputRef = useRef2(null);
-  const moreButtonMeasureRef = useRef2(null);
-  const optionMeasureRefs = useRef2({});
-  const [layout, setLayout] = useState3(() => ({
+  const containerRef = useRef(null);
+  const measurementContainerRef = useRef(null);
+  const moreButtonRef = useRef(null);
+  const dropdownInputRef = useRef(null);
+  const moreButtonMeasureRef = useRef(null);
+  const optionMeasureRefs = useRef({});
+  const [layout, setLayout] = useState2(() => ({
     visibleItems: options,
     hiddenItems: []
   }));
-  const [isDropdownOpen, setIsDropdownOpen] = useState3(false);
-  const [isMobileViewport, setIsMobileViewport] = useState3(false);
-  const [searchValue, setSearchValue] = useState3("");
-  const [dropdownPosition, setDropdownPosition] = useState3({
+  const [isDropdownOpen, setIsDropdownOpen] = useState2(false);
+  const [isMobileViewport, setIsMobileViewport] = useState2(false);
+  const [searchValue, setSearchValue] = useState2("");
+  const [dropdownPosition, setDropdownPosition] = useState2({
     left: 0,
     top: 0,
     width: 0
   });
-  const selectedHiddenOption = useMemo3(() => {
+  const selectedHiddenOption = useMemo4(() => {
     var _a2;
     return (_a2 = layout.hiddenItems.find((option) => option.value === selectedValue)) != null ? _a2 : null;
   }, [layout.hiddenItems, selectedValue]);
   const moreButtonLabel = (_a = selectedHiddenOption == null ? void 0 : selectedHiddenOption.label) != null ? _a : MARKET_PILL_MORE_LABEL;
   const isMoreButtonSelected = selectedHiddenOption != null;
-  const filteredOptions = useMemo3(() => {
+  const filteredOptions = useMemo4(() => {
     const normalizedSearchValue = searchValue.trim().toLowerCase();
     if (!normalizedSearchValue) return options;
     return options.filter((option) => option.label.toLowerCase().includes(normalizedSearchValue));
   }, [options, searchValue]);
-  const lastMeasuredKeyRef = useRef2(null);
-  const measureFrameRef = useRef2(null);
+  const lastMeasuredKeyRef = useRef(null);
+  const measureFrameRef = useRef(null);
   useLayoutEffect(() => {
     const measureLayout = () => {
       var _a2, _b, _c, _d, _e;
@@ -1481,7 +1390,7 @@ var EventListItemDetailsMarketSelector = ({
       }
     };
   }, [moreButtonLabel, options]);
-  useEffect2(() => {
+  useEffect(() => {
     if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
     const mediaQueryList = window.matchMedia(MOBILE_TABS_MEDIA_QUERY);
     const handleMediaQueryChange = (event) => {
@@ -1499,7 +1408,7 @@ var EventListItemDetailsMarketSelector = ({
       mediaQueryList.removeListener(handleMediaQueryChange);
     };
   }, []);
-  useEffect2(() => {
+  useEffect(() => {
     if (!isDropdownOpen) {
       setSearchValue("");
       return;
@@ -1548,7 +1457,7 @@ var EventListItemDetailsMarketSelector = ({
       resizeObserver.disconnect();
     };
   }, [isDropdownOpen, isMobileViewport, moreButtonLabel]);
-  useEffect2(() => {
+  useEffect(() => {
     if (!isDropdownOpen) return;
     const handlePointerDown = (event) => {
       var _a2;
@@ -1894,11 +1803,11 @@ var EventListItemDetailsGraphSection = ({
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
   const labels = useLabels5();
   const tradingContext = useEventTradingContext();
-  const [selectedGraphVenue, setSelectedGraphVenue] = useState4(null);
-  const [chartOutcomeLabel, setChartOutcomeLabel] = useState4(
+  const [selectedGraphVenue, setSelectedGraphVenue] = useState3(null);
+  const [chartOutcomeLabel, setChartOutcomeLabel] = useState3(
     (_c = (_b = (_a = tradingContext == null ? void 0 : tradingContext.selectedOutcome) == null ? void 0 : _a.label) == null ? void 0 : _b.trim()) != null ? _c : null
   );
-  useEffect3(() => {
+  useEffect2(() => {
     var _a2, _b2, _c2;
     if (chartOutcomeLabel != null) return;
     const label = (_c2 = (_b2 = (_a2 = tradingContext == null ? void 0 : tradingContext.selectedOutcome) == null ? void 0 : _a2.label) == null ? void 0 : _b2.trim()) != null ? _c2 : null;
@@ -1912,15 +1821,15 @@ var EventListItemDetailsGraphSection = ({
     general: { theme }
   } = useSdkUiConfig2();
   const isDarkTheme = theme === "dark";
-  const timeWindow = useMemo4(() => {
+  const timeWindow = useMemo5(() => {
     return getTimeWindowByRange(selectedChartTimeRange);
   }, [selectedChartTimeRange]);
-  const availableMarkets = useMemo4(() => {
+  const availableMarkets = useMemo5(() => {
     if (venueMarkets.length === 0) return [];
     return normalizeVenueMarketCluster(venueMarkets, tradingContext == null ? void 0 : tradingContext.selectedMarketId);
   }, [tradingContext == null ? void 0 : tradingContext.selectedMarketId, venueMarkets]);
   const resolvedChartOutcomeLabel = (_g = chartOutcomeLabel != null ? chartOutcomeLabel : (_f = (_e = tradingContext == null ? void 0 : tradingContext.selectedOutcome) == null ? void 0 : _e.label) == null ? void 0 : _f.trim()) != null ? _g : null;
-  const availableVenueOutcomes = useMemo4(() => {
+  const availableVenueOutcomes = useMemo5(() => {
     return resolveChartVenueOutcomes({
       eligibleVenueOutcomes: collectEligibleVenueOutcomes({
         venueMarkets: availableMarkets,
@@ -1944,13 +1853,13 @@ var EventListItemDetailsGraphSection = ({
     enabled: availableVenueOutcomes.length > 0,
     live
   });
-  const selectedMarketOutcomes = useMemo4(() => {
+  const selectedMarketOutcomes = useMemo5(() => {
     var _a2, _b2;
     const selectedMarket = (_b2 = (_a2 = tradingContext == null ? void 0 : tradingContext.selectedMarket) != null ? _a2 : availableMarkets[0]) != null ? _b2 : null;
     if (!selectedMarket) return [];
     return sortOutcomeSelectorOutcomes(selectedMarket.venueMarketOutcomes);
   }, [availableMarkets, tradingContext == null ? void 0 : tradingContext.selectedMarket]);
-  const resolvedVenueChartSeries = useMemo4(() => {
+  const resolvedVenueChartSeries = useMemo5(() => {
     return resolveMarketChartVenueSeries({
       chartData: scopedMarketChartData,
       transformProbability: (v) => v
@@ -1963,31 +1872,31 @@ var EventListItemDetailsGraphSection = ({
       lineStyle: "solid"
     }));
   }, [isDarkTheme, scopedMarketChartData]);
-  const chartAvailableVenueOutcomes = useMemo4(() => {
+  const chartAvailableVenueOutcomes = useMemo5(() => {
     return filterChartVenueOutcomesByRenderableVenues({
       chartData: scopedMarketChartData,
       venueOutcomes: availableVenueOutcomes
     });
   }, [availableVenueOutcomes, scopedMarketChartData]);
-  const defaultCandlestickVenue = useMemo4(() => {
+  const defaultCandlestickVenue = useMemo5(() => {
     var _a2, _b2, _c2, _d2, _e2, _f2;
     return (_f2 = (_e2 = (_c2 = (_a2 = chartAvailableVenueOutcomes.find((item) => item.venue === (tradingContext == null ? void 0 : tradingContext.selectedVenue))) == null ? void 0 : _a2.venue) != null ? _c2 : (_b2 = chartAvailableVenueOutcomes[0]) == null ? void 0 : _b2.venue) != null ? _e2 : (_d2 = availableVenueOutcomes[0]) == null ? void 0 : _d2.venue) != null ? _f2 : null;
   }, [availableVenueOutcomes, chartAvailableVenueOutcomes, tradingContext == null ? void 0 : tradingContext.selectedVenue]);
   const activeGraphVenue = selectedChartType === "candlestick" ? selectedGraphVenue != null ? selectedGraphVenue : defaultCandlestickVenue : selectedGraphVenue;
-  const visibleChartSeries = useMemo4(() => {
+  const visibleChartSeries = useMemo5(() => {
     if (!activeGraphVenue) {
       return resolvedVenueChartSeries;
     }
     return resolvedVenueChartSeries.filter((seriesItem) => seriesItem.venue === activeGraphVenue);
   }, [activeGraphVenue, resolvedVenueChartSeries]);
-  const chartLiveState = useMemo4(() => {
+  const chartLiveState = useMemo5(() => {
     return resolveMarketChartLiveState({
       chartData: scopedMarketChartData,
       selectedVenue: activeGraphVenue,
       transformProbability: (v) => v
     });
   }, [activeGraphVenue, scopedMarketChartData]);
-  useEffect3(() => {
+  useEffect2(() => {
     if (!selectedGraphVenue) return;
     const hasSelectedGraphVenue = chartAvailableVenueOutcomes.some(
       (item) => item.venue === selectedGraphVenue
@@ -2135,14 +2044,14 @@ var EventListItemDetailsContent = ({
   onClick
 }) => {
   var _a, _b;
-  const [selectedChartType, setSelectedChartType] = useState4("line");
-  const lastAppliedEventSyncKeyRef = useRef3(null);
-  const lastAppliedDefaultRef = useRef3(null);
+  const [selectedChartType, setSelectedChartType] = useState3("line");
+  const lastAppliedEventSyncKeyRef = useRef2(null);
+  const lastAppliedDefaultRef = useRef2(null);
   const config = useSdkUiConfig2();
   const labels = useLabels5();
   const tradingContext = useEventTradingContext();
-  const eventSyncKey = useMemo4(() => resolveEventDetailsSyncKey(event), [event]);
-  const resolvedEventTradingState = useMemo4(() => {
+  const eventSyncKey = useMemo5(() => resolveEventDetailsSyncKey(event), [event]);
+  const resolvedEventTradingState = useMemo5(() => {
     return eventTradingState != null ? eventTradingState : resolveEventTradingState(event);
   }, [event, eventTradingState]);
   const scopedSelectedMarket = (tradingContext == null ? void 0 : tradingContext.selectedEventId) === event.id ? (_a = tradingContext.selectedMarket) != null ? _a : resolvedEventTradingState.primaryMarket : resolvedEventTradingState.primaryMarket;
@@ -2152,7 +2061,7 @@ var EventListItemDetailsContent = ({
     scopedSelectedMarketId
   );
   const wsLivePrices = useLiveOutcomePrices(resolvedEventTradingState.displayMarkets);
-  const midpointsClusterMarkets = useMemo4(() => {
+  const midpointsClusterMarkets = useMemo5(() => {
     if (resolvedEventTradingState.isTradingDisabled) return [];
     return normalizeVenueMarketCluster(
       resolvedEventTradingState.displayMarkets,
@@ -2164,14 +2073,14 @@ var EventListItemDetailsContent = ({
     scopedSelectedMarketId
   ]);
   const { prices: restMidpoints } = useMidpoints(midpointsClusterMarkets);
-  const livePrices = useMemo4(() => {
+  const livePrices = useMemo5(() => {
     if (!restMidpoints.size) return wsLivePrices;
     if (!wsLivePrices.size) return restMidpoints;
     const merged = new Map(restMidpoints);
     for (const [k, v] of wsLivePrices) merged.set(k, v);
     return merged;
   }, [restMidpoints, wsLivePrices]);
-  useEffect3(() => {
+  useEffect2(() => {
     if (!tradingContext) return;
     if (lastAppliedEventSyncKeyRef.current === eventSyncKey) return;
     if ((tradingContext == null ? void 0 : tradingContext.selectedEventId) !== event.id) {
@@ -2181,7 +2090,7 @@ var EventListItemDetailsContent = ({
     }
     lastAppliedEventSyncKeyRef.current = eventSyncKey;
   }, [event, eventSyncKey, tradingContext]);
-  useEffect3(() => {
+  useEffect2(() => {
     if (!tradingContext) return;
     if (!defaultMarketId) return;
     if (tradingContext.selectedEventId !== event.id) return;
@@ -2208,19 +2117,19 @@ var EventListItemDetailsContent = ({
     tradingContext,
     tradingContext == null ? void 0 : tradingContext.selectedEventId
   ]);
-  const venueMarkets = useMemo4(
+  const venueMarkets = useMemo5(
     () => resolvedEventTradingState.displayMarkets,
     [resolvedEventTradingState.displayMarkets]
   );
-  const sortedVenueMarkets = useMemo4(() => sortMarketsByYesOddsDesc(venueMarkets), [venueMarkets]);
-  const marketOptions = useMemo4(
+  const sortedVenueMarkets = useMemo5(() => sortMarketsByYesOddsDesc(venueMarkets), [venueMarkets]);
+  const marketOptions = useMemo5(
     () => sortedVenueMarkets.map((vm) => ({
       value: vm.id,
       label: vm.question
     })),
     [sortedVenueMarkets]
   );
-  const volumeLabel = useMemo4(() => {
+  const volumeLabel = useMemo5(() => {
     const resolvedVolume = resolveDisplayVolume(event.volume, venueMarkets);
     if (typeof resolvedVolume !== "number") return "";
     return `${config.formatting.formatCompactCurrency(resolvedVolume)} ${labels.eventItemDetails.volumeSuffix}`;
@@ -2497,7 +2406,7 @@ var orderbookDefaultLabels = {
 };
 
 // src/events/orderbook/use-center-orderbook-spread.ts
-import { useCallback as useCallback3, useLayoutEffect as useLayoutEffect2, useRef as useRef4 } from "react";
+import { useCallback as useCallback2, useLayoutEffect as useLayoutEffect2, useRef as useRef3 } from "react";
 var maxAutoCenterAttempts = 12;
 var userScrollKeys = /* @__PURE__ */ new Set(["ArrowDown", "ArrowUp", "PageDown", "PageUp", "Home", "End", " "]);
 var useCenterOrderbookSpread = ({
@@ -2508,10 +2417,10 @@ var useCenterOrderbookSpread = ({
   rowCount,
   enabled = true
 }) => {
-  const hasAutoCenteredRef = useRef4(false);
-  const hasUserScrolledRef = useRef4(false);
-  const animationFrameRef = useRef4(null);
-  const retryCountRef = useRef4(0);
+  const hasAutoCenteredRef = useRef3(false);
+  const hasUserScrolledRef = useRef3(false);
+  const animationFrameRef = useRef3(null);
+  const retryCountRef = useRef3(0);
   const resetKey = marketId != null ? marketId : "";
   useLayoutEffect2(() => {
     const cancelPendingFrame = () => {
@@ -2638,7 +2547,7 @@ var useCenterOrderbookSpread = ({
       disconnectResizeObserver();
     };
   }, [containerRef, enabled, resetKey, rowCount, spreadRef]);
-  const recenter = useCallback3(() => {
+  const recenter = useCallback2(() => {
     const container = containerRef.current;
     const spread = spreadRef.current;
     if (!container || !spread) return;
@@ -2659,7 +2568,7 @@ var useCenterOrderbookSpread = ({
 
 // src/events/orderbook/index.tsx
 import { sortVenues as sortVenues3, useAggUiConfig } from "@agg-build/hooks";
-import { useEffect as useEffect4, useRef as useRef5 } from "react";
+import { useEffect as useEffect3, useRef as useRef4 } from "react";
 import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 var OrderbookVenueLogos = ({ venues }) => {
   const visible = sortVenues3(venues).slice(0, orderbookMaxVisibleVenues);
@@ -2756,8 +2665,8 @@ var Orderbook = ({
   var _a, _b, _c, _d, _e;
   const { enableWebsocketsLogs } = useAggUiConfig();
   const labels = __spreadValues(__spreadValues({}, orderbookDefaultLabels), labelsProp);
-  const scrollContainerRef = useRef5(null);
-  const spreadRowRef = useRef5(null);
+  const scrollContainerRef = useRef4(null);
+  const spreadRowRef = useRef4(null);
   const autoCenterMarketId = (_a = marketId != null ? marketId : outcomeId) != null ? _a : null;
   const maxVisibleRows = Math.max(1, visibleRows);
   const totalVisibleRows = maxVisibleRows * 2 + 1;
@@ -2774,7 +2683,7 @@ var Orderbook = ({
   const spreadEntry = entries.find(
     (e) => e.kind === "spread"
   );
-  useEffect4(() => {
+  useEffect3(() => {
     var _a2, _b2;
     if (!enableWebsocketsLogs) return;
     console.debug("[AggUI][orderbook] component_rendered", {
@@ -2974,7 +2883,7 @@ import {
   useVenueMarkets as useVenueMarkets2,
   useViewportMidpoints
 } from "@agg-build/hooks";
-import { useEffect as useEffect5, useId as useId2, useMemo as useMemo5, useRef as useRef6, useState as useState5 } from "react";
+import { useEffect as useEffect4, useId, useMemo as useMemo6, useRef as useRef5, useState as useState4 } from "react";
 
 // src/events/market-details/market-details-outcome-button.tsx
 import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
@@ -3151,9 +3060,9 @@ var MarketDetailsContent = ({
   const isDarkTheme = theme === "dark";
   const labels = useLabels6();
   const tradingContext = useEventTradingContext2();
-  const detailsContentId = useId2();
+  const detailsContentId = useId();
   const wsLivePrices = useLiveOutcomePrices2(venueMarkets);
-  const model = useMemo5(() => {
+  const model = useMemo6(() => {
     return buildMarketDetailsModel({
       venueMarkets,
       marketId,
@@ -3163,15 +3072,15 @@ var MarketDetailsContent = ({
       labels
     });
   }, [config.formatting.formatCompactCurrency, venueMarkets, image, labels, marketId, title]);
-  const resolvedMarket = useMemo5(() => {
+  const resolvedMarket = useMemo6(() => {
     return resolveMarketFromVenueMarkets(venueMarkets, marketId);
   }, [venueMarkets, marketId]);
-  const clusterMidpointMarkets = useMemo5(() => {
+  const clusterMidpointMarkets = useMemo6(() => {
     if (!controlledIsOpened || !resolvedMarket) return [];
     return resolvedMarket.venueMarkets;
   }, [controlledIsOpened, resolvedMarket]);
   const { prices: clusterMidpoints, venueByOutcomeId: clusterVenueByOutcomeId } = useMidpoints2(clusterMidpointMarkets);
-  const livePrices = useMemo5(() => {
+  const livePrices = useMemo6(() => {
     const merged = /* @__PURE__ */ new Map();
     if (midpointsFallback == null ? void 0 : midpointsFallback.size) {
       for (const [outcomeId, price] of midpointsFallback) {
@@ -3186,49 +3095,49 @@ var MarketDetailsContent = ({
     for (const [k, v] of wsLivePrices) merged.set(k, v);
     return merged;
   }, [clusterMidpoints, midpointsFallback, wsLivePrices]);
-  const scopedMarketForCard = useMemo5(() => {
+  const scopedMarketForCard = useMemo6(() => {
     var _a2;
     if (!model) return null;
     return (_a2 = model.market.venueMarkets.find((venueMarket) => venueMarket.id === model.market.id)) != null ? _a2 : model.primaryVenueMarket;
   }, [model]);
-  const marketTradingState = useMemo5(() => {
+  const marketTradingState = useMemo6(() => {
     return resolveMarketTradingState(scopedMarketForCard);
   }, [scopedMarketForCard]);
   const isResolvedMarket = marketTradingState.kind === "resolved";
   const isOutcomeSelectionLocked = marketTradingState.isTradingDisabled;
   const isUpcomingMarket = marketTradingState.kind === "unopened";
   const marketStatePresentation = resolveTradingStatePresentation(labels, marketTradingState);
-  const marketDetailsTabs = useMemo5(() => {
+  const marketDetailsTabs = useMemo6(() => {
     return getMarketDetailsTabs(labels);
   }, [labels]);
-  const [selectedTab, setSelectedTab] = useState5(
+  const [selectedTab, setSelectedTab] = useState4(
     () => resolveInitialTab(defaultTab)
   );
-  const [isOpened, setIsOpened] = useState5(controlledIsOpened);
-  useEffect5(() => {
+  const [isOpened, setIsOpened] = useState4(controlledIsOpened);
+  useEffect4(() => {
     setSelectedTab(resolveInitialTab(defaultTab));
   }, [defaultTab]);
-  useEffect5(() => {
+  useEffect4(() => {
     setIsOpened(controlledIsOpened);
   }, [controlledIsOpened]);
   const selectedTimeRange = config.chart.selectedChartTimeRange;
   const setSelectedTimeRange = config.chart.setSelectedChartTimeRange;
   const effectiveSelectedTab = isResolvedMarket ? "graph" : selectedTab;
   const effectiveChartTimeRange = isResolvedMarket ? "ALL" : selectedTimeRange;
-  const [selectedChartType, setSelectedChartType] = useState5("line");
+  const [selectedChartType, setSelectedChartType] = useState4("line");
   const scopedSelectedOutcome = (_a = tradingContext == null ? void 0 : tradingContext.selectedOutcome) != null ? _a : null;
   const selectedOutcomeId = (_b = scopedSelectedOutcome == null ? void 0 : scopedSelectedOutcome.id) != null ? _b : null;
   const selectedOutcomeLabel = (_c = scopedSelectedOutcome == null ? void 0 : scopedSelectedOutcome.label) != null ? _c : null;
   const selectOutcome = tradingContext == null ? void 0 : tradingContext.selectOutcome;
-  const [selectedGraphVenue, setSelectedGraphVenue] = useState5(null);
-  const [chartOutcomeLabel, setChartOutcomeLabel] = useState5(selectedOutcomeLabel);
-  useEffect5(() => {
+  const [selectedGraphVenue, setSelectedGraphVenue] = useState4(null);
+  const [chartOutcomeLabel, setChartOutcomeLabel] = useState4(selectedOutcomeLabel);
+  useEffect4(() => {
     if (!isOpened) return;
     if (selectedOutcomeLabel) {
       setChartOutcomeLabel(selectedOutcomeLabel);
     }
   }, [isOpened]);
-  useEffect5(() => {
+  useEffect4(() => {
     var _a2;
     if (!isOpened || !model) return;
     if (isOutcomeSelectionLocked) return;
@@ -3248,7 +3157,7 @@ var MarketDetailsContent = ({
     selectedOutcomeId,
     selectOutcome
   ]);
-  const headerOutcomeItems = useMemo5(() => {
+  const headerOutcomeItems = useMemo6(() => {
     if (!model) return [];
     const items = resolveHeaderOutcomeItems(model.market.venueMarkets);
     return items.map((item) => {
@@ -3273,7 +3182,7 @@ var MarketDetailsContent = ({
     midpointsFallbackVenues,
     wsLivePrices
   ]);
-  const headlineProbability = useMemo5(() => {
+  const headlineProbability = useMemo6(() => {
     var _a2, _b2, _c2, _d2;
     if (!model || !scopedMarketForCard) return void 0;
     const yesOutcome = resolveYesOutcome(scopedMarketForCard);
@@ -3285,7 +3194,7 @@ var MarketDetailsContent = ({
     if (restPrice != null) return restPrice;
     return (_d2 = findLivePriceById(wsLivePrices, displayOutcome.id)) != null ? _d2 : displayOutcome.price;
   }, [model, scopedMarketForCard, clusterMidpoints, midpointsFallback, wsLivePrices]);
-  const selectedOutcomesByVenue = useMemo5(() => {
+  const selectedOutcomesByVenue = useMemo6(() => {
     if (!model) return [];
     return collectEligibleVenueOutcomes({
       venueMarkets: model.market.venueMarkets,
@@ -3293,7 +3202,7 @@ var MarketDetailsContent = ({
     });
   }, [model, selectedOutcomeLabel]);
   const resolvedChartOutcomeLabel = chartOutcomeLabel != null ? chartOutcomeLabel : selectedOutcomeLabel;
-  const chartOutcomesByVenue = useMemo5(() => {
+  const chartOutcomesByVenue = useMemo6(() => {
     if (!model) return [];
     return resolveChartVenueOutcomes({
       eligibleVenueOutcomes: collectEligibleVenueOutcomes({
@@ -3305,13 +3214,13 @@ var MarketDetailsContent = ({
   }, [livePrices, model, resolvedChartOutcomeLabel]);
   const chartEnabled = isOpened && effectiveSelectedTab === "graph";
   const orderBookEnabled = isOpened && effectiveSelectedTab === "order-book" && !marketTradingState.isTradingDisabled;
-  const timeWindow = useMemo5(() => {
+  const timeWindow = useMemo6(() => {
     return getTimeWindowByRange(effectiveChartTimeRange);
   }, [effectiveChartTimeRange]);
   const primaryVenueMarketId = (_e = (_d = selectedOutcomesByVenue[0]) == null ? void 0 : _d.market.id) != null ? _e : null;
   const primaryOutcomeId = (_g = (_f = selectedOutcomesByVenue[0]) == null ? void 0 : _f.outcome.id) != null ? _g : null;
   const chartPrimaryOutcomeId = (_i = (_h = chartOutcomesByVenue[0]) == null ? void 0 : _h.outcome.id) != null ? _i : null;
-  const chartVenueOutcomeIds = useMemo5(() => {
+  const chartVenueOutcomeIds = useMemo6(() => {
     return chartOutcomesByVenue.map((item) => item.outcome.id);
   }, [chartOutcomesByVenue]);
   const {
@@ -3337,14 +3246,14 @@ var MarketDetailsContent = ({
     })),
     live
   });
-  const marketOrderbookDataById = useMemo5(() => {
+  const marketOrderbookDataById = useMemo6(() => {
     var _a2;
     return (_a2 = marketOrderbookResult.dataById) != null ? _a2 : {};
   }, [marketOrderbookResult]);
   const isOrderBookLoading = marketOrderbookResult.isLoading;
   const orderBookError = marketOrderbookResult.error;
   const refetchOrderBook = marketOrderbookResult.refetch;
-  const aggregatedOrderbookRows = useMemo5(() => {
+  const aggregatedOrderbookRows = useMemo6(() => {
     return mergeVenueOutcomeOrderbooks({
       eligibleOutcomes: selectedOutcomesByVenue,
       orderbooksByOutcomeId: marketOrderbookDataById
@@ -3352,7 +3261,7 @@ var MarketDetailsContent = ({
   }, [marketOrderbookDataById, selectedOutcomesByVenue]);
   const askRows = aggregatedOrderbookRows.askRows;
   const bidRows = aggregatedOrderbookRows.bidRows;
-  const unifiedEntries = useMemo5(() => {
+  const unifiedEntries = useMemo6(() => {
     return resolveUnifiedOrderBookEntries({
       askRows,
       bidRows,
@@ -3360,7 +3269,7 @@ var MarketDetailsContent = ({
       spread: aggregatedOrderbookRows.spread
     });
   }, [aggregatedOrderbookRows.midpoint, aggregatedOrderbookRows.spread, askRows, bidRows]);
-  const orderbookSnapshotKey = useMemo5(() => {
+  const orderbookSnapshotKey = useMemo6(() => {
     if (selectedOutcomesByVenue.length === 0) return null;
     return selectedOutcomesByVenue.map((item) => {
       var _a2, _b2;
@@ -3368,13 +3277,13 @@ var MarketDetailsContent = ({
       return `${item.outcomeId}:${snapshotVersion}`;
     }).join("|");
   }, [marketOrderbookDataById, selectedOutcomesByVenue]);
-  const chartAvailableOutcomesByVenue = useMemo5(() => {
+  const chartAvailableOutcomesByVenue = useMemo6(() => {
     return filterChartVenueOutcomesByRenderableVenues({
       chartData: marketChartData,
       venueOutcomes: chartOutcomesByVenue
     });
   }, [chartOutcomesByVenue, marketChartData]);
-  const graphSeries = useMemo5(() => {
+  const graphSeries = useMemo6(() => {
     var _a2, _b2, _c2, _d2;
     const baseColor = resolveSeriesColor(
       (_d2 = (_c2 = selectedGraphVenue != null ? selectedGraphVenue : (_a2 = chartAvailableOutcomesByVenue[0]) == null ? void 0 : _a2.venue) != null ? _c2 : (_b2 = chartOutcomesByVenue[0]) == null ? void 0 : _b2.venue) != null ? _d2 : "polymarket",
@@ -3402,14 +3311,14 @@ var MarketDetailsContent = ({
     chartAvailableOutcomesByVenue,
     chartOutcomesByVenue
   ]);
-  const graphLiveState = useMemo5(() => {
+  const graphLiveState = useMemo6(() => {
     return resolveMarketChartLiveState({
       chartData: marketChartData,
       selectedVenue: selectedGraphVenue,
       transformProbability: (value) => value
     });
   }, [marketChartData, selectedGraphVenue]);
-  const otherRows = useMemo5(() => {
+  const otherRows = useMemo6(() => {
     if (!model) return [];
     return resolveOtherTabRows(model.market, labels);
   }, [labels, model]);
@@ -3483,7 +3392,7 @@ var MarketDetailsContent = ({
     title: labels.marketDetails.orderBookEmptyTitle,
     description: labels.marketDetails.orderBookEmptyDescription
   } : { kind: "data" };
-  useEffect5(() => {
+  useEffect4(() => {
     if (!selectedGraphVenue) {
       return;
     }
@@ -3999,9 +3908,9 @@ var MarketDetailsList = ({
   const labels = useLabels6();
   const tradingContext = useEventTradingContext2();
   const selectedMarketId = (_a = tradingContext == null ? void 0 : tradingContext.selectedMarketId) != null ? _a : null;
-  const [expandedMarketId, setExpandedMarketId] = useState5(selectedMarketId);
-  const previousSelectedMarketIdRef = useRef6(selectedMarketId);
-  const [areResolvedMarketsVisible, setAreResolvedMarketsVisible] = useState5(false);
+  const [expandedMarketId, setExpandedMarketId] = useState4(selectedMarketId);
+  const previousSelectedMarketIdRef = useRef5(selectedMarketId);
+  const [areResolvedMarketsVisible, setAreResolvedMarketsVisible] = useState4(false);
   const resolvedEventId = eventId || "";
   const {
     markets: rawMarkets,
@@ -4014,7 +3923,7 @@ var MarketDetailsList = ({
     sortBy: "yesPrice",
     sortDir: "desc"
   });
-  const sourceMarkets = useMemo5(() => {
+  const sourceMarkets = useMemo6(() => {
     var _a2;
     if ((_a2 = eventTradingState == null ? void 0 : eventTradingState.marketStates) == null ? void 0 : _a2.length) {
       return eventTradingState.marketStates.map((item) => item.market);
@@ -4022,10 +3931,10 @@ var MarketDetailsList = ({
     if (providedMarkets) return providedMarkets;
     return rawMarkets;
   }, [eventTradingState == null ? void 0 : eventTradingState.marketStates, providedMarkets, rawMarkets]);
-  const isResolvedEvent = useMemo5(() => {
+  const isResolvedEvent = useMemo6(() => {
     return resolveIsResolvedEvent(sourceMarkets, eventTradingState);
   }, [eventTradingState, sourceMarkets]);
-  const groupedMarkets = useMemo5(() => {
+  const groupedMarkets = useMemo6(() => {
     const sortedMarkets = sortMarketsByYesOddsDesc(sourceMarkets);
     if (sortedMarkets.length === 0) {
       return {
@@ -4066,16 +3975,16 @@ var MarketDetailsList = ({
     return { primary, upcoming, resolved, closed };
   }, [eventTradingState, isResolvedEvent, sourceMarkets]);
   const shouldShowResolvedToggle = !isResolvedEvent && groupedMarkets.resolved.length > 0;
-  const visibleResolvedMarkets = useMemo5(() => {
+  const visibleResolvedMarkets = useMemo6(() => {
     if (isResolvedEvent || areResolvedMarketsVisible) return groupedMarkets.resolved;
     return [];
   }, [areResolvedMarketsVisible, groupedMarkets.resolved, isResolvedEvent]);
-  const displayedMarkets = useMemo5(() => {
+  const displayedMarkets = useMemo6(() => {
     return [...groupedMarkets.primary, ...visibleResolvedMarkets];
   }, [groupedMarkets.primary, visibleResolvedMarkets]);
   const hasPrefetchedMarkets = !!providedMarkets || !!((_b = eventTradingState == null ? void 0 : eventTradingState.marketStates) == null ? void 0 : _b.length);
   const { prices: midpointsFallback, venueByOutcomeId: midpointsFallbackVenues } = useViewportMidpoints(displayedMarkets);
-  useEffect5(() => {
+  useEffect4(() => {
     if (isResolvedEvent) {
       setAreResolvedMarketsVisible(false);
       return;
@@ -4084,14 +3993,14 @@ var MarketDetailsList = ({
       setAreResolvedMarketsVisible(false);
     }
   }, [groupedMarkets.resolved.length, isResolvedEvent]);
-  useEffect5(() => {
+  useEffect4(() => {
     if (previousSelectedMarketIdRef.current === selectedMarketId) return;
     previousSelectedMarketIdRef.current = selectedMarketId;
     if (!selectedMarketId) return;
     if (!displayedMarkets.some((market) => market.id === selectedMarketId)) return;
     setExpandedMarketId(selectedMarketId);
   }, [displayedMarkets, selectedMarketId]);
-  useEffect5(() => {
+  useEffect4(() => {
     if (displayedMarkets.length === 0) return;
     if (selectedMarketId && displayedMarkets.some((market) => market.id === selectedMarketId)) {
       return;
@@ -4110,7 +4019,7 @@ var MarketDetailsList = ({
     }
     tradingContext == null ? void 0 : tradingContext.selectMarket(fallbackSelectableMarket.id, fallbackSelectableMarket);
   }, [displayedMarkets, expandedMarketId, selectedMarketId, sourceMarkets, tradingContext]);
-  useEffect5(() => {
+  useEffect4(() => {
     var _a2, _b2;
     if (!expandedMarketId) return;
     if (displayedMarkets.some((market) => market.id === expandedMarketId)) return;
@@ -4223,11 +4132,11 @@ MarketDetailsList.displayName = "MarketDetailsList";
 // src/events/list/index.tsx
 import { MarketStatus as MarketStatus2, useAppConfig as useAppConfig2, useLabels as useLabels8, useVenueEvents } from "@agg-build/hooks";
 import { VENUES } from "@agg-build/sdk";
-import { useEffect as useEffect7, useMemo as useMemo7, useRef as useRef8, useState as useState7 } from "react";
+import { useEffect as useEffect6, useMemo as useMemo8, useRef as useRef7, useState as useState6 } from "react";
 
 // src/events/list/event-list-tabs.tsx
 import { useAppConfig, useLabels as useLabels7 } from "@agg-build/hooks";
-import { useCallback as useCallback4, useEffect as useEffect6, useMemo as useMemo6, useRef as useRef7, useState as useState6 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect5, useMemo as useMemo7, useRef as useRef6, useState as useState5 } from "react";
 import { jsx as jsx10 } from "react/jsx-runtime";
 var renderTabIcon = (tab, isActive) => {
   if (tab.venueLogo) {
@@ -4246,7 +4155,7 @@ var renderTabIcon = (tab, isActive) => {
 var useEventListTabs = (tabs) => {
   const labels = useLabels7();
   const { disabledVenues } = useAppConfig();
-  return useMemo6(() => {
+  return useMemo7(() => {
     const baseTabs = tabs != null ? tabs : getDefaultEventListTabs(labels);
     if (disabledVenues.length === 0) return baseTabs;
     const disabled = new Set(disabledVenues);
@@ -4265,12 +4174,12 @@ var EventListTabs = ({
   overflowBehavior
 }) => {
   const resolvedTabs = useEventListTabs(tabs);
-  useEffect6(() => {
+  useEffect5(() => {
     if (resolvedTabs.length === 0) return;
     if (resolvedTabs.some((tab) => tab.value === activeTab)) return;
     onTabChange(resolvedTabs[0].value);
   }, [activeTab, onTabChange, resolvedTabs]);
-  const items = useMemo6(() => {
+  const items = useMemo7(() => {
     return resolvedTabs.map((tab) => {
       const isActive = tab.value === activeTab;
       return {
@@ -4296,11 +4205,11 @@ var EventListTabs = ({
 };
 EventListTabs.displayName = "EventListTabs";
 var useEventListTabsHeaderOverflow = (recomputeOn) => {
-  const headerRef = useRef7(null);
-  const titleRef = useRef7(null);
-  const requiredTabsWidthRef = useRef7(0);
-  const [shouldUseSelectOverflow, setShouldUseSelectOverflow] = useState6(false);
-  const updateTabsOverflowBehavior = useCallback4(() => {
+  const headerRef = useRef6(null);
+  const titleRef = useRef6(null);
+  const requiredTabsWidthRef = useRef6(0);
+  const [shouldUseSelectOverflow, setShouldUseSelectOverflow] = useState5(false);
+  const updateTabsOverflowBehavior = useCallback3(() => {
     if (typeof window === "undefined") return;
     const headerElement = headerRef.current;
     const titleElement = titleRef.current;
@@ -4326,10 +4235,10 @@ var useEventListTabsHeaderOverflow = (recomputeOn) => {
     if (requiredTabsWidthRef.current <= 0) return;
     setShouldUseSelectOverflow(requiredTabsWidthRef.current > availableTabsWidth);
   }, []);
-  useEffect6(() => {
+  useEffect5(() => {
     updateTabsOverflowBehavior();
   }, [recomputeOn, updateTabsOverflowBehavior]);
-  useEffect6(() => {
+  useEffect5(() => {
     if (typeof window === "undefined") return;
     const handleResize = () => {
       updateTabsOverflowBehavior();
@@ -4339,7 +4248,7 @@ var useEventListTabsHeaderOverflow = (recomputeOn) => {
       window.removeEventListener("resize", handleResize);
     };
   }, [updateTabsOverflowBehavior]);
-  useEffect6(() => {
+  useEffect5(() => {
     if (typeof ResizeObserver === "undefined") return;
     const headerElement = headerRef.current;
     const titleElement = titleRef.current;
@@ -4376,32 +4285,32 @@ var EventList = ({
   const labels = useLabels8();
   const { disabledVenues } = useAppConfig2();
   const resolvedTabs = useEventListTabs();
-  const visibleVenues = useMemo7(
+  const visibleVenues = useMemo8(
     () => disabledVenues.length === 0 ? void 0 : VENUES.filter(
       (v) => !disabledVenues.includes(v)
     ),
     [disabledVenues]
   );
-  const [activeTabValue, setActiveTabValue] = useState7(
+  const [activeTabValue, setActiveTabValue] = useState6(
     (_b = initialVenueTab != null ? initialVenueTab : (_a = resolvedTabs[0]) == null ? void 0 : _a.value) != null ? _b : "matched"
   );
   const { headerRef, titleRef, shouldUseSelectOverflow } = useEventListTabsHeaderOverflow(resolvedTabs);
-  const activeTab = useMemo7(() => {
+  const activeTab = useMemo8(() => {
     return resolvedTabs.find((tab) => tab.value === activeTabValue);
   }, [activeTabValue, resolvedTabs]);
-  const venues = useMemo7(() => {
+  const venues = useMemo8(() => {
     return resolveTabVenus(activeTab, visibleVenues);
   }, [activeTab, visibleVenues]);
-  const matchStatus = useMemo7(() => {
+  const matchStatus = useMemo8(() => {
     return activeTabValue === "matched" ? activeTab == null ? void 0 : activeTab.matchStatus : void 0;
   }, [activeTabValue, activeTab]);
-  const resolvedMaxVisibleItems = useMemo7(() => {
+  const resolvedMaxVisibleItems = useMemo8(() => {
     if (!Number.isFinite(maxVisibleItems)) return void 0;
     return Math.max(1, Math.floor(maxVisibleItems));
   }, [maxVisibleItems]);
   const requestLimit = resolvedMaxVisibleItems != null ? resolvedMaxVisibleItems : limit;
   const shouldPaginate = resolvedMaxVisibleItems == null;
-  const endDateFrom = useMemo7(() => {
+  const endDateFrom = useMemo8(() => {
     if (search) return void 0;
     const BUCKET_MINUTES = 5;
     const bucket = /* @__PURE__ */ new Date();
@@ -4434,21 +4343,21 @@ var EventList = ({
   } : {}), {
     initialPages: initialLoadedPageCount
   }));
-  useEffect7(() => {
+  useEffect6(() => {
     if (stateRef) {
       stateRef.current = { venueTab: activeTabValue, loadedPageCount };
     }
   }, [stateRef, activeTabValue, loadedPageCount]);
-  const filteredEvents = useMemo7(() => {
+  const filteredEvents = useMemo8(() => {
     return filterEventsByTabValue(events, activeTabValue);
   }, [events, activeTabValue]);
-  const groupedEvents = useMemo7(() => {
+  const groupedEvents = useMemo8(() => {
     return splitEventsByLifecycle(filteredEvents);
   }, [filteredEvents]);
-  const orderedEvents = useMemo7(() => {
+  const orderedEvents = useMemo8(() => {
     return groupedEvents.open;
   }, [groupedEvents.open]);
-  const tileEvents = useMemo7(() => {
+  const tileEvents = useMemo8(() => {
     const normalizedEvents = orderedEvents.map((event) => mapEventToEventListItemEvent(event)).filter((event) => event != null);
     if (resolvedMaxVisibleItems == null) return normalizedEvents;
     return normalizedEvents.slice(0, resolvedMaxVisibleItems);
@@ -4456,8 +4365,8 @@ var EventList = ({
   const shouldRenderLoadingState = isLoading && !isPlaceholderData && tileEvents.length === 0;
   const shouldRenderEmptyState = !isLoading && !isError && tileEvents.length === 0;
   const shouldRenderPaginationLoadingItems = shouldPaginate && hasNextPage;
-  const loadMoreRef = useRef8(null);
-  useEffect7(() => {
+  const loadMoreRef = useRef7(null);
+  useEffect6(() => {
     if (!shouldPaginate) return;
     if (!hasNextPage) return;
     if (typeof IntersectionObserver === "undefined") return;