@agg-build/ui 4.19.0 → 4.21.0

package/dist/{chunk-DXASFSVL.mjs → chunk-JLO2BGSF.mjs}

@@ -1020,144 +1020,14 @@ var EventListItemV2 = (props) => {
 };
 EventListItemV2.displayName = "EventListItemV2";
 
-// src/events/list/index.tsx
-import {
-  MarketStatus,
-  getVisibleVenueIdsByConfig,
-  useAppConfig as useAppConfig2,
-  useCategories,
-  useCategoryChildren,
-  useLabels as useLabels3,
-  useSdkUiConfig as useSdkUiConfig2,
-  useVenueEvents,
-  useVenueMarketMidpoints as useVenueMarketMidpoints2
-} from "@agg-build/hooks";
-import { VENUES } from "@agg-build/sdk";
-import * as Dialog from "@radix-ui/react-dialog";
-import { useCallback as useCallback3, useEffect as useEffect3, useMemo as useMemo4, useRef as useRef3, useState as useState3 } from "react";
-
-// src/events/list/category-sidebar.tsx
-import { useMemo as useMemo2 } from "react";
-import { jsx as jsx2, jsxs as jsxs2 } from "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 = useMemo2(() => {
-    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__ */ jsxs2(
-      "button",
-      {
-        type: "button",
-        "aria-current": isSelected ? "true" : void 0,
-        "aria-expanded": hasKnownChildren ? isExpanded : void 0,
-        className: isSelected ? selectedRowClassName : idleRowClassName,
-        onClick,
-        children: [
-          /* @__PURE__ */ jsx2("span", { className: "min-w-0 flex-1 truncate first-letter:uppercase", children: entry.label }),
-          hasKnownChildren ? /* @__PURE__ */ jsx2(
-            Icon,
-            {
-              name: isExpanded ? "chevron-up" : "chevron-down",
-              size: "small",
-              color: "currentColor",
-              className: "shrink-0 text-agg-muted-foreground"
-            }
-          ) : /* @__PURE__ */ jsx2("span", { className: "shrink-0 text-agg-muted-foreground", children: entry.eventCount })
-        ]
-      },
-      entry.id
-    );
-  };
-  const renderBranch = (category, depth) => {
-    var _a, _b, _c, _d, _e;
-    const label = (_a = category.displayName) != null ? _a : category.name;
-    const entry = {
-      id: category.id,
-      label,
-      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__ */ jsxs2("div", { className: "flex w-full flex-col", children: [
-      renderRow({
-        entry,
-        isExpanded,
-        isSelected,
-        onClick: () => onToggleCategory({ entry, depth, hasKnownChildren, isExpanded, isSelected })
-      }),
-      /* @__PURE__ */ jsx2(
-        "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__ */ jsx2("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx2("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__ */ jsxs2("div", { className: "flex w-full flex-col gap-1", children: [
-    /* @__PURE__ */ jsxs2(
-      "button",
-      {
-        type: "button",
-        "aria-current": !isDrilledIn ? "true" : void 0,
-        className: !isDrilledIn ? selectedRowClassName : idleRowClassName,
-        onClick: onSelectAll,
-        children: [
-          /* @__PURE__ */ jsx2("span", { className: "min-w-0 flex-1 truncate", children: labels.subcategoriesAll }),
-          /* @__PURE__ */ jsx2("span", { className: "shrink-0 text-agg-muted-foreground", children: totalEventCount })
-        ]
-      }
-    ),
-    sortedBaseChildren.map((category) => renderBranch(category, 0))
-  ] });
-};
-CategorySidebar.displayName = "CategorySidebar";
+// src/events/list/event-list-venue-strip.tsx
+import { useAppConfig as useAppConfig2, useLabels as useLabels3, useSdkUiConfig as useSdkUiConfig2 } from "@agg-build/hooks";
+import { useEffect as useEffect3, useLayoutEffect, useMemo as useMemo3, useRef as useRef3, useState as useState3 } from "react";
 
 // src/events/list/event-list-tabs.tsx
 import { getVenueAvailabilityState, useAppConfig, useGeoBlock, useLabels as useLabels2 } from "@agg-build/hooks";
 import { getEffectiveDisabledVenues, isVenueInactive } from "@agg-build/sdk";
-import { useCallback as useCallback2, useEffect as useEffect2, useMemo as useMemo3, useRef as useRef2, useState as useState2 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect2, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
 
 // src/events/list/event-list.constants.ts
 import { sortVenues as sortVenues2 } from "@agg-build/hooks";
@@ -1274,17 +1144,17 @@ var getDefaultEventListTabs = (labels) => {
 };
 
 // src/events/list/event-list-tabs.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx2 } from "react/jsx-runtime";
 var DEFAULT_HIDDEN_VENUES = new Set(getEffectiveDisabledVenues(void 0));
 var renderTabIcon = (tab, isActive) => {
   if (tab.iconName === "warning-filled") {
-    return /* @__PURE__ */ jsx3(Icon, { name: "warning-filled", size: "small", color: "currentColor" });
+    return /* @__PURE__ */ jsx2(Icon, { name: "warning-filled", size: "small", color: "currentColor" });
   }
   if (tab.venueLogo) {
-    return /* @__PURE__ */ jsx3(VenueLogo, { venue: tab.venueLogo, size: "small" });
+    return /* @__PURE__ */ jsx2(VenueLogo, { venue: tab.venueLogo, size: "small" });
   }
   if (!tab.iconName) return null;
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx2(
     Icon,
     {
       name: tab.iconName,
@@ -1297,7 +1167,7 @@ var useEventListTabs = (tabs) => {
   const labels = useLabels2();
   const { disabledVenues, isLoading: isAppConfigLoading } = useAppConfig();
   const { isLocationBlocked } = useGeoBlock();
-  return useMemo3(() => {
+  return useMemo2(() => {
     const baseTabs = tabs != null ? tabs : getDefaultEventListTabs(labels);
     return baseTabs.flatMap((tab) => {
       if (!tab.venueLogo) return [tab];
@@ -1337,7 +1207,7 @@ var EventListTabs = ({
     if (resolvedTabs.some((tab) => tab.value === activeTab && !tab.disabled)) return;
     onTabChange(fallbackTab.value);
   }, [activeTab, onTabChange, resolvedTabs]);
-  const items = useMemo3(() => {
+  const items = useMemo2(() => {
     return resolvedTabs.map((tab) => {
       const isActive = tab.value === activeTab;
       return {
@@ -1349,7 +1219,7 @@ var EventListTabs = ({
       };
     });
   }, [activeTab, resolvedTabs]);
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx2(
     Tabs,
     {
       ariaLabel,
@@ -1434,8 +1304,459 @@ var useEventListTabsHeaderOverflow = (recomputeOn, options) => {
   return { headerRef, titleRef, shouldUseSelectOverflow };
 };
 
+// src/events/list/event-list-venue-strip.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var TILE = 28;
+var TILE_GAP = 4;
+var CHIP = 36;
+var STRIP_INSET = 7;
+var FIT_TOLERANCE = 0.5;
+var useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect3 : useLayoutEffect;
+var isTabUnavailable = (tab) => !!tab.disabled || !!tab.isComingSoon;
+var resolveTabLabel = (tab) => tab.isComingSoon ? `${tab.label} (soon)` : tab.label;
+var StripFrame = ({
+  className,
+  children,
+  frameRef
+}) => /* @__PURE__ */ jsx3(
+  "div",
+  {
+    ref: frameRef,
+    className: cn(
+      "inline-flex items-center gap-1 rounded-agg-lg border border-agg-separator bg-agg-secondary p-1.5",
+      className
+    ),
+    children
+  }
+);
+var StripTile = ({
+  tab,
+  isActive,
+  shape,
+  motionClassName,
+  onSelect,
+  showTooltip = true,
+  isVenue = false
+}) => {
+  const isUnavailable = isTabUnavailable(tab);
+  const label = resolveTabLabel(tab);
+  const isExpanded = shape === "pill" || isActive;
+  const glyphClassName = cn(
+    "shrink-0",
+    motionClassName,
+    !isActive && shape === "tile" && "opacity-70 group-hover:opacity-100"
+  );
+  const glyph = tab.venueLogo ? /* @__PURE__ */ jsx3(VenueLogo, { venue: tab.venueLogo, size: "small", className: glyphClassName }) : tab.iconName ? /* @__PURE__ */ jsx3(
+    Icon,
+    {
+      name: tab.iconName,
+      size: "small",
+      color: "currentColor",
+      className: cn(tab.iconName === "warning-filled" ? "shrink-0" : glyphClassName)
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxs2(
+    "button",
+    {
+      type: "button",
+      "data-venue-tile": isVenue ? "" : void 0,
+      "aria-pressed": isActive,
+      "aria-label": label,
+      disabled: isUnavailable,
+      onClick: () => onSelect == null ? void 0 : onSelect(tab.value),
+      className: cn(
+        "agg-venue-strip-tile group relative inline-flex h-7 shrink-0 items-center gap-1.5",
+        "rounded-agg-sm font-agg-sans text-agg-sm leading-agg-5 font-agg-normal",
+        "cursor-pointer disabled:cursor-not-allowed",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-agg-primary/40",
+        motionClassName,
+        isExpanded ? "px-3" : "w-7 justify-center",
+        isActive ? "bg-agg-primary/10 text-agg-primary" : "bg-transparent text-agg-foreground hover:bg-agg-secondary-hover",
+        isUnavailable && "opacity-50 hover:bg-transparent"
+      ),
+      children: [
+        glyph,
+        isExpanded ? /* @__PURE__ */ jsx3("span", { className: "whitespace-nowrap", children: tab.label }) : null,
+        !isExpanded && showTooltip ? /* @__PURE__ */ jsx3(
+          "span",
+          {
+            role: "tooltip",
+            className: cn(
+              "pointer-events-none absolute left-1/2 top-[calc(100%+6px)] z-10 -translate-x-1/2",
+              "whitespace-nowrap rounded-agg-sm border border-agg-separator bg-agg-secondary px-2 py-1",
+              "text-agg-xs text-agg-foreground shadow-agg-card-hover",
+              "opacity-0 transition-opacity delay-150 group-hover:opacity-100 group-focus-visible:opacity-100"
+            ),
+            children: label
+          }
+        ) : null
+      ]
+    }
+  );
+};
+var EventListVenueStrip = ({
+  tabs,
+  activeTab,
+  onTabChange,
+  ariaLabel,
+  className,
+  fullWidth = false
+}) => {
+  const labels = useLabels3();
+  const {
+    features: { enableAnimations }
+  } = useSdkUiConfig2();
+  const { isLoading: isAppConfigLoading } = useAppConfig2();
+  const resolvedTabs = useEventListTabs(tabs);
+  const wrapRef = useRef3(null);
+  const ghostRef = useRef3(null);
+  const [fit, setFit] = useState3(null);
+  const [isListOpen, setIsListOpen] = useState3(false);
+  const motionClassName = getMotionClassName(
+    enableAnimations,
+    "transition-[color,background-color,opacity] duration-200 motion-reduce:transition-none"
+  );
+  const modeTabs = useMemo3(() => resolvedTabs.filter((tab) => !tab.venueLogo), [resolvedTabs]);
+  const venueTabs = useMemo3(() => resolvedTabs.filter((tab) => !!tab.venueLogo), [resolvedTabs]);
+  const activeVenueIndex = venueTabs.findIndex((tab) => tab.value === activeTab);
+  useEffect3(() => {
+    if (isAppConfigLoading) return;
+    const fallbackTab = resolvedTabs.find((tab) => !isTabUnavailable(tab));
+    if (!fallbackTab) return;
+    if (resolvedTabs.some((tab) => tab.value === activeTab && !isTabUnavailable(tab))) return;
+    onTabChange(fallbackTab.value);
+  }, [activeTab, isAppConfigLoading, onTabChange, resolvedTabs]);
+  useIsomorphicLayoutEffect(() => {
+    const wrap = wrapRef.current;
+    const ghost = ghostRef.current;
+    if (!wrap || !ghost) return;
+    const measure = () => {
+      const available = wrap.getBoundingClientRect().width;
+      const strip = ghost.getBoundingClientRect();
+      if (strip.width <= available + FIT_TOLERANCE) {
+        setFit(null);
+        return;
+      }
+      const firstTile = ghost.querySelector("[data-venue-tile]");
+      if (!firstTile) {
+        setFit(null);
+        return;
+      }
+      const activeTile = ghost.querySelector('[data-venue-tile][aria-pressed="true"]');
+      const room = strip.right - STRIP_INSET - firstTile.getBoundingClientRect().left - (strip.width - available);
+      const activeWidth = activeTile ? activeTile.getBoundingClientRect().width + TILE_GAP : 0;
+      const plain = Math.max(0, Math.floor((room - CHIP - activeWidth) / (TILE + TILE_GAP)));
+      setFit(plain + (activeTile ? 1 : 0));
+    };
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(wrap);
+    observer.observe(ghost);
+    return () => {
+      observer.disconnect();
+    };
+  }, [venueTabs, activeVenueIndex, fullWidth]);
+  useEffect3(() => {
+    if (!isListOpen) return;
+    const handlePointerDown = (event) => {
+      var _a;
+      if (!((_a = wrapRef.current) == null ? void 0 : _a.contains(event.target))) setIsListOpen(false);
+    };
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") setIsListOpen(false);
+    };
+    document.addEventListener("mousedown", handlePointerDown);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", handlePointerDown);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [isListOpen]);
+  const shownVenueTabs = useMemo3(() => {
+    if (fit === null) return venueTabs;
+    if (activeVenueIndex >= fit) {
+      const activeVenueTab = venueTabs[activeVenueIndex];
+      return activeVenueTab ? [...venueTabs.slice(0, Math.max(0, fit - 1)), activeVenueTab] : venueTabs.slice(0, fit);
+    }
+    return venueTabs.slice(0, fit);
+  }, [activeVenueIndex, fit, venueTabs]);
+  const foldedVenueTabs = useMemo3(
+    () => venueTabs.filter((tab) => !shownVenueTabs.includes(tab)),
+    [shownVenueTabs, venueTabs]
+  );
+  const foldedCount = foldedVenueTabs.length;
+  const modeShape = fullWidth ? "tile" : "pill";
+  const separator = /* @__PURE__ */ jsx3("span", { className: "mx-0.5 h-4 w-px shrink-0 bg-agg-separator", "aria-hidden": true });
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      ref: wrapRef,
+      className: cn(
+        "agg-venue-strip relative flex min-w-0 max-w-full flex-col items-end",
+        fullWidth && "w-full",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx3("div", __spreadProps(__spreadValues({ "aria-hidden": true }, { inert: "" }), { className: "h-0 w-full overflow-hidden", children: /* @__PURE__ */ jsxs2(StripFrame, { frameRef: ghostRef, className: "w-max", children: [
+          modeTabs.map((tab) => /* @__PURE__ */ jsx3(
+            StripTile,
+            {
+              tab,
+              isActive: tab.value === activeTab,
+              shape: modeShape,
+              showTooltip: false
+            },
+            tab.value
+          )),
+          venueTabs.length > 0 && modeTabs.length > 0 ? separator : null,
+          venueTabs.map((tab) => /* @__PURE__ */ jsx3(
+            StripTile,
+            {
+              tab,
+              isActive: tab.value === activeTab,
+              shape: "tile",
+              showTooltip: false,
+              isVenue: true
+            },
+            tab.value
+          ))
+        ] }) })),
+        /* @__PURE__ */ jsxs2(StripFrame, { className: cn("agg-venue-strip-bar relative", fullWidth && "w-full"), children: [
+          /* @__PURE__ */ jsxs2("div", { role: "group", "aria-label": ariaLabel, className: "contents", children: [
+            modeTabs.map((tab) => /* @__PURE__ */ jsx3(
+              StripTile,
+              {
+                tab,
+                isActive: tab.value === activeTab,
+                shape: modeShape,
+                motionClassName,
+                showTooltip: false,
+                onSelect: onTabChange
+              },
+              tab.value
+            )),
+            venueTabs.length > 0 && modeTabs.length > 0 ? separator : null,
+            shownVenueTabs.map((tab) => /* @__PURE__ */ jsx3(
+              StripTile,
+              {
+                tab,
+                isActive: tab.value === activeTab,
+                shape: "tile",
+                motionClassName,
+                onSelect: onTabChange,
+                isVenue: true
+              },
+              tab.value
+            ))
+          ] }),
+          foldedCount > 0 ? /* @__PURE__ */ jsxs2(
+            "button",
+            {
+              type: "button",
+              "aria-haspopup": "listbox",
+              "aria-expanded": isListOpen,
+              "aria-label": labels.eventList.moreVenuesAria(foldedCount),
+              onClick: () => setIsListOpen((open) => !open),
+              className: cn(
+                "agg-venue-strip-more inline-flex h-7 w-9 shrink-0 items-center justify-center",
+                "rounded-agg-sm font-agg-sans text-agg-xs tabular-nums cursor-pointer",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-agg-primary/40",
+                motionClassName,
+                fullWidth && "ml-auto",
+                isListOpen ? "bg-agg-secondary-hover text-agg-foreground" : "text-agg-foreground/70 hover:bg-agg-secondary-hover hover:text-agg-foreground"
+              ),
+              children: [
+                "+",
+                foldedCount
+              ]
+            }
+          ) : null
+        ] }),
+        isListOpen ? /* @__PURE__ */ jsx3(
+          "div",
+          {
+            role: "listbox",
+            "aria-label": labels.eventList.moreVenuesListAria,
+            className: cn(
+              "agg-venue-strip-list absolute right-0 top-[calc(100%+6px)] z-20 flex flex-col",
+              "rounded-agg-lg border border-agg-separator bg-agg-secondary p-1.5 shadow-agg-card-hover",
+              fullWidth ? "left-0" : "w-[248px]"
+            ),
+            children: /* @__PURE__ */ jsx3("div", { className: "flex max-h-[352px] flex-col overflow-y-auto", children: foldedVenueTabs.map((tab) => {
+              const isActive = tab.value === activeTab;
+              const isUnavailable = isTabUnavailable(tab);
+              return /* @__PURE__ */ jsxs2(
+                "button",
+                {
+                  type: "button",
+                  role: "option",
+                  "aria-selected": isActive,
+                  "aria-disabled": isUnavailable || void 0,
+                  disabled: isUnavailable,
+                  onClick: () => {
+                    onTabChange(tab.value);
+                    setIsListOpen(false);
+                  },
+                  className: cn(
+                    "flex h-8 shrink-0 items-center gap-2.5 rounded-agg-sm px-2.5",
+                    "font-agg-sans text-agg-sm leading-agg-5 cursor-pointer disabled:cursor-not-allowed",
+                    motionClassName,
+                    isActive ? "bg-agg-primary/10 text-agg-primary" : "text-agg-foreground hover:bg-agg-secondary-hover",
+                    isUnavailable && "opacity-50 hover:bg-transparent"
+                  ),
+                  children: [
+                    tab.iconName === "warning-filled" ? /* @__PURE__ */ jsx3(Icon, { name: "warning-filled", size: "small", color: "currentColor" }) : tab.venueLogo ? /* @__PURE__ */ jsx3(VenueLogo, { venue: tab.venueLogo, size: "small", className: "shrink-0" }) : null,
+                    /* @__PURE__ */ jsx3("span", { className: "flex-1 truncate text-left", children: resolveTabLabel(tab) })
+                  ]
+                },
+                tab.value
+              );
+            }) })
+          }
+        ) : null
+      ]
+    }
+  );
+};
+EventListVenueStrip.displayName = "EventListVenueStrip";
+
 // src/events/list/index.tsx
+import {
+  MarketStatus,
+  getVisibleVenueIdsByConfig,
+  useAppConfig as useAppConfig3,
+  useCategories,
+  useCategoryChildren,
+  useLabels as useLabels4,
+  useSdkUiConfig as useSdkUiConfig3,
+  useVenueEvents,
+  useVenueMarketMidpoints as useVenueMarketMidpoints2
+} from "@agg-build/hooks";
+import { VENUES } from "@agg-build/sdk";
+import * as Dialog from "@radix-ui/react-dialog";
+import { useCallback as useCallback3, useEffect as useEffect4, useMemo as useMemo5, useRef as useRef4, useState as useState4 } from "react";
+
+// src/events/list/category-sidebar.tsx
+import { useMemo as useMemo4 } from "react";
 import { jsx as jsx4, jsxs as jsxs3 } from "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 = useMemo4(() => {
+    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__ */ jsxs3(
+      "button",
+      {
+        type: "button",
+        "aria-current": isSelected ? "true" : void 0,
+        "aria-expanded": hasKnownChildren ? isExpanded : void 0,
+        className: isSelected ? selectedRowClassName : idleRowClassName,
+        onClick,
+        children: [
+          /* @__PURE__ */ jsx4("span", { className: "min-w-0 flex-1 truncate first-letter:uppercase", children: entry.label }),
+          hasKnownChildren ? /* @__PURE__ */ jsx4(
+            Icon,
+            {
+              name: isExpanded ? "chevron-up" : "chevron-down",
+              size: "small",
+              color: "currentColor",
+              className: "shrink-0 text-agg-muted-foreground"
+            }
+          ) : /* @__PURE__ */ jsx4("span", { className: "shrink-0 text-agg-muted-foreground", children: entry.eventCount })
+        ]
+      },
+      entry.id
+    );
+  };
+  const renderBranch = (category, depth) => {
+    var _a, _b, _c, _d, _e;
+    const label = (_a = category.displayName) != null ? _a : category.name;
+    const entry = {
+      id: category.id,
+      label,
+      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__ */ jsxs3("div", { className: "flex w-full flex-col", children: [
+      renderRow({
+        entry,
+        isExpanded,
+        isSelected,
+        onClick: () => onToggleCategory({ entry, depth, hasKnownChildren, isExpanded, isSelected })
+      }),
+      /* @__PURE__ */ jsx4(
+        "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__ */ jsx4("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx4("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__ */ jsxs3("div", { className: "flex w-full flex-col gap-1", children: [
+    /* @__PURE__ */ jsxs3(
+      "button",
+      {
+        type: "button",
+        "aria-current": !isDrilledIn ? "true" : void 0,
+        className: !isDrilledIn ? selectedRowClassName : idleRowClassName,
+        onClick: onSelectAll,
+        children: [
+          /* @__PURE__ */ jsx4("span", { className: "min-w-0 flex-1 truncate", children: labels.subcategoriesAll }),
+          /* @__PURE__ */ jsx4("span", { className: "shrink-0 text-agg-muted-foreground", children: totalEventCount })
+        ]
+      }
+    ),
+    sortedBaseChildren.map((category) => renderBranch(category, 0))
+  ] });
+};
+CategorySidebar.displayName = "CategorySidebar";
+
+// src/events/list/index.tsx
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var SORT_ICON_BY_VALUE = {
   volume24hr: "sort-volume-24hr",
   topArbitrage: "sort-top-arbitrage",
@@ -1496,27 +1817,27 @@ var EventList = ({
   stateRef
 }) => {
   var _a, _b, _c, _d, _e, _f;
-  const labels = useLabels3();
-  const { disabledVenues } = useAppConfig2();
+  const labels = useLabels4();
+  const { disabledVenues } = useAppConfig3();
   const {
     features: { enableVenueEventDiscoveryFilters, showSportsMarkets }
-  } = useSdkUiConfig2();
+  } = useSdkUiConfig3();
   const isDiscoveryFiltersEnabled = enableVenueEventDiscoveryFilters && !search;
   const resolvedTabs = useEventListTabs();
-  const visibleVenues = useMemo4(
+  const visibleVenues = useMemo5(
     () => disabledVenues.length === 0 ? void 0 : getVisibleVenueIdsByConfig(VENUES, disabledVenues),
     [disabledVenues]
   );
-  const [internalActiveTabValue, setInternalActiveTabValue] = useState3(
+  const [internalActiveTabValue, setInternalActiveTabValue] = useState4(
     (_b = initialVenueTab != null ? initialVenueTab : (_a = resolvedTabs[0]) == null ? void 0 : _a.value) != null ? _b : "matched"
   );
   const activeTabValue = controlledActiveVenueTab != null ? controlledActiveVenueTab : internalActiveTabValue;
-  const [internalSelectedSort, setInternalSelectedSort] = useState3(DEFAULT_EVENT_LIST_SORT);
+  const [internalSelectedSort, setInternalSelectedSort] = useState4(DEFAULT_EVENT_LIST_SORT);
   const selectedSort = controlledSelectedSort != null ? controlledSelectedSort : internalSelectedSort;
-  const [isSubcategoriesModalOpen, setIsSubcategoriesModalOpen] = useState3(false);
-  const [internalCategoryPath, setInternalCategoryPath] = useState3([]);
+  const [isSubcategoriesModalOpen, setIsSubcategoriesModalOpen] = useState4(false);
+  const [internalCategoryPath, setInternalCategoryPath] = useState4([]);
   const categoryPath = controlledCategoryPath != null ? controlledCategoryPath : internalCategoryPath;
-  const [collapsedCategoryIds, setCollapsedCategoryIds] = useState3(() => /* @__PURE__ */ new Set());
+  const [collapsedCategoryIds, setCollapsedCategoryIds] = useState4(() => /* @__PURE__ */ new Set());
   const handleActiveTabChange = useCallback3(
     (value) => {
       if (controlledActiveVenueTab == null) setInternalActiveTabValue(value);
@@ -1538,27 +1859,27 @@ var EventList = ({
     },
     [controlledCategoryPath, onCategoryPathChange]
   );
-  const sortItems = useMemo4(() => {
+  const sortItems = useMemo5(() => {
     return [
       {
         value: "volume24hr",
         label: labels.eventList.sortBy24hVolume,
-        icon: /* @__PURE__ */ jsx4(Icon, { name: SORT_ICON_BY_VALUE.volume24hr, size: "small", color: "currentColor" })
+        icon: /* @__PURE__ */ jsx5(Icon, { name: SORT_ICON_BY_VALUE.volume24hr, size: "small", color: "currentColor" })
       },
       {
         value: "topArbitrage",
         label: labels.eventList.sortByTopArbitrage,
-        icon: /* @__PURE__ */ jsx4(Icon, { name: SORT_ICON_BY_VALUE.topArbitrage, size: "small", color: "currentColor" })
+        icon: /* @__PURE__ */ jsx5(Icon, { name: SORT_ICON_BY_VALUE.topArbitrage, size: "small", color: "currentColor" })
       },
       {
         value: "volume",
         label: labels.eventList.sortByTotalVolume,
-        icon: /* @__PURE__ */ jsx4(Icon, { name: SORT_ICON_BY_VALUE.volume, size: "small", color: "currentColor" })
+        icon: /* @__PURE__ */ jsx5(Icon, { name: SORT_ICON_BY_VALUE.volume, size: "small", color: "currentColor" })
       },
       {
         value: "endDate",
         label: labels.eventList.sortByEndingSoon,
-        icon: /* @__PURE__ */ jsx4(Icon, { name: SORT_ICON_BY_VALUE.endDate, size: "small", color: "currentColor" })
+        icon: /* @__PURE__ */ jsx5(Icon, { name: SORT_ICON_BY_VALUE.endDate, size: "small", color: "currentColor" })
       }
     ];
   }, [
@@ -1568,8 +1889,8 @@ var EventList = ({
     labels.eventList.sortByTotalVolume
   ]);
   const baseCategoryId = (_c = categoryIds == null ? void 0 : categoryIds[0]) != null ? _c : null;
-  const previousBaseCategoryIdRef = useRef3(baseCategoryId);
-  useEffect3(() => {
+  const previousBaseCategoryIdRef = useRef4(baseCategoryId);
+  useEffect4(() => {
     var _a2, _b2;
     if (previousBaseCategoryIdRef.current === baseCategoryId) return;
     previousBaseCategoryIdRef.current = baseCategoryId;
@@ -1593,10 +1914,10 @@ var EventList = ({
     enabled: isDiscoveryFiltersEnabled,
     limit: 100
   });
-  const sortedTopLevelCategories = useMemo4(() => {
+  const sortedTopLevelCategories = useMemo5(() => {
     return sortCategoriesForNavigation(topLevelCategories);
   }, [topLevelCategories]);
-  const baseCategoryChildPrefetchIds = useMemo4(() => {
+  const baseCategoryChildPrefetchIds = useMemo5(() => {
     return Array.from(
       /* @__PURE__ */ new Set([
         ...baseCategoryId ? [baseCategoryId] : [],
@@ -1611,7 +1932,7 @@ var EventList = ({
     parentIds: baseCategoryChildPrefetchIds,
     limit: 100
   });
-  const visibleChildPrefetchIds = useMemo4(() => {
+  const visibleChildPrefetchIds = useMemo5(() => {
     var _a2, _b2;
     const ids = /* @__PURE__ */ new Set();
     if (baseCategoryId) {
@@ -1632,7 +1953,7 @@ var EventList = ({
     parentIds: visibleChildPrefetchIds,
     limit: 100
   });
-  const visibleGrandchildPrefetchIds = useMemo4(() => {
+  const visibleGrandchildPrefetchIds = useMemo5(() => {
     var _a2;
     const ids = /* @__PURE__ */ new Set();
     for (const expandedCategory of categoryPath) {
@@ -1648,7 +1969,7 @@ var EventList = ({
     parentIds: visibleGrandchildPrefetchIds,
     limit: 100
   });
-  const childrenByParentId = useMemo4(() => {
+  const childrenByParentId = useMemo5(() => {
     return new Map([
       ...baseChildrenByParentId,
       ...visibleChildrenByParentId,
@@ -1657,10 +1978,10 @@ var EventList = ({
   }, [baseChildrenByParentId, visibleChildrenByParentId, visibleGrandchildrenByParentId]);
   const controlledCategoryPathKey = (_d = controlledCategoryPath == null ? void 0 : controlledCategoryPath.map((entry) => entry.id).join(",")) != null ? _d : "";
   const controlledCategoryPathValidationKey = `${baseCategoryId != null ? baseCategoryId : ""}|${controlledCategoryPathKey}`;
-  const [validatedCategoryPathKey, setValidatedCategoryPathKey] = useState3(
+  const [validatedCategoryPathKey, setValidatedCategoryPathKey] = useState4(
     () => controlledCategoryPath == null || controlledCategoryPath.length === 0 ? controlledCategoryPathValidationKey : ""
   );
-  useEffect3(() => {
+  useEffect4(() => {
     if (controlledCategoryPath == null || controlledCategoryPath.length === 0) {
       setValidatedCategoryPathKey(controlledCategoryPathValidationKey);
       return;
@@ -1685,33 +2006,33 @@ var EventList = ({
     isBaseCategoryChildrenLoading
   ]);
   const shouldRenderSubcategoryFilters = isDiscoveryFiltersEnabled && baseCategoryId !== null && (((_f = (_e = childrenByParentId.get(baseCategoryId)) == null ? void 0 : _e.length) != null ? _f : 0) > 0 || categoryPath.length > 0);
-  const baseCategoryEventCount = useMemo4(() => {
+  const baseCategoryEventCount = useMemo5(() => {
     var _a2, _b2;
     return (_b2 = (_a2 = sortedTopLevelCategories.find((c) => c.id === baseCategoryId)) == null ? void 0 : _a2.eventCount) != null ? _b2 : 0;
   }, [baseCategoryId, sortedTopLevelCategories]);
-  const resolvedCategoryIds = useMemo4(() => {
+  const resolvedCategoryIds = useMemo5(() => {
     if (!isDiscoveryFiltersEnabled) return categoryIds;
     return resolveCategoryIdsFromPath(categoryPath, baseCategoryId ? [baseCategoryId] : void 0);
   }, [baseCategoryId, categoryIds, categoryPath, isDiscoveryFiltersEnabled]);
-  const sortQueryParams = useMemo4(() => {
+  const sortQueryParams = useMemo5(() => {
     return resolveSortQueryParams(selectedSort);
   }, [selectedSort]);
-  const activeTab = useMemo4(() => {
+  const activeTab = useMemo5(() => {
     return resolvedTabs.find((tab) => tab.value === activeTabValue);
   }, [activeTabValue, resolvedTabs]);
-  const venues = useMemo4(() => {
+  const venues = useMemo5(() => {
     return resolveTabVenus(activeTab, visibleVenues);
   }, [activeTab, visibleVenues]);
-  const matchStatus = useMemo4(() => {
+  const matchStatus = useMemo5(() => {
     return activeTabValue === "matched" ? activeTab == null ? void 0 : activeTab.matchStatus : void 0;
   }, [activeTabValue, activeTab]);
-  const resolvedMaxVisibleItems = useMemo4(() => {
+  const resolvedMaxVisibleItems = useMemo5(() => {
     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 = useMemo4(() => {
+  const endDateFrom = useMemo5(() => {
     if (search) return void 0;
     const BUCKET_MINUTES = 5;
     const bucket = /* @__PURE__ */ new Date();
@@ -1745,29 +2066,29 @@ var EventList = ({
     initialPages: initialLoadedPageCount,
     enabled: controlledCategoryPath == null || validatedCategoryPathKey === controlledCategoryPathValidationKey
   });
-  useEffect3(() => {
+  useEffect4(() => {
     if (stateRef) {
       stateRef.current = { venueTab: activeTabValue, loadedPageCount };
     }
   }, [stateRef, activeTabValue, loadedPageCount]);
-  const filteredEvents = useMemo4(() => {
+  const filteredEvents = useMemo5(() => {
     return filterEventsByTabValue(events, activeTabValue);
   }, [events, activeTabValue]);
-  const groupedEvents = useMemo4(() => {
+  const groupedEvents = useMemo5(() => {
     return splitEventsByLifecycle(filteredEvents);
   }, [filteredEvents]);
-  const orderedEvents = useMemo4(() => {
+  const orderedEvents = useMemo5(() => {
     return groupedEvents.open;
   }, [groupedEvents.open]);
-  const tileEvents = useMemo4(() => {
+  const tileEvents = useMemo5(() => {
     const normalizedEvents = orderedEvents.map((event) => mapEventToEventListItemEvent(event)).filter((event) => event != null);
     if (resolvedMaxVisibleItems == null) return normalizedEvents;
     return normalizedEvents.slice(0, resolvedMaxVisibleItems);
   }, [orderedEvents, resolvedMaxVisibleItems]);
-  const visibleVenueMarkets = useMemo4(() => {
+  const visibleVenueMarkets = useMemo5(() => {
     return collectEventListVenueMarkets(tileEvents);
   }, [tileEvents]);
-  const visibleMidpointVenueMarketIds = useMemo4(() => {
+  const visibleMidpointVenueMarketIds = useMemo5(() => {
     return collectMidpointVenueMarketIds(visibleVenueMarkets);
   }, [visibleVenueMarkets]);
   const { midpointRows: sharedMidpointRows, isLoading: isSharedMidpointsLoading } = useVenueMarketMidpoints2({
@@ -1778,8 +2099,8 @@ var EventList = ({
   const shouldRenderEmptyState = !isLoading && !isError && tileEvents.length === 0;
   const placeholderSkeletonCount = isPlaceholderData ? Math.min(Math.max(tileEvents.length, PLACEHOLDER_SKELETON_MIN_ITEMS), requestLimit) : 0;
   const shouldRenderPaginationLoadingItems = shouldPaginate && hasNextPage && !isPlaceholderData;
-  const loadMoreRef = useRef3(null);
-  useEffect3(() => {
+  const loadMoreRef = useRef4(null);
+  useEffect4(() => {
     if (!shouldPaginate) return;
     if (!hasNextPage) return;
     if (typeof IntersectionObserver === "undefined") return;
@@ -1830,7 +2151,7 @@ var EventList = ({
     onCategoryRootChange == null ? void 0 : onCategoryRootChange(baseCategoryId != null ? baseCategoryId : void 0);
   };
   if (shouldRenderLoadingState) {
-    return /* @__PURE__ */ jsx4(
+    return /* @__PURE__ */ jsx5(
       Skeleton,
       {
         view: "event-list",
@@ -1839,8 +2160,8 @@ var EventList = ({
       }
     );
   }
-  return /* @__PURE__ */ jsxs3("section", { className: "agg-event-list flex w-full flex-col gap-2 md:gap-5 t", children: [
-    /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4("section", { className: "agg-event-list flex w-full flex-col gap-2 md:gap-5 t", children: [
+    /* @__PURE__ */ jsxs4(
       "header",
       {
         className: cn(
@@ -1849,19 +2170,18 @@ var EventList = ({
           "gap-2 sm:flex-row sm:items-center sm:gap-4"
         ),
         children: [
-          /* @__PURE__ */ jsx4("div", { className: "agg-event-list-title min-w-32", children: /* @__PURE__ */ jsx4(Typography, { as: "h2", variant: "title", className: "truncate first-letter:uppercase", children: title }) }),
-          /* @__PURE__ */ jsxs3("div", { className: "hidden min-w-0 max-w-full items-center gap-3 md:flex", children: [
-            /* @__PURE__ */ jsx4(
-              EventListTabs,
+          /* @__PURE__ */ jsx5("div", { className: "agg-event-list-title min-w-32", children: /* @__PURE__ */ jsx5(Typography, { as: "h2", variant: "title", className: "truncate first-letter:uppercase", children: title }) }),
+          /* @__PURE__ */ jsxs4("div", { className: "hidden min-w-0 max-w-full items-center gap-3 md:flex", children: [
+            /* @__PURE__ */ jsx5(
+              EventListVenueStrip,
               {
                 ariaLabel: labels.eventList.tabsAria(title),
-                className: "agg-event-list-tabs min-w-0 flex-1 max-w-[600px]!",
+                className: "agg-event-list-tabs",
                 activeTab: activeTabValue,
-                onTabChange: handleActiveTabChange,
-                overflowBehavior: "scroll"
+                onTabChange: handleActiveTabChange
               }
             ),
-            /* @__PURE__ */ jsx4(
+            /* @__PURE__ */ jsx5(
               Select,
               {
                 ariaLabel: labels.eventList.sortByLabel,
@@ -1877,18 +2197,18 @@ var EventList = ({
         ]
       }
     ),
-    /* @__PURE__ */ jsxs3("div", { className: "flex w-full gap-2 md:hidden mb-3", children: [
-      /* @__PURE__ */ jsx4(
-        EventListTabs,
-        {
-          ariaLabel: labels.eventList.tabsAria(title),
-          className: "agg-event-list-tabs min-w-0 flex-1",
-          activeTab: activeTabValue,
-          onTabChange: handleActiveTabChange,
-          overflowBehavior: "select"
-        }
-      ),
-      /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(
+      EventListVenueStrip,
+      {
+        ariaLabel: labels.eventList.tabsAria(title),
+        className: "agg-event-list-tabs md:hidden!",
+        activeTab: activeTabValue,
+        onTabChange: handleActiveTabChange,
+        fullWidth: true
+      }
+    ),
+    /* @__PURE__ */ jsxs4("div", { className: "flex w-full gap-2 md:hidden mb-3", children: [
+      /* @__PURE__ */ jsx5(
         Select,
         {
           ariaLabel: labels.eventList.sortByLabel,
@@ -1899,23 +2219,23 @@ var EventList = ({
           contentClassName: "rounded-[12px] py-2 shadow-[0_8px_16px_rgba(0,0,0,0.1)]"
         }
       ),
-      shouldRenderSubcategoryFilters ? /* @__PURE__ */ jsx4(
+      shouldRenderSubcategoryFilters ? /* @__PURE__ */ jsx5(
         "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__ */ jsx4(Icon, { name: "apps", size: "small", color: "currentColor" })
+          children: /* @__PURE__ */ jsx5(Icon, { name: "apps", size: "small", color: "currentColor" })
         }
       ) : null
     ] }),
-    /* @__PURE__ */ jsxs3(
+    /* @__PURE__ */ jsxs4(
       "div",
       {
         className: cn("flex w-full gap-6", shouldRenderSubcategoryFilters ? "md:items-start" : ""),
         children: [
-          shouldRenderSubcategoryFilters ? /* @__PURE__ */ jsx4("aside", { className: "hidden w-[200px] shrink-0 md:block self-start sticky top-4", children: /* @__PURE__ */ jsx4("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__ */ jsx4(
+          shouldRenderSubcategoryFilters ? /* @__PURE__ */ jsx5("aside", { className: "hidden w-[200px] shrink-0 md:block self-start sticky top-4", children: /* @__PURE__ */ jsx5("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__ */ jsx5(
             CategorySidebar,
             {
               baseCategoryId,
@@ -1928,7 +2248,7 @@ var EventList = ({
               onToggleCategory: handleToggleSubcategory
             }
           ) }) }) : null,
-          /* @__PURE__ */ jsxs3(
+          /* @__PURE__ */ jsxs4(
             "div",
             {
               className: cn(
@@ -1938,7 +2258,7 @@ var EventList = ({
                 gridClassName
               ),
               children: [
-                isPlaceholderData ? Array.from({ length: placeholderSkeletonCount }).map((_, index) => /* @__PURE__ */ jsx4(
+                isPlaceholderData ? Array.from({ length: placeholderSkeletonCount }).map((_, index) => /* @__PURE__ */ jsx5(
                   EventListItem,
                   {
                     isLoading: true,
@@ -1948,7 +2268,7 @@ var EventList = ({
                   },
                   `placeholder-${index}`
                 )) : null,
-                (isPlaceholderData ? [] : tileEvents).map((event) => /* @__PURE__ */ jsx4(
+                (isPlaceholderData ? [] : tileEvents).map((event) => /* @__PURE__ */ jsx5(
                   EventListItem,
                   {
                     event,
@@ -1965,7 +2285,7 @@ var EventList = ({
                   },
                   event.id
                 )),
-                shouldRenderPaginationLoadingItems ? Array.from({ length: 6 }).map((_, index) => /* @__PURE__ */ jsx4(
+                shouldRenderPaginationLoadingItems ? Array.from({ length: 6 }).map((_, index) => /* @__PURE__ */ jsx5(
                   EventListItem,
                   {
                     isLoading: true,
@@ -1975,20 +2295,20 @@ var EventList = ({
                   },
                   `loading-${index}`
                 )) : null,
-                shouldRenderEmptyState ? /* @__PURE__ */ jsx4("div", { className: "col-span-full w-full", children: /* @__PURE__ */ jsx4(
+                shouldRenderEmptyState ? /* @__PURE__ */ jsx5("div", { className: "col-span-full w-full", children: /* @__PURE__ */ jsx5(
                   StateMessage,
                   {
                     title: labels.eventList.emptyTitle,
                     description: labels.eventList.emptyDescription,
-                    icon: /* @__PURE__ */ jsx4(Icon, { name: "search-empty" })
+                    icon: /* @__PURE__ */ jsx5(Icon, { name: "search-empty" })
                   }
                 ) }) : null,
-                isError ? /* @__PURE__ */ jsx4("div", { className: "col-span-full w-full", children: /* @__PURE__ */ jsx4(
+                isError ? /* @__PURE__ */ jsx5("div", { className: "col-span-full w-full", children: /* @__PURE__ */ jsx5(
                   StateMessage,
                   {
                     title: labels.eventList.errorTitle,
                     description: labels.eventList.errorDescription,
-                    icon: /* @__PURE__ */ jsx4(Icon, { name: "warning" })
+                    icon: /* @__PURE__ */ jsx5(Icon, { name: "warning" })
                   }
                 ) }) : null
               ]
@@ -1997,7 +2317,7 @@ var EventList = ({
         ]
       }
     ),
-    shouldRenderSubcategoryFilters ? /* @__PURE__ */ jsx4(Modal, { open: isSubcategoriesModalOpen, onOpenChange: setIsSubcategoriesModalOpen, children: /* @__PURE__ */ jsx4(
+    shouldRenderSubcategoryFilters ? /* @__PURE__ */ jsx5(Modal, { open: isSubcategoriesModalOpen, onOpenChange: setIsSubcategoriesModalOpen, children: /* @__PURE__ */ jsx5(
       Modal.Container,
       {
         classNames: {
@@ -2006,20 +2326,20 @@ var EventList = ({
           content: "items-end p-0 pointer-events-none",
           container: "w-full max-w-none border-0 bg-transparent shadow-none"
         },
-        children: /* @__PURE__ */ jsxs3("div", { className: "pointer-events-auto w-full rounded-t-[12px] border border-agg-separator bg-agg-secondary", children: [
-          /* @__PURE__ */ jsx4("div", { className: "flex justify-center pb-1 pt-3", "aria-hidden": "true", children: /* @__PURE__ */ jsx4("div", { className: "h-1 w-10 rounded-full bg-agg-muted-foreground/30" }) }),
-          /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between px-4 pb-2 pt-1", children: [
-            /* @__PURE__ */ jsx4(Dialog.Title, { className: "text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground", children: labels.eventList.subcategoriesLabel }),
-            /* @__PURE__ */ jsx4(
+        children: /* @__PURE__ */ jsxs4("div", { className: "pointer-events-auto w-full rounded-t-[12px] border border-agg-separator bg-agg-secondary", children: [
+          /* @__PURE__ */ jsx5("div", { className: "flex justify-center pb-1 pt-3", "aria-hidden": "true", children: /* @__PURE__ */ jsx5("div", { className: "h-1 w-10 rounded-full bg-agg-muted-foreground/30" }) }),
+          /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-between px-4 pb-2 pt-1", children: [
+            /* @__PURE__ */ jsx5(Dialog.Title, { className: "text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground", children: labels.eventList.subcategoriesLabel }),
+            /* @__PURE__ */ jsx5(
               Dialog.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__ */ jsx4(CloseIcon, { className: "h-5 w-5" })
+                children: /* @__PURE__ */ jsx5(CloseIcon, { className: "h-5 w-5" })
               }
             )
           ] }),
-          /* @__PURE__ */ jsx4("div", { className: "flex flex-col gap-1 px-4 pb-4", children: /* @__PURE__ */ jsx4(
+          /* @__PURE__ */ jsx5("div", { className: "flex flex-col gap-1 px-4 pb-4", children: /* @__PURE__ */ jsx5(
             CategorySidebar,
             {
               baseCategoryId,
@@ -2035,7 +2355,7 @@ var EventList = ({
         ] })
       }
     ) }) : null,
-    shouldPaginate && hasNextPage ? /* @__PURE__ */ jsx4("div", { ref: loadMoreRef, className: "agg-event-list-sentinel h-px w-full", "aria-hidden": true }) : null
+    shouldPaginate && hasNextPage ? /* @__PURE__ */ jsx5("div", { ref: loadMoreRef, className: "agg-event-list-sentinel h-px w-full", "aria-hidden": true }) : null
   ] });
 };
 EventList.displayName = "EventList";
@@ -2049,5 +2369,6 @@ export {
   useEventListTabs,
   EventListTabs,
   useEventListTabsHeaderOverflow,
+  EventListVenueStrip,
   EventList
 };