@agg-market/ui 0.0.1

package/dist/chunk-M23S2DVV.mjs

@@ -0,0 +1,581 @@
+import {
+  buildPriceHistoryGroups,
+  formatDateLabel,
+  getDefaultSelectedTimeRange,
+  getTimeWindowByRange,
+  isDateLikeLabel,
+  resolveDefaultOutcomeLabel,
+  resolveOutcomeLabels,
+  resolveOutcomesByVenue,
+  resolveSeriesColor
+} from "./chunk-HJOBAMDU.mjs";
+import {
+  normalizeProbability,
+  resolveEventListItemEvent,
+  resolveTileImage,
+  resolveTileTitle,
+  selectPrimaryVenueMarket
+} from "./chunk-PAQ542ER.mjs";
+import {
+  Badge
+} from "./chunk-MG243DSX.mjs";
+import {
+  Skeleton,
+  detailsBaseCardClassName,
+  eventListItemDetailsTimeRanges
+} from "./chunk-P674XRDY.mjs";
+import {
+  VenueLogo
+} from "./chunk-4ADCXJE6.mjs";
+import {
+  Button
+} from "./chunk-GPBLZGJ2.mjs";
+import {
+  Typography
+} from "./chunk-DQ6XFBYJ.mjs";
+import {
+  Card
+} from "./chunk-P5PFQX75.mjs";
+import {
+  LineChart
+} from "./chunk-L6E6Q4C4.mjs";
+import {
+  SwitchButton
+} from "./chunk-3DV3D2LH.mjs";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues,
+  cn
+} from "./chunk-GC3QIIH7.mjs";
+
+// src/events/item-details/index.tsx
+import { useEffect, useMemo, useState } from "react";
+import { useEvent, useLabels, usePriceHistory, useSdkUiConfig } from "@agg/hooks";
+import { jsx, jsxs } from "react/jsx-runtime";
+var EventListItemDetailsLoadingState = ({
+  classNames,
+  ariaLabel
+}) => {
+  const labels = useLabels();
+  return /* @__PURE__ */ jsx(
+    Skeleton,
+    {
+      view: "event-list-item-details",
+      className: classNames == null ? void 0 : classNames.root,
+      ariaLabel: ariaLabel != null ? ariaLabel : labels.eventItemDetails.loading
+    }
+  );
+};
+var EventListItemDetailsUnavailableState = ({
+  classNames,
+  ariaLabel
+}) => {
+  const labels = useLabels();
+  return /* @__PURE__ */ jsx(
+    Card,
+    {
+      className: cn(detailsBaseCardClassName, classNames == null ? void 0 : classNames.root),
+      role: "status",
+      "aria-label": ariaLabel != null ? ariaLabel : labels.eventItemDetails.unavailableAria,
+      children: /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1", classNames == null ? void 0 : classNames.header), children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "title", className: cn("truncate", classNames == null ? void 0 : classNames.title), children: labels.eventItemDetails.unavailableTitle }),
+        /* @__PURE__ */ jsx(Typography, { variant: "body", className: "text-agg-muted-foreground", children: labels.eventItemDetails.unavailableDescription })
+      ] })
+    }
+  );
+};
+var EventListItemDetailsGraphSection = ({
+  venueMarkets,
+  outcomeLabels,
+  selectedOutcomeLabel,
+  onSelectedOutcomeLabelChange,
+  probabilityByLabel,
+  switchLabels,
+  isDateOutcomeMarket,
+  classNames,
+  showVenueLogo,
+  venueInfo,
+  formatPercent,
+  selectedTimeRange
+}) => {
+  const labels = useLabels();
+  const isLocalOutcomeSelection = !isDateOutcomeMarket && outcomeLabels.length === 2;
+  const [internalSelectedOutcomeLabel, setInternalSelectedOutcomeLabel] = useState(selectedOutcomeLabel);
+  const [selectedBinaryOutcome, setSelectedBinaryOutcome] = useState("Yes");
+  useEffect(() => {
+    setInternalSelectedOutcomeLabel(selectedOutcomeLabel);
+  }, [selectedOutcomeLabel]);
+  const resolvedSelectedOutcomeLabel = isLocalOutcomeSelection ? internalSelectedOutcomeLabel : selectedOutcomeLabel;
+  const selectedOutcomesByVenue = useMemo(() => {
+    return resolveOutcomesByVenue(venueMarkets, resolvedSelectedOutcomeLabel);
+  }, [resolvedSelectedOutcomeLabel, venueMarkets]);
+  const segmentedDisplayItems = useMemo(() => {
+    var _a;
+    if (isDateOutcomeMarket) {
+      const selectedOutcomeAverageProbability = (_a = probabilityByLabel.get(resolvedSelectedOutcomeLabel)) != null ? _a : 0;
+      const noProbability = Math.max(0, 1 - selectedOutcomeAverageProbability);
+      return [
+        {
+          label: labels.eventItemDetails.yes,
+          display: `${labels.eventItemDetails.yes} ${formatPercent(selectedOutcomeAverageProbability)}`,
+          isActive: selectedBinaryOutcome === "Yes",
+          onSelect: () => setSelectedBinaryOutcome("Yes")
+        },
+        {
+          label: labels.eventItemDetails.no,
+          display: `${labels.eventItemDetails.no} ${formatPercent(noProbability)}`,
+          isActive: selectedBinaryOutcome === "No",
+          onSelect: () => setSelectedBinaryOutcome("No")
+        }
+      ];
+    }
+    return switchLabels.map((label) => {
+      const probability = probabilityByLabel.get(label);
+      const probabilitySuffix = probability == null ? "" : ` ${formatPercent(probability)}`;
+      return {
+        label,
+        display: `${label}${probabilitySuffix}`,
+        isActive: resolvedSelectedOutcomeLabel === label,
+        onSelect: () => {
+          if (isLocalOutcomeSelection) {
+            setInternalSelectedOutcomeLabel(label);
+            return;
+          }
+          onSelectedOutcomeLabelChange(label);
+        }
+      };
+    });
+  }, [
+    formatPercent,
+    isDateOutcomeMarket,
+    isLocalOutcomeSelection,
+    onSelectedOutcomeLabelChange,
+    probabilityByLabel,
+    resolvedSelectedOutcomeLabel,
+    selectedBinaryOutcome,
+    switchLabels
+  ]);
+  const priceHistoryGroups = useMemo(() => {
+    return buildPriceHistoryGroups(selectedOutcomesByVenue);
+  }, [selectedOutcomesByVenue]);
+  const timeWindow = useMemo(() => {
+    return getTimeWindowByRange(selectedTimeRange);
+  }, [selectedTimeRange]);
+  const { data: priceHistoryData, isLoading: isPriceHistoryLoading } = usePriceHistory(__spreadProps(__spreadValues({
+    groups: priceHistoryGroups
+  }, timeWindow), {
+    enabled: priceHistoryGroups.length > 0
+  }));
+  const chartSeries = useMemo(() => {
+    if (!(priceHistoryData == null ? void 0 : priceHistoryData.length))
+      return [];
+    return priceHistoryData.map((history, index) => {
+      var _a, _b;
+      const matchingOutcomeByVenue = (_a = selectedOutcomesByVenue.find((item) => {
+        return item.outcome.id === history.marketId || item.outcome.externalIdentifier === history.marketId || item.market.externalIdentifier === history.marketId;
+      })) != null ? _a : selectedOutcomesByVenue.find((item) => item.venue === history.venue);
+      const color = resolveSeriesColor((_b = matchingOutcomeByVenue == null ? void 0 : matchingOutcomeByVenue.venue) != null ? _b : history.venue, index);
+      return {
+        id: `${history.venue}-${history.marketId}-${index}`,
+        color,
+        points: history.points.map((point) => ({
+          time: point.timestamp,
+          value: point.price * 100
+        }))
+      };
+    }).filter((seriesItem) => seriesItem.points.length > 0);
+  }, [priceHistoryData, selectedOutcomesByVenue]);
+  return /* @__PURE__ */ jsx(
+    LineChart,
+    {
+      classNames: { root: classNames == null ? void 0 : classNames.chart },
+      series: chartSeries,
+      height: 300,
+      isLoading: isPriceHistoryLoading,
+      showSeriesControls: selectedOutcomesByVenue.length > 0 || segmentedDisplayItems.length > 0,
+      renderSeriesControls: () => {
+        var _a, _b, _c, _d;
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn("flex flex-row items-center justify-between gap-4", classNames == null ? void 0 : classNames.summary),
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "flex min-w-0 gap-2 overflow-x-auto pb-1 md:flex-wrap md:overflow-visible md:pb-0",
+                    classNames == null ? void 0 : classNames.outcomeBadges
+                  ),
+                  children: selectedOutcomesByVenue.map((outcomeByVenue) => {
+                    var _a2;
+                    const probability = normalizeProbability(outcomeByVenue.outcome.price);
+                    const text = probability == null ? "-" : formatPercent(probability);
+                    return /* @__PURE__ */ jsx(
+                      Badge,
+                      {
+                        text,
+                        size: "l",
+                        prefix: showVenueLogo ? /* @__PURE__ */ jsx(
+                          VenueLogo,
+                          {
+                            venue: outcomeByVenue.venue,
+                            size: "s",
+                            title: (_a2 = venueInfo == null ? void 0 : venueInfo[outcomeByVenue.venue]) == null ? void 0 : _a2.label
+                          }
+                        ) : void 0,
+                        classNames: {
+                          root: "h-9 shrink-0 bg-agg-secondary-hover px-4 text-agg-base leading-agg-6"
+                        }
+                      },
+                      `${outcomeByVenue.market.id}-${outcomeByVenue.outcome.id}`
+                    );
+                  })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                SwitchButton,
+                {
+                  ariaLabel: labels.eventItemDetails.outcomeSelectorAria,
+                  className: cn("w-full md:w-fit", classNames == null ? void 0 : classNames.segmentedControl),
+                  value: (_d = (_c = (_a = segmentedDisplayItems.find((item) => item.isActive)) == null ? void 0 : _a.label) != null ? _c : (_b = segmentedDisplayItems[0]) == null ? void 0 : _b.label) != null ? _d : "",
+                  onValueChange: (nextValue) => {
+                    var _a2;
+                    (_a2 = segmentedDisplayItems.find((item) => item.label === nextValue)) == null ? void 0 : _a2.onSelect();
+                  },
+                  options: segmentedDisplayItems.map((segmentedItem) => ({
+                    value: segmentedItem.label,
+                    label: segmentedItem.display,
+                    ariaLabel: segmentedItem.display
+                  }))
+                }
+              )
+            ]
+          }
+        );
+      }
+    }
+  );
+};
+var EventListItemDetailsContent = ({
+  event,
+  title,
+  image,
+  showVenueLogo = true,
+  classNames,
+  venueInfo,
+  detailsStats,
+  ariaLabel,
+  defaultTimeRange
+}) => {
+  const config = useSdkUiConfig();
+  const labels = useLabels();
+  const venueMarkets = useMemo(() => {
+    var _a, _b, _c;
+    return (_c = (_b = (_a = event.markets) == null ? void 0 : _a[0]) == null ? void 0 : _b.venueMarkets) != null ? _c : [];
+  }, [event.markets]);
+  const primaryVenueMarket = useMemo(() => {
+    return selectPrimaryVenueMarket(venueMarkets);
+  }, [venueMarkets]);
+  const outcomeLabels = useMemo(() => {
+    return resolveOutcomeLabels(venueMarkets);
+  }, [venueMarkets]);
+  const [selectedOutcomeLabel, setSelectedOutcomeLabel] = useState(() => {
+    return resolveDefaultOutcomeLabel(outcomeLabels);
+  });
+  const [selectedTimeRange, setSelectedTimeRange] = useState(() => {
+    return getDefaultSelectedTimeRange(defaultTimeRange);
+  });
+  useEffect(() => {
+    setSelectedTimeRange(getDefaultSelectedTimeRange(defaultTimeRange));
+  }, [defaultTimeRange]);
+  const resolvedTitle = resolveTileTitle(event, primaryVenueMarket, title);
+  const resolvedImage = resolveTileImage(event, primaryVenueMarket, image);
+  const isDateOutcomeMarket = outcomeLabels.length > 2 && outcomeLabels.every(isDateLikeLabel);
+  const outcomeSelectorLabels = outcomeLabels;
+  const probabilityByLabel = useMemo(() => {
+    return new Map(
+      outcomeLabels.map((label) => {
+        const outcomesByVenue = resolveOutcomesByVenue(venueMarkets, label);
+        const probabilities = outcomesByVenue.map((item) => normalizeProbability(item.outcome.price)).filter((value) => value != null);
+        if (probabilities.length === 0) {
+          return [label, void 0];
+        }
+        const averageProbability = probabilities.reduce((sum, value) => sum + value, 0) / probabilities.length;
+        return [label, averageProbability];
+      })
+    );
+  }, [outcomeLabels, venueMarkets]);
+  const mainOutcomeLabel = useMemo(() => {
+    if (outcomeLabels.length === 0)
+      return void 0;
+    return [...outcomeLabels].sort((left, right) => {
+      var _a, _b;
+      const leftProbability = (_a = probabilityByLabel.get(left)) != null ? _a : -1;
+      const rightProbability = (_b = probabilityByLabel.get(right)) != null ? _b : -1;
+      return rightProbability - leftProbability;
+    })[0];
+  }, [outcomeLabels, probabilityByLabel]);
+  useEffect(() => {
+    if (!outcomeLabels.length) {
+      setSelectedOutcomeLabel(void 0);
+      return;
+    }
+    if (selectedOutcomeLabel && outcomeLabels.includes(selectedOutcomeLabel)) {
+      return;
+    }
+    const fallbackOutcomeLabel = isDateOutcomeMarket ? resolveDefaultOutcomeLabel(outcomeLabels) : mainOutcomeLabel != null ? mainOutcomeLabel : resolveDefaultOutcomeLabel(outcomeLabels);
+    setSelectedOutcomeLabel(fallbackOutcomeLabel);
+  }, [isDateOutcomeMarket, mainOutcomeLabel, outcomeLabels, selectedOutcomeLabel]);
+  const switchLabels = useMemo(() => {
+    var _a, _b;
+    if (isDateOutcomeMarket) {
+      return [labels.eventItemDetails.yes, labels.eventItemDetails.no];
+    }
+    const sortedOutcomeLabels = [...outcomeLabels].sort((left, right) => {
+      var _a2, _b2;
+      const leftProbability = (_a2 = probabilityByLabel.get(left)) != null ? _a2 : -1;
+      const rightProbability = (_b2 = probabilityByLabel.get(right)) != null ? _b2 : -1;
+      return rightProbability - leftProbability;
+    });
+    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,
+    labels.eventItemDetails.no,
+    labels.eventItemDetails.yes,
+    outcomeLabels,
+    probabilityByLabel
+  ]);
+  const volumeLabel = useMemo(() => {
+    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}`;
+  }, [config, event.volume, labels.eventItemDetails.volumeSuffix, primaryVenueMarket == null ? void 0 : primaryVenueMarket.volume]);
+  if (!primaryVenueMarket || !selectedOutcomeLabel) {
+    return /* @__PURE__ */ jsx(EventListItemDetailsUnavailableState, { classNames, ariaLabel });
+  }
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      className: cn(detailsBaseCardClassName, classNames == null ? void 0 : classNames.root),
+      "aria-label": ariaLabel != null ? ariaLabel : resolvedTitle,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: cn("flex items-start gap-3 md:gap-4", classNames == null ? void 0 : classNames.header), children: [
+          resolvedImage ? /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: resolvedImage,
+              alt: "",
+              className: "size-10 rounded-agg-lg object-cover md:size-[60px]"
+            }
+          ) : null,
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-3", children: [
+            /* @__PURE__ */ jsx(
+              Typography,
+              {
+                variant: "value",
+                className: cn(
+                  "min-w-0 text-agg-base font-agg-bold leading-agg-6 whitespace-normal [display:-webkit-box] [-webkit-box-orient:vertical] [-webkit-line-clamp:2] md:text-agg-2xl md:leading-agg-8 md:[display:block] md:truncate md:whitespace-nowrap",
+                  classNames == null ? void 0 : classNames.title
+                ),
+                children: resolvedTitle
+              }
+            ),
+            outcomeSelectorLabels.length > 2 ? /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "flex items-center gap-2 overflow-x-auto pb-1 md:flex-wrap md:overflow-visible md:pb-0",
+                  classNames == null ? void 0 : classNames.headerPills
+                ),
+                children: outcomeSelectorLabels.map((outcomeSelectorLabel) => {
+                  const isActive = outcomeSelectorLabel === selectedOutcomeLabel;
+                  const displayLabel = isDateLikeLabel(outcomeSelectorLabel) ? formatDateLabel(outcomeSelectorLabel) : outcomeSelectorLabel;
+                  return /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      size: "s",
+                      variant: "secondary",
+                      "aria-pressed": isActive,
+                      className: cn(
+                        "h-auto shrink-0 rounded-agg-full px-4 py-1.5 text-agg-sm leading-agg-5",
+                        "border-2",
+                        isActive ? "border-agg-primary bg-agg-secondary text-agg-foreground font-agg-bold" : "border-transparent bg-agg-secondary-hover text-agg-foreground font-agg-normal"
+                      ),
+                      onClick: () => setSelectedOutcomeLabel(outcomeSelectorLabel),
+                      children: displayLabel
+                    },
+                    outcomeSelectorLabel
+                  );
+                })
+              }
+            ) : null
+          ] })
+        ] }),
+        detailsStats && detailsStats.length > 0 ? /* @__PURE__ */ jsx("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__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ jsx(
+              Typography,
+              {
+                variant: "label",
+                className: "text-agg-xs leading-agg-4 tracking-agg-normal text-agg-muted-foreground",
+                children: statItem.label
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-1", children: [
+              /* @__PURE__ */ jsx(
+                Typography,
+                {
+                  variant: "body",
+                  className: "text-agg-lg leading-agg-7 text-agg-foreground",
+                  children: statItem.value
+                }
+              ),
+              statItem.delta ? /* @__PURE__ */ jsx(
+                Typography,
+                {
+                  variant: "meta",
+                  className: cn("text-agg-sm leading-agg-5", deltaClassName),
+                  children: statItem.delta
+                }
+              ) : null
+            ] })
+          ] }, `${statItem.label}-${statItem.value}`);
+        }) }) : null,
+        /* @__PURE__ */ jsx(
+          EventListItemDetailsGraphSection,
+          {
+            venueMarkets,
+            outcomeLabels,
+            selectedOutcomeLabel,
+            onSelectedOutcomeLabelChange: setSelectedOutcomeLabel,
+            probabilityByLabel,
+            switchLabels,
+            isDateOutcomeMarket,
+            classNames,
+            showVenueLogo,
+            venueInfo,
+            formatPercent: config.formatPercent,
+            selectedTimeRange
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: cn("flex flex-wrap items-center justify-between gap-4", classNames == null ? void 0 : classNames.footer), children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "meta", className: "text-agg-muted-foreground text-agg-sm leading-agg-5", children: volumeLabel || "-" }),
+          /* @__PURE__ */ jsx("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__ */ jsx(
+              Button,
+              {
+                size: "xs",
+                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",
+                  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
+            );
+          }) })
+        ] })
+      ]
+    }
+  );
+};
+var EventListItemDetailsByEventId = (_a) => {
+  var _b = _a, {
+    eventId
+  } = _b, rest = __objRest(_b, [
+    "eventId"
+  ]);
+  const {
+    event: fetchedEvent,
+    isError,
+    isLoading
+  } = useEvent(eventId, {
+    enabled: !!eventId
+  });
+  const resolvedEvent = useMemo(() => {
+    return resolveEventListItemEvent(fetchedEvent);
+  }, [fetchedEvent]);
+  if (!eventId) {
+    return /* @__PURE__ */ jsx(
+      EventListItemDetailsUnavailableState,
+      {
+        classNames: rest.classNames,
+        ariaLabel: rest.ariaLabel
+      }
+    );
+  }
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(EventListItemDetailsLoadingState, { classNames: rest.classNames, ariaLabel: rest.ariaLabel });
+  }
+  if (!resolvedEvent && !isError) {
+    return /* @__PURE__ */ jsx(EventListItemDetailsLoadingState, { classNames: rest.classNames, ariaLabel: rest.ariaLabel });
+  }
+  if (!resolvedEvent) {
+    return /* @__PURE__ */ jsx(
+      EventListItemDetailsUnavailableState,
+      {
+        classNames: rest.classNames,
+        ariaLabel: rest.ariaLabel
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(EventListItemDetailsContent, __spreadValues({ event: resolvedEvent }, rest));
+};
+var EventListItemDetails = (props) => {
+  if (props.isLoading) {
+    return /* @__PURE__ */ jsx(EventListItemDetailsLoadingState, { classNames: props.classNames, ariaLabel: props.ariaLabel });
+  }
+  if ("event" in props && props.event) {
+    const _a = props, { event } = _a, rest = __objRest(_a, ["event"]);
+    return /* @__PURE__ */ jsx(EventListItemDetailsContent, __spreadValues({ event }, rest));
+  }
+  if ("eventId" in props && typeof props.eventId === "string") {
+    const {
+      title: titleOverride,
+      image: imageOverride,
+      showVenueLogo: showVenueLogoOverride,
+      classNames,
+      venueInfo,
+      detailsStats,
+      ariaLabel: ariaLabelOverride,
+      defaultTimeRange: defaultTimeRangeOverride
+    } = props;
+    const byEventIdProps = {
+      eventId: props.eventId,
+      isLoading: false,
+      title: titleOverride,
+      image: imageOverride,
+      showVenueLogo: showVenueLogoOverride,
+      classNames,
+      venueInfo,
+      detailsStats,
+      ariaLabel: ariaLabelOverride,
+      defaultTimeRange: defaultTimeRangeOverride
+    };
+    return /* @__PURE__ */ jsx(EventListItemDetailsByEventId, __spreadValues({}, byEventIdProps));
+  }
+  return /* @__PURE__ */ jsx(
+    EventListItemDetailsUnavailableState,
+    {
+      classNames: props.classNames,
+      ariaLabel: props.ariaLabel
+    }
+  );
+};
+EventListItemDetails.displayName = "EventListItemDetails";
+
+export {
+  EventListItemDetails
+};

package/dist/chunk-MG243DSX.mjs

@@ -0,0 +1,44 @@
+import {
+  cn
+} from "./chunk-GC3QIIH7.mjs";
+
+// src/primitives/badge/badge.constants.ts
+var badgeSizes = ["xxs", "xs", "s", "m", "l", "xl", "xxl"];
+var badgeSizeClasses = {
+  xxs: cn("h-4 px-1.5 gap-0.5", "text-agg-xs leading-agg-3"),
+  xs: cn("h-5 px-2 gap-1", "text-agg-xs leading-agg-4"),
+  s: cn("h-6 px-2.5 gap-1", "text-agg-sm leading-agg-5"),
+  m: cn("h-7 px-3 gap-1.5", "text-agg-sm leading-agg-5"),
+  l: cn("h-8 px-3.5 gap-1.5", "text-agg-base leading-agg-6"),
+  xl: cn("h-9 px-4 gap-2", "text-agg-lg leading-agg-7"),
+  xxl: cn("h-10 px-5 gap-2", "text-agg-xl leading-agg-7")
+};
+var baseBadgeClasses = cn(
+  "inline-flex items-center justify-center rounded-agg-full font-agg-sans",
+  "bg-agg-secondary-hover text-agg-foreground whitespace-nowrap font-agg-normal"
+);
+
+// src/primitives/badge/index.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Badge({ text, prefix, suffix, size = "m", classNames }) {
+  const resolvedText = `${text}`;
+  const resolvedAriaLabel = resolvedText.length > 0 ? resolvedText : void 0;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "aria-label": resolvedAriaLabel,
+      className: cn(baseBadgeClasses, badgeSizeClasses[size], classNames == null ? void 0 : classNames.root),
+      children: [
+        prefix ? /* @__PURE__ */ jsx("span", { className: classNames == null ? void 0 : classNames.prefix, children: prefix }) : null,
+        /* @__PURE__ */ jsx("span", { className: cn("truncate", classNames == null ? void 0 : classNames.text), children: text }),
+        suffix ? /* @__PURE__ */ jsx("span", { className: classNames == null ? void 0 : classNames.suffix, children: suffix }) : null
+      ]
+    }
+  );
+}
+Badge.displayName = "Badge";
+
+export {
+  badgeSizes,
+  Badge
+};