@agg-market/ui 3.0.1 → 5.0.0

package/dist/{chunk-FF3QYU26.mjs → chunk-Q6DGDBPV.mjs}

@@ -8,15 +8,19 @@ import {
   resolveOutcomeLabels,
   resolveOutcomesByVenue,
   resolveSeriesColor
-} from "./chunk-422MCIXV.mjs";
+} from "./chunk-34IRJYSU.mjs";
 import {
+  isErrorWithStatus,
   normalizeProbability,
   resolveEventListItemEvent,
   resolveTileImage,
   resolveTileTitle,
   resolveVenueLabel,
   selectPrimaryVenueMarket
-} from "./chunk-GHB3GOCW.mjs";
+} from "./chunk-MKVGQ7AS.mjs";
+import {
+  StateMessage
+} from "./chunk-XUCS575S.mjs";
 import {
   Badge
 } from "./chunk-K6IJ4WBM.mjs";
@@ -24,7 +28,7 @@ import {
   Skeleton,
   detailsBaseCardClassName,
   eventListItemDetailsTimeRanges
-} from "./chunk-V52WSZHQ.mjs";
+} from "./chunk-M4RJHRFT.mjs";
 import {
   VenueLogo
 } from "./chunk-PORVP72S.mjs";
@@ -39,10 +43,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 {
   __objRest,
   __spreadProps,
@@ -86,6 +90,21 @@ var EventListItemDetailsUnavailableState = ({
     }
   );
 };
+var EventListItemDetailsNotFoundState = ({
+  classNames,
+  ariaLabel
+}) => {
+  const labels = useLabels();
+  return /* @__PURE__ */ jsx(Card, { className: cn(detailsBaseCardClassName, classNames == null ? void 0 : classNames.root), children: /* @__PURE__ */ jsx(
+    StateMessage,
+    {
+      ariaLabel: ariaLabel != null ? ariaLabel : labels.eventItemDetails.notFoundAria,
+      title: labels.eventItemDetails.notFoundTitle,
+      description: labels.eventItemDetails.notFoundDescription,
+      className: "min-h-[280px] md:min-h-[320px]"
+    }
+  ) });
+};
 var probabilityModeOrder = ["yes", "no"];
 var clampProbability = (value) => {
   if (value < 0)
@@ -101,13 +120,18 @@ var resolveAverageProbability = (values) => {
   return validValues.reduce((sum, value) => sum + value, 0) / validValues.length;
 };
 var resolveOutcomeCandidateIds = (market, outcome) => {
-  var _a;
-  return [outcome.id, (_a = outcome.externalIdentifier) != null ? _a : void 0, market.externalIdentifier].filter(
-    (value) => typeof value === "string" && value.trim().length > 0
-  );
+  var _a, _b;
+  const marketWithCanonicalId = market;
+  return [
+    outcome.id,
+    (_a = outcome.externalIdentifier) != null ? _a : void 0,
+    market.externalIdentifier,
+    (_b = marketWithCanonicalId.marketId) != null ? _b : void 0
+  ].filter((value) => typeof value === "string" && value.trim().length > 0);
 };
 var EventListItemDetailsGraphSection = ({
   venueMarkets,
+  canonicalMarketId,
   selectedOutcomeLabel,
   onSelectedOutcomeLabelChange,
   switchLabels,
@@ -200,12 +224,17 @@ var EventListItemDetailsGraphSection = ({
     return [...outcomeByModeAndId.values()];
   }, [selectedOutcomesByMode]);
   const priceHistoryGroups = useMemo(() => {
-    return buildPriceHistoryGroups(allOutcomesForHistory);
-  }, [allOutcomesForHistory]);
+    return buildPriceHistoryGroups(allOutcomesForHistory, canonicalMarketId);
+  }, [allOutcomesForHistory, canonicalMarketId]);
   const timeWindow = useMemo(() => {
     return getTimeWindowByRange(selectedTimeRange);
   }, [selectedTimeRange]);
-  const { data: priceHistoryData, isLoading: isPriceHistoryLoading } = usePriceHistory(__spreadProps(__spreadValues({
+  const {
+    data: priceHistoryData,
+    isLoading: isPriceHistoryLoading,
+    error: priceHistoryError,
+    results: priceHistoryResults
+  } = usePriceHistory(__spreadProps(__spreadValues({
     groups: priceHistoryGroups
   }, timeWindow), {
     enabled: priceHistoryGroups.length > 0
@@ -309,6 +338,32 @@ var EventListItemDetailsGraphSection = ({
       return venue;
     });
   };
+  const handleRetryPriceHistory = () => {
+    void Promise.all(priceHistoryResults.map((result) => result.refetch()));
+  };
+  if (priceHistoryError) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "w-full rounded-agg-xl border border-agg-separator bg-agg-secondary",
+          classNames == null ? void 0 : classNames.chart
+        ),
+        children: /* @__PURE__ */ jsx(
+          StateMessage,
+          {
+            ariaLabel: labels.eventItemDetails.chartUnavailableAria,
+            tone: "warning",
+            title: labels.eventItemDetails.chartUnavailableTitle,
+            description: labels.eventItemDetails.chartUnavailableDescription,
+            actionLabel: labels.common.retry,
+            onAction: handleRetryPriceHistory,
+            className: "min-h-[300px] px-5 py-10 md:px-10"
+          }
+        )
+      }
+    );
+  }
   return /* @__PURE__ */ jsx(
     LineChart,
     {
@@ -405,11 +460,12 @@ var EventListItemDetailsContent = ({
   ariaLabel,
   defaultTimeRange
 }) => {
+  var _a, _b;
   const config = useSdkUiConfig();
   const labels = useLabels();
   const venueMarkets = useMemo(() => {
-    var _a, _b, _c;
-    return (_c = (_b = (_a = event.markets) == null ? void 0 : _a[0]) == null ? void 0 : _b.venueMarkets) != null ? _c : [];
+    var _a2, _b2, _c;
+    return (_c = (_b2 = (_a2 = event.markets) == null ? void 0 : _a2[0]) == null ? void 0 : _b2.venueMarkets) != null ? _c : [];
   }, [event.markets]);
   const primaryVenueMarket = useMemo(() => {
     return selectPrimaryVenueMarket(venueMarkets);
@@ -447,9 +503,9 @@ var EventListItemDetailsContent = ({
     if (outcomeLabels.length === 0)
       return void 0;
     return [...outcomeLabels].sort((left, right) => {
-      var _a, _b;
-      const leftProbability = (_a = probabilityByLabel.get(left)) != null ? _a : -1;
-      const rightProbability = (_b = probabilityByLabel.get(right)) != null ? _b : -1;
+      var _a2, _b2;
+      const leftProbability = (_a2 = probabilityByLabel.get(left)) != null ? _a2 : -1;
+      const rightProbability = (_b2 = probabilityByLabel.get(right)) != null ? _b2 : -1;
       return rightProbability - leftProbability;
     })[0];
   }, [outcomeLabels, probabilityByLabel]);
@@ -465,18 +521,18 @@ var EventListItemDetailsContent = ({
     setSelectedOutcomeLabel(fallbackOutcomeLabel);
   }, [isDateOutcomeMarket, mainOutcomeLabel, outcomeLabels, selectedOutcomeLabel]);
   const switchLabels = useMemo(() => {
-    var _a, _b;
+    var _a2, _b2;
     if (isDateOutcomeMarket) {
       return [labels.eventItemDetails.yes, labels.eventItemDetails.no];
     }
     const sortedOutcomeLabels = [...outcomeLabels].sort((left, right) => {
-      var _a2, _b2;
-      const leftProbability = (_a2 = probabilityByLabel.get(left)) != null ? _a2 : -1;
-      const rightProbability = (_b2 = probabilityByLabel.get(right)) != null ? _b2 : -1;
+      var _a3, _b3;
+      const leftProbability = (_a3 = probabilityByLabel.get(left)) != null ? _a3 : -1;
+      const rightProbability = (_b3 = probabilityByLabel.get(right)) != null ? _b3 : -1;
       return rightProbability - leftProbability;
     });
-    const firstLabel = (_a = sortedOutcomeLabels[0]) != null ? _a : labels.eventItemDetails.yes;
-    const secondLabel = (_b = sortedOutcomeLabels.find((label) => label !== firstLabel)) != null ? _b : firstLabel;
+    const firstLabel = (_a2 = sortedOutcomeLabels[0]) != null ? _a2 : labels.eventItemDetails.yes;
+    const secondLabel = (_b2 = sortedOutcomeLabels.find((label) => label !== firstLabel)) != null ? _b2 : firstLabel;
     return [firstLabel, secondLabel];
   }, [
     isDateOutcomeMarket,
@@ -486,8 +542,8 @@ var EventListItemDetailsContent = ({
     probabilityByLabel
   ]);
   const volumeLabel = useMemo(() => {
-    var _a;
-    const resolvedVolume = typeof event.volume === "number" ? event.volume : (_a = primaryVenueMarket == null ? void 0 : primaryVenueMarket.volume) != null ? _a : void 0;
+    var _a2;
+    const resolvedVolume = typeof event.volume === "number" ? event.volume : (_a2 = primaryVenueMarket == null ? void 0 : primaryVenueMarket.volume) != null ? _a2 : void 0;
     if (typeof resolvedVolume !== "number")
       return "";
     return `${config.formatCompactCurrency(resolvedVolume)} ${labels.eventItemDetails.volumeSuffix}`;
@@ -585,6 +641,7 @@ var EventListItemDetailsContent = ({
           EventListItemDetailsGraphSection,
           {
             venueMarkets,
+            canonicalMarketId: (_b = (_a = event.markets) == null ? void 0 : _a[0]) == null ? void 0 : _b.id,
             selectedOutcomeLabel,
             onSelectedOutcomeLabelChange: setSelectedOutcomeLabel,
             switchLabels,
@@ -631,6 +688,7 @@ var EventListItemDetailsByEventId = (_a) => {
   ]);
   const {
     event: fetchedEvent,
+    error,
     isError,
     isLoading
   } = useEvent(eventId, {
@@ -651,7 +709,10 @@ var EventListItemDetailsByEventId = (_a) => {
   if (isLoading) {
     return /* @__PURE__ */ jsx(EventListItemDetailsLoadingState, { classNames: rest.classNames, ariaLabel: rest.ariaLabel });
   }
-  if (!resolvedEvent && !isError) {
+  if (isErrorWithStatus(error, 404)) {
+    return /* @__PURE__ */ jsx(EventListItemDetailsNotFoundState, { classNames: rest.classNames, ariaLabel: rest.ariaLabel });
+  }
+  if (!fetchedEvent && !isError) {
     return /* @__PURE__ */ jsx(EventListItemDetailsLoadingState, { classNames: rest.classNames, ariaLabel: rest.ariaLabel });
   }
   if (!resolvedEvent) {

package/dist/{chunk-DCORNTCY.mjs → chunk-QDMHLRDY.mjs}

@@ -1,3 +1,6 @@
+import {
+  SearchEmptyIcon
+} from "./chunk-4343LYSH.mjs";
 import {
   VenueLogo
 } from "./chunk-PORVP72S.mjs";
@@ -5,10 +8,6 @@ import {
   Icon
 } from "./chunk-PZTHM6WG.mjs";
 import {
-  getIconA11yProps
-} from "./chunk-BNDFQPHF.mjs";
-import {
-  __objRest,
   __spreadProps,
   __spreadValues,
   cn,
@@ -19,39 +18,6 @@ import {
 import { useMemo } from "react";
 import { useLabels, useSdkUiConfig } from "@agg-market/hooks";
 
-// src/primitives/search/search-empty-icon.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var SearchEmptyIcon = (_a) => {
-  var _b = _a, { title, className } = _b, props = __objRest(_b, ["title", "className"]);
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    __spreadProps(__spreadValues(__spreadValues({
-      viewBox: "0 0 40 40",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      className
-    }, getIconA11yProps(title)), props), {
-      children: [
-        title ? /* @__PURE__ */ jsx("title", { children: title }) : null,
-        /* @__PURE__ */ jsx("circle", { cx: "19.9987", cy: "20.0013", r: "9.2", stroke: "currentColor", strokeWidth: "1.6" }),
-        /* @__PURE__ */ jsx(
-          "ellipse",
-          {
-            cx: "19.9987",
-            cy: "20.0012",
-            rx: "17.2",
-            ry: "6.6",
-            transform: "rotate(-35 19.9987 20.0012)",
-            stroke: "currentColor",
-            strokeWidth: "1.6"
-          }
-        )
-      ]
-    })
-  );
-};
-SearchEmptyIcon.displayName = "SearchEmptyIcon";
-
 // src/primitives/search/search.types.ts
 import { z } from "zod";
 var searchResultVenues = ["kalshi", "polymarket", "opinion", "probable"];
@@ -76,7 +42,7 @@ var searchResultItemSchema = z.object({
 var searchResultItemsSchema = z.array(searchResultItemSchema);
 
 // src/primitives/search/index.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 var SearchResultRow = ({
   item,
   resultAria,
@@ -87,10 +53,12 @@ var SearchResultRow = ({
   const handleResultClick = () => {
     onSelect == null ? void 0 : onSelect(item);
   };
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs(
     "button",
     {
       type: "button",
+      role: "option",
+      "aria-selected": "false",
       className: cn(
         "group/agg-search-result",
         "group flex w-full items-center gap-6 px-5 py-3 text-left",
@@ -101,8 +69,8 @@ var SearchResultRow = ({
       onClick: handleResultClick,
       "aria-label": resultAria(item.title),
       children: [
-        /* @__PURE__ */ jsxs2("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
-          /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
+          /* @__PURE__ */ jsx(
             "img",
             {
               src: item.thumbnailSrc,
@@ -113,7 +81,7 @@ var SearchResultRow = ({
               )
             }
           ),
-          /* @__PURE__ */ jsx2(
+          /* @__PURE__ */ jsx(
             "p",
             {
               className: cn(
@@ -124,10 +92,10 @@ var SearchResultRow = ({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs2("div", { className: cn("flex w-[200px] shrink-0 items-center gap-2", classNames == null ? void 0 : classNames.resultMeta), children: [
-          /* @__PURE__ */ jsx2(VenueLogo, { venue: item.venue, size: "small" }),
-          /* @__PURE__ */ jsxs2("div", { className: "flex min-w-0 flex-1 items-baseline gap-2", children: [
-            /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsxs("div", { className: cn("flex w-[200px] shrink-0 items-center gap-2", classNames == null ? void 0 : classNames.resultMeta), children: [
+          /* @__PURE__ */ jsx(VenueLogo, { venue: item.venue, size: "small" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-baseline gap-2", children: [
+            /* @__PURE__ */ jsx(
               "p",
               {
                 className: cn(
@@ -137,7 +105,7 @@ var SearchResultRow = ({
                 children: item.valueLabel
               }
             ),
-            /* @__PURE__ */ jsx2(
+            /* @__PURE__ */ jsx(
               "p",
               {
                 className: cn(
@@ -149,7 +117,7 @@ var SearchResultRow = ({
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsx(
           Icon,
           {
             name: "chevron-right",
@@ -190,8 +158,8 @@ var Search = ({
   const handleInputChange = (event) => {
     onValueChange(event.target.value);
   };
-  return /* @__PURE__ */ jsxs2("div", { className: cn("group/agg-search", "flex w-full flex-col gap-1", classNames == null ? void 0 : classNames.root), children: [
-    /* @__PURE__ */ jsx2("label", { className: "w-full", children: /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs("div", { className: cn("group/agg-search", "flex w-full flex-col gap-1", classNames == null ? void 0 : classNames.root), children: [
+    /* @__PURE__ */ jsx("label", { className: "w-full", children: /* @__PURE__ */ jsxs(
       "div",
       {
         className: cn(
@@ -205,7 +173,7 @@ var Search = ({
           classNames == null ? void 0 : classNames.inputContainer
         ),
         children: [
-          /* @__PURE__ */ jsx2(
+          /* @__PURE__ */ jsx(
             Icon,
             {
               name: "search",
@@ -213,7 +181,7 @@ var Search = ({
               className: cn("text-agg-muted-foreground", classNames == null ? void 0 : classNames.searchIcon)
             }
           ),
-          /* @__PURE__ */ jsx2(
+          /* @__PURE__ */ jsx(
             "input",
             __spreadProps(__spreadValues({}, inputProps), {
               type: "text",
@@ -234,24 +202,25 @@ var Search = ({
         ]
       }
     ) }),
-    shouldRenderResults ? /* @__PURE__ */ jsx2(
+    shouldRenderResults ? /* @__PURE__ */ jsx(
       "div",
       {
         className: cn(
           "w-full overflow-hidden rounded-agg-xl border border-agg-separator bg-agg-secondary py-2 shadow-[0px_8px_16px_0px_rgba(0,0,0,0.1)]",
           classNames == null ? void 0 : classNames.dropdown
         ),
-        children: /* @__PURE__ */ jsx2(
+        children: /* @__PURE__ */ jsx(
           "ul",
           {
             className: cn("m-0 flex list-none flex-col p-0", classNames == null ? void 0 : classNames.resultsList),
             role: "listbox",
             "aria-label": labels.search.resultsAria,
-            children: validatedResults.map((item, index) => /* @__PURE__ */ jsx2(
+            children: validatedResults.map((item, index) => /* @__PURE__ */ jsx(
               "li",
               {
+                role: "presentation",
                 className: cn(index > 0 && "border-t border-agg-separator", classNames == null ? void 0 : classNames.resultItem),
-                children: /* @__PURE__ */ jsx2(
+                children: /* @__PURE__ */ jsx(
                   SearchResultRow,
                   {
                     item,
@@ -267,29 +236,29 @@ var Search = ({
         )
       }
     ) : null,
-    shouldRenderNoResults ? /* @__PURE__ */ jsx2(
+    shouldRenderNoResults ? /* @__PURE__ */ jsx(
       "div",
       {
         className: cn(
           "w-full overflow-hidden rounded-agg-xl border border-agg-separator bg-agg-secondary py-10 shadow-[0px_8px_16px_0px_rgba(0,0,0,0.1)]",
           classNames == null ? void 0 : classNames.emptyState
         ),
-        children: /* @__PURE__ */ jsxs2(
+        children: /* @__PURE__ */ jsxs(
           "div",
           {
             className: cn("flex flex-col items-center gap-5", classNames == null ? void 0 : classNames.emptyStateContent),
             role: "status",
             "aria-live": "polite",
             children: [
-              /* @__PURE__ */ jsx2(
+              /* @__PURE__ */ jsx(
                 SearchEmptyIcon,
                 {
                   className: cn("h-10 w-10 text-agg-muted-foreground", classNames == null ? void 0 : classNames.emptyStateIcon),
                   "aria-hidden": true
                 }
               ),
-              /* @__PURE__ */ jsxs2("div", { className: "flex flex-col items-center gap-1 text-center", children: [
-                /* @__PURE__ */ jsx2(
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-1 text-center", children: [
+                /* @__PURE__ */ jsx(
                   "p",
                   {
                     className: cn(
@@ -299,7 +268,7 @@ var Search = ({
                     children: labels.search.noResultsTitle
                   }
                 ),
-                /* @__PURE__ */ jsx2(
+                /* @__PURE__ */ jsx(
                   "p",
                   {
                     className: cn(

package/dist/{chunk-RGHA4PZH.mjs → chunk-T7TATHPD.mjs}

@@ -1,15 +1,21 @@
 import {
   Settlement
-} from "./chunk-KUWTY4EM.mjs";
+} from "./chunk-3W7NBJLU.mjs";
 import {
   PlaceOrder
-} from "./chunk-KSCSYCEF.mjs";
+} from "./chunk-MJHKBCXQ.mjs";
 import {
   EventListItemDetails
-} from "./chunk-FF3QYU26.mjs";
+} from "./chunk-Q6DGDBPV.mjs";
 import {
   MarketDetails
-} from "./chunk-MVJNQN7P.mjs";
+} from "./chunk-DHBHKIJR.mjs";
+import {
+  isErrorWithStatus
+} from "./chunk-MKVGQ7AS.mjs";
+import {
+  StateMessage
+} from "./chunk-XUCS575S.mjs";
 import {
   Typography
 } from "./chunk-ERGNR6UQ.mjs";
@@ -99,6 +105,20 @@ var EventMarketPageUnavailableState = ({
     }
   );
 };
+var EventMarketPageNotFoundState = ({
+  ariaLabel
+}) => {
+  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,
+      title: labels.eventItemDetails.notFoundTitle,
+      description: labels.eventItemDetails.notFoundDescription,
+      className: "min-h-[320px] md:min-h-[360px]"
+    }
+  ) });
+};
 var EventMarketPageLoadingState = ({
   placeOrder,
   settlement,
@@ -255,12 +275,13 @@ var EventMarketPageContent = ({
 };
 var EventMarketPage = (props) => {
   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(EventMarketPageLoadingState, { placeOrder: props.placeOrder, settlement: props.settlement });
   }
@@ -278,6 +299,9 @@ var EventMarketPage = (props) => {
     );
   }
   if (!fetchedEvent) {
+    if (isErrorWithStatus(eventError, 404)) {
+      return /* @__PURE__ */ jsx(EventMarketPageNotFoundState, { ariaLabel: props.ariaLabel });
+    }
     return /* @__PURE__ */ jsx(EventMarketPageUnavailableState, { ariaLabel: props.ariaLabel });
   }
   return /* @__PURE__ */ jsx(EventMarketPageContent, __spreadProps(__spreadValues({}, props), { event: fetchedEvent }));

package/dist/chunk-XUCS575S.mjs

@@ -0,0 +1,65 @@
+import {
+  SearchEmptyIcon
+} from "./chunk-4343LYSH.mjs";
+import {
+  WarningIcon
+} from "./chunk-PZTHM6WG.mjs";
+import {
+  Button
+} from "./chunk-KAGYJ4XT.mjs";
+import {
+  Typography
+} from "./chunk-ERGNR6UQ.mjs";
+import {
+  cn
+} from "./chunk-GJ4U5NCE.mjs";
+
+// src/primitives/state-message/index.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var iconClassName = "h-9 w-9 text-agg-muted-foreground";
+var StateMessage = ({
+  ariaLabel,
+  tone = "empty",
+  title,
+  description,
+  actionLabel,
+  onAction,
+  className
+}) => {
+  const icon = tone === "warning" ? /* @__PURE__ */ jsx(WarningIcon, { className: iconClassName, "aria-hidden": true }) : /* @__PURE__ */ jsx(SearchEmptyIcon, { className: iconClassName, "aria-hidden": true });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex min-h-[240px] w-full flex-col items-center justify-center px-5 py-10 text-center md:px-10",
+        className
+      ),
+      role: "status",
+      "aria-live": "polite",
+      "aria-label": ariaLabel,
+      children: /* @__PURE__ */ jsxs("div", { className: "flex max-w-[360px] flex-col items-center gap-6", children: [
+        icon,
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "body-large-strong", children: title }),
+          description ? /* @__PURE__ */ jsx(Typography, { variant: "body", className: "whitespace-pre-line text-agg-muted-foreground", children: description }) : null
+        ] }),
+        actionLabel && onAction ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "tertiary",
+            size: "large",
+            className: "text-agg-base leading-agg-6",
+            "aria-label": actionLabel,
+            onClick: onAction,
+            children: actionLabel
+          }
+        ) : null
+      ] })
+    }
+  );
+};
+StateMessage.displayName = "StateMessage";
+
+export {
+  StateMessage
+};