@agg-build/ui 2.4.2 → 2.4.5

package/dist/{chunk-2ET5CXOU.mjs → chunk-PTNFXXOV.mjs}

@@ -1643,6 +1643,12 @@ var iconSizeClasses = {
   medium: "h-6 w-6",
   large: "h-8 w-8"
 };
+var iconSizePixels = {
+  xs: 12,
+  small: 16,
+  medium: 24,
+  large: 32
+};
 
 // src/primitives/search/search-empty-icon.tsx
 import { jsx as jsx40, jsxs as jsxs40 } from "react/jsx-runtime";
@@ -3244,6 +3250,8 @@ var Icon = (_a) => {
     __spreadValues({
       color,
       className: cn("group/agg-icon", resolvedClassName),
+      width: iconSizePixels[size],
+      height: iconSizePixels[size],
       style: resolvedStyle
     }, props)
   );
@@ -5575,7 +5583,7 @@ EventListSkeletonView.displayName = "EventListSkeletonView";
 import { useLabels as useLabels5 } from "@agg-build/hooks";
 
 // src/events/item-details/event-list-item-details.constants.ts
-var detailsBaseCardClassName = "w-full gap-6 p-5 md:gap-8";
+var detailsBaseCardClassName = "w-full gap-6 p-4 md:p-5 md:gap-8";
 
 // src/primitives/skeleton/views/event-list-item-details-skeleton-view.tsx
 import { jsx as jsx101, jsxs as jsxs98 } from "react/jsx-runtime";
@@ -5886,17 +5894,10 @@ var SettlementSkeletonView = ({
       children: [
         /* @__PURE__ */ jsxs102("div", { className: "flex w-full items-center justify-between gap-4", children: [
           /* @__PURE__ */ jsx105(SkeletonBlock, { className: "h-4 w-[81px] rounded-agg-sm" }),
-          /* @__PURE__ */ jsx105(SkeletonBlock, { className: "h-5 w-full max-w-[240px] rounded-agg-sm" })
-        ] }),
-        /* @__PURE__ */ jsxs102("div", { className: "flex w-full flex-col gap-3", children: [
-          /* @__PURE__ */ jsx105(SkeletonBlock, { className: "h-5 w-[200px] rounded-agg-sm" }),
-          /* @__PURE__ */ jsxs102("div", { className: "flex flex-col gap-2", children: [
-            /* @__PURE__ */ jsx105(SkeletonBlock, { className: "h-4 w-full max-w-[320px] rounded-agg-sm" }),
-            /* @__PURE__ */ jsx105(SkeletonBlock, { className: "h-4 w-full max-w-[280px] rounded-agg-sm" })
-          ] })
+          /* @__PURE__ */ jsx105(SkeletonBlock, { className: "h-5 w-[240px] max-w-[60%] rounded-agg-sm" })
         ] }),
-        /* @__PURE__ */ jsx105("div", { className: "h-px w-full bg-agg-separator" }),
-        /* @__PURE__ */ jsxs102("div", { className: "flex w-full flex-col gap-3", children: [
+        /* @__PURE__ */ jsx105(SkeletonBlock, { className: "h-5 w-[200px] rounded-agg-sm" }),
+        /* @__PURE__ */ jsxs102("div", { className: "flex w-full flex-col gap-4", children: [
           /* @__PURE__ */ jsxs102("div", { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ jsx105(SkeletonBlock, { className: "size-4 rounded-agg-sm" }),
             /* @__PURE__ */ jsx105(SkeletonBlock, { className: "h-5 w-[100px] rounded-agg-sm" })
@@ -8853,14 +8854,23 @@ import { useCallback as useCallback6, useEffect as useEffect9, useLayoutEffect a
 import { useCallback as useCallback5, useEffect as useEffect8, useRef as useRef8, useState as useState9 } from "react";
 var useHorizontalScrollState = () => {
   const containerRef = useRef8(null);
+  const [hasOverflow, setHasOverflow] = useState9(false);
+  const [isAtStart, setIsAtStart] = useState9(true);
+  const [isAtEnd, setIsAtEnd] = useState9(true);
   const [canScrollLeft, setCanScrollLeft] = useState9(false);
   const [canScrollRight, setCanScrollRight] = useState9(false);
   const update = useCallback5(() => {
     const el = containerRef.current;
     if (!el) return;
-    const maxScroll = el.scrollWidth - el.clientWidth;
-    setCanScrollLeft(el.scrollLeft > 4);
-    setCanScrollRight(maxScroll - el.scrollLeft > 4);
+    const epsilon = 2;
+    const nextHasOverflow = el.scrollWidth > el.clientWidth + epsilon;
+    const nextIsAtStart = el.scrollLeft <= epsilon;
+    const nextIsAtEnd = el.scrollLeft + el.clientWidth >= el.scrollWidth - epsilon;
+    setHasOverflow(nextHasOverflow);
+    setIsAtStart(nextIsAtStart);
+    setIsAtEnd(nextIsAtEnd);
+    setCanScrollLeft(nextHasOverflow && !nextIsAtStart);
+    setCanScrollRight(nextHasOverflow && !nextIsAtEnd);
   }, []);
   useEffect8(() => {
     const el = containerRef.current;
@@ -8876,7 +8886,15 @@ var useHorizontalScrollState = () => {
     ro.observe(el);
     return () => ro.disconnect();
   }, [update]);
-  return { containerRef, canScrollLeft, canScrollRight, update };
+  return {
+    containerRef,
+    hasOverflow,
+    isAtStart,
+    isAtEnd,
+    canScrollLeft,
+    canScrollRight,
+    update
+  };
 };
 
 // src/primitives/tabs/tabs.constants.ts
@@ -8971,6 +8989,9 @@ var Tabs = ({
   });
   const {
     containerRef: tabListRef,
+    hasOverflow,
+    isAtStart,
+    isAtEnd,
     canScrollLeft,
     canScrollRight,
     update: updateScrollState
@@ -9059,7 +9080,7 @@ var Tabs = ({
       "overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
       getMotionClassName(enableAnimations, "scroll-smooth")
     ) : "overflow-x-auto",
-    isBarVariant ? "items-start rounded-agg-lg border border-agg-separator p-1.5" : "h-15 border-b border-agg-separator -mb-[1px]",
+    isBarVariant ? "items-start rounded-agg-lg border border-agg-separator p-1.5" : "h-14 md:h-15 border-b border-agg-separator -mb-[1px]",
     shouldUseOverflowScroll && "select-none",
     shouldUseOverflowScroll && !isBarVariant && "snap-x snap-mandatory",
     shouldUseOverflowScroll && (isDraggingTabs ? "cursor-grabbing" : "cursor-grab")
@@ -9217,7 +9238,10 @@ var Tabs = ({
       left: Math.max(0, nextScrollLeft),
       behavior: getScrollBehavior(enableAnimations)
     });
-  }, [enableAnimations, renderedItems, shouldUseOverflowScroll, value]);
+    requestAnimationFrame(() => {
+      updateScrollState();
+    });
+  }, [enableAnimations, renderedItems, shouldUseOverflowScroll, updateScrollState, value]);
   if (shouldUseOverflowSelect) {
     return /* @__PURE__ */ jsx128("div", { className: cn("group/agg-tabs w-full", className, classNames == null ? void 0 : classNames.root), children: /* @__PURE__ */ jsx128(
       Select,
@@ -9256,6 +9280,13 @@ var Tabs = ({
             onPointerUp: handleEndTabListDrag,
             onWheel: handleTabListWheel,
             children: [
+              shouldUseOverflowScroll && !isBarVariant && hasOverflow ? /* @__PURE__ */ jsx128(
+                "span",
+                {
+                  "aria-hidden": true,
+                  className: "agg-tab-scroll-start-spacer h-full w-4 shrink-0 snap-start"
+                }
+              ) : null,
               renderedItems.map((item, index) => {
                 var _a;
                 const isActive = item.value === value;
@@ -9290,6 +9321,7 @@ var Tabs = ({
                         isDisabled: !!item.disabled,
                         size
                       }),
+                      !isBarVariant && (size === "s" ? "px-3 md:px-4" : "h-14 px-3 md:h-15 md:px-4"),
                       shouldUseOverflowScroll && !isBarVariant && "snap-start",
                       classNames == null ? void 0 : classNames.tabTrigger
                     ),
@@ -9339,9 +9371,9 @@ var Tabs = ({
               "aria-hidden": true,
               className: cn(
                 "agg-tab-scroll-start",
-                "pointer-events-none absolute top-0 bottom-0 left-0 z-10 w-12 md:w-18 bg-linear-to-r from-agg-secondary via-agg-secondary to-transparent",
+                "pointer-events-none absolute inset-y-0 left-0 z-10 w-6 md:w-[60px] bg-linear-to-r from-agg-secondary to-transparent",
                 getMotionClassName(enableAnimations, "transition-opacity duration-200"),
-                canScrollLeft ? "opacity-100" : "opacity-0"
+                hasOverflow && canScrollLeft && !isAtStart ? "opacity-100" : "opacity-0"
               )
             }
           ),
@@ -9351,9 +9383,9 @@ var Tabs = ({
               "aria-hidden": true,
               className: cn(
                 "agg-tab-scroll-end",
-                "pointer-events-none absolute top-0 right-0 bottom-0 z-10 w-12 md:w-18 bg-linear-to-l from-agg-secondary via-agg-secondary to-transparent",
+                "pointer-events-none absolute inset-y-0 right-0 z-10 w-6 md:w-[60px] bg-linear-to-l from-agg-secondary to-transparent",
                 getMotionClassName(enableAnimations, "transition-opacity duration-200"),
-                canScrollRight ? "opacity-100" : "opacity-0"
+                hasOverflow && canScrollRight && !isAtEnd ? "opacity-100" : "opacity-0"
               )
             }
           )

package/dist/{chunk-G5Y45GIA.mjs → chunk-UH3DUTMG.mjs}

@@ -3,6 +3,7 @@ import {
   Card,
   DEFAULT_VENUE_COLOR,
   Skeleton,
+  VenueLogo,
   __spreadProps,
   __spreadValues,
   cn,
@@ -18,7 +19,7 @@ import {
   selectPrimaryVenueMarket,
   skeletonViews,
   sortOutcomes
-} from "./chunk-2ET5CXOU.mjs";
+} from "./chunk-PTNFXXOV.mjs";
 
 // src/trading/trading-context/index.tsx
 import { useEventTradingContext } from "@agg-build/hooks";
@@ -166,8 +167,10 @@ var getTradingSlippageLabel = (value) => {
 };
 
 // src/trading/settlement/index.tsx
-import { useLabels } from "@agg-build/hooks";
-import { useMemo } from "react";
+import {
+  useLabels
+} from "@agg-build/hooks";
+import { useEffect, useMemo, useState } from "react";
 
 // src/trading/settlement/settlement-text-renderer.tsx
 import { Fragment } from "react";
@@ -194,13 +197,6 @@ var parseSettlementBlocks = (input) => {
   }
   return blocks;
 };
-var getFirstSettlementParagraph = (input) => {
-  if (!input) return "";
-  const blocks = parseSettlementBlocks(input);
-  const firstParagraph = blocks.find((block) => block.kind === "paragraph");
-  if (!firstParagraph || firstParagraph.kind !== "paragraph") return "";
-  return firstParagraph.lines.join(" ").trim();
-};
 var normalizeSettlementForCompare = (input) => {
   return stripHtmlFragments(input).replace(/\s+/g, " ").trim().toLowerCase();
 };
@@ -367,10 +363,206 @@ var SettlementTextRenderer = ({
 SettlementTextRenderer.displayName = "SettlementTextRenderer";
 
 // src/trading/settlement/index.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var SETTLEMENT_SECTION_ID = "agg-settlement-section";
-var getSettlementHeaderClassName = () => {
-  return "flex items-center justify-between gap-4";
+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, rawDifference] of (differences != null ? differences : []).entries()) {
+    const title = rawDifference.title.trim();
+    const perVenue = Object.fromEntries(
+      Object.entries(rawDifference.perVenue).map(([venue, value]) => [venue.trim(), value.trim()]).filter(([venue, value]) => venue.length > 0 && value.length > 0)
+    );
+    if (!title || Object.keys(perVenue).length === 0) continue;
+    const difference = __spreadProps(__spreadValues({}, rawDifference), { title, perVenue });
+    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 = ({
+  marketBlock,
+  primaryRulesBlock,
+  settlementVenues,
+  settlementVenueRules
+}) => {
+  var _a, _b;
+  if (settlementVenueRules) {
+    const rulesByVenue = /* @__PURE__ */ new Map();
+    for (const rule of settlementVenueRules) {
+      const venue2 = rule.venue.trim();
+      const content2 = rule.content.trim();
+      if (!venue2 || !content2) continue;
+      const venueRules = (_a = rulesByVenue.get(venue2)) != null ? _a : [];
+      if (!venueRules.includes(content2)) venueRules.push(content2);
+      rulesByVenue.set(venue2, venueRules);
+    }
+    return Array.from(rulesByVenue, ([venue2, contents]) => ({
+      venue: venue2,
+      content: contents.join("\n\n")
+    }));
+  }
+  const content = [marketBlock == null ? void 0 : marketBlock.content, primaryRulesBlock == null ? void 0 : primaryRulesBlock.content].filter((value) => typeof value === "string" && value.trim().length > 0).join("\n\n");
+  const venue = (_b = settlementVenues == null ? void 0 : settlementVenues.find((candidate) => candidate.trim().length > 0)) == null ? void 0 : _b.trim();
+  return content && venue ? [{ venue, content }] : [];
+};
+var isDuplicatedByVenueRules = (content, venueRules) => {
+  const normalizedContent = normalizeSettlementForCompare(content);
+  if (!normalizedContent) return false;
+  return venueRules.some((rule) => {
+    const normalizedRule = normalizeSettlementForCompare(rule.content);
+    return normalizedRule.includes(normalizedContent);
+  });
+};
+var SettlementVenueRules = ({
+  rules,
+  labels
+}) => {
+  return /* @__PURE__ */ jsxs2("div", { className: "agg-settlement-venue-rules flex w-full flex-col items-start gap-4", children: [
+    /* @__PURE__ */ jsx2("p", { className: "text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground", children: labels.trading.settlementFullRulesTitle }),
+    /* @__PURE__ */ jsx2("div", { className: "flex w-full flex-col items-start gap-4", children: rules.map((rule) => {
+      const venueLabel = resolveSettlementVenueLabel(rule.venue, labels);
+      return /* @__PURE__ */ jsxs2("details", { className: "group/agg-settlement-rule w-full", children: [
+        /* @__PURE__ */ jsxs2("summary", { className: "flex cursor-pointer list-none items-center gap-2 text-agg-sm font-agg-normal leading-agg-5 text-agg-foreground group-hover/agg-settlement-rule:text-agg-muted-foreground transition-colors marker:hidden", children: [
+          /* @__PURE__ */ jsx2(
+            VenueLogo,
+            {
+              venue: rule.venue,
+              size: "small",
+              className: "size-4",
+              ariaLabel: venueLabel
+            }
+          ),
+          /* @__PURE__ */ jsx2("span", { className: "text-agg-foreground group-hover/agg-settlement-rule:text-agg-muted-foreground transition-colors", children: venueLabel }),
+          /* @__PURE__ */ jsx2(
+            "i",
+            {
+              className: cn(
+                "fi fi-rr-angle-small-down text-[14px]!",
+                "group-open/agg-settlement-rule:rotate-180",
+                "size-3.5! shrink-0 text-agg-foreground group-hover/agg-settlement-rule:text-agg-muted-foreground transition-[colors,transform]"
+              ),
+              style: { fontSize: 14 },
+              "aria-hidden": "true"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx2("div", { className: "mt-3 pl-6", children: /* @__PURE__ */ jsx2(SettlementTextRenderer, { content: rule.content }) })
+      ] }, rule.venue);
+    }) })
+  ] });
 };
 var Settlement = ({
   className,
@@ -380,9 +572,12 @@ var Settlement = ({
   eventDescription,
   marketDescription,
   primaryRules,
+  settlementDiff,
+  settlementVenues,
+  settlementVenueRules,
   isLoading = false
 }) => {
-  var _a, _b, _c;
+  var _a, _b, _c, _d, _e;
   const labels = useLabels();
   const blocks = useMemo(
     () => dedupeSettlementSources({
@@ -392,9 +587,41 @@ var Settlement = ({
     }),
     [eventDescription, marketDescription, primaryRules]
   );
+  const settlementDifferences = 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 = useMemo(
+    () => buildSettlementVenueRules({
+      marketBlock,
+      primaryRulesBlock,
+      settlementVenues,
+      settlementVenueRules
+    }),
+    [marketBlock, primaryRulesBlock, settlementVenues, settlementVenueRules]
+  );
+  const hasSettlementDifferences = settlementDifferences.length > 0;
+  const hasVenueSettlementRules = venueRuleBlocks.length > 0;
+  const standaloneEventBlock = eventBlock && !isDuplicatedByVenueRules(eventBlock.content, venueRuleBlocks) ? eventBlock : null;
+  const standaloneMarketBlock = hasVenueSettlementRules ? null : marketBlock;
+  const standalonePrimaryRulesBlock = hasVenueSettlementRules ? null : primaryRulesBlock;
+  const hasStandaloneSettlementText = hasVenueSettlementRules ? standaloneEventBlock !== null : blocks.length > 0;
+  const hasSettlementContent = hasSettlementDifferences || hasVenueSettlementRules || hasStandaloneSettlementText;
+  const defaultOpenDifferenceKey = (_e = (_d = settlementDifferences[0]) == null ? void 0 : _d.canonicalKey) != null ? _e : null;
+  const [openDifferenceKeys, setOpenDifferenceKeys] = useState(
+    () => defaultOpenDifferenceKey ? [defaultOpenDifferenceKey] : []
+  );
+  useEffect(() => {
+    setOpenDifferenceKeys(defaultOpenDifferenceKey ? [defaultOpenDifferenceKey] : []);
+  }, [defaultOpenDifferenceKey]);
+  const handleToggleDifference = (canonicalKey) => {
+    setOpenDifferenceKeys(
+      (currentKeys) => currentKeys.includes(canonicalKey) ? currentKeys.filter((currentKey) => currentKey !== canonicalKey) : [...currentKeys, canonicalKey]
+    );
+  };
   if (isLoading) {
     return /* @__PURE__ */ jsx2(
       Skeleton,
@@ -405,6 +632,7 @@ var Settlement = ({
       }
     );
   }
+  if (!hasSettlementContent) return null;
   const resolvedSectionLabel = sectionLabel === defaultSettlementSectionLabel ? labels.trading.settlementSection : sectionLabel;
   return /* @__PURE__ */ jsxs2(
     Card,
@@ -412,38 +640,117 @@ var Settlement = ({
       id,
       className: cn(
         "group/agg-settlement-card",
-        "flex flex-col w-full gap-5 rounded-agg-xl border border-agg-separator bg-agg-secondary p-5 shadow-none hover:shadow-none",
+        "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__ */ jsxs2("div", { className: cn("agg-settlement-header", getSettlementHeaderClassName()), children: [
-          /* @__PURE__ */ jsx2("p", { className: "text-agg-xs font-agg-bold leading-agg-4 uppercase text-agg-muted-foreground", children: resolvedSectionLabel }),
-          question ? /* @__PURE__ */ jsx2("p", { className: "agg-settlement-question text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground", children: question }) : null
+        /* @__PURE__ */ jsxs2("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__ */ jsx2("p", { className: "shrink-0 text-agg-xs font-agg-bold leading-agg-4 uppercase", children: resolvedSectionLabel }),
+          question ? /* @__PURE__ */ jsx2("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
         ] }),
-        blocks.length === 0 ? /* @__PURE__ */ jsx2("p", { className: "agg-settlement-empty text-agg-sm leading-agg-5 text-agg-muted-foreground", children: labels.trading.settlementEmpty }) : /* @__PURE__ */ jsxs2("div", { className: "agg-settlement-sections flex flex-col gap-4", children: [
-          eventBlock || marketBlock ? /* @__PURE__ */ jsxs2(
-            "div",
-            {
-              className: "agg-settlement-section agg-settlement-section-description",
-              "data-source": "description",
-              children: [
-                eventBlock ? /* @__PURE__ */ jsx2("div", { "data-source": "eventDescription", children: /* @__PURE__ */ jsx2(SettlementTextRenderer, { content: eventBlock.content }) }) : null,
-                eventBlock && marketBlock ? /* @__PURE__ */ jsx2("hr", { className: "agg-settlement-divider my-4 border-0 border-t border-agg-separator" }) : null,
-                marketBlock ? /* @__PURE__ */ jsx2("div", { "data-source": "marketDescription", children: /* @__PURE__ */ jsx2(SettlementTextRenderer, { content: marketBlock.content }) }) : null
-              ]
-            }
-          ) : null,
-          primaryRulesBlock ? /* @__PURE__ */ jsxs2(
-            "div",
-            {
-              className: "agg-settlement-section agg-settlement-section-primaryRules",
-              "data-source": "primaryRules",
-              children: [
-                /* @__PURE__ */ jsx2("p", { className: "agg-settlement-section-label text-agg-xs font-agg-bold leading-agg-4 uppercase text-agg-muted-foreground mb-2", children: labels.trading.settlementPrimaryRulesLabel }),
-                /* @__PURE__ */ jsx2(SettlementTextRenderer, { content: primaryRulesBlock.content })
-              ]
-            }
-          ) : null
+        /* @__PURE__ */ jsxs2("div", { className: "agg-settlement-sections flex w-full flex-col items-start gap-5", children: [
+          hasStandaloneSettlementText ? /* @__PURE__ */ jsxs2("div", { className: "w-full", children: [
+            standaloneEventBlock || standaloneMarketBlock ? /* @__PURE__ */ jsxs2(
+              "div",
+              {
+                className: "agg-settlement-section agg-settlement-section-description",
+                "data-source": "description",
+                children: [
+                  standaloneEventBlock ? /* @__PURE__ */ jsx2("div", { "data-source": "eventDescription", children: /* @__PURE__ */ jsx2(SettlementTextRenderer, { content: standaloneEventBlock.content }) }) : null,
+                  standaloneEventBlock && standaloneMarketBlock ? /* @__PURE__ */ jsx2("hr", { className: "agg-settlement-divider my-4 border-0 border-t border-agg-separator" }) : null,
+                  standaloneMarketBlock ? /* @__PURE__ */ jsx2("div", { "data-source": "marketDescription", children: /* @__PURE__ */ jsx2(SettlementTextRenderer, { content: standaloneMarketBlock.content }) }) : null
+                ]
+              }
+            ) : null,
+            standalonePrimaryRulesBlock ? /* @__PURE__ */ jsxs2(
+              "div",
+              {
+                className: "agg-settlement-section agg-settlement-section-primaryRules",
+                "data-source": "primaryRules",
+                children: [
+                  /* @__PURE__ */ jsx2("p", { className: "agg-settlement-section-label text-agg-xs font-agg-bold leading-agg-4 uppercase text-agg-muted-foreground mb-2", children: labels.trading.settlementPrimaryRulesLabel }),
+                  /* @__PURE__ */ jsx2(SettlementTextRenderer, { content: standalonePrimaryRulesBlock.content })
+                ]
+              }
+            ) : null
+          ] }) : null,
+          hasSettlementDifferences ? /* @__PURE__ */ jsxs2("div", { className: "agg-settlement-differences flex w-full flex-col items-start gap-5", children: [
+            /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx2("p", { className: "text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground", children: labels.trading.settlementDifferencesTitle }),
+              /* @__PURE__ */ jsx2("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__ */ jsx2("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__ */ jsxs2(
+                "div",
+                {
+                  id: getSettlementDifferenceId(id, difference.canonicalKey),
+                  className: "agg-settlement-difference flex w-full flex-col items-start gap-2 rounded-agg-lg",
+                  children: [
+                    /* @__PURE__ */ jsxs2(
+                      "button",
+                      {
+                        type: "button",
+                        className: "flex w-full cursor-pointer items-center gap-2 text-left group/agg-settlement-difference",
+                        "aria-expanded": isExpanded,
+                        onClick: () => handleToggleDifference(difference.canonicalKey),
+                        children: [
+                          /* @__PURE__ */ jsx2(
+                            "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__ */ jsx2("p", { className: "min-w-0 text-agg-sm font-agg-normal leading-agg-5 text-agg-foreground group-hover/agg-settlement-difference:text-agg-muted-foreground transition-colors break-words [overflow-wrap:anywhere]", children: difference.title }),
+                          /* @__PURE__ */ jsx2(
+                            "i",
+                            {
+                              className: cn(
+                                "fi fi-rr-angle-small-down text-[14px]!",
+                                isExpanded && "rotate-180",
+                                "size-3.5! shrink-0 text-agg-foreground group-hover/agg-settlement-difference:text-agg-muted-foreground transition-[colors,transform]"
+                              ),
+                              style: { fontSize: 14 },
+                              "aria-hidden": "true"
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    isExpanded ? /* @__PURE__ */ jsx2("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__ */ jsxs2("div", { className: "flex w-full items-start gap-2", children: [
+                        /* @__PURE__ */ jsx2(
+                          VenueLogo,
+                          {
+                            venue,
+                            size: "small",
+                            className: "mt-0.5 size-4",
+                            ariaLabel: venueLabel
+                          }
+                        ),
+                        /* @__PURE__ */ jsx2("dt", { className: "w-[88px] shrink-0 text-agg-sm font-agg-normal leading-agg-5 text-agg-foreground", children: venueLabel }),
+                        /* @__PURE__ */ jsx2("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
+              );
+            }) })
+          ] }) : null,
+          hasVenueSettlementRules ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
+            hasSettlementDifferences || hasStandaloneSettlementText ? /* @__PURE__ */ jsx2("div", { className: "h-px w-full bg-agg-separator" }) : null,
+            /* @__PURE__ */ jsx2(SettlementVenueRules, { rules: venueRuleBlocks, labels })
+          ] }) : null
         ] })
       ]
     }
@@ -1318,8 +1625,10 @@ export {
   getTradingBalanceLabel,
   getTradingSharesLabel,
   getTradingSlippageLabel,
-  getFirstSettlementParagraph,
   SETTLEMENT_SECTION_ID,
+  getSettlementDifferenceId,
+  prepareSettlementDifferences,
+  resolveDifferenceIconClassName,
   Settlement,
   resolveTradingStatePresentation,
   resolveTradingStateBadgeClassName,