@agg-market/ui 9.0.0 → 10.0.0

package/dist/index.js

@@ -128,9 +128,11 @@ __export(src_exports, {
   LinkAccountsIcon: () => LinkAccountsIcon,
   LoadingIcon: () => LoadingIcon,
   MarketDetails: () => MarketDetails,
+  MarketDetailsList: () => MarketDetailsList,
   Modal: () => Modal,
   NumberValue: () => NumberValue,
   OnboardingModal: () => OnboardingModal,
+  OnrampModal: () => OnrampModal,
   PencilIcon: () => PencilIcon,
   PlaceOrder: () => PlaceOrder,
   PlaySquareIcon: () => PlaySquareIcon,
@@ -915,7 +917,7 @@ var SwitchButton = ({
     "div",
     {
       className: cn(
-        "group/agg-switch",
+        "group/agg-switch min-w-fit",
         "inline-flex min-w-0 rounded-agg-full bg-agg-secondary-hover font-agg-sans",
         getMotionClassName(enableAnimations, "transition-background duration-200 ease-in-out"),
         "cursor-pointer hover:bg-agg-tertiary",
@@ -961,6 +963,7 @@ var SwitchButton = ({
                   tabIndex: isActive ? 0 : -1,
                   disabled: option.disabled,
                   className: cn(
+                    "whitespace-nowrap",
                     "relative z-10 min-w-0 rounded-agg-full px-5 py-1.5 font-agg-sans text-agg-base leading-agg-6 text-agg-foreground",
                     getMotionClassName(
                       enableAnimations,
@@ -1236,11 +1239,12 @@ var LineChart = ({
   liveCandle: liveForming,
   lineData,
   lineValue,
-  live = false
+  live
 }) => {
   var _a, _b;
   const labels = (0, import_hooks11.useLabels)();
-  const { theme } = (0, import_hooks11.useSdkUiConfig)();
+  const { theme, enableGradients, enableLiveUpdates } = (0, import_hooks11.useSdkUiConfig)();
+  const isLive = enableLiveUpdates && (live != null ? live : true);
   const normalizedSeries = (0, import_react2.useMemo)(() => {
     return normalizeSeries(series);
   }, [series]);
@@ -1263,7 +1267,19 @@ var LineChart = ({
     if (!primarySeries) {
       return [];
     }
-    return toLivelinePoints(primarySeries.points);
+    const points = toLivelinePoints(primarySeries.points);
+    if (points.length < 3) {
+      return [
+        ...points,
+        ...points.map((point) => __spreadProps(__spreadValues({}, point), {
+          time: point.time + 1500
+        })),
+        ...points.map((point) => __spreadProps(__spreadValues({}, point), {
+          time: point.time + 3e3
+        }))
+      ];
+    }
+    return points;
   }, [primarySeries]);
   const primaryCandles = (0, import_react2.useMemo)(() => {
     if (!primarySeries) {
@@ -1297,7 +1313,7 @@ var LineChart = ({
   const timeFormatter = (0, import_react2.useMemo)(() => {
     return resolveTimeFormatter(windowSeconds);
   }, [windowSeconds]);
-  const seriesControls = showSeriesControls && normalizedSeries.length > 0 ? (_a = renderSeriesControls == null ? void 0 : renderSeriesControls({
+  const seriesControls = showSeriesControls ? (_a = renderSeriesControls == null ? void 0 : renderSeriesControls({
     series: normalizedSeries,
     activeSeriesId,
     handleSeriesChange
@@ -1330,9 +1346,10 @@ var LineChart = ({
             series: livelineSeries,
             color: (_b = primarySeries == null ? void 0 : primarySeries.color) != null ? _b : "var(--agg-color-primary)",
             theme: livelineTheme,
+            fill: enableGradients,
             grid: true,
-            momentum: live,
-            pulse: live,
+            momentum: isLive,
+            pulse: isLive,
             window: windowSeconds,
             mode: chartType === "candlestick" ? "candle" : "line",
             candles: chartType === "candlestick" ? primaryCandles : void 0,
@@ -1348,7 +1365,8 @@ var LineChart = ({
               bottom: 28,
               left: 12
             },
-            loading: isLoading
+            loading: isLoading,
+            lineWidth: 1
           }
         )
       }
@@ -3652,9 +3670,12 @@ var VenueLogo = ({
   title
 }) => {
   var _a;
+  const { showVenueLogo = true } = (0, import_hooks14.useAggUiConfig)();
   const labels = (0, import_hooks14.useLabels)();
   const sizeClass = sizeClasses2[size];
   const resolvedLabel = (_a = ariaLabel != null ? ariaLabel : labels.venues[venue]) != null ? _a : venueLogoLabels[venue];
+  if (!showVenueLogo)
+    return null;
   if (variant === "logo") {
     return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
       RemoteImage,
@@ -3728,9 +3749,9 @@ function Badge({
       )
     }, onClick && { onClick }), {
       children: [
-        prefix ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: classNames == null ? void 0 : classNames.prefix, children: prefix }) : null,
+        prefix ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: cn(classNames == null ? void 0 : classNames.prefix, "empty:hidden"), children: prefix }) : null,
         /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: cn("truncate", classNames == null ? void 0 : classNames.text), children: text }),
-        suffix ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: classNames == null ? void 0 : classNames.suffix, children: suffix }) : null
+        suffix ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: cn(classNames == null ? void 0 : classNames.suffix, "empty:hidden"), children: suffix }) : null
       ]
     })
   );
@@ -4236,7 +4257,11 @@ var StateMessage = ({
             size: "large",
             className: "text-agg-base leading-agg-6",
             "aria-label": actionLabel,
-            onClick: onAction,
+            onClick: (e) => {
+              e.stopPropagation();
+              e.preventDefault();
+              onAction == null ? void 0 : onAction();
+            },
             children: actionLabel
           }
         ) : null
@@ -4288,7 +4313,7 @@ var getTabButtonClassName = ({
   return cn(
     "cursor-pointer disabled:cursor-not-allowed",
     "relative inline-flex h-full shrink-0 items-center justify-center gap-2 font-agg-sans",
-    isBarVariant ? "hover:text-agg-foreground hover:bg-agg-secondary-hover" : "hover:text-agg-foreground hover:font-bold",
+    isBarVariant ? "hover:text-agg-foreground hover:bg-agg-secondary-hover" : "hover:text-agg-foreground hover:font-agg-bold",
     getMotionClassName(
       enableAnimations,
       "transition-[colors] duration-300 ease-in-out motion-reduce:transition-none"
@@ -4714,8 +4739,17 @@ var Tabs = ({
                           )
                         }
                       ) }) : null,
-                      item.icon ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { className: "relative z-10 inline-flex shrink-0 items-center justify-center", children: item.icon }) : null,
-                      /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { className: "relative z-10 truncate whitespace-nowrap [&::first-letter]:uppercase", children: item.label })
+                      item.icon ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { className: "relative z-10 inline-flex shrink-0 items-center justify-center empty:hidden", children: item.icon }) : null,
+                      /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+                        "span",
+                        {
+                          className: cn(
+                            "relative z-10 truncate whitespace-nowrap [&::first-letter]:uppercase"
+                          ),
+                          "data-text": item.label,
+                          children: item.label
+                        }
+                      )
                     ]
                   },
                   item.value
@@ -5743,7 +5777,6 @@ var EventListItemContent = ({
   event,
   title,
   image,
-  showVenueLogo = true,
   maxOutcomes = 2,
   classNames,
   venueInfo,
@@ -5779,7 +5812,7 @@ var EventListItemContent = ({
       return;
     if ((eventToHandle == null ? void 0 : eventToHandle.key) === "Enter" || (eventToHandle == null ? void 0 : eventToHandle.key) === " ") {
       eventToHandle == null ? void 0 : eventToHandle.preventDefault();
-      onClick();
+      onClick == null ? void 0 : onClick(event);
     }
   };
   const renderArbitrage = (value) => {
@@ -5806,7 +5839,7 @@ var EventListItemContent = ({
       className: cn(baseCardClassName, onClick && "cursor-pointer", classNames == null ? void 0 : classNames.root),
       role: onClick ? "button" : void 0,
       tabIndex: onClick ? 0 : void 0,
-      onClick,
+      onClick: () => onClick == null ? void 0 : onClick(event),
       onKeyDown: handleKeyDown,
       "aria-label": ariaLabel != null ? ariaLabel : resolvedTitle,
       children: [
@@ -5860,7 +5893,7 @@ var EventListItemContent = ({
                     Badge,
                     {
                       text: config.formatPercent(probability),
-                      prefix: showVenueLogo ? /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(VenueLogo, { venue: visibleOutcome.venue, size: "small" }) : void 0,
+                      prefix: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(VenueLogo, { venue: visibleOutcome.venue, size: "small" }),
                       size: "large",
                       classNames: {
                         root: cn(
@@ -5893,7 +5926,7 @@ var EventListItemContent = ({
                 ) }),
                 /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("span", { className: "text-agg-muted-foreground", children: "\xD7" }),
                 singleVenue ? /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("span", { className: "flex items-center gap-1 truncate text-agg-muted-foreground", children: [
-                  showVenueLogo ? /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
                     VenueLogo,
                     {
                       venue: singleVenue,
@@ -5901,14 +5934,14 @@ var EventListItemContent = ({
                       isMonochromatic: true,
                       className: "text-agg-muted-foreground!"
                     }
-                  ) : null,
+                  ),
                   /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("span", { children: venueLabel })
                 ] }) : /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("span", { className: "truncate text-agg-muted-foreground", children: formatCountLabel(
                   venueCount,
                   labels.eventItem.venueSingular,
                   labels.eventItem.venuePlural
                 ) }),
-                showVenueLogo && !singleVenue && visibleVenueLogos.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("span", { className: "flex items-center gap-1 overflow-hidden", children: visibleVenueLogos.map((venue) => /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+                !singleVenue && visibleVenueLogos.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("span", { className: "flex items-center gap-1 overflow-hidden", children: visibleVenueLogos.map((venue) => /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
                   VenueLogo,
                   {
                     venue,
@@ -6039,7 +6072,9 @@ var ChartTypeSwitch = ({
               "transition-colors duration-200 ease-in-out",
               isActive ? "text-agg-foreground" : "text-agg-muted-foreground"
             ),
-            onClick: () => {
+            onClick: (e) => {
+              e.stopPropagation();
+              e.preventDefault();
               if (isActive) {
                 return;
               }
@@ -6068,14 +6103,9 @@ var isDateLikeLabel = (value) => {
     return false;
   return (0, import_dayjs3.default)(value).isValid();
 };
-var formatDateLabel = (value) => {
-  if (!isDateLikeLabel(value))
-    return value;
-  return (0, import_dayjs3.default)(value).format("MMM D, YYYY");
-};
-var getDefaultSelectedTimeRange = (value) => {
+var getDefaultSelectedTimeRange = (value, fallback = "1D") => {
   if (!value)
-    return "1M";
+    return fallback;
   return value;
 };
 var getTimeWindowByRange = (range) => {
@@ -6157,24 +6187,6 @@ var resolveOutcomesByVenue = (venueMarkets, selectedOutcomeLabel) => {
     };
   }).filter((item) => item != null);
 };
-var buildPriceHistoryGroups = (selectedOutcomes, fallbackMarketId) => {
-  const marketIdByVenue = /* @__PURE__ */ new Map();
-  selectedOutcomes.forEach(({ venue, market }) => {
-    var _a, _b;
-    const marketWithCanonicalId = market;
-    const canonicalMarketId = (_a = marketWithCanonicalId.marketId) != null ? _a : fallbackMarketId;
-    if (!canonicalMarketId)
-      return;
-    if (!marketIdByVenue.has(venue)) {
-      marketIdByVenue.set(venue, /* @__PURE__ */ new Set());
-    }
-    (_b = marketIdByVenue.get(venue)) == null ? void 0 : _b.add(canonicalMarketId);
-  });
-  return [...marketIdByVenue.entries()].map(([venue, marketIds]) => ({
-    venue,
-    venueMarketOutcomeIds: [...marketIds]
-  })).filter((group) => group.venueMarketOutcomeIds.length > 0);
-};
 var resolveSeriesColor = (venue, index) => {
   var _a;
   const colorFromVenue = lineColorByVenue[venue];
@@ -6182,6 +6194,98 @@ var resolveSeriesColor = (venue, index) => {
     return colorFromVenue;
   return (_a = fallbackLineColors[index % fallbackLineColors.length]) != null ? _a : "#2e5cff";
 };
+var toNonEmptyString = (value) => {
+  if (typeof value !== "string")
+    return void 0;
+  const trimmedValue = value.trim();
+  return trimmedValue ? trimmedValue : void 0;
+};
+var resolveCanonicalMarketId = (venueMarkets, fallbackMarketId) => {
+  var _a;
+  const uniqueMarketIds = Array.from(
+    new Set(venueMarkets.map((market) => toNonEmptyString(market.marketId)).filter(Boolean))
+  );
+  if (uniqueMarketIds.length === 1) {
+    return uniqueMarketIds[0];
+  }
+  return (_a = toNonEmptyString(fallbackMarketId)) != null ? _a : uniqueMarketIds[0];
+};
+var toChartDisplayValue = (value, transformProbability) => {
+  if (value == null || !Number.isFinite(value))
+    return void 0;
+  return transformProbability(value) * 100;
+};
+var marketChartCandleToLineChartPoint = (candle, transformProbability) => {
+  var _a, _b, _c, _d;
+  const open = (_a = toChartDisplayValue(candle.open, transformProbability)) != null ? _a : 0;
+  const high = (_b = toChartDisplayValue(candle.high, transformProbability)) != null ? _b : open;
+  const low = (_c = toChartDisplayValue(candle.low, transformProbability)) != null ? _c : open;
+  const close = (_d = toChartDisplayValue(candle.close, transformProbability)) != null ? _d : open;
+  return {
+    time: candle.time,
+    value: close,
+    open,
+    high,
+    low,
+    close
+  };
+};
+var marketChartCandleToScaledCandlePoint = (candle, transformProbability) => {
+  var _a, _b, _c, _d;
+  const point = marketChartCandleToLineChartPoint(candle, transformProbability);
+  return {
+    time: point.time,
+    open: (_a = point.open) != null ? _a : point.value,
+    high: (_b = point.high) != null ? _b : point.value,
+    low: (_c = point.low) != null ? _c : point.value,
+    close: (_d = point.close) != null ? _d : point.value,
+    v: candle.volume
+  };
+};
+var resolveMarketChartVenueSeries = ({
+  chartData,
+  transformProbability
+}) => {
+  if (!chartData)
+    return [];
+  return Object.entries(chartData.venues).map(([venue, venueData]) => ({
+    venue,
+    points: venueData.candles.map(
+      (candle) => marketChartCandleToLineChartPoint(candle, transformProbability)
+    )
+  })).filter((item) => item.points.length > 0);
+};
+var resolveMarketChartLiveState = ({
+  chartData,
+  selectedVenue,
+  transformProbability
+}) => {
+  var _a, _b;
+  if (!chartData) {
+    return {
+      liveCandle: null,
+      lineValue: void 0,
+      live: false
+    };
+  }
+  const venueEntries = selectedVenue ? Object.entries(chartData.venues).filter(([venue]) => venue === selectedVenue) : Object.entries(chartData.venues);
+  if (venueEntries.length === 0) {
+    return {
+      liveCandle: null,
+      lineValue: void 0,
+      live: false
+    };
+  }
+  const singleVenueView = selectedVenue != null || venueEntries.length === 1;
+  const liveCandleEntry = singleVenueView ? venueEntries.find(([, venueData]) => venueData.liveCandle != null) : null;
+  const primaryLineValue = (_b = (_a = venueEntries[0]) == null ? void 0 : _a[1]) == null ? void 0 : _b.lineValue;
+  const lineValue = primaryLineValue != null ? toChartDisplayValue(primaryLineValue, transformProbability) : void 0;
+  return {
+    liveCandle: (liveCandleEntry == null ? void 0 : liveCandleEntry[1].liveCandle) ? marketChartCandleToScaledCandlePoint(liveCandleEntry[1].liveCandle, transformProbability) : null,
+    lineValue,
+    live: liveCandleEntry != null
+  };
+};
 
 // src/events/item-details/index.tsx
 var import_jsx_runtime85 = require("react/jsx-runtime");
@@ -6246,31 +6350,23 @@ var resolveAverageProbability = (values) => {
     return void 0;
   return validValues.reduce((sum, value) => sum + value, 0) / validValues.length;
 };
-var resolveOutcomeCandidateIds = (market, outcome) => {
-  var _a, _b;
-  const marketWithCanonicalId = market;
-  return [
-    outcome.id,
-    (_a = outcome.externalIdentifier) != null ? _a : void 0,
-    market.externalIdentifier,
-    (_b = marketWithCanonicalId.marketId) != null ? _b : void 0
-  ].filter((value) => typeof value === "string" && value.trim().length > 0);
-};
 var EventListItemDetailsGraphSection = ({
   venueMarkets,
-  canonicalMarketId,
   selectedOutcomeLabel,
   onSelectedOutcomeLabelChange,
   switchLabels,
   isDateOutcomeMarket,
   classNames,
-  showVenueLogo,
   venueInfo,
   formatPercent,
   selectedTimeRange,
-  selectedChartType
+  selectedChartType,
+  selectedOutcome: _selectedOutcome,
+  selectedMarket
 }) => {
+  var _a, _b;
   const labels = (0, import_hooks23.useLabels)();
+  const { enableLiveUpdates } = (0, import_hooks23.useSdkUiConfig)();
   const [selectedVenue, setSelectedVenue] = (0, import_react10.useState)(null);
   const [activeProbabilityMode, setActiveProbabilityMode] = (0, import_react10.useState)("yes");
   const probabilityModeConfigs = (0, import_react10.useMemo)(() => {
@@ -6339,105 +6435,71 @@ var EventListItemDetailsGraphSection = ({
       no: buildModeData("no")
     };
   }, [labels, probabilityModeConfigs, selectedOutcomesByMode, venueInfo]);
-  const allOutcomesForHistory = (0, import_react10.useMemo)(() => {
-    const outcomeByModeAndId = /* @__PURE__ */ new Map();
-    probabilityModeOrder.forEach((mode) => {
-      selectedOutcomesByMode[mode].forEach((outcomeByVenue) => {
-        outcomeByModeAndId.set(
-          `${outcomeByVenue.venue}:${outcomeByVenue.outcome.id}`,
-          outcomeByVenue
-        );
-      });
-    });
-    return [...outcomeByModeAndId.values()];
-  }, [selectedOutcomesByMode]);
-  const priceHistoryGroups = (0, import_react10.useMemo)(() => {
-    return buildPriceHistoryGroups(allOutcomesForHistory, canonicalMarketId);
-  }, [allOutcomesForHistory, canonicalMarketId]);
   const timeWindow = (0, import_react10.useMemo)(() => {
     return getTimeWindowByRange(selectedTimeRange);
   }, [selectedTimeRange]);
+  const activeOutcomes = selectedOutcomesByMode[activeProbabilityMode];
+  const activeCanonicalMarketId = (0, import_react10.useMemo)(() => {
+    return resolveCanonicalMarketId(activeOutcomes.map((item) => item.market));
+  }, [activeOutcomes]);
+  const venueMarketIds = (0, import_react10.useMemo)(() => {
+    return activeOutcomes.map((item) => item.market.id);
+  }, [activeOutcomes]);
   const {
-    data: priceHistoryData,
-    isLoading: isPriceHistoryLoading,
-    error: priceHistoryError,
-    results: priceHistoryResults
-  } = (0, import_hooks23.usePriceHistory)(__spreadProps(__spreadValues({
-    groups: priceHistoryGroups
-  }, timeWindow), {
-    enabled: priceHistoryGroups.length > 0
-  }));
-  const priceHistoryByVenue = (0, import_react10.useMemo)(() => {
-    const historyByVenue = /* @__PURE__ */ new Map();
-    if (!(priceHistoryData == null ? void 0 : priceHistoryData.length)) {
-      return historyByVenue;
-    }
-    priceHistoryData.forEach((historyItem) => {
-      const venue = historyItem.venue;
-      const venueHistory = historyByVenue.get(venue);
-      if (venueHistory) {
-        venueHistory.push(historyItem);
-        return;
-      }
-      historyByVenue.set(venue, [historyItem]);
-    });
-    return historyByVenue;
-  }, [priceHistoryData]);
-  const chartSeriesByMode = (0, import_react10.useMemo)(() => {
-    const buildSeries = (mode) => {
-      const modeConfig = probabilityModeConfigs[mode];
-      const chartSeries = [];
-      normalizedVenueDataByMode[mode].forEach((venueData) => {
-        var _a;
-        const venueHistory = priceHistoryByVenue.get(venueData.venue);
-        if (!(venueHistory == null ? void 0 : venueHistory.length))
-          return;
-        const candidateIds = resolveOutcomeCandidateIds(venueData.market, venueData.outcome);
-        const matchingHistory = (_a = venueHistory.find((historyItem) => candidateIds.includes(historyItem.marketId))) != null ? _a : venueHistory.length === 1 ? venueHistory[0] : void 0;
-        if (!matchingHistory)
-          return;
-        const points = matchingHistory.points.map((point) => {
-          const probability = normalizeProbability(point.price);
-          if (probability == null || !Number.isFinite(point.timestamp))
-            return null;
-          const open = normalizeProbability(point.open);
-          const high = normalizeProbability(point.high);
-          const low = normalizeProbability(point.low);
-          const close = normalizeProbability(point.close);
-          const transformedPoint = {
-            time: point.timestamp,
-            value: clampProbability(modeConfig.transformProbability(probability)) * 100,
-            open: open == null ? void 0 : clampProbability(modeConfig.transformProbability(open)) * 100,
-            high: high == null ? void 0 : clampProbability(modeConfig.transformProbability(high)) * 100,
-            low: low == null ? void 0 : clampProbability(modeConfig.transformProbability(low)) * 100,
-            close: close == null ? void 0 : clampProbability(modeConfig.transformProbability(close)) * 100
-          };
-          return transformedPoint;
-        }).filter((point) => point != null);
-        if (points.length === 0)
-          return;
-        chartSeries.push({
-          id: `${mode}-${venueData.venue}-${matchingHistory.marketId}`,
-          venue: venueData.venue,
-          color: venueData.color,
-          points,
-          lineWidth: 2,
-          lineStyle: "solid"
-        });
-      });
-      return chartSeries;
-    };
-    return {
-      yes: buildSeries("yes"),
-      no: buildSeries("no")
-    };
-  }, [normalizedVenueDataByMode, priceHistoryByVenue, probabilityModeConfigs]);
+    data: marketChartData,
+    isLoading: isMarketChartLoading,
+    error: marketChartError,
+    refetch: refetchMarketChart
+  } = (0, import_hooks23.useMarketChart)({
+    marketId: (_a = selectedMarket == null ? void 0 : selectedMarket.id) != null ? _a : null,
+    venueMarketIds,
+    interval: (0, import_hooks23.timeRangeToInterval)(selectedTimeRange),
+    startTs: timeWindow.startTs * 1e3,
+    endTs: timeWindow.endTs * 1e3,
+    enabled: !!(selectedMarket == null ? void 0 : selectedMarket.id),
+    live: enableLiveUpdates
+  });
   const visibleChartSeries = (0, import_react10.useMemo)(() => {
-    const modeSeries = chartSeriesByMode[activeProbabilityMode];
+    const transformProbability = probabilityModeConfigs[activeProbabilityMode].transformProbability;
+    const colorByVenue = new Map(
+      normalizedVenueDataByMode[activeProbabilityMode].map((venueData) => [
+        venueData.venue,
+        venueData.color
+      ])
+    );
+    const series = resolveMarketChartVenueSeries({
+      chartData: marketChartData,
+      transformProbability
+    }).map((seriesItem) => {
+      var _a2;
+      const resolvedVenue = seriesItem.venue;
+      return {
+        id: `${activeProbabilityMode}-${resolvedVenue}-${activeCanonicalMarketId != null ? activeCanonicalMarketId : "chart"}`,
+        venue: resolvedVenue,
+        color: (_a2 = colorByVenue.get(resolvedVenue)) != null ? _a2 : resolveSeriesColor(resolvedVenue, 0),
+        points: seriesItem.points,
+        lineWidth: 2,
+        lineStyle: "solid"
+      };
+    });
     if (!selectedVenue)
-      return modeSeries;
-    return modeSeries.filter((seriesItem) => seriesItem.venue === selectedVenue);
-  }, [activeProbabilityMode, chartSeriesByMode, selectedVenue]);
+      return series;
+    return series.filter((seriesItem) => seriesItem.venue === selectedVenue);
+  }, [
+    activeCanonicalMarketId,
+    activeProbabilityMode,
+    marketChartData,
+    normalizedVenueDataByMode,
+    probabilityModeConfigs,
+    selectedVenue
+  ]);
+  const chartLiveState = (0, import_react10.useMemo)(() => {
+    return resolveMarketChartLiveState({
+      chartData: marketChartData,
+      selectedVenue,
+      transformProbability: probabilityModeConfigs[activeProbabilityMode].transformProbability
+    });
+  }, [activeProbabilityMode, marketChartData, probabilityModeConfigs, selectedVenue]);
   const segmentedDisplayItems = (0, import_react10.useMemo)(() => {
     return probabilityModeOrder.map((mode) => {
       const averageProbability = resolveAverageProbability(
@@ -6475,31 +6537,22 @@ var EventListItemDetailsGraphSection = ({
       return venue;
     });
   };
-  const handleRetryPriceHistory = () => {
-    void Promise.all(priceHistoryResults.map((result) => result.refetch()));
+  const handleRetryMarketChart = () => {
+    void refetchMarketChart();
   };
-  if (priceHistoryError) {
-    return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
-      "div",
+  if (marketChartError) {
+    return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: cn("w-full", classNames == null ? void 0 : classNames.chart), children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+      StateMessage,
       {
-        className: cn(
-          "w-full rounded-agg-xl border border-agg-separator bg-agg-secondary",
-          classNames == null ? void 0 : classNames.chart
-        ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
-          StateMessage,
-          {
-            ariaLabel: labels.eventItemDetails.chartUnavailableAria,
-            tone: "warning",
-            title: labels.eventItemDetails.chartUnavailableTitle,
-            description: labels.eventItemDetails.chartUnavailableDescription,
-            actionLabel: labels.common.retry,
-            onAction: handleRetryPriceHistory,
-            className: "min-h-[300px] px-5 py-10 md:px-10"
-          }
-        )
+        tone: "warning",
+        ariaLabel: labels.eventItemDetails.chartUnavailableAria,
+        title: labels.eventItemDetails.chartUnavailableTitle,
+        description: labels.eventItemDetails.chartUnavailableDescription,
+        actionLabel: labels.common.retry,
+        onAction: handleRetryMarketChart,
+        className: "min-h-[300px] px-5 py-10 md:px-10"
       }
-    );
+    ) });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
     LineChart,
@@ -6507,8 +6560,10 @@ var EventListItemDetailsGraphSection = ({
       classNames: { root: classNames == null ? void 0 : classNames.chart },
       series: visibleChartSeries,
       height: 300,
-      isLoading: isPriceHistoryLoading,
+      isLoading: isMarketChartLoading,
       chartType: selectedChartType,
+      liveCandle: selectedChartType === "candlestick" ? (_b = chartLiveState.liveCandle) != null ? _b : void 0 : void 0,
+      lineValue: chartLiveState.lineValue,
       showSeriesControls: activeModeVenueData.length > 0 || segmentedDisplayItems.length > 0,
       renderSeriesControls: () => {
         return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
@@ -6524,7 +6579,7 @@ var EventListItemDetailsGraphSection = ({
                     classNames == null ? void 0 : classNames.outcomeBadges
                   ),
                   children: activeModeVenueData.map((venueData) => {
-                    var _a;
+                    var _a2;
                     const text = venueData.probability == null ? "-" : formatPercent(venueData.probability);
                     const isActiveVenue = selectedVenue === venueData.venue;
                     return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
@@ -6541,14 +6596,14 @@ var EventListItemDetailsGraphSection = ({
                           {
                             text,
                             size: "large",
-                            prefix: showVenueLogo ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+                            prefix: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
                               VenueLogo,
                               {
                                 venue: venueData.venue,
                                 size: "small",
-                                title: (_a = venueInfo == null ? void 0 : venueInfo[venueData.venue]) == null ? void 0 : _a.label
+                                title: (_a2 = venueInfo == null ? void 0 : venueInfo[venueData.venue]) == null ? void 0 : _a2.label
                               }
-                            ) : void 0,
+                            ),
                             classNames: {
                               root: cn("h-9 shrink-0 border-2 px-4 text-agg-base leading-agg-6")
                             },
@@ -6589,45 +6644,55 @@ var EventListItemDetailsGraphSection = ({
 };
 var EventListItemDetailsContent = ({
   event,
-  title,
-  image,
-  showVenueLogo = true,
   classNames,
   venueInfo,
   detailsStats,
   ariaLabel,
-  defaultTimeRange
+  defaultTimeRange,
+  onClick
 }) => {
+  var _a;
   const config = (0, import_hooks23.useSdkUiConfig)();
   const labels = (0, import_hooks23.useLabels)();
   const venueMarkets = (0, import_react10.useMemo)(() => {
-    var _a;
-    return (_a = event.venueMarkets) != null ? _a : [];
+    var _a2;
+    return (_a2 = event.venueMarkets) != null ? _a2 : [];
   }, [event.venueMarkets]);
+  const [selectedMarket, setSelectedMarket] = (0, import_react10.useState)(venueMarkets[0]);
+  const [selectedOutcome] = (0, import_react10.useState)(
+    (_a = selectedMarket == null ? void 0 : selectedMarket.venueMarketOutcomes.find(
+      (outcome) => outcome.winner
+    )) != null ? _a : selectedMarket == null ? void 0 : selectedMarket.venueMarketOutcomes[0]
+  );
   const primaryVenueMarket = (0, import_react10.useMemo)(() => {
     return selectPrimaryVenueMarket(venueMarkets);
   }, [venueMarkets]);
+  const filteredVenueMarkets = (0, import_react10.useMemo)(() => {
+    if (!selectedMarket)
+      return venueMarkets;
+    return venueMarkets.filter(
+      (vm) => vm.question === (selectedMarket == null ? void 0 : selectedMarket.question)
+    );
+  }, [venueMarkets, selectedMarket]);
   const outcomeLabels = (0, import_react10.useMemo)(() => {
-    return resolveOutcomeLabels(venueMarkets);
-  }, [venueMarkets]);
+    return resolveOutcomeLabels(filteredVenueMarkets);
+  }, [filteredVenueMarkets]);
   const [selectedOutcomeLabel, setSelectedOutcomeLabel] = (0, import_react10.useState)(() => {
     return resolveDefaultOutcomeLabel(outcomeLabels);
   });
+  const configTimeRange = config.defaultChartTimeRange;
   const [selectedTimeRange, setSelectedTimeRange] = (0, import_react10.useState)(() => {
-    return getDefaultSelectedTimeRange(defaultTimeRange);
+    return getDefaultSelectedTimeRange(defaultTimeRange, configTimeRange);
   });
   const [selectedChartType, setSelectedChartType] = (0, import_react10.useState)("line");
   (0, import_react10.useEffect)(() => {
-    setSelectedTimeRange(getDefaultSelectedTimeRange(defaultTimeRange));
-  }, [defaultTimeRange]);
-  const resolvedTitle = resolveTileTitle(event, primaryVenueMarket, title);
-  const resolvedImage = resolveTileImage(event, primaryVenueMarket, image);
+    setSelectedTimeRange(getDefaultSelectedTimeRange(defaultTimeRange, configTimeRange));
+  }, [defaultTimeRange, configTimeRange]);
   const isDateOutcomeMarket = outcomeLabels.length > 2 && outcomeLabels.every(isDateLikeLabel);
-  const outcomeSelectorLabels = outcomeLabels;
   const probabilityByLabel = (0, import_react10.useMemo)(() => {
     return new Map(
       outcomeLabels.map((label) => {
-        const outcomesByVenue = resolveOutcomesByVenue(venueMarkets, label);
+        const outcomesByVenue = resolveOutcomesByVenue(filteredVenueMarkets, label);
         const probabilities = outcomesByVenue.map((item) => normalizeProbability(item.outcome.price)).filter((value) => value != null);
         if (probabilities.length === 0) {
           return [label, void 0];
@@ -6636,13 +6701,13 @@ var EventListItemDetailsContent = ({
         return [label, averageProbability];
       })
     );
-  }, [outcomeLabels, venueMarkets]);
+  }, [outcomeLabels, filteredVenueMarkets]);
   const mainOutcomeLabel = (0, import_react10.useMemo)(() => {
     if (outcomeLabels.length === 0)
       return void 0;
     return [...outcomeLabels].sort((left, right) => {
-      var _a, _b;
-      const leftProbability = (_a = probabilityByLabel.get(left)) != null ? _a : -1;
+      var _a2, _b;
+      const leftProbability = (_a2 = probabilityByLabel.get(left)) != null ? _a2 : -1;
       const rightProbability = (_b = probabilityByLabel.get(right)) != null ? _b : -1;
       return rightProbability - leftProbability;
     })[0];
@@ -6659,17 +6724,17 @@ var EventListItemDetailsContent = ({
     setSelectedOutcomeLabel(fallbackOutcomeLabel);
   }, [isDateOutcomeMarket, mainOutcomeLabel, outcomeLabels, selectedOutcomeLabel]);
   const switchLabels = (0, import_react10.useMemo)(() => {
-    var _a, _b;
+    var _a2, _b;
     if (isDateOutcomeMarket) {
       return [labels.eventItemDetails.yes, labels.eventItemDetails.no];
     }
     const sortedOutcomeLabels = [...outcomeLabels].sort((left, right) => {
-      var _a2, _b2;
-      const leftProbability = (_a2 = probabilityByLabel.get(left)) != null ? _a2 : -1;
+      var _a3, _b2;
+      const leftProbability = (_a3 = probabilityByLabel.get(left)) != null ? _a3 : -1;
       const rightProbability = (_b2 = probabilityByLabel.get(right)) != null ? _b2 : -1;
       return rightProbability - leftProbability;
     });
-    const firstLabel = (_a = sortedOutcomeLabels[0]) != null ? _a : labels.eventItemDetails.yes;
+    const firstLabel = (_a2 = sortedOutcomeLabels[0]) != null ? _a2 : labels.eventItemDetails.yes;
     const secondLabel = (_b = sortedOutcomeLabels.find((label) => label !== firstLabel)) != null ? _b : firstLabel;
     return [firstLabel, secondLabel];
   }, [
@@ -6680,34 +6745,44 @@ var EventListItemDetailsContent = ({
     probabilityByLabel
   ]);
   const volumeLabel = (0, import_react10.useMemo)(() => {
-    var _a;
-    const resolvedVolume = typeof event.volume === "number" ? event.volume : (_a = primaryVenueMarket == null ? void 0 : primaryVenueMarket.volume) != null ? _a : void 0;
+    var _a2;
+    const resolvedVolume = typeof event.volume === "number" ? event.volume : (_a2 = primaryVenueMarket == null ? void 0 : primaryVenueMarket.volume) != null ? _a2 : void 0;
     if (typeof resolvedVolume !== "number")
       return "";
     return `${config.formatCompactCurrency(resolvedVolume)} ${labels.eventItemDetails.volumeSuffix}`;
   }, [config, event.volume, labels.eventItemDetails.volumeSuffix, primaryVenueMarket == null ? void 0 : primaryVenueMarket.volume]);
   if (!primaryVenueMarket || !selectedOutcomeLabel) {
-    return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(EventListItemDetailsUnavailableState, { classNames, ariaLabel });
+    return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+      EventListItemDetailsUnavailableState,
+      {
+        classNames,
+        ariaLabel: ariaLabel != null ? ariaLabel : event.title
+      }
+    );
   }
   return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
     Card,
     {
       className: cn(detailsBaseCardClassName, classNames == null ? void 0 : classNames.root),
-      "aria-label": ariaLabel != null ? ariaLabel : resolvedTitle,
+      "aria-label": ariaLabel != null ? ariaLabel : event.title,
+      onClick: () => {
+        onClick == null ? void 0 : onClick(event);
+      },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
           "div",
           {
             className: cn(
               "flex flex-row gap-3 md:gap-4",
-              "items-center justify-start",
+              venueMarkets.length > 1 ? "items-start" : "items-center",
+              "justify-start",
               classNames == null ? void 0 : classNames.header
             ),
             children: [
-              resolvedImage ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+              event.image ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
                 RemoteImage,
                 {
-                  src: resolvedImage,
+                  src: event.image,
                   alt: "",
                   className: "size-10 rounded-agg-lg object-cover md:size-[60px]"
                 }
@@ -6722,19 +6797,18 @@ var EventListItemDetailsContent = ({
                       "truncate text-wrap wrap-break-word line-clamp-2",
                       classNames == null ? void 0 : classNames.title
                     ),
-                    children: resolvedTitle
+                    children: event.title
                   }
                 ),
-                outcomeSelectorLabels.length > 2 ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+                venueMarkets.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
                   "div",
                   {
                     className: cn(
-                      "flex items-center gap-2 overflow-x-auto pb-1 md:flex-wrap md:overflow-visible md:pb-0",
+                      "flex flex-row flex-nowrap items-center gap-2 overflow-x-auto pb-1 md:pb-0",
                       classNames == null ? void 0 : classNames.headerPills
                     ),
-                    children: outcomeSelectorLabels.map((outcomeSelectorLabel) => {
-                      const isActive = outcomeSelectorLabel === selectedOutcomeLabel;
-                      const displayLabel = isDateLikeLabel(outcomeSelectorLabel) ? formatDateLabel(outcomeSelectorLabel) : outcomeSelectorLabel;
+                    children: venueMarkets.map((venueMarket) => {
+                      const isActive = (selectedMarket == null ? void 0 : selectedMarket.id) === venueMarket.id;
                       return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
                         Button,
                         {
@@ -6746,10 +6820,14 @@ var EventListItemDetailsContent = ({
                             "border-2",
                             isActive ? "border-agg-primary bg-agg-secondary text-agg-foreground font-agg-bold" : "border-transparent bg-agg-secondary-hover text-agg-foreground font-agg-normal"
                           ),
-                          onClick: () => setSelectedOutcomeLabel(outcomeSelectorLabel),
-                          children: displayLabel
+                          onClick: (e) => {
+                            e.stopPropagation();
+                            e.preventDefault();
+                            setSelectedMarket(venueMarket);
+                          },
+                          children: venueMarket.question
                         },
-                        outcomeSelectorLabel
+                        venueMarket.id
                       );
                     })
                   }
@@ -6778,14 +6856,14 @@ var EventListItemDetailsContent = ({
         /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
           EventListItemDetailsGraphSection,
           {
-            venueMarkets,
-            canonicalMarketId: event.id,
+            selectedOutcome,
+            selectedMarket,
+            venueMarkets: filteredVenueMarkets,
             selectedOutcomeLabel,
             onSelectedOutcomeLabelChange: setSelectedOutcomeLabel,
             switchLabels,
             isDateOutcomeMarket,
             classNames,
-            showVenueLogo,
             venueInfo,
             formatPercent: config.formatPercent,
             selectedTimeRange,
@@ -6811,7 +6889,11 @@ var EventListItemDetailsContent = ({
                     isActive ? "font-agg-bold! text-agg-foreground!" : "font-agg-normal! text-agg-muted-foreground!"
                   ),
                   "aria-pressed": isActive,
-                  onClick: () => setSelectedTimeRange(timeRange),
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    setSelectedTimeRange(timeRange);
+                  },
                   children: timeRange === "ALL" ? labels.eventItemDetails.allTimeRange : timeRange
                 },
                 timeRange
@@ -6829,19 +6911,20 @@ var EventListItemDetailsByEventId = (_a) => {
   } = _b, rest = __objRest(_b, [
     "eventId"
   ]);
+  const resolvedEventId = eventId != null ? eventId : "";
   const {
     event: fetchedEvent,
     error,
     isError,
     isLoading
   } = (0, import_hooks23.useVenueEvent)({
-    eventId: eventId != null ? eventId : "",
-    enabled: !!eventId
+    eventId: resolvedEventId,
+    enabled: !!resolvedEventId
   });
   const resolvedEvent = (0, import_react10.useMemo)(() => {
     return resolveEventListItemEvent(fetchedEvent);
   }, [fetchedEvent]);
-  if (!eventId) {
+  if (!resolvedEventId) {
     return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
       EventListItemDetailsUnavailableState,
       {
@@ -6880,26 +6963,22 @@ var EventListItemDetails = (props) => {
   }
   if ("eventId" in props && typeof props.eventId === "string") {
     const {
-      title: titleOverride,
-      image: imageOverride,
-      showVenueLogo: showVenueLogoOverride,
       classNames,
       venueInfo,
       detailsStats,
       ariaLabel: ariaLabelOverride,
-      defaultTimeRange: defaultTimeRangeOverride
+      defaultTimeRange: defaultTimeRangeOverride,
+      onClick
     } = props;
     const byEventIdProps = {
       eventId: props.eventId,
       isLoading: false,
-      title: titleOverride,
-      image: imageOverride,
-      showVenueLogo: showVenueLogoOverride,
       classNames,
       venueInfo,
       detailsStats,
       ariaLabel: ariaLabelOverride,
-      defaultTimeRange: defaultTimeRangeOverride
+      defaultTimeRange: defaultTimeRangeOverride,
+      onClick
     };
     return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(EventListItemDetailsByEventId, __spreadValues({}, byEventIdProps));
   }
@@ -6946,24 +7025,29 @@ var resolveInitialTab = (defaultTab) => {
     return parsedTab.data;
   return "order-book";
 };
-var resolveMarket = (event, marketId) => {
-  var _a, _b, _c, _d, _e;
-  if (!event.venueMarkets || event.venueMarkets.length === 0)
+var resolveMarketFromVenueMarkets = (venueMarkets, marketId) => {
+  var _a, _b;
+  if (!venueMarkets || venueMarkets.length === 0)
     return void 0;
   if (!marketId) {
+    const primary = selectPrimaryVenueMarket(venueMarkets);
+    const totalVolume2 = venueMarkets.reduce((sum, vm) => {
+      return sum + (typeof vm.volume === "number" ? vm.volume : 0);
+    }, 0);
     return {
-      id: event.id,
-      venueMarkets: event.venueMarkets,
-      volume: event.volume,
-      status: event.status,
-      startDate: event.startDate,
-      endDate: event.endDate,
-      creationDate: event.creationDate,
-      question: event.title
+      id: (_a = primary == null ? void 0 : primary.id) != null ? _a : venueMarkets[0].id,
+      venueMarkets,
+      volume: totalVolume2 || (primary == null ? void 0 : primary.volume),
+      status: primary == null ? void 0 : primary.status,
+      startDate: primary == null ? void 0 : primary.startDate,
+      endDate: primary == null ? void 0 : primary.endDate,
+      creationDate: primary == null ? void 0 : primary.creationDate,
+      question: (_b = primary == null ? void 0 : primary.question) != null ? _b : venueMarkets[0].question
     };
   }
-  const venueMarkets = event.venueMarkets;
-  const matchedVenueMarket = venueMarkets.find((vm) => vm.id === marketId);
+  const matchedVenueMarket = venueMarkets.find(
+    (vm) => vm.id === marketId || vm.externalIdentifier === marketId
+  );
   if (!matchedVenueMarket)
     return void 0;
   const siblingVenueMarkets = venueMarkets.filter(
@@ -6976,11 +7060,11 @@ var resolveMarket = (event, marketId) => {
     id: matchedVenueMarket.id,
     venueMarkets: siblingVenueMarkets,
     volume: totalVolume || matchedVenueMarket.volume,
-    status: (_a = matchedVenueMarket.status) != null ? _a : event.status,
-    startDate: (_b = matchedVenueMarket.startDate) != null ? _b : event.startDate,
-    endDate: (_c = matchedVenueMarket.endDate) != null ? _c : event.endDate,
-    creationDate: (_d = matchedVenueMarket.creationDate) != null ? _d : event.creationDate,
-    question: (_e = matchedVenueMarket.question) != null ? _e : event.title
+    status: matchedVenueMarket.status,
+    startDate: matchedVenueMarket.startDate,
+    endDate: matchedVenueMarket.endDate,
+    creationDate: matchedVenueMarket.creationDate,
+    question: matchedVenueMarket.question
   };
 };
 var resolveDisplayOutcomeLabels = (labels) => {
@@ -7049,7 +7133,8 @@ var resolveHeaderOutcomeItems = (venueMarkets, defaultOutcomeLabel) => {
       label,
       probability: probabilityByLabel.get(label),
       tone: resolveOutcomeTone(label, index),
-      isDefault: normalizeLabel2(label) === normalizeLabel2((_a = defaultOutcomeLabel != null ? defaultOutcomeLabel : labels[0]) != null ? _a : "")
+      isDefault: normalizeLabel2(label) === normalizeLabel2((_a = defaultOutcomeLabel != null ? defaultOutcomeLabel : labels[0]) != null ? _a : ""),
+      venue: venueMarkets[0].venue
     };
   });
 };
@@ -7140,23 +7225,23 @@ var resolveOtherTabRows = (market, labels) => {
   return rows;
 };
 var buildMarketDetailsModel = ({
-  event,
+  venueMarkets,
   marketId,
   title,
   image,
   formatCompactCurrency,
   labels
 }) => {
-  var _a;
-  const market = resolveMarket(event, marketId);
+  var _a, _b;
+  const market = resolveMarketFromVenueMarkets(venueMarkets, marketId);
   if (!market)
     return void 0;
   const primaryVenueMarket = selectPrimaryVenueMarket(market.venueMarkets);
   if (!primaryVenueMarket)
     return void 0;
-  const resolvedTitle = resolveTileTitle(event, primaryVenueMarket, title);
-  const resolvedImage = resolveTileImage(event, primaryVenueMarket, image);
-  const resolvedVolume = typeof market.volume === "number" ? market.volume : (_a = primaryVenueMarket.volume) != null ? _a : void 0;
+  const resolvedTitle = (title == null ? void 0 : title.trim()) || primaryVenueMarket.question || market.question;
+  const resolvedImage = (_a = typeof image === "string" && image.trim() ? image : void 0) != null ? _a : typeof primaryVenueMarket.image === "string" && primaryVenueMarket.image.trim() ? primaryVenueMarket.image : void 0;
+  const resolvedVolume = typeof market.volume === "number" ? market.volume : (_b = primaryVenueMarket.volume) != null ? _b : void 0;
   const subtitle = resolveSubtitle({
     venueMarkets: market.venueMarkets,
     volume: resolvedVolume,
@@ -7302,7 +7387,7 @@ var getOutcomeButtonClassName = ({
   );
 };
 var MarketDetailsContent = ({
-  event,
+  venueMarkets,
   marketId,
   title,
   image,
@@ -7310,29 +7395,29 @@ var MarketDetailsContent = ({
   onOpenChange,
   defaultTab,
   defaultOutcomeLabel,
-  defaultTimeRange = "1M",
+  defaultTimeRange,
   orderBookDepth = orderBookRowLimitDefault,
   ariaLabel,
   classNames,
-  otherContent,
-  liveUpdate = false
+  otherContent
 }) => {
+  var _a, _b, _c, _d;
   const config = (0, import_hooks24.useSdkUiConfig)();
   const labels = (0, import_hooks24.useLabels)();
   const detailsContentId = (0, import_react11.useId)();
   const model = (0, import_react11.useMemo)(() => {
     return buildMarketDetailsModel({
-      event,
+      venueMarkets,
       marketId,
       title,
       image,
       formatCompactCurrency: config.formatCompactCurrency,
       labels
     });
-  }, [config.formatCompactCurrency, event, image, labels, marketId, title]);
+  }, [config.formatCompactCurrency, venueMarkets, image, labels, marketId, title]);
   const resolvedMarket = (0, import_react11.useMemo)(() => {
-    return resolveMarket(event, marketId);
-  }, [event, marketId]);
+    return resolveMarketFromVenueMarkets(venueMarkets, marketId);
+  }, [venueMarkets, marketId]);
   const marketDetailsTabs = (0, import_react11.useMemo)(() => {
     return getMarketDetailsTabs(labels);
   }, [labels]);
@@ -7343,22 +7428,23 @@ var MarketDetailsContent = ({
   (0, import_react11.useEffect)(() => {
     setSelectedTab(resolveInitialTab(defaultTab));
   }, [defaultTab]);
-  const [selectedTimeRange, setSelectedTimeRange] = (0, import_react11.useState)(defaultTimeRange);
+  const resolvedDefaultTimeRange = (_a = defaultTimeRange != null ? defaultTimeRange : config.defaultChartTimeRange) != null ? _a : "1D";
+  const [selectedTimeRange, setSelectedTimeRange] = (0, import_react11.useState)(resolvedDefaultTimeRange);
   const [selectedChartType, setSelectedChartType] = (0, import_react11.useState)("line");
   (0, import_react11.useEffect)(() => {
-    setSelectedTimeRange(defaultTimeRange);
-  }, [defaultTimeRange]);
+    setSelectedTimeRange(resolvedDefaultTimeRange);
+  }, [resolvedDefaultTimeRange]);
   const [selectedOutcomeLabel, setSelectedOutcomeLabel] = (0, import_react11.useState)(
     () => {
-      var _a;
-      return resolveInitialOutcomeLabel((_a = model == null ? void 0 : model.outcomeLabels) != null ? _a : [], defaultOutcomeLabel);
+      var _a2;
+      return resolveInitialOutcomeLabel((_a2 = model == null ? void 0 : model.outcomeLabels) != null ? _a2 : [], defaultOutcomeLabel);
     }
   );
   const [selectedGraphVenue, setSelectedGraphVenue] = (0, import_react11.useState)(null);
   (0, import_react11.useEffect)(() => {
-    var _a;
+    var _a2;
     setSelectedOutcomeLabel(
-      resolveInitialOutcomeLabel((_a = model == null ? void 0 : model.outcomeLabels) != null ? _a : [], defaultOutcomeLabel)
+      resolveInitialOutcomeLabel((_a2 = model == null ? void 0 : model.outcomeLabels) != null ? _a2 : [], defaultOutcomeLabel)
     );
   }, [defaultOutcomeLabel, model == null ? void 0 : model.outcomeLabels]);
   const headerOutcomeItems = (0, import_react11.useMemo)(() => {
@@ -7385,52 +7471,66 @@ var MarketDetailsContent = ({
     return outcomesByLabelMap;
   }, [headerOutcomeItems, model]);
   const selectedOutcomesByVenue = (0, import_react11.useMemo)(() => {
-    var _a;
+    var _a2;
     if (!selectedOutcomeLabel)
       return [];
-    return (_a = outcomesByLabel.get(selectedOutcomeLabel)) != null ? _a : [];
+    return (_a2 = outcomesByLabel.get(selectedOutcomeLabel)) != null ? _a2 : [];
   }, [outcomesByLabel, selectedOutcomeLabel]);
+  const chartEnabled = isOpened && selectedTab === "graph";
+  const orderBookEnabled = isOpened && selectedTab === "order-book";
   const timeWindow = (0, import_react11.useMemo)(() => {
     return getTimeWindowByRange(selectedTimeRange);
   }, [selectedTimeRange]);
-  const graphOutcomes = (0, import_react11.useMemo)(() => {
-    const uniqueOutcomesByVenueAndId = /* @__PURE__ */ new Map();
-    outcomesByLabel.forEach((outcomes) => {
-      outcomes.forEach((outcomeByVenue) => {
-        uniqueOutcomesByVenueAndId.set(
-          `${outcomeByVenue.venue}:${outcomeByVenue.outcome.id}`,
-          outcomeByVenue
-        );
-      });
-    });
-    return [...uniqueOutcomesByVenueAndId.values()];
-  }, [outcomesByLabel]);
-  const canonicalMarketIdForHistory = model == null ? void 0 : model.market.id;
-  const priceHistoryGroups = (0, import_react11.useMemo)(() => {
-    return buildPriceHistoryGroups(graphOutcomes, canonicalMarketIdForHistory);
-  }, [canonicalMarketIdForHistory, graphOutcomes]);
-  const { data: priceHistoryData, isLoading: isPriceHistoryLoading } = (0, import_hooks24.usePriceHistory)(__spreadProps(__spreadValues({
-    groups: priceHistoryGroups
-  }, timeWindow), {
-    enabled: isOpened && selectedTab === "graph" && priceHistoryGroups.length > 0
-  }));
-  const orderBookInputs = (0, import_react11.useMemo)(() => {
-    return selectedOutcomesByVenue.map(({ market, outcome }) => ({
-      market,
-      outcome,
-      liveUpdate
-    }));
-  }, [selectedOutcomesByVenue, liveUpdate]);
+  const primaryVenueMarketId = (_c = (_b = selectedOutcomesByVenue[0]) == null ? void 0 : _b.market.id) != null ? _c : null;
+  const venueMarketIds = (0, import_react11.useMemo)(() => {
+    return selectedOutcomesByVenue.map((item) => item.market.id);
+  }, [selectedOutcomesByVenue]);
+  const {
+    data: marketChartData,
+    isLoading: isMarketChartLoading,
+    error: marketChartError,
+    refetch: refetchMarketChart
+  } = (0, import_hooks24.useMarketChart)({
+    marketId: primaryVenueMarketId,
+    venueMarketIds,
+    interval: (0, import_hooks24.timeRangeToInterval)(selectedTimeRange),
+    startTs: timeWindow.startTs * 1e3,
+    endTs: timeWindow.endTs * 1e3,
+    enabled: chartEnabled && !!primaryVenueMarketId
+  });
   const {
-    data: orderBookData,
+    data: marketOrderbookData,
     isLoading: isOrderBookLoading,
     error: orderBookError,
-    results: orderBookResults
-  } = (0, import_hooks24.useOrderBook)({
-    orderbooks: orderBookInputs,
-    enabled: isOpened && selectedTab === "order-book" && orderBookInputs.length > 0,
-    canonicalMarketId: liveUpdate ? canonicalMarketIdForHistory : void 0
+    refetch: refetchOrderBook
+  } = (0, import_hooks24.useMarketOrderbook)({
+    marketId: primaryVenueMarketId,
+    enabled: orderBookEnabled && !!primaryVenueMarketId,
+    venueOutcomes: selectedOutcomesByVenue.map((item) => ({
+      venue: item.market.venue,
+      venueMarketOutcomeId: item.outcome.id
+    }))
   });
+  const orderBookData = (0, import_react11.useMemo)(() => {
+    if (!marketOrderbookData)
+      return void 0;
+    const results = selectedOutcomesByVenue.flatMap(({ market, outcome }) => {
+      const venueOrderbook = marketOrderbookData.venueOrderbooks[market.venue];
+      if (!venueOrderbook)
+        return [];
+      return [
+        {
+          market,
+          outcome,
+          orderbook: {
+            bids: venueOrderbook.bids,
+            asks: venueOrderbook.asks
+          }
+        }
+      ];
+    });
+    return results.length === selectedOutcomesByVenue.length ? results : void 0;
+  }, [marketOrderbookData, selectedOutcomesByVenue]);
   const askRows = (0, import_react11.useMemo)(() => {
     return resolveOrderBookRows({
       data: orderBookData,
@@ -7443,78 +7543,43 @@ var MarketDetailsContent = ({
       side: "bids"
     });
   }, [orderBookData]);
-  const priceHistoryByVenue = (0, import_react11.useMemo)(() => {
-    const historyByVenue = /* @__PURE__ */ new Map();
-    if (!(priceHistoryData == null ? void 0 : priceHistoryData.length)) {
-      return historyByVenue;
-    }
-    priceHistoryData.forEach((historyItem) => {
-      const venue = historyItem.venue;
-      const venueHistory = historyByVenue.get(venue);
-      if (venueHistory) {
-        venueHistory.push(historyItem);
-        return;
-      }
-      historyByVenue.set(venue, [historyItem]);
-    });
-    return historyByVenue;
-  }, [priceHistoryData]);
-  const graphSeriesByOutcomeLabel = (0, import_react11.useMemo)(() => {
-    const seriesByOutcomeLabel = /* @__PURE__ */ new Map();
-    const resolveOutcomeCandidateIds2 = (outcomeByVenue) => {
-      var _a, _b;
-      const marketWithCanonicalId = outcomeByVenue.market;
-      return [
-        outcomeByVenue.outcome.id,
-        (_a = outcomeByVenue.outcome.externalIdentifier) != null ? _a : void 0,
-        outcomeByVenue.market.externalIdentifier,
-        (_b = marketWithCanonicalId.marketId) != null ? _b : void 0,
-        canonicalMarketIdForHistory
-      ].filter((value) => typeof value === "string" && value.trim().length > 0);
-    };
-    headerOutcomeItems.forEach((headerOutcomeItem) => {
-      var _a;
-      const outcomes = (_a = outcomesByLabel.get(headerOutcomeItem.label)) != null ? _a : [];
-      const graphSeries2 = [];
-      outcomes.forEach((outcomeByVenue, index) => {
-        var _a2;
-        const venueHistory = priceHistoryByVenue.get(outcomeByVenue.venue);
-        if (!(venueHistory == null ? void 0 : venueHistory.length))
-          return;
-        const candidateIds = resolveOutcomeCandidateIds2(outcomeByVenue);
-        const matchingHistory = (_a2 = venueHistory.find((historyItem) => candidateIds.includes(historyItem.marketId))) != null ? _a2 : venueHistory.length === 1 ? venueHistory[0] : void 0;
-        if (!matchingHistory)
-          return;
-        const points = matchingHistory.points.map((point) => ({
-          time: point.timestamp,
-          value: point.price * 100,
-          open: point.open == null ? void 0 : point.open * 100,
-          high: point.high == null ? void 0 : point.high * 100,
-          low: point.low == null ? void 0 : point.low * 100,
-          close: point.close == null ? void 0 : point.close * 100
-        })).filter((point) => Number.isFinite(point.time) && Number.isFinite(point.value));
-        if (points.length === 0)
-          return;
-        graphSeries2.push({
-          id: `${headerOutcomeItem.label}-${outcomeByVenue.venue}-${matchingHistory.marketId}`,
-          venue: outcomeByVenue.venue,
-          color: resolveSeriesColor(outcomeByVenue.venue, index),
-          points
-        });
-      });
-      seriesByOutcomeLabel.set(headerOutcomeItem.label, graphSeries2);
-    });
-    return seriesByOutcomeLabel;
-  }, [canonicalMarketIdForHistory, headerOutcomeItems, outcomesByLabel, priceHistoryByVenue]);
   const graphSeries = (0, import_react11.useMemo)(() => {
-    var _a;
-    if (!selectedOutcomeLabel)
-      return [];
-    const seriesForOutcomeLabel = (_a = graphSeriesByOutcomeLabel.get(selectedOutcomeLabel)) != null ? _a : [];
+    const colorByVenue = new Map(
+      selectedOutcomesByVenue.map((item, index) => [
+        item.venue,
+        resolveSeriesColor(item.venue, index)
+      ])
+    );
+    const seriesForOutcomeLabel = resolveMarketChartVenueSeries({
+      chartData: marketChartData,
+      transformProbability: (value) => value
+    }).map((seriesItem) => {
+      var _a2;
+      const resolvedVenue = seriesItem.venue;
+      return {
+        id: `${selectedOutcomeLabel != null ? selectedOutcomeLabel : "graph"}-${resolvedVenue}-${primaryVenueMarketId != null ? primaryVenueMarketId : "chart"}`,
+        venue: resolvedVenue,
+        color: (_a2 = colorByVenue.get(resolvedVenue)) != null ? _a2 : resolveSeriesColor(resolvedVenue, 0),
+        points: seriesItem.points
+      };
+    });
     if (!selectedGraphVenue)
       return seriesForOutcomeLabel;
     return seriesForOutcomeLabel.filter((seriesItem) => seriesItem.venue === selectedGraphVenue);
-  }, [graphSeriesByOutcomeLabel, selectedGraphVenue, selectedOutcomeLabel]);
+  }, [
+    primaryVenueMarketId,
+    marketChartData,
+    selectedGraphVenue,
+    selectedOutcomeLabel,
+    selectedOutcomesByVenue
+  ]);
+  const graphLiveState = (0, import_react11.useMemo)(() => {
+    return resolveMarketChartLiveState({
+      chartData: marketChartData,
+      selectedVenue: selectedGraphVenue,
+      transformProbability: (value) => value
+    });
+  }, [marketChartData, selectedGraphVenue]);
   const otherRows = (0, import_react11.useMemo)(() => {
     if (!model)
       return [];
@@ -7522,9 +7587,10 @@ var MarketDetailsContent = ({
   }, [labels, model]);
   const isOrderBookNotFound = orderBookError && typeof orderBookError === "object" && "status" in orderBookError && orderBookError.status === 404;
   const hasOrderBookError = !!orderBookError && !isOrderBookNotFound;
-  const hasNoOrderBook = isOrderBookNotFound || !isOrderBookLoading && !hasOrderBookError && (orderBookInputs.length === 0 || askRows.length === 0 && bidRows.length === 0);
+  const hasNoOrderBook = isOrderBookNotFound || !isOrderBookLoading && !hasOrderBookError && (selectedOutcomesByVenue.length === 0 || askRows.length === 0 && bidRows.length === 0);
+  const hasChartError = !!marketChartError;
   const handleOutcomeKeyDown = (eventToHandle) => {
-    var _a;
+    var _a2;
     if ((eventToHandle == null ? void 0 : eventToHandle.key) !== "ArrowLeft" && (eventToHandle == null ? void 0 : eventToHandle.key) !== "ArrowRight") {
       return;
     }
@@ -7535,14 +7601,14 @@ var MarketDetailsContent = ({
     });
     const direction = eventToHandle.key === "ArrowRight" ? 1 : -1;
     const nextIndex = activeIndex < 0 ? 0 : (activeIndex + direction + headerOutcomeItems.length) % headerOutcomeItems.length;
-    setSelectedOutcomeLabel((_a = headerOutcomeItems[nextIndex]) == null ? void 0 : _a.label);
+    setSelectedOutcomeLabel((_a2 = headerOutcomeItems[nextIndex]) == null ? void 0 : _a2.label);
   };
-  const handleToggleExpanded = (event2) => {
-    if (event2 && "key" in event2 && (event2 == null ? void 0 : event2.key) !== "Enter" && (event2 == null ? void 0 : event2.key) !== " ") {
+  const handleToggleExpanded = (event) => {
+    if (event && "key" in event && (event == null ? void 0 : event.key) !== "Enter" && (event == null ? void 0 : event.key) !== " ") {
       return;
     }
-    event2 == null ? void 0 : event2.preventDefault();
-    event2 == null ? void 0 : event2.stopPropagation();
+    event == null ? void 0 : event.preventDefault();
+    event == null ? void 0 : event.stopPropagation();
     setIsOpened((prev) => {
       const next = !prev;
       onOpenChange == null ? void 0 : onOpenChange(next);
@@ -7557,7 +7623,10 @@ var MarketDetailsContent = ({
     });
   };
   const handleRetryOrderBook = () => {
-    void Promise.all(orderBookResults.map((result) => result.refetch()));
+    void refetchOrderBook();
+  };
+  const handleRetryMarketChart = () => {
+    void refetchMarketChart();
   };
   (0, import_react11.useEffect)(() => {
     if (!selectedGraphVenue) {
@@ -7600,7 +7669,7 @@ var MarketDetailsContent = ({
             onClick: handleToggleExpanded,
             onKeyDown: handleToggleExpanded,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "flex min-w-52 items-center gap-3 md:gap-4", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "flex min-w-52 max-w-3/4 items-center gap-3 md:gap-4", children: [
                 model.image ? /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
                   RemoteImage,
                   {
@@ -7647,7 +7716,7 @@ var MarketDetailsContent = ({
                           /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
                             VenueLogo,
                             {
-                              venue: isPositive ? "polymarket" : "probable",
+                              venue: "polymarket",
                               size: "small",
                               color: isActiveOutcome ? "var(--agg-color-on-primary)" : void 0
                             }
@@ -7754,13 +7823,26 @@ var MarketDetailsContent = ({
                         )
                       ] }) }) : null,
                       selectedTab === "graph" ? /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: cn("flex flex-col gap-5", classNames == null ? void 0 : classNames.graph), children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+                        hasChartError ? /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+                          StateMessage,
+                          {
+                            ariaLabel: labels.marketDetails.chartUnavailableAria,
+                            tone: "warning",
+                            title: labels.marketDetails.chartUnavailableTitle,
+                            description: labels.marketDetails.chartUnavailableDescription,
+                            actionLabel: labels.common.retry,
+                            onAction: handleRetryMarketChart,
+                            className: "min-h-[248px] px-5 py-10 md:min-h-[272px]"
+                          }
+                        ) : /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
                           LineChart,
                           {
                             series: graphSeries,
                             height: 260,
-                            isLoading: isPriceHistoryLoading,
+                            isLoading: isMarketChartLoading,
                             chartType: selectedChartType,
+                            liveCandle: selectedChartType === "candlestick" ? (_d = graphLiveState.liveCandle) != null ? _d : void 0 : void 0,
+                            lineValue: graphLiveState.lineValue,
                             classNames: { root: "w-full" },
                             showSeriesControls: selectedOutcomesByVenue.length > 0 || headerOutcomeItems.length > 0,
                             renderSeriesControls: () => {
@@ -7884,7 +7966,7 @@ var MarketDetailsContent = ({
   );
 };
 var MarketDetails = (props) => {
-  var _a, _b;
+  var _a;
   const [uncontrolledIsOpened, setUncontrolledIsOpened] = (0, import_react11.useState)(
     (_a = props.defaultIsOpened) != null ? _a : marketDetailsDefaultIsOpened
   );
@@ -7901,15 +7983,6 @@ var MarketDetails = (props) => {
     }
     (_a2 = props.onOpenChange) == null ? void 0 : _a2.call(props, nextIsOpened);
   };
-  const hasEventProp = "event" in props && !!props.event;
-  const {
-    event: fetchedEvent,
-    error: eventError,
-    isLoading: isFetchingEvent
-  } = (0, import_hooks24.useVenueEvent)({
-    eventId: hasEventProp ? "" : (_b = props.eventId) != null ? _b : "",
-    enabled: !props.isLoading && !hasEventProp && !!props.eventId
-  });
   if (props.isLoading) {
     return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
       MarketDetailsLoadingState,
@@ -7920,42 +7993,115 @@ var MarketDetails = (props) => {
       }
     );
   }
-  if ("event" in props && props.event) {
+  if ("venueMarkets" in props && props.venueMarkets) {
     return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
       MarketDetailsContent,
       __spreadProps(__spreadValues({}, props), {
         isOpened: resolvedIsOpened,
         onOpenChange: handleOpenChange,
-        event: props.event
+        venueMarkets: props.venueMarkets
       })
     );
   }
-  if (isFetchingEvent) {
-    return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
-      MarketDetailsLoadingState,
+  const { ariaLabel: fallbackAriaLabel, classNames: fallbackClassNames } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(MarketDetailsUnavailableState, { ariaLabel: fallbackAriaLabel, classNames: fallbackClassNames });
+};
+MarketDetails.displayName = "MarketDetails";
+var resolveInitialExpandedId = (markets, defaultId) => {
+  var _a, _b;
+  if (!markets.length)
+    return null;
+  if (defaultId) {
+    const match = markets.find((m) => m.id === defaultId);
+    if (match)
+      return match.id;
+  }
+  return (_b = (_a = markets[0]) == null ? void 0 : _a.id) != null ? _b : null;
+};
+var MarketDetailsList = ({
+  eventId,
+  expandedMarketId,
+  defaultExpandedMarketId,
+  onExpandedMarketChange,
+  defaultTab,
+  defaultTimeRange,
+  classNames,
+  ariaLabel
+}) => {
+  const labels = (0, import_hooks24.useLabels)();
+  const resolvedEventId = eventId || "";
+  const { markets, isLoading, error } = (0, import_hooks24.useVenueMarkets)({
+    venueEventId: resolvedEventId,
+    enabled: !!resolvedEventId
+  });
+  const [internalExpandedId, setInternalExpandedId] = (0, import_react11.useState)(
+    () => resolveInitialExpandedId(markets, defaultExpandedMarketId)
+  );
+  (0, import_react11.useEffect)(() => {
+    if (typeof expandedMarketId !== "undefined")
+      return;
+    setInternalExpandedId((current) => {
+      if (current && markets.some((m) => m.id === current))
+        return current;
+      return resolveInitialExpandedId(markets, defaultExpandedMarketId);
+    });
+  }, [defaultExpandedMarketId, expandedMarketId, markets]);
+  (0, import_react11.useEffect)(() => {
+    if (typeof expandedMarketId === "undefined")
+      return;
+    setInternalExpandedId(expandedMarketId);
+  }, [expandedMarketId]);
+  const resolvedExpandedId = typeof expandedMarketId === "undefined" ? internalExpandedId : expandedMarketId;
+  const handleToggle = (marketId, isOpened) => {
+    const next = isOpened ? marketId : null;
+    if (typeof expandedMarketId === "undefined") {
+      setInternalExpandedId(next);
+    }
+    onExpandedMarketChange == null ? void 0 : onExpandedMarketChange(next);
+  };
+  if (isLoading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: cn("flex flex-col gap-3", classNames == null ? void 0 : classNames.root), "aria-label": ariaLabel, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(MarketDetailsLoadingState, { isOpened: true, classNames: { root: classNames == null ? void 0 : classNames.item } }),
+      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(MarketDetailsLoadingState, { isOpened: false, classNames: { root: classNames == null ? void 0 : classNames.item } })
+    ] });
+  }
+  if (error) {
+    return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(Card, { className: cn(marketDetailsBaseCardClassName, "p-0", classNames == null ? void 0 : classNames.root), children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+      StateMessage,
       {
-        isOpened: resolvedIsOpened,
-        ariaLabel: props.ariaLabel,
-        classNames: props.classNames
+        ariaLabel: ariaLabel != null ? ariaLabel : labels.marketDetails.unavailableAria,
+        title: labels.marketDetails.unavailableTitle,
+        description: labels.marketDetails.unavailableDescription,
+        className: "min-h-[280px] md:min-h-[320px]"
       }
-    );
+    ) });
   }
-  if (!fetchedEvent) {
-    if (isErrorWithStatus(eventError, 404)) {
-      return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(MarketDetailsNotFoundState, { ariaLabel: props.ariaLabel, classNames: props.classNames });
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(MarketDetailsUnavailableState, { ariaLabel: props.ariaLabel, classNames: props.classNames });
+  if (markets.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(Card, { className: cn(marketDetailsBaseCardClassName, "p-0", classNames == null ? void 0 : classNames.root), children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+      StateMessage,
+      {
+        ariaLabel: ariaLabel != null ? ariaLabel : labels.marketDetails.notFoundAria,
+        title: labels.marketDetails.notFoundTitle,
+        description: labels.marketDetails.notFoundDescription,
+        className: "min-h-[280px] md:min-h-[320px]"
+      }
+    ) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
-    MarketDetailsContent,
-    __spreadProps(__spreadValues({}, props), {
-      isOpened: resolvedIsOpened,
-      onOpenChange: handleOpenChange,
-      event: fetchedEvent
-    })
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: cn("flex flex-col gap-3", classNames == null ? void 0 : classNames.root), "aria-label": ariaLabel, children: markets.map((market) => /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+    MarketDetails,
+    {
+      venueMarkets: [market],
+      isOpened: resolvedExpandedId === market.id,
+      onOpenChange: (nextIsOpened) => handleToggle(market.id, nextIsOpened),
+      defaultTab,
+      defaultTimeRange,
+      ariaLabel: market.question,
+      classNames: { root: classNames == null ? void 0 : classNames.item }
+    },
+    market.id
+  )) });
 };
-MarketDetails.displayName = "MarketDetails";
+MarketDetailsList.displayName = "MarketDetailsList";
 
 // src/events/list/index.tsx
 var import_react12 = require("react");
@@ -8054,11 +8200,11 @@ var estimateTabsWidth = (items) => {
 var EventList = ({
   title,
   maxItemsPerRow = 3,
-  limit = 3,
+  limit = 9,
   maxVisibleItems,
-  showVenueLogo = true,
   search,
-  categoryIds
+  categoryIds,
+  onClick
 }) => {
   var _a, _b;
   const labels = (0, import_hooks25.useLabels)();
@@ -8213,10 +8359,10 @@ var EventList = ({
         EventListItem,
         {
           event,
-          showVenueLogo,
           classNames: {
             root: "w-full min-w-0 max-w-none"
-          }
+          },
+          onClick
         },
         event.id
       )),
@@ -8261,51 +8407,6 @@ var import_hooks26 = require("@agg-market/hooks");
 var ALL_CATEGORIES_TAB_VALUE = "trending";
 var DEFAULT_CATEGORIES_LIMIT = 100;
 var DEFAULT_ALL_CATEGORY_TAB_LABEL = "Trending";
-var CATEGORY_TAB_NAME_ORDER = [
-  "crypto",
-  "economy",
-  "entertainment",
-  "finance",
-  "geopolitics",
-  "health",
-  "mentions",
-  "politics",
-  "science",
-  "sports",
-  "technology",
-  "weather",
-  "world"
-];
-var getDefaultHomePageTabs = (allCategoryTabLabel) => {
-  return [
-    {
-      value: ALL_CATEGORIES_TAB_VALUE,
-      label: allCategoryTabLabel,
-      iconName: "arrow-trend-up"
-    },
-    { value: "crypto", label: "crypto", categoryIds: ["crypto"] },
-    { value: "economy", label: "economy", categoryIds: ["economy"] },
-    {
-      value: "entertainment",
-      label: "entertainment",
-      categoryIds: ["entertainment"]
-    },
-    { value: "finance", label: "finance", categoryIds: ["finance"] },
-    {
-      value: "geopolitics",
-      label: "geopolitics",
-      categoryIds: ["geopolitics"]
-    },
-    { value: "health", label: "health", categoryIds: ["health"] },
-    { value: "mentions", label: "mentions", categoryIds: ["mentions"] },
-    { value: "politics", label: "politics", categoryIds: ["politics"] },
-    { value: "science", label: "science", categoryIds: ["science"] },
-    { value: "sports", label: "sports", categoryIds: ["sports"] },
-    { value: "technology", label: "technology", categoryIds: ["technology"] },
-    { value: "weather", label: "weather", categoryIds: ["weather"] },
-    { value: "world", label: "world", categoryIds: ["world"] }
-  ];
-};
 var getDefaultEventSectionItems = (labels) => {
   return [
     {
@@ -8326,31 +8427,7 @@ var getDefaultEventSectionItems = (labels) => {
 };
 
 // src/pages/home/home.utils.ts
-var categoryOrderMap = CATEGORY_TAB_NAME_ORDER.reduce(
-  (accumulator, name, index) => {
-    accumulator.set(name, index);
-    return accumulator;
-  },
-  /* @__PURE__ */ new Map()
-);
-var normalizeCategoryName = (name) => {
-  return name.trim().toLowerCase();
-};
 var resolveCategoryTabs = (categories, allCategoryTabLabel) => {
-  const sortedCategories = [...categories].sort((left, right) => {
-    const leftName = normalizeCategoryName(left.name);
-    const rightName = normalizeCategoryName(right.name);
-    const leftOrder = categoryOrderMap.get(leftName);
-    const rightOrder = categoryOrderMap.get(rightName);
-    if (leftOrder != null && rightOrder != null) {
-      return leftOrder - rightOrder;
-    }
-    if (leftOrder != null)
-      return -1;
-    if (rightOrder != null)
-      return 1;
-    return leftName.localeCompare(rightName);
-  });
   const seenCategoryIds = /* @__PURE__ */ new Set();
   const tabs = [
     {
@@ -8359,13 +8436,13 @@ var resolveCategoryTabs = (categories, allCategoryTabLabel) => {
       iconName: "arrow-trend-up"
     }
   ];
-  for (const category of sortedCategories) {
+  for (const category of categories) {
     if (seenCategoryIds.has(category.id))
       continue;
     seenCategoryIds.add(category.id);
     tabs.push({
       value: category.id,
-      label: normalizeCategoryName(category.name),
+      label: category.name.trim().toLowerCase(),
       categoryIds: [category.id]
     });
   }
@@ -8378,7 +8455,7 @@ var resolveInitialTabValue = (tabs, defaultActiveTab) => {
     if (hasDefaultTab)
       return defaultActiveTab;
   }
-  return (_b = (_a = tabs[0]) == null ? void 0 : _a.value) != null ? _b : "trending";
+  return (_b = (_a = tabs[0]) == null ? void 0 : _a.value) != null ? _b : ALL_CATEGORIES_TAB_VALUE;
 };
 
 // src/pages/home/index.tsx
@@ -8389,17 +8466,15 @@ var HomePage = ({
   onTabChange,
   eventSectionItems,
   classNames,
-  useCategoriesTabs = true,
   categoriesLimit = DEFAULT_CATEGORIES_LIMIT,
   allCategoryTabLabel = DEFAULT_ALL_CATEGORY_TAB_LABEL
 }) => {
   const labels = (0, import_hooks26.useLabels)();
   const hasCustomTabs = !!tabs && tabs.length > 0;
-  const shouldUseCategoriesTabs = !hasCustomTabs && useCategoriesTabs;
   const resolvedAllCategoryTabLabel = allCategoryTabLabel === DEFAULT_ALL_CATEGORY_TAB_LABEL ? labels.home.trending : allCategoryTabLabel;
-  const { categories } = (0, import_hooks26.useCategories)({
+  const { categories, isLoading: isCategoriesLoading } = (0, import_hooks26.useCategories)({
     limit: categoriesLimit,
-    enabled: shouldUseCategoriesTabs
+    enabled: !hasCustomTabs
   });
   const categoryTabs = (0, import_react13.useMemo)(() => {
     return resolveCategoryTabs(categories, resolvedAllCategoryTabLabel);
@@ -8407,10 +8482,8 @@ var HomePage = ({
   const resolvedTabs = (0, import_react13.useMemo)(() => {
     if (hasCustomTabs && tabs)
       return tabs;
-    if (shouldUseCategoriesTabs)
-      return categoryTabs;
-    return getDefaultHomePageTabs(resolvedAllCategoryTabLabel);
-  }, [categoryTabs, hasCustomTabs, resolvedAllCategoryTabLabel, shouldUseCategoriesTabs, tabs]);
+    return categoryTabs;
+  }, [categoryTabs, hasCustomTabs, tabs]);
   const resolvedEventSectionItems = eventSectionItems && eventSectionItems.length > 0 ? eventSectionItems : getDefaultEventSectionItems(labels);
   const [activeTabValue, setActiveTabValue] = (0, import_react13.useState)(() => {
     return resolveInitialTabValue(resolvedTabs, defaultActiveTab);
@@ -8445,22 +8518,20 @@ var HomePage = ({
     return resolvedTabs.find((tab) => tab.value === activeTabValue);
   }, [activeTabValue, resolvedTabs]);
   const resolvedSectionItems = (0, import_react13.useMemo)(() => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d;
     if (activeTabValue === ALL_CATEGORIES_TAB_VALUE) {
       return resolvedEventSectionItems;
     }
     const maxItemsPerRow = (_b = (_a = resolvedEventSectionItems[0]) == null ? void 0 : _a.maxItemsPerRow) != null ? _b : 3;
-    const showVenueLogo = (_c = resolvedEventSectionItems[0]) == null ? void 0 : _c.showVenueLogo;
-    const firstSectionLimit = (_d = resolvedEventSectionItems[0]) == null ? void 0 : _d.limit;
+    const firstSectionLimit = (_c = resolvedEventSectionItems[0]) == null ? void 0 : _c.limit;
     const limit = firstSectionLimit && Number.isFinite(firstSectionLimit) ? Math.max(9, Math.floor(firstSectionLimit)) : 9;
     return [
       {
         id: `${activeTabValue}-markets`,
-        title: (_e = activeTab == null ? void 0 : activeTab.label) != null ? _e : activeTabValue,
+        title: (_d = activeTab == null ? void 0 : activeTab.label) != null ? _d : activeTabValue,
         maxItemsPerRow,
         limit,
         maxVisibleItems: void 0,
-        showVenueLogo,
         search: activeTab == null ? void 0 : activeTab.search,
         categoryIds: activeTab == null ? void 0 : activeTab.categoryIds
       }
@@ -8470,6 +8541,18 @@ var HomePage = ({
     setActiveTabValue(value);
     onTabChange == null ? void 0 : onTabChange(value);
   };
+  if (!hasCustomTabs && isCategoriesLoading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("section", { className: cn("flex w-full flex-col", classNames == null ? void 0 : classNames.root), children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+      "header",
+      {
+        className: cn(
+          "w-full bg-agg-secondary border-b border-agg-separator",
+          classNames == null ? void 0 : classNames.header
+        ),
+        children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: cn("w-full px-4 md:px-10 h-10", classNames == null ? void 0 : classNames.tabs) })
+      }
+    ) });
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("section", { className: cn("flex w-full flex-col", classNames == null ? void 0 : classNames.root), children: [
     /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
       "header",
@@ -8504,7 +8587,6 @@ var HomePage = ({
               maxItemsPerRow: eventSectionItem.maxItemsPerRow,
               limit: eventSectionItem.limit,
               maxVisibleItems: eventSectionItem.maxVisibleItems,
-              showVenueLogo: eventSectionItem.showVenueLogo,
               search: (_b = eventSectionItem.search) != null ? _b : activeTab == null ? void 0 : activeTab.search,
               categoryIds: (_c = eventSectionItem.categoryIds) != null ? _c : activeTab == null ? void 0 : activeTab.categoryIds
             },
@@ -9120,7 +9202,11 @@ var Settlement = ({
                 ),
                 "aria-expanded": isExpanded,
                 "aria-label": labels.trading.settlementDetailsAria(venueLabel),
-                onClick: () => handleVenueClick(venue.venue),
+                onClick: (e) => {
+                  e.stopPropagation();
+                  e.preventDefault();
+                  handleVenueClick(venue.venue);
+                },
                 children: [
                   /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
                     VenueLogo,
@@ -9276,6 +9362,69 @@ var resolveInitialExpandedMarketId = (detailedMarkets, defaultExpandedMarketId)
   }
   return (_b = (_a = detailedMarkets[0]) == null ? void 0 : _a.id) != null ? _b : null;
 };
+var EventMarketPageMobileTrade = ({
+  placeOrder,
+  classNames
+}) => {
+  const [isOpen, setIsOpen] = (0, import_react16.useState)(false);
+  const handleOpen = () => {
+    setIsOpen(true);
+  };
+  const handleOpenChange = (nextOpen) => {
+    setIsOpen(nextOpen);
+  };
+  const handleClose = () => {
+    setIsOpen(false);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(import_jsx_runtime91.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+      "div",
+      {
+        className: cn(
+          "fixed inset-x-0 bottom-0 z-20 flex justify-end p-4 lg:hidden",
+          classNames == null ? void 0 : classNames.mobileTradeCta
+        ),
+        children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+          Button,
+          {
+            size: "large",
+            className: "min-w-[168px] shadow-agg-modal",
+            "aria-label": placeOrder.actionLabel,
+            "data-testid": "event-market-page-mobile-trade-cta",
+            onClick: (e) => {
+              e.stopPropagation();
+              e.preventDefault();
+              handleOpen();
+            },
+            children: placeOrder.actionLabel
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Modal, { open: isOpen, onOpenChange: handleOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+      Modal.Container,
+      {
+        "aria-label": placeOrder.title,
+        maxWidth: "420px",
+        classNames: {
+          content: "items-end p-0 sm:items-center sm:p-4",
+          container: cn(
+            "w-full max-w-[420px] border-0 bg-transparent shadow-none",
+            classNames == null ? void 0 : classNames.mobileTradeModal
+          )
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+          PlaceOrder,
+          __spreadProps(__spreadValues({}, placeOrder), {
+            isDismissible: true,
+            className: cn("w-full rounded-t-agg-2xl sm:rounded-agg-xl", classNames == null ? void 0 : classNames.mobileTrade),
+            onClose: handleClose
+          })
+        )
+      }
+    ) })
+  ] });
+};
 var EventMarketPageUnavailableState = ({
   ariaLabel
 }) => {
@@ -9325,46 +9474,66 @@ var EventMarketPageLoadingState = ({
       }
     ]
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("section", { className: cn("w-full", classNames == null ? void 0 : classNames.root), children: /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(
-    "div",
-    {
-      className: cn(
-        "mx-auto flex w-full max-w-[1200px] flex-col gap-6 px-3 py-3 md:px-6 md:py-6 lg:flex-row lg:items-start lg:gap-8",
-        classNames == null ? void 0 : classNames.content
-      ),
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { className: cn("flex min-w-0 flex-1 flex-col gap-6", classNames == null ? void 0 : classNames.main), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
-            EventListItemDetails,
-            {
-              isLoading: true,
-              classNames: {
-                root: classNames == null ? void 0 : classNames.hero
+  return /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("section", { className: cn("w-full pb-24 lg:pb-0", classNames == null ? void 0 : classNames.root), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(
+      "div",
+      {
+        className: cn(
+          "mx-auto flex w-full max-w-[1200px] flex-col gap-6 px-3 py-3 md:px-6 md:py-6 lg:flex-row lg:items-start lg:gap-8",
+          classNames == null ? void 0 : classNames.content
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { className: cn("flex min-w-0 flex-1 flex-col gap-6", classNames == null ? void 0 : classNames.main), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+              EventListItemDetails,
+              {
+                isLoading: true,
+                classNames: {
+                  root: classNames == null ? void 0 : classNames.hero
+                }
               }
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { className: cn("flex flex-col gap-3", classNames == null ? void 0 : classNames.markets), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(MarketDetails, { isLoading: true, isOpened: true, classNames: { root: "w-full" } }),
-            /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(MarketDetails, { isLoading: true, isOpened: false, classNames: { root: "w-full" } }),
-            /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(MarketDetails, { isLoading: true, isOpened: false, classNames: { root: "w-full" } })
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { className: cn("flex flex-col gap-3", classNames == null ? void 0 : classNames.markets), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(MarketDetails, { isLoading: true, isOpened: true, classNames: { root: "w-full" } }),
+              /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(MarketDetails, { isLoading: true, isOpened: false, classNames: { root: "w-full" } }),
+              /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(MarketDetails, { isLoading: true, isOpened: false, classNames: { root: "w-full" } })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: "md:hidden", children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Settlement, __spreadProps(__spreadValues({}, fallbackSettlement), { isLoading: true, className: classNames == null ? void 0 : classNames.settlement })) }),
+            /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: "hidden md:block", children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Settlement, __spreadProps(__spreadValues({}, fallbackSettlement), { isLoading: true, className: classNames == null ? void 0 : classNames.settlement })) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: "md:hidden", children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Settlement, __spreadProps(__spreadValues({}, fallbackSettlement), { isLoading: true, className: classNames == null ? void 0 : classNames.settlement })) }),
-          /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: "hidden md:block", children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Settlement, __spreadProps(__spreadValues({}, fallbackSettlement), { isLoading: true, className: classNames == null ? void 0 : classNames.settlement })) }),
-          placeOrder ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: "md:hidden", children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(PlaceOrder, __spreadProps(__spreadValues({}, placeOrder), { isLoading: true, className: classNames == null ? void 0 : classNames.mobileTrade })) }) : null
-        ] }),
-        placeOrder ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
-          "aside",
+          placeOrder ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+            "aside",
+            {
+              className: cn(
+                "hidden w-full shrink-0 lg:sticky lg:top-6 lg:block lg:w-[343px]",
+                classNames == null ? void 0 : classNames.sidebar
+              ),
+              children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(PlaceOrder, __spreadProps(__spreadValues({}, placeOrder), { isLoading: true, className: classNames == null ? void 0 : classNames.trade }))
+            }
+          ) : null
+        ]
+      }
+    ),
+    placeOrder ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+      "div",
+      {
+        className: cn(
+          "fixed inset-x-0 bottom-0 z-20 flex justify-end p-4 lg:hidden",
+          classNames == null ? void 0 : classNames.mobileTradeCta
+        ),
+        children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+          Button,
           {
-            className: cn(
-              "hidden w-full shrink-0 lg:sticky lg:top-6 lg:block lg:w-[343px]",
-              classNames == null ? void 0 : classNames.sidebar
-            ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(PlaceOrder, __spreadProps(__spreadValues({}, placeOrder), { isLoading: true, className: classNames == null ? void 0 : classNames.trade }))
+            size: "large",
+            className: "min-w-[168px] shadow-agg-modal",
+            "aria-label": placeOrder.actionLabel,
+            disabled: true,
+            children: placeOrder.actionLabel
           }
-        ) : null
-      ]
-    }
-  ) });
+        )
+      }
+    ) : null
+  ] });
 };
 var EventMarketPageContent = ({
   event,
@@ -9417,49 +9586,65 @@ var EventMarketPageContent = ({
   if (!heroEvent || !event.venueMarkets.length) {
     return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(EventMarketPageUnavailableState, { ariaLabel });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("section", { className: cn("w-full", classNames == null ? void 0 : classNames.root), "aria-label": ariaLabel != null ? ariaLabel : event.title, children: /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(
-    "div",
+  return /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(
+    "section",
     {
-      className: cn(
-        "mx-auto flex w-full max-w-[1200px] flex-row gap-6 px-3 py-3 md:px-6 md:py-6 lg:flex-row lg:items-start lg:gap-8",
-        classNames == null ? void 0 : classNames.content
-      ),
+      className: cn("w-full pb-24 lg:pb-0", classNames == null ? void 0 : classNames.root),
+      "aria-label": ariaLabel != null ? ariaLabel : event.title,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { className: cn("flex min-w-0 flex-1 flex-col gap-6", classNames == null ? void 0 : classNames.main), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
-            EventListItemDetails,
-            {
-              event: heroEvent,
-              defaultTimeRange: heroDefaultTimeRange,
-              classNames: {
-                root: classNames == null ? void 0 : classNames.hero
-              }
-            }
-          ),
-          detailedMarkets.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: cn("flex flex-col gap-3", classNames == null ? void 0 : classNames.markets), children: detailedMarkets.map((market) => {
-            const isOpened = resolvedExpandedMarketId === market.id;
-            return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
-              MarketDetails,
-              {
-                event,
-                marketId: market.id,
-                isOpened,
-                defaultTab: "order-book",
-                ariaLabel: market.endDate && (0, import_dayjs6.default)(market.endDate).isValid() ? labels.eventMarketPage.marketDetailsAriaByDate(
-                  (0, import_dayjs6.default)(market.endDate).format("MMM D, YYYY")
-                ) : labels.eventMarketPage.marketDetailsAriaByQuestion(market.question),
-                onOpenChange: (nextIsOpened) => handleExpandedMarketChange(market.id, nextIsOpened)
-              },
-              market.id
-            );
-          }) }) : null,
-          settlement ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: "md:hidden", children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Settlement, __spreadProps(__spreadValues({}, settlement), { className: classNames == null ? void 0 : classNames.settlement })) }) : null,
-          settlement ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: "hidden md:block", children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Settlement, __spreadProps(__spreadValues({}, settlement), { className: classNames == null ? void 0 : classNames.settlement })) }) : null
-        ] }),
-        placeOrder ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("aside", { className: cn("w-full lg:block lg:max-w-[360px]", classNames == null ? void 0 : classNames.sidebar), children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(PlaceOrder, __spreadProps(__spreadValues({}, placeOrder), { className: classNames == null ? void 0 : classNames.trade })) }) : null
+        /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(
+          "div",
+          {
+            className: cn(
+              "mx-auto flex w-full max-w-[1200px] flex-row gap-6 px-3 py-3 md:px-6 md:py-6 lg:flex-row lg:items-start lg:gap-8",
+              classNames == null ? void 0 : classNames.content
+            ),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { className: cn("flex min-w-0 flex-1 flex-col gap-6", classNames == null ? void 0 : classNames.main), children: [
+                /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+                  EventListItemDetails,
+                  {
+                    event: heroEvent,
+                    defaultTimeRange: heroDefaultTimeRange,
+                    classNames: {
+                      root: classNames == null ? void 0 : classNames.hero
+                    }
+                  }
+                ),
+                detailedMarkets.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: cn("flex flex-col gap-3", classNames == null ? void 0 : classNames.markets), children: detailedMarkets.map((market) => {
+                  const isOpened = resolvedExpandedMarketId === market.id;
+                  return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+                    MarketDetails,
+                    {
+                      venueMarkets: [market],
+                      isOpened,
+                      defaultTab: "order-book",
+                      ariaLabel: market.endDate && (0, import_dayjs6.default)(market.endDate).isValid() ? labels.eventMarketPage.marketDetailsAriaByDate(
+                        (0, import_dayjs6.default)(market.endDate).format("MMM D, YYYY")
+                      ) : labels.eventMarketPage.marketDetailsAriaByQuestion(market.question),
+                      onOpenChange: (nextIsOpened) => handleExpandedMarketChange(market.id, nextIsOpened)
+                    },
+                    market.id
+                  );
+                }) }) : null,
+                settlement ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: "md:hidden", children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Settlement, __spreadProps(__spreadValues({}, settlement), { className: classNames == null ? void 0 : classNames.settlement })) }) : null,
+                settlement ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: "hidden md:block", children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Settlement, __spreadProps(__spreadValues({}, settlement), { className: classNames == null ? void 0 : classNames.settlement })) }) : null
+              ] }),
+              placeOrder ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+                "aside",
+                {
+                  className: cn("hidden w-full lg:block lg:max-w-[360px]", classNames == null ? void 0 : classNames.sidebar),
+                  "data-testid": "event-market-page-desktop-trade",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(PlaceOrder, __spreadProps(__spreadValues({}, placeOrder), { className: classNames == null ? void 0 : classNames.trade }))
+                }
+              ) : null
+            ]
+          }
+        ),
+        placeOrder ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(EventMarketPageMobileTrade, { placeOrder, classNames }) : null
       ]
     }
-  ) });
+  );
 };
 var EventMarketPage = (props) => {
   var _a;
@@ -10771,20 +10956,460 @@ var DepositModal = ({
 };
 DepositModal.displayName = "DepositModal";
 
-// src/withdraw/index.tsx
+// src/onramp/index.tsx
+var import_react24 = require("react");
+
+// src/onramp/steps/quote-form.tsx
+var import_react22 = require("react");
+
+// src/onramp/onramp-modal.constants.ts
+var FIAT_OPTIONS = [
+  { value: "USD", label: "USD" },
+  { value: "EUR", label: "EUR" },
+  { value: "GBP", label: "GBP" }
+];
+var FIAT_SYMBOLS = {
+  USD: "$",
+  EUR: "\u20AC",
+  GBP: "\xA3"
+};
+var CRYPTO_OPTIONS = [
+  { value: "USDC", label: "USDC (Ethereum)" },
+  { value: "USDC_BASE", label: "USDC (Base)" },
+  { value: "USDC_SOLANA", label: "USDC (Solana)" },
+  { value: "USDC_POLYGON", label: "USDC (Polygon)" },
+  { value: "USDC_ARBITRUM", label: "USDC (Arbitrum)" }
+];
+
+// src/onramp/steps/quote-form.tsx
+var import_jsx_runtime107 = require("react/jsx-runtime");
+var QuoteFormStep = ({
+  title,
+  values,
+  onAmountChange,
+  onFiatChange,
+  onCryptoChange,
+  onWalletAddressChange,
+  onSubmit
+}) => {
+  var _a;
+  const numericAmount = Number(values.amount) || 0;
+  const isFormValid = numericAmount > 0 && values.walletAddress.length > 0;
+  const handleAmountChange = (0, import_react22.useCallback)(
+    (e) => {
+      const v = e.target.value.replace(/[^0-9.]/g, "");
+      const parts = v.split(".");
+      onAmountChange(parts.length > 2 ? `${parts[0]}.${parts.slice(1).join("")}` : v);
+    },
+    [onAmountChange]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)(import_jsx_runtime107.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(Modal.Header, { title, hideBorder: true }),
+    /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(Modal.Body, { classNames: { root: "px-5 pt-0 pb-6 sm:px-8 sm:pt-0 sm:pb-8" }, children: /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)("div", { className: "flex flex-col gap-6", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("p", { className: "agg-type-label text-agg-muted-foreground", children: "You pay" }),
+        /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("div", { className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
+            Select,
+            {
+              items: FIAT_OPTIONS,
+              value: values.fiatCurrency,
+              onChange: onFiatChange,
+              ariaLabel: "Fiat currency",
+              className: "w-auto"
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)("div", { className: "flex items-baseline", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("span", { className: "agg-type-display text-agg-foreground", children: (_a = FIAT_SYMBOLS[values.fiatCurrency]) != null ? _a : "$" }),
+            /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
+              "input",
+              {
+                type: "text",
+                inputMode: "decimal",
+                "aria-label": "Amount",
+                className: cn(
+                  "agg-type-display w-full bg-transparent outline-none",
+                  numericAmount > 0 ? "text-agg-foreground" : "text-agg-muted-foreground"
+                ),
+                placeholder: "0",
+                value: values.amount ? formatAmountDisplay(values.amount) : "",
+                onChange: handleAmountChange
+              }
+            )
+          ] }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("div", { className: "border-t border-agg-separator" }),
+      /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("p", { className: "agg-type-label text-agg-muted-foreground", children: "You receive" }),
+        /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
+          Select,
+          {
+            items: CRYPTO_OPTIONS,
+            value: values.cryptoCurrency,
+            onChange: onCryptoChange,
+            ariaLabel: "Cryptocurrency"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("div", { className: "border-t border-agg-separator" }),
+      /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("p", { className: "agg-type-label text-agg-muted-foreground", children: "Destination wallet" }),
+        /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
+          "input",
+          {
+            type: "text",
+            "aria-label": "Wallet address",
+            className: cn(
+              "w-full rounded-agg-md border border-agg-separator bg-agg-secondary",
+              "px-4 py-2 font-agg-sans text-agg-sm leading-agg-5 text-agg-foreground outline-none",
+              "placeholder:text-agg-muted-foreground",
+              "transition-[border-color,box-shadow] duration-200 ease-in-out",
+              "focus:border-agg-primary focus:ring-2 focus:ring-agg-primary/15"
+            ),
+            placeholder: "0x...",
+            value: values.walletAddress,
+            onChange: (e) => onWalletAddressChange(e.target.value)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
+        Button,
+        {
+          variant: "primary",
+          size: "large",
+          className: "w-full",
+          disabled: !isFormValid,
+          onClick: onSubmit,
+          children: "Get Quotes"
+        }
+      )
+    ] }) })
+  ] });
+};
+
+// src/onramp/steps/quote-card.tsx
+var import_jsx_runtime108 = require("react/jsx-runtime");
+var QuoteCard = ({ quote, rank, onSelect }) => {
+  var _a;
+  const isBest = rank === 1;
+  return /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-3 sm:gap-4",
+        "rounded-xl border",
+        "p-3 sm:p-4",
+        "transition-colors cursor-pointer",
+        isBest ? "border-agg-primary bg-agg-primary/5 hover:bg-agg-primary/10" : "border-agg-separator hover:bg-agg-secondary-hover"
+      ),
+      role: "button",
+      tabIndex: 0,
+      onClick: onSelect,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onSelect();
+        }
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+          "div",
+          {
+            className: cn(
+              "shrink-0 flex items-center justify-center h-10 w-10 rounded-lg",
+              isBest ? "bg-agg-primary/10" : "bg-agg-secondary-hover"
+            ),
+            children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+              "span",
+              {
+                className: cn(
+                  "text-agg-lg font-agg-bold",
+                  isBest ? "text-agg-primary" : "text-agg-muted-foreground"
+                ),
+                children: rank
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("p", { className: "agg-type-body-strong text-agg-foreground", children: quote.serviceProvider }),
+            isBest ? /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+              Badge,
+              {
+                text: "Best",
+                size: "small",
+                classNames: { root: "bg-agg-primary! text-white! border-agg-primary!" }
+              }
+            ) : null,
+            quote.lowKyc ? /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(Badge, { text: "Low KYC", size: "small" }) : null
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)("div", { className: "flex items-center gap-2 mt-0.5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)("p", { className: "agg-type-label text-agg-muted-foreground", children: [
+              quote.destinationAmount.toFixed(6),
+              " ",
+              quote.destinationCurrencyCode.split("_")[0]
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("span", { className: "text-agg-muted-foreground", children: "\xB7" }),
+            /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)("p", { className: "agg-type-label text-agg-muted-foreground", children: [
+              "Fee ",
+              (_a = FIAT_SYMBOLS[quote.sourceCurrencyCode]) != null ? _a : "",
+              quote.totalFee.toFixed(2)
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("div", { className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+          Button,
+          {
+            variant: "secondary",
+            size: "small",
+            suffix: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(ChevronRightIcon, {}),
+            onClick: (e) => {
+              e.stopPropagation();
+              onSelect();
+            },
+            children: "Select"
+          }
+        ) })
+      ]
+    }
+  );
+};
+
+// src/onramp/steps/quote-selection.tsx
+var import_jsx_runtime109 = require("react/jsx-runtime");
+var BACK_BUTTON_CLASS = "mr-2 flex items-center justify-center text-agg-foreground transition-colors hover:cursor-pointer hover:text-agg-foreground/80";
+var BackButton = ({ onClick }) => /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("button", { type: "button", className: BACK_BUTTON_CLASS, onClick, "aria-label": "Go back", children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(ChevronLeftIcon, { className: "h-6 w-6" }) });
+var QuoteSelectionStep = ({
+  quotes,
+  isLoading,
+  error,
+  fiatCurrency,
+  cryptoCurrency,
+  amount,
+  onBack,
+  onSelectQuote,
+  onRetry
+}) => {
+  var _a;
+  const subtitle = `${cryptoCurrency.split("_")[0]} \xB7 ${(_a = FIAT_SYMBOLS[fiatCurrency]) != null ? _a : ""}${amount.toLocaleString()} ${fiatCurrency}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(import_jsx_runtime109.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+      Modal.Header,
+      {
+        title: "Select Provider",
+        subtitle,
+        hideBorder: true,
+        leftElement: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(BackButton, { onClick: onBack })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(Modal.Body, { classNames: { root: "px-5 pt-0 pb-6 sm:px-8 sm:pt-0 sm:pb-8" }, children: [
+      isLoading ? /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("div", { className: "flex min-h-[240px] items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(LoadingIcon, { size: "large" }) }) : null,
+      !isLoading && error ? /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)("div", { className: "flex flex-col gap-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(InlineAlert, { tone: "error", message: error }),
+        /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(Button, { variant: "secondary", size: "medium", className: "w-full", onClick: onRetry, children: "Retry" })
+      ] }) : null,
+      !isLoading && !error && quotes.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+        StateMessage,
+        {
+          tone: "empty",
+          title: "No quotes available",
+          description: "No providers returned quotes for this pair. Try a different amount or cryptocurrency.",
+          actionLabel: "Go back",
+          onAction: onBack
+        }
+      ) : null,
+      !isLoading && quotes.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("div", { className: "flex flex-col gap-3", children: quotes.map((quote, i) => /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+        QuoteCard,
+        {
+          quote,
+          rank: i + 1,
+          onSelect: () => onSelectQuote(quote)
+        },
+        `${quote.serviceProvider}-${quote.paymentMethodType}`
+      )) }) : null
+    ] })
+  ] });
+};
+
+// src/onramp/steps/widget.tsx
 var import_react23 = require("react");
+var import_jsx_runtime110 = require("react/jsx-runtime");
+var BACK_BUTTON_CLASS2 = "mr-2 flex items-center justify-center text-agg-foreground transition-colors hover:cursor-pointer hover:text-agg-foreground/80";
+var BackButton2 = ({ onClick }) => /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("button", { type: "button", className: BACK_BUTTON_CLASS2, onClick, "aria-label": "Go back", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(ChevronLeftIcon, { className: "h-6 w-6" }) });
+var WidgetStep = ({ widgetUrl, isLoading, onBack }) => {
+  const iframeRef = (0, import_react23.useRef)(null);
+  return /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(import_jsx_runtime110.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
+      Modal.Header,
+      {
+        title: "Complete Purchase",
+        hideBorder: true,
+        leftElement: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(BackButton2, { onClick: onBack })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(Modal.Body, { classNames: { root: "p-0! sm:p-0! overflow-hidden" }, children: [
+      isLoading ? /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("div", { className: "flex min-h-[400px] items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(LoadingIcon, { size: "large" }) }) : null,
+      widgetUrl ? /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
+        "iframe",
+        {
+          ref: iframeRef,
+          src: widgetUrl,
+          title: "Meld payment widget",
+          className: "h-[700px] w-full border-0 block",
+          allow: "camera; microphone; payment; encrypted-media"
+        }
+      ) : null
+    ] })
+  ] });
+};
+
+// src/onramp/index.tsx
+var import_jsx_runtime111 = require("react/jsx-runtime");
+var OnrampModal = ({
+  open,
+  onOpenChange,
+  transactionType,
+  walletAddress: initialWalletAddress = "",
+  defaultFiatCurrency = "USD",
+  defaultCryptoCurrency = "USDC",
+  onGetQuotes,
+  onSelectQuote
+}) => {
+  const [step, setStep] = (0, import_react24.useState)("form");
+  const [formValues, setFormValues] = (0, import_react24.useState)({
+    amount: "",
+    fiatCurrency: defaultFiatCurrency,
+    cryptoCurrency: defaultCryptoCurrency,
+    walletAddress: initialWalletAddress
+  });
+  const [quotes, setQuotes] = (0, import_react24.useState)([]);
+  const [isLoadingQuotes, setIsLoadingQuotes] = (0, import_react24.useState)(false);
+  const [quoteError, setQuoteError] = (0, import_react24.useState)(null);
+  const [widgetUrl, setWidgetUrl] = (0, import_react24.useState)(null);
+  const [isCreatingSession, setIsCreatingSession] = (0, import_react24.useState)(false);
+  const handleOpenChange = (0, import_react24.useCallback)(
+    (isOpen) => {
+      if (!isOpen) {
+        setStep("form");
+        setQuotes([]);
+        setQuoteError(null);
+        setWidgetUrl(null);
+      }
+      onOpenChange(isOpen);
+    },
+    [onOpenChange]
+  );
+  const handleGetQuotes = (0, import_react24.useCallback)(() => __async(void 0, null, function* () {
+    const numericAmount2 = Number(formValues.amount);
+    if (!numericAmount2 || numericAmount2 <= 0)
+      return;
+    setStep("quotes");
+    setIsLoadingQuotes(true);
+    setQuoteError(null);
+    try {
+      const result = yield onGetQuotes({
+        transactionType,
+        sourceAmount: numericAmount2,
+        sourceCurrencyCode: formValues.fiatCurrency,
+        destinationCurrencyCode: formValues.cryptoCurrency,
+        countryCode: "US"
+      });
+      setQuotes(result);
+    } catch (err) {
+      setQuoteError(err instanceof Error ? err.message : "Failed to fetch quotes");
+    } finally {
+      setIsLoadingQuotes(false);
+    }
+  }), [formValues, transactionType, onGetQuotes]);
+  const handleSelectQuote = (0, import_react24.useCallback)(
+    (quote) => __async(void 0, null, function* () {
+      setStep("widget");
+      setIsCreatingSession(true);
+      try {
+        const session = yield onSelectQuote({
+          transactionType,
+          serviceProvider: quote.serviceProvider,
+          sourceAmount: quote.sourceAmount,
+          sourceCurrencyCode: quote.sourceCurrencyCode,
+          destinationCurrencyCode: quote.destinationCurrencyCode,
+          countryCode: quote.countryCode,
+          walletAddress: formValues.walletAddress
+        });
+        setWidgetUrl(session.serviceProviderWidgetUrl);
+      } catch (e) {
+        setStep("quotes");
+      } finally {
+        setIsCreatingSession(false);
+      }
+    }),
+    [transactionType, formValues.walletAddress, onSelectQuote]
+  );
+  const numericAmount = Number(formValues.amount) || 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(Modal, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)(
+    Modal.Container,
+    {
+      maxWidth: "520px",
+      "aria-label": transactionType === "BUY" ? "Buy Crypto" : "Sell Crypto",
+      children: [
+        step === "form" ? /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
+          QuoteFormStep,
+          {
+            title: transactionType === "BUY" ? "Buy Crypto" : "Sell Crypto",
+            values: formValues,
+            onAmountChange: (amount) => setFormValues((prev) => __spreadProps(__spreadValues({}, prev), { amount })),
+            onFiatChange: (fiatCurrency) => setFormValues((prev) => __spreadProps(__spreadValues({}, prev), { fiatCurrency })),
+            onCryptoChange: (cryptoCurrency) => setFormValues((prev) => __spreadProps(__spreadValues({}, prev), { cryptoCurrency })),
+            onWalletAddressChange: (walletAddress) => setFormValues((prev) => __spreadProps(__spreadValues({}, prev), { walletAddress })),
+            onSubmit: handleGetQuotes
+          }
+        ) : null,
+        step === "quotes" ? /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
+          QuoteSelectionStep,
+          {
+            quotes,
+            isLoading: isLoadingQuotes,
+            error: quoteError,
+            fiatCurrency: formValues.fiatCurrency,
+            cryptoCurrency: formValues.cryptoCurrency,
+            amount: numericAmount,
+            onBack: () => setStep("form"),
+            onSelectQuote: handleSelectQuote,
+            onRetry: handleGetQuotes
+          }
+        ) : null,
+        step === "widget" ? /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
+          WidgetStep,
+          {
+            widgetUrl,
+            isLoading: isCreatingSession,
+            onBack: () => {
+              setWidgetUrl(null);
+              setStep("quotes");
+            }
+          }
+        ) : null
+      ]
+    }
+  ) });
+};
+OnrampModal.displayName = "OnrampModal";
+
+// src/withdraw/index.tsx
+var import_react26 = require("react");
 
 // src/withdraw/withdraw-modal.constants.ts
 var KALSHI_VENUE3 = "kalshi";
 var KALSHI_WITHDRAW_URL_DEFAULT = "https://kalshi.com/account/withdraw";
 
 // src/withdraw/steps/venue-selection.tsx
-var import_jsx_runtime107 = require("react/jsx-runtime");
+var import_jsx_runtime112 = require("react/jsx-runtime");
 var VenueRow2 = ({ venue, onSelect }) => {
   var _a, _b;
   const displayName = (_a = venueLogoLabels[venue.venue]) != null ? _a : venue.venue;
   const isDisabled = venue.disabled === true;
-  return /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)(
     "div",
     {
       className: cn(
@@ -10797,7 +11422,9 @@ var VenueRow2 = ({ venue, onSelect }) => {
       role: "button",
       tabIndex: isDisabled ? -1 : 0,
       "aria-disabled": isDisabled,
-      onClick: () => {
+      onClick: (e) => {
+        e.stopPropagation();
+        e.preventDefault();
         if (!isDisabled)
           onSelect(venue.venue);
       },
@@ -10808,20 +11435,20 @@ var VenueRow2 = ({ venue, onSelect }) => {
         }
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("div", { className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(VenueLogo, { venue: venue.venue, size: "large", className: "rounded-lg" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)("div", { className: "flex-1 min-w-0", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("p", { className: "agg-type-body-strong text-agg-foreground", children: displayName }),
-          /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)("p", { className: "agg-type-label text-agg-muted-foreground", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime112.jsx)("div", { className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(VenueLogo, { venue: venue.venue, size: "large", className: "rounded-lg" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime112.jsx)("p", { className: "agg-type-body-strong text-agg-foreground", children: displayName }),
+          /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)("p", { className: "agg-type-label text-agg-muted-foreground", children: [
             "Balance ",
             formatCompactUsd(venue.balance)
           ] })
         ] }),
-        isDisabled ? /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("div", { className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("span", { className: "agg-type-label text-agg-muted-foreground", children: (_b = venue.disabledReason) != null ? _b : "Unavailable" }) }) : /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("div", { className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
+        isDisabled ? /* @__PURE__ */ (0, import_jsx_runtime112.jsx)("div", { className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)("span", { className: "agg-type-label text-agg-muted-foreground", children: (_b = venue.disabledReason) != null ? _b : "Unavailable" }) }) : /* @__PURE__ */ (0, import_jsx_runtime112.jsx)("div", { className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
           Button,
           {
             variant: "secondary",
             size: "small",
-            suffix: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(ChevronRightIcon, {}),
+            suffix: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(ChevronRightIcon, {}),
             onClick: (e) => {
               e.stopPropagation();
               onSelect(venue.venue);
@@ -10836,22 +11463,22 @@ var VenueRow2 = ({ venue, onSelect }) => {
 var VenueSelectionStep2 = ({
   venues,
   onSelectVenue
-}) => /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)(import_jsx_runtime107.Fragment, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(Modal.Header, { title: "Withdraw", hideBorder: true }),
-  /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(Modal.Body, { classNames: { root: "px-5 pt-0 pb-6 sm:px-8 sm:pt-0 sm:pb-8" }, children: /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)("div", { className: "flex flex-col gap-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("p", { className: "agg-type-body text-agg-foreground", children: "Choose where to withdraw funds from:" }),
-    /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("div", { className: "flex flex-col gap-3", children: venues.map((venue) => /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(VenueRow2, { venue, onSelect: onSelectVenue }, venue.venue)) })
+}) => /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)(import_jsx_runtime112.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(Modal.Header, { title: "Withdraw", hideBorder: true }),
+  /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(Modal.Body, { classNames: { root: "px-5 pt-0 pb-6 sm:px-8 sm:pt-0 sm:pb-8" }, children: /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)("div", { className: "flex flex-col gap-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime112.jsx)("p", { className: "agg-type-body text-agg-foreground", children: "Choose where to withdraw funds from:" }),
+    /* @__PURE__ */ (0, import_jsx_runtime112.jsx)("div", { className: "flex flex-col gap-3", children: venues.map((venue) => /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(VenueRow2, { venue, onSelect: onSelectVenue }, venue.venue)) })
   ] }) })
 ] });
 
 // src/withdraw/steps/withdraw-method.tsx
-var import_jsx_runtime108 = require("react/jsx-runtime");
+var import_jsx_runtime113 = require("react/jsx-runtime");
 var WithdrawMethodCard = ({
   icon,
   title,
   description,
   onContinue
-}) => /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)(
   "div",
   {
     className: cn(
@@ -10870,17 +11497,17 @@ var WithdrawMethodCard = ({
       }
     },
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("div", { className: "shrink-0 flex items-center justify-center h-10 w-10 rounded-lg bg-agg-secondary-hover", children: icon }),
-      /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)("div", { className: "flex-1 min-w-0", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("p", { className: "agg-type-body-strong text-agg-foreground", children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("p", { className: "agg-type-label text-agg-muted-foreground", children: description })
+      /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("div", { className: "shrink-0 flex items-center justify-center h-10 w-10 rounded-lg bg-agg-secondary-hover", children: icon }),
+      /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)("div", { className: "flex-1 min-w-0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("p", { className: "agg-type-body-strong text-agg-foreground", children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("p", { className: "agg-type-label text-agg-muted-foreground", children: description })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("div", { className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("div", { className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
         Button,
         {
           variant: "secondary",
           size: "small",
-          suffix: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(ChevronRightIcon, {}),
+          suffix: /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(ChevronRightIcon, {}),
           onClick: (e) => {
             e.stopPropagation();
             onContinue();
@@ -10898,47 +11525,47 @@ var WithdrawMethodStep = ({
 }) => {
   var _a;
   const displayName = (_a = venueLogoLabels[venue.venue]) != null ? _a : venue.venue;
-  return /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)(import_jsx_runtime108.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)(import_jsx_runtime113.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
       Modal.Header,
       {
         title: `Withdraw from ${displayName}`,
         hideBorder: true,
-        leftElement: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+        leftElement: /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
           "button",
           {
             type: "button",
             className: "mr-2 flex items-center justify-center text-agg-foreground transition-colors hover:cursor-pointer hover:text-agg-foreground/80",
             onClick: onBack,
             "aria-label": "Go back",
-            children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(ChevronLeftIcon, { className: "h-6 w-6" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(ChevronLeftIcon, { className: "h-6 w-6" })
           }
         )
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(Modal.Body, { classNames: { root: "px-5 pt-0 pb-6 sm:px-8 sm:pt-0 sm:pb-8" }, children: /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)("div", { className: "flex flex-col gap-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(VenueLogo, { venue: venue.venue, size: "small", className: "rounded-sm" }),
-        /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)("p", { className: "agg-type-label text-agg-muted-foreground", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(Modal.Body, { classNames: { root: "px-5 pt-0 pb-6 sm:px-8 sm:pt-0 sm:pb-8" }, children: /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)("div", { className: "flex flex-col gap-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(VenueLogo, { venue: venue.venue, size: "small", className: "rounded-sm" }),
+        /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)("p", { className: "agg-type-label text-agg-muted-foreground", children: [
           displayName,
           " balance: ",
           formatCompactUsd(venue.balance)
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)("div", { className: "flex flex-col gap-3", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)("div", { className: "flex flex-col gap-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
           WithdrawMethodCard,
           {
-            icon: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(WalletIcon, { className: "h-6 w-6 text-agg-foreground" }),
+            icon: /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(WalletIcon, { className: "h-6 w-6 text-agg-foreground" }),
             title: "Withdraw to Wallet",
             description: "Send funds to your crypto wallet as USDC.",
             onContinue: () => onSelectMethod("wallet")
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
           WithdrawMethodCard,
           {
-            icon: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(BankIcon, { className: "h-6 w-6 text-agg-foreground" }),
+            icon: /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(BankIcon, { className: "h-6 w-6 text-agg-foreground" }),
             title: "Withdraw to Bank",
             description: "Transfer funds to your linked bank account.",
             onContinue: () => onSelectMethod("bank")
@@ -10950,8 +11577,8 @@ var WithdrawMethodStep = ({
 };
 
 // src/withdraw/steps/withdraw-amount.tsx
-var import_react22 = require("react");
-var import_jsx_runtime109 = require("react/jsx-runtime");
+var import_react25 = require("react");
+var import_jsx_runtime114 = require("react/jsx-runtime");
 var WithdrawAmountStep = ({
   venue,
   method,
@@ -10959,50 +11586,50 @@ var WithdrawAmountStep = ({
   onContinue
 }) => {
   var _a;
-  const [rawAmount, setRawAmount] = (0, import_react22.useState)("");
+  const [rawAmount, setRawAmount] = (0, import_react25.useState)("");
   const displayName = (_a = venueLogoLabels[venue.venue]) != null ? _a : venue.venue;
   const numericAmount = Number(rawAmount) || 0;
   const isValid = numericAmount > 0 && numericAmount <= venue.balance;
   const exceedsBalance = numericAmount > venue.balance;
   const methodLabel = method === "wallet" ? "Wallet" : "Bank";
-  const handleAmountChange = (0, import_react22.useCallback)((e) => {
+  const handleAmountChange = (0, import_react25.useCallback)((e) => {
     const v = e.target.value.replace(/[^0-9.]/g, "");
     const parts = v.split(".");
     const sanitized = parts.length > 2 ? `${parts[0]}.${parts.slice(1).join("")}` : v;
     setRawAmount(sanitized);
   }, []);
-  const handleMax = (0, import_react22.useCallback)(() => {
+  const handleMax = (0, import_react25.useCallback)(() => {
     setRawAmount(venue.balance.toString());
   }, [venue.balance]);
-  return /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(import_jsx_runtime109.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)(import_jsx_runtime114.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
       Modal.Header,
       {
         title: `Withdraw to ${methodLabel}`,
         hideBorder: true,
-        leftElement: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+        leftElement: /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
           "button",
           {
             type: "button",
             className: "mr-2 flex items-center justify-center text-agg-foreground transition-colors hover:cursor-pointer hover:text-agg-foreground/80",
             onClick: onBack,
             "aria-label": "Go back",
-            children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(ChevronLeftIcon, { className: "h-6 w-6" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(ChevronLeftIcon, { className: "h-6 w-6" })
           }
         )
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(Modal.Body, { classNames: { root: "px-5 pt-0 pb-6 sm:px-8 sm:pt-0 sm:pb-8" }, children: /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)("div", { className: "flex flex-col gap-6", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(VenueLogo, { venue: venue.venue, size: "small", className: "rounded-sm" }),
-          /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)("p", { className: "agg-type-label text-agg-muted-foreground", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(Modal.Body, { classNames: { root: "px-5 pt-0 pb-6 sm:px-8 sm:pt-0 sm:pb-8" }, children: /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)("div", { className: "flex flex-col gap-6", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(VenueLogo, { venue: venue.venue, size: "small", className: "rounded-sm" }),
+          /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)("p", { className: "agg-type-label text-agg-muted-foreground", children: [
             displayName,
             " balance: ",
             formatCompactUsd(venue.balance)
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
           "button",
           {
             type: "button",
@@ -11012,10 +11639,10 @@ var WithdrawAmountStep = ({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)("div", { className: "flex-1 min-w-0", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)("div", { className: "flex items-baseline", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("span", { className: "agg-type-display text-agg-foreground", children: "$" }),
-          /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)("div", { className: "flex-1 min-w-0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)("div", { className: "flex items-baseline", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("span", { className: "agg-type-display text-agg-foreground", children: "$" }),
+          /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
             "input",
             {
               type: "text",
@@ -11031,9 +11658,9 @@ var WithdrawAmountStep = ({
             }
           )
         ] }),
-        exceedsBalance ? /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("p", { className: "agg-type-label mt-2 text-agg-error", children: "Amount exceeds available balance" }) : null
+        exceedsBalance ? /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("p", { className: "agg-type-label mt-2 text-agg-error", children: "Amount exceeds available balance" }) : null
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
         Button,
         {
           variant: "primary",
@@ -11049,30 +11676,30 @@ var WithdrawAmountStep = ({
 };
 
 // src/withdraw/steps/kalshi-withdraw.tsx
-var import_jsx_runtime110 = require("react/jsx-runtime");
+var import_jsx_runtime115 = require("react/jsx-runtime");
 var KalshiStepCard2 = ({
   step,
   title,
   description,
   children
-}) => /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("div", { className: "flex flex-col gap-2 rounded-xl bg-agg-secondary-hover p-4", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("p", { className: "agg-type-caption-caps text-agg-muted-foreground", children: [
+}) => /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)("div", { className: "flex flex-col gap-2 rounded-xl bg-agg-secondary-hover p-4", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)("p", { className: "agg-type-caption-caps text-agg-muted-foreground", children: [
     "Step ",
     step
   ] }),
-  /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("div", { className: "flex flex-col gap-1", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("p", { className: "agg-type-label-strong text-agg-foreground", children: title }),
-    /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("p", { className: "agg-type-label text-agg-foreground", children: description })
+  /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("p", { className: "agg-type-label-strong text-agg-foreground", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("p", { className: "agg-type-label text-agg-foreground", children: description })
   ] }),
   children
 ] });
 var KalshiWithdrawStep = ({
   withdrawUrl,
   onDone
-}) => /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(import_jsx_runtime110.Fragment, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(Modal.Header, { title: "", hideBorder: true }),
-  /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(Modal.Body, { classNames: { root: "px-5 pt-0 pb-6 sm:px-8 sm:pt-0 sm:pb-8" }, children: /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("div", { className: "flex flex-col items-center gap-8", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)(import_jsx_runtime115.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(Modal.Header, { title: "", hideBorder: true }),
+  /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(Modal.Body, { classNames: { root: "px-5 pt-0 pb-6 sm:px-8 sm:pt-0 sm:pb-8" }, children: /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)("div", { className: "flex flex-col items-center gap-8", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
       VenueLogo,
       {
         venue: "kalshi",
@@ -11080,23 +11707,23 @@ var KalshiWithdrawStep = ({
         className: "h-[60px] w-[60px] rounded-lg"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("div", { className: "flex flex-col items-center gap-4 text-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("h2", { className: "agg-type-heading text-agg-foreground", children: "Withdraw from Kalshi" }),
-      /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("p", { className: "agg-type-body text-agg-foreground", children: "To withdraw from Kalshi you'll need to initiate the withdrawal from your Kalshi account directly on Kalshi's site." })
+    /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)("div", { className: "flex flex-col items-center gap-4 text-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("h2", { className: "agg-type-heading text-agg-foreground", children: "Withdraw from Kalshi" }),
+      /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("p", { className: "agg-type-body text-agg-foreground", children: "To withdraw from Kalshi you'll need to initiate the withdrawal from your Kalshi account directly on Kalshi's site." })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("div", { className: "flex w-full flex-col gap-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)("div", { className: "flex w-full flex-col gap-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
         KalshiStepCard2,
         {
           step: 1,
           title: "Open Kalshi Withdraw Page",
           description: "Sign in to your Kalshi account and go to Withdraw from your account menu.",
-          children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("div", { className: "mt-1", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("div", { className: "mt-1", children: /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
             Button,
             {
               variant: "secondary",
               size: "small",
-              suffix: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(ExternalLinkIcon, { className: "h-3.5 w-3.5" }),
+              suffix: /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(ExternalLinkIcon, { className: "h-3.5 w-3.5" }),
               onClick: () => {
                 window.open(withdrawUrl, "_blank", "noopener,noreferrer");
               },
@@ -11105,7 +11732,7 @@ var KalshiWithdrawStep = ({
           ) })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
         KalshiStepCard2,
         {
           step: 2,
@@ -11113,7 +11740,7 @@ var KalshiWithdrawStep = ({
           description: "Select a withdrawal method: Bank transfer (ACH), Wire, or USDC (crypto)."
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
         KalshiStepCard2,
         {
           step: 3,
@@ -11122,12 +11749,12 @@ var KalshiWithdrawStep = ({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(Button, { variant: "secondary", size: "large", onClick: onDone, children: "Done" })
+    /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(Button, { variant: "secondary", size: "large", onClick: onDone, children: "Done" })
   ] }) })
 ] });
 
 // src/withdraw/index.tsx
-var import_jsx_runtime111 = require("react/jsx-runtime");
+var import_jsx_runtime116 = require("react/jsx-runtime");
 var WithdrawModal = ({
   open,
   onOpenChange,
@@ -11139,9 +11766,9 @@ var WithdrawModal = ({
   onDoneKalshi,
   kalshiWithdrawUrl = KALSHI_WITHDRAW_URL_DEFAULT
 }) => {
-  const [step, setStep] = (0, import_react23.useState)("venues");
-  const [selectedVenue, setSelectedVenue] = (0, import_react23.useState)(null);
-  const [selectedMethod, setSelectedMethod] = (0, import_react23.useState)(null);
+  const [step, setStep] = (0, import_react26.useState)("venues");
+  const [selectedVenue, setSelectedVenue] = (0, import_react26.useState)(null);
+  const [selectedMethod, setSelectedMethod] = (0, import_react26.useState)(null);
   const handleSelectVenue = (venueSlug) => {
     onSelectVenue(venueSlug);
     if (venueSlug === KALSHI_VENUE3) {
@@ -11191,9 +11818,9 @@ var WithdrawModal = ({
     }
     onOpenChange(isOpen);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(Modal, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)(Modal.Container, { maxWidth: "600px", "aria-label": "Withdraw", children: [
-    step === "venues" ? /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(VenueSelectionStep2, { venues, onSelectVenue: handleSelectVenue }) : null,
-    step === "method" && selectedVenue ? /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(Modal, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)(Modal.Container, { maxWidth: "600px", "aria-label": "Withdraw", children: [
+    step === "venues" ? /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(VenueSelectionStep2, { venues, onSelectVenue: handleSelectVenue }) : null,
+    step === "method" && selectedVenue ? /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
       WithdrawMethodStep,
       {
         venue: selectedVenue,
@@ -11201,7 +11828,7 @@ var WithdrawModal = ({
         onSelectMethod: handleSelectMethod
       }
     ) : null,
-    step === "withdraw-amount" && selectedVenue && selectedMethod ? /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
+    step === "withdraw-amount" && selectedVenue && selectedMethod ? /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
       WithdrawAmountStep,
       {
         venue: selectedVenue,
@@ -11210,13 +11837,13 @@ var WithdrawModal = ({
         onContinue: handleContinueWithdraw
       }
     ) : null,
-    step === "kalshi" ? /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(KalshiWithdrawStep, { withdrawUrl: kalshiWithdrawUrl, onDone: handleDoneKalshi }) : null
+    step === "kalshi" ? /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(KalshiWithdrawStep, { withdrawUrl: kalshiWithdrawUrl, onDone: handleDoneKalshi }) : null
   ] }) });
 };
 WithdrawModal.displayName = "WithdrawModal";
 
 // src/onboarding/index.tsx
-var import_react28 = require("react");
+var import_react31 = require("react");
 var import_hooks36 = require("@agg-market/hooks");
 var Dialog4 = __toESM(require("@radix-ui/react-dialog"));
 
@@ -11239,31 +11866,31 @@ var ONCHAIN_VENUES = [
 ];
 
 // src/onboarding/steps/how-it-works.tsx
-var import_react24 = require("react");
+var import_react27 = require("react");
 var import_hooks31 = require("@agg-market/hooks");
-var import_jsx_runtime112 = require("react/jsx-runtime");
+var import_jsx_runtime117 = require("react/jsx-runtime");
 var defaultIcons = {
-  createAccount: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(CreateAccountIcon, { className: "h-[28px] w-[28px] text-agg-muted-foreground" }),
-  linkAccounts: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(LinkAccountsIcon, { className: "h-[28px] w-[28px] text-agg-muted-foreground" }),
-  bestPrices: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(BestPricesIcon, { className: "h-[28px] w-[28px] text-agg-muted-foreground" }),
-  stayInControl: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(StayInControlIcon, { className: "h-[28px] w-[28px] text-agg-muted-foreground" })
+  createAccount: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(CreateAccountIcon, { className: "h-[28px] w-[28px] text-agg-muted-foreground" }),
+  linkAccounts: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(LinkAccountsIcon, { className: "h-[28px] w-[28px] text-agg-muted-foreground" }),
+  bestPrices: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(BestPricesIcon, { className: "h-[28px] w-[28px] text-agg-muted-foreground" }),
+  stayInControl: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(StayInControlIcon, { className: "h-[28px] w-[28px] text-agg-muted-foreground" })
 };
 var HowItWorksStep = ({ onContinue, icons }) => {
   const labels = (0, import_hooks31.useLabels)();
-  const scrollRef = (0, import_react24.useRef)(null);
-  const [showTopGradient, setShowTopGradient] = (0, import_react24.useState)(false);
-  const [showBottomGradient, setShowBottomGradient] = (0, import_react24.useState)(true);
-  const handleScroll = (0, import_react24.useCallback)(() => {
+  const scrollRef = (0, import_react27.useRef)(null);
+  const [showTopGradient, setShowTopGradient] = (0, import_react27.useState)(false);
+  const [showBottomGradient, setShowBottomGradient] = (0, import_react27.useState)(true);
+  const handleScroll = (0, import_react27.useCallback)(() => {
     const el = scrollRef.current;
     if (!el)
       return;
     setShowTopGradient(el.scrollTop > 0);
     setShowBottomGradient(el.scrollTop + el.clientHeight < el.scrollHeight - 1);
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)("div", { className: "flex flex-col gap-6 h-[600px] sm:h-auto", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime112.jsx)("h2", { className: "text-center text-agg-2xl font-agg-bold text-agg-foreground", children: labels.onboarding.howItWorks.title }),
-    /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)("div", { className: "relative flex-1 min-h-0 sm:flex-initial", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)("div", { className: "flex flex-col gap-6 h-[600px] sm:h-auto", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("h2", { className: "text-center text-agg-2xl font-agg-bold text-agg-foreground", children: labels.onboarding.howItWorks.title }),
+    /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)("div", { className: "relative flex-1 min-h-0 sm:flex-initial", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
         "div",
         {
           ref: scrollRef,
@@ -11273,7 +11900,7 @@ var HowItWorksStep = ({ onContinue, icons }) => {
             var _a;
             const icon = (_a = icons == null ? void 0 : icons[featureKey]) != null ? _a : defaultIcons[featureKey];
             const feature = labels.onboarding.howItWorks.features[featureKey];
-            return /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)(
+            return /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(
               "div",
               {
                 className: cn(
@@ -11282,11 +11909,11 @@ var HowItWorksStep = ({ onContinue, icons }) => {
                   "bg-agg-secondary-hover"
                 ),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)("div", { className: "flex flex-col flex-1 min-w-0 gap-[6px]", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime112.jsx)("p", { className: "text-agg-base font-agg-bold leading-agg-6 text-agg-foreground", children: feature.title }),
-                    /* @__PURE__ */ (0, import_jsx_runtime112.jsx)("p", { className: "text-agg-sm leading-agg-5 text-agg-foreground", children: feature.description })
+                  /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)("div", { className: "flex flex-col flex-1 min-w-0 gap-[6px]", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("p", { className: "text-agg-base font-agg-bold leading-agg-6 text-agg-foreground", children: feature.title }),
+                    /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("p", { className: "text-agg-sm leading-agg-5 text-agg-foreground", children: feature.description })
                   ] }),
-                  icon ? /* @__PURE__ */ (0, import_jsx_runtime112.jsx)("div", { className: "hidden shrink-0 items-center justify-center text-agg-muted-foreground sm:flex", children: icon }) : null
+                  icon ? /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("div", { className: "hidden shrink-0 items-center justify-center text-agg-muted-foreground sm:flex", children: icon }) : null
                 ]
               },
               featureKey
@@ -11294,7 +11921,7 @@ var HowItWorksStep = ({ onContinue, icons }) => {
           })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
         "div",
         {
           className: cn(
@@ -11305,7 +11932,7 @@ var HowItWorksStep = ({ onContinue, icons }) => {
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
         "div",
         {
           className: cn(
@@ -11317,26 +11944,26 @@ var HowItWorksStep = ({ onContinue, icons }) => {
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(Button, { variant: "primary", size: "large", className: "w-full", onClick: onContinue, children: labels.onboarding.howItWorks.continue })
+    /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(Button, { variant: "primary", size: "large", className: "w-full", onClick: onContinue, children: labels.onboarding.howItWorks.continue })
   ] });
 };
 HowItWorksStep.displayName = "HowItWorksStep";
 
 // src/onboarding/steps/profile-setup.tsx
-var import_react25 = require("react");
+var import_react28 = require("react");
 var import_hooks32 = require("@agg-market/hooks");
-var import_jsx_runtime113 = require("react/jsx-runtime");
+var import_jsx_runtime118 = require("react/jsx-runtime");
 var ProfileSetupStep = ({ onContinue }) => {
   const labels = (0, import_hooks32.useLabels)();
-  const [username, setUsername] = (0, import_react25.useState)("");
-  const [avatarFile, setAvatarFile] = (0, import_react25.useState)();
-  const [avatarPreview, setAvatarPreview] = (0, import_react25.useState)();
-  const fileInputRef = (0, import_react25.useRef)(null);
-  const handleAvatarClick = (0, import_react25.useCallback)(() => {
+  const [username, setUsername] = (0, import_react28.useState)("");
+  const [avatarFile, setAvatarFile] = (0, import_react28.useState)();
+  const [avatarPreview, setAvatarPreview] = (0, import_react28.useState)();
+  const fileInputRef = (0, import_react28.useRef)(null);
+  const handleAvatarClick = (0, import_react28.useCallback)(() => {
     var _a;
     (_a = fileInputRef.current) == null ? void 0 : _a.click();
   }, []);
-  const handleFileChange = (0, import_react25.useCallback)((e) => {
+  const handleFileChange = (0, import_react28.useCallback)((e) => {
     var _a;
     const file = (_a = e.target.files) == null ? void 0 : _a[0];
     if (!file)
@@ -11349,18 +11976,18 @@ var ProfileSetupStep = ({ onContinue }) => {
     };
     reader.readAsDataURL(file);
   }, []);
-  const handleContinue = (0, import_react25.useCallback)(() => {
+  const handleContinue = (0, import_react28.useCallback)(() => {
     onContinue({
       username,
       avatarFile,
       avatarPreview
     });
   }, [username, avatarFile, avatarPreview, onContinue]);
-  return /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)("div", { className: "flex flex-col gap-7", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("h2", { className: "text-center text-agg-2xl font-agg-bold text-agg-foreground", children: labels.onboarding.profileSetup.title }),
-    /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)("div", { className: "flex flex-col gap-5 items-center w-full", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)("div", { className: "flex justify-center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)("div", { className: "flex flex-col gap-7", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("h2", { className: "text-center text-agg-2xl font-agg-bold text-agg-foreground", children: labels.onboarding.profileSetup.title }),
+    /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)("div", { className: "flex flex-col gap-5 items-center w-full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)("div", { className: "flex justify-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
           "button",
           {
             type: "button",
@@ -11376,17 +12003,17 @@ var ProfileSetupStep = ({ onContinue }) => {
               "overflow-hidden"
             ),
             "aria-label": labels.onboarding.profileSetup.uploadProfilePictureAria,
-            children: avatarPreview ? /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
+            children: avatarPreview ? /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
               RemoteImage,
               {
                 src: avatarPreview,
                 alt: labels.onboarding.profileSetup.profilePreviewAlt,
                 className: "h-full w-full object-cover"
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(ProfileIcon, { className: "h-7 w-7 text-agg-muted-foreground" })
+            ) : /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(ProfileIcon, { className: "h-7 w-7 text-agg-muted-foreground" })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
           "input",
           {
             ref: fileInputRef,
@@ -11398,8 +12025,8 @@ var ProfileSetupStep = ({ onContinue }) => {
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)("div", { className: "flex flex-col gap-2 w-full", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)("div", { className: "flex flex-col gap-2 w-full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
           "label",
           {
             htmlFor: "onboarding-username",
@@ -11407,7 +12034,7 @@ var ProfileSetupStep = ({ onContinue }) => {
             children: labels.onboarding.profileSetup.usernameLabel
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
           "input",
           {
             id: "onboarding-username",
@@ -11431,16 +12058,16 @@ var ProfileSetupStep = ({ onContinue }) => {
         )
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(Button, { variant: "primary", size: "large", className: "w-full", onClick: handleContinue, children: labels.onboarding.profileSetup.continue })
+    /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(Button, { variant: "primary", size: "large", className: "w-full", onClick: handleContinue, children: labels.onboarding.profileSetup.continue })
   ] });
 };
 ProfileSetupStep.displayName = "ProfileSetupStep";
 
 // src/onboarding/steps/connect-accounts.tsx
 var import_hooks33 = require("@agg-market/hooks");
-var import_jsx_runtime114 = require("react/jsx-runtime");
+var import_jsx_runtime119 = require("react/jsx-runtime");
 var OnchainVenueLogos = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("div", { className: "flex gap-1 sm:gap-0 sm:-space-x-5", children: ONCHAIN_VENUES.map((venue, index) => /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("div", { style: { zIndex: ONCHAIN_VENUES.length - index }, children: /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(VenueLogo, { venue, variant: "logo", size: "medium", className: "sm:h-8 sm:w-8" }) }, venue)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("div", { className: "flex gap-1 sm:gap-0 sm:-space-x-5", children: ONCHAIN_VENUES.map((venue, index) => /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("div", { style: { zIndex: ONCHAIN_VENUES.length - index }, children: /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(VenueLogo, { venue, variant: "logo", size: "medium", className: "sm:h-8 sm:w-8" }) }, venue)) });
 };
 var VenueCard = ({
   logos,
@@ -11452,7 +12079,7 @@ var VenueCard = ({
   connected = false
 }) => {
   const labels = (0, import_hooks33.useLabels)();
-  const action = connected ? /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(CheckCircleIcon, { className: "h-6 w-6 text-agg-success" }) : /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
+  const action = connected ? /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(CheckCircleIcon, { className: "h-6 w-6 text-agg-success" }) : /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
     Button,
     {
       variant: "tertiary",
@@ -11462,18 +12089,18 @@ var VenueCard = ({
       children: labels.onboarding.connectAccounts.connect
     }
   );
-  const mobileAction = connected ? /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(CheckCircleIcon, { className: "h-6 w-6 text-agg-success" }) : /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
+  const mobileAction = connected ? /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(CheckCircleIcon, { className: "h-6 w-6 text-agg-success" }) : /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
     Button,
     {
       variant: "tertiary",
       size: "medium",
       className: "!h-auto !px-0 !py-0 text-agg-primary hover:bg-transparent hover:text-agg-primary-hover",
       onClick: onConnect,
-      suffix: /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(ChevronRightIcon, { className: "h-4 w-4" }),
+      suffix: /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(ChevronRightIcon, { className: "h-4 w-4" }),
       children: labels.onboarding.connectAccounts.connectAccount
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)(
     "div",
     {
       className: cn(
@@ -11481,23 +12108,23 @@ var VenueCard = ({
         connected ? "bg-agg-success/5" : "bg-agg-secondary-hover hover:bg-agg-tertiary"
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)("div", { className: "hidden sm:flex items-center justify-between", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)("div", { className: "flex items-center gap-5", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("div", { className: "shrink-0", children: logos }),
-            /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)("div", { className: "flex flex-col gap-[2px]", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("p", { className: "text-agg-base font-agg-bold text-agg-foreground", children: title }),
-              /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("p", { className: "text-agg-sm text-agg-foreground", children: description })
+        /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)("div", { className: "hidden sm:flex items-center justify-between", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)("div", { className: "flex items-center gap-5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("div", { className: "shrink-0", children: logos }),
+            /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)("div", { className: "flex flex-col gap-[2px]", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("p", { className: "text-agg-base font-agg-bold text-agg-foreground", children: title }),
+              /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("p", { className: "text-agg-sm text-agg-foreground", children: description })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("div", { className: "shrink-0", children: action })
+          /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("div", { className: "shrink-0", children: action })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)("div", { className: "flex flex-col gap-3 sm:hidden", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)("div", { className: "flex flex-col gap-3", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("div", { className: "shrink-0", children: logos }),
-            /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("p", { className: "text-agg-lg font-agg-bold text-agg-foreground", children: mobileTitle != null ? mobileTitle : title })
+        /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)("div", { className: "flex flex-col gap-3 sm:hidden", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)("div", { className: "flex flex-col gap-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("div", { className: "shrink-0", children: logos }),
+            /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("p", { className: "text-agg-lg font-agg-bold text-agg-foreground", children: mobileTitle != null ? mobileTitle : title })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)("div", { className: "flex flex-col items-start gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("p", { className: "text-agg-base text-agg-foreground", children: mobileDescription != null ? mobileDescription : description }),
+          /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)("div", { className: "flex flex-col items-start gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("p", { className: "text-agg-base text-agg-foreground", children: mobileDescription != null ? mobileDescription : description }),
             mobileAction
           ] })
         ] })
@@ -11514,13 +12141,13 @@ var ConnectAccountsStep = ({
 }) => {
   const labels = (0, import_hooks33.useLabels)();
   const canContinue = connectedOnchain || connectedKalshi;
-  return /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)("div", { className: "flex flex-col gap-6", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("h2", { className: "text-center text-agg-2xl font-agg-bold text-agg-foreground", children: labels.onboarding.connectAccounts.title }),
-    /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)("div", { className: "flex flex-col gap-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)("div", { className: "flex flex-col gap-6", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("h2", { className: "text-center text-agg-2xl font-agg-bold text-agg-foreground", children: labels.onboarding.connectAccounts.title }),
+    /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)("div", { className: "flex flex-col gap-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
         VenueCard,
         {
-          logos: /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(OnchainVenueLogos, {}),
+          logos: /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(OnchainVenueLogos, {}),
           title: labels.onboarding.connectAccounts.onchainTitle,
           mobileTitle: labels.onboarding.connectAccounts.onchainMobileTitle(
             ONCHAIN_VENUES.length - 1
@@ -11531,10 +12158,10 @@ var ConnectAccountsStep = ({
           connected: connectedOnchain
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
         VenueCard,
         {
-          logos: /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("div", { className: "sm:flex sm:w-14 sm:items-center sm:justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
+          logos: /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("div", { className: "sm:flex sm:w-14 sm:items-center sm:justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
             VenueLogo,
             {
               venue: "kalshi",
@@ -11552,7 +12179,7 @@ var ConnectAccountsStep = ({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
       Button,
       {
         variant: "primary",
@@ -11568,25 +12195,25 @@ var ConnectAccountsStep = ({
 ConnectAccountsStep.displayName = "ConnectAccountsStep";
 
 // src/onboarding/steps/connect-kalshi-modal.tsx
-var import_react26 = require("react");
+var import_react29 = require("react");
 var import_hooks34 = require("@agg-market/hooks");
 var Dialog2 = __toESM(require("@radix-ui/react-dialog"));
-var import_jsx_runtime115 = require("react/jsx-runtime");
+var import_jsx_runtime120 = require("react/jsx-runtime");
 var ConnectKalshiModal = ({
   open,
   onOpenChange,
   onVerify
 }) => {
   const labels = (0, import_hooks34.useLabels)();
-  const [apiKeyId, setApiKeyId] = (0, import_react26.useState)("");
-  const [privateKey, setPrivateKey] = (0, import_react26.useState)("");
-  const [verifying, setVerifying] = (0, import_react26.useState)(false);
-  const [error, setError] = (0, import_react26.useState)();
+  const [apiKeyId, setApiKeyId] = (0, import_react29.useState)("");
+  const [privateKey, setPrivateKey] = (0, import_react29.useState)("");
+  const [verifying, setVerifying] = (0, import_react29.useState)(false);
+  const [error, setError] = (0, import_react29.useState)();
   const canVerify = apiKeyId.trim().length > 0 && privateKey.trim().length > 0;
-  const handleCancel = (0, import_react26.useCallback)(() => {
+  const handleCancel = (0, import_react29.useCallback)(() => {
     onOpenChange(false);
   }, [onOpenChange]);
-  const handleVerify = (0, import_react26.useCallback)(() => __async(void 0, null, function* () {
+  const handleVerify = (0, import_react29.useCallback)(() => __async(void 0, null, function* () {
     if (!canVerify || verifying)
       return;
     setVerifying(true);
@@ -11616,7 +12243,7 @@ var ConnectKalshiModal = ({
     privateKey,
     verifying
   ]);
-  const handleOpenChange = (0, import_react26.useCallback)(
+  const handleOpenChange = (0, import_react29.useCallback)(
     (value) => {
       if (value) {
         setApiKeyId("");
@@ -11628,15 +12255,15 @@ var ConnectKalshiModal = ({
     },
     [onOpenChange]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(Modal, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(Modal, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)(
     Modal.Container,
     {
       maxWidth: "600px",
       "aria-label": labels.onboarding.connectKalshiModal.ariaLabel,
       classNames: { container: "!rounded-agg-lg" },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(Dialog2.Title, { className: "sr-only", children: labels.onboarding.connectKalshiModal.title }),
-        /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(Dialog2.Title, { className: "sr-only", children: labels.onboarding.connectKalshiModal.title }),
+        /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
           Modal.Header,
           {
             hideClose: false,
@@ -11647,8 +12274,8 @@ var ConnectKalshiModal = ({
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(Modal.Body, { classNames: { root: "!px-5 !pt-0 !pb-[60px] sm:!px-8" }, children: /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)("div", { className: "flex flex-col gap-8 items-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(Modal.Body, { classNames: { root: "!px-5 !pt-0 !pb-[60px] sm:!px-8" }, children: /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("div", { className: "flex flex-col gap-8 items-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
             VenueLogo,
             {
               venue: "kalshi",
@@ -11657,54 +12284,54 @@ var ConnectKalshiModal = ({
               className: "h-[60px] w-[60px]"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)("div", { className: "flex flex-col gap-4 items-center text-center", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("h2", { className: "text-agg-2xl font-agg-bold text-agg-foreground", children: labels.onboarding.connectKalshiModal.title }),
-            /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("p", { className: "text-agg-base leading-agg-6 text-agg-foreground", children: labels.onboarding.connectKalshiModal.description })
+          /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("div", { className: "flex flex-col gap-4 items-center text-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("h2", { className: "text-agg-2xl font-agg-bold text-agg-foreground", children: labels.onboarding.connectKalshiModal.title }),
+            /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("p", { className: "text-agg-base leading-agg-6 text-agg-foreground", children: labels.onboarding.connectKalshiModal.description })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)("div", { className: "flex flex-col gap-4 w-full", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)("div", { className: "flex flex-col gap-3 rounded-agg-lg bg-agg-secondary-hover p-4", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)("div", { className: "flex flex-col gap-1", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("p", { className: "text-agg-xs font-agg-bold uppercase leading-agg-4 text-agg-muted-foreground", children: labels.onboarding.connectKalshiModal.stepOne.label }),
-                /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("p", { className: "text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground", children: labels.onboarding.connectKalshiModal.stepOne.title })
+          /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("div", { className: "flex flex-col gap-4 w-full", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("div", { className: "flex flex-col gap-3 rounded-agg-lg bg-agg-secondary-hover p-4", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("div", { className: "flex flex-col gap-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("p", { className: "text-agg-xs font-agg-bold uppercase leading-agg-4 text-agg-muted-foreground", children: labels.onboarding.connectKalshiModal.stepOne.label }),
+                /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("p", { className: "text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground", children: labels.onboarding.connectKalshiModal.stepOne.title })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)("div", { className: "space-y-0 text-agg-sm leading-agg-5 text-agg-foreground", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("p", { children: labels.onboarding.connectKalshiModal.stepOne.instructions.signIn }),
-                /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)("p", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("div", { className: "space-y-0 text-agg-sm leading-agg-5 text-agg-foreground", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("p", { children: labels.onboarding.connectKalshiModal.stepOne.instructions.signIn }),
+                /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("p", { children: [
                   labels.onboarding.connectKalshiModal.stepOne.instructions.goToProfilePrefix,
                   " ",
-                  /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("span", { className: "font-agg-bold", children: labels.onboarding.connectKalshiModal.stepOne.instructions.profileText }),
+                  /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("span", { className: "font-agg-bold", children: labels.onboarding.connectKalshiModal.stepOne.instructions.profileText }),
                   labels.onboarding.connectKalshiModal.stepOne.instructions.goToProfileSeparator,
                   " ",
-                  /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("span", { className: "text-agg-foreground underline", children: labels.onboarding.connectKalshiModal.stepOne.instructions.profileUrl })
+                  /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("span", { className: "text-agg-foreground underline", children: labels.onboarding.connectKalshiModal.stepOne.instructions.profileUrl })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)("p", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("p", { children: [
                   labels.onboarding.connectKalshiModal.stepOne.instructions.clickCreateKeyPrefix,
                   " ",
-                  /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("span", { className: "font-agg-bold", children: labels.onboarding.connectKalshiModal.stepOne.instructions.createKeyText }),
+                  /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("span", { className: "font-agg-bold", children: labels.onboarding.connectKalshiModal.stepOne.instructions.createKeyText }),
                   labels.onboarding.connectKalshiModal.stepOne.instructions.clickCreateKeySuffix
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)("p", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("p", { children: [
                   labels.onboarding.connectKalshiModal.stepOne.instructions.selectPermissionsPrefix,
                   " ",
-                  /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("span", { className: "font-agg-bold", children: labels.onboarding.connectKalshiModal.stepOne.instructions.readWriteText }),
+                  /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("span", { className: "font-agg-bold", children: labels.onboarding.connectKalshiModal.stepOne.instructions.readWriteText }),
                   labels.onboarding.connectKalshiModal.stepOne.instructions.selectPermissionsSuffix
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("p", { children: labels.onboarding.connectKalshiModal.stepOne.instructions.createKey })
+                /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("p", { children: labels.onboarding.connectKalshiModal.stepOne.instructions.createKey })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)("p", { className: "text-agg-sm leading-agg-5 text-agg-foreground", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("p", { className: "text-agg-sm leading-agg-5 text-agg-foreground", children: [
                 labels.onboarding.connectKalshiModal.stepOne.footerLineOne,
-                /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("br", {}),
+                /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("br", {}),
                 labels.onboarding.connectKalshiModal.stepOne.footerLineTwo
               ] })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)("div", { className: "flex flex-col gap-3 rounded-agg-lg bg-agg-secondary-hover p-4", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)("div", { className: "flex flex-col gap-1", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("p", { className: "text-agg-xs font-agg-bold uppercase leading-agg-4 text-agg-muted-foreground", children: labels.onboarding.connectKalshiModal.stepTwo.label }),
-                /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("p", { className: "text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground", children: labels.onboarding.connectKalshiModal.stepTwo.title })
+            /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("div", { className: "flex flex-col gap-3 rounded-agg-lg bg-agg-secondary-hover p-4", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("div", { className: "flex flex-col gap-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("p", { className: "text-agg-xs font-agg-bold uppercase leading-agg-4 text-agg-muted-foreground", children: labels.onboarding.connectKalshiModal.stepTwo.label }),
+                /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("p", { className: "text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground", children: labels.onboarding.connectKalshiModal.stepTwo.title })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("p", { className: "text-agg-sm leading-agg-5 text-agg-foreground", children: labels.onboarding.connectKalshiModal.stepTwo.description }),
-              /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)("div", { className: "flex flex-col gap-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("p", { className: "text-agg-sm leading-agg-5 text-agg-foreground", children: labels.onboarding.connectKalshiModal.stepTwo.description }),
+              /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("div", { className: "flex flex-col gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
                   "label",
                   {
                     htmlFor: "kalshi-api-key-id",
@@ -11712,7 +12339,7 @@ var ConnectKalshiModal = ({
                     children: labels.onboarding.connectKalshiModal.stepTwo.apiKeyIdLabel
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
                   "input",
                   {
                     id: "kalshi-api-key-id",
@@ -11732,8 +12359,8 @@ var ConnectKalshiModal = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)("div", { className: "flex flex-col gap-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("div", { className: "flex flex-col gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
                   "label",
                   {
                     htmlFor: "kalshi-private-key",
@@ -11741,7 +12368,7 @@ var ConnectKalshiModal = ({
                     children: labels.onboarding.connectKalshiModal.stepTwo.privateKeyLabel
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
                   "textarea",
                   {
                     id: "kalshi-private-key",
@@ -11763,42 +12390,42 @@ var ConnectKalshiModal = ({
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)("div", { className: "flex items-center justify-between w-full", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("p", { className: "text-agg-base text-agg-foreground", children: labels.onboarding.connectKalshiModal.help.label }),
-            /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)("div", { className: "flex items-center gap-3", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("div", { className: "flex items-center justify-between w-full", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("p", { className: "text-agg-base text-agg-foreground", children: labels.onboarding.connectKalshiModal.help.label }),
+            /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("div", { className: "flex items-center gap-3", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)(
                 "a",
                 {
                   href: "#",
                   className: "flex items-center gap-2 text-agg-base font-agg-bold text-agg-primary hover:text-agg-primary-hover",
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(DocumentIcon, { className: "h-4 w-4" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(DocumentIcon, { className: "h-4 w-4" }),
                     labels.onboarding.connectKalshiModal.help.docsLinkLabel
                   ]
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("span", { className: "h-3 w-px bg-agg-separator" }),
-              /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("span", { className: "h-3 w-px bg-agg-separator" }),
+              /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)(
                 "a",
                 {
                   href: "#",
                   className: "flex items-center gap-2 text-agg-base font-agg-bold text-agg-primary hover:text-agg-primary-hover",
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(PlaySquareIcon, { className: "h-4 w-4" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(PlaySquareIcon, { className: "h-4 w-4" }),
                     labels.onboarding.connectKalshiModal.help.tutorialLinkLabel
                   ]
                 }
               )
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)("div", { className: "flex flex-col gap-5 items-center", children: [
-            error ? /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(WarningIcon, { className: "h-3.5 w-3.5 shrink-0 text-agg-error" }),
-              /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("p", { className: "text-agg-sm leading-agg-5 text-agg-error", children: error })
+          /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("div", { className: "flex flex-col gap-5 items-center", children: [
+            error ? /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(WarningIcon, { className: "h-3.5 w-3.5 shrink-0 text-agg-error" }),
+              /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("p", { className: "text-agg-sm leading-agg-5 text-agg-error", children: error })
             ] }) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)("div", { className: "flex items-center gap-3 justify-center", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(Button, { variant: "secondary", size: "large", onClick: handleCancel, children: labels.onboarding.connectKalshiModal.actions.cancel }),
-              /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("div", { className: "flex items-center gap-3 justify-center", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(Button, { variant: "secondary", size: "large", onClick: handleCancel, children: labels.onboarding.connectKalshiModal.actions.cancel }),
+              /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
                 Button,
                 {
                   variant: "primary",
@@ -11819,22 +12446,22 @@ var ConnectKalshiModal = ({
 ConnectKalshiModal.displayName = "ConnectKalshiModal";
 
 // src/onboarding/steps/connect-onchain-modal.tsx
-var import_react27 = require("react");
+var import_react30 = require("react");
 var import_hooks35 = require("@agg-market/hooks");
 var Dialog3 = __toESM(require("@radix-ui/react-dialog"));
-var import_jsx_runtime116 = require("react/jsx-runtime");
+var import_jsx_runtime121 = require("react/jsx-runtime");
 var ConnectOnchainModal = ({
   open,
   onOpenChange,
   onConnect
 }) => {
   const labels = (0, import_hooks35.useLabels)();
-  const [connecting, setConnecting] = (0, import_react27.useState)(false);
-  const [error, setError] = (0, import_react27.useState)();
-  const handleCancel = (0, import_react27.useCallback)(() => {
+  const [connecting, setConnecting] = (0, import_react30.useState)(false);
+  const [error, setError] = (0, import_react30.useState)();
+  const handleCancel = (0, import_react30.useCallback)(() => {
     onOpenChange(false);
   }, [onOpenChange]);
-  const handleConnect = (0, import_react27.useCallback)(() => __async(void 0, null, function* () {
+  const handleConnect = (0, import_react30.useCallback)(() => __async(void 0, null, function* () {
     if (connecting)
       return;
     setConnecting(true);
@@ -11850,7 +12477,7 @@ var ConnectOnchainModal = ({
       setConnecting(false);
     }
   }), [connecting, labels.onboarding.connectOnchainModal.fallbackError, onConnect, onOpenChange]);
-  const handleOpenChange = (0, import_react27.useCallback)(
+  const handleOpenChange = (0, import_react30.useCallback)(
     (value) => {
       if (value) {
         setError(void 0);
@@ -11860,15 +12487,15 @@ var ConnectOnchainModal = ({
     },
     [onOpenChange]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(Modal, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(Modal, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)(
     Modal.Container,
     {
       maxWidth: "600px",
       "aria-label": labels.onboarding.connectOnchainModal.ariaLabel,
       classNames: { container: "!rounded-agg-lg" },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(Dialog3.Title, { className: "sr-only", children: labels.onboarding.connectOnchainModal.title }),
-        /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(Dialog3.Title, { className: "sr-only", children: labels.onboarding.connectOnchainModal.title }),
+        /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
           Modal.Header,
           {
             hideClose: false,
@@ -11879,26 +12506,26 @@ var ConnectOnchainModal = ({
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(Modal.Body, { classNames: { root: "!px-5 !pt-0 !pb-[60px] sm:!px-8" }, children: /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)("div", { className: "flex flex-col gap-8 items-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)("div", { className: "flex flex-col gap-4 items-center text-center", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("h2", { className: "text-agg-2xl font-agg-bold text-agg-foreground", children: labels.onboarding.connectOnchainModal.title }),
-            /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("p", { className: "text-agg-base text-center leading-agg-6 text-agg-foreground whitespace-pre-line", children: labels.onboarding.connectOnchainModal.description })
+        /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(Modal.Body, { classNames: { root: "!px-5 !pt-0 !pb-[60px] sm:!px-8" }, children: /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("div", { className: "flex flex-col gap-8 items-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("div", { className: "flex flex-col gap-4 items-center text-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("h2", { className: "text-agg-2xl font-agg-bold text-agg-foreground", children: labels.onboarding.connectOnchainModal.title }),
+            /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("p", { className: "text-agg-base text-center leading-agg-6 text-agg-foreground whitespace-pre-line", children: labels.onboarding.connectOnchainModal.description })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)("div", { className: "flex w-full flex-col items-center gap-4 rounded-agg-xl bg-agg-secondary-hover p-6", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("p", { className: "text-agg-sm font-agg-bold uppercase leading-agg-5 text-agg-muted-foreground", children: labels.onboarding.connectOnchainModal.supportedVenuesLabel }),
-            /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("div", { className: "flex flex-wrap items-center justify-center gap-x-4 gap-y-3", children: ONCHAIN_VENUES.map((venue, index) => /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)("div", { className: "flex items-center gap-[6px]", children: [
-              index > 0 && /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("span", { className: "mr-2.5 h-3 w-px bg-agg-separator" }),
-              /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(VenueLogo, { venue, size: "medium" }),
-              /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("span", { className: "text-agg-base text-agg-foreground", children: labels.venues[venue] })
+          /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("div", { className: "flex w-full flex-col items-center gap-4 rounded-agg-xl bg-agg-secondary-hover p-6", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("p", { className: "text-agg-sm font-agg-bold uppercase leading-agg-5 text-agg-muted-foreground", children: labels.onboarding.connectOnchainModal.supportedVenuesLabel }),
+            /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { className: "flex flex-wrap items-center justify-center gap-x-4 gap-y-3", children: ONCHAIN_VENUES.map((venue, index) => /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("div", { className: "flex items-center gap-[6px]", children: [
+              index > 0 && /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "mr-2.5 h-3 w-px bg-agg-separator" }),
+              /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(VenueLogo, { venue, size: "medium" }),
+              /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "text-agg-base text-agg-foreground", children: labels.venues[venue] })
             ] }, venue)) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)("div", { className: "flex flex-col gap-6 items-center", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)("div", { className: "flex flex-col gap-3 items-center", children: [
-              error ? /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(WarningIcon, { className: "h-3.5 w-3.5 shrink-0 text-agg-error" }),
-                /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("p", { className: "text-agg-sm leading-agg-5 text-agg-error", children: error })
+          /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("div", { className: "flex flex-col gap-6 items-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("div", { className: "flex flex-col gap-3 items-center", children: [
+              error ? /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(WarningIcon, { className: "h-3.5 w-3.5 shrink-0 text-agg-error" }),
+                /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("p", { className: "text-agg-sm leading-agg-5 text-agg-error", children: error })
               ] }) : null,
-              /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
                 Button,
                 {
                   variant: "primary",
@@ -11909,7 +12536,7 @@ var ConnectOnchainModal = ({
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
               Button,
               {
                 variant: "tertiary",
@@ -11928,7 +12555,7 @@ var ConnectOnchainModal = ({
 ConnectOnchainModal.displayName = "ConnectOnchainModal";
 
 // src/onboarding/index.tsx
-var import_jsx_runtime117 = require("react/jsx-runtime");
+var import_jsx_runtime122 = require("react/jsx-runtime");
 var OnboardingModal = ({
   open,
   onOpenChange,
@@ -11942,67 +12569,67 @@ var OnboardingModal = ({
 }) => {
   var _a;
   const labels = (0, import_hooks36.useLabels)();
-  const [step, setStep] = (0, import_react28.useState)(ONBOARDING_STEPS.HOW_IT_WORKS);
+  const [step, setStep] = (0, import_react31.useState)(ONBOARDING_STEPS.HOW_IT_WORKS);
   const stepLabels = {
     [ONBOARDING_STEPS.HOW_IT_WORKS]: labels.onboarding.modal.stepHowItWorks,
     [ONBOARDING_STEPS.PROFILE_SETUP]: labels.onboarding.modal.stepProfileSetup,
     [ONBOARDING_STEPS.CONNECT_ACCOUNTS]: labels.onboarding.modal.stepConnectAccounts
   };
   const resolvedTitle = (_a = stepLabels[step]) != null ? _a : labels.onboarding.modal.title;
-  const [kalshiModalOpen, setKalshiModalOpen] = (0, import_react28.useState)(false);
-  const [kalshiConnected, setKalshiConnected] = (0, import_react28.useState)(false);
-  const [onchainModalOpen, setOnchainModalOpen] = (0, import_react28.useState)(false);
-  const [onchainConnected, setOnchainConnected] = (0, import_react28.useState)(false);
-  (0, import_react28.useEffect)(() => {
+  const [kalshiModalOpen, setKalshiModalOpen] = (0, import_react31.useState)(false);
+  const [kalshiConnected, setKalshiConnected] = (0, import_react31.useState)(false);
+  const [onchainModalOpen, setOnchainModalOpen] = (0, import_react31.useState)(false);
+  const [onchainConnected, setOnchainConnected] = (0, import_react31.useState)(false);
+  (0, import_react31.useEffect)(() => {
     if (open) {
       setStep(ONBOARDING_STEPS.HOW_IT_WORKS);
       setKalshiConnected(false);
       setOnchainConnected(false);
     }
   }, [open]);
-  const handleHowItWorksContinue = (0, import_react28.useCallback)(() => {
+  const handleHowItWorksContinue = (0, import_react31.useCallback)(() => {
     setStep(ONBOARDING_STEPS.PROFILE_SETUP);
   }, []);
-  const handleProfileContinue = (0, import_react28.useCallback)(
+  const handleProfileContinue = (0, import_react31.useCallback)(
     (data) => {
       onProfileSubmit == null ? void 0 : onProfileSubmit(data);
       setStep(ONBOARDING_STEPS.CONNECT_ACCOUNTS);
     },
     [onProfileSubmit]
   );
-  const handleConnectContinue = (0, import_react28.useCallback)(() => {
+  const handleConnectContinue = (0, import_react31.useCallback)(() => {
     onComplete == null ? void 0 : onComplete();
   }, [onComplete]);
-  const handleOpenOnchainModal = (0, import_react28.useCallback)(() => {
+  const handleOpenOnchainModal = (0, import_react31.useCallback)(() => {
     setOnchainModalOpen(true);
   }, []);
-  const handleOnchainConnect = (0, import_react28.useCallback)(() => __async(void 0, null, function* () {
+  const handleOnchainConnect = (0, import_react31.useCallback)(() => __async(void 0, null, function* () {
     yield onConnectOnchain == null ? void 0 : onConnectOnchain();
     setOnchainConnected(true);
   }), [onConnectOnchain]);
-  const handleOpenKalshiModal = (0, import_react28.useCallback)(() => {
+  const handleOpenKalshiModal = (0, import_react31.useCallback)(() => {
     setKalshiModalOpen(true);
   }, []);
-  const handleKalshiVerify = (0, import_react28.useCallback)(
+  const handleKalshiVerify = (0, import_react31.useCallback)(
     (credentials) => __async(void 0, null, function* () {
       yield onConnectKalshi == null ? void 0 : onConnectKalshi(credentials);
       setKalshiConnected(true);
     }),
     [onConnectKalshi]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(import_jsx_runtime117.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(Modal, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)(import_jsx_runtime122.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(Modal, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)(
       Modal.Container,
       {
         maxWidth: "600px",
         "aria-label": resolvedTitle,
         classNames: { container: "!rounded-agg-lg" },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(Dialog4.Title, { className: "sr-only", children: resolvedTitle }),
-          /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(Modal.Body, { classNames: { root: "px-5 py-6 sm:px-10 sm:py-8" }, children: [
-            step === ONBOARDING_STEPS.HOW_IT_WORKS && /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(HowItWorksStep, { onContinue: handleHowItWorksContinue, icons: howItWorksIcons }),
-            step === ONBOARDING_STEPS.PROFILE_SETUP && /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(ProfileSetupStep, { onContinue: handleProfileContinue }),
-            step === ONBOARDING_STEPS.CONNECT_ACCOUNTS && /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(Dialog4.Title, { className: "sr-only", children: resolvedTitle }),
+          /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)(Modal.Body, { classNames: { root: "px-5 py-6 sm:px-10 sm:py-8" }, children: [
+            step === ONBOARDING_STEPS.HOW_IT_WORKS && /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(HowItWorksStep, { onContinue: handleHowItWorksContinue, icons: howItWorksIcons }),
+            step === ONBOARDING_STEPS.PROFILE_SETUP && /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(ProfileSetupStep, { onContinue: handleProfileContinue }),
+            step === ONBOARDING_STEPS.CONNECT_ACCOUNTS && /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
               ConnectAccountsStep,
               {
                 onConnectOnchain: handleOpenOnchainModal,
@@ -12016,7 +12643,7 @@ var OnboardingModal = ({
         ]
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
       ConnectOnchainModal,
       {
         open: onchainModalOpen,
@@ -12024,7 +12651,7 @@ var OnboardingModal = ({
         onConnect: handleOnchainConnect
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
       ConnectKalshiModal,
       {
         open: kalshiModalOpen,
@@ -12037,7 +12664,7 @@ var OnboardingModal = ({
 OnboardingModal.displayName = "OnboardingModal";
 
 // src/profile/index.tsx
-var import_react30 = require("react");
+var import_react33 = require("react");
 
 // src/profile/profile-modal.constants.ts
 var PROFILE_TAB_KEYS = {
@@ -12050,9 +12677,9 @@ var PROFILE_TAB_ITEMS = [
 ];
 
 // src/profile/tabs/about-tab.tsx
-var import_react29 = require("react");
+var import_react32 = require("react");
 var import_hooks37 = require("@agg-market/hooks");
-var import_jsx_runtime118 = require("react/jsx-runtime");
+var import_jsx_runtime123 = require("react/jsx-runtime");
 var AboutTab = ({
   avatarPreview,
   onDeleteProfile,
@@ -12062,12 +12689,12 @@ var AboutTab = ({
   draftAvatarPreview
 }) => {
   const labels = (0, import_hooks37.useLabels)();
-  const fileInputRef = (0, import_react29.useRef)(null);
-  const handleAvatarClick = (0, import_react29.useCallback)(() => {
+  const fileInputRef = (0, import_react32.useRef)(null);
+  const handleAvatarClick = (0, import_react32.useCallback)(() => {
     var _a;
     (_a = fileInputRef.current) == null ? void 0 : _a.click();
   }, []);
-  const handleFileChange = (0, import_react29.useCallback)(
+  const handleFileChange = (0, import_react32.useCallback)(
     (e) => {
       var _a;
       const file = (_a = e.target.files) == null ? void 0 : _a[0];
@@ -12083,9 +12710,9 @@ var AboutTab = ({
     [onDraftAvatarChange]
   );
   const resolvedPreview = draftAvatarPreview != null ? draftAvatarPreview : avatarPreview;
-  return /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)("div", { className: "flex flex-col gap-8", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)("div", { className: "flex justify-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { className: "flex flex-col gap-8", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { className: "flex justify-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
         "button",
         {
           type: "button",
@@ -12101,17 +12728,17 @@ var AboutTab = ({
             "overflow-hidden"
           ),
           "aria-label": labels.onboarding.profileSetup.uploadProfilePictureAria,
-          children: resolvedPreview ? /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
+          children: resolvedPreview ? /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
             RemoteImage,
             {
               src: resolvedPreview,
               alt: labels.onboarding.profileSetup.profilePreviewAlt,
               className: "h-full w-full object-cover"
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(ProfileIcon, { className: "h-8 w-8 text-agg-muted-foreground" })
+          ) : /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(ProfileIcon, { className: "h-8 w-8 text-agg-muted-foreground" })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
         "input",
         {
           ref: fileInputRef,
@@ -12123,8 +12750,8 @@ var AboutTab = ({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)("div", { className: "flex flex-col gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
         "label",
         {
           htmlFor: "profile-username",
@@ -12132,7 +12759,7 @@ var AboutTab = ({
           children: "Username"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
         "input",
         {
           id: "profile-username",
@@ -12154,12 +12781,12 @@ var AboutTab = ({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)("div", { className: "flex flex-col gap-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)("div", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("span", { className: "text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground", children: "Delete your profile" }),
-        /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("span", { className: "text-agg-sm leading-agg-5 text-agg-foreground", children: "This will permanently delete your account and all of its data. You will not be able to reactivate this account." })
+    /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { className: "flex flex-col gap-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("span", { className: "text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground", children: "Delete your profile" }),
+        /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("span", { className: "text-agg-sm leading-agg-5 text-agg-foreground", children: "This will permanently delete your account and all of its data. You will not be able to reactivate this account." })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
         "button",
         {
           type: "button",
@@ -12181,9 +12808,9 @@ var AboutTab = ({
 AboutTab.displayName = "AboutTab";
 
 // src/profile/tabs/accounts-wallets-tab.tsx
-var import_jsx_runtime119 = require("react/jsx-runtime");
-var SectionTitle = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("h3", { className: "text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground", children });
-var AccountRow = ({ children, className }) => /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+var import_jsx_runtime124 = require("react/jsx-runtime");
+var SectionTitle = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("h3", { className: "text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground", children });
+var AccountRow = ({ children, className }) => /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
   "div",
   {
     className: cn(
@@ -12195,7 +12822,7 @@ var AccountRow = ({ children, className }) => /* @__PURE__ */ (0, import_jsx_run
     children
   }
 );
-var ConnectTextButton = ({ onClick }) => /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+var ConnectTextButton = ({ onClick }) => /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
   "button",
   {
     type: "button",
@@ -12204,7 +12831,7 @@ var ConnectTextButton = ({ onClick }) => /* @__PURE__ */ (0, import_jsx_runtime1
     children: "Connect"
   }
 );
-var DisconnectTextButton = ({ onClick }) => /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+var DisconnectTextButton = ({ onClick }) => /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
   "button",
   {
     type: "button",
@@ -12229,19 +12856,19 @@ var AccountsWalletsTab = ({
   const twitter = socialAccounts == null ? void 0 : socialAccounts.twitter;
   const discord = socialAccounts == null ? void 0 : socialAccounts.discord;
   const telegram = socialAccounts == null ? void 0 : socialAccounts.telegram;
-  return /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)("div", { className: "flex flex-col gap-8", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)("div", { className: "flex flex-col gap-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(SectionTitle, { children: "Exchanges" }),
-      exchanges.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("p", { className: "text-agg-sm leading-agg-5 text-agg-muted-foreground", children: "No exchange accounts connected." }) : /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("div", { className: "flex flex-col gap-2", children: exchanges.map((account) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)("div", { className: "flex flex-col gap-8", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)("div", { className: "flex flex-col gap-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(SectionTitle, { children: "Exchanges" }),
+      exchanges.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("p", { className: "text-agg-sm leading-agg-5 text-agg-muted-foreground", children: "No exchange accounts connected." }) : /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("div", { className: "flex flex-col gap-2", children: exchanges.map((account) => {
         var _a;
         const displayName = (_a = venueLogoLabels[account.venue]) != null ? _a : account.venue;
-        return /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)(AccountRow, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)("div", { className: "flex items-center gap-3 min-w-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(VenueLogo, { venue: account.venue, size: "small" }),
-            /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("span", { className: "text-agg-base font-agg-normal leading-6 text-agg-foreground whitespace-nowrap", children: displayName }),
-            /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)("div", { className: "flex items-center gap-2 min-w-0", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("span", { className: "truncate text-agg-base font-agg-normal leading-6 text-agg-foreground", children: account.displayAddress }),
-              account.verified ? /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(AccountRow, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)("div", { className: "flex items-center gap-3 min-w-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(VenueLogo, { venue: account.venue, size: "small" }),
+            /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("span", { className: "text-agg-base font-agg-normal leading-6 text-agg-foreground whitespace-nowrap", children: displayName }),
+            /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)("div", { className: "flex items-center gap-2 min-w-0", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("span", { className: "truncate text-agg-base font-agg-normal leading-6 text-agg-foreground", children: account.displayAddress }),
+              account.verified ? /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
                 Icon,
                 {
                   name: "check-badge",
@@ -12251,39 +12878,39 @@ var AccountsWalletsTab = ({
               ) : null
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(DisconnectTextButton, { onClick: () => onDisconnectExchange(account.venue) })
+          /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(DisconnectTextButton, { onClick: () => onDisconnectExchange(account.venue) })
         ] }, account.venue);
       }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)("div", { className: "flex flex-col gap-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(SectionTitle, { children: "Social Accounts" }),
-      /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)("div", { className: "flex flex-col gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)(AccountRow, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)("div", { className: "flex items-center gap-3", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center text-agg-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(Icon, { name: "twitter", size: "small", color: "currentColor" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("span", { className: "text-agg-base font-agg-normal leading-6 text-agg-foreground whitespace-nowrap", children: "X (Twitter)" })
+    /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)("div", { className: "flex flex-col gap-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(SectionTitle, { children: "Social Accounts" }),
+      /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(AccountRow, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center text-agg-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(Icon, { name: "twitter", size: "small", color: "currentColor" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("span", { className: "text-agg-base font-agg-normal leading-6 text-agg-foreground whitespace-nowrap", children: "X (Twitter)" })
           ] }),
-          (twitter == null ? void 0 : twitter.connected) ? /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(DisconnectTextButton, { onClick: onDisconnectTwitter }) : /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(ConnectTextButton, { onClick: onConnectTwitter })
+          (twitter == null ? void 0 : twitter.connected) ? /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(DisconnectTextButton, { onClick: onDisconnectTwitter }) : /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(ConnectTextButton, { onClick: onConnectTwitter })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)(AccountRow, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)("div", { className: "flex items-center gap-3", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center text-[#5865F2]", children: /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(Icon, { name: "discord", size: "small", color: "currentColor" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("span", { className: "text-agg-base font-agg-normal leading-6 text-agg-foreground whitespace-nowrap", children: "Discord" })
+        /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(AccountRow, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center text-[#5865F2]", children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(Icon, { name: "discord", size: "small", color: "currentColor" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("span", { className: "text-agg-base font-agg-normal leading-6 text-agg-foreground whitespace-nowrap", children: "Discord" })
           ] }),
-          (discord == null ? void 0 : discord.connected) ? /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(DisconnectTextButton, { onClick: onDisconnectDiscord }) : /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(ConnectTextButton, { onClick: onConnectDiscord })
+          (discord == null ? void 0 : discord.connected) ? /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(DisconnectTextButton, { onClick: onDisconnectDiscord }) : /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(ConnectTextButton, { onClick: onConnectDiscord })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)(AccountRow, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)("div", { className: "flex items-center gap-3", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center text-[#26A5E4]", children: /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(Icon, { name: "telegram", size: "small", color: "currentColor" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("span", { className: "text-agg-base font-agg-normal leading-6 text-agg-foreground whitespace-nowrap", children: "Telegram" })
+        /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(AccountRow, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center text-[#26A5E4]", children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(Icon, { name: "telegram", size: "small", color: "currentColor" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("span", { className: "text-agg-base font-agg-normal leading-6 text-agg-foreground whitespace-nowrap", children: "Telegram" })
           ] }),
-          (telegram == null ? void 0 : telegram.connected) ? /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(DisconnectTextButton, { onClick: onDisconnectTelegram }) : /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(ConnectTextButton, { onClick: onConnectTelegram })
+          (telegram == null ? void 0 : telegram.connected) ? /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(DisconnectTextButton, { onClick: onDisconnectTelegram }) : /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(ConnectTextButton, { onClick: onConnectTelegram })
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)("div", { className: "flex flex-col gap-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(SectionTitle, { children: "Email Address" }),
-      /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)("div", { className: "flex flex-col gap-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(SectionTitle, { children: "Email Address" }),
+      /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(
         "button",
         {
           type: "button",
@@ -12295,11 +12922,11 @@ var AccountsWalletsTab = ({
             "cursor-pointer hover:bg-agg-secondary-hover"
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)("div", { className: "flex items-center gap-3", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center text-agg-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(Icon, { name: "email", size: "small", color: "currentColor" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("span", { className: "text-agg-base font-agg-normal leading-6 text-agg-foreground whitespace-nowrap", children: email != null ? email : "Connect email" })
+            /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)("div", { className: "flex items-center gap-3", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center text-agg-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(Icon, { name: "email", size: "small", color: "currentColor" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("span", { className: "text-agg-base font-agg-normal leading-6 text-agg-foreground whitespace-nowrap", children: email != null ? email : "Connect email" })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(Icon, { name: "chevron-right", size: "small", color: "currentColor" })
+            /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(Icon, { name: "chevron-right", size: "small", color: "currentColor" })
           ]
         }
       )
@@ -12309,7 +12936,7 @@ var AccountsWalletsTab = ({
 AccountsWalletsTab.displayName = "AccountsWalletsTab";
 
 // src/profile/index.tsx
-var import_jsx_runtime120 = require("react/jsx-runtime");
+var import_jsx_runtime125 = require("react/jsx-runtime");
 var ProfileModal = ({
   open,
   onOpenChange,
@@ -12329,15 +12956,15 @@ var ProfileModal = ({
   onDisconnectTelegram,
   onConnectEmail
 }) => {
-  const [activeTab, setActiveTab] = (0, import_react30.useState)(PROFILE_TAB_KEYS.ABOUT);
-  const [draftUsername, setDraftUsername] = (0, import_react30.useState)(username != null ? username : "");
-  const [draftAvatarFile, setDraftAvatarFile] = (0, import_react30.useState)();
-  const [draftAvatarPreview, setDraftAvatarPreview] = (0, import_react30.useState)();
-  const [isSaving, setIsSaving] = (0, import_react30.useState)(false);
-  (0, import_react30.useEffect)(() => {
+  const [activeTab, setActiveTab] = (0, import_react33.useState)(PROFILE_TAB_KEYS.ABOUT);
+  const [draftUsername, setDraftUsername] = (0, import_react33.useState)(username != null ? username : "");
+  const [draftAvatarFile, setDraftAvatarFile] = (0, import_react33.useState)();
+  const [draftAvatarPreview, setDraftAvatarPreview] = (0, import_react33.useState)();
+  const [isSaving, setIsSaving] = (0, import_react33.useState)(false);
+  (0, import_react33.useEffect)(() => {
     setDraftUsername(username != null ? username : "");
   }, [username]);
-  const handleOpenChange = (0, import_react30.useCallback)(
+  const handleOpenChange = (0, import_react33.useCallback)(
     (isOpen) => {
       if (!isOpen) {
         setActiveTab(PROFILE_TAB_KEYS.ABOUT);
@@ -12358,7 +12985,7 @@ var ProfileModal = ({
       setDraftAvatarPreview
     ]
   );
-  const handleDraftAvatarChange = (0, import_react30.useCallback)(
+  const handleDraftAvatarChange = (0, import_react33.useCallback)(
     (file, preview) => {
       setDraftAvatarFile(file);
       setDraftAvatarPreview(preview);
@@ -12366,7 +12993,7 @@ var ProfileModal = ({
     []
   );
   const hasChanges = draftUsername !== (username != null ? username : "") || draftAvatarFile !== void 0;
-  const handleSave = (0, import_react30.useCallback)(() => {
+  const handleSave = (0, import_react33.useCallback)(() => {
     setIsSaving(true);
     onSave({
       username: draftUsername || void 0,
@@ -12378,16 +13005,16 @@ var ProfileModal = ({
       onOpenChange(false);
     }, 500);
   }, [draftUsername, draftAvatarFile, draftAvatarPreview, onSave, onOpenChange]);
-  const handleCancel = (0, import_react30.useCallback)(() => {
+  const handleCancel = (0, import_react33.useCallback)(() => {
     handleOpenChange(false);
   }, [handleOpenChange]);
-  return /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(Modal, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)(Modal.Container, { maxWidth: "800px", "aria-label": "Edit Profile", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(Modal.Header, { title: "Edit Profile" }),
-    /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(Modal.Body, { children: /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("div", { className: "flex flex-col sm:flex-row sm:gap-10", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("div", { className: "shrink-0", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("div", { className: "flex gap-2 sm:hidden mb-6", children: PROFILE_TAB_ITEMS.map((tab) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(Modal, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(Modal.Container, { maxWidth: "800px", "aria-label": "Edit Profile", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(Modal.Header, { title: "Edit Profile" }),
+    /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(Modal.Body, { children: /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)("div", { className: "flex flex-col sm:flex-row sm:gap-10", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)("div", { className: "shrink-0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("div", { className: "flex gap-2 sm:hidden mb-6", children: PROFILE_TAB_ITEMS.map((tab) => {
           const isActive = activeTab === tab.value;
-          return /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(
             "button",
             {
               type: "button",
@@ -12400,14 +13027,14 @@ var ProfileModal = ({
                 isActive ? "font-agg-normal text-agg-foreground bg-agg-secondary-hover border-agg-primary" : "font-agg-normal text-agg-foreground border-transparent"
               ),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(Icon, { name: tab.icon, size: "small", color: "currentColor" }),
-                /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("span", { className: "whitespace-nowrap", children: tab.label })
+                /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(Icon, { name: tab.icon, size: "small", color: "currentColor" }),
+                /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("span", { className: "whitespace-nowrap", children: tab.label })
               ]
             },
             tab.value
           );
         }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
           "nav",
           {
             className: cn(
@@ -12422,7 +13049,7 @@ var ProfileModal = ({
             "aria-label": "Profile sections",
             children: PROFILE_TAB_ITEMS.map((tab) => {
               const isActive = activeTab === tab.value;
-              return /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)(
+              return /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(
                 "button",
                 {
                   type: "button",
@@ -12437,9 +13064,9 @@ var ProfileModal = ({
                     isActive ? "font-agg-normal text-agg-foreground bg-agg-secondary-hover" : "font-agg-normal text-agg-foreground"
                   ),
                   children: [
-                    isActive ? /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("div", { className: "absolute left-0 top-0 bottom-0 w-1 bg-agg-primary" }) : null,
-                    /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(Icon, { name: tab.icon, size: "small", color: "currentColor" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("span", { className: "shrink-0 whitespace-nowrap", children: tab.label })
+                    isActive ? /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("div", { className: "absolute left-0 top-0 bottom-0 w-1 bg-agg-primary" }) : null,
+                    /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(Icon, { name: tab.icon, size: "small", color: "currentColor" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("span", { className: "shrink-0 whitespace-nowrap", children: tab.label })
                   ]
                 },
                 tab.value
@@ -12448,8 +13075,8 @@ var ProfileModal = ({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("div", { className: "min-w-0 flex-1", children: [
-        activeTab === PROFILE_TAB_KEYS.ABOUT ? /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)("div", { className: "min-w-0 flex-1", children: [
+        activeTab === PROFILE_TAB_KEYS.ABOUT ? /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
           AboutTab,
           {
             username,
@@ -12462,7 +13089,7 @@ var ProfileModal = ({
             draftAvatarPreview
           }
         ) : null,
-        activeTab === PROFILE_TAB_KEYS.ACCOUNTS_WALLETS ? /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+        activeTab === PROFILE_TAB_KEYS.ACCOUNTS_WALLETS ? /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
           AccountsWalletsTab,
           {
             exchanges,
@@ -12480,9 +13107,9 @@ var ProfileModal = ({
         ) : null
       ] })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)(Modal.Footer, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(Button, { variant: "secondary", size: "large", onClick: handleCancel, className: "min-w-[120px]", children: "Cancel" }),
-      /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(Modal.Footer, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(Button, { variant: "secondary", size: "large", onClick: handleCancel, className: "min-w-[120px]", children: "Cancel" }),
+      /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
         Button,
         {
           variant: "primary",
@@ -12621,9 +13248,11 @@ var placeOrderViewModelSchema = import_zod3.z.object({
   LinkAccountsIcon,
   LoadingIcon,
   MarketDetails,
+  MarketDetailsList,
   Modal,
   NumberValue,
   OnboardingModal,
+  OnrampModal,
   PencilIcon,
   PlaceOrder,
   PlaySquareIcon,