@agg-market/ui 0.0.3 → 0.0.4

package/dist/{chunk-7XRKA6XF.mjs → chunk-RXACBTON.mjs}

@@ -1,15 +1,15 @@
 import {
   LoadingIcon
-} from "./chunk-FZTAHWOS.mjs";
+} from "./chunk-OGI343OV.mjs";
 import {
   VenueLogo
-} from "./chunk-LY6474C4.mjs";
+} from "./chunk-BLSHXIAH.mjs";
 import {
   Icon
-} from "./chunk-DA6KZWSK.mjs";
+} from "./chunk-F236MLT6.mjs";
 import {
   Button
-} from "./chunk-J6L5BLKX.mjs";
+} from "./chunk-PGSPYQOW.mjs";
 import {
   AGG_ROOT_CLASS_NAME,
   __spreadProps,
@@ -18,7 +18,7 @@ import {
   formatUsd,
   getMotionClassName,
   shortenAddress
-} from "./chunk-GC3QIIH7.mjs";
+} from "./chunk-GJ4U5NCE.mjs";
 
 // src/auth/connect-button/index.tsx
 import { useEffect, useMemo, useRef, useState } from "react";

package/dist/{chunk-A4QJAOZW.mjs → chunk-USLTNDJA.mjs}

@@ -1,26 +1,26 @@
 import {
   Settlement
-} from "./chunk-J7OETCZ7.mjs";
+} from "./chunk-QFQHD2V6.mjs";
 import {
   PlaceOrder
-} from "./chunk-5MN6ZNFA.mjs";
+} from "./chunk-VUDJ3PYM.mjs";
 import {
   EventListItemDetails
-} from "./chunk-4NK2FNAG.mjs";
+} from "./chunk-ZHKMDK5M.mjs";
 import {
   MarketDetails
-} from "./chunk-764YUN2J.mjs";
+} from "./chunk-XELWY7SO.mjs";
 import {
   Typography
-} from "./chunk-DQ6XFBYJ.mjs";
+} from "./chunk-DYEWXEEY.mjs";
 import {
   Card
-} from "./chunk-YUIZZ6XE.mjs";
+} from "./chunk-3O4U3E5I.mjs";
 import {
   __spreadProps,
   __spreadValues,
   cn
-} from "./chunk-GC3QIIH7.mjs";
+} from "./chunk-GJ4U5NCE.mjs";
 
 // src/pages/event-market/index.tsx
 import { useEffect, useMemo, useState } from "react";

package/dist/{chunk-FACIYUNK.mjs → chunk-VC7LTPQD.mjs}

@@ -1,11 +1,11 @@
 import {
   SwitchButton
-} from "./chunk-TTOR7JCT.mjs";
+} from "./chunk-JRS2M5GY.mjs";
 import {
   __spreadProps,
   __spreadValues,
   cn
-} from "./chunk-GC3QIIH7.mjs";
+} from "./chunk-GJ4U5NCE.mjs";
 
 // src/primitives/chart/index.tsx
 import dayjs from "dayjs";

package/dist/{chunk-CKTAVEW2.mjs → chunk-VIP7HSOU.mjs}

@@ -1,11 +1,11 @@
 import {
   CloseIcon
-} from "./chunk-VYNVBJK6.mjs";
+} from "./chunk-NDG43KGL.mjs";
 import {
   AGG_ROOT_CLASS_NAME,
   cn,
   getMotionClassName
-} from "./chunk-GC3QIIH7.mjs";
+} from "./chunk-GJ4U5NCE.mjs";
 
 // src/primitives/modal/index.tsx
 import * as Dialog from "@radix-ui/react-dialog";

package/dist/{chunk-5MN6ZNFA.mjs → chunk-VUDJ3PYM.mjs}

@@ -2,30 +2,30 @@ import {
   defaultTradingDisclaimer,
   getTradingDateLabel,
   getTradingVenueLabel
-} from "./chunk-KDBYDMYV.mjs";
+} from "./chunk-OBCHURW5.mjs";
 import {
   Tabs
-} from "./chunk-QXFDXXDB.mjs";
+} from "./chunk-LWTQD345.mjs";
 import {
   Skeleton,
   skeletonViews
-} from "./chunk-NFYS557L.mjs";
+} from "./chunk-JH5VMNDL.mjs";
 import {
   VenueLogo
-} from "./chunk-LY6474C4.mjs";
+} from "./chunk-BLSHXIAH.mjs";
 import {
   Icon
-} from "./chunk-DA6KZWSK.mjs";
+} from "./chunk-F236MLT6.mjs";
 import {
   Button
-} from "./chunk-J6L5BLKX.mjs";
+} from "./chunk-PGSPYQOW.mjs";
 import {
   Card
-} from "./chunk-YUIZZ6XE.mjs";
+} from "./chunk-3O4U3E5I.mjs";
 import {
   cn,
   getMotionClassName
-} from "./chunk-GC3QIIH7.mjs";
+} from "./chunk-GJ4U5NCE.mjs";
 
 // src/trading/place-order/index.tsx
 import { useEffect, useMemo, useState } from "react";
@@ -277,7 +277,7 @@ var PlaceOrder = ({
               "div",
               {
                 className: cn(
-                  "pointer-events-none absolute inset-x-0 bottom-0 h-11 bg-gradient-to-b from-transparent to-agg-trade-highlight-glow",
+                  "pointer-events-none absolute inset-x-0 bottom-0 h-11 bg-linear-to-b from-transparent to-agg-trade-highlight-glow",
                   hasHighlightedRouting ? "opacity-100" : "opacity-0"
                 )
               }

package/dist/{chunk-2NCBX6XI.mjs → chunk-W2DMBW4E.mjs}

@@ -9,31 +9,31 @@ import {
   resolveVenueLabel,
   resolveVisibleOutcomes,
   selectPrimaryVenueMarket
-} from "./chunk-PAQ542ER.mjs";
+} from "./chunk-GHB3GOCW.mjs";
 import {
   Badge
-} from "./chunk-MG243DSX.mjs";
+} from "./chunk-AEMAY3MR.mjs";
 import {
   Skeleton,
   baseCardClassName
-} from "./chunk-NFYS557L.mjs";
+} from "./chunk-JH5VMNDL.mjs";
 import {
   VenueLogo
-} from "./chunk-LY6474C4.mjs";
+} from "./chunk-BLSHXIAH.mjs";
 import {
   Icon
-} from "./chunk-DA6KZWSK.mjs";
+} from "./chunk-F236MLT6.mjs";
 import {
   Typography
-} from "./chunk-DQ6XFBYJ.mjs";
+} from "./chunk-DYEWXEEY.mjs";
 import {
   Card
-} from "./chunk-YUIZZ6XE.mjs";
+} from "./chunk-3O4U3E5I.mjs";
 import {
   __objRest,
   __spreadValues,
   cn
-} from "./chunk-GC3QIIH7.mjs";
+} from "./chunk-GJ4U5NCE.mjs";
 
 // src/events/item/index.tsx
 import dayjs from "dayjs";

package/dist/{chunk-764YUN2J.mjs → chunk-XELWY7SO.mjs}

@@ -4,17 +4,17 @@ import {
   resolveOutcomeLabels,
   resolveOutcomesByVenue,
   resolveSeriesColor
-} from "./chunk-XDAEEJYR.mjs";
+} from "./chunk-P23GR7NX.mjs";
 import {
   Tabs
-} from "./chunk-QXFDXXDB.mjs";
+} from "./chunk-LWTQD345.mjs";
 import {
   getVenueSummary,
   normalizeProbability,
   resolveTileImage,
   resolveTileTitle,
   selectPrimaryVenueMarket
-} from "./chunk-PAQ542ER.mjs";
+} from "./chunk-GHB3GOCW.mjs";
 import {
   Skeleton,
   eventListItemDetailsTimeRanges,
@@ -22,31 +22,31 @@ import {
   marketDetailsBaseCardClassName,
   marketDetailsDefaultIsOpened,
   orderBookRowLimitDefault
-} from "./chunk-NFYS557L.mjs";
+} from "./chunk-JH5VMNDL.mjs";
 import {
   LoadingIcon
-} from "./chunk-FZTAHWOS.mjs";
+} from "./chunk-OGI343OV.mjs";
 import {
   VenueLogo
-} from "./chunk-LY6474C4.mjs";
+} from "./chunk-BLSHXIAH.mjs";
 import {
   Typography
-} from "./chunk-DQ6XFBYJ.mjs";
+} from "./chunk-DYEWXEEY.mjs";
 import {
   Card
-} from "./chunk-YUIZZ6XE.mjs";
+} from "./chunk-3O4U3E5I.mjs";
 import {
   LineChart
-} from "./chunk-FACIYUNK.mjs";
+} from "./chunk-VC7LTPQD.mjs";
 import {
   SwitchButton
-} from "./chunk-TTOR7JCT.mjs";
+} from "./chunk-JRS2M5GY.mjs";
 import {
   __spreadProps,
   __spreadValues,
   cn,
   getMotionClassName
-} from "./chunk-GC3QIIH7.mjs";
+} from "./chunk-GJ4U5NCE.mjs";
 
 // src/events/market-details/index.tsx
 import { useEffect, useId, useMemo, useState } from "react";
@@ -190,22 +190,24 @@ var resolveOrderBookRows = ({
   const tone = side === "asks" ? "negative" : "positive";
   const rows = data.flatMap((result) => {
     var _a;
-    return ((_a = result.orderbook[side]) != null ? _a : []).flatMap((level, index) => {
-      const parsedLevel = OrderBookLevelSchema.safeParse(level);
-      if (!parsedLevel.success)
-        return [];
-      const parsedRow = OrderBookRowSchema.safeParse({
-        id: `${result.market.id}-${side}-${index}-${parsedLevel.data.price}`,
-        venue: result.market.venue,
-        price: parsedLevel.data.price,
-        size: parsedLevel.data.size,
-        total: parsedLevel.data.price * parsedLevel.data.size,
-        tone
-      });
-      if (!parsedRow.success)
-        return [];
-      return [parsedRow.data];
-    });
+    return ((_a = result.orderbook[side]) != null ? _a : []).flatMap(
+      (level, index) => {
+        const parsedLevel = OrderBookLevelSchema.safeParse(level);
+        if (!parsedLevel.success)
+          return [];
+        const parsedRow = OrderBookRowSchema.safeParse({
+          id: `${result.market.id}-${side}-${index}-${parsedLevel.data.price}`,
+          venue: result.market.venue,
+          price: parsedLevel.data.price,
+          size: parsedLevel.data.size,
+          total: parsedLevel.data.price * parsedLevel.data.size,
+          tone
+        });
+        if (!parsedRow.success)
+          return [];
+        return [parsedRow.data];
+      }
+    );
   });
   const sortedRows = [...rows].sort((left, right) => {
     if (side === "asks")
@@ -427,6 +429,7 @@ var MarketDetailsContent = ({
       return resolveInitialOutcomeLabel((_a = model == null ? void 0 : model.outcomeLabels) != null ? _a : [], defaultOutcomeLabel);
     }
   );
+  const [selectedGraphVenue, setSelectedGraphVenue] = useState(null);
   useEffect(() => {
     var _a;
     setSelectedOutcomeLabel(
@@ -443,17 +446,43 @@ var MarketDetailsContent = ({
       return void 0;
     return model.probabilityByLabel.get(selectedOutcomeLabel);
   }, [model, selectedOutcomeLabel]);
+  const outcomesByLabel = useMemo(() => {
+    const outcomesByLabelMap = /* @__PURE__ */ new Map();
+    if (!model) {
+      return outcomesByLabelMap;
+    }
+    headerOutcomeItems.forEach((headerOutcomeItem) => {
+      outcomesByLabelMap.set(
+        headerOutcomeItem.label,
+        resolveOutcomesByVenue(model.market.venueMarkets, headerOutcomeItem.label)
+      );
+    });
+    return outcomesByLabelMap;
+  }, [headerOutcomeItems, model]);
   const selectedOutcomesByVenue = useMemo(() => {
-    if (!model || !selectedOutcomeLabel)
+    var _a;
+    if (!selectedOutcomeLabel)
       return [];
-    return resolveOutcomesByVenue(model.market.venueMarkets, selectedOutcomeLabel);
-  }, [model, selectedOutcomeLabel]);
+    return (_a = outcomesByLabel.get(selectedOutcomeLabel)) != null ? _a : [];
+  }, [outcomesByLabel, selectedOutcomeLabel]);
   const timeWindow = useMemo(() => {
     return getTimeWindowByRange(selectedTimeRange);
   }, [selectedTimeRange]);
+  const graphOutcomes = 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 priceHistoryGroups = useMemo(() => {
-    return buildPriceHistoryGroups(selectedOutcomesByVenue);
-  }, [selectedOutcomesByVenue]);
+    return buildPriceHistoryGroups(graphOutcomes);
+  }, [graphOutcomes]);
   const { data: priceHistoryData, isLoading: isPriceHistoryLoading } = usePriceHistory(__spreadProps(__spreadValues({
     groups: priceHistoryGroups
   }, timeWindow), {
@@ -484,24 +513,71 @@ var MarketDetailsContent = ({
       depth: orderBookDepth
     });
   }, [orderBookData, orderBookDepth]);
-  const graphSeries = useMemo(() => {
-    if (!(priceHistoryData == null ? void 0 : priceHistoryData.length))
-      return [];
-    return priceHistoryData.map((history, index) => {
+  const priceHistoryByVenue = 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 = useMemo(() => {
+    const seriesByOutcomeLabel = /* @__PURE__ */ new Map();
+    const resolveOutcomeCandidateIds = (outcomeByVenue) => {
       var _a;
-      const matchingOutcome = selectedOutcomesByVenue.find((item) => {
-        return item.outcome.id === history.marketId || item.outcome.externalIdentifier === history.marketId || item.market.externalIdentifier === history.marketId;
-      });
-      return {
-        id: `${history.venue}-${history.marketId}-${index}`,
-        color: resolveSeriesColor((_a = matchingOutcome == null ? void 0 : matchingOutcome.venue) != null ? _a : history.venue, index),
-        points: history.points.map((point) => ({
+      return [
+        outcomeByVenue.outcome.id,
+        (_a = outcomeByVenue.outcome.externalIdentifier) != null ? _a : void 0,
+        outcomeByVenue.market.externalIdentifier
+      ].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 = resolveOutcomeCandidateIds(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
-        }))
-      };
-    }).filter((seriesItem) => seriesItem.points.length > 0);
-  }, [priceHistoryData, selectedOutcomesByVenue]);
+        })).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;
+  }, [headerOutcomeItems, outcomesByLabel, priceHistoryByVenue]);
+  const graphSeries = useMemo(() => {
+    var _a;
+    if (!selectedOutcomeLabel)
+      return [];
+    const seriesForOutcomeLabel = (_a = graphSeriesByOutcomeLabel.get(selectedOutcomeLabel)) != null ? _a : [];
+    if (!selectedGraphVenue)
+      return seriesForOutcomeLabel;
+    return seriesForOutcomeLabel.filter((seriesItem) => seriesItem.venue === selectedGraphVenue);
+  }, [graphSeriesByOutcomeLabel, selectedGraphVenue, selectedOutcomeLabel]);
   const otherRows = useMemo(() => {
     if (!model)
       return [];
@@ -525,6 +601,22 @@ var MarketDetailsContent = ({
     setIsOpened((prev) => !prev);
     onOpenChange == null ? void 0 : onOpenChange(!isOpened);
   };
+  const handleGraphVenueToggle = (venue) => {
+    setSelectedGraphVenue((currentVenue) => {
+      if (currentVenue === venue)
+        return null;
+      return venue;
+    });
+  };
+  useEffect(() => {
+    if (!selectedGraphVenue) {
+      return;
+    }
+    if (selectedOutcomesByVenue.some((item) => item.venue === selectedGraphVenue)) {
+      return;
+    }
+    setSelectedGraphVenue(null);
+  }, [selectedGraphVenue, selectedOutcomesByVenue]);
   if (!model) {
     return /* @__PURE__ */ jsx(MarketDetailsUnavailableState, { ariaLabel, classNames });
   }
@@ -700,10 +792,19 @@ var MarketDetailsContent = ({
                               return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 md:flex-row md:items-center md:justify-between", children: [
                                 /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: selectedOutcomesByVenue.map((item) => {
                                   const probability = formatProbabilityPercent(item.outcome.price);
+                                  const isActiveVenue = selectedGraphVenue === item.venue;
                                   return /* @__PURE__ */ jsxs(
-                                    "div",
+                                    "button",
                                     {
-                                      className: "inline-flex items-center gap-2 rounded-agg-full bg-agg-secondary-hover px-4 py-2",
+                                      type: "button",
+                                      "aria-label": `${item.venue} ${probability}`,
+                                      "aria-pressed": isActiveVenue,
+                                      className: cn(
+                                        "inline-flex items-center gap-2 rounded-agg-full border-2 px-4 py-2",
+                                        "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",
+                                        isActiveVenue ? "border-agg-primary bg-agg-secondary" : "border-transparent bg-agg-secondary-hover"
+                                      ),
+                                      onClick: () => handleGraphVenueToggle(item.venue),
                                       children: [
                                         /* @__PURE__ */ jsx(VenueLogo, { venue: item.venue, size: "xs" }),
                                         /* @__PURE__ */ jsx("span", { className: "text-agg-base leading-agg-6 text-agg-foreground", children: probability })

package/dist/chunk-ZDF7QP4G.mjs

@@ -0,0 +1,160 @@
+import {
+  Icon
+} from "./chunk-F236MLT6.mjs";
+import {
+  cn,
+  getMotionClassName
+} from "./chunk-GJ4U5NCE.mjs";
+
+// src/primitives/select/index.tsx
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useLabels, useSdkUiConfig } from "@agg-market/hooks";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Select = ({
+  items,
+  value,
+  onChange,
+  ariaLabel,
+  className,
+  disabled = false
+}) => {
+  var _a;
+  const labels = useLabels();
+  const { enableAnimations } = useSdkUiConfig();
+  const hasEnabledItems = items.some((item) => !item.disabled);
+  const hasAnyIcon = items.some((item) => item.iconUrl);
+  const [isOpen, setIsOpen] = useState(false);
+  const containerRef = useRef(null);
+  const close = useCallback(() => setIsOpen(false), []);
+  useEffect(() => {
+    if (!isOpen)
+      return;
+    const handlePointerDown = (e) => {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        close();
+      }
+    };
+    document.addEventListener("mousedown", handlePointerDown);
+    return () => document.removeEventListener("mousedown", handlePointerDown);
+  }, [isOpen, close]);
+  useEffect(() => {
+    if (!isOpen)
+      return;
+    const handleKey = (e) => {
+      if (e.key === "Escape")
+        close();
+    };
+    document.addEventListener("keydown", handleKey);
+    return () => document.removeEventListener("keydown", handleKey);
+  }, [isOpen, close]);
+  const isDisabled = disabled || !hasEnabledItems;
+  const selectedItem = items.find((item) => item.value === value);
+  if (!hasAnyIcon) {
+    return /* @__PURE__ */ jsxs("label", { className: cn("relative inline-flex w-full", className), children: [
+      /* @__PURE__ */ jsx(
+        "select",
+        {
+          "aria-label": ariaLabel != null ? ariaLabel : labels.common.selectAria,
+          className: cn(
+            "w-full appearance-none rounded-agg-md border border-agg-separator bg-agg-secondary px-4 py-2 pr-10 font-agg-sans text-agg-sm leading-agg-5 text-agg-foreground outline-none",
+            getMotionClassName(
+              enableAnimations,
+              "transition-[border-color,box-shadow] duration-200 ease-out"
+            ),
+            "focus:border-agg-primary focus:ring-2 focus:ring-agg-primary/15",
+            "disabled:cursor-not-allowed disabled:opacity-60"
+          ),
+          disabled: isDisabled,
+          value,
+          onChange: (event) => onChange(event.target.value),
+          children: items.map((item) => /* @__PURE__ */ jsx("option", { value: item.value, disabled: item.disabled, children: item.label }, item.value))
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute inset-y-0 right-3 inline-flex items-center justify-center text-agg-muted-foreground", children: /* @__PURE__ */ jsx(Icon, { name: "chevron-down", size: "s", color: "currentColor" }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: cn("relative inline-flex w-full", className), children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        "aria-label": ariaLabel != null ? ariaLabel : labels.common.selectAria,
+        "aria-expanded": isOpen,
+        "aria-haspopup": "listbox",
+        disabled: isDisabled,
+        className: cn(
+          "w-full rounded-agg-md border border-agg-separator bg-agg-secondary px-4 py-2 pr-10 font-agg-sans text-agg-sm leading-agg-5 text-agg-foreground outline-none",
+          "flex items-center gap-2 text-left",
+          getMotionClassName(
+            enableAnimations,
+            "transition-[border-color,box-shadow] duration-200 ease-out"
+          ),
+          "focus:border-agg-primary focus:ring-2 focus:ring-agg-primary/15",
+          "disabled:cursor-not-allowed disabled:opacity-60"
+        ),
+        onClick: () => setIsOpen((prev) => !prev),
+        children: [
+          (selectedItem == null ? void 0 : selectedItem.iconUrl) ? /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: selectedItem.iconUrl,
+              alt: "",
+              className: "h-4 w-4 shrink-0 rounded-sm object-contain"
+            }
+          ) : null,
+          /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: (_a = selectedItem == null ? void 0 : selectedItem.label) != null ? _a : "" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute inset-y-0 right-3 inline-flex items-center justify-center text-agg-muted-foreground", children: /* @__PURE__ */ jsx(Icon, { name: "chevron-down", size: "s", color: "currentColor" }) }),
+    isOpen ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "listbox",
+        "aria-label": ariaLabel != null ? ariaLabel : labels.common.selectAria,
+        className: "absolute top-full left-0 z-50 mt-1 w-full overflow-hidden rounded-agg-md border border-agg-separator bg-agg-secondary shadow-lg",
+        children: items.map((item) => {
+          const isSelected = item.value === value;
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              role: "option",
+              "aria-selected": isSelected,
+              disabled: item.disabled,
+              className: cn(
+                "flex w-full items-center gap-2 px-4 py-2 text-left text-agg-sm leading-agg-5 outline-none",
+                "hover:bg-agg-secondary-hover focus-visible:bg-agg-secondary-hover",
+                isSelected ? "font-agg-bold text-agg-primary" : "font-agg-normal text-agg-foreground",
+                item.disabled && "cursor-not-allowed opacity-60"
+              ),
+              onClick: () => {
+                if (!item.disabled) {
+                  onChange(item.value);
+                  close();
+                }
+              },
+              children: [
+                item.iconUrl ? /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: item.iconUrl,
+                    alt: "",
+                    className: "h-4 w-4 shrink-0 rounded-sm object-contain"
+                  }
+                ) : null,
+                /* @__PURE__ */ jsx("span", { className: "truncate", children: item.label })
+              ]
+            },
+            item.value
+          );
+        })
+      }
+    ) : null
+  ] });
+};
+Select.displayName = "Select";
+
+export {
+  Select
+};