@agg-market/ui 9.0.0 → 10.0.0

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

@@ -3,15 +3,16 @@ import {
   EventListItemDetails,
   MarketDetails,
   isErrorWithStatus
-} from "./chunk-6CRY27SQ.mjs";
+} from "./chunk-GYOCLZGH.mjs";
 import {
   PlaceOrder,
   Settlement
-} from "./chunk-3U4VHAP6.mjs";
+} from "./chunk-5G4T5R2H.mjs";
 import {
   Button,
   Card,
   Icon,
+  Modal,
   RemoteImage,
   StateMessage,
   Tabs,
@@ -20,7 +21,7 @@ import {
   __spreadProps,
   __spreadValues,
   cn
-} from "./chunk-3G7C6WEC.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
             },
@@ -290,7 +227,7 @@ HomePage.displayName = "HomePage";
 import { useEffect as useEffect2, useMemo as useMemo2, useState as useState2 } from "react";
 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;
@@ -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,
@@ -487,49 +507,65 @@ var EventMarketPageContent = ({
   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;

package/dist/{chunk-3G7C6WEC.mjs → chunk-XP7DREIX.mjs}

@@ -758,7 +758,7 @@ var SwitchButton = ({
     "div",
     {
       className: cn(
-        "group/agg-switch",
+        "group/agg-switch min-w-fit",
         "inline-flex min-w-0 rounded-agg-full bg-agg-secondary-hover font-agg-sans",
         getMotionClassName(enableAnimations, "transition-background duration-200 ease-in-out"),
         "cursor-pointer hover:bg-agg-tertiary",
@@ -804,6 +804,7 @@ var SwitchButton = ({
                   tabIndex: isActive ? 0 : -1,
                   disabled: option.disabled,
                   className: cn(
+                    "whitespace-nowrap",
                     "relative z-10 min-w-0 rounded-agg-full px-5 py-1.5 font-agg-sans text-agg-base leading-agg-6 text-agg-foreground",
                     getMotionClassName(
                       enableAnimations,
@@ -1079,11 +1080,12 @@ var LineChart = ({
   liveCandle: liveForming,
   lineData,
   lineValue,
-  live = false
+  live
 }) => {
   var _a, _b;
   const labels = useLabels6();
-  const { theme } = useSdkUiConfig5();
+  const { theme, enableGradients, enableLiveUpdates } = useSdkUiConfig5();
+  const isLive = enableLiveUpdates && (live != null ? live : true);
   const normalizedSeries = useMemo2(() => {
     return normalizeSeries(series);
   }, [series]);
@@ -1106,7 +1108,19 @@ var LineChart = ({
     if (!primarySeries) {
       return [];
     }
-    return toLivelinePoints(primarySeries.points);
+    const points = toLivelinePoints(primarySeries.points);
+    if (points.length < 3) {
+      return [
+        ...points,
+        ...points.map((point) => __spreadProps(__spreadValues({}, point), {
+          time: point.time + 1500
+        })),
+        ...points.map((point) => __spreadProps(__spreadValues({}, point), {
+          time: point.time + 3e3
+        }))
+      ];
+    }
+    return points;
   }, [primarySeries]);
   const primaryCandles = useMemo2(() => {
     if (!primarySeries) {
@@ -1140,7 +1154,7 @@ var LineChart = ({
   const timeFormatter = useMemo2(() => {
     return resolveTimeFormatter(windowSeconds);
   }, [windowSeconds]);
-  const seriesControls = showSeriesControls && normalizedSeries.length > 0 ? (_a = renderSeriesControls == null ? void 0 : renderSeriesControls({
+  const seriesControls = showSeriesControls ? (_a = renderSeriesControls == null ? void 0 : renderSeriesControls({
     series: normalizedSeries,
     activeSeriesId,
     handleSeriesChange
@@ -1173,9 +1187,10 @@ var LineChart = ({
             series: livelineSeries,
             color: (_b = primarySeries == null ? void 0 : primarySeries.color) != null ? _b : "var(--agg-color-primary)",
             theme: livelineTheme,
+            fill: enableGradients,
             grid: true,
-            momentum: live,
-            pulse: live,
+            momentum: isLive,
+            pulse: isLive,
             window: windowSeconds,
             mode: chartType === "candlestick" ? "candle" : "line",
             candles: chartType === "candlestick" ? primaryCandles : void 0,
@@ -1191,7 +1206,8 @@ var LineChart = ({
               bottom: 28,
               left: 12
             },
-            loading: isLoading
+            loading: isLoading,
+            lineWidth: 1
           }
         )
       }
@@ -3093,7 +3109,7 @@ var NumberValue = ({
 NumberValue.displayName = "NumberValue";
 
 // src/primitives/venue-logo/index.tsx
-import { useLabels as useLabels8 } from "@agg-market/hooks";
+import { useAggUiConfig, useLabels as useLabels8 } from "@agg-market/hooks";
 
 // src/primitives/remote-image/index.tsx
 import { useRef, useState as useState3 } from "react";
@@ -3495,9 +3511,12 @@ var VenueLogo = ({
   title
 }) => {
   var _a;
+  const { showVenueLogo = true } = useAggUiConfig();
   const labels = useLabels8();
   const sizeClass = sizeClasses2[size];
   const resolvedLabel = (_a = ariaLabel != null ? ariaLabel : labels.venues[venue]) != null ? _a : venueLogoLabels[venue];
+  if (!showVenueLogo)
+    return null;
   if (variant === "logo") {
     return /* @__PURE__ */ jsx74(
       RemoteImage,
@@ -3571,9 +3590,9 @@ function Badge({
       )
     }, onClick && { onClick }), {
       children: [
-        prefix ? /* @__PURE__ */ jsx75("span", { className: classNames == null ? void 0 : classNames.prefix, children: prefix }) : null,
+        prefix ? /* @__PURE__ */ jsx75("span", { className: cn(classNames == null ? void 0 : classNames.prefix, "empty:hidden"), children: prefix }) : null,
         /* @__PURE__ */ jsx75("span", { className: cn("truncate", classNames == null ? void 0 : classNames.text), children: text }),
-        suffix ? /* @__PURE__ */ jsx75("span", { className: classNames == null ? void 0 : classNames.suffix, children: suffix }) : null
+        suffix ? /* @__PURE__ */ jsx75("span", { className: cn(classNames == null ? void 0 : classNames.suffix, "empty:hidden"), children: suffix }) : null
       ]
     })
   );
@@ -4079,7 +4098,11 @@ var StateMessage = ({
             size: "large",
             className: "text-agg-base leading-agg-6",
             "aria-label": actionLabel,
-            onClick: onAction,
+            onClick: (e) => {
+              e.stopPropagation();
+              e.preventDefault();
+              onAction == null ? void 0 : onAction();
+            },
             children: actionLabel
           }
         ) : null
@@ -4131,7 +4154,7 @@ var getTabButtonClassName = ({
   return cn(
     "cursor-pointer disabled:cursor-not-allowed",
     "relative inline-flex h-full shrink-0 items-center justify-center gap-2 font-agg-sans",
-    isBarVariant ? "hover:text-agg-foreground hover:bg-agg-secondary-hover" : "hover:text-agg-foreground hover:font-bold",
+    isBarVariant ? "hover:text-agg-foreground hover:bg-agg-secondary-hover" : "hover:text-agg-foreground hover:font-agg-bold",
     getMotionClassName(
       enableAnimations,
       "transition-[colors] duration-300 ease-in-out motion-reduce:transition-none"
@@ -4557,8 +4580,17 @@ var Tabs = ({
                           )
                         }
                       ) }) : null,
-                      item.icon ? /* @__PURE__ */ jsx80("span", { className: "relative z-10 inline-flex shrink-0 items-center justify-center", children: item.icon }) : null,
-                      /* @__PURE__ */ jsx80("span", { className: "relative z-10 truncate whitespace-nowrap [&::first-letter]:uppercase", children: item.label })
+                      item.icon ? /* @__PURE__ */ jsx80("span", { className: "relative z-10 inline-flex shrink-0 items-center justify-center empty:hidden", children: item.icon }) : null,
+                      /* @__PURE__ */ jsx80(
+                        "span",
+                        {
+                          className: cn(
+                            "relative z-10 truncate whitespace-nowrap [&::first-letter]:uppercase"
+                          ),
+                          "data-text": item.label,
+                          children: item.label
+                        }
+                      )
                     ]
                   },
                   item.value