@agg-market/ui 10.0.0 → 11.0.0

package/dist/{chunk-RYQSVETG.mjs → chunk-HMUMJUIL.mjs}

@@ -1,19 +1,25 @@
 import {
   EventList,
+  EventListItem,
   EventListItemDetails,
   MarketDetails,
-  isErrorWithStatus
-} from "./chunk-GYOCLZGH.mjs";
+  MarketDetailsList,
+  getDefaultEventListTabs,
+  isErrorWithStatus,
+  resolveTabVenus
+} from "./chunk-2KGE5AJQ.mjs";
 import {
   PlaceOrder,
   Settlement
-} from "./chunk-5G4T5R2H.mjs";
+} from "./chunk-UONHGMFI.mjs";
 import {
   Button,
   Card,
+  Header,
   Icon,
   Modal,
   RemoteImage,
+  Skeleton,
   StateMessage,
   Tabs,
   Typography,
@@ -21,224 +27,17 @@ import {
   __spreadProps,
   __spreadValues,
   cn
-} from "./chunk-XP7DREIX.mjs";
+} from "./chunk-IUJXJEDQ.mjs";
 
 // src/pages/home/index.tsx
-import { useEffect, useMemo, useState } from "react";
-import { useCategories, useLabels } from "@agg-market/hooks";
-
-// src/pages/home/home.constants.ts
-var ALL_CATEGORIES_TAB_VALUE = "trending";
-var DEFAULT_CATEGORIES_LIMIT = 100;
-var DEFAULT_ALL_CATEGORY_TAB_LABEL = "Trending";
-var getDefaultEventSectionItems = (labels) => {
-  return [
-    {
-      id: "top-markets",
-      title: labels.home.topMarkets,
-      maxItemsPerRow: 3,
-      limit: 3,
-      maxVisibleItems: 3
-    },
-    {
-      id: "new-markets",
-      title: labels.home.newMarkets,
-      maxItemsPerRow: 3,
-      limit: 3,
-      maxVisibleItems: 3
-    }
-  ];
-};
-
-// src/pages/home/home.utils.ts
-var resolveCategoryTabs = (categories, allCategoryTabLabel) => {
-  const seenCategoryIds = /* @__PURE__ */ new Set();
-  const tabs = [
-    {
-      value: ALL_CATEGORIES_TAB_VALUE,
-      label: allCategoryTabLabel,
-      iconName: "arrow-trend-up"
-    }
-  ];
-  for (const category of categories) {
-    if (seenCategoryIds.has(category.id))
-      continue;
-    seenCategoryIds.add(category.id);
-    tabs.push({
-      value: category.id,
-      label: category.name.trim().toLowerCase(),
-      categoryIds: [category.id]
-    });
-  }
-  return tabs;
-};
-var resolveInitialTabValue = (tabs, defaultActiveTab) => {
-  var _a, _b;
-  if (defaultActiveTab) {
-    const hasDefaultTab = tabs.some((tab) => tab.value === defaultActiveTab);
-    if (hasDefaultTab)
-      return defaultActiveTab;
-  }
-  return (_b = (_a = tabs[0]) == null ? void 0 : _a.value) != null ? _b : ALL_CATEGORIES_TAB_VALUE;
-};
-
-// src/pages/home/index.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var HomePage = ({
-  tabs,
-  defaultActiveTab,
-  onTabChange,
-  eventSectionItems,
-  classNames,
-  categoriesLimit = DEFAULT_CATEGORIES_LIMIT,
-  allCategoryTabLabel = DEFAULT_ALL_CATEGORY_TAB_LABEL
-}) => {
-  const labels = useLabels();
-  const hasCustomTabs = !!tabs && tabs.length > 0;
-  const resolvedAllCategoryTabLabel = allCategoryTabLabel === DEFAULT_ALL_CATEGORY_TAB_LABEL ? labels.home.trending : allCategoryTabLabel;
-  const { categories, isLoading: isCategoriesLoading } = useCategories({
-    limit: categoriesLimit,
-    enabled: !hasCustomTabs
-  });
-  const categoryTabs = useMemo(() => {
-    return resolveCategoryTabs(categories, resolvedAllCategoryTabLabel);
-  }, [categories, resolvedAllCategoryTabLabel]);
-  const resolvedTabs = useMemo(() => {
-    if (hasCustomTabs && tabs)
-      return tabs;
-    return categoryTabs;
-  }, [categoryTabs, hasCustomTabs, tabs]);
-  const resolvedEventSectionItems = eventSectionItems && eventSectionItems.length > 0 ? eventSectionItems : getDefaultEventSectionItems(labels);
-  const [activeTabValue, setActiveTabValue] = useState(() => {
-    return resolveInitialTabValue(resolvedTabs, defaultActiveTab);
-  });
-  useEffect(() => {
-    setActiveTabValue((currentValue) => {
-      const hasCurrentValue = resolvedTabs.some((tab) => tab.value === currentValue);
-      if (hasCurrentValue)
-        return currentValue;
-      return resolveInitialTabValue(resolvedTabs, defaultActiveTab);
-    });
-  }, [defaultActiveTab, resolvedTabs]);
-  const tabsItems = useMemo(() => {
-    return resolvedTabs.map((tab) => {
-      const isActive = tab.value === activeTabValue;
-      return {
-        value: tab.value,
-        label: tab.label,
-        icon: tab.iconName ? /* @__PURE__ */ jsx(
-          Icon,
-          {
-            name: tab.iconName,
-            size: "medium",
-            color: isActive ? "var(--agg-color-primary)" : "var(--agg-color-foreground)"
-          }
-        ) : void 0,
-        disabled: tab.disabled
-      };
-    });
-  }, [activeTabValue, resolvedTabs]);
-  const activeTab = useMemo(() => {
-    return resolvedTabs.find((tab) => tab.value === activeTabValue);
-  }, [activeTabValue, resolvedTabs]);
-  const resolvedSectionItems = useMemo(() => {
-    var _a, _b, _c, _d;
-    if (activeTabValue === ALL_CATEGORIES_TAB_VALUE) {
-      return resolvedEventSectionItems;
-    }
-    const maxItemsPerRow = (_b = (_a = resolvedEventSectionItems[0]) == null ? void 0 : _a.maxItemsPerRow) != null ? _b : 3;
-    const firstSectionLimit = (_c = resolvedEventSectionItems[0]) == null ? void 0 : _c.limit;
-    const limit = firstSectionLimit && Number.isFinite(firstSectionLimit) ? Math.max(9, Math.floor(firstSectionLimit)) : 9;
-    return [
-      {
-        id: `${activeTabValue}-markets`,
-        title: (_d = activeTab == null ? void 0 : activeTab.label) != null ? _d : activeTabValue,
-        maxItemsPerRow,
-        limit,
-        maxVisibleItems: void 0,
-        search: activeTab == null ? void 0 : activeTab.search,
-        categoryIds: activeTab == null ? void 0 : activeTab.categoryIds
-      }
-    ];
-  }, [activeTab, activeTabValue, resolvedEventSectionItems]);
-  const handleTabChange = (value) => {
-    setActiveTabValue(value);
-    onTabChange == null ? void 0 : onTabChange(value);
-  };
-  if (!hasCustomTabs && isCategoriesLoading) {
-    return /* @__PURE__ */ jsx("section", { className: cn("flex w-full flex-col", classNames == null ? void 0 : classNames.root), children: /* @__PURE__ */ jsx(
-      "header",
-      {
-        className: cn(
-          "w-full bg-agg-secondary border-b border-agg-separator",
-          classNames == null ? void 0 : classNames.header
-        ),
-        children: /* @__PURE__ */ jsx("div", { className: cn("w-full px-4 md:px-10 h-10", classNames == null ? void 0 : classNames.tabs) })
-      }
-    ) });
-  }
-  return /* @__PURE__ */ jsxs("section", { className: cn("flex w-full flex-col", classNames == null ? void 0 : classNames.root), children: [
-    /* @__PURE__ */ jsx(
-      "header",
-      {
-        className: cn("w-full bg-agg-secondary border-b border-agg-separator", classNames == null ? void 0 : classNames.header),
-        children: /* @__PURE__ */ jsx(
-          Tabs,
-          {
-            ariaLabel: labels.home.categoryTabsAria,
-            variant: "underline",
-            className: cn("w-full px-4 md:px-10", classNames == null ? void 0 : classNames.tabs),
-            items: tabsItems,
-            value: activeTabValue,
-            onChange: handleTabChange
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "main",
-      {
-        className: cn(
-          "flex w-full flex-col gap-4 md:gap-10 px-4 md:px-10 py-4 md:py-8",
-          classNames == null ? void 0 : classNames.sections
-        ),
-        children: resolvedSectionItems.map((eventSectionItem) => {
-          var _a, _b, _c;
-          return /* @__PURE__ */ jsx(
-            EventList,
-            {
-              title: eventSectionItem.title,
-              maxItemsPerRow: eventSectionItem.maxItemsPerRow,
-              limit: eventSectionItem.limit,
-              maxVisibleItems: eventSectionItem.maxVisibleItems,
-              search: (_b = eventSectionItem.search) != null ? _b : activeTab == null ? void 0 : activeTab.search,
-              categoryIds: (_c = eventSectionItem.categoryIds) != null ? _c : activeTab == null ? void 0 : activeTab.categoryIds
-            },
-            (_a = eventSectionItem.id) != null ? _a : eventSectionItem.title
-          );
-        })
-      }
-    )
-  ] });
-};
-HomePage.displayName = "HomePage";
+import { useEffect as useEffect2, useMemo as useMemo2, useRef, useState as useState2 } from "react";
+import { useCategories, useLabels as useLabels2, useSdkUiConfig, useVenueEvents } from "@agg-market/hooks";
 
 // src/pages/event-market/index.tsx
-import { useEffect as useEffect2, useMemo as useMemo2, useState as useState2 } from "react";
-import { useVenueEvent, useLabels as useLabels2 } from "@agg-market/hooks";
+import { useMemo, useState } from "react";
+import { useVenueEvent, useLabels } from "@agg-market/hooks";
 import dayjs from "dayjs";
-import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var getMarketDateValue = (market, fallbackIndex) => {
-  var _a, _b, _c;
-  const candidateDate = (_c = (_b = (_a = market.endDate) != null ? _a : market.startDate) != null ? _b : market.creationDate) != null ? _c : null;
-  if (!candidateDate)
-    return Number.MAX_SAFE_INTEGER - 1 + fallbackIndex;
-  const parsedDate = dayjs(candidateDate);
-  if (!parsedDate.isValid()) {
-    return Number.MAX_SAFE_INTEGER - 1 + fallbackIndex;
-  }
-  return parsedDate.valueOf();
-};
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var resolveHeroMarketId = (event, heroMarketId) => {
   var _a, _b;
   if (!((_a = event == null ? void 0 : event.venueMarkets) == null ? void 0 : _a.length))
@@ -262,32 +61,11 @@ var buildHeroEvent = (event, heroMarketId) => {
     venueMarkets: [heroMarket]
   });
 };
-var resolveDetailedMarkets = (event, heroMarketId) => {
-  return event.venueMarkets.filter((market) => market.id !== heroMarketId).map((market, index) => ({
-    market,
-    index
-  })).sort(
-    (leftItem, rightItem) => {
-      return getMarketDateValue(leftItem.market, leftItem.index) - getMarketDateValue(rightItem.market, rightItem.index);
-    }
-  ).map((item) => item.market);
-};
-var resolveInitialExpandedMarketId = (detailedMarkets, defaultExpandedMarketId) => {
-  var _a, _b;
-  if (!detailedMarkets.length)
-    return null;
-  if (defaultExpandedMarketId) {
-    const matchingMarket = detailedMarkets.find((market) => market.id === defaultExpandedMarketId);
-    if (matchingMarket)
-      return matchingMarket.id;
-  }
-  return (_b = (_a = detailedMarkets[0]) == null ? void 0 : _a.id) != null ? _b : null;
-};
 var EventMarketPageMobileTrade = ({
   placeOrder,
   classNames
 }) => {
-  const [isOpen, setIsOpen] = useState2(false);
+  const [isOpen, setIsOpen] = useState(false);
   const handleOpen = () => {
     setIsOpen(true);
   };
@@ -297,15 +75,15 @@ var EventMarketPageMobileTrade = ({
   const handleClose = () => {
     setIsOpen(false);
   };
-  return /* @__PURE__ */ jsxs2(Fragment, { children: [
-    /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
       "div",
       {
         className: cn(
           "fixed inset-x-0 bottom-0 z-20 flex justify-end p-4 lg:hidden",
           classNames == null ? void 0 : classNames.mobileTradeCta
         ),
-        children: /* @__PURE__ */ jsx2(
+        children: /* @__PURE__ */ jsx(
           Button,
           {
             size: "large",
@@ -322,7 +100,7 @@ var EventMarketPageMobileTrade = ({
         )
       }
     ),
-    /* @__PURE__ */ jsx2(Modal, { open: isOpen, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsx2(
+    /* @__PURE__ */ jsx(Modal, { open: isOpen, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsx(
       Modal.Container,
       {
         "aria-label": placeOrder.title,
@@ -334,7 +112,7 @@ var EventMarketPageMobileTrade = ({
             classNames == null ? void 0 : classNames.mobileTradeModal
           )
         },
-        children: /* @__PURE__ */ jsx2(
+        children: /* @__PURE__ */ jsx(
           PlaceOrder,
           __spreadProps(__spreadValues({}, placeOrder), {
             isDismissible: true,
@@ -349,16 +127,16 @@ var EventMarketPageMobileTrade = ({
 var EventMarketPageUnavailableState = ({
   ariaLabel
 }) => {
-  const labels = useLabels2();
-  return /* @__PURE__ */ jsx2(
+  const labels = useLabels();
+  return /* @__PURE__ */ jsx(
     Card,
     {
       className: "rounded-agg-xl border border-agg-separator bg-agg-secondary p-6 shadow-none hover:shadow-none",
       role: "status",
       "aria-label": ariaLabel != null ? ariaLabel : labels.eventMarketPage.unavailableAria,
-      children: /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ jsx2(Typography, { variant: "body-large-strong", children: labels.eventMarketPage.unavailableTitle }),
-        /* @__PURE__ */ jsx2(Typography, { variant: "label", className: "text-agg-muted-foreground", children: labels.eventMarketPage.unavailableDescription })
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "body-large-strong", children: labels.eventMarketPage.unavailableTitle }),
+        /* @__PURE__ */ jsx(Typography, { variant: "label", className: "text-agg-muted-foreground", children: labels.eventMarketPage.unavailableDescription })
       ] })
     }
   );
@@ -366,8 +144,8 @@ var EventMarketPageUnavailableState = ({
 var EventMarketPageNotFoundState = ({
   ariaLabel
 }) => {
-  const labels = useLabels2();
-  return /* @__PURE__ */ jsx2(Card, { className: "overflow-hidden rounded-agg-xl border border-agg-separator bg-agg-secondary p-0 shadow-none hover:shadow-none", children: /* @__PURE__ */ jsx2(
+  const labels = useLabels();
+  return /* @__PURE__ */ jsx(Card, { className: "overflow-hidden rounded-agg-xl border border-agg-separator bg-agg-secondary p-0 shadow-none hover:shadow-none", children: /* @__PURE__ */ jsx(
     StateMessage,
     {
       ariaLabel: ariaLabel != null ? ariaLabel : labels.eventItemDetails.notFoundAria,
@@ -382,7 +160,7 @@ var EventMarketPageLoadingState = ({
   settlement,
   classNames
 }) => {
-  const labels = useLabels2();
+  const labels = useLabels();
   const fallbackSettlement = settlement != null ? settlement : {
     sectionLabel: labels.trading.settlementSection,
     question: labels.eventMarketPage.loadingSettlementQuestion,
@@ -395,8 +173,8 @@ var EventMarketPageLoadingState = ({
       }
     ]
   };
-  return /* @__PURE__ */ jsxs2("section", { className: cn("w-full pb-24 lg:pb-0", classNames == null ? void 0 : classNames.root), children: [
-    /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs("section", { className: cn("w-full pb-24 lg:pb-0", classNames == null ? void 0 : classNames.root), children: [
+    /* @__PURE__ */ jsxs(
       "div",
       {
         className: cn(
@@ -404,8 +182,8 @@ var EventMarketPageLoadingState = ({
           classNames == null ? void 0 : classNames.content
         ),
         children: [
-          /* @__PURE__ */ jsxs2("div", { className: cn("flex min-w-0 flex-1 flex-col gap-6", classNames == null ? void 0 : classNames.main), children: [
-            /* @__PURE__ */ jsx2(
+          /* @__PURE__ */ jsxs("div", { className: cn("flex min-w-0 flex-1 flex-col gap-6", classNames == null ? void 0 : classNames.main), children: [
+            /* @__PURE__ */ jsx(
               EventListItemDetails,
               {
                 isLoading: true,
@@ -414,35 +192,35 @@ var EventMarketPageLoadingState = ({
                 }
               }
             ),
-            /* @__PURE__ */ jsxs2("div", { className: cn("flex flex-col gap-3", classNames == null ? void 0 : classNames.markets), children: [
-              /* @__PURE__ */ jsx2(MarketDetails, { isLoading: true, isOpened: true, classNames: { root: "w-full" } }),
-              /* @__PURE__ */ jsx2(MarketDetails, { isLoading: true, isOpened: false, classNames: { root: "w-full" } }),
-              /* @__PURE__ */ jsx2(MarketDetails, { isLoading: true, isOpened: false, classNames: { root: "w-full" } })
+            /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-3", classNames == null ? void 0 : classNames.markets), children: [
+              /* @__PURE__ */ jsx(MarketDetails, { isLoading: true, isOpened: true, classNames: { root: "w-full" } }),
+              /* @__PURE__ */ jsx(MarketDetails, { isLoading: true, isOpened: false, classNames: { root: "w-full" } }),
+              /* @__PURE__ */ jsx(MarketDetails, { isLoading: true, isOpened: false, classNames: { root: "w-full" } })
             ] }),
-            /* @__PURE__ */ jsx2("div", { className: "md:hidden", children: /* @__PURE__ */ jsx2(Settlement, __spreadProps(__spreadValues({}, fallbackSettlement), { isLoading: true, className: classNames == null ? void 0 : classNames.settlement })) }),
-            /* @__PURE__ */ jsx2("div", { className: "hidden md:block", children: /* @__PURE__ */ jsx2(Settlement, __spreadProps(__spreadValues({}, fallbackSettlement), { isLoading: true, className: classNames == null ? void 0 : classNames.settlement })) })
+            /* @__PURE__ */ jsx("div", { className: "md:hidden", children: /* @__PURE__ */ jsx(Settlement, __spreadProps(__spreadValues({}, fallbackSettlement), { isLoading: true, className: classNames == null ? void 0 : classNames.settlement })) }),
+            /* @__PURE__ */ jsx("div", { className: "hidden md:block", children: /* @__PURE__ */ jsx(Settlement, __spreadProps(__spreadValues({}, fallbackSettlement), { isLoading: true, className: classNames == null ? void 0 : classNames.settlement })) })
           ] }),
-          placeOrder ? /* @__PURE__ */ jsx2(
+          placeOrder ? /* @__PURE__ */ jsx(
             "aside",
             {
               className: cn(
                 "hidden w-full shrink-0 lg:sticky lg:top-6 lg:block lg:w-[343px]",
                 classNames == null ? void 0 : classNames.sidebar
               ),
-              children: /* @__PURE__ */ jsx2(PlaceOrder, __spreadProps(__spreadValues({}, placeOrder), { isLoading: true, className: classNames == null ? void 0 : classNames.trade }))
+              children: /* @__PURE__ */ jsx(PlaceOrder, __spreadProps(__spreadValues({}, placeOrder), { isLoading: true, className: classNames == null ? void 0 : classNames.trade }))
             }
           ) : null
         ]
       }
     ),
-    placeOrder ? /* @__PURE__ */ jsx2(
+    placeOrder ? /* @__PURE__ */ jsx(
       "div",
       {
         className: cn(
           "fixed inset-x-0 bottom-0 z-20 flex justify-end p-4 lg:hidden",
           classNames == null ? void 0 : classNames.mobileTradeCta
         ),
-        children: /* @__PURE__ */ jsx2(
+        children: /* @__PURE__ */ jsx(
           Button,
           {
             size: "large",
@@ -461,59 +239,28 @@ var EventMarketPageContent = ({
   heroMarketId,
   defaultExpandedMarketId,
   expandedMarketId,
-  onExpandedMarketChange,
   heroDefaultTimeRange,
   placeOrder,
   settlement,
   classNames,
   ariaLabel
 }) => {
-  const labels = useLabels2();
-  const resolvedHeroMarketId = useMemo2(() => {
+  const resolvedHeroMarketId = useMemo(() => {
     return resolveHeroMarketId(event, heroMarketId);
   }, [event, heroMarketId]);
-  const heroEvent = useMemo2(() => {
+  const heroEvent = useMemo(() => {
     return buildHeroEvent(event, resolvedHeroMarketId);
   }, [event, resolvedHeroMarketId]);
-  const detailedMarkets = useMemo2(() => {
-    return resolveDetailedMarkets(event, resolvedHeroMarketId);
-  }, [event, resolvedHeroMarketId]);
-  const [internalExpandedMarketId, setInternalExpandedMarketId] = useState2(() => {
-    return resolveInitialExpandedMarketId(detailedMarkets, defaultExpandedMarketId);
-  });
-  useEffect2(() => {
-    if (typeof expandedMarketId === "undefined")
-      return;
-    setInternalExpandedMarketId(expandedMarketId);
-  }, [expandedMarketId]);
-  useEffect2(() => {
-    if (typeof expandedMarketId !== "undefined")
-      return;
-    setInternalExpandedMarketId((currentExpandedMarketId) => {
-      if (currentExpandedMarketId && detailedMarkets.some((market) => market.id === currentExpandedMarketId)) {
-        return currentExpandedMarketId;
-      }
-      return resolveInitialExpandedMarketId(detailedMarkets, defaultExpandedMarketId);
-    });
-  }, [defaultExpandedMarketId, detailedMarkets, expandedMarketId]);
-  const resolvedExpandedMarketId = typeof expandedMarketId === "undefined" ? internalExpandedMarketId : expandedMarketId;
-  const handleExpandedMarketChange = (marketId, isOpened) => {
-    const nextExpandedMarketId = isOpened ? marketId : null;
-    if (typeof expandedMarketId === "undefined") {
-      setInternalExpandedMarketId(nextExpandedMarketId);
-    }
-    onExpandedMarketChange == null ? void 0 : onExpandedMarketChange(nextExpandedMarketId);
-  };
   if (!heroEvent || !event.venueMarkets.length) {
-    return /* @__PURE__ */ jsx2(EventMarketPageUnavailableState, { ariaLabel });
+    return /* @__PURE__ */ jsx(EventMarketPageUnavailableState, { ariaLabel });
   }
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs(
     "section",
     {
       className: cn("w-full pb-24 lg:pb-0", classNames == null ? void 0 : classNames.root),
       "aria-label": ariaLabel != null ? ariaLabel : event.title,
       children: [
-        /* @__PURE__ */ jsxs2(
+        /* @__PURE__ */ jsxs(
           "div",
           {
             className: cn(
@@ -521,8 +268,8 @@ var EventMarketPageContent = ({
               classNames == null ? void 0 : classNames.content
             ),
             children: [
-              /* @__PURE__ */ jsxs2("div", { className: cn("flex min-w-0 flex-1 flex-col gap-6", classNames == null ? void 0 : classNames.main), children: [
-                /* @__PURE__ */ jsx2(
+              /* @__PURE__ */ jsxs("div", { className: cn("flex min-w-0 flex-1 flex-col gap-6", classNames == null ? void 0 : classNames.main), children: [
+                /* @__PURE__ */ jsx(
                   EventListItemDetails,
                   {
                     event: heroEvent,
@@ -532,37 +279,22 @@ var EventMarketPageContent = ({
                     }
                   }
                 ),
-                detailedMarkets.length > 0 ? /* @__PURE__ */ jsx2("div", { className: cn("flex flex-col gap-3", classNames == null ? void 0 : classNames.markets), children: detailedMarkets.map((market) => {
-                  const isOpened = resolvedExpandedMarketId === market.id;
-                  return /* @__PURE__ */ jsx2(
-                    MarketDetails,
-                    {
-                      venueMarkets: [market],
-                      isOpened,
-                      defaultTab: "order-book",
-                      ariaLabel: market.endDate && dayjs(market.endDate).isValid() ? labels.eventMarketPage.marketDetailsAriaByDate(
-                        dayjs(market.endDate).format("MMM D, YYYY")
-                      ) : labels.eventMarketPage.marketDetailsAriaByQuestion(market.question),
-                      onOpenChange: (nextIsOpened) => handleExpandedMarketChange(market.id, nextIsOpened)
-                    },
-                    market.id
-                  );
-                }) }) : null,
-                settlement ? /* @__PURE__ */ jsx2("div", { className: "md:hidden", children: /* @__PURE__ */ jsx2(Settlement, __spreadProps(__spreadValues({}, settlement), { className: classNames == null ? void 0 : classNames.settlement })) }) : null,
-                settlement ? /* @__PURE__ */ jsx2("div", { className: "hidden md:block", children: /* @__PURE__ */ jsx2(Settlement, __spreadProps(__spreadValues({}, settlement), { className: classNames == null ? void 0 : classNames.settlement })) }) : null
+                /* @__PURE__ */ jsx(MarketDetailsList, { eventId: event.id }),
+                settlement ? /* @__PURE__ */ jsx("div", { className: "md:hidden", children: /* @__PURE__ */ jsx(Settlement, __spreadProps(__spreadValues({}, settlement), { className: classNames == null ? void 0 : classNames.settlement })) }) : null,
+                settlement ? /* @__PURE__ */ jsx("div", { className: "hidden md:block", children: /* @__PURE__ */ jsx(Settlement, __spreadProps(__spreadValues({}, settlement), { className: classNames == null ? void 0 : classNames.settlement })) }) : null
               ] }),
-              placeOrder ? /* @__PURE__ */ jsx2(
+              placeOrder ? /* @__PURE__ */ jsx(
                 "aside",
                 {
                   className: cn("hidden w-full lg:block lg:max-w-[360px]", classNames == null ? void 0 : classNames.sidebar),
                   "data-testid": "event-market-page-desktop-trade",
-                  children: /* @__PURE__ */ jsx2(PlaceOrder, __spreadProps(__spreadValues({}, placeOrder), { className: classNames == null ? void 0 : classNames.trade }))
+                  children: /* @__PURE__ */ jsx(PlaceOrder, __spreadProps(__spreadValues({}, placeOrder), { className: classNames == null ? void 0 : classNames.trade }))
                 }
               ) : null
             ]
           }
         ),
-        placeOrder ? /* @__PURE__ */ jsx2(EventMarketPageMobileTrade, { placeOrder, classNames }) : null
+        placeOrder ? /* @__PURE__ */ jsx(EventMarketPageMobileTrade, { placeOrder, classNames }) : null
       ]
     }
   );
@@ -579,13 +311,13 @@ var EventMarketPage = (props) => {
     enabled: !props.isLoading && !hasEventProp && !!props.eventId
   });
   if (props.isLoading) {
-    return /* @__PURE__ */ jsx2(EventMarketPageLoadingState, { placeOrder: props.placeOrder, settlement: props.settlement });
+    return /* @__PURE__ */ jsx(EventMarketPageLoadingState, { placeOrder: props.placeOrder, settlement: props.settlement });
   }
   if ("event" in props && props.event) {
-    return /* @__PURE__ */ jsx2(EventMarketPageContent, __spreadProps(__spreadValues({}, props), { event: props.event }));
+    return /* @__PURE__ */ jsx(EventMarketPageContent, __spreadProps(__spreadValues({}, props), { event: props.event }));
   }
   if (isFetchingEvent) {
-    return /* @__PURE__ */ jsx2(
+    return /* @__PURE__ */ jsx(
       EventMarketPageLoadingState,
       {
         placeOrder: props.placeOrder,
@@ -596,14 +328,380 @@ var EventMarketPage = (props) => {
   }
   if (!fetchedEvent) {
     if (isErrorWithStatus(eventError, 404)) {
-      return /* @__PURE__ */ jsx2(EventMarketPageNotFoundState, { ariaLabel: props.ariaLabel });
+      return /* @__PURE__ */ jsx(EventMarketPageNotFoundState, { ariaLabel: props.ariaLabel });
     }
-    return /* @__PURE__ */ jsx2(EventMarketPageUnavailableState, { ariaLabel: props.ariaLabel });
+    return /* @__PURE__ */ jsx(EventMarketPageUnavailableState, { ariaLabel: props.ariaLabel });
   }
-  return /* @__PURE__ */ jsx2(EventMarketPageContent, __spreadProps(__spreadValues({}, props), { event: fetchedEvent }));
+  return /* @__PURE__ */ jsx(EventMarketPageContent, __spreadProps(__spreadValues({}, props), { event: fetchedEvent }));
 };
 EventMarketPage.displayName = "EventMarketPage";
 
+// src/pages/home/home.constants.ts
+var ALL_CATEGORIES_TAB_VALUE = "trending";
+var DEFAULT_CATEGORIES_LIMIT = 100;
+var DEFAULT_ALL_CATEGORY_TAB_LABEL = "Trending";
+var getDefaultEventSectionItems = (labels) => {
+  return [
+    {
+      id: "top-markets",
+      title: labels.home.topMarkets,
+      maxItemsPerRow: 3,
+      limit: 9,
+      maxVisibleItems: 9
+    }
+  ];
+};
+
+// src/pages/home/home.utils.ts
+var resolveCategoryTabs = (categories, allCategoryTabLabel) => {
+  const seenCategoryIds = /* @__PURE__ */ new Set();
+  const tabs = [
+    {
+      value: ALL_CATEGORIES_TAB_VALUE,
+      label: allCategoryTabLabel,
+      iconName: "arrow-trend-up"
+    }
+  ];
+  for (const category of categories) {
+    if (seenCategoryIds.has(category.id))
+      continue;
+    seenCategoryIds.add(category.id);
+    tabs.push({
+      value: category.id,
+      label: category.name.trim().toLowerCase(),
+      categoryIds: [category.id]
+    });
+  }
+  return tabs;
+};
+var resolveInitialTabValue = (tabs, defaultActiveTab) => {
+  var _a, _b;
+  if (defaultActiveTab) {
+    const hasDefaultTab = tabs.some((tab) => tab.value === defaultActiveTab);
+    if (hasDefaultTab)
+      return defaultActiveTab;
+  }
+  return (_b = (_a = tabs[0]) == null ? void 0 : _a.value) != null ? _b : ALL_CATEGORIES_TAB_VALUE;
+};
+
+// src/pages/home/index.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var MIN_SEARCH_LENGTH = 3;
+var SEARCH_DEBOUNCE_MS = 300;
+var SEARCH_RESULTS_LIMIT = 9;
+var HomeSearchResults = ({
+  activeTabValue,
+  onTabChange,
+  query,
+  tabs,
+  resolvedTabs,
+  className
+}) => {
+  const labels = useLabels2();
+  const { search: searchConfig } = useSdkUiConfig();
+  const [activeVenueTabValue, setActiveVenueTabValue] = useState2("matched");
+  const eventListTabs = useMemo2(() => {
+    return getDefaultEventListTabs(labels);
+  }, [labels]);
+  const activeVenueTab = useMemo2(() => {
+    return eventListTabs.find((tab) => tab.value === activeVenueTabValue);
+  }, [activeVenueTabValue, eventListTabs]);
+  const activeCategoryTab = useMemo2(() => {
+    return resolvedTabs.find((tab) => tab.value === activeTabValue);
+  }, [activeTabValue, resolvedTabs]);
+  const { events, isLoading, isError, fetchNextPage, hasNextPage, isFetchingNextPage } = useVenueEvents({
+    queryKeyScope: "home-search-results",
+    search: query,
+    categoryIds: activeTabValue === ALL_CATEGORIES_TAB_VALUE ? void 0 : activeCategoryTab == null ? void 0 : activeCategoryTab.categoryIds,
+    venues: resolveTabVenus(activeVenueTab),
+    limit: SEARCH_RESULTS_LIMIT
+  });
+  const loadMoreRef = useRef(null);
+  useEffect2(() => {
+    if (!hasNextPage)
+      return;
+    const target = loadMoreRef.current;
+    if (!target)
+      return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const entry = entries[0];
+        if (!(entry == null ? void 0 : entry.isIntersecting))
+          return;
+        if (isLoading || isFetchingNextPage || !hasNextPage)
+          return;
+        void fetchNextPage();
+      },
+      {
+        rootMargin: "320px 0px"
+      }
+    );
+    observer.observe(target);
+    return () => {
+      observer.disconnect();
+    };
+  }, [fetchNextPage, hasNextPage, isFetchingNextPage, isLoading]);
+  const resultsTitle = labels.search.resultsSummary(
+    hasNextPage ? `${events.length}+` : `${events.length}`,
+    query
+  );
+  const searchResultTabs = useMemo2(() => {
+    return eventListTabs.map((tab) => {
+      const isActive = tab.value === activeVenueTabValue;
+      return {
+        value: tab.value,
+        label: tab.label,
+        icon: tab.iconName ? /* @__PURE__ */ jsx2(
+          Icon,
+          {
+            name: tab.iconName,
+            size: "small",
+            color: isActive ? "var(--agg-color-primary)" : "var(--agg-color-foreground)"
+          }
+        ) : tab.venueLogo ? /* @__PURE__ */ jsx2(
+          VenueLogo,
+          {
+            venue: tab.venueLogo,
+            size: "small",
+            className: cn(isActive ? "text-agg-primary" : "text-agg-foreground")
+          }
+        ) : void 0,
+        disabled: tab.disabled
+      };
+    });
+  }, [activeVenueTabValue, eventListTabs]);
+  const loadingPlaceholderCount = isFetchingNextPage ? 3 : 0;
+  if (isLoading) {
+    return /* @__PURE__ */ jsx2(Skeleton, { view: "event-list", ariaLabel: labels.search.loadingResults, className });
+  }
+  return /* @__PURE__ */ jsxs2("section", { className: cn("flex w-full flex-col gap-5", className), children: [
+    /* @__PURE__ */ jsx2("header", { className: "flex flex-col gap-5", children: /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between", children: [
+      /* @__PURE__ */ jsx2(Typography, { as: "h2", variant: "title", className: "min-w-0", children: resultsTitle }),
+      /* @__PURE__ */ jsx2(
+        Tabs,
+        {
+          ariaLabel: labels.eventList.tabsAria(resultsTitle),
+          items: searchResultTabs,
+          value: activeVenueTabValue,
+          onChange: setActiveVenueTabValue
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxs2("div", { className: "grid grid-cols-1 gap-5 md:grid-cols-3", children: [
+      events.map((event) => /* @__PURE__ */ jsx2(
+        EventListItem,
+        {
+          event,
+          classNames: {
+            root: "w-full min-w-0 max-w-none"
+          },
+          onClick: (selectedEvent) => {
+            if (!selectedEvent)
+              return;
+            searchConfig.onSelect(selectedEvent);
+          }
+        },
+        event.id
+      )),
+      Array.from({ length: loadingPlaceholderCount }).map((_, index) => /* @__PURE__ */ jsx2(
+        EventListItem,
+        {
+          isLoading: true,
+          classNames: {
+            root: "w-full min-w-0 max-w-none"
+          }
+        },
+        `search-results-loading-${index}`
+      )),
+      !isError && events.length === 0 ? /* @__PURE__ */ jsx2(Card, { className: "col-span-full overflow-hidden shadow-none hover:shadow-none p-0! border-none! bg-transparent!", children: /* @__PURE__ */ jsx2(
+        StateMessage,
+        {
+          ariaLabel: labels.eventList.emptyAria,
+          title: labels.eventList.emptyTitle,
+          description: labels.eventList.emptyDescription
+        }
+      ) }) : null,
+      isError ? /* @__PURE__ */ jsx2(
+        Typography,
+        {
+          variant: "body",
+          className: "col-span-full flex h-32 w-full items-center justify-center",
+          children: labels.eventList.error
+        }
+      ) : null
+    ] }),
+    hasNextPage ? /* @__PURE__ */ jsx2("div", { ref: loadMoreRef, className: "h-px w-full", "aria-hidden": true }) : null
+  ] });
+};
+var HomePage = ({
+  tabs,
+  defaultActiveTab,
+  onTabChange,
+  eventSectionItems,
+  classNames,
+  categoriesLimit = DEFAULT_CATEGORIES_LIMIT,
+  allCategoryTabLabel = DEFAULT_ALL_CATEGORY_TAB_LABEL
+}) => {
+  const labels = useLabels2();
+  const {
+    search: {
+      value: searchValue,
+      result: selectedEvent,
+      isShowingAllResults,
+      onSelect: onSelectEvent
+    }
+  } = useSdkUiConfig();
+  const hasCustomTabs = !!tabs && tabs.length > 0;
+  const normalizedSearchValue = searchValue.trim();
+  const [debouncedSearchValue, setDebouncedSearchValue] = useState2(() => {
+    return normalizedSearchValue.length >= MIN_SEARCH_LENGTH ? normalizedSearchValue : "";
+  });
+  useEffect2(() => {
+    if (normalizedSearchValue.length < MIN_SEARCH_LENGTH) {
+      setDebouncedSearchValue("");
+      return;
+    }
+    const timeoutId = window.setTimeout(() => {
+      setDebouncedSearchValue(normalizedSearchValue);
+    }, SEARCH_DEBOUNCE_MS);
+    return () => {
+      window.clearTimeout(timeoutId);
+    };
+  }, [normalizedSearchValue]);
+  const resolvedAllCategoryTabLabel = allCategoryTabLabel === DEFAULT_ALL_CATEGORY_TAB_LABEL ? labels.home.trending : allCategoryTabLabel;
+  const { categories, isLoading: isCategoriesLoading } = useCategories({
+    limit: categoriesLimit,
+    enabled: !hasCustomTabs
+  });
+  const categoryTabs = useMemo2(() => {
+    return resolveCategoryTabs(categories, resolvedAllCategoryTabLabel);
+  }, [categories, resolvedAllCategoryTabLabel]);
+  const resolvedTabs = useMemo2(() => {
+    if (hasCustomTabs && tabs)
+      return tabs;
+    return categoryTabs;
+  }, [categoryTabs, hasCustomTabs, tabs]);
+  const resolvedEventSectionItems = eventSectionItems && eventSectionItems.length > 0 ? eventSectionItems : getDefaultEventSectionItems(labels);
+  const [activeTabValue, setActiveTabValue] = useState2(() => {
+    return resolveInitialTabValue(resolvedTabs, defaultActiveTab);
+  });
+  useEffect2(() => {
+    setActiveTabValue((currentValue) => {
+      const hasCurrentValue = resolvedTabs.some((tab) => tab.value === currentValue);
+      if (hasCurrentValue)
+        return currentValue;
+      return resolveInitialTabValue(resolvedTabs, defaultActiveTab);
+    });
+  }, [defaultActiveTab, resolvedTabs]);
+  const tabsItems = useMemo2(() => {
+    return resolvedTabs.map((tab) => {
+      const isActive = tab.value === activeTabValue;
+      return {
+        value: tab.value,
+        label: tab.label,
+        icon: tab.iconName ? /* @__PURE__ */ jsx2(
+          Icon,
+          {
+            name: tab.iconName,
+            size: "medium",
+            color: isActive ? "var(--agg-color-primary)" : "var(--agg-color-foreground)"
+          }
+        ) : void 0,
+        disabled: tab.disabled
+      };
+    });
+  }, [activeTabValue, resolvedTabs]);
+  const activeTab = useMemo2(() => {
+    return resolvedTabs.find((tab) => tab.value === activeTabValue);
+  }, [activeTabValue, resolvedTabs]);
+  const resolvedSectionItems = useMemo2(() => {
+    var _a, _b, _c, _d;
+    if (activeTabValue === ALL_CATEGORIES_TAB_VALUE) {
+      return resolvedEventSectionItems;
+    }
+    const maxItemsPerRow = (_b = (_a = resolvedEventSectionItems[0]) == null ? void 0 : _a.maxItemsPerRow) != null ? _b : 3;
+    const firstSectionLimit = (_c = resolvedEventSectionItems[0]) == null ? void 0 : _c.limit;
+    const limit = firstSectionLimit && Number.isFinite(firstSectionLimit) ? Math.max(9, Math.floor(firstSectionLimit)) : 9;
+    return [
+      {
+        id: `${activeTabValue}-markets`,
+        title: (_d = activeTab == null ? void 0 : activeTab.label) != null ? _d : activeTabValue,
+        maxItemsPerRow,
+        limit,
+        maxVisibleItems: void 0,
+        search: activeTab == null ? void 0 : activeTab.search,
+        categoryIds: activeTab == null ? void 0 : activeTab.categoryIds
+      }
+    ];
+  }, [activeTab, activeTabValue, resolvedEventSectionItems]);
+  const handleTabChange = (value) => {
+    setActiveTabValue(value);
+    onTabChange == null ? void 0 : onTabChange(value);
+  };
+  return /* @__PURE__ */ jsxs2("section", { className: cn("flex w-full flex-col", classNames == null ? void 0 : classNames.root), children: [
+    /* @__PURE__ */ jsx2(Header, { searchProps: {} }),
+    !selectedEvent && !isShowingAllResults ? /* @__PURE__ */ jsx2(
+      "header",
+      {
+        className: cn(
+          "w-full bg-agg-secondary border-b border-agg-separator",
+          classNames == null ? void 0 : classNames.header
+        ),
+        children: /* @__PURE__ */ jsx2(
+          Tabs,
+          {
+            ariaLabel: labels.home.categoryTabsAria,
+            variant: "underline",
+            className: cn("w-full px-4 md:px-10", classNames == null ? void 0 : classNames.tabs),
+            items: tabsItems,
+            value: activeTabValue,
+            onChange: handleTabChange
+          }
+        )
+      }
+    ) : null,
+    /* @__PURE__ */ jsx2(
+      "main",
+      {
+        className: cn(
+          "flex w-full flex-col gap-4 md:gap-10 px-4 md:px-10 py-4 md:py-8",
+          classNames == null ? void 0 : classNames.sections
+        ),
+        children: selectedEvent ? /* @__PURE__ */ jsx2(EventMarketPage, { eventId: selectedEvent.id }) : isShowingAllResults && debouncedSearchValue ? /* @__PURE__ */ jsx2(
+          HomeSearchResults,
+          {
+            activeTabValue,
+            onTabChange: handleTabChange,
+            query: debouncedSearchValue,
+            tabs: tabsItems,
+            resolvedTabs
+          }
+        ) : resolvedSectionItems.map((eventSectionItem) => {
+          var _a, _b;
+          return /* @__PURE__ */ jsx2(
+            EventList,
+            {
+              title: eventSectionItem.title,
+              maxItemsPerRow: eventSectionItem.maxItemsPerRow,
+              limit: eventSectionItem.limit,
+              maxVisibleItems: eventSectionItem.maxVisibleItems,
+              search: debouncedSearchValue || eventSectionItem.search || (activeTab == null ? void 0 : activeTab.search),
+              categoryIds: (_b = eventSectionItem.categoryIds) != null ? _b : activeTab == null ? void 0 : activeTab.categoryIds,
+              onClick: (event) => {
+                if (!event)
+                  return;
+                onSelectEvent(event);
+              }
+            },
+            (_a = eventSectionItem.id) != null ? _a : eventSectionItem.title
+          );
+        })
+      }
+    )
+  ] });
+};
+HomePage.displayName = "HomePage";
+
 // src/pages/user-profile/components/balance-display.tsx
 import { useState as useState3 } from "react";
 
@@ -1240,7 +1338,7 @@ var UserProfilePage = ({
 UserProfilePage.displayName = "UserProfilePage";
 
 export {
-  HomePage,
   EventMarketPage,
+  HomePage,
   UserProfilePage
 };