@agg-market/ui 4.0.0 → 5.0.0

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-MBHTXNHX.mjs → chunk-T7TATHPD.mjs}

@@ -6,10 +6,16 @@ import {
 } from "./chunk-MJHKBCXQ.mjs";
 import {
   EventListItemDetails
-} from "./chunk-JNH64AKR.mjs";
+} from "./chunk-Q6DGDBPV.mjs";
 import {
   MarketDetails
-} from "./chunk-GNSPZ53C.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
+};