@agg-build/ui 4.19.1 → 4.21.1

package/dist/events.js

@@ -65,6 +65,7 @@ __export(events_exports, {
   EventListItem: () => EventListItem,
   EventListItemDetails: () => EventListItemDetails,
   EventListItemV2: () => EventListItemV2,
+  EventListVenueStrip: () => EventListVenueStrip,
   MarketDetails: () => MarketDetails,
   MarketDetailsList: () => MarketDetailsList,
   Orderbook: () => Orderbook,
@@ -12791,64 +12792,32 @@ var formatContractChartTime = (timestamp) => {
 
 // src/events/item-details/event-markets-chart.utils.ts
 var import_hooks49 = require("@agg-build/hooks");
-var EVENT_CHART_SERIES_LIMIT = 8;
-function resolveEventChartSelectedOutcome(markets, venue, selectedOutcomeId) {
-  var _a, _b;
-  if (!selectedOutcomeId) return null;
-  const allMarkets = normalizeVenueMarketCluster(markets);
-  const market = allMarkets.find(
-    (item) => item.venueMarketOutcomes.some((outcome2) => outcome2.id === selectedOutcomeId)
-  );
-  const outcome = market == null ? void 0 : market.venueMarketOutcomes.find((item) => item.id === selectedOutcomeId);
-  if (!market || !outcome) return null;
-  return (_b = (_a = collectEligibleVenueOutcomes({
-    venueMarkets: normalizeVenueMarketCluster(markets, market.id),
-    selectedOutcomeLabel: outcome.label,
-    selectedOutcomeId
-  }).find((item) => item.venue === venue)) == null ? void 0 : _a.outcomeId) != null ? _b : null;
-}
-function resolveEventChartPage(outcomes, selectedOutcomeId, requestedPage) {
+var EVENT_CHART_MARKET_LIMIT = 3;
+var marketVolume = (market) => {
   var _a;
-  const pinned = outcomes.find((outcome) => outcome.id === selectedOutcomeId);
-  const remaining = outcomes.filter((outcome) => outcome.id !== (pinned == null ? void 0 : pinned.id));
-  const pageSize = EVENT_CHART_SERIES_LIMIT - (pinned ? 1 : 0);
-  const pageCount = Math.max(1, Math.ceil(remaining.length / pageSize));
-  const page = Math.max(0, Math.min(requestedPage, pageCount - 1));
-  return {
-    page,
-    pageCount,
-    pinnedId: (_a = pinned == null ? void 0 : pinned.id) != null ? _a : null,
-    outcomes: [
-      ...pinned ? [pinned] : [],
-      ...remaining.slice(page * pageSize, (page + 1) * pageSize)
-    ]
-  };
-}
-var resolveEventChartOutcomes = (markets, venue, eventEndDate) => normalizeVenueMarketCluster(markets).filter((market) => market.venue === venue).sort(
-  (left, right) => {
-    var _a, _b;
-    return ((_a = right.volume) != null ? _a : 0) - ((_b = left.volume) != null ? _b : 0) || left.id.localeCompare(right.id);
-  }
-).flatMap((market) => {
+  return Number.isFinite(market.volume) ? Math.max(0, (_a = market.volume) != null ? _a : 0) : 0;
+};
+var resolveTopEventChartMarkets = (markets, venue) => normalizeVenueMarketCluster(markets).filter((market) => market.venue === venue && market.venueMarketOutcomes.length > 0).sort(
+  (left, right) => marketVolume(right) - marketVolume(left) || left.id.localeCompare(right.id)
+).slice(0, EVENT_CHART_MARKET_LIMIT);
+var resolveEventChartOutcomes = (markets, venue, eventEndDate) => resolveTopEventChartMarkets(markets, venue).flatMap((market) => {
   var _a, _b, _c;
   const state = (0, import_hooks49.resolveMarketTradingState)(market);
   const hasFinalResult = state.kind === "resolved" && market.venueMarketOutcomes.some((outcome) => outcome.winner === true) && market.venueMarketOutcomes.every((outcome) => outcome.winner != null);
   const settledAt = Date.parse((_c = (_b = (_a = market.resolutionDate) != null ? _a : market.endDate) != null ? _b : eventEndDate) != null ? _c : "") / 1e3;
-  const ordered = [...market.venueMarketOutcomes].sort((a, b) => {
-    const rank = (label2) => label2.trim().toLowerCase() === "yes" ? 0 : label2.trim().toLowerCase() === "no" ? 1 : 2;
-    return rank(a.label) - rank(b.label);
-  });
+  const ordered = sortOutcomeSelectorOutcomes(market.venueMarketOutcomes);
   return ordered.map((outcome) => {
-    var _a2;
+    var _a2, _b2;
     return {
       id: outcome.id,
       marketId: market.id,
       venue: market.venue,
       side: outcome.label,
+      outcomeLabel: ((_a2 = outcome.title) == null ? void 0 : _a2.trim()) || outcome.label,
       live: !state.isTradingDisabled,
       finalValue: hasFinalResult ? outcome.winner ? 100 : 0 : void 0,
       settledAt: Number.isFinite(settledAt) ? settledAt : void 0,
-      label: `${market.question} \xB7 ${((_a2 = outcome.title) == null ? void 0 : _a2.trim()) || outcome.label}`
+      label: `${market.question} \xB7 ${((_b2 = outcome.title) == null ? void 0 : _b2.trim()) || outcome.label}`
     };
   });
 });
@@ -12861,8 +12830,7 @@ var EventMarketsChart = ({
   eventEndDate,
   contractWindow,
   range,
-  live,
-  selectedOutcomeId
+  live
 }) => {
   var _a, _b, _c, _d, _e, _f, _g;
   const labels = (0, import_hooks50.useLabels)();
@@ -12874,31 +12842,20 @@ var EventMarketsChart = ({
     () => [...new Set(normalizeVenueMarketCluster(markets).map((market) => market.venue))],
     [markets]
   );
-  const venue = venues.includes(defaultVenue) ? defaultVenue : (_a = venues[0]) != null ? _a : defaultVenue;
-  const outcomes = (0, import_react22.useMemo)(
-    () => resolveEventChartOutcomes(markets, venue, eventEndDate),
-    [markets, venue, eventEndDate]
-  );
   const [selection, setSelection] = (0, import_react22.useState)(() => ({
-    venue,
-    page: 0,
+    defaultVenue,
+    venue: defaultVenue,
     hidden: /* @__PURE__ */ new Set()
   }));
-  const currentSelection = (0, import_react22.useMemo)(
-    () => selection.venue === venue ? selection : { venue, page: 0, hidden: /* @__PURE__ */ new Set() },
-    [selection, venue]
-  );
-  const pinnedOutcomeId = (0, import_react22.useMemo)(
-    () => resolveEventChartSelectedOutcome(markets, venue, selectedOutcomeId),
-    [markets, venue, selectedOutcomeId]
-  );
-  const page = (0, import_react22.useMemo)(
-    () => resolveEventChartPage(outcomes, pinnedOutcomeId, currentSelection.page),
-    [outcomes, pinnedOutcomeId, currentSelection.page]
-  );
-  const activeOutcomes = page.outcomes.filter(
-    (outcome) => outcome.id === page.pinnedId || !currentSelection.hidden.has(outcome.id)
+  const requestedVenue = selection.defaultVenue === defaultVenue ? selection.venue : defaultVenue;
+  const venue = venues.includes(requestedVenue) ? requestedVenue : (_a = venues[0]) != null ? _a : defaultVenue;
+  const hidden = selection.defaultVenue === defaultVenue && selection.venue === venue ? selection.hidden : /* @__PURE__ */ new Set();
+  const topMarkets = (0, import_react22.useMemo)(() => resolveTopEventChartMarkets(markets, venue), [markets, venue]);
+  const outcomes = (0, import_react22.useMemo)(
+    () => resolveEventChartOutcomes(topMarkets, venue, eventEndDate),
+    [topMarkets, venue, eventEndDate]
   );
+  const activeOutcomes = outcomes.filter((outcome) => !hidden.has(outcome.id));
   const activeIds = new Set(activeOutcomes.map((outcome) => outcome.id));
   const rollingWindow = (0, import_hooks50.useRollingChartWindow)({
     range,
@@ -12931,10 +12888,10 @@ var EventMarketsChart = ({
     live: live && !windowEnded
   });
   const stableColorIds = (0, import_react22.useMemo)(
-    () => [...new Set(outcomes.map((outcome) => outcome.marketId))].sort(),
-    [outcomes]
+    () => normalizeVenueMarketCluster(markets).filter((market) => market.venue === venue).map((market) => market.id).sort(),
+    [markets, venue]
   );
-  const allSeries = page.outcomes.map((outcome) => {
+  const allSeries = outcomes.map((outcome) => {
     var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h, _i;
     const settledAt = outcome.settledAt == null ? void 0 : contractWindow ? Math.min(outcome.settledAt, contractWindow.to) : outcome.settledAt;
     const outcomeLive = outcome.live && !windowEnded;
@@ -12970,110 +12927,109 @@ var EventMarketsChart = ({
   });
   const visibleSeries = allSeries.filter((series) => activeIds.has(series.id));
   const hasVisibleHistory = visibleSeries.some((series) => series.points.length > 0);
-  const volume = (0, import_react22.useMemo)(
-    () => normalizeVenueMarketCluster(markets).filter((market) => market.venue === venue).reduce((sum, market) => {
+  const volume = topMarkets.reduce(
+    (sum, market) => {
       var _a2;
-      return sum + ((_a2 = market.volume) != null ? _a2 : 0);
-    }, 0),
-    [markets, venue]
+      return sum + (Number.isFinite(market.volume) ? Math.max(0, (_a2 = market.volume) != null ? _a2 : 0) : 0);
+    },
+    0
   );
   const venueLabel = (_g = labels.venues[venue]) != null ? _g : venue;
   return /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)("div", { className: "agg-event-markets-chart flex flex-col gap-3", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)("div", { className: "flex flex-wrap items-center justify-between gap-2 text-agg-sm text-agg-muted-foreground", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("span", { role: "status", children: labels.eventItemDetails.comparisonSeriesCount(activeOutcomes.length, outcomes.length) }),
-      page.pageCount > 1 ? /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
-          Button,
-          {
-            variant: "tertiary",
-            size: "small",
-            disabled: page.page === 0,
-            onClick: (event) => {
-              event.stopPropagation();
-              setSelection(__spreadProps(__spreadValues({}, currentSelection), { page: page.page - 1 }));
-            },
-            prefix: /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(Icon, { name: "chevron-left", size: "small" }),
-            children: labels.eventItemDetails.comparisonPreviousSeries
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("span", { children: labels.eventItemDetails.comparisonSeriesPage(page.page + 1, page.pageCount) }),
-        /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
-          Button,
-          {
-            variant: "tertiary",
-            size: "small",
-            disabled: page.page + 1 === page.pageCount,
-            onClick: (event) => {
-              event.stopPropagation();
-              setSelection(__spreadProps(__spreadValues({}, currentSelection), { page: page.page + 1 }));
-            },
-            suffix: /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(Icon, { name: "chevron-right", size: "small" }),
-            children: labels.eventItemDetails.comparisonNextSeries
-          }
-        )
-      ] }) : null
-    ] }),
-    outcomes.length > EVENT_CHART_SERIES_LIMIT ? /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("p", { className: "text-agg-xs text-agg-muted-foreground", children: labels.eventItemDetails.comparisonSeriesBudget(EVENT_CHART_SERIES_LIMIT) }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { className: "agg-market-badges flex min-w-0 gap-2 overflow-x-auto pb-1 md:flex-wrap", children: venues.map((item) => {
+      var _a2, _b2;
+      return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
+        "button",
+        {
+          type: "button",
+          "aria-label": (_a2 = labels.venues[item]) != null ? _a2 : item,
+          "aria-pressed": venue === item,
+          className: "agg-market-badge cursor-pointer rounded-agg-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-agg-primary",
+          onClick: (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            if (item !== venue) setSelection({ defaultVenue, venue: item, hidden: /* @__PURE__ */ new Set() });
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
+            Badge,
+            {
+              text: (_b2 = labels.venues[item]) != null ? _b2 : item,
+              prefix: /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(VenueLogo, { venue: item, size: "small", title: item }),
+              size: "large",
+              isActive: venue === item,
+              classNames: { root: "shrink-0 border px-4 h-8 md:h-9" }
+            }
+          )
+        },
+        item
+      );
+    }) }),
     /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
       "div",
       {
         role: "group",
         "aria-label": labels.eventItemDetails.chartLegend,
-        className: "flex flex-wrap gap-x-5 gap-y-2",
-        children: allSeries.map((series) => /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)(
-          "button",
-          {
-            type: "button",
-            "data-chart-outcome-id": series.id,
-            "aria-pressed": activeIds.has(series.id),
-            disabled: series.id === page.pinnedId,
-            onClick: (event) => {
-              event.stopPropagation();
-              setSelection(() => {
-                const next = new Set(currentSelection.hidden);
-                if (next.has(series.id)) next.delete(series.id);
-                else next.add(series.id);
-                return __spreadProps(__spreadValues({}, currentSelection), { hidden: next });
-              });
+        className: "flex flex-col gap-2",
+        children: topMarkets.map((market) => {
+          var _a2;
+          return /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)(
+            "div",
+            {
+              "data-chart-market-id": market.id,
+              className: "flex min-w-0 flex-wrap items-center justify-between gap-x-4 gap-y-1",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)("span", { className: "flex min-w-0 items-center gap-2 text-agg-sm text-agg-foreground", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
+                    "span",
+                    {
+                      "aria-hidden": "true",
+                      className: "h-0 w-4 shrink-0 border-t-2",
+                      style: {
+                        borderColor: (_a2 = allSeries.find((series) => series.marketId === market.id)) == null ? void 0 : _a2.color
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("span", { className: "truncate", title: market.question, children: market.question })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { className: "agg-outcome-switch flex max-w-full flex-wrap gap-1 rounded-agg-full bg-agg-secondary", children: allSeries.filter((series) => series.marketId === market.id).map((series) => {
+                  const value = !activeIds.has(series.id) ? labels.eventItemDetails.comparisonHiddenSeries : series.pending ? labels.common.loading : series.points.length === 0 ? labels.eventItemDetails.marketHistoryUnavailable : formatDefaultChartValue(
+                    series.current != null ? series.current * 100 : series.points.at(-1).value
+                  );
+                  return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      "data-chart-outcome-id": series.id,
+                      "aria-label": `${series.label} ${value}`,
+                      "aria-pressed": activeIds.has(series.id),
+                      title: `${series.label} ${value}`,
+                      className: "cursor-pointer rounded-agg-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-agg-primary",
+                      onClick: (event) => {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        const next = new Set(hidden);
+                        if (next.has(series.id)) next.delete(series.id);
+                        else next.add(series.id);
+                        setSelection({ defaultVenue, venue, hidden: next });
+                      },
+                      children: /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
+                        Badge,
+                        {
+                          text: `${series.outcomeLabel} ${value}`,
+                          size: "large",
+                          isActive: activeIds.has(series.id),
+                          classNames: { root: "h-8 w-36 border px-4 tabular-nums md:h-9" }
+                        }
+                      )
+                    },
+                    series.id
+                  );
+                }) })
+              ]
             },
-            className: "flex max-w-full cursor-pointer items-center gap-2 rounded-agg-sm py-1 text-agg-sm text-agg-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-agg-primary disabled:cursor-default disabled:opacity-50",
-            style: { opacity: activeIds.has(series.id) ? 1 : 0.4 },
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
-                "span",
-                {
-                  "aria-hidden": "true",
-                  className: "h-0 w-4 shrink-0 border-t-2",
-                  style: {
-                    borderColor: series.color,
-                    borderTopStyle: series.lineStyle === "dashed" ? "dashed" : "solid"
-                  }
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("span", { className: "min-w-0 text-left [overflow-wrap:anywhere]", children: series.label }),
-              series.id === page.pinnedId ? /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("span", { children: labels.eventItemDetails.comparisonSelectedSeries }) : null,
-              /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)("span", { className: "inline-grid shrink-0 items-center font-agg-semibold tabular-nums", children: [
-                [
-                  formatDefaultChartValue(100),
-                  formatDefaultChartValue(99.9),
-                  labels.common.loading,
-                  labels.eventItemDetails.comparisonHiddenSeries,
-                  labels.eventItemDetails.marketHistoryUnavailable
-                ].map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
-                  "span",
-                  {
-                    "aria-hidden": "true",
-                    className: "invisible col-start-1 row-start-1 select-none",
-                    children: value
-                  },
-                  index
-                )),
-                /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("span", { className: "col-start-1 row-start-1", children: !activeIds.has(series.id) ? labels.eventItemDetails.comparisonHiddenSeries : series.pending ? labels.common.loading : series.points.length === 0 ? labels.eventItemDetails.marketHistoryUnavailable : series.current != null ? formatDefaultChartValue(series.current * 100) : formatDefaultChartValue(series.points.at(-1).value) })
-              ] })
-            ]
-          },
-          series.id
-        ))
+            market.id
+          );
+        })
       }
     ),
     visibleSeries.length === 0 && allSeries.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
@@ -13575,7 +13531,7 @@ var EventListItemDetailsContent = ({
   recurringMarkets,
   sportsLiveState
 }) => {
-  var _a, _b, _c, _d, _e, _f, _g;
+  var _a, _b, _c, _d, _e, _f;
   const [selectedChartType, setSelectedChartType] = (0, import_react23.useState)("line");
   const [chartView, setChartView] = (0, import_react23.useState)(defaultChartView);
   const lastAppliedEventSyncKeyRef = (0, import_react23.useRef)(null);
@@ -13903,7 +13859,6 @@ var EventListItemDetailsContent = ({
             {
               markets: event.venueMarkets,
               defaultVenue: event.venue,
-              selectedOutcomeId: (tradingContext == null ? void 0 : tradingContext.selectedEventId) === event.id ? tradingContext.selectedOutcomeId : (_f = scopedSelectedMarket == null ? void 0 : scopedSelectedMarket.venueMarketOutcomes[0]) == null ? void 0 : _f.id,
               eventEndDate: event.endDate,
               contractWindow,
               range: chartRangeOverride != null ? chartRangeOverride : config.chart.selectedChartTimeRange,
@@ -13918,7 +13873,7 @@ var EventListItemDetailsContent = ({
               selectedChartType,
               venueInfo,
               venueMarkets,
-              selectedMarketId: (_g = scopedSelectedMarket == null ? void 0 : scopedSelectedMarket.id) != null ? _g : null,
+              selectedMarketId: (_f = scopedSelectedMarket == null ? void 0 : scopedSelectedMarket.id) != null ? _f : null,
               livePrices,
               restMidpoints,
               bestMidpoint,
@@ -16415,10 +16370,10 @@ var MarketDetailsList = ({
 MarketDetailsList.displayName = "MarketDetailsList";
 
 // src/events/list/index.tsx
-var import_hooks58 = require("@agg-build/hooks");
+var import_hooks59 = require("@agg-build/hooks");
 var import_sdk17 = require("@agg-build/sdk");
 var Dialog2 = __toESM(require("@radix-ui/react-dialog"));
-var import_react31 = require("react");
+var import_react32 = require("react");
 
 // src/events/list/category-sidebar.tsx
 var import_react29 = require("react");
@@ -16741,8 +16696,327 @@ var EventListTabs = ({
 };
 EventListTabs.displayName = "EventListTabs";
 
-// src/events/list/index.tsx
+// src/events/list/event-list-venue-strip.tsx
+var import_hooks58 = require("@agg-build/hooks");
+var import_react31 = require("react");
 var import_jsx_runtime152 = require("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" ? import_react31.useEffect : import_react31.useLayoutEffect;
+var isTabUnavailable = (tab) => !!tab.disabled || !!tab.isComingSoon;
+var resolveTabLabel = (tab) => tab.isComingSoon ? `${tab.label} (soon)` : tab.label;
+var StripFrame = ({
+  className,
+  children,
+  frameRef
+}) => /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
+  "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 label2 = 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__ */ (0, import_jsx_runtime152.jsx)(VenueLogo, { venue: tab.venueLogo, size: "small", className: glyphClassName }) : tab.iconName ? /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
+    Icon,
+    {
+      name: tab.iconName,
+      size: "small",
+      color: "currentColor",
+      className: cn(tab.iconName === "warning-filled" ? "shrink-0" : glyphClassName)
+    }
+  ) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime152.jsxs)(
+    "button",
+    {
+      type: "button",
+      "data-venue-tile": isVenue ? "" : void 0,
+      "aria-pressed": isActive,
+      "aria-label": label2,
+      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__ */ (0, import_jsx_runtime152.jsx)("span", { className: "whitespace-nowrap", children: tab.label }) : null,
+        !isExpanded && showTooltip ? /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
+          "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: label2
+          }
+        ) : null
+      ]
+    }
+  );
+};
+var EventListVenueStrip = ({
+  tabs,
+  activeTab,
+  onTabChange,
+  ariaLabel,
+  className,
+  fullWidth = false
+}) => {
+  const labels = (0, import_hooks58.useLabels)();
+  const {
+    features: { enableAnimations }
+  } = (0, import_hooks58.useSdkUiConfig)();
+  const { isLoading: isAppConfigLoading } = (0, import_hooks58.useAppConfig)();
+  const resolvedTabs = useEventListTabs(tabs);
+  const wrapRef = (0, import_react31.useRef)(null);
+  const ghostRef = (0, import_react31.useRef)(null);
+  const [fit, setFit] = (0, import_react31.useState)(null);
+  const [isListOpen, setIsListOpen] = (0, import_react31.useState)(false);
+  const motionClassName = getMotionClassName(
+    enableAnimations,
+    "transition-[color,background-color,opacity] duration-200 motion-reduce:transition-none"
+  );
+  const modeTabs = (0, import_react31.useMemo)(() => resolvedTabs.filter((tab) => !tab.venueLogo), [resolvedTabs]);
+  const venueTabs = (0, import_react31.useMemo)(() => resolvedTabs.filter((tab) => !!tab.venueLogo), [resolvedTabs]);
+  const activeVenueIndex = venueTabs.findIndex((tab) => tab.value === activeTab);
+  (0, import_react31.useEffect)(() => {
+    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]);
+  (0, import_react31.useEffect)(() => {
+    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 = (0, import_react31.useMemo)(() => {
+    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 = (0, import_react31.useMemo)(
+    () => venueTabs.filter((tab) => !shownVenueTabs.includes(tab)),
+    [shownVenueTabs, venueTabs]
+  );
+  const foldedCount = foldedVenueTabs.length;
+  const modeShape = fullWidth ? "tile" : "pill";
+  const separator = /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("span", { className: "mx-0.5 h-4 w-px shrink-0 bg-agg-separator", "aria-hidden": true });
+  return /* @__PURE__ */ (0, import_jsx_runtime152.jsxs)(
+    "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__ */ (0, import_jsx_runtime152.jsx)("div", __spreadProps(__spreadValues({ "aria-hidden": true }, { inert: "" }), { className: "h-0 w-full overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime152.jsxs)(StripFrame, { frameRef: ghostRef, className: "w-max", children: [
+          modeTabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
+            StripTile,
+            {
+              tab,
+              isActive: tab.value === activeTab,
+              shape: modeShape,
+              showTooltip: false
+            },
+            tab.value
+          )),
+          venueTabs.length > 0 && modeTabs.length > 0 ? separator : null,
+          venueTabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
+            StripTile,
+            {
+              tab,
+              isActive: tab.value === activeTab,
+              shape: "tile",
+              showTooltip: false,
+              isVenue: true
+            },
+            tab.value
+          ))
+        ] }) })),
+        /* @__PURE__ */ (0, import_jsx_runtime152.jsxs)(StripFrame, { className: cn("agg-venue-strip-bar relative", fullWidth && "w-full"), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime152.jsxs)("div", { role: "group", "aria-label": ariaLabel, className: "contents", children: [
+            modeTabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
+              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__ */ (0, import_jsx_runtime152.jsx)(
+              StripTile,
+              {
+                tab,
+                isActive: tab.value === activeTab,
+                shape: "tile",
+                motionClassName,
+                onSelect: onTabChange,
+                isVenue: true
+              },
+              tab.value
+            ))
+          ] }),
+          foldedCount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime152.jsxs)(
+            "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__ */ (0, import_jsx_runtime152.jsx)(
+          "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__ */ (0, import_jsx_runtime152.jsx)("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__ */ (0, import_jsx_runtime152.jsxs)(
+                "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__ */ (0, import_jsx_runtime152.jsx)(Icon, { name: "warning-filled", size: "small", color: "currentColor" }) : tab.venueLogo ? /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(VenueLogo, { venue: tab.venueLogo, size: "small", className: "shrink-0" }) : null,
+                    /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("span", { className: "flex-1 truncate text-left", children: resolveTabLabel(tab) })
+                  ]
+                },
+                tab.value
+              );
+            }) })
+          }
+        ) : null
+      ]
+    }
+  );
+};
+EventListVenueStrip.displayName = "EventListVenueStrip";
+
+// src/events/list/index.tsx
+var import_jsx_runtime153 = require("react/jsx-runtime");
 var SORT_ICON_BY_VALUE = {
   volume24hr: "sort-volume-24hr",
   topArbitrage: "sort-top-arbitrage",
@@ -16803,69 +17077,69 @@ var EventList = ({
   stateRef
 }) => {
   var _a, _b, _c, _d, _e, _f;
-  const labels = (0, import_hooks58.useLabels)();
-  const { disabledVenues } = (0, import_hooks58.useAppConfig)();
+  const labels = (0, import_hooks59.useLabels)();
+  const { disabledVenues } = (0, import_hooks59.useAppConfig)();
   const {
     features: { enableVenueEventDiscoveryFilters, showSportsMarkets }
-  } = (0, import_hooks58.useSdkUiConfig)();
+  } = (0, import_hooks59.useSdkUiConfig)();
   const isDiscoveryFiltersEnabled = enableVenueEventDiscoveryFilters && !search;
   const resolvedTabs = useEventListTabs();
-  const visibleVenues = (0, import_react31.useMemo)(
-    () => disabledVenues.length === 0 ? void 0 : (0, import_hooks58.getVisibleVenueIdsByConfig)(import_sdk17.VENUES, disabledVenues),
+  const visibleVenues = (0, import_react32.useMemo)(
+    () => disabledVenues.length === 0 ? void 0 : (0, import_hooks59.getVisibleVenueIdsByConfig)(import_sdk17.VENUES, disabledVenues),
     [disabledVenues]
   );
-  const [internalActiveTabValue, setInternalActiveTabValue] = (0, import_react31.useState)(
+  const [internalActiveTabValue, setInternalActiveTabValue] = (0, import_react32.useState)(
     (_b = initialVenueTab != null ? initialVenueTab : (_a = resolvedTabs[0]) == null ? void 0 : _a.value) != null ? _b : "matched"
   );
   const activeTabValue = controlledActiveVenueTab != null ? controlledActiveVenueTab : internalActiveTabValue;
-  const [internalSelectedSort, setInternalSelectedSort] = (0, import_react31.useState)(DEFAULT_EVENT_LIST_SORT);
+  const [internalSelectedSort, setInternalSelectedSort] = (0, import_react32.useState)(DEFAULT_EVENT_LIST_SORT);
   const selectedSort = controlledSelectedSort != null ? controlledSelectedSort : internalSelectedSort;
-  const [isSubcategoriesModalOpen, setIsSubcategoriesModalOpen] = (0, import_react31.useState)(false);
-  const [internalCategoryPath, setInternalCategoryPath] = (0, import_react31.useState)([]);
+  const [isSubcategoriesModalOpen, setIsSubcategoriesModalOpen] = (0, import_react32.useState)(false);
+  const [internalCategoryPath, setInternalCategoryPath] = (0, import_react32.useState)([]);
   const categoryPath = controlledCategoryPath != null ? controlledCategoryPath : internalCategoryPath;
-  const [collapsedCategoryIds, setCollapsedCategoryIds] = (0, import_react31.useState)(() => /* @__PURE__ */ new Set());
-  const handleActiveTabChange = (0, import_react31.useCallback)(
+  const [collapsedCategoryIds, setCollapsedCategoryIds] = (0, import_react32.useState)(() => /* @__PURE__ */ new Set());
+  const handleActiveTabChange = (0, import_react32.useCallback)(
     (value) => {
       if (controlledActiveVenueTab == null) setInternalActiveTabValue(value);
       onActiveVenueTabChange == null ? void 0 : onActiveVenueTabChange(value, { history: "push" });
     },
     [controlledActiveVenueTab, onActiveVenueTabChange]
   );
-  const handleSelectedSortChange = (0, import_react31.useCallback)(
+  const handleSelectedSortChange = (0, import_react32.useCallback)(
     (value) => {
       if (controlledSelectedSort == null) setInternalSelectedSort(value);
       onSelectedSortChange == null ? void 0 : onSelectedSortChange(value, { history: "push" });
     },
     [controlledSelectedSort, onSelectedSortChange]
   );
-  const handleCategoryPathChange = (0, import_react31.useCallback)(
+  const handleCategoryPathChange = (0, import_react32.useCallback)(
     (value, options) => {
       if (controlledCategoryPath == null) setInternalCategoryPath(value);
       onCategoryPathChange == null ? void 0 : onCategoryPathChange(value, options);
     },
     [controlledCategoryPath, onCategoryPathChange]
   );
-  const sortItems = (0, import_react31.useMemo)(() => {
+  const sortItems = (0, import_react32.useMemo)(() => {
     return [
       {
         value: "volume24hr",
         label: labels.eventList.sortBy24hVolume,
-        icon: /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(Icon, { name: SORT_ICON_BY_VALUE.volume24hr, size: "small", color: "currentColor" })
+        icon: /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(Icon, { name: SORT_ICON_BY_VALUE.volume24hr, size: "small", color: "currentColor" })
       },
       {
         value: "topArbitrage",
         label: labels.eventList.sortByTopArbitrage,
-        icon: /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(Icon, { name: SORT_ICON_BY_VALUE.topArbitrage, size: "small", color: "currentColor" })
+        icon: /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(Icon, { name: SORT_ICON_BY_VALUE.topArbitrage, size: "small", color: "currentColor" })
       },
       {
         value: "volume",
         label: labels.eventList.sortByTotalVolume,
-        icon: /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(Icon, { name: SORT_ICON_BY_VALUE.volume, size: "small", color: "currentColor" })
+        icon: /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(Icon, { name: SORT_ICON_BY_VALUE.volume, size: "small", color: "currentColor" })
       },
       {
         value: "endDate",
         label: labels.eventList.sortByEndingSoon,
-        icon: /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(Icon, { name: SORT_ICON_BY_VALUE.endDate, size: "small", color: "currentColor" })
+        icon: /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(Icon, { name: SORT_ICON_BY_VALUE.endDate, size: "small", color: "currentColor" })
       }
     ];
   }, [
@@ -16875,8 +17149,8 @@ var EventList = ({
     labels.eventList.sortByTotalVolume
   ]);
   const baseCategoryId = (_c = categoryIds == null ? void 0 : categoryIds[0]) != null ? _c : null;
-  const previousBaseCategoryIdRef = (0, import_react31.useRef)(baseCategoryId);
-  (0, import_react31.useEffect)(() => {
+  const previousBaseCategoryIdRef = (0, import_react32.useRef)(baseCategoryId);
+  (0, import_react32.useEffect)(() => {
     var _a2, _b2;
     if (previousBaseCategoryIdRef.current === baseCategoryId) return;
     previousBaseCategoryIdRef.current = baseCategoryId;
@@ -16895,15 +17169,15 @@ var EventList = ({
     isDiscoveryFiltersEnabled,
     resolvedTabs
   ]);
-  const { categories: topLevelCategories } = (0, import_hooks58.useCategories)({
+  const { categories: topLevelCategories } = (0, import_hooks59.useCategories)({
     queryKeyScope: "event-list-top-categories",
     enabled: isDiscoveryFiltersEnabled,
     limit: 100
   });
-  const sortedTopLevelCategories = (0, import_react31.useMemo)(() => {
+  const sortedTopLevelCategories = (0, import_react32.useMemo)(() => {
     return sortCategoriesForNavigation(topLevelCategories);
   }, [topLevelCategories]);
-  const baseCategoryChildPrefetchIds = (0, import_react31.useMemo)(() => {
+  const baseCategoryChildPrefetchIds = (0, import_react32.useMemo)(() => {
     return Array.from(
       /* @__PURE__ */ new Set([
         ...baseCategoryId ? [baseCategoryId] : [],
@@ -16912,13 +17186,13 @@ var EventList = ({
       ])
     );
   }, [baseCategoryId, categoryPath, sortedTopLevelCategories]);
-  const { childrenByParentId: baseChildrenByParentId, isLoading: isBaseCategoryChildrenLoading } = (0, import_hooks58.useCategoryChildren)({
+  const { childrenByParentId: baseChildrenByParentId, isLoading: isBaseCategoryChildrenLoading } = (0, import_hooks59.useCategoryChildren)({
     queryKeyScope: "event-list-category-children",
     enabled: isDiscoveryFiltersEnabled,
     parentIds: baseCategoryChildPrefetchIds,
     limit: 100
   });
-  const visibleChildPrefetchIds = (0, import_react31.useMemo)(() => {
+  const visibleChildPrefetchIds = (0, import_react32.useMemo)(() => {
     var _a2, _b2;
     const ids = /* @__PURE__ */ new Set();
     if (baseCategoryId) {
@@ -16933,13 +17207,13 @@ var EventList = ({
     }
     return Array.from(ids);
   }, [baseCategoryId, baseChildrenByParentId, categoryPath]);
-  const { childrenByParentId: visibleChildrenByParentId } = (0, import_hooks58.useCategoryChildren)({
+  const { childrenByParentId: visibleChildrenByParentId } = (0, import_hooks59.useCategoryChildren)({
     queryKeyScope: "event-list-category-children",
     enabled: isDiscoveryFiltersEnabled,
     parentIds: visibleChildPrefetchIds,
     limit: 100
   });
-  const visibleGrandchildPrefetchIds = (0, import_react31.useMemo)(() => {
+  const visibleGrandchildPrefetchIds = (0, import_react32.useMemo)(() => {
     var _a2;
     const ids = /* @__PURE__ */ new Set();
     for (const expandedCategory of categoryPath) {
@@ -16949,13 +17223,13 @@ var EventList = ({
     }
     return Array.from(ids);
   }, [categoryPath, visibleChildrenByParentId]);
-  const { childrenByParentId: visibleGrandchildrenByParentId } = (0, import_hooks58.useCategoryChildren)({
+  const { childrenByParentId: visibleGrandchildrenByParentId } = (0, import_hooks59.useCategoryChildren)({
     queryKeyScope: "event-list-category-children",
     enabled: isDiscoveryFiltersEnabled,
     parentIds: visibleGrandchildPrefetchIds,
     limit: 100
   });
-  const childrenByParentId = (0, import_react31.useMemo)(() => {
+  const childrenByParentId = (0, import_react32.useMemo)(() => {
     return new Map([
       ...baseChildrenByParentId,
       ...visibleChildrenByParentId,
@@ -16964,10 +17238,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] = (0, import_react31.useState)(
+  const [validatedCategoryPathKey, setValidatedCategoryPathKey] = (0, import_react32.useState)(
     () => controlledCategoryPath == null || controlledCategoryPath.length === 0 ? controlledCategoryPathValidationKey : ""
   );
-  (0, import_react31.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     if (controlledCategoryPath == null || controlledCategoryPath.length === 0) {
       setValidatedCategoryPathKey(controlledCategoryPathValidationKey);
       return;
@@ -16992,33 +17266,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 = (0, import_react31.useMemo)(() => {
+  const baseCategoryEventCount = (0, import_react32.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_react31.useMemo)(() => {
+  const resolvedCategoryIds = (0, import_react32.useMemo)(() => {
     if (!isDiscoveryFiltersEnabled) return categoryIds;
     return resolveCategoryIdsFromPath(categoryPath, baseCategoryId ? [baseCategoryId] : void 0);
   }, [baseCategoryId, categoryIds, categoryPath, isDiscoveryFiltersEnabled]);
-  const sortQueryParams = (0, import_react31.useMemo)(() => {
+  const sortQueryParams = (0, import_react32.useMemo)(() => {
     return resolveSortQueryParams(selectedSort);
   }, [selectedSort]);
-  const activeTab = (0, import_react31.useMemo)(() => {
+  const activeTab = (0, import_react32.useMemo)(() => {
     return resolvedTabs.find((tab) => tab.value === activeTabValue);
   }, [activeTabValue, resolvedTabs]);
-  const venues = (0, import_react31.useMemo)(() => {
+  const venues = (0, import_react32.useMemo)(() => {
     return resolveTabVenus(activeTab, visibleVenues);
   }, [activeTab, visibleVenues]);
-  const matchStatus = (0, import_react31.useMemo)(() => {
+  const matchStatus = (0, import_react32.useMemo)(() => {
     return activeTabValue === "matched" ? activeTab == null ? void 0 : activeTab.matchStatus : void 0;
   }, [activeTabValue, activeTab]);
-  const resolvedMaxVisibleItems = (0, import_react31.useMemo)(() => {
+  const resolvedMaxVisibleItems = (0, import_react32.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_react31.useMemo)(() => {
+  const endDateFrom = (0, import_react32.useMemo)(() => {
     if (search) return void 0;
     const BUCKET_MINUTES = 5;
     const bucket = /* @__PURE__ */ new Date();
@@ -17034,14 +17308,14 @@ var EventList = ({
     isFetchingNextPage,
     isPlaceholderData,
     loadedPageCount
-  } = (0, import_hooks58.useVenueEvents)({
+  } = (0, import_hooks59.useVenueEvents)({
     queryKeyScope: "event-list",
     venues,
     search,
     categoryIds: resolvedCategoryIds,
     matchStatus,
     limit: requestLimit,
-    status: [import_hooks58.MarketStatus.open],
+    status: [import_hooks59.MarketStatus.open],
     sortBy: sortQueryParams.sortBy,
     sortDir: sortQueryParams.sortDir,
     endDateFrom,
@@ -17052,32 +17326,32 @@ var EventList = ({
     initialPages: initialLoadedPageCount,
     enabled: controlledCategoryPath == null || validatedCategoryPathKey === controlledCategoryPathValidationKey
   });
-  (0, import_react31.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     if (stateRef) {
       stateRef.current = { venueTab: activeTabValue, loadedPageCount };
     }
   }, [stateRef, activeTabValue, loadedPageCount]);
-  const filteredEvents = (0, import_react31.useMemo)(() => {
+  const filteredEvents = (0, import_react32.useMemo)(() => {
     return filterEventsByTabValue(events, activeTabValue);
   }, [events, activeTabValue]);
-  const groupedEvents = (0, import_react31.useMemo)(() => {
+  const groupedEvents = (0, import_react32.useMemo)(() => {
     return splitEventsByLifecycle(filteredEvents);
   }, [filteredEvents]);
-  const orderedEvents = (0, import_react31.useMemo)(() => {
+  const orderedEvents = (0, import_react32.useMemo)(() => {
     return groupedEvents.open;
   }, [groupedEvents.open]);
-  const tileEvents = (0, import_react31.useMemo)(() => {
+  const tileEvents = (0, import_react32.useMemo)(() => {
     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 = (0, import_react31.useMemo)(() => {
+  const visibleVenueMarkets = (0, import_react32.useMemo)(() => {
     return collectEventListVenueMarkets(tileEvents);
   }, [tileEvents]);
-  const visibleMidpointVenueMarketIds = (0, import_react31.useMemo)(() => {
+  const visibleMidpointVenueMarketIds = (0, import_react32.useMemo)(() => {
     return collectMidpointVenueMarketIds(visibleVenueMarkets);
   }, [visibleVenueMarkets]);
-  const { midpointRows: sharedMidpointRows, isLoading: isSharedMidpointsLoading } = (0, import_hooks58.useVenueMarketMidpoints)({
+  const { midpointRows: sharedMidpointRows, isLoading: isSharedMidpointsLoading } = (0, import_hooks59.useVenueMarketMidpoints)({
     venueMarketIds: visibleMidpointVenueMarketIds,
     enabled: visibleMidpointVenueMarketIds.length > 0
   });
@@ -17085,8 +17359,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 = (0, import_react31.useRef)(null);
-  (0, import_react31.useEffect)(() => {
+  const loadMoreRef = (0, import_react32.useRef)(null);
+  (0, import_react32.useEffect)(() => {
     if (!shouldPaginate) return;
     if (!hasNextPage) return;
     if (typeof IntersectionObserver === "undefined") return;
@@ -17137,7 +17411,7 @@ var EventList = ({
     onCategoryRootChange == null ? void 0 : onCategoryRootChange(baseCategoryId != null ? baseCategoryId : void 0);
   };
   if (shouldRenderLoadingState) {
-    return /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(
       Skeleton,
       {
         view: "event-list",
@@ -17146,8 +17420,8 @@ var EventList = ({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime152.jsxs)("section", { className: "agg-event-list flex w-full flex-col gap-2 md:gap-5 t", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime152.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime153.jsxs)("section", { className: "agg-event-list flex w-full flex-col gap-2 md:gap-5 t", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime153.jsxs)(
       "header",
       {
         className: cn(
@@ -17156,19 +17430,18 @@ var EventList = ({
           "gap-2 sm:flex-row sm:items-center sm:gap-4"
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("div", { className: "agg-event-list-title min-w-32", children: /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(Typography, { as: "h2", variant: "title", className: "truncate first-letter:uppercase", children: title2 }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime152.jsxs)("div", { className: "hidden min-w-0 max-w-full items-center gap-3 md:flex", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
-              EventListTabs,
+          /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { className: "agg-event-list-title min-w-32", children: /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(Typography, { as: "h2", variant: "title", className: "truncate first-letter:uppercase", children: title2 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime153.jsxs)("div", { className: "hidden min-w-0 max-w-full items-center gap-3 md:flex", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(
+              EventListVenueStrip,
               {
                 ariaLabel: labels.eventList.tabsAria(title2),
-                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__ */ (0, import_jsx_runtime152.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(
               Select,
               {
                 ariaLabel: labels.eventList.sortByLabel,
@@ -17184,18 +17457,18 @@ var EventList = ({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime152.jsxs)("div", { className: "flex w-full gap-2 md:hidden mb-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
-        EventListTabs,
-        {
-          ariaLabel: labels.eventList.tabsAria(title2),
-          className: "agg-event-list-tabs min-w-0 flex-1",
-          activeTab: activeTabValue,
-          onTabChange: handleActiveTabChange,
-          overflowBehavior: "select"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(
+      EventListVenueStrip,
+      {
+        ariaLabel: labels.eventList.tabsAria(title2),
+        className: "agg-event-list-tabs md:hidden!",
+        activeTab: activeTabValue,
+        onTabChange: handleActiveTabChange,
+        fullWidth: true
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime153.jsxs)("div", { className: "flex w-full gap-2 md:hidden mb-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(
         Select,
         {
           ariaLabel: labels.eventList.sortByLabel,
@@ -17206,23 +17479,23 @@ var EventList = ({
           contentClassName: "rounded-[12px] py-2 shadow-[0_8px_16px_rgba(0,0,0,0.1)]"
         }
       ),
-      shouldRenderSubcategoryFilters ? /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
+      shouldRenderSubcategoryFilters ? /* @__PURE__ */ (0, import_jsx_runtime153.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_runtime152.jsx)(Icon, { name: "apps", size: "small", color: "currentColor" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(Icon, { name: "apps", size: "small", color: "currentColor" })
         }
       ) : null
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime152.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime153.jsxs)(
       "div",
       {
         className: cn("flex w-full gap-6", shouldRenderSubcategoryFilters ? "md:items-start" : ""),
         children: [
-          shouldRenderSubcategoryFilters ? /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("aside", { className: "hidden w-[200px] shrink-0 md:block self-start sticky top-4", children: /* @__PURE__ */ (0, import_jsx_runtime152.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_runtime152.jsx)(
+          shouldRenderSubcategoryFilters ? /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("aside", { className: "hidden w-[200px] shrink-0 md:block self-start sticky top-4", children: /* @__PURE__ */ (0, import_jsx_runtime153.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_runtime153.jsx)(
             CategorySidebar,
             {
               baseCategoryId,
@@ -17235,7 +17508,7 @@ var EventList = ({
               onToggleCategory: handleToggleSubcategory
             }
           ) }) }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime152.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime153.jsxs)(
             "div",
             {
               className: cn(
@@ -17245,7 +17518,7 @@ var EventList = ({
                 gridClassName
               ),
               children: [
-                isPlaceholderData ? Array.from({ length: placeholderSkeletonCount }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
+                isPlaceholderData ? Array.from({ length: placeholderSkeletonCount }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(
                   EventListItem,
                   {
                     isLoading: true,
@@ -17255,7 +17528,7 @@ var EventList = ({
                   },
                   `placeholder-${index}`
                 )) : null,
-                (isPlaceholderData ? [] : tileEvents).map((event) => /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
+                (isPlaceholderData ? [] : tileEvents).map((event) => /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(
                   EventListItem,
                   {
                     event,
@@ -17268,11 +17541,11 @@ var EventList = ({
                     onMarketClick,
                     getMarketHref,
                     href: getEventHref == null ? void 0 : getEventHref(event),
-                    marketStatus: import_hooks58.MarketStatus.open
+                    marketStatus: import_hooks59.MarketStatus.open
                   },
                   event.id
                 )),
-                shouldRenderPaginationLoadingItems ? Array.from({ length: 6 }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
+                shouldRenderPaginationLoadingItems ? Array.from({ length: 6 }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(
                   EventListItem,
                   {
                     isLoading: true,
@@ -17282,20 +17555,20 @@ var EventList = ({
                   },
                   `loading-${index}`
                 )) : null,
-                shouldRenderEmptyState ? /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("div", { className: "col-span-full w-full", children: /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
+                shouldRenderEmptyState ? /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { className: "col-span-full w-full", children: /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(
                   StateMessage,
                   {
                     title: labels.eventList.emptyTitle,
                     description: labels.eventList.emptyDescription,
-                    icon: /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(Icon, { name: "search-empty" })
+                    icon: /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(Icon, { name: "search-empty" })
                   }
                 ) }) : null,
-                isError ? /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("div", { className: "col-span-full w-full", children: /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
+                isError ? /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { className: "col-span-full w-full", children: /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(
                   StateMessage,
                   {
                     title: labels.eventList.errorTitle,
                     description: labels.eventList.errorDescription,
-                    icon: /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(Icon, { name: "warning" })
+                    icon: /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(Icon, { name: "warning" })
                   }
                 ) }) : null
               ]
@@ -17304,7 +17577,7 @@ var EventList = ({
         ]
       }
     ),
-    shouldRenderSubcategoryFilters ? /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(Modal, { open: isSubcategoriesModalOpen, onOpenChange: setIsSubcategoriesModalOpen, children: /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
+    shouldRenderSubcategoryFilters ? /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(Modal, { open: isSubcategoriesModalOpen, onOpenChange: setIsSubcategoriesModalOpen, children: /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(
       Modal.Container,
       {
         classNames: {
@@ -17313,20 +17586,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__ */ (0, import_jsx_runtime152.jsxs)("div", { className: "pointer-events-auto w-full rounded-t-[12px] border border-agg-separator bg-agg-secondary", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("div", { className: "flex justify-center pb-1 pt-3", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("div", { className: "h-1 w-10 rounded-full bg-agg-muted-foreground/30" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime152.jsxs)("div", { className: "flex items-center justify-between px-4 pb-2 pt-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(Dialog2.Title, { className: "text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground", children: labels.eventList.subcategoriesLabel }),
-            /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime153.jsxs)("div", { className: "pointer-events-auto w-full rounded-t-[12px] border border-agg-separator bg-agg-secondary", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { className: "flex justify-center pb-1 pt-3", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { className: "h-1 w-10 rounded-full bg-agg-muted-foreground/30" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime153.jsxs)("div", { className: "flex items-center justify-between px-4 pb-2 pt-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(Dialog2.Title, { className: "text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground", children: labels.eventList.subcategoriesLabel }),
+            /* @__PURE__ */ (0, import_jsx_runtime153.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_runtime152.jsx)(CloseIcon, { className: "h-5 w-5" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(CloseIcon, { className: "h-5 w-5" })
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("div", { className: "flex flex-col gap-1 px-4 pb-4", children: /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { className: "flex flex-col gap-1 px-4 pb-4", children: /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(
             CategorySidebar,
             {
               baseCategoryId,
@@ -17342,7 +17615,7 @@ var EventList = ({
         ] })
       }
     ) }) : null,
-    shouldPaginate && hasNextPage ? /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("div", { ref: loadMoreRef, className: "agg-event-list-sentinel h-px w-full", "aria-hidden": true }) : null
+    shouldPaginate && hasNextPage ? /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { ref: loadMoreRef, className: "agg-event-list-sentinel h-px w-full", "aria-hidden": true }) : null
   ] });
 };
 EventList.displayName = "EventList";
@@ -17352,6 +17625,7 @@ EventList.displayName = "EventList";
   EventListItem,
   EventListItemDetails,
   EventListItemV2,
+  EventListVenueStrip,
   MarketDetails,
   MarketDetailsList,
   Orderbook,