@agg-build/ui 2.4.1 → 2.4.3

package/dist/events.js

@@ -4782,17 +4782,10 @@ var SettlementSkeletonView = ({
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { className: "flex w-full items-center justify-between gap-4", children: [
           /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(SkeletonBlock, { className: "h-4 w-[81px] rounded-agg-sm" }),
-          /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(SkeletonBlock, { className: "h-5 w-full max-w-[240px] rounded-agg-sm" })
+          /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(SkeletonBlock, { className: "h-5 w-[240px] max-w-[60%] rounded-agg-sm" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { className: "flex w-full flex-col gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(SkeletonBlock, { className: "h-5 w-[200px] rounded-agg-sm" }),
-          /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { className: "flex flex-col gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(SkeletonBlock, { className: "h-4 w-full max-w-[320px] rounded-agg-sm" }),
-            /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(SkeletonBlock, { className: "h-4 w-full max-w-[280px] rounded-agg-sm" })
-          ] })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { className: "h-px w-full bg-agg-separator" }),
-        /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { className: "flex w-full flex-col gap-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(SkeletonBlock, { className: "h-5 w-[200px] rounded-agg-sm" }),
+        /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { className: "flex w-full flex-col gap-4", children: [
           /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(SkeletonBlock, { className: "size-4 rounded-agg-sm" }),
             /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(SkeletonBlock, { className: "h-5 w-[100px] rounded-agg-sm" })
@@ -10221,6 +10214,137 @@ SettlementTextRenderer.displayName = "SettlementTextRenderer";
 // src/trading/settlement/index.tsx
 var import_jsx_runtime123 = require("react/jsx-runtime");
 var SETTLEMENT_SECTION_ID = "agg-settlement-section";
+var getSettlementDifferenceId = (sectionId, canonicalKey) => {
+  return `${sectionId}-difference-${canonicalKey}`;
+};
+var dateOnlyRegex = /^(\d{4})-(\d{2})-(\d{2})$/;
+var isoTimestampWithTimezoneRegex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}(?::\d{2}(?:\.\d{1,9})?)?(?:Z|[+-]\d{2}:?\d{2})$/i;
+var normalizeDifferenceText = (value) => {
+  return value.trim().toLowerCase().replace(/[^a-z0-9]+/g, "_").replace(/^_+|_+$/g, "");
+};
+var resolveCanonicalDifferenceKey = (difference) => {
+  const normalizedType = normalizeDifferenceText(difference.type);
+  const combined = normalizeDifferenceText(`${difference.type} ${difference.title}`);
+  if (combined.includes("start_date") || combined.includes("open_date")) return "start_date";
+  if (combined.includes("end_date") || combined.includes("close_date") || combined.includes("closing_date") || combined.includes("expiration_date") || combined.includes("expiry_date")) {
+    return "end_date";
+  }
+  if (combined.includes("resolution_timing") || combined.includes("resolution_date") || combined.includes("resolution_deadline") || combined.includes("settlement_date") || combined.includes("settlement_deadline") || combined.includes("settlement_timing")) {
+    return "resolution_timing";
+  }
+  return normalizedType || "other";
+};
+var parseSettlementDateMs = (value) => {
+  const trimmed = value.trim();
+  const dateOnlyMatch = dateOnlyRegex.exec(trimmed);
+  if (dateOnlyMatch) {
+    const [, year, month, day] = dateOnlyMatch;
+    return Date.UTC(Number(year), Number(month) - 1, Number(day));
+  }
+  if (!isoTimestampWithTimezoneRegex.test(trimmed)) return null;
+  const ms = Date.parse(trimmed);
+  return Number.isNaN(ms) ? null : ms;
+};
+var isDateLikeDifference = (canonicalKey) => {
+  return canonicalKey === "resolution_timing" || canonicalKey === "start_date" || canonicalKey === "end_date";
+};
+var hasEqualNormalizedDateValues = (difference, canonicalKey) => {
+  if (!isDateLikeDifference(canonicalKey)) return false;
+  const values = Object.values(difference.perVenue);
+  if (values.length < 2) return false;
+  const timestamps = values.map(parseSettlementDateMs);
+  if (timestamps.some((timestamp) => timestamp === null)) return false;
+  return new Set(timestamps).size === 1;
+};
+var resolveDifferenceSeverity = (difference, canonicalKey) => {
+  var _a;
+  const combined = normalizeDifferenceText(
+    `${difference.type} ${difference.title} ${(_a = difference.summary) != null ? _a : ""}`
+  );
+  if (isDateLikeDifference(canonicalKey)) return "critical";
+  if (canonicalKey === "scope" || canonicalKey === "threshold" || canonicalKey === "edge_cases") {
+    return "critical";
+  }
+  if (combined.includes("conflict") || combined.includes("void") || combined.includes("cancel") || combined.includes("postpone") || combined.includes("recount") || combined.includes("overtime") || combined.includes("extra_time")) {
+    return "critical";
+  }
+  return "informational";
+};
+var mergePerVenueValues = (current, next) => {
+  return Object.entries(next).reduce(
+    (merged, [venue, value]) => {
+      if (merged[venue] === void 0) merged[venue] = value;
+      return merged;
+    },
+    __spreadValues({}, current)
+  );
+};
+var prepareSettlementDifferences = (differences) => {
+  const byCanonicalKey = /* @__PURE__ */ new Map();
+  for (const [originalIndex, difference] of (differences != null ? differences : []).entries()) {
+    const canonicalKey = resolveCanonicalDifferenceKey(difference);
+    if (hasEqualNormalizedDateValues(difference, canonicalKey)) continue;
+    const existing = byCanonicalKey.get(canonicalKey);
+    if (existing) {
+      byCanonicalKey.set(canonicalKey, __spreadProps(__spreadValues({}, existing), {
+        perVenue: mergePerVenueValues(existing.perVenue, difference.perVenue)
+      }));
+      continue;
+    }
+    byCanonicalKey.set(canonicalKey, __spreadProps(__spreadValues({}, difference), {
+      canonicalKey,
+      severity: resolveDifferenceSeverity(difference, canonicalKey),
+      originalIndex
+    }));
+  }
+  return Array.from(byCanonicalKey.values()).sort((left, right) => {
+    const severityDelta = Number(right.severity === "critical") - Number(left.severity === "critical");
+    if (severityDelta !== 0) return severityDelta;
+    return left.originalIndex - right.originalIndex;
+  });
+};
+var formatVenueFallbackLabel = (venue) => {
+  return venue.split(/[-_\s]+/).filter(Boolean).map((part) => `${part.slice(0, 1).toUpperCase()}${part.slice(1)}`).join(" ");
+};
+var resolveSettlementVenueLabel = (venue, labels) => {
+  var _a;
+  return (_a = labels.venues[venue]) != null ? _a : formatVenueFallbackLabel(venue);
+};
+var resolveDifferenceVenueKeys = (difference, settlementVenues) => {
+  const explicitVenues = Object.keys(difference.perVenue);
+  if (!isDateLikeDifference(difference.canonicalKey)) return explicitVenues;
+  const allVenues = [...settlementVenues != null ? settlementVenues : [], ...explicitVenues];
+  return Array.from(new Set(allVenues.filter((venue) => venue.trim().length > 0)));
+};
+var resolveDifferenceIconClassName = (canonicalKey) => {
+  if (canonicalKey.includes("source") || canonicalKey.includes("url")) return "fi-rr-world";
+  if (canonicalKey === "resolution_timing" || canonicalKey.includes("timing")) {
+    return "fi-rr-clock";
+  }
+  if (canonicalKey === "start_date" || canonicalKey.includes("start"))
+    return "fi-rr-calendar-clock";
+  if (canonicalKey === "end_date" || canonicalKey.includes("end")) return "fi-rr-calendar-clock";
+  if (canonicalKey.includes("cancel") || canonicalKey.includes("void") || canonicalKey.includes("postpone")) {
+    return "fi-rr-ban";
+  }
+  if (canonicalKey === "edge_cases" || canonicalKey.includes("edge")) {
+    return "fi-rr-triangle-warning";
+  }
+  if (canonicalKey === "scope") return "fi-rr-layers";
+  if (canonicalKey === "threshold") return "fi-rr-tachometer-alt-fastest";
+  if (canonicalKey.includes("wording")) return "fi-rr-document";
+  return "fi-rr-info";
+};
+var buildSettlementVenueRules = ({
+  eventBlock,
+  marketBlock,
+  primaryRulesBlock,
+  settlementVenueRules
+}) => {
+  if (settlementVenueRules) return settlementVenueRules;
+  const content = [marketBlock == null ? void 0 : marketBlock.content, primaryRulesBlock == null ? void 0 : primaryRulesBlock.content, eventBlock == null ? void 0 : eventBlock.content].filter((value) => typeof value === "string" && value.trim().length > 0).join("\n\n");
+  return content ? [{ venue: "polymarket", content }] : [];
+};
 var getSettlementHeaderClassName = () => {
   return "flex items-center justify-between gap-4";
 };
@@ -10232,9 +10356,12 @@ var Settlement = ({
   eventDescription,
   marketDescription,
   primaryRules,
+  settlementDiff,
+  settlementVenues,
+  settlementVenueRules,
   isLoading = false
 }) => {
-  var _a, _b, _c;
+  var _a, _b, _c, _d, _e;
   const labels = (0, import_hooks38.useLabels)();
   const blocks = (0, import_react14.useMemo)(
     () => dedupeSettlementSources({
@@ -10244,9 +10371,34 @@ var Settlement = ({
     }),
     [eventDescription, marketDescription, primaryRules]
   );
+  const settlementDifferences = (0, import_react14.useMemo)(
+    () => prepareSettlementDifferences(settlementDiff == null ? void 0 : settlementDiff.differences),
+    [settlementDiff == null ? void 0 : settlementDiff.differences]
+  );
   const eventBlock = (_a = blocks.find((block) => block.key === "eventDescription")) != null ? _a : null;
   const marketBlock = (_b = blocks.find((block) => block.key === "marketDescription")) != null ? _b : null;
   const primaryRulesBlock = (_c = blocks.find((block) => block.key === "primaryRules")) != null ? _c : null;
+  const venueRuleBlocks = (0, import_react14.useMemo)(
+    () => buildSettlementVenueRules({
+      eventBlock,
+      marketBlock,
+      primaryRulesBlock,
+      settlementVenueRules
+    }),
+    [eventBlock, marketBlock, primaryRulesBlock, settlementVenueRules]
+  );
+  const defaultOpenDifferenceKey = (_e = (_d = settlementDifferences[0]) == null ? void 0 : _d.canonicalKey) != null ? _e : null;
+  const [openDifferenceKeys, setOpenDifferenceKeys] = (0, import_react14.useState)(
+    () => defaultOpenDifferenceKey ? [defaultOpenDifferenceKey] : []
+  );
+  (0, import_react14.useEffect)(() => {
+    setOpenDifferenceKeys(defaultOpenDifferenceKey ? [defaultOpenDifferenceKey] : []);
+  }, [defaultOpenDifferenceKey]);
+  const handleToggleDifference = (canonicalKey) => {
+    setOpenDifferenceKeys(
+      (currentKeys) => currentKeys.includes(canonicalKey) ? currentKeys.filter((currentKey) => currentKey !== canonicalKey) : [...currentKeys, canonicalKey]
+    );
+  };
   if (isLoading) {
     return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
       Skeleton,
@@ -10258,6 +10410,124 @@ var Settlement = ({
     );
   }
   const resolvedSectionLabel = sectionLabel === defaultSettlementSectionLabel ? labels.trading.settlementSection : sectionLabel;
+  if (settlementDifferences.length > 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(
+      Card,
+      {
+        id,
+        className: cn(
+          "group/agg-settlement-card",
+          "flex w-full flex-col items-start gap-4 rounded-agg-xl border border-agg-separator bg-agg-secondary p-5 shadow-none hover:shadow-none sm:gap-5",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { className: "agg-settlement-header flex w-full flex-col items-start gap-1 text-agg-muted-foreground sm:flex-row sm:items-center sm:justify-between sm:gap-4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("p", { className: "shrink-0 text-agg-xs font-agg-bold leading-agg-4 uppercase", children: resolvedSectionLabel }),
+            question ? /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("p", { className: "agg-settlement-question min-w-0 text-agg-sm font-agg-normal leading-agg-5 sm:max-w-[314px] sm:truncate", children: question }) : null
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { className: "agg-settlement-differences flex w-full flex-col items-start gap-5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("p", { className: "text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground", children: "Key differences" }),
+              /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("span", { className: "flex size-4 shrink-0 items-center justify-center rounded-agg-full bg-agg-primary text-[10px] font-agg-bold leading-[14px] text-agg-on-primary", children: settlementDifferences.length })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("div", { className: "flex w-full flex-col items-start gap-5", children: settlementDifferences.map((difference) => {
+              const venueKeys = resolveDifferenceVenueKeys(difference, settlementVenues);
+              const isExpanded = openDifferenceKeys.includes(difference.canonicalKey) && venueKeys.length > 0;
+              return /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(
+                "div",
+                {
+                  id: getSettlementDifferenceId(id, difference.canonicalKey),
+                  className: "agg-settlement-difference flex w-full flex-col items-start gap-2 rounded-agg-lg",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(
+                      "button",
+                      {
+                        type: "button",
+                        className: "flex w-full cursor-pointer items-start gap-2 text-left",
+                        "aria-expanded": isExpanded,
+                        onClick: () => handleToggleDifference(difference.canonicalKey),
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+                            "i",
+                            {
+                              className: cn(
+                                "fi",
+                                resolveDifferenceIconClassName(difference.canonicalKey),
+                                "inline-flex size-4! shrink-0 items-center justify-center text-[16px] leading-none text-agg-muted-foreground"
+                              ),
+                              "aria-hidden": "true"
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("p", { className: "min-w-0 text-agg-sm font-agg-normal leading-agg-5 text-agg-foreground break-words [overflow-wrap:anywhere]", children: difference.title }),
+                          /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+                            Icon,
+                            {
+                              name: isExpanded ? "chevron-up" : "chevron-down",
+                              className: "size-4! mt-0.5 shrink-0 text-agg-foreground",
+                              "aria-hidden": "true"
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("dl", { className: "flex w-full flex-col items-start gap-1 px-6", children: venueKeys.map((venue) => {
+                      var _a2;
+                      const venueValue = (_a2 = difference.perVenue[venue]) != null ? _a2 : labels.trading.settlementValueUnavailable;
+                      const venueLabel = resolveSettlementVenueLabel(venue, labels);
+                      return /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { className: "flex w-full items-start gap-2", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+                          VenueLogo,
+                          {
+                            venue,
+                            size: "small",
+                            className: "mt-0.5 size-4",
+                            ariaLabel: venueLabel
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("dt", { className: "w-[88px] shrink-0 text-agg-sm font-agg-normal leading-agg-5 text-agg-foreground", children: venueLabel }),
+                        /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("dd", { className: "min-w-0 flex-1 text-agg-sm font-agg-normal leading-agg-5 text-agg-muted-foreground break-words [overflow-wrap:anywhere]", children: venueValue })
+                      ] }, venue);
+                    }) }) : null
+                  ]
+                },
+                difference.canonicalKey
+              );
+            }) }),
+            venueRuleBlocks.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(import_jsx_runtime123.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("div", { className: "h-px w-full bg-agg-separator" }),
+              /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("p", { className: "text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground", children: "Full rules by venue" }),
+              /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("div", { className: "flex w-full flex-col items-start gap-4", children: venueRuleBlocks.map((rule) => {
+                const venueLabel = resolveSettlementVenueLabel(rule.venue, labels);
+                return /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("details", { className: "group/agg-settlement-rule w-full", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("summary", { className: "flex cursor-pointer list-none items-center gap-2 text-agg-sm font-agg-normal leading-agg-5 text-agg-foreground marker:hidden", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+                      VenueLogo,
+                      {
+                        venue: rule.venue,
+                        size: "small",
+                        className: "size-4",
+                        ariaLabel: venueLabel
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("span", { children: venueLabel }),
+                    /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+                      Icon,
+                      {
+                        name: "chevron-down",
+                        className: "size-4! shrink-0 text-agg-foreground transition-transform group-open/agg-settlement-rule:rotate-180",
+                        "aria-hidden": "true"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("div", { className: "mt-3 pl-6", children: /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(SettlementTextRenderer, { content: rule.content }) })
+                ] }, rule.venue);
+              }) })
+            ] }) : null
+          ] })
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(
     Card,
     {
@@ -10272,7 +10542,7 @@ var Settlement = ({
           /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("p", { className: "text-agg-xs font-agg-bold leading-agg-4 uppercase text-agg-muted-foreground", children: resolvedSectionLabel }),
           question ? /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("p", { className: "agg-settlement-question text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground", children: question }) : null
         ] }),
-        blocks.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("p", { className: "agg-settlement-empty text-agg-sm leading-agg-5 text-agg-muted-foreground", children: labels.trading.settlementEmpty }) : /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { className: "agg-settlement-sections flex flex-col gap-4", children: [
+        blocks.length === 0 && settlementDifferences.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("p", { className: "agg-settlement-empty text-agg-sm leading-agg-5 text-agg-muted-foreground", children: labels.trading.settlementEmpty }) : /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { className: "agg-settlement-sections flex flex-col gap-4", children: [
           eventBlock || marketBlock ? /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(
             "div",
             {
@@ -10307,12 +10577,17 @@ Settlement.displayName = "Settlement";
 var import_jsx_runtime124 = require("react/jsx-runtime");
 var SettlementSummary = ({
   content,
+  settlementDiff,
   settlementSectionId = SETTLEMENT_SECTION_ID,
   className
 }) => {
   const labels = (0, import_hooks39.useLabels)();
   const firstParagraph = (0, import_react15.useMemo)(() => getFirstSettlementParagraph(content), [content]);
-  if (!firstParagraph) return null;
+  const settlementDifferences = (0, import_react15.useMemo)(
+    () => prepareSettlementDifferences(settlementDiff == null ? void 0 : settlementDiff.differences),
+    [settlementDiff == null ? void 0 : settlementDiff.differences]
+  );
+  if (!firstParagraph && settlementDifferences.length === 0) return null;
   const handleReadFullDetails = (event) => {
     event.preventDefault();
     event.stopPropagation();
@@ -10321,43 +10596,118 @@ var SettlementSummary = ({
     if (!target) return;
     target.scrollIntoView({ behavior: "smooth", block: "start" });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)("div", { className: cn("agg-settlement-summary flex w-full flex-col gap-2", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
-      Typography,
+  const handleDifferencePillClick = (event, canonicalKey) => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (typeof document === "undefined") return;
+    const target = document.getElementById(
+      getSettlementDifferenceId(settlementSectionId, canonicalKey)
+    );
+    if (!target) return;
+    const trigger = target.querySelector("button[aria-expanded]");
+    if ((trigger == null ? void 0 : trigger.getAttribute("aria-expanded")) === "false") {
+      trigger.click();
+    }
+    target.scrollIntoView({ behavior: "smooth", block: "start" });
+  };
+  const actionButton = /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(
+    "button",
+    {
+      type: "button",
+      className: cn(
+        "agg-settlement-summary-toggle",
+        "inline-flex shrink-0 cursor-pointer items-center gap-1 whitespace-nowrap text-agg-sm font-agg-bold leading-agg-5 text-agg-primary",
+        "hover:opacity-80",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-agg-primary focus-visible:ring-offset-0 focus-visible:ring-offset-agg-secondary"
+      ),
+      "aria-controls": settlementSectionId,
+      onClick: handleReadFullDetails,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("span", { children: labels.settlementSummary.readFullDetails }),
+        /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(Icon, { name: "chevron-down", className: "size-[14px]", "aria-hidden": "true" })
+      ]
+    }
+  );
+  if (settlementDifferences.length > 0) {
+    const visibleDifferences = settlementDifferences.slice(0, 2);
+    const hiddenDifferenceCount = settlementDifferences.length - visibleDifferences.length;
+    return /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(
+      "div",
       {
-        variant: "caption-caps",
-        className: "agg-settlement-summary-label text-agg-muted-foreground",
-        children: labels.settlementSummary.title
+        className: cn(
+          "agg-settlement-summary flex w-full flex-wrap items-start justify-between gap-x-4 gap-y-2",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)("div", { className: "flex min-w-[240px] flex-1 flex-wrap items-center gap-x-5 gap-y-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)("div", { className: "agg-settlement-summary-heading flex shrink-0 items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("p", { className: "text-agg-sm font-agg-normal leading-agg-5 text-agg-foreground", children: labels.settlementSummary.title }),
+              /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("span", { className: "flex size-4 shrink-0 items-center justify-center rounded-agg-full bg-agg-primary text-[10px] font-agg-bold leading-[14px] text-agg-on-primary", children: settlementDifferences.length })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)("div", { className: "agg-settlement-summary-pills flex min-w-[240px] flex-1 flex-wrap items-center gap-2", children: [
+              visibleDifferences.map((difference) => /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(
+                "button",
+                {
+                  type: "button",
+                  className: cn(
+                    "flex h-6 max-w-full shrink-0 cursor-pointer items-center gap-2 rounded-agg-full bg-agg-secondary-hover px-3 py-1 text-agg-xs font-agg-normal leading-agg-4 text-agg-foreground sm:max-w-[220px]",
+                    "hover:opacity-80",
+                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-agg-primary focus-visible:ring-offset-0 focus-visible:ring-offset-agg-secondary"
+                  ),
+                  onClick: (event) => handleDifferencePillClick(event, difference.canonicalKey),
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+                      "i",
+                      {
+                        className: cn(
+                          "fi",
+                          resolveDifferenceIconClassName(difference.canonicalKey),
+                          "inline-flex size-3 shrink-0 items-center justify-center text-[12px] leading-none text-agg-muted-foreground"
+                        ),
+                        "aria-hidden": "true"
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("span", { className: "min-w-0 truncate", children: difference.title })
+                  ]
+                },
+                difference.canonicalKey
+              )),
+              hiddenDifferenceCount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)("span", { className: "flex h-6 shrink-0 items-center rounded-agg-full bg-agg-secondary-hover px-3 py-1 text-agg-xs font-agg-normal leading-agg-4 text-agg-foreground", children: [
+                "+",
+                hiddenDifferenceCount
+              ] }) : null
+            ] })
+          ] }),
+          actionButton
+        ]
       }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)("div", { className: "agg-settlement-summary-row flex w-full items-center gap-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
-        "p",
-        {
-          className: cn(
-            "agg-settlement-summary-text",
-            "min-w-0 flex-1 truncate text-agg-sm leading-agg-5 text-agg-foreground"
-          ),
-          children: firstParagraph
-        }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(
+    "div",
+    {
+      className: cn(
+        "agg-settlement-summary flex w-full items-center justify-between gap-4",
+        className
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
-        "button",
-        {
-          type: "button",
-          className: cn(
-            "agg-settlement-summary-toggle",
-            "shrink-0 cursor-pointer whitespace-nowrap text-agg-sm font-agg-bold leading-agg-5 text-agg-primary",
-            "hover:opacity-80",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-agg-primary focus-visible:ring-offset-0 focus-visible:ring-offset-agg-secondary"
-          ),
-          "aria-controls": settlementSectionId,
-          onClick: handleReadFullDetails,
-          children: labels.settlementSummary.readFullDetails
-        }
-      )
-    ] })
-  ] });
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)("div", { className: "agg-settlement-summary-row flex min-w-0 flex-1 items-center gap-5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("div", { className: "agg-settlement-summary-heading flex shrink-0 items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("p", { className: "text-agg-sm font-agg-normal leading-agg-5 text-agg-foreground", children: labels.settlementSummary.title }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+            "p",
+            {
+              className: cn(
+                "agg-settlement-summary-text",
+                "min-w-0 flex-1 truncate text-agg-sm leading-agg-5 text-agg-foreground"
+              ),
+              children: firstParagraph
+            }
+          )
+        ] }),
+        actionButton
+      ]
+    }
+  );
 };
 SettlementSummary.displayName = "SettlementSummary";
 
@@ -11092,7 +11442,7 @@ var EventListItemDetailsContent = ({
             }
           )
         ] }),
-        event.description ? /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(SettlementSummary, { content: event.description }) : null
+        event.description || event.settlementDiff ? /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(SettlementSummary, { content: event.description, settlementDiff: event.settlementDiff }) : null
       ]
     }
   );

package/dist/events.mjs

@@ -16,13 +16,13 @@ import {
   orderbookRowLimitDefault,
   resolveEventDetailsSyncKey,
   useCenterOrderbookSpread
-} from "./chunk-MDO3NMXP.mjs";
+} from "./chunk-PHRYWSNV.mjs";
 import {
   formatProbabilityCents,
   resolveOrderBookRows,
   resolveUnifiedOrderBookEntries
-} from "./chunk-G5Y45GIA.mjs";
-import "./chunk-2ET5CXOU.mjs";
+} from "./chunk-STL4ZHLP.mjs";
+import "./chunk-WZ55ERDO.mjs";
 export {
   EventList,
   EventListItem,