@agg-market/ui 5.0.0 → 7.0.0

package/dist/chunk-EERL6BZF.mjs

@@ -0,0 +1,997 @@
+import {
+  Select,
+  __objRest,
+  __spreadProps,
+  __spreadValues,
+  cn,
+  getMotionClassName,
+  getScrollBehavior
+} from "./chunk-MUB7NYWZ.mjs";
+
+// src/primitives/card/index.tsx
+import { useSdkUiConfig } from "@agg-market/hooks";
+import { jsx } from "react/jsx-runtime";
+var Card = (_a) => {
+  var _b = _a, { className, onClick } = _b, props = __objRest(_b, ["className", "onClick"]);
+  const { enableAnimations } = useSdkUiConfig();
+  return /* @__PURE__ */ jsx(
+    "div",
+    __spreadValues(__spreadValues({
+      className: cn(
+        "group/agg-card",
+        "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 duration-300 ease-in-out"
+        ),
+        className
+      )
+    }, onClick ? { onClick } : {}), props)
+  );
+};
+Card.displayName = "Card";
+
+// 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/views/event-list-skeleton-view.tsx
+import { useLabels as useLabels2 } from "@agg-market/hooks";
+
+// src/primitives/skeleton/skeleton-block.tsx
+import { useSdkUiConfig as useSdkUiConfig2 } from "@agg-market/hooks";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var SkeletonBlock = ({ className }) => {
+  const { enableAnimations } = useSdkUiConfig2();
+  return /* @__PURE__ */ jsx2(
+    "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 jsx3, 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__ */ jsx3(SkeletonBlock, { className: "size-10! rounded-agg-lg" }),
+          /* @__PURE__ */ jsx3(SkeletonBlock, { className: "h-6 w-fit flex-1 rounded-agg-sm" })
+        ] }),
+        /* @__PURE__ */ jsx3("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__ */ jsx3(SkeletonBlock, { className: cn("h-5 rounded-agg-sm", outcomeTitleWidth) }),
+          /* @__PURE__ */ jsx3(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__ */ jsx3(SkeletonBlock, { className: "h-5 w-[100px] rounded-agg-sm" }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx3(SkeletonBlock, { className: "size-[14px] rounded-agg-sm" }),
+              /* @__PURE__ */ jsx3(SkeletonBlock, { className: "size-[14px] rounded-agg-sm" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx3(SkeletonBlock, { className: "h-5 w-[60px] rounded-agg-sm" })
+        ] })
+      ]
+    }
+  );
+};
+EventListItemSkeletonView.displayName = "EventListItemSkeletonView";
+
+// src/primitives/skeleton/views/event-list-skeleton-view.tsx
+import { jsx as jsx4, 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__ */ jsx4(SkeletonBlock, { className: "h-7 w-[120px] rounded-agg-md" }),
+          /* @__PURE__ */ jsx4(SkeletonBlock, { className: "h-8 w-full rounded-agg-md md:w-[400px]" })
+        ] }),
+        /* @__PURE__ */ jsx4("div", { className: "grid grid-cols-1 gap-5 md:grid-cols-3", children: Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ jsx4(
+          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 jsx5, 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__ */ jsx5(SkeletonBlock, { className: "size-10! rounded-agg-lg" }),
+          /* @__PURE__ */ jsx5(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__ */ jsx5(SkeletonBlock, { className: "h-9 w-[100px] rounded-agg-full" }),
+              /* @__PURE__ */ jsx5(SkeletonBlock, { className: "h-9 w-[100px] rounded-agg-full" }),
+              /* @__PURE__ */ jsx5(SkeletonBlock, { className: "h-9 w-[100px] rounded-agg-full" })
+            ] }),
+            /* @__PURE__ */ jsx5(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__ */ jsx5(SkeletonBlock, { className: "h-[220px] w-full rounded-agg-xl md:h-[240px]" }),
+            /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsx5(SkeletonBlock, { className: "h-5 w-[59px] rounded-agg-sm" }),
+              /* @__PURE__ */ jsx5(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 jsx6, 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__ */ jsx6(SkeletonBlock, { className: "size-12 rounded-agg-lg md:size-[60px]" }),
+      /* @__PURE__ */ jsxs4("div", { className: "flex min-w-0 flex-col gap-2", children: [
+        /* @__PURE__ */ jsx6(SkeletonBlock, { className: "h-6 w-[132px] rounded-agg-sm" }),
+        /* @__PURE__ */ jsx6(SkeletonBlock, { className: "h-4 w-[141px] rounded-agg-sm" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx6(SkeletonBlock, { className: "h-9 w-[60px] rounded-agg-md" }),
+    /* @__PURE__ */ jsxs4("div", { className: "flex w-full gap-2 md:w-auto", children: [
+      /* @__PURE__ */ jsx6(SkeletonBlock, { className: "h-9 w-full rounded-agg-full md:w-[135px]" }),
+      /* @__PURE__ */ jsx6(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__ */ jsx6("div", { className: "px-4 py-3", children: /* @__PURE__ */ jsx6(SkeletonBlock, { className: "h-6 w-20 rounded-agg-sm" }) }),
+      /* @__PURE__ */ jsx6(SkeletonBlock, { className: "h-[3px] w-full rounded-t-agg-sm" })
+    ] }),
+    /* @__PURE__ */ jsxs4("div", { className: "flex h-full flex-col justify-center", children: [
+      /* @__PURE__ */ jsx6("div", { className: "px-4 py-3", children: /* @__PURE__ */ jsx6(SkeletonBlock, { className: "h-6 w-12 rounded-agg-sm" }) }),
+      /* @__PURE__ */ jsx6("div", { className: "h-[3px] w-full" })
+    ] })
+  ] });
+};
+var MarketDetailsOrderBookRows = ({
+  side,
+  barWidths
+}) => {
+  return /* @__PURE__ */ jsx6("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__ */ jsx6(SkeletonBlock, { className: "size-4 rounded-agg-sm" }),
+        /* @__PURE__ */ jsx6(SkeletonBlock, { className: "h-5 w-[60px] rounded-agg-sm" })
+      ] }),
+      /* @__PURE__ */ jsx6(SkeletonBlock, { className: "h-5 rounded-agg-sm" }),
+      /* @__PURE__ */ jsx6(SkeletonBlock, { className: "h-5 rounded-agg-sm" }),
+      /* @__PURE__ */ jsx6("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx6(SkeletonBlock, { className: cn("h-2 rounded-agg-full", barWidthClassName) }) })
+    ] }),
+    index < barWidths.length - 1 ? /* @__PURE__ */ jsx6("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__ */ jsx6(SkeletonBlock, { className: "h-4 w-10 rounded-agg-sm" }),
+      /* @__PURE__ */ jsx6(MarketDetailsOrderBookRows, { side: "ask", barWidths: orderBookAskBarWidths })
+    ] }),
+    /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsx6(SkeletonBlock, { className: "h-4 w-10 rounded-agg-sm" }),
+      /* @__PURE__ */ jsx6(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__ */ jsx6(MarketDetailsHeaderSkeleton, {}),
+        isDetailed ? /* @__PURE__ */ jsxs4(Fragment, { children: [
+          /* @__PURE__ */ jsx6("div", { className: "h-px w-full bg-agg-separator" }),
+          /* @__PURE__ */ jsx6(MarketDetailsTabsSkeleton, {}),
+          /* @__PURE__ */ jsx6("div", { className: "h-px w-full bg-agg-separator" }),
+          /* @__PURE__ */ jsx6(MarketDetailsOderbookSkeleton, { className: "p-5" })
+        ] }) : null
+      ]
+    }
+  );
+};
+MarketDetailsSkeletonView.displayName = "MarketDetailsSkeletonView";
+
+// src/primitives/skeleton/views/place-order-skeleton-view.tsx
+import { jsx as jsx7, 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__ */ jsx7("div", { className: "px-5 py-2", children: /* @__PURE__ */ jsx7(SkeletonBlock, { className: "h-6 w-10 rounded-agg-sm" }) }),
+      /* @__PURE__ */ jsx7(SkeletonBlock, { className: "h-[3px] w-full rounded-t-agg-sm" })
+    ] }),
+    /* @__PURE__ */ jsxs5("div", { className: "flex flex-col", children: [
+      /* @__PURE__ */ jsx7("div", { className: "px-5 py-2", children: /* @__PURE__ */ jsx7(SkeletonBlock, { className: "h-6 w-10 rounded-agg-sm" }) }),
+      /* @__PURE__ */ jsx7("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__ */ jsx7(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__ */ jsx7(SkeletonBlock, { className: "h-4 w-[92%] max-w-[240px] rounded-agg-sm" }),
+          /* @__PURE__ */ jsx7(SkeletonBlock, { className: "h-4 w-[64%] max-w-[160px] rounded-agg-sm" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx7(SkeletonBlock, { className: "h-6 w-[92px] rounded-agg-sm" }),
+      /* @__PURE__ */ jsx7(TabsSkeletonBar, {})
+    ] }),
+    /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-4", children: [
+      /* @__PURE__ */ jsxs5("div", { className: "flex w-full gap-2", children: [
+        /* @__PURE__ */ jsx7(SkeletonBlock, { className: "h-11 flex-1 rounded-agg-full" }),
+        /* @__PURE__ */ jsx7(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__ */ jsx7(SkeletonBlock, { className: "h-5 w-[63px] rounded-agg-sm" }),
+          /* @__PURE__ */ jsx7(SkeletonBlock, { className: "h-4 w-[118px] rounded-agg-sm" })
+        ] }),
+        /* @__PURE__ */ jsx7("p", { className: cn("text-agg-3xl font-agg-bold leading-agg-9 text-agg-separator"), children: "$0" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx7(SkeletonBlock, { className: "h-12 w-full rounded-agg-full" }),
+    /* @__PURE__ */ jsx7(SkeletonBlock, { className: "h-4 w-full max-w-[240px] self-center rounded-agg-sm" })
+  ] });
+};
+var PlaceOrderSkeletonView = ({
+  className,
+  ariaLabel
+}) => {
+  return /* @__PURE__ */ jsx7(
+    "div",
+    {
+      className: cn("group/agg-skeleton", "w-full", className),
+      role: "status",
+      "aria-label": ariaLabel != null ? ariaLabel : "Loading place order",
+      "aria-busy": true,
+      children: /* @__PURE__ */ jsx7("div", { className: "flex w-full items-end justify-center", children: /* @__PURE__ */ jsx7(Card, { className: cn(placeOrderCardClassName, "w-full"), children: /* @__PURE__ */ jsx7(ContentBody, {}) }) })
+    }
+  );
+};
+PlaceOrderSkeletonView.displayName = "PlaceOrderSkeletonView";
+
+// src/primitives/skeleton/views/settlement-skeleton-view.tsx
+import { useLabels as useLabels5 } from "@agg-market/hooks";
+import { jsx as jsx8, 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__ */ jsx8(SkeletonBlock, { className: "h-4 w-[81px] rounded-agg-sm" }),
+          /* @__PURE__ */ jsx8(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__ */ jsx8(SkeletonBlock, { className: "h-5 w-[200px] rounded-agg-sm" }),
+          /* @__PURE__ */ jsxs6("div", { className: "flex flex-col gap-2", children: [
+            /* @__PURE__ */ jsx8(SkeletonBlock, { className: "h-4 w-full max-w-[320px] rounded-agg-sm" }),
+            /* @__PURE__ */ jsx8(SkeletonBlock, { className: "h-4 w-full max-w-[280px] rounded-agg-sm" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx8("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__ */ jsx8(SkeletonBlock, { className: "size-4 rounded-agg-sm" }),
+            /* @__PURE__ */ jsx8(SkeletonBlock, { className: "h-5 w-[100px] rounded-agg-sm" })
+          ] }),
+          /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx8(SkeletonBlock, { className: "size-4 rounded-agg-sm" }),
+            /* @__PURE__ */ jsx8(SkeletonBlock, { className: "h-5 w-[60px] rounded-agg-sm" })
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+SettlementSkeletonView.displayName = "SettlementSkeletonView";
+
+// src/primitives/skeleton/index.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+var Skeleton = ({ view, className, ariaLabel }) => {
+  if (view === skeletonViews.eventListItem) {
+    return /* @__PURE__ */ jsx9(EventListItemSkeletonView, { className, ariaLabel, isStandalone: true });
+  }
+  if (view === skeletonViews.eventListItemDetails) {
+    return /* @__PURE__ */ jsx9(EventListItemDetailsSkeletonView, { className, ariaLabel });
+  }
+  if (view === skeletonViews.marketDetailsMinified) {
+    return /* @__PURE__ */ jsx9(MarketDetailsSkeletonView, { className, ariaLabel, isDetailed: false });
+  }
+  if (view === skeletonViews.marketDetailsDetailed) {
+    return /* @__PURE__ */ jsx9(MarketDetailsSkeletonView, { className, ariaLabel, isDetailed: true });
+  }
+  if (view === skeletonViews.settlement) {
+    return /* @__PURE__ */ jsx9(SettlementSkeletonView, { className, ariaLabel });
+  }
+  if (view === skeletonViews.placeOrder) {
+    return /* @__PURE__ */ jsx9(PlaceOrderSkeletonView, { className, ariaLabel });
+  }
+  return /* @__PURE__ */ jsx9(EventListSkeletonView, { className, ariaLabel });
+};
+Skeleton.displayName = "Skeleton";
+
+// src/primitives/tabs/index.tsx
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { useLabels as useLabels6, useSdkUiConfig as useSdkUiConfig3 } from "@agg-market/hooks";
+
+// src/primitives/tabs/tabs.utils.ts
+var findNextEnabledIndex = (items, startIndex, direction) => {
+  var _a;
+  if (items.length === 0)
+    return -1;
+  for (let step = 1; step <= items.length; step += 1) {
+    const nextIndex = (startIndex + direction * step + items.length) % items.length;
+    if (!((_a = items[nextIndex]) == null ? void 0 : _a.disabled))
+      return nextIndex;
+  }
+  return -1;
+};
+var findEdgeEnabledIndex = (items, direction) => {
+  var _a;
+  if (direction === 1) {
+    return items.findIndex((item) => !item.disabled);
+  }
+  for (let index = items.length - 1; index >= 0; index -= 1) {
+    if (!((_a = items[index]) == null ? void 0 : _a.disabled))
+      return index;
+  }
+  return -1;
+};
+
+// src/primitives/tabs/index.tsx
+import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+var mobileTabsMediaQuery = "(max-width: 512px)";
+var getTabButtonClassName = ({
+  enableAnimations,
+  isBarVariant,
+  isActive,
+  isDisabled,
+  size
+}) => {
+  const isSmall = size === "s";
+  return cn(
+    "cursor-pointer disabled:cursor-not-allowed",
+    "relative inline-flex h-full shrink-0 items-center justify-center gap-2 font-agg-sans",
+    isBarVariant ? "hover:text-agg-foreground hover:bg-agg-secondary-hover" : "hover:text-agg-foreground hover:font-bold",
+    getMotionClassName(
+      enableAnimations,
+      "transition-[colors] duration-300 ease-in-out motion-reduce:transition-none"
+    ),
+    isBarVariant ? cn(
+      "min-w-20 overflow-hidden border-r border-agg-separator last:border-r-0",
+      isSmall ? "px-3 text-agg-sm leading-agg-5" : "px-4 text-agg-base leading-agg-6"
+    ) : cn(isSmall ? "px-4 text-agg-sm leading-agg-5" : "px-5 text-agg-base leading-agg-6"),
+    isBarVariant && isActive && "font-agg-bold text-agg-primary",
+    isBarVariant && !isActive && "font-agg-normal text-agg-foreground",
+    !isBarVariant && isActive && "font-agg-bold text-agg-primary",
+    !isBarVariant && !isActive && "font-agg-normal text-agg-foreground",
+    isDisabled && "cursor-not-allowed opacity-60"
+  );
+};
+var Tabs = ({
+  items,
+  value,
+  onChange,
+  variant = "bar",
+  size = "m",
+  overflowBehavior,
+  ariaLabel,
+  className,
+  classNames
+}) => {
+  const labels = useLabels6();
+  const { enableAnimations } = useSdkUiConfig3();
+  const buttonRefs = useRef([]);
+  const dragStateRef = useRef({
+    isPointerDown: false,
+    isDragging: false,
+    pointerId: null,
+    startClientX: 0,
+    startClientY: 0,
+    startScrollLeft: 0
+  });
+  const suppressClickRef = useRef(false);
+  const resolvedAriaLabel = ariaLabel != null ? ariaLabel : labels.common.tabsAria;
+  const [isMobileViewport, setIsMobileViewport] = useState(false);
+  const [isDraggingTabs, setIsDraggingTabs] = useState(false);
+  const [activeUnderlineStyle, setActiveUnderlineStyle] = useState({
+    transform: "translateX(0px)",
+    width: 0,
+    opacity: 0
+  });
+  const [scrollAffordanceState, setScrollAffordanceState] = useState({
+    showStart: false,
+    showEnd: false
+  });
+  const tabListRef = useRef(null);
+  const isBarVariant = variant === "bar";
+  const resolvedOverflowBehavior = useMemo(() => {
+    if (overflowBehavior)
+      return overflowBehavior;
+    if (!isBarVariant)
+      return "scroll";
+    return isMobileViewport ? "select" : "scroll";
+  }, [isBarVariant, isMobileViewport, overflowBehavior]);
+  const shouldUseOverflowScroll = resolvedOverflowBehavior === "scroll";
+  const shouldUseOverflowSelect = resolvedOverflowBehavior === "select";
+  useEffect(() => {
+    if (typeof window === "undefined")
+      return;
+    const mediaQueryList = window.matchMedia(mobileTabsMediaQuery);
+    const handleMediaQueryChange = (event) => {
+      setIsMobileViewport(event.matches);
+    };
+    handleMediaQueryChange(mediaQueryList);
+    if (typeof mediaQueryList.addEventListener === "function") {
+      mediaQueryList.addEventListener("change", handleMediaQueryChange);
+      return () => {
+        mediaQueryList.removeEventListener("change", handleMediaQueryChange);
+      };
+    }
+    mediaQueryList.addListener(handleMediaQueryChange);
+    return () => {
+      mediaQueryList.removeListener(handleMediaQueryChange);
+    };
+  }, []);
+  const updateScrollAffordances = useCallback(() => {
+    if (!shouldUseOverflowScroll) {
+      setScrollAffordanceState({
+        showStart: false,
+        showEnd: false
+      });
+      return;
+    }
+    const tabListElement = tabListRef.current;
+    if (!tabListElement)
+      return;
+    const maxScrollLeft = tabListElement.scrollWidth - tabListElement.clientWidth;
+    setScrollAffordanceState({
+      showStart: tabListElement.scrollLeft > 4,
+      showEnd: maxScrollLeft - tabListElement.scrollLeft > 4
+    });
+  }, [shouldUseOverflowScroll]);
+  const renderedItems = items;
+  const selectItems = useMemo(() => {
+    return items.map((item) => ({
+      value: item.value,
+      label: item.label,
+      disabled: item.disabled
+    }));
+  }, [items]);
+  const isSelectDisabled = !items.some((item) => !item.disabled);
+  const handleSelect = (nextValue) => {
+    if (nextValue === value)
+      return;
+    onChange(nextValue);
+  };
+  const handleMoveFocus = (index) => {
+    var _a;
+    if (index < 0)
+      return;
+    const nextItem = renderedItems[index];
+    if (!nextItem)
+      return;
+    handleSelect(nextItem.value);
+    (_a = buttonRefs.current[index]) == null ? void 0 : _a.focus();
+  };
+  const handleKeyDown = (event, index) => {
+    switch (event == null ? void 0 : event.key) {
+      case "ArrowRight": {
+        event == null ? void 0 : event.preventDefault();
+        handleMoveFocus(findNextEnabledIndex(renderedItems, index, 1));
+        return;
+      }
+      case "ArrowLeft": {
+        event == null ? void 0 : event.preventDefault();
+        handleMoveFocus(findNextEnabledIndex(renderedItems, index, -1));
+        return;
+      }
+      case "Home": {
+        event == null ? void 0 : event.preventDefault();
+        handleMoveFocus(findEdgeEnabledIndex(renderedItems, 1));
+        return;
+      }
+      case "End": {
+        event == null ? void 0 : event.preventDefault();
+        handleMoveFocus(findEdgeEnabledIndex(renderedItems, -1));
+        return;
+      }
+      default:
+        return;
+    }
+  };
+  const tabListClassName = cn(
+    "inline-flex items-stretch bg-agg-secondary",
+    shouldUseOverflowScroll ? cn(
+      "overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+      getMotionClassName(enableAnimations, "scroll-smooth")
+    ) : "overflow-x-auto",
+    isBarVariant ? "h-8 rounded-agg-sm border border-agg-separator" : "h-12 border-b border-agg-separator -mb-[1px]",
+    shouldUseOverflowScroll && "select-none",
+    shouldUseOverflowScroll && !isBarVariant && "snap-x snap-mandatory",
+    shouldUseOverflowScroll && (isDraggingTabs ? "cursor-grabbing" : "cursor-grab")
+  );
+  const handleTabListWheel = (event) => {
+    if (!shouldUseOverflowScroll)
+      return;
+    const tabListElement = event.currentTarget;
+    if (tabListElement.scrollWidth <= tabListElement.clientWidth)
+      return;
+    if (Math.abs(event.deltaX) > Math.abs(event.deltaY))
+      return;
+    event.preventDefault();
+    tabListElement.scrollLeft += event.deltaY;
+  };
+  const handleTabListPointerDown = (event) => {
+    if (!shouldUseOverflowScroll)
+      return;
+    if (event.pointerType !== "mouse")
+      return;
+    if (event.button !== 0)
+      return;
+    const tabListElement = tabListRef.current;
+    if (!tabListElement)
+      return;
+    if (tabListElement.scrollWidth <= tabListElement.clientWidth)
+      return;
+    dragStateRef.current = {
+      isPointerDown: true,
+      isDragging: false,
+      pointerId: event.pointerId,
+      startClientX: event.clientX,
+      startClientY: event.clientY,
+      startScrollLeft: tabListElement.scrollLeft
+    };
+  };
+  const handleTabListPointerMove = (event) => {
+    if (!shouldUseOverflowScroll)
+      return;
+    const dragState = dragStateRef.current;
+    const tabListElement = tabListRef.current;
+    if (!dragState.isPointerDown)
+      return;
+    if (dragState.pointerId !== event.pointerId)
+      return;
+    if (!tabListElement)
+      return;
+    const deltaX = event.clientX - dragState.startClientX;
+    const deltaY = event.clientY - dragState.startClientY;
+    const horizontalDistance = Math.abs(deltaX);
+    const verticalDistance = Math.abs(deltaY);
+    const hasExceededDragThreshold = horizontalDistance > 10 && horizontalDistance > verticalDistance;
+    if (hasExceededDragThreshold && !dragState.isDragging) {
+      dragState.isDragging = true;
+      setIsDraggingTabs(true);
+      tabListElement.setPointerCapture(event.pointerId);
+    }
+    if (!dragState.isDragging)
+      return;
+    event.preventDefault();
+    tabListElement.scrollLeft = dragState.startScrollLeft - deltaX;
+  };
+  const handleEndTabListDrag = (event) => {
+    const dragState = dragStateRef.current;
+    const tabListElement = tabListRef.current;
+    if (!dragState.isPointerDown)
+      return;
+    if (dragState.pointerId !== event.pointerId)
+      return;
+    if (tabListElement == null ? void 0 : tabListElement.hasPointerCapture(event.pointerId)) {
+      tabListElement.releasePointerCapture(event.pointerId);
+    }
+    if (dragState.isDragging) {
+      suppressClickRef.current = true;
+      window.setTimeout(() => {
+        suppressClickRef.current = false;
+      }, 0);
+    }
+    dragStateRef.current = {
+      isPointerDown: false,
+      isDragging: false,
+      pointerId: null,
+      startClientX: 0,
+      startClientY: 0,
+      startScrollLeft: 0
+    };
+    setIsDraggingTabs(false);
+  };
+  const handleTabListClickCapture = (event) => {
+    if (!suppressClickRef.current)
+      return;
+    event == null ? void 0 : event.preventDefault();
+    event == null ? void 0 : event.stopPropagation();
+    suppressClickRef.current = false;
+  };
+  const updateActiveUnderline = useCallback(() => {
+    if (isBarVariant) {
+      setActiveUnderlineStyle({
+        transform: "translateX(0px)",
+        width: 0,
+        opacity: 0
+      });
+      return;
+    }
+    const activeIndex = renderedItems.findIndex((item) => item.value === value);
+    const activeButton = activeIndex >= 0 ? buttonRefs.current[activeIndex] : null;
+    if (!activeButton || !tabListRef.current) {
+      setActiveUnderlineStyle((currentStyle) => __spreadProps(__spreadValues({}, currentStyle), {
+        opacity: 0
+      }));
+      return;
+    }
+    setActiveUnderlineStyle({
+      transform: `translateX(${activeButton.offsetLeft}px)`,
+      width: activeButton.offsetWidth,
+      opacity: 1
+    });
+  }, [isBarVariant, renderedItems, value]);
+  useLayoutEffect(() => {
+    updateActiveUnderline();
+  }, [updateActiveUnderline]);
+  useEffect(() => {
+    if (isBarVariant || !shouldUseOverflowScroll)
+      return;
+    const tabListElement = tabListRef.current;
+    if (!tabListElement)
+      return;
+    const handleScroll = () => {
+      updateActiveUnderline();
+      updateScrollAffordances();
+    };
+    tabListElement.addEventListener("scroll", handleScroll, { passive: true });
+    updateScrollAffordances();
+    return () => {
+      tabListElement.removeEventListener("scroll", handleScroll);
+    };
+  }, [isBarVariant, shouldUseOverflowScroll, updateActiveUnderline, updateScrollAffordances]);
+  useEffect(() => {
+    if (!shouldUseOverflowScroll)
+      return;
+    updateScrollAffordances();
+  }, [renderedItems, shouldUseOverflowScroll, updateScrollAffordances, value]);
+  useEffect(() => {
+    if (isBarVariant && !shouldUseOverflowScroll)
+      return;
+    if (typeof ResizeObserver === "undefined")
+      return;
+    const tabListElement = tabListRef.current;
+    if (!tabListElement)
+      return;
+    const resizeObserver = new ResizeObserver(() => {
+      updateActiveUnderline();
+      updateScrollAffordances();
+    });
+    resizeObserver.observe(tabListElement);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [isBarVariant, shouldUseOverflowScroll, updateActiveUnderline, updateScrollAffordances]);
+  useEffect(() => {
+    if (!shouldUseOverflowScroll)
+      return;
+    const tabListElement = tabListRef.current;
+    if (!tabListElement)
+      return;
+    const activeIndex = renderedItems.findIndex((item) => item.value === value);
+    const activeButton = activeIndex >= 0 ? buttonRefs.current[activeIndex] : null;
+    if (!activeButton)
+      return;
+    if (tabListElement.scrollWidth - tabListElement.clientWidth <= 1)
+      return;
+    const currentScrollLeft = tabListElement.scrollLeft;
+    const currentScrollRight = currentScrollLeft + tabListElement.clientWidth;
+    const activeButtonLeft = activeButton.offsetLeft;
+    const activeButtonRight = activeButtonLeft + activeButton.offsetWidth;
+    let nextScrollLeft = currentScrollLeft;
+    if (activeButtonLeft < currentScrollLeft) {
+      nextScrollLeft = activeButtonLeft;
+    } else if (activeButtonRight > currentScrollRight) {
+      nextScrollLeft = activeButtonRight - tabListElement.clientWidth;
+    }
+    if (Math.abs(nextScrollLeft - currentScrollLeft) < 1)
+      return;
+    tabListElement.scrollTo({
+      left: Math.max(0, nextScrollLeft),
+      behavior: getScrollBehavior(enableAnimations)
+    });
+  }, [enableAnimations, renderedItems, shouldUseOverflowScroll, value]);
+  if (shouldUseOverflowSelect) {
+    return /* @__PURE__ */ jsx10("div", { className: cn("w-full", className, classNames == null ? void 0 : classNames.root), children: /* @__PURE__ */ jsx10(
+      Select,
+      {
+        ariaLabel,
+        className: "w-full",
+        disabled: isSelectDisabled,
+        items: selectItems,
+        onChange: handleSelect,
+        value
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      className: cn(
+        "group/agg-tabs",
+        "relative max-w-full items-stretch font-agg-sans bg-agg-secondary",
+        "inline-flex",
+        className,
+        classNames == null ? void 0 : classNames.root
+      ),
+      children: [
+        /* @__PURE__ */ jsxs7(
+          "div",
+          {
+            ref: tabListRef,
+            role: "tablist",
+            "aria-label": resolvedAriaLabel,
+            className: cn("relative", tabListClassName, classNames == null ? void 0 : classNames.tabList),
+            onClickCapture: handleTabListClickCapture,
+            onPointerCancel: handleEndTabListDrag,
+            onPointerDown: handleTabListPointerDown,
+            onPointerMove: handleTabListPointerMove,
+            onPointerUp: handleEndTabListDrag,
+            onWheel: handleTabListWheel,
+            children: [
+              renderedItems.map((item, index) => {
+                const isActive = item.value === value;
+                return /* @__PURE__ */ jsxs7(
+                  "button",
+                  {
+                    ref: (buttonElement) => {
+                      buttonRefs.current[index] = buttonElement;
+                    },
+                    type: "button",
+                    role: "tab",
+                    tabIndex: isActive ? 0 : -1,
+                    "aria-selected": isActive,
+                    "aria-label": item.label,
+                    disabled: item.disabled,
+                    onClick: (e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      handleSelect(item.value);
+                    },
+                    onKeyDown: (event) => handleKeyDown(event, index),
+                    className: cn(
+                      getTabButtonClassName({
+                        enableAnimations,
+                        isBarVariant,
+                        isActive,
+                        isDisabled: !!item.disabled,
+                        size
+                      }),
+                      shouldUseOverflowScroll && !isBarVariant && "snap-start"
+                    ),
+                    children: [
+                      isBarVariant ? /* @__PURE__ */ jsx10(Fragment2, { children: /* @__PURE__ */ jsx10(
+                        "span",
+                        {
+                          "aria-hidden": true,
+                          className: cn(
+                            "pointer-events-none absolute inset-px origin-bottom rounded-[2px] bg-agg-secondary-hover",
+                            getMotionClassName(
+                              enableAnimations,
+                              "transition-[transform,opacity] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none"
+                            ),
+                            isActive ? "scale-y-100 opacity-100" : "scale-y-0 opacity-0"
+                          )
+                        }
+                      ) }) : null,
+                      item.icon ? /* @__PURE__ */ jsx10("span", { className: "relative z-10 inline-flex shrink-0 items-center justify-center", children: item.icon }) : null,
+                      /* @__PURE__ */ jsx10("span", { className: "relative z-10 truncate whitespace-nowrap [&::first-letter]:uppercase", children: item.label })
+                    ]
+                  },
+                  item.value
+                );
+              }),
+              !isBarVariant ? /* @__PURE__ */ jsx10(
+                "span",
+                {
+                  "aria-hidden": true,
+                  className: cn(
+                    "pointer-events-none absolute bottom-0 left-0 rounded-t-agg-sm bg-agg-primary",
+                    getMotionClassName(
+                      enableAnimations,
+                      "transition-[transform,width,opacity] duration-300 ease-in-out"
+                    ),
+                    "h-[3px]"
+                  ),
+                  style: activeUnderlineStyle
+                }
+              ) : null
+            ]
+          }
+        ),
+        shouldUseOverflowScroll && !isBarVariant ? /* @__PURE__ */ jsxs7(Fragment2, { children: [
+          /* @__PURE__ */ jsx10(
+            "span",
+            {
+              "aria-hidden": true,
+              className: cn(
+                "pointer-events-none absolute top-0 bottom-0 left-8 z-10 w-12 md:w-18 bg-linear-to-r from-agg-secondary via-agg-secondary to-transparent",
+                getMotionClassName(enableAnimations, "transition-opacity duration-200"),
+                scrollAffordanceState.showStart ? "opacity-100" : "opacity-0"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx10(
+            "span",
+            {
+              "aria-hidden": true,
+              className: cn(
+                "pointer-events-none absolute top-0 right-8 bottom-0 z-10 w-12 md:w-18 bg-linear-to-l from-agg-secondary via-agg-secondary to-transparent",
+                getMotionClassName(enableAnimations, "transition-opacity duration-200"),
+                scrollAffordanceState.showEnd ? "opacity-100" : "opacity-0"
+              )
+            }
+          )
+        ] }) : null
+      ]
+    }
+  );
+};
+Tabs.displayName = "Tabs";
+
+export {
+  Card,
+  baseCardClassName,
+  detailsBaseCardClassName,
+  eventListItemDetailsTimeRanges,
+  lineColorByVenue,
+  fallbackLineColors,
+  marketDetailsBaseCardClassName,
+  getMarketDetailsTabs,
+  marketDetailsDefaultIsOpened,
+  orderBookRowLimitDefault,
+  MarketDetailsOderbookSkeleton,
+  skeletonViews,
+  Skeleton,
+  Tabs
+};