@agg-market/ui 0.0.6 → 2.0.0

package/dist/market-details.js

@@ -68,9 +68,6 @@ var import_hooks14 = require("@agg-market/hooks");
 // src/primitives/card/index.tsx
 var import_hooks = require("@agg-market/hooks");
 
-// src/constants.ts
-var AGG_ROOT_CLASS_NAME = "agg-root";
-
 // src/shared/utils.ts
 var cn = (...values) => values.filter(Boolean).join(" ");
 var getMotionClassName = (enabled, ...values) => {
@@ -95,19 +92,23 @@ var toDate = (value) => {
 // src/primitives/card/index.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var Card = (_a) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  var _b = _a, { className, onClick } = _b, props = __objRest(_b, ["className", "onClick"]);
   const { enableAnimations } = (0, import_hooks.useSdkUiConfig)();
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
-    __spreadValues({
+    __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"),
+        getMotionClassName(
+          enableAnimations,
+          "transition-shadow hover:shadow-agg-card-hover duration-300 ease-in-out"
+        ),
         className
       )
-    }, props)
+    }, onClick ? { onClick } : {}), props)
   );
 };
 Card.displayName = "Card";
@@ -194,7 +195,10 @@ var SwitchButton = ({
     "div",
     {
       className: cn(
+        "group/agg-switch",
         "inline-flex min-w-0 rounded-agg-full bg-agg-secondary-hover font-agg-sans",
+        getMotionClassName(enableAnimations, "transition-background duration-200 ease-in-out"),
+        "cursor-pointer hover:bg-agg-tertiary",
         className
       ),
       children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
@@ -214,7 +218,7 @@ var SwitchButton = ({
                   "pointer-events-none absolute inset-y-0 left-0 rounded-agg-full border-2 border-agg-primary bg-agg-secondary",
                   getMotionClassName(
                     enableAnimations,
-                    "transition-transform duration-[450ms] ease-[cubic-bezier(0.77,0,0.175,1)]"
+                    "transition-transform duration-500 ease-[cubic-bezier(0.77,0,0.175,1)]"
                   )
                 ),
                 style: {
@@ -238,15 +242,19 @@ var SwitchButton = ({
                   disabled: option.disabled,
                   className: cn(
                     "relative z-10 min-w-0 rounded-agg-full px-5 py-1.5 font-agg-sans text-agg-base leading-agg-6 text-agg-foreground",
-                    getMotionClassName(enableAnimations, "transition-colors duration-300"),
+                    getMotionClassName(
+                      enableAnimations,
+                      "transition-[colors] duration-200 ease-in-out"
+                    ),
                     "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-agg-primary focus-visible:ring-offset-2 focus-visible:ring-offset-agg-secondary-hover",
-                    "disabled:cursor-not-allowed disabled:text-agg-muted-foreground",
+                    "cursor-pointer disabled:cursor-not-allowed disabled:text-agg-muted-foreground",
                     isActive ? "font-agg-bold" : "font-agg-normal"
                   ),
-                  onClick: () => {
-                    if (option.disabled || isActive) {
+                  onClick: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    if (option.disabled || isActive)
                       return;
-                    }
                     onValueChange(option.value);
                   },
                   onKeyDown: (event) => {
@@ -424,7 +432,7 @@ var LineChart = ({
     seriesSwitchAriaLabel: labels.common.lineChartSeriesSwitchAria,
     formatSeriesOptionAriaLabel: labels.common.lineChartSeriesOptionAria
   }) : null : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: cn("w-full", classNames == null ? void 0 : classNames.root), style: { width }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: cn("group/agg-chart", "w-full", classNames == null ? void 0 : classNames.root), style: { width }, children: [
     !isLoading && seriesControls ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: cn("mb-3", classNames == null ? void 0 : classNames.controls), children: seriesControls }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "div",
@@ -505,7 +513,7 @@ var EventListItemSkeletonView = ({
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     Card,
     {
-      className: cn(baseCardClassName, className),
+      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,
@@ -554,7 +562,7 @@ var EventListSkeletonView = ({ className, ariaLabel }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "section",
     {
-      className: cn("flex w-full flex-col gap-5", className),
+      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,
@@ -612,7 +620,7 @@ var EventListItemDetailsSkeletonView = ({
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     Card,
     {
-      className: cn(detailsBaseCardClassName, className),
+      className: cn("group/agg-skeleton", detailsBaseCardClassName, className),
       role: "status",
       "aria-label": ariaLabel != null ? ariaLabel : labels.eventItemDetails.loading,
       "aria-busy": true,
@@ -673,7 +681,7 @@ var MarketDetailsSkeletonView = ({
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     Card,
     {
-      className: cn(marketDetailsBaseCardClassName, className),
+      className: cn("group/agg-skeleton", marketDetailsBaseCardClassName, className),
       role: "status",
       "aria-label": ariaLabel != null ? ariaLabel : labels.marketDetails.loading,
       "aria-busy": true,
@@ -743,7 +751,7 @@ MarketDetailsSkeletonView.displayName = "MarketDetailsSkeletonView";
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var placeOrderCardClassName = "overflow-hidden rounded-agg-xl border border-agg-border bg-agg-secondary shadow-none hover:shadow-none";
 var ContentBody = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex flex-col gap-6 p-5", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: cn("flex flex-col gap-6 p-5"), children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex flex-col gap-2", children: [
       /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-start justify-between gap-5", children: [
         /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
@@ -810,7 +818,7 @@ var PlaceOrderSkeletonView = ({
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     "div",
     {
-      className: cn("w-full", className),
+      className: cn("group/agg-skeleton", "w-full", className),
       role: "status",
       "aria-label": ariaLabel != null ? ariaLabel : "Loading place order",
       "aria-busy": true,
@@ -844,6 +852,7 @@ var SettlementSkeletonView = ({
     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
       ),
@@ -929,7 +938,10 @@ Skeleton.displayName = "Skeleton";
 // src/primitives/tabs/index.tsx
 var import_react4 = require("react");
 var import_hooks11 = require("@agg-market/hooks");
-var DropdownMenu = __toESM(require("@radix-ui/react-dropdown-menu"));
+
+// src/primitives/select/index.tsx
+var import_react3 = require("react");
+var import_hooks10 = require("@agg-market/hooks");
 
 // src/primitives/icon/types.ts
 var getIconA11yProps = (title) => ({
@@ -992,14 +1004,10 @@ var ArrowsToDotIcon = (_a) => {
         /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           "path",
           {
-            d: "M8 2V5M8 11V14M2 8H5M11 8H14M3.76 3.76L5.9 5.9M10.1 10.1L12.24 12.24M12.24 3.76L10.1 5.9M5.9 10.1L3.76 12.24",
-            stroke: "currentColor",
-            strokeWidth: "1.25",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
+            d: "M8 6.66667C8.73667 6.66667 9.33333 7.26333 9.33333 8C9.33333 8.73667 8.73667 9.33333 8 9.33333C7.26333 9.33333 6.66667 8.73667 6.66667 8C6.66667 7.26333 7.26333 6.66667 8 6.66667ZM5.27867 7.05733L3.39267 5.17133C3.132 4.91067 2.71067 4.91067 2.45 5.17133C2.18933 5.432 2.18933 5.854 2.45 6.114L3.67467 7.33333H0.666667C0.298 7.33333 0 7.632 0 8C0 8.368 0.298 8.66667 0.666667 8.66667H3.662L2.44867 9.88667C2.18867 10.148 2.19 10.5693 2.45133 10.8293C2.71267 11.0893 3.13467 11.088 3.394 10.8267L5.27933 8.93133C5.79467 8.41467 5.79467 7.574 5.27933 7.05667L5.27867 7.05733ZM7.068 5.278C7.56133 5.79267 8.45 5.79267 8.94267 5.278L10.828 3.392C11.0887 3.13133 11.0887 2.70933 10.828 2.44933C10.5673 2.18867 10.146 2.18867 9.88533 2.44933L8.66667 3.674V0.666667C8.66667 0.298667 8.36867 0 8 0C7.63133 0 7.33333 0.298667 7.33333 0.666667V3.662L6.11333 2.44867C5.852 2.18867 5.43067 2.19 5.17067 2.45133C4.91067 2.71267 4.912 3.13467 5.17333 3.394L7.068 5.278ZM8.94267 10.7213C8.42667 10.2053 7.58533 10.2053 7.06867 10.72L5.17267 12.606C4.91133 12.866 4.91 13.2873 5.17 13.5487C5.42933 13.8093 5.85067 13.8113 6.11267 13.5513L7.33267 12.3307V15.3333C7.33267 15.702 7.63067 16 7.99933 16C8.368 16 8.666 15.702 8.666 15.3333V12.3307L9.88467 13.55C10.1453 13.8107 10.5667 13.8107 10.8273 13.55C11.088 13.2893 11.088 12.868 10.8273 12.6073L8.94267 10.7213ZM15.3333 7.33333H12.3307L13.55 6.114C13.8107 5.854 13.8107 5.432 13.55 5.17133C13.2893 4.91067 12.868 4.91067 12.6073 5.17133L10.7213 7.05733C10.2053 7.574 10.2047 8.41467 10.72 8.93133L12.606 10.8273C12.866 11.088 13.2873 11.09 13.5487 10.83C13.81 10.57 13.8113 10.1487 13.5513 9.88733L12.3307 8.66733H15.3333C15.702 8.66733 16 8.36867 16 8.00067C16 7.63267 15.702 7.334 15.3333 7.334V7.33333Z",
+            fill: "currentColor"
           }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("circle", { cx: "8", cy: "8", r: "1.5", fill: "currentColor" })
+        )
       ]
     })
   );
@@ -1533,14 +1541,9 @@ InfoIcon.displayName = "InfoIcon";
 
 // src/primitives/icon/icon.constants.ts
 var iconSizeClasses = {
-  xxs: "h-2 w-2",
-  xs: "h-3 w-3",
-  s: "h-4 w-4",
-  ms: "h-5 w-5",
-  m: "h-6 w-6",
-  l: "h-8 w-8",
-  xl: "h-10 w-10",
-  xxl: "h-12 w-12"
+  small: "h-4 w-4",
+  medium: "h-6 w-6",
+  large: "h-8 w-8"
 };
 
 // src/primitives/icon/svg/check-badge.tsx
@@ -2246,7 +2249,7 @@ var Icon = (_a) => {
   var _b = _a, {
     name,
     color,
-    size = "m",
+    size = "medium",
     className = "text-agg-primary",
     style
   } = _b, props = __objRest(_b, [
@@ -2259,13 +2262,18 @@ var Icon = (_a) => {
   const Component = iconRegistry[name];
   const resolvedStyle = resolveIconStyle(color, style);
   const resolvedClassName = cn(iconSizeClasses[size], className);
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Component, __spreadValues({ color, className: resolvedClassName, style: resolvedStyle }, props));
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+    Component,
+    __spreadValues({
+      color,
+      className: cn("group/agg-icon", resolvedClassName),
+      style: resolvedStyle
+    }, props)
+  );
 };
 Icon.displayName = "Icon";
 
 // src/primitives/select/index.tsx
-var import_react3 = require("react");
-var import_hooks10 = require("@agg-market/hooks");
 var import_jsx_runtime54 = require("react/jsx-runtime");
 var Select = ({
   items,
@@ -2287,7 +2295,7 @@ var Select = ({
     if (!isOpen)
       return;
     const handlePointerDown = (e) => {
-      if (containerRef.current && !containerRef.current.contains(e.target)) {
+      if (containerRef.current && !containerRef.current.contains(e == null ? void 0 : e.target)) {
         close();
       }
     };
@@ -2298,7 +2306,7 @@ var Select = ({
     if (!isOpen)
       return;
     const handleKey = (e) => {
-      if (e.key === "Escape")
+      if ((e == null ? void 0 : e.key) === "Escape")
         close();
     };
     document.addEventListener("keydown", handleKey);
@@ -2307,7 +2315,7 @@ var Select = ({
   const isDisabled = disabled || !hasEnabledItems;
   const selectedItem = items.find((item) => item.value === value);
   if (!hasAnyIcon) {
-    return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("label", { className: cn("relative inline-flex w-full", className), children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("label", { className: cn("group/agg-select", "relative inline-flex w-full", className), children: [
       /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
         "select",
         {
@@ -2316,7 +2324,7 @@ var Select = ({
             "w-full appearance-none rounded-agg-md border border-agg-separator bg-agg-secondary px-4 py-2 pr-10 font-agg-sans text-agg-sm leading-agg-5 text-agg-foreground outline-none",
             getMotionClassName(
               enableAnimations,
-              "transition-[border-color,box-shadow] duration-200 ease-out"
+              "transition-[border-color,box-shadow] duration-200 ease-in-out"
             ),
             "focus:border-agg-primary focus:ring-2 focus:ring-agg-primary/15",
             "disabled:cursor-not-allowed disabled:opacity-60"
@@ -2327,88 +2335,95 @@ var Select = ({
           children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("option", { value: item.value, disabled: item.disabled, children: item.label }, item.value))
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "pointer-events-none absolute inset-y-0 right-3 inline-flex items-center justify-center text-agg-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Icon, { name: "chevron-down", size: "s", color: "currentColor" }) })
+      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "pointer-events-none absolute inset-y-0 right-3 inline-flex items-center justify-center text-agg-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Icon, { name: "chevron-down", size: "small", color: "currentColor" }) })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { ref: containerRef, className: cn("relative inline-flex w-full", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
-      "button",
-      {
-        type: "button",
-        "aria-label": ariaLabel != null ? ariaLabel : labels.common.selectAria,
-        "aria-expanded": isOpen,
-        "aria-haspopup": "listbox",
-        disabled: isDisabled,
-        className: cn(
-          "w-full rounded-agg-md border border-agg-separator bg-agg-secondary px-4 py-2 pr-10 font-agg-sans text-agg-sm leading-agg-5 text-agg-foreground outline-none",
-          "flex items-center gap-2 text-left",
-          getMotionClassName(
-            enableAnimations,
-            "transition-[border-color,box-shadow] duration-200 ease-out"
-          ),
-          "focus:border-agg-primary focus:ring-2 focus:ring-agg-primary/15",
-          "disabled:cursor-not-allowed disabled:opacity-60"
-        ),
-        onClick: () => setIsOpen((prev) => !prev),
-        children: [
-          (selectedItem == null ? void 0 : selectedItem.iconUrl) ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-            "img",
-            {
-              src: selectedItem.iconUrl,
-              alt: "",
-              className: "h-4 w-4 shrink-0 rounded-sm object-contain"
-            }
-          ) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "flex-1 truncate", children: (_a = selectedItem == null ? void 0 : selectedItem.label) != null ? _a : "" })
-        ]
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "pointer-events-none absolute inset-y-0 right-3 inline-flex items-center justify-center text-agg-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Icon, { name: "chevron-down", size: "s", color: "currentColor" }) }),
-    isOpen ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-      "div",
-      {
-        role: "listbox",
-        "aria-label": ariaLabel != null ? ariaLabel : labels.common.selectAria,
-        className: "absolute top-full left-0 z-50 mt-1 w-full overflow-hidden rounded-agg-md border border-agg-separator bg-agg-secondary shadow-lg",
-        children: items.map((item) => {
-          const isSelected = item.value === value;
-          return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
-            "button",
-            {
-              type: "button",
-              role: "option",
-              "aria-selected": isSelected,
-              disabled: item.disabled,
-              className: cn(
-                "flex w-full items-center gap-2 px-4 py-2 text-left text-agg-sm leading-agg-5 outline-none",
-                "hover:bg-agg-secondary-hover focus-visible:bg-agg-secondary-hover",
-                isSelected ? "font-agg-bold text-agg-primary" : "font-agg-normal text-agg-foreground",
-                item.disabled && "cursor-not-allowed opacity-60"
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+    "div",
+    {
+      ref: containerRef,
+      className: cn("group/agg-select", "relative inline-flex w-full", className),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+          "button",
+          {
+            type: "button",
+            "aria-label": ariaLabel != null ? ariaLabel : labels.common.selectAria,
+            "aria-expanded": isOpen,
+            "aria-haspopup": "listbox",
+            disabled: isDisabled,
+            className: cn(
+              "w-full rounded-agg-md border border-agg-separator bg-agg-secondary px-4 py-2 pr-10 font-agg-sans text-agg-sm leading-agg-5 text-agg-foreground outline-none",
+              "flex items-center gap-2 text-left",
+              getMotionClassName(
+                enableAnimations,
+                "transition-[border-color,box-shadow] duration-200 ease-in-out"
               ),
-              onClick: () => {
-                if (!item.disabled) {
-                  onChange(item.value);
-                  close();
+              "focus:border-agg-primary focus:ring-2 focus:ring-agg-primary/15",
+              "disabled:cursor-not-allowed disabled:opacity-60"
+            ),
+            onClick: () => setIsOpen((prev) => !prev),
+            children: [
+              (selectedItem == null ? void 0 : selectedItem.iconUrl) ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                "img",
+                {
+                  src: selectedItem.iconUrl,
+                  alt: "",
+                  className: "h-4 w-4 shrink-0 rounded-sm object-contain"
                 }
-              },
-              children: [
-                item.iconUrl ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-                  "img",
-                  {
-                    src: item.iconUrl,
-                    alt: "",
-                    className: "h-4 w-4 shrink-0 rounded-sm object-contain"
-                  }
-                ) : null,
-                /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "truncate", children: item.label })
-              ]
-            },
-            item.value
-          );
-        })
-      }
-    ) : null
-  ] });
+              ) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "flex-1 truncate", children: (_a = selectedItem == null ? void 0 : selectedItem.label) != null ? _a : "" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "pointer-events-none absolute inset-y-0 right-3 inline-flex items-center justify-center text-agg-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Icon, { name: "chevron-down", size: "small", color: "currentColor" }) }),
+        isOpen ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+          "div",
+          {
+            role: "listbox",
+            "aria-label": ariaLabel != null ? ariaLabel : labels.common.selectAria,
+            className: "absolute top-full left-0 z-50 mt-1 w-full overflow-hidden rounded-agg-md border border-agg-separator bg-agg-secondary shadow-lg",
+            children: items.map((item) => {
+              const isSelected = item.value === value;
+              return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+                "button",
+                {
+                  type: "button",
+                  role: "option",
+                  "aria-selected": isSelected,
+                  disabled: item.disabled,
+                  className: cn(
+                    "flex w-full items-center gap-2 px-4 py-2 text-left text-agg-sm leading-agg-5 outline-none",
+                    "hover:bg-agg-secondary-hover focus-visible:bg-agg-secondary-hover",
+                    isSelected ? "font-agg-bold text-agg-primary" : "font-agg-normal text-agg-foreground",
+                    item.disabled && "cursor-not-allowed opacity-60"
+                  ),
+                  onClick: () => {
+                    if (!item.disabled) {
+                      onChange(item.value);
+                      close();
+                    }
+                  },
+                  children: [
+                    item.iconUrl ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                      "img",
+                      {
+                        src: item.iconUrl,
+                        alt: "",
+                        className: "h-4 w-4 shrink-0 rounded-sm object-contain"
+                      }
+                    ) : null,
+                    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "truncate", children: item.label })
+                  ]
+                },
+                item.value
+              );
+            })
+          }
+        ) : null
+      ]
+    }
+  );
 };
 Select.displayName = "Select";
 
@@ -2435,86 +2450,10 @@ var findEdgeEnabledIndex = (items, direction) => {
   }
   return -1;
 };
-var FALLBACK_TAB_WIDTH = 112;
-var FALLBACK_MORE_WIDTH = 56;
-var sumWidths = (indices, widths) => {
-  return [...indices].reduce((accumulator, index) => {
-    var _a;
-    return accumulator + ((_a = widths[index]) != null ? _a : 0);
-  }, 0);
-};
-var resolveTabsOverflowLayout = ({
-  items,
-  value,
-  containerWidth,
-  moreButtonWidth,
-  itemWidthByValue
-}) => {
-  var _a;
-  if (items.length === 0) {
-    return {
-      visibleItems: [],
-      hiddenItems: []
-    };
-  }
-  if (!Number.isFinite(containerWidth) || containerWidth <= 0) {
-    return {
-      visibleItems: items,
-      hiddenItems: []
-    };
-  }
-  const resolvedItemWidths = items.map((item) => {
-    var _a2;
-    const measuredWidth = (_a2 = itemWidthByValue.get(item.value)) != null ? _a2 : FALLBACK_TAB_WIDTH;
-    return Math.max(1, measuredWidth);
-  });
-  const totalItemsWidth = resolvedItemWidths.reduce((sum, width) => {
-    return sum + width;
-  }, 0);
-  if (totalItemsWidth <= containerWidth) {
-    return {
-      visibleItems: items,
-      hiddenItems: []
-    };
-  }
-  const reservedMoreWidth = Math.max(1, moreButtonWidth || FALLBACK_MORE_WIDTH);
-  const visibleIndices = /* @__PURE__ */ new Set();
-  let usedWidth = 0;
-  for (let index = 0; index < items.length; index += 1) {
-    const itemWidth = (_a = resolvedItemWidths[index]) != null ? _a : FALLBACK_TAB_WIDTH;
-    const hasRemainingItems = index < items.length - 1;
-    const requiredExtraWidth = hasRemainingItems ? reservedMoreWidth : 0;
-    if (usedWidth + itemWidth + requiredExtraWidth > containerWidth)
-      break;
-    visibleIndices.add(index);
-    usedWidth += itemWidth;
-  }
-  if (visibleIndices.size === 0) {
-    visibleIndices.add(0);
-  }
-  const activeIndex = items.findIndex((item) => item.value === value);
-  const isActiveHidden = activeIndex >= 0 && !visibleIndices.has(activeIndex);
-  if (isActiveHidden && activeIndex >= 0) {
-    visibleIndices.add(activeIndex);
-    while (visibleIndices.size > 1) {
-      const visibleWidth = sumWidths(visibleIndices, resolvedItemWidths);
-      if (visibleWidth + reservedMoreWidth <= containerWidth)
-        break;
-      const removableIndex = [...visibleIndices].sort((left, right) => right - left).find((index) => index !== activeIndex);
-      if (removableIndex == null)
-        break;
-      visibleIndices.delete(removableIndex);
-    }
-  }
-  return {
-    visibleItems: items.filter((_, index) => visibleIndices.has(index)),
-    hiddenItems: items.filter((_, index) => !visibleIndices.has(index))
-  };
-};
 
 // src/primitives/tabs/index.tsx
 var import_jsx_runtime55 = require("react/jsx-runtime");
-var mobileTabsMediaQuery = "(max-width: 767px)";
+var mobileTabsMediaQuery = "(max-width: 512px)";
 var getTabButtonClassName = ({
   enableAnimations,
   isBarVariant,
@@ -2526,7 +2465,11 @@ var getTabButtonClassName = ({
   return cn(
     "cursor-pointer disabled:cursor-not-allowed",
     "relative inline-flex h-full shrink-0 items-center justify-center gap-2 font-agg-sans",
-    getMotionClassName(enableAnimations, "transition-colors motion-reduce:transition-none"),
+    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"
@@ -2538,35 +2481,6 @@ var getTabButtonClassName = ({
     isDisabled && "cursor-not-allowed opacity-60"
   );
 };
-var getMeasureTabClassName = ({
-  isBarVariant,
-  size
-}) => {
-  const isSmall = size === "s";
-  return cn(
-    "relative inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap font-agg-sans",
-    isBarVariant ? cn(
-      "h-8 min-w-20 border-r border-agg-separator font-agg-bold",
-      isSmall ? "px-3 text-agg-sm leading-agg-5" : "px-4 text-agg-base leading-agg-6"
-    ) : cn(
-      "h-12 font-agg-bold",
-      isSmall ? "px-4 text-agg-sm leading-agg-5" : "px-5 text-agg-base leading-agg-6"
-    )
-  );
-};
-var getMoreButtonClassName = ({
-  enableAnimations,
-  isBarVariant,
-  size
-}) => {
-  const isSmall = size === "s";
-  return cn(
-    "cursor-pointer disabled:cursor-not-allowed",
-    "relative inline-flex shrink-0 items-center justify-center overflow-hidden font-agg-sans text-agg-foreground hover:bg-agg-secondary-hover",
-    getMotionClassName(enableAnimations, "transition-colors motion-reduce:transition-none"),
-    isBarVariant ? "h-8 rounded-r-agg-sm border border-agg-separator bg-agg-secondary px-2" : cn("h-12 bg-agg-secondary", isSmall ? "px-3 text-agg-sm" : "px-4 text-agg-base")
-  );
-};
 var Tabs = ({
   items,
   value,
@@ -2574,12 +2488,12 @@ var Tabs = ({
   variant = "bar",
   size = "m",
   overflowBehavior,
-  overflowMenuAriaLabel,
   ariaLabel,
-  className
+  className,
+  classNames
 }) => {
   const labels = (0, import_hooks11.useLabels)();
-  const { enableAnimations, rootClassName } = (0, import_hooks11.useSdkUiConfig)();
+  const { enableAnimations } = (0, import_hooks11.useSdkUiConfig)();
   const buttonRefs = (0, import_react4.useRef)([]);
   const dragStateRef = (0, import_react4.useRef)({
     isPointerDown: false,
@@ -2591,8 +2505,6 @@ var Tabs = ({
   });
   const suppressClickRef = (0, import_react4.useRef)(false);
   const resolvedAriaLabel = ariaLabel != null ? ariaLabel : labels.common.tabsAria;
-  const resolvedOverflowMenuAriaLabel = overflowMenuAriaLabel != null ? overflowMenuAriaLabel : labels.common.hiddenTabsAria;
-  const [isMoreMenuOpen, setIsMoreMenuOpen] = (0, import_react4.useState)(false);
   const [isMobileViewport, setIsMobileViewport] = (0, import_react4.useState)(false);
   const [isDraggingTabs, setIsDraggingTabs] = (0, import_react4.useState)(false);
   const [activeUnderlineStyle, setActiveUnderlineStyle] = (0, import_react4.useState)({
@@ -2600,39 +2512,21 @@ var Tabs = ({
     width: 0,
     opacity: 0
   });
-  const [overflowLayout, setOverflowLayout] = (0, import_react4.useState)({
-    visibleItems: items,
-    hiddenItems: []
-  });
   const [scrollAffordanceState, setScrollAffordanceState] = (0, import_react4.useState)({
     showStart: false,
     showEnd: false
   });
-  const containerRef = (0, import_react4.useRef)(null);
   const tabListRef = (0, import_react4.useRef)(null);
-  const moreButtonMeasureRef = (0, import_react4.useRef)(null);
-  const tabMeasureRefs = (0, import_react4.useRef)(/* @__PURE__ */ new Map());
   const isBarVariant = variant === "bar";
   const resolvedOverflowBehavior = (0, import_react4.useMemo)(() => {
     if (overflowBehavior)
       return overflowBehavior;
     if (!isBarVariant)
       return "scroll";
-    return isMobileViewport ? "select" : "menu";
+    return isMobileViewport ? "select" : "scroll";
   }, [isBarVariant, isMobileViewport, overflowBehavior]);
-  const shouldUseOverflowMenu = resolvedOverflowBehavior === "menu";
   const shouldUseOverflowScroll = resolvedOverflowBehavior === "scroll";
   const shouldUseOverflowSelect = resolvedOverflowBehavior === "select";
-  const handleMeasureTabRef = (0, import_react4.useCallback)(
-    (tabValue, tabElement) => {
-      if (!tabElement) {
-        tabMeasureRefs.current.delete(tabValue);
-        return;
-      }
-      tabMeasureRefs.current.set(tabValue, tabElement);
-    },
-    []
-  );
   (0, import_react4.useEffect)(() => {
     if (typeof window === "undefined")
       return;
@@ -2652,55 +2546,6 @@ var Tabs = ({
       mediaQueryList.removeListener(handleMediaQueryChange);
     };
   }, []);
-  const handleRecalculateOverflow = (0, import_react4.useCallback)(() => {
-    var _a, _b, _c, _d;
-    if (!shouldUseOverflowMenu) {
-      setOverflowLayout({
-        visibleItems: items,
-        hiddenItems: []
-      });
-      return;
-    }
-    const containerWidth = (_b = (_a = containerRef.current) == null ? void 0 : _a.clientWidth) != null ? _b : 0;
-    const moreButtonWidth = (_d = (_c = moreButtonMeasureRef.current) == null ? void 0 : _c.offsetWidth) != null ? _d : 0;
-    const itemWidthByValue = new Map(
-      items.map((item) => {
-        var _a2, _b2;
-        return [item.value, (_b2 = (_a2 = tabMeasureRefs.current.get(item.value)) == null ? void 0 : _a2.offsetWidth) != null ? _b2 : 0];
-      })
-    );
-    setOverflowLayout(
-      resolveTabsOverflowLayout({
-        items,
-        value,
-        containerWidth,
-        moreButtonWidth,
-        itemWidthByValue
-      })
-    );
-  }, [items, shouldUseOverflowMenu, value]);
-  (0, import_react4.useEffect)(() => {
-    handleRecalculateOverflow();
-  }, [handleRecalculateOverflow]);
-  (0, import_react4.useEffect)(() => {
-    if (!shouldUseOverflowMenu)
-      return;
-    const container = containerRef.current;
-    if (!container || typeof ResizeObserver === "undefined")
-      return;
-    const resizeObserver = new ResizeObserver(() => {
-      handleRecalculateOverflow();
-    });
-    resizeObserver.observe(container);
-    return () => {
-      resizeObserver.disconnect();
-    };
-  }, [handleRecalculateOverflow, shouldUseOverflowMenu]);
-  (0, import_react4.useEffect)(() => {
-    if (overflowLayout.hiddenItems.length > 0)
-      return;
-    setIsMoreMenuOpen(false);
-  }, [overflowLayout.hiddenItems.length]);
   const updateScrollAffordances = (0, import_react4.useCallback)(() => {
     if (!shouldUseOverflowScroll) {
       setScrollAffordanceState({
@@ -2718,8 +2563,7 @@ var Tabs = ({
       showEnd: maxScrollLeft - tabListElement.scrollLeft > 4
     });
   }, [shouldUseOverflowScroll]);
-  const renderedItems = shouldUseOverflowMenu ? overflowLayout.visibleItems : items;
-  const shouldShowMoreButton = shouldUseOverflowMenu && overflowLayout.hiddenItems.length > 0;
+  const renderedItems = items;
   const selectItems = (0, import_react4.useMemo)(() => {
     return items.map((item) => ({
       value: item.value,
@@ -2744,24 +2588,24 @@ var Tabs = ({
     (_a = buttonRefs.current[index]) == null ? void 0 : _a.focus();
   };
   const handleKeyDown = (event, index) => {
-    switch (event.key) {
+    switch (event == null ? void 0 : event.key) {
       case "ArrowRight": {
-        event.preventDefault();
+        event == null ? void 0 : event.preventDefault();
         handleMoveFocus(findNextEnabledIndex(renderedItems, index, 1));
         return;
       }
       case "ArrowLeft": {
-        event.preventDefault();
+        event == null ? void 0 : event.preventDefault();
         handleMoveFocus(findNextEnabledIndex(renderedItems, index, -1));
         return;
       }
       case "Home": {
-        event.preventDefault();
+        event == null ? void 0 : event.preventDefault();
         handleMoveFocus(findEdgeEnabledIndex(renderedItems, 1));
         return;
       }
       case "End": {
-        event.preventDefault();
+        event == null ? void 0 : event.preventDefault();
         handleMoveFocus(findEdgeEnabledIndex(renderedItems, -1));
         return;
       }
@@ -2769,22 +2613,16 @@ var Tabs = ({
         return;
     }
   };
-  const activeHiddenItem = (0, import_react4.useMemo)(() => {
-    if (!shouldUseOverflowMenu)
-      return void 0;
-    return overflowLayout.hiddenItems.find((item) => item.value === value);
-  }, [overflowLayout.hiddenItems, shouldUseOverflowMenu, value]);
   const tabListClassName = cn(
     "inline-flex items-stretch bg-agg-secondary",
-    shouldUseOverflowMenu ? "min-w-0 flex-1 overflow-hidden" : shouldUseOverflowScroll ? cn(
+    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"),
-    shouldShowMoreButton && isBarVariant && "rounded-r-none border-r-0"
+    shouldUseOverflowScroll && (isDraggingTabs ? "cursor-grabbing" : "cursor-grab")
   );
   const handleTabListWheel = (event) => {
     if (!shouldUseOverflowScroll)
@@ -2873,14 +2711,10 @@ var Tabs = ({
   const handleTabListClickCapture = (event) => {
     if (!suppressClickRef.current)
       return;
-    event.preventDefault();
-    event.stopPropagation();
+    event == null ? void 0 : event.preventDefault();
+    event == null ? void 0 : event.stopPropagation();
     suppressClickRef.current = false;
   };
-  const handleSelectHiddenItem = (nextValue) => {
-    handleSelect(nextValue);
-    setIsMoreMenuOpen(false);
-  };
   const updateActiveUnderline = (0, import_react4.useCallback)(() => {
     if (isBarVariant) {
       setActiveUnderlineStyle({
@@ -2948,18 +2782,34 @@ var Tabs = ({
   (0, import_react4.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;
-    activeButton.scrollIntoView({
-      behavior: getScrollBehavior(enableAnimations),
-      block: "nearest",
-      inline: "nearest"
+    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__ */ (0, import_jsx_runtime55.jsx)("div", { className: cn("w-full", className), children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: cn("w-full", className, classNames == null ? void 0 : classNames.root), children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
       Select,
       {
         ariaLabel,
@@ -2974,10 +2824,12 @@ var Tabs = ({
   return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
     "div",
     {
-      ref: containerRef,
       className: cn(
-        "relative inline-flex max-w-full items-stretch font-agg-sans bg-agg-secondary",
-        className
+        "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__ */ (0, import_jsx_runtime55.jsxs)(
@@ -2986,7 +2838,7 @@ var Tabs = ({
             ref: tabListRef,
             role: "tablist",
             "aria-label": resolvedAriaLabel,
-            className: cn("relative", tabListClassName),
+            className: cn("relative", tabListClassName, classNames == null ? void 0 : classNames.tabList),
             onClickCapture: handleTabListClickCapture,
             onPointerCancel: handleEndTabListDrag,
             onPointerDown: handleTabListPointerDown,
@@ -3008,7 +2860,11 @@ var Tabs = ({
                     "aria-selected": isActive,
                     "aria-label": item.label,
                     disabled: item.disabled,
-                    onClick: () => handleSelect(item.value),
+                    onClick: (e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      handleSelect(item.value);
+                    },
                     onKeyDown: (event) => handleKeyDown(event, index),
                     className: cn(
                       getTabButtonClassName({
@@ -3050,7 +2906,7 @@ var Tabs = ({
                     "pointer-events-none absolute bottom-0 left-0 rounded-t-agg-sm bg-agg-primary",
                     getMotionClassName(
                       enableAnimations,
-                      "transition-[transform,width,opacity] duration-300 ease-[cubic-bezier(0.4,0,0.2,1)]"
+                      "transition-[transform,width,opacity] duration-300 ease-in-out"
                     ),
                     "h-[3px]"
                   ),
@@ -3066,7 +2922,7 @@ var Tabs = ({
             {
               "aria-hidden": true,
               className: cn(
-                "pointer-events-none absolute top-0 bottom-0 left-0 z-10 w-12 md:w-18 bg-gradient-to-r from-agg-secondary via-agg-secondary to-transparent",
+                "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"
               )
@@ -3077,104 +2933,13 @@ var Tabs = ({
             {
               "aria-hidden": true,
               className: cn(
-                "pointer-events-none absolute top-0 right-0 bottom-0 z-10 w-12 md:w-18 bg-gradient-to-l from-agg-secondary via-agg-secondary to-transparent",
+                "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,
-        shouldShowMoreButton ? /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(DropdownMenu.Root, { open: isMoreMenuOpen, onOpenChange: setIsMoreMenuOpen, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
-            "button",
-            {
-              type: "button",
-              "aria-label": resolvedOverflowMenuAriaLabel,
-              className: cn(
-                getMoreButtonClassName({
-                  enableAnimations,
-                  isBarVariant,
-                  size
-                }),
-                activeHiddenItem ? "font-agg-bold text-agg-primary" : "font-agg-normal text-agg-foreground"
-              ),
-              children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Icon, { name: "dots-horizontal", size: isBarVariant ? "s" : "m", color: "currentColor" })
-            }
-          ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(DropdownMenu.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
-            DropdownMenu.Content,
-            {
-              align: "end",
-              "aria-label": resolvedOverflowMenuAriaLabel,
-              className: cn(
-                AGG_ROOT_CLASS_NAME,
-                rootClassName,
-                "z-agg-dropdown mt-2 min-w-48 overflow-hidden rounded-agg-md border border-agg-separator bg-agg-secondary shadow-agg-popover outline-none"
-              ),
-              "data-agg-animations": enableAnimations ? "true" : "false",
-              sideOffset: 8,
-              children: overflowLayout.hiddenItems.map((item) => {
-                const isSelected = item.value === value;
-                return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
-                  DropdownMenu.Item,
-                  {
-                    disabled: item.disabled,
-                    onSelect: () => handleSelectHiddenItem(item.value),
-                    className: cn(
-                      "cursor-pointer disabled:cursor-not-allowed",
-                      "flex w-full items-center gap-2 px-4 py-2 text-left text-agg-sm leading-agg-5 outline-none",
-                      getMotionClassName(enableAnimations, "transition-colors"),
-                      "focus:bg-agg-secondary-hover data-[highlighted]:bg-agg-secondary-hover",
-                      isSelected ? "font-agg-bold text-agg-primary" : "font-agg-normal text-agg-foreground",
-                      item.disabled && "cursor-not-allowed opacity-60"
-                    ),
-                    children: [
-                      item.icon ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "inline-flex shrink-0 items-center justify-center", children: item.icon }) : null,
-                      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "truncate whitespace-nowrap [&::first-letter]:uppercase", children: item.label })
-                    ]
-                  },
-                  item.value
-                );
-              })
-            }
-          ) })
-        ] }) : null,
-        shouldUseOverflowMenu ? /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
-          "div",
-          {
-            "aria-hidden": true,
-            className: "pointer-events-none invisible fixed top-0 left-0 -z-10 h-0 overflow-hidden whitespace-nowrap",
-            children: [
-              items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
-                "span",
-                {
-                  ref: (tabElement) => handleMeasureTabRef(item.value, tabElement),
-                  className: getMeasureTabClassName({
-                    isBarVariant,
-                    size
-                  }),
-                  children: [
-                    item.icon ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "inline-flex shrink-0 items-center justify-center", children: item.icon }) : null,
-                    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { children: item.label })
-                  ]
-                },
-                `measure-${item.value}`
-              )),
-              /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
-                "span",
-                {
-                  ref: moreButtonMeasureRef,
-                  className: getMoreButtonClassName({
-                    enableAnimations,
-                    isBarVariant,
-                    size
-                  }),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Icon, { name: "dots-horizontal", size: isBarVariant ? "s" : "m", color: "currentColor" })
-                }
-              )
-            ]
-          }
-        ) : null
+        ] }) : null
       ]
     }
   );
@@ -3182,21 +2947,22 @@ var Tabs = ({
 Tabs.displayName = "Tabs";
 
 // src/primitives/typography/typography.constants.ts
-var variantClasses = {
-  title: cn("font-agg-sans text-agg-lg leading-agg-7", "font-agg-bold", "text-agg-foreground"),
-  body: cn("font-agg-sans text-agg-base leading-agg-6", "font-agg-normal", "text-agg-foreground"),
-  meta: cn(
-    "font-agg-sans text-agg-sm leading-agg-5",
-    "font-agg-normal",
-    "text-agg-muted-foreground"
-  ),
-  label: cn(
-    "font-agg-sans text-agg-sm leading-agg-5",
-    "font-agg-bold uppercase",
-    "text-agg-foreground"
-  ),
-  value: cn("font-agg-sans text-agg-xl leading-agg-7", "font-agg-normal", "text-agg-foreground"),
-  caption: cn("font-agg-sans text-agg-xs leading-agg-4", "font-agg-normal", "text-agg-foreground")
+var typographyVariantClasses = {
+  display: cn("agg-type-display"),
+  heading: cn("agg-type-heading"),
+  title: cn("agg-type-title"),
+  "title-strong": cn("agg-type-title-strong"),
+  "body-large": cn("agg-type-body-large"),
+  "body-large-strong": cn("agg-type-body-large-strong"),
+  body: cn("agg-type-body"),
+  "body-strong": cn("agg-type-body-strong"),
+  label: cn("agg-type-label"),
+  "label-strong": cn("agg-type-label-strong"),
+  "label-caps": cn("agg-type-label-caps"),
+  caption: cn("agg-type-caption"),
+  "caption-strong": cn("agg-type-caption-strong"),
+  "caption-caps": cn("agg-type-caption-caps"),
+  overline: cn("agg-type-overline")
 };
 
 // src/primitives/typography/index.tsx
@@ -3207,7 +2973,18 @@ var Typography = ({
   className,
   children
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Component, { className: cn(variantClasses[variant], "truncate", className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+    Component,
+    {
+      className: cn(
+        "group/agg-typography",
+        "text-agg-foreground",
+        typographyVariantClasses[variant],
+        className
+      ),
+      children
+    }
+  );
 };
 Typography.displayName = "Typography";
 
@@ -3215,7 +2992,7 @@ Typography.displayName = "Typography";
 var import_hooks12 = require("@agg-market/hooks");
 
 // src/primitives/venue-logo/logo-props.ts
-var DEFAULT_MONOCHROME_COLOR = "#000000";
+var DEFAULT_MONOCHROME_COLOR = "currentColor";
 var resolveLogoPrimaryColor = ({
   brandColor,
   isColor = true,
@@ -3413,14 +3190,9 @@ var venueLogoRegistry = {
 };
 var venueLogoNames = Object.keys(venueLogoRegistry);
 var sizeClasses = {
-  xxs: "h-2 w-2",
-  xs: "h-3 w-3",
-  s: "h-4 w-4",
-  ms: "h-5 w-5",
-  m: "h-6 w-6",
-  l: "h-8 w-8",
-  xl: "h-10 w-10",
-  xxl: "h-12 w-12"
+  small: "h-4 w-4",
+  medium: "h-6 w-6",
+  large: "h-8 w-8"
 };
 
 // src/primitives/venue-logo/index.tsx
@@ -3430,7 +3202,7 @@ var VenueLogo = ({
   isColor = true,
   isMonochromatic = false,
   color,
-  size = "m",
+  size = "medium",
   className,
   ariaLabel,
   title
@@ -3442,7 +3214,7 @@ var VenueLogo = ({
   return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
     Component,
     {
-      className: cn("shrink-0", sizeClass, className),
+      className: cn("group/agg-venue-logo", "shrink-0", sizeClass, className),
       isColor: resolvedIsColor,
       color,
       "aria-label": ariaLabel != null ? ariaLabel : labels.venues[venue],
@@ -3456,7 +3228,7 @@ VenueLogo.displayName = "VenueLogo";
 var import_hooks13 = require("@agg-market/hooks");
 var import_jsx_runtime62 = require("react/jsx-runtime");
 var LoadingIcon = ({
-  size = "m",
+  size = "medium",
   className,
   ariaLabel
 }) => {
@@ -3468,6 +3240,7 @@ var LoadingIcon = ({
       role: "status",
       "aria-label": ariaLabel != null ? ariaLabel : labels.common.loading,
       className: cn(
+        "group/agg-loading-icon",
         "inline-grid place-items-center text-agg-primary will-change-transform",
         className
       ),
@@ -3971,8 +3744,8 @@ var MarketDetailsUnavailableState = ({
       role: "status",
       "aria-label": ariaLabel != null ? ariaLabel : labels.marketDetails.unavailableAria,
       children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "flex flex-col gap-1 p-5", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Typography, { variant: "title", children: labels.marketDetails.unavailableTitle }),
-        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Typography, { variant: "meta", children: labels.marketDetails.unavailableDescription })
+        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Typography, { variant: "body-large-strong", children: labels.marketDetails.unavailableTitle }),
+        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Typography, { variant: "label", className: "text-agg-muted-foreground", children: labels.marketDetails.unavailableDescription })
       ] })
     }
   );
@@ -3988,11 +3761,11 @@ var OrderBookRows = ({
   const priceClassName = isAsks ? "text-agg-orderbook-ask" : "text-agg-orderbook-bid";
   const barClassName = isAsks ? "bg-agg-orderbook-ask/10" : "bg-agg-orderbook-bid/10";
   return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "flex flex-col gap-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Typography, { variant: "label", className: "text-agg-xs leading-agg-4", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Typography, { variant: "caption-caps", children: title }),
     rows.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "flex flex-col gap-2", children: [
       /* @__PURE__ */ (0, import_jsx_runtime63.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_runtime63.jsxs)("div", { className: "flex items-center gap-1 md:gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(VenueLogo, { venue: row.venue, size: "xs" }),
+          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(VenueLogo, { venue: row.venue, size: "small" }),
           /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
             "span",
             {
@@ -4026,11 +3799,15 @@ var getOutcomeButtonClassName = ({
   isPositive,
   isActive
 }) => {
+  const defaultStateClassName = isPositive ? "border-[#18c15c]/50 bg-[#18c15c]/5 text-agg-foreground hover:bg-[#18c15c]/10" : "border-[#e5455f]/50 bg-[#e5455f]/5 text-agg-foreground hover:bg-[#e5455f]/10";
+  const activeStateClassName = isPositive ? "border-transparent bg-[#18c15c] text-agg-on-primary" : "border-transparent bg-[#e5455f] text-agg-on-primary";
   return cn(
     "h-auto min-h-10 flex-1 rounded-agg-full border px-4 py-1.5 text-agg-base leading-agg-6 shadow-none md:flex-none md:min-w-[168px]",
-    getMotionClassName(enableAnimations, "transition-all duration-300"),
-    isPositive ? "border-agg-orderbook-bid/50 bg-agg-orderbook-bid/5 text-agg-foreground" : "border-agg-orderbook-ask/50 bg-agg-orderbook-ask/5 text-agg-foreground",
-    isActive && (isPositive ? "border-agg-orderbook-bid" : "border-agg-orderbook-ask")
+    getMotionClassName(enableAnimations, "transition-all duration-300 ease-in-out"),
+    isActive ? activeStateClassName : defaultStateClassName,
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-agg-primary focus-visible:ring-offset-2 focus-visible:ring-offset-agg-secondary-hover",
+    "cursor-pointer disabled:cursor-not-allowed disabled:text-agg-muted-foreground",
+    isActive ? "font-agg-bold" : "font-agg-normal"
   );
 };
 var MarketDetailsContent = ({
@@ -4237,7 +4014,7 @@ var MarketDetailsContent = ({
   }, [labels, model]);
   const handleOutcomeKeyDown = (eventToHandle) => {
     var _a;
-    if (eventToHandle.key !== "ArrowLeft" && eventToHandle.key !== "ArrowRight") {
+    if ((eventToHandle == null ? void 0 : eventToHandle.key) !== "ArrowLeft" && (eventToHandle == null ? void 0 : eventToHandle.key) !== "ArrowRight") {
       return;
     }
     if (headerOutcomeItems.length <= 1)
@@ -4249,9 +4026,17 @@ var MarketDetailsContent = ({
     const nextIndex = activeIndex < 0 ? 0 : (activeIndex + direction + headerOutcomeItems.length) % headerOutcomeItems.length;
     setSelectedOutcomeLabel((_a = headerOutcomeItems[nextIndex]) == null ? void 0 : _a.label);
   };
-  const handleToggleExpanded = () => {
-    setIsOpened((prev) => !prev);
-    onOpenChange == null ? void 0 : onOpenChange(!isOpened);
+  const handleToggleExpanded = (event2) => {
+    if (event2 && "key" in event2 && (event2 == null ? void 0 : event2.key) !== "Enter" && (event2 == null ? void 0 : event2.key) !== " ") {
+      return;
+    }
+    event2 == null ? void 0 : event2.preventDefault();
+    event2 == null ? void 0 : event2.stopPropagation();
+    setIsOpened((prev) => {
+      const next = !prev;
+      onOpenChange == null ? void 0 : onOpenChange(next);
+      return next;
+    });
   };
   const handleGraphVenueToggle = (venue) => {
     setSelectedGraphVenue((currentVenue) => {
@@ -4275,88 +4060,101 @@ var MarketDetailsContent = ({
   return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
     Card,
     {
-      className: cn(marketDetailsBaseCardClassName, classNames == null ? void 0 : classNames.root),
-      "aria-label": ariaLabel != null ? ariaLabel : model.title,
+      className: cn(
+        "w-full cursor-pointer rounded-agg-2xl text-left outline-none",
+        marketDetailsBaseCardClassName,
+        classNames == null ? void 0 : classNames.root
+      ),
+      "aria-expanded": isOpened,
+      "aria-controls": detailsContentId,
+      role: "button",
+      tabIndex: 0,
+      "aria-label": isOpened ? labels.marketDetails.toggleCloseDetailsAria(model.title) : labels.marketDetails.toggleOpenDetailsAria(model.title),
+      onClick: handleToggleExpanded,
+      onKeyDown: handleToggleExpanded,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: cn("flex flex-col gap-3 px-5 py-4", isOpened && "pb-3", classNames == null ? void 0 : classNames.header), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
-            "button",
-            {
-              type: "button",
-              className: "flex w-full cursor-pointer items-center justify-between gap-4 rounded-agg-2xl text-left outline-none",
-              "aria-expanded": isOpened,
-              "aria-controls": detailsContentId,
-              "aria-label": isOpened ? labels.marketDetails.toggleCloseDetailsAria(model.title) : labels.marketDetails.toggleOpenDetailsAria(model.title),
-              onClick: handleToggleExpanded,
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "flex min-w-0 items-center gap-3 md:gap-4", children: [
-                  model.image ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-                    "img",
-                    {
-                      src: model.image,
-                      alt: "",
-                      className: "size-12 rounded-agg-lg object-cover md:size-[60px]"
-                    }
-                  ) : null,
-                  /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "flex min-w-0 flex-col", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Typography, { as: "h3", variant: "title", className: "truncate text-agg-lg leading-agg-7", children: model.title }),
-                    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Typography, { variant: "meta", className: "truncate text-agg-sm leading-agg-5", children: model.subtitle }) })
-                  ] })
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-                  Typography,
+        /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
+          "div",
+          {
+            className: cn(
+              "flex flex-row items-center justify-between gap-3 px-5 py-4",
+              isOpened && "pb-3",
+              classNames == null ? void 0 : classNames.header
+            ),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "flex min-w-0 items-center gap-3 md:gap-4", children: [
+                model.image ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+                  "img",
                   {
-                    as: "div",
-                    variant: "value",
-                    className: "shrink-0 text-agg-2xl font-agg-bold leading-agg-8",
-                    children: formatProbabilityPercent(headlineProbability)
+                    src: model.image,
+                    alt: "",
+                    className: "size-12 rounded-agg-lg object-cover md:size-[60px]"
                   }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-            "div",
-            {
-              className: "flex gap-2",
-              role: "tablist",
-              "aria-label": labels.marketDetails.marketOutcomesAria,
-              tabIndex: 0,
-              onKeyDown: handleOutcomeKeyDown,
-              children: headerOutcomeItems.map((item) => {
-                const isPositive = item.tone === "positive";
-                return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-                  "button",
-                  {
-                    type: "button",
-                    role: "tab",
-                    "aria-selected": item.label === selectedOutcomeLabel,
-                    tabIndex: item.label === selectedOutcomeLabel ? 0 : -1,
-                    className: getOutcomeButtonClassName({
-                      enableAnimations: config.enableAnimations,
-                      isPositive,
-                      isActive: item.label === selectedOutcomeLabel
-                    }),
-                    onClick: () => {
-                      setSelectedOutcomeLabel(item.label);
-                    },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("span", { className: "inline-flex items-center gap-2", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-                        VenueLogo,
-                        {
-                          venue: isPositive ? "polymarket" : "probable",
-                          size: "xs"
-                        }
-                      ),
-                      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Typography, { className: "text-agg-base leading-agg-6", children: `${item.label} ${formatProbabilityCents(item.probability)}` })
-                    ] })
-                  },
-                  item.label
-                );
-              })
-            }
-          )
-        ] }),
+                ) : null,
+                /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "flex min-w-0 flex-col", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Typography, { as: "h3", variant: "body-large-strong", className: "truncate", children: model.title }),
+                  /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Typography, { variant: "label", className: "truncate text-agg-muted-foreground", children: model.subtitle }) })
+                ] })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Typography, { as: "div", variant: "heading", className: "shrink-0", children: formatProbabilityPercent(headlineProbability) }),
+              /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+                "div",
+                {
+                  className: "flex gap-2",
+                  role: "tablist",
+                  "aria-label": labels.marketDetails.marketOutcomesAria,
+                  tabIndex: 0,
+                  onKeyDown: (e) => handleOutcomeKeyDown(e),
+                  children: headerOutcomeItems.map((item) => {
+                    const isPositive = item.tone === "positive";
+                    const isActiveOutcome = item.label === selectedOutcomeLabel;
+                    return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+                      "button",
+                      {
+                        type: "button",
+                        role: "tab",
+                        "aria-selected": isActiveOutcome,
+                        tabIndex: isActiveOutcome ? 0 : -1,
+                        className: getOutcomeButtonClassName({
+                          enableAnimations: config.enableAnimations,
+                          isPositive,
+                          isActive: isActiveOutcome
+                        }),
+                        onClick: (e) => {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          setSelectedOutcomeLabel(item.label);
+                        },
+                        children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("span", { className: "inline-flex items-center gap-2", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+                            VenueLogo,
+                            {
+                              venue: isPositive ? "polymarket" : "probable",
+                              size: "small",
+                              color: isActiveOutcome ? "var(--agg-color-on-primary)" : void 0
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+                            Typography,
+                            {
+                              variant: isActiveOutcome ? "body-strong" : "body",
+                              className: cn(
+                                "text-agg-base leading-agg-6",
+                                isActiveOutcome ? "text-agg-on-primary" : "text-agg-foreground"
+                              ),
+                              children: `${item.label} ${formatProbabilityCents(item.probability)}`
+                            }
+                          )
+                        ] })
+                      },
+                      item.label
+                    );
+                  })
+                }
+              )
+            ]
+          }
+        ),
         /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
           "div",
           {
@@ -4408,7 +4206,7 @@ var MarketDetailsContent = ({
                           "aria-busy": true,
                           children: [
                             /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(LoadingIcon, {}),
-                            /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Typography, { variant: "meta", children: labels.marketDetails.loadingOrderbookLabel })
+                            /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Typography, { variant: "label", className: "text-agg-muted-foreground", children: labels.marketDetails.loadingOrderbookLabel })
                           ]
                         }
                       ) : /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_jsx_runtime63.Fragment, { children: [
@@ -4456,9 +4254,13 @@ var MarketDetailsContent = ({
                                         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-agg-primary focus-visible:ring-offset-2 focus-visible:ring-offset-agg-secondary-hover",
                                         isActiveVenue ? "border-agg-primary bg-agg-secondary" : "border-transparent bg-agg-secondary-hover"
                                       ),
-                                      onClick: () => handleGraphVenueToggle(item.venue),
+                                      onClick: (e) => {
+                                        e.preventDefault();
+                                        e.stopPropagation();
+                                        handleGraphVenueToggle(item.venue);
+                                      },
                                       children: [
-                                        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(VenueLogo, { venue: item.venue, size: "xs" }),
+                                        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(VenueLogo, { venue: item.venue, size: "small" }),
                                         /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "text-agg-base leading-agg-6 text-agg-foreground", children: probability })
                                       ]
                                     },
@@ -4503,7 +4305,11 @@ var MarketDetailsContent = ({
                                       isActive ? "font-agg-bold text-agg-foreground" : "font-agg-normal text-agg-muted-foreground"
                                     ),
                                     "aria-pressed": isActive,
-                                    onClick: () => setSelectedTimeRange(timeRange),
+                                    onClick: (e) => {
+                                      e.preventDefault();
+                                      e.stopPropagation();
+                                      setSelectedTimeRange(timeRange);
+                                    },
                                     children: timeRange === "ALL" ? labels.eventItemDetails.allTimeRange : timeRange
                                   },
                                   timeRange
@@ -4518,7 +4324,7 @@ var MarketDetailsContent = ({
                         {
                           className: "flex items-center justify-between rounded-agg-xl bg-agg-secondary-hover px-4 py-3",
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Typography, { variant: "meta", children: row.label }),
+                            /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Typography, { variant: "label", className: "text-agg-muted-foreground", children: row.label }),
                             /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Typography, { variant: "body", className: "text-right", children: row.value })
                           ]
                         },