@agg-market/ui 3.0.1 → 4.0.0

package/dist/skeleton.js

@@ -120,6 +120,7 @@ var EventListItemSkeletonView = ({
   isStandalone = false
 }) => {
   const labels = (0, import_hooks3.useLabels)();
+  const outcomeTitleWidths = ["w-40", "w-[200px]"];
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     Card,
     {
@@ -129,35 +130,23 @@ var EventListItemSkeletonView = ({
       "aria-busy": isStandalone || void 0,
       "aria-hidden": isStandalone ? void 0 : true,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex w-full items-start gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SkeletonBlock, { className: "h-10 w-10 rounded-agg-lg" }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex flex-1 flex-col gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SkeletonBlock, { className: "h-5 w-[82%] rounded-agg-sm" }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SkeletonBlock, { className: "h-5 w-[68%] rounded-agg-sm" })
-          ] })
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex h-14 w-full items-center gap-3 justify-stretch", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SkeletonBlock, { className: "size-10! rounded-agg-lg" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SkeletonBlock, { className: "h-6 w-fit flex-1 rounded-agg-sm" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex flex-col gap-3", children: [0, 1].map((index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-          "div",
-          {
-            className: "grid w-full grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-3",
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SkeletonBlock, { className: "h-4 rounded-agg-sm" }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SkeletonBlock, { className: "h-4 w-10 rounded-agg-sm" }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SkeletonBlock, { className: "h-9 w-[101px] rounded-agg-full" })
-            ]
-          },
-          index
-        )) }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center justify-between gap-2 text-agg-muted-foreground", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SkeletonBlock, { className: "h-4 w-36 rounded-agg-sm" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex flex-col gap-3", children: outcomeTitleWidths.map((outcomeTitleWidth, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex w-full items-center justify-between gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SkeletonBlock, { className: cn("h-5 rounded-agg-sm", outcomeTitleWidth) }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SkeletonBlock, { className: "h-9 w-[100px] rounded-agg-full" })
+        ] }, index)) }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center justify-between gap-5 text-agg-muted-foreground", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SkeletonBlock, { className: "h-5 w-[100px] rounded-agg-sm" }),
             /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center gap-1", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SkeletonBlock, { className: "size-3 rounded-agg-full" }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SkeletonBlock, { className: "size-3 rounded-agg-full" }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SkeletonBlock, { className: "size-3 rounded-agg-full" })
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SkeletonBlock, { className: "size-[14px] rounded-agg-sm" }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SkeletonBlock, { className: "size-[14px] rounded-agg-sm" })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SkeletonBlock, { className: "h-4 w-20 rounded-agg-sm" })
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SkeletonBlock, { className: "h-5 w-[60px] rounded-agg-sm" })
         ] })
       ]
     }
@@ -177,13 +166,9 @@ var EventListSkeletonView = ({ className, ariaLabel }) => {
       "aria-label": ariaLabel != null ? ariaLabel : labels.eventList.loading("events"),
       "aria-busy": true,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.jsx)(SkeletonBlock, { className: "h-7 w-40 rounded-agg-sm" }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex max-w-full gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SkeletonBlock, { className: "h-10 w-20 rounded-agg-full" }),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SkeletonBlock, { className: "h-10 w-20 rounded-agg-full" }),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SkeletonBlock, { className: "h-10 w-24 rounded-agg-full" })
-          ] })
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("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__ */ (0, import_jsx_runtime4.jsx)(SkeletonBlock, { className: "h-7 w-[120px] rounded-agg-md" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SkeletonBlock, { className: "h-8 w-full rounded-agg-md md:w-[400px]" })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "grid grid-cols-1 gap-5 md:grid-cols-3", children: Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           EventListItemSkeletonView,
@@ -220,30 +205,26 @@ var EventListItemDetailsSkeletonView = ({
       "aria-label": ariaLabel != null ? ariaLabel : labels.eventItemDetails.loading,
       "aria-busy": true,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex w-full items-start gap-3 md:gap-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SkeletonBlock, { className: "size-10 rounded-agg-lg md:size-[60px]" }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-1 flex-col gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SkeletonBlock, { className: "h-5 w-[82%] rounded-agg-sm md:h-7 md:w-[55%]" }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex gap-2 overflow-hidden", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SkeletonBlock, { className: "h-8 w-28 rounded-agg-full" }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SkeletonBlock, { className: "h-8 w-28 rounded-agg-full" }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SkeletonBlock, { className: "h-8 w-28 rounded-agg-full" })
-            ] })
-          ] })
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex h-14 w-full items-center gap-3 justify-stretch", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SkeletonBlock, { className: "size-10! rounded-agg-lg" }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SkeletonBlock, { className: "h-6 w-fit flex-1 rounded-agg-sm" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-col gap-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SkeletonBlock, { className: "h-10 w-full rounded-agg-full md:w-[220px]" }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex gap-2 overflow-hidden", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SkeletonBlock, { className: "h-9 w-20 rounded-agg-full" }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SkeletonBlock, { className: "h-9 w-20 rounded-agg-full" }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SkeletonBlock, { className: "h-9 w-20 rounded-agg-full" }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SkeletonBlock, { className: "h-9 w-20 rounded-agg-full" })
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex w-full flex-col gap-4 md:gap-6", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex w-full flex-col gap-3 md:flex-row md:items-center md:justify-between", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex max-w-full gap-2 overflow-hidden", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SkeletonBlock, { className: "h-9 w-[100px] rounded-agg-full" }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SkeletonBlock, { className: "h-9 w-[100px] rounded-agg-full" }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SkeletonBlock, { className: "h-9 w-[100px] rounded-agg-full" })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SkeletonBlock, { className: "h-9 w-full max-w-[221px] rounded-agg-full md:w-[221px]" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex w-full flex-col gap-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SkeletonBlock, { className: "h-[220px] w-full rounded-agg-xl md:h-[240px]" }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SkeletonBlock, { className: "h-5 w-[59px] rounded-agg-sm" }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SkeletonBlock, { className: "h-5 w-40 rounded-agg-sm" })
+            ] })
           ] })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "h-[300px] w-full rounded-agg-xl", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SkeletonBlock, { className: "h-full w-full rounded-agg-xl" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SkeletonBlock, { className: "h-5 w-24 rounded-agg-sm" }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SkeletonBlock, { className: "h-5 w-40 rounded-agg-sm" })
         ] })
       ]
     }
@@ -259,6 +240,77 @@ var marketDetailsBaseCardClassName = "w-full overflow-hidden rounded-agg-lg bord
 
 // src/primitives/skeleton/views/market-details-skeleton-view.tsx
 var import_jsx_runtime6 = require("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__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-wrap items-center justify-between gap-3 px-4 py-3 md:px-5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex min-w-0 items-center gap-3 md:min-w-52 md:gap-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SkeletonBlock, { className: "size-12 rounded-agg-lg md:size-[60px]" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex min-w-0 flex-col gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SkeletonBlock, { className: "h-6 w-[132px] rounded-agg-sm" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SkeletonBlock, { className: "h-4 w-[141px] rounded-agg-sm" })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SkeletonBlock, { className: "h-9 w-[60px] rounded-agg-md" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex w-full gap-2 md:w-auto", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SkeletonBlock, { className: "h-9 w-full rounded-agg-full md:w-[135px]" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SkeletonBlock, { className: "h-9 w-full rounded-agg-full md:w-[131px]" })
+    ] })
+  ] });
+};
+var MarketDetailsTabsSkeleton = () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex h-14 items-end px-4 md:px-5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex h-full flex-col items-end justify-end rounded-t-agg-lg", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "px-4 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SkeletonBlock, { className: "h-6 w-20 rounded-agg-sm" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SkeletonBlock, { className: "h-[3px] w-full rounded-t-agg-sm" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex h-full flex-col justify-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "px-4 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SkeletonBlock, { className: "h-6 w-12 rounded-agg-sm" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "h-[3px] w-full" })
+    ] })
+  ] });
+};
+var MarketDetailsOrderBookRows = ({
+  side,
+  barWidths
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex flex-col gap-2", children: barWidths.map((barWidthClassName, index) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("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__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center gap-1 md:gap-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SkeletonBlock, { className: "size-4 rounded-agg-sm" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SkeletonBlock, { className: "h-5 w-[60px] rounded-agg-sm" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SkeletonBlock, { className: "h-5 rounded-agg-sm" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SkeletonBlock, { className: "h-5 rounded-agg-sm" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SkeletonBlock, { className: cn("h-2 rounded-agg-full", barWidthClassName) }) })
+    ] }),
+    index < barWidths.length - 1 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "h-px w-full bg-agg-separator" }) : null
+  ] }, `${side}-row-${index}`)) });
+};
+var MarketDetailsOderbookSkeleton = ({
+  className
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: cn("flex flex-col gap-5", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SkeletonBlock, { className: "h-4 w-10 rounded-agg-sm" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MarketDetailsOrderBookRows, { side: "ask", barWidths: orderBookAskBarWidths })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SkeletonBlock, { className: "h-4 w-10 rounded-agg-sm" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MarketDetailsOrderBookRows, { side: "bid", barWidths: orderBookBidBarWidths })
+    ] })
+  ] });
+};
 var MarketDetailsSkeletonView = ({
   className,
   ariaLabel,
@@ -273,60 +325,12 @@ var MarketDetailsSkeletonView = ({
       "aria-label": ariaLabel != null ? ariaLabel : labels.marketDetails.loading,
       "aria-busy": true,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-col gap-3 p-4 md:px-5 md:py-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex min-w-0 items-center gap-3 md:gap-4", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SkeletonBlock, { className: "size-12 rounded-agg-lg md:size-[60px]" }),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex min-w-0 flex-col gap-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SkeletonBlock, { className: "h-6 w-40 rounded-agg-sm" }),
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SkeletonBlock, { className: "h-4 w-28 rounded-agg-sm" })
-              ] })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SkeletonBlock, { className: "h-8 w-16 rounded-agg-sm" })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SkeletonBlock, { className: "h-10 flex-1 rounded-agg-full" }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SkeletonBlock, { className: "h-10 flex-1 rounded-agg-full" })
-          ] })
-        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MarketDetailsHeaderSkeleton, {}),
         isDetailed ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "h-px w-full bg-agg-separator" }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex h-14 items-end", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SkeletonBlock, { className: "h-full w-full rounded-none" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MarketDetailsTabsSkeleton, {}),
           /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "h-px w-full bg-agg-separator" }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-col gap-4 p-5", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-col gap-3", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SkeletonBlock, { className: "h-4 w-12 rounded-agg-sm" }),
-              [0, 1, 2, 3].map((index) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-                "div",
-                {
-                  className: "grid grid-cols-[52px_1fr_1fr_52px] items-center gap-2",
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SkeletonBlock, { className: "h-4 rounded-agg-sm" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SkeletonBlock, { className: "h-4 rounded-agg-sm" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SkeletonBlock, { className: "h-4 rounded-agg-sm" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SkeletonBlock, { className: "h-2 rounded-agg-full" })
-                  ]
-                },
-                `ask-${index}`
-              ))
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-col gap-3", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SkeletonBlock, { className: "h-4 w-12 rounded-agg-sm" }),
-              [0, 1, 2, 3].map((index) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-                "div",
-                {
-                  className: "grid grid-cols-[52px_1fr_1fr_52px] items-center gap-2",
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SkeletonBlock, { className: "h-4 rounded-agg-sm" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SkeletonBlock, { className: "h-4 rounded-agg-sm" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SkeletonBlock, { className: "h-4 rounded-agg-sm" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SkeletonBlock, { className: "h-2 rounded-agg-full" })
-                  ]
-                },
-                `bid-${index}`
-              ))
-            ] })
-          ] })
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MarketDetailsOderbookSkeleton, { className: "p-5" })
         ] }) : null
       ]
     }
@@ -337,65 +341,46 @@ MarketDetailsSkeletonView.displayName = "MarketDetailsSkeletonView";
 // src/primitives/skeleton/views/place-order-skeleton-view.tsx
 var import_jsx_runtime7 = require("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__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex w-full items-end border-b border-agg-border", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col rounded-t-agg-lg", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "px-5 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "h-6 w-10 rounded-agg-sm" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "h-[3px] w-full rounded-t-agg-sm" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "px-5 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "h-6 w-10 rounded-agg-sm" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "h-[3px] w-full" })
+    ] })
+  ] });
+};
 var ContentBody = () => {
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: cn("flex flex-col gap-6 p-5"), children: [
     /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-start justify-between gap-5", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "h-12 w-12 shrink-0 rounded-agg-lg" }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "h-5 w-[92%] rounded-agg-sm" }),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "h-5 w-[80%] rounded-agg-sm" })
-          ] })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "h-6 w-6 rounded-agg-sm" })
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex min-w-0 items-center gap-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "size-12 shrink-0 rounded-agg-lg" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "h-4 w-[92%] max-w-[240px] rounded-agg-sm" }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "h-4 w-[64%] max-w-[160px] rounded-agg-sm" })
+        ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "h-5 w-28 rounded-agg-sm" })
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "h-6 w-[92px] rounded-agg-sm" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TabsSkeletonBar, {})
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex h-11 items-end border-b border-agg-separator", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-8", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "h-5 w-10 rounded-agg-sm" }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "h-[3px] w-12 rounded-t-agg-sm" })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "h-5 w-10 rounded-agg-sm" })
-    ] }) }),
     /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col gap-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex w-full gap-2", children: [
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "h-11 flex-1 rounded-agg-full" }),
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "h-11 flex-1 rounded-agg-full" })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
         /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "h-6 w-20 rounded-agg-sm" }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "h-4 w-28 rounded-agg-sm" })
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "h-5 w-[63px] rounded-agg-sm" }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "h-4 w-[118px] rounded-agg-sm" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "h-9 w-28 rounded-agg-sm" })
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: cn("text-agg-3xl font-agg-bold leading-agg-9 text-agg-separator"), children: "$0" })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "rounded-agg-lg border border-agg-trade-highlight-border bg-agg-trade-highlight-surface p-3", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col gap-3", children: [
-        [0, 1].map((index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "size-4 rounded-agg-full" }),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "h-5 w-24 rounded-agg-sm" })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "h-5 w-10 rounded-agg-sm" })
-          ] }),
-          index === 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "h-px w-full bg-agg-trade-highlight-border" }) : null
-        ] }, `place-order-route-${index}`)),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "mx-auto h-5 w-40 rounded-agg-sm" })
-      ] }) }),
-      /* @__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 justify-between gap-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "h-6 w-20 rounded-agg-sm" }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "h-4 w-24 rounded-agg-sm" })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "h-9 w-36 rounded-agg-sm" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "h-4 w-[88%] self-center rounded-agg-sm" })
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "h-12 w-full rounded-agg-full" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "h-4 w-full max-w-[240px] self-center rounded-agg-sm" })
   ] });
 };
 var PlaceOrderSkeletonView = ({
@@ -409,19 +394,7 @@ var PlaceOrderSkeletonView = ({
       role: "status",
       "aria-label": ariaLabel != null ? ariaLabel : "Loading place order",
       "aria-busy": true,
-      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex w-full items-end justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime7.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_runtime7.jsx)(ContentBody, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "border-t border-agg-separator bg-agg-secondary p-4", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonBlock, { className: "h-12 w-full rounded-agg-full" }) })
-          ]
-        }
-      ) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex w-full items-end justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Card, { className: cn(placeOrderCardClassName, "w-full"), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ContentBody, {}) }) })
     }
   );
 };
@@ -447,38 +420,27 @@ var SettlementSkeletonView = ({
       "aria-label": ariaLabel != null ? ariaLabel : labels.trading.settlementLoading,
       "aria-busy": true,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.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_runtime8.jsx)(SkeletonBlock, { className: "h-4 w-20 rounded-agg-sm" }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SkeletonBlock, { className: "h-5 w-full max-w-80 rounded-agg-sm" })
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex w-full items-center justify-between gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SkeletonBlock, { className: "h-4 w-[81px] rounded-agg-sm" }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SkeletonBlock, { className: "h-5 w-full max-w-[240px] rounded-agg-sm" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-col gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SkeletonBlock, { className: "h-5 w-52 rounded-agg-sm" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex w-full flex-col gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SkeletonBlock, { className: "h-5 w-[200px] rounded-agg-sm" }),
           /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-col gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SkeletonBlock, { className: "h-4 w-[88%] rounded-agg-sm" }),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SkeletonBlock, { className: "h-4 w-[84%] rounded-agg-sm" }),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SkeletonBlock, { className: "h-4 w-[80%] rounded-agg-sm" }),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SkeletonBlock, { className: "h-4 w-[74%] rounded-agg-sm" })
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SkeletonBlock, { className: "h-4 w-full max-w-[320px] rounded-agg-sm" }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SkeletonBlock, { className: "h-4 w-full max-w-[280px] rounded-agg-sm" })
           ] })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "h-px w-full bg-agg-separator" }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-col gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-col gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SkeletonBlock, { className: "size-4 rounded-agg-full" }),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SkeletonBlock, { className: "h-5 w-24 rounded-agg-sm" }),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SkeletonBlock, { className: "h-4 w-4 rounded-agg-sm" })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-col gap-2 pl-6", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SkeletonBlock, { className: "h-4 w-full rounded-agg-sm" }),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SkeletonBlock, { className: "h-4 w-[92%] rounded-agg-sm" }),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SkeletonBlock, { className: "h-4 w-[34%] rounded-agg-sm" })
-            ] })
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex w-full flex-col gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SkeletonBlock, { className: "size-4 rounded-agg-sm" }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SkeletonBlock, { className: "h-5 w-[100px] rounded-agg-sm" })
           ] }),
-          [0, 1, 2].map((index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SkeletonBlock, { className: "size-4 rounded-agg-full" }),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SkeletonBlock, { className: "h-5 w-20 rounded-agg-sm" }),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SkeletonBlock, { className: "h-4 w-4 rounded-agg-sm" })
-          ] }, `settlement-venue-${index}`))
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SkeletonBlock, { className: "size-4 rounded-agg-sm" }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SkeletonBlock, { className: "h-5 w-[60px] rounded-agg-sm" })
+          ] })
         ] })
       ]
     }

package/dist/skeleton.mjs

@@ -1,7 +1,7 @@
 import {
   Skeleton,
   skeletonViews
-} from "./chunk-V52WSZHQ.mjs";
+} from "./chunk-M4RJHRFT.mjs";
 import "./chunk-FO2QCB4Z.mjs";
 import "./chunk-GJ4U5NCE.mjs";
 export {