@agg-market/ui 4.0.0 → 6.0.0

package/dist/chunk-G6YKGVQR.mjs

@@ -0,0 +1,769 @@
+import {
+  Card,
+  Skeleton,
+  Tabs,
+  skeletonViews
+} from "./chunk-UBBOLLOS.mjs";
+import {
+  Button,
+  Icon,
+  VenueLogo,
+  __spreadProps,
+  __spreadValues,
+  cn,
+  formatUsd,
+  getMotionClassName
+} from "./chunk-HI4EEDN5.mjs";
+
+// src/trading/utils.ts
+import { resolveAggUiLabels } from "@agg-market/hooks";
+import dayjs from "dayjs";
+var defaultLabels = resolveAggUiLabels("en-US");
+var defaultSettlementSectionLabel = defaultLabels.trading.settlementSection;
+var defaultSettlementDifferencesTitle = defaultLabels.trading.settlementDifferencesTitle;
+var defaultTradingDisclaimer = defaultLabels.trading.disclaimer;
+var getTradingDateLabel = (value) => {
+  const parsedValue = dayjs(value);
+  if (!parsedValue.isValid()) {
+    return typeof value === "string" ? value : "";
+  }
+  return parsedValue.format("MMM D, YYYY");
+};
+var getTradingVenueLabel = (venue, label) => {
+  if (label)
+    return label;
+  return defaultLabels.venues[venue];
+};
+var getTradingValueLabel = ({
+  amount,
+  minimumFractionDigits = 0,
+  maximumFractionDigits = 2
+}) => {
+  return amount.toLocaleString("en-US", {
+    style: "currency",
+    currency: "USD",
+    minimumFractionDigits,
+    maximumFractionDigits
+  });
+};
+var getTradingPriceLabel = (value) => {
+  return `${Math.round(value * 100)}\xA2`;
+};
+var getTradingAveragePriceLabel = (value) => {
+  return defaultLabels.trading.averagePrice(value);
+};
+var getTradingBalanceLabel = (value) => {
+  return defaultLabels.trading.balance(formatUsd(value));
+};
+var getTradingSharesLabel = (value) => {
+  return defaultLabels.trading.shares(value);
+};
+var getTradingSlippageLabel = (value) => {
+  return defaultLabels.trading.slippage(value);
+};
+
+// src/trading/place-order/index.tsx
+import { useEffect, useMemo, useState } from "react";
+import { useLabels, useSdkUiConfig } from "@agg-market/hooks";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var WarningFilledIcon = ({ className }) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 16 16",
+      fill: "none",
+      className: cn("text-agg-warning", className),
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M8 1.33301L15.3333 14.6663H0.666656L8 1.33301Z", fill: "currentColor" }),
+        /* @__PURE__ */ jsx("path", { d: "M8 5.33301V8.66634", stroke: "white", strokeWidth: "1.4", strokeLinecap: "round" }),
+        /* @__PURE__ */ jsx("circle", { cx: "8", cy: "11.1667", r: "0.833333", fill: "white" })
+      ]
+    }
+  );
+};
+var ErrorFilledIcon = ({ className }) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 16 16",
+      fill: "none",
+      className: cn("text-agg-error", className),
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "8", fill: "currentColor" }),
+        /* @__PURE__ */ jsx("path", { d: "M8 4.16699V8.50033", stroke: "white", strokeWidth: "1.4", strokeLinecap: "round" }),
+        /* @__PURE__ */ jsx("circle", { cx: "8", cy: "11.167", r: "0.833333", fill: "white" })
+      ]
+    }
+  );
+};
+var getPlaceOrderContainerClassName = () => {
+  return "overflow-hidden rounded-agg-xl border border-agg-border bg-agg-secondary shadow-none hover:shadow-none";
+};
+var getRoutingCardClassName = (isHighlighted) => {
+  if (!isHighlighted) {
+    return "border-agg-border bg-agg-secondary";
+  }
+  return "border-agg-trade-highlight-border bg-agg-trade-highlight-surface";
+};
+var getResultValueClassName = (tone) => {
+  if (tone === "default")
+    return "text-agg-foreground";
+  return "text-agg-success";
+};
+var negativeOutcomePattern = /\b(no|down|against|under|lose|false)\b/i;
+var resolveIsPositiveOutcome = (outcome, index) => {
+  const outcomeText = `${outcome.id} ${outcome.label}`;
+  if (negativeOutcomePattern.test(outcomeText))
+    return false;
+  if (index === 1)
+    return false;
+  return true;
+};
+var getOutcomeButtonClassName = ({
+  enableAnimations,
+  isActive,
+  isPositive
+}) => {
+  return cn(
+    "flex-1 cursor-pointer rounded-agg-full border px-6 py-2.5 text-agg-base leading-agg-6",
+    getMotionClassName(enableAnimations, "transition-all duration-300 ease-in-out"),
+    isActive ? isPositive ? "border-transparent bg-[#18c15c] font-agg-bold text-agg-on-primary" : "border-transparent bg-[#e5455f] font-agg-bold text-agg-on-primary" : "border-transparent bg-agg-secondary-hover font-agg-normal text-agg-foreground hover:bg-agg-tertiary"
+  );
+};
+var getStatusContent = ({
+  placement,
+  status,
+  onStatusAction
+}) => {
+  if (!status || status.placement !== placement)
+    return null;
+  if (status.tone === "warning") {
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2", children: [
+      /* @__PURE__ */ jsx(WarningFilledIcon, { className: "h-4 w-4 shrink-0" }),
+      /* @__PURE__ */ jsx("p", { className: "text-agg-sm leading-agg-5 text-agg-foreground", children: status.message })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 rounded-agg-lg bg-agg-status-error-surface px-3 py-2.5", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+      /* @__PURE__ */ jsx(ErrorFilledIcon, { className: "h-4 w-4 shrink-0" }),
+      /* @__PURE__ */ jsx("p", { className: "min-w-0 flex-1 text-agg-sm leading-agg-5 text-agg-foreground", children: status.message })
+    ] }),
+    status.actionLabel ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "shrink-0 text-agg-sm font-agg-bold leading-agg-5 text-agg-primary",
+        "aria-label": status.actionLabel,
+        onClick: onStatusAction,
+        children: status.actionLabel
+      }
+    ) : null
+  ] });
+};
+var PlaceOrder = ({
+  title,
+  marketDate,
+  marketImageUrl,
+  activeTab,
+  buyLabel,
+  sellLabel,
+  outcomes,
+  selectedOutcomeId,
+  primaryMetric,
+  routing,
+  result,
+  actionLabel,
+  disclaimer = defaultTradingDisclaimer,
+  isDismissible = false,
+  isLoading = false,
+  status,
+  className,
+  isPrimaryActionDisabled = false,
+  isPrimaryActionLoading = false,
+  onClose,
+  onOutcomeChange,
+  onPrimaryAction,
+  onStatusAction,
+  onTabChange
+}) => {
+  const { enableAnimations } = useSdkUiConfig();
+  const labels = useLabels();
+  const resolvedDisclaimer = disclaimer === defaultTradingDisclaimer ? labels.trading.disclaimer : disclaimer;
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(
+      Skeleton,
+      {
+        ariaLabel: labels.common.loading,
+        className,
+        view: skeletonViews.placeOrder
+      }
+    );
+  }
+  const [internalTab, setInternalTab] = useState(activeTab);
+  const [internalOutcomeId, setInternalOutcomeId] = useState(selectedOutcomeId);
+  useEffect(() => {
+    setInternalTab(activeTab);
+  }, [activeTab]);
+  useEffect(() => {
+    setInternalOutcomeId(selectedOutcomeId);
+  }, [selectedOutcomeId]);
+  const resolvedTab = onTabChange ? activeTab : internalTab;
+  const resolvedOutcomeId = onOutcomeChange ? selectedOutcomeId : internalOutcomeId;
+  const hasHighlightedRouting = routing.tone === "highlighted";
+  const dateLabel = getTradingDateLabel(marketDate);
+  const tabItems = useMemo(() => {
+    return [
+      { value: "buy", label: buyLabel },
+      { value: "sell", label: sellLabel }
+    ];
+  }, [buyLabel, sellLabel]);
+  const handleTabChange = (nextTab) => {
+    if (!onTabChange) {
+      setInternalTab(nextTab);
+    }
+    onTabChange == null ? void 0 : onTabChange(nextTab);
+  };
+  const handleOutcomeChange = (nextOutcomeId) => {
+    if (!onOutcomeChange) {
+      setInternalOutcomeId(nextOutcomeId);
+    }
+    onOutcomeChange == null ? void 0 : onOutcomeChange(nextOutcomeId);
+  };
+  const actionButton = /* @__PURE__ */ jsx(
+    Button,
+    {
+      size: "large",
+      className: "w-full",
+      disabled: isPrimaryActionDisabled,
+      isLoading: isPrimaryActionLoading,
+      "aria-label": actionLabel,
+      onClick: onPrimaryAction,
+      children: actionLabel
+    }
+  );
+  const contentBody = /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6 p-5", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-5", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
+          marketImageUrl ? /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: marketImageUrl,
+              alt: "",
+              className: "h-12 w-12 shrink-0 rounded-agg-lg object-cover"
+            }
+          ) : null,
+          /* @__PURE__ */ jsx("p", { className: "min-w-0 text-agg-base font-agg-bold leading-agg-6 text-agg-foreground", children: title })
+        ] }),
+        isDismissible ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": labels.common.close,
+            className: "shrink-0 text-agg-foreground",
+            onClick: onClose,
+            children: /* @__PURE__ */ jsx(
+              Icon,
+              {
+                name: "close",
+                size: "medium",
+                className: "h-6 w-6 text-agg-foreground",
+                color: "currentColor"
+              }
+            )
+          }
+        ) : null
+      ] }),
+      /* @__PURE__ */ jsx("p", { className: "text-agg-base leading-agg-6 text-agg-foreground", children: dateLabel })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Tabs,
+      {
+        ariaLabel: labels.common.tabsAria,
+        items: tabItems,
+        value: resolvedTab,
+        onChange: handleTabChange,
+        variant: "underline",
+        size: "s",
+        overflowBehavior: "scroll",
+        classNames: {
+          root: "w-full",
+          tabList: "w-full"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex w-full gap-2", children: outcomes.map((outcome, index) => {
+        const isActive = outcome.id === resolvedOutcomeId;
+        const isPositive = resolveIsPositiveOutcome(outcome, index);
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: getOutcomeButtonClassName({
+              enableAnimations,
+              isActive,
+              isPositive
+            }),
+            "aria-pressed": isActive,
+            "aria-label": `${outcome.label} ${outcome.priceLabel}`,
+            onClick: () => handleOutcomeChange(outcome.id),
+            children: `${outcome.label} ${outcome.priceLabel}`
+          },
+          outcome.id
+        );
+      }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-agg-base font-agg-bold leading-agg-6 text-agg-foreground", children: primaryMetric.label }),
+          /* @__PURE__ */ jsx("p", { className: "text-agg-sm leading-agg-5 text-agg-muted-foreground", children: primaryMetric.hint })
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "text-agg-3xl font-agg-bold leading-agg-9 text-agg-foreground", children: primaryMetric.value })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "relative overflow-hidden rounded-agg-lg border p-3",
+            getRoutingCardClassName(hasHighlightedRouting)
+          ),
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "pointer-events-none absolute inset-x-0 bottom-0 h-11 bg-linear-to-b from-transparent to-agg-trade-highlight-glow",
+                  hasHighlightedRouting ? "opacity-100" : "opacity-0"
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col gap-3", children: [
+              routing.rows.map((row, index) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+                    /* @__PURE__ */ jsx(
+                      VenueLogo,
+                      {
+                        venue: row.venue,
+                        size: "small",
+                        ariaLabel: getTradingVenueLabel(row.venue)
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("p", { className: "truncate text-agg-base leading-agg-6 text-agg-foreground", children: row.label })
+                  ] }),
+                  /* @__PURE__ */ jsx("p", { className: "shrink-0 text-agg-base leading-agg-6 text-agg-foreground", children: row.priceLabel })
+                ] }),
+                index < routing.rows.length - 1 ? /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "h-px w-full",
+                      hasHighlightedRouting ? "bg-agg-trade-highlight-border" : "bg-agg-separator"
+                    )
+                  }
+                ) : null
+              ] }, `${row.venue}-${row.label}`)),
+              routing.highlightLabel ? /* @__PURE__ */ jsx("p", { className: "text-center text-agg-sm font-agg-bold leading-agg-5 uppercase text-agg-trade-highlight-accent", children: routing.highlightLabel }) : null
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("p", { className: "text-agg-sm leading-agg-5 text-agg-muted-foreground", children: routing.helperLabel })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-agg-base font-agg-bold leading-agg-6 text-agg-foreground", children: result.label }),
+        /* @__PURE__ */ jsx("p", { className: "text-agg-sm leading-agg-5 text-agg-muted-foreground", children: result.hint })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "p",
+        {
+          className: cn(
+            "text-agg-3xl font-agg-bold leading-agg-9",
+            getResultValueClassName(result.tone)
+          ),
+          children: result.value
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(Fragment, { children: [
+      getStatusContent({
+        placement: "above-action",
+        status,
+        onStatusAction
+      }),
+      actionButton,
+      getStatusContent({
+        placement: "below-action",
+        status,
+        onStatusAction
+      })
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "text-center text-agg-xs leading-agg-4 text-agg-muted-foreground", children: resolvedDisclaimer })
+  ] });
+  return /* @__PURE__ */ jsx(Card, { className: cn(getPlaceOrderContainerClassName(), className), children: contentBody });
+};
+PlaceOrder.displayName = "PlaceOrder";
+
+// src/trading/settlement/index.tsx
+import { useCallback, useEffect as useEffect2, useRef, useState as useState2 } from "react";
+import { useLabels as useLabels2, useSdkUiConfig as useSdkUiConfig2 } from "@agg-market/hooks";
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var getSettlementHeaderClassName = () => {
+  return "flex items-center justify-between gap-4";
+};
+var Settlement = ({
+  sectionLabel = defaultSettlementSectionLabel,
+  question,
+  differencesTitle = defaultSettlementDifferencesTitle,
+  differences,
+  venues,
+  defaultExpandedVenue,
+  expandedVenue,
+  isLoading = false,
+  onExpandedVenueChange,
+  onShowMore,
+  className
+}) => {
+  var _a, _b;
+  const labels = useLabels2();
+  const { enableAnimations } = useSdkUiConfig2();
+  const resolvedSectionLabel = sectionLabel === defaultSettlementSectionLabel ? labels.trading.settlementSection : sectionLabel;
+  const resolvedDifferencesTitle = differencesTitle === defaultSettlementDifferencesTitle ? labels.trading.settlementDifferencesTitle : differencesTitle;
+  const [internalExpandedVenue, setInternalExpandedVenue] = useState2(
+    (_b = defaultExpandedVenue != null ? defaultExpandedVenue : (_a = venues[0]) == null ? void 0 : _a.venue) != null ? _b : null
+  );
+  const [expandedDescriptionByVenue, setExpandedDescriptionByVenue] = useState2({});
+  const [overflowingDescriptionByVenue, setOverflowingDescriptionByVenue] = useState2({});
+  const [collapsedDescriptionByVenue, setCollapsedDescriptionByVenue] = useState2({});
+  const descriptionWrapperRefs = useRef(/* @__PURE__ */ new Map());
+  const descriptionMeasureRefs = useRef(/* @__PURE__ */ new Map());
+  useEffect2(() => {
+    if (expandedVenue === void 0)
+      return;
+    setInternalExpandedVenue(expandedVenue);
+  }, [expandedVenue]);
+  const resolvedExpandedVenue = expandedVenue === void 0 ? internalExpandedVenue : expandedVenue;
+  const handleVenueClick = (venue) => {
+    const nextVenue = resolvedExpandedVenue === venue ? null : venue;
+    if (expandedVenue === void 0) {
+      setInternalExpandedVenue(nextVenue);
+    }
+    onExpandedVenueChange == null ? void 0 : onExpandedVenueChange(nextVenue);
+  };
+  const handleDescriptionWrapperRef = useCallback(
+    (venue, element) => {
+      if (!element) {
+        descriptionWrapperRefs.current.delete(venue);
+        return;
+      }
+      descriptionWrapperRefs.current.set(venue, element);
+    },
+    []
+  );
+  const handleDescriptionMeasureRef = useCallback(
+    (venue, element) => {
+      if (!element) {
+        descriptionMeasureRefs.current.delete(venue);
+        return;
+      }
+      descriptionMeasureRefs.current.set(venue, element);
+    },
+    []
+  );
+  const updateDescriptionLayout = useCallback(
+    (venue, description, showMoreLabel) => {
+      const descriptionWrapperElement = descriptionWrapperRefs.current.get(venue);
+      const descriptionMeasureElement = descriptionMeasureRefs.current.get(venue);
+      if (!descriptionWrapperElement || !descriptionMeasureElement)
+        return;
+      const wrapperWidth = descriptionWrapperElement.clientWidth;
+      if (wrapperWidth <= 0)
+        return;
+      const computedStyles = window.getComputedStyle(descriptionWrapperElement);
+      const parsedLineHeight = Number.parseFloat(computedStyles.lineHeight);
+      const lineHeight = Number.isFinite(parsedLineHeight) ? parsedLineHeight : 20;
+      const maxHeight = lineHeight * 2 + 1;
+      descriptionMeasureElement.style.width = `${wrapperWidth}px`;
+      const getHeight = (value) => {
+        descriptionMeasureElement.textContent = value;
+        return descriptionMeasureElement.scrollHeight;
+      };
+      const fullHeight = getHeight(description);
+      if (fullHeight <= maxHeight) {
+        setOverflowingDescriptionByVenue((currentState) => {
+          if (currentState[venue] === false)
+            return currentState;
+          return __spreadProps(__spreadValues({}, currentState), {
+            [venue]: false
+          });
+        });
+        setCollapsedDescriptionByVenue((currentState) => {
+          if (currentState[venue] === description)
+            return currentState;
+          return __spreadProps(__spreadValues({}, currentState), {
+            [venue]: description
+          });
+        });
+        return;
+      }
+      const suffix = `... ${showMoreLabel}`;
+      let left = 0;
+      let right = description.length;
+      let bestLength = 0;
+      while (left <= right) {
+        const middle = Math.floor((left + right) / 2);
+        const candidate = description.slice(0, middle).trimEnd();
+        const candidateHeight = getHeight(`${candidate}${suffix}`);
+        if (candidateHeight <= maxHeight) {
+          bestLength = middle;
+          left = middle + 1;
+          continue;
+        }
+        right = middle - 1;
+      }
+      const collapsedDescription = description.slice(0, bestLength).trimEnd();
+      setOverflowingDescriptionByVenue((currentState) => {
+        if (currentState[venue] === true)
+          return currentState;
+        return __spreadProps(__spreadValues({}, currentState), {
+          [venue]: true
+        });
+      });
+      setCollapsedDescriptionByVenue((currentState) => {
+        if (currentState[venue] === collapsedDescription)
+          return currentState;
+        return __spreadProps(__spreadValues({}, currentState), {
+          [venue]: collapsedDescription
+        });
+      });
+    },
+    []
+  );
+  useEffect2(() => {
+    if (typeof window === "undefined")
+      return;
+    if (!resolvedExpandedVenue)
+      return;
+    if (expandedDescriptionByVenue[resolvedExpandedVenue])
+      return;
+    const expandedVenueItem = venues.find((venueItem) => venueItem.venue === resolvedExpandedVenue);
+    if (!expandedVenueItem)
+      return;
+    const frameId = window.requestAnimationFrame(() => {
+      var _a2;
+      updateDescriptionLayout(
+        resolvedExpandedVenue,
+        expandedVenueItem.description,
+        (_a2 = expandedVenueItem.showMoreLabel) != null ? _a2 : "Show more"
+      );
+    });
+    return () => {
+      window.cancelAnimationFrame(frameId);
+    };
+  }, [expandedDescriptionByVenue, resolvedExpandedVenue, updateDescriptionLayout, venues]);
+  useEffect2(() => {
+    if (!resolvedExpandedVenue)
+      return;
+    if (expandedDescriptionByVenue[resolvedExpandedVenue])
+      return;
+    if (typeof ResizeObserver === "undefined")
+      return;
+    const expandedVenueItem = venues.find((venueItem) => venueItem.venue === resolvedExpandedVenue);
+    if (!expandedVenueItem)
+      return;
+    const descriptionWrapperElement = descriptionWrapperRefs.current.get(resolvedExpandedVenue);
+    if (!descriptionWrapperElement)
+      return;
+    const resizeObserver = new ResizeObserver(() => {
+      var _a2;
+      updateDescriptionLayout(
+        resolvedExpandedVenue,
+        expandedVenueItem.description,
+        (_a2 = expandedVenueItem.showMoreLabel) != null ? _a2 : "Show more"
+      );
+    });
+    resizeObserver.observe(descriptionWrapperElement);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [expandedDescriptionByVenue, resolvedExpandedVenue, updateDescriptionLayout, venues]);
+  const handleDescriptionShowMoreClick = (event, venue) => {
+    event == null ? void 0 : event.stopPropagation();
+    setExpandedDescriptionByVenue((currentState) => {
+      if (currentState[venue])
+        return currentState;
+      return __spreadProps(__spreadValues({}, currentState), {
+        [venue]: true
+      });
+    });
+    onShowMore == null ? void 0 : onShowMore(venue);
+  };
+  if (isLoading) {
+    return /* @__PURE__ */ jsx2(
+      Skeleton,
+      {
+        ariaLabel: labels.trading.settlementLoading,
+        className,
+        view: skeletonViews.settlement
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs2(
+    Card,
+    {
+      className: cn(
+        "flex flex-col w-full gap-5 rounded-agg-xl border border-agg-separator bg-agg-secondary p-5 shadow-none hover:shadow-none",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs2("div", { className: getSettlementHeaderClassName(), children: [
+          /* @__PURE__ */ jsx2("p", { className: "text-agg-xs font-agg-bold leading-agg-4 uppercase text-agg-muted-foreground", children: resolvedSectionLabel }),
+          /* @__PURE__ */ jsx2("p", { className: "text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground", children: question })
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ jsx2("p", { className: "text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground", children: resolvedDifferencesTitle }),
+          /* @__PURE__ */ jsx2("ul", { className: "list-disc pl-5 text-agg-sm leading-agg-5 text-agg-foreground", children: differences.map((difference) => /* @__PURE__ */ jsx2("li", { children: difference }, difference)) })
+        ] }),
+        /* @__PURE__ */ jsx2("div", { className: "h-px w-full bg-agg-separator" }),
+        /* @__PURE__ */ jsx2("div", { className: "flex flex-col gap-3", children: venues.map((venue) => {
+          var _a2, _b2;
+          const venueLabel = getTradingVenueLabel(venue.venue, venue.label);
+          const isExpanded = resolvedExpandedVenue === venue.venue;
+          const isDescriptionExpanded = !!expandedDescriptionByVenue[venue.venue];
+          const isDescriptionOverflowing = !!overflowingDescriptionByVenue[venue.venue];
+          const shouldShowDescriptionCta = isExpanded && isDescriptionOverflowing && !isDescriptionExpanded;
+          const resolvedShowMoreLabel = (_a2 = venue.showMoreLabel) != null ? _a2 : "Show more";
+          return /* @__PURE__ */ jsxs2("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ jsxs2(
+              "button",
+              {
+                type: "button",
+                className: cn(
+                  "flex items-center gap-2 text-left",
+                  "cursor-pointer disabled:cursor-not-allowed hover:opacity-50",
+                  getMotionClassName(
+                    enableAnimations,
+                    "transition-[opacity,color] duration-200 ease-in-out"
+                  )
+                ),
+                "aria-expanded": isExpanded,
+                "aria-label": labels.trading.settlementDetailsAria(venueLabel),
+                onClick: () => handleVenueClick(venue.venue),
+                children: [
+                  /* @__PURE__ */ jsx2(
+                    VenueLogo,
+                    {
+                      venue: venue.venue,
+                      size: "small",
+                      ariaLabel: venueLabel
+                    }
+                  ),
+                  /* @__PURE__ */ jsx2(
+                    "span",
+                    {
+                      className: cn(
+                        "text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground",
+                        isExpanded ? "text-agg-primary" : "text-agg-foreground"
+                      ),
+                      children: venueLabel
+                    }
+                  ),
+                  /* @__PURE__ */ jsx2(
+                    Icon,
+                    {
+                      name: isExpanded ? "chevron-up" : "chevron-down",
+                      size: "small",
+                      className: "text-agg-foreground",
+                      color: "currentColor"
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx2(
+              "div",
+              {
+                "aria-hidden": !isExpanded,
+                className: cn(
+                  "grid overflow-hidden",
+                  isExpanded ? "mt-2 grid-rows-[1fr] opacity-100" : "mt-0 grid-rows-[0fr] opacity-0",
+                  !isExpanded && "pointer-events-none",
+                  getMotionClassName(
+                    enableAnimations,
+                    "transition-[grid-template-rows,opacity,margin-top] duration-300 ease-in-out"
+                  )
+                ),
+                children: /* @__PURE__ */ jsxs2(
+                  "div",
+                  {
+                    ref: (element) => handleDescriptionWrapperRef(venue.venue, element),
+                    className: "relative min-h-0",
+                    children: [
+                      /* @__PURE__ */ jsxs2("p", { className: "min-h-0 text-agg-sm leading-agg-5 text-agg-foreground", children: [
+                        isDescriptionExpanded || !isDescriptionOverflowing ? venue.description : (_b2 = collapsedDescriptionByVenue[venue.venue]) != null ? _b2 : venue.description,
+                        shouldShowDescriptionCta ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
+                          "... ",
+                          /* @__PURE__ */ jsx2(
+                            "button",
+                            {
+                              type: "button",
+                              tabIndex: isExpanded ? 0 : -1,
+                              className: cn(
+                                "cursor-pointer disabled:cursor-not-allowed",
+                                "text-agg-sm leading-agg-5 text-agg-foreground underline-offset-2 hover:underline hover:font-agg-bold",
+                                getMotionClassName(
+                                  enableAnimations,
+                                  "transition-[text-decoration] duration-200 ease-in-out"
+                                )
+                              ),
+                              "aria-label": labels.trading.settlementShowMoreAria(
+                                resolvedShowMoreLabel,
+                                venueLabel
+                              ),
+                              onClick: (event) => handleDescriptionShowMoreClick(event, venue.venue),
+                              children: resolvedShowMoreLabel
+                            }
+                          )
+                        ] }) : null
+                      ] }),
+                      /* @__PURE__ */ jsx2(
+                        "p",
+                        {
+                          ref: (element) => handleDescriptionMeasureRef(venue.venue, element),
+                          "aria-hidden": true,
+                          className: "pointer-events-none invisible fixed top-0 left-0 -z-10 whitespace-normal text-agg-sm leading-agg-5"
+                        }
+                      )
+                    ]
+                  }
+                )
+              }
+            )
+          ] }, venue.venue);
+        }) })
+      ]
+    }
+  );
+};
+Settlement.displayName = "Settlement";
+
+export {
+  defaultSettlementSectionLabel,
+  defaultSettlementDifferencesTitle,
+  defaultTradingDisclaimer,
+  getTradingDateLabel,
+  getTradingVenueLabel,
+  getTradingValueLabel,
+  getTradingPriceLabel,
+  getTradingAveragePriceLabel,
+  getTradingBalanceLabel,
+  getTradingSharesLabel,
+  getTradingSlippageLabel,
+  PlaceOrder,
+  Settlement
+};