@agg-build/ui 2.0.0 → 2.1.0

package/dist/events.js

@@ -82,7 +82,7 @@ module.exports = __toCommonJS(events_exports);
 
 // src/events/item/index.tsx
 var import_hooks31 = require("@agg-build/hooks");
-var import_react9 = require("react");
+var import_react10 = require("react");
 
 // src/constants.ts
 var AGG_ROOT_CLASS_NAME = "agg-root";
@@ -6386,7 +6386,37 @@ StateMessage.displayName = "StateMessage";
 
 // src/primitives/tabs/index.tsx
 var import_hooks29 = require("@agg-build/hooks");
+var import_react8 = require("react");
+
+// src/shared/use-horizontal-scroll-state.ts
 var import_react7 = require("react");
+var useHorizontalScrollState = () => {
+  const containerRef = (0, import_react7.useRef)(null);
+  const [canScrollLeft, setCanScrollLeft] = (0, import_react7.useState)(false);
+  const [canScrollRight, setCanScrollRight] = (0, import_react7.useState)(false);
+  const update = (0, import_react7.useCallback)(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const maxScroll = el.scrollWidth - el.clientWidth;
+    setCanScrollLeft(el.scrollLeft > 4);
+    setCanScrollRight(maxScroll - el.scrollLeft > 4);
+  }, []);
+  (0, import_react7.useEffect)(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    el.addEventListener("scroll", update, { passive: true });
+    return () => el.removeEventListener("scroll", update);
+  }, [update]);
+  (0, import_react7.useEffect)(() => {
+    if (typeof ResizeObserver === "undefined") return;
+    const el = containerRef.current;
+    if (!el) return;
+    const ro = new ResizeObserver(() => update());
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [update]);
+  return { containerRef, canScrollLeft, canScrollRight, update };
+};
 
 // src/primitives/tabs/tabs.constants.ts
 var MOBILE_TABS_MEDIA_QUERY = "(max-width: 736px)";
@@ -6460,8 +6490,8 @@ var Tabs = ({
   const {
     features: { enableAnimations }
   } = (0, import_hooks29.useSdkUiConfig)();
-  const buttonRefs = (0, import_react7.useRef)([]);
-  const dragStateRef = (0, import_react7.useRef)({
+  const buttonRefs = (0, import_react8.useRef)([]);
+  const dragStateRef = (0, import_react8.useRef)({
     isPointerDown: false,
     isDragging: false,
     pointerId: null,
@@ -6469,29 +6499,30 @@ var Tabs = ({
     startClientY: 0,
     startScrollLeft: 0
   });
-  const suppressClickRef = (0, import_react7.useRef)(false);
+  const suppressClickRef = (0, import_react8.useRef)(false);
   const resolvedAriaLabel = ariaLabel != null ? ariaLabel : labels.common.tabsAria;
-  const [isMobileViewport, setIsMobileViewport] = (0, import_react7.useState)(false);
-  const [isDraggingTabs, setIsDraggingTabs] = (0, import_react7.useState)(false);
-  const [activeUnderlineStyle, setActiveUnderlineStyle] = (0, import_react7.useState)({
+  const [isMobileViewport, setIsMobileViewport] = (0, import_react8.useState)(false);
+  const [isDraggingTabs, setIsDraggingTabs] = (0, import_react8.useState)(false);
+  const [activeUnderlineStyle, setActiveUnderlineStyle] = (0, import_react8.useState)({
     transform: "translateX(0px)",
     width: 0,
     opacity: 0
   });
-  const [scrollAffordanceState, setScrollAffordanceState] = (0, import_react7.useState)({
-    showStart: false,
-    showEnd: false
-  });
-  const tabListRef = (0, import_react7.useRef)(null);
+  const {
+    containerRef: tabListRef,
+    canScrollLeft,
+    canScrollRight,
+    update: updateScrollState
+  } = useHorizontalScrollState();
   const isBarVariant = variant === "bar";
-  const resolvedOverflowBehavior = (0, import_react7.useMemo)(() => {
+  const resolvedOverflowBehavior = (0, import_react8.useMemo)(() => {
     if (overflowBehavior) return overflowBehavior;
     if (!isBarVariant) return "scroll";
     return isMobileViewport ? "select" : "scroll";
   }, [isBarVariant, isMobileViewport, overflowBehavior]);
   const shouldUseOverflowScroll = resolvedOverflowBehavior === "scroll";
   const shouldUseOverflowSelect = resolvedOverflowBehavior === "select";
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (typeof window === "undefined") return;
     const mediaQueryList = window.matchMedia(MOBILE_TABS_MEDIA_QUERY);
     const handleMediaQueryChange = (event) => {
@@ -6509,28 +6540,12 @@ var Tabs = ({
       mediaQueryList.removeListener(handleMediaQueryChange);
     };
   }, []);
-  const updateScrollAffordances = (0, import_react7.useCallback)(() => {
-    if (!shouldUseOverflowScroll) {
-      setScrollAffordanceState({
-        showStart: false,
-        showEnd: false
-      });
-      return;
-    }
-    const tabListElement = tabListRef.current;
-    if (!tabListElement) return;
-    const maxScrollLeft = tabListElement.scrollWidth - tabListElement.clientWidth;
-    setScrollAffordanceState({
-      showStart: tabListElement.scrollLeft > 4,
-      showEnd: maxScrollLeft - tabListElement.scrollLeft > 4
-    });
-  }, [shouldUseOverflowScroll]);
-  const renderedItems = (0, import_react7.useMemo)(() => {
+  const renderedItems = (0, import_react8.useMemo)(() => {
     return items.map((item) => __spreadProps(__spreadValues({}, item), {
       disabled: item.disabled || item.isComingSoon
     }));
   }, [items]);
-  const selectItems = (0, import_react7.useMemo)(() => {
+  const selectItems = (0, import_react8.useMemo)(() => {
     return renderedItems.map((item) => ({
       value: item.value,
       label: item.isComingSoon ? `${item.label} (soon)` : item.label,
@@ -6663,7 +6678,7 @@ var Tabs = ({
     event == null ? void 0 : event.stopPropagation();
     suppressClickRef.current = false;
   };
-  const updateActiveUnderline = (0, import_react7.useCallback)(() => {
+  const updateActiveUnderline = (0, import_react8.useCallback)(() => {
     if (isBarVariant) {
       setActiveUnderlineStyle({
         transform: "translateX(0px)",
@@ -6686,42 +6701,39 @@ var Tabs = ({
       opacity: 1
     });
   }, [isBarVariant, renderedItems, value]);
-  (0, import_react7.useLayoutEffect)(() => {
+  (0, import_react8.useLayoutEffect)(() => {
     updateActiveUnderline();
   }, [updateActiveUnderline]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (isBarVariant || !shouldUseOverflowScroll) return;
     const tabListElement = tabListRef.current;
     if (!tabListElement) return;
     const handleScroll = () => {
       updateActiveUnderline();
-      updateScrollAffordances();
     };
     tabListElement.addEventListener("scroll", handleScroll, { passive: true });
-    updateScrollAffordances();
     return () => {
       tabListElement.removeEventListener("scroll", handleScroll);
     };
-  }, [isBarVariant, shouldUseOverflowScroll, updateActiveUnderline, updateScrollAffordances]);
-  (0, import_react7.useEffect)(() => {
+  }, [isBarVariant, shouldUseOverflowScroll, tabListRef, updateActiveUnderline]);
+  (0, import_react8.useEffect)(() => {
     if (!shouldUseOverflowScroll) return;
-    updateScrollAffordances();
-  }, [renderedItems, shouldUseOverflowScroll, updateScrollAffordances, value]);
-  (0, import_react7.useEffect)(() => {
-    if (isBarVariant && !shouldUseOverflowScroll) return;
+    updateScrollState();
+  }, [renderedItems, shouldUseOverflowScroll, updateScrollState, value]);
+  (0, import_react8.useEffect)(() => {
+    if (isBarVariant || !shouldUseOverflowScroll) return;
     if (typeof ResizeObserver === "undefined") return;
     const tabListElement = tabListRef.current;
     if (!tabListElement) return;
     const resizeObserver = new ResizeObserver(() => {
       updateActiveUnderline();
-      updateScrollAffordances();
     });
     resizeObserver.observe(tabListElement);
     return () => {
       resizeObserver.disconnect();
     };
-  }, [isBarVariant, shouldUseOverflowScroll, updateActiveUnderline, updateScrollAffordances]);
-  (0, import_react7.useEffect)(() => {
+  }, [isBarVariant, shouldUseOverflowScroll, tabListRef, updateActiveUnderline]);
+  (0, import_react8.useEffect)(() => {
     if (!shouldUseOverflowScroll) return;
     const tabListElement = tabListRef.current;
     if (!tabListElement) return;
@@ -6868,7 +6880,7 @@ var Tabs = ({
                 "agg-tab-scroll-start",
                 "pointer-events-none absolute top-0 bottom-0 left-0 z-10 w-12 md:w-18 bg-linear-to-r from-agg-secondary via-agg-secondary to-transparent",
                 getMotionClassName(enableAnimations, "transition-opacity duration-200"),
-                scrollAffordanceState.showStart ? "opacity-100" : "opacity-0"
+                canScrollLeft ? "opacity-100" : "opacity-0"
               )
             }
           ),
@@ -6880,24 +6892,63 @@ var Tabs = ({
                 "agg-tab-scroll-end",
                 "pointer-events-none absolute top-0 right-0 bottom-0 z-10 w-12 md:w-18 bg-linear-to-l from-agg-secondary via-agg-secondary to-transparent",
                 getMotionClassName(enableAnimations, "transition-opacity duration-200"),
-                scrollAffordanceState.showEnd ? "opacity-100" : "opacity-0"
+                canScrollRight ? "opacity-100" : "opacity-0"
               )
             }
           )
         ] }) : null,
-        shouldUseOverflowScroll && isBarVariant ? /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
-          "span",
-          {
-            "aria-hidden": true,
-            className: cn(
-              "agg-tab-scroll-end",
-              "pointer-events-none absolute top-0 right-0 bottom-0 z-10 w-[120px] overflow-hidden rounded-r-[8px] bg-linear-to-l from-agg-secondary from-[20%] via-agg-secondary/85 to-transparent",
-              getMotionClassName(enableAnimations, "transition-opacity duration-200"),
-              scrollAffordanceState.showEnd ? "opacity-100" : "opacity-0"
-            ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("span", { className: "absolute inset-y-0 right-3 inline-flex items-center text-agg-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(Icon, { name: "chevron-right", size: "small", color: "currentColor" }) })
-          }
-        ) : null
+        shouldUseOverflowScroll && isBarVariant ? /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)(import_jsx_runtime116.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
+            "button",
+            {
+              type: "button",
+              "aria-label": labels.common.scrollTabsLeft,
+              tabIndex: -1,
+              className: cn(
+                "agg-tab-scroll-start",
+                "absolute top-0 bottom-0 left-0 z-10 w-20 rounded-l-agg-lg",
+                "inline-flex items-center justify-start pl-2",
+                "bg-linear-to-r from-agg-secondary from-[25%] via-agg-secondary/80 to-transparent",
+                "cursor-pointer",
+                getMotionClassName(enableAnimations, "transition-opacity duration-200"),
+                canScrollLeft ? "opacity-100" : "opacity-0 pointer-events-none"
+              ),
+              onClick: () => {
+                var _a;
+                (_a = tabListRef.current) == null ? void 0 : _a.scrollBy({
+                  left: -200,
+                  behavior: getScrollBehavior(enableAnimations)
+                });
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(Icon, { name: "chevron-left", size: "small", color: "currentColor" })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
+            "button",
+            {
+              type: "button",
+              "aria-label": labels.common.scrollTabsRight,
+              tabIndex: -1,
+              className: cn(
+                "agg-tab-scroll-end",
+                "absolute top-0 right-0 bottom-0 z-10 w-20 rounded-r-agg-lg",
+                "inline-flex items-center justify-end pr-2",
+                "bg-linear-to-l from-agg-secondary from-[25%] via-agg-secondary/80 to-transparent",
+                "cursor-pointer",
+                getMotionClassName(enableAnimations, "transition-opacity duration-200"),
+                canScrollRight ? "opacity-100" : "opacity-0 pointer-events-none"
+              ),
+              onClick: () => {
+                var _a;
+                (_a = tabListRef.current) == null ? void 0 : _a.scrollBy({
+                  left: 200,
+                  behavior: getScrollBehavior(enableAnimations)
+                });
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(Icon, { name: "chevron-right", size: "small", color: "currentColor" })
+            }
+          )
+        ] }) : null
       ]
     }
   );
@@ -6907,7 +6958,7 @@ Tabs.displayName = "Tabs";
 // src/primitives/tooltip/index.tsx
 var import_hooks30 = require("@agg-build/hooks");
 var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"));
-var import_react8 = require("react");
+var import_react9 = require("react");
 
 // src/primitives/tooltip/tooltip.constants.ts
 var tooltipSizeClasses = {
@@ -6955,7 +7006,7 @@ var Tooltip = ({
     general: { rootClassName },
     features: { enableAnimations }
   } = (0, import_hooks30.useSdkUiConfig)();
-  const trigger = (0, import_react8.useMemo)(() => {
+  const trigger = (0, import_react9.useMemo)(() => {
     if (children) return children;
     return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
       "button",
@@ -7292,17 +7343,17 @@ var EventListItemContent = ({
   var _a;
   const config = (0, import_hooks31.useSdkUiConfig)();
   const labels = (0, import_hooks31.useLabels)();
-  const allVenueMarkets = (0, import_react9.useMemo)(() => event.venueMarkets, [event.venueMarkets]);
+  const allVenueMarkets = (0, import_react10.useMemo)(() => event.venueMarkets, [event.venueMarkets]);
   const resolvedTitle = event.title;
   const resolvedImage = event.image;
-  const visibleVenueLogos = (0, import_react9.useMemo)(() => {
+  const visibleVenueLogos = (0, import_react10.useMemo)(() => {
     var _a2;
     return (0, import_hooks31.sortVenues)(Array.from(new Set(((_a2 = event.venues) != null ? _a2 : []).map((venue) => venue))));
   }, [event.venues]);
   const resolvedMarketCount = typeof event.marketCount === "number" && Number.isFinite(event.marketCount) ? Math.max(0, Math.floor(event.marketCount)) : allVenueMarkets.length;
   const resolvedVenueCount = typeof event.venueCount === "number" && Number.isFinite(event.venueCount) ? Math.max(0, Math.floor(event.venueCount)) : visibleVenueLogos.length;
-  const [isLazyMarketsQueryEnabled, setIsLazyMarketsQueryEnabled] = (0, import_react9.useState)(false);
-  const shouldEnableLazyMarketLoading = (0, import_react9.useMemo)(() => {
+  const [isLazyMarketsQueryEnabled, setIsLazyMarketsQueryEnabled] = (0, import_react10.useState)(false);
+  const shouldEnableLazyMarketLoading = (0, import_react10.useMemo)(() => {
     if (!event.id) return false;
     const hasExplicitMarketCount = typeof event.marketCount === "number" && Number.isFinite(event.marketCount);
     if (hasExplicitMarketCount) {
@@ -7323,11 +7374,11 @@ var EventListItemContent = ({
     sortDir: "desc",
     status: marketStatus
   });
-  const resolvedOutcomeMarkets = (0, import_react9.useMemo)(() => {
+  const resolvedOutcomeMarkets = (0, import_react10.useMemo)(() => {
     if (!isLazyMarketsQueryEnabled || lazyLoadedMarkets.length === 0) return allVenueMarkets;
     return dedupeVenueMarketsById([...allVenueMarkets, ...lazyLoadedMarkets]);
   }, [allVenueMarkets, isLazyMarketsQueryEnabled, lazyLoadedMarkets]);
-  const midpointVenueMarketIds = (0, import_react9.useMemo)(() => {
+  const midpointVenueMarketIds = (0, import_react10.useMemo)(() => {
     var _a2;
     const ids = [];
     for (const market of resolvedOutcomeMarkets) {
@@ -7344,27 +7395,27 @@ var EventListItemContent = ({
   });
   const { prices: displayMidpointsByOutcomeId, isLoading: isOutcomeMidpointsLoading } = (0, import_hooks31.useMidpoints)(resolvedOutcomeMarkets);
   const isAwaitingMidpoints = isOutcomeMidpointsLoading || midpointVenueMarketIds.length > 0 && isVenueMarketMidpointsLoading;
-  const displayPriceByOutcomeId = (0, import_react9.useMemo)(() => {
+  const displayPriceByOutcomeId = (0, import_react10.useMemo)(() => {
     const priceByOutcomeId = new Map(displayMidpointsByOutcomeId);
     for (const [outcomeId, price] of buildOutcomeMidpointsByOutcomeId(midpointRows)) {
       priceByOutcomeId.set(outcomeId, price);
     }
     return priceByOutcomeId;
   }, [displayMidpointsByOutcomeId, midpointRows]);
-  const comparison = (0, import_react9.useMemo)(() => {
+  const comparison = (0, import_react10.useMemo)(() => {
     return normalizeEventListItemV2Comparison({
       venueMarkets: resolvedOutcomeMarkets,
       marketCount: resolvedMarketCount,
       priceByOutcomeId: displayPriceByOutcomeId
     });
   }, [displayPriceByOutcomeId, resolvedMarketCount, resolvedOutcomeMarkets]);
-  const gapsByVenueMarketId = (0, import_react9.useMemo)(() => {
+  const gapsByVenueMarketId = (0, import_react10.useMemo)(() => {
     return computePriceGapsFromComparisonRows(comparison.rows);
   }, [comparison.rows]);
   const shouldRenderLoadingOutcomeRow = shouldEnableLazyMarketLoading && (!isLazyMarketsQueryEnabled || isLoadingLazyMarkets || isFetchingNextLazyMarketsPage || hasNextLazyMarketsPage);
   const resolvedVolume = (_a = resolveDisplayVolume(event.volume, allVenueMarkets)) != null ? _a : 0;
   const volumeLabel = `${config.formatting.formatCompactCurrency(resolvedVolume)} ${labels.eventItem.volumeSuffix}`;
-  const orderedFooterVenues = (0, import_react9.useMemo)(() => {
+  const orderedFooterVenues = (0, import_react10.useMemo)(() => {
     const venues = visibleVenueLogos.length > 0 ? visibleVenueLogos : comparison.matchedVenues.length > 0 ? comparison.matchedVenues : event.venue ? [event.venue] : [];
     return Array.from(new Set(venues));
   }, [comparison.matchedVenues, event.venue, visibleVenueLogos]);
@@ -7425,7 +7476,7 @@ var EventListItemContent = ({
       onEventClick == null ? void 0 : onEventClick(event);
     }
   };
-  const handleOutcomesScroll = (0, import_react9.useCallback)(
+  const handleOutcomesScroll = (0, import_react10.useCallback)(
     (eventToHandle) => {
       if (!shouldEnableLazyMarketLoading) return;
       const element = eventToHandle.currentTarget;
@@ -7753,7 +7804,7 @@ var EventListItemByEventId = (_a) => {
     eventId: eventId != null ? eventId : "",
     enabled: !!eventId
   });
-  const resolvedEvent = (0, import_react9.useMemo)(() => {
+  const resolvedEvent = (0, import_react10.useMemo)(() => {
     return resolveEventListItemEvent(fetchedEvent);
   }, [fetchedEvent]);
   if (!eventId) {
@@ -7791,11 +7842,11 @@ EventListItemV2.displayName = "EventListItemV2";
 
 // src/events/item-details/index.tsx
 var import_hooks40 = require("@agg-build/hooks");
-var import_react15 = require("react");
+var import_react16 = require("react");
 
 // src/primitives/chart/chart-type-switch.tsx
 var import_hooks32 = require("@agg-build/hooks");
-var import_react10 = require("react");
+var import_react11 = require("react");
 
 // src/primitives/chart/chart-type-switch.constants.ts
 var CHART_TYPE_SWITCH_OPTION_KEYS = ["line", "candlestick"];
@@ -7827,7 +7878,7 @@ var ChartTypeSwitch = ({
   className
 }) => {
   const labels = (0, import_hooks32.useLabels)();
-  const options = (0, import_react10.useMemo)(
+  const options = (0, import_react11.useMemo)(
     () => CHART_TYPE_SWITCH_OPTION_KEYS.map((chartType) => ({
       value: chartType,
       iconName: resolveChartTypeOptionIconName(chartType),
@@ -9044,7 +9095,7 @@ var getDisplayOutcomePrice = ({
 
 // src/events/item-details/event-list-item-details-market-selector.tsx
 var import_hooks36 = require("@agg-build/hooks");
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_jsx_runtime120 = require("react/jsx-runtime");
 var MARKET_PILL_MAX_ROWS = 2;
 var MARKET_PILL_FALLBACK_CONTAINER_WIDTH = 640;
@@ -9141,38 +9192,38 @@ var EventListItemDetailsMarketSelector = ({
 }) => {
   var _a;
   const labels = (0, import_hooks36.useLabels)();
-  const containerRef = (0, import_react11.useRef)(null);
-  const measurementContainerRef = (0, import_react11.useRef)(null);
-  const moreButtonRef = (0, import_react11.useRef)(null);
-  const dropdownInputRef = (0, import_react11.useRef)(null);
-  const moreButtonMeasureRef = (0, import_react11.useRef)(null);
-  const optionMeasureRefs = (0, import_react11.useRef)({});
-  const [layout, setLayout] = (0, import_react11.useState)(() => ({
+  const containerRef = (0, import_react12.useRef)(null);
+  const measurementContainerRef = (0, import_react12.useRef)(null);
+  const moreButtonRef = (0, import_react12.useRef)(null);
+  const dropdownInputRef = (0, import_react12.useRef)(null);
+  const moreButtonMeasureRef = (0, import_react12.useRef)(null);
+  const optionMeasureRefs = (0, import_react12.useRef)({});
+  const [layout, setLayout] = (0, import_react12.useState)(() => ({
     visibleItems: options,
     hiddenItems: []
   }));
-  const [isDropdownOpen, setIsDropdownOpen] = (0, import_react11.useState)(false);
-  const [isMobileViewport, setIsMobileViewport] = (0, import_react11.useState)(false);
-  const [searchValue, setSearchValue] = (0, import_react11.useState)("");
-  const [dropdownPosition, setDropdownPosition] = (0, import_react11.useState)({
+  const [isDropdownOpen, setIsDropdownOpen] = (0, import_react12.useState)(false);
+  const [isMobileViewport, setIsMobileViewport] = (0, import_react12.useState)(false);
+  const [searchValue, setSearchValue] = (0, import_react12.useState)("");
+  const [dropdownPosition, setDropdownPosition] = (0, import_react12.useState)({
     left: 0,
     top: 0,
     width: 0
   });
-  const selectedHiddenOption = (0, import_react11.useMemo)(() => {
+  const selectedHiddenOption = (0, import_react12.useMemo)(() => {
     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 = (0, import_react11.useMemo)(() => {
+  const filteredOptions = (0, import_react12.useMemo)(() => {
     const normalizedSearchValue = searchValue.trim().toLowerCase();
     if (!normalizedSearchValue) return options;
     return options.filter((option) => option.label.toLowerCase().includes(normalizedSearchValue));
   }, [options, searchValue]);
-  const lastMeasuredKeyRef = (0, import_react11.useRef)(null);
-  const measureFrameRef = (0, import_react11.useRef)(null);
-  (0, import_react11.useLayoutEffect)(() => {
+  const lastMeasuredKeyRef = (0, import_react12.useRef)(null);
+  const measureFrameRef = (0, import_react12.useRef)(null);
+  (0, import_react12.useLayoutEffect)(() => {
     const measureLayout = () => {
       var _a2, _b, _c, _d, _e;
       const measurementContainer = measurementContainerRef.current;
@@ -9253,7 +9304,7 @@ var EventListItemDetailsMarketSelector = ({
       }
     };
   }, [moreButtonLabel, options]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
     const mediaQueryList = window.matchMedia(MOBILE_TABS_MEDIA_QUERY);
     const handleMediaQueryChange = (event) => {
@@ -9271,7 +9322,7 @@ var EventListItemDetailsMarketSelector = ({
       mediaQueryList.removeListener(handleMediaQueryChange);
     };
   }, []);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (!isDropdownOpen) {
       setSearchValue("");
       return;
@@ -9284,7 +9335,7 @@ var EventListItemDetailsMarketSelector = ({
       window.cancelAnimationFrame(animationFrameId);
     };
   }, [isDropdownOpen]);
-  (0, import_react11.useLayoutEffect)(() => {
+  (0, import_react12.useLayoutEffect)(() => {
     if (!isDropdownOpen || isMobileViewport) return;
     const updateDropdownPosition = () => {
       const containerElement = containerRef.current;
@@ -9320,7 +9371,7 @@ var EventListItemDetailsMarketSelector = ({
       resizeObserver.disconnect();
     };
   }, [isDropdownOpen, isMobileViewport, moreButtonLabel]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (!isDropdownOpen) return;
     const handlePointerDown = (event) => {
       var _a2;
@@ -9567,11 +9618,11 @@ var EventListItemDetailsMarketSelector = ({
 
 // src/events/item-details/settlement-summary.tsx
 var import_hooks39 = require("@agg-build/hooks");
-var import_react14 = require("react");
+var import_react15 = require("react");
 
 // src/trading/settlement/index.tsx
 var import_hooks38 = require("@agg-build/hooks");
-var import_react13 = require("react");
+var import_react14 = require("react");
 
 // src/trading/utils.ts
 var import_hooks37 = require("@agg-build/hooks");
@@ -9581,7 +9632,7 @@ var defaultSettlementSectionLabel = defaultLabels.trading.settlementSection;
 var defaultTradingDisclaimer = defaultLabels.trading.disclaimer;
 
 // src/trading/settlement/settlement-text-renderer.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 
 // src/trading/settlement/settlement-text.utils.ts
 var stripHtmlFragments = (text) => {
@@ -9673,7 +9724,7 @@ var renderInlineSegment = (text, baseKey) => {
     }
     if (match.index > lastIndex) {
       nodes.push(
-        /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(import_react12.Fragment, { children: text.slice(lastIndex, match.index) }, `${baseKey}-text-${segmentIndex++}`)
+        /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(import_react13.Fragment, { children: text.slice(lastIndex, match.index) }, `${baseKey}-text-${segmentIndex++}`)
       );
     }
     if (isLinkMatch(match)) {
@@ -9731,7 +9782,7 @@ var renderInlineSegment = (text, baseKey) => {
   }
   if (lastIndex < text.length) {
     nodes.push(
-      /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(import_react12.Fragment, { children: text.slice(lastIndex) }, `${baseKey}-text-${segmentIndex++}`)
+      /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(import_react13.Fragment, { children: text.slice(lastIndex) }, `${baseKey}-text-${segmentIndex++}`)
     );
   }
   return nodes;
@@ -9758,7 +9809,7 @@ var renderBlock = (block, blockIndex) => {
     "p",
     {
       className: "agg-settlement-text-paragraph text-agg-sm leading-agg-5 text-agg-foreground break-words [overflow-wrap:anywhere]",
-      children: block.lines.map((line, lineIndex) => /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)(import_react12.Fragment, { children: [
+      children: block.lines.map((line, lineIndex) => /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)(import_react13.Fragment, { children: [
         lineIndex > 0 ? /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("br", {}) : null,
         renderInlineSegment(line, `block-${blockIndex}-line-${lineIndex}`)
       ] }, `block-${blockIndex}-line-${lineIndex}`))
@@ -9794,7 +9845,7 @@ var Settlement = ({
 }) => {
   var _a, _b, _c;
   const labels = (0, import_hooks38.useLabels)();
-  const blocks = (0, import_react13.useMemo)(
+  const blocks = (0, import_react14.useMemo)(
     () => dedupeSettlementSources({
       eventDescription,
       marketDescription,
@@ -9869,7 +9920,7 @@ var SettlementSummary = ({
   className
 }) => {
   const labels = (0, import_hooks39.useLabels)();
-  const firstParagraph = (0, import_react14.useMemo)(() => getFirstSettlementParagraph(content), [content]);
+  const firstParagraph = (0, import_react15.useMemo)(() => getFirstSettlementParagraph(content), [content]);
   if (!firstParagraph) return null;
   const handleReadFullDetails = (event) => {
     event.preventDefault();
@@ -10025,11 +10076,11 @@ var EventListItemDetailsGraphSection = ({
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
   const labels = (0, import_hooks40.useLabels)();
   const tradingContext = (0, import_hooks33.useEventTradingContext)();
-  const [selectedGraphVenue, setSelectedGraphVenue] = (0, import_react15.useState)(null);
-  const [chartOutcomeLabel, setChartOutcomeLabel] = (0, import_react15.useState)(
+  const [selectedGraphVenue, setSelectedGraphVenue] = (0, import_react16.useState)(null);
+  const [chartOutcomeLabel, setChartOutcomeLabel] = (0, import_react16.useState)(
     (_c = (_b = (_a = tradingContext == null ? void 0 : tradingContext.selectedOutcome) == null ? void 0 : _a.label) == null ? void 0 : _b.trim()) != null ? _c : null
   );
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     var _a2, _b2, _c2;
     if (chartOutcomeLabel != null) return;
     const label2 = (_c2 = (_b2 = (_a2 = tradingContext == null ? void 0 : tradingContext.selectedOutcome) == null ? void 0 : _a2.label) == null ? void 0 : _b2.trim()) != null ? _c2 : null;
@@ -10045,13 +10096,13 @@ var EventListItemDetailsGraphSection = ({
   const isDarkTheme = theme === "dark";
   const effectiveChartTimeRange = rangeOverride != null ? rangeOverride : selectedChartTimeRange;
   const rollingWindow = (0, import_hooks40.useRollingChartWindow)({ range: effectiveChartTimeRange });
-  const availableMarkets = (0, import_react15.useMemo)(() => {
+  const availableMarkets = (0, import_react16.useMemo)(() => {
     var _a2, _b2, _c2, _d2;
     if (venueMarkets.length === 0) return [];
     const resolvedSelectedMarketId = (_d2 = (_c2 = (_a2 = tradingContext == null ? void 0 : tradingContext.selectedMarketId) != null ? _a2 : selectedMarketId) != null ? _c2 : (_b2 = venueMarkets[0]) == null ? void 0 : _b2.id) != null ? _d2 : null;
     return normalizeVenueMarketCluster(venueMarkets, resolvedSelectedMarketId);
   }, [selectedMarketId, tradingContext == null ? void 0 : tradingContext.selectedMarketId, venueMarkets]);
-  const fallbackOutcomeLabel = (0, import_react15.useMemo)(() => {
+  const fallbackOutcomeLabel = (0, import_react16.useMemo)(() => {
     var _a2, _b2, _c2, _d2, _e2;
     const fallbackMarket = (_b2 = (_a2 = tradingContext == null ? void 0 : tradingContext.selectedMarket) != null ? _a2 : availableMarkets[0]) != null ? _b2 : null;
     if (!fallbackMarket) return null;
@@ -10059,7 +10110,7 @@ var EventListItemDetailsGraphSection = ({
   }, [availableMarkets, tradingContext == null ? void 0 : tradingContext.selectedMarket]);
   const resolvedChartOutcomeLabel = (_h = (_g = chartOutcomeLabel != null ? chartOutcomeLabel : (_f = (_e = tradingContext == null ? void 0 : tradingContext.selectedOutcome) == null ? void 0 : _e.label) == null ? void 0 : _f.trim()) != null ? _g : fallbackOutcomeLabel) != null ? _h : null;
   const chartScopedOutcomeId = ((_i = tradingContext == null ? void 0 : tradingContext.selectedOutcome) == null ? void 0 : _i.id) && ((_j = tradingContext.selectedOutcome.label) == null ? void 0 : _j.trim()) === resolvedChartOutcomeLabel ? tradingContext.selectedOutcome.id : null;
-  const availableVenueOutcomes = (0, import_react15.useMemo)(() => {
+  const availableVenueOutcomes = (0, import_react16.useMemo)(() => {
     return resolveChartVenueOutcomes({
       eligibleVenueOutcomes: collectEligibleVenueOutcomes({
         venueMarkets: availableMarkets,
@@ -10088,11 +10139,11 @@ var EventListItemDetailsGraphSection = ({
     // of refetching every time the bucket boundary advances.
     rangeKey: rollingWindow.range
   });
-  const hasAutoFallenBackRangeRef = (0, import_react15.useRef)(false);
-  (0, import_react15.useEffect)(() => {
+  const hasAutoFallenBackRangeRef = (0, import_react16.useRef)(false);
+  (0, import_react16.useEffect)(() => {
     hasAutoFallenBackRangeRef.current = false;
   }, [chartPrimaryOutcomeId]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (!shouldAutoFallbackToAllRange({
       chartData: scopedMarketChartData,
       isLoading: isScopedMarketChartLoading,
@@ -10117,7 +10168,7 @@ var EventListItemDetailsGraphSection = ({
     onRangeOverrideChange,
     rollingWindow.startTs
   ]);
-  const selectedMarketOutcomes = (0, import_react15.useMemo)(() => {
+  const selectedMarketOutcomes = (0, import_react16.useMemo)(() => {
     var _a2, _b2;
     const selectedMarket = (_b2 = (_a2 = tradingContext == null ? void 0 : tradingContext.selectedMarket) != null ? _a2 : availableMarkets[0]) != null ? _b2 : null;
     if (!selectedMarket) return [];
@@ -10129,7 +10180,7 @@ var EventListItemDetailsGraphSection = ({
       });
     });
   }, [availableMarkets, tradingContext == null ? void 0 : tradingContext.selectedMarket]);
-  const resolvedVenueChartSeries = (0, import_react15.useMemo)(() => {
+  const resolvedVenueChartSeries = (0, import_react16.useMemo)(() => {
     return resolveMarketChartVenueSeries({
       chartData: scopedMarketChartData,
       transformProbability: (v) => v
@@ -10142,32 +10193,32 @@ var EventListItemDetailsGraphSection = ({
       lineStyle: "solid"
     }));
   }, [isDarkTheme, scopedMarketChartData]);
-  const chartAvailableVenueOutcomes = (0, import_react15.useMemo)(() => {
+  const chartAvailableVenueOutcomes = (0, import_react16.useMemo)(() => {
     return filterChartVenueOutcomesByRenderableVenues({
       chartData: scopedMarketChartData,
       venueOutcomes: availableVenueOutcomes
     });
   }, [availableVenueOutcomes, scopedMarketChartData]);
-  const defaultCandlestickVenue = (0, import_react15.useMemo)(() => {
+  const defaultCandlestickVenue = (0, import_react16.useMemo)(() => {
     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 = (0, import_react15.useMemo)(() => {
+  const visibleChartSeries = (0, import_react16.useMemo)(() => {
     const venueFiltered = activeGraphVenue ? resolvedVenueChartSeries.filter((seriesItem) => seriesItem.venue === activeGraphVenue) : resolvedVenueChartSeries;
     const domainStartTs = rollingWindow.startTs;
     return venueFiltered.map((seriesItem) => __spreadProps(__spreadValues({}, seriesItem), {
       points: seriesItem.points.filter((point) => point.time >= domainStartTs)
     }));
   }, [activeGraphVenue, resolvedVenueChartSeries, rollingWindow.startTs]);
-  const chartLiveState = (0, import_react15.useMemo)(() => {
+  const chartLiveState = (0, import_react16.useMemo)(() => {
     return resolveMarketChartLiveState({
       chartData: scopedMarketChartData,
       selectedVenue: activeGraphVenue,
       transformProbability: (v) => v
     });
   }, [activeGraphVenue, scopedMarketChartData]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (!selectedGraphVenue) return;
     const hasSelectedGraphVenue = chartAvailableVenueOutcomes.some(
       (item) => item.venue === selectedGraphVenue
@@ -10327,18 +10378,18 @@ var EventListItemDetailsContent = ({
   midpointsResult
 }) => {
   var _a, _b, _c, _d;
-  const [selectedChartType, setSelectedChartType] = (0, import_react15.useState)("line");
-  const lastAppliedEventSyncKeyRef = (0, import_react15.useRef)(null);
-  const lastAppliedDefaultRef = (0, import_react15.useRef)(null);
-  const [chartRangeOverride, setChartRangeOverride] = (0, import_react15.useState)(null);
-  (0, import_react15.useEffect)(() => {
+  const [selectedChartType, setSelectedChartType] = (0, import_react16.useState)("line");
+  const lastAppliedEventSyncKeyRef = (0, import_react16.useRef)(null);
+  const lastAppliedDefaultRef = (0, import_react16.useRef)(null);
+  const [chartRangeOverride, setChartRangeOverride] = (0, import_react16.useState)(null);
+  (0, import_react16.useEffect)(() => {
     setChartRangeOverride(null);
   }, [event.id]);
   const config = (0, import_hooks40.useSdkUiConfig)();
   const labels = (0, import_hooks40.useLabels)();
   const tradingContext = (0, import_hooks33.useEventTradingContext)();
-  const eventSyncKey = (0, import_react15.useMemo)(() => resolveEventDetailsSyncKey(event), [event]);
-  const resolvedEventTradingState = (0, import_react15.useMemo)(() => {
+  const eventSyncKey = (0, import_react16.useMemo)(() => resolveEventDetailsSyncKey(event), [event]);
+  const resolvedEventTradingState = (0, import_react16.useMemo)(() => {
     return eventTradingState != null ? eventTradingState : (0, import_hooks40.resolveEventTradingState)(event);
   }, [event, eventTradingState]);
   const scopedSelectedMarket = (tradingContext == null ? void 0 : tradingContext.selectedEventId) === event.id ? (_a = tradingContext.selectedMarket) != null ? _a : resolvedEventTradingState.primaryMarket : resolvedEventTradingState.primaryMarket;
@@ -10362,18 +10413,18 @@ var EventListItemDetailsContent = ({
   const restMidpoints = (_b = resolvedMidpointsResult.bestMidpointsByOutcomeId) != null ? _b : resolvedMidpointsResult.prices;
   const bestMidpoint = resolvedMidpointsResult.bestMidpoint;
   const restBestPrices = resolvedMidpointsResult.bestPrices;
-  const bestPrices = (0, import_react15.useMemo)(
+  const bestPrices = (0, import_react16.useMemo)(
     () => (0, import_hooks40.mergeBestPricesPreferringLive)(restBestPrices, wsBestPrices),
     [restBestPrices, wsBestPrices]
   );
-  const livePrices = (0, import_react15.useMemo)(() => {
+  const livePrices = (0, import_react16.useMemo)(() => {
     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]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (!tradingContext) return;
     if (lastAppliedEventSyncKeyRef.current === eventSyncKey) return;
     if ((tradingContext == null ? void 0 : tradingContext.selectedEventId) !== event.id) {
@@ -10383,7 +10434,7 @@ var EventListItemDetailsContent = ({
     }
     lastAppliedEventSyncKeyRef.current = eventSyncKey;
   }, [event, eventSyncKey, tradingContext]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (!tradingContext) return;
     if (!defaultMarketId) return;
     if (tradingContext.selectedEventId !== event.id) return;
@@ -10410,18 +10461,18 @@ var EventListItemDetailsContent = ({
     tradingContext,
     tradingContext == null ? void 0 : tradingContext.selectedEventId
   ]);
-  const venueMarkets = (0, import_react15.useMemo)(
+  const venueMarkets = (0, import_react16.useMemo)(
     () => resolvedEventTradingState.displayMarkets,
     [resolvedEventTradingState.displayMarkets]
   );
-  const marketOptions = (0, import_react15.useMemo)(
+  const marketOptions = (0, import_react16.useMemo)(
     () => venueMarkets.map((vm) => ({
       value: vm.id,
       label: vm.question
     })),
     [venueMarkets]
   );
-  const volumeLabel = (0, import_react15.useMemo)(() => {
+  const volumeLabel = (0, import_react16.useMemo)(() => {
     const resolvedVolume = resolveDisplayVolume(event.volume, venueMarkets);
     if (typeof resolvedVolume !== "number") return "";
     return `${config.formatting.formatCompactCurrency(resolvedVolume)} ${labels.eventItemDetails.volumeSuffix}`;
@@ -10688,11 +10739,11 @@ EventListItemDetails.displayName = "EventListItemDetails";
 
 // src/events/market-details/index.tsx
 var import_hooks42 = require("@agg-build/hooks");
-var import_react18 = require("react");
+var import_react19 = require("react");
 
 // src/events/orderbook/index.tsx
 var import_hooks41 = require("@agg-build/hooks");
-var import_react17 = require("react");
+var import_react18 = require("react");
 
 // src/events/orderbook/orderbook.constants.ts
 var orderbookRowLimitDefault = 4;
@@ -10713,7 +10764,7 @@ var orderbookDefaultLabels = {
 };
 
 // src/events/orderbook/use-center-orderbook-spread.ts
-var import_react16 = require("react");
+var import_react17 = require("react");
 var maxAutoCenterAttempts = 12;
 var userScrollKeys = /* @__PURE__ */ new Set(["ArrowDown", "ArrowUp", "PageDown", "PageUp", "Home", "End", " "]);
 var useCenterOrderbookSpread = ({
@@ -10724,21 +10775,21 @@ var useCenterOrderbookSpread = ({
   rowCount,
   enabled = true
 }) => {
-  const hasUserScrolledRef = (0, import_react16.useRef)(false);
-  const animationFrameRef = (0, import_react16.useRef)(null);
-  const retryCountRef = (0, import_react16.useRef)(0);
+  const hasUserScrolledRef = (0, import_react17.useRef)(false);
+  const animationFrameRef = (0, import_react17.useRef)(null);
+  const retryCountRef = (0, import_react17.useRef)(0);
   const resetKey = marketId != null ? marketId : "";
-  const cancelPendingFrame = (0, import_react16.useCallback)(() => {
+  const cancelPendingFrame = (0, import_react17.useCallback)(() => {
     if (animationFrameRef.current === null) return;
     window.cancelAnimationFrame(animationFrameRef.current);
     animationFrameRef.current = null;
   }, []);
-  (0, import_react16.useLayoutEffect)(() => {
+  (0, import_react17.useLayoutEffect)(() => {
     hasUserScrolledRef.current = false;
     retryCountRef.current = 0;
     cancelPendingFrame();
   }, [cancelPendingFrame, resetKey]);
-  (0, import_react16.useLayoutEffect)(() => {
+  (0, import_react17.useLayoutEffect)(() => {
     const container = containerRef.current;
     if (!container) return;
     const handleUserScrollIntent = () => {
@@ -10761,7 +10812,7 @@ var useCenterOrderbookSpread = ({
       cancelPendingFrame();
     };
   }, [cancelPendingFrame, containerRef]);
-  (0, import_react16.useLayoutEffect)(() => {
+  (0, import_react17.useLayoutEffect)(() => {
     if (!enabled) return;
     let isCancelled = false;
     const measureAndCenter = () => {
@@ -10835,7 +10886,7 @@ var useCenterOrderbookSpread = ({
       mutationObserver == null ? void 0 : mutationObserver.disconnect();
     };
   }, [cancelPendingFrame, containerRef, enabled, resetKey, rowCount, spreadRef]);
-  const recenter = (0, import_react16.useCallback)(() => {
+  const recenter = (0, import_react17.useCallback)(() => {
     const container = containerRef.current;
     const spread = spreadRef.current;
     if (!container || !spread) return;
@@ -11027,8 +11078,8 @@ var Orderbook = ({
   var _a, _b, _c, _d, _e;
   const { enableWebsocketsLogs } = (0, import_hooks41.useAggUiConfig)();
   const labels = __spreadValues(__spreadValues({}, orderbookDefaultLabels), labelsProp);
-  const scrollContainerRef = (0, import_react17.useRef)(null);
-  const spreadRowRef = (0, import_react17.useRef)(null);
+  const scrollContainerRef = (0, import_react18.useRef)(null);
+  const spreadRowRef = (0, import_react18.useRef)(null);
   const autoCenterMarketId = (_a = marketId != null ? marketId : outcomeId) != null ? _a : null;
   const maxVisibleRows = Math.max(1, visibleRows);
   const totalVisibleRows = maxVisibleRows * 2 + 1;
@@ -11045,7 +11096,7 @@ var Orderbook = ({
   const spreadEntry = entries.find(
     (e) => e.kind === "spread"
   );
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     var _a2, _b2;
     if (!enableWebsocketsLogs) return;
     console.debug("[AggUI][orderbook] component_rendered", {
@@ -11439,14 +11490,14 @@ var MarketDetailsContent = ({
   const isDarkTheme = theme === "dark";
   const labels = (0, import_hooks42.useLabels)();
   const tradingContext = (0, import_hooks42.useEventTradingContext)();
-  const detailsContentId = (0, import_react18.useId)();
+  const detailsContentId = (0, import_react19.useId)();
   const tradeSide = (_a = tradingContext == null ? void 0 : tradingContext.tradeSide) != null ? _a : "buy";
   const wsLivePrices = (0, import_hooks42.useLiveOutcomePrices)(venueMarkets);
   const wsBestPrices = (0, import_hooks42.useLiveBestPrices)(venueMarkets);
-  const resolvedMarket = (0, import_react18.useMemo)(() => {
+  const resolvedMarket = (0, import_react19.useMemo)(() => {
     return resolveMarketFromVenueMarkets(venueMarkets, marketId);
   }, [venueMarkets, marketId]);
-  const scopedResolvedMarket = (0, import_react18.useMemo)(() => {
+  const scopedResolvedMarket = (0, import_react19.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;
@@ -11468,17 +11519,17 @@ var MarketDetailsContent = ({
   const clusterBestMidpoint = clusterMidpointResult.bestMidpoint;
   const clusterBestMidpointVenue = clusterMidpointResult.bestMidpointVenue;
   const clusterBestPricesRest = clusterMidpointResult.bestPrices;
-  const clusterBestPrices = (0, import_react18.useMemo)(
+  const clusterBestPrices = (0, import_react19.useMemo)(
     () => (0, import_hooks42.mergeBestPricesPreferringLive)(clusterBestPricesRest, wsBestPrices),
     [clusterBestPricesRest, wsBestPrices]
   );
   const clusterBestPriceVenuesByOutcomeId = clusterMidpointResult.bestPriceVenuesByOutcomeId;
-  const clusterMidpointMarkets = (0, import_react18.useMemo)(() => {
+  const clusterMidpointMarkets = (0, import_react19.useMemo)(() => {
     var _a2;
     if (!resolvedMarket) return [];
     return (_a2 = resolvedMarket.venueMarkets) != null ? _a2 : [];
   }, [resolvedMarket]);
-  const tradableVenues = (0, import_react18.useMemo)(() => {
+  const tradableVenues = (0, import_react19.useMemo)(() => {
     var _a2;
     if (clusterMidpointMarkets.length === 0) return null;
     if (clusterMidpoints.size === 0) return null;
@@ -11493,7 +11544,7 @@ var MarketDetailsContent = ({
     }
     return set;
   }, [clusterMidpointMarkets, clusterMidpoints]);
-  const model = (0, import_react18.useMemo)(() => {
+  const model = (0, import_react19.useMemo)(() => {
     return buildMarketDetailsModel({
       venueMarkets,
       marketId,
@@ -11512,7 +11563,7 @@ var MarketDetailsContent = ({
     title2,
     tradableVenues
   ]);
-  const livePrices = (0, import_react18.useMemo)(() => {
+  const livePrices = (0, import_react19.useMemo)(() => {
     const merged = /* @__PURE__ */ new Map();
     if (midpointsFallback == null ? void 0 : midpointsFallback.size) {
       for (const [outcomeId, price] of midpointsFallback) {
@@ -11527,37 +11578,37 @@ var MarketDetailsContent = ({
     for (const [k, v] of wsLivePrices) merged.set(k, v);
     return merged;
   }, [clusterMidpoints, midpointsFallback, wsLivePrices]);
-  const scopedMarketForCard = (0, import_react18.useMemo)(() => {
+  const scopedMarketForCard = (0, import_react19.useMemo)(() => {
     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 = (0, import_react18.useMemo)(() => {
+  const marketTradingState = (0, import_react19.useMemo)(() => {
     return (0, import_hooks42.resolveMarketTradingState)(scopedMarketForCard);
   }, [scopedMarketForCard]);
   const isOutcomeSelectionLocked = marketTradingState.isTradingDisabled;
   const isUpcomingMarket = marketTradingState.kind === "unopened";
   const marketStatePresentation = resolveTradingStatePresentation(labels, marketTradingState);
-  const marketDetailsTabs = (0, import_react18.useMemo)(() => {
+  const marketDetailsTabs = (0, import_react19.useMemo)(() => {
     return getMarketDetailsTabs(labels);
   }, [labels]);
-  const [selectedTab, setSelectedTab] = (0, import_react18.useState)(
+  const [selectedTab, setSelectedTab] = (0, import_react19.useState)(
     () => resolveInitialTab(defaultTab)
   );
-  const [isOpened, setIsOpened] = (0, import_react18.useState)(controlledIsOpened);
-  (0, import_react18.useEffect)(() => {
+  const [isOpened, setIsOpened] = (0, import_react19.useState)(controlledIsOpened);
+  (0, import_react19.useEffect)(() => {
     setSelectedTab(resolveInitialTab(defaultTab));
   }, [defaultTab]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     setIsOpened(controlledIsOpened);
   }, [controlledIsOpened]);
   const selectedTimeRange = config.chart.selectedChartTimeRange;
   const setSelectedTimeRange = config.chart.setSelectedChartTimeRange;
   const effectiveSelectedTab = isResolvedMarket ? "graph" : selectedTab;
-  const [chartRangeOverride, setChartRangeOverride] = (0, import_react18.useState)(null);
+  const [chartRangeOverride, setChartRangeOverride] = (0, import_react19.useState)(null);
   const effectiveChartTimeRange = isResolvedMarket ? "ALL" : chartRangeOverride != null ? chartRangeOverride : selectedTimeRange;
-  const [selectedChartType, setSelectedChartType] = (0, import_react18.useState)("line");
-  const scopedSelectedOutcomeState = (0, import_react18.useMemo)(() => {
+  const [selectedChartType, setSelectedChartType] = (0, import_react19.useState)("line");
+  const scopedSelectedOutcomeState = (0, import_react19.useMemo)(() => {
     if (!model) {
       return {
         outcomeId: null,
@@ -11579,15 +11630,15 @@ var MarketDetailsContent = ({
   const selectedOutcomeId = scopedSelectedOutcomeState.outcomeId;
   const selectedOutcomeLabel = (_c = scopedSelectedOutcomeState.outcomeLabel) != null ? _c : null;
   const selectOutcome = tradingContext == null ? void 0 : tradingContext.selectOutcome;
-  const [selectedGraphVenue, setSelectedGraphVenue] = (0, import_react18.useState)(null);
-  const [chartOutcomeLabel, setChartOutcomeLabel] = (0, import_react18.useState)(selectedOutcomeLabel);
-  (0, import_react18.useEffect)(() => {
+  const [selectedGraphVenue, setSelectedGraphVenue] = (0, import_react19.useState)(null);
+  const [chartOutcomeLabel, setChartOutcomeLabel] = (0, import_react19.useState)(selectedOutcomeLabel);
+  (0, import_react19.useEffect)(() => {
     if (!isOpened) return;
     if (selectedOutcomeLabel) {
       setChartOutcomeLabel(selectedOutcomeLabel);
     }
   }, [isOpened]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     var _a2;
     if (!isOpened || !model) return;
     if (isOutcomeSelectionLocked) return;
@@ -11611,7 +11662,7 @@ var MarketDetailsContent = ({
     tradingContext == null ? void 0 : tradingContext.selectedMarketId,
     selectOutcome
   ]);
-  const headerOutcomeItems = (0, import_react18.useMemo)(() => {
+  const headerOutcomeItems = (0, import_react19.useMemo)(() => {
     if (!model) return [];
     const items = resolveHeaderOutcomeItems(model.market.venueMarkets, scopedMarketForCard);
     return items.map((item) => {
@@ -11665,7 +11716,7 @@ var MarketDetailsContent = ({
     tradeSide,
     wsLivePrices
   ]);
-  const headlineProbability = (0, import_react18.useMemo)(() => {
+  const headlineProbability = (0, import_react19.useMemo)(() => {
     var _a2, _b2, _c2, _d2;
     if (!model || !scopedMarketForCard) return void 0;
     if (isResolvedMarket) {
@@ -11701,7 +11752,7 @@ var MarketDetailsContent = ({
     midpointsFallback,
     wsLivePrices
   ]);
-  const selectedOutcomesByVenue = (0, import_react18.useMemo)(() => {
+  const selectedOutcomesByVenue = (0, import_react19.useMemo)(() => {
     if (!model) return [];
     return collectEligibleVenueOutcomes({
       venueMarkets: model.market.venueMarkets,
@@ -11715,7 +11766,7 @@ var MarketDetailsContent = ({
   }, [model, selectedOutcomeLabel, selectedOutcomeId]);
   const resolvedChartOutcomeLabel = chartOutcomeLabel != null ? chartOutcomeLabel : selectedOutcomeLabel;
   const chartSelectedOutcomeId = selectedOutcomeId && resolvedChartOutcomeLabel === selectedOutcomeLabel ? selectedOutcomeId : null;
-  const chartOutcomesByVenue = (0, import_react18.useMemo)(() => {
+  const chartOutcomesByVenue = (0, import_react19.useMemo)(() => {
     if (!model) return [];
     return resolveChartVenueOutcomes({
       eligibleVenueOutcomes: collectEligibleVenueOutcomes({
@@ -11732,7 +11783,7 @@ var MarketDetailsContent = ({
   const primaryVenueMarketId = (_f = (_e = selectedOutcomesByVenue[0]) == null ? void 0 : _e.market.id) != null ? _f : null;
   const primaryOutcomeId = (_h = (_g = selectedOutcomesByVenue[0]) == null ? void 0 : _g.outcome.id) != null ? _h : null;
   const chartPrimaryOutcomeId = (_j = (_i = chartOutcomesByVenue[0]) == null ? void 0 : _i.outcome.id) != null ? _j : null;
-  const chartVenueOutcomeIds = (0, import_react18.useMemo)(() => {
+  const chartVenueOutcomeIds = (0, import_react19.useMemo)(() => {
     return chartOutcomesByVenue.map((item) => item.outcome.id);
   }, [chartOutcomesByVenue]);
   const {
@@ -11753,12 +11804,12 @@ var MarketDetailsContent = ({
     // instead of refetching on every bucket-boundary rollover.
     rangeKey: rollingWindow.range
   });
-  const hasAutoFallenBackRangeRef = (0, import_react18.useRef)(false);
-  (0, import_react18.useEffect)(() => {
+  const hasAutoFallenBackRangeRef = (0, import_react19.useRef)(false);
+  (0, import_react19.useEffect)(() => {
     hasAutoFallenBackRangeRef.current = false;
     setChartRangeOverride(null);
   }, [chartPrimaryOutcomeId]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (!shouldAutoFallbackToAllRange({
       chartData: marketChartData,
       isLoading: isMarketChartLoading,
@@ -11789,14 +11840,14 @@ var MarketDetailsContent = ({
     })),
     live
   });
-  const marketOrderbookDataById = (0, import_react18.useMemo)(() => {
+  const marketOrderbookDataById = (0, import_react19.useMemo)(() => {
     var _a2;
     return (_a2 = marketOrderbookResult.dataById) != null ? _a2 : {};
   }, [marketOrderbookResult]);
   const isOrderBookLoading = marketOrderbookResult.isLoading;
   const orderBookError = marketOrderbookResult.error;
   const refetchOrderBook = marketOrderbookResult.refetch;
-  const aggregatedOrderbookRows = (0, import_react18.useMemo)(() => {
+  const aggregatedOrderbookRows = (0, import_react19.useMemo)(() => {
     return mergeVenueOutcomeOrderbooks({
       eligibleOutcomes: selectedOutcomesByVenue,
       orderbooksByOutcomeId: marketOrderbookDataById
@@ -11804,7 +11855,7 @@ var MarketDetailsContent = ({
   }, [marketOrderbookDataById, selectedOutcomesByVenue]);
   const askRows = aggregatedOrderbookRows.askRows;
   const bidRows = aggregatedOrderbookRows.bidRows;
-  const unifiedEntries = (0, import_react18.useMemo)(() => {
+  const unifiedEntries = (0, import_react19.useMemo)(() => {
     return resolveUnifiedOrderBookEntries({
       askRows,
       bidRows,
@@ -11812,7 +11863,7 @@ var MarketDetailsContent = ({
       spread: aggregatedOrderbookRows.spread
     });
   }, [aggregatedOrderbookRows.midpoint, aggregatedOrderbookRows.spread, askRows, bidRows]);
-  const orderbookSnapshotKey = (0, import_react18.useMemo)(() => {
+  const orderbookSnapshotKey = (0, import_react19.useMemo)(() => {
     if (selectedOutcomesByVenue.length === 0) return null;
     return selectedOutcomesByVenue.map((item) => {
       var _a2, _b2;
@@ -11820,13 +11871,13 @@ var MarketDetailsContent = ({
       return `${item.outcomeId}:${snapshotVersion}`;
     }).join("|");
   }, [marketOrderbookDataById, selectedOutcomesByVenue]);
-  const chartAvailableOutcomesByVenue = (0, import_react18.useMemo)(() => {
+  const chartAvailableOutcomesByVenue = (0, import_react19.useMemo)(() => {
     return filterChartVenueOutcomesByRenderableVenues({
       chartData: marketChartData,
       venueOutcomes: chartOutcomesByVenue
     });
   }, [chartOutcomesByVenue, marketChartData]);
-  const graphSeries = (0, import_react18.useMemo)(() => {
+  const graphSeries = (0, import_react19.useMemo)(() => {
     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",
@@ -11858,14 +11909,14 @@ var MarketDetailsContent = ({
     chartAvailableOutcomesByVenue,
     chartOutcomesByVenue
   ]);
-  const graphLiveState = (0, import_react18.useMemo)(() => {
+  const graphLiveState = (0, import_react19.useMemo)(() => {
     return resolveMarketChartLiveState({
       chartData: marketChartData,
       selectedVenue: selectedGraphVenue,
       transformProbability: (value) => value
     });
   }, [marketChartData, selectedGraphVenue]);
-  const otherRows = (0, import_react18.useMemo)(() => {
+  const otherRows = (0, import_react19.useMemo)(() => {
     if (!model) return [];
     return resolveOtherTabRows(model.market, labels);
   }, [labels, model]);
@@ -11956,7 +12007,7 @@ var MarketDetailsContent = ({
     title: labels.marketDetails.orderBookEmptyTitle,
     description: labels.marketDetails.orderBookEmptyDescription
   } : { kind: "data" };
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (!selectedGraphVenue) {
       return;
     }
@@ -12471,8 +12522,8 @@ var MarketDetailsList = ({
   const labels = (0, import_hooks42.useLabels)();
   const tradingContext = (0, import_hooks42.useEventTradingContext)();
   const selectedMarketId = (_a = tradingContext == null ? void 0 : tradingContext.selectedMarketId) != null ? _a : null;
-  const [expandedMarketId, setExpandedMarketId] = (0, import_react18.useState)(null);
-  const [areResolvedMarketsVisible, setAreResolvedMarketsVisible] = (0, import_react18.useState)(false);
+  const [expandedMarketId, setExpandedMarketId] = (0, import_react19.useState)(null);
+  const [areResolvedMarketsVisible, setAreResolvedMarketsVisible] = (0, import_react19.useState)(false);
   const resolvedEventId = eventId || "";
   const {
     markets: rawMarkets,
@@ -12485,7 +12536,7 @@ var MarketDetailsList = ({
     sortBy: "yesPrice",
     sortDir: "desc"
   });
-  const sourceMarkets = (0, import_react18.useMemo)(() => {
+  const sourceMarkets = (0, import_react19.useMemo)(() => {
     var _a2;
     if ((_a2 = eventTradingState == null ? void 0 : eventTradingState.marketStates) == null ? void 0 : _a2.length) {
       return eventTradingState.marketStates.map((item) => item.market);
@@ -12493,10 +12544,10 @@ var MarketDetailsList = ({
     if (providedMarkets) return providedMarkets;
     return rawMarkets;
   }, [eventTradingState == null ? void 0 : eventTradingState.marketStates, providedMarkets, rawMarkets]);
-  const isResolvedEvent = (0, import_react18.useMemo)(() => {
+  const isResolvedEvent = (0, import_react19.useMemo)(() => {
     return resolveIsResolvedEvent(sourceMarkets, eventTradingState);
   }, [eventTradingState, sourceMarkets]);
-  const groupedMarkets = (0, import_react18.useMemo)(() => {
+  const groupedMarkets = (0, import_react19.useMemo)(() => {
     if (sourceMarkets.length === 0) {
       return {
         primary: [],
@@ -12536,21 +12587,21 @@ var MarketDetailsList = ({
     return { primary, upcoming, resolved, closed };
   }, [eventTradingState, isResolvedEvent, sourceMarkets]);
   const shouldShowResolvedToggle = !isResolvedEvent && groupedMarkets.resolved.length > 0;
-  const visibleResolvedMarkets = (0, import_react18.useMemo)(() => {
+  const visibleResolvedMarkets = (0, import_react19.useMemo)(() => {
     if (isResolvedEvent || areResolvedMarketsVisible) return groupedMarkets.resolved;
     return [];
   }, [areResolvedMarketsVisible, groupedMarkets.resolved, isResolvedEvent]);
-  const displayedMarkets = (0, import_react18.useMemo)(() => {
+  const displayedMarkets = (0, import_react19.useMemo)(() => {
     return [...groupedMarkets.primary, ...visibleResolvedMarkets];
   }, [groupedMarkets.primary, visibleResolvedMarkets]);
   const hasPrefetchedMarkets = !!providedMarkets || !!((_b = eventTradingState == null ? void 0 : eventTradingState.marketStates) == null ? void 0 : _b.length);
-  const midpointEligibleMarkets = (0, import_react18.useMemo)(() => {
+  const midpointEligibleMarkets = (0, import_react19.useMemo)(() => {
     return displayedMarkets.filter(
       (market) => (0, import_hooks42.resolveMarketTradingState)(market).kind !== "resolved"
     );
   }, [displayedMarkets]);
   const { prices: midpointsFallback, venueByOutcomeId: midpointsFallbackVenues } = (0, import_hooks42.useViewportMidpoints)(midpointEligibleMarkets);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (isResolvedEvent) {
       setAreResolvedMarketsVisible(false);
       return;
@@ -12559,7 +12610,7 @@ var MarketDetailsList = ({
       setAreResolvedMarketsVisible(false);
     }
   }, [groupedMarkets.resolved.length, isResolvedEvent]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (displayedMarkets.length === 0) return;
     if (selectedMarketId && displayedMarkets.some((market) => market.id === selectedMarketId)) {
       return;
@@ -12576,7 +12627,7 @@ var MarketDetailsList = ({
     if (!autoSelectFallbackMarket) return;
     tradingContext == null ? void 0 : tradingContext.selectMarket(fallbackSelectableMarket.id, fallbackSelectableMarket);
   }, [autoSelectFallbackMarket, displayedMarkets, selectedMarketId, sourceMarkets, tradingContext]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (!expandedMarketId) return;
     if (displayedMarkets.some((market) => market.id === expandedMarketId)) return;
     setExpandedMarketId(null);
@@ -12686,11 +12737,128 @@ MarketDetailsList.displayName = "MarketDetailsList";
 var import_hooks44 = require("@agg-build/hooks");
 var import_sdk14 = require("@agg-build/sdk");
 var Dialog2 = __toESM(require("@radix-ui/react-dialog"));
+var import_react22 = require("react");
+
+// src/events/list/category-sidebar.tsx
 var import_react20 = require("react");
+var import_jsx_runtime129 = require("react/jsx-runtime");
+var rowBase = cn(
+  "flex min-h-11 w-full items-center gap-3 rounded-[6px] px-3 py-3",
+  "text-left text-agg-sm font-agg-normal leading-agg-5",
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-agg-primary focus-visible:ring-offset-1 focus-visible:ring-offset-agg-secondary"
+);
+var idleRowClassName = cn(
+  rowBase,
+  "cursor-pointer text-agg-foreground hover:bg-agg-secondary-hover"
+);
+var selectedRowClassName = cn(rowBase, "cursor-pointer bg-agg-primary/10 text-agg-primary");
+var CategorySidebar = ({
+  baseCategoryId,
+  childrenByParentId,
+  categoryPath,
+  collapsedCategoryIds,
+  totalEventCount,
+  labels,
+  onSelectAll,
+  onToggleCategory
+}) => {
+  const isDrilledIn = categoryPath.length > 0;
+  const sortedBaseChildren = (0, import_react20.useMemo)(() => {
+    var _a;
+    if (!baseCategoryId) return [];
+    const children = [...(_a = childrenByParentId.get(baseCategoryId)) != null ? _a : []];
+    return children.sort((a, b) => {
+      var _a2, _b, _c, _d;
+      const aHasChildren = ((_b = (_a2 = childrenByParentId.get(a.id)) == null ? void 0 : _a2.length) != null ? _b : 0) > 0;
+      const bHasChildren = ((_d = (_c = childrenByParentId.get(b.id)) == null ? void 0 : _c.length) != null ? _d : 0) > 0;
+      if (aHasChildren === bHasChildren) return 0;
+      return aHasChildren ? -1 : 1;
+    });
+  }, [baseCategoryId, childrenByParentId]);
+  const renderRow = ({
+    entry,
+    isExpanded,
+    isSelected,
+    onClick
+  }) => {
+    var _a, _b;
+    const hasKnownChildren = ((_b = (_a = childrenByParentId.get(entry.id)) == null ? void 0 : _a.length) != null ? _b : 0) > 0;
+    return /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(
+      "button",
+      {
+        type: "button",
+        "aria-current": isSelected ? "true" : void 0,
+        className: isSelected ? selectedRowClassName : idleRowClassName,
+        onClick,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("span", { className: "min-w-0 flex-1 truncate first-letter:uppercase", children: entry.label }),
+          hasKnownChildren ? /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+            Icon,
+            {
+              name: isExpanded ? "chevron-up" : "chevron-down",
+              size: "small",
+              color: "currentColor",
+              className: "shrink-0 text-agg-muted-foreground"
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("span", { className: "shrink-0 text-agg-muted-foreground", children: entry.eventCount })
+        ]
+      },
+      entry.id
+    );
+  };
+  const renderBranch = (category, depth) => {
+    var _a, _b, _c, _d, _e;
+    const label2 = (_a = category.displayName) != null ? _a : category.name;
+    const entry = {
+      id: category.id,
+      label: label2,
+      eventCount: (_b = category.eventCount) != null ? _b : 0
+    };
+    const childCategories = (_c = childrenByParentId.get(category.id)) != null ? _c : [];
+    const hasKnownChildren = childCategories.length > 0;
+    const isExpanded = ((_d = categoryPath[depth]) == null ? void 0 : _d.id) === category.id && !collapsedCategoryIds.has(category.id);
+    const isSelected = ((_e = categoryPath[depth]) == null ? void 0 : _e.id) === category.id && categoryPath.length === depth + 1;
+    return /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("div", { className: "flex w-full flex-col", children: [
+      renderRow({
+        entry,
+        isExpanded,
+        isSelected,
+        onClick: () => onToggleCategory({ entry, depth, hasKnownChildren, isExpanded, isSelected })
+      }),
+      /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+        "div",
+        {
+          className: cn(
+            "grid transition-[grid-template-rows] duration-150 ease-in-out motion-reduce:transition-none",
+            isExpanded ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+          ),
+          children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { className: "overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { className: "flex w-full flex-col gap-1 pl-4 pt-1", children: childCategories.map((child) => renderBranch(child, depth + 1)) }) })
+        }
+      )
+    ] }, category.id);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("div", { className: "flex w-full flex-col gap-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(
+      "button",
+      {
+        type: "button",
+        "aria-current": !isDrilledIn ? "true" : void 0,
+        className: !isDrilledIn ? selectedRowClassName : idleRowClassName,
+        onClick: onSelectAll,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("span", { className: "min-w-0 flex-1 truncate", children: labels.subcategoriesAll }),
+          /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("span", { className: "shrink-0 text-agg-muted-foreground", children: totalEventCount })
+        ]
+      }
+    ),
+    sortedBaseChildren.map((category) => renderBranch(category, 0))
+  ] });
+};
+CategorySidebar.displayName = "CategorySidebar";
 
 // src/events/list/event-list-tabs.tsx
 var import_hooks43 = require("@agg-build/hooks");
-var import_react19 = require("react");
+var import_react21 = require("react");
 
 // src/events/list/event-list.constants.ts
 var import_sdk13 = require("@agg-build/sdk");
@@ -12757,16 +12925,16 @@ var getDefaultEventListTabs = (labels) => {
 };
 
 // src/events/list/event-list-tabs.tsx
-var import_jsx_runtime129 = require("react/jsx-runtime");
+var import_jsx_runtime130 = require("react/jsx-runtime");
 var renderTabIcon = (tab, isActive) => {
   if (tab.iconName === "warning-filled") {
-    return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(Icon, { name: "warning-filled", size: "small", color: "currentColor" });
+    return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { name: "warning-filled", size: "small", color: "currentColor" });
   }
   if (tab.venueLogo) {
-    return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(VenueLogo, { venue: tab.venueLogo, size: "small" });
+    return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(VenueLogo, { venue: tab.venueLogo, size: "small" });
   }
   if (!tab.iconName) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
     Icon,
     {
       name: tab.iconName,
@@ -12779,7 +12947,7 @@ var useEventListTabs = (tabs) => {
   const labels = (0, import_hooks43.useLabels)();
   const { disabledVenues } = (0, import_hooks43.useAppConfig)();
   const { isLocationBlocked } = (0, import_hooks43.useGeoBlock)();
-  return (0, import_react19.useMemo)(() => {
+  return (0, import_react21.useMemo)(() => {
     const baseTabs = tabs != null ? tabs : getDefaultEventListTabs(labels);
     return baseTabs.flatMap((tab) => {
       if (!tab.venueLogo) return [tab];
@@ -12808,13 +12976,13 @@ var EventListTabs = ({
   overflowBehavior
 }) => {
   const resolvedTabs = useEventListTabs(tabs);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     const fallbackTab = resolvedTabs.find((tab) => !tab.disabled);
     if (!fallbackTab) return;
     if (resolvedTabs.some((tab) => tab.value === activeTab && !tab.disabled)) return;
     onTabChange(fallbackTab.value);
   }, [activeTab, onTabChange, resolvedTabs]);
-  const items = (0, import_react19.useMemo)(() => {
+  const items = (0, import_react21.useMemo)(() => {
     return resolvedTabs.map((tab) => {
       const isActive = tab.value === activeTab;
       return {
@@ -12826,7 +12994,7 @@ var EventListTabs = ({
       };
     });
   }, [activeTab, resolvedTabs]);
-  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
     Tabs,
     {
       ariaLabel,
@@ -12839,93 +13007,9 @@ var EventListTabs = ({
   );
 };
 EventListTabs.displayName = "EventListTabs";
-var useEventListTabsHeaderOverflow = (recomputeOn, options) => {
-  const headerRef = (0, import_react19.useRef)(null);
-  const titleRef = (0, import_react19.useRef)(null);
-  const requiredTabsWidthRef = (0, import_react19.useRef)(0);
-  const [shouldUseSelectOverflow, setShouldUseSelectOverflow] = (0, import_react19.useState)(false);
-  const updateTabsOverflowBehavior = (0, import_react19.useCallback)(() => {
-    var _a;
-    if (typeof window === "undefined") return;
-    const headerElement = headerRef.current;
-    const titleElement = titleRef.current;
-    if (!headerElement || !titleElement) return;
-    const headerStyles = window.getComputedStyle(headerElement);
-    const rawGap = headerStyles.columnGap || headerStyles.gap || "0";
-    const horizontalGap = Number.parseFloat(rawGap) || 0;
-    const availableTabsWidth = headerElement.clientWidth - titleElement.getBoundingClientRect().width - horizontalGap;
-    if (availableTabsWidth <= 0) {
-      setShouldUseSelectOverflow(true);
-      return;
-    }
-    const minTabsInlineWidthForSelect = options == null ? void 0 : options.minTabsInlineWidthForSelect;
-    if (typeof minTabsInlineWidthForSelect === "number" && availableTabsWidth < minTabsInlineWidthForSelect) {
-      setShouldUseSelectOverflow(true);
-      return;
-    }
-    const preferSelectOnOverflow = (_a = options == null ? void 0 : options.preferSelectOnOverflow) != null ? _a : true;
-    if (!preferSelectOnOverflow) {
-      setShouldUseSelectOverflow(false);
-      return;
-    }
-    const tabListElement = headerElement.querySelector(".agg-tab-list");
-    if (tabListElement) {
-      const currentRequiredWidth = tabListElement.scrollWidth;
-      if (currentRequiredWidth > 0) {
-        requiredTabsWidthRef.current = currentRequiredWidth;
-      }
-      const hasRealOverflow = tabListElement.scrollWidth - tabListElement.clientWidth > 1;
-      setShouldUseSelectOverflow(hasRealOverflow);
-      return;
-    }
-    if (requiredTabsWidthRef.current <= 0) return;
-    setShouldUseSelectOverflow(requiredTabsWidthRef.current > availableTabsWidth);
-  }, [options == null ? void 0 : options.minTabsInlineWidthForSelect, options == null ? void 0 : options.preferSelectOnOverflow]);
-  (0, import_react19.useEffect)(() => {
-    updateTabsOverflowBehavior();
-  }, [recomputeOn, updateTabsOverflowBehavior]);
-  (0, import_react19.useEffect)(() => {
-    if (typeof window === "undefined") return;
-    const handleResize = () => {
-      updateTabsOverflowBehavior();
-    };
-    window.addEventListener("resize", handleResize);
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, [updateTabsOverflowBehavior]);
-  (0, import_react19.useEffect)(() => {
-    if (typeof ResizeObserver === "undefined") return;
-    const headerElement = headerRef.current;
-    const titleElement = titleRef.current;
-    if (!headerElement || !titleElement) return;
-    const resizeObserver = new ResizeObserver(() => {
-      updateTabsOverflowBehavior();
-    });
-    resizeObserver.observe(headerElement);
-    resizeObserver.observe(titleElement);
-    return () => {
-      resizeObserver.disconnect();
-    };
-  }, [updateTabsOverflowBehavior]);
-  return { headerRef, titleRef, shouldUseSelectOverflow };
-};
 
 // src/events/list/index.tsx
-var import_jsx_runtime130 = require("react/jsx-runtime");
-var subcategoryMenuRowClassName = cn(
-  "flex min-h-11 w-full items-center justify-between rounded-[6px] px-3 py-3",
-  "text-left text-agg-sm font-agg-normal leading-agg-5",
-  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-agg-primary focus-visible:ring-offset-1 focus-visible:ring-offset-agg-secondary"
-);
-var subcategoryMenuIdleRowClassName = cn(
-  subcategoryMenuRowClassName,
-  "cursor-pointer text-agg-foreground hover:bg-agg-secondary-hover"
-);
-var subcategoryMenuSelectedRowClassName = cn(
-  subcategoryMenuRowClassName,
-  "cursor-pointer bg-agg-primary/10 text-agg-primary"
-);
+var import_jsx_runtime131 = require("react/jsx-runtime");
 var SORT_ICON_BY_VALUE = {
   volume24hr: "sort-volume-24hr",
   topArbitrage: "sort-top-arbitrage",
@@ -12962,7 +13046,7 @@ var EventList = ({
   initialLoadedPageCount,
   stateRef
 }) => {
-  var _a, _b, _c;
+  var _a, _b, _c, _d, _e;
   const labels = (0, import_hooks44.useLabels)();
   const { disabledVenues } = (0, import_hooks44.useAppConfig)();
   const {
@@ -12970,39 +13054,38 @@ var EventList = ({
   } = (0, import_hooks44.useSdkUiConfig)();
   const isDiscoveryFiltersEnabled = enableVenueEventDiscoveryFilters && !search;
   const resolvedTabs = useEventListTabs();
-  const visibleVenues = (0, import_react20.useMemo)(
+  const visibleVenues = (0, import_react22.useMemo)(
     () => disabledVenues.length === 0 ? void 0 : (0, import_hooks44.getVisibleVenueIdsByConfig)(import_sdk14.VENUES, disabledVenues),
     [disabledVenues]
   );
-  const [activeTabValue, setActiveTabValue] = (0, import_react20.useState)(
+  const [activeTabValue, setActiveTabValue] = (0, import_react22.useState)(
     (_b = initialVenueTab != null ? initialVenueTab : (_a = resolvedTabs[0]) == null ? void 0 : _a.value) != null ? _b : "matched"
   );
-  const [selectedSort, setSelectedSort] = (0, import_react20.useState)("volume24hr");
-  const [isSubcategoriesModalOpen, setIsSubcategoriesModalOpen] = (0, import_react20.useState)(false);
-  const [categoryPath, setCategoryPath] = (0, import_react20.useState)([]);
-  const [collapsedCategoryIds, setCollapsedCategoryIds] = (0, import_react20.useState)(() => /* @__PURE__ */ new Set());
-  const { headerRef, titleRef, shouldUseSelectOverflow } = useEventListTabsHeaderOverflow(resolvedTabs, { minTabsInlineWidthForSelect: 400, preferSelectOnOverflow: false });
-  const sortItems = (0, import_react20.useMemo)(() => {
+  const [selectedSort, setSelectedSort] = (0, import_react22.useState)("volume24hr");
+  const [isSubcategoriesModalOpen, setIsSubcategoriesModalOpen] = (0, import_react22.useState)(false);
+  const [categoryPath, setCategoryPath] = (0, import_react22.useState)([]);
+  const [collapsedCategoryIds, setCollapsedCategoryIds] = (0, import_react22.useState)(() => /* @__PURE__ */ new Set());
+  const sortItems = (0, import_react22.useMemo)(() => {
     return [
       {
         value: "volume24hr",
         label: labels.eventList.sortBy24hVolume,
-        icon: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { name: SORT_ICON_BY_VALUE.volume24hr, size: "small", color: "currentColor" })
+        icon: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(Icon, { name: SORT_ICON_BY_VALUE.volume24hr, size: "small", color: "currentColor" })
       },
       {
         value: "topArbitrage",
         label: labels.eventList.sortByTopArbitrage,
-        icon: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { name: SORT_ICON_BY_VALUE.topArbitrage, size: "small", color: "currentColor" })
+        icon: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(Icon, { name: SORT_ICON_BY_VALUE.topArbitrage, size: "small", color: "currentColor" })
       },
       {
         value: "volume",
         label: labels.eventList.sortByTotalVolume,
-        icon: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { name: SORT_ICON_BY_VALUE.volume, size: "small", color: "currentColor" })
+        icon: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(Icon, { name: SORT_ICON_BY_VALUE.volume, size: "small", color: "currentColor" })
       },
       {
         value: "endDate",
         label: labels.eventList.sortByEndingSoon,
-        icon: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { name: SORT_ICON_BY_VALUE.endDate, size: "small", color: "currentColor" })
+        icon: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(Icon, { name: SORT_ICON_BY_VALUE.endDate, size: "small", color: "currentColor" })
       }
     ];
   }, [
@@ -13012,14 +13095,9 @@ var EventList = ({
     labels.eventList.sortByTotalVolume
   ]);
   const baseCategoryId = (_c = categoryIds == null ? void 0 : categoryIds[0]) != null ? _c : null;
-  (0, import_react20.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (!isDiscoveryFiltersEnabled) return;
-    if (!baseCategoryId) {
-      setCategoryPath([]);
-      setCollapsedCategoryIds(/* @__PURE__ */ new Set());
-      return;
-    }
-    setCategoryPath([{ id: baseCategoryId, label: baseCategoryId, eventCount: 0 }]);
+    setCategoryPath([]);
     setCollapsedCategoryIds(/* @__PURE__ */ new Set());
   }, [baseCategoryId, isDiscoveryFiltersEnabled]);
   const { categories: topLevelCategories } = (0, import_hooks44.useCategories)({
@@ -13027,10 +13105,10 @@ var EventList = ({
     enabled: isDiscoveryFiltersEnabled,
     limit: 100
   });
-  const sortedTopLevelCategories = (0, import_react20.useMemo)(() => {
+  const sortedTopLevelCategories = (0, import_react22.useMemo)(() => {
     return sortCategoriesForNavigation(topLevelCategories);
   }, [topLevelCategories]);
-  const baseCategoryChildPrefetchIds = (0, import_react20.useMemo)(() => {
+  const baseCategoryChildPrefetchIds = (0, import_react22.useMemo)(() => {
     return Array.from(
       /* @__PURE__ */ new Set([
         ...sortedTopLevelCategories.map((category) => category.id),
@@ -13044,23 +13122,28 @@ var EventList = ({
     parentIds: baseCategoryChildPrefetchIds,
     limit: 100
   });
-  const visibleChildPrefetchIds = (0, import_react20.useMemo)(() => {
-    var _a2;
+  const visibleChildPrefetchIds = (0, import_react22.useMemo)(() => {
+    var _a2, _b2;
     const ids = /* @__PURE__ */ new Set();
+    if (baseCategoryId) {
+      for (const child of (_a2 = baseChildrenByParentId.get(baseCategoryId)) != null ? _a2 : []) {
+        ids.add(child.id);
+      }
+    }
     for (const expandedCategory of categoryPath) {
-      for (const childCategory of (_a2 = baseChildrenByParentId.get(expandedCategory.id)) != null ? _a2 : []) {
+      for (const childCategory of (_b2 = baseChildrenByParentId.get(expandedCategory.id)) != null ? _b2 : []) {
         ids.add(childCategory.id);
       }
     }
     return Array.from(ids);
-  }, [baseChildrenByParentId, categoryPath]);
+  }, [baseCategoryId, baseChildrenByParentId, categoryPath]);
   const { childrenByParentId: visibleChildrenByParentId } = (0, import_hooks44.useCategoryChildren)({
     queryKeyScope: "event-list-category-children",
     enabled: isDiscoveryFiltersEnabled,
     parentIds: visibleChildPrefetchIds,
     limit: 100
   });
-  const visibleGrandchildPrefetchIds = (0, import_react20.useMemo)(() => {
+  const visibleGrandchildPrefetchIds = (0, import_react22.useMemo)(() => {
     var _a2;
     const ids = /* @__PURE__ */ new Set();
     for (const expandedCategory of categoryPath) {
@@ -13076,43 +13159,41 @@ var EventList = ({
     parentIds: visibleGrandchildPrefetchIds,
     limit: 100
   });
-  const childrenByParentId = (0, import_react20.useMemo)(() => {
+  const childrenByParentId = (0, import_react22.useMemo)(() => {
     return new Map([
       ...baseChildrenByParentId,
       ...visibleChildrenByParentId,
       ...visibleGrandchildrenByParentId
     ]);
   }, [baseChildrenByParentId, visibleChildrenByParentId, visibleGrandchildrenByParentId]);
-  const shouldRenderSubcategoryFilters = isDiscoveryFiltersEnabled && (sortedTopLevelCategories.length > 0 || categoryPath.length > 0);
-  const totalTopLevelEventCount = (0, import_react20.useMemo)(() => {
-    return sortedTopLevelCategories.reduce((accumulator, category) => {
-      var _a2;
-      return accumulator + ((_a2 = category.eventCount) != null ? _a2 : 0);
-    }, 0);
-  }, [sortedTopLevelCategories]);
-  const resolvedCategoryIds = (0, import_react20.useMemo)(() => {
+  const shouldRenderSubcategoryFilters = isDiscoveryFiltersEnabled && baseCategoryId !== null && (((_e = (_d = childrenByParentId.get(baseCategoryId)) == null ? void 0 : _d.length) != null ? _e : 0) > 0 || categoryPath.length > 0);
+  const baseCategoryEventCount = (0, import_react22.useMemo)(() => {
+    var _a2, _b2;
+    return (_b2 = (_a2 = sortedTopLevelCategories.find((c) => c.id === baseCategoryId)) == null ? void 0 : _a2.eventCount) != null ? _b2 : 0;
+  }, [baseCategoryId, sortedTopLevelCategories]);
+  const resolvedCategoryIds = (0, import_react22.useMemo)(() => {
     if (!isDiscoveryFiltersEnabled) return categoryIds;
-    return resolveCategoryIdsFromPath(categoryPath, void 0);
-  }, [categoryIds, categoryPath, isDiscoveryFiltersEnabled]);
-  const sortQueryParams = (0, import_react20.useMemo)(() => {
+    return resolveCategoryIdsFromPath(categoryPath, baseCategoryId ? [baseCategoryId] : void 0);
+  }, [baseCategoryId, categoryIds, categoryPath, isDiscoveryFiltersEnabled]);
+  const sortQueryParams = (0, import_react22.useMemo)(() => {
     return resolveSortQueryParams(selectedSort);
   }, [selectedSort]);
-  const activeTab = (0, import_react20.useMemo)(() => {
+  const activeTab = (0, import_react22.useMemo)(() => {
     return resolvedTabs.find((tab) => tab.value === activeTabValue);
   }, [activeTabValue, resolvedTabs]);
-  const venues = (0, import_react20.useMemo)(() => {
+  const venues = (0, import_react22.useMemo)(() => {
     return resolveTabVenus(activeTab, visibleVenues);
   }, [activeTab, visibleVenues]);
-  const matchStatus = (0, import_react20.useMemo)(() => {
+  const matchStatus = (0, import_react22.useMemo)(() => {
     return activeTabValue === "matched" ? activeTab == null ? void 0 : activeTab.matchStatus : void 0;
   }, [activeTabValue, activeTab]);
-  const resolvedMaxVisibleItems = (0, import_react20.useMemo)(() => {
+  const resolvedMaxVisibleItems = (0, import_react22.useMemo)(() => {
     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 = (0, import_react20.useMemo)(() => {
+  const endDateFrom = (0, import_react22.useMemo)(() => {
     if (search) return void 0;
     const BUCKET_MINUTES = 5;
     const bucket = /* @__PURE__ */ new Date();
@@ -13141,21 +13222,21 @@ var EventList = ({
     endDateFrom,
     initialPages: initialLoadedPageCount
   });
-  (0, import_react20.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (stateRef) {
       stateRef.current = { venueTab: activeTabValue, loadedPageCount };
     }
   }, [stateRef, activeTabValue, loadedPageCount]);
-  const filteredEvents = (0, import_react20.useMemo)(() => {
+  const filteredEvents = (0, import_react22.useMemo)(() => {
     return filterEventsByTabValue(events, activeTabValue);
   }, [events, activeTabValue]);
-  const groupedEvents = (0, import_react20.useMemo)(() => {
+  const groupedEvents = (0, import_react22.useMemo)(() => {
     return splitEventsByLifecycle(filteredEvents);
   }, [filteredEvents]);
-  const orderedEvents = (0, import_react20.useMemo)(() => {
+  const orderedEvents = (0, import_react22.useMemo)(() => {
     return groupedEvents.open;
   }, [groupedEvents.open]);
-  const tileEvents = (0, import_react20.useMemo)(() => {
+  const tileEvents = (0, import_react22.useMemo)(() => {
     const normalizedEvents = orderedEvents.map((event) => mapEventToEventListItemEvent(event)).filter((event) => event != null);
     if (resolvedMaxVisibleItems == null) return normalizedEvents;
     return normalizedEvents.slice(0, resolvedMaxVisibleItems);
@@ -13163,8 +13244,8 @@ var EventList = ({
   const shouldRenderLoadingState = isLoading && !isPlaceholderData && tileEvents.length === 0;
   const shouldRenderEmptyState = !isLoading && !isError && tileEvents.length === 0;
   const shouldRenderPaginationLoadingItems = shouldPaginate && hasNextPage;
-  const loadMoreRef = (0, import_react20.useRef)(null);
-  (0, import_react20.useEffect)(() => {
+  const loadMoreRef = (0, import_react22.useRef)(null);
+  (0, import_react22.useEffect)(() => {
     if (!shouldPaginate) return;
     if (!hasNextPage) return;
     if (typeof IntersectionObserver === "undefined") return;
@@ -13189,11 +13270,10 @@ var EventList = ({
   const gridClassName = cn(
     "grid grid-cols-[repeat(auto-fill,minmax(240px,1fr))] md:grid-cols-[repeat(auto-fill,minmax(360px,1fr))] gap-4"
   );
-  const isDrilledIn = categoryPath.length > 0;
   const handleSelectAllCategories = () => {
     setCategoryPath([]);
     setCollapsedCategoryIds(/* @__PURE__ */ new Set());
-    onCategoryRootChange == null ? void 0 : onCategoryRootChange(void 0);
+    onCategoryRootChange == null ? void 0 : onCategoryRootChange(baseCategoryId != null ? baseCategoryId : void 0);
     setIsSubcategoriesModalOpen(false);
   };
   const handleToggleSubcategory = ({
@@ -13203,7 +13283,6 @@ var EventList = ({
     isExpanded,
     isSelected
   }) => {
-    var _a2;
     setCategoryPath((prev) => [...prev.slice(0, depth), entry]);
     setCollapsedCategoryIds((prev) => {
       const next = new Set(prev);
@@ -13214,122 +13293,41 @@ var EventList = ({
       next.delete(entry.id);
       return next;
     });
-    onCategoryRootChange == null ? void 0 : onCategoryRootChange(depth === 0 ? entry.id : (_a2 = categoryPath[0]) == null ? void 0 : _a2.id);
+    onCategoryRootChange == null ? void 0 : onCategoryRootChange(baseCategoryId != null ? baseCategoryId : void 0);
   };
-  const renderSubcategoryTreeRow = ({
-    entry,
-    isExpanded,
-    isSelected,
-    onClick
-  }) => {
-    var _a2, _b2;
-    const hasKnownChildren = ((_b2 = (_a2 = childrenByParentId.get(entry.id)) == null ? void 0 : _a2.length) != null ? _b2 : 0) > 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
-      "button",
-      {
-        type: "button",
-        "aria-current": isSelected ? "true" : void 0,
-        className: isSelected ? subcategoryMenuSelectedRowClassName : subcategoryMenuIdleRowClassName,
-        onClick,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("span", { className: "min-w-0 truncate first-letter:uppercase", children: entry.label }),
-          hasKnownChildren ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
-            Icon,
-            {
-              name: isExpanded ? "chevron-up" : "chevron-down",
-              size: "small",
-              color: "currentColor",
-              className: "shrink-0 text-agg-muted-foreground"
-            }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("span", { className: "shrink-0 text-agg-muted-foreground", children: entry.eventCount })
-        ]
-      },
-      entry.id
-    );
-  };
-  const renderSubcategoryBranch = (category, depth) => {
-    var _a2, _b2, _c2, _d, _e;
-    const label2 = (_a2 = category.displayName) != null ? _a2 : category.name;
-    const entry = {
-      id: category.id,
-      label: label2,
-      eventCount: (_b2 = category.eventCount) != null ? _b2 : 0
-    };
-    const childCategories = (_c2 = childrenByParentId.get(category.id)) != null ? _c2 : [];
-    const hasKnownChildren = childCategories.length > 0;
-    const isExpanded = ((_d = categoryPath[depth]) == null ? void 0 : _d.id) === category.id && !collapsedCategoryIds.has(category.id);
-    const isSelected = ((_e = categoryPath[depth]) == null ? void 0 : _e.id) === category.id && categoryPath.length === depth + 1;
-    return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { className: "flex w-full flex-col gap-1", children: [
-      renderSubcategoryTreeRow({
-        entry,
-        isExpanded,
-        isSelected,
-        onClick: () => handleToggleSubcategory({
-          entry,
-          depth,
-          hasKnownChildren,
-          isExpanded,
-          isSelected
-        })
-      }),
-      isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { className: "flex w-full flex-col gap-1 pl-4", children: childCategories.map(
-        (childCategory) => renderSubcategoryBranch(childCategory, depth + 1)
-      ) }) : null
-    ] }, category.id);
-  };
-  const subcategoriesListContent = /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_jsx_runtime130.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
-      "button",
-      {
-        type: "button",
-        "aria-current": !isDrilledIn ? "true" : void 0,
-        className: !isDrilledIn ? subcategoryMenuSelectedRowClassName : subcategoryMenuIdleRowClassName,
-        onClick: handleSelectAllCategories,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("span", { className: "min-w-0 truncate", children: labels.eventList.subcategoriesAll }),
-          /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("span", { className: "text-agg-muted-foreground", children: totalTopLevelEventCount })
-        ]
-      }
-    ),
-    sortedTopLevelCategories.map((category) => renderSubcategoryBranch(category, 0))
-  ] });
   if (shouldRenderLoadingState) {
-    return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
       Skeleton,
       {
         view: "event-list",
         ariaLabel: labels.eventList.loading(title2),
-        withSidebar: isDiscoveryFiltersEnabled
+        withSidebar: shouldRenderSubcategoryFilters
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("section", { className: "agg-event-list flex w-full flex-col gap-2 md:gap-5 t", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("section", { className: "agg-event-list flex w-full flex-col gap-2 md:gap-5 t", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
       "header",
       {
-        ref: headerRef,
         className: cn(
           "agg-event-list-header",
           "flex flex-col w-full items-start justify-between",
           "gap-2 sm:flex-row sm:items-center sm:gap-4"
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { ref: titleRef, className: "agg-event-list-title min-w-32", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Typography, { as: "h2", variant: "title", className: "truncate first-letter:uppercase", children: title2 }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { className: "hidden min-w-0 max-w-full items-center gap-3 md:flex", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { className: "agg-event-list-title min-w-32", children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(Typography, { as: "h2", variant: "title", className: "truncate first-letter:uppercase", children: title2 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { className: "hidden min-w-0 max-w-full items-center gap-3 md:flex", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
               EventListTabs,
               {
                 ariaLabel: labels.eventList.tabsAria(title2),
-                className: cn(
-                  "agg-event-list-tabs w-fit max-w-full flex-1",
-                  shouldUseSelectOverflow ? "min-w-[220px]" : "min-w-[400px]"
-                ),
+                className: "agg-event-list-tabs min-w-0 flex-1 max-w-[600px]!",
                 activeTab: activeTabValue,
                 onTabChange: setActiveTabValue,
-                overflowBehavior: shouldUseSelectOverflow ? "select" : "scroll"
+                overflowBehavior: "scroll"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
               Select,
               {
                 ariaLabel: labels.eventList.sortByLabel,
@@ -13345,8 +13343,8 @@ var EventList = ({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { className: "flex w-full gap-2 md:hidden mb-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { className: "flex w-full gap-2 md:hidden mb-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
         EventListTabs,
         {
           ariaLabel: labels.eventList.tabsAria(title2),
@@ -13356,7 +13354,7 @@ var EventList = ({
           overflowBehavior: "select"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
         Select,
         {
           ariaLabel: labels.eventList.sortByLabel,
@@ -13367,24 +13365,36 @@ var EventList = ({
           contentClassName: "rounded-[12px] py-2 shadow-[0_8px_16px_rgba(0,0,0,0.1)]"
         }
       ),
-      shouldRenderSubcategoryFilters ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+      shouldRenderSubcategoryFilters ? /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
         "button",
         {
           type: "button",
           className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-[8px] border-2 border-agg-primary bg-agg-secondary text-agg-foreground cursor-pointer",
           "aria-label": labels.eventList.subcategoriesOpenAria,
           onClick: () => setIsSubcategoriesModalOpen(true),
-          children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { name: "apps", size: "small", color: "currentColor" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(Icon, { name: "apps", size: "small", color: "currentColor" })
         }
       ) : null
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
       "div",
       {
         className: cn("flex w-full gap-6", shouldRenderSubcategoryFilters ? "md:items-start" : ""),
         children: [
-          shouldRenderSubcategoryFilters ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("aside", { className: "hidden w-[200px] shrink-0 md:block", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { className: "flex w-full flex-col gap-1 rounded-[8px] border border-agg-separator bg-agg-secondary p-2", children: subcategoriesListContent }) }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
+          shouldRenderSubcategoryFilters ? /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("aside", { className: "hidden w-[200px] shrink-0 md:block self-start sticky top-4", children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { className: "agg-sidebar max-h-[calc(100vh-19rem)] overflow-y-auto rounded-[8px] border border-agg-separator bg-agg-secondary p-2", children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+            CategorySidebar,
+            {
+              baseCategoryId,
+              childrenByParentId,
+              categoryPath,
+              collapsedCategoryIds,
+              totalEventCount: baseCategoryEventCount,
+              labels: { subcategoriesAll: labels.eventList.subcategoriesAll },
+              onSelectAll: handleSelectAllCategories,
+              onToggleCategory: handleToggleSubcategory
+            }
+          ) }) }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
             "div",
             {
               className: cn(
@@ -13395,7 +13405,7 @@ var EventList = ({
                 gridClassName
               ),
               children: [
-                tileEvents.map((event) => /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+                tileEvents.map((event) => /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
                   EventListItem,
                   {
                     event,
@@ -13410,7 +13420,7 @@ var EventList = ({
                   },
                   event.id
                 )),
-                shouldRenderPaginationLoadingItems ? Array.from({ length: 6 }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+                shouldRenderPaginationLoadingItems ? Array.from({ length: 6 }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
                   EventListItem,
                   {
                     isLoading: true,
@@ -13420,20 +13430,20 @@ var EventList = ({
                   },
                   `loading-${index}`
                 )) : null,
-                shouldRenderEmptyState ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { className: "col-span-full w-full", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+                shouldRenderEmptyState ? /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { className: "col-span-full w-full", children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
                   StateMessage,
                   {
                     title: labels.eventList.emptyTitle,
                     description: labels.eventList.emptyDescription,
-                    icon: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { name: "search-empty" })
+                    icon: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(Icon, { name: "search-empty" })
                   }
                 ) }) : null,
-                isError ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { className: "col-span-full w-full", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+                isError ? /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { className: "col-span-full w-full", children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
                   StateMessage,
                   {
                     title: labels.eventList.errorTitle,
                     description: labels.eventList.errorDescription,
-                    icon: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { name: "warning" })
+                    icon: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(Icon, { name: "warning" })
                   }
                 ) }) : null
               ]
@@ -13442,20 +13452,45 @@ var EventList = ({
         ]
       }
     ),
-    shouldRenderSubcategoryFilters ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Modal, { open: isSubcategoriesModalOpen, onOpenChange: setIsSubcategoriesModalOpen, children: /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
+    shouldRenderSubcategoryFilters ? /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(Modal, { open: isSubcategoriesModalOpen, onOpenChange: setIsSubcategoriesModalOpen, children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
       Modal.Container,
       {
         classNames: {
-          content: "items-end p-0",
+          // pointer-events-none lets clicks on the empty area above the panel pass through
+          // to Dialog.Overlay, which triggers Radix's outside-click dismiss.
+          content: "items-end p-0 pointer-events-none",
           container: "w-full max-w-none border-0 bg-transparent shadow-none"
         },
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Dialog2.Title, { className: "sr-only", children: labels.eventList.subcategoriesLabel }),
-          /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { className: "w-full rounded-t-[12px] border border-agg-separator bg-agg-secondary p-4", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { className: "flex flex-col gap-1", children: subcategoriesListContent }) })
-        ]
+        children: /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { className: "pointer-events-auto w-full rounded-t-[12px] border border-agg-separator bg-agg-secondary", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { className: "flex justify-center pb-1 pt-3", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { className: "h-1 w-10 rounded-full bg-agg-muted-foreground/30" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { className: "flex items-center justify-between px-4 pb-2 pt-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(Dialog2.Title, { className: "text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground", children: labels.eventList.subcategoriesLabel }),
+            /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+              Dialog2.Close,
+              {
+                className: "flex cursor-pointer items-center justify-center rounded-full p-1 text-agg-muted-foreground hover:bg-agg-secondary-hover",
+                "aria-label": labels.common.close,
+                children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(CloseIcon, { className: "h-5 w-5" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { className: "flex flex-col gap-1 px-4 pb-4", children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+            CategorySidebar,
+            {
+              baseCategoryId,
+              childrenByParentId,
+              categoryPath,
+              collapsedCategoryIds,
+              totalEventCount: baseCategoryEventCount,
+              labels: { subcategoriesAll: labels.eventList.subcategoriesAll },
+              onSelectAll: handleSelectAllCategories,
+              onToggleCategory: handleToggleSubcategory
+            }
+          ) })
+        ] })
       }
     ) }) : null,
-    shouldPaginate && hasNextPage ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { ref: loadMoreRef, className: "agg-event-list-sentinel h-px w-full", "aria-hidden": true }) : null
+    shouldPaginate && hasNextPage ? /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { ref: loadMoreRef, className: "agg-event-list-sentinel h-px w-full", "aria-hidden": true }) : null
   ] });
 };
 EventList.displayName = "EventList";