@agg-market/ui 7.0.0 → 9.0.0

package/dist/{chunk-KQKLLL4D.mjs → chunk-3U4VHAP6.mjs}

@@ -1,22 +1,19 @@
 import {
-  InlineAlert
-} from "./chunk-OAJBTVZT.mjs";
-import {
+  Button,
   Card,
+  Icon,
+  InlineAlert,
+  RemoteImage,
   Skeleton,
   Tabs,
-  skeletonViews
-} from "./chunk-EERL6BZF.mjs";
-import {
-  Button,
-  Icon,
   VenueLogo,
   __spreadProps,
   __spreadValues,
   cn,
   formatUsd,
-  getMotionClassName
-} from "./chunk-MUB7NYWZ.mjs";
+  getMotionClassName,
+  skeletonViews
+} from "./chunk-3G7C6WEC.mjs";
 
 // src/trading/utils.ts
 import { resolveAggUiLabels } from "@agg-market/hooks";
@@ -209,7 +206,7 @@ var PlaceOrder = ({
       /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-5", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
           marketImageUrl ? /* @__PURE__ */ jsx(
-            "img",
+            RemoteImage,
             {
               src: marketImageUrl,
               alt: "",

package/dist/{chunk-6I474QXG.mjs → chunk-6CRY27SQ.mjs}

@@ -1,44 +1,41 @@
 import {
   Badge,
-  LineChart,
-  StateMessage,
-  SwitchButton,
-  Typography
-} from "./chunk-ZYUJ7YEJ.mjs";
-import {
+  Button,
   Card,
+  Icon,
+  LineChart,
   MarketDetailsOderbookSkeleton,
+  RemoteImage,
   Skeleton,
+  StateMessage,
+  SwitchButton,
   Tabs,
+  Typography,
+  VenueLogo,
+  __objRest,
+  __spreadProps,
+  __spreadValues,
   baseCardClassName,
+  cn,
   detailsBaseCardClassName,
   eventListItemDetailsTimeRanges,
   fallbackLineColors,
   getMarketDetailsTabs,
+  getMotionClassName,
   lineColorByVenue,
   marketDetailsBaseCardClassName,
   marketDetailsDefaultIsOpened,
-  orderBookRowLimitDefault
-} from "./chunk-EERL6BZF.mjs";
-import {
-  Button,
-  Icon,
-  VenueLogo,
-  __objRest,
-  __spreadProps,
-  __spreadValues,
-  cn,
-  getMotionClassName,
+  orderBookRowLimitDefault,
   toDate
-} from "./chunk-MUB7NYWZ.mjs";
+} from "./chunk-3G7C6WEC.mjs";
 
 // src/events/item/index.tsx
 import dayjs from "dayjs";
 import { useMemo } from "react";
 import {
-  useEvent,
   useLabels,
-  useSdkUiConfig
+  useSdkUiConfig,
+  useVenueEvent
 } from "@agg-market/hooks";
 
 // src/shared/query-error.ts
@@ -56,10 +53,7 @@ var isErrorWithStatus = (error, status) => {
 var resolveEventListItemEvent = (fetchedEvent) => {
   if (!fetchedEvent)
     return void 0;
-  const mergedVenueMarkets = fetchedEvent.markets.flatMap(
-    (market) => market.venueMarkets
-  );
-  if (mergedVenueMarkets.length === 0)
+  if (!fetchedEvent.venueMarkets || fetchedEvent.venueMarkets.length === 0)
     return void 0;
   return fetchedEvent;
 };
@@ -256,8 +250,8 @@ var EventListItemContent = ({
   const config = useSdkUiConfig();
   const labels = useLabels();
   const allVenueMarkets = useMemo(() => {
-    return event.markets.flatMap((market) => market.venueMarkets);
-  }, [event.markets]);
+    return event.venueMarkets;
+  }, [event.venueMarkets]);
   const primaryVenueMarket = useMemo(() => {
     return selectPrimaryVenueMarket(allVenueMarkets);
   }, [allVenueMarkets]);
@@ -313,7 +307,7 @@ var EventListItemContent = ({
       children: [
         /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-3", classNames == null ? void 0 : classNames.header), children: [
           resolvedImage ? /* @__PURE__ */ jsx(
-            "img",
+            RemoteImage,
             {
               src: resolvedImage,
               alt: "",
@@ -439,7 +433,8 @@ var EventListItemByEventId = (_a) => {
     error,
     isError,
     isLoading
-  } = useEvent(eventId, {
+  } = useVenueEvent({
+    eventId: eventId != null ? eventId : "",
     enabled: !!eventId
   });
   const resolvedEvent = useMemo(() => {
@@ -476,7 +471,7 @@ EventListItem.displayName = "EventListItem";
 
 // src/events/item-details/index.tsx
 import { useEffect, useMemo as useMemo3, useState } from "react";
-import { useEvent as useEvent2, useLabels as useLabels3, usePriceHistory, useSdkUiConfig as useSdkUiConfig2 } from "@agg-market/hooks";
+import { useLabels as useLabels3, usePriceHistory, useSdkUiConfig as useSdkUiConfig2, useVenueEvent as useVenueEvent2 } from "@agg-market/hooks";
 
 // src/primitives/chart/chart-type-switch.tsx
 import { useLabels as useLabels2 } from "@agg-market/hooks";
@@ -1098,13 +1093,12 @@ var EventListItemDetailsContent = ({
   ariaLabel,
   defaultTimeRange
 }) => {
-  var _a, _b;
   const config = useSdkUiConfig2();
   const labels = useLabels3();
   const venueMarkets = useMemo3(() => {
-    var _a2, _b2, _c;
-    return (_c = (_b2 = (_a2 = event.markets) == null ? void 0 : _a2[0]) == null ? void 0 : _b2.venueMarkets) != null ? _c : [];
-  }, [event.markets]);
+    var _a;
+    return (_a = event.venueMarkets) != null ? _a : [];
+  }, [event.venueMarkets]);
   const primaryVenueMarket = useMemo3(() => {
     return selectPrimaryVenueMarket(venueMarkets);
   }, [venueMarkets]);
@@ -1142,9 +1136,9 @@ var EventListItemDetailsContent = ({
     if (outcomeLabels.length === 0)
       return void 0;
     return [...outcomeLabels].sort((left, right) => {
-      var _a2, _b2;
-      const leftProbability = (_a2 = probabilityByLabel.get(left)) != null ? _a2 : -1;
-      const rightProbability = (_b2 = probabilityByLabel.get(right)) != null ? _b2 : -1;
+      var _a, _b;
+      const leftProbability = (_a = probabilityByLabel.get(left)) != null ? _a : -1;
+      const rightProbability = (_b = probabilityByLabel.get(right)) != null ? _b : -1;
       return rightProbability - leftProbability;
     })[0];
   }, [outcomeLabels, probabilityByLabel]);
@@ -1160,18 +1154,18 @@ var EventListItemDetailsContent = ({
     setSelectedOutcomeLabel(fallbackOutcomeLabel);
   }, [isDateOutcomeMarket, mainOutcomeLabel, outcomeLabels, selectedOutcomeLabel]);
   const switchLabels = useMemo3(() => {
-    var _a2, _b2;
+    var _a, _b;
     if (isDateOutcomeMarket) {
       return [labels.eventItemDetails.yes, labels.eventItemDetails.no];
     }
     const sortedOutcomeLabels = [...outcomeLabels].sort((left, right) => {
-      var _a3, _b3;
-      const leftProbability = (_a3 = probabilityByLabel.get(left)) != null ? _a3 : -1;
-      const rightProbability = (_b3 = probabilityByLabel.get(right)) != null ? _b3 : -1;
+      var _a2, _b2;
+      const leftProbability = (_a2 = probabilityByLabel.get(left)) != null ? _a2 : -1;
+      const rightProbability = (_b2 = probabilityByLabel.get(right)) != null ? _b2 : -1;
       return rightProbability - leftProbability;
     });
-    const firstLabel = (_a2 = sortedOutcomeLabels[0]) != null ? _a2 : labels.eventItemDetails.yes;
-    const secondLabel = (_b2 = sortedOutcomeLabels.find((label) => label !== firstLabel)) != null ? _b2 : firstLabel;
+    const firstLabel = (_a = sortedOutcomeLabels[0]) != null ? _a : labels.eventItemDetails.yes;
+    const secondLabel = (_b = sortedOutcomeLabels.find((label) => label !== firstLabel)) != null ? _b : firstLabel;
     return [firstLabel, secondLabel];
   }, [
     isDateOutcomeMarket,
@@ -1181,8 +1175,8 @@ var EventListItemDetailsContent = ({
     probabilityByLabel
   ]);
   const volumeLabel = useMemo3(() => {
-    var _a2;
-    const resolvedVolume = typeof event.volume === "number" ? event.volume : (_a2 = primaryVenueMarket == null ? void 0 : primaryVenueMarket.volume) != null ? _a2 : void 0;
+    var _a;
+    const resolvedVolume = typeof event.volume === "number" ? event.volume : (_a = primaryVenueMarket == null ? void 0 : primaryVenueMarket.volume) != null ? _a : void 0;
     if (typeof resolvedVolume !== "number")
       return "";
     return `${config.formatCompactCurrency(resolvedVolume)} ${labels.eventItemDetails.volumeSuffix}`;
@@ -1206,7 +1200,7 @@ var EventListItemDetailsContent = ({
             ),
             children: [
               resolvedImage ? /* @__PURE__ */ jsx3(
-                "img",
+                RemoteImage,
                 {
                   src: resolvedImage,
                   alt: "",
@@ -1280,7 +1274,7 @@ var EventListItemDetailsContent = ({
           EventListItemDetailsGraphSection,
           {
             venueMarkets,
-            canonicalMarketId: (_b = (_a = event.markets) == null ? void 0 : _a[0]) == null ? void 0 : _b.id,
+            canonicalMarketId: event.id,
             selectedOutcomeLabel,
             onSelectedOutcomeLabelChange: setSelectedOutcomeLabel,
             switchLabels,
@@ -1335,7 +1329,8 @@ var EventListItemDetailsByEventId = (_a) => {
     error,
     isError,
     isLoading
-  } = useEvent2(eventId, {
+  } = useVenueEvent2({
+    eventId: eventId != null ? eventId : "",
     enabled: !!eventId
   });
   const resolvedEvent = useMemo3(() => {
@@ -1416,11 +1411,11 @@ EventListItemDetails.displayName = "EventListItemDetails";
 // src/events/market-details/index.tsx
 import { useEffect as useEffect2, useId, useMemo as useMemo4, useState as useState2 } from "react";
 import {
-  useEvent as useEvent3,
   useLabels as useLabels4,
   useOrderBook,
   usePriceHistory as usePriceHistory2,
-  useSdkUiConfig as useSdkUiConfig3
+  useSdkUiConfig as useSdkUiConfig3,
+  useVenueEvent as useVenueEvent3
 } from "@agg-market/hooks";
 
 // src/events/market-details/market-details.utils.ts
@@ -1453,11 +1448,41 @@ var resolveInitialTab = (defaultTab) => {
   return "order-book";
 };
 var resolveMarket = (event, marketId) => {
-  if (!event.markets.length)
+  var _a, _b, _c, _d, _e;
+  if (!event.venueMarkets || event.venueMarkets.length === 0)
+    return void 0;
+  if (!marketId) {
+    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
+    };
+  }
+  const venueMarkets = event.venueMarkets;
+  const matchedVenueMarket = venueMarkets.find((vm) => vm.id === marketId);
+  if (!matchedVenueMarket)
     return void 0;
-  if (!marketId)
-    return event.markets[0];
-  return event.markets.find((market) => market.id === marketId);
+  const siblingVenueMarkets = venueMarkets.filter(
+    (vm) => vm.question === matchedVenueMarket.question
+  );
+  const totalVolume = siblingVenueMarkets.reduce((sum, vm) => {
+    return sum + (typeof vm.volume === "number" ? vm.volume : 0);
+  }, 0);
+  return {
+    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
+  };
 };
 var resolveDisplayOutcomeLabels = (labels) => {
   if (!hasBinaryLabels(labels))
@@ -1790,7 +1815,8 @@ var MarketDetailsContent = ({
   orderBookDepth = orderBookRowLimitDefault,
   ariaLabel,
   classNames,
-  otherContent
+  otherContent,
+  liveUpdate = false
 }) => {
   const config = useSdkUiConfig3();
   const labels = useLabels4();
@@ -1893,9 +1919,9 @@ var MarketDetailsContent = ({
     return selectedOutcomesByVenue.map(({ market, outcome }) => ({
       market,
       outcome,
-      liveUpdate: true
+      liveUpdate
     }));
-  }, [selectedOutcomesByVenue]);
+  }, [selectedOutcomesByVenue, liveUpdate]);
   const {
     data: orderBookData,
     isLoading: isOrderBookLoading,
@@ -1903,7 +1929,8 @@ var MarketDetailsContent = ({
     results: orderBookResults
   } = useOrderBook({
     orderbooks: orderBookInputs,
-    enabled: isOpened && selectedTab === "order-book" && orderBookInputs.length > 0
+    enabled: isOpened && selectedTab === "order-book" && orderBookInputs.length > 0,
+    canonicalMarketId: liveUpdate ? canonicalMarketIdForHistory : void 0
   });
   const askRows = useMemo4(() => {
     return resolveOrderBookRows({
@@ -1994,7 +2021,7 @@ var MarketDetailsContent = ({
       return [];
     return resolveOtherTabRows(model.market, labels);
   }, [labels, model]);
-  const isOrderBookNotFound = isErrorWithStatus(orderBookError, 404);
+  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 handleOutcomeKeyDown = (eventToHandle) => {
@@ -2076,7 +2103,7 @@ var MarketDetailsContent = ({
             children: [
               /* @__PURE__ */ jsxs3("div", { className: "flex min-w-52 items-center gap-3 md:gap-4", children: [
                 model.image ? /* @__PURE__ */ jsx4(
-                  "img",
+                  RemoteImage,
                   {
                     src: model.image,
                     alt: "",
@@ -2358,7 +2385,7 @@ var MarketDetailsContent = ({
   );
 };
 var MarketDetails = (props) => {
-  var _a;
+  var _a, _b;
   const [uncontrolledIsOpened, setUncontrolledIsOpened] = useState2(
     (_a = props.defaultIsOpened) != null ? _a : marketDetailsDefaultIsOpened
   );
@@ -2380,7 +2407,8 @@ var MarketDetails = (props) => {
     event: fetchedEvent,
     error: eventError,
     isLoading: isFetchingEvent
-  } = useEvent3(hasEventProp ? void 0 : props.eventId, {
+  } = useVenueEvent3({
+    eventId: hasEventProp ? "" : (_b = props.eventId) != null ? _b : "",
     enabled: !props.isLoading && !hasEventProp && !!props.eventId
   });
   if (props.isLoading) {
@@ -2432,7 +2460,7 @@ MarketDetails.displayName = "MarketDetails";
 
 // src/events/list/index.tsx
 import { useCallback, useEffect as useEffect3, useMemo as useMemo5, useRef, useState as useState3 } from "react";
-import { useEvents, useLabels as useLabels5 } from "@agg-market/hooks";
+import { useVenueEvents, useLabels as useLabels5 } from "@agg-market/hooks";
 
 // src/events/list/event-list.constants.ts
 var POLYMARKET_VENUE = "polymarket";
@@ -2463,8 +2491,7 @@ var getDefaultEventListTabs = (labels) => {
 
 // src/events/list/event-list.utils.ts
 var mapEventToEventListItemEvent = (event) => {
-  const mergedVenueMarkets = event.markets.flatMap((m) => m.venueMarkets);
-  if (mergedVenueMarkets.length === 0)
+  if (!event.venueMarkets || event.venueMarkets.length === 0)
     return null;
   return event;
 };
@@ -2556,7 +2583,7 @@ var EventList = ({
   }, [maxVisibleItems]);
   const requestLimit = resolvedMaxVisibleItems != null ? resolvedMaxVisibleItems : limit;
   const shouldPaginate = resolvedMaxVisibleItems == null;
-  const { events, isLoading, isError, fetchNextPage, hasNextPage, isFetchingNextPage } = useEvents({
+  const { events, isLoading, isError, fetchNextPage, hasNextPage, isFetchingNextPage } = useVenueEvents({
     venues,
     search,
     categoryIds,

package/dist/{chunk-L5U7RGJV.mjs → chunk-HJ4UPYM7.mjs}

@@ -3,27 +3,24 @@ import {
   EventListItemDetails,
   MarketDetails,
   isErrorWithStatus
-} from "./chunk-6I474QXG.mjs";
-import {
-  StateMessage,
-  Typography
-} from "./chunk-ZYUJ7YEJ.mjs";
+} from "./chunk-6CRY27SQ.mjs";
 import {
   PlaceOrder,
   Settlement
-} from "./chunk-KQKLLL4D.mjs";
-import {
-  Card,
-  Tabs
-} from "./chunk-EERL6BZF.mjs";
+} from "./chunk-3U4VHAP6.mjs";
 import {
   Button,
+  Card,
   Icon,
+  RemoteImage,
+  StateMessage,
+  Tabs,
+  Typography,
   VenueLogo,
   __spreadProps,
   __spreadValues,
   cn
-} from "./chunk-MUB7NYWZ.mjs";
+} from "./chunk-3G7C6WEC.mjs";
 
 // src/pages/home/index.tsx
 import { useEffect, useMemo, useState } from "react";
@@ -291,7 +288,7 @@ HomePage.displayName = "HomePage";
 
 // src/pages/event-market/index.tsx
 import { useEffect as useEffect2, useMemo as useMemo2, useState as useState2 } from "react";
-import { useEvent, useLabels as useLabels2 } from "@agg-market/hooks";
+import { useVenueEvent, useLabels as useLabels2 } from "@agg-market/hooks";
 import dayjs from "dayjs";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var getMarketDateValue = (market, fallbackIndex) => {
@@ -307,29 +304,29 @@ var getMarketDateValue = (market, fallbackIndex) => {
 };
 var resolveHeroMarketId = (event, heroMarketId) => {
   var _a, _b;
-  if (!((_a = event == null ? void 0 : event.markets) == null ? void 0 : _a.length))
+  if (!((_a = event == null ? void 0 : event.venueMarkets) == null ? void 0 : _a.length))
     return void 0;
   if (heroMarketId) {
-    const matchingHeroMarket = event.markets.find(
+    const matchingHeroMarket = event.venueMarkets.find(
       (market) => market.id === heroMarketId
     );
     if (matchingHeroMarket)
       return matchingHeroMarket.id;
   }
-  return (_b = event.markets[0]) == null ? void 0 : _b.id;
+  return (_b = event.venueMarkets[0]) == null ? void 0 : _b.id;
 };
 var buildHeroEvent = (event, heroMarketId) => {
   if (!heroMarketId)
     return void 0;
-  const heroMarket = event.markets.find((market) => market.id === heroMarketId);
+  const heroMarket = event.venueMarkets.find((market) => market.id === heroMarketId);
   if (!heroMarket)
     return void 0;
   return __spreadProps(__spreadValues({}, event), {
-    markets: [heroMarket]
+    venueMarkets: [heroMarket]
   });
 };
 var resolveDetailedMarkets = (event, heroMarketId) => {
-  return event.markets.filter((market) => market.id !== heroMarketId).map((market, index) => ({
+  return event.venueMarkets.filter((market) => market.id !== heroMarketId).map((market, index) => ({
     market,
     index
   })).sort(
@@ -487,7 +484,7 @@ var EventMarketPageContent = ({
     }
     onExpandedMarketChange == null ? void 0 : onExpandedMarketChange(nextExpandedMarketId);
   };
-  if (!heroEvent || !event.markets.length) {
+  if (!heroEvent || !event.venueMarkets.length) {
     return /* @__PURE__ */ jsx2(EventMarketPageUnavailableState, { ariaLabel });
   }
   return /* @__PURE__ */ jsx2("section", { className: cn("w-full", classNames == null ? void 0 : classNames.root), "aria-label": ariaLabel != null ? ariaLabel : event.title, children: /* @__PURE__ */ jsxs2(
@@ -535,12 +532,14 @@ var EventMarketPageContent = ({
   ) });
 };
 var EventMarketPage = (props) => {
+  var _a;
   const hasEventProp = "event" in props && !!props.event;
   const {
     event: fetchedEvent,
     error: eventError,
     isLoading: isFetchingEvent
-  } = useEvent(hasEventProp ? void 0 : props.eventId, {
+  } = useVenueEvent({
+    eventId: hasEventProp ? "" : (_a = props.eventId) != null ? _a : "",
     enabled: !props.isLoading && !hasEventProp && !!props.eventId
   });
   if (props.isLoading) {
@@ -720,7 +719,7 @@ var ActivityRow = ({ activity, onClick }) => {
           /* @__PURE__ */ jsx5(VenueLogo, { venue: activity.venue, size: "small", className: "shrink-0" }),
           /* @__PURE__ */ jsxs5("div", { className: "flex min-w-0 flex-1 items-center gap-4", children: [
             /* @__PURE__ */ jsx5(
-              "img",
+              RemoteImage,
               {
                 src: activity.thumbnailSrc,
                 alt: "",
@@ -832,7 +831,7 @@ var PositionRow = ({ position, onClick }) => {
           /* @__PURE__ */ jsx7(VenueLogo, { venue: position.venue, size: "small", className: "shrink-0" }),
           /* @__PURE__ */ jsxs7("div", { className: "flex min-w-0 flex-1 items-center gap-4", children: [
             /* @__PURE__ */ jsx7(
-              "img",
+              RemoteImage,
               {
                 src: position.thumbnailSrc,
                 alt: "",
@@ -1059,7 +1058,7 @@ var UserInfoCard = ({
       ),
       children: /* @__PURE__ */ jsxs10("div", { className: "flex w-full items-start gap-5", children: [
         /* @__PURE__ */ jsx10("div", { className: "shrink-0", children: user.avatarUrl ? /* @__PURE__ */ jsx10(
-          "img",
+          RemoteImage,
           {
             src: user.avatarUrl,
             alt: user.username,

package/dist/{chunk-AVHMI47G.mjs → chunk-N7U7QCSB.mjs}

@@ -1,6 +1,3 @@
-import {
-  Modal
-} from "./chunk-EEQPPN7N.mjs";
 import {
   BankIcon,
   BestPricesIcon,
@@ -16,8 +13,10 @@ import {
   ExternalLinkIcon,
   Icon,
   LinkAccountsIcon,
+  Modal,
   PlaySquareIcon,
   ProfileIcon,
+  RemoteImage,
   Select,
   StayInControlIcon,
   VenueLogo,
@@ -29,7 +28,7 @@ import {
   formatAmountDisplay,
   formatCompactUsd,
   venueLogoLabels
-} from "./chunk-MUB7NYWZ.mjs";
+} from "./chunk-3G7C6WEC.mjs";
 
 // src/deposit/index.tsx
 import { useState as useState3 } from "react";
@@ -1275,7 +1274,7 @@ var ProfileSetupStep = ({ onContinue }) => {
             ),
             "aria-label": labels.onboarding.profileSetup.uploadProfilePictureAria,
             children: avatarPreview ? /* @__PURE__ */ jsx13(
-              "img",
+              RemoteImage,
               {
                 src: avatarPreview,
                 alt: labels.onboarding.profileSetup.profilePreviewAlt,
@@ -2000,7 +1999,7 @@ var AboutTab = ({
           ),
           "aria-label": labels.onboarding.profileSetup.uploadProfilePictureAria,
           children: resolvedPreview ? /* @__PURE__ */ jsx18(
-            "img",
+            RemoteImage,
             {
               src: resolvedPreview,
               alt: labels.onboarding.profileSetup.profilePreviewAlt,