@agg-market/ui 3.0.1 → 5.0.0

package/dist/{chunk-MVJNQN7P.mjs → chunk-DHBHKIJR.mjs}

@@ -1,31 +1,33 @@
+import {
+  Tabs
+} from "./chunk-S3H63TQ5.mjs";
 import {
   buildPriceHistoryGroups,
   getTimeWindowByRange,
   resolveOutcomeLabels,
   resolveOutcomesByVenue,
   resolveSeriesColor
-} from "./chunk-422MCIXV.mjs";
-import {
-  Tabs
-} from "./chunk-S3H63TQ5.mjs";
+} from "./chunk-34IRJYSU.mjs";
 import {
   getVenueSummary,
+  isErrorWithStatus,
   normalizeProbability,
   resolveTileImage,
   resolveTileTitle,
   selectPrimaryVenueMarket
-} from "./chunk-GHB3GOCW.mjs";
+} from "./chunk-MKVGQ7AS.mjs";
 import {
+  StateMessage
+} from "./chunk-XUCS575S.mjs";
+import {
+  MarketDetailsOderbookSkeleton,
   Skeleton,
   eventListItemDetailsTimeRanges,
   getMarketDetailsTabs,
   marketDetailsBaseCardClassName,
   marketDetailsDefaultIsOpened,
   orderBookRowLimitDefault
-} from "./chunk-V52WSZHQ.mjs";
-import {
-  LoadingIcon
-} from "./chunk-IGPNIM2B.mjs";
+} from "./chunk-M4RJHRFT.mjs";
 import {
   VenueLogo
 } from "./chunk-PORVP72S.mjs";
@@ -37,10 +39,10 @@ import {
 } from "./chunk-FO2QCB4Z.mjs";
 import {
   LineChart
-} from "./chunk-BN5VVHNV.mjs";
+} from "./chunk-OJVTGNIF.mjs";
 import {
   SwitchButton
-} from "./chunk-CTVMT3VL.mjs";
+} from "./chunk-LCZKSITC.mjs";
 import {
   __spreadProps,
   __spreadValues,
@@ -88,12 +90,11 @@ var resolveInitialTab = (defaultTab) => {
   return "order-book";
 };
 var resolveMarket = (event, marketId) => {
-  var _a;
   if (!event.markets.length)
     return void 0;
   if (!marketId)
     return event.markets[0];
-  return (_a = event.markets.find((market) => market.id === marketId)) != null ? _a : event.markets[0];
+  return event.markets.find((market) => market.id === marketId);
 };
 var resolveDisplayOutcomeLabels = (labels) => {
   if (!hasBinaryLabels(labels))
@@ -182,8 +183,7 @@ var resolveSubtitle = ({
 };
 var resolveOrderBookRows = ({
   data,
-  side,
-  depth
+  side
 }) => {
   if (!(data == null ? void 0 : data.length))
     return [];
@@ -214,9 +214,8 @@ var resolveOrderBookRows = ({
       return left.price - right.price;
     return right.price - left.price;
   });
-  const limitedRows = sortedRows.slice(0, Math.max(1, depth));
-  const maxTotal = limitedRows.reduce((currentMax, row) => Math.max(currentMax, row.total), 0) || 1;
-  return limitedRows.map((row) => __spreadProps(__spreadValues({}, row), {
+  const maxTotal = sortedRows.reduce((currentMax, row) => Math.max(currentMax, row.total), 0) || 1;
+  return sortedRows.map((row) => __spreadProps(__spreadValues({}, row), {
     barScale: row.total / maxTotal
   }));
 };
@@ -325,48 +324,78 @@ var MarketDetailsUnavailableState = ({
     }
   );
 };
+var MarketDetailsNotFoundState = ({
+  ariaLabel,
+  classNames
+}) => {
+  const labels = useLabels();
+  return /* @__PURE__ */ jsx(Card, { className: cn(marketDetailsBaseCardClassName, "p-0", classNames == null ? void 0 : classNames.root), children: /* @__PURE__ */ jsx(
+    StateMessage,
+    {
+      ariaLabel: ariaLabel != null ? ariaLabel : labels.marketDetails.notFoundAria,
+      title: labels.marketDetails.notFoundTitle,
+      description: labels.marketDetails.notFoundDescription,
+      className: "min-h-[280px] md:min-h-[320px]"
+    }
+  ) });
+};
 var OrderBookRows = ({
   rows,
   title,
   formatNumber,
-  formatCurrency
+  formatCurrency,
+  visibleRows
 }) => {
   const labels = useLabels();
   const isAsks = title === labels.marketDetails.asks;
   const priceClassName = isAsks ? "text-agg-orderbook-ask" : "text-agg-orderbook-bid";
   const barClassName = isAsks ? "bg-agg-orderbook-ask/10" : "bg-agg-orderbook-bid/10";
+  const maxVisibleRows = Math.max(1, visibleRows);
+  const orderBookRowHeightPx = 28;
+  const orderBookDividerHeightPx = 1;
+  const orderBookRowGapPx = 8;
+  const orderBookVisibleHeightPx = maxVisibleRows * orderBookRowHeightPx + Math.max(0, maxVisibleRows - 1) * (orderBookDividerHeightPx + orderBookRowGapPx);
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
     /* @__PURE__ */ jsx(Typography, { variant: "caption-caps", children: title }),
-    rows.map((row, index) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[52px_1fr_1fr_52px] items-center gap-2 md:grid-cols-[88px_1fr_1fr_minmax(120px,220px)] md:gap-6", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 md:gap-3", children: [
-          /* @__PURE__ */ jsx(VenueLogo, { venue: row.venue, size: "small" }),
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: cn(
-                "text-agg-xs font-agg-bold leading-agg-4 md:text-agg-sm md:leading-agg-5",
-                priceClassName
-              ),
-              children: formatProbabilityCents(row.price)
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx("span", { className: "truncate text-agg-xs leading-agg-4 text-center text-agg-foreground md:text-agg-sm md:leading-agg-5", children: formatNumber(row.size) }),
-        /* @__PURE__ */ jsx("span", { className: "truncate text-agg-xs leading-agg-4 text-center text-agg-foreground md:text-agg-sm md:leading-agg-5", children: formatCurrency(row.total) }),
-        /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(
-          "div",
-          {
-            "aria-hidden": "true",
-            className: cn("h-2 rounded-agg-full", barClassName),
-            style: {
-              width: `${Math.max(20, Math.round(row.barScale * 100))}%`
-            }
-          }
-        ) })
-      ] }),
-      index < rows.length - 1 ? /* @__PURE__ */ jsx("div", { className: "h-px w-full bg-agg-separator" }) : null
-    ] }, row.id))
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "overflow-y-auto pr-1 flex flex-col gap-2",
+        style: { maxHeight: `${orderBookVisibleHeightPx}px` },
+        role: "region",
+        "aria-label": `${title} order book levels`,
+        children: rows.map((row, index) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[52px_1fr_1fr_52px] items-center gap-2 md:grid-cols-[88px_1fr_1fr_minmax(120px,220px)] md:gap-6", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 md:gap-3", children: [
+              /* @__PURE__ */ jsx(VenueLogo, { venue: row.venue, size: "small" }),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "text-agg-xs font-agg-bold leading-agg-4 md:text-agg-sm md:leading-agg-5",
+                    priceClassName
+                  ),
+                  children: formatProbabilityCents(row.price)
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "truncate text-agg-xs leading-agg-4 text-center text-agg-foreground md:text-agg-sm md:leading-agg-5", children: formatNumber(row.size) }),
+            /* @__PURE__ */ jsx("span", { className: "truncate text-agg-xs leading-agg-4 text-center text-agg-foreground md:text-agg-sm md:leading-agg-5", children: formatCurrency(row.total) }),
+            /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                "aria-hidden": "true",
+                className: cn("h-2 rounded-agg-full", barClassName),
+                style: {
+                  width: `${Math.max(20, Math.round(row.barScale * 100))}%`
+                }
+              }
+            ) })
+          ] }),
+          index < rows.length - 1 ? /* @__PURE__ */ jsx("div", { className: "h-px w-full bg-agg-separator" }) : null
+        ] }, row.id))
+      }
+    )
   ] });
 };
 var getOutcomeButtonClassName = ({
@@ -413,6 +442,9 @@ var MarketDetailsContent = ({
       labels
     });
   }, [config.formatCompactCurrency, event, image, labels, marketId, title]);
+  const resolvedMarket = useMemo(() => {
+    return resolveMarket(event, marketId);
+  }, [event, marketId]);
   const marketDetailsTabs = useMemo(() => {
     return getMarketDetailsTabs(labels);
   }, [labels]);
@@ -484,9 +516,10 @@ var MarketDetailsContent = ({
     });
     return [...uniqueOutcomesByVenueAndId.values()];
   }, [outcomesByLabel]);
+  const canonicalMarketIdForHistory = model == null ? void 0 : model.market.id;
   const priceHistoryGroups = useMemo(() => {
-    return buildPriceHistoryGroups(graphOutcomes);
-  }, [graphOutcomes]);
+    return buildPriceHistoryGroups(graphOutcomes, canonicalMarketIdForHistory);
+  }, [canonicalMarketIdForHistory, graphOutcomes]);
   const { data: priceHistoryData, isLoading: isPriceHistoryLoading } = usePriceHistory(__spreadProps(__spreadValues({
     groups: priceHistoryGroups
   }, timeWindow), {
@@ -499,24 +532,27 @@ var MarketDetailsContent = ({
       liveUpdate: true
     }));
   }, [selectedOutcomesByVenue]);
-  const { data: orderBookData, isLoading: isOrderBookLoading } = useOrderBook({
+  const {
+    data: orderBookData,
+    isLoading: isOrderBookLoading,
+    error: orderBookError,
+    results: orderBookResults
+  } = useOrderBook({
     orderbooks: orderBookInputs,
     enabled: isOpened && selectedTab === "order-book" && orderBookInputs.length > 0
   });
   const askRows = useMemo(() => {
     return resolveOrderBookRows({
       data: orderBookData,
-      side: "asks",
-      depth: orderBookDepth
+      side: "asks"
     });
-  }, [orderBookData, orderBookDepth]);
+  }, [orderBookData]);
   const bidRows = useMemo(() => {
     return resolveOrderBookRows({
       data: orderBookData,
-      side: "bids",
-      depth: orderBookDepth
+      side: "bids"
     });
-  }, [orderBookData, orderBookDepth]);
+  }, [orderBookData]);
   const priceHistoryByVenue = useMemo(() => {
     const historyByVenue = /* @__PURE__ */ new Map();
     if (!(priceHistoryData == null ? void 0 : priceHistoryData.length)) {
@@ -536,11 +572,14 @@ var MarketDetailsContent = ({
   const graphSeriesByOutcomeLabel = useMemo(() => {
     const seriesByOutcomeLabel = /* @__PURE__ */ new Map();
     const resolveOutcomeCandidateIds = (outcomeByVenue) => {
-      var _a;
+      var _a, _b;
+      const marketWithCanonicalId = outcomeByVenue.market;
       return [
         outcomeByVenue.outcome.id,
         (_a = outcomeByVenue.outcome.externalIdentifier) != null ? _a : void 0,
-        outcomeByVenue.market.externalIdentifier
+        outcomeByVenue.market.externalIdentifier,
+        (_b = marketWithCanonicalId.marketId) != null ? _b : void 0,
+        canonicalMarketIdForHistory
       ].filter((value) => typeof value === "string" && value.trim().length > 0);
     };
     headerOutcomeItems.forEach((headerOutcomeItem) => {
@@ -572,7 +611,7 @@ var MarketDetailsContent = ({
       seriesByOutcomeLabel.set(headerOutcomeItem.label, graphSeries2);
     });
     return seriesByOutcomeLabel;
-  }, [headerOutcomeItems, outcomesByLabel, priceHistoryByVenue]);
+  }, [canonicalMarketIdForHistory, headerOutcomeItems, outcomesByLabel, priceHistoryByVenue]);
   const graphSeries = useMemo(() => {
     var _a;
     if (!selectedOutcomeLabel)
@@ -587,6 +626,9 @@ var MarketDetailsContent = ({
       return [];
     return resolveOtherTabRows(model.market, labels);
   }, [labels, model]);
+  const isOrderBookNotFound = isErrorWithStatus(orderBookError, 404);
+  const hasOrderBookError = !!orderBookError && !isOrderBookNotFound;
+  const hasNoOrderBook = isOrderBookNotFound || !isOrderBookLoading && !hasOrderBookError && (orderBookInputs.length === 0 || askRows.length === 0 && bidRows.length === 0);
   const handleOutcomeKeyDown = (eventToHandle) => {
     var _a;
     if ((eventToHandle == null ? void 0 : eventToHandle.key) !== "ArrowLeft" && (eventToHandle == null ? void 0 : eventToHandle.key) !== "ArrowRight") {
@@ -620,6 +662,9 @@ var MarketDetailsContent = ({
       return venue;
     });
   };
+  const handleRetryOrderBook = () => {
+    void Promise.all(orderBookResults.map((result) => result.refetch()));
+  };
   useEffect(() => {
     if (!selectedGraphVenue) {
       return;
@@ -629,6 +674,9 @@ var MarketDetailsContent = ({
     }
     setSelectedGraphVenue(null);
   }, [selectedGraphVenue, selectedOutcomesByVenue]);
+  if (marketId && !resolvedMarket) {
+    return /* @__PURE__ */ jsx(MarketDetailsNotFoundState, { ariaLabel, classNames });
+  }
   if (!model) {
     return /* @__PURE__ */ jsx(MarketDetailsUnavailableState, { ariaLabel, classNames });
   }
@@ -636,28 +684,29 @@ var MarketDetailsContent = ({
     Card,
     {
       className: cn(
-        "w-full cursor-pointer rounded-agg-2xl text-left outline-none",
+        "w-full rounded-agg-2xl text-left outline-none",
         marketDetailsBaseCardClassName,
         classNames == null ? void 0 : classNames.root
       ),
-      "aria-expanded": isOpened,
-      "aria-controls": detailsContentId,
-      role: "button",
-      tabIndex: 0,
-      "aria-label": isOpened ? labels.marketDetails.toggleCloseDetailsAria(model.title) : labels.marketDetails.toggleOpenDetailsAria(model.title),
-      onClick: handleToggleExpanded,
-      onKeyDown: handleToggleExpanded,
       children: [
         /* @__PURE__ */ jsxs(
           "div",
           {
             className: cn(
-              "flex flex-row items-center justify-between gap-3 px-5 py-4",
+              "cursor-pointer disabled:cursor-default",
+              "flex flex-wrap flex-row items-center justify-between gap-3 px-5 py-4",
               isOpened && "pb-3",
               classNames == null ? void 0 : classNames.header
             ),
+            "aria-expanded": isOpened,
+            "aria-controls": detailsContentId,
+            role: "button",
+            tabIndex: 0,
+            "aria-label": isOpened ? labels.marketDetails.toggleCloseDetailsAria(model.title) : labels.marketDetails.toggleOpenDetailsAria(model.title),
+            onClick: handleToggleExpanded,
+            onKeyDown: handleToggleExpanded,
             children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-3 md:gap-4", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex min-w-52 items-center gap-3 md:gap-4", children: [
                 model.image ? /* @__PURE__ */ jsx(
                   "img",
                   {
@@ -736,10 +785,7 @@ var MarketDetailsContent = ({
             id: detailsContentId,
             className: cn(
               "grid overflow-hidden",
-              getMotionClassName(
-                config.enableAnimations,
-                "transition-all duration-500 ease-[cubic-bezier(0.4,0,0.2,1)]"
-              ),
+              getMotionClassName(config.enableAnimations, "transition-all duration-500 ease-in-out"),
               isOpened ? "grid-rows-[1fr] opacity-100" : "pointer-events-none grid-rows-[0fr] opacity-0"
             ),
             "aria-hidden": !isOpened,
@@ -751,7 +797,7 @@ var MarketDetailsContent = ({
                   className: cn(
                     getMotionClassName(
                       config.enableAnimations,
-                      "transition-all duration-500 ease-[cubic-bezier(0.4,0,0.2,1)]"
+                      "transition-all duration-500 ease-in-out"
                     ),
                     isOpened ? cn(
                       "translate-y-0 opacity-100",
@@ -772,17 +818,24 @@ var MarketDetailsContent = ({
                     ) }),
                     /* @__PURE__ */ jsx("div", { className: "h-px w-full bg-agg-separator" }),
                     /* @__PURE__ */ jsxs("div", { className: cn("p-5", classNames == null ? void 0 : classNames.content), children: [
-                      selectedTab === "order-book" ? /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-5", classNames == null ? void 0 : classNames.orderBook), children: isOrderBookLoading ? /* @__PURE__ */ jsxs(
-                        "div",
+                      selectedTab === "order-book" ? /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-5", classNames == null ? void 0 : classNames.orderBook), children: isOrderBookLoading ? /* @__PURE__ */ jsx(MarketDetailsOderbookSkeleton, {}) : hasOrderBookError ? /* @__PURE__ */ jsx(
+                        StateMessage,
                         {
-                          className: "flex flex-col gap-2 min-h-40 items-center justify-center",
-                          role: "status",
-                          "aria-label": labels.marketDetails.loadingOrderbookAria,
-                          "aria-busy": true,
-                          children: [
-                            /* @__PURE__ */ jsx(LoadingIcon, {}),
-                            /* @__PURE__ */ jsx(Typography, { variant: "label", className: "text-agg-muted-foreground", children: labels.marketDetails.loadingOrderbookLabel })
-                          ]
+                          ariaLabel: labels.marketDetails.orderBookUnavailableAria,
+                          tone: "warning",
+                          title: labels.marketDetails.orderBookUnavailableTitle,
+                          description: labels.marketDetails.orderBookUnavailableDescription,
+                          actionLabel: labels.common.retry,
+                          onAction: handleRetryOrderBook,
+                          className: "min-h-[248px] px-5 py-10 md:min-h-[272px]"
+                        }
+                      ) : hasNoOrderBook ? /* @__PURE__ */ jsx(
+                        StateMessage,
+                        {
+                          ariaLabel: labels.marketDetails.orderBookEmptyAria,
+                          title: labels.marketDetails.orderBookEmptyTitle,
+                          description: labels.marketDetails.orderBookEmptyDescription,
+                          className: "min-h-[248px] px-5 py-10 md:min-h-[272px]"
                         }
                       ) : /* @__PURE__ */ jsxs(Fragment, { children: [
                         /* @__PURE__ */ jsx(
@@ -791,7 +844,8 @@ var MarketDetailsContent = ({
                             rows: askRows,
                             title: labels.marketDetails.asks,
                             formatNumber: config.formatNumber,
-                            formatCurrency: config.formatCurrency
+                            formatCurrency: config.formatCurrency,
+                            visibleRows: orderBookDepth
                           }
                         ),
                         /* @__PURE__ */ jsx(
@@ -800,7 +854,8 @@ var MarketDetailsContent = ({
                             rows: bidRows,
                             title: labels.marketDetails.bids,
                             formatNumber: config.formatNumber,
-                            formatCurrency: config.formatCurrency
+                            formatCurrency: config.formatCurrency,
+                            visibleRows: orderBookDepth
                           }
                         )
                       ] }) }) : null,
@@ -935,12 +990,13 @@ var MarketDetails = (props) => {
     (_a2 = props.onOpenChange) == null ? void 0 : _a2.call(props, nextIsOpened);
   };
   const hasEventProp = "event" in props && !!props.event;
-  const { event: fetchedEvent, isLoading: isFetchingEvent } = useEvent(
-    hasEventProp ? void 0 : props.eventId,
-    {
-      enabled: !props.isLoading && !hasEventProp && !!props.eventId
-    }
-  );
+  const {
+    event: fetchedEvent,
+    error: eventError,
+    isLoading: isFetchingEvent
+  } = useEvent(hasEventProp ? void 0 : props.eventId, {
+    enabled: !props.isLoading && !hasEventProp && !!props.eventId
+  });
   if (props.isLoading) {
     return /* @__PURE__ */ jsx(
       MarketDetailsLoadingState,
@@ -972,6 +1028,9 @@ var MarketDetails = (props) => {
     );
   }
   if (!fetchedEvent) {
+    if (isErrorWithStatus(eventError, 404)) {
+      return /* @__PURE__ */ jsx(MarketDetailsNotFoundState, { ariaLabel: props.ariaLabel, classNames: props.classNames });
+    }
     return /* @__PURE__ */ jsx(MarketDetailsUnavailableState, { ariaLabel: props.ariaLabel, classNames: props.classNames });
   }
   return /* @__PURE__ */ jsx(

package/dist/{chunk-KRQFVMJE.mjs → chunk-GFBF2J3Y.mjs}

@@ -1,12 +1,15 @@
 import {
   EventListItem
-} from "./chunk-RKCVOKE3.mjs";
+} from "./chunk-CTYJVVHJ.mjs";
 import {
   Tabs
 } from "./chunk-S3H63TQ5.mjs";
+import {
+  StateMessage
+} from "./chunk-XUCS575S.mjs";
 import {
   Skeleton
-} from "./chunk-V52WSZHQ.mjs";
+} from "./chunk-M4RJHRFT.mjs";
 import {
   VenueLogo
 } from "./chunk-PORVP72S.mjs";
@@ -17,8 +20,9 @@ import {
   Typography
 } from "./chunk-ERGNR6UQ.mjs";
 import {
-  __spreadProps,
-  __spreadValues,
+  Card
+} from "./chunk-FO2QCB4Z.mjs";
+import {
   cn
 } from "./chunk-GJ4U5NCE.mjs";
 
@@ -55,22 +59,10 @@ var getDefaultEventListTabs = (labels) => {
 
 // src/events/list/event-list.utils.ts
 var mapEventToEventListItemEvent = (event) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
-  const fallbackVenueEvent = event.venueEvents[0];
-  if (!fallbackVenueEvent)
-    return null;
   const mergedVenueMarkets = event.markets.flatMap((m) => m.venueMarkets);
-  if ((mergedVenueMarkets == null ? void 0 : mergedVenueMarkets.length) === 0)
+  if (mergedVenueMarkets.length === 0)
     return null;
-  return __spreadProps(__spreadValues({}, event), {
-    id: event.id,
-    title: event.title || fallbackVenueEvent.title,
-    description: (_b = (_a = event.description) != null ? _a : fallbackVenueEvent.description) != null ? _b : null,
-    volume: (_d = (_c = event.volume) != null ? _c : fallbackVenueEvent.volume) != null ? _d : null,
-    startDate: (_f = (_e = event.startDate) != null ? _e : fallbackVenueEvent.startDate) != null ? _f : null,
-    endDate: (_h = (_g = event.endDate) != null ? _g : fallbackVenueEvent.endDate) != null ? _h : null,
-    creationDate: (_j = (_i = event.creationDate) != null ? _i : fallbackVenueEvent.creationDate) != null ? _j : null
-  });
+  return event;
 };
 var filterEventsByTabValue = (events, _tabValue) => {
   return events;
@@ -146,7 +138,7 @@ var EventList = ({
   const [activeTabValue, setActiveTabValue] = useState(
     (_b = (_a = defaultEventListTabs[0]) == null ? void 0 : _a.value) != null ? _b : "matched"
   );
-  const [shouldUseSelectOverflow, setShouldUseSelectOverflow] = useState(false);
+  const [_shouldUseSelectOverflow, setShouldUseSelectOverflow] = useState(false);
   const activeTab = useMemo(() => {
     return defaultEventListTabs.find((tab) => tab.value === activeTabValue);
   }, [activeTabValue]);
@@ -308,14 +300,15 @@ var EventList = ({
         },
         `loading-${index}`
       )),
-      !isLoading && !isError && (tileEvents == null ? void 0 : tileEvents.length) === 0 ? /* @__PURE__ */ jsx(
-        Typography,
+      !isLoading && !isError && (tileEvents == null ? void 0 : tileEvents.length) === 0 ? /* @__PURE__ */ jsx(Card, { className: "col-span-full overflow-hidden shadow-none hover:shadow-none", children: /* @__PURE__ */ jsx(
+        StateMessage,
         {
-          variant: "body",
-          className: "w-full col-span-full flex flex-col items-center justify-center h-32",
-          children: labels.eventList.empty
+          ariaLabel: labels.eventList.emptyAria,
+          title: labels.eventList.emptyTitle,
+          description: labels.eventList.emptyDescription,
+          className: "min-h-[320px]"
         }
-      ) : null,
+      ) }) : null,
       isError ? /* @__PURE__ */ jsx(
         Typography,
         {

package/dist/{chunk-ZJJA4I3I.mjs → chunk-KIYMVWL4.mjs}

@@ -1,6 +1,6 @@
 import {
   EventList
-} from "./chunk-KRQFVMJE.mjs";
+} from "./chunk-GFBF2J3Y.mjs";
 import {
   Tabs
 } from "./chunk-S3H63TQ5.mjs";

package/dist/{chunk-CTVMT3VL.mjs → chunk-LCZKSITC.mjs}

@@ -60,10 +60,10 @@ var SwitchButton = ({
     return null;
   }
   const handleKeyDown = (event, optionIndex) => {
-    if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") {
+    if ((event == null ? void 0 : event.key) !== "ArrowLeft" && (event == null ? void 0 : event.key) !== "ArrowRight") {
       return;
     }
-    event.preventDefault();
+    event == null ? void 0 : event.preventDefault();
     const nextOptionIndex = resolveNextEnabledIndex(
       options,
       optionIndex,