@agg-market/ui 8.0.0 → 10.0.0

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

@@ -3,15 +3,16 @@ import {
   EventListItemDetails,
   MarketDetails,
   isErrorWithStatus
-} from "./chunk-TLFRGJ5B.mjs";
+} from "./chunk-GYOCLZGH.mjs";
 import {
   PlaceOrder,
   Settlement
-} from "./chunk-JE4MV5RL.mjs";
+} from "./chunk-5G4T5R2H.mjs";
 import {
   Button,
   Card,
   Icon,
+  Modal,
   RemoteImage,
   StateMessage,
   Tabs,
@@ -20,7 +21,7 @@ import {
   __spreadProps,
   __spreadValues,
   cn
-} from "./chunk-WKY3IN52.mjs";
+} from "./chunk-XP7DREIX.mjs";
 
 // src/pages/home/index.tsx
 import { useEffect, useMemo, useState } from "react";
@@ -30,51 +31,6 @@ import { useCategories, useLabels } from "@agg-market/hooks";
 var ALL_CATEGORIES_TAB_VALUE = "trending";
 var DEFAULT_CATEGORIES_LIMIT = 100;
 var DEFAULT_ALL_CATEGORY_TAB_LABEL = "Trending";
-var CATEGORY_TAB_NAME_ORDER = [
-  "crypto",
-  "economy",
-  "entertainment",
-  "finance",
-  "geopolitics",
-  "health",
-  "mentions",
-  "politics",
-  "science",
-  "sports",
-  "technology",
-  "weather",
-  "world"
-];
-var getDefaultHomePageTabs = (allCategoryTabLabel) => {
-  return [
-    {
-      value: ALL_CATEGORIES_TAB_VALUE,
-      label: allCategoryTabLabel,
-      iconName: "arrow-trend-up"
-    },
-    { value: "crypto", label: "crypto", categoryIds: ["crypto"] },
-    { value: "economy", label: "economy", categoryIds: ["economy"] },
-    {
-      value: "entertainment",
-      label: "entertainment",
-      categoryIds: ["entertainment"]
-    },
-    { value: "finance", label: "finance", categoryIds: ["finance"] },
-    {
-      value: "geopolitics",
-      label: "geopolitics",
-      categoryIds: ["geopolitics"]
-    },
-    { value: "health", label: "health", categoryIds: ["health"] },
-    { value: "mentions", label: "mentions", categoryIds: ["mentions"] },
-    { value: "politics", label: "politics", categoryIds: ["politics"] },
-    { value: "science", label: "science", categoryIds: ["science"] },
-    { value: "sports", label: "sports", categoryIds: ["sports"] },
-    { value: "technology", label: "technology", categoryIds: ["technology"] },
-    { value: "weather", label: "weather", categoryIds: ["weather"] },
-    { value: "world", label: "world", categoryIds: ["world"] }
-  ];
-};
 var getDefaultEventSectionItems = (labels) => {
   return [
     {
@@ -95,31 +51,7 @@ var getDefaultEventSectionItems = (labels) => {
 };
 
 // src/pages/home/home.utils.ts
-var categoryOrderMap = CATEGORY_TAB_NAME_ORDER.reduce(
-  (accumulator, name, index) => {
-    accumulator.set(name, index);
-    return accumulator;
-  },
-  /* @__PURE__ */ new Map()
-);
-var normalizeCategoryName = (name) => {
-  return name.trim().toLowerCase();
-};
 var resolveCategoryTabs = (categories, allCategoryTabLabel) => {
-  const sortedCategories = [...categories].sort((left, right) => {
-    const leftName = normalizeCategoryName(left.name);
-    const rightName = normalizeCategoryName(right.name);
-    const leftOrder = categoryOrderMap.get(leftName);
-    const rightOrder = categoryOrderMap.get(rightName);
-    if (leftOrder != null && rightOrder != null) {
-      return leftOrder - rightOrder;
-    }
-    if (leftOrder != null)
-      return -1;
-    if (rightOrder != null)
-      return 1;
-    return leftName.localeCompare(rightName);
-  });
   const seenCategoryIds = /* @__PURE__ */ new Set();
   const tabs = [
     {
@@ -128,13 +60,13 @@ var resolveCategoryTabs = (categories, allCategoryTabLabel) => {
       iconName: "arrow-trend-up"
     }
   ];
-  for (const category of sortedCategories) {
+  for (const category of categories) {
     if (seenCategoryIds.has(category.id))
       continue;
     seenCategoryIds.add(category.id);
     tabs.push({
       value: category.id,
-      label: normalizeCategoryName(category.name),
+      label: category.name.trim().toLowerCase(),
       categoryIds: [category.id]
     });
   }
@@ -147,7 +79,7 @@ var resolveInitialTabValue = (tabs, defaultActiveTab) => {
     if (hasDefaultTab)
       return defaultActiveTab;
   }
-  return (_b = (_a = tabs[0]) == null ? void 0 : _a.value) != null ? _b : "trending";
+  return (_b = (_a = tabs[0]) == null ? void 0 : _a.value) != null ? _b : ALL_CATEGORIES_TAB_VALUE;
 };
 
 // src/pages/home/index.tsx
@@ -158,17 +90,15 @@ var HomePage = ({
   onTabChange,
   eventSectionItems,
   classNames,
-  useCategoriesTabs = true,
   categoriesLimit = DEFAULT_CATEGORIES_LIMIT,
   allCategoryTabLabel = DEFAULT_ALL_CATEGORY_TAB_LABEL
 }) => {
   const labels = useLabels();
   const hasCustomTabs = !!tabs && tabs.length > 0;
-  const shouldUseCategoriesTabs = !hasCustomTabs && useCategoriesTabs;
   const resolvedAllCategoryTabLabel = allCategoryTabLabel === DEFAULT_ALL_CATEGORY_TAB_LABEL ? labels.home.trending : allCategoryTabLabel;
-  const { categories } = useCategories({
+  const { categories, isLoading: isCategoriesLoading } = useCategories({
     limit: categoriesLimit,
-    enabled: shouldUseCategoriesTabs
+    enabled: !hasCustomTabs
   });
   const categoryTabs = useMemo(() => {
     return resolveCategoryTabs(categories, resolvedAllCategoryTabLabel);
@@ -176,10 +106,8 @@ var HomePage = ({
   const resolvedTabs = useMemo(() => {
     if (hasCustomTabs && tabs)
       return tabs;
-    if (shouldUseCategoriesTabs)
-      return categoryTabs;
-    return getDefaultHomePageTabs(resolvedAllCategoryTabLabel);
-  }, [categoryTabs, hasCustomTabs, resolvedAllCategoryTabLabel, shouldUseCategoriesTabs, tabs]);
+    return categoryTabs;
+  }, [categoryTabs, hasCustomTabs, tabs]);
   const resolvedEventSectionItems = eventSectionItems && eventSectionItems.length > 0 ? eventSectionItems : getDefaultEventSectionItems(labels);
   const [activeTabValue, setActiveTabValue] = useState(() => {
     return resolveInitialTabValue(resolvedTabs, defaultActiveTab);
@@ -214,22 +142,20 @@ var HomePage = ({
     return resolvedTabs.find((tab) => tab.value === activeTabValue);
   }, [activeTabValue, resolvedTabs]);
   const resolvedSectionItems = useMemo(() => {
-    var _a, _b, _c, _d, _e;
+    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 showVenueLogo = (_c = resolvedEventSectionItems[0]) == null ? void 0 : _c.showVenueLogo;
-    const firstSectionLimit = (_d = resolvedEventSectionItems[0]) == null ? void 0 : _d.limit;
+    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: (_e = activeTab == null ? void 0 : activeTab.label) != null ? _e : activeTabValue,
+        title: (_d = activeTab == null ? void 0 : activeTab.label) != null ? _d : activeTabValue,
         maxItemsPerRow,
         limit,
         maxVisibleItems: void 0,
-        showVenueLogo,
         search: activeTab == null ? void 0 : activeTab.search,
         categoryIds: activeTab == null ? void 0 : activeTab.categoryIds
       }
@@ -239,6 +165,18 @@ var HomePage = ({
     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",
@@ -273,7 +211,6 @@ var HomePage = ({
               maxItemsPerRow: eventSectionItem.maxItemsPerRow,
               limit: eventSectionItem.limit,
               maxVisibleItems: eventSectionItem.maxVisibleItems,
-              showVenueLogo: eventSectionItem.showVenueLogo,
               search: (_b = eventSectionItem.search) != null ? _b : activeTab == null ? void 0 : activeTab.search,
               categoryIds: (_c = eventSectionItem.categoryIds) != null ? _c : activeTab == null ? void 0 : activeTab.categoryIds
             },
@@ -288,9 +225,9 @@ HomePage.displayName = "HomePage";
 
 // src/pages/event-market/index.tsx
 import { useEffect as useEffect2, useMemo as useMemo2, useState as useState2 } from "react";
-import { useEvent, useLabels as useLabels2 } from "@agg-market/hooks";
+import { useVenueEvent, useLabels as useLabels2 } from "@agg-market/hooks";
 import dayjs from "dayjs";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+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;
@@ -304,29 +241,29 @@ var getMarketDateValue = (market, fallbackIndex) => {
 };
 var resolveHeroMarketId = (event, heroMarketId) => {
   var _a, _b;
-  if (!((_a = event == null ? void 0 : event.markets) == null ? void 0 : _a.length))
+  if (!((_a = event == null ? void 0 : event.venueMarkets) == null ? void 0 : _a.length))
     return void 0;
   if (heroMarketId) {
-    const matchingHeroMarket = event.markets.find(
+    const matchingHeroMarket = event.venueMarkets.find(
       (market) => market.id === heroMarketId
     );
     if (matchingHeroMarket)
       return matchingHeroMarket.id;
   }
-  return (_b = event.markets[0]) == null ? void 0 : _b.id;
+  return (_b = event.venueMarkets[0]) == null ? void 0 : _b.id;
 };
 var buildHeroEvent = (event, heroMarketId) => {
   if (!heroMarketId)
     return void 0;
-  const heroMarket = event.markets.find((market) => market.id === heroMarketId);
+  const heroMarket = event.venueMarkets.find((market) => market.id === heroMarketId);
   if (!heroMarket)
     return void 0;
   return __spreadProps(__spreadValues({}, event), {
-    markets: [heroMarket]
+    venueMarkets: [heroMarket]
   });
 };
 var resolveDetailedMarkets = (event, heroMarketId) => {
-  return event.markets.filter((market) => market.id !== heroMarketId).map((market, index) => ({
+  return event.venueMarkets.filter((market) => market.id !== heroMarketId).map((market, index) => ({
     market,
     index
   })).sort(
@@ -346,6 +283,69 @@ var resolveInitialExpandedMarketId = (detailedMarkets, defaultExpandedMarketId)
   }
   return (_b = (_a = detailedMarkets[0]) == null ? void 0 : _a.id) != null ? _b : null;
 };
+var EventMarketPageMobileTrade = ({
+  placeOrder,
+  classNames
+}) => {
+  const [isOpen, setIsOpen] = useState2(false);
+  const handleOpen = () => {
+    setIsOpen(true);
+  };
+  const handleOpenChange = (nextOpen) => {
+    setIsOpen(nextOpen);
+  };
+  const handleClose = () => {
+    setIsOpen(false);
+  };
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx2(
+      "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(
+          Button,
+          {
+            size: "large",
+            className: "min-w-[168px] shadow-agg-modal",
+            "aria-label": placeOrder.actionLabel,
+            "data-testid": "event-market-page-mobile-trade-cta",
+            onClick: (e) => {
+              e.stopPropagation();
+              e.preventDefault();
+              handleOpen();
+            },
+            children: placeOrder.actionLabel
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx2(Modal, { open: isOpen, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsx2(
+      Modal.Container,
+      {
+        "aria-label": placeOrder.title,
+        maxWidth: "420px",
+        classNames: {
+          content: "items-end p-0 sm:items-center sm:p-4",
+          container: cn(
+            "w-full max-w-[420px] border-0 bg-transparent shadow-none",
+            classNames == null ? void 0 : classNames.mobileTradeModal
+          )
+        },
+        children: /* @__PURE__ */ jsx2(
+          PlaceOrder,
+          __spreadProps(__spreadValues({}, placeOrder), {
+            isDismissible: true,
+            className: cn("w-full rounded-t-agg-2xl sm:rounded-agg-xl", classNames == null ? void 0 : classNames.mobileTrade),
+            onClose: handleClose
+          })
+        )
+      }
+    ) })
+  ] });
+};
 var EventMarketPageUnavailableState = ({
   ariaLabel
 }) => {
@@ -395,46 +395,66 @@ var EventMarketPageLoadingState = ({
       }
     ]
   };
-  return /* @__PURE__ */ jsx2("section", { className: cn("w-full", classNames == null ? void 0 : classNames.root), children: /* @__PURE__ */ jsxs2(
-    "div",
-    {
-      className: cn(
-        "mx-auto flex w-full max-w-[1200px] flex-col gap-6 px-3 py-3 md:px-6 md:py-6 lg:flex-row lg:items-start lg:gap-8",
-        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(
-            EventListItemDetails,
-            {
-              isLoading: true,
-              classNames: {
-                root: classNames == null ? void 0 : classNames.hero
+  return /* @__PURE__ */ jsxs2("section", { className: cn("w-full pb-24 lg:pb-0", classNames == null ? void 0 : classNames.root), children: [
+    /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        className: cn(
+          "mx-auto flex w-full max-w-[1200px] flex-col gap-6 px-3 py-3 md:px-6 md:py-6 lg:flex-row lg:items-start lg:gap-8",
+          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(
+              EventListItemDetails,
+              {
+                isLoading: true,
+                classNames: {
+                  root: classNames == null ? void 0 : classNames.hero
+                }
               }
-            }
-          ),
-          /* @__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__ */ 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__ */ 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__ */ 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 })) }),
-          placeOrder ? /* @__PURE__ */ jsx2("div", { className: "md:hidden", children: /* @__PURE__ */ jsx2(PlaceOrder, __spreadProps(__spreadValues({}, placeOrder), { isLoading: true, className: classNames == null ? void 0 : classNames.mobileTrade })) }) : null
-        ] }),
-        placeOrder ? /* @__PURE__ */ jsx2(
-          "aside",
+          placeOrder ? /* @__PURE__ */ jsx2(
+            "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 }))
+            }
+          ) : null
+        ]
+      }
+    ),
+    placeOrder ? /* @__PURE__ */ jsx2(
+      "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(
+          Button,
           {
-            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 }))
+            size: "large",
+            className: "min-w-[168px] shadow-agg-modal",
+            "aria-label": placeOrder.actionLabel,
+            disabled: true,
+            children: placeOrder.actionLabel
           }
-        ) : null
-      ]
-    }
-  ) });
+        )
+      }
+    ) : null
+  ] });
 };
 var EventMarketPageContent = ({
   event,
@@ -484,60 +504,78 @@ var EventMarketPageContent = ({
     }
     onExpandedMarketChange == null ? void 0 : onExpandedMarketChange(nextExpandedMarketId);
   };
-  if (!heroEvent || !event.markets.length) {
+  if (!heroEvent || !event.venueMarkets.length) {
     return /* @__PURE__ */ jsx2(EventMarketPageUnavailableState, { ariaLabel });
   }
-  return /* @__PURE__ */ jsx2("section", { className: cn("w-full", classNames == null ? void 0 : classNames.root), "aria-label": ariaLabel != null ? ariaLabel : event.title, children: /* @__PURE__ */ jsxs2(
-    "div",
+  return /* @__PURE__ */ jsxs2(
+    "section",
     {
-      className: cn(
-        "mx-auto flex w-full max-w-[1200px] flex-row gap-6 px-3 py-3 md:px-6 md:py-6 lg:flex-row lg:items-start lg:gap-8",
-        classNames == null ? void 0 : classNames.content
-      ),
+      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("div", { className: cn("flex min-w-0 flex-1 flex-col gap-6", classNames == null ? void 0 : classNames.main), children: [
-          /* @__PURE__ */ jsx2(
-            EventListItemDetails,
-            {
-              event: heroEvent,
-              defaultTimeRange: heroDefaultTimeRange,
-              classNames: {
-                root: classNames == null ? void 0 : classNames.hero
-              }
-            }
-          ),
-          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,
-              {
-                event,
-                marketId: market.id,
-                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
-        ] }),
-        placeOrder ? /* @__PURE__ */ jsx2("aside", { className: cn("w-full lg:block lg:max-w-[360px]", classNames == null ? void 0 : classNames.sidebar), children: /* @__PURE__ */ jsx2(PlaceOrder, __spreadProps(__spreadValues({}, placeOrder), { className: classNames == null ? void 0 : classNames.trade })) }) : null
+        /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            className: cn(
+              "mx-auto flex w-full max-w-[1200px] flex-row gap-6 px-3 py-3 md:px-6 md:py-6 lg:flex-row lg:items-start lg:gap-8",
+              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(
+                  EventListItemDetails,
+                  {
+                    event: heroEvent,
+                    defaultTimeRange: heroDefaultTimeRange,
+                    classNames: {
+                      root: classNames == null ? void 0 : classNames.hero
+                    }
+                  }
+                ),
+                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
+              ] }),
+              placeOrder ? /* @__PURE__ */ jsx2(
+                "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 }))
+                }
+              ) : null
+            ]
+          }
+        ),
+        placeOrder ? /* @__PURE__ */ jsx2(EventMarketPageMobileTrade, { placeOrder, classNames }) : null
       ]
     }
-  ) });
+  );
 };
 var EventMarketPage = (props) => {
+  var _a;
   const hasEventProp = "event" in props && !!props.event;
   const {
     event: fetchedEvent,
     error: eventError,
     isLoading: isFetchingEvent
-  } = useEvent(hasEventProp ? void 0 : props.eventId, {
+  } = useVenueEvent({
+    eventId: hasEventProp ? "" : (_a = props.eventId) != null ? _a : "",
     enabled: !props.isLoading && !hasEventProp && !!props.eventId
   });
   if (props.isLoading) {