@agg-market/ui 6.0.0 → 8.0.0

package/dist/{chunk-LMOJKJOY.mjs → chunk-TLFRGJ5B.mjs}

@@ -1,36 +1,33 @@
 import {
   Badge,
-  LineChart,
-  StateMessage,
-  SwitchButton,
-  Typography
-} from "./chunk-CN7GI2RJ.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-UBBOLLOS.mjs";
-import {
-  Button,
-  Icon,
-  VenueLogo,
-  __objRest,
-  __spreadProps,
-  __spreadValues,
-  cn,
-  getMotionClassName,
+  orderBookRowLimitDefault,
   toDate
-} from "./chunk-HI4EEDN5.mjs";
+} from "./chunk-WKY3IN52.mjs";
 
 // src/events/item/index.tsx
 import dayjs from "dayjs";
@@ -313,7 +310,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: "",
@@ -475,8 +472,88 @@ var EventListItem = (props) => {
 EventListItem.displayName = "EventListItem";
 
 // src/events/item-details/index.tsx
-import { useEffect, useMemo as useMemo2, useState } from "react";
-import { useEvent as useEvent2, useLabels as useLabels2, usePriceHistory, useSdkUiConfig as useSdkUiConfig2 } from "@agg-market/hooks";
+import { useEffect, useMemo as useMemo3, useState } from "react";
+import { useEvent as useEvent2, useLabels as useLabels3, usePriceHistory, useSdkUiConfig as useSdkUiConfig2 } from "@agg-market/hooks";
+
+// src/primitives/chart/chart-type-switch.tsx
+import { useLabels as useLabels2 } from "@agg-market/hooks";
+import { useMemo as useMemo2 } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var ChartTypeSwitch = ({
+  value,
+  onValueChange,
+  className
+}) => {
+  const labels = useLabels2();
+  const options = useMemo2(
+    () => [
+      {
+        value: "line",
+        iconName: "chart-line",
+        ariaLabel: labels.common.lineChartType
+      },
+      {
+        value: "candlestick",
+        iconName: "chart-candlestick",
+        ariaLabel: labels.common.candlestickChartType
+      }
+    ],
+    [labels]
+  );
+  const handleKeyDown = (event, index) => {
+    if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") {
+      return;
+    }
+    event.preventDefault();
+    const direction = event.key === "ArrowRight" ? 1 : -1;
+    const nextIndex = (index + direction + options.length) % options.length;
+    const nextOption = options[nextIndex];
+    if (!nextOption || nextOption.value === value) {
+      return;
+    }
+    onValueChange(nextOption.value);
+  };
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      className: cn("inline-flex items-center gap-2", className),
+      role: "tablist",
+      "aria-label": labels.common.chartTypeSwitchAria,
+      children: options.map((option, index) => {
+        const isActive = option.value === value;
+        return /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            role: "tab",
+            "aria-selected": isActive,
+            "aria-label": option.ariaLabel,
+            tabIndex: isActive ? 0 : -1,
+            className: cn(
+              "cursor-pointer hover:text-agg-foreground",
+              "inline-flex size-5 items-center justify-center rounded-agg-sm bg-transparent p-0",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-agg-primary focus-visible:ring-offset-2 focus-visible:ring-offset-agg-background",
+              "transition-colors duration-200 ease-in-out",
+              isActive ? "text-agg-foreground" : "text-agg-muted-foreground"
+            ),
+            onClick: () => {
+              if (isActive) {
+                return;
+              }
+              onValueChange(option.value);
+            },
+            onKeyDown: (event) => {
+              handleKeyDown(event, index);
+            },
+            children: /* @__PURE__ */ jsx2(Icon, { name: option.iconName, color: "currentColor", className: "h-5 w-5" })
+          },
+          option.value
+        );
+      })
+    }
+  );
+};
+ChartTypeSwitch.displayName = "ChartTypeSwitch";
 
 // src/events/item-details/event-list-item-details.utils.ts
 import dayjs2 from "dayjs";
@@ -604,13 +681,13 @@ var resolveSeriesColor = (venue, index) => {
 };
 
 // src/events/item-details/index.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var EventListItemDetailsLoadingState = ({
   classNames,
   ariaLabel
 }) => {
-  const labels = useLabels2();
-  return /* @__PURE__ */ jsx2(
+  const labels = useLabels3();
+  return /* @__PURE__ */ jsx3(
     Skeleton,
     {
       view: "event-list-item-details",
@@ -623,16 +700,16 @@ var EventListItemDetailsUnavailableState = ({
   classNames,
   ariaLabel
 }) => {
-  const labels = useLabels2();
-  return /* @__PURE__ */ jsx2(
+  const labels = useLabels3();
+  return /* @__PURE__ */ jsx3(
     Card,
     {
       className: cn(detailsBaseCardClassName, classNames == null ? void 0 : classNames.root),
       role: "status",
       "aria-label": ariaLabel != null ? ariaLabel : labels.eventItemDetails.unavailableAria,
       children: /* @__PURE__ */ jsxs2("div", { className: cn("flex flex-col gap-1", classNames == null ? void 0 : classNames.header), children: [
-        /* @__PURE__ */ jsx2(Typography, { variant: "body-large-strong", className: cn("truncate", classNames == null ? void 0 : classNames.title), children: labels.eventItemDetails.unavailableTitle }),
-        /* @__PURE__ */ jsx2(Typography, { variant: "body", className: "text-agg-muted-foreground", children: labels.eventItemDetails.unavailableDescription })
+        /* @__PURE__ */ jsx3(Typography, { variant: "body-large-strong", className: cn("truncate", classNames == null ? void 0 : classNames.title), children: labels.eventItemDetails.unavailableTitle }),
+        /* @__PURE__ */ jsx3(Typography, { variant: "body", className: "text-agg-muted-foreground", children: labels.eventItemDetails.unavailableDescription })
       ] })
     }
   );
@@ -641,8 +718,8 @@ var EventListItemDetailsNotFoundState = ({
   classNames,
   ariaLabel
 }) => {
-  const labels = useLabels2();
-  return /* @__PURE__ */ jsx2(Card, { className: cn(detailsBaseCardClassName, classNames == null ? void 0 : classNames.root), children: /* @__PURE__ */ jsx2(
+  const labels = useLabels3();
+  return /* @__PURE__ */ jsx3(Card, { className: cn(detailsBaseCardClassName, classNames == null ? void 0 : classNames.root), children: /* @__PURE__ */ jsx3(
     StateMessage,
     {
       ariaLabel: ariaLabel != null ? ariaLabel : labels.eventItemDetails.notFoundAria,
@@ -687,12 +764,13 @@ var EventListItemDetailsGraphSection = ({
   showVenueLogo,
   venueInfo,
   formatPercent,
-  selectedTimeRange
+  selectedTimeRange,
+  selectedChartType
 }) => {
-  const labels = useLabels2();
+  const labels = useLabels3();
   const [selectedVenue, setSelectedVenue] = useState(null);
   const [activeProbabilityMode, setActiveProbabilityMode] = useState("yes");
-  const probabilityModeConfigs = useMemo2(() => {
+  const probabilityModeConfigs = useMemo3(() => {
     if (isDateOutcomeMarket) {
       return {
         yes: {
@@ -720,7 +798,7 @@ var EventListItemDetailsGraphSection = ({
       }
     };
   }, [isDateOutcomeMarket, selectedOutcomeLabel, switchLabels]);
-  const selectedOutcomesByMode = useMemo2(() => {
+  const selectedOutcomesByMode = useMemo3(() => {
     return {
       yes: resolveOutcomesByVenue(venueMarkets, probabilityModeConfigs.yes.sourceOutcomeLabel),
       no: resolveOutcomesByVenue(venueMarkets, probabilityModeConfigs.no.sourceOutcomeLabel)
@@ -737,7 +815,7 @@ var EventListItemDetailsGraphSection = ({
     const nextMode = selectedOutcomeLabel === probabilityModeConfigs.no.sourceOutcomeLabel ? "no" : "yes";
     setActiveProbabilityMode(nextMode);
   }, [isDateOutcomeMarket, probabilityModeConfigs.no.sourceOutcomeLabel, selectedOutcomeLabel]);
-  const normalizedVenueDataByMode = useMemo2(() => {
+  const normalizedVenueDataByMode = useMemo3(() => {
     const buildModeData = (mode) => {
       const modeConfig = probabilityModeConfigs[mode];
       return selectedOutcomesByMode[mode].map((outcomeByVenue, index) => {
@@ -758,7 +836,7 @@ var EventListItemDetailsGraphSection = ({
       no: buildModeData("no")
     };
   }, [labels, probabilityModeConfigs, selectedOutcomesByMode, venueInfo]);
-  const allOutcomesForHistory = useMemo2(() => {
+  const allOutcomesForHistory = useMemo3(() => {
     const outcomeByModeAndId = /* @__PURE__ */ new Map();
     probabilityModeOrder.forEach((mode) => {
       selectedOutcomesByMode[mode].forEach((outcomeByVenue) => {
@@ -770,10 +848,10 @@ var EventListItemDetailsGraphSection = ({
     });
     return [...outcomeByModeAndId.values()];
   }, [selectedOutcomesByMode]);
-  const priceHistoryGroups = useMemo2(() => {
+  const priceHistoryGroups = useMemo3(() => {
     return buildPriceHistoryGroups(allOutcomesForHistory, canonicalMarketId);
   }, [allOutcomesForHistory, canonicalMarketId]);
-  const timeWindow = useMemo2(() => {
+  const timeWindow = useMemo3(() => {
     return getTimeWindowByRange(selectedTimeRange);
   }, [selectedTimeRange]);
   const {
@@ -786,7 +864,7 @@ var EventListItemDetailsGraphSection = ({
   }, timeWindow), {
     enabled: priceHistoryGroups.length > 0
   }));
-  const priceHistoryByVenue = useMemo2(() => {
+  const priceHistoryByVenue = useMemo3(() => {
     const historyByVenue = /* @__PURE__ */ new Map();
     if (!(priceHistoryData == null ? void 0 : priceHistoryData.length)) {
       return historyByVenue;
@@ -802,7 +880,7 @@ var EventListItemDetailsGraphSection = ({
     });
     return historyByVenue;
   }, [priceHistoryData]);
-  const chartSeriesByMode = useMemo2(() => {
+  const chartSeriesByMode = useMemo3(() => {
     const buildSeries = (mode) => {
       const modeConfig = probabilityModeConfigs[mode];
       const chartSeries = [];
@@ -819,10 +897,19 @@ var EventListItemDetailsGraphSection = ({
           const probability = normalizeProbability(point.price);
           if (probability == null || !Number.isFinite(point.timestamp))
             return null;
-          return {
+          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
+            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;
@@ -842,13 +929,13 @@ var EventListItemDetailsGraphSection = ({
       no: buildSeries("no")
     };
   }, [normalizedVenueDataByMode, priceHistoryByVenue, probabilityModeConfigs]);
-  const visibleChartSeries = useMemo2(() => {
+  const visibleChartSeries = useMemo3(() => {
     const modeSeries = chartSeriesByMode[activeProbabilityMode];
     if (!selectedVenue)
       return modeSeries;
     return modeSeries.filter((seriesItem) => seriesItem.venue === selectedVenue);
   }, [activeProbabilityMode, chartSeriesByMode, selectedVenue]);
-  const segmentedDisplayItems = useMemo2(() => {
+  const segmentedDisplayItems = useMemo3(() => {
     return probabilityModeOrder.map((mode) => {
       const averageProbability = resolveAverageProbability(
         normalizedVenueDataByMode[mode].map((venueData) => venueData.probability)
@@ -889,14 +976,14 @@ var EventListItemDetailsGraphSection = ({
     void Promise.all(priceHistoryResults.map((result) => result.refetch()));
   };
   if (priceHistoryError) {
-    return /* @__PURE__ */ jsx2(
+    return /* @__PURE__ */ jsx3(
       "div",
       {
         className: cn(
           "w-full rounded-agg-xl border border-agg-separator bg-agg-secondary",
           classNames == null ? void 0 : classNames.chart
         ),
-        children: /* @__PURE__ */ jsx2(
+        children: /* @__PURE__ */ jsx3(
           StateMessage,
           {
             ariaLabel: labels.eventItemDetails.chartUnavailableAria,
@@ -911,13 +998,14 @@ var EventListItemDetailsGraphSection = ({
       }
     );
   }
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(
     LineChart,
     {
       classNames: { root: classNames == null ? void 0 : classNames.chart },
       series: visibleChartSeries,
       height: 300,
       isLoading: isPriceHistoryLoading,
+      chartType: selectedChartType,
       showSeriesControls: activeModeVenueData.length > 0 || segmentedDisplayItems.length > 0,
       renderSeriesControls: () => {
         return /* @__PURE__ */ jsxs2(
@@ -925,7 +1013,7 @@ var EventListItemDetailsGraphSection = ({
           {
             className: cn("flex flex-row items-center justify-between gap-4", classNames == null ? void 0 : classNames.summary),
             children: [
-              /* @__PURE__ */ jsx2(
+              /* @__PURE__ */ jsx3(
                 "div",
                 {
                   className: cn(
@@ -936,7 +1024,7 @@ var EventListItemDetailsGraphSection = ({
                     var _a;
                     const text = venueData.probability == null ? "-" : formatPercent(venueData.probability);
                     const isActiveVenue = selectedVenue === venueData.venue;
-                    return /* @__PURE__ */ jsx2(
+                    return /* @__PURE__ */ jsx3(
                       "button",
                       {
                         type: "button",
@@ -945,12 +1033,12 @@ var EventListItemDetailsGraphSection = ({
                         className: cn(
                           "rounded-agg-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-agg-primary focus-visible:ring-offset-2 focus-visible:ring-offset-agg-secondary-hover"
                         ),
-                        children: /* @__PURE__ */ jsx2(
+                        children: /* @__PURE__ */ jsx3(
                           Badge,
                           {
                             text,
                             size: "large",
-                            prefix: showVenueLogo ? /* @__PURE__ */ jsx2(
+                            prefix: showVenueLogo ? /* @__PURE__ */ jsx3(
                               VenueLogo,
                               {
                                 venue: venueData.venue,
@@ -975,7 +1063,7 @@ var EventListItemDetailsGraphSection = ({
                   })
                 }
               ),
-              /* @__PURE__ */ jsx2(
+              /* @__PURE__ */ jsx3(
                 SwitchButton,
                 {
                   ariaLabel: labels.eventItemDetails.outcomeSelectorAria,
@@ -1009,15 +1097,15 @@ var EventListItemDetailsContent = ({
 }) => {
   var _a, _b;
   const config = useSdkUiConfig2();
-  const labels = useLabels2();
-  const venueMarkets = useMemo2(() => {
+  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]);
-  const primaryVenueMarket = useMemo2(() => {
+  const primaryVenueMarket = useMemo3(() => {
     return selectPrimaryVenueMarket(venueMarkets);
   }, [venueMarkets]);
-  const outcomeLabels = useMemo2(() => {
+  const outcomeLabels = useMemo3(() => {
     return resolveOutcomeLabels(venueMarkets);
   }, [venueMarkets]);
   const [selectedOutcomeLabel, setSelectedOutcomeLabel] = useState(() => {
@@ -1026,6 +1114,7 @@ var EventListItemDetailsContent = ({
   const [selectedTimeRange, setSelectedTimeRange] = useState(() => {
     return getDefaultSelectedTimeRange(defaultTimeRange);
   });
+  const [selectedChartType, setSelectedChartType] = useState("line");
   useEffect(() => {
     setSelectedTimeRange(getDefaultSelectedTimeRange(defaultTimeRange));
   }, [defaultTimeRange]);
@@ -1033,7 +1122,7 @@ var EventListItemDetailsContent = ({
   const resolvedImage = resolveTileImage(event, primaryVenueMarket, image);
   const isDateOutcomeMarket = outcomeLabels.length > 2 && outcomeLabels.every(isDateLikeLabel);
   const outcomeSelectorLabels = outcomeLabels;
-  const probabilityByLabel = useMemo2(() => {
+  const probabilityByLabel = useMemo3(() => {
     return new Map(
       outcomeLabels.map((label) => {
         const outcomesByVenue = resolveOutcomesByVenue(venueMarkets, label);
@@ -1046,7 +1135,7 @@ var EventListItemDetailsContent = ({
       })
     );
   }, [outcomeLabels, venueMarkets]);
-  const mainOutcomeLabel = useMemo2(() => {
+  const mainOutcomeLabel = useMemo3(() => {
     if (outcomeLabels.length === 0)
       return void 0;
     return [...outcomeLabels].sort((left, right) => {
@@ -1067,7 +1156,7 @@ var EventListItemDetailsContent = ({
     const fallbackOutcomeLabel = isDateOutcomeMarket ? resolveDefaultOutcomeLabel(outcomeLabels) : mainOutcomeLabel != null ? mainOutcomeLabel : resolveDefaultOutcomeLabel(outcomeLabels);
     setSelectedOutcomeLabel(fallbackOutcomeLabel);
   }, [isDateOutcomeMarket, mainOutcomeLabel, outcomeLabels, selectedOutcomeLabel]);
-  const switchLabels = useMemo2(() => {
+  const switchLabels = useMemo3(() => {
     var _a2, _b2;
     if (isDateOutcomeMarket) {
       return [labels.eventItemDetails.yes, labels.eventItemDetails.no];
@@ -1088,7 +1177,7 @@ var EventListItemDetailsContent = ({
     outcomeLabels,
     probabilityByLabel
   ]);
-  const volumeLabel = useMemo2(() => {
+  const volumeLabel = useMemo3(() => {
     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")
@@ -1096,7 +1185,7 @@ var EventListItemDetailsContent = ({
     return `${config.formatCompactCurrency(resolvedVolume)} ${labels.eventItemDetails.volumeSuffix}`;
   }, [config, event.volume, labels.eventItemDetails.volumeSuffix, primaryVenueMarket == null ? void 0 : primaryVenueMarket.volume]);
   if (!primaryVenueMarket || !selectedOutcomeLabel) {
-    return /* @__PURE__ */ jsx2(EventListItemDetailsUnavailableState, { classNames, ariaLabel });
+    return /* @__PURE__ */ jsx3(EventListItemDetailsUnavailableState, { classNames, ariaLabel });
   }
   return /* @__PURE__ */ jsxs2(
     Card,
@@ -1113,8 +1202,8 @@ var EventListItemDetailsContent = ({
               classNames == null ? void 0 : classNames.header
             ),
             children: [
-              resolvedImage ? /* @__PURE__ */ jsx2(
-                "img",
+              resolvedImage ? /* @__PURE__ */ jsx3(
+                RemoteImage,
                 {
                   src: resolvedImage,
                   alt: "",
@@ -1122,7 +1211,7 @@ var EventListItemDetailsContent = ({
                 }
               ) : null,
               /* @__PURE__ */ jsxs2("div", { className: "flex min-w-0 flex-1 flex-col gap-3", children: [
-                /* @__PURE__ */ jsx2(
+                /* @__PURE__ */ jsx3(
                   Typography,
                   {
                     variant: "body-strong",
@@ -1134,7 +1223,7 @@ var EventListItemDetailsContent = ({
                     children: resolvedTitle
                   }
                 ),
-                outcomeSelectorLabels.length > 2 ? /* @__PURE__ */ jsx2(
+                outcomeSelectorLabels.length > 2 ? /* @__PURE__ */ jsx3(
                   "div",
                   {
                     className: cn(
@@ -1144,7 +1233,7 @@ var EventListItemDetailsContent = ({
                     children: outcomeSelectorLabels.map((outcomeSelectorLabel) => {
                       const isActive = outcomeSelectorLabel === selectedOutcomeLabel;
                       const displayLabel = isDateLikeLabel(outcomeSelectorLabel) ? formatDateLabel(outcomeSelectorLabel) : outcomeSelectorLabel;
-                      return /* @__PURE__ */ jsx2(
+                      return /* @__PURE__ */ jsx3(
                         Button,
                         {
                           size: "small",
@@ -1167,12 +1256,12 @@ var EventListItemDetailsContent = ({
             ]
           }
         ),
-        detailsStats && detailsStats.length > 0 ? /* @__PURE__ */ jsx2("div", { className: cn("flex flex-wrap items-start gap-4 md:gap-6", classNames == null ? void 0 : classNames.headerStats), children: detailsStats.map((statItem) => {
+        detailsStats && detailsStats.length > 0 ? /* @__PURE__ */ jsx3("div", { className: cn("flex flex-wrap items-start gap-4 md:gap-6", classNames == null ? void 0 : classNames.headerStats), children: detailsStats.map((statItem) => {
           const deltaClassName = statItem.deltaTone === "positive" ? "text-agg-success!" : statItem.deltaTone === "negative" ? "text-agg-error!" : "text-agg-muted-foreground";
           return /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-1", children: [
-            /* @__PURE__ */ jsx2(Typography, { variant: "caption-caps", className: "text-agg-muted-foreground", children: statItem.label }),
+            /* @__PURE__ */ jsx3(Typography, { variant: "caption-caps", className: "text-agg-muted-foreground", children: statItem.label }),
             /* @__PURE__ */ jsxs2("div", { className: "flex items-baseline gap-1", children: [
-              /* @__PURE__ */ jsx2(
+              /* @__PURE__ */ jsx3(
                 Typography,
                 {
                   variant: "body",
@@ -1180,11 +1269,11 @@ var EventListItemDetailsContent = ({
                   children: statItem.value
                 }
               ),
-              statItem.delta ? /* @__PURE__ */ jsx2(Typography, { variant: "label", className: cn(deltaClassName), children: statItem.delta }) : null
+              statItem.delta ? /* @__PURE__ */ jsx3(Typography, { variant: "label", className: cn(deltaClassName), children: statItem.delta }) : null
             ] })
           ] }, `${statItem.label}-${statItem.value}`);
         }) }) : null,
-        /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsx3(
           EventListItemDetailsGraphSection,
           {
             venueMarkets,
@@ -1197,31 +1286,36 @@ var EventListItemDetailsContent = ({
             showVenueLogo,
             venueInfo,
             formatPercent: config.formatPercent,
-            selectedTimeRange
+            selectedTimeRange,
+            selectedChartType
           }
         ),
         /* @__PURE__ */ jsxs2("div", { className: cn("flex flex-wrap items-center justify-between gap-4", classNames == null ? void 0 : classNames.footer), children: [
-          /* @__PURE__ */ jsx2(Typography, { variant: "label", className: "text-agg-muted-foreground", children: volumeLabel || "-" }),
-          /* @__PURE__ */ jsx2("div", { className: cn("flex items-center gap-2 md:gap-3", classNames == null ? void 0 : classNames.timeRange), children: eventListItemDetailsTimeRanges.map((timeRange) => {
-            const isActive = timeRange === selectedTimeRange;
-            return /* @__PURE__ */ jsx2(
-              Button,
-              {
-                size: "small",
-                variant: "tertiary",
-                className: cn(
-                  "h-auto min-w-0 rounded-none px-0 py-0 text-agg-xs leading-agg-4 md:text-agg-sm md:leading-agg-5",
-                  "border-0 bg-transparent shadow-none",
-                  "hover:text-agg-foreground!",
-                  isActive ? "font-agg-bold! text-agg-foreground!" : "font-agg-normal! text-agg-muted-foreground!"
-                ),
-                "aria-pressed": isActive,
-                onClick: () => setSelectedTimeRange(timeRange),
-                children: timeRange === "ALL" ? labels.eventItemDetails.allTimeRange : timeRange
-              },
-              timeRange
-            );
-          }) })
+          /* @__PURE__ */ jsx3(Typography, { variant: "label", className: "text-agg-muted-foreground", children: volumeLabel || "-" }),
+          /* @__PURE__ */ jsxs2("div", { className: cn("flex flex-wrap items-center gap-2 md:gap-3", classNames == null ? void 0 : classNames.timeRange), children: [
+            /* @__PURE__ */ jsx3(ChartTypeSwitch, { value: selectedChartType, onValueChange: setSelectedChartType }),
+            /* @__PURE__ */ jsx3("span", { "aria-hidden": "true", className: "hidden h-4 w-px bg-agg-separator md:block" }),
+            eventListItemDetailsTimeRanges.map((timeRange) => {
+              const isActive = timeRange === selectedTimeRange;
+              return /* @__PURE__ */ jsx3(
+                Button,
+                {
+                  size: "small",
+                  variant: "tertiary",
+                  className: cn(
+                    "h-auto min-w-0 rounded-none px-0 py-0 text-agg-xs leading-agg-4 md:text-agg-sm md:leading-agg-5",
+                    "border-0 bg-transparent shadow-none",
+                    "hover:text-agg-foreground!",
+                    isActive ? "font-agg-bold! text-agg-foreground!" : "font-agg-normal! text-agg-muted-foreground!"
+                  ),
+                  "aria-pressed": isActive,
+                  onClick: () => setSelectedTimeRange(timeRange),
+                  children: timeRange === "ALL" ? labels.eventItemDetails.allTimeRange : timeRange
+                },
+                timeRange
+              );
+            })
+          ] })
         ] })
       ]
     }
@@ -1241,11 +1335,11 @@ var EventListItemDetailsByEventId = (_a) => {
   } = useEvent2(eventId, {
     enabled: !!eventId
   });
-  const resolvedEvent = useMemo2(() => {
+  const resolvedEvent = useMemo3(() => {
     return resolveEventListItemEvent(fetchedEvent);
   }, [fetchedEvent]);
   if (!eventId) {
-    return /* @__PURE__ */ jsx2(
+    return /* @__PURE__ */ jsx3(
       EventListItemDetailsUnavailableState,
       {
         classNames: rest.classNames,
@@ -1254,16 +1348,16 @@ var EventListItemDetailsByEventId = (_a) => {
     );
   }
   if (isLoading) {
-    return /* @__PURE__ */ jsx2(EventListItemDetailsLoadingState, { classNames: rest.classNames, ariaLabel: rest.ariaLabel });
+    return /* @__PURE__ */ jsx3(EventListItemDetailsLoadingState, { classNames: rest.classNames, ariaLabel: rest.ariaLabel });
   }
   if (isErrorWithStatus(error, 404)) {
-    return /* @__PURE__ */ jsx2(EventListItemDetailsNotFoundState, { classNames: rest.classNames, ariaLabel: rest.ariaLabel });
+    return /* @__PURE__ */ jsx3(EventListItemDetailsNotFoundState, { classNames: rest.classNames, ariaLabel: rest.ariaLabel });
   }
   if (!fetchedEvent && !isError) {
-    return /* @__PURE__ */ jsx2(EventListItemDetailsLoadingState, { classNames: rest.classNames, ariaLabel: rest.ariaLabel });
+    return /* @__PURE__ */ jsx3(EventListItemDetailsLoadingState, { classNames: rest.classNames, ariaLabel: rest.ariaLabel });
   }
   if (!resolvedEvent) {
-    return /* @__PURE__ */ jsx2(
+    return /* @__PURE__ */ jsx3(
       EventListItemDetailsUnavailableState,
       {
         classNames: rest.classNames,
@@ -1271,15 +1365,15 @@ var EventListItemDetailsByEventId = (_a) => {
       }
     );
   }
-  return /* @__PURE__ */ jsx2(EventListItemDetailsContent, __spreadValues({ event: resolvedEvent }, rest));
+  return /* @__PURE__ */ jsx3(EventListItemDetailsContent, __spreadValues({ event: resolvedEvent }, rest));
 };
 var EventListItemDetails = (props) => {
   if (props.isLoading) {
-    return /* @__PURE__ */ jsx2(EventListItemDetailsLoadingState, { classNames: props.classNames, ariaLabel: props.ariaLabel });
+    return /* @__PURE__ */ jsx3(EventListItemDetailsLoadingState, { classNames: props.classNames, ariaLabel: props.ariaLabel });
   }
   if ("event" in props && props.event) {
     const _a = props, { event } = _a, rest = __objRest(_a, ["event"]);
-    return /* @__PURE__ */ jsx2(EventListItemDetailsContent, __spreadValues({ event }, rest));
+    return /* @__PURE__ */ jsx3(EventListItemDetailsContent, __spreadValues({ event }, rest));
   }
   if ("eventId" in props && typeof props.eventId === "string") {
     const {
@@ -1304,9 +1398,9 @@ var EventListItemDetails = (props) => {
       ariaLabel: ariaLabelOverride,
       defaultTimeRange: defaultTimeRangeOverride
     };
-    return /* @__PURE__ */ jsx2(EventListItemDetailsByEventId, __spreadValues({}, byEventIdProps));
+    return /* @__PURE__ */ jsx3(EventListItemDetailsByEventId, __spreadValues({}, byEventIdProps));
   }
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(
     EventListItemDetailsUnavailableState,
     {
       classNames: props.classNames,
@@ -1317,10 +1411,10 @@ var EventListItemDetails = (props) => {
 EventListItemDetails.displayName = "EventListItemDetails";
 
 // src/events/market-details/index.tsx
-import { useEffect as useEffect2, useId, useMemo as useMemo3, useState as useState2 } from "react";
+import { useEffect as useEffect2, useId, useMemo as useMemo4, useState as useState2 } from "react";
 import {
   useEvent as useEvent3,
-  useLabels as useLabels3,
+  useLabels as useLabels4,
   useOrderBook,
   usePriceHistory as usePriceHistory2,
   useSdkUiConfig as useSdkUiConfig3
@@ -1556,14 +1650,14 @@ var buildMarketDetailsModel = ({
 };
 
 // src/events/market-details/index.tsx
-import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var MarketDetailsLoadingState = ({
   isOpened = marketDetailsDefaultIsOpened,
   ariaLabel,
   classNames
 }) => {
-  const labels = useLabels3();
-  return /* @__PURE__ */ jsx3(
+  const labels = useLabels4();
+  return /* @__PURE__ */ jsx4(
     Skeleton,
     {
       view: isOpened ? "market-details-detailed" : "market-details-minified",
@@ -1576,16 +1670,16 @@ var MarketDetailsUnavailableState = ({
   ariaLabel,
   classNames
 }) => {
-  const labels = useLabels3();
-  return /* @__PURE__ */ jsx3(
+  const labels = useLabels4();
+  return /* @__PURE__ */ jsx4(
     Card,
     {
       className: cn(marketDetailsBaseCardClassName, classNames == null ? void 0 : classNames.root),
       role: "status",
       "aria-label": ariaLabel != null ? ariaLabel : labels.marketDetails.unavailableAria,
       children: /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-1 p-5", children: [
-        /* @__PURE__ */ jsx3(Typography, { variant: "body-large-strong", children: labels.marketDetails.unavailableTitle }),
-        /* @__PURE__ */ jsx3(Typography, { variant: "label", className: "text-agg-muted-foreground", children: labels.marketDetails.unavailableDescription })
+        /* @__PURE__ */ jsx4(Typography, { variant: "body-large-strong", children: labels.marketDetails.unavailableTitle }),
+        /* @__PURE__ */ jsx4(Typography, { variant: "label", className: "text-agg-muted-foreground", children: labels.marketDetails.unavailableDescription })
       ] })
     }
   );
@@ -1594,8 +1688,8 @@ var MarketDetailsNotFoundState = ({
   ariaLabel,
   classNames
 }) => {
-  const labels = useLabels3();
-  return /* @__PURE__ */ jsx3(Card, { className: cn(marketDetailsBaseCardClassName, "p-0", classNames == null ? void 0 : classNames.root), children: /* @__PURE__ */ jsx3(
+  const labels = useLabels4();
+  return /* @__PURE__ */ jsx4(Card, { className: cn(marketDetailsBaseCardClassName, "p-0", classNames == null ? void 0 : classNames.root), children: /* @__PURE__ */ jsx4(
     StateMessage,
     {
       ariaLabel: ariaLabel != null ? ariaLabel : labels.marketDetails.notFoundAria,
@@ -1612,7 +1706,7 @@ var OrderBookRows = ({
   formatCurrency,
   visibleRows
 }) => {
-  const labels = useLabels3();
+  const labels = useLabels4();
   const isAsks = title === labels.marketDetails.asks;
   const priceClassName = isAsks ? "text-agg-orderbook-ask" : "text-agg-orderbook-bid";
   const barClassName = isAsks ? "bg-agg-orderbook-ask/10" : "bg-agg-orderbook-bid/10";
@@ -1622,8 +1716,8 @@ var OrderBookRows = ({
   const orderBookRowGapPx = 8;
   const orderBookVisibleHeightPx = maxVisibleRows * orderBookRowHeightPx + Math.max(0, maxVisibleRows - 1) * (orderBookDividerHeightPx + orderBookRowGapPx);
   return /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-2", children: [
-    /* @__PURE__ */ jsx3(Typography, { variant: "caption-caps", children: title }),
-    /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsx4(Typography, { variant: "caption-caps", children: title }),
+    /* @__PURE__ */ jsx4(
       "div",
       {
         className: "overflow-y-auto pr-1 flex flex-col gap-2",
@@ -1633,8 +1727,8 @@ var OrderBookRows = ({
         children: rows.map((row, index) => /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-2", children: [
           /* @__PURE__ */ jsxs3("div", { className: "grid grid-cols-[52px_1fr_1fr_52px] items-center gap-2 md:grid-cols-[88px_1fr_1fr_minmax(120px,220px)] md:gap-6", children: [
             /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-1 md:gap-3", children: [
-              /* @__PURE__ */ jsx3(VenueLogo, { venue: row.venue, size: "small" }),
-              /* @__PURE__ */ jsx3(
+              /* @__PURE__ */ jsx4(VenueLogo, { venue: row.venue, size: "small" }),
+              /* @__PURE__ */ jsx4(
                 "span",
                 {
                   className: cn(
@@ -1645,9 +1739,9 @@ var OrderBookRows = ({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx3("span", { className: "truncate text-agg-xs leading-agg-4 text-center text-agg-foreground md:text-agg-sm md:leading-agg-5", children: formatNumber(row.size) }),
-            /* @__PURE__ */ jsx3("span", { className: "truncate text-agg-xs leading-agg-4 text-center text-agg-foreground md:text-agg-sm md:leading-agg-5", children: formatCurrency(row.total) }),
-            /* @__PURE__ */ jsx3("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx3(
+            /* @__PURE__ */ jsx4("span", { className: "truncate text-agg-xs leading-agg-4 text-center text-agg-foreground md:text-agg-sm md:leading-agg-5", children: formatNumber(row.size) }),
+            /* @__PURE__ */ jsx4("span", { className: "truncate text-agg-xs leading-agg-4 text-center text-agg-foreground md:text-agg-sm md:leading-agg-5", children: formatCurrency(row.total) }),
+            /* @__PURE__ */ jsx4("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx4(
               "div",
               {
                 "aria-hidden": "true",
@@ -1658,7 +1752,7 @@ var OrderBookRows = ({
               }
             ) })
           ] }),
-          index < rows.length - 1 ? /* @__PURE__ */ jsx3("div", { className: "h-px w-full bg-agg-separator" }) : null
+          index < rows.length - 1 ? /* @__PURE__ */ jsx4("div", { className: "h-px w-full bg-agg-separator" }) : null
         ] }, row.id))
       }
     )
@@ -1696,9 +1790,9 @@ var MarketDetailsContent = ({
   otherContent
 }) => {
   const config = useSdkUiConfig3();
-  const labels = useLabels3();
+  const labels = useLabels4();
   const detailsContentId = useId();
-  const model = useMemo3(() => {
+  const model = useMemo4(() => {
     return buildMarketDetailsModel({
       event,
       marketId,
@@ -1708,10 +1802,10 @@ var MarketDetailsContent = ({
       labels
     });
   }, [config.formatCompactCurrency, event, image, labels, marketId, title]);
-  const resolvedMarket = useMemo3(() => {
+  const resolvedMarket = useMemo4(() => {
     return resolveMarket(event, marketId);
   }, [event, marketId]);
-  const marketDetailsTabs = useMemo3(() => {
+  const marketDetailsTabs = useMemo4(() => {
     return getMarketDetailsTabs(labels);
   }, [labels]);
   const [selectedTab, setSelectedTab] = useState2(
@@ -1722,6 +1816,7 @@ var MarketDetailsContent = ({
     setSelectedTab(resolveInitialTab(defaultTab));
   }, [defaultTab]);
   const [selectedTimeRange, setSelectedTimeRange] = useState2(defaultTimeRange);
+  const [selectedChartType, setSelectedChartType] = useState2("line");
   useEffect2(() => {
     setSelectedTimeRange(defaultTimeRange);
   }, [defaultTimeRange]);
@@ -1738,17 +1833,17 @@ var MarketDetailsContent = ({
       resolveInitialOutcomeLabel((_a = model == null ? void 0 : model.outcomeLabels) != null ? _a : [], defaultOutcomeLabel)
     );
   }, [defaultOutcomeLabel, model == null ? void 0 : model.outcomeLabels]);
-  const headerOutcomeItems = useMemo3(() => {
+  const headerOutcomeItems = useMemo4(() => {
     if (!model)
       return [];
     return resolveHeaderOutcomeItems(model.market.venueMarkets, selectedOutcomeLabel);
   }, [model, selectedOutcomeLabel]);
-  const headlineProbability = useMemo3(() => {
+  const headlineProbability = useMemo4(() => {
     if (!model || !selectedOutcomeLabel)
       return void 0;
     return model.probabilityByLabel.get(selectedOutcomeLabel);
   }, [model, selectedOutcomeLabel]);
-  const outcomesByLabel = useMemo3(() => {
+  const outcomesByLabel = useMemo4(() => {
     const outcomesByLabelMap = /* @__PURE__ */ new Map();
     if (!model) {
       return outcomesByLabelMap;
@@ -1761,16 +1856,16 @@ var MarketDetailsContent = ({
     });
     return outcomesByLabelMap;
   }, [headerOutcomeItems, model]);
-  const selectedOutcomesByVenue = useMemo3(() => {
+  const selectedOutcomesByVenue = useMemo4(() => {
     var _a;
     if (!selectedOutcomeLabel)
       return [];
     return (_a = outcomesByLabel.get(selectedOutcomeLabel)) != null ? _a : [];
   }, [outcomesByLabel, selectedOutcomeLabel]);
-  const timeWindow = useMemo3(() => {
+  const timeWindow = useMemo4(() => {
     return getTimeWindowByRange(selectedTimeRange);
   }, [selectedTimeRange]);
-  const graphOutcomes = useMemo3(() => {
+  const graphOutcomes = useMemo4(() => {
     const uniqueOutcomesByVenueAndId = /* @__PURE__ */ new Map();
     outcomesByLabel.forEach((outcomes) => {
       outcomes.forEach((outcomeByVenue) => {
@@ -1783,7 +1878,7 @@ var MarketDetailsContent = ({
     return [...uniqueOutcomesByVenueAndId.values()];
   }, [outcomesByLabel]);
   const canonicalMarketIdForHistory = model == null ? void 0 : model.market.id;
-  const priceHistoryGroups = useMemo3(() => {
+  const priceHistoryGroups = useMemo4(() => {
     return buildPriceHistoryGroups(graphOutcomes, canonicalMarketIdForHistory);
   }, [canonicalMarketIdForHistory, graphOutcomes]);
   const { data: priceHistoryData, isLoading: isPriceHistoryLoading } = usePriceHistory2(__spreadProps(__spreadValues({
@@ -1791,7 +1886,7 @@ var MarketDetailsContent = ({
   }, timeWindow), {
     enabled: isOpened && selectedTab === "graph" && priceHistoryGroups.length > 0
   }));
-  const orderBookInputs = useMemo3(() => {
+  const orderBookInputs = useMemo4(() => {
     return selectedOutcomesByVenue.map(({ market, outcome }) => ({
       market,
       outcome,
@@ -1807,19 +1902,19 @@ var MarketDetailsContent = ({
     orderbooks: orderBookInputs,
     enabled: isOpened && selectedTab === "order-book" && orderBookInputs.length > 0
   });
-  const askRows = useMemo3(() => {
+  const askRows = useMemo4(() => {
     return resolveOrderBookRows({
       data: orderBookData,
       side: "asks"
     });
   }, [orderBookData]);
-  const bidRows = useMemo3(() => {
+  const bidRows = useMemo4(() => {
     return resolveOrderBookRows({
       data: orderBookData,
       side: "bids"
     });
   }, [orderBookData]);
-  const priceHistoryByVenue = useMemo3(() => {
+  const priceHistoryByVenue = useMemo4(() => {
     const historyByVenue = /* @__PURE__ */ new Map();
     if (!(priceHistoryData == null ? void 0 : priceHistoryData.length)) {
       return historyByVenue;
@@ -1835,7 +1930,7 @@ var MarketDetailsContent = ({
     });
     return historyByVenue;
   }, [priceHistoryData]);
-  const graphSeriesByOutcomeLabel = useMemo3(() => {
+  const graphSeriesByOutcomeLabel = useMemo4(() => {
     const seriesByOutcomeLabel = /* @__PURE__ */ new Map();
     const resolveOutcomeCandidateIds2 = (outcomeByVenue) => {
       var _a, _b;
@@ -1863,7 +1958,11 @@ var MarketDetailsContent = ({
           return;
         const points = matchingHistory.points.map((point) => ({
           time: point.timestamp,
-          value: point.price * 100
+          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;
@@ -1878,7 +1977,7 @@ var MarketDetailsContent = ({
     });
     return seriesByOutcomeLabel;
   }, [canonicalMarketIdForHistory, headerOutcomeItems, outcomesByLabel, priceHistoryByVenue]);
-  const graphSeries = useMemo3(() => {
+  const graphSeries = useMemo4(() => {
     var _a;
     if (!selectedOutcomeLabel)
       return [];
@@ -1887,7 +1986,7 @@ var MarketDetailsContent = ({
       return seriesForOutcomeLabel;
     return seriesForOutcomeLabel.filter((seriesItem) => seriesItem.venue === selectedGraphVenue);
   }, [graphSeriesByOutcomeLabel, selectedGraphVenue, selectedOutcomeLabel]);
-  const otherRows = useMemo3(() => {
+  const otherRows = useMemo4(() => {
     if (!model)
       return [];
     return resolveOtherTabRows(model.market, labels);
@@ -1941,10 +2040,10 @@ var MarketDetailsContent = ({
     setSelectedGraphVenue(null);
   }, [selectedGraphVenue, selectedOutcomesByVenue]);
   if (marketId && !resolvedMarket) {
-    return /* @__PURE__ */ jsx3(MarketDetailsNotFoundState, { ariaLabel, classNames });
+    return /* @__PURE__ */ jsx4(MarketDetailsNotFoundState, { ariaLabel, classNames });
   }
   if (!model) {
-    return /* @__PURE__ */ jsx3(MarketDetailsUnavailableState, { ariaLabel, classNames });
+    return /* @__PURE__ */ jsx4(MarketDetailsUnavailableState, { ariaLabel, classNames });
   }
   return /* @__PURE__ */ jsxs3(
     Card,
@@ -1973,8 +2072,8 @@ var MarketDetailsContent = ({
             onKeyDown: handleToggleExpanded,
             children: [
               /* @__PURE__ */ jsxs3("div", { className: "flex min-w-52 items-center gap-3 md:gap-4", children: [
-                model.image ? /* @__PURE__ */ jsx3(
-                  "img",
+                model.image ? /* @__PURE__ */ jsx4(
+                  RemoteImage,
                   {
                     src: model.image,
                     alt: "",
@@ -1982,12 +2081,12 @@ var MarketDetailsContent = ({
                   }
                 ) : null,
                 /* @__PURE__ */ jsxs3("div", { className: "flex min-w-0 flex-col", children: [
-                  /* @__PURE__ */ jsx3(Typography, { as: "h3", variant: "body-large-strong", className: "truncate", children: model.title }),
-                  /* @__PURE__ */ jsx3("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ jsx3(Typography, { variant: "label", className: "truncate text-agg-muted-foreground", children: model.subtitle }) })
+                  /* @__PURE__ */ jsx4(Typography, { as: "h3", variant: "body-large-strong", className: "truncate", children: model.title }),
+                  /* @__PURE__ */ jsx4("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ jsx4(Typography, { variant: "label", className: "truncate text-agg-muted-foreground", children: model.subtitle }) })
                 ] })
               ] }),
-              /* @__PURE__ */ jsx3(Typography, { as: "div", variant: "heading", className: "shrink-0", children: formatProbabilityPercent(headlineProbability) }),
-              /* @__PURE__ */ jsx3(
+              /* @__PURE__ */ jsx4(Typography, { as: "div", variant: "heading", className: "shrink-0", children: formatProbabilityPercent(headlineProbability) }),
+              /* @__PURE__ */ jsx4(
                 "div",
                 {
                   className: "flex gap-2",
@@ -1998,7 +2097,7 @@ var MarketDetailsContent = ({
                   children: headerOutcomeItems.map((item) => {
                     const isPositive = item.tone === "positive";
                     const isActiveOutcome = item.label === selectedOutcomeLabel;
-                    return /* @__PURE__ */ jsx3(
+                    return /* @__PURE__ */ jsx4(
                       "button",
                       {
                         type: "button",
@@ -2016,7 +2115,7 @@ var MarketDetailsContent = ({
                           setSelectedOutcomeLabel(item.label);
                         },
                         children: /* @__PURE__ */ jsxs3("span", { className: "inline-flex items-center gap-2", children: [
-                          /* @__PURE__ */ jsx3(
+                          /* @__PURE__ */ jsx4(
                             VenueLogo,
                             {
                               venue: isPositive ? "polymarket" : "probable",
@@ -2024,7 +2123,7 @@ var MarketDetailsContent = ({
                               color: isActiveOutcome ? "var(--agg-color-on-primary)" : void 0
                             }
                           ),
-                          /* @__PURE__ */ jsx3(
+                          /* @__PURE__ */ jsx4(
                             Typography,
                             {
                               variant: isActiveOutcome ? "body-strong" : "body",
@@ -2045,7 +2144,7 @@ var MarketDetailsContent = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx4(
           "div",
           {
             id: detailsContentId,
@@ -2056,7 +2155,7 @@ var MarketDetailsContent = ({
             ),
             "aria-hidden": !isOpened,
             children: /* @__PURE__ */ jsxs3("div", { className: "min-h-0", children: [
-              /* @__PURE__ */ jsx3("div", { className: "h-px w-full bg-agg-separator" }),
+              /* @__PURE__ */ jsx4("div", { className: "h-px w-full bg-agg-separator" }),
               /* @__PURE__ */ jsxs3(
                 "div",
                 {
@@ -2071,7 +2170,7 @@ var MarketDetailsContent = ({
                     ) : "translate-y-5 opacity-0"
                   ),
                   children: [
-                    /* @__PURE__ */ jsx3("div", { className: cn("block", classNames == null ? void 0 : classNames.tabs), children: /* @__PURE__ */ jsx3(
+                    /* @__PURE__ */ jsx4("div", { className: cn("block", classNames == null ? void 0 : classNames.tabs), children: /* @__PURE__ */ jsx4(
                       Tabs,
                       {
                         ariaLabel: labels.marketDetails.tabsAria,
@@ -2082,9 +2181,9 @@ var MarketDetailsContent = ({
                         className: "w-full px-5"
                       }
                     ) }),
-                    /* @__PURE__ */ jsx3("div", { className: "h-px w-full bg-agg-separator" }),
+                    /* @__PURE__ */ jsx4("div", { className: "h-px w-full bg-agg-separator" }),
                     /* @__PURE__ */ jsxs3("div", { className: cn("p-5", classNames == null ? void 0 : classNames.content), children: [
-                      selectedTab === "order-book" ? /* @__PURE__ */ jsx3("div", { className: cn("flex flex-col gap-5", classNames == null ? void 0 : classNames.orderBook), children: isOrderBookLoading ? /* @__PURE__ */ jsx3(MarketDetailsOderbookSkeleton, {}) : hasOrderBookError ? /* @__PURE__ */ jsx3(
+                      selectedTab === "order-book" ? /* @__PURE__ */ jsx4("div", { className: cn("flex flex-col gap-5", classNames == null ? void 0 : classNames.orderBook), children: isOrderBookLoading ? /* @__PURE__ */ jsx4(MarketDetailsOderbookSkeleton, {}) : hasOrderBookError ? /* @__PURE__ */ jsx4(
                         StateMessage,
                         {
                           ariaLabel: labels.marketDetails.orderBookUnavailableAria,
@@ -2095,7 +2194,7 @@ var MarketDetailsContent = ({
                           onAction: handleRetryOrderBook,
                           className: "min-h-[248px] px-5 py-10 md:min-h-[272px]"
                         }
-                      ) : hasNoOrderBook ? /* @__PURE__ */ jsx3(
+                      ) : hasNoOrderBook ? /* @__PURE__ */ jsx4(
                         StateMessage,
                         {
                           ariaLabel: labels.marketDetails.orderBookEmptyAria,
@@ -2104,7 +2203,7 @@ var MarketDetailsContent = ({
                           className: "min-h-[248px] px-5 py-10 md:min-h-[272px]"
                         }
                       ) : /* @__PURE__ */ jsxs3(Fragment, { children: [
-                        /* @__PURE__ */ jsx3(
+                        /* @__PURE__ */ jsx4(
                           OrderBookRows,
                           {
                             rows: askRows,
@@ -2114,7 +2213,7 @@ var MarketDetailsContent = ({
                             visibleRows: orderBookDepth
                           }
                         ),
-                        /* @__PURE__ */ jsx3(
+                        /* @__PURE__ */ jsx4(
                           OrderBookRows,
                           {
                             rows: bidRows,
@@ -2126,17 +2225,18 @@ var MarketDetailsContent = ({
                         )
                       ] }) }) : null,
                       selectedTab === "graph" ? /* @__PURE__ */ jsxs3("div", { className: cn("flex flex-col gap-5", classNames == null ? void 0 : classNames.graph), children: [
-                        /* @__PURE__ */ jsx3(
+                        /* @__PURE__ */ jsx4(
                           LineChart,
                           {
                             series: graphSeries,
                             height: 260,
                             isLoading: isPriceHistoryLoading,
+                            chartType: selectedChartType,
                             classNames: { root: "w-full" },
                             showSeriesControls: selectedOutcomesByVenue.length > 0 || headerOutcomeItems.length > 0,
                             renderSeriesControls: () => {
                               return /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-4 md:flex-row md:items-center md:justify-between", children: [
-                                /* @__PURE__ */ jsx3("div", { className: "flex flex-wrap gap-2", children: selectedOutcomesByVenue.map((item) => {
+                                /* @__PURE__ */ jsx4("div", { className: "flex flex-wrap gap-2", children: selectedOutcomesByVenue.map((item) => {
                                   const probability = formatProbabilityPercent(item.outcome.price);
                                   const isActiveVenue = selectedGraphVenue === item.venue;
                                   return /* @__PURE__ */ jsxs3(
@@ -2156,14 +2256,14 @@ var MarketDetailsContent = ({
                                         handleGraphVenueToggle(item.venue);
                                       },
                                       children: [
-                                        /* @__PURE__ */ jsx3(VenueLogo, { venue: item.venue, size: "small" }),
-                                        /* @__PURE__ */ jsx3("span", { className: "text-agg-base leading-agg-6 text-agg-foreground", children: probability })
+                                        /* @__PURE__ */ jsx4(VenueLogo, { venue: item.venue, size: "small" }),
+                                        /* @__PURE__ */ jsx4("span", { className: "text-agg-base leading-agg-6 text-agg-foreground", children: probability })
                                       ]
                                     },
                                     `${item.market.id}-${item.outcome.id}`
                                   );
                                 }) }),
-                                /* @__PURE__ */ jsx3(
+                                /* @__PURE__ */ jsx4(
                                   SwitchButton,
                                   {
                                     ariaLabel: labels.marketDetails.outcomeSelectorAria,
@@ -2189,39 +2289,56 @@ var MarketDetailsContent = ({
                               classNames == null ? void 0 : classNames.footer
                             ),
                             children: [
-                              /* @__PURE__ */ jsx3("span", { children: typeof model.market.volume === "number" ? `${config.formatCompactCurrency(model.market.volume)} ${labels.marketDetails.meta.volumeSuffix}` : labels.marketDetails.volumeUnavailable }),
-                              /* @__PURE__ */ jsx3("div", { className: "flex flex-wrap items-center gap-3 md:gap-4", children: eventListItemDetailsTimeRanges.map((timeRange) => {
-                                const isActive = selectedTimeRange === timeRange;
-                                return /* @__PURE__ */ jsx3(
-                                  "button",
+                              /* @__PURE__ */ jsx4("span", { children: typeof model.market.volume === "number" ? `${config.formatCompactCurrency(model.market.volume)} ${labels.marketDetails.meta.volumeSuffix}` : labels.marketDetails.volumeUnavailable }),
+                              /* @__PURE__ */ jsxs3("div", { className: "flex flex-wrap items-center gap-3 md:gap-4", children: [
+                                /* @__PURE__ */ jsx4(
+                                  ChartTypeSwitch,
+                                  {
+                                    className: "shrink-0",
+                                    value: selectedChartType,
+                                    onValueChange: setSelectedChartType
+                                  }
+                                ),
+                                /* @__PURE__ */ jsx4(
+                                  "span",
                                   {
-                                    type: "button",
-                                    className: cn(
-                                      "cursor-pointer text-agg-sm leading-agg-5",
-                                      isActive ? "font-agg-bold text-agg-foreground" : "font-agg-normal text-agg-muted-foreground"
-                                    ),
-                                    "aria-pressed": isActive,
-                                    onClick: (e) => {
-                                      e.preventDefault();
-                                      e.stopPropagation();
-                                      setSelectedTimeRange(timeRange);
+                                    "aria-hidden": "true",
+                                    className: "hidden h-4 w-px bg-agg-separator md:block"
+                                  }
+                                ),
+                                eventListItemDetailsTimeRanges.map((timeRange) => {
+                                  const isActive = selectedTimeRange === timeRange;
+                                  return /* @__PURE__ */ jsx4(
+                                    "button",
+                                    {
+                                      type: "button",
+                                      className: cn(
+                                        "cursor-pointer text-agg-sm leading-agg-5",
+                                        isActive ? "font-agg-bold text-agg-foreground" : "font-agg-normal text-agg-muted-foreground"
+                                      ),
+                                      "aria-pressed": isActive,
+                                      onClick: (e) => {
+                                        e.preventDefault();
+                                        e.stopPropagation();
+                                        setSelectedTimeRange(timeRange);
+                                      },
+                                      children: timeRange === "ALL" ? labels.eventItemDetails.allTimeRange : timeRange
                                     },
-                                    children: timeRange === "ALL" ? labels.eventItemDetails.allTimeRange : timeRange
-                                  },
-                                  timeRange
-                                );
-                              }) })
+                                    timeRange
+                                  );
+                                })
+                              ] })
                             ]
                           }
                         )
                       ] }) : null,
-                      selectedTab === "other" ? /* @__PURE__ */ jsx3("div", { className: "flex flex-col gap-4", children: otherContent != null ? otherContent : /* @__PURE__ */ jsx3("div", { className: "grid grid-cols-1 gap-3", children: otherRows.map((row) => /* @__PURE__ */ jsxs3(
+                      selectedTab === "other" ? /* @__PURE__ */ jsx4("div", { className: "flex flex-col gap-4", children: otherContent != null ? otherContent : /* @__PURE__ */ jsx4("div", { className: "grid grid-cols-1 gap-3", children: otherRows.map((row) => /* @__PURE__ */ jsxs3(
                         "div",
                         {
                           className: "flex items-center justify-between rounded-agg-xl bg-agg-secondary-hover px-4 py-3",
                           children: [
-                            /* @__PURE__ */ jsx3(Typography, { variant: "label", className: "text-agg-muted-foreground", children: row.label }),
-                            /* @__PURE__ */ jsx3(Typography, { variant: "body", className: "text-right", children: row.value })
+                            /* @__PURE__ */ jsx4(Typography, { variant: "label", className: "text-agg-muted-foreground", children: row.label }),
+                            /* @__PURE__ */ jsx4(Typography, { variant: "body", className: "text-right", children: row.value })
                           ]
                         },
                         row.label
@@ -2264,7 +2381,7 @@ var MarketDetails = (props) => {
     enabled: !props.isLoading && !hasEventProp && !!props.eventId
   });
   if (props.isLoading) {
-    return /* @__PURE__ */ jsx3(
+    return /* @__PURE__ */ jsx4(
       MarketDetailsLoadingState,
       {
         isOpened: resolvedIsOpened,
@@ -2274,7 +2391,7 @@ var MarketDetails = (props) => {
     );
   }
   if ("event" in props && props.event) {
-    return /* @__PURE__ */ jsx3(
+    return /* @__PURE__ */ jsx4(
       MarketDetailsContent,
       __spreadProps(__spreadValues({}, props), {
         isOpened: resolvedIsOpened,
@@ -2284,7 +2401,7 @@ var MarketDetails = (props) => {
     );
   }
   if (isFetchingEvent) {
-    return /* @__PURE__ */ jsx3(
+    return /* @__PURE__ */ jsx4(
       MarketDetailsLoadingState,
       {
         isOpened: resolvedIsOpened,
@@ -2295,11 +2412,11 @@ var MarketDetails = (props) => {
   }
   if (!fetchedEvent) {
     if (isErrorWithStatus(eventError, 404)) {
-      return /* @__PURE__ */ jsx3(MarketDetailsNotFoundState, { ariaLabel: props.ariaLabel, classNames: props.classNames });
+      return /* @__PURE__ */ jsx4(MarketDetailsNotFoundState, { ariaLabel: props.ariaLabel, classNames: props.classNames });
     }
-    return /* @__PURE__ */ jsx3(MarketDetailsUnavailableState, { ariaLabel: props.ariaLabel, classNames: props.classNames });
+    return /* @__PURE__ */ jsx4(MarketDetailsUnavailableState, { ariaLabel: props.ariaLabel, classNames: props.classNames });
   }
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     MarketDetailsContent,
     __spreadProps(__spreadValues({}, props), {
       isOpened: resolvedIsOpened,
@@ -2311,8 +2428,8 @@ var MarketDetails = (props) => {
 MarketDetails.displayName = "MarketDetails";
 
 // src/events/list/index.tsx
-import { useCallback, useEffect as useEffect3, useMemo as useMemo4, useRef, useState as useState3 } from "react";
-import { useEvents, useLabels as useLabels4 } from "@agg-market/hooks";
+import { useCallback, useEffect as useEffect3, useMemo as useMemo5, useRef, useState as useState3 } from "react";
+import { useEvents, useLabels as useLabels5 } from "@agg-market/hooks";
 
 // src/events/list/event-list.constants.ts
 var POLYMARKET_VENUE = "polymarket";
@@ -2363,14 +2480,14 @@ var resolveTabVenus = (tab) => {
 };
 
 // src/events/list/index.tsx
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var renderTabIcon = (tab, isActive) => {
   if (tab.venueLogo) {
-    return /* @__PURE__ */ jsx4(VenueLogo, { venue: tab.venueLogo, size: "small" });
+    return /* @__PURE__ */ jsx5(VenueLogo, { venue: tab.venueLogo, size: "small" });
   }
   if (!tab.iconName)
     return null;
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx5(
     Icon,
     {
       name: tab.iconName,
@@ -2415,21 +2532,21 @@ var EventList = ({
   categoryIds
 }) => {
   var _a, _b;
-  const labels = useLabels4();
-  const defaultEventListTabs = useMemo4(() => {
+  const labels = useLabels5();
+  const defaultEventListTabs = useMemo5(() => {
     return getDefaultEventListTabs(labels);
   }, [labels]);
   const [activeTabValue, setActiveTabValue] = useState3(
     (_b = (_a = defaultEventListTabs[0]) == null ? void 0 : _a.value) != null ? _b : "matched"
   );
   const [_shouldUseSelectOverflow, setShouldUseSelectOverflow] = useState3(false);
-  const activeTab = useMemo4(() => {
+  const activeTab = useMemo5(() => {
     return defaultEventListTabs.find((tab) => tab.value === activeTabValue);
   }, [activeTabValue]);
-  const venues = useMemo4(() => {
+  const venues = useMemo5(() => {
     return resolveTabVenus(activeTab);
   }, [activeTab]);
-  const resolvedMaxVisibleItems = useMemo4(() => {
+  const resolvedMaxVisibleItems = useMemo5(() => {
     if (!Number.isFinite(maxVisibleItems))
       return void 0;
     return Math.max(1, Math.floor(maxVisibleItems));
@@ -2442,16 +2559,16 @@ var EventList = ({
     categoryIds,
     limit: requestLimit
   });
-  const filteredEvents = useMemo4(() => {
+  const filteredEvents = useMemo5(() => {
     return filterEventsByTabValue(events, activeTabValue);
   }, [events, activeTabValue]);
-  const tileEvents = useMemo4(() => {
+  const tileEvents = useMemo5(() => {
     const normalizedEvents = filteredEvents.map((event) => mapEventToEventListItemEvent(event)).filter((event) => event != null);
     if (resolvedMaxVisibleItems == null)
       return normalizedEvents;
     return normalizedEvents.slice(0, resolvedMaxVisibleItems);
   }, [filteredEvents, resolvedMaxVisibleItems]);
-  const tabsItems = useMemo4(() => {
+  const tabsItems = useMemo5(() => {
     return defaultEventListTabs.map((tab) => {
       const isActive = tab.value === activeTabValue;
       return {
@@ -2540,7 +2657,7 @@ var EventList = ({
     "md:[grid-template-columns:repeat(var(--agg-event-list-columns),minmax(0,1fr))]"
   );
   if (shouldRenderLoadingState) {
-    return /* @__PURE__ */ jsx4(Skeleton, { view: "event-list", ariaLabel: labels.eventList.loading(title) });
+    return /* @__PURE__ */ jsx5(Skeleton, { view: "event-list", ariaLabel: labels.eventList.loading(title) });
   }
   return /* @__PURE__ */ jsxs4("section", { className: "flex w-full flex-col gap-5", children: [
     /* @__PURE__ */ jsxs4(
@@ -2549,8 +2666,8 @@ var EventList = ({
         ref: headerRef,
         className: "flex flex-col sm:flex-row w-full flex-nowrap items-start sm:items-center justify-between gap-2 sm:gap-4",
         children: [
-          /* @__PURE__ */ jsx4("div", { ref: titleRef, className: "min-w-0", children: /* @__PURE__ */ jsx4(Typography, { as: "h2", variant: "title", className: "truncate [&::first-letter]:uppercase", children: title }) }),
-          /* @__PURE__ */ jsx4(
+          /* @__PURE__ */ jsx5("div", { ref: titleRef, className: "min-w-0", children: /* @__PURE__ */ jsx5(Typography, { as: "h2", variant: "title", className: "truncate [&::first-letter]:uppercase", children: title }) }),
+          /* @__PURE__ */ jsx5(
             Tabs,
             {
               ariaLabel: labels.eventList.tabsAria(title),
@@ -2563,7 +2680,7 @@ var EventList = ({
       }
     ),
     /* @__PURE__ */ jsxs4("div", { className: gridClassName, style: gridStyle, children: [
-      tileEvents.map((event) => /* @__PURE__ */ jsx4(
+      tileEvents.map((event) => /* @__PURE__ */ jsx5(
         EventListItem,
         {
           event,
@@ -2574,7 +2691,7 @@ var EventList = ({
         },
         event.id
       )),
-      Array.from({ length: loadingPlaceholderCount }).map((_, index) => /* @__PURE__ */ jsx4(
+      Array.from({ length: loadingPlaceholderCount }).map((_, index) => /* @__PURE__ */ jsx5(
         EventListItem,
         {
           isLoading: true,
@@ -2584,7 +2701,7 @@ var EventList = ({
         },
         `loading-${index}`
       )),
-      !isLoading && !isError && (tileEvents == null ? void 0 : tileEvents.length) === 0 ? /* @__PURE__ */ jsx4(Card, { className: "col-span-full overflow-hidden shadow-none hover:shadow-none", children: /* @__PURE__ */ jsx4(
+      !isLoading && !isError && (tileEvents == null ? void 0 : tileEvents.length) === 0 ? /* @__PURE__ */ jsx5(Card, { className: "col-span-full overflow-hidden shadow-none hover:shadow-none", children: /* @__PURE__ */ jsx5(
         StateMessage,
         {
           ariaLabel: labels.eventList.emptyAria,
@@ -2593,7 +2710,7 @@ var EventList = ({
           className: "min-h-[320px]"
         }
       ) }) : null,
-      isError ? /* @__PURE__ */ jsx4(
+      isError ? /* @__PURE__ */ jsx5(
         Typography,
         {
           variant: "body",
@@ -2602,7 +2719,7 @@ var EventList = ({
         }
       ) : null
     ] }),
-    shouldPaginate && hasNextPage ? /* @__PURE__ */ jsx4("div", { ref: loadMoreRef, className: "h-px w-full", "aria-hidden": true }) : null
+    shouldPaginate && hasNextPage ? /* @__PURE__ */ jsx5("div", { ref: loadMoreRef, className: "h-px w-full", "aria-hidden": true }) : null
   ] });
 };
 EventList.displayName = "EventList";