@agg-market/ui 3.0.0 → 4.0.0

package/dist/{chunk-KFOATMAE.mjs → chunk-JNH64AKR.mjs}

@@ -8,7 +8,7 @@ import {
   resolveOutcomeLabels,
   resolveOutcomesByVenue,
   resolveSeriesColor
-} from "./chunk-422MCIXV.mjs";
+} from "./chunk-HOXTJ742.mjs";
 import {
   normalizeProbability,
   resolveEventListItemEvent,
@@ -16,7 +16,7 @@ import {
   resolveTileTitle,
   resolveVenueLabel,
   selectPrimaryVenueMarket
-} from "./chunk-GHB3GOCW.mjs";
+} from "./chunk-QM7CGMFG.mjs";
 import {
   Badge
 } from "./chunk-K6IJ4WBM.mjs";
@@ -24,10 +24,10 @@ import {
   Skeleton,
   detailsBaseCardClassName,
   eventListItemDetailsTimeRanges
-} from "./chunk-V52WSZHQ.mjs";
+} from "./chunk-M4RJHRFT.mjs";
 import {
   VenueLogo
-} from "./chunk-D7JTOGYP.mjs";
+} from "./chunk-PORVP72S.mjs";
 import {
   Button
 } from "./chunk-KAGYJ4XT.mjs";
@@ -39,10 +39,10 @@ import {
 } from "./chunk-FO2QCB4Z.mjs";
 import {
   LineChart
-} from "./chunk-BN5VVHNV.mjs";
+} from "./chunk-OJVTGNIF.mjs";
 import {
   SwitchButton
-} from "./chunk-CTVMT3VL.mjs";
+} from "./chunk-LCZKSITC.mjs";
 import {
   __objRest,
   __spreadProps,
@@ -101,13 +101,18 @@ var resolveAverageProbability = (values) => {
   return validValues.reduce((sum, value) => sum + value, 0) / validValues.length;
 };
 var resolveOutcomeCandidateIds = (market, outcome) => {
-  var _a;
-  return [outcome.id, (_a = outcome.externalIdentifier) != null ? _a : void 0, market.externalIdentifier].filter(
-    (value) => typeof value === "string" && value.trim().length > 0
-  );
+  var _a, _b;
+  const marketWithCanonicalId = market;
+  return [
+    outcome.id,
+    (_a = outcome.externalIdentifier) != null ? _a : void 0,
+    market.externalIdentifier,
+    (_b = marketWithCanonicalId.marketId) != null ? _b : void 0
+  ].filter((value) => typeof value === "string" && value.trim().length > 0);
 };
 var EventListItemDetailsGraphSection = ({
   venueMarkets,
+  canonicalMarketId,
   selectedOutcomeLabel,
   onSelectedOutcomeLabelChange,
   switchLabels,
@@ -200,8 +205,8 @@ var EventListItemDetailsGraphSection = ({
     return [...outcomeByModeAndId.values()];
   }, [selectedOutcomesByMode]);
   const priceHistoryGroups = useMemo(() => {
-    return buildPriceHistoryGroups(allOutcomesForHistory);
-  }, [allOutcomesForHistory]);
+    return buildPriceHistoryGroups(allOutcomesForHistory, canonicalMarketId);
+  }, [allOutcomesForHistory, canonicalMarketId]);
   const timeWindow = useMemo(() => {
     return getTimeWindowByRange(selectedTimeRange);
   }, [selectedTimeRange]);
@@ -405,11 +410,12 @@ var EventListItemDetailsContent = ({
   ariaLabel,
   defaultTimeRange
 }) => {
+  var _a, _b;
   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 : [];
+    var _a2, _b2, _c;
+    return (_c = (_b2 = (_a2 = event.markets) == null ? void 0 : _a2[0]) == null ? void 0 : _b2.venueMarkets) != null ? _c : [];
   }, [event.markets]);
   const primaryVenueMarket = useMemo(() => {
     return selectPrimaryVenueMarket(venueMarkets);
@@ -447,9 +453,9 @@ var EventListItemDetailsContent = ({
     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;
+      var _a2, _b2;
+      const leftProbability = (_a2 = probabilityByLabel.get(left)) != null ? _a2 : -1;
+      const rightProbability = (_b2 = probabilityByLabel.get(right)) != null ? _b2 : -1;
       return rightProbability - leftProbability;
     })[0];
   }, [outcomeLabels, probabilityByLabel]);
@@ -465,18 +471,18 @@ var EventListItemDetailsContent = ({
     setSelectedOutcomeLabel(fallbackOutcomeLabel);
   }, [isDateOutcomeMarket, mainOutcomeLabel, outcomeLabels, selectedOutcomeLabel]);
   const switchLabels = useMemo(() => {
-    var _a, _b;
+    var _a2, _b2;
     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;
+      var _a3, _b3;
+      const leftProbability = (_a3 = probabilityByLabel.get(left)) != null ? _a3 : -1;
+      const rightProbability = (_b3 = probabilityByLabel.get(right)) != null ? _b3 : -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;
+    const firstLabel = (_a2 = sortedOutcomeLabels[0]) != null ? _a2 : labels.eventItemDetails.yes;
+    const secondLabel = (_b2 = sortedOutcomeLabels.find((label) => label !== firstLabel)) != null ? _b2 : firstLabel;
     return [firstLabel, secondLabel];
   }, [
     isDateOutcomeMarket,
@@ -486,8 +492,8 @@ var EventListItemDetailsContent = ({
     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;
+    var _a2;
+    const resolvedVolume = typeof event.volume === "number" ? event.volume : (_a2 = primaryVenueMarket == null ? void 0 : primaryVenueMarket.volume) != null ? _a2 : void 0;
     if (typeof resolvedVolume !== "number")
       return "";
     return `${config.formatCompactCurrency(resolvedVolume)} ${labels.eventItemDetails.volumeSuffix}`;
@@ -585,6 +591,7 @@ var EventListItemDetailsContent = ({
           EventListItemDetailsGraphSection,
           {
             venueMarkets,
+            canonicalMarketId: (_b = (_a = event.markets) == null ? void 0 : _a[0]) == null ? void 0 : _b.id,
             selectedOutcomeLabel,
             onSelectedOutcomeLabelChange: setSelectedOutcomeLabel,
             switchLabels,

package/dist/{chunk-DL7STJQ5.mjs → chunk-LA3FBBSJ.mjs}

@@ -9,17 +9,17 @@ import {
   resolveVenueLabel,
   resolveVisibleOutcomes,
   selectPrimaryVenueMarket
-} from "./chunk-GHB3GOCW.mjs";
+} from "./chunk-QM7CGMFG.mjs";
 import {
   Badge
 } from "./chunk-K6IJ4WBM.mjs";
 import {
   Skeleton,
   baseCardClassName
-} from "./chunk-V52WSZHQ.mjs";
+} from "./chunk-M4RJHRFT.mjs";
 import {
   VenueLogo
-} from "./chunk-D7JTOGYP.mjs";
+} from "./chunk-PORVP72S.mjs";
 import {
   Icon
 } from "./chunk-PZTHM6WG.mjs";

package/dist/{chunk-CTVMT3VL.mjs → chunk-LCZKSITC.mjs}

@@ -60,10 +60,10 @@ var SwitchButton = ({
     return null;
   }
   const handleKeyDown = (event, optionIndex) => {
-    if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") {
+    if ((event == null ? void 0 : event.key) !== "ArrowLeft" && (event == null ? void 0 : event.key) !== "ArrowRight") {
       return;
     }
-    event.preventDefault();
+    event == null ? void 0 : event.preventDefault();
     const nextOptionIndex = resolveNextEnabledIndex(
       options,
       optionIndex,

package/dist/chunk-M4RJHRFT.mjs

@@ -0,0 +1,445 @@
+import {
+  Card
+} from "./chunk-FO2QCB4Z.mjs";
+import {
+  cn,
+  getMotionClassName
+} from "./chunk-GJ4U5NCE.mjs";
+
+// src/primitives/skeleton/views/event-list-skeleton-view.tsx
+import { useLabels as useLabels2 } from "@agg-market/hooks";
+
+// src/primitives/skeleton/skeleton-block.tsx
+import { useSdkUiConfig } from "@agg-market/hooks";
+import { jsx } from "react/jsx-runtime";
+var SkeletonBlock = ({ className }) => {
+  const { enableAnimations } = useSdkUiConfig();
+  return /* @__PURE__ */ 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
+import { useLabels } from "@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
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var EventListItemSkeletonView = ({
+  className,
+  ariaLabel,
+  isStandalone = false
+}) => {
+  const labels = useLabels();
+  const outcomeTitleWidths = ["w-40", "w-[200px]"];
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      className: cn("group/agg-skeleton", 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__ */ jsxs("div", { className: "flex h-14 w-full items-center gap-3 justify-stretch", children: [
+          /* @__PURE__ */ jsx2(SkeletonBlock, { className: "size-10! rounded-agg-lg" }),
+          /* @__PURE__ */ jsx2(SkeletonBlock, { className: "h-6 w-fit flex-1 rounded-agg-sm" })
+        ] }),
+        /* @__PURE__ */ jsx2("div", { className: "flex flex-col gap-3", children: outcomeTitleWidths.map((outcomeTitleWidth, index) => /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between gap-3", children: [
+          /* @__PURE__ */ jsx2(SkeletonBlock, { className: cn("h-5 rounded-agg-sm", outcomeTitleWidth) }),
+          /* @__PURE__ */ jsx2(SkeletonBlock, { className: "h-9 w-[100px] rounded-agg-full" })
+        ] }, index)) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-5 text-agg-muted-foreground", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+            /* @__PURE__ */ jsx2(SkeletonBlock, { className: "h-5 w-[100px] rounded-agg-sm" }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx2(SkeletonBlock, { className: "size-[14px] rounded-agg-sm" }),
+              /* @__PURE__ */ jsx2(SkeletonBlock, { className: "size-[14px] rounded-agg-sm" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx2(SkeletonBlock, { className: "h-5 w-[60px] rounded-agg-sm" })
+        ] })
+      ]
+    }
+  );
+};
+EventListItemSkeletonView.displayName = "EventListItemSkeletonView";
+
+// src/primitives/skeleton/views/event-list-skeleton-view.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var EventListSkeletonView = ({ className, ariaLabel }) => {
+  const labels = useLabels2();
+  return /* @__PURE__ */ jsxs2(
+    "section",
+    {
+      className: cn("group/agg-skeleton", "flex w-full flex-col gap-5", className),
+      role: "status",
+      "aria-label": ariaLabel != null ? ariaLabel : labels.eventList.loading("events"),
+      "aria-busy": true,
+      children: [
+        /* @__PURE__ */ jsxs2("header", { className: "flex w-full flex-col items-start justify-between gap-3 md:flex-row md:flex-nowrap md:items-center md:gap-5", children: [
+          /* @__PURE__ */ jsx3(SkeletonBlock, { className: "h-7 w-[120px] rounded-agg-md" }),
+          /* @__PURE__ */ jsx3(SkeletonBlock, { className: "h-8 w-full rounded-agg-md md:w-[400px]" })
+        ] }),
+        /* @__PURE__ */ jsx3("div", { className: "grid grid-cols-1 gap-5 md:grid-cols-3", children: Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ jsx3(
+          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
+import { useLabels as useLabels3 } from "@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
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var EventListItemDetailsSkeletonView = ({
+  className,
+  ariaLabel
+}) => {
+  const labels = useLabels3();
+  return /* @__PURE__ */ jsxs3(
+    Card,
+    {
+      className: cn("group/agg-skeleton", detailsBaseCardClassName, className),
+      role: "status",
+      "aria-label": ariaLabel != null ? ariaLabel : labels.eventItemDetails.loading,
+      "aria-busy": true,
+      children: [
+        /* @__PURE__ */ jsxs3("div", { className: "flex h-14 w-full items-center gap-3 justify-stretch", children: [
+          /* @__PURE__ */ jsx4(SkeletonBlock, { className: "size-10! rounded-agg-lg" }),
+          /* @__PURE__ */ jsx4(SkeletonBlock, { className: "h-6 w-fit flex-1 rounded-agg-sm" })
+        ] }),
+        /* @__PURE__ */ jsxs3("div", { className: "flex w-full flex-col gap-4 md:gap-6", children: [
+          /* @__PURE__ */ jsxs3("div", { className: "flex w-full flex-col gap-3 md:flex-row md:items-center md:justify-between", children: [
+            /* @__PURE__ */ jsxs3("div", { className: "flex max-w-full gap-2 overflow-hidden", children: [
+              /* @__PURE__ */ jsx4(SkeletonBlock, { className: "h-9 w-[100px] rounded-agg-full" }),
+              /* @__PURE__ */ jsx4(SkeletonBlock, { className: "h-9 w-[100px] rounded-agg-full" }),
+              /* @__PURE__ */ jsx4(SkeletonBlock, { className: "h-9 w-[100px] rounded-agg-full" })
+            ] }),
+            /* @__PURE__ */ jsx4(SkeletonBlock, { className: "h-9 w-full max-w-[221px] rounded-agg-full md:w-[221px]" })
+          ] }),
+          /* @__PURE__ */ jsxs3("div", { className: "flex w-full flex-col gap-3", children: [
+            /* @__PURE__ */ jsx4(SkeletonBlock, { className: "h-[220px] w-full rounded-agg-xl md:h-[240px]" }),
+            /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsx4(SkeletonBlock, { className: "h-5 w-[59px] rounded-agg-sm" }),
+              /* @__PURE__ */ jsx4(SkeletonBlock, { className: "h-5 w-40 rounded-agg-sm" })
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+EventListItemDetailsSkeletonView.displayName = "EventListItemDetailsSkeletonView";
+
+// src/primitives/skeleton/views/market-details-skeleton-view.tsx
+import { useLabels as useLabels4 } from "@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";
+var getMarketDetailsTabs = (labels) => {
+  return [
+    { value: "order-book", label: labels.marketDetails.tabs.orderBook },
+    { value: "graph", label: labels.marketDetails.tabs.graph }
+  ];
+};
+var marketDetailsDefaultIsOpened = false;
+var orderBookRowLimitDefault = 4;
+
+// src/primitives/skeleton/views/market-details-skeleton-view.tsx
+import { Fragment, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var orderBookAskBarWidths = [
+  "w-[52px] md:w-[240px]",
+  "w-[48px] md:w-[200px]",
+  "w-[40px] md:w-[120px]",
+  "w-[36px] md:w-[60px]"
+];
+var orderBookBidBarWidths = [
+  "w-[36px] md:w-[60px]",
+  "w-[40px] md:w-[120px]",
+  "w-[48px] md:w-[200px]",
+  "w-[52px] md:w-[240px]"
+];
+var MarketDetailsHeaderSkeleton = () => {
+  return /* @__PURE__ */ jsxs4("div", { className: "flex flex-wrap items-center justify-between gap-3 px-4 py-3 md:px-5", children: [
+    /* @__PURE__ */ jsxs4("div", { className: "flex min-w-0 items-center gap-3 md:min-w-52 md:gap-4", children: [
+      /* @__PURE__ */ jsx5(SkeletonBlock, { className: "size-12 rounded-agg-lg md:size-[60px]" }),
+      /* @__PURE__ */ jsxs4("div", { className: "flex min-w-0 flex-col gap-2", children: [
+        /* @__PURE__ */ jsx5(SkeletonBlock, { className: "h-6 w-[132px] rounded-agg-sm" }),
+        /* @__PURE__ */ jsx5(SkeletonBlock, { className: "h-4 w-[141px] rounded-agg-sm" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx5(SkeletonBlock, { className: "h-9 w-[60px] rounded-agg-md" }),
+    /* @__PURE__ */ jsxs4("div", { className: "flex w-full gap-2 md:w-auto", children: [
+      /* @__PURE__ */ jsx5(SkeletonBlock, { className: "h-9 w-full rounded-agg-full md:w-[135px]" }),
+      /* @__PURE__ */ jsx5(SkeletonBlock, { className: "h-9 w-full rounded-agg-full md:w-[131px]" })
+    ] })
+  ] });
+};
+var MarketDetailsTabsSkeleton = () => {
+  return /* @__PURE__ */ jsxs4("div", { className: "flex h-14 items-end px-4 md:px-5", children: [
+    /* @__PURE__ */ jsxs4("div", { className: "flex h-full flex-col items-end justify-end rounded-t-agg-lg", children: [
+      /* @__PURE__ */ jsx5("div", { className: "px-4 py-3", children: /* @__PURE__ */ jsx5(SkeletonBlock, { className: "h-6 w-20 rounded-agg-sm" }) }),
+      /* @__PURE__ */ jsx5(SkeletonBlock, { className: "h-[3px] w-full rounded-t-agg-sm" })
+    ] }),
+    /* @__PURE__ */ jsxs4("div", { className: "flex h-full flex-col justify-center", children: [
+      /* @__PURE__ */ jsx5("div", { className: "px-4 py-3", children: /* @__PURE__ */ jsx5(SkeletonBlock, { className: "h-6 w-12 rounded-agg-sm" }) }),
+      /* @__PURE__ */ jsx5("div", { className: "h-[3px] w-full" })
+    ] })
+  ] });
+};
+var MarketDetailsOrderBookRows = ({
+  side,
+  barWidths
+}) => {
+  return /* @__PURE__ */ jsx5("div", { className: "flex flex-col gap-2", children: barWidths.map((barWidthClassName, index) => /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsxs4("div", { className: "grid grid-cols-[52px_1fr_1fr_52px] items-center gap-2 md:grid-cols-[88px_1fr_1fr_minmax(120px,220px)] md:gap-6", children: [
+      /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-1 md:gap-3", children: [
+        /* @__PURE__ */ jsx5(SkeletonBlock, { className: "size-4 rounded-agg-sm" }),
+        /* @__PURE__ */ jsx5(SkeletonBlock, { className: "h-5 w-[60px] rounded-agg-sm" })
+      ] }),
+      /* @__PURE__ */ jsx5(SkeletonBlock, { className: "h-5 rounded-agg-sm" }),
+      /* @__PURE__ */ jsx5(SkeletonBlock, { className: "h-5 rounded-agg-sm" }),
+      /* @__PURE__ */ jsx5("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx5(SkeletonBlock, { className: cn("h-2 rounded-agg-full", barWidthClassName) }) })
+    ] }),
+    index < barWidths.length - 1 ? /* @__PURE__ */ jsx5("div", { className: "h-px w-full bg-agg-separator" }) : null
+  ] }, `${side}-row-${index}`)) });
+};
+var MarketDetailsOderbookSkeleton = ({
+  className
+}) => {
+  return /* @__PURE__ */ jsxs4("div", { className: cn("flex flex-col gap-5", className), children: [
+    /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsx5(SkeletonBlock, { className: "h-4 w-10 rounded-agg-sm" }),
+      /* @__PURE__ */ jsx5(MarketDetailsOrderBookRows, { side: "ask", barWidths: orderBookAskBarWidths })
+    ] }),
+    /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsx5(SkeletonBlock, { className: "h-4 w-10 rounded-agg-sm" }),
+      /* @__PURE__ */ jsx5(MarketDetailsOrderBookRows, { side: "bid", barWidths: orderBookBidBarWidths })
+    ] })
+  ] });
+};
+var MarketDetailsSkeletonView = ({
+  className,
+  ariaLabel,
+  isDetailed
+}) => {
+  const labels = useLabels4();
+  return /* @__PURE__ */ jsxs4(
+    Card,
+    {
+      className: cn("group/agg-skeleton", marketDetailsBaseCardClassName, className),
+      role: "status",
+      "aria-label": ariaLabel != null ? ariaLabel : labels.marketDetails.loading,
+      "aria-busy": true,
+      children: [
+        /* @__PURE__ */ jsx5(MarketDetailsHeaderSkeleton, {}),
+        isDetailed ? /* @__PURE__ */ jsxs4(Fragment, { children: [
+          /* @__PURE__ */ jsx5("div", { className: "h-px w-full bg-agg-separator" }),
+          /* @__PURE__ */ jsx5(MarketDetailsTabsSkeleton, {}),
+          /* @__PURE__ */ jsx5("div", { className: "h-px w-full bg-agg-separator" }),
+          /* @__PURE__ */ jsx5(MarketDetailsOderbookSkeleton, { className: "p-5" })
+        ] }) : null
+      ]
+    }
+  );
+};
+MarketDetailsSkeletonView.displayName = "MarketDetailsSkeletonView";
+
+// src/primitives/skeleton/views/place-order-skeleton-view.tsx
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var placeOrderCardClassName = "overflow-hidden rounded-agg-xl border border-agg-border bg-agg-secondary shadow-none hover:shadow-none";
+var TabsSkeletonBar = () => {
+  return /* @__PURE__ */ jsxs5("div", { className: "flex w-full items-end border-b border-agg-border", children: [
+    /* @__PURE__ */ jsxs5("div", { className: "flex flex-col rounded-t-agg-lg", children: [
+      /* @__PURE__ */ jsx6("div", { className: "px-5 py-2", children: /* @__PURE__ */ jsx6(SkeletonBlock, { className: "h-6 w-10 rounded-agg-sm" }) }),
+      /* @__PURE__ */ jsx6(SkeletonBlock, { className: "h-[3px] w-full rounded-t-agg-sm" })
+    ] }),
+    /* @__PURE__ */ jsxs5("div", { className: "flex flex-col", children: [
+      /* @__PURE__ */ jsx6("div", { className: "px-5 py-2", children: /* @__PURE__ */ jsx6(SkeletonBlock, { className: "h-6 w-10 rounded-agg-sm" }) }),
+      /* @__PURE__ */ jsx6("div", { className: "h-[3px] w-full" })
+    ] })
+  ] });
+};
+var ContentBody = () => {
+  return /* @__PURE__ */ jsxs5("div", { className: cn("flex flex-col gap-6 p-5"), children: [
+    /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsxs5("div", { className: "flex min-w-0 items-center gap-3", children: [
+        /* @__PURE__ */ jsx6(SkeletonBlock, { className: "size-12 shrink-0 rounded-agg-lg" }),
+        /* @__PURE__ */ jsxs5("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [
+          /* @__PURE__ */ jsx6(SkeletonBlock, { className: "h-4 w-[92%] max-w-[240px] rounded-agg-sm" }),
+          /* @__PURE__ */ jsx6(SkeletonBlock, { className: "h-4 w-[64%] max-w-[160px] rounded-agg-sm" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx6(SkeletonBlock, { className: "h-6 w-[92px] rounded-agg-sm" }),
+      /* @__PURE__ */ jsx6(TabsSkeletonBar, {})
+    ] }),
+    /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-4", children: [
+      /* @__PURE__ */ jsxs5("div", { className: "flex w-full gap-2", children: [
+        /* @__PURE__ */ jsx6(SkeletonBlock, { className: "h-11 flex-1 rounded-agg-full" }),
+        /* @__PURE__ */ jsx6(SkeletonBlock, { className: "h-11 flex-1 rounded-agg-full" })
+      ] }),
+      /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between gap-4", children: [
+        /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ jsx6(SkeletonBlock, { className: "h-5 w-[63px] rounded-agg-sm" }),
+          /* @__PURE__ */ jsx6(SkeletonBlock, { className: "h-4 w-[118px] rounded-agg-sm" })
+        ] }),
+        /* @__PURE__ */ jsx6("p", { className: cn("text-agg-3xl font-agg-bold leading-agg-9 text-agg-separator"), children: "$0" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx6(SkeletonBlock, { className: "h-12 w-full rounded-agg-full" }),
+    /* @__PURE__ */ jsx6(SkeletonBlock, { className: "h-4 w-full max-w-[240px] self-center rounded-agg-sm" })
+  ] });
+};
+var PlaceOrderSkeletonView = ({
+  className,
+  ariaLabel
+}) => {
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      className: cn("group/agg-skeleton", "w-full", className),
+      role: "status",
+      "aria-label": ariaLabel != null ? ariaLabel : "Loading place order",
+      "aria-busy": true,
+      children: /* @__PURE__ */ jsx6("div", { className: "flex w-full items-end justify-center", children: /* @__PURE__ */ jsx6(Card, { className: cn(placeOrderCardClassName, "w-full"), children: /* @__PURE__ */ jsx6(ContentBody, {}) }) })
+    }
+  );
+};
+PlaceOrderSkeletonView.displayName = "PlaceOrderSkeletonView";
+
+// src/primitives/skeleton/views/settlement-skeleton-view.tsx
+import { useLabels as useLabels5 } from "@agg-market/hooks";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var SettlementSkeletonView = ({
+  className,
+  ariaLabel
+}) => {
+  const labels = useLabels5();
+  return /* @__PURE__ */ jsxs6(
+    Card,
+    {
+      className: cn(
+        "group/agg-skeleton",
+        "flex flex-col w-full 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__ */ jsxs6("div", { className: "flex w-full items-center justify-between gap-4", children: [
+          /* @__PURE__ */ jsx7(SkeletonBlock, { className: "h-4 w-[81px] rounded-agg-sm" }),
+          /* @__PURE__ */ jsx7(SkeletonBlock, { className: "h-5 w-full max-w-[240px] rounded-agg-sm" })
+        ] }),
+        /* @__PURE__ */ jsxs6("div", { className: "flex w-full flex-col gap-3", children: [
+          /* @__PURE__ */ jsx7(SkeletonBlock, { className: "h-5 w-[200px] rounded-agg-sm" }),
+          /* @__PURE__ */ jsxs6("div", { className: "flex flex-col gap-2", children: [
+            /* @__PURE__ */ jsx7(SkeletonBlock, { className: "h-4 w-full max-w-[320px] rounded-agg-sm" }),
+            /* @__PURE__ */ jsx7(SkeletonBlock, { className: "h-4 w-full max-w-[280px] rounded-agg-sm" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx7("div", { className: "h-px w-full bg-agg-separator" }),
+        /* @__PURE__ */ jsxs6("div", { className: "flex w-full flex-col gap-3", children: [
+          /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx7(SkeletonBlock, { className: "size-4 rounded-agg-sm" }),
+            /* @__PURE__ */ jsx7(SkeletonBlock, { className: "h-5 w-[100px] rounded-agg-sm" })
+          ] }),
+          /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx7(SkeletonBlock, { className: "size-4 rounded-agg-sm" }),
+            /* @__PURE__ */ jsx7(SkeletonBlock, { className: "h-5 w-[60px] rounded-agg-sm" })
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+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
+import { jsx as jsx8 } from "react/jsx-runtime";
+var Skeleton = ({ view, className, ariaLabel }) => {
+  if (view === skeletonViews.eventListItem) {
+    return /* @__PURE__ */ jsx8(EventListItemSkeletonView, { className, ariaLabel, isStandalone: true });
+  }
+  if (view === skeletonViews.eventListItemDetails) {
+    return /* @__PURE__ */ jsx8(EventListItemDetailsSkeletonView, { className, ariaLabel });
+  }
+  if (view === skeletonViews.marketDetailsMinified) {
+    return /* @__PURE__ */ jsx8(MarketDetailsSkeletonView, { className, ariaLabel, isDetailed: false });
+  }
+  if (view === skeletonViews.marketDetailsDetailed) {
+    return /* @__PURE__ */ jsx8(MarketDetailsSkeletonView, { className, ariaLabel, isDetailed: true });
+  }
+  if (view === skeletonViews.settlement) {
+    return /* @__PURE__ */ jsx8(SettlementSkeletonView, { className, ariaLabel });
+  }
+  if (view === skeletonViews.placeOrder) {
+    return /* @__PURE__ */ jsx8(PlaceOrderSkeletonView, { className, ariaLabel });
+  }
+  return /* @__PURE__ */ jsx8(EventListSkeletonView, { className, ariaLabel });
+};
+Skeleton.displayName = "Skeleton";
+
+export {
+  baseCardClassName,
+  detailsBaseCardClassName,
+  eventListItemDetailsTimeRanges,
+  lineColorByVenue,
+  fallbackLineColors,
+  marketDetailsBaseCardClassName,
+  getMarketDetailsTabs,
+  marketDetailsDefaultIsOpened,
+  orderBookRowLimitDefault,
+  MarketDetailsOderbookSkeleton,
+  skeletonViews,
+  Skeleton
+};

package/dist/{chunk-D5FTFSKL.mjs → chunk-MBHTXNHX.mjs}

@@ -1,15 +1,15 @@
 import {
   Settlement
-} from "./chunk-4KMFDCAH.mjs";
+} from "./chunk-3W7NBJLU.mjs";
 import {
   PlaceOrder
-} from "./chunk-O46OFVH6.mjs";
+} from "./chunk-MJHKBCXQ.mjs";
 import {
   EventListItemDetails
-} from "./chunk-KFOATMAE.mjs";
+} from "./chunk-JNH64AKR.mjs";
 import {
   MarketDetails
-} from "./chunk-QYZKC7KG.mjs";
+} from "./chunk-GNSPZ53C.mjs";
 import {
   Typography
 } from "./chunk-ERGNR6UQ.mjs";

package/dist/{chunk-O46OFVH6.mjs → chunk-MJHKBCXQ.mjs}

@@ -9,10 +9,10 @@ import {
 import {
   Skeleton,
   skeletonViews
-} from "./chunk-V52WSZHQ.mjs";
+} from "./chunk-M4RJHRFT.mjs";
 import {
   VenueLogo
-} from "./chunk-D7JTOGYP.mjs";
+} from "./chunk-PORVP72S.mjs";
 import {
   Icon
 } from "./chunk-PZTHM6WG.mjs";