@agg-market/ui 0.0.1

package/dist/event-list-item-details.js

@@ -0,0 +1,2140 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/events/item-details/index.tsx
+var item_details_exports = {};
+__export(item_details_exports, {
+  EventListItemDetails: () => EventListItemDetails
+});
+module.exports = __toCommonJS(item_details_exports);
+var import_react3 = require("react");
+var import_hooks12 = require("@agg-market/hooks");
+
+// src/shared/utils.ts
+var cn = (...values) => values.filter(Boolean).join(" ");
+var getMotionClassName = (enabled, ...values) => {
+  if (!enabled)
+    return void 0;
+  return cn(...values);
+};
+var toDate = (value) => {
+  if (!value)
+    return null;
+  if (value instanceof Date)
+    return value;
+  const parsed = new Date(value);
+  if (Number.isNaN(parsed.getTime()))
+    return null;
+  return parsed;
+};
+
+// src/primitives/badge/badge.constants.ts
+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
+var import_jsx_runtime = require("react/jsx-runtime");
+function Badge({ text, prefix, suffix, size = "m", classNames }) {
+  const resolvedText = `${text}`;
+  const resolvedAriaLabel = resolvedText.length > 0 ? resolvedText : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "span",
+    {
+      "aria-label": resolvedAriaLabel,
+      className: cn(baseBadgeClasses, badgeSizeClasses[size], classNames == null ? void 0 : classNames.root),
+      children: [
+        prefix ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: classNames == null ? void 0 : classNames.prefix, children: prefix }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: cn("truncate", classNames == null ? void 0 : classNames.text), children: text }),
+        suffix ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: classNames == null ? void 0 : classNames.suffix, children: suffix }) : null
+      ]
+    }
+  );
+}
+Badge.displayName = "Badge";
+
+// src/primitives/button/index.tsx
+var import_hooks = require("@agg-market/hooks");
+
+// src/primitives/icon/icon.constants.ts
+var iconSizeClasses = {
+  xxs: "h-2 w-2",
+  xs: "h-3 w-3",
+  s: "h-4 w-4",
+  m: "h-6 w-6",
+  l: "h-8 w-8",
+  xl: "h-10 w-10",
+  xxl: "h-12 w-12"
+};
+
+// src/primitives/button/button.constants.ts
+var sizeClasses = {
+  xxs: cn("h-6 px-2.5 gap-1", "text-agg-xs leading-agg-4"),
+  xs: cn("h-7 px-3 gap-1", "text-agg-xs leading-agg-4"),
+  s: cn("h-8 px-4 gap-1.5", "text-agg-sm leading-agg-5"),
+  m: cn("h-9 px-5 gap-1.5", "text-agg-sm leading-agg-5"),
+  l: cn("h-10 px-6 gap-2", "text-agg-base leading-agg-6"),
+  xl: cn("h-11 px-7 gap-2", "text-agg-base leading-agg-6"),
+  xxl: cn("h-12 px-8 gap-2", "text-agg-base leading-agg-6")
+};
+var iconSizeClasses2 = {
+  xxs: iconSizeClasses.xs,
+  xs: iconSizeClasses.xs,
+  s: iconSizeClasses.s,
+  m: iconSizeClasses.s,
+  l: iconSizeClasses.s,
+  xl: iconSizeClasses.s,
+  xxl: iconSizeClasses.s
+};
+var iconSlotClasses = {
+  xxs: "[&_svg]:h-3 [&_svg]:w-3",
+  xs: "[&_svg]:h-3 [&_svg]:w-3",
+  s: "[&_svg]:h-4 [&_svg]:w-4",
+  m: "[&_svg]:h-4 [&_svg]:w-4",
+  l: "[&_svg]:h-4 [&_svg]:w-4",
+  xl: "[&_svg]:h-4 [&_svg]:w-4",
+  xxl: "[&_svg]:h-4 [&_svg]:w-4"
+};
+var variantClasses = {
+  primary: cn(
+    "bg-agg-primary text-agg-on-primary",
+    "hover:bg-agg-primary-hover",
+    "disabled:bg-agg-separator disabled:text-agg-on-primary",
+    "focus-visible:ring-agg-primary-hover"
+  ),
+  secondary: cn(
+    "border border-agg-separator bg-agg-secondary text-agg-foreground",
+    "hover:bg-agg-secondary-hover",
+    "disabled:bg-agg-secondary disabled:text-agg-muted-foreground disabled:border-agg-separator",
+    "focus-visible:ring-agg-separator"
+  ),
+  tertiary: cn(
+    "bg-transparent text-agg-foreground",
+    "hover:bg-agg-secondary-hover",
+    "disabled:bg-transparent disabled:text-agg-muted-foreground",
+    "focus-visible:ring-agg-separator"
+  )
+};
+var baseButtonClasses = cn(
+  "cursor-pointer disabled:cursor-not-allowed",
+  "inline-flex items-center justify-center rounded-agg-full font-agg-sans font-agg-bold text-center",
+  "whitespace-nowrap",
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-agg-secondary"
+);
+
+// src/primitives/button/index.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Button = (_a) => {
+  var _b = _a, {
+    children,
+    variant = "primary",
+    size = "m",
+    isLoading = false,
+    disabled,
+    prefix,
+    suffix,
+    type = "button",
+    className,
+    "aria-label": ariaLabel
+  } = _b, other = __objRest(_b, [
+    "children",
+    "variant",
+    "size",
+    "isLoading",
+    "disabled",
+    "prefix",
+    "suffix",
+    "type",
+    "className",
+    "aria-label"
+  ]);
+  const { enableAnimations } = (0, import_hooks.useSdkUiConfig)();
+  const isDisabled = disabled || isLoading;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "button",
+    __spreadProps(__spreadValues({
+      type,
+      className: cn(
+        baseButtonClasses,
+        getMotionClassName(enableAnimations, "transition-colors"),
+        sizeClasses[size],
+        iconSlotClasses[size],
+        variantClasses[variant],
+        className
+      ),
+      disabled: isDisabled,
+      "aria-busy": isLoading,
+      "aria-label": ariaLabel
+    }, other), {
+      children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "span",
+        {
+          className: cn(
+            "inline-block rounded-agg-full border-2 border-current border-r-transparent",
+            getMotionClassName(enableAnimations, "animate-spin"),
+            iconSizeClasses2[size]
+          ),
+          "aria-hidden": "true"
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+        prefix != null ? prefix : null,
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children }),
+        suffix != null ? suffix : null
+      ] })
+    })
+  );
+};
+Button.displayName = "Button";
+
+// src/primitives/chart/index.tsx
+var import_dayjs = __toESM(require("dayjs"));
+var import_hooks3 = require("@agg-market/hooks");
+var import_react2 = require("react");
+var import_liveline = require("liveline");
+
+// src/primitives/switch-button/index.tsx
+var import_react = require("react");
+var import_hooks2 = require("@agg-market/hooks");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var resolveActiveIndex = (options, value) => {
+  const activeIndex = options.findIndex((option) => option.value === value);
+  if (activeIndex >= 0)
+    return activeIndex;
+  return 0;
+};
+var resolveNextEnabledIndex = (options, currentIndex, direction) => {
+  if (options.length <= 1)
+    return currentIndex;
+  const step = direction === "next" ? 1 : -1;
+  for (let offset = 1; offset <= options.length; offset += 1) {
+    const candidateIndex = (currentIndex + step * offset + options.length) % options.length;
+    const candidate = options[candidateIndex];
+    if (candidate && !candidate.disabled) {
+      return candidateIndex;
+    }
+  }
+  return currentIndex;
+};
+var SwitchButton = ({
+  options,
+  value,
+  onValueChange,
+  ariaLabel,
+  className
+}) => {
+  const { enableAnimations } = (0, import_hooks2.useSdkUiConfig)();
+  const activeIndex = (0, import_react.useMemo)(() => {
+    return resolveActiveIndex(options, value);
+  }, [options, value]);
+  const [isAnimating, setIsAnimating] = (0, import_react.useState)(false);
+  const [lastAnimatedIndex, setLastAnimatedIndex] = (0, import_react.useState)(activeIndex);
+  (0, import_react.useEffect)(() => {
+    if (lastAnimatedIndex === activeIndex) {
+      return;
+    }
+    setLastAnimatedIndex(activeIndex);
+    if (!enableAnimations) {
+      setIsAnimating(false);
+      return;
+    }
+    setIsAnimating(true);
+    const timeoutId = window.setTimeout(() => {
+      setIsAnimating(false);
+    }, 350);
+    return () => {
+      window.clearTimeout(timeoutId);
+    };
+  }, [activeIndex, enableAnimations, lastAnimatedIndex]);
+  if (options.length === 0) {
+    return null;
+  }
+  const handleKeyDown = (event, optionIndex) => {
+    if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") {
+      return;
+    }
+    event.preventDefault();
+    const nextOptionIndex = resolveNextEnabledIndex(
+      options,
+      optionIndex,
+      event.key === "ArrowRight" ? "next" : "previous"
+    );
+    const nextOption = options[nextOptionIndex];
+    if (!nextOption || nextOption.disabled) {
+      return;
+    }
+    onValueChange(nextOption.value);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      className: cn(
+        "inline-flex min-w-0 rounded-agg-full bg-agg-secondary-hover font-agg-sans",
+        className
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        "div",
+        {
+          className: "relative grid min-w-0 flex-1 items-center",
+          style: {
+            gridTemplateColumns: `repeat(${options.length}, minmax(0, 1fr))`
+          },
+          role: "tablist",
+          "aria-label": ariaLabel,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "span",
+              {
+                className: cn(
+                  "pointer-events-none absolute inset-y-0 left-0 rounded-agg-full border-2 border-agg-primary bg-agg-secondary",
+                  getMotionClassName(
+                    enableAnimations,
+                    "transition-transform duration-[450ms] ease-[cubic-bezier(0.77,0,0.175,1)]"
+                  )
+                ),
+                style: {
+                  width: `${100 / options.length}%`,
+                  transform: `translateX(${activeIndex * 100}%) scaleX(${isAnimating ? 1.08 : 1})`
+                },
+                "aria-hidden": "true"
+              }
+            ),
+            options.map((option, optionIndex) => {
+              var _a;
+              const isActive = optionIndex === activeIndex;
+              return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "button",
+                {
+                  type: "button",
+                  role: "tab",
+                  "aria-selected": isActive,
+                  "aria-label": (_a = option.ariaLabel) != null ? _a : void 0,
+                  tabIndex: isActive ? 0 : -1,
+                  disabled: option.disabled,
+                  className: cn(
+                    "relative z-10 min-w-0 rounded-agg-full px-5 py-1.5 font-agg-sans text-agg-base leading-agg-6 text-agg-foreground",
+                    getMotionClassName(enableAnimations, "transition-colors duration-300"),
+                    "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",
+                    "disabled:cursor-not-allowed disabled:text-agg-muted-foreground",
+                    isActive ? "font-agg-bold" : "font-agg-normal"
+                  ),
+                  onClick: () => {
+                    if (option.disabled || isActive) {
+                      return;
+                    }
+                    onValueChange(option.value);
+                  },
+                  onKeyDown: (event) => {
+                    handleKeyDown(event, optionIndex);
+                  },
+                  children: option.label
+                },
+                option.value
+              );
+            })
+          ]
+        }
+      )
+    }
+  );
+};
+SwitchButton.displayName = "SwitchButton";
+
+// src/primitives/chart/index.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var normalizeSeries = (series) => {
+  return series.map((seriesItem) => {
+    const pointsByTime = /* @__PURE__ */ new Map();
+    seriesItem.points.forEach((point) => {
+      if (!Number.isFinite(point.time) || !Number.isFinite(point.value)) {
+        return;
+      }
+      pointsByTime.set(Math.floor(point.time), point.value);
+    });
+    const sortedPoints = [...pointsByTime.entries()].sort((left, right) => left[0] - right[0]).map(([time, value]) => ({
+      time,
+      value
+    }));
+    return __spreadProps(__spreadValues({}, seriesItem), {
+      points: sortedPoints
+    });
+  }).filter((seriesItem) => seriesItem.points.length > 0);
+};
+var defaultValueFormatter = (value) => {
+  return `${Math.round(value)}%`;
+};
+var defaultTimeFormatter = (timestamp) => {
+  return import_dayjs.default.unix(timestamp).format("MMM D");
+};
+var toLivelinePoints = (points) => {
+  return points.map((point) => ({
+    time: point.time,
+    value: point.value
+  }));
+};
+var resolveWindowSeconds = (normalizedSeries) => {
+  const timestamps = normalizedSeries.flatMap(
+    (seriesItem) => seriesItem.points.map((point) => point.time)
+  );
+  if (timestamps.length <= 1)
+    return 30;
+  const minTimestamp = Math.min(...timestamps);
+  const maxTimestamp = Math.max(...timestamps);
+  const span = maxTimestamp - minTimestamp;
+  if (!Number.isFinite(span) || span <= 0)
+    return 30;
+  return Math.max(1, Math.floor(span));
+};
+var resolveLatestValue = (points) => {
+  const latestPoint = points[points.length - 1];
+  if (!latestPoint)
+    return 0;
+  return latestPoint.value;
+};
+var resolveActiveSeriesId = (series, activeSeriesId) => {
+  var _a, _b;
+  if (activeSeriesId) {
+    const matchingSeries = series.find((seriesItem) => seriesItem.id === activeSeriesId);
+    if (matchingSeries) {
+      return matchingSeries.id;
+    }
+  }
+  return (_b = (_a = series[0]) == null ? void 0 : _a.id) != null ? _b : "";
+};
+var formatDefaultSeriesLabel = (seriesItem) => {
+  return seriesItem.id.charAt(0).toUpperCase() + seriesItem.id.slice(1);
+};
+var renderDefaultSeriesControls = ({
+  series,
+  activeSeriesId,
+  handleSeriesChange,
+  defaultSeriesSwitchClassName,
+  seriesSwitchAriaLabel,
+  formatSeriesOptionAriaLabel
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    SwitchButton,
+    {
+      ariaLabel: seriesSwitchAriaLabel,
+      className: defaultSeriesSwitchClassName,
+      options: series.map((seriesItem) => ({
+        value: seriesItem.id,
+        label: formatDefaultSeriesLabel(seriesItem),
+        ariaLabel: formatSeriesOptionAriaLabel(formatDefaultSeriesLabel(seriesItem))
+      })),
+      value: activeSeriesId,
+      onValueChange: handleSeriesChange
+    }
+  );
+};
+var resolveSelectedSeries = (series, activeSeriesId) => {
+  const availableSeriesIds = new Set(series.map((seriesItem) => seriesItem.id));
+  if (!availableSeriesIds.has(activeSeriesId)) {
+    return series[0];
+  }
+  return series.find((seriesItem) => seriesItem.id === activeSeriesId);
+};
+var LineChart = ({
+  series,
+  height = 280,
+  width,
+  classNames,
+  isLoading = false,
+  showSeriesControls = true,
+  renderSeriesControls
+}) => {
+  var _a, _b;
+  const labels = (0, import_hooks3.useLabels)();
+  const { theme } = (0, import_hooks3.useSdkUiConfig)();
+  const normalizedSeries = (0, import_react2.useMemo)(() => {
+    return normalizeSeries(series);
+  }, [series]);
+  const [activeSeriesId, setActiveSeriesId] = (0, import_react2.useState)(
+    () => resolveActiveSeriesId(normalizedSeries, null)
+  );
+  (0, import_react2.useEffect)(() => {
+    setActiveSeriesId(
+      (currentActiveSeriesId) => resolveActiveSeriesId(normalizedSeries, currentActiveSeriesId)
+    );
+  }, [normalizedSeries]);
+  const livelineTheme = theme;
+  const handleSeriesChange = (seriesId) => {
+    setActiveSeriesId(seriesId);
+  };
+  const primarySeries = (0, import_react2.useMemo)(() => {
+    return resolveSelectedSeries(normalizedSeries, activeSeriesId);
+  }, [activeSeriesId, normalizedSeries]);
+  const primaryData = (0, import_react2.useMemo)(() => {
+    if (!primarySeries) {
+      return [];
+    }
+    return toLivelinePoints(primarySeries.points);
+  }, [primarySeries]);
+  const primaryValue = (0, import_react2.useMemo)(() => {
+    if (!primarySeries) {
+      return 0;
+    }
+    return resolveLatestValue(primarySeries.points);
+  }, [primarySeries]);
+  const livelineSeries = (0, import_react2.useMemo)(() => {
+    return normalizedSeries.map((seriesItem) => ({
+      id: seriesItem.id,
+      color: seriesItem.color,
+      data: toLivelinePoints(seriesItem.points),
+      value: resolveLatestValue(seriesItem.points)
+    }));
+  }, [normalizedSeries]);
+  const windowSeconds = (0, import_react2.useMemo)(() => {
+    return resolveWindowSeconds(normalizedSeries);
+  }, [normalizedSeries]);
+  const seriesControls = showSeriesControls && normalizedSeries.length > 0 ? (_a = renderSeriesControls == null ? void 0 : renderSeriesControls({
+    series: normalizedSeries,
+    activeSeriesId,
+    handleSeriesChange
+  })) != null ? _a : normalizedSeries.length > 1 ? renderDefaultSeriesControls({
+    series: normalizedSeries,
+    activeSeriesId,
+    handleSeriesChange,
+    defaultSeriesSwitchClassName: classNames == null ? void 0 : classNames.defaultSeriesSwitch,
+    seriesSwitchAriaLabel: labels.common.lineChartSeriesSwitchAria,
+    formatSeriesOptionAriaLabel: labels.common.lineChartSeriesOptionAria
+  }) : null : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: cn("w-full", classNames == null ? void 0 : classNames.root), style: { width }, children: [
+    !isLoading && seriesControls ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: cn("mb-3", classNames == null ? void 0 : classNames.controls), children: seriesControls }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "div",
+      {
+        className: cn(
+          "overflow-hidden [&>div:not(.agg-livechart):first-of-type]:hidden!",
+          classNames == null ? void 0 : classNames.chartViewport
+        ),
+        style: { height },
+        role: "img",
+        "aria-label": labels.common.lineChartAria,
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          import_liveline.Liveline,
+          {
+            className: cn("h-full w-full agg-livechart", classNames == null ? void 0 : classNames.liveline),
+            data: primaryData,
+            value: primaryValue,
+            series: livelineSeries,
+            color: (_b = primarySeries == null ? void 0 : primarySeries.color) != null ? _b : "var(--agg-color-primary)",
+            theme: livelineTheme,
+            grid: true,
+            momentum: false,
+            pulse: false,
+            window: windowSeconds,
+            formatValue: defaultValueFormatter,
+            formatTime: defaultTimeFormatter,
+            padding: {
+              top: 12,
+              right: 80,
+              bottom: 28,
+              left: 12
+            },
+            loading: isLoading
+          }
+        )
+      }
+    )
+  ] });
+};
+LineChart.displayName = "LineChart";
+
+// src/primitives/card/index.tsx
+var import_hooks4 = require("@agg-market/hooks");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var Card = (_a) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  const { enableAnimations } = (0, import_hooks4.useSdkUiConfig)();
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "div",
+    __spreadValues({
+      className: cn(
+        "flex w-full flex-col font-agg-sans",
+        "rounded-agg-xl border border-agg-separator",
+        "bg-agg-secondary text-agg-foreground shadow-agg-card",
+        getMotionClassName(enableAnimations, "transition-shadow hover:shadow-agg-card-hover"),
+        className
+      )
+    }, props)
+  );
+};
+Card.displayName = "Card";
+
+// src/primitives/skeleton/views/event-list-skeleton-view.tsx
+var import_hooks7 = require("@agg-market/hooks");
+
+// src/primitives/skeleton/skeleton-block.tsx
+var import_hooks5 = require("@agg-market/hooks");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var SkeletonBlock = ({ className }) => {
+  const { enableAnimations } = (0, import_hooks5.useSdkUiConfig)();
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "div",
+    {
+      "aria-hidden": true,
+      className: cn(
+        "bg-agg-separator",
+        getMotionClassName(enableAnimations, "animate-pulse"),
+        className
+      )
+    }
+  );
+};
+SkeletonBlock.displayName = "SkeletonBlock";
+
+// src/primitives/skeleton/views/event-list-item-skeleton-view.tsx
+var import_hooks6 = require("@agg-market/hooks");
+
+// src/events/item/event-list-item.constants.ts
+var baseCardClassName = "gap-3 overflow-hidden p-5 w-full";
+
+// src/primitives/skeleton/views/event-list-item-skeleton-view.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var EventListItemSkeletonView = ({
+  className,
+  ariaLabel,
+  isStandalone = false
+}) => {
+  const labels = (0, import_hooks6.useLabels)();
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    Card,
+    {
+      className: cn(baseCardClassName, className),
+      role: isStandalone ? "status" : void 0,
+      "aria-label": isStandalone ? ariaLabel != null ? ariaLabel : labels.eventItem.loading : void 0,
+      "aria-busy": isStandalone || void 0,
+      "aria-hidden": isStandalone ? void 0 : true,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex w-full items-start gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "h-10 w-10 rounded-agg-lg" }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-1 flex-col gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "h-5 w-[82%] rounded-agg-sm" }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "h-5 w-[68%] rounded-agg-sm" })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex flex-col gap-3", children: [0, 1].map((index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+          "div",
+          {
+            className: "grid w-full grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-3",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "h-4 rounded-agg-sm" }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "h-4 w-10 rounded-agg-sm" }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "h-9 w-[101px] rounded-agg-full" })
+            ]
+          },
+          index
+        )) }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center justify-between gap-2 text-agg-muted-foreground", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "h-4 w-36 rounded-agg-sm" }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "size-3 rounded-agg-full" }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "size-3 rounded-agg-full" }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "size-3 rounded-agg-full" })
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "h-4 w-20 rounded-agg-sm" })
+        ] })
+      ]
+    }
+  );
+};
+EventListItemSkeletonView.displayName = "EventListItemSkeletonView";
+
+// src/primitives/skeleton/views/event-list-skeleton-view.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var EventListSkeletonView = ({ className, ariaLabel }) => {
+  const labels = (0, import_hooks7.useLabels)();
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    "section",
+    {
+      className: cn("flex w-full flex-col gap-5", className),
+      role: "status",
+      "aria-label": ariaLabel != null ? ariaLabel : labels.eventList.loading("events"),
+      "aria-busy": true,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("header", { className: "flex w-full flex-col items-start justify-between gap-2 md:flex-row md:flex-nowrap md:items-center md:gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SkeletonBlock, { className: "h-7 w-40 rounded-agg-sm" }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex max-w-full gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SkeletonBlock, { className: "h-10 w-20 rounded-agg-full" }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SkeletonBlock, { className: "h-10 w-20 rounded-agg-full" }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SkeletonBlock, { className: "h-10 w-24 rounded-agg-full" })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "grid grid-cols-1 gap-5 md:grid-cols-3", children: Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          EventListItemSkeletonView,
+          {
+            isStandalone: false,
+            className: "w-full min-w-0 max-w-none"
+          },
+          index
+        )) })
+      ]
+    }
+  );
+};
+EventListSkeletonView.displayName = "EventListSkeletonView";
+
+// src/primitives/skeleton/views/event-list-item-details-skeleton-view.tsx
+var import_hooks8 = require("@agg-market/hooks");
+
+// src/events/item-details/event-list-item-details.constants.ts
+var detailsBaseCardClassName = "w-full overflow-hidden gap-6 p-5 md:gap-8 md:p-10";
+var eventListItemDetailsTimeRanges = [
+  "1H",
+  "6H",
+  "1D",
+  "1W",
+  "1M",
+  "ALL"
+];
+var lineColorByVenue = {
+  polymarket: "#2e5cff",
+  kalshi: "#00d295",
+  probable: "#f05923",
+  opinion: "#020205"
+};
+var fallbackLineColors = ["#2e5cff", "#00d295", "#f05923", "#020205"];
+
+// src/primitives/skeleton/views/event-list-item-details-skeleton-view.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var EventListItemDetailsSkeletonView = ({
+  className,
+  ariaLabel
+}) => {
+  const labels = (0, import_hooks8.useLabels)();
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    Card,
+    {
+      className: cn(detailsBaseCardClassName, className),
+      role: "status",
+      "aria-label": ariaLabel != null ? ariaLabel : labels.eventItemDetails.loading,
+      "aria-busy": true,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex w-full items-start gap-3 md:gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SkeletonBlock, { className: "size-10 rounded-agg-lg md:size-[60px]" }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex flex-1 flex-col gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SkeletonBlock, { className: "h-5 w-[82%] rounded-agg-sm md:h-7 md:w-[55%]" }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex gap-2 overflow-hidden", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SkeletonBlock, { className: "h-8 w-28 rounded-agg-full" }),
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SkeletonBlock, { className: "h-8 w-28 rounded-agg-full" }),
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SkeletonBlock, { className: "h-8 w-28 rounded-agg-full" })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex flex-col gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SkeletonBlock, { className: "h-10 w-full rounded-agg-full md:w-[220px]" }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex gap-2 overflow-hidden", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SkeletonBlock, { className: "h-9 w-20 rounded-agg-full" }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SkeletonBlock, { className: "h-9 w-20 rounded-agg-full" }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SkeletonBlock, { className: "h-9 w-20 rounded-agg-full" }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SkeletonBlock, { className: "h-9 w-20 rounded-agg-full" })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "h-[300px] w-full rounded-agg-xl", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SkeletonBlock, { className: "h-full w-full rounded-agg-xl" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SkeletonBlock, { className: "h-5 w-24 rounded-agg-sm" }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SkeletonBlock, { className: "h-5 w-40 rounded-agg-sm" })
+        ] })
+      ]
+    }
+  );
+};
+EventListItemDetailsSkeletonView.displayName = "EventListItemDetailsSkeletonView";
+
+// src/primitives/skeleton/views/market-details-skeleton-view.tsx
+var import_hooks9 = require("@agg-market/hooks");
+
+// src/events/market-details/market-details.constants.ts
+var marketDetailsBaseCardClassName = "w-full overflow-hidden rounded-agg-lg border border-agg-separator bg-agg-secondary text-agg-foreground shadow-none hover:shadow-none";
+
+// src/primitives/skeleton/views/market-details-skeleton-view.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var MarketDetailsSkeletonView = ({
+  className,
+  ariaLabel,
+  isDetailed
+}) => {
+  const labels = (0, import_hooks9.useLabels)();
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    Card,
+    {
+      className: cn(marketDetailsBaseCardClassName, className),
+      role: "status",
+      "aria-label": ariaLabel != null ? ariaLabel : labels.marketDetails.loading,
+      "aria-busy": true,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col gap-3 p-4 md:px-5 md:py-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex min-w-0 items-center gap-3 md:gap-4", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SkeletonBlock, { className: "size-12 rounded-agg-lg md:size-[60px]" }),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex min-w-0 flex-col gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SkeletonBlock, { className: "h-6 w-40 rounded-agg-sm" }),
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SkeletonBlock, { className: "h-4 w-28 rounded-agg-sm" })
+              ] })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SkeletonBlock, { className: "h-8 w-16 rounded-agg-sm" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SkeletonBlock, { className: "h-10 flex-1 rounded-agg-full" }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SkeletonBlock, { className: "h-10 flex-1 rounded-agg-full" })
+          ] })
+        ] }),
+        isDetailed ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "h-px w-full bg-agg-separator" }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex h-14 items-end", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SkeletonBlock, { className: "h-full w-full rounded-none" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "h-px w-full bg-agg-separator" }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col gap-4 p-5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col gap-3", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SkeletonBlock, { className: "h-4 w-12 rounded-agg-sm" }),
+              [0, 1, 2, 3].map((index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                "div",
+                {
+                  className: "grid grid-cols-[52px_1fr_1fr_52px] items-center gap-2",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SkeletonBlock, { className: "h-4 rounded-agg-sm" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SkeletonBlock, { className: "h-4 rounded-agg-sm" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SkeletonBlock, { className: "h-4 rounded-agg-sm" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SkeletonBlock, { className: "h-2 rounded-agg-full" })
+                  ]
+                },
+                `ask-${index}`
+              ))
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col gap-3", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SkeletonBlock, { className: "h-4 w-12 rounded-agg-sm" }),
+              [0, 1, 2, 3].map((index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                "div",
+                {
+                  className: "grid grid-cols-[52px_1fr_1fr_52px] items-center gap-2",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SkeletonBlock, { className: "h-4 rounded-agg-sm" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SkeletonBlock, { className: "h-4 rounded-agg-sm" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SkeletonBlock, { className: "h-4 rounded-agg-sm" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SkeletonBlock, { className: "h-2 rounded-agg-full" })
+                  ]
+                },
+                `bid-${index}`
+              ))
+            ] })
+          ] })
+        ] }) : null
+      ]
+    }
+  );
+};
+MarketDetailsSkeletonView.displayName = "MarketDetailsSkeletonView";
+
+// src/primitives/skeleton/views/place-order-skeleton-view.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var placeOrderCardClassName = "overflow-hidden rounded-agg-xl border border-agg-border bg-agg-secondary shadow-none hover:shadow-none";
+var ContentBody = () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-col gap-6 p-5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-start justify-between gap-5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SkeletonBlock, { className: "h-12 w-12 shrink-0 rounded-agg-lg" }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SkeletonBlock, { className: "h-5 w-[92%] rounded-agg-sm" }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SkeletonBlock, { className: "h-5 w-[80%] rounded-agg-sm" })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SkeletonBlock, { className: "h-6 w-6 rounded-agg-sm" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SkeletonBlock, { className: "h-5 w-28 rounded-agg-sm" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex h-11 items-end border-b border-agg-separator", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center gap-8", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SkeletonBlock, { className: "h-5 w-10 rounded-agg-sm" }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SkeletonBlock, { className: "h-[3px] w-12 rounded-t-agg-sm" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SkeletonBlock, { className: "h-5 w-10 rounded-agg-sm" })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-col gap-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SkeletonBlock, { className: "h-11 flex-1 rounded-agg-full" }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SkeletonBlock, { className: "h-11 flex-1 rounded-agg-full" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SkeletonBlock, { className: "h-6 w-20 rounded-agg-sm" }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SkeletonBlock, { className: "h-4 w-28 rounded-agg-sm" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SkeletonBlock, { className: "h-9 w-28 rounded-agg-sm" })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "rounded-agg-lg border border-agg-trade-highlight-border bg-agg-trade-highlight-surface p-3", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-col gap-3", children: [
+        [0, 1].map((index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-col gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SkeletonBlock, { className: "size-4 rounded-agg-full" }),
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SkeletonBlock, { className: "h-5 w-24 rounded-agg-sm" })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SkeletonBlock, { className: "h-5 w-10 rounded-agg-sm" })
+          ] }),
+          index === 0 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "h-px w-full bg-agg-trade-highlight-border" }) : null
+        ] }, `place-order-route-${index}`)),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SkeletonBlock, { className: "mx-auto h-5 w-40 rounded-agg-sm" })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SkeletonBlock, { className: "h-4 w-36 rounded-agg-sm" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SkeletonBlock, { className: "h-6 w-20 rounded-agg-sm" }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SkeletonBlock, { className: "h-4 w-24 rounded-agg-sm" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SkeletonBlock, { className: "h-9 w-36 rounded-agg-sm" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SkeletonBlock, { className: "h-4 w-[88%] self-center rounded-agg-sm" })
+  ] });
+};
+var PlaceOrderSkeletonView = ({
+  className,
+  ariaLabel
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    "div",
+    {
+      className: cn("w-full", className),
+      role: "status",
+      "aria-label": ariaLabel != null ? ariaLabel : "Loading place order",
+      "aria-busy": true,
+      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex w-full items-end justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+        Card,
+        {
+          className: cn(
+            placeOrderCardClassName,
+            "w-full max-w-[400px] rounded-t-agg-xl rounded-b-none border-b-0"
+          ),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ContentBody, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "border-t border-agg-separator bg-agg-secondary p-4", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SkeletonBlock, { className: "h-12 w-full rounded-agg-full" }) })
+          ]
+        }
+      ) })
+    }
+  );
+};
+PlaceOrderSkeletonView.displayName = "PlaceOrderSkeletonView";
+
+// src/primitives/skeleton/views/settlement-skeleton-view.tsx
+var import_hooks10 = require("@agg-market/hooks");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var SettlementSkeletonView = ({
+  className,
+  ariaLabel
+}) => {
+  const labels = (0, import_hooks10.useLabels)();
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    Card,
+    {
+      className: cn(
+        "gap-5 rounded-agg-xl border border-agg-separator bg-agg-secondary p-5 shadow-none hover:shadow-none",
+        className
+      ),
+      role: "status",
+      "aria-label": ariaLabel != null ? ariaLabel : labels.trading.settlementLoading,
+      "aria-busy": true,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-col gap-1 md:flex-row md:items-center md:justify-between md:gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SkeletonBlock, { className: "h-4 w-20 rounded-agg-sm" }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SkeletonBlock, { className: "h-5 w-full max-w-80 rounded-agg-sm" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SkeletonBlock, { className: "h-5 w-52 rounded-agg-sm" }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-col gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SkeletonBlock, { className: "h-4 w-[88%] rounded-agg-sm" }),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SkeletonBlock, { className: "h-4 w-[84%] rounded-agg-sm" }),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SkeletonBlock, { className: "h-4 w-[80%] rounded-agg-sm" }),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SkeletonBlock, { className: "h-4 w-[74%] rounded-agg-sm" })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "h-px w-full bg-agg-separator" }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-col gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-col gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SkeletonBlock, { className: "size-4 rounded-agg-full" }),
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SkeletonBlock, { className: "h-5 w-24 rounded-agg-sm" }),
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SkeletonBlock, { className: "h-4 w-4 rounded-agg-sm" })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-col gap-2 pl-6", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SkeletonBlock, { className: "h-4 w-full rounded-agg-sm" }),
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SkeletonBlock, { className: "h-4 w-[92%] rounded-agg-sm" }),
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SkeletonBlock, { className: "h-4 w-[34%] rounded-agg-sm" })
+            ] })
+          ] }),
+          [0, 1, 2].map((index) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SkeletonBlock, { className: "size-4 rounded-agg-full" }),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SkeletonBlock, { className: "h-5 w-20 rounded-agg-sm" }),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SkeletonBlock, { className: "h-4 w-4 rounded-agg-sm" })
+          ] }, `settlement-venue-${index}`))
+        ] })
+      ]
+    }
+  );
+};
+SettlementSkeletonView.displayName = "SettlementSkeletonView";
+
+// src/primitives/skeleton/skeleton.types.ts
+var skeletonViews = {
+  eventListItem: "event-list-item",
+  eventListItemDetails: "event-list-item-details",
+  marketDetailsMinified: "market-details-minified",
+  marketDetailsDetailed: "market-details-detailed",
+  eventList: "event-list",
+  settlement: "settlement",
+  placeOrder: "place-order"
+};
+
+// src/primitives/skeleton/index.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var Skeleton = ({ view, className, ariaLabel }) => {
+  if (view === skeletonViews.eventListItem) {
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(EventListItemSkeletonView, { className, ariaLabel, isStandalone: true });
+  }
+  if (view === skeletonViews.eventListItemDetails) {
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(EventListItemDetailsSkeletonView, { className, ariaLabel });
+  }
+  if (view === skeletonViews.marketDetailsMinified) {
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(MarketDetailsSkeletonView, { className, ariaLabel, isDetailed: false });
+  }
+  if (view === skeletonViews.marketDetailsDetailed) {
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(MarketDetailsSkeletonView, { className, ariaLabel, isDetailed: true });
+  }
+  if (view === skeletonViews.settlement) {
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SettlementSkeletonView, { className, ariaLabel });
+  }
+  if (view === skeletonViews.placeOrder) {
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PlaceOrderSkeletonView, { className, ariaLabel });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(EventListSkeletonView, { className, ariaLabel });
+};
+Skeleton.displayName = "Skeleton";
+
+// src/primitives/typography/typography.constants.ts
+var variantClasses2 = {
+  title: cn("font-agg-sans text-agg-lg leading-agg-7", "font-agg-bold", "text-agg-foreground"),
+  body: cn("font-agg-sans text-agg-base leading-agg-6", "font-agg-normal", "text-agg-foreground"),
+  meta: cn(
+    "font-agg-sans text-agg-sm leading-agg-5",
+    "font-agg-normal",
+    "text-agg-muted-foreground"
+  ),
+  label: cn(
+    "font-agg-sans text-agg-sm leading-agg-5",
+    "font-agg-bold uppercase",
+    "text-agg-foreground"
+  ),
+  value: cn("font-agg-sans text-agg-xl leading-agg-7", "font-agg-normal", "text-agg-foreground"),
+  caption: cn("font-agg-sans text-agg-xs leading-agg-4", "font-agg-normal", "text-agg-foreground")
+};
+
+// src/primitives/typography/index.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var Typography = ({
+  as: Component = "p",
+  variant = "body",
+  className,
+  children
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Component, { className: cn(variantClasses2[variant], "truncate", className), children });
+};
+Typography.displayName = "Typography";
+
+// src/primitives/venue-logo/index.tsx
+var import_hooks11 = require("@agg-market/hooks");
+
+// src/primitives/icon/types.ts
+var getIconA11yProps = (title) => ({
+  role: title ? "img" : "presentation",
+  "aria-hidden": title ? void 0 : true
+});
+
+// src/primitives/venue-logo/logo-props.ts
+var DEFAULT_MONOCHROME_COLOR = "#000000";
+var resolveLogoPrimaryColor = ({
+  brandColor,
+  isColor = true,
+  color
+}) => {
+  if (typeof color === "string" && color.trim())
+    return color;
+  if (!isColor)
+    return DEFAULT_MONOCHROME_COLOR;
+  return brandColor;
+};
+
+// src/primitives/venue-logo/svg/logo-kalshi.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var KALSHI_GREEN = "#18C590";
+var LogoKalshiIcon = (_a) => {
+  var _b = _a, {
+    title,
+    className,
+    isColor = true,
+    color
+  } = _b, props = __objRest(_b, [
+    "title",
+    "className",
+    "isColor",
+    "color"
+  ]);
+  const primaryColor = resolveLogoPrimaryColor({
+    brandColor: KALSHI_GREEN,
+    isColor,
+    color
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    "svg",
+    __spreadProps(__spreadValues(__spreadValues({
+      viewBox: "0 0 100 100",
+      className,
+      fill: "none"
+    }, getIconA11yProps(title)), props), {
+      children: [
+        title ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("title", { children: title }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "M20 10H36V90H20V10Z", fill: primaryColor }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "M44 50L74 10H92L62 50L92 90H74L44 50Z", fill: primaryColor })
+      ]
+    })
+  );
+};
+LogoKalshiIcon.displayName = "LogoKalshiIcon";
+
+// src/primitives/venue-logo/svg/logo-opinion.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var OPINION_BLACK = "#000000";
+var OPINION_WHITE = "#FFFFFF";
+var LogoOpinionIcon = (_a) => {
+  var _b = _a, {
+    title,
+    className,
+    isColor = true,
+    color
+  } = _b, props = __objRest(_b, [
+    "title",
+    "className",
+    "isColor",
+    "color"
+  ]);
+  const primaryColor = resolveLogoPrimaryColor({
+    brandColor: OPINION_BLACK,
+    isColor,
+    color
+  });
+  const accentColor = (color == null ? void 0 : color.trim()) ? primaryColor : OPINION_WHITE;
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+    "svg",
+    __spreadProps(__spreadValues(__spreadValues({
+      viewBox: "0 0 100 100",
+      className,
+      fill: "none"
+    }, getIconA11yProps(title)), props), {
+      children: [
+        title ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("title", { children: title }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("circle", { cx: "50", cy: "50", r: "40", fill: primaryColor }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          "rect",
+          {
+            x: "21",
+            y: "18",
+            width: "8",
+            height: "64",
+            rx: "4",
+            transform: "rotate(-7 21 18)",
+            fill: accentColor
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          "rect",
+          {
+            x: "37",
+            y: "12",
+            width: "8",
+            height: "76",
+            rx: "4",
+            transform: "rotate(-4 37 12)",
+            fill: accentColor
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          "rect",
+          {
+            x: "53",
+            y: "12",
+            width: "8",
+            height: "76",
+            rx: "4",
+            transform: "rotate(-4 53 12)",
+            fill: accentColor
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          "rect",
+          {
+            x: "69",
+            y: "18",
+            width: "8",
+            height: "64",
+            rx: "4",
+            transform: "rotate(-7 69 18)",
+            fill: accentColor
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("rect", { x: "12", y: "44", width: "76", height: "12", fill: primaryColor })
+      ]
+    })
+  );
+};
+LogoOpinionIcon.displayName = "LogoOpinionIcon";
+
+// src/primitives/venue-logo/svg/logo-polymarket.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var POLYMARKET_BLUE = "#3861FB";
+var LogoPolymarketIcon = (_a) => {
+  var _b = _a, {
+    title,
+    className,
+    isColor = true,
+    color
+  } = _b, props = __objRest(_b, [
+    "title",
+    "className",
+    "isColor",
+    "color"
+  ]);
+  const primaryColor = resolveLogoPrimaryColor({
+    brandColor: POLYMARKET_BLUE,
+    isColor,
+    color
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+    "svg",
+    __spreadProps(__spreadValues(__spreadValues({
+      viewBox: "0 0 100 100",
+      className,
+      fill: "none"
+    }, getIconA11yProps(title)), props), {
+      children: [
+        title ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("title", { children: title }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          "path",
+          {
+            d: "M18 10L78 2V98L18 88V10Z",
+            stroke: primaryColor,
+            strokeWidth: "8",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M18 32L78 44", stroke: primaryColor, strokeWidth: "8", strokeLinecap: "round" }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M18 58L78 70", stroke: primaryColor, strokeWidth: "8", strokeLinecap: "round" })
+      ]
+    })
+  );
+};
+LogoPolymarketIcon.displayName = "LogoPolymarketIcon";
+
+// src/primitives/venue-logo/svg/logo-probable.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var PROBABLE_ORANGE = "#F85B22";
+var LogoProbableIcon = (_a) => {
+  var _b = _a, {
+    title,
+    className,
+    isColor = true,
+    color
+  } = _b, props = __objRest(_b, [
+    "title",
+    "className",
+    "isColor",
+    "color"
+  ]);
+  const primaryColor = resolveLogoPrimaryColor({
+    brandColor: PROBABLE_ORANGE,
+    isColor,
+    color
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+    "svg",
+    __spreadProps(__spreadValues(__spreadValues({
+      viewBox: "0 0 100 100",
+      className,
+      fill: "none"
+    }, getIconA11yProps(title)), props), {
+      children: [
+        title ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("title", { children: title }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("rect", { x: "20", y: "16", width: "60", height: "12", fill: primaryColor }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("rect", { x: "18", y: "36", width: "64", height: "46", rx: "23", fill: primaryColor }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          "rect",
+          {
+            x: "32",
+            y: "50",
+            width: "40",
+            height: "18",
+            rx: "9",
+            fill: isColor && !color ? "white" : primaryColor
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("circle", { cx: "61", cy: "59", r: "7", fill: primaryColor })
+      ]
+    })
+  );
+};
+LogoProbableIcon.displayName = "LogoProbableIcon";
+
+// src/primitives/venue-logo/venue-logo.constants.ts
+var venueLogoRegistry = {
+  kalshi: LogoKalshiIcon,
+  polymarket: LogoPolymarketIcon,
+  opinion: LogoOpinionIcon,
+  probable: LogoProbableIcon
+};
+var venueLogoNames = Object.keys(venueLogoRegistry);
+var sizeClasses2 = {
+  xxs: "h-2 w-2",
+  xs: "h-3 w-3",
+  s: "h-4 w-4",
+  m: "h-6 w-6",
+  l: "h-8 w-8",
+  xl: "h-10 w-10",
+  xxl: "h-12 w-12"
+};
+
+// src/primitives/venue-logo/index.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var VenueLogo = ({
+  venue,
+  isColor = true,
+  isMonochromatic = false,
+  color,
+  size = "m",
+  className,
+  ariaLabel,
+  title
+}) => {
+  const labels = (0, import_hooks11.useLabels)();
+  const Component = venueLogoRegistry[venue];
+  const sizeClass = sizeClasses2[size];
+  const resolvedIsColor = isMonochromatic ? false : isColor;
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    Component,
+    {
+      className: cn("shrink-0", sizeClass, className),
+      isColor: resolvedIsColor,
+      color,
+      "aria-label": ariaLabel != null ? ariaLabel : labels.venues[venue],
+      title
+    }
+  );
+};
+VenueLogo.displayName = "VenueLogo";
+
+// src/events/item/event-list-item.utils.ts
+var resolveEventListItemEvent = (fetchedEvent) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+  if (!fetchedEvent)
+    return void 0;
+  const fallbackVenueEvent = fetchedEvent.venueEvents[0];
+  if (!fallbackVenueEvent)
+    return void 0;
+  const mergedVenueMarkets = fetchedEvent.markets.flatMap((venueEvent) => venueEvent.venueMarkets);
+  const venueMarkets = mergedVenueMarkets.length > 0 ? mergedVenueMarkets : [];
+  if ((venueMarkets == null ? void 0 : venueMarkets.length) === 0)
+    return void 0;
+  return __spreadProps(__spreadValues({}, fetchedEvent), {
+    id: fetchedEvent.id,
+    title: fetchedEvent.title || fallbackVenueEvent.title,
+    description: (_b = (_a = fetchedEvent.description) != null ? _a : fallbackVenueEvent.description) != null ? _b : null,
+    volume: (_d = (_c = fetchedEvent.volume) != null ? _c : fallbackVenueEvent.volume) != null ? _d : null,
+    startDate: (_f = (_e = fetchedEvent.startDate) != null ? _e : fallbackVenueEvent.startDate) != null ? _f : null,
+    endDate: (_h = (_g = fetchedEvent.endDate) != null ? _g : fallbackVenueEvent.endDate) != null ? _h : null,
+    creationDate: (_j = (_i = fetchedEvent.creationDate) != null ? _i : fallbackVenueEvent.creationDate) != null ? _j : null
+  });
+};
+var normalizeProbability = (value) => {
+  if (typeof value !== "number" || !Number.isFinite(value))
+    return void 0;
+  if (value < 0)
+    return 0;
+  if (value > 1)
+    return 1;
+  return value;
+};
+var hasDateLabel = (outcome) => {
+  return !!toDate(outcome.label);
+};
+var sortOutcomes = (outcomes) => {
+  if (outcomes.length <= 1)
+    return outcomes;
+  const now = Date.now();
+  if (outcomes.some(hasDateLabel)) {
+    return [...outcomes].sort((a, b) => {
+      var _a, _b, _c, _d;
+      const aDate = (_b = (_a = toDate(a.label)) == null ? void 0 : _a.getTime()) != null ? _b : 0;
+      const bDate = (_d = (_c = toDate(b.label)) == null ? void 0 : _c.getTime()) != null ? _d : 0;
+      return Math.abs(aDate - now) - Math.abs(bDate - now);
+    });
+  }
+  return [...outcomes].sort((a, b) => {
+    var _a, _b;
+    const aPrice = (_a = normalizeProbability(a.price)) != null ? _a : 0;
+    const bPrice = (_b = normalizeProbability(b.price)) != null ? _b : 0;
+    return bPrice - aPrice;
+  });
+};
+var resolveOutcomeTitle = (outcome) => {
+  if (outcome.title && outcome.title.trim())
+    return outcome.title;
+  return outcome.label;
+};
+var selectPrimaryVenueMarket = (venueMarkets) => {
+  if (venueMarkets.length === 0)
+    return void 0;
+  if (venueMarkets.length === 1)
+    return venueMarkets[0];
+  return [...venueMarkets].sort((a, b) => {
+    const aVolume = typeof a.volume === "number" ? a.volume : -1;
+    const bVolume = typeof b.volume === "number" ? b.volume : -1;
+    return bVolume - aVolume;
+  })[0];
+};
+var resolveTileTitle = (event, primaryVenueMarket, titleOverride) => {
+  if (typeof titleOverride === "string" && titleOverride.trim()) {
+    return titleOverride;
+  }
+  if (typeof (primaryVenueMarket == null ? void 0 : primaryVenueMarket.question) === "string" && primaryVenueMarket.question.trim()) {
+    return primaryVenueMarket.question;
+  }
+  return event.title;
+};
+var resolveTileImage = (event, primaryVenueMarket, imageOverride) => {
+  var _a, _b, _c, _d, _e, _f;
+  if (typeof imageOverride === "string" && imageOverride.trim()) {
+    return imageOverride;
+  }
+  if (typeof (primaryVenueMarket == null ? void 0 : primaryVenueMarket.image) === "string" && primaryVenueMarket.image.trim()) {
+    return primaryVenueMarket.image;
+  }
+  if (typeof ((_b = (_a = event.venueEvents) == null ? void 0 : _a[0]) == null ? void 0 : _b.image) === "string" && ((_d = (_c = event.venueEvents) == null ? void 0 : _c[0]) == null ? void 0 : _d.image.trim())) {
+    return (_f = (_e = event.venueEvents) == null ? void 0 : _e[0]) == null ? void 0 : _f.image;
+  }
+  return void 0;
+};
+
+// src/events/item-details/event-list-item-details.utils.ts
+var import_dayjs2 = __toESM(require("dayjs"));
+var normalizeLabel = (value) => {
+  return value.trim().toLowerCase();
+};
+var isDateLikeLabel = (value) => {
+  if (!value.trim())
+    return false;
+  return (0, import_dayjs2.default)(value).isValid();
+};
+var formatDateLabel = (value) => {
+  if (!isDateLikeLabel(value))
+    return value;
+  return (0, import_dayjs2.default)(value).format("MMM D, YYYY");
+};
+var getDefaultSelectedTimeRange = (value) => {
+  if (!value)
+    return "1M";
+  return value;
+};
+var getTimeWindowByRange = (range) => {
+  const endTs = (0, import_dayjs2.default)().unix();
+  if (range === "1H") {
+    return {
+      startTs: import_dayjs2.default.unix(endTs).subtract(1, "hour").unix(),
+      endTs,
+      intervalMinutes: 5
+    };
+  }
+  if (range === "6H") {
+    return {
+      startTs: import_dayjs2.default.unix(endTs).subtract(6, "hour").unix(),
+      endTs,
+      intervalMinutes: 15
+    };
+  }
+  if (range === "1D") {
+    return {
+      startTs: import_dayjs2.default.unix(endTs).subtract(1, "day").unix(),
+      endTs,
+      intervalMinutes: 30
+    };
+  }
+  if (range === "1W") {
+    return {
+      startTs: import_dayjs2.default.unix(endTs).subtract(7, "day").unix(),
+      endTs,
+      intervalMinutes: 60
+    };
+  }
+  if (range === "1M") {
+    return {
+      startTs: import_dayjs2.default.unix(endTs).subtract(1, "month").unix(),
+      endTs,
+      intervalMinutes: 240
+    };
+  }
+  return {
+    startTs: import_dayjs2.default.unix(endTs).subtract(6, "month").unix(),
+    endTs,
+    intervalMinutes: 720
+  };
+};
+var resolveOutcomeLabels = (venueMarkets) => {
+  var _a;
+  const primaryMarket = selectPrimaryVenueMarket(venueMarkets);
+  const initialLabels = ((_a = primaryMarket == null ? void 0 : primaryMarket.venueMarketOutcomes) != null ? _a : []).map(
+    (outcome) => resolveOutcomeTitle(outcome)
+  );
+  const labels = new Set(initialLabels);
+  venueMarkets.forEach((market) => {
+    sortOutcomes(market.venueMarketOutcomes).forEach((outcome) => {
+      labels.add(resolveOutcomeTitle(outcome));
+    });
+  });
+  return [...labels];
+};
+var resolveDefaultOutcomeLabel = (outcomeLabels) => {
+  return outcomeLabels[0];
+};
+var matchOutcomeByLabel = (outcome, selectedOutcomeLabel) => {
+  const normalizedSelectedLabel = normalizeLabel(selectedOutcomeLabel);
+  const resolvedTitle = resolveOutcomeTitle(outcome);
+  return normalizeLabel(resolvedTitle) === normalizedSelectedLabel || normalizeLabel(outcome.label) === normalizedSelectedLabel;
+};
+var resolveOutcomesByVenue = (venueMarkets, selectedOutcomeLabel) => {
+  return venueMarkets.map((market) => {
+    const matchedOutcome = sortOutcomes(market.venueMarketOutcomes).find((outcome) => {
+      return matchOutcomeByLabel(outcome, selectedOutcomeLabel);
+    });
+    if (!matchedOutcome)
+      return null;
+    return {
+      venue: market.venue,
+      market,
+      outcome: matchedOutcome
+    };
+  }).filter((item) => item != null);
+};
+var buildPriceHistoryGroups = (selectedOutcomes) => {
+  const venueMarketOutcomeIdsByVenue = /* @__PURE__ */ new Map();
+  selectedOutcomes.forEach(({ venue, outcome }) => {
+    var _a;
+    if (!venueMarketOutcomeIdsByVenue.has(venue)) {
+      venueMarketOutcomeIdsByVenue.set(venue, []);
+    }
+    (_a = venueMarketOutcomeIdsByVenue.get(venue)) == null ? void 0 : _a.push(outcome.id);
+  });
+  return [...venueMarketOutcomeIdsByVenue.entries()].map(([venue, venueMarketOutcomeIds]) => ({
+    venue,
+    venueMarketOutcomeIds
+  })).filter((group) => group.venueMarketOutcomeIds.length > 0);
+};
+var resolveSeriesColor = (venue, index) => {
+  var _a;
+  const colorFromVenue = lineColorByVenue[venue];
+  if (colorFromVenue)
+    return colorFromVenue;
+  return (_a = fallbackLineColors[index % fallbackLineColors.length]) != null ? _a : "#2e5cff";
+};
+
+// src/events/item-details/index.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var EventListItemDetailsLoadingState = ({
+  classNames,
+  ariaLabel
+}) => {
+  const labels = (0, import_hooks12.useLabels)();
+  return /* @__PURE__ */ (0, import_jsx_runtime20.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 = (0, import_hooks12.useLabels)();
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    Card,
+    {
+      className: cn(detailsBaseCardClassName, classNames == null ? void 0 : classNames.root),
+      role: "status",
+      "aria-label": ariaLabel != null ? ariaLabel : labels.eventItemDetails.unavailableAria,
+      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: cn("flex flex-col gap-1", classNames == null ? void 0 : classNames.header), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Typography, { variant: "title", className: cn("truncate", classNames == null ? void 0 : classNames.title), children: labels.eventItemDetails.unavailableTitle }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.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 = (0, import_hooks12.useLabels)();
+  const isLocalOutcomeSelection = !isDateOutcomeMarket && outcomeLabels.length === 2;
+  const [internalSelectedOutcomeLabel, setInternalSelectedOutcomeLabel] = (0, import_react3.useState)(selectedOutcomeLabel);
+  const [selectedBinaryOutcome, setSelectedBinaryOutcome] = (0, import_react3.useState)("Yes");
+  (0, import_react3.useEffect)(() => {
+    setInternalSelectedOutcomeLabel(selectedOutcomeLabel);
+  }, [selectedOutcomeLabel]);
+  const resolvedSelectedOutcomeLabel = isLocalOutcomeSelection ? internalSelectedOutcomeLabel : selectedOutcomeLabel;
+  const selectedOutcomesByVenue = (0, import_react3.useMemo)(() => {
+    return resolveOutcomesByVenue(venueMarkets, resolvedSelectedOutcomeLabel);
+  }, [resolvedSelectedOutcomeLabel, venueMarkets]);
+  const segmentedDisplayItems = (0, import_react3.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 = (0, import_react3.useMemo)(() => {
+    return buildPriceHistoryGroups(selectedOutcomesByVenue);
+  }, [selectedOutcomesByVenue]);
+  const timeWindow = (0, import_react3.useMemo)(() => {
+    return getTimeWindowByRange(selectedTimeRange);
+  }, [selectedTimeRange]);
+  const { data: priceHistoryData, isLoading: isPriceHistoryLoading } = (0, import_hooks12.usePriceHistory)(__spreadProps(__spreadValues({
+    groups: priceHistoryGroups
+  }, timeWindow), {
+    enabled: priceHistoryGroups.length > 0
+  }));
+  const chartSeries = (0, import_react3.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__ */ (0, import_jsx_runtime20.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__ */ (0, import_jsx_runtime20.jsxs)(
+          "div",
+          {
+            className: cn("flex flex-row items-center justify-between gap-4", classNames == null ? void 0 : classNames.summary),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime20.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__ */ (0, import_jsx_runtime20.jsx)(
+                      Badge,
+                      {
+                        text,
+                        size: "l",
+                        prefix: showVenueLogo ? /* @__PURE__ */ (0, import_jsx_runtime20.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__ */ (0, import_jsx_runtime20.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 = (0, import_hooks12.useSdkUiConfig)();
+  const labels = (0, import_hooks12.useLabels)();
+  const venueMarkets = (0, import_react3.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 = (0, import_react3.useMemo)(() => {
+    return selectPrimaryVenueMarket(venueMarkets);
+  }, [venueMarkets]);
+  const outcomeLabels = (0, import_react3.useMemo)(() => {
+    return resolveOutcomeLabels(venueMarkets);
+  }, [venueMarkets]);
+  const [selectedOutcomeLabel, setSelectedOutcomeLabel] = (0, import_react3.useState)(() => {
+    return resolveDefaultOutcomeLabel(outcomeLabels);
+  });
+  const [selectedTimeRange, setSelectedTimeRange] = (0, import_react3.useState)(() => {
+    return getDefaultSelectedTimeRange(defaultTimeRange);
+  });
+  (0, import_react3.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 = (0, import_react3.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 = (0, import_react3.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]);
+  (0, import_react3.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 = (0, import_react3.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 = (0, import_react3.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__ */ (0, import_jsx_runtime20.jsx)(EventListItemDetailsUnavailableState, { classNames, ariaLabel });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+    Card,
+    {
+      className: cn(detailsBaseCardClassName, classNames == null ? void 0 : classNames.root),
+      "aria-label": ariaLabel != null ? ariaLabel : resolvedTitle,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: cn("flex items-start gap-3 md:gap-4", classNames == null ? void 0 : classNames.header), children: [
+          resolvedImage ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            "img",
+            {
+              src: resolvedImage,
+              alt: "",
+              className: "size-10 rounded-agg-lg object-cover md:size-[60px]"
+            }
+          ) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.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__ */ (0, import_jsx_runtime20.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__ */ (0, import_jsx_runtime20.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__ */ (0, import_jsx_runtime20.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__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              Typography,
+              {
+                variant: "label",
+                className: "text-agg-xs leading-agg-4 tracking-agg-normal text-agg-muted-foreground",
+                children: statItem.label
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-baseline gap-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                Typography,
+                {
+                  variant: "body",
+                  className: "text-agg-lg leading-agg-7 text-agg-foreground",
+                  children: statItem.value
+                }
+              ),
+              statItem.delta ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                Typography,
+                {
+                  variant: "meta",
+                  className: cn("text-agg-sm leading-agg-5", deltaClassName),
+                  children: statItem.delta
+                }
+              ) : null
+            ] })
+          ] }, `${statItem.label}-${statItem.value}`);
+        }) }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          EventListItemDetailsGraphSection,
+          {
+            venueMarkets,
+            outcomeLabels,
+            selectedOutcomeLabel,
+            onSelectedOutcomeLabelChange: setSelectedOutcomeLabel,
+            probabilityByLabel,
+            switchLabels,
+            isDateOutcomeMarket,
+            classNames,
+            showVenueLogo,
+            venueInfo,
+            formatPercent: config.formatPercent,
+            selectedTimeRange
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: cn("flex flex-wrap items-center justify-between gap-4", classNames == null ? void 0 : classNames.footer), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Typography, { variant: "meta", className: "text-agg-muted-foreground text-agg-sm leading-agg-5", children: volumeLabel || "-" }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.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__ */ (0, import_jsx_runtime20.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
+  } = (0, import_hooks12.useEvent)(eventId, {
+    enabled: !!eventId
+  });
+  const resolvedEvent = (0, import_react3.useMemo)(() => {
+    return resolveEventListItemEvent(fetchedEvent);
+  }, [fetchedEvent]);
+  if (!eventId) {
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      EventListItemDetailsUnavailableState,
+      {
+        classNames: rest.classNames,
+        ariaLabel: rest.ariaLabel
+      }
+    );
+  }
+  if (isLoading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(EventListItemDetailsLoadingState, { classNames: rest.classNames, ariaLabel: rest.ariaLabel });
+  }
+  if (!resolvedEvent && !isError) {
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(EventListItemDetailsLoadingState, { classNames: rest.classNames, ariaLabel: rest.ariaLabel });
+  }
+  if (!resolvedEvent) {
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      EventListItemDetailsUnavailableState,
+      {
+        classNames: rest.classNames,
+        ariaLabel: rest.ariaLabel
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(EventListItemDetailsContent, __spreadValues({ event: resolvedEvent }, rest));
+};
+var EventListItemDetails = (props) => {
+  if (props.isLoading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime20.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__ */ (0, import_jsx_runtime20.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__ */ (0, import_jsx_runtime20.jsx)(EventListItemDetailsByEventId, __spreadValues({}, byEventIdProps));
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    EventListItemDetailsUnavailableState,
+    {
+      classNames: props.classNames,
+      ariaLabel: props.ariaLabel
+    }
+  );
+};
+EventListItemDetails.displayName = "EventListItemDetails";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  EventListItemDetails
+});