@agg-build/ui 4.17.3 → 4.18.1

package/dist/{chunk-BBDFSTIA.mjs → chunk-WIGSRHUG.mjs}

@@ -4105,9 +4105,9 @@ var Card = (_a) => {
 Card.displayName = "Card";
 
 // src/primitives/chart/index.tsx
-import { useLabels as useLabels2, useSdkUiConfig as useSdkUiConfig6 } from "@agg-build/hooks";
+import { useLabels as useLabels3, useSdkUiConfig as useSdkUiConfig7 } from "@agg-build/hooks";
 import { Liveline } from "liveline";
-import { useEffect as useEffect3, useMemo as useMemo3, useRef as useRef2, useState as useState3 } from "react";
+import { useEffect as useEffect5, useMemo as useMemo4, useRef as useRef4, useState as useState4 } from "react";
 
 // src/primitives/switch-button/index.tsx
 import { useEffect as useEffect2, useMemo as useMemo2, useState as useState2 } from "react";
@@ -4275,6 +4275,156 @@ var LINE_CHART_DEFAULT_HEIGHT = 280;
 var LINE_CHART_DEFAULT_TYPE = "line";
 var LINE_CHART_DEFAULT_SHOW_SERIES_CONTROLS = true;
 var LINE_CHART_DEFAULT_WINDOW_THRESHOLD = 1.05;
+var LINE_CHART_PLOT_PADDING = { top: 12, right: 28, bottom: 28, left: 12 };
+
+// src/primitives/chart/probability-chart.tsx
+import { useEffect as useEffect4, useId, useMemo as useMemo3, useRef as useRef3, useState as useState3 } from "react";
+import { useLabels as useLabels2, useSdkUiConfig as useSdkUiConfig6 } from "@agg-build/hooks";
+
+// src/primitives/chart/probability-live-tail.tsx
+import { useEffect as useEffect3, useRef as useRef2 } from "react";
+
+// src/primitives/chart/probability-chart.utils.ts
+var CHART_PADDING = { top: 16, right: 56, bottom: 32, left: 12 };
+var probabilityY = (value, height) => CHART_PADDING.top + (1 - value / 100) * (height - CHART_PADDING.top - CHART_PADDING.bottom);
+var probabilityX = (time, from, to, width) => CHART_PADDING.left + (time - from) / (to - from) * (width - CHART_PADDING.left - CHART_PADDING.right);
+var probabilityPath = (points, from, to, width, height) => {
+  const valid = points.filter(
+    (p) => Number.isFinite(p.time) && Number.isFinite(p.value) && p.value >= 0 && p.value <= 100
+  );
+  if (!valid.length) return "";
+  let path = `M${probabilityX(valid[0].time, from, to, width)},${probabilityY(valid[0].value, height)}`;
+  for (let i = 1; i < valid.length; i++) {
+    const current = valid[i];
+    const previous = valid[i - 1];
+    const x = probabilityX(current.time, from, to, width);
+    const previousX = probabilityX(previous.time, from, to, width);
+    const oldY = probabilityY(previous.value, height);
+    const y = probabilityY(current.value, height);
+    const corner = Math.min(2, Math.max(0, (x - previousX) / 2));
+    path += `L${x - corner},${oldY}C${x},${oldY} ${x},${y} ${x},${y}`;
+  }
+  return path;
+};
+var nearestChartPoint = (points, time) => {
+  let left = 0, right = points.length - 1;
+  while (left < right) {
+    const middle = Math.ceil((left + right) / 2);
+    if (points[middle].time <= time) left = middle;
+    else right = middle - 1;
+  }
+  return points[left];
+};
+
+// src/primitives/chart/probability-live-tail.tsx
+import { jsx as jsx101, jsxs as jsxs99 } from "react/jsx-runtime";
+var ProbabilityLiveTail = ({
+  item,
+  historyPath,
+  previous,
+  point,
+  value,
+  from,
+  to,
+  width,
+  height,
+  clipId,
+  live,
+  animate
+}) => {
+  var _a;
+  const path = useRef2(null);
+  const endpoint = useRef2(null);
+  const shown = useRef2({ time: point.time, value, target: value, origin: value, changedAt: 0 });
+  useEffect3(() => {
+    if (shown.current.target !== value) {
+      shown.current = __spreadProps(__spreadValues({}, shown.current), {
+        origin: shown.current.value,
+        target: value,
+        changedAt: performance.now()
+      });
+    }
+    let frame = 0;
+    let timer = 0;
+    const stop = () => {
+      cancelAnimationFrame(frame);
+      window.clearTimeout(timer);
+    };
+    const draw = () => {
+      var _a2, _b, _c, _d, _e;
+      if (document.hidden) return;
+      const now = Date.now() / 1e3;
+      if (now < from) {
+        (_a2 = endpoint.current) == null ? void 0 : _a2.setAttribute("visibility", "hidden");
+      } else {
+        const time = Math.min(
+          to,
+          Math.max(point.time, shown.current.time, live ? now : from, now >= to ? to : from)
+        );
+        const progress = live && animate ? Math.min(1, Math.max(0, (performance.now() - shown.current.changedAt) / 180)) : 1;
+        const displayedValue = shown.current.origin + (value - shown.current.origin) * (1 - __pow(1 - progress, 3));
+        shown.current.time = time;
+        shown.current.value = displayedValue;
+        const tail = [
+          ...previous ? [previous] : [],
+          __spreadProps(__spreadValues({}, point), { value: displayedValue }),
+          ...time > point.time ? [{ time, value: displayedValue }] : []
+        ];
+        (_b = path.current) == null ? void 0 : _b.setAttribute(
+          "d",
+          historyPath + probabilityPath(tail, from, to, width, height)
+        );
+        (_c = endpoint.current) == null ? void 0 : _c.setAttribute(
+          "transform",
+          `translate(${probabilityX(time, from, to, width)},${probabilityY(displayedValue, height)})`
+        );
+        (_d = endpoint.current) == null ? void 0 : _d.setAttribute("data-time", String(time));
+        (_e = endpoint.current) == null ? void 0 : _e.setAttribute("visibility", "visible");
+      }
+      if (live && now < to) {
+        if (animate) frame = requestAnimationFrame(draw);
+        else timer = window.setTimeout(draw, Math.min(1e3, (to - now) * 1e3));
+      }
+    };
+    const onVisibility = () => {
+      stop();
+      if (!document.hidden) draw();
+    };
+    draw();
+    document.addEventListener("visibilitychange", onVisibility);
+    return () => {
+      stop();
+      document.removeEventListener("visibilitychange", onVisibility);
+    };
+  }, [animate, from, height, historyPath, live, point, previous, to, value, width]);
+  return /* @__PURE__ */ jsxs99("g", { className: "agg-probability-series", "data-series-id": item.id, children: [
+    /* @__PURE__ */ jsx101(
+      "path",
+      {
+        ref: path,
+        clipPath: `url(#${clipId})`,
+        fill: "none",
+        stroke: item.color,
+        strokeWidth: (_a = item.lineWidth) != null ? _a : 1.8,
+        strokeDasharray: item.lineStyle === "dashed" ? "6 4" : item.lineStyle === "dotted" ? "1 4" : void 0,
+        strokeLinejoin: "round",
+        strokeLinecap: "round"
+      }
+    ),
+    /* @__PURE__ */ jsxs99("g", { ref: endpoint, className: "agg-chart-live-endpoint", visibility: "hidden", children: [
+      /* @__PURE__ */ jsx101(
+        "circle",
+        {
+          r: 8,
+          fill: item.color,
+          opacity: 0.2,
+          className: live && animate ? "agg-chart-endpoint-pulse" : void 0
+        }
+      ),
+      /* @__PURE__ */ jsx101("circle", { r: 3.5, fill: item.color })
+    ] })
+  ] });
+};
 
 // src/primitives/chart/chart.utils.ts
 import dayjs from "dayjs";
@@ -4423,8 +4573,369 @@ var resolveSelectedSeries = (series, activeSeriesId) => {
   return series.find((seriesItem) => seriesItem.id === activeSeriesId);
 };
 
+// src/primitives/chart/probability-chart.tsx
+import { jsx as jsx102, jsxs as jsxs100 } from "react/jsx-runtime";
+var LiquidityStream = ({
+  orderbook,
+  height,
+  price
+}) => {
+  const labels = useLabels2();
+  const {
+    formatting: { formatCompactCurrency }
+  } = useSdkUiConfig6();
+  const latestBook = useRef3(orderbook);
+  const latestPrice = useRef3(price);
+  const previousPrice = useRef3(price);
+  const previousTotals = useRef3(null);
+  const sequence = useRef3(0);
+  const [levels, setLevels] = useState3([]);
+  useEffect4(() => {
+    latestBook.current = orderbook;
+    latestPrice.current = price;
+  }, [orderbook, price]);
+  useEffect4(() => {
+    const spawn = () => {
+      const book = latestBook.current;
+      const candidates = [
+        ...book.bids.map(([, amount]) => ({ amount, side: "bid" })),
+        ...book.asks.map(([, amount]) => ({ amount, side: "ask" }))
+      ].filter((level) => Number.isFinite(level.amount) && level.amount > 0);
+      const now = Date.now();
+      if (!candidates.length) {
+        setLevels([]);
+        return;
+      }
+      const totals = [0, 0];
+      for (const level of candidates) totals[level.side === "bid" ? 0 : 1] += level.amount;
+      const previous = previousTotals.current;
+      const churn = previous ? Math.min(
+        1,
+        (Math.abs(totals[0] - previous[0]) + Math.abs(totals[1] - previous[1])) / Math.max(1, previous[0] + previous[1])
+      ) : 0;
+      previousTotals.current = totals;
+      const candidate = candidates[sequence.current % candidates.length];
+      const max = Math.max(...candidates.map((level) => level.amount));
+      const currentPrice = latestPrice.current;
+      const momentum = currentPrice != null && previousPrice.current != null ? Math.min(
+        1,
+        Math.abs(currentPrice - previousPrice.current) / Math.max(1, previousPrice.current) * 10
+      ) : 0;
+      previousPrice.current = currentPrice;
+      const next = __spreadProps(__spreadValues({}, candidate), {
+        id: sequence.current++,
+        born: now,
+        duration: 6e3 - Math.max(churn, momentum) * 2500,
+        intensity: 0.55 + candidate.amount / max * 0.35
+      });
+      setLevels(
+        (current) => [...current.filter((level) => now - level.born < level.duration), next].slice(-8)
+      );
+    };
+    spawn();
+    const timer = window.setInterval(spawn, 850);
+    return () => window.clearInterval(timer);
+  }, []);
+  return /* @__PURE__ */ jsx102(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: "agg-chart-liquidity-stream pointer-events-none absolute z-0 overflow-hidden",
+      style: {
+        left: CHART_PADDING.left + 4,
+        top: CHART_PADDING.top,
+        bottom: CHART_PADDING.bottom,
+        width: 116
+      },
+      children: levels.map((level) => /* @__PURE__ */ jsx102(
+        "span",
+        {
+          className: `agg-chart-liquidity-label absolute bottom-0 left-0 whitespace-nowrap text-agg-xs font-agg-medium tabular-nums ${level.side === "bid" ? "text-agg-success" : "text-agg-error"}`,
+          style: {
+            animationDuration: `${level.duration}ms`,
+            "--agg-depth-travel": `${height - CHART_PADDING.top - CHART_PADDING.bottom}px`,
+            "--agg-depth-opacity": level.intensity
+          },
+          children: level.side === "bid" ? labels.common.chartBidLiquidity(formatCompactCurrency(level.amount)) : labels.common.chartAskLiquidity(formatCompactCurrency(level.amount))
+        },
+        level.id
+      ))
+    }
+  );
+};
+var ProbabilityChart = ({
+  series,
+  height,
+  domain,
+  orderbook,
+  live,
+  loading,
+  liveValue,
+  followTime = false,
+  animate = true,
+  formatTime: customFormatTime
+}) => {
+  var _a, _b, _c, _d, _e;
+  const labels = useLabels2();
+  const root = useRef3(null);
+  const clipId = useId().replace(/:/g, "");
+  const [width, setWidth] = useState3(700);
+  const [hoverTime, setHoverTime] = useState3(null);
+  useEffect4(() => {
+    const element = root.current;
+    if (!element) return;
+    const measure = () => {
+      const next = element.getBoundingClientRect().width;
+      if (next > 0) setWidth(next);
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, []);
+  const bounds = useMemo3(() => {
+    if (domain && Number.isFinite(domain.from) && domain.to > domain.from) return domain;
+    const times = series.flatMap((item) => item.points.map((point) => point.time));
+    const from = times.length ? Math.min(...times) : 0;
+    const to = times.length ? Math.max(...times) : 1;
+    return { from, to: Math.max(from + 1, to) };
+  }, [domain, series]);
+  const clockDriven = Boolean(
+    followTime && domain && Number.isFinite(domain.from) && domain.to > domain.from
+  );
+  const targetValue = !clockDriven && series.length === 1 && liveValue != null && Number.isFinite(liveValue) && liveValue >= 0 && liveValue <= 100 ? liveValue : void 0;
+  const [displayValue, setDisplayValue] = useState3(targetValue);
+  const displayed = useRef3(targetValue);
+  const seriesIdentity = `${(_a = series[0]) == null ? void 0 : _a.id}:${(_c = (_b = series[0]) == null ? void 0 : _b.points[0]) == null ? void 0 : _c.time}:${(_e = (_d = series[0]) == null ? void 0 : _d.points[0]) == null ? void 0 : _e.value}`;
+  const priorIdentity = useRef3(seriesIdentity);
+  useEffect4(() => {
+    if (!live || !animate || targetValue == null || displayed.current == null || priorIdentity.current !== seriesIdentity) {
+      priorIdentity.current = seriesIdentity;
+      displayed.current = targetValue;
+      setDisplayValue(targetValue);
+      return;
+    }
+    const startValue = displayed.current;
+    const started = performance.now();
+    let frame = 0;
+    const animateValue = (time) => {
+      const progress = Math.min(1, Math.max(0, (time - started) / 180));
+      const value = startValue + (targetValue - startValue) * (1 - __pow(1 - progress, 3));
+      displayed.current = value;
+      setDisplayValue(value);
+      if (progress < 1) frame = requestAnimationFrame(animateValue);
+    };
+    frame = requestAnimationFrame(animateValue);
+    return () => cancelAnimationFrame(frame);
+  }, [live, animate, targetValue, seriesIdentity]);
+  const defaultFormatTime = useMemo3(
+    () => resolveChartTimeFormatter(bounds.to - bounds.from),
+    [bounds]
+  );
+  const formatTime = customFormatTime != null ? customFormatTime : defaultFormatTime;
+  const plotRight = width - CHART_PADDING.right;
+  const plotBottom = height - CHART_PADDING.bottom;
+  const plottedSeries = useMemo3(
+    () => series.map((item) => {
+      const points = item.points.filter(
+        (point) => point.time >= bounds.from && point.time <= bounds.to
+      );
+      return __spreadProps(__spreadValues({}, item), {
+        points,
+        path: probabilityPath(
+          (clockDriven ? points.slice(0, -1) : points).map(
+            (point, index) => index === points.length - 1 && displayValue != null ? __spreadProps(__spreadValues({}, point), { value: displayValue }) : point
+          ),
+          bounds.from,
+          bounds.to,
+          width,
+          height
+        )
+      });
+    }),
+    [series, bounds, displayValue, width, height, clockDriven]
+  );
+  const hoverEntries = hoverTime == null ? [] : plottedSeries.flatMap((item) => {
+    const point = nearestChartPoint(item.points, hoverTime);
+    return point ? [__spreadProps(__spreadValues({}, item), { point })] : [];
+  });
+  const hasData = plottedSeries.some((item) => item.points.length > 0);
+  return /* @__PURE__ */ jsxs100(
+    "div",
+    {
+      ref: root,
+      className: "agg-probability-chart relative h-full w-full",
+      onPointerLeave: () => setHoverTime(null),
+      children: [
+        orderbook && live && animate && !loading && hasData ? /* @__PURE__ */ jsx102(LiquidityStream, { orderbook, height, price: targetValue }) : null,
+        /* @__PURE__ */ jsxs100(
+          "svg",
+          {
+            className: "relative z-10 h-full w-full overflow-visible",
+            viewBox: `0 0 ${width} ${height}`,
+            onPointerMove: (event) => {
+              const rect = event.currentTarget.getBoundingClientRect();
+              const x = Math.min(plotRight, Math.max(CHART_PADDING.left, event.clientX - rect.left));
+              setHoverTime(
+                bounds.from + (x - CHART_PADDING.left) / (plotRight - CHART_PADDING.left) * (bounds.to - bounds.from)
+              );
+            },
+            children: [
+              /* @__PURE__ */ jsx102("defs", { children: /* @__PURE__ */ jsx102("clipPath", { id: clipId, children: /* @__PURE__ */ jsx102(
+                "rect",
+                {
+                  x: CHART_PADDING.left,
+                  y: CHART_PADDING.top - 5,
+                  width: Math.max(1, plotRight - CHART_PADDING.left),
+                  height: plotBottom - CHART_PADDING.top + 10
+                }
+              ) }) }),
+              [0, 25, 50, 75, 100].map((value) => /* @__PURE__ */ jsxs100("g", { children: [
+                /* @__PURE__ */ jsx102(
+                  "line",
+                  {
+                    x1: CHART_PADDING.left,
+                    x2: plotRight,
+                    y1: probabilityY(value, height),
+                    y2: probabilityY(value, height),
+                    stroke: "var(--agg-color-border)",
+                    strokeOpacity: 0.5,
+                    strokeDasharray: "1 4"
+                  }
+                ),
+                /* @__PURE__ */ jsxs100(
+                  "text",
+                  {
+                    x: plotRight + 10,
+                    y: probabilityY(value, height) + 3,
+                    fontSize: 10,
+                    fill: "var(--agg-color-muted-foreground)",
+                    children: [
+                      value,
+                      "%"
+                    ]
+                  }
+                )
+              ] }, value)),
+              [0, 1, 2, 3, 4].map((index) => {
+                const time = bounds.from + (bounds.to - bounds.from) * index / 4;
+                return /* @__PURE__ */ jsx102(
+                  "text",
+                  {
+                    x: probabilityX(time, bounds.from, bounds.to, width),
+                    y: height - 8,
+                    textAnchor: index === 0 ? "start" : index === 4 ? "end" : "middle",
+                    fontSize: 10,
+                    fill: "var(--agg-color-muted-foreground)",
+                    children: formatTime(time)
+                  },
+                  index
+                );
+              }),
+              !loading && plottedSeries.map((item) => {
+                var _a2;
+                const last = item.points.at(-1);
+                if (clockDriven && last)
+                  return /* @__PURE__ */ jsx102(
+                    ProbabilityLiveTail,
+                    {
+                      item,
+                      historyPath: item.path,
+                      previous: item.points.at(-2),
+                      point: last,
+                      value: series.length === 1 && liveValue != null && Number.isFinite(liveValue) && liveValue >= 0 && liveValue <= 100 ? liveValue : last.value,
+                      from: bounds.from,
+                      to: bounds.to,
+                      width,
+                      height,
+                      clipId,
+                      live,
+                      animate
+                    },
+                    `${item.id}:${bounds.from}:${bounds.to}`
+                  );
+                return /* @__PURE__ */ jsxs100("g", { children: [
+                  /* @__PURE__ */ jsx102(
+                    "path",
+                    {
+                      clipPath: `url(#${clipId})`,
+                      d: item.path,
+                      fill: "none",
+                      stroke: item.color,
+                      strokeWidth: (_a2 = item.lineWidth) != null ? _a2 : 1.8,
+                      strokeDasharray: item.lineStyle === "dashed" ? "6 4" : item.lineStyle === "dotted" ? "1 4" : void 0,
+                      strokeLinejoin: "round",
+                      strokeLinecap: "round"
+                    }
+                  ),
+                  last ? /* @__PURE__ */ jsxs100(
+                    "g",
+                    {
+                      transform: `translate(${probabilityX(last.time, bounds.from, bounds.to, width)},${probabilityY(displayValue != null ? displayValue : last.value, height)})`,
+                      children: [
+                        /* @__PURE__ */ jsx102(
+                          "circle",
+                          {
+                            r: 8,
+                            fill: item.color,
+                            opacity: 0.2,
+                            className: live && animate ? "agg-chart-endpoint-pulse" : void 0
+                          }
+                        ),
+                        /* @__PURE__ */ jsx102("circle", { r: 3.5, fill: item.color })
+                      ]
+                    }
+                  ) : null
+                ] }, item.id);
+              }),
+              hoverTime != null && hasData && !loading ? /* @__PURE__ */ jsx102(
+                "line",
+                {
+                  x1: probabilityX(hoverTime, bounds.from, bounds.to, width),
+                  x2: probabilityX(hoverTime, bounds.from, bounds.to, width),
+                  y1: CHART_PADDING.top,
+                  y2: plotBottom,
+                  stroke: "var(--agg-color-muted-foreground)",
+                  strokeOpacity: 0.65,
+                  strokeDasharray: "3 4"
+                }
+              ) : null
+            ]
+          }
+        ),
+        loading || !hasData ? /* @__PURE__ */ jsx102(
+          "div",
+          {
+            className: "absolute inset-0 z-20 flex items-center justify-center text-agg-sm text-agg-muted-foreground",
+            role: "status",
+            children: loading ? labels.common.loading : labels.common.chartEmpty
+          }
+        ) : null,
+        hoverEntries.length > 0 && !loading ? /* @__PURE__ */ jsxs100(
+          "div",
+          {
+            className: "pointer-events-none absolute top-3 right-16 z-20 rounded-agg-md border border-agg-border bg-agg-secondary px-3 py-2 text-agg-xs text-agg-foreground shadow-sm",
+            role: "status",
+            children: [
+              /* @__PURE__ */ jsx102("div", { className: "mb-1 text-agg-muted-foreground", children: formatTime(hoverEntries[0].point.time) }),
+              hoverEntries.map((item) => {
+                var _a2;
+                return /* @__PURE__ */ jsxs100("div", { style: { color: item.color }, children: [
+                  (_a2 = item.label) != null ? _a2 : item.id,
+                  ": ",
+                  formatDefaultChartValue(item.point.value)
+                ] }, item.id);
+              })
+            ]
+          }
+        ) : null
+      ]
+    }
+  );
+};
+
 // src/primitives/chart/index.tsx
-import { jsx as jsx101, jsxs as jsxs99 } from "react/jsx-runtime";
+import { jsx as jsx103, jsxs as jsxs101 } from "react/jsx-runtime";
 var renderDefaultSeriesControls = ({
   series,
   activeSeriesId,
@@ -4433,7 +4944,7 @@ var renderDefaultSeriesControls = ({
   seriesSwitchAriaLabel,
   formatSeriesOptionAriaLabel
 }) => {
-  return /* @__PURE__ */ jsx101(
+  return /* @__PURE__ */ jsx103(
     SwitchButton,
     {
       ariaLabel: seriesSwitchAriaLabel,
@@ -4460,29 +4971,52 @@ var LineChart = ({
   liveCandle: liveForming,
   lineData,
   lineValue,
-  live
+  orderbook,
+  live,
+  presentation = "streaming",
+  timeDomain,
+  followTime = false,
+  formatTime
 }) => {
   var _a, _b;
-  const labels = useLabels2();
+  const labels = useLabels3();
   const {
     general: { theme },
-    features: { enableGradients, enableLiveUpdates }
-  } = useSdkUiConfig6();
+    features: { enableGradients, enableLiveUpdates, enableAnimations }
+  } = useSdkUiConfig7();
   const isLive = enableLiveUpdates && (live != null ? live : true);
-  const normalizedSeries = useMemo3(() => extendSeriesToNow(normalizeSeries(series)), [series]);
-  const chartRootRef = useRef2(null);
-  const latestChartWidthRef = useRef2(null);
-  const resizeFrameRef = useRef2(null);
-  const [activeSeriesId, setActiveSeriesId] = useState3(
+  const normalizedSeries = useMemo4(() => {
+    const normalized = normalizeSeries(series);
+    return followTime && presentation === "probability" ? normalized : extendSeriesToNow(normalized);
+  }, [series, followTime, presentation]);
+  const chartRootRef = useRef4(null);
+  const latestChartWidthRef = useRef4(null);
+  const resizeFrameRef = useRef4(null);
+  const [activeSeriesId, setActiveSeriesId] = useState4(
     () => resolveActiveSeriesId(normalizedSeries, null)
   );
-  const [chartResizeVersion, setChartResizeVersion] = useState3(0);
-  useEffect3(() => {
+  const [chartResizeVersion, setChartResizeVersion] = useState4(0);
+  const [prefersReducedMotion, setPrefersReducedMotion] = useState4(true);
+  const usesOrderbookRenderer = Boolean(
+    orderbook && chartType === "line" && normalizedSeries.length === 1
+  );
+  const canStreamOrderbook = Boolean(
+    usesOrderbookRenderer && isLive && enableAnimations && !isLoading
+  );
+  useEffect5(() => {
+    if (typeof window.matchMedia !== "function") return;
+    const query = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const updateMotionPreference = () => setPrefersReducedMotion(query.matches);
+    updateMotionPreference();
+    query.addEventListener("change", updateMotionPreference);
+    return () => query.removeEventListener("change", updateMotionPreference);
+  }, []);
+  useEffect5(() => {
     setActiveSeriesId(
       (currentActiveSeriesId) => resolveActiveSeriesId(normalizedSeries, currentActiveSeriesId)
     );
   }, [normalizedSeries]);
-  useEffect3(() => {
+  useEffect5(() => {
     if (typeof window === "undefined") return;
     const chartRootElement = chartRootRef.current;
     if (!chartRootElement) return;
@@ -4528,27 +5062,27 @@ var LineChart = ({
   const handleSeriesChange = (seriesId) => {
     setActiveSeriesId(seriesId);
   };
-  const primarySeries = useMemo3(
+  const primarySeries = useMemo4(
     () => resolveSelectedSeries(normalizedSeries, activeSeriesId),
     [activeSeriesId, normalizedSeries]
   );
-  const primaryData = useMemo3(() => {
+  const primaryData = useMemo4(() => {
     if (!primarySeries) return [];
     return toLivelinePoints(primarySeries.points);
   }, [primarySeries]);
-  const candleWidth = useMemo3(() => {
+  const candleWidth = useMemo4(() => {
     if (!primarySeries) return void 0;
     return resolveCandleWidthSeconds(primarySeries.points, 300);
   }, [primarySeries]);
-  const primaryCandles = useMemo3(() => {
+  const primaryCandles = useMemo4(() => {
     if (!primarySeries) return [];
     return padSparseCandles(toLivelineCandles(primarySeries.points), candleWidth);
   }, [primarySeries, candleWidth]);
-  const primaryValue = useMemo3(() => {
+  const primaryValue = useMemo4(() => {
     if (!primarySeries) return 0;
     return resolveLatestValue(primarySeries.points);
   }, [primarySeries]);
-  const livelineSeries = useMemo3(() => {
+  const livelineSeries = useMemo4(() => {
     return normalizedSeries.map((seriesItem) => ({
       id: seriesItem.id,
       color: seriesItem.color,
@@ -4556,10 +5090,11 @@ var LineChart = ({
       value: resolveLatestValue(seriesItem.points)
     }));
   }, [normalizedSeries]);
-  const windowSeconds = useMemo3(() => {
+  const windowSeconds = useMemo4(() => {
     return resolveWindowSeconds(normalizedSeries);
   }, [normalizedSeries]);
-  const timeFormatter = useMemo3(() => resolveChartTimeFormatter(windowSeconds), [windowSeconds]);
+  const hasRenderableData = chartType === "candlestick" ? primaryCandles.length >= 2 : livelineSeries.some((item) => item.data.length >= 2);
+  const timeFormatter = useMemo4(() => resolveChartTimeFormatter(windowSeconds), [windowSeconds]);
   const seriesControls = showSeriesControls ? (_a = renderSeriesControls == null ? void 0 : renderSeriesControls({
     series: normalizedSeries,
     activeSeriesId,
@@ -4572,7 +5107,7 @@ var LineChart = ({
     seriesSwitchAriaLabel: labels.common.lineChartSeriesSwitchAria,
     formatSeriesOptionAriaLabel: labels.common.lineChartSeriesOptionAria
   }) : null : null;
-  return /* @__PURE__ */ jsxs99(
+  return /* @__PURE__ */ jsxs101(
     "div",
     {
       ref: chartRootRef,
@@ -4583,7 +5118,7 @@ var LineChart = ({
       ),
       style: { width, minHeight: height },
       children: [
-        !isLoading && seriesControls ? /* @__PURE__ */ jsx101(
+        !isLoading && seriesControls ? /* @__PURE__ */ jsx103(
           "div",
           {
             className: cn(
@@ -4595,25 +5130,39 @@ var LineChart = ({
             children: seriesControls
           }
         ) : null,
-        /* @__PURE__ */ jsx101(
+        /* @__PURE__ */ jsx103(
           "div",
           {
             className: cn(
               "agg-chart-content",
               "min-w-0 overflow-hidden",
-              "[&>*:not(.agg-livechart):first-of-type]:hidden!",
+              presentation !== "probability" && "[&>*:not(.agg-livechart):first-of-type]:hidden!",
               classNames == null ? void 0 : classNames.chartViewport
             ),
             role: "img",
             "aria-label": chartType === "candlestick" ? labels.common.candlestickChartAria : labels.common.lineChartAria,
             style: { height },
-            children: /* @__PURE__ */ jsx101(
+            children: presentation === "probability" && chartType === "line" ? /* @__PURE__ */ jsx103(
+              ProbabilityChart,
+              {
+                liveValue: lineValue,
+                series: normalizedSeries,
+                height,
+                domain: timeDomain,
+                followTime,
+                animate: enableAnimations && !prefersReducedMotion,
+                formatTime,
+                orderbook: canStreamOrderbook && !prefersReducedMotion ? orderbook : void 0,
+                live: isLive,
+                loading: isLoading
+              }
+            ) : /* @__PURE__ */ jsx103(
               Liveline,
               {
                 className: cn("agg-livechart agg-chart-canvas h-full w-full", classNames == null ? void 0 : classNames.liveline),
                 data: primaryData,
                 value: primaryValue,
-                series: livelineSeries,
+                series: usesOrderbookRenderer ? void 0 : livelineSeries,
                 momentum: isLive,
                 pulse: isLive,
                 window: windowSeconds,
@@ -4622,25 +5171,24 @@ var LineChart = ({
                 liveCandle: chartType === "candlestick" ? liveForming : void 0,
                 lineData,
                 lineValue,
+                orderbook: canStreamOrderbook && !prefersReducedMotion ? orderbook : void 0,
                 formatValue: formatDefaultChartValue,
-                formatTime: timeFormatter,
+                formatTime: formatTime != null ? formatTime : timeFormatter,
                 loading: isLoading,
-                showValue: true,
+                showValue: !usesOrderbookRenderer,
+                badge: usesOrderbookRenderer ? false : void 0,
                 color: (_b = primarySeries == null ? void 0 : primarySeries.color) != null ? _b : "var(--agg-color-primary)",
                 theme,
                 fill: enableGradients,
                 grid: true,
-                lineWidth: 1,
+                lineWidth: usesOrderbookRenderer ? 2 : 1,
                 candleWidth: chartType === "candlestick" ? candleWidth : void 0,
                 exaggerate: true,
-                padding: {
-                  top: 12,
-                  right: 28,
-                  bottom: 28,
-                  left: 12
-                }
+                padding: __spreadProps(__spreadValues({}, LINE_CHART_PLOT_PADDING), {
+                  right: usesOrderbookRenderer ? 64 : LINE_CHART_PLOT_PADDING.right
+                })
               },
-              `liveline-${chartResizeVersion}`
+              `liveline-${chartResizeVersion}-${hasRenderableData ? "ready" : "empty"}`
             )
           }
         )
@@ -4651,8 +5199,8 @@ var LineChart = ({
 LineChart.displayName = "LineChart";
 
 // src/primitives/copy-button/index.tsx
-import { useCallback as useCallback2, useEffect as useEffect4, useRef as useRef3, useState as useState4 } from "react";
-import { jsx as jsx102, jsxs as jsxs100 } from "react/jsx-runtime";
+import { useCallback as useCallback2, useEffect as useEffect6, useRef as useRef5, useState as useState5 } from "react";
+import { jsx as jsx104, jsxs as jsxs102 } from "react/jsx-runtime";
 var CopyButton = ({
   value,
   label: label2,
@@ -4664,9 +5212,9 @@ var CopyButton = ({
   onCopy,
   resetMs = 2e3
 }) => {
-  const [isCopied, setIsCopied] = useState4(false);
-  const timeoutRef = useRef3(null);
-  useEffect4(
+  const [isCopied, setIsCopied] = useState5(false);
+  const timeoutRef = useRef5(null);
+  useEffect6(
     () => () => {
       if (timeoutRef.current !== null) clearTimeout(timeoutRef.current);
     },
@@ -4684,7 +5232,7 @@ var CopyButton = ({
   }, [onCopy, resetMs, value]);
   const showLabel = label2 !== void 0 || copiedLabel !== void 0;
   const visibleLabel = isCopied ? copiedLabel != null ? copiedLabel : label2 : label2;
-  return /* @__PURE__ */ jsxs100(
+  return /* @__PURE__ */ jsxs102(
     "button",
     {
       type: "button",
@@ -4697,8 +5245,8 @@ var CopyButton = ({
         className
       ),
       children: [
-        isCopied ? /* @__PURE__ */ jsx102(CheckCircleIcon, { className: iconClassName }) : /* @__PURE__ */ jsx102(CopyIcon, { className: iconClassName }),
-        showLabel ? /* @__PURE__ */ jsx102("span", { className: "agg-type-label-strong", children: visibleLabel }) : null
+        isCopied ? /* @__PURE__ */ jsx104(CheckCircleIcon, { className: iconClassName }) : /* @__PURE__ */ jsx104(CopyIcon, { className: iconClassName }),
+        showLabel ? /* @__PURE__ */ jsx104("span", { className: "agg-type-label-strong", children: visibleLabel }) : null
       ]
     }
   );
@@ -4706,8 +5254,8 @@ var CopyButton = ({
 CopyButton.displayName = "CopyButton";
 
 // src/primitives/currency-input/index.tsx
-import { useSdkUiConfig as useSdkUiConfig7 } from "@agg-build/hooks";
-import { useEffect as useEffect5, useLayoutEffect, useMemo as useMemo4, useRef as useRef4, useState as useState5 } from "react";
+import { useSdkUiConfig as useSdkUiConfig8 } from "@agg-build/hooks";
+import { useEffect as useEffect7, useLayoutEffect, useMemo as useMemo5, useRef as useRef6, useState as useState6 } from "react";
 
 // src/primitives/currency-input/currency-input.constants.ts
 var CURRENCY_INPUT_DEFAULT_PREFIX = "$";
@@ -4798,7 +5346,7 @@ var sanitizeCurrencyInputPastedValue = (input, parts, decimalPlaces) => {
 };
 
 // src/primitives/currency-input/index.tsx
-import { jsx as jsx103 } from "react/jsx-runtime";
+import { jsx as jsx105 } from "react/jsx-runtime";
 var CurrencyInput = ({
   value,
   onChange,
@@ -4816,13 +5364,13 @@ var CurrencyInput = ({
 }) => {
   const {
     general: { locale }
-  } = useSdkUiConfig7();
-  const parts = useMemo4(() => resolveCurrencyInputFormatParts(locale), [locale]);
-  const [raw, setRaw] = useState5(() => value >= 0 ? String(value) : "");
-  const isEditingRef = useRef4(false);
-  const inputRef = useRef4(null);
-  const caretPosRef = useRef4(null);
-  useEffect5(() => {
+  } = useSdkUiConfig8();
+  const parts = useMemo5(() => resolveCurrencyInputFormatParts(locale), [locale]);
+  const [raw, setRaw] = useState6(() => value >= 0 ? String(value) : "");
+  const isEditingRef = useRef6(false);
+  const inputRef = useRef6(null);
+  const caretPosRef = useRef6(null);
+  useEffect7(() => {
     if (!isEditingRef.current) {
       setRaw(value >= 0 ? String(value) : "");
     }
@@ -4931,7 +5479,7 @@ var CurrencyInput = ({
     onChange == null ? void 0 : onChange(nextValue);
     onBlur == null ? void 0 : onBlur();
   };
-  return /* @__PURE__ */ jsx103(
+  return /* @__PURE__ */ jsx105(
     "input",
     {
       ref: inputRef,
@@ -4964,8 +5512,8 @@ CurrencyInput.displayName = "CurrencyInput";
 import { Fragment as Fragment2 } from "react";
 
 // src/primitives/footer/agg-build-logo.tsx
-import { jsx as jsx104, jsxs as jsxs101 } from "react/jsx-runtime";
-var AggBuildIcon = (props) => /* @__PURE__ */ jsxs101(
+import { jsx as jsx106, jsxs as jsxs103 } from "react/jsx-runtime";
+var AggBuildIcon = (props) => /* @__PURE__ */ jsxs103(
   "svg",
   __spreadProps(__spreadValues({
     xmlns: "http://www.w3.org/2000/svg",
@@ -4976,29 +5524,29 @@ var AggBuildIcon = (props) => /* @__PURE__ */ jsxs101(
     "aria-hidden": "true"
   }, props), {
     children: [
-      /* @__PURE__ */ jsx104(
+      /* @__PURE__ */ jsx106(
         "path",
         {
           d: "M14.6158 5.73509L12.5568 13.8499C12.5088 14.0367 12.3434 14.17 12.1567 14.17L4.22474 14.1807C4.05404 14.1807 3.95803 14.3834 4.05938 14.5222L5.00353 15.8293C5.08355 15.936 5.20623 16 5.33425 16L9.41493 15.9947C11.9967 15.9893 14.2477 14.1914 14.9038 11.6038L15.9867 7.32498C16.0187 7.19692 15.992 7.06353 15.9173 6.9622L14.9732 5.66037C14.8718 5.5217 14.6585 5.56436 14.6158 5.73509Z",
           fill: "url(#agg-build-icon-g0)"
         }
       ),
-      /* @__PURE__ */ jsx104(
+      /* @__PURE__ */ jsx106(
         "path",
         {
           d: "M1.38421 10.2649L3.44322 2.15006C3.49123 1.96334 3.65659 1.82995 3.84328 1.82995L11.7753 1.81928C11.946 1.81928 12.042 1.61656 11.9406 1.47784L10.9965 0.170723C10.9165 0.0640015 10.7938 0 10.6657 0L6.58507 0.00533456C4.00331 0.010668 1.75227 1.80862 1.09616 4.39618L0.0133177 8.67502C-0.0186876 8.80308 0.00798503 8.93647 0.082664 9.0378L1.02682 10.3396C1.12817 10.4783 1.34154 10.4356 1.38421 10.2649Z",
           fill: "url(#agg-build-icon-g1)"
         }
       ),
-      /* @__PURE__ */ jsx104(
+      /* @__PURE__ */ jsx106(
         "path",
         {
           d: "M9.55357 10.5796L5.15284 10.585C4.98215 10.585 4.85946 10.4196 4.90213 10.2489L6.04365 5.73529C6.09166 5.54857 6.25702 5.41518 6.44372 5.41518L10.726 5.41033C10.9426 5.41008 11.102 5.61332 11.05 5.82363L9.95363 10.2595C9.90563 10.4462 9.74027 10.5796 9.55357 10.5796Z",
           fill: "url(#agg-build-icon-g2)"
         }
       ),
-      /* @__PURE__ */ jsxs101("defs", { children: [
-        /* @__PURE__ */ jsxs101(
+      /* @__PURE__ */ jsxs103("defs", { children: [
+        /* @__PURE__ */ jsxs103(
           "linearGradient",
           {
             id: "agg-build-icon-g0",
@@ -5008,12 +5556,12 @@ var AggBuildIcon = (props) => /* @__PURE__ */ jsxs101(
             y2: "16",
             gradientUnits: "userSpaceOnUse",
             children: [
-              /* @__PURE__ */ jsx104("stop", { stopColor: "#FE9943" }),
-              /* @__PURE__ */ jsx104("stop", { offset: "1", stopColor: "#FE763C" })
+              /* @__PURE__ */ jsx106("stop", { stopColor: "#FE9943" }),
+              /* @__PURE__ */ jsx106("stop", { offset: "1", stopColor: "#FE763C" })
             ]
           }
         ),
-        /* @__PURE__ */ jsxs101(
+        /* @__PURE__ */ jsxs103(
           "linearGradient",
           {
             id: "agg-build-icon-g1",
@@ -5023,12 +5571,12 @@ var AggBuildIcon = (props) => /* @__PURE__ */ jsxs101(
             y2: "16",
             gradientUnits: "userSpaceOnUse",
             children: [
-              /* @__PURE__ */ jsx104("stop", { stopColor: "#FE763C" }),
-              /* @__PURE__ */ jsx104("stop", { offset: "1", stopColor: "#FE9943" })
+              /* @__PURE__ */ jsx106("stop", { stopColor: "#FE763C" }),
+              /* @__PURE__ */ jsx106("stop", { offset: "1", stopColor: "#FE9943" })
             ]
           }
         ),
-        /* @__PURE__ */ jsxs101(
+        /* @__PURE__ */ jsxs103(
           "linearGradient",
           {
             id: "agg-build-icon-g2",
@@ -5038,8 +5586,8 @@ var AggBuildIcon = (props) => /* @__PURE__ */ jsxs101(
             y2: "16",
             gradientUnits: "userSpaceOnUse",
             children: [
-              /* @__PURE__ */ jsx104("stop", { stopColor: "#FEB549" }),
-              /* @__PURE__ */ jsx104("stop", { offset: "1", stopColor: "#FDA349" })
+              /* @__PURE__ */ jsx106("stop", { stopColor: "#FEB549" }),
+              /* @__PURE__ */ jsx106("stop", { offset: "1", stopColor: "#FDA349" })
             ]
           }
         )
@@ -5048,7 +5596,7 @@ var AggBuildIcon = (props) => /* @__PURE__ */ jsxs101(
   })
 );
 AggBuildIcon.displayName = "AggBuildIcon";
-var AggBuildLogo = (props) => /* @__PURE__ */ jsxs101(
+var AggBuildLogo = (props) => /* @__PURE__ */ jsxs103(
   "svg",
   __spreadProps(__spreadValues({
     xmlns: "http://www.w3.org/2000/svg",
@@ -5058,79 +5606,79 @@ var AggBuildLogo = (props) => /* @__PURE__ */ jsxs101(
     fill: "none"
   }, props), {
     children: [
-      /* @__PURE__ */ jsx104(
+      /* @__PURE__ */ jsx106(
         "path",
         {
           d: "M12.7888 5.0182L10.9872 12.1187C10.9452 12.2821 10.8005 12.3988 10.6371 12.3988L3.69665 12.4081C3.54729 12.4081 3.46327 12.5855 3.55195 12.7069L4.37809 13.8506C4.4481 13.944 4.55545 14 4.66747 14L8.23806 13.9953C10.4971 13.9907 12.4668 12.4175 13.0409 10.1533L13.9883 6.40936C14.0164 6.29731 13.993 6.18059 13.9277 6.09192L13.1015 4.95282C13.0129 4.83148 12.8262 4.86882 12.7888 5.0182Z",
           fill: "url(#agg-build-logo-g0)"
         }
       ),
-      /* @__PURE__ */ jsx104(
+      /* @__PURE__ */ jsx106(
         "path",
         {
           d: "M1.21119 8.9818L3.01282 1.8813C3.05482 1.71792 3.19951 1.60121 3.36287 1.60121L10.3034 1.59187C10.4527 1.59187 10.5367 1.41449 10.448 1.29311L9.62191 0.149383C9.5519 0.0560013 9.44454 0 9.33253 0L5.76194 0.00466774C3.5029 0.00933448 1.53324 1.58254 0.959144 3.84666L0.0116529 7.59064C-0.0163517 7.70269 0.0069869 7.81941 0.072331 7.90808L0.898466 9.04718C0.987147 9.16852 1.17385 9.13118 1.21119 8.9818Z",
           fill: "url(#agg-build-logo-g1)"
         }
       ),
-      /* @__PURE__ */ jsx104(
+      /* @__PURE__ */ jsx106(
         "path",
         {
           d: "M8.35937 9.25718L4.50874 9.26185C4.35938 9.26185 4.25203 9.11713 4.28937 8.96775L5.2882 5.01838C5.3302 4.855 5.4749 4.73828 5.63826 4.73828L9.38521 4.73404C9.5748 4.73382 9.71422 4.91165 9.66874 5.09568L8.70943 8.97709C8.66742 9.14047 8.52273 9.25718 8.35937 9.25718Z",
           fill: "url(#agg-build-logo-g2)"
         }
       ),
-      /* @__PURE__ */ jsx104(
+      /* @__PURE__ */ jsx106(
         "path",
         {
           d: "M24.5485 10.08L24.3175 7.87499L24.5905 7.10849L24.3175 6.35249L24.5485 4.13699H25.9555L25.6405 7.10849L25.9555 10.08H24.5485ZM24.9685 7.10849C24.8355 7.73149 24.615 8.27749 24.307 8.74649C23.999 9.21549 23.6175 9.57949 23.1625 9.83849C22.7145 10.0975 22.214 10.227 21.661 10.227C21.08 10.227 20.5655 10.0975 20.1175 9.83849C19.6695 9.57249 19.3195 9.20499 19.0675 8.73599C18.8155 8.26699 18.6895 7.72449 18.6895 7.10849C18.6895 6.48549 18.8155 5.94299 19.0675 5.48099C19.3195 5.01199 19.6695 4.64799 20.1175 4.38899C20.5655 4.12299 21.08 3.98999 21.661 3.98999C22.214 3.98999 22.7145 4.11949 23.1625 4.37849C23.6175 4.63749 23.999 5.00149 24.307 5.47049C24.622 5.93249 24.8425 6.47849 24.9685 7.10849ZM20.0755 7.10849C20.0755 7.50749 20.156 7.86099 20.317 8.16899C20.485 8.46999 20.7125 8.70799 20.9995 8.88299C21.2865 9.05099 21.6155 9.13499 21.9865 9.13499C22.3645 9.13499 22.7145 9.05099 23.0365 8.88299C23.3585 8.70799 23.642 8.46999 23.887 8.16899C24.139 7.86099 24.3385 7.50749 24.4855 7.10849C24.3385 6.70949 24.139 6.35949 23.887 6.05849C23.642 5.75049 23.3585 5.51249 23.0365 5.34449C22.7145 5.16949 22.3645 5.08199 21.9865 5.08199C21.6155 5.08199 21.2865 5.16949 20.9995 5.34449C20.7125 5.51249 20.485 5.75049 20.317 6.05849C20.156 6.35949 20.0755 6.70949 20.0755 7.10849Z",
           fill: "currentColor"
         }
       ),
-      /* @__PURE__ */ jsx104(
+      /* @__PURE__ */ jsx106(
         "path",
         {
           d: "M32.6661 8.62049V7.57049L32.7186 7.38149V6.23699L32.6661 6.02699V4.13699H34.0311V8.49449C34.0311 9.25749 33.8701 9.89449 33.5481 10.4055C33.2261 10.9235 32.7851 11.312 32.2251 11.571C31.6651 11.83 31.0211 11.9595 30.2931 11.9595C29.7611 11.9595 29.2711 11.8895 28.8231 11.7495C28.3751 11.6095 27.9411 11.396 27.5211 11.109V9.97499C27.9481 10.311 28.3891 10.5455 28.8441 10.6785C29.2991 10.8185 29.7541 10.8885 30.2091 10.8885C31.0071 10.8885 31.6161 10.6925 32.0361 10.3005C32.4561 9.90849 32.6661 9.34849 32.6661 8.62049ZM29.8101 9.61799C29.2641 9.61799 28.7741 9.50249 28.3401 9.27149C27.9061 9.03349 27.5631 8.70449 27.3111 8.28449C27.0591 7.86449 26.9331 7.37099 26.9331 6.80399C26.9331 6.23699 27.0591 5.74349 27.3111 5.32349C27.5631 4.90349 27.9061 4.57799 28.3401 4.34699C28.7741 4.10899 29.2641 3.98999 29.8101 3.98999C30.2161 3.98999 30.5906 4.05299 30.9336 4.17899C31.2836 4.30499 31.5951 4.47299 31.8681 4.68299C32.1481 4.88599 32.3826 5.11349 32.5716 5.36549C32.7676 5.61049 32.9181 5.86249 33.0231 6.12149C33.1281 6.37349 33.1806 6.60449 33.1806 6.81449C33.1806 7.08749 33.1001 7.38849 32.9391 7.71749C32.7781 8.03949 32.5471 8.34399 32.2461 8.63099C31.9521 8.91799 31.5986 9.15599 31.1856 9.34499C30.7726 9.52699 30.3141 9.61799 29.8101 9.61799ZM30.2301 8.60999C30.7271 8.60999 31.1821 8.46649 31.5951 8.17949C32.0151 7.89249 32.3896 7.43399 32.7186 6.80399C32.3896 6.15999 32.0151 5.69799 31.5951 5.41799C31.1821 5.13099 30.7271 4.98749 30.2301 4.98749C29.8241 4.98749 29.4776 5.06449 29.1906 5.21849C28.9036 5.37249 28.6831 5.58599 28.5291 5.85899C28.3821 6.13199 28.3086 6.44699 28.3086 6.80399C28.3086 7.15399 28.3821 7.46549 28.5291 7.73849C28.6831 8.01149 28.9036 8.22499 29.1906 8.37899C29.4776 8.53299 29.8241 8.60999 30.2301 8.60999Z",
           fill: "currentColor"
         }
       ),
-      /* @__PURE__ */ jsx104(
+      /* @__PURE__ */ jsx106(
         "path",
         {
           d: "M40.8487 8.62049V7.57049L40.9012 7.38149V6.23699L40.8487 6.02699V4.13699H42.2137V8.49449C42.2137 9.25749 42.0527 9.89449 41.7307 10.4055C41.4087 10.9235 40.9677 11.312 40.4077 11.571C39.8477 11.83 39.2037 11.9595 38.4757 11.9595C37.9437 11.9595 37.4537 11.8895 37.0057 11.7495C36.5577 11.6095 36.1237 11.396 35.7037 11.109V9.97499C36.1307 10.311 36.5717 10.5455 37.0267 10.6785C37.4817 10.8185 37.9367 10.8885 38.3917 10.8885C39.1897 10.8885 39.7987 10.6925 40.2187 10.3005C40.6387 9.90849 40.8487 9.34849 40.8487 8.62049ZM37.9927 9.61799C37.4467 9.61799 36.9567 9.50249 36.5227 9.27149C36.0887 9.03349 35.7457 8.70449 35.4937 8.28449C35.2417 7.86449 35.1157 7.37099 35.1157 6.80399C35.1157 6.23699 35.2417 5.74349 35.4937 5.32349C35.7457 4.90349 36.0887 4.57799 36.5227 4.34699C36.9567 4.10899 37.4467 3.98999 37.9927 3.98999C38.3987 3.98999 38.7732 4.05299 39.1162 4.17899C39.4662 4.30499 39.7777 4.47299 40.0507 4.68299C40.3307 4.88599 40.5652 5.11349 40.7542 5.36549C40.9502 5.61049 41.1007 5.86249 41.2057 6.12149C41.3107 6.37349 41.3632 6.60449 41.3632 6.81449C41.3632 7.08749 41.2827 7.38849 41.1217 7.71749C40.9607 8.03949 40.7297 8.34399 40.4287 8.63099C40.1347 8.91799 39.7812 9.15599 39.3682 9.34499C38.9552 9.52699 38.4967 9.61799 37.9927 9.61799ZM38.4127 8.60999C38.9097 8.60999 39.3647 8.46649 39.7777 8.17949C40.1977 7.89249 40.5722 7.43399 40.9012 6.80399C40.5722 6.15999 40.1977 5.69799 39.7777 5.41799C39.3647 5.13099 38.9097 4.98749 38.4127 4.98749C38.0067 4.98749 37.6602 5.06449 37.3732 5.21849C37.0862 5.37249 36.8657 5.58599 36.7117 5.85899C36.5647 6.13199 36.4912 6.44699 36.4912 6.80399C36.4912 7.15399 36.5647 7.46549 36.7117 7.73849C36.8657 8.01149 37.0862 8.22499 37.3732 8.37899C37.6602 8.53299 38.0067 8.60999 38.4127 8.60999Z",
           fill: "currentColor"
         }
       ),
-      /* @__PURE__ */ jsx104(
+      /* @__PURE__ */ jsx106(
         "path",
         {
           d: "M49.1202 10.273C48.771 10.273 48.4495 10.2214 48.1559 10.1182C47.8701 10.0071 47.6201 9.86029 47.4058 9.67775C47.1915 9.48726 47.0209 9.27297 46.8939 9.03486L46.8225 10.1301H46.0605V1.55836H46.8939V5.21328C47.0923 4.87199 47.3781 4.5823 47.7511 4.34419C48.1241 4.10609 48.5805 3.98703 49.1202 3.98703C49.7075 3.98703 50.2194 4.12593 50.656 4.40372C51.0925 4.67357 51.4258 5.0466 51.656 5.52281C51.8941 5.99109 52.0132 6.52682 52.0132 7.13002C52.0132 7.73322 51.8941 8.27293 51.656 8.74914C51.4179 9.22535 51.0806 9.59838 50.6441 9.86823C50.2155 10.1381 49.7075 10.273 49.1202 10.273ZM49.0607 9.54679C49.4813 9.54679 49.8464 9.44758 50.156 9.24916C50.4655 9.05074 50.7115 8.76898 50.8941 8.40388C51.0766 8.03879 51.1679 7.61417 51.1679 7.13002C51.1679 6.63794 51.0766 6.21332 50.8941 5.85616C50.7115 5.49107 50.4615 5.20931 50.144 5.01089C49.8345 4.81247 49.4734 4.71326 49.0607 4.71326C48.648 4.71326 48.2789 4.81247 47.9535 5.01089C47.636 5.20931 47.386 5.49107 47.2035 5.85616C47.0288 6.22125 46.9415 6.64587 46.9415 7.13002C46.9415 7.62211 47.0288 8.05069 47.2035 8.41579C47.386 8.77295 47.636 9.05074 47.9535 9.24916C48.2789 9.44758 48.648 9.54679 49.0607 9.54679Z",
           fill: "currentColor"
         }
       ),
-      /* @__PURE__ */ jsx104(
+      /* @__PURE__ */ jsx106(
         "path",
         {
           d: "M55.61 10.273C55.1576 10.273 54.7567 10.1857 54.4075 10.0111C54.0662 9.82855 53.8004 9.55472 53.6099 9.18963C53.4194 8.8166 53.3241 8.34039 53.3241 7.761V4.1299H54.1575V7.66576C54.1575 8.3007 54.2964 8.77295 54.5742 9.08248C54.8599 9.39202 55.2528 9.54679 55.7528 9.54679C56.11 9.54679 56.4274 9.46345 56.7052 9.29678C56.991 9.1301 57.2132 8.88406 57.3719 8.55865C57.5386 8.22531 57.6219 7.82053 57.6219 7.34432V4.1299H58.4553V10.1301H57.6934L57.6458 9.05867C57.4553 9.44758 57.1775 9.74918 56.8124 9.96347C56.4552 10.1698 56.0544 10.273 55.61 10.273Z",
           fill: "currentColor"
         }
       ),
-      /* @__PURE__ */ jsx104(
+      /* @__PURE__ */ jsx106(
         "path",
         {
           d: "M60.2706 10.1301V4.1299H61.092V10.1301H60.2706ZM60.6873 2.71317C60.5206 2.71317 60.3777 2.65762 60.2587 2.5465C60.1396 2.42745 60.0801 2.28062 60.0801 2.106C60.0801 1.92346 60.1357 1.78059 60.2468 1.67742C60.3658 1.5663 60.5087 1.51074 60.6754 1.51074C60.842 1.51074 60.9849 1.5663 61.104 1.67742C61.223 1.78059 61.2825 1.92346 61.2825 2.106C61.2825 2.28062 61.223 2.42745 61.104 2.5465C60.9928 2.65762 60.8539 2.71317 60.6873 2.71317Z",
           fill: "currentColor"
         }
       ),
-      /* @__PURE__ */ jsx104("path", { d: "M62.9069 10.1301V1.55836H63.7403V10.1301H62.9069Z", fill: "currentColor" }),
-      /* @__PURE__ */ jsx104(
+      /* @__PURE__ */ jsx106("path", { d: "M62.9069 10.1301V1.55836H63.7403V10.1301H62.9069Z", fill: "currentColor" }),
+      /* @__PURE__ */ jsx106(
         "path",
         {
           d: "M68.049 10.273C67.4696 10.273 66.9616 10.1381 66.5251 9.86823C66.0965 9.59044 65.7632 9.21344 65.5251 8.73723C65.287 8.26102 65.1679 7.72132 65.1679 7.11812C65.1679 6.51492 65.287 5.97918 65.5251 5.51091C65.7632 5.0347 66.1005 4.66167 66.537 4.39181C66.9736 4.12196 67.4815 3.98703 68.0609 3.98703C68.5689 3.98703 69.0133 4.09815 69.3943 4.32038C69.7832 4.53468 70.0808 4.84024 70.2872 5.23709V1.55836H71.1205V10.1301H70.3586L70.2872 9.04677C70.1602 9.25313 69.9935 9.45155 69.7872 9.64203C69.5887 9.83251 69.3427 9.98728 69.049 10.1063C68.7633 10.2175 68.43 10.273 68.049 10.273ZM68.1204 9.54679C68.5411 9.54679 68.9062 9.44758 69.2157 9.24916C69.5332 9.05074 69.7792 8.76898 69.9538 8.40388C70.1364 8.03879 70.2277 7.61417 70.2277 7.13002C70.2277 6.64587 70.1364 6.22125 69.9538 5.85616C69.7792 5.49107 69.5332 5.20931 69.2157 5.01089C68.9062 4.81247 68.5411 4.71326 68.1204 4.71326C67.7077 4.71326 67.3426 4.81247 67.0251 5.01089C66.7077 5.20931 66.4577 5.49107 66.2751 5.85616C66.1005 6.21332 66.0132 6.63794 66.0132 7.13002C66.0132 7.62211 66.1045 8.05069 66.287 8.41579C66.4696 8.77295 66.7196 9.05074 67.037 9.24916C67.3545 9.44758 67.7156 9.54679 68.1204 9.54679Z",
           fill: "currentColor"
         }
       ),
-      /* @__PURE__ */ jsxs101("defs", { children: [
-        /* @__PURE__ */ jsxs101(
+      /* @__PURE__ */ jsxs103("defs", { children: [
+        /* @__PURE__ */ jsxs103(
           "linearGradient",
           {
             id: "agg-build-logo-g0",
@@ -5140,12 +5688,12 @@ var AggBuildLogo = (props) => /* @__PURE__ */ jsxs101(
             y2: "14",
             gradientUnits: "userSpaceOnUse",
             children: [
-              /* @__PURE__ */ jsx104("stop", { stopColor: "#FE9943" }),
-              /* @__PURE__ */ jsx104("stop", { offset: "1", stopColor: "#FE763C" })
+              /* @__PURE__ */ jsx106("stop", { stopColor: "#FE9943" }),
+              /* @__PURE__ */ jsx106("stop", { offset: "1", stopColor: "#FE763C" })
             ]
           }
         ),
-        /* @__PURE__ */ jsxs101(
+        /* @__PURE__ */ jsxs103(
           "linearGradient",
           {
             id: "agg-build-logo-g1",
@@ -5155,12 +5703,12 @@ var AggBuildLogo = (props) => /* @__PURE__ */ jsxs101(
             y2: "14",
             gradientUnits: "userSpaceOnUse",
             children: [
-              /* @__PURE__ */ jsx104("stop", { stopColor: "#FE763C" }),
-              /* @__PURE__ */ jsx104("stop", { offset: "1", stopColor: "#FE9943" })
+              /* @__PURE__ */ jsx106("stop", { stopColor: "#FE763C" }),
+              /* @__PURE__ */ jsx106("stop", { offset: "1", stopColor: "#FE9943" })
             ]
           }
         ),
-        /* @__PURE__ */ jsxs101(
+        /* @__PURE__ */ jsxs103(
           "linearGradient",
           {
             id: "agg-build-logo-g2",
@@ -5170,8 +5718,8 @@ var AggBuildLogo = (props) => /* @__PURE__ */ jsxs101(
             y2: "14",
             gradientUnits: "userSpaceOnUse",
             children: [
-              /* @__PURE__ */ jsx104("stop", { stopColor: "#FEB549" }),
-              /* @__PURE__ */ jsx104("stop", { offset: "1", stopColor: "#FDA349" })
+              /* @__PURE__ */ jsx106("stop", { stopColor: "#FEB549" }),
+              /* @__PURE__ */ jsx106("stop", { offset: "1", stopColor: "#FDA349" })
             ]
           }
         )
@@ -5180,7 +5728,7 @@ var AggBuildLogo = (props) => /* @__PURE__ */ jsxs101(
   })
 );
 AggBuildLogo.displayName = "AggBuildLogo";
-var AggBuildTextLogo = (props) => /* @__PURE__ */ jsxs101(
+var AggBuildTextLogo = (props) => /* @__PURE__ */ jsxs103(
   "svg",
   __spreadProps(__spreadValues({
     xmlns: "http://www.w3.org/2000/svg",
@@ -5190,50 +5738,50 @@ var AggBuildTextLogo = (props) => /* @__PURE__ */ jsxs101(
     fill: "none"
   }, props), {
     children: [
-      /* @__PURE__ */ jsx104(
+      /* @__PURE__ */ jsx106(
         "path",
         {
           d: "M7.05537 10.5201L6.79138 8.00006L7.10337 7.12406L6.79138 6.26006L7.05537 3.72806H8.66337L8.30337 7.12406L8.66337 10.5201H7.05537ZM7.53537 7.12406C7.38337 7.83606 7.13137 8.46006 6.77937 8.99606C6.42737 9.53206 5.99137 9.94806 5.47137 10.2441C4.95937 10.5401 4.38737 10.6881 3.75537 10.6881C3.09137 10.6881 2.50337 10.5401 1.99137 10.2441C1.47938 9.94006 1.07937 9.52006 0.791375 8.98406C0.503375 8.44806 0.359375 7.82806 0.359375 7.12406C0.359375 6.41206 0.503375 5.79206 0.791375 5.26406C1.07937 4.72806 1.47938 4.31206 1.99137 4.01606C2.50337 3.71206 3.09137 3.56006 3.75537 3.56006C4.38737 3.56006 4.95937 3.70806 5.47137 4.00406C5.99137 4.30006 6.42737 4.71606 6.77937 5.25206C7.13937 5.78006 7.39137 6.40406 7.53537 7.12406ZM1.94337 7.12406C1.94337 7.58006 2.03537 7.98406 2.21937 8.33606C2.41137 8.68006 2.67137 8.95206 2.99937 9.15206C3.32737 9.34406 3.70337 9.44006 4.12737 9.44006C4.55937 9.44006 4.95937 9.34406 5.32737 9.15206C5.69537 8.95206 6.01937 8.68006 6.29938 8.33606C6.58738 7.98406 6.81537 7.58006 6.98337 7.12406C6.81537 6.66806 6.58738 6.26806 6.29938 5.92406C6.01937 5.57206 5.69537 5.30006 5.32737 5.10806C4.95937 4.90806 4.55937 4.80806 4.12737 4.80806C3.70337 4.80806 3.32737 4.90806 2.99937 5.10806C2.67137 5.30006 2.41137 5.57206 2.21937 5.92406C2.03537 6.26806 1.94337 6.66806 1.94337 7.12406Z",
           fill: "currentColor"
         }
       ),
-      /* @__PURE__ */ jsx104(
+      /* @__PURE__ */ jsx106(
         "path",
         {
           d: "M16.3327 8.85206V7.65206L16.3927 7.43606V6.12806L16.3327 5.88806V3.72806H17.8927V8.70806C17.8927 9.58006 17.7087 10.3081 17.3407 10.8921C16.9727 11.4841 16.4687 11.9281 15.8287 12.2241C15.1887 12.5201 14.4527 12.6681 13.6207 12.6681C13.0127 12.6681 12.4527 12.5881 11.9407 12.4281C11.4287 12.2681 10.9327 12.0241 10.4527 11.6961V10.4001C10.9407 10.7841 11.4447 11.0521 11.9647 11.2041C12.4847 11.3641 13.0047 11.4441 13.5247 11.4441C14.4367 11.4441 15.1327 11.2201 15.6127 10.7721C16.0927 10.3241 16.3327 9.68406 16.3327 8.85206ZM13.0687 9.99206C12.4447 9.99206 11.8847 9.86006 11.3887 9.59606C10.8927 9.32406 10.5007 8.94806 10.2127 8.46806C9.92469 7.98806 9.78069 7.42406 9.78069 6.77606C9.78069 6.12806 9.92469 5.56406 10.2127 5.08406C10.5007 4.60406 10.8927 4.23206 11.3887 3.96806C11.8847 3.69606 12.4447 3.56006 13.0687 3.56006C13.5327 3.56006 13.9607 3.63206 14.3527 3.77606C14.7527 3.92006 15.1087 4.11206 15.4207 4.35206C15.7407 4.58406 16.0087 4.84406 16.2247 5.13206C16.4487 5.41206 16.6207 5.70006 16.7407 5.99606C16.8607 6.28406 16.9207 6.54806 16.9207 6.78806C16.9207 7.10006 16.8287 7.44406 16.6447 7.82006C16.4607 8.18806 16.1967 8.53606 15.8527 8.86406C15.5167 9.19206 15.1127 9.46406 14.6407 9.68006C14.1687 9.88806 13.6447 9.99206 13.0687 9.99206ZM13.5487 8.84006C14.1167 8.84006 14.6367 8.67606 15.1087 8.34806C15.5887 8.02006 16.0167 7.49606 16.3927 6.77606C16.0167 6.04006 15.5887 5.51206 15.1087 5.19206C14.6367 4.86406 14.1167 4.70006 13.5487 4.70006C13.0847 4.70006 12.6887 4.78806 12.3607 4.96406C12.0327 5.14006 11.7807 5.38406 11.6047 5.69606C11.4367 6.00806 11.3527 6.36806 11.3527 6.77606C11.3527 7.17606 11.4367 7.53206 11.6047 7.84406C11.7807 8.15606 12.0327 8.40006 12.3607 8.57606C12.6887 8.75206 13.0847 8.84006 13.5487 8.84006Z",
           fill: "currentColor"
         }
       ),
-      /* @__PURE__ */ jsx104(
+      /* @__PURE__ */ jsx106(
         "path",
         {
           d: "M25.6842 8.85206V7.65206L25.7442 7.43606V6.12806L25.6842 5.88806V3.72806H27.2442V8.70806C27.2442 9.58006 27.0602 10.3081 26.6922 10.8921C26.3242 11.4841 25.8202 11.9281 25.1802 12.2241C24.5402 12.5201 23.8042 12.6681 22.9722 12.6681C22.3642 12.6681 21.8042 12.5881 21.2922 12.4281C20.7802 12.2681 20.2842 12.0241 19.8042 11.6961V10.4001C20.2922 10.7841 20.7962 11.0521 21.3162 11.2041C21.8362 11.3641 22.3562 11.4441 22.8762 11.4441C23.7882 11.4441 24.4842 11.2201 24.9642 10.7721C25.4442 10.3241 25.6842 9.68406 25.6842 8.85206ZM22.4202 9.99206C21.7962 9.99206 21.2362 9.86006 20.7402 9.59606C20.2442 9.32406 19.8522 8.94806 19.5642 8.46806C19.2762 7.98806 19.1322 7.42406 19.1322 6.77606C19.1322 6.12806 19.2762 5.56406 19.5642 5.08406C19.8522 4.60406 20.2442 4.23206 20.7402 3.96806C21.2362 3.69606 21.7962 3.56006 22.4202 3.56006C22.8842 3.56006 23.3122 3.63206 23.7042 3.77606C24.1042 3.92006 24.4602 4.11206 24.7722 4.35206C25.0922 4.58406 25.3602 4.84406 25.5762 5.13206C25.8002 5.41206 25.9722 5.70006 26.0922 5.99606C26.2122 6.28406 26.2722 6.54806 26.2722 6.78806C26.2722 7.10006 26.1802 7.44406 25.9962 7.82006C25.8122 8.18806 25.5482 8.53606 25.2042 8.86406C24.8682 9.19206 24.4642 9.46406 23.9922 9.68006C23.5202 9.88806 22.9962 9.99206 22.4202 9.99206ZM22.9002 8.84006C23.4682 8.84006 23.9882 8.67606 24.4602 8.34806C24.9402 8.02006 25.3682 7.49606 25.7442 6.77606C25.3682 6.04006 24.9402 5.51206 24.4602 5.19206C23.9882 4.86406 23.4682 4.70006 22.9002 4.70006C22.4362 4.70006 22.0402 4.78806 21.7122 4.96406C21.3842 5.14006 21.1322 5.38406 20.9562 5.69606C20.7882 6.00806 20.7042 6.36806 20.7042 6.77606C20.7042 7.17606 20.7882 7.53206 20.9562 7.84406C21.1322 8.15606 21.3842 8.40006 21.7122 8.57606C22.0402 8.75206 22.4362 8.84006 22.9002 8.84006Z",
           fill: "currentColor"
         }
       ),
-      /* @__PURE__ */ jsx104(
+      /* @__PURE__ */ jsx106(
         "path",
         {
           d: "M35.1374 10.7411C34.7383 10.7411 34.3709 10.6821 34.0353 10.5642C33.7087 10.4372 33.423 10.2694 33.1781 10.0608C32.9332 9.84307 32.7382 9.59816 32.593 9.32604L32.5114 10.5778H31.6406V0.781475H32.593V4.95852C32.8198 4.56848 33.1464 4.2374 33.5727 3.96528C33.999 3.69316 34.5206 3.5571 35.1374 3.5571C35.8086 3.5571 36.3937 3.71584 36.8925 4.03331C37.3914 4.34171 37.7724 4.76803 38.0354 5.31227C38.3076 5.84744 38.4436 6.45971 38.4436 7.14908C38.4436 7.83845 38.3076 8.45526 38.0354 8.9995C37.7633 9.54374 37.3778 9.97006 36.8789 10.2785C36.3891 10.5869 35.8086 10.7411 35.1374 10.7411ZM35.0693 9.9111C35.5501 9.9111 35.9673 9.79772 36.3211 9.57095C36.6748 9.34419 36.956 9.02218 37.1647 8.60493C37.3733 8.18768 37.4776 7.70239 37.4776 7.14908C37.4776 6.5867 37.3733 6.10142 37.1647 5.69324C36.956 5.27599 36.6703 4.95398 36.3075 4.72722C35.9537 4.50045 35.541 4.38707 35.0693 4.38707C34.5977 4.38707 34.1759 4.50045 33.804 4.72722C33.4412 4.95398 33.1554 5.27599 32.9468 5.69324C32.7472 6.11049 32.6475 6.59577 32.6475 7.14908C32.6475 7.71147 32.7472 8.20128 32.9468 8.61853C33.1554 9.02671 33.4412 9.34419 33.804 9.57095C34.1759 9.79772 34.5977 9.9111 35.0693 9.9111Z",
           fill: "currentColor"
         }
       ),
-      /* @__PURE__ */ jsx104(
+      /* @__PURE__ */ jsx106(
         "path",
         {
           d: "M42.5542 10.7411C42.0372 10.7411 41.5791 10.6413 41.18 10.4417C40.79 10.2331 40.4861 9.92017 40.2684 9.50292C40.0507 9.0766 39.9419 8.53236 39.9419 7.8702V3.72037H40.8943V7.76135C40.8943 8.48701 41.053 9.02671 41.3705 9.38047C41.6971 9.73422 42.1461 9.9111 42.7175 9.9111C43.1257 9.9111 43.4885 9.81586 43.806 9.62538C44.1325 9.43489 44.3865 9.1537 44.5679 8.78181C44.7584 8.40084 44.8536 7.93823 44.8536 7.39399V3.72037H45.8061V10.5778H44.9353L44.8809 9.35326C44.6632 9.79772 44.3457 10.1424 43.9284 10.3873C43.5203 10.6231 43.0622 10.7411 42.5542 10.7411Z",
           fill: "currentColor"
         }
       ),
-      /* @__PURE__ */ jsx104(
+      /* @__PURE__ */ jsx106(
         "path",
         {
           d: "M47.8807 10.5778V3.72037H48.8195V10.5778H47.8807ZM48.3569 2.10126C48.1664 2.10126 48.0031 2.03776 47.8671 1.91077C47.731 1.77471 47.663 1.60691 47.663 1.40735C47.663 1.19873 47.7265 1.03545 47.8535 0.917535C47.9895 0.790545 48.1528 0.727051 48.3433 0.727051C48.5338 0.727051 48.697 0.790545 48.8331 0.917535C48.9691 1.03545 49.0372 1.19873 49.0372 1.40735C49.0372 1.60691 48.9691 1.77471 48.8331 1.91077C48.7061 2.03776 48.5474 2.10126 48.3569 2.10126Z",
           fill: "currentColor"
         }
       ),
-      /* @__PURE__ */ jsx104("path", { d: "M50.8937 10.5778V0.781475H51.8461V10.5778H50.8937Z", fill: "currentColor" }),
-      /* @__PURE__ */ jsx104(
+      /* @__PURE__ */ jsx106("path", { d: "M50.8937 10.5778V0.781475H51.8461V10.5778H50.8937Z", fill: "currentColor" }),
+      /* @__PURE__ */ jsx106(
         "path",
         {
           d: "M56.7703 10.7411C56.1081 10.7411 55.5276 10.5869 55.0287 10.2785C54.5389 9.96099 54.1579 9.53013 53.8858 8.98589C53.6137 8.44165 53.4776 7.82485 53.4776 7.13548C53.4776 6.44611 53.6137 5.83384 53.8858 5.29867C54.1579 4.75443 54.5434 4.32811 55.0423 4.0197C55.5412 3.7113 56.1217 3.5571 56.7839 3.5571C57.3644 3.5571 57.8724 3.68409 58.3078 3.93807C58.7522 4.18298 59.0924 4.5322 59.3282 4.98573V0.781475H60.2806V10.5778H59.4098L59.3282 9.33965C59.1831 9.57549 58.9926 9.80225 58.7568 10.02C58.53 10.2376 58.2488 10.4145 57.9132 10.5506C57.5866 10.6776 57.2057 10.7411 56.7703 10.7411ZM56.8519 9.9111C57.3327 9.9111 57.7499 9.79772 58.1037 9.57095C58.4665 9.34419 58.7477 9.02218 58.9472 8.60493C59.1559 8.18768 59.2602 7.70239 59.2602 7.14908C59.2602 6.59577 59.1559 6.11049 58.9472 5.69324C58.7477 5.27599 58.4665 4.95398 58.1037 4.72722C57.7499 4.50045 57.3327 4.38707 56.8519 4.38707C56.3802 4.38707 55.963 4.50045 55.6002 4.72722C55.2373 4.95398 54.9516 5.27599 54.743 5.69324C54.5434 6.10142 54.4436 6.5867 54.4436 7.14908C54.4436 7.71147 54.548 8.20128 54.7566 8.61853C54.9652 9.02671 55.2509 9.34419 55.6138 9.57095C55.9766 9.79772 56.3893 9.9111 56.8519 9.9111Z",
@@ -5265,8 +5813,8 @@ var DEFAULT_FOOTER_LINKS = [
 ];
 
 // src/primitives/footer/index.tsx
-import { Fragment as Fragment3, jsx as jsx105, jsxs as jsxs102 } from "react/jsx-runtime";
-var XIcon = (props) => /* @__PURE__ */ jsx105(
+import { Fragment as Fragment3, jsx as jsx107, jsxs as jsxs104 } from "react/jsx-runtime";
+var XIcon = (props) => /* @__PURE__ */ jsx107(
   "svg",
   __spreadProps(__spreadValues({
     xmlns: "http://www.w3.org/2000/svg",
@@ -5276,7 +5824,7 @@ var XIcon = (props) => /* @__PURE__ */ jsx105(
     fill: "none",
     "aria-hidden": "true"
   }, props), {
-    children: /* @__PURE__ */ jsx105(
+    children: /* @__PURE__ */ jsx107(
       "path",
       {
         d: "M12.2167 1.33325H14.4669L9.5523 6.94875L15.3334 14.5913H10.8081L7.26125 9.95725L3.20714 14.5913H0.953359L6.20891 8.58347L0.666748 1.33325H5.30691L8.50975 5.56886L12.2167 1.33325ZM11.4266 13.2463H12.6726L4.62797 2.60803H3.28964L11.4266 13.2463Z",
@@ -5286,8 +5834,8 @@ var XIcon = (props) => /* @__PURE__ */ jsx105(
   })
 );
 var renderLink = (link, linkClass) => {
-  const inner = /* @__PURE__ */ jsxs102(Fragment3, { children: [
-    /* @__PURE__ */ jsx105(
+  const inner = /* @__PURE__ */ jsxs104(Fragment3, { children: [
+    /* @__PURE__ */ jsx107(
       "span",
       {
         className: "hidden md:inline",
@@ -5295,11 +5843,11 @@ var renderLink = (link, linkClass) => {
         children: link.label
       }
     ),
-    link.mobileLabel !== void 0 && link.mobileLabel !== link.label ? /* @__PURE__ */ jsx105("span", { className: "md:hidden", children: link.mobileLabel }) : /* @__PURE__ */ jsx105("span", { className: "md:hidden", "aria-hidden": "true", children: link.label }),
-    link.mobileLabel !== void 0 && link.mobileLabel !== link.label && /* @__PURE__ */ jsx105("span", { className: "sr-only", children: link.label })
+    link.mobileLabel !== void 0 && link.mobileLabel !== link.label ? /* @__PURE__ */ jsx107("span", { className: "md:hidden", children: link.mobileLabel }) : /* @__PURE__ */ jsx107("span", { className: "md:hidden", "aria-hidden": "true", children: link.label }),
+    link.mobileLabel !== void 0 && link.mobileLabel !== link.label && /* @__PURE__ */ jsx107("span", { className: "sr-only", children: link.label })
   ] });
   if (link.href) {
-    return /* @__PURE__ */ jsx105(
+    return /* @__PURE__ */ jsx107(
       "a",
       {
         href: link.href,
@@ -5312,7 +5860,7 @@ var renderLink = (link, linkClass) => {
     );
   }
   if (link.onClick) {
-    return /* @__PURE__ */ jsx105(
+    return /* @__PURE__ */ jsx107(
       "button",
       {
         type: "button",
@@ -5322,7 +5870,7 @@ var renderLink = (link, linkClass) => {
       }
     );
   }
-  return /* @__PURE__ */ jsx105("span", { className: linkClass, children: inner });
+  return /* @__PURE__ */ jsx107("span", { className: linkClass, children: inner });
 };
 var Footer = ({
   links = DEFAULT_FOOTER_LINKS,
@@ -5338,13 +5886,13 @@ var Footer = ({
     "text-xs text-agg-muted-foreground whitespace-nowrap transition-colors hover:text-agg-foreground md:text-sm",
     classNames == null ? void 0 : classNames.link
   );
-  return /* @__PURE__ */ jsx105(
+  return /* @__PURE__ */ jsx107(
     "footer",
     {
       role: "contentinfo",
       "aria-label": ariaLabel,
       className: cn(baseFooterClasses, classNames == null ? void 0 : classNames.root),
-      children: /* @__PURE__ */ jsxs102(
+      children: /* @__PURE__ */ jsxs104(
         "div",
         {
           className: cn(
@@ -5352,7 +5900,7 @@ var Footer = ({
             classNames == null ? void 0 : classNames.inner
           ),
           children: [
-            /* @__PURE__ */ jsxs102(
+            /* @__PURE__ */ jsxs104(
               "a",
               {
                 href: AGG_DEFAULT_URL,
@@ -5363,16 +5911,16 @@ var Footer = ({
                   classNames == null ? void 0 : classNames.leftSection
                 ),
                 children: [
-                  /* @__PURE__ */ jsxs102("div", { className: "hidden items-center gap-1 md:flex", children: [
-                    /* @__PURE__ */ jsx105(AggBuildIcon, { className: "size-4 shrink-0" }),
-                    /* @__PURE__ */ jsx105("span", { className: "whitespace-nowrap text-sm text-agg-muted-foreground transition-colors group-hover/brand:text-agg-foreground", children: "Built with" }),
-                    /* @__PURE__ */ jsx105(AggBuildTextLogo, { "aria-label": "agg build", className: "shrink-0 text-agg-foreground" })
+                  /* @__PURE__ */ jsxs104("div", { className: "hidden items-center gap-1 md:flex", children: [
+                    /* @__PURE__ */ jsx107(AggBuildIcon, { className: "size-4 shrink-0" }),
+                    /* @__PURE__ */ jsx107("span", { className: "whitespace-nowrap text-sm text-agg-muted-foreground transition-colors group-hover/brand:text-agg-foreground", children: "Built with" }),
+                    /* @__PURE__ */ jsx107(AggBuildTextLogo, { "aria-label": "agg build", className: "shrink-0 text-agg-foreground" })
                   ] }),
-                  /* @__PURE__ */ jsx105("div", { className: "md:hidden", children: /* @__PURE__ */ jsx105(AggBuildLogo, { "aria-label": "agg build", className: "h-3.5 w-auto text-agg-foreground" }) })
+                  /* @__PURE__ */ jsx107("div", { className: "md:hidden", children: /* @__PURE__ */ jsx107(AggBuildLogo, { "aria-label": "agg build", className: "h-3.5 w-auto text-agg-foreground" }) })
                 ]
               }
             ),
-            /* @__PURE__ */ jsxs102(
+            /* @__PURE__ */ jsxs104(
               "div",
               {
                 className: cn(
@@ -5380,8 +5928,8 @@ var Footer = ({
                   classNames == null ? void 0 : classNames.rightSection
                 ),
                 children: [
-                  /* @__PURE__ */ jsx105("div", { className: "flex items-center gap-2", children: links.map((link, i) => /* @__PURE__ */ jsxs102(Fragment2, { children: [
-                    i > 0 && /* @__PURE__ */ jsx105(
+                  /* @__PURE__ */ jsx107("div", { className: "flex items-center gap-2", children: links.map((link, i) => /* @__PURE__ */ jsxs104(Fragment2, { children: [
+                    i > 0 && /* @__PURE__ */ jsx107(
                       "span",
                       {
                         "aria-hidden": "true",
@@ -5394,15 +5942,15 @@ var Footer = ({
                     ),
                     renderLink(link, linkClass)
                   ] }, link.label)) }),
-                  email && /* @__PURE__ */ jsxs102(Fragment3, { children: [
-                    /* @__PURE__ */ jsx105(
+                  email && /* @__PURE__ */ jsxs104(Fragment3, { children: [
+                    /* @__PURE__ */ jsx107(
                       "div",
                       {
                         "aria-hidden": "true",
                         className: "hidden h-3 w-px shrink-0 bg-agg-separator md:block"
                       }
                     ),
-                    emailHref ? /* @__PURE__ */ jsx105(
+                    emailHref ? /* @__PURE__ */ jsx107(
                       "a",
                       {
                         href: emailHref,
@@ -5414,7 +5962,7 @@ var Footer = ({
                         ),
                         children: email
                       }
-                    ) : /* @__PURE__ */ jsx105(
+                    ) : /* @__PURE__ */ jsx107(
                       "span",
                       {
                         className: cn(
@@ -5425,15 +5973,15 @@ var Footer = ({
                       }
                     )
                   ] }),
-                  hasX && /* @__PURE__ */ jsxs102(Fragment3, { children: [
-                    /* @__PURE__ */ jsx105(
+                  hasX && /* @__PURE__ */ jsxs104(Fragment3, { children: [
+                    /* @__PURE__ */ jsx107(
                       "div",
                       {
                         "aria-hidden": "true",
                         className: "hidden h-3 w-px shrink-0 bg-agg-separator md:block"
                       }
                     ),
-                    xHref ? /* @__PURE__ */ jsx105(
+                    xHref ? /* @__PURE__ */ jsx107(
                       "a",
                       {
                         href: xHref,
@@ -5444,9 +5992,9 @@ var Footer = ({
                           "hidden items-center text-agg-muted-foreground transition-colors hover:text-agg-foreground md:flex",
                           classNames == null ? void 0 : classNames.xLink
                         ),
-                        children: /* @__PURE__ */ jsx105(XIcon, { className: "size-4" })
+                        children: /* @__PURE__ */ jsx107(XIcon, { className: "size-4" })
                       }
-                    ) : /* @__PURE__ */ jsx105(
+                    ) : /* @__PURE__ */ jsx107(
                       "button",
                       {
                         type: "button",
@@ -5456,7 +6004,7 @@ var Footer = ({
                           "hidden cursor-pointer items-center border-0 bg-transparent p-0 text-agg-muted-foreground transition-colors hover:text-agg-foreground md:flex",
                           classNames == null ? void 0 : classNames.xLink
                         ),
-                        children: /* @__PURE__ */ jsx105(XIcon, { className: "size-4" })
+                        children: /* @__PURE__ */ jsx107(XIcon, { className: "size-4" })
                       }
                     )
                   ] })
@@ -5472,23 +6020,23 @@ var Footer = ({
 Footer.displayName = "Footer";
 
 // src/primitives/header/index.tsx
-import { useLabels as useLabels11 } from "@agg-build/hooks";
+import { useLabels as useLabels12 } from "@agg-build/hooks";
 
 // src/primitives/search/index.tsx
 import {
-  useLabels as useLabels10,
+  useLabels as useLabels11,
   useLiveOutcomePrices,
   useMidpoints,
-  useSdkUiConfig as useSdkUiConfig10,
+  useSdkUiConfig as useSdkUiConfig11,
   useSearch,
   MarketStatus as MarketStatus2
 } from "@agg-build/hooks";
 import {
   useCallback as useCallback3,
-  useEffect as useEffect6,
-  useMemo as useMemo5,
-  useRef as useRef6,
-  useState as useState7
+  useEffect as useEffect8,
+  useMemo as useMemo6,
+  useRef as useRef8,
+  useState as useState8
 } from "react";
 
 // src/events/list/event-list.utils.ts
@@ -5620,17 +6168,17 @@ var resolveTabVenus = (tab, visibleVenues) => {
 };
 
 // src/primitives/remote-image/index.tsx
-import { useSdkUiConfig as useSdkUiConfig9 } from "@agg-build/hooks";
-import { useRef as useRef5, useState as useState6 } from "react";
+import { useSdkUiConfig as useSdkUiConfig10 } from "@agg-build/hooks";
+import { useRef as useRef7, useState as useState7 } from "react";
 
 // src/primitives/skeleton/skeleton-block.tsx
-import { useSdkUiConfig as useSdkUiConfig8 } from "@agg-build/hooks";
-import { jsx as jsx106 } from "react/jsx-runtime";
+import { useSdkUiConfig as useSdkUiConfig9 } from "@agg-build/hooks";
+import { jsx as jsx108 } from "react/jsx-runtime";
 var SkeletonBlock = ({ className }) => {
   const {
     features: { enableAnimations }
-  } = useSdkUiConfig8();
-  return /* @__PURE__ */ jsx106(
+  } = useSdkUiConfig9();
+  return /* @__PURE__ */ jsx108(
     "div",
     {
       "aria-hidden": true,
@@ -5659,9 +6207,10 @@ var resolveRemoteImageStatusFromSrc = (src) => {
 };
 
 // src/primitives/remote-image/index.tsx
-import { jsx as jsx107, jsxs as jsxs103 } from "react/jsx-runtime";
+import { jsx as jsx109, jsxs as jsxs105 } from "react/jsx-runtime";
 var RemoteImage = ({
   src,
+  retinaSrc,
   alt,
   title: title2,
   className,
@@ -5673,27 +6222,36 @@ var RemoteImage = ({
 }) => {
   const {
     general: { theme }
-  } = useSdkUiConfig9();
+  } = useSdkUiConfig10();
   const isDarkTheme = theme === "dark";
-  const [status, setStatus] = useState6(
+  const [status, setStatus] = useState7(
     () => resolveRemoteImageStatusFromSrc(src)
   );
-  const prevSrcRef = useRef5(src);
-  if (src !== prevSrcRef.current) {
+  const [isRetinaFailed, setIsRetinaFailed] = useState7(false);
+  const prevSrcRef = useRef7(src);
+  const prevRetinaSrcRef = useRef7(retinaSrc);
+  if (src !== prevSrcRef.current || retinaSrc !== prevRetinaSrcRef.current) {
     prevSrcRef.current = src;
+    prevRetinaSrcRef.current = retinaSrc;
     const next = resolveRemoteImageStatusFromSrc(src);
     if (status !== next) {
       setStatus(next);
     }
+    if (isRetinaFailed) setIsRetinaFailed(false);
   }
+  const shouldOfferRetina = Boolean(retinaSrc) && !isRetinaFailed;
   const handleLoad = () => {
     setStatus("loaded");
   };
   const handleError = () => {
+    if (shouldOfferRetina) {
+      setIsRetinaFailed(true);
+      return;
+    }
     setStatus("error");
   };
   const sizeStyle = width !== void 0 || height !== void 0 ? { width: width != null ? width : void 0, height: height != null ? height : void 0 } : void 0;
-  return /* @__PURE__ */ jsxs103(
+  return /* @__PURE__ */ jsxs105(
     "div",
     {
       className: cn(containerClasses, classNames == null ? void 0 : classNames.root, className),
@@ -5710,14 +6268,14 @@ var RemoteImage = ({
       "aria-label": ariaLabel,
       title: title2,
       children: [
-        status === "loading" && /* @__PURE__ */ jsx107(SkeletonBlock, { className: cn(skeletonClasses, classNames == null ? void 0 : classNames.placeholder) }),
-        status === "error" && /* @__PURE__ */ jsx107(
+        status === "loading" && /* @__PURE__ */ jsx109(SkeletonBlock, { className: cn(skeletonClasses, classNames == null ? void 0 : classNames.placeholder) }),
+        status === "error" && /* @__PURE__ */ jsx109(
           "div",
           {
             className: cn(placeholderClasses, classNames == null ? void 0 : classNames.placeholder),
             "aria-hidden": true,
             "aria-errormessage": "Image failed to load",
-            children: /* @__PURE__ */ jsx107(
+            children: /* @__PURE__ */ jsx109(
               Icon,
               {
                 name: "image",
@@ -5728,17 +6286,19 @@ var RemoteImage = ({
             )
           }
         ),
-        isValidRemoteImageSrc(src) && status !== "error" && /* @__PURE__ */ jsx107(
+        isValidRemoteImageSrc(src) && status !== "error" && /* @__PURE__ */ jsx109(
           "img",
           {
             src,
+            srcSet: shouldOfferRetina ? `${src} 1x, ${retinaSrc} 2x` : void 0,
             alt,
             width,
             height,
             onLoad: handleLoad,
             onError: handleError,
             className: cn(imageClasses, status === "loading" && "hidden", classNames == null ? void 0 : classNames.image)
-          }
+          },
+          shouldOfferRetina ? "retina" : "standard"
         )
       ]
     }
@@ -5747,23 +6307,29 @@ var RemoteImage = ({
 RemoteImage.displayName = "RemoteImage";
 
 // src/primitives/skeleton/views/event-list-skeleton-view.tsx
+import { useLabels as useLabels5 } from "@agg-build/hooks";
+
+// src/primitives/skeleton/views/event-list-item-skeleton-view.tsx
 import { useLabels as useLabels4 } from "@agg-build/hooks";
 
+// src/events/item/event-list-item.constants.ts
+var baseCardClassName = "gap-3 overflow-hidden p-4 w-full";
+
 // src/primitives/skeleton/views/event-list-item-skeleton-view.tsx
-import { useLabels as useLabels3 } from "@agg-build/hooks";
-import { jsx as jsx108, jsxs as jsxs104 } from "react/jsx-runtime";
+import { jsx as jsx110, jsxs as jsxs106 } from "react/jsx-runtime";
 var EventListItemSkeletonView = ({
   className,
   ariaLabel,
   isStandalone = false
 }) => {
-  const labels = useLabels3();
-  const outcomeTitleWidths = ["max-w-40", "max-w-[200px]"];
-  return /* @__PURE__ */ jsxs104(
+  const labels = useLabels4();
+  const outcomeTitleWidths = ["max-w-[200px]", "max-w-40"];
+  return /* @__PURE__ */ jsxs106(
     Card,
     {
       className: cn(
-        "agg-event-card-skeleton group/agg-skeleton min-w-60 md:min-w-90 gap-4 overflow-hidden p-4 w-full",
+        "agg-event-card-skeleton group/agg-skeleton min-w-60 md:min-w-90",
+        baseCardClassName,
         className
       ),
       role: isStandalone ? "status" : void 0,
@@ -5771,42 +6337,45 @@ var EventListItemSkeletonView = ({
       "aria-busy": isStandalone || void 0,
       "aria-hidden": isStandalone ? void 0 : true,
       children: [
-        /* @__PURE__ */ jsxs104("div", { className: "agg-event-skeleton-header flex h-12 w-full items-center gap-3", children: [
-          /* @__PURE__ */ jsx108(SkeletonBlock, { className: "agg-event-skeleton-image size-10! rounded-agg-lg" }),
-          /* @__PURE__ */ jsx108(SkeletonBlock, { className: "agg-event-skeleton-title h-6 w-[240px] max-w-[calc(100%-52px)] rounded-agg-sm" })
+        /* @__PURE__ */ jsxs106("div", { className: "agg-event-skeleton-header flex h-12 w-full items-center gap-4", children: [
+          /* @__PURE__ */ jsx110(SkeletonBlock, { className: "agg-event-skeleton-image size-10! shrink-0 rounded-agg-lg" }),
+          /* @__PURE__ */ jsx110(SkeletonBlock, { className: "agg-event-skeleton-title h-6 w-[240px] max-w-[calc(100%-56px)] rounded-agg-sm" })
         ] }),
-        /* @__PURE__ */ jsx108("div", { className: "agg-event-skeleton-outcomes flex w-full flex-col gap-4", children: outcomeTitleWidths.map((outcomeTitleWidth, index) => /* @__PURE__ */ jsxs104(
+        /* @__PURE__ */ jsx110("div", { className: "agg-event-skeleton-outcomes flex max-h-[76px] w-full flex-col gap-4 overflow-hidden", children: outcomeTitleWidths.map((outcomeTitleWidth, index) => /* @__PURE__ */ jsxs106(
           "div",
           {
-            className: "agg-event-skeleton-outcome-row flex w-full items-center justify-between gap-3",
+            className: "agg-event-skeleton-outcome-row flex h-[30px] w-full items-center justify-between gap-3",
             children: [
-              /* @__PURE__ */ jsx108(
+              /* @__PURE__ */ jsx110(
                 SkeletonBlock,
                 {
                   className: cn(
-                    "agg-event-skeleton-outcome-title h-5 w-full rounded-agg-sm",
+                    "agg-event-skeleton-outcome-title h-5 w-full rounded-agg-sm md:h-6",
                     outcomeTitleWidth
                   )
                 }
               ),
-              /* @__PURE__ */ jsxs104("div", { className: "agg-event-skeleton-price-strip flex shrink-0 items-center gap-2", children: [
-                /* @__PURE__ */ jsx108(SkeletonBlock, { className: "agg-event-skeleton-outcome-pill h-[30px] w-[68px] rounded-agg-full" }),
-                /* @__PURE__ */ jsx108(SkeletonBlock, { className: "agg-event-skeleton-outcome-pill h-[30px] w-[68px] rounded-agg-full" })
+              /* @__PURE__ */ jsxs106("div", { className: "agg-event-skeleton-price-strip flex shrink-0 items-center", children: [
+                /* @__PURE__ */ jsx110(SkeletonBlock, { className: "agg-event-skeleton-outcome-chip size-[30px] rounded-agg-full" }),
+                /* @__PURE__ */ jsx110(SkeletonBlock, { className: "agg-event-skeleton-outcome-chip -ml-3 size-[30px] rounded-agg-full" }),
+                /* @__PURE__ */ jsx110(SkeletonBlock, { className: "agg-event-skeleton-outcome-pill ml-2 h-[30px] w-[68px] rounded-agg-full" })
               ] })
             ]
           },
           index
         )) }),
-        /* @__PURE__ */ jsxs104("div", { className: "agg-event-skeleton-footer flex w-full items-center justify-between gap-5 text-agg-muted-foreground", children: [
-          /* @__PURE__ */ jsxs104("div", { className: "agg-event-skeleton-meta flex min-w-0 flex-1 items-center gap-2", children: [
-            /* @__PURE__ */ jsx108(SkeletonBlock, { className: "agg-event-skeleton-matched-badge h-5 w-[68px] rounded-agg-full" }),
-            /* @__PURE__ */ jsxs104("div", { className: "agg-event-skeleton-venues flex h-[14px] items-center gap-1 overflow-hidden", children: [
-              /* @__PURE__ */ jsx108(SkeletonBlock, { className: "agg-event-skeleton-venue-logo size-[14px] rounded-agg-sm" }),
-              /* @__PURE__ */ jsx108(SkeletonBlock, { className: "agg-event-skeleton-venue-logo size-[14px] rounded-agg-sm" }),
-              /* @__PURE__ */ jsx108(SkeletonBlock, { className: "agg-event-skeleton-venue-logo size-[14px] rounded-agg-sm" })
+        /* @__PURE__ */ jsxs106("div", { className: "agg-event-skeleton-footer flex w-full items-center justify-between gap-5", children: [
+          /* @__PURE__ */ jsxs106("div", { className: "agg-event-skeleton-meta flex min-w-0 flex-1 items-center gap-2 overflow-hidden", children: [
+            /* @__PURE__ */ jsx110(SkeletonBlock, { className: "agg-event-skeleton-remaining h-5 w-[72px] shrink-0 rounded-agg-sm" }),
+            /* @__PURE__ */ jsx110(SkeletonBlock, { className: "agg-event-skeleton-matched-badge h-5 w-[72px] shrink-0 rounded-agg-full" }),
+            /* @__PURE__ */ jsxs106("div", { className: "agg-event-skeleton-venues flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx110(SkeletonBlock, { className: "agg-event-skeleton-venue-logo size-3.5 rounded-agg-sm" }),
+              /* @__PURE__ */ jsx110(SkeletonBlock, { className: "agg-event-skeleton-venue-logo size-3.5 rounded-agg-sm" }),
+              /* @__PURE__ */ jsx110(SkeletonBlock, { className: "agg-event-skeleton-venue-logo size-3.5 rounded-agg-sm" }),
+              /* @__PURE__ */ jsx110(SkeletonBlock, { className: "agg-event-skeleton-venue-logo size-3.5 rounded-agg-sm" })
             ] })
           ] }),
-          /* @__PURE__ */ jsx108(SkeletonBlock, { className: "agg-event-skeleton-volume h-5 w-[60px] rounded-agg-sm" })
+          /* @__PURE__ */ jsx110(SkeletonBlock, { className: "agg-event-skeleton-volume h-5 w-[64px] shrink-0 rounded-agg-sm" })
         ] })
       ]
     }
@@ -5815,38 +6384,47 @@ var EventListItemSkeletonView = ({
 EventListItemSkeletonView.displayName = "EventListItemSkeletonView";
 
 // src/primitives/skeleton/views/event-list-skeleton-view.tsx
-import { jsx as jsx109, jsxs as jsxs105 } from "react/jsx-runtime";
+import { jsx as jsx111, jsxs as jsxs107 } from "react/jsx-runtime";
 var DEFAULT_SKELETON_EVENTS_LIMIT = 20;
-var SIDEBAR_SKELETON_ROWS = 8;
+var sidebarRowLabelWidths = ["w-20", "w-16", "w-24", "w-14", "w-20", "w-16", "w-12"];
 var EventListSkeletonView = ({
   className,
   ariaLabel,
   withSidebar
 }) => {
-  const labels = useLabels4();
-  return /* @__PURE__ */ jsxs105(
+  const labels = useLabels5();
+  return /* @__PURE__ */ jsxs107(
     "section",
     {
-      className: cn("group/agg-skeleton", "flex w-full flex-col gap-5", className),
+      className: cn("group/agg-skeleton", "flex w-full flex-col gap-2 md:gap-5", className),
       role: "status",
       "aria-label": ariaLabel != null ? ariaLabel : labels.eventList.loading("events"),
       "aria-busy": true,
       children: [
-        /* @__PURE__ */ jsxs105("header", { className: "flex w-full flex-col items-start justify-between gap-3 md:flex-row md:flex-nowrap md:items-center md:gap-5", children: [
-          /* @__PURE__ */ jsx109(SkeletonBlock, { className: "h-7 w-[120px] rounded-agg-md" }),
-          /* @__PURE__ */ jsx109(SkeletonBlock, { className: "h-8 w-full rounded-agg-md md:w-[400px]" })
+        /* @__PURE__ */ jsxs107("header", { className: "flex w-full flex-col items-start justify-between gap-2 sm:flex-row sm:items-center sm:gap-4", children: [
+          /* @__PURE__ */ jsx111("div", { className: "flex h-7 min-w-32 items-center", children: /* @__PURE__ */ jsx111(SkeletonBlock, { className: "h-6 w-[104px] rounded-agg-sm" }) }),
+          /* @__PURE__ */ jsxs107("div", { className: "hidden min-w-0 max-w-full flex-1 items-center justify-end gap-3 md:flex", children: [
+            /* @__PURE__ */ jsx111(SkeletonBlock, { className: "h-10 w-full max-w-[600px] min-w-0 rounded-agg-lg" }),
+            /* @__PURE__ */ jsx111(SkeletonBlock, { className: "h-10 w-[200px] shrink-0 rounded-agg-lg" })
+          ] })
         ] }),
-        /* @__PURE__ */ jsxs105("div", { className: cn("flex w-full gap-6", withSidebar ? "md:items-start" : ""), children: [
-          withSidebar ? /* @__PURE__ */ jsx109("aside", { className: "agg-event-list-skeleton-sidebar hidden w-[200px] shrink-0 md:block", children: /* @__PURE__ */ jsxs105("div", { className: "flex w-full flex-col gap-1 rounded-[8px] border border-agg-separator bg-agg-secondary p-2", children: [
-            /* @__PURE__ */ jsx109(SkeletonBlock, { className: "h-11 w-full rounded-[6px]" }),
-            /* @__PURE__ */ jsx109(SkeletonBlock, { className: "h-11 w-full rounded-[6px]" }),
-            /* @__PURE__ */ jsxs105("div", { className: "flex w-full flex-col gap-1 pl-4", children: [
-              /* @__PURE__ */ jsx109(SkeletonBlock, { className: "h-11 w-full rounded-[6px]" }),
-              /* @__PURE__ */ jsx109(SkeletonBlock, { className: "h-11 w-full rounded-[6px]" })
+        /* @__PURE__ */ jsxs107("div", { className: "mb-3 flex w-full gap-2 md:hidden", children: [
+          /* @__PURE__ */ jsx111(SkeletonBlock, { className: "h-10 min-w-0 flex-1 rounded-[8px]" }),
+          /* @__PURE__ */ jsx111(SkeletonBlock, { className: "h-10 min-w-0 flex-1 rounded-[8px]" }),
+          withSidebar ? /* @__PURE__ */ jsx111(SkeletonBlock, { className: "size-10 shrink-0 rounded-[8px]" }) : null
+        ] }),
+        /* @__PURE__ */ jsxs107("div", { className: cn("flex w-full gap-6", withSidebar ? "md:items-start" : ""), children: [
+          withSidebar ? /* @__PURE__ */ jsx111("aside", { className: "agg-event-list-skeleton-sidebar hidden w-[200px] shrink-0 md:block", children: /* @__PURE__ */ jsxs107("div", { className: "flex w-full flex-col gap-1 rounded-[8px] border border-agg-separator bg-agg-secondary p-2", children: [
+            /* @__PURE__ */ jsxs107("div", { className: "flex min-h-11 w-full items-center gap-3 rounded-[6px] bg-agg-primary/10 px-3 py-3", children: [
+              /* @__PURE__ */ jsx111(SkeletonBlock, { className: "h-4 w-8 rounded-agg-sm" }),
+              /* @__PURE__ */ jsx111(SkeletonBlock, { className: "ml-auto h-4 w-10 rounded-agg-sm" })
             ] }),
-            Array.from({ length: SIDEBAR_SKELETON_ROWS - 4 }).map((_, index) => /* @__PURE__ */ jsx109(SkeletonBlock, { className: "h-11 w-full rounded-[6px]" }, index))
+            sidebarRowLabelWidths.map((labelWidth, index) => /* @__PURE__ */ jsxs107("div", { className: "flex min-h-11 w-full items-center gap-3 px-3 py-3", children: [
+              /* @__PURE__ */ jsx111(SkeletonBlock, { className: cn("h-4 rounded-agg-sm", labelWidth) }),
+              /* @__PURE__ */ jsx111(SkeletonBlock, { className: "ml-auto h-4 w-6 rounded-agg-sm" })
+            ] }, index))
           ] }) }) : null,
-          /* @__PURE__ */ jsx109("div", { className: "agg-event-list-skeleton-grid grid w-full grid-cols-[repeat(auto-fill,minmax(240px,1fr))] md:grid-cols-[repeat(auto-fill,minmax(360px,1fr))] gap-4", children: Array.from({ length: DEFAULT_SKELETON_EVENTS_LIMIT }).map((_, index) => /* @__PURE__ */ jsx109(
+          /* @__PURE__ */ jsx111("div", { className: "agg-event-list-skeleton-grid grid w-full grid-cols-[repeat(auto-fill,minmax(240px,1fr))] md:grid-cols-[repeat(auto-fill,minmax(360px,1fr))] gap-4", children: Array.from({ length: DEFAULT_SKELETON_EVENTS_LIMIT }).map((_, index) => /* @__PURE__ */ jsx111(
             EventListItemSkeletonView,
             {
               isStandalone: false,
@@ -5862,19 +6440,19 @@ var EventListSkeletonView = ({
 EventListSkeletonView.displayName = "EventListSkeletonView";
 
 // src/primitives/skeleton/views/event-list-item-details-skeleton-view.tsx
-import { useLabels as useLabels5 } from "@agg-build/hooks";
+import { useLabels as useLabels6 } from "@agg-build/hooks";
 
 // src/events/item-details/event-list-item-details.constants.ts
 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 jsx110, jsxs as jsxs106 } from "react/jsx-runtime";
+import { jsx as jsx112, jsxs as jsxs108 } from "react/jsx-runtime";
 var EventListItemDetailsSkeletonView = ({
   className,
   ariaLabel
 }) => {
-  const labels = useLabels5();
-  return /* @__PURE__ */ jsxs106(
+  const labels = useLabels6();
+  return /* @__PURE__ */ jsxs108(
     Card,
     {
       className: cn("group/agg-skeleton", detailsBaseCardClassName, className),
@@ -5882,25 +6460,44 @@ var EventListItemDetailsSkeletonView = ({
       "aria-label": ariaLabel != null ? ariaLabel : labels.eventItemDetails.loading,
       "aria-busy": true,
       children: [
-        /* @__PURE__ */ jsxs106("div", { className: "flex h-14 w-full items-center gap-3 justify-stretch", children: [
-          /* @__PURE__ */ jsx110(SkeletonBlock, { className: "size-10! rounded-agg-lg" }),
-          /* @__PURE__ */ jsx110(SkeletonBlock, { className: "h-6 w-fit flex-1 rounded-agg-sm" })
+        /* @__PURE__ */ jsxs108("div", { className: "flex w-full flex-row items-start gap-3 md:gap-4", children: [
+          /* @__PURE__ */ jsx112(SkeletonBlock, { className: "size-10 shrink-0 rounded-agg-lg md:size-[60px]" }),
+          /* @__PURE__ */ jsxs108("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [
+            /* @__PURE__ */ jsx112("div", { className: "flex h-6 items-center md:h-8", children: /* @__PURE__ */ jsx112(SkeletonBlock, { className: "h-5 w-[70%] max-w-[420px] rounded-agg-sm md:h-6" }) }),
+            /* @__PURE__ */ jsxs108("div", { className: "flex gap-2 overflow-hidden", children: [
+              /* @__PURE__ */ jsx112(SkeletonBlock, { className: "h-[34px] w-[124px] shrink-0 rounded-agg-full" }),
+              /* @__PURE__ */ jsx112(SkeletonBlock, { className: "h-[34px] w-[140px] shrink-0 rounded-agg-full" }),
+              /* @__PURE__ */ jsx112(SkeletonBlock, { className: "h-[34px] w-[132px] shrink-0 rounded-agg-full" }),
+              /* @__PURE__ */ jsx112(SkeletonBlock, { className: "h-[34px] w-[116px] shrink-0 rounded-agg-full" })
+            ] })
+          ] })
         ] }),
-        /* @__PURE__ */ jsxs106("div", { className: "flex w-full flex-col gap-4 md:gap-6", children: [
-          /* @__PURE__ */ jsxs106("div", { className: "flex w-full flex-col gap-3 md:flex-row md:items-center md:justify-between", children: [
-            /* @__PURE__ */ jsxs106("div", { className: "flex max-w-full gap-2 overflow-hidden", children: [
-              /* @__PURE__ */ jsx110(SkeletonBlock, { className: "h-9 w-[100px] rounded-agg-full" }),
-              /* @__PURE__ */ jsx110(SkeletonBlock, { className: "h-9 w-[100px] rounded-agg-full" }),
-              /* @__PURE__ */ jsx110(SkeletonBlock, { className: "h-9 w-[100px] rounded-agg-full" })
+        /* @__PURE__ */ jsxs108("div", { className: "flex w-full flex-col gap-2", children: [
+          /* @__PURE__ */ jsxs108("div", { className: "flex w-full flex-col", children: [
+            /* @__PURE__ */ jsxs108("div", { className: "flex w-full flex-col-reverse gap-4 md:flex-row md:items-center md:justify-between", children: [
+              /* @__PURE__ */ jsxs108("div", { className: "flex gap-2 overflow-hidden pb-1 md:pb-0", children: [
+                /* @__PURE__ */ jsx112(SkeletonBlock, { className: "h-8 w-[92px] shrink-0 rounded-agg-full md:h-9" }),
+                /* @__PURE__ */ jsx112(SkeletonBlock, { className: "h-8 w-[92px] shrink-0 rounded-agg-full md:h-9" })
+              ] }),
+              /* @__PURE__ */ jsx112(SkeletonBlock, { className: "h-9 w-full rounded-agg-full md:w-[210px]" })
             ] }),
-            /* @__PURE__ */ jsx110(SkeletonBlock, { className: "h-9 w-full max-w-[221px] rounded-agg-full md:w-[221px]" })
+            /* @__PURE__ */ jsx112(
+              "div",
+              {
+                className: "agg-event-details-skeleton-plot h-[200px] w-full",
+                style: {
+                  paddingTop: LINE_CHART_PLOT_PADDING.top,
+                  paddingRight: LINE_CHART_PLOT_PADDING.right,
+                  paddingBottom: LINE_CHART_PLOT_PADDING.bottom,
+                  paddingLeft: LINE_CHART_PLOT_PADDING.left
+                },
+                children: /* @__PURE__ */ jsx112(SkeletonBlock, { className: "h-full w-full rounded-agg-xl" })
+              }
+            )
           ] }),
-          /* @__PURE__ */ jsxs106("div", { className: "flex w-full flex-col gap-3", children: [
-            /* @__PURE__ */ jsx110(SkeletonBlock, { className: "h-[220px] w-full rounded-agg-xl md:h-[240px]" }),
-            /* @__PURE__ */ jsxs106("div", { className: "flex items-center justify-between", children: [
-              /* @__PURE__ */ jsx110(SkeletonBlock, { className: "h-5 w-[59px] rounded-agg-sm" }),
-              /* @__PURE__ */ jsx110(SkeletonBlock, { className: "h-5 w-40 rounded-agg-sm" })
-            ] })
+          /* @__PURE__ */ jsxs108("div", { className: "flex items-center justify-between gap-4", children: [
+            /* @__PURE__ */ jsx112(SkeletonBlock, { className: "h-5 w-[56px] rounded-agg-sm" }),
+            /* @__PURE__ */ jsx112(SkeletonBlock, { className: "h-5 w-[232px] max-w-[60%] rounded-agg-sm" })
           ] })
         ] })
       ]
@@ -5910,7 +6507,7 @@ var EventListItemDetailsSkeletonView = ({
 EventListItemDetailsSkeletonView.displayName = "EventListItemDetailsSkeletonView";
 
 // src/primitives/skeleton/views/market-details-skeleton-view.tsx
-import { useLabels as useLabels6 } from "@agg-build/hooks";
+import { useLabels as useLabels7 } from "@agg-build/hooks";
 
 // src/events/market-details/market-details.constants.ts
 var marketDetailsBaseCardClassName = "w-full overflow-hidden rounded-agg-lg border border-agg-separator bg-agg-secondary text-agg-foreground shadow-none hover:shadow-none";
@@ -5924,34 +6521,36 @@ var marketDetailsDefaultIsOpened = false;
 var orderBookRowLimitDefault = 4;
 
 // src/primitives/skeleton/views/market-details-skeleton-view.tsx
-import { Fragment as Fragment4, jsx as jsx111, jsxs as jsxs107 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx113, jsxs as jsxs109 } from "react/jsx-runtime";
 var orderBookAskBarScales = ["93%", "47%", "33%", "31%"];
 var orderBookBidBarScales = ["9%", "33%", "53%", "73%"];
 var MarketDetailsHeaderSkeleton = () => {
-  return /* @__PURE__ */ jsxs107("div", { className: "flex flex-wrap items-center justify-between gap-3 px-4 py-3 md:px-5", children: [
-    /* @__PURE__ */ jsxs107("div", { className: "flex min-w-0 items-center gap-3 md:min-w-52 md:gap-4", children: [
-      /* @__PURE__ */ jsx111(SkeletonBlock, { className: "size-12 rounded-agg-lg md:size-[60px]" }),
-      /* @__PURE__ */ jsxs107("div", { className: "flex min-w-0 flex-col gap-2", children: [
-        /* @__PURE__ */ jsx111(SkeletonBlock, { className: "h-6 w-[132px] rounded-agg-sm" }),
-        /* @__PURE__ */ jsx111(SkeletonBlock, { className: "h-4 w-[141px] rounded-agg-sm" })
-      ] })
+  return /* @__PURE__ */ jsxs109("div", { className: "flex flex-col items-stretch gap-3 px-5 py-3 md:flex-row md:flex-nowrap md:items-center md:justify-between", children: [
+    /* @__PURE__ */ jsxs109("div", { className: "flex min-w-0 w-full items-center justify-between gap-4 md:flex-1", children: [
+      /* @__PURE__ */ jsxs109("div", { className: "flex min-w-24 flex-1 items-center gap-3 md:gap-4", children: [
+        /* @__PURE__ */ jsx113(SkeletonBlock, { className: "size-12 shrink-0 rounded-agg-lg md:size-[60px]" }),
+        /* @__PURE__ */ jsxs109("div", { className: "flex min-w-24 flex-col", children: [
+          /* @__PURE__ */ jsx113("div", { className: "flex h-7 items-center", children: /* @__PURE__ */ jsx113(SkeletonBlock, { className: "h-5 w-[140px] rounded-agg-sm" }) }),
+          /* @__PURE__ */ jsx113("div", { className: "flex h-5 items-center", children: /* @__PURE__ */ jsx113(SkeletonBlock, { className: "h-4 w-[124px] rounded-agg-sm" }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx113(SkeletonBlock, { className: "h-8 w-11 shrink-0 rounded-agg-md" })
     ] }),
-    /* @__PURE__ */ jsx111(SkeletonBlock, { className: "h-9 w-[60px] rounded-agg-md" }),
-    /* @__PURE__ */ jsxs107("div", { className: "flex w-full gap-2 md:w-auto", children: [
-      /* @__PURE__ */ jsx111(SkeletonBlock, { className: "h-9 w-full rounded-agg-full md:w-[135px]" }),
-      /* @__PURE__ */ jsx111(SkeletonBlock, { className: "h-9 w-full rounded-agg-full md:w-[131px]" })
+    /* @__PURE__ */ jsxs109("div", { className: "flex w-full gap-2 md:w-auto md:shrink-0", children: [
+      /* @__PURE__ */ jsx113(SkeletonBlock, { className: "h-9 flex-1 rounded-agg-full md:w-[140px] md:flex-none" }),
+      /* @__PURE__ */ jsx113(SkeletonBlock, { className: "h-9 flex-1 rounded-agg-full md:w-[140px] md:flex-none" })
     ] })
   ] });
 };
 var MarketDetailsTabsSkeleton = () => {
-  return /* @__PURE__ */ jsxs107("div", { className: "flex h-14 items-end px-4 md:px-5", children: [
-    /* @__PURE__ */ jsxs107("div", { className: "flex h-full flex-col items-end justify-end rounded-t-agg-lg", children: [
-      /* @__PURE__ */ jsx111("div", { className: "px-4 py-3", children: /* @__PURE__ */ jsx111(SkeletonBlock, { className: "h-6 w-20 rounded-agg-sm" }) }),
-      /* @__PURE__ */ jsx111(SkeletonBlock, { className: "h-[2px] w-full rounded-t-agg-sm" })
+  return /* @__PURE__ */ jsxs109("div", { className: "flex h-14 items-end px-4 md:px-5", children: [
+    /* @__PURE__ */ jsxs109("div", { className: "flex h-full flex-col items-end justify-end rounded-t-agg-lg", children: [
+      /* @__PURE__ */ jsx113("div", { className: "px-4 py-3", children: /* @__PURE__ */ jsx113(SkeletonBlock, { className: "h-6 w-20 rounded-agg-sm" }) }),
+      /* @__PURE__ */ jsx113(SkeletonBlock, { className: "h-[2px] w-full rounded-t-agg-sm" })
     ] }),
-    /* @__PURE__ */ jsxs107("div", { className: "flex h-full flex-col justify-center", children: [
-      /* @__PURE__ */ jsx111("div", { className: "px-4 py-3", children: /* @__PURE__ */ jsx111(SkeletonBlock, { className: "h-6 w-12 rounded-agg-sm" }) }),
-      /* @__PURE__ */ jsx111("div", { className: "h-[2px] w-full" })
+    /* @__PURE__ */ jsxs109("div", { className: "flex h-full flex-col justify-center", children: [
+      /* @__PURE__ */ jsx113("div", { className: "px-4 py-3", children: /* @__PURE__ */ jsx113(SkeletonBlock, { className: "h-6 w-12 rounded-agg-sm" }) }),
+      /* @__PURE__ */ jsx113("div", { className: "h-[2px] w-full" })
     ] })
   ] });
 };
@@ -5959,25 +6558,25 @@ var MarketDetailsOrderBookRows = ({
   side,
   barScales
 }) => {
-  return /* @__PURE__ */ jsx111("div", { className: "flex flex-col", children: barScales.map((barScale, index) => /* @__PURE__ */ jsxs107(
+  return /* @__PURE__ */ jsx113("div", { className: "flex flex-col", children: barScales.map((barScale, index) => /* @__PURE__ */ jsxs109(
     "div",
     {
       className: "flex h-9 items-center gap-2 overflow-hidden pr-5 md:gap-10",
       children: [
-        /* @__PURE__ */ jsx111("div", { className: "relative h-9 min-h-0 min-w-0 flex-1", children: /* @__PURE__ */ jsx111(
+        /* @__PURE__ */ jsx113("div", { className: "relative h-9 min-h-0 min-w-0 flex-1", children: /* @__PURE__ */ jsx113(
           "div",
           {
             className: "absolute inset-y-0 left-0",
             style: { right: `${100 - parseFloat(barScale)}%` },
-            children: /* @__PURE__ */ jsx111(SkeletonBlock, { className: "h-full w-full rounded-none" })
+            children: /* @__PURE__ */ jsx113(SkeletonBlock, { className: "h-full w-full rounded-none" })
           }
         ) }),
-        /* @__PURE__ */ jsxs107("div", { className: "flex w-20 shrink-0 items-center gap-1 md:w-[120px]", children: [
-          /* @__PURE__ */ jsx111(SkeletonBlock, { className: "h-5 w-10 rounded-agg-sm md:w-12" }),
-          /* @__PURE__ */ jsx111(SkeletonBlock, { className: "size-3.5 rounded-agg-sm" })
+        /* @__PURE__ */ jsxs109("div", { className: "flex w-20 shrink-0 items-center gap-1 md:w-[120px]", children: [
+          /* @__PURE__ */ jsx113(SkeletonBlock, { className: "h-5 w-10 rounded-agg-sm md:w-12" }),
+          /* @__PURE__ */ jsx113(SkeletonBlock, { className: "size-3.5 rounded-agg-sm" })
         ] }),
-        /* @__PURE__ */ jsx111(SkeletonBlock, { className: "h-5 w-16 shrink-0 rounded-agg-sm md:w-[120px]" }),
-        /* @__PURE__ */ jsx111(SkeletonBlock, { className: "h-5 w-16 shrink-0 rounded-agg-sm md:w-[120px]" })
+        /* @__PURE__ */ jsx113(SkeletonBlock, { className: "h-5 w-16 shrink-0 rounded-agg-sm md:w-[120px]" }),
+        /* @__PURE__ */ jsx113(SkeletonBlock, { className: "h-5 w-16 shrink-0 rounded-agg-sm md:w-[120px]" })
       ]
     },
     `${side}-row-${index}`
@@ -5986,19 +6585,19 @@ var MarketDetailsOrderBookRows = ({
 var MarketDetailsOderbookSkeleton = ({
   className
 }) => {
-  return /* @__PURE__ */ jsxs107("div", { className: cn("flex flex-col", className), children: [
-    /* @__PURE__ */ jsxs107("div", { className: "flex h-9 items-center gap-2 border-b border-agg-separator px-3 md:gap-10 md:px-5", children: [
-      /* @__PURE__ */ jsx111(SkeletonBlock, { className: "h-4 w-16 flex-1 rounded-agg-sm md:w-20" }),
-      /* @__PURE__ */ jsx111(SkeletonBlock, { className: "h-4 w-20 shrink-0 rounded-agg-sm md:w-[120px]" }),
-      /* @__PURE__ */ jsx111(SkeletonBlock, { className: "h-4 w-16 shrink-0 rounded-agg-sm md:w-[120px]" }),
-      /* @__PURE__ */ jsx111(SkeletonBlock, { className: "h-4 w-16 shrink-0 rounded-agg-sm md:w-[120px]" })
+  return /* @__PURE__ */ jsxs109("div", { className: cn("flex flex-col", className), children: [
+    /* @__PURE__ */ jsxs109("div", { className: "flex h-9 items-center gap-2 border-b border-agg-separator px-3 md:gap-10 md:px-5", children: [
+      /* @__PURE__ */ jsx113(SkeletonBlock, { className: "h-4 w-16 flex-1 rounded-agg-sm md:w-20" }),
+      /* @__PURE__ */ jsx113(SkeletonBlock, { className: "h-4 w-20 shrink-0 rounded-agg-sm md:w-[120px]" }),
+      /* @__PURE__ */ jsx113(SkeletonBlock, { className: "h-4 w-16 shrink-0 rounded-agg-sm md:w-[120px]" }),
+      /* @__PURE__ */ jsx113(SkeletonBlock, { className: "h-4 w-16 shrink-0 rounded-agg-sm md:w-[120px]" })
     ] }),
-    /* @__PURE__ */ jsx111(MarketDetailsOrderBookRows, { side: "ask", barScales: orderBookAskBarScales }),
-    /* @__PURE__ */ jsxs107("div", { className: "flex h-9 items-center gap-2 border-y border-agg-separator px-3 md:gap-10 md:px-5", children: [
-      /* @__PURE__ */ jsx111(SkeletonBlock, { className: "h-5 w-24 flex-1 rounded-agg-sm" }),
-      /* @__PURE__ */ jsx111(SkeletonBlock, { className: "h-5 w-20 shrink-0 rounded-agg-sm" })
+    /* @__PURE__ */ jsx113(MarketDetailsOrderBookRows, { side: "ask", barScales: orderBookAskBarScales }),
+    /* @__PURE__ */ jsxs109("div", { className: "flex h-9 items-center gap-2 border-y border-agg-separator px-3 md:gap-10 md:px-5", children: [
+      /* @__PURE__ */ jsx113(SkeletonBlock, { className: "h-5 w-24 flex-1 rounded-agg-sm" }),
+      /* @__PURE__ */ jsx113(SkeletonBlock, { className: "h-5 w-20 shrink-0 rounded-agg-sm" })
     ] }),
-    /* @__PURE__ */ jsx111(MarketDetailsOrderBookRows, { side: "bid", barScales: orderBookBidBarScales })
+    /* @__PURE__ */ jsx113(MarketDetailsOrderBookRows, { side: "bid", barScales: orderBookBidBarScales })
   ] });
 };
 var MarketDetailsSkeletonView = ({
@@ -6006,8 +6605,8 @@ var MarketDetailsSkeletonView = ({
   ariaLabel,
   isDetailed
 }) => {
-  const labels = useLabels6();
-  return /* @__PURE__ */ jsxs107(
+  const labels = useLabels7();
+  return /* @__PURE__ */ jsxs109(
     Card,
     {
       className: cn("group/agg-skeleton", marketDetailsBaseCardClassName, className),
@@ -6015,12 +6614,12 @@ var MarketDetailsSkeletonView = ({
       "aria-label": ariaLabel != null ? ariaLabel : labels.marketDetails.loading,
       "aria-busy": true,
       children: [
-        /* @__PURE__ */ jsx111(MarketDetailsHeaderSkeleton, {}),
-        isDetailed ? /* @__PURE__ */ jsxs107(Fragment4, { children: [
-          /* @__PURE__ */ jsx111("div", { className: "h-px w-full bg-agg-separator" }),
-          /* @__PURE__ */ jsx111(MarketDetailsTabsSkeleton, {}),
-          /* @__PURE__ */ jsx111("div", { className: "h-px w-full bg-agg-separator" }),
-          /* @__PURE__ */ jsx111(MarketDetailsOderbookSkeleton, {})
+        /* @__PURE__ */ jsx113(MarketDetailsHeaderSkeleton, {}),
+        isDetailed ? /* @__PURE__ */ jsxs109(Fragment4, { children: [
+          /* @__PURE__ */ jsx113("div", { className: "h-px w-full bg-agg-separator" }),
+          /* @__PURE__ */ jsx113(MarketDetailsTabsSkeleton, {}),
+          /* @__PURE__ */ jsx113("div", { className: "h-px w-full bg-agg-separator" }),
+          /* @__PURE__ */ jsx113(MarketDetailsOderbookSkeleton, {})
         ] }) : null
       ]
     }
@@ -6028,113 +6627,137 @@ var MarketDetailsSkeletonView = ({
 };
 MarketDetailsSkeletonView.displayName = "MarketDetailsSkeletonView";
 
+// src/trading/place-order/index.place-order.constants.ts
+var PLACE_ORDER_DEFAULT_AMOUNT = 20;
+var MIN_BUY_ORDER_AMOUNT = 1;
+var MIN_SELL_ORDER_SHARES = 1;
+var DEFAULT_SLIPPAGE_VALUE = "0.5";
+var HIGH_SLIPPAGE_THRESHOLD = 10;
+var PLACE_ORDER_ROUTE_COLLAPSED_CARD_COUNT = 3;
+var PLACE_ORDER_MAXIMIZE_PAYOUT_ROUTE_ID = "live-maximize-payout";
+var PLACE_ORDER_NUMERIC_INPUT_CLASS_NAME = "bg-transparent text-right text-agg-3xl font-agg-bold leading-agg-9 tracking-agg-normal text-agg-foreground outline-none";
+var PLACE_ORDER_CONTAINER_CLASS_NAME = "w-full overflow-hidden rounded-agg-xl border border-agg-separator bg-agg-secondary shadow-none hover:shadow-none";
+var PLACE_ORDER_OUTCOME_BUTTON_CLASS_NAMES = {
+  activeNegative: "border-agg-error/50 bg-agg-error/15 font-agg-bold text-agg-error",
+  activePositive: "border-agg-success/50 bg-agg-success/15 font-agg-bold text-agg-success",
+  base: "flex h-11 flex-1 items-center justify-center rounded-agg-full border px-6 text-agg-base leading-agg-6",
+  inactive: "border-transparent bg-agg-secondary-hover font-agg-normal text-agg-foreground hover:bg-agg-tertiary"
+};
+
 // src/primitives/skeleton/views/place-order-skeleton-view.tsx
-import { jsx as jsx112, jsxs as jsxs108 } from "react/jsx-runtime";
-var placeOrderCardClassName = "overflow-hidden rounded-agg-xl border border-agg-border bg-agg-secondary shadow-none hover:shadow-none";
+import { Fragment as Fragment5, jsx as jsx114, jsxs as jsxs110 } from "react/jsx-runtime";
 var PlaceOrderRouteCardSkeleton = () => {
-  return /* @__PURE__ */ jsxs108("div", { className: "flex w-full items-center justify-between gap-4 rounded-agg-lg border border-agg-border bg-agg-secondary p-3", children: [
-    /* @__PURE__ */ jsxs108("div", { className: "flex items-center gap-3", children: [
-      /* @__PURE__ */ jsx112(SkeletonBlock, { className: "size-4 shrink-0 rounded-agg-sm" }),
-      /* @__PURE__ */ jsxs108("div", { className: "flex flex-col gap-2", children: [
-        /* @__PURE__ */ jsx112(SkeletonBlock, { className: "h-5 w-10 rounded-agg-sm" }),
-        /* @__PURE__ */ jsx112(SkeletonBlock, { className: "h-3 w-[91px] rounded-agg-sm" })
+  return /* @__PURE__ */ jsxs110("div", { className: "flex w-full items-center justify-between gap-4 rounded-agg-lg border border-agg-border bg-agg-secondary p-3", children: [
+    /* @__PURE__ */ jsxs110("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx114(SkeletonBlock, { className: "size-4 shrink-0 rounded-agg-sm" }),
+      /* @__PURE__ */ jsxs110("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ jsx114(SkeletonBlock, { className: "h-5 w-10 rounded-agg-sm" }),
+        /* @__PURE__ */ jsx114(SkeletonBlock, { className: "h-3 w-[91px] rounded-agg-sm" })
       ] })
     ] }),
-    /* @__PURE__ */ jsx112(SkeletonBlock, { className: "h-5 w-[75px] shrink-0 rounded-agg-sm" })
+    /* @__PURE__ */ jsx114(SkeletonBlock, { className: "h-5 w-[75px] shrink-0 rounded-agg-sm" })
   ] });
 };
 PlaceOrderRouteCardSkeleton.displayName = "PlaceOrderRouteCardSkeleton";
 var TabsSkeletonBar = () => {
-  return /* @__PURE__ */ jsxs108("div", { className: "flex w-full items-end border-b border-agg-border", children: [
-    /* @__PURE__ */ jsxs108("div", { className: "flex flex-col rounded-t-agg-lg", children: [
-      /* @__PURE__ */ jsx112("div", { className: "px-5 py-2", children: /* @__PURE__ */ jsx112(SkeletonBlock, { className: "h-6 w-10 rounded-agg-sm" }) }),
-      /* @__PURE__ */ jsx112(SkeletonBlock, { className: "h-[2px] w-full rounded-t-agg-sm" })
+  return /* @__PURE__ */ jsxs110("div", { className: "flex w-full items-end border-b border-agg-separator", children: [
+    /* @__PURE__ */ jsxs110("div", { className: "relative -mb-px px-5 pb-2", children: [
+      /* @__PURE__ */ jsx114("div", { className: "flex h-6 items-center", children: /* @__PURE__ */ jsx114(SkeletonBlock, { className: "h-5 w-7 rounded-agg-sm" }) }),
+      /* @__PURE__ */ jsx114(SkeletonBlock, { className: "absolute inset-x-0 bottom-0 h-0.5 rounded-t-agg-sm" })
     ] }),
-    /* @__PURE__ */ jsxs108("div", { className: "flex flex-col", children: [
-      /* @__PURE__ */ jsx112("div", { className: "px-5 py-2", children: /* @__PURE__ */ jsx112(SkeletonBlock, { className: "h-6 w-10 rounded-agg-sm" }) }),
-      /* @__PURE__ */ jsx112("div", { className: "h-[2px] w-full" })
-    ] })
+    /* @__PURE__ */ jsx114("div", { className: "-mb-px px-5 pb-2", children: /* @__PURE__ */ jsx114("div", { className: "flex h-6 items-center", children: /* @__PURE__ */ jsx114(SkeletonBlock, { className: "h-5 w-7 rounded-agg-sm" }) }) })
   ] });
 };
 var ContentBody = () => {
-  return /* @__PURE__ */ jsxs108("div", { className: cn("flex flex-col gap-6 p-5"), children: [
-    /* @__PURE__ */ jsxs108("div", { className: "flex flex-col gap-2", children: [
-      /* @__PURE__ */ jsxs108("div", { className: "flex min-w-0 items-center gap-3", children: [
-        /* @__PURE__ */ jsx112(SkeletonBlock, { className: "size-12 shrink-0 rounded-agg-lg" }),
-        /* @__PURE__ */ jsxs108("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [
-          /* @__PURE__ */ jsx112(SkeletonBlock, { className: "h-4 w-[92%] max-w-[240px] rounded-agg-sm" }),
-          /* @__PURE__ */ jsx112(SkeletonBlock, { className: "h-4 w-[64%] max-w-[160px] rounded-agg-sm" })
-        ] })
+  return /* @__PURE__ */ jsxs110(Fragment5, { children: [
+    /* @__PURE__ */ jsxs110("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsxs110("div", { className: "flex min-w-0 items-center gap-3", children: [
+        /* @__PURE__ */ jsx114(SkeletonBlock, { className: "size-12 shrink-0 rounded-agg-lg" }),
+        /* @__PURE__ */ jsx114(SkeletonBlock, { className: "h-5 w-[80%] max-w-[200px] rounded-agg-sm" })
       ] }),
-      /* @__PURE__ */ jsx112(SkeletonBlock, { className: "h-6 w-[92px] rounded-agg-sm" }),
-      /* @__PURE__ */ jsx112(TabsSkeletonBar, {})
+      /* @__PURE__ */ jsx114("div", { className: "flex h-6 items-center", children: /* @__PURE__ */ jsx114(SkeletonBlock, { className: "h-5 w-[108px] rounded-agg-sm" }) })
     ] }),
-    /* @__PURE__ */ jsxs108("div", { className: "flex flex-col gap-4", children: [
-      /* @__PURE__ */ jsxs108("div", { className: "flex w-full gap-2", children: [
-        /* @__PURE__ */ jsx112(SkeletonBlock, { className: "h-11 flex-1 rounded-agg-full" }),
-        /* @__PURE__ */ jsx112(SkeletonBlock, { className: "h-11 flex-1 rounded-agg-full" })
-      ] }),
-      /* @__PURE__ */ jsxs108("div", { className: "flex items-center justify-between gap-4", children: [
-        /* @__PURE__ */ jsxs108("div", { className: "flex flex-col gap-2", children: [
-          /* @__PURE__ */ jsx112(SkeletonBlock, { className: "h-5 w-[63px] rounded-agg-sm" }),
-          /* @__PURE__ */ jsx112(SkeletonBlock, { className: "h-4 w-[118px] rounded-agg-sm" })
+    /* @__PURE__ */ jsxs110("div", { className: "flex flex-col gap-6", children: [
+      /* @__PURE__ */ jsx114(TabsSkeletonBar, {}),
+      /* @__PURE__ */ jsxs110("div", { className: "flex flex-col gap-4", children: [
+        /* @__PURE__ */ jsxs110("div", { className: "flex w-full gap-2", children: [
+          /* @__PURE__ */ jsx114(SkeletonBlock, { className: "h-11 flex-1 rounded-agg-full" }),
+          /* @__PURE__ */ jsx114(SkeletonBlock, { className: "h-11 flex-1 rounded-agg-full" })
         ] }),
-        /* @__PURE__ */ jsx112("p", { className: cn("text-agg-3xl font-agg-bold leading-agg-9 text-agg-separator"), children: "$0" })
+        /* @__PURE__ */ jsxs110("div", { className: "flex items-start justify-between gap-4", children: [
+          /* @__PURE__ */ jsx114("div", { className: "flex h-6 items-center", children: /* @__PURE__ */ jsx114(SkeletonBlock, { className: "h-5 w-[63px] rounded-agg-sm" }) }),
+          /* @__PURE__ */ jsx114("div", { className: "flex h-9 items-center", children: /* @__PURE__ */ jsx114(SkeletonBlock, { className: "h-8 w-16 rounded-agg-sm" }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs110("div", { className: "flex flex-col gap-3", children: [
+        /* @__PURE__ */ jsx114("div", { className: "flex h-6 items-center", children: /* @__PURE__ */ jsx114(SkeletonBlock, { className: "h-5 w-[112px] rounded-agg-sm" }) }),
+        /* @__PURE__ */ jsxs110("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ jsx114(PlaceOrderRouteCardSkeleton, {}),
+          /* @__PURE__ */ jsx114(PlaceOrderRouteCardSkeleton, {})
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs110("div", { className: "flex flex-col gap-3", children: [
+        /* @__PURE__ */ jsx114(SkeletonBlock, { className: "h-12 w-full rounded-agg-full" }),
+        /* @__PURE__ */ jsxs110("div", { className: "flex h-8 flex-col items-center justify-center gap-2", children: [
+          /* @__PURE__ */ jsx114(SkeletonBlock, { className: "h-3 w-full max-w-[240px] rounded-agg-sm" }),
+          /* @__PURE__ */ jsx114(SkeletonBlock, { className: "h-3 w-full max-w-[72px] rounded-agg-sm" })
+        ] })
       ] })
-    ] }),
-    /* @__PURE__ */ jsxs108("div", { className: "flex flex-col gap-4", children: [
-      /* @__PURE__ */ jsx112(SkeletonBlock, { className: "h-12 w-full rounded-agg-full" }),
-      /* @__PURE__ */ jsx112(SkeletonBlock, { className: "h-3.5 w-full max-w-[120px] self-center rounded-agg-sm" })
-    ] }),
-    /* @__PURE__ */ jsx112(SkeletonBlock, { className: "h-4 w-full max-w-[200px] self-center rounded-agg-sm" })
+    ] })
   ] });
 };
 var PlaceOrderSkeletonView = ({
   className,
   ariaLabel
 }) => {
-  return /* @__PURE__ */ jsx112(
+  return /* @__PURE__ */ jsx114(
     "div",
     {
       className: cn("group/agg-skeleton", "w-full", className),
       role: "status",
       "aria-label": ariaLabel != null ? ariaLabel : "Loading place order",
       "aria-busy": true,
-      children: /* @__PURE__ */ jsx112(Card, { className: cn(placeOrderCardClassName, "w-full max-w-[342px]"), children: /* @__PURE__ */ jsx112(ContentBody, {}) })
+      children: /* @__PURE__ */ jsx114(Card, { className: cn(PLACE_ORDER_CONTAINER_CLASS_NAME, "max-w-[342px] gap-6 p-5"), children: /* @__PURE__ */ jsx114(ContentBody, {}) })
     }
   );
 };
 PlaceOrderSkeletonView.displayName = "PlaceOrderSkeletonView";
 
 // src/primitives/skeleton/views/search-skeleton-view.tsx
-import { useLabels as useLabels7 } from "@agg-build/hooks";
-import { jsx as jsx113, jsxs as jsxs109 } from "react/jsx-runtime";
+import { useLabels as useLabels8 } from "@agg-build/hooks";
+import { jsx as jsx115, jsxs as jsxs111 } from "react/jsx-runtime";
 var SearchSkeletonRow = () => {
-  return /* @__PURE__ */ jsxs109("div", { className: "flex w-full items-center gap-6 px-5 py-4", children: [
-    /* @__PURE__ */ jsx113(SkeletonBlock, { className: "size-12 shrink-0 rounded-agg-lg" }),
-    /* @__PURE__ */ jsxs109("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [
-      /* @__PURE__ */ jsx113(SkeletonBlock, { className: "h-5 w-full max-w-[320px] rounded-agg-sm" }),
-      /* @__PURE__ */ jsxs109("div", { className: "flex min-w-0 items-center gap-2", children: [
-        /* @__PURE__ */ jsx113(SkeletonBlock, { className: "h-4 w-[104px] rounded-agg-sm" }),
-        /* @__PURE__ */ jsxs109("div", { className: "flex items-center gap-1", children: [
-          /* @__PURE__ */ jsx113(SkeletonBlock, { className: "size-[14px] rounded-[4px]" }),
-          /* @__PURE__ */ jsx113(SkeletonBlock, { className: "size-[14px] rounded-[4px]" })
+  return (
+    // Mirrors `.agg-search-result-button`: thumbnail + title/context, venue value, chevron.
+    /* @__PURE__ */ jsxs111("div", { className: "flex w-full items-center gap-6 px-5 py-4", children: [
+      /* @__PURE__ */ jsxs111("div", { className: "flex min-w-0 flex-1 items-center gap-4", children: [
+        /* @__PURE__ */ jsx115(SkeletonBlock, { className: "size-12 shrink-0 rounded-agg-md" }),
+        /* @__PURE__ */ jsxs111("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
+          /* @__PURE__ */ jsx115("div", { className: "flex h-6 items-center", children: /* @__PURE__ */ jsx115(SkeletonBlock, { className: "h-4 w-full max-w-[320px] rounded-agg-sm" }) }),
+          /* @__PURE__ */ jsxs111("div", { className: "flex h-6 min-w-0 items-center gap-2", children: [
+            /* @__PURE__ */ jsx115(SkeletonBlock, { className: "h-4 w-[88px] rounded-agg-sm" }),
+            /* @__PURE__ */ jsxs111("div", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx115(SkeletonBlock, { className: "size-3.5 rounded-[4px]" }),
+              /* @__PURE__ */ jsx115(SkeletonBlock, { className: "size-3.5 rounded-[4px]" })
+            ] }),
+            /* @__PURE__ */ jsx115(SkeletonBlock, { className: "h-4 w-[64px] rounded-agg-sm" })
+          ] })
         ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs109("div", { className: "flex w-auto min-w-0 shrink items-center gap-2 sm:w-[200px] sm:shrink-0", children: [
-      /* @__PURE__ */ jsx113(SkeletonBlock, { className: "size-4 rounded-[4px]" }),
-      /* @__PURE__ */ jsxs109("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
-        /* @__PURE__ */ jsx113(SkeletonBlock, { className: "h-6 w-10 rounded-agg-sm" }),
-        /* @__PURE__ */ jsx113(SkeletonBlock, { className: "hidden h-4 w-[60px] rounded-agg-sm sm:block" })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx113(SkeletonBlock, { className: "hidden size-5 rounded-[4px] sm:block" })
-  ] });
+      ] }),
+      /* @__PURE__ */ jsxs111("div", { className: "flex h-7 w-auto min-w-0 shrink items-center gap-2 sm:w-[200px] sm:shrink-0", children: [
+        /* @__PURE__ */ jsx115(SkeletonBlock, { className: "size-4 shrink-0 rounded-[4px]" }),
+        /* @__PURE__ */ jsxs111("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+          /* @__PURE__ */ jsx115(SkeletonBlock, { className: "h-5 w-12 rounded-agg-sm" }),
+          /* @__PURE__ */ jsx115(SkeletonBlock, { className: "hidden h-4 w-[60px] rounded-agg-sm sm:block" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx115(SkeletonBlock, { className: "hidden size-6 shrink-0 rounded-[4px] sm:block" })
+    ] })
+  );
 };
 var SearchSkeletonView = ({ className, ariaLabel }) => {
-  const labels = useLabels7();
-  return /* @__PURE__ */ jsxs109(
+  const labels = useLabels8();
+  return /* @__PURE__ */ jsxs111(
     "div",
     {
       className: cn(
@@ -6146,8 +6769,8 @@ var SearchSkeletonView = ({ className, ariaLabel }) => {
       "aria-label": ariaLabel != null ? ariaLabel : labels.search.loadingResults,
       "aria-busy": true,
       children: [
-        /* @__PURE__ */ jsx113("div", { className: "pt-2", children: Array.from({ length: 4 }).map((_, index) => /* @__PURE__ */ jsx113("div", { className: cn(index > 0 && "border-t border-agg-separator"), children: /* @__PURE__ */ jsx113(SearchSkeletonRow, {}) }, index)) }),
-        /* @__PURE__ */ jsx113("div", { className: "border-t border-agg-separator px-5 py-5", children: /* @__PURE__ */ jsx113(SkeletonBlock, { className: "h-5 w-[116px] rounded-agg-sm" }) })
+        /* @__PURE__ */ jsx115("div", { className: "pt-2", children: Array.from({ length: 4 }).map((_, index) => /* @__PURE__ */ jsx115("div", { className: cn(index > 0 && "border-t border-agg-separator"), children: /* @__PURE__ */ jsx115(SearchSkeletonRow, {}) }, index)) }),
+        /* @__PURE__ */ jsx115("div", { className: "border-t border-agg-separator px-5 py-5", children: /* @__PURE__ */ jsx115(SkeletonBlock, { className: "h-5 w-[116px] rounded-agg-sm" }) })
       ]
     }
   );
@@ -6155,38 +6778,54 @@ var SearchSkeletonView = ({ className, ariaLabel }) => {
 SearchSkeletonView.displayName = "SearchSkeletonView";
 
 // src/primitives/skeleton/views/settlement-skeleton-view.tsx
-import { useLabels as useLabels8 } from "@agg-build/hooks";
-import { jsx as jsx114, jsxs as jsxs110 } from "react/jsx-runtime";
+import { useLabels as useLabels9 } from "@agg-build/hooks";
+import { jsx as jsx116, jsxs as jsxs112 } from "react/jsx-runtime";
 var SettlementSkeletonView = ({
   className,
   ariaLabel
 }) => {
-  const labels = useLabels8();
-  return /* @__PURE__ */ jsxs110(
+  const labels = useLabels9();
+  return /* @__PURE__ */ jsxs112(
     Card,
     {
       className: cn(
         "group/agg-skeleton",
-        "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
       ),
       role: "status",
       "aria-label": ariaLabel != null ? ariaLabel : labels.trading.settlementLoading,
       "aria-busy": true,
       children: [
-        /* @__PURE__ */ jsxs110("div", { className: "flex w-full items-center justify-between gap-4", children: [
-          /* @__PURE__ */ jsx114(SkeletonBlock, { className: "h-4 w-[81px] rounded-agg-sm" }),
-          /* @__PURE__ */ jsx114(SkeletonBlock, { className: "h-5 w-[240px] max-w-[60%] rounded-agg-sm" })
+        /* @__PURE__ */ jsxs112("div", { className: "flex w-full flex-col items-start gap-1 sm:flex-row sm:items-center sm:justify-between sm:gap-4", children: [
+          /* @__PURE__ */ jsx116(SkeletonBlock, { className: "h-4 w-[81px] rounded-agg-sm" }),
+          /* @__PURE__ */ jsx116("div", { className: "flex h-5 items-center", children: /* @__PURE__ */ jsx116(SkeletonBlock, { className: "h-4 w-[180px] rounded-agg-sm" }) })
         ] }),
-        /* @__PURE__ */ jsx114(SkeletonBlock, { className: "h-5 w-[200px] rounded-agg-sm" }),
-        /* @__PURE__ */ jsxs110("div", { className: "flex w-full flex-col gap-4", children: [
-          /* @__PURE__ */ jsxs110("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx114(SkeletonBlock, { className: "size-4 rounded-agg-sm" }),
-            /* @__PURE__ */ jsx114(SkeletonBlock, { className: "h-5 w-[100px] rounded-agg-sm" })
+        /* @__PURE__ */ jsxs112("div", { className: "flex w-full flex-col items-start gap-5", children: [
+          /* @__PURE__ */ jsxs112("div", { className: "flex w-full flex-col items-start gap-5", children: [
+            /* @__PURE__ */ jsxs112("div", { className: "flex h-5 items-center gap-2", children: [
+              /* @__PURE__ */ jsx116(SkeletonBlock, { className: "h-4 w-[180px] rounded-agg-sm" }),
+              /* @__PURE__ */ jsx116(SkeletonBlock, { className: "size-4 rounded-agg-full" })
+            ] }),
+            /* @__PURE__ */ jsxs112("div", { className: "flex w-full flex-col gap-1", children: [
+              /* @__PURE__ */ jsxs112("div", { className: "flex h-5 items-center gap-2", children: [
+                /* @__PURE__ */ jsx116(SkeletonBlock, { className: "size-3.5 rounded-agg-full" }),
+                /* @__PURE__ */ jsx116(SkeletonBlock, { className: "h-4 w-[120px] rounded-agg-sm" })
+              ] }),
+              /* @__PURE__ */ jsx116("div", { className: "flex flex-col pl-6", children: [0, 1, 2].map((index) => /* @__PURE__ */ jsxs112("div", { className: "flex h-6 items-center gap-2", children: [
+                /* @__PURE__ */ jsx116(SkeletonBlock, { className: "size-3.5 rounded-agg-sm" }),
+                /* @__PURE__ */ jsx116(SkeletonBlock, { className: "h-4 w-[72px] rounded-agg-sm" }),
+                /* @__PURE__ */ jsx116(SkeletonBlock, { className: "ml-6 h-4 w-[72px] rounded-agg-sm" })
+              ] }, index)) })
+            ] })
           ] }),
-          /* @__PURE__ */ jsxs110("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx114(SkeletonBlock, { className: "size-4 rounded-agg-sm" }),
-            /* @__PURE__ */ jsx114(SkeletonBlock, { className: "h-5 w-[60px] rounded-agg-sm" })
+          /* @__PURE__ */ jsx116("div", { className: "h-px w-full bg-agg-separator" }),
+          /* @__PURE__ */ jsxs112("div", { className: "flex w-full flex-col items-start gap-4", children: [
+            /* @__PURE__ */ jsx116("div", { className: "flex h-5 items-center", children: /* @__PURE__ */ jsx116(SkeletonBlock, { className: "h-4 w-[132px] rounded-agg-sm" }) }),
+            [0, 1, 2].map((index) => /* @__PURE__ */ jsxs112("div", { className: "flex h-5 items-center gap-2", children: [
+              /* @__PURE__ */ jsx116(SkeletonBlock, { className: "size-3.5 rounded-agg-sm" }),
+              /* @__PURE__ */ jsx116(SkeletonBlock, { className: "h-4 w-[80px] rounded-agg-sm" })
+            ] }, index))
           ] })
         ] })
       ]
@@ -6196,12 +6835,12 @@ var SettlementSkeletonView = ({
 SettlementSkeletonView.displayName = "SettlementSkeletonView";
 
 // src/primitives/skeleton/views/user-profile-overview-skeleton-view.tsx
-import { jsx as jsx115, jsxs as jsxs111 } from "react/jsx-runtime";
+import { jsx as jsx117, jsxs as jsxs113 } from "react/jsx-runtime";
 var UserProfileOverviewSkeletonView = ({
   className,
   ariaLabel
 }) => {
-  return /* @__PURE__ */ jsxs111(
+  return /* @__PURE__ */ jsxs113(
     "div",
     {
       className: cn("flex w-full flex-col gap-6 sm:flex-row", className),
@@ -6209,49 +6848,49 @@ var UserProfileOverviewSkeletonView = ({
       "aria-label": ariaLabel != null ? ariaLabel : "Loading profile overview",
       "aria-busy": "true",
       children: [
-        /* @__PURE__ */ jsxs111("div", { className: "flex min-w-0 flex-1 flex-col gap-4 sm:gap-6", children: [
-          /* @__PURE__ */ jsx115("div", { className: "rounded-agg-md border border-agg-separator bg-agg-secondary p-5", children: /* @__PURE__ */ jsxs111("div", { className: "flex w-full items-center gap-5", children: [
-            /* @__PURE__ */ jsx115(SkeletonBlock, { className: "h-20 w-20 shrink-0 rounded-agg-full sm:h-[120px] sm:w-[120px]" }),
-            /* @__PURE__ */ jsxs111("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [
-              /* @__PURE__ */ jsxs111("div", { className: "flex items-center justify-between gap-3", children: [
-                /* @__PURE__ */ jsx115(SkeletonBlock, { className: "h-9 w-[140px] rounded-agg-sm" }),
-                /* @__PURE__ */ jsx115(SkeletonBlock, { className: "h-6 w-[72px] rounded-agg-sm" })
+        /* @__PURE__ */ jsxs113("div", { className: "flex min-w-0 flex-1 flex-col gap-4 sm:gap-6", children: [
+          /* @__PURE__ */ jsx117("div", { className: "rounded-agg-md border border-agg-separator bg-agg-secondary p-5", children: /* @__PURE__ */ jsxs113("div", { className: "flex w-full items-center gap-5", children: [
+            /* @__PURE__ */ jsx117(SkeletonBlock, { className: "h-20 w-20 shrink-0 rounded-agg-full sm:h-[120px] sm:w-[120px]" }),
+            /* @__PURE__ */ jsxs113("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [
+              /* @__PURE__ */ jsxs113("div", { className: "flex items-center justify-between gap-3", children: [
+                /* @__PURE__ */ jsx117(SkeletonBlock, { className: "h-9 w-[140px] rounded-agg-sm" }),
+                /* @__PURE__ */ jsx117(SkeletonBlock, { className: "h-6 w-[72px] rounded-agg-sm" })
               ] }),
-              /* @__PURE__ */ jsxs111("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsx115(SkeletonBlock, { className: "h-5 w-5 rounded-agg-sm" }),
-                /* @__PURE__ */ jsx115(SkeletonBlock, { className: "h-6 w-[140px] rounded-agg-sm" }),
-                /* @__PURE__ */ jsx115(SkeletonBlock, { className: "h-5 w-[72px] rounded-agg-sm" })
+              /* @__PURE__ */ jsxs113("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx117(SkeletonBlock, { className: "h-5 w-5 rounded-agg-sm" }),
+                /* @__PURE__ */ jsx117(SkeletonBlock, { className: "h-6 w-[140px] rounded-agg-sm" }),
+                /* @__PURE__ */ jsx117(SkeletonBlock, { className: "h-5 w-[72px] rounded-agg-sm" })
               ] })
             ] })
           ] }) }),
-          /* @__PURE__ */ jsx115("div", { className: "rounded-agg-md border border-agg-separator bg-agg-secondary p-5", children: /* @__PURE__ */ jsxs111("div", { className: "flex items-center justify-between", children: [
-            /* @__PURE__ */ jsxs111("div", { className: "flex items-end gap-3", children: [
-              /* @__PURE__ */ jsx115(SkeletonBlock, { className: "h-9 w-[80px] rounded-agg-sm" }),
-              /* @__PURE__ */ jsx115(SkeletonBlock, { className: "h-5 w-[100px] rounded-agg-sm" })
+          /* @__PURE__ */ jsx117("div", { className: "rounded-agg-md border border-agg-separator bg-agg-secondary p-5", children: /* @__PURE__ */ jsxs113("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsxs113("div", { className: "flex items-end gap-3", children: [
+              /* @__PURE__ */ jsx117(SkeletonBlock, { className: "h-9 w-[80px] rounded-agg-sm" }),
+              /* @__PURE__ */ jsx117(SkeletonBlock, { className: "h-5 w-[100px] rounded-agg-sm" })
             ] }),
-            /* @__PURE__ */ jsxs111("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx115(SkeletonBlock, { className: "h-5 w-5 rounded-agg-sm" }),
-              /* @__PURE__ */ jsx115(SkeletonBlock, { className: "h-5 w-5 rounded-agg-sm" }),
-              /* @__PURE__ */ jsx115(SkeletonBlock, { className: "h-5 w-5 rounded-agg-sm" }),
-              /* @__PURE__ */ jsx115(SkeletonBlock, { className: "h-5 w-5 rounded-agg-sm" })
+            /* @__PURE__ */ jsxs113("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx117(SkeletonBlock, { className: "h-5 w-5 rounded-agg-sm" }),
+              /* @__PURE__ */ jsx117(SkeletonBlock, { className: "h-5 w-5 rounded-agg-sm" }),
+              /* @__PURE__ */ jsx117(SkeletonBlock, { className: "h-5 w-5 rounded-agg-sm" }),
+              /* @__PURE__ */ jsx117(SkeletonBlock, { className: "h-5 w-5 rounded-agg-sm" })
             ] })
           ] }) })
         ] }),
-        /* @__PURE__ */ jsxs111("div", { className: "w-full shrink-0 rounded-agg-md border border-agg-separator bg-agg-secondary p-5 sm:w-full md:w-[465px]", children: [
-          /* @__PURE__ */ jsxs111("div", { className: "mb-4 flex items-center justify-between", children: [
-            /* @__PURE__ */ jsx115(SkeletonBlock, { className: "h-7 w-[84px] rounded-agg-sm" }),
-            /* @__PURE__ */ jsx115(SkeletonBlock, { className: "h-7 w-[64px] rounded-agg-sm" })
+        /* @__PURE__ */ jsxs113("div", { className: "w-full shrink-0 rounded-agg-md border border-agg-separator bg-agg-secondary p-5 sm:w-full md:w-[465px]", children: [
+          /* @__PURE__ */ jsxs113("div", { className: "mb-4 flex items-center justify-between", children: [
+            /* @__PURE__ */ jsx117(SkeletonBlock, { className: "h-7 w-[84px] rounded-agg-sm" }),
+            /* @__PURE__ */ jsx117(SkeletonBlock, { className: "h-7 w-[64px] rounded-agg-sm" })
           ] }),
-          /* @__PURE__ */ jsx115("div", { className: "flex flex-col gap-4", children: Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ jsxs111("div", { className: "flex items-center justify-between", children: [
-            /* @__PURE__ */ jsxs111("div", { className: "flex items-center gap-3", children: [
-              /* @__PURE__ */ jsx115(SkeletonBlock, { className: "h-4 w-4 rounded-agg-sm" }),
-              /* @__PURE__ */ jsx115(SkeletonBlock, { className: "h-6 w-[70px] rounded-agg-sm" })
+          /* @__PURE__ */ jsx117("div", { className: "flex flex-col gap-4", children: Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ jsxs113("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsxs113("div", { className: "flex items-center gap-3", children: [
+              /* @__PURE__ */ jsx117(SkeletonBlock, { className: "h-4 w-4 rounded-agg-sm" }),
+              /* @__PURE__ */ jsx117(SkeletonBlock, { className: "h-6 w-[70px] rounded-agg-sm" })
             ] }),
-            /* @__PURE__ */ jsx115(SkeletonBlock, { className: "h-6 w-[96px] rounded-agg-sm" })
+            /* @__PURE__ */ jsx117(SkeletonBlock, { className: "h-6 w-[96px] rounded-agg-sm" })
           ] }, index)) }),
-          /* @__PURE__ */ jsxs111("div", { className: "mt-4 flex gap-3", children: [
-            /* @__PURE__ */ jsx115(SkeletonBlock, { className: "h-9 flex-1 rounded-agg-full" }),
-            /* @__PURE__ */ jsx115(SkeletonBlock, { className: "h-9 flex-1 rounded-agg-full" })
+          /* @__PURE__ */ jsxs113("div", { className: "mt-4 flex gap-3", children: [
+            /* @__PURE__ */ jsx117(SkeletonBlock, { className: "h-9 flex-1 rounded-agg-full" }),
+            /* @__PURE__ */ jsx117(SkeletonBlock, { className: "h-9 flex-1 rounded-agg-full" })
           ] })
         ] })
       ]
@@ -6261,12 +6900,12 @@ var UserProfileOverviewSkeletonView = ({
 UserProfileOverviewSkeletonView.displayName = "UserProfileOverviewSkeletonView";
 
 // src/primitives/skeleton/views/user-profile-positions-activity-skeleton-view.tsx
-import { jsx as jsx116, jsxs as jsxs112 } from "react/jsx-runtime";
+import { jsx as jsx118, jsxs as jsxs114 } from "react/jsx-runtime";
 var UserProfilePositionsActivitySkeletonView = ({
   className,
   ariaLabel
 }) => {
-  return /* @__PURE__ */ jsxs112(
+  return /* @__PURE__ */ jsxs114(
     "div",
     {
       className: cn(
@@ -6277,18 +6916,18 @@ var UserProfilePositionsActivitySkeletonView = ({
       "aria-label": ariaLabel != null ? ariaLabel : "Loading positions and activity",
       "aria-busy": "true",
       children: [
-        /* @__PURE__ */ jsx116("div", { className: "h-11 border-b border-agg-separator px-4 sm:h-12 sm:px-6", children: /* @__PURE__ */ jsxs112("div", { className: "flex h-full items-center gap-6", children: [
-          /* @__PURE__ */ jsx116(SkeletonBlock, { className: "h-6 w-[72px] rounded-agg-sm" }),
-          /* @__PURE__ */ jsx116(SkeletonBlock, { className: "h-6 w-[64px] rounded-agg-sm" })
+        /* @__PURE__ */ jsx118("div", { className: "h-11 border-b border-agg-separator px-4 sm:h-12 sm:px-6", children: /* @__PURE__ */ jsxs114("div", { className: "flex h-full items-center gap-6", children: [
+          /* @__PURE__ */ jsx118(SkeletonBlock, { className: "h-6 w-[72px] rounded-agg-sm" }),
+          /* @__PURE__ */ jsx118(SkeletonBlock, { className: "h-6 w-[64px] rounded-agg-sm" })
         ] }) }),
-        /* @__PURE__ */ jsxs112("div", { className: "flex flex-col gap-4 p-4 sm:gap-6 sm:p-6", children: [
-          /* @__PURE__ */ jsxs112("div", { className: "flex gap-5", children: [
-            /* @__PURE__ */ jsx116(SkeletonBlock, { className: "h-10 w-[270px] rounded-agg-sm" }),
-            /* @__PURE__ */ jsx116(SkeletonBlock, { className: "h-10 min-w-0 flex-1 rounded-agg-sm" })
+        /* @__PURE__ */ jsxs114("div", { className: "flex flex-col gap-4 p-4 sm:gap-6 sm:p-6", children: [
+          /* @__PURE__ */ jsxs114("div", { className: "flex gap-5", children: [
+            /* @__PURE__ */ jsx118(SkeletonBlock, { className: "h-10 w-[270px] rounded-agg-sm" }),
+            /* @__PURE__ */ jsx118(SkeletonBlock, { className: "h-10 min-w-0 flex-1 rounded-agg-sm" })
           ] }),
-          /* @__PURE__ */ jsx116("div", { className: "flex flex-col gap-3 sm:gap-4", children: Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ jsxs112("div", { className: "flex items-center gap-5", children: [
-            /* @__PURE__ */ jsx116(SkeletonBlock, { className: "h-10 w-[270px] rounded-agg-sm" }),
-            /* @__PURE__ */ jsx116(SkeletonBlock, { className: "h-10 min-w-0 flex-1 rounded-agg-sm" })
+          /* @__PURE__ */ jsx118("div", { className: "flex flex-col gap-3 sm:gap-4", children: Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ jsxs114("div", { className: "flex items-center gap-5", children: [
+            /* @__PURE__ */ jsx118(SkeletonBlock, { className: "h-10 w-[270px] rounded-agg-sm" }),
+            /* @__PURE__ */ jsx118(SkeletonBlock, { className: "h-10 min-w-0 flex-1 rounded-agg-sm" })
           ] }, index)) })
         ] })
       ]
@@ -6328,7 +6967,7 @@ var resolveSkeletonView = (view) => {
 };
 
 // src/primitives/skeleton/index.tsx
-import { jsx as jsx117 } from "react/jsx-runtime";
+import { jsx as jsx119 } from "react/jsx-runtime";
 var Skeleton = ({
   view,
   className,
@@ -6337,38 +6976,38 @@ var Skeleton = ({
 }) => {
   const resolvedView = resolveSkeletonView(view);
   if (resolvedView === skeletonViews.eventListItem) {
-    return /* @__PURE__ */ jsx117(EventListItemSkeletonView, { className, ariaLabel, isStandalone: true });
+    return /* @__PURE__ */ jsx119(EventListItemSkeletonView, { className, ariaLabel, isStandalone: true });
   }
   if (resolvedView === skeletonViews.eventListItemDetails) {
-    return /* @__PURE__ */ jsx117(EventListItemDetailsSkeletonView, { className, ariaLabel });
+    return /* @__PURE__ */ jsx119(EventListItemDetailsSkeletonView, { className, ariaLabel });
   }
   if (resolvedView === skeletonViews.marketDetailsMinified) {
-    return /* @__PURE__ */ jsx117(MarketDetailsSkeletonView, { className, ariaLabel, isDetailed: false });
+    return /* @__PURE__ */ jsx119(MarketDetailsSkeletonView, { className, ariaLabel, isDetailed: false });
   }
   if (resolvedView === skeletonViews.marketDetailsDetailed) {
-    return /* @__PURE__ */ jsx117(MarketDetailsSkeletonView, { className, ariaLabel, isDetailed: true });
+    return /* @__PURE__ */ jsx119(MarketDetailsSkeletonView, { className, ariaLabel, isDetailed: true });
   }
   if (resolvedView === skeletonViews.settlement) {
-    return /* @__PURE__ */ jsx117(SettlementSkeletonView, { className, ariaLabel });
+    return /* @__PURE__ */ jsx119(SettlementSkeletonView, { className, ariaLabel });
   }
   if (resolvedView === skeletonViews.placeOrder) {
-    return /* @__PURE__ */ jsx117(PlaceOrderSkeletonView, { className, ariaLabel });
+    return /* @__PURE__ */ jsx119(PlaceOrderSkeletonView, { className, ariaLabel });
   }
   if (resolvedView === skeletonViews.search) {
-    return /* @__PURE__ */ jsx117(SearchSkeletonView, { className, ariaLabel });
+    return /* @__PURE__ */ jsx119(SearchSkeletonView, { className, ariaLabel });
   }
   if (resolvedView === skeletonViews.userProfileOverview) {
-    return /* @__PURE__ */ jsx117(UserProfileOverviewSkeletonView, { className, ariaLabel });
+    return /* @__PURE__ */ jsx119(UserProfileOverviewSkeletonView, { className, ariaLabel });
   }
   if (resolvedView === skeletonViews.userProfilePositionsActivity) {
-    return /* @__PURE__ */ jsx117(UserProfilePositionsActivitySkeletonView, { className, ariaLabel });
+    return /* @__PURE__ */ jsx119(UserProfilePositionsActivitySkeletonView, { className, ariaLabel });
   }
-  return /* @__PURE__ */ jsx117(EventListSkeletonView, { className, ariaLabel, withSidebar });
+  return /* @__PURE__ */ jsx119(EventListSkeletonView, { className, ariaLabel, withSidebar });
 };
 Skeleton.displayName = "Skeleton";
 
 // src/primitives/venue-logo/index.tsx
-import { useLabels as useLabels9 } from "@agg-build/hooks";
+import { useLabels as useLabels10 } from "@agg-build/hooks";
 
 // src/primitives/venue-logo/venue-logo.constants.ts
 import { Venue as Venue11 } from "@agg-build/sdk";
@@ -6386,7 +7025,7 @@ var resolveLogoPrimaryColor = ({
 };
 
 // src/primitives/venue-logo/svg/default-venue.tsx
-import { jsx as jsx118, jsxs as jsxs113 } from "react/jsx-runtime";
+import { jsx as jsx120, jsxs as jsxs115 } from "react/jsx-runtime";
 var DefaultVenueIcon = (_a) => {
   var _b = _a, {
     title: title2,
@@ -6404,7 +7043,7 @@ var DefaultVenueIcon = (_a) => {
     isColor,
     color
   });
-  return /* @__PURE__ */ jsxs113(
+  return /* @__PURE__ */ jsxs115(
     "svg",
     __spreadProps(__spreadValues(__spreadValues({
       viewBox: "0 0 100 100",
@@ -6412,18 +7051,101 @@ var DefaultVenueIcon = (_a) => {
       fill: "none"
     }, getIconA11yProps(title2)), props), {
       children: [
-        title2 ? /* @__PURE__ */ jsx118("title", { children: title2 }) : null,
-        /* @__PURE__ */ jsx118("circle", { cx: "50", cy: "50", r: "45", stroke: primaryColor, strokeWidth: "6", fill: "none" }),
-        /* @__PURE__ */ jsx118("circle", { cx: "50", cy: "50", r: "8", fill: primaryColor })
+        title2 ? /* @__PURE__ */ jsx120("title", { children: title2 }) : null,
+        /* @__PURE__ */ jsx120("circle", { cx: "50", cy: "50", r: "45", stroke: primaryColor, strokeWidth: "6", fill: "none" }),
+        /* @__PURE__ */ jsx120("circle", { cx: "50", cy: "50", r: "8", fill: primaryColor })
       ]
     })
   );
 };
 
+// src/primitives/venue-logo/svg/logo-betdex.tsx
+import { useId as useId2 } from "react";
+import { Fragment as Fragment6, jsx as jsx121, jsxs as jsxs116 } from "react/jsx-runtime";
+var BETDEX_LOGO_COLORS = {
+  primary: "#32C5FF",
+  middle: "#B620E0",
+  end: "#F7B500",
+  center: "#1C0631"
+};
+var OUTLINE = "M174.007 2.68402C182.646 -0.894677 192.354 -0.894672 200.993 2.68403L308.643 47.274C317.283 50.8527 324.147 57.717 327.726 66.3567L372.316 174.007C375.895 182.646 375.895 192.354 372.316 200.993L327.726 308.643C324.147 317.283 317.283 324.147 308.643 327.726L200.993 372.316C192.354 375.895 182.646 375.895 174.007 372.316L66.3567 327.726C57.717 324.147 50.8527 317.283 47.274 308.643L2.68402 200.993C-0.894677 192.354 -0.894672 182.646 2.68403 174.007L47.274 66.3567C50.8527 57.717 57.717 50.8527 66.3567 47.274L174.007 2.68402Z";
+var CENTER = "M165.207 272.668C153.758 243.974 131.026 221.242 102.332 209.793L101.18 209.333C81.4522 201.462 81.4522 173.538 101.18 165.667L102.332 165.207C131.026 153.758 153.758 131.026 165.207 102.332L165.667 101.18C173.538 81.4522 201.462 81.4522 209.333 101.18L209.793 102.332C221.242 131.026 243.974 153.758 272.668 165.207L273.82 165.667C293.548 173.538 293.548 201.462 273.82 209.333L272.668 209.793C243.974 221.242 221.242 243.974 209.793 272.668L209.333 273.82C201.462 293.548 173.538 293.548 165.667 273.82L165.207 272.668Z";
+var RING = "M286.278 79.1807L194.834 41.3036C190.515 39.5142 185.661 39.5142 181.341 41.3036L89.8974 79.1807C85.5776 80.9701 82.1454 84.4022 80.3561 88.7221L42.4789 180.166C40.6896 184.485 40.6896 189.339 42.4789 193.659L80.3561 285.103C82.1454 289.422 85.5775 292.855 89.8974 294.644L181.341 332.521C185.661 334.31 190.515 334.31 194.834 332.521L286.278 294.644C290.598 292.855 294.03 289.422 295.819 285.103L333.696 193.659C335.486 189.339 335.486 184.485 333.696 180.166L295.819 88.7221C294.03 84.4022 290.598 80.9701 286.278 79.1807ZM201.581 25.0155C192.941 21.4368 183.234 21.4368 174.594 25.0155L83.1507 62.8926C74.5109 66.4713 67.6467 73.3356 64.068 81.9753L26.1908 173.419C22.6121 182.059 22.6121 191.766 26.1908 200.406L64.068 291.849C67.6467 300.489 74.5109 307.353 83.1507 310.932L174.594 348.809C183.234 352.388 192.941 352.388 201.581 348.809L293.025 310.932C301.664 307.353 308.529 300.489 312.107 291.849L349.984 200.406C353.563 191.766 353.563 182.059 349.984 173.419L312.107 81.9753C308.529 73.3356 301.664 66.4713 293.025 62.8926L201.581 25.0155Z";
+function LogoBetdexIcon(_a) {
+  var _b = _a, {
+    title: title2,
+    className,
+    isColor = true,
+    color
+  } = _b, props = __objRest(_b, [
+    "title",
+    "className",
+    "isColor",
+    "color"
+  ]);
+  const gradientId = useId2();
+  const primary = resolveLogoPrimaryColor({
+    brandColor: BETDEX_LOGO_COLORS.primary,
+    isColor,
+    color
+  });
+  const monochrome = !isColor || !!(color == null ? void 0 : color.trim());
+  return /* @__PURE__ */ jsxs116(
+    "svg",
+    __spreadProps(__spreadValues(__spreadValues({
+      viewBox: "0 0 375 375",
+      className,
+      fill: "none"
+    }, getIconA11yProps(title2)), props), {
+      children: [
+        title2 ? /* @__PURE__ */ jsx121("title", { children: title2 }) : null,
+        monochrome ? /* @__PURE__ */ jsx121(
+          "path",
+          {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: OUTLINE + " " + CENTER + " " + RING,
+            fill: primary
+          }
+        ) : /* @__PURE__ */ jsxs116(Fragment6, { children: [
+          /* @__PURE__ */ jsx121(
+            "path",
+            {
+              fillRule: "evenodd",
+              clipRule: "evenodd",
+              d: OUTLINE,
+              fill: "url(#" + gradientId + ")"
+            }
+          ),
+          /* @__PURE__ */ jsx121("path", { fillRule: "evenodd", clipRule: "evenodd", d: CENTER, fill: BETDEX_LOGO_COLORS.center }),
+          /* @__PURE__ */ jsx121("path", { fillRule: "evenodd", clipRule: "evenodd", d: RING, fill: "white" }),
+          /* @__PURE__ */ jsx121("defs", { children: /* @__PURE__ */ jsxs116(
+            "linearGradient",
+            {
+              id: gradientId,
+              x1: "187.5",
+              y1: "-187.5",
+              x2: "-187.5",
+              y2: "187.5",
+              gradientUnits: "userSpaceOnUse",
+              children: [
+                /* @__PURE__ */ jsx121("stop", { stopColor: BETDEX_LOGO_COLORS.primary }),
+                /* @__PURE__ */ jsx121("stop", { offset: "0.512584", stopColor: BETDEX_LOGO_COLORS.middle }),
+                /* @__PURE__ */ jsx121("stop", { offset: "1", stopColor: BETDEX_LOGO_COLORS.end })
+              ]
+            }
+          ) })
+        ] })
+      ]
+    })
+  );
+}
+LogoBetdexIcon.displayName = "LogoBetdexIcon";
+
 // src/primitives/venue-logo/svg/logo-hyperliquid.tsx
 import { useAggUiConfig } from "@agg-build/hooks";
 import { Venue } from "@agg-build/sdk";
-import { jsx as jsx119, jsxs as jsxs114 } from "react/jsx-runtime";
+import { jsx as jsx122, jsxs as jsxs117 } from "react/jsx-runtime";
 var LogoHyperliquidIcon = (_a) => {
   var _b = _a, {
     title: title2,
@@ -6446,7 +7168,7 @@ var LogoHyperliquidIcon = (_a) => {
     isColor,
     color
   });
-  return /* @__PURE__ */ jsxs114(
+  return /* @__PURE__ */ jsxs117(
     "svg",
     __spreadProps(__spreadValues(__spreadValues({
       viewBox: "0 0 100 100",
@@ -6454,8 +7176,8 @@ var LogoHyperliquidIcon = (_a) => {
       fill: "none"
     }, getIconA11yProps(title2)), props), {
       children: [
-        title2 ? /* @__PURE__ */ jsx119("title", { children: title2 }) : null,
-        /* @__PURE__ */ jsx119(
+        title2 ? /* @__PURE__ */ jsx122("title", { children: title2 }) : null,
+        /* @__PURE__ */ jsx122(
           "path",
           {
             d: "M82 49.2724C82 70.431 69.0516 77.2204 62.2292 71.175C56.6135 66.2457 54.9427 55.8293 46.496 54.7597C35.7752 53.4112 34.847 67.6875 27.7926 67.6875C19.578 67.6875 18 55.7363 18 49.5979C18 43.3201 19.7636 34.7636 26.7716 34.7636C34.9398 34.7636 35.4039 46.9938 45.6142 46.3427C55.7781 45.6452 55.9637 32.9034 62.5542 27.4626C68.3089 22.7658 82 27.8346 82 49.2724Z",
@@ -6471,7 +7193,7 @@ LogoHyperliquidIcon.displayName = "LogoHyperliquidIcon";
 // src/primitives/venue-logo/svg/logo-kalshi.tsx
 import { useAggUiConfig as useAggUiConfig2 } from "@agg-build/hooks";
 import { Venue as Venue2 } from "@agg-build/sdk";
-import { jsx as jsx120, jsxs as jsxs115 } from "react/jsx-runtime";
+import { jsx as jsx123, jsxs as jsxs118 } from "react/jsx-runtime";
 var LogoKalshiIcon = (_a) => {
   var _b = _a, {
     title: title2,
@@ -6494,7 +7216,7 @@ var LogoKalshiIcon = (_a) => {
     isColor,
     color
   });
-  return /* @__PURE__ */ jsxs115(
+  return /* @__PURE__ */ jsxs118(
     "svg",
     __spreadProps(__spreadValues(__spreadValues({
       viewBox: "0 0 100 100",
@@ -6502,8 +7224,8 @@ var LogoKalshiIcon = (_a) => {
       fill: "none"
     }, getIconA11yProps(title2)), props), {
       children: [
-        title2 ? /* @__PURE__ */ jsx120("title", { children: title2 }) : null,
-        /* @__PURE__ */ jsx120(
+        title2 ? /* @__PURE__ */ jsx123("title", { children: title2 }) : null,
+        /* @__PURE__ */ jsx123(
           "path",
           {
             d: "M54.9798 47.579L79.4249 85.9995H58.2273L38.2531 52.9344V85.9995H20.4189V13.9995H38.2531V45.4356L59.6547 13.9995H78.7119L54.9798 47.579Z",
@@ -6519,7 +7241,7 @@ LogoKalshiIcon.displayName = "LogoKalshiIcon";
 // src/primitives/venue-logo/svg/logo-limitless.tsx
 import { useAggUiConfig as useAggUiConfig3 } from "@agg-build/hooks";
 import { Venue as Venue3 } from "@agg-build/sdk";
-import { jsx as jsx121, jsxs as jsxs116 } from "react/jsx-runtime";
+import { jsx as jsx124, jsxs as jsxs119 } from "react/jsx-runtime";
 var LogoLimitlessIcon = (_a) => {
   var _b = _a, {
     title: title2,
@@ -6542,7 +7264,7 @@ var LogoLimitlessIcon = (_a) => {
     isColor,
     color
   });
-  return /* @__PURE__ */ jsxs116(
+  return /* @__PURE__ */ jsxs119(
     "svg",
     __spreadProps(__spreadValues(__spreadValues({
       viewBox: "0 0 100 100",
@@ -6550,8 +7272,8 @@ var LogoLimitlessIcon = (_a) => {
       fill: "none"
     }, getIconA11yProps(title2)), props), {
       children: [
-        title2 ? /* @__PURE__ */ jsx121("title", { children: title2 }) : null,
-        /* @__PURE__ */ jsx121(
+        title2 ? /* @__PURE__ */ jsx124("title", { children: title2 }) : null,
+        /* @__PURE__ */ jsx124(
           "path",
           {
             d: "M78.2762 44.4662H67.7966L81.9152 30.0554L82 29.9706L76.8528 24.8176H62.8524V21.6803C62.8524 19.6513 61.2036 18 59.1777 18H44.1555C42.1297 18 40.4809 19.6513 40.4809 21.6803V48.171H21.7238C19.6979 48.171 18.0491 49.8223 18.0491 51.8512C18.0491 53.8804 19.6979 55.5317 21.7238 55.5317H32.2034L18.0848 69.9379L18 70.0227L23.145 75.1755H37.1476V78.3195C37.1476 80.3487 38.7964 82 40.8222 82H55.8444C57.8703 82 59.5191 80.3487 59.5191 78.3195V51.8267H78.2762C80.3021 51.8267 81.9509 50.1754 81.9509 48.1464C81.9509 46.1175 80.3021 44.4662 78.2762 44.4662ZM57.9886 78.3173C57.9886 79.5018 57.0269 80.4647 55.8444 80.4647C54.6619 80.4647 53.7003 79.5018 53.7003 78.3173V57.2411L38.2096 73.0506L35.1752 70.0137L50.8712 54.0009H36.7459C35.5634 54.0009 34.6018 53.0377 34.6018 51.8535C34.6018 50.6692 35.5634 49.7038 36.7459 49.7038H54.8204C56.5673 49.7038 57.9886 51.1273 57.9886 52.8769V78.3195V78.3173ZM78.2762 50.2938H60.2018C58.4549 50.2938 57.0336 48.8704 57.0336 47.1208V21.6781C57.0336 20.4938 57.9953 19.5307 59.1777 19.5307C60.3602 19.5307 61.3241 20.4938 61.3241 21.6781V42.7544L76.8126 26.9403L79.847 29.9772L64.1509 45.9968H78.2762C79.4587 45.9968 80.4204 46.9599 80.4204 48.1442C80.4204 49.3285 79.4587 50.2916 78.2762 50.2916V50.2938Z",
@@ -6567,7 +7289,7 @@ LogoLimitlessIcon.displayName = "LogoLimitlessIcon";
 // src/primitives/venue-logo/svg/logo-myriad.tsx
 import { useAggUiConfig as useAggUiConfig4 } from "@agg-build/hooks";
 import { Venue as Venue4 } from "@agg-build/sdk";
-import { jsx as jsx122, jsxs as jsxs117 } from "react/jsx-runtime";
+import { jsx as jsx125, jsxs as jsxs120 } from "react/jsx-runtime";
 var LogoMyriadIcon = (_a) => {
   var _b = _a, {
     title: title2,
@@ -6590,7 +7312,7 @@ var LogoMyriadIcon = (_a) => {
     isColor,
     color
   });
-  return /* @__PURE__ */ jsxs117(
+  return /* @__PURE__ */ jsxs120(
     "svg",
     __spreadProps(__spreadValues(__spreadValues({
       viewBox: "0 0 100 100",
@@ -6598,8 +7320,8 @@ var LogoMyriadIcon = (_a) => {
       fill: "none"
     }, getIconA11yProps(title2)), props), {
       children: [
-        title2 ? /* @__PURE__ */ jsx122("title", { children: title2 }) : null,
-        /* @__PURE__ */ jsx122(
+        title2 ? /* @__PURE__ */ jsx125("title", { children: title2 }) : null,
+        /* @__PURE__ */ jsx125(
           "path",
           {
             d: "M24.356 52.5901C24.1479 52.8348 24.0342 53.1458 24.0352 53.467L24.0394 64.9354V68.672H44.3882V58.5767H32.5776L55.2898 31.713C55.4979 31.4683 55.6116 31.1573 55.6107 30.8361V19.3656C55.6107 18.093 54.0108 17.5155 53.1874 18.4887L24.356 52.5901ZM75.9594 31.3259V35.0646L75.9637 46.533C75.9637 46.8538 75.8504 47.1639 75.6429 47.4099L46.8137 81.5113C45.9902 82.4845 44.3925 81.907 44.3925 80.6344V69.1617C44.3925 68.8409 44.5059 68.5329 44.7133 68.287L67.4234 41.4233H55.6128V31.328L75.9594 31.3259Z",
@@ -6615,7 +7337,7 @@ LogoMyriadIcon.displayName = "LogoMyriadIcon";
 // src/primitives/venue-logo/svg/logo-novig.tsx
 import { useAggUiConfig as useAggUiConfig5 } from "@agg-build/hooks";
 import { Venue as Venue5 } from "@agg-build/sdk";
-import { jsx as jsx123, jsxs as jsxs118 } from "react/jsx-runtime";
+import { jsx as jsx126, jsxs as jsxs121 } from "react/jsx-runtime";
 var LogoNovigIcon = (_a) => {
   var _b = _a, {
     title: title2,
@@ -6638,7 +7360,7 @@ var LogoNovigIcon = (_a) => {
     isColor,
     color
   });
-  return /* @__PURE__ */ jsxs118(
+  return /* @__PURE__ */ jsxs121(
     "svg",
     __spreadProps(__spreadValues(__spreadValues({
       viewBox: "0 0 100 100",
@@ -6646,12 +7368,12 @@ var LogoNovigIcon = (_a) => {
       fill: "none"
     }, getIconA11yProps(title2)), props), {
       children: [
-        title2 ? /* @__PURE__ */ jsx123("title", { children: title2 }) : null,
-        /* @__PURE__ */ jsxs118("g", { stroke: primaryColor, strokeWidth: 19.3, strokeLinecap: "round", strokeLinejoin: "round", children: [
-          /* @__PURE__ */ jsx123("path", { d: "M33.6 34.7L64.2 65.4" }),
-          /* @__PURE__ */ jsx123("path", { d: "M64.2 34.7V65.4" })
+        title2 ? /* @__PURE__ */ jsx126("title", { children: title2 }) : null,
+        /* @__PURE__ */ jsxs121("g", { stroke: primaryColor, strokeWidth: 19.3, strokeLinecap: "round", strokeLinejoin: "round", children: [
+          /* @__PURE__ */ jsx126("path", { d: "M33.6 34.7L64.2 65.4" }),
+          /* @__PURE__ */ jsx126("path", { d: "M64.2 34.7V65.4" })
         ] }),
-        /* @__PURE__ */ jsx123("circle", { cx: 32.2, cy: 65.5, r: 9.65, fill: primaryColor })
+        /* @__PURE__ */ jsx126("circle", { cx: 32.2, cy: 65.5, r: 9.65, fill: primaryColor })
       ]
     })
   );
@@ -6661,7 +7383,7 @@ LogoNovigIcon.displayName = "LogoNovigIcon";
 // src/primitives/venue-logo/svg/logo-opinion.tsx
 import { useAggUiConfig as useAggUiConfig6 } from "@agg-build/hooks";
 import { Venue as Venue6 } from "@agg-build/sdk";
-import { jsx as jsx124, jsxs as jsxs119 } from "react/jsx-runtime";
+import { jsx as jsx127, jsxs as jsxs122 } from "react/jsx-runtime";
 var LogoOpinionIcon = (_a) => {
   var _b = _a, {
     title: title2,
@@ -6684,7 +7406,7 @@ var LogoOpinionIcon = (_a) => {
     isColor,
     color
   });
-  return /* @__PURE__ */ jsxs119(
+  return /* @__PURE__ */ jsxs122(
     "svg",
     __spreadProps(__spreadValues(__spreadValues({
       viewBox: "0 0 100 100",
@@ -6692,8 +7414,8 @@ var LogoOpinionIcon = (_a) => {
       fill: "none"
     }, getIconA11yProps(title2)), props), {
       children: [
-        title2 ? /* @__PURE__ */ jsx124("title", { children: title2 }) : null,
-        /* @__PURE__ */ jsx124(
+        title2 ? /* @__PURE__ */ jsx127("title", { children: title2 }) : null,
+        /* @__PURE__ */ jsx127(
           "path",
           {
             d: "M51.8239 68.4603L56.9659 68.0094L58.8049 89.0576C61.1459 88.5314 63.4349 87.7952 65.6437 86.8578V68.1879H71.9955V83.4385C74.6496 81.6828 77.0863 79.619 79.2548 77.2898L80.0716 67.958L85.516 68.433C88.6185 62.4381 90.156 55.7558 89.9858 49.0072C89.8154 42.2584 87.9429 35.6623 84.542 29.8316L84.3394 32.1494L77.9876 31.5927L78.8042 22.2668C76.7468 20.1288 74.4594 18.225 71.9835 16.5902V31.9164H65.6317V13.1739C62.9224 12.0205 60.0929 11.173 57.1957 10.6473L59.0317 31.6441L53.8897 32.0949L51.9599 10.0482C51.3128 10.0179 50.6593 9.99976 50.006 9.99976C47.4581 9.99976 44.9161 10.2419 42.414 10.723L46.0438 31.3899L42.1297 32.0798L38.5304 11.6701C35.1755 12.6725 31.9677 14.1143 28.9905 15.9578L33.0435 31.0873L29.9705 31.9134L26.2018 17.8369C23.2938 19.9923 20.6902 22.5308 18.4615 25.3835L20.4246 30.7787L18.1833 31.5956L16.7707 27.7134C14.5111 31.0771 12.7772 34.7657 11.6287 38.652L12.2639 38.4221L20.4306 60.8471L18.1893 61.6641L10.8877 41.5963C9.21542 49.4012 9.91256 57.528 12.8896 64.9338C15.8667 72.3395 20.9879 78.6865 27.5961 83.1601L23.8031 68.9989L26.8762 68.1728L31.5162 85.4991C34.6952 87.1593 38.0844 88.3808 41.5914 89.1303L38.0132 68.7296L41.9301 68.0397L45.7684 89.8262C47.1811 89.9757 48.6007 90.0505 50.0212 90.0502C51.2583 90.0502 52.4863 89.9926 53.6963 89.8807L51.8239 68.4603ZM80.1017 37.8985L86.4385 38.4524L84.3605 62.2299L78.0087 61.6761L80.1017 37.8985ZM65.6528 38.1315H72.0046V61.9969H65.6528V38.1315ZM56.975 37.9501L59.053 61.7277L53.911 62.1785L51.8299 38.4009L56.975 37.9501ZM29.9976 62.003L23.8243 38.9486L26.8974 38.1255L33.0707 61.1649L29.9976 62.003ZM42.157 62.1603L38.0132 38.658L41.9301 37.9683L46.0709 61.4674L42.157 62.1603Z",
@@ -6709,7 +7431,7 @@ LogoOpinionIcon.displayName = "LogoOpinionIcon";
 // src/primitives/venue-logo/svg/logo-polymarket.tsx
 import { useAggUiConfig as useAggUiConfig7 } from "@agg-build/hooks";
 import { Venue as Venue7 } from "@agg-build/sdk";
-import { jsx as jsx125, jsxs as jsxs120 } from "react/jsx-runtime";
+import { jsx as jsx128, jsxs as jsxs123 } from "react/jsx-runtime";
 var LogoPolymarketIcon = (_a) => {
   var _b = _a, {
     title: title2,
@@ -6732,7 +7454,7 @@ var LogoPolymarketIcon = (_a) => {
     isColor,
     color
   });
-  return /* @__PURE__ */ jsxs120(
+  return /* @__PURE__ */ jsxs123(
     "svg",
     __spreadProps(__spreadValues(__spreadValues({
       viewBox: "0 0 100 100",
@@ -6740,8 +7462,8 @@ var LogoPolymarketIcon = (_a) => {
       fill: "none"
     }, getIconA11yProps(title2)), props), {
       children: [
-        title2 ? /* @__PURE__ */ jsx125("title", { children: title2 }) : null,
-        /* @__PURE__ */ jsx125(
+        title2 ? /* @__PURE__ */ jsx128("title", { children: title2 }) : null,
+        /* @__PURE__ */ jsx128(
           "path",
           {
             d: "M81.0904 84.2882C81.0904 87.9246 81.0904 89.7428 79.901 90.644C78.7119 91.5456 76.9613 91.0542 73.4603 90.0717L17.1975 74.2838C15.0881 73.6919 14.0332 73.3959 13.4233 72.5913C12.8135 71.7866 12.8135 70.6911 12.8135 68.5002V31.4998C12.8135 29.309 12.8135 28.2134 13.4233 27.4088C14.0332 26.6042 15.0881 26.3081 17.1975 25.7163L73.4603 9.92806C76.9613 8.94572 78.7119 8.45448 79.901 9.35587C81.0904 10.2573 81.0904 12.0755 81.0904 15.7119V84.2882ZM26.8451 69.1363L73.4308 82.2104V56.0637L26.8451 69.1363ZM20.4723 63.0711L67.0487 50L20.4723 36.929V63.0711ZM26.8446 30.8638L73.4308 43.9366V17.7896L26.8446 30.8638Z",
@@ -6756,7 +7478,7 @@ LogoPolymarketIcon.displayName = "LogoPolymarketIcon";
 
 // src/primitives/venue-logo/svg/logo-pred.tsx
 import { useAggUiConfig as useAggUiConfig8 } from "@agg-build/hooks";
-import { jsx as jsx126, jsxs as jsxs121 } from "react/jsx-runtime";
+import { jsx as jsx129, jsxs as jsxs124 } from "react/jsx-runtime";
 var PRED_LOGO_COLORS = { light: "#120C06", dark: "#F4FB37" };
 var LogoPredIcon = (_a) => {
   var _b = _a, {
@@ -6779,7 +7501,7 @@ var LogoPredIcon = (_a) => {
     isColor,
     color
   });
-  return /* @__PURE__ */ jsxs121(
+  return /* @__PURE__ */ jsxs124(
     "svg",
     __spreadProps(__spreadValues(__spreadValues({
       viewBox: "0 0 48 48",
@@ -6787,15 +7509,15 @@ var LogoPredIcon = (_a) => {
       fill: "none"
     }, getIconA11yProps(title2)), props), {
       children: [
-        title2 ? /* @__PURE__ */ jsx126("title", { children: title2 }) : null,
-        /* @__PURE__ */ jsx126(
+        title2 ? /* @__PURE__ */ jsx129("title", { children: title2 }) : null,
+        /* @__PURE__ */ jsx129(
           "path",
           {
             d: "M13.2063 24.447L30.8869 21.6235L31.7298 19.898L4 10.4414L10.9436 16.4694L5.95218 41.9708L13.2063 24.447Z",
             fill: primaryColor
           }
         ),
-        /* @__PURE__ */ jsx126(
+        /* @__PURE__ */ jsx129(
           "path",
           {
             d: "M34.3927 24.0014L16.7121 26.8473L15.8691 28.5504L43.599 38.0294L36.6554 31.979L41.6468 6.5L34.3927 24.0014Z",
@@ -6811,7 +7533,7 @@ LogoPredIcon.displayName = "LogoPredIcon";
 // src/primitives/venue-logo/svg/logo-predict.tsx
 import { useAggUiConfig as useAggUiConfig9 } from "@agg-build/hooks";
 import { Venue as Venue8 } from "@agg-build/sdk";
-import { jsx as jsx127, jsxs as jsxs122 } from "react/jsx-runtime";
+import { jsx as jsx130, jsxs as jsxs125 } from "react/jsx-runtime";
 var LogoPredictIcon = (_a) => {
   var _b = _a, {
     title: title2,
@@ -6834,7 +7556,7 @@ var LogoPredictIcon = (_a) => {
     isColor,
     color
   });
-  return /* @__PURE__ */ jsxs122(
+  return /* @__PURE__ */ jsxs125(
     "svg",
     __spreadProps(__spreadValues(__spreadValues({
       viewBox: "0 0 100 100",
@@ -6842,8 +7564,8 @@ var LogoPredictIcon = (_a) => {
       fill: "none"
     }, getIconA11yProps(title2)), props), {
       children: [
-        title2 ? /* @__PURE__ */ jsx127("title", { children: title2 }) : null,
-        /* @__PURE__ */ jsx127(
+        title2 ? /* @__PURE__ */ jsx130("title", { children: title2 }) : null,
+        /* @__PURE__ */ jsx130(
           "path",
           {
             fillRule: "evenodd",
@@ -6861,7 +7583,7 @@ LogoPredictIcon.displayName = "LogoPredictIcon";
 // src/primitives/venue-logo/svg/logo-probable.tsx
 import { useAggUiConfig as useAggUiConfig10 } from "@agg-build/hooks";
 import { Venue as Venue9 } from "@agg-build/sdk";
-import { jsx as jsx128, jsxs as jsxs123 } from "react/jsx-runtime";
+import { jsx as jsx131, jsxs as jsxs126 } from "react/jsx-runtime";
 var LogoProbableIcon = (_a) => {
   var _b = _a, {
     title: title2,
@@ -6884,7 +7606,7 @@ var LogoProbableIcon = (_a) => {
     isColor,
     color
   });
-  return /* @__PURE__ */ jsxs123(
+  return /* @__PURE__ */ jsxs126(
     "svg",
     __spreadProps(__spreadValues(__spreadValues({
       viewBox: "0 0 100 100",
@@ -6892,16 +7614,16 @@ var LogoProbableIcon = (_a) => {
       fill: "none"
     }, getIconA11yProps(title2)), props), {
       children: [
-        title2 ? /* @__PURE__ */ jsx128("title", { children: title2 }) : null,
-        /* @__PURE__ */ jsx128(
+        title2 ? /* @__PURE__ */ jsx131("title", { children: title2 }) : null,
+        /* @__PURE__ */ jsx131(
           "path",
           {
             d: "M75.625 59.3489C75.6247 53.7323 71.0719 49.1792 65.4551 49.179H33.9209C28.3039 49.179 23.7503 53.7321 23.75 59.3489C23.75 64.9659 28.3038 69.5198 33.9209 69.5198H65.4551C71.0719 69.5195 75.625 64.9658 75.625 59.3489ZM90.625 59.3489C90.625 73.2501 79.3562 84.5195 65.4551 84.5198H33.9209C20.0196 84.5198 8.75 73.2502 8.75 59.3489C8.75026 45.4477 20.0198 34.179 33.9209 34.179H65.4551C79.3559 34.1792 90.6247 45.4478 90.625 59.3489Z",
             fill: primaryColor
           }
         ),
-        /* @__PURE__ */ jsx128("path", { d: "M90.9329 15.4546V30.4546H8.90234V15.4546H90.9329Z", fill: primaryColor }),
-        /* @__PURE__ */ jsx128(
+        /* @__PURE__ */ jsx131("path", { d: "M90.9329 15.4546V30.4546H8.90234V15.4546H90.9329Z", fill: primaryColor }),
+        /* @__PURE__ */ jsx131(
           "path",
           {
             d: "M64.5742 51.3496C68.9894 51.3496 72.5742 54.9344 72.5742 59.3496C72.5742 63.7648 68.9894 67.3496 64.5742 67.3496C60.159 67.3496 56.5742 63.7648 56.5742 59.3496C56.5742 54.9344 60.159 51.3496 64.5742 51.3496Z",
@@ -6917,8 +7639,8 @@ LogoProbableIcon.displayName = "LogoProbableIcon";
 // src/primitives/venue-logo/svg/logo-prophetx.tsx
 import { useAggUiConfig as useAggUiConfig11 } from "@agg-build/hooks";
 import { Venue as Venue10 } from "@agg-build/sdk";
-import { useId } from "react";
-import { jsx as jsx129, jsxs as jsxs124 } from "react/jsx-runtime";
+import { useId as useId3 } from "react";
+import { jsx as jsx132, jsxs as jsxs127 } from "react/jsx-runtime";
 var LogoProphetXIcon = (_a) => {
   var _b = _a, {
     title: title2,
@@ -6936,7 +7658,7 @@ var LogoProphetXIcon = (_a) => {
     general: { theme }
   } = useAggUiConfig11();
   const isDarkTheme = theme === "dark";
-  const uid = useId();
+  const uid = useId3();
   const primaryColor = resolveLogoPrimaryColor({
     // First stop of the official gradient — see `lineColorByVenue`.
     brandColor: (_a2 = resolveVenueLineColor(Venue10.prophetx, isDarkTheme)) != null ? _a2 : "#1DC29A",
@@ -6946,7 +7668,7 @@ var LogoProphetXIcon = (_a) => {
   const isMonochrome = !isColor || Boolean(color == null ? void 0 : color.trim());
   const gradientTransform = "matrix(2.750846, 0, 0, 2.750846, -1935.152964, 138.485876)";
   const fillFor = (n) => isMonochrome ? primaryColor : `url(#${uid}-${n})`;
-  return /* @__PURE__ */ jsxs124(
+  return /* @__PURE__ */ jsxs127(
     "svg",
     __spreadProps(__spreadValues(__spreadValues({
       viewBox: "81.867 138.419 424.492 272.214",
@@ -6954,9 +7676,9 @@ var LogoProphetXIcon = (_a) => {
       fill: "none"
     }, getIconA11yProps(title2)), props), {
       children: [
-        title2 ? /* @__PURE__ */ jsx129("title", { children: title2 }) : null,
-        isMonochrome ? null : /* @__PURE__ */ jsxs124("defs", { children: [
-          /* @__PURE__ */ jsxs124(
+        title2 ? /* @__PURE__ */ jsx132("title", { children: title2 }) : null,
+        isMonochrome ? null : /* @__PURE__ */ jsxs127("defs", { children: [
+          /* @__PURE__ */ jsxs127(
             "linearGradient",
             {
               id: `${uid}-0`,
@@ -6967,14 +7689,14 @@ var LogoProphetXIcon = (_a) => {
               gradientUnits: "userSpaceOnUse",
               gradientTransform,
               children: [
-                /* @__PURE__ */ jsx129("stop", { stopColor: "#1DC29A" }),
-                /* @__PURE__ */ jsx129("stop", { offset: "0.1032", stopColor: "#19BE9D" }),
-                /* @__PURE__ */ jsx129("stop", { offset: "0.6255", stopColor: "#06ADAA" }),
-                /* @__PURE__ */ jsx129("stop", { offset: "1", stopColor: "#00A7AF" })
+                /* @__PURE__ */ jsx132("stop", { stopColor: "#1DC29A" }),
+                /* @__PURE__ */ jsx132("stop", { offset: "0.1032", stopColor: "#19BE9D" }),
+                /* @__PURE__ */ jsx132("stop", { offset: "0.6255", stopColor: "#06ADAA" }),
+                /* @__PURE__ */ jsx132("stop", { offset: "1", stopColor: "#00A7AF" })
               ]
             }
           ),
-          /* @__PURE__ */ jsxs124(
+          /* @__PURE__ */ jsxs127(
             "linearGradient",
             {
               id: `${uid}-1`,
@@ -6985,12 +7707,12 @@ var LogoProphetXIcon = (_a) => {
               gradientUnits: "userSpaceOnUse",
               gradientTransform,
               children: [
-                /* @__PURE__ */ jsx129("stop", { stopColor: "#1DC29A" }),
-                /* @__PURE__ */ jsx129("stop", { offset: "1", stopColor: "#00A7AF" })
+                /* @__PURE__ */ jsx132("stop", { stopColor: "#1DC29A" }),
+                /* @__PURE__ */ jsx132("stop", { offset: "1", stopColor: "#00A7AF" })
               ]
             }
           ),
-          /* @__PURE__ */ jsxs124(
+          /* @__PURE__ */ jsxs127(
             "linearGradient",
             {
               id: `${uid}-2`,
@@ -7001,29 +7723,29 @@ var LogoProphetXIcon = (_a) => {
               gradientUnits: "userSpaceOnUse",
               gradientTransform,
               children: [
-                /* @__PURE__ */ jsx129("stop", { stopColor: "#1DC29A" }),
-                /* @__PURE__ */ jsx129("stop", { offset: "0.3631", stopColor: "#18BD9E" }),
-                /* @__PURE__ */ jsx129("stop", { offset: "0.802", stopColor: "#09AFA8" }),
-                /* @__PURE__ */ jsx129("stop", { offset: "1", stopColor: "#00A7AF" })
+                /* @__PURE__ */ jsx132("stop", { stopColor: "#1DC29A" }),
+                /* @__PURE__ */ jsx132("stop", { offset: "0.3631", stopColor: "#18BD9E" }),
+                /* @__PURE__ */ jsx132("stop", { offset: "0.802", stopColor: "#09AFA8" }),
+                /* @__PURE__ */ jsx132("stop", { offset: "1", stopColor: "#00A7AF" })
               ]
             }
           )
         ] }),
-        /* @__PURE__ */ jsx129(
+        /* @__PURE__ */ jsx132(
           "path",
           {
             d: "M 282.449 326.493 L 332.847 402.716 L 426.472 402.716 L 344.879 279.66 L 282.449 326.493 Z",
             fill: fillFor(0)
           }
         ),
-        /* @__PURE__ */ jsx129(
+        /* @__PURE__ */ jsx132(
           "path",
           {
             d: "M 379.966 146.995 L 389.569 161.125 L 313.636 218.145 L 307.055 222.927 L 244.624 269.759 L 238 274.873 L 162.069 331.56 L 152.804 317.473 L 87.353 402.71 L 209.197 402.71 L 199.888 388.287 L 275.818 331.56 L 282.443 326.488 L 344.873 279.655 L 351.456 274.832 L 427.388 218.145 L 436.694 232.232 L 502.101 146.995 L 379.966 146.995 Z",
             fill: fillFor(1)
           }
         ),
-        /* @__PURE__ */ jsx129(
+        /* @__PURE__ */ jsx132(
           "path",
           {
             d: "M 162.993 146.995 L 244.624 269.759 L 307.055 222.927 L 256.323 146.995 L 162.993 146.995 Z",
@@ -7036,6 +7758,45 @@ var LogoProphetXIcon = (_a) => {
 };
 LogoProphetXIcon.displayName = "LogoProphetXIcon";
 
+// src/primitives/venue-logo/svg/logo-tiprun.tsx
+import { jsx as jsx133, jsxs as jsxs128 } from "react/jsx-runtime";
+var TIPRUN_LOGO_COLOR = "#FF6B1A";
+var LogoTiprunIcon = (_a) => {
+  var _b = _a, {
+    title: title2,
+    className,
+    isColor = true,
+    color
+  } = _b, props = __objRest(_b, [
+    "title",
+    "className",
+    "isColor",
+    "color"
+  ]);
+  const primaryColor = resolveLogoPrimaryColor({
+    brandColor: TIPRUN_LOGO_COLOR,
+    isColor,
+    color
+  });
+  return /* @__PURE__ */ jsxs128(
+    "svg",
+    __spreadProps(__spreadValues(__spreadValues({
+      viewBox: "0 0 1024 1024",
+      className,
+      fill: "none"
+    }, getIconA11yProps(title2)), props), {
+      children: [
+        title2 ? /* @__PURE__ */ jsx133("title", { children: title2 }) : null,
+        /* @__PURE__ */ jsx133("path", { d: "M979.996 43.9453H43.9531V160.951H979.996V43.9453Z", fill: primaryColor }),
+        /* @__PURE__ */ jsx133("path", { d: "M277.974 316.977H160.969V980.007H277.974V316.977Z", fill: primaryColor }),
+        /* @__PURE__ */ jsx133("path", { d: "M570.458 147.953H453.453V979.991H570.458V147.953Z", fill: primaryColor }),
+        /* @__PURE__ */ jsx133("path", { d: "M862.99 316.977H745.984V980.007H862.99V316.977Z", fill: primaryColor })
+      ]
+    })
+  );
+};
+LogoTiprunIcon.displayName = "LogoTiprunIcon";
+
 // src/primitives/venue-logo/venue-logo.constants.ts
 var venueLogoRegistry = {
   [Venue11.kalshi]: LogoKalshiIcon,
@@ -7043,12 +7804,14 @@ var venueLogoRegistry = {
   [Venue11.opinion]: LogoOpinionIcon,
   [Venue11.polymarket]: LogoPolymarketIcon,
   [Venue11.pred]: LogoPredIcon,
+  [Venue11.tiprun]: LogoTiprunIcon,
   [Venue11.predict]: LogoPredictIcon,
   [Venue11.probable]: LogoProbableIcon,
   [Venue11.myriad]: LogoMyriadIcon,
   [Venue11.hyperliquid]: LogoHyperliquidIcon,
   [Venue11.novig]: LogoNovigIcon,
-  [Venue11.prophetx]: LogoProphetXIcon
+  [Venue11.prophetx]: LogoProphetXIcon,
+  [Venue11.betdex]: LogoBetdexIcon
 };
 var VENUE_LOGO_BASE_URL = "https://assets.snagsolutions.io/public/prediction-markets/logos";
 var DEFAULT_VENUE_LOGO_URL = `${VENUE_LOGO_BASE_URL}/default.png`;
@@ -7060,6 +7823,7 @@ var venueLogoUrlRegistry = {
   // PRED does not yet have a mirrored Snag asset. Its official production
   // favicon is the same square brand mark used by the application itself.
   [Venue11.pred]: "https://mainnet-assets.pred.app/assets/vite-oruAfoK1.svg",
+  [Venue11.tiprun]: "https://app.tiprun.fun/favicon.svg",
   [Venue11.predict]: `${VENUE_LOGO_BASE_URL}/predict.png`,
   [Venue11.probable]: `${VENUE_LOGO_BASE_URL}/probable.png`,
   [Venue11.myriad]: `${VENUE_LOGO_BASE_URL}/myriad.png`,
@@ -7068,7 +7832,8 @@ var venueLogoUrlRegistry = {
   // Uploaded 2026-09-01 — re-verified live at 200 (50,962 bytes, image/png).
   // It returned 403 on 2026-08-26, so this row was a known gap; it is not any
   // more, and the `variant="logo"` image path now works for ProphetX.
-  [Venue11.prophetx]: `${VENUE_LOGO_BASE_URL}/prophetx.png`
+  [Venue11.prophetx]: `${VENUE_LOGO_BASE_URL}/prophetx.png`,
+  [Venue11.betdex]: "https://developers.betdex.com/mintlify-assets/_mintlify/favicons/betdex-3f84c3fa/TWK9zgQ98DFlYOZB/_generated/favicon/android-chrome-192x192.png"
 };
 var venueLogoLabels = {
   [Venue11.kalshi]: "Kalshi",
@@ -7076,12 +7841,14 @@ var venueLogoLabels = {
   [Venue11.opinion]: "Opinion",
   [Venue11.polymarket]: "Polymarket",
   [Venue11.pred]: "PRED",
+  [Venue11.tiprun]: "Tip Run",
   [Venue11.predict]: "Predict",
   [Venue11.probable]: "Probable",
   [Venue11.myriad]: "Myriad",
   [Venue11.hyperliquid]: "Hyperliquid",
   [Venue11.novig]: "Novig",
-  [Venue11.prophetx]: "ProphetX"
+  [Venue11.prophetx]: "ProphetX",
+  [Venue11.betdex]: "BETDEX"
 };
 var DEFAULT_VENUE_LABEL = "Market";
 var venueLogoNames = Object.keys(venueLogoRegistry);
@@ -7098,6 +7865,7 @@ var lineColorByVenue = {
     [Venue11.polymarket]: "#2E5CFF",
     // On light surfaces use the dark half of PRED's official yellow/dark mark.
     [Venue11.pred]: PRED_LOGO_COLORS.light,
+    [Venue11.tiprun]: TIPRUN_LOGO_COLOR,
     [Venue11.predict]: "#6D57F8",
     [Venue11.probable]: "#F05923",
     [Venue11.myriad]: "#000000",
@@ -7110,7 +7878,8 @@ var lineColorByVenue = {
     // mark is a gradient, so any single value is a choice: the green end reads
     // on both themes where the teal end goes muddy on dark, and it is the stop
     // all three of the asset's gradients start from.
-    [Venue11.prophetx]: "#1DC29A"
+    [Venue11.prophetx]: "#1DC29A",
+    [Venue11.betdex]: BETDEX_LOGO_COLORS.primary
   },
   dark: {
     [Venue11.kalshi]: "#00D295",
@@ -7118,12 +7887,14 @@ var lineColorByVenue = {
     [Venue11.opinion]: "#FFFFFF",
     [Venue11.polymarket]: "#2E5CFF",
     [Venue11.pred]: PRED_LOGO_COLORS.dark,
+    [Venue11.tiprun]: TIPRUN_LOGO_COLOR,
     [Venue11.predict]: "#6D57F8",
     [Venue11.probable]: "#F05923",
     [Venue11.myriad]: "#FFFFFF",
     [Venue11.hyperliquid]: "#97FCE4",
     [Venue11.novig]: "#179BE7",
-    [Venue11.prophetx]: "#1DC29A"
+    [Venue11.prophetx]: "#1DC29A",
+    [Venue11.betdex]: BETDEX_LOGO_COLORS.primary
   }
 };
 var resolveVenueLineColor = (venue, isDarkTheme) => {
@@ -7162,7 +7933,7 @@ var resolveVenueLogoIsColor = ({
 };
 
 // src/primitives/venue-logo/index.tsx
-import { jsx as jsx130 } from "react/jsx-runtime";
+import { jsx as jsx134 } from "react/jsx-runtime";
 var VenueLogo = ({
   venue,
   variant = "icon",
@@ -7175,7 +7946,7 @@ var VenueLogo = ({
   title: title2
 }) => {
   var _a, _b;
-  const labels = useLabels9();
+  const labels = useLabels10();
   const sizeClass = sizeClasses2[size];
   const resolvedLabel = resolveVenueLogoLabel({
     ariaLabel,
@@ -7188,7 +7959,7 @@ var VenueLogo = ({
     console.warn(`[AggUI] Unknown venue "${venue}" \u2014 using default logo`);
   }
   if (variant === "logo") {
-    return /* @__PURE__ */ jsx130(
+    return /* @__PURE__ */ jsx134(
       RemoteImage,
       {
         src: (_a = venueLogoUrlRegistry[venue]) != null ? _a : DEFAULT_VENUE_LOGO_URL,
@@ -7203,7 +7974,7 @@ var VenueLogo = ({
     isColor,
     isMonochromatic
   });
-  return /* @__PURE__ */ jsx130(
+  return /* @__PURE__ */ jsx134(
     Component2,
     {
       className: cn("group/agg-venue-logo", "shrink-0", sizeClass, className),
@@ -7528,7 +8299,7 @@ var resolveYesOutcome = (market) => {
 var formatMarketProbabilityPercent = (value, formatPercent = formatWholePercent) => {
   const probability = normalizeProbability(value);
   if (probability == null) return "-";
-  const formattedValue = formatPercent(probability);
+  const formattedValue = formatPercent(Number(probability.toFixed(12)));
   if (probability > 0 && formattedValue === formatPercent(0)) {
     return "<1%";
   }
@@ -7744,7 +8515,7 @@ var mapVenueEventToSearchResult = (event, labels, formatPercent, formatCompactCu
 };
 
 // src/primitives/search/index.tsx
-import { Fragment as Fragment5, jsx as jsx131, jsxs as jsxs125 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx135, jsxs as jsxs129 } from "react/jsx-runtime";
 var SearchResultRow = ({
   item,
   resultAria,
@@ -7758,7 +8529,7 @@ var SearchResultRow = ({
   const handleResultPointerDown = (event) => {
     event.preventDefault();
   };
-  return /* @__PURE__ */ jsxs125(
+  return /* @__PURE__ */ jsxs129(
     "button",
     {
       type: "button",
@@ -7776,8 +8547,8 @@ var SearchResultRow = ({
       onClick: handleResultClick,
       "aria-label": resultAria(item.title),
       children: [
-        /* @__PURE__ */ jsxs125("div", { className: "agg-search-result-content flex min-w-0 flex-1 items-center gap-4", children: [
-          /* @__PURE__ */ jsx131(
+        /* @__PURE__ */ jsxs129("div", { className: "agg-search-result-content flex min-w-0 flex-1 items-center gap-4", children: [
+          /* @__PURE__ */ jsx135(
             RemoteImage,
             {
               src: item.thumbnailSrc,
@@ -7789,8 +8560,8 @@ var SearchResultRow = ({
               )
             }
           ),
-          /* @__PURE__ */ jsxs125("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
-            /* @__PURE__ */ jsx131(
+          /* @__PURE__ */ jsxs129("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
+            /* @__PURE__ */ jsx135(
               "p",
               {
                 className: cn(
@@ -7801,8 +8572,8 @@ var SearchResultRow = ({
                 children: item.title
               }
             ),
-            /* @__PURE__ */ jsxs125("div", { className: "agg-search-result-context flex min-w-0 items-center gap-2 text-agg-muted-foreground", children: [
-              /* @__PURE__ */ jsx131(
+            /* @__PURE__ */ jsxs129("div", { className: "agg-search-result-context flex min-w-0 items-center gap-2 text-agg-muted-foreground", children: [
+              /* @__PURE__ */ jsx135(
                 "p",
                 {
                   className: cn(
@@ -7812,7 +8583,7 @@ var SearchResultRow = ({
                   children: item.marketSummaryLabel
                 }
               ),
-              /* @__PURE__ */ jsx131("div", { className: "flex items-center gap-1", "aria-hidden": true, children: item.visibleVenues.map((venue) => /* @__PURE__ */ jsx131(
+              /* @__PURE__ */ jsx135("div", { className: "flex items-center gap-1", "aria-hidden": true, children: item.visibleVenues.map((venue) => /* @__PURE__ */ jsx135(
                 VenueLogo,
                 {
                   venue,
@@ -7822,9 +8593,9 @@ var SearchResultRow = ({
                 },
                 `${item.id}-${venue}`
               )) }),
-              item.volumeLabel ? /* @__PURE__ */ jsxs125(Fragment5, { children: [
-                /* @__PURE__ */ jsx131("span", { className: "text-agg-muted-foreground", "aria-hidden": true, children: "\xB7" }),
-                /* @__PURE__ */ jsx131(
+              item.volumeLabel ? /* @__PURE__ */ jsxs129(Fragment7, { children: [
+                /* @__PURE__ */ jsx135("span", { className: "text-agg-muted-foreground", "aria-hidden": true, children: "\xB7" }),
+                /* @__PURE__ */ jsx135(
                   "p",
                   {
                     className: cn(
@@ -7838,7 +8609,7 @@ var SearchResultRow = ({
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs125(
+        /* @__PURE__ */ jsxs129(
           "div",
           {
             className: cn(
@@ -7846,9 +8617,9 @@ var SearchResultRow = ({
               classNames == null ? void 0 : classNames.resultMeta
             ),
             children: [
-              /* @__PURE__ */ jsx131(VenueLogo, { venue: item.venue, size: "small" }),
-              /* @__PURE__ */ jsxs125("div", { className: "flex min-w-0 flex-1 items-baseline gap-2", children: [
-                item.isValueLoading ? /* @__PURE__ */ jsx131(
+              /* @__PURE__ */ jsx135(VenueLogo, { venue: item.venue, size: "small" }),
+              /* @__PURE__ */ jsxs129("div", { className: "flex min-w-0 flex-1 items-baseline gap-2", children: [
+                item.isValueLoading ? /* @__PURE__ */ jsx135(
                   "span",
                   {
                     "aria-hidden": "true",
@@ -7857,7 +8628,7 @@ var SearchResultRow = ({
                       "h-5 w-12 shrink-0 rounded-agg-sm bg-agg-separator animate-pulse"
                     )
                   }
-                ) : /* @__PURE__ */ jsx131(
+                ) : /* @__PURE__ */ jsx135(
                   "p",
                   {
                     className: cn(
@@ -7868,7 +8639,7 @@ var SearchResultRow = ({
                     children: item.valueLabel
                   }
                 ),
-                /* @__PURE__ */ jsx131(
+                /* @__PURE__ */ jsx135(
                   "p",
                   {
                     className: cn(
@@ -7882,7 +8653,7 @@ var SearchResultRow = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsx131(
+        /* @__PURE__ */ jsx135(
           Icon,
           {
             name: "chevron-right",
@@ -7905,7 +8676,7 @@ var SearchSeeAllResultsButton = ({
   const handlePointerDown = (event) => {
     event.preventDefault();
   };
-  return /* @__PURE__ */ jsxs125(
+  return /* @__PURE__ */ jsxs129(
     "button",
     {
       type: "button",
@@ -7919,8 +8690,8 @@ var SearchSeeAllResultsButton = ({
       onPointerDown: handlePointerDown,
       onClick,
       children: [
-        /* @__PURE__ */ jsx131("span", { children: label2 }),
-        /* @__PURE__ */ jsx131(Icon, { name: "chevron-right", size: "small", className: "size-[14px] text-agg-primary" })
+        /* @__PURE__ */ jsx135("span", { children: label2 }),
+        /* @__PURE__ */ jsx135(Icon, { name: "chevron-right", size: "small", className: "size-[14px] text-agg-primary" })
       ]
     }
   );
@@ -7933,21 +8704,22 @@ var Search = ({
   onSelectEvent,
   onSeeAllEvents
 }) => {
-  const labels = useLabels10();
+  const labels = useLabels11();
   const {
     search: searchConfig,
     features: { enableAnimations },
     formatting: { formatCompactCurrency, formatPercent }
-  } = useSdkUiConfig10();
+  } = useSdkUiConfig11();
   const resolvedValue = searchConfig.value;
   const trimmedValue = resolvedValue.trim();
-  const [debouncedSearchValue, setDebouncedSearchValue] = useState7(() => {
+  const [debouncedSearchValue, setDebouncedSearchValue] = useState8(() => {
     return trimmedValue.length >= MIN_SEARCH_LENGTH ? trimmedValue : "";
   });
-  const [isFocused, setIsFocused] = useState7(false);
+  const [isFocused, setIsFocused] = useState8(false);
   const shouldSearchValue = trimmedValue.length >= MIN_SEARCH_LENGTH;
+  const shouldRenderDropdown = isFocused && shouldSearchValue && !searchConfig.result && !searchConfig.isShowingAllResults;
   const shouldFetchResults = isFocused && debouncedSearchValue.length >= MIN_SEARCH_LENGTH && !searchConfig.result && !searchConfig.isShowingAllResults;
-  useEffect6(() => {
+  useEffect8(() => {
     if (!shouldSearchValue) {
       setDebouncedSearchValue("");
       return;
@@ -7962,6 +8734,7 @@ var Search = ({
   const { data: searchResults, isLoading } = useSearch({
     q: shouldFetchResults ? debouncedSearchValue : "",
     type: "events",
+    mode: "instant",
     categoryIds,
     // Server-side open-only: without it a query whose top results are
     // resolved history (recurring series) returns a full page that
@@ -7972,20 +8745,22 @@ var Search = ({
     limit: limit != null ? limit : DEFAULT_SEARCH_LIMIT,
     enabled: shouldFetchResults
   });
-  const openEvents = useMemo5(
+  const openEvents = useMemo6(
     () => filterOpenEvents(searchResults),
     [searchResults]
   );
-  const visibleVenueMarkets = useMemo5(
-    () => openEvents.flatMap((event) => {
+  const visibleVenueMarkets = useMemo6(
+    // Search keeps cached results after dismissal. Hidden rows must not retain
+    // live-store observers or request midpoint fallbacks for those results.
+    () => shouldRenderDropdown && !isLoading ? openEvents.flatMap((event) => {
       var _a;
       return (_a = event.venueMarkets) != null ? _a : [];
-    }),
-    [openEvents]
+    }) : [],
+    [isLoading, openEvents, shouldRenderDropdown]
   );
   const livePrices = useLiveOutcomePrices(visibleVenueMarkets);
   const midpointResult = useMidpoints(visibleVenueMarkets);
-  const searchDisplayPrices = useMemo5(() => {
+  const searchDisplayPrices = useMemo6(() => {
     if (!midpointResult.bestMidpointsByOutcomeId.size) return livePrices;
     if (!livePrices.size) return midpointResult.bestMidpointsByOutcomeId;
     const merged = new Map(midpointResult.bestMidpointsByOutcomeId);
@@ -7994,7 +8769,7 @@ var Search = ({
     }
     return merged;
   }, [livePrices, midpointResult.bestMidpointsByOutcomeId]);
-  const { validatedResults, eventsByResultId } = useMemo5(() => {
+  const { validatedResults, eventsByResultId } = useMemo6(() => {
     const nextEventsByResultId = /* @__PURE__ */ new Map();
     const nextResults = openEvents.map((event) => {
       const item = mapVenueEventToSearchResult(
@@ -8024,13 +8799,12 @@ var Search = ({
     searchDisplayPrices
   ]);
   const hasSearchValue = trimmedValue.length > 0;
-  const shouldRenderDropdown = isFocused && shouldSearchValue && !searchConfig.result && !searchConfig.isShowingAllResults;
   const resolvedIsActive = isFocused;
   const shouldRenderLoadingState = shouldRenderDropdown && isLoading;
   const shouldRenderNoResults = shouldRenderDropdown && !isLoading && !validatedResults.length;
   const shouldRenderResults = shouldRenderDropdown && !isLoading && !!validatedResults.length;
   const shouldRenderShortcut = !isFocused && !hasSearchValue && !(inputProps == null ? void 0 : inputProps.disabled);
-  const inputRef = useRef6(null);
+  const inputRef = useRef8(null);
   const handleSlashKey = useCallback3((event) => {
     var _a;
     if (event.key !== "/") return;
@@ -8040,7 +8814,7 @@ var Search = ({
     event.preventDefault();
     (_a = inputRef.current) == null ? void 0 : _a.focus();
   }, []);
-  useEffect6(() => {
+  useEffect8(() => {
     document.addEventListener("keydown", handleSlashKey);
     return () => {
       document.removeEventListener("keydown", handleSlashKey);
@@ -8089,14 +8863,14 @@ var Search = ({
     event.preventDefault();
     handleSeeAllResults();
   };
-  return /* @__PURE__ */ jsxs125(
+  return /* @__PURE__ */ jsxs129(
     "div",
     {
       className: cn("group/agg-search", "relative flex w-full flex-col", classNames == null ? void 0 : classNames.root),
       onFocusCapture: handleFocusWithin,
       onBlurCapture: handleBlurWithin,
       children: [
-        /* @__PURE__ */ jsx131("label", { className: "w-full", children: /* @__PURE__ */ jsxs125(
+        /* @__PURE__ */ jsx135("label", { className: "w-full", children: /* @__PURE__ */ jsxs129(
           "div",
           {
             className: cn(
@@ -8112,7 +8886,7 @@ var Search = ({
             ),
             onClick: handleFocusWithin,
             children: [
-              /* @__PURE__ */ jsx131(
+              /* @__PURE__ */ jsx135(
                 Icon,
                 {
                   name: "search",
@@ -8120,7 +8894,7 @@ var Search = ({
                   className: cn("text-agg-muted-foreground", classNames == null ? void 0 : classNames.searchIcon)
                 }
               ),
-              /* @__PURE__ */ jsx131(
+              /* @__PURE__ */ jsx135(
                 "input",
                 __spreadProps(__spreadValues({}, inputProps), {
                   ref: inputRef,
@@ -8141,11 +8915,11 @@ var Search = ({
                   )
                 })
               ),
-              shouldRenderShortcut ? /* @__PURE__ */ jsx131("div", { className: "agg-search-shortcut hidden md:flex size-6 shrink-0 items-center justify-center rounded-[4px] bg-agg-secondary-hover", children: /* @__PURE__ */ jsx131("span", { className: "font-agg-sans text-agg-sm leading-agg-5 font-agg-bold text-agg-muted-foreground", children: "/" }) }) : null
+              shouldRenderShortcut ? /* @__PURE__ */ jsx135("div", { className: "agg-search-shortcut hidden md:flex size-6 shrink-0 items-center justify-center rounded-[4px] bg-agg-secondary-hover", children: /* @__PURE__ */ jsx135("span", { className: "font-agg-sans text-agg-sm leading-agg-5 font-agg-bold text-agg-muted-foreground", children: "/" }) }) : null
             ]
           }
         ) }),
-        shouldRenderLoadingState ? /* @__PURE__ */ jsx131(
+        shouldRenderLoadingState ? /* @__PURE__ */ jsx135(
           "div",
           {
             className: cn(
@@ -8155,10 +8929,10 @@ var Search = ({
               "mt-1",
               classNames == null ? void 0 : classNames.emptyState
             ),
-            children: /* @__PURE__ */ jsx131(Skeleton, { view: "search" })
+            children: /* @__PURE__ */ jsx135(Skeleton, { view: "search" })
           }
         ) : null,
-        shouldRenderResults ? /* @__PURE__ */ jsx131(
+        shouldRenderResults ? /* @__PURE__ */ jsx135(
           "div",
           {
             className: cn(
@@ -8168,7 +8942,7 @@ var Search = ({
               "mt-1 w-full overflow-hidden rounded-agg-xl border border-agg-separator bg-agg-secondary pt-2 shadow-[0px_8px_16px_0px_rgba(0,0,0,0.1)]",
               classNames == null ? void 0 : classNames.dropdown
             ),
-            children: /* @__PURE__ */ jsxs125(
+            children: /* @__PURE__ */ jsxs129(
               "ul",
               {
                 className: cn(
@@ -8178,7 +8952,7 @@ var Search = ({
                 role: "listbox",
                 "aria-label": labels.search.resultsAria,
                 children: [
-                  validatedResults.map((item, index) => /* @__PURE__ */ jsx131(
+                  validatedResults.map((item, index) => /* @__PURE__ */ jsx135(
                     "li",
                     {
                       role: "presentation",
@@ -8187,7 +8961,7 @@ var Search = ({
                         index > 0 && "border-t border-agg-separator",
                         classNames == null ? void 0 : classNames.resultItem
                       ),
-                      children: /* @__PURE__ */ jsx131(
+                      children: /* @__PURE__ */ jsx135(
                         SearchResultRow,
                         {
                           item,
@@ -8199,12 +8973,12 @@ var Search = ({
                     },
                     item.id
                   )),
-                  /* @__PURE__ */ jsx131(
+                  /* @__PURE__ */ jsx135(
                     "li",
                     {
                       role: "presentation",
                       className: "agg-search-result-item border-t border-agg-separator",
-                      children: /* @__PURE__ */ jsx131(
+                      children: /* @__PURE__ */ jsx135(
                         SearchSeeAllResultsButton,
                         {
                           label: labels.search.seeAllResults,
@@ -8218,7 +8992,7 @@ var Search = ({
             )
           }
         ) : null,
-        shouldRenderNoResults ? /* @__PURE__ */ jsx131(
+        shouldRenderNoResults ? /* @__PURE__ */ jsx135(
           "div",
           {
             className: cn(
@@ -8228,7 +9002,7 @@ var Search = ({
               "mt-1 w-full overflow-hidden rounded-agg-xl border border-agg-separator bg-agg-secondary py-10 shadow-[0px_8px_16px_0px_rgba(0,0,0,0.1)]",
               classNames == null ? void 0 : classNames.emptyState
             ),
-            children: /* @__PURE__ */ jsxs125(
+            children: /* @__PURE__ */ jsxs129(
               "div",
               {
                 className: cn(
@@ -8238,15 +9012,15 @@ var Search = ({
                 role: "status",
                 "aria-live": "polite",
                 children: [
-                  /* @__PURE__ */ jsx131(
+                  /* @__PURE__ */ jsx135(
                     SearchEmptyIcon,
                     {
                       className: cn("h-10 w-10 text-agg-muted-foreground", classNames == null ? void 0 : classNames.emptyStateIcon),
                       "aria-hidden": true
                     }
                   ),
-                  /* @__PURE__ */ jsxs125("div", { className: "flex flex-col items-center gap-1 text-center", children: [
-                    /* @__PURE__ */ jsx131(
+                  /* @__PURE__ */ jsxs129("div", { className: "flex flex-col items-center gap-1 text-center", children: [
+                    /* @__PURE__ */ jsx135(
                       "p",
                       {
                         className: cn(
@@ -8257,7 +9031,7 @@ var Search = ({
                         children: labels.search.noResultsTitle
                       }
                     ),
-                    /* @__PURE__ */ jsx131(
+                    /* @__PURE__ */ jsx135(
                       "p",
                       {
                         className: cn(
@@ -8307,7 +9081,7 @@ var resolveHeaderSearchContent = ({
 };
 
 // src/primitives/header/index.tsx
-import { Fragment as Fragment6, jsx as jsx132, jsxs as jsxs126 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx136, jsxs as jsxs130 } from "react/jsx-runtime";
 var Header = ({
   logo,
   logoHref,
@@ -8320,8 +9094,8 @@ var Header = ({
   sticky = true,
   "aria-label": ariaLabel
 }) => {
-  const labels = useLabels11();
-  const logoContent = isHeaderLogoProps(logo) ? /* @__PURE__ */ jsx132(
+  const labels = useLabels12();
+  const logoContent = isHeaderLogoProps(logo) ? /* @__PURE__ */ jsx136(
     "img",
     {
       src: logo.src,
@@ -8330,14 +9104,14 @@ var Header = ({
       height: logo.height,
       className: cn("block max-h-full", classNames == null ? void 0 : classNames.logoElement)
     }
-  ) : logo !== void 0 ? /* @__PURE__ */ jsx132("span", { className: classNames == null ? void 0 : classNames.logoElement, children: logo }) : /* @__PURE__ */ jsx132(
+  ) : logo !== void 0 ? /* @__PURE__ */ jsx136("span", { className: classNames == null ? void 0 : classNames.logoElement, children: logo }) : /* @__PURE__ */ jsx136(
     AggLogo,
     {
       className: cn("h-6 w-auto text-agg-foreground", classNames == null ? void 0 : classNames.logoElement),
       title: labels.header.logoAria
     }
   );
-  const wrappedLogo = logoHref ? /* @__PURE__ */ jsx132(
+  const wrappedLogo = logoHref ? /* @__PURE__ */ jsx136(
     "a",
     {
       href: logoHref,
@@ -8346,7 +9120,7 @@ var Header = ({
       onClick: onLogoClick,
       children: logoContent
     }
-  ) : onLogoClick ? /* @__PURE__ */ jsx132(
+  ) : onLogoClick ? /* @__PURE__ */ jsx136(
     "button",
     {
       type: "button",
@@ -8358,13 +9132,13 @@ var Header = ({
       onClick: onLogoClick,
       children: logoContent
     }
-  ) : /* @__PURE__ */ jsx132("div", { className: classNames == null ? void 0 : classNames.logoWrapper, children: logoContent });
+  ) : /* @__PURE__ */ jsx136("div", { className: classNames == null ? void 0 : classNames.logoWrapper, children: logoContent });
   const searchContent = resolveHeaderSearchContent({
     search,
     searchProps,
-    renderSearch: (nextSearchProps) => /* @__PURE__ */ jsx132(Search, __spreadValues({}, nextSearchProps))
+    renderSearch: (nextSearchProps) => /* @__PURE__ */ jsx136(Search, __spreadValues({}, nextSearchProps))
   });
-  return /* @__PURE__ */ jsx132(Fragment6, { children: /* @__PURE__ */ jsx132(
+  return /* @__PURE__ */ jsx136(Fragment8, { children: /* @__PURE__ */ jsx136(
     "header",
     {
       role: "banner",
@@ -8373,7 +9147,7 @@ var Header = ({
         fallbackLabel: labels.header.bannerAria
       }),
       className: cn(baseHeaderClasses, sticky && stickyHeaderClasses, classNames == null ? void 0 : classNames.root),
-      children: /* @__PURE__ */ jsxs126(
+      children: /* @__PURE__ */ jsxs130(
         "div",
         {
           className: cn(
@@ -8388,7 +9162,7 @@ var Header = ({
             classNames == null ? void 0 : classNames.inner
           ),
           children: [
-            /* @__PURE__ */ jsxs126(
+            /* @__PURE__ */ jsxs130(
               "div",
               {
                 className: cn(
@@ -8404,7 +9178,7 @@ var Header = ({
                 ]
               }
             ),
-            searchContent ? /* @__PURE__ */ jsx132(
+            searchContent ? /* @__PURE__ */ jsx136(
               "div",
               {
                 className: cn(
@@ -8415,7 +9189,7 @@ var Header = ({
                 children: searchContent
               }
             ) : null,
-            /* @__PURE__ */ jsx132(
+            /* @__PURE__ */ jsx136(
               "div",
               {
                 className: cn(
@@ -8478,7 +9252,7 @@ var resolveInlineAlertHasAction = ({
 };
 
 // src/primitives/inline-alert/index.tsx
-import { jsx as jsx133, jsxs as jsxs127 } from "react/jsx-runtime";
+import { jsx as jsx137, jsxs as jsxs131 } from "react/jsx-runtime";
 var InlineAlert = ({
   tone = INLINE_ALERT_DEFAULT_TONE,
   variant,
@@ -8492,7 +9266,7 @@ var InlineAlert = ({
   const resolvedVariant = resolveInlineAlertVariant({ tone, variant });
   const hasAction = resolveInlineAlertHasAction({ actionLabel, onAction });
   const { ariaLive, role } = INLINE_ALERT_LIVE_REGION_CONFIG[tone];
-  return /* @__PURE__ */ jsxs127(
+  return /* @__PURE__ */ jsxs131(
     "div",
     {
       className: cn(
@@ -8504,7 +9278,7 @@ var InlineAlert = ({
       "aria-live": ariaLive,
       "aria-label": ariaLabel,
       children: [
-        /* @__PURE__ */ jsx133(
+        /* @__PURE__ */ jsx137(
           Icon,
           {
             name: INLINE_ALERT_TONE_ICON_NAME[tone],
@@ -8512,14 +9286,14 @@ var InlineAlert = ({
             "aria-hidden": "true"
           }
         ),
-        /* @__PURE__ */ jsx133(
+        /* @__PURE__ */ jsx137(
           "div",
           {
             className: cn(
               "min-w-0",
               resolvedVariant === "plain" && !hasAction ? "flex-none text-center" : "flex-1"
             ),
-            children: /* @__PURE__ */ jsxs127(
+            children: /* @__PURE__ */ jsxs131(
               "div",
               {
                 className: cn(
@@ -8528,14 +9302,14 @@ var InlineAlert = ({
                   resolvedVariant === "plain" && !hasAction ? "items-center" : null
                 ),
                 children: [
-                  title2 ? /* @__PURE__ */ jsx133("p", { className: "text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground", children: title2 }) : null,
-                  /* @__PURE__ */ jsx133("p", { className: "text-agg-sm leading-agg-5 text-agg-foreground wrap-break-word", children: message })
+                  title2 ? /* @__PURE__ */ jsx137("p", { className: "text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground", children: title2 }) : null,
+                  /* @__PURE__ */ jsx137("p", { className: "text-agg-sm leading-agg-5 text-agg-foreground wrap-break-word", children: message })
                 ]
               }
             )
           }
         ),
-        hasAction ? /* @__PURE__ */ jsx133(
+        hasAction ? /* @__PURE__ */ jsx137(
           "button",
           {
             type: "button",
@@ -8555,7 +9329,7 @@ var InlineAlert = ({
 InlineAlert.displayName = "InlineAlert";
 
 // src/primitives/loading-icon/index.tsx
-import { useLabels as useLabels12, useSdkUiConfig as useSdkUiConfig11 } from "@agg-build/hooks";
+import { useLabels as useLabels13, useSdkUiConfig as useSdkUiConfig12 } from "@agg-build/hooks";
 
 // src/primitives/loading-icon/loading-icon.constants.ts
 var LOADING_ICON_DEFAULT_SIZE = "medium";
@@ -8573,18 +9347,18 @@ var resolveLoadingIconAriaLabel = ({
 };
 
 // src/primitives/loading-icon/index.tsx
-import { Fragment as Fragment7, jsx as jsx134, jsxs as jsxs128 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx138, jsxs as jsxs132 } from "react/jsx-runtime";
 var LoadingIcon = ({
   size = LOADING_ICON_DEFAULT_SIZE,
   variant = "default",
   className,
   ariaLabel
 }) => {
-  const labels = useLabels12();
+  const labels = useLabels13();
   const {
     features: { enableAnimations }
-  } = useSdkUiConfig11();
-  return /* @__PURE__ */ jsx134(
+  } = useSdkUiConfig12();
+  return /* @__PURE__ */ jsx138(
     "span",
     {
       role: "status",
@@ -8597,7 +9371,7 @@ var LoadingIcon = ({
         "inline-grid place-items-center text-agg-primary will-change-transform",
         className
       ),
-      children: /* @__PURE__ */ jsx134("span", { className: "inline-grid place-items-center", "aria-hidden": "true", children: /* @__PURE__ */ jsx134(
+      children: /* @__PURE__ */ jsx138("span", { className: "inline-grid place-items-center", "aria-hidden": "true", children: /* @__PURE__ */ jsx138(
         "svg",
         {
           viewBox: LOADING_ICON_SVG_VIEW_BOX,
@@ -8605,8 +9379,8 @@ var LoadingIcon = ({
             "block",
             variant === "prominent" ? LOADING_ICON_PROMINENT_FRAME_CLASS : iconSizeClasses[size]
           ),
-          children: variant === "prominent" ? /* @__PURE__ */ jsxs128("g", { children: [
-            enableAnimations ? /* @__PURE__ */ jsx134(
+          children: variant === "prominent" ? /* @__PURE__ */ jsxs132("g", { children: [
+            enableAnimations ? /* @__PURE__ */ jsx138(
               "animateTransform",
               {
                 attributeName: "transform",
@@ -8618,7 +9392,7 @@ var LoadingIcon = ({
                 repeatCount: "indefinite"
               }
             ) : null,
-            /* @__PURE__ */ jsx134(
+            /* @__PURE__ */ jsx138(
               "circle",
               {
                 cx: "22",
@@ -8632,8 +9406,8 @@ var LoadingIcon = ({
                 strokeDasharray: LOADING_ICON_PROMINENT_DASHARRAY
               }
             )
-          ] }) : /* @__PURE__ */ jsxs128("g", { children: [
-            enableAnimations ? /* @__PURE__ */ jsx134(
+          ] }) : /* @__PURE__ */ jsxs132("g", { children: [
+            enableAnimations ? /* @__PURE__ */ jsx138(
               "animateTransform",
               {
                 attributeName: "transform",
@@ -8645,7 +9419,7 @@ var LoadingIcon = ({
                 repeatCount: "indefinite"
               }
             ) : null,
-            /* @__PURE__ */ jsx134(
+            /* @__PURE__ */ jsx138(
               "circle",
               {
                 cx: "22",
@@ -8657,8 +9431,8 @@ var LoadingIcon = ({
                 strokeLinecap: "round",
                 strokeDasharray: "60 100",
                 strokeDashoffset: "0",
-                children: enableAnimations ? /* @__PURE__ */ jsxs128(Fragment7, { children: [
-                  /* @__PURE__ */ jsx134(
+                children: enableAnimations ? /* @__PURE__ */ jsxs132(Fragment9, { children: [
+                  /* @__PURE__ */ jsx138(
                     "animate",
                     {
                       attributeName: "stroke-dasharray",
@@ -8667,7 +9441,7 @@ var LoadingIcon = ({
                       repeatCount: "indefinite"
                     }
                   ),
-                  /* @__PURE__ */ jsx134(
+                  /* @__PURE__ */ jsx138(
                     "animate",
                     {
                       attributeName: "stroke-dashoffset",
@@ -8688,7 +9462,7 @@ var LoadingIcon = ({
 LoadingIcon.displayName = "LoadingIcon";
 
 // src/primitives/modal/index.tsx
-import { useLabels as useLabels13, useSdkUiConfig as useSdkUiConfig12 } from "@agg-build/hooks";
+import { useLabels as useLabels14, useSdkUiConfig as useSdkUiConfig13 } from "@agg-build/hooks";
 import * as Dialog from "@radix-ui/react-dialog";
 
 // src/primitives/modal/modal.constants.ts
@@ -8712,7 +9486,7 @@ var resolveModalCloseIcon = ({
 };
 
 // src/primitives/modal/index.tsx
-import { Fragment as Fragment8, jsx as jsx135, jsxs as jsxs129 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx139, jsxs as jsxs133 } from "react/jsx-runtime";
 var Modal = ({
   open,
   onOpenChange,
@@ -8720,7 +9494,7 @@ var Modal = ({
   "aria-label": _ariaLabel,
   "aria-labelledby": _ariaLabelledBy
 }) => {
-  return /* @__PURE__ */ jsx135(Dialog.Root, { open, onOpenChange, children });
+  return /* @__PURE__ */ jsx139(Dialog.Root, { open, onOpenChange, children });
 };
 var ModalContainer = ({
   children,
@@ -8733,11 +9507,11 @@ var ModalContainer = ({
   const {
     general: { rootClassName },
     features: { enableAnimations }
-  } = useSdkUiConfig12();
+  } = useSdkUiConfig13();
   const overlayAnimationClassName = resolveModalOverlayAnimationClassName(enableAnimations);
   const panelAnimationClassName = resolveModalPanelAnimationClassName(enableAnimations);
-  return /* @__PURE__ */ jsxs129(Dialog.Portal, { children: [
-    /* @__PURE__ */ jsx135(
+  return /* @__PURE__ */ jsxs133(Dialog.Portal, { children: [
+    /* @__PURE__ */ jsx139(
       Dialog.Overlay,
       {
         className: cn(
@@ -8748,7 +9522,7 @@ var ModalContainer = ({
         )
       }
     ),
-    /* @__PURE__ */ jsx135(
+    /* @__PURE__ */ jsx139(
       Dialog.Content,
       {
         className: cn(
@@ -8775,7 +9549,7 @@ var ModalContainer = ({
             event.preventDefault();
           }
         },
-        children: /* @__PURE__ */ jsx135(
+        children: /* @__PURE__ */ jsx139(
           "div",
           {
             className: cn(
@@ -8784,7 +9558,7 @@ var ModalContainer = ({
               "flex h-full min-h-0 w-full justify-center p-0 md:p-5",
               classNames == null ? void 0 : classNames.center
             ),
-            children: /* @__PURE__ */ jsx135(
+            children: /* @__PURE__ */ jsx139(
               "div",
               {
                 className: cn(
@@ -8824,14 +9598,14 @@ var ModalHeader = ({
 }) => {
   const {
     features: { enableAnimations }
-  } = useSdkUiConfig12();
-  const labels = useLabels13();
-  const defaultCloseIcon = /* @__PURE__ */ jsx135(CloseIcon, { className: "h-6 w-6" });
+  } = useSdkUiConfig13();
+  const labels = useLabels14();
+  const defaultCloseIcon = /* @__PURE__ */ jsx139(CloseIcon, { className: "h-6 w-6" });
   const resolvedCloseIcon = resolveModalCloseIcon({
     closeIcon,
     defaultCloseIcon
   });
-  return /* @__PURE__ */ jsxs129(
+  return /* @__PURE__ */ jsxs133(
     "div",
     {
       className: cn(
@@ -8844,7 +9618,7 @@ var ModalHeader = ({
         classNames == null ? void 0 : classNames.root
       ),
       children: [
-        /* @__PURE__ */ jsxs129(
+        /* @__PURE__ */ jsxs133(
           "div",
           {
             className: cn(
@@ -8857,8 +9631,8 @@ var ModalHeader = ({
               classNames == null ? void 0 : classNames.container
             ),
             children: [
-              leftElement ? /* @__PURE__ */ jsx135(Fragment8, { children: leftElement }) : null,
-              /* @__PURE__ */ jsxs129(
+              leftElement ? /* @__PURE__ */ jsx139(Fragment10, { children: leftElement }) : null,
+              /* @__PURE__ */ jsxs133(
                 "div",
                 {
                   className: cn(
@@ -8867,7 +9641,7 @@ var ModalHeader = ({
                     classNames == null ? void 0 : classNames.titleContainer
                   ),
                   children: [
-                    /* @__PURE__ */ jsx135(
+                    /* @__PURE__ */ jsx139(
                       Dialog.Title,
                       {
                         className: cn(
@@ -8881,7 +9655,7 @@ var ModalHeader = ({
                         children: title2
                       }
                     ),
-                    subtitle ? /* @__PURE__ */ jsx135(
+                    subtitle ? /* @__PURE__ */ jsx139(
                       "span",
                       {
                         className: cn(
@@ -8895,9 +9669,9 @@ var ModalHeader = ({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxs129("div", { className: "agg-modal-header-actions flex flex-row items-center justify-end gap-6", children: [
-                rightElement ? /* @__PURE__ */ jsx135(Fragment8, { children: rightElement }) : null,
-                !hideClose && /* @__PURE__ */ jsx135(
+              /* @__PURE__ */ jsxs133("div", { className: "agg-modal-header-actions flex flex-row items-center justify-end gap-6", children: [
+                rightElement ? /* @__PURE__ */ jsx139(Fragment10, { children: rightElement }) : null,
+                !hideClose && /* @__PURE__ */ jsx139(
                   Dialog.Close,
                   {
                     className: cn(
@@ -8914,14 +9688,14 @@ var ModalHeader = ({
             ]
           }
         ),
-        children ? /* @__PURE__ */ jsx135("div", { className: "agg-modal-header-extra", children }) : null
+        children ? /* @__PURE__ */ jsx139("div", { className: "agg-modal-header-extra", children }) : null
       ]
     }
   );
 };
 Modal.Header = ModalHeader;
 var ModalBody = ({ children, classNames }) => {
-  return /* @__PURE__ */ jsx135(
+  return /* @__PURE__ */ jsx139(
     "div",
     {
       className: cn(
@@ -8942,7 +9716,7 @@ var ModalFooter = ({
   classNames,
   hideBorder = false
 }) => {
-  return /* @__PURE__ */ jsx135(
+  return /* @__PURE__ */ jsx139(
     "div",
     {
       className: cn(
@@ -8963,9 +9737,9 @@ Modal.Footer = ModalFooter;
 Modal.displayName = "Modal";
 
 // src/primitives/number-value.tsx
-import { useMemo as useMemo6 } from "react";
-import { useSdkUiConfig as useSdkUiConfig13 } from "@agg-build/hooks";
-import { jsx as jsx136 } from "react/jsx-runtime";
+import { useMemo as useMemo7 } from "react";
+import { useSdkUiConfig as useSdkUiConfig14 } from "@agg-build/hooks";
+import { jsx as jsx140 } from "react/jsx-runtime";
 var NumberValue = ({
   value,
   format = "number",
@@ -8975,8 +9749,8 @@ var NumberValue = ({
 }) => {
   const {
     formatting: { formatCompactCurrency, formatCurrency, formatDate, formatNumber, formatPercent }
-  } = useSdkUiConfig13();
-  const formatted = useMemo6(() => {
+  } = useSdkUiConfig14();
+  const formatted = useMemo7(() => {
     if (value == null) return fallback;
     if (format === "date") {
       if (value instanceof Date) return formatDate(value);
@@ -8999,18 +9773,18 @@ var NumberValue = ({
     formatPercent,
     value
   ]);
-  return /* @__PURE__ */ jsx136("span", { className: cn("font-agg-sans", className), "aria-label": ariaLabel, children: formatted });
+  return /* @__PURE__ */ jsx140("span", { className: cn("font-agg-sans", className), "aria-label": ariaLabel, children: formatted });
 };
 NumberValue.displayName = "NumberValue";
 
 // src/primitives/select/index.tsx
-import { useLabels as useLabels14, useSdkUiConfig as useSdkUiConfig14 } from "@agg-build/hooks";
+import { useLabels as useLabels15, useSdkUiConfig as useSdkUiConfig15 } from "@agg-build/hooks";
 import {
   useCallback as useCallback4,
-  useEffect as useEffect7,
+  useEffect as useEffect9,
   useLayoutEffect as useLayoutEffect2,
-  useRef as useRef7,
-  useState as useState8
+  useRef as useRef9,
+  useState as useState9
 } from "react";
 import { createPortal } from "react-dom";
 
@@ -9032,7 +9806,7 @@ var resolveIsSelectDisabled = ({
 };
 
 // src/primitives/select/index.tsx
-import { jsx as jsx137, jsxs as jsxs130 } from "react/jsx-runtime";
+import { jsx as jsx141, jsxs as jsxs134 } from "react/jsx-runtime";
 var SELECT_DROPDOWN_Z = 1e4;
 function resolveSelectPortalContainer(triggerRoot) {
   var _a, _b;
@@ -9055,19 +9829,19 @@ var Select = ({
   contentSideOffset = 8
 }) => {
   var _a;
-  const labels = useLabels14();
+  const labels = useLabels15();
   const {
     general: { rootClassName },
     features: { enableAnimations }
-  } = useSdkUiConfig14();
+  } = useSdkUiConfig15();
   const isDisabled = resolveIsSelectDisabled({ disabled, items });
   const selectedItem = resolveSelectedItem(items, value);
-  const [isOpen, setIsOpen] = useState8(false);
-  const [menuRect, setMenuRect] = useState8(null);
-  const containerRef = useRef7(null);
-  const portalRef = useRef7(null);
-  const closeTimerRef = useRef7(null);
-  const openedByHoverRef = useRef7(false);
+  const [isOpen, setIsOpen] = useState9(false);
+  const [menuRect, setMenuRect] = useState9(null);
+  const containerRef = useRef9(null);
+  const portalRef = useRef9(null);
+  const closeTimerRef = useRef9(null);
+  const openedByHoverRef = useRef9(false);
   const handleClose = useCallback4(() => {
     setIsOpen(false);
     openedByHoverRef.current = false;
@@ -9083,7 +9857,7 @@ var Select = ({
       width: r.width
     });
   }, [contentSideOffset]);
-  useEffect7(() => {
+  useEffect9(() => {
     return () => {
       if (closeTimerRef.current) clearTimeout(closeTimerRef.current);
     };
@@ -9095,7 +9869,7 @@ var Select = ({
     }
     updateMenuRect();
   }, [isOpen, updateMenuRect, value]);
-  useEffect7(() => {
+  useEffect9(() => {
     if (!isOpen) return;
     const handlePointerDown = (event) => {
       var _a2, _b;
@@ -9116,7 +9890,7 @@ var Select = ({
       document.removeEventListener("scroll", handleReposition, true);
     };
   }, [isOpen, handleClose, updateMenuRect]);
-  useEffect7(() => {
+  useEffect9(() => {
     if (!isOpen) return;
     const handleKeyDown = (event) => {
       if ((event == null ? void 0 : event.key) === "Escape") handleClose();
@@ -9151,7 +9925,7 @@ var Select = ({
   };
   const isInline = variant === "inline";
   const triggerRadiusClass = triggerClassName != null ? triggerClassName : isInline ? "rounded-agg-sm" : "rounded-agg-md";
-  const listbox = menuRect ? /* @__PURE__ */ jsx137(
+  const listbox = menuRect ? /* @__PURE__ */ jsx141(
     "div",
     {
       ref: portalRef,
@@ -9179,7 +9953,7 @@ var Select = ({
         const isSelected = item.value === value;
         const isHidden = item.hidden === true;
         if (isHidden) return null;
-        return /* @__PURE__ */ jsxs130(
+        return /* @__PURE__ */ jsxs134(
           "button",
           {
             type: "button",
@@ -9203,14 +9977,14 @@ var Select = ({
               handleClose();
             },
             children: [
-              isInline && isSelected ? /* @__PURE__ */ jsx137(
+              isInline && isSelected ? /* @__PURE__ */ jsx141(
                 "span",
                 {
                   className: "agg-select-item-indicator absolute bottom-2 left-0 top-2 w-1 bg-agg-primary",
                   "aria-hidden": true
                 }
               ) : null,
-              item.icon ? /* @__PURE__ */ jsx137(
+              item.icon ? /* @__PURE__ */ jsx141(
                 "span",
                 {
                   className: cn(
@@ -9219,7 +9993,7 @@ var Select = ({
                   ),
                   children: item.icon
                 }
-              ) : item.iconUrl ? /* @__PURE__ */ jsx137(
+              ) : item.iconUrl ? /* @__PURE__ */ jsx141(
                 RemoteImage,
                 {
                   src: item.iconUrl,
@@ -9227,7 +10001,7 @@ var Select = ({
                   className: "agg-select-item-icon h-4 w-4 shrink-0 rounded-sm object-contain"
                 }
               ) : null,
-              /* @__PURE__ */ jsx137("span", { className: "agg-select-item-label truncate", children: item.label })
+              /* @__PURE__ */ jsx141("span", { className: "agg-select-item-label truncate", children: item.label })
             ]
           },
           item.value
@@ -9235,7 +10009,7 @@ var Select = ({
       })
     }
   ) : null;
-  return /* @__PURE__ */ jsxs130(
+  return /* @__PURE__ */ jsxs134(
     "div",
     {
       ref: containerRef,
@@ -9245,7 +10019,7 @@ var Select = ({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs130(
+        /* @__PURE__ */ jsxs134(
           "button",
           {
             type: "button",
@@ -9269,7 +10043,7 @@ var Select = ({
             onPointerEnter: handlePointerEnter,
             onPointerLeave: handlePointerLeave,
             children: [
-              (selectedItem == null ? void 0 : selectedItem.icon) ? /* @__PURE__ */ jsx137("span", { className: "h-4 w-4 shrink-0 [&_svg]:h-full [&_svg]:w-full", children: selectedItem.icon }) : (selectedItem == null ? void 0 : selectedItem.iconUrl) ? /* @__PURE__ */ jsx137(
+              (selectedItem == null ? void 0 : selectedItem.icon) ? /* @__PURE__ */ jsx141("span", { className: "h-4 w-4 shrink-0 [&_svg]:h-full [&_svg]:w-full", children: selectedItem.icon }) : (selectedItem == null ? void 0 : selectedItem.iconUrl) ? /* @__PURE__ */ jsx141(
                 RemoteImage,
                 {
                   src: selectedItem.iconUrl,
@@ -9277,18 +10051,18 @@ var Select = ({
                   className: "agg-select-icon h-4 w-4 shrink-0 rounded-sm object-contain"
                 }
               ) : null,
-              /* @__PURE__ */ jsx137("span", { className: "agg-select-value flex-1 truncate", children: (_a = selectedItem == null ? void 0 : selectedItem.label) != null ? _a : "" })
+              /* @__PURE__ */ jsx141("span", { className: "agg-select-value flex-1 truncate", children: (_a = selectedItem == null ? void 0 : selectedItem.label) != null ? _a : "" })
             ]
           }
         ),
-        /* @__PURE__ */ jsx137(
+        /* @__PURE__ */ jsx141(
           "span",
           {
             className: cn(
               "agg-select-chevron pointer-events-none absolute inset-y-0 inline-flex items-center justify-center",
               isInline ? "right-2 text-agg-foreground" : "right-3 text-agg-muted-foreground"
             ),
-            children: /* @__PURE__ */ jsx137(
+            children: /* @__PURE__ */ jsx141(
               Icon,
               {
                 name: isOpen ? "chevron-up" : "chevron-down-thin",
@@ -9307,7 +10081,7 @@ Select.displayName = "Select";
 
 // src/primitives/state-message/index.tsx
 import { cloneElement } from "react";
-import { useLabels as useLabels15 } from "@agg-build/hooks";
+import { useLabels as useLabels16 } from "@agg-build/hooks";
 
 // src/primitives/typography/typography.constants.ts
 var typographyVariants = [
@@ -9404,7 +10178,7 @@ var getTypographyClassName = ({
 };
 
 // src/primitives/typography/index.tsx
-import { jsx as jsx138 } from "react/jsx-runtime";
+import { jsx as jsx142 } from "react/jsx-runtime";
 var Typography = ({
   as: Component2 = "p",
   variant = "body",
@@ -9412,7 +10186,7 @@ var Typography = ({
   children,
   "aria-label": ariaLabel
 }) => {
-  return /* @__PURE__ */ jsx138(Component2, { className: getTypographyClassName({ className, variant }), "aria-label": ariaLabel, children });
+  return /* @__PURE__ */ jsx142(Component2, { className: getTypographyClassName({ className, variant }), "aria-label": ariaLabel, children });
 };
 Typography.displayName = "Typography";
 
@@ -9425,7 +10199,7 @@ var resolveStateMessageHasAction = ({ onAction }) => {
 };
 
 // src/primitives/state-message/index.tsx
-import { jsx as jsx139, jsxs as jsxs131 } from "react/jsx-runtime";
+import { jsx as jsx143, jsxs as jsxs135 } from "react/jsx-runtime";
 var StateMessage = (_a) => {
   var _b = _a, {
     icon,
@@ -9440,13 +10214,13 @@ var StateMessage = (_a) => {
     "onAction",
     "classNames"
   ]);
-  const labels = useLabels15();
+  const labels = useLabels16();
   const hasAction = resolveStateMessageHasAction({ onAction });
   const resolvedIcon = cloneElement(icon, {
     className: cn(STATE_MESSAGE_ICON_CLASS_NAME, icon.props.className, classNames == null ? void 0 : classNames.icon),
     "aria-hidden": true
   });
-  return /* @__PURE__ */ jsx139(
+  return /* @__PURE__ */ jsx143(
     "div",
     __spreadProps(__spreadValues({}, rest), {
       className: cn(
@@ -9457,7 +10231,7 @@ var StateMessage = (_a) => {
       role: "status",
       "aria-live": "polite",
       "aria-label": title2,
-      children: /* @__PURE__ */ jsxs131(
+      children: /* @__PURE__ */ jsxs135(
         "div",
         {
           className: cn(
@@ -9466,7 +10240,7 @@ var StateMessage = (_a) => {
           ),
           children: [
             resolvedIcon,
-            /* @__PURE__ */ jsxs131(
+            /* @__PURE__ */ jsxs135(
               "div",
               {
                 className: cn(
@@ -9474,8 +10248,8 @@ var StateMessage = (_a) => {
                   classNames == null ? void 0 : classNames.text
                 ),
                 children: [
-                  /* @__PURE__ */ jsx139(Typography, { variant: "body-strong", className: classNames == null ? void 0 : classNames.title, children: title2 }),
-                  description ? /* @__PURE__ */ jsx139(
+                  /* @__PURE__ */ jsx143(Typography, { variant: "body-strong", className: classNames == null ? void 0 : classNames.title, children: title2 }),
+                  description ? /* @__PURE__ */ jsx143(
                     Typography,
                     {
                       variant: "label",
@@ -9486,7 +10260,7 @@ var StateMessage = (_a) => {
                 ]
               }
             ),
-            hasAction ? /* @__PURE__ */ jsx139(
+            hasAction ? /* @__PURE__ */ jsx143(
               Button,
               {
                 variant: "tertiary",
@@ -9513,18 +10287,18 @@ var StateMessage = (_a) => {
 StateMessage.displayName = "StateMessage";
 
 // src/primitives/tabs/index.tsx
-import { useLabels as useLabels16, useSdkUiConfig as useSdkUiConfig15 } from "@agg-build/hooks";
-import { useCallback as useCallback6, useEffect as useEffect9, useLayoutEffect as useLayoutEffect3, useMemo as useMemo7, useRef as useRef9, useState as useState10 } from "react";
+import { useLabels as useLabels17, useSdkUiConfig as useSdkUiConfig16 } from "@agg-build/hooks";
+import { useCallback as useCallback6, useEffect as useEffect11, useLayoutEffect as useLayoutEffect3, useMemo as useMemo8, useRef as useRef11, useState as useState11 } from "react";
 
 // src/shared/use-horizontal-scroll-state.ts
-import { useCallback as useCallback5, useEffect as useEffect8, useRef as useRef8, useState as useState9 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect10, useRef as useRef10, useState as useState10 } 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 containerRef = useRef10(null);
+  const [hasOverflow, setHasOverflow] = useState10(false);
+  const [isAtStart, setIsAtStart] = useState10(true);
+  const [isAtEnd, setIsAtEnd] = useState10(true);
+  const [canScrollLeft, setCanScrollLeft] = useState10(false);
+  const [canScrollRight, setCanScrollRight] = useState10(false);
   const update = useCallback5(() => {
     const el = containerRef.current;
     if (!el) return;
@@ -9538,13 +10312,13 @@ var useHorizontalScrollState = () => {
     setCanScrollLeft(nextHasOverflow && !nextIsAtStart);
     setCanScrollRight(nextHasOverflow && !nextIsAtEnd);
   }, []);
-  useEffect8(() => {
+  useEffect10(() => {
     const el = containerRef.current;
     if (!el) return;
     el.addEventListener("scroll", update, { passive: true });
     return () => el.removeEventListener("scroll", update);
   }, [update]);
-  useEffect8(() => {
+  useEffect10(() => {
     if (typeof ResizeObserver === "undefined") return;
     const el = containerRef.current;
     if (!el) return;
@@ -9588,7 +10362,7 @@ var findEdgeEnabledIndex = (items, direction) => {
 };
 
 // src/primitives/tabs/index.tsx
-import { Fragment as Fragment9, jsx as jsx140, jsxs as jsxs132 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx144, jsxs as jsxs136 } from "react/jsx-runtime";
 var getTabButtonClassName = ({
   enableAnimations,
   isBarVariant,
@@ -9631,12 +10405,12 @@ var Tabs = ({
   className,
   classNames
 }) => {
-  const labels = useLabels16();
+  const labels = useLabels17();
   const {
     features: { enableAnimations }
-  } = useSdkUiConfig15();
-  const buttonRefs = useRef9([]);
-  const dragStateRef = useRef9({
+  } = useSdkUiConfig16();
+  const buttonRefs = useRef11([]);
+  const dragStateRef = useRef11({
     isPointerDown: false,
     isDragging: false,
     pointerId: null,
@@ -9644,11 +10418,11 @@ var Tabs = ({
     startClientY: 0,
     startScrollLeft: 0
   });
-  const suppressClickRef = useRef9(false);
+  const suppressClickRef = useRef11(false);
   const resolvedAriaLabel = ariaLabel != null ? ariaLabel : labels.common.tabsAria;
-  const [isMobileViewport, setIsMobileViewport] = useState10(false);
-  const [isDraggingTabs, setIsDraggingTabs] = useState10(false);
-  const [activeUnderlineStyle, setActiveUnderlineStyle] = useState10({
+  const [isMobileViewport, setIsMobileViewport] = useState11(false);
+  const [isDraggingTabs, setIsDraggingTabs] = useState11(false);
+  const [activeUnderlineStyle, setActiveUnderlineStyle] = useState11({
     transform: "translateX(0px)",
     width: 0,
     opacity: 0
@@ -9663,14 +10437,14 @@ var Tabs = ({
     update: updateScrollState
   } = useHorizontalScrollState();
   const isBarVariant = variant === "bar";
-  const resolvedOverflowBehavior = useMemo7(() => {
+  const resolvedOverflowBehavior = useMemo8(() => {
     if (overflowBehavior) return overflowBehavior;
     if (!isBarVariant) return "scroll";
     return isMobileViewport ? "select" : "scroll";
   }, [isBarVariant, isMobileViewport, overflowBehavior]);
   const shouldUseOverflowScroll = resolvedOverflowBehavior === "scroll";
   const shouldUseOverflowSelect = resolvedOverflowBehavior === "select";
-  useEffect9(() => {
+  useEffect11(() => {
     if (typeof window === "undefined") return;
     const mediaQueryList = window.matchMedia(MOBILE_TABS_MEDIA_QUERY);
     const handleMediaQueryChange = (event) => {
@@ -9688,12 +10462,12 @@ var Tabs = ({
       mediaQueryList.removeListener(handleMediaQueryChange);
     };
   }, []);
-  const renderedItems = useMemo7(() => {
+  const renderedItems = useMemo8(() => {
     return items.map((item) => __spreadProps(__spreadValues({}, item), {
       disabled: item.disabled || item.isComingSoon
     }));
   }, [items]);
-  const selectItems = useMemo7(() => {
+  const selectItems = useMemo8(() => {
     return renderedItems.map((item) => ({
       value: item.value,
       label: item.isComingSoon ? `${item.label} (soon)` : item.label,
@@ -9746,7 +10520,12 @@ 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-14 md:h-15 border-b border-agg-separator -mb-[1px]",
+    isBarVariant ? cn(
+      "items-start rounded-agg-lg border border-agg-separator",
+      // Medium bars sit at 40px (1px border + 5px padding + 28px tab) to line
+      // up with the 40px select that usually sits beside them.
+      size === "s" ? "p-1.5" : "p-[5px]"
+    ) : "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")
@@ -9852,7 +10631,7 @@ var Tabs = ({
   useLayoutEffect3(() => {
     updateActiveUnderline();
   }, [updateActiveUnderline]);
-  useEffect9(() => {
+  useEffect11(() => {
     if (isBarVariant || !shouldUseOverflowScroll) return;
     const tabListElement = tabListRef.current;
     if (!tabListElement) return;
@@ -9864,11 +10643,11 @@ var Tabs = ({
       tabListElement.removeEventListener("scroll", handleScroll);
     };
   }, [isBarVariant, shouldUseOverflowScroll, tabListRef, updateActiveUnderline]);
-  useEffect9(() => {
+  useEffect11(() => {
     if (!shouldUseOverflowScroll) return;
     updateScrollState();
   }, [renderedItems, shouldUseOverflowScroll, updateScrollState, value]);
-  useEffect9(() => {
+  useEffect11(() => {
     if (isBarVariant || !shouldUseOverflowScroll) return;
     if (typeof ResizeObserver === "undefined") return;
     const tabListElement = tabListRef.current;
@@ -9881,7 +10660,7 @@ var Tabs = ({
       resizeObserver.disconnect();
     };
   }, [isBarVariant, shouldUseOverflowScroll, tabListRef, updateActiveUnderline]);
-  useEffect9(() => {
+  useEffect11(() => {
     if (!shouldUseOverflowScroll) return;
     const tabListElement = tabListRef.current;
     if (!tabListElement) return;
@@ -9916,7 +10695,7 @@ var Tabs = ({
     value
   ]);
   if (shouldUseOverflowSelect) {
-    return /* @__PURE__ */ jsx140("div", { className: cn("group/agg-tabs w-full", className, classNames == null ? void 0 : classNames.root), children: /* @__PURE__ */ jsx140(
+    return /* @__PURE__ */ jsx144("div", { className: cn("group/agg-tabs w-full", className, classNames == null ? void 0 : classNames.root), children: /* @__PURE__ */ jsx144(
       Select,
       {
         ariaLabel,
@@ -9928,7 +10707,7 @@ var Tabs = ({
       }
     ) });
   }
-  return /* @__PURE__ */ jsxs132(
+  return /* @__PURE__ */ jsxs136(
     "div",
     {
       className: cn(
@@ -9939,7 +10718,7 @@ var Tabs = ({
         classNames == null ? void 0 : classNames.root
       ),
       children: [
-        /* @__PURE__ */ jsxs132(
+        /* @__PURE__ */ jsxs136(
           "div",
           {
             ref: tabListRef,
@@ -9953,7 +10732,7 @@ var Tabs = ({
             onPointerUp: handleEndTabListDrag,
             onWheel: handleTabListWheel,
             children: [
-              shouldUseOverflowScroll && !isBarVariant && hasOverflow ? /* @__PURE__ */ jsx140(
+              shouldUseOverflowScroll && !isBarVariant && hasOverflow ? /* @__PURE__ */ jsx144(
                 "span",
                 {
                   "aria-hidden": true,
@@ -9964,7 +10743,7 @@ var Tabs = ({
                 var _a;
                 const isActive = item.value === value;
                 const isComingSoon = (_a = item == null ? void 0 : item.isComingSoon) != null ? _a : false;
-                return /* @__PURE__ */ jsxs132(
+                return /* @__PURE__ */ jsxs136(
                   "button",
                   {
                     ref: (buttonElement) => {
@@ -10000,7 +10779,7 @@ var Tabs = ({
                     ),
                     children: [
                       item.icon ? item.icon : null,
-                      /* @__PURE__ */ jsxs132(
+                      /* @__PURE__ */ jsxs136(
                         "span",
                         {
                           className: cn(
@@ -10018,7 +10797,7 @@ var Tabs = ({
                   item.value
                 );
               }),
-              !isBarVariant ? /* @__PURE__ */ jsx140(
+              !isBarVariant ? /* @__PURE__ */ jsx144(
                 "span",
                 {
                   "aria-hidden": true,
@@ -10037,8 +10816,8 @@ var Tabs = ({
             ]
           }
         ),
-        shouldUseOverflowScroll && !isBarVariant ? /* @__PURE__ */ jsxs132(Fragment9, { children: [
-          /* @__PURE__ */ jsx140(
+        shouldUseOverflowScroll && !isBarVariant ? /* @__PURE__ */ jsxs136(Fragment11, { children: [
+          /* @__PURE__ */ jsx144(
             "span",
             {
               "aria-hidden": true,
@@ -10050,7 +10829,7 @@ var Tabs = ({
               )
             }
           ),
-          /* @__PURE__ */ jsx140(
+          /* @__PURE__ */ jsx144(
             "span",
             {
               "aria-hidden": true,
@@ -10063,8 +10842,8 @@ var Tabs = ({
             }
           )
         ] }) : null,
-        shouldUseOverflowScroll && isBarVariant ? /* @__PURE__ */ jsxs132(Fragment9, { children: [
-          /* @__PURE__ */ jsx140(
+        shouldUseOverflowScroll && isBarVariant ? /* @__PURE__ */ jsxs136(Fragment11, { children: [
+          /* @__PURE__ */ jsx144(
             "button",
             {
               type: "button",
@@ -10086,10 +10865,10 @@ var Tabs = ({
                   behavior: getScrollBehavior(enableAnimations)
                 });
               },
-              children: /* @__PURE__ */ jsx140(Icon, { name: "chevron-left", size: "small", color: "currentColor" })
+              children: /* @__PURE__ */ jsx144(Icon, { name: "chevron-left", size: "small", color: "currentColor" })
             }
           ),
-          /* @__PURE__ */ jsx140(
+          /* @__PURE__ */ jsx144(
             "button",
             {
               type: "button",
@@ -10111,7 +10890,7 @@ var Tabs = ({
                   behavior: getScrollBehavior(enableAnimations)
                 });
               },
-              children: /* @__PURE__ */ jsx140(Icon, { name: "chevron-right", size: "small", color: "currentColor" })
+              children: /* @__PURE__ */ jsx144(Icon, { name: "chevron-right", size: "small", color: "currentColor" })
             }
           )
         ] }) : null
@@ -10127,11 +10906,11 @@ import {
   createContext,
   useCallback as useCallback7,
   useContext,
-  useEffect as useEffect10,
-  useRef as useRef10,
-  useState as useState11
+  useEffect as useEffect12,
+  useRef as useRef12,
+  useState as useState12
 } from "react";
-import { jsx as jsx141, jsxs as jsxs133 } from "react/jsx-runtime";
+import { jsx as jsx145, jsxs as jsxs137 } from "react/jsx-runtime";
 var DEFAULT_DURATION_MS = 5e3;
 var EXIT_ANIMATION_MS = 350;
 var TONE_ACCENT_CLASS = {
@@ -10154,8 +10933,8 @@ function ToastProvider({
   swipeThreshold = 50,
   viewportClassName
 }) {
-  const [toasts, setToasts] = useState11([]);
-  const idRef = useRef10(0);
+  const [toasts, setToasts] = useState12([]);
+  const idRef = useRef12(0);
   const dismiss = useCallback7((id) => {
     setToasts((current) => current.filter((entry) => entry.id !== id));
   }, []);
@@ -10180,9 +10959,9 @@ function ToastProvider({
     },
     [defaultDurationMs]
   );
-  return /* @__PURE__ */ jsx141(ToastContext.Provider, { value: { toast, dismiss }, children: /* @__PURE__ */ jsxs133(RadixToast.Provider, { swipeDirection, swipeThreshold, children: [
+  return /* @__PURE__ */ jsx145(ToastContext.Provider, { value: { toast, dismiss }, children: /* @__PURE__ */ jsxs137(RadixToast.Provider, { swipeDirection, swipeThreshold, children: [
     children,
-    toasts.map((entry) => /* @__PURE__ */ jsx141(
+    toasts.map((entry) => /* @__PURE__ */ jsx145(
       ToastRow,
       {
         entry,
@@ -10192,7 +10971,7 @@ function ToastProvider({
       },
       entry.id
     )),
-    /* @__PURE__ */ jsx141(
+    /* @__PURE__ */ jsx145(
       RadixToast.Viewport,
       {
         className: cn(
@@ -10204,18 +10983,18 @@ function ToastProvider({
   ] }) });
 }
 function ToastRow({ entry, onOpenChange }) {
-  const [isOpen, setIsOpen] = useState11(true);
+  const [isOpen, setIsOpen] = useState12(true);
   const hasAutoDismiss = entry.durationMs > 0 && Number.isFinite(entry.durationMs);
   const duration = hasAutoDismiss ? entry.durationMs : Number.POSITIVE_INFINITY;
-  const timeoutRef = useRef10(null);
-  const closeTimeoutRef = useRef10(null);
-  const remainingMsRef = useRef10(duration);
-  const timerStartedAtRef = useRef10(null);
-  const onOpenChangeRef = useRef10(onOpenChange);
+  const timeoutRef = useRef12(null);
+  const closeTimeoutRef = useRef12(null);
+  const remainingMsRef = useRef12(duration);
+  const timerStartedAtRef = useRef12(null);
+  const onOpenChangeRef = useRef12(onOpenChange);
   const rootStyle = {
     "--agg-toast-duration": `${duration}ms`
   };
-  useEffect10(() => {
+  useEffect12(() => {
     onOpenChangeRef.current = onOpenChange;
   }, [onOpenChange]);
   const clearDismissTimer = useCallback7(() => {
@@ -10264,7 +11043,7 @@ function ToastRow({ entry, onOpenChange }) {
     if (!hasAutoDismiss || timerStartedAtRef.current !== null) return;
     startDismissTimer();
   }, [hasAutoDismiss, startDismissTimer]);
-  useEffect10(() => {
+  useEffect12(() => {
     remainingMsRef.current = duration;
     startDismissTimer();
     return () => {
@@ -10272,7 +11051,7 @@ function ToastRow({ entry, onOpenChange }) {
       clearCloseTimer();
     };
   }, [clearCloseTimer, clearDismissTimer, duration, startDismissTimer]);
-  return /* @__PURE__ */ jsxs133(
+  return /* @__PURE__ */ jsxs137(
     RadixToast.Root,
     {
       open: isOpen,
@@ -10293,7 +11072,7 @@ function ToastRow({ entry, onOpenChange }) {
         TONE_ACCENT_CLASS[entry.tone]
       ),
       children: [
-        /* @__PURE__ */ jsx141(
+        /* @__PURE__ */ jsx145(
           Icon,
           {
             name: TONE_ICON_NAME[entry.tone],
@@ -10301,25 +11080,25 @@ function ToastRow({ entry, onOpenChange }) {
             "aria-hidden": "true"
           }
         ),
-        /* @__PURE__ */ jsxs133("div", { className: "min-w-0 flex-1", children: [
-          entry.title ? /* @__PURE__ */ jsx141(RadixToast.Title, { className: "font-agg-sans text-agg-sm leading-agg-5 font-agg-bold text-agg-foreground", children: entry.title }) : null,
-          /* @__PURE__ */ jsx141(RadixToast.Description, { className: "font-agg-sans text-agg-sm leading-agg-5 font-agg-normal text-agg-foreground wrap-break-word", children: entry.message }),
-          entry.detail ? /* @__PURE__ */ jsx141("p", { className: "font-agg-sans text-agg-sm leading-agg-5 font-agg-normal text-agg-muted-foreground wrap-break-word", children: entry.detail }) : null
+        /* @__PURE__ */ jsxs137("div", { className: "min-w-0 flex-1", children: [
+          entry.title ? /* @__PURE__ */ jsx145(RadixToast.Title, { className: "font-agg-sans text-agg-sm leading-agg-5 font-agg-bold text-agg-foreground", children: entry.title }) : null,
+          /* @__PURE__ */ jsx145(RadixToast.Description, { className: "font-agg-sans text-agg-sm leading-agg-5 font-agg-normal text-agg-foreground wrap-break-word", children: entry.message }),
+          entry.detail ? /* @__PURE__ */ jsx145("p", { className: "font-agg-sans text-agg-sm leading-agg-5 font-agg-normal text-agg-muted-foreground wrap-break-word", children: entry.detail }) : null
         ] }),
-        /* @__PURE__ */ jsx141(
+        /* @__PURE__ */ jsx145(
           RadixToast.Close,
           {
             "aria-label": "Dismiss",
             className: "absolute top-4 right-4 cursor-pointer text-agg-foreground transition-opacity hover:opacity-70 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-agg-primary",
-            children: /* @__PURE__ */ jsx141(Icon, { name: "close", className: "h-4! w-4!", "aria-hidden": "true" })
+            children: /* @__PURE__ */ jsx145(Icon, { name: "close", className: "h-4! w-4!", "aria-hidden": "true" })
           }
         ),
-        /* @__PURE__ */ jsx141(
+        /* @__PURE__ */ jsx145(
           "div",
           {
             className: "absolute right-[-1px] bottom-[-1px] left-[-1px] h-1 bg-[color-mix(in_srgb,var(--agg-toast-accent)_30%,transparent)]",
             "aria-hidden": "true",
-            children: /* @__PURE__ */ jsx141(
+            children: /* @__PURE__ */ jsx145(
               "div",
               {
                 "data-testid": "agg-toast-progress",
@@ -10347,9 +11126,9 @@ function useOptionalToast() {
 }
 
 // src/primitives/tooltip/index.tsx
-import { useSdkUiConfig as useSdkUiConfig16 } from "@agg-build/hooks";
+import { useSdkUiConfig as useSdkUiConfig17 } from "@agg-build/hooks";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { useMemo as useMemo8 } from "react";
+import { useMemo as useMemo9 } from "react";
 
 // src/primitives/tooltip/tooltip.constants.ts
 var tooltipSizeClasses = {
@@ -10381,7 +11160,7 @@ var resolveTooltipArrowDimensions = (size) => {
 };
 
 // src/primitives/tooltip/index.tsx
-import { jsx as jsx142, jsxs as jsxs134 } from "react/jsx-runtime";
+import { jsx as jsx146, jsxs as jsxs138 } from "react/jsx-runtime";
 var Tooltip = ({
   content,
   children,
@@ -10396,25 +11175,25 @@ var Tooltip = ({
   const {
     general: { rootClassName },
     features: { enableAnimations }
-  } = useSdkUiConfig16();
-  const trigger = useMemo8(() => {
+  } = useSdkUiConfig17();
+  const trigger = useMemo9(() => {
     if (children) return children;
-    return /* @__PURE__ */ jsx142(
+    return /* @__PURE__ */ jsx146(
       "button",
       {
         type: "button",
         className: resolveTooltipTriggerClassName(classNames == null ? void 0 : classNames.trigger),
         "aria-label": ariaLabel != null ? ariaLabel : defaultTooltipTriggerAriaLabel,
-        children: /* @__PURE__ */ jsx142(Icon, { name: "info", size: "small", className: cn(classNames == null ? void 0 : classNames.icon), "aria-hidden": true })
+        children: /* @__PURE__ */ jsx146(Icon, { name: "info", size: "small", className: cn(classNames == null ? void 0 : classNames.icon), "aria-hidden": true })
       }
     );
   }, [children, classNames == null ? void 0 : classNames.trigger, classNames == null ? void 0 : classNames.icon, ariaLabel]);
   const { width: arrowWidth, height: arrowHeight } = resolveTooltipArrowDimensions(size);
   const arrowPoints = `0,0 ${arrowWidth},0 ${arrowWidth / 2},${arrowHeight}`;
   const arrowBorderPath = `M0 0 L${arrowWidth / 2} ${arrowHeight} L${arrowWidth} 0`;
-  return /* @__PURE__ */ jsx142(TooltipPrimitive.Provider, { delayDuration, children: /* @__PURE__ */ jsxs134(TooltipPrimitive.Root, { children: [
-    /* @__PURE__ */ jsx142(TooltipPrimitive.Trigger, { asChild: true, children: trigger }),
-    /* @__PURE__ */ jsx142(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs134(
+  return /* @__PURE__ */ jsx146(TooltipPrimitive.Provider, { delayDuration, children: /* @__PURE__ */ jsxs138(TooltipPrimitive.Root, { children: [
+    /* @__PURE__ */ jsx146(TooltipPrimitive.Trigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsx146(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs138(
       TooltipPrimitive.Content,
       {
         side,
@@ -10438,7 +11217,7 @@ var Tooltip = ({
           classNames == null ? void 0 : classNames.content
         ),
         children: [
-          /* @__PURE__ */ jsx142(TooltipPrimitive.Arrow, { asChild: true, width: arrowWidth, height: arrowHeight, children: /* @__PURE__ */ jsxs134(
+          /* @__PURE__ */ jsx146(TooltipPrimitive.Arrow, { asChild: true, width: arrowWidth, height: arrowHeight, children: /* @__PURE__ */ jsxs138(
             "svg",
             {
               width: arrowWidth,
@@ -10447,8 +11226,8 @@ var Tooltip = ({
               "aria-hidden": "true",
               className: cn("overflow-visible", classNames == null ? void 0 : classNames.arrow),
               children: [
-                /* @__PURE__ */ jsx142("polygon", { points: arrowPoints, className: "fill-agg-secondary" }),
-                /* @__PURE__ */ jsx142(
+                /* @__PURE__ */ jsx146("polygon", { points: arrowPoints, className: "fill-agg-secondary" }),
+                /* @__PURE__ */ jsx146(
                   "path",
                   {
                     d: arrowBorderPath,
@@ -10569,6 +11348,7 @@ export {
   Calendar,
   Card,
   SwitchButton,
+  formatDefaultChartValue,
   LineChart,
   CopyButton,
   CurrencyInput,
@@ -10583,12 +11363,23 @@ export {
   resolveTabVenus,
   SkeletonBlock,
   RemoteImage,
+  baseCardClassName,
   detailsBaseCardClassName,
   marketDetailsBaseCardClassName,
   getMarketDetailsTabs,
   marketDetailsDefaultIsOpened,
   orderBookRowLimitDefault,
   MarketDetailsOderbookSkeleton,
+  PLACE_ORDER_DEFAULT_AMOUNT,
+  MIN_BUY_ORDER_AMOUNT,
+  MIN_SELL_ORDER_SHARES,
+  DEFAULT_SLIPPAGE_VALUE,
+  HIGH_SLIPPAGE_THRESHOLD,
+  PLACE_ORDER_ROUTE_COLLAPSED_CARD_COUNT,
+  PLACE_ORDER_MAXIMIZE_PAYOUT_ROUTE_ID,
+  PLACE_ORDER_NUMERIC_INPUT_CLASS_NAME,
+  PLACE_ORDER_CONTAINER_CLASS_NAME,
+  PLACE_ORDER_OUTCOME_BUTTON_CLASS_NAMES,
   PlaceOrderRouteCardSkeleton,
   skeletonViews,
   Skeleton,