@agg-market/ui 0.0.6 → 2.0.0

package/dist/home-page.js

@@ -63,14 +63,11 @@ __export(home_exports, {
 });
 module.exports = __toCommonJS(home_exports);
 var import_react5 = require("react");
-var import_hooks13 = require("@agg-market/hooks");
+var import_hooks14 = require("@agg-market/hooks");
 
 // src/events/list/index.tsx
 var import_react4 = require("react");
-var import_hooks12 = require("@agg-market/hooks");
-
-// src/constants.ts
-var AGG_ROOT_CLASS_NAME = "agg-root";
+var import_hooks13 = require("@agg-market/hooks");
 
 // src/shared/utils.ts
 var cn = (...values) => values.filter(Boolean).join(" ");
@@ -154,14 +151,10 @@ var ArrowsToDotIcon = (_a) => {
         /* @__PURE__ */ (0, import_jsx_runtime2.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_runtime2.jsx)("circle", { cx: "8", cy: "8", r: "1.5", fill: "currentColor" })
+        )
       ]
     })
   );
@@ -695,14 +688,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
@@ -1408,7 +1396,7 @@ var Icon = (_a) => {
   var _b = _a, {
     name,
     color,
-    size = "m",
+    size = "medium",
     className = "text-agg-primary",
     style
   } = _b, props = __objRest(_b, [
@@ -1421,7 +1409,14 @@ var Icon = (_a) => {
   const Component = iconRegistry[name];
   const resolvedStyle = resolveIconStyle(color, style);
   const resolvedClassName = cn(iconSizeClasses[size], className);
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Component, __spreadValues({ color, className: resolvedClassName, style: resolvedStyle }, props));
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    Component,
+    __spreadValues({
+      color,
+      className: cn("group/agg-icon", resolvedClassName),
+      style: resolvedStyle
+    }, props)
+  );
 };
 Icon.displayName = "Icon";
 
@@ -1454,19 +1449,23 @@ var import_hooks3 = require("@agg-market/hooks");
 var import_hooks2 = require("@agg-market/hooks");
 var import_jsx_runtime44 = 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_hooks2.useSdkUiConfig)();
   return /* @__PURE__ */ (0, import_jsx_runtime44.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";
@@ -1485,7 +1484,7 @@ var EventListItemSkeletonView = ({
   return /* @__PURE__ */ (0, import_jsx_runtime45.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,
@@ -1534,7 +1533,7 @@ var EventListSkeletonView = ({ className, ariaLabel }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime46.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,
@@ -1577,7 +1576,7 @@ var EventListItemDetailsSkeletonView = ({
   return /* @__PURE__ */ (0, import_jsx_runtime47.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,
@@ -1630,7 +1629,7 @@ var MarketDetailsSkeletonView = ({
   return /* @__PURE__ */ (0, import_jsx_runtime48.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,
@@ -1700,7 +1699,7 @@ MarketDetailsSkeletonView.displayName = "MarketDetailsSkeletonView";
 var import_jsx_runtime49 = 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_runtime49.jsxs)("div", { className: "flex flex-col gap-6 p-5", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: cn("flex flex-col gap-6 p-5"), children: [
     /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex flex-col gap-2", children: [
       /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex items-start justify-between gap-5", children: [
         /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
@@ -1767,7 +1766,7 @@ var PlaceOrderSkeletonView = ({
   return /* @__PURE__ */ (0, import_jsx_runtime49.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,
@@ -1801,6 +1800,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
       ),
@@ -1886,7 +1886,6 @@ Skeleton.displayName = "Skeleton";
 // src/primitives/tabs/index.tsx
 var import_react2 = require("react");
 var import_hooks9 = require("@agg-market/hooks");
-var DropdownMenu = __toESM(require("@radix-ui/react-dropdown-menu"));
 
 // src/primitives/select/index.tsx
 var import_react = require("react");
@@ -1912,7 +1911,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();
       }
     };
@@ -1923,7 +1922,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);
@@ -1932,7 +1931,7 @@ var Select = ({
   const isDisabled = disabled || !hasEnabledItems;
   const selectedItem = items.find((item) => item.value === value);
   if (!hasAnyIcon) {
-    return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("label", { className: cn("relative inline-flex w-full", className), children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("label", { className: cn("group/agg-select", "relative inline-flex w-full", className), children: [
       /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
         "select",
         {
@@ -1941,7 +1940,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"
@@ -1952,88 +1951,95 @@ var Select = ({
           children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("option", { value: item.value, disabled: item.disabled, children: item.label }, item.value))
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime52.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_runtime52.jsx)(Icon, { name: "chevron-down", size: "s", color: "currentColor" }) })
+      /* @__PURE__ */ (0, import_jsx_runtime52.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_runtime52.jsx)(Icon, { name: "chevron-down", size: "small", color: "currentColor" }) })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { ref: containerRef, className: cn("relative inline-flex w-full", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime52.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_runtime52.jsx)(
-            "img",
-            {
-              src: selectedItem.iconUrl,
-              alt: "",
-              className: "h-4 w-4 shrink-0 rounded-sm object-contain"
-            }
-          ) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "flex-1 truncate", children: (_a = selectedItem == null ? void 0 : selectedItem.label) != null ? _a : "" })
-        ]
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime52.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_runtime52.jsx)(Icon, { name: "chevron-down", size: "s", color: "currentColor" }) }),
-    isOpen ? /* @__PURE__ */ (0, import_jsx_runtime52.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_runtime52.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_runtime52.jsxs)(
+    "div",
+    {
+      ref: containerRef,
+      className: cn("group/agg-select", "relative inline-flex w-full", className),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime52.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_runtime52.jsx)(
+                "img",
+                {
+                  src: selectedItem.iconUrl,
+                  alt: "",
+                  className: "h-4 w-4 shrink-0 rounded-sm object-contain"
                 }
-              },
-              children: [
-                item.iconUrl ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
-                  "img",
-                  {
-                    src: item.iconUrl,
-                    alt: "",
-                    className: "h-4 w-4 shrink-0 rounded-sm object-contain"
-                  }
-                ) : null,
-                /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "truncate", children: item.label })
-              ]
-            },
-            item.value
-          );
-        })
-      }
-    ) : null
-  ] });
+              ) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "flex-1 truncate", children: (_a = selectedItem == null ? void 0 : selectedItem.label) != null ? _a : "" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime52.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_runtime52.jsx)(Icon, { name: "chevron-down", size: "small", color: "currentColor" }) }),
+        isOpen ? /* @__PURE__ */ (0, import_jsx_runtime52.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_runtime52.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_runtime52.jsx)(
+                      "img",
+                      {
+                        src: item.iconUrl,
+                        alt: "",
+                        className: "h-4 w-4 shrink-0 rounded-sm object-contain"
+                      }
+                    ) : null,
+                    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "truncate", children: item.label })
+                  ]
+                },
+                item.value
+              );
+            })
+          }
+        ) : null
+      ]
+    }
+  );
 };
 Select.displayName = "Select";
 
@@ -2060,86 +2066,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_runtime53 = require("react/jsx-runtime");
-var mobileTabsMediaQuery = "(max-width: 767px)";
+var mobileTabsMediaQuery = "(max-width: 512px)";
 var getTabButtonClassName = ({
   enableAnimations,
   isBarVariant,
@@ -2151,7 +2081,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"
@@ -2163,35 +2097,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,
@@ -2199,12 +2104,12 @@ var Tabs = ({
   variant = "bar",
   size = "m",
   overflowBehavior,
-  overflowMenuAriaLabel,
   ariaLabel,
-  className
+  className,
+  classNames
 }) => {
   const labels = (0, import_hooks9.useLabels)();
-  const { enableAnimations, rootClassName } = (0, import_hooks9.useSdkUiConfig)();
+  const { enableAnimations } = (0, import_hooks9.useSdkUiConfig)();
   const buttonRefs = (0, import_react2.useRef)([]);
   const dragStateRef = (0, import_react2.useRef)({
     isPointerDown: false,
@@ -2216,8 +2121,6 @@ var Tabs = ({
   });
   const suppressClickRef = (0, import_react2.useRef)(false);
   const resolvedAriaLabel = ariaLabel != null ? ariaLabel : labels.common.tabsAria;
-  const resolvedOverflowMenuAriaLabel = overflowMenuAriaLabel != null ? overflowMenuAriaLabel : labels.common.hiddenTabsAria;
-  const [isMoreMenuOpen, setIsMoreMenuOpen] = (0, import_react2.useState)(false);
   const [isMobileViewport, setIsMobileViewport] = (0, import_react2.useState)(false);
   const [isDraggingTabs, setIsDraggingTabs] = (0, import_react2.useState)(false);
   const [activeUnderlineStyle, setActiveUnderlineStyle] = (0, import_react2.useState)({
@@ -2225,39 +2128,21 @@ var Tabs = ({
     width: 0,
     opacity: 0
   });
-  const [overflowLayout, setOverflowLayout] = (0, import_react2.useState)({
-    visibleItems: items,
-    hiddenItems: []
-  });
   const [scrollAffordanceState, setScrollAffordanceState] = (0, import_react2.useState)({
     showStart: false,
     showEnd: false
   });
-  const containerRef = (0, import_react2.useRef)(null);
   const tabListRef = (0, import_react2.useRef)(null);
-  const moreButtonMeasureRef = (0, import_react2.useRef)(null);
-  const tabMeasureRefs = (0, import_react2.useRef)(/* @__PURE__ */ new Map());
   const isBarVariant = variant === "bar";
   const resolvedOverflowBehavior = (0, import_react2.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_react2.useCallback)(
-    (tabValue, tabElement) => {
-      if (!tabElement) {
-        tabMeasureRefs.current.delete(tabValue);
-        return;
-      }
-      tabMeasureRefs.current.set(tabValue, tabElement);
-    },
-    []
-  );
   (0, import_react2.useEffect)(() => {
     if (typeof window === "undefined")
       return;
@@ -2277,55 +2162,6 @@ var Tabs = ({
       mediaQueryList.removeListener(handleMediaQueryChange);
     };
   }, []);
-  const handleRecalculateOverflow = (0, import_react2.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_react2.useEffect)(() => {
-    handleRecalculateOverflow();
-  }, [handleRecalculateOverflow]);
-  (0, import_react2.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_react2.useEffect)(() => {
-    if (overflowLayout.hiddenItems.length > 0)
-      return;
-    setIsMoreMenuOpen(false);
-  }, [overflowLayout.hiddenItems.length]);
   const updateScrollAffordances = (0, import_react2.useCallback)(() => {
     if (!shouldUseOverflowScroll) {
       setScrollAffordanceState({
@@ -2343,8 +2179,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_react2.useMemo)(() => {
     return items.map((item) => ({
       value: item.value,
@@ -2369,24 +2204,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;
       }
@@ -2394,22 +2229,16 @@ var Tabs = ({
         return;
     }
   };
-  const activeHiddenItem = (0, import_react2.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)
@@ -2498,14 +2327,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_react2.useCallback)(() => {
     if (isBarVariant) {
       setActiveUnderlineStyle({
@@ -2573,18 +2398,34 @@ var Tabs = ({
   (0, import_react2.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_runtime53.jsx)("div", { className: cn("w-full", className), children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: cn("w-full", className, classNames == null ? void 0 : classNames.root), children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
       Select,
       {
         ariaLabel,
@@ -2599,10 +2440,12 @@ var Tabs = ({
   return /* @__PURE__ */ (0, import_jsx_runtime53.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_runtime53.jsxs)(
@@ -2611,7 +2454,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,
@@ -2633,7 +2476,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({
@@ -2675,7 +2522,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]"
                   ),
@@ -2691,7 +2538,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"
               )
@@ -2702,104 +2549,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_runtime53.jsxs)(DropdownMenu.Root, { open: isMoreMenuOpen, onOpenChange: setIsMoreMenuOpen, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime53.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_runtime53.jsx)(Icon, { name: "dots-horizontal", size: isBarVariant ? "s" : "m", color: "currentColor" })
-            }
-          ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(DropdownMenu.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime53.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_runtime53.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_runtime53.jsx)("span", { className: "inline-flex shrink-0 items-center justify-center", children: item.icon }) : null,
-                      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "truncate whitespace-nowrap [&::first-letter]:uppercase", children: item.label })
-                    ]
-                  },
-                  item.value
-                );
-              })
-            }
-          ) })
-        ] }) : null,
-        shouldUseOverflowMenu ? /* @__PURE__ */ (0, import_jsx_runtime53.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_runtime53.jsxs)(
-                "span",
-                {
-                  ref: (tabElement) => handleMeasureTabRef(item.value, tabElement),
-                  className: getMeasureTabClassName({
-                    isBarVariant,
-                    size
-                  }),
-                  children: [
-                    item.icon ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "inline-flex shrink-0 items-center justify-center", children: item.icon }) : null,
-                    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { children: item.label })
-                  ]
-                },
-                `measure-${item.value}`
-              )),
-              /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-                "span",
-                {
-                  ref: moreButtonMeasureRef,
-                  className: getMoreButtonClassName({
-                    enableAnimations,
-                    isBarVariant,
-                    size
-                  }),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Icon, { name: "dots-horizontal", size: isBarVariant ? "s" : "m", color: "currentColor" })
-                }
-              )
-            ]
-          }
-        ) : null
+        ] }) : null
       ]
     }
   );
@@ -2807,21 +2563,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
@@ -2832,7 +2589,18 @@ var Typography = ({
   className,
   children
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Component, { className: cn(variantClasses[variant], "truncate", className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+    Component,
+    {
+      className: cn(
+        "group/agg-typography",
+        "text-agg-foreground",
+        typographyVariantClasses[variant],
+        className
+      ),
+      children
+    }
+  );
 };
 Typography.displayName = "Typography";
 
@@ -2840,7 +2608,7 @@ Typography.displayName = "Typography";
 var import_hooks10 = 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,
@@ -3038,14 +2806,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
@@ -3055,7 +2818,7 @@ var VenueLogo = ({
   isColor = true,
   isMonochromatic = false,
   color,
-  size = "m",
+  size = "medium",
   className,
   ariaLabel,
   title
@@ -3067,7 +2830,7 @@ var VenueLogo = ({
   return /* @__PURE__ */ (0, import_jsx_runtime59.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],
@@ -3080,17 +2843,16 @@ VenueLogo.displayName = "VenueLogo";
 // src/events/item/index.tsx
 var import_dayjs = __toESM(require("dayjs"));
 var import_react3 = require("react");
+var import_hooks12 = require("@agg-market/hooks");
+
+// src/primitives/badge/index.tsx
 var import_hooks11 = require("@agg-market/hooks");
 
 // src/primitives/badge/badge.constants.ts
 var badgeSizeClasses = {
-  xxs: cn("h-4 px-1.5 gap-0.5", "text-agg-xs leading-agg-3"),
-  xs: cn("h-5 px-2 gap-1", "text-agg-xs leading-agg-4"),
-  s: cn("h-6 px-2.5 gap-1", "text-agg-sm leading-agg-5"),
-  m: cn("h-7 px-3 gap-1.5", "text-agg-sm leading-agg-5"),
-  l: cn("h-8 px-3.5 gap-1.5", "text-agg-base leading-agg-6"),
-  xl: cn("h-9 px-4 gap-2", "text-agg-lg leading-agg-7"),
-  xxl: cn("h-10 px-5 gap-2", "text-agg-xl leading-agg-7")
+  small: cn("py-1.5 px-4 gap-1.5", "agg-type-label"),
+  medium: cn("py-1.5 px-4 gap-2", "agg-type-body"),
+  large: cn("py-2.5 px-6 gap-2", "agg-type-body")
 };
 var baseBadgeClasses = cn(
   "inline-flex items-center justify-center rounded-agg-full font-agg-sans",
@@ -3099,20 +2861,41 @@ var baseBadgeClasses = cn(
 
 // src/primitives/badge/index.tsx
 var import_jsx_runtime60 = require("react/jsx-runtime");
-function Badge({ text, prefix, suffix, size = "m", classNames }) {
+function Badge({
+  text,
+  prefix,
+  suffix,
+  size = "medium",
+  classNames,
+  onClick,
+  isActive = false
+}) {
+  const { enableAnimations } = (0, import_hooks11.useSdkUiConfig)();
   const resolvedText = `${text}`;
   const resolvedAriaLabel = resolvedText.length > 0 ? resolvedText : void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
     "span",
-    {
+    __spreadProps(__spreadValues({
       "aria-label": resolvedAriaLabel,
-      className: cn(baseBadgeClasses, badgeSizeClasses[size], classNames == null ? void 0 : classNames.root),
+      className: cn(
+        "group/agg-badge",
+        baseBadgeClasses,
+        badgeSizeClasses[size],
+        onClick ? "cursor-pointer hover:bg-agg-tertiary disabled:cursor-not-allowed" : "",
+        getMotionClassName(
+          enableAnimations,
+          "transition-[border-color,background-color] duration-200 ease-in-out"
+        ),
+        isActive ? "border-agg-primary bg-agg-secondary! font-agg-bold!" : "border-transparent font-agg-normal",
+        classNames == null ? void 0 : classNames.root
+      )
+    }, onClick && { onClick }), {
       children: [
         prefix ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: classNames == null ? void 0 : classNames.prefix, children: prefix }) : null,
         /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: cn("truncate", classNames == null ? void 0 : classNames.text), children: text }),
         suffix ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: classNames == null ? void 0 : classNames.suffix, children: suffix }) : null
       ]
-    }
+    })
   );
 }
 Badge.displayName = "Badge";
@@ -3276,7 +3059,7 @@ var EventListItemLoadingState = ({
   classNames,
   ariaLabel
 }) => {
-  const labels = (0, import_hooks11.useLabels)();
+  const labels = (0, import_hooks12.useLabels)();
   return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
     Skeleton,
     {
@@ -3290,7 +3073,7 @@ var EventListItemUnavailableState = ({
   classNames,
   ariaLabel
 }) => {
-  const labels = (0, import_hooks11.useLabels)();
+  const labels = (0, import_hooks12.useLabels)();
   return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
     Card,
     {
@@ -3298,7 +3081,7 @@ var EventListItemUnavailableState = ({
       role: "status",
       "aria-label": ariaLabel != null ? ariaLabel : labels.eventItem.unavailableAria,
       children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: cn("flex flex-col gap-1", classNames == null ? void 0 : classNames.header), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Typography, { variant: "title", className: cn("truncate", classNames == null ? void 0 : classNames.title), children: labels.eventItem.unavailableTitle }),
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Typography, { variant: "body-large-strong", className: cn("truncate", classNames == null ? void 0 : classNames.title), children: labels.eventItem.unavailableTitle }),
         /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Typography, { variant: "body", className: "text-agg-muted-foreground", children: labels.eventItem.unavailableDescription })
       ] })
     }
@@ -3317,8 +3100,8 @@ var EventListItemContent = ({
   ariaLabel
 }) => {
   var _a;
-  const config = (0, import_hooks11.useSdkUiConfig)();
-  const labels = (0, import_hooks11.useLabels)();
+  const config = (0, import_hooks12.useSdkUiConfig)();
+  const labels = (0, import_hooks12.useLabels)();
   const allVenueMarkets = (0, import_react3.useMemo)(() => {
     return event.markets.flatMap((market) => market.venueMarkets);
   }, [event.markets]);
@@ -3342,8 +3125,8 @@ var EventListItemContent = ({
   const handleKeyDown = (eventToHandle) => {
     if (!onClick)
       return;
-    if (eventToHandle.key === "Enter" || eventToHandle.key === " ") {
-      eventToHandle.preventDefault();
+    if ((eventToHandle == null ? void 0 : eventToHandle.key) === "Enter" || (eventToHandle == null ? void 0 : eventToHandle.key) === " ") {
+      eventToHandle == null ? void 0 : eventToHandle.preventDefault();
       onClick();
     }
   };
@@ -3352,9 +3135,17 @@ var EventListItemContent = ({
       return null;
     if (Math.abs(value) < config.arbitrageThreshold)
       return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: cn("flex items-baseline gap-1", "text-agg-success"), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Typography, { variant: "label", className: "text-agg-success", children: config.formatPercent(value) }),
-      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Icon, { name: "triangle-up", size: "xxs", title: labels.eventItem.arbitrage })
+    return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: cn("flex items-center gap-1", "text-agg-success"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Typography, { variant: "label-strong", className: "text-agg-success", children: config.formatPercent(value) }),
+      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+        Icon,
+        {
+          name: "triangle-up",
+          size: "small",
+          title: labels.eventItem.arbitrage,
+          className: "size-2!"
+        }
+      )
     ] });
   };
   return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
@@ -3379,9 +3170,10 @@ var EventListItemContent = ({
           /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
             Typography,
             {
-              variant: "title",
+              variant: "body-strong",
               className: cn(
-                "min-w-0 text-agg-base font-agg-bold leading-agg-6 whitespace-normal [display:-webkit-box] [-webkit-box-orient:vertical] [-webkit-line-clamp:2] md:block md:truncate md:whitespace-nowrap",
+                "min-w-0 text-agg-base font-agg-bold leading-agg-6 ",
+                "truncate text-wrap wrap-break-word line-clamp-2",
                 classNames == null ? void 0 : classNames.title
               ),
               children: resolvedTitle
@@ -3398,7 +3190,7 @@ var EventListItemContent = ({
             "div",
             {
               className: cn(
-                "grid w-full grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-3",
+                "flex flex-row gap-3 w-full items-center justify-between",
                 classNames == null ? void 0 : classNames.outcomeRow
               ),
               children: [
@@ -3410,21 +3202,23 @@ var EventListItemContent = ({
                     children: formattedTitle
                   }
                 ),
-                renderArbitrage(arbitragePercent),
-                showBadge ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
-                  Badge,
-                  {
-                    text: config.formatPercent(probability),
-                    prefix: showVenueLogo ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(VenueLogo, { venue: visibleOutcome.venue, size: "s" }) : void 0,
-                    size: "l",
-                    classNames: {
-                      root: cn(
-                        "h-9 min-w-[101px] justify-center px-4 text-agg-base leading-agg-6",
-                        classNames == null ? void 0 : classNames.badge
-                      )
+                /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "flex flex-row gap-3 items-center justify-end", children: [
+                  renderArbitrage(arbitragePercent),
+                  showBadge ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+                    Badge,
+                    {
+                      text: config.formatPercent(probability),
+                      prefix: showVenueLogo ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(VenueLogo, { venue: visibleOutcome.venue, size: "small" }) : void 0,
+                      size: "large",
+                      classNames: {
+                        root: cn(
+                          "h-9 min-w-[101px] justify-center px-4 text-agg-base leading-agg-6",
+                          classNames == null ? void 0 : classNames.badge
+                        )
+                      }
                     }
-                  }
-                ) : null
+                  ) : null
+                ] })
               ]
             },
             `${visibleOutcome.market.id}-${visibleOutcome.outcome.id}`
@@ -3439,7 +3233,7 @@ var EventListItemContent = ({
               classNames == null ? void 0 : classNames.footer
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: cn("flex items-center gap-2", "text-agg-sm leading-agg-5"), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: cn("flex items-center gap-1", "text-agg-sm leading-agg-5"), children: [
                 /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "truncate text-agg-muted-foreground", children: formatCountLabel(
                   marketCount,
                   labels.eventItem.marketSingular,
@@ -3447,16 +3241,33 @@ var EventListItemContent = ({
                 ) }),
                 /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "text-agg-muted-foreground", children: "\xD7" }),
                 singleVenue ? /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("span", { className: "flex items-center gap-1 truncate text-agg-muted-foreground", children: [
-                  showVenueLogo ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(VenueLogo, { venue: singleVenue, size: "xs" }) : null,
+                  showVenueLogo ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+                    VenueLogo,
+                    {
+                      venue: singleVenue,
+                      size: "small",
+                      isMonochromatic: true,
+                      className: "text-agg-muted-foreground!"
+                    }
+                  ) : null,
                   /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { children: venueLabel })
                 ] }) : /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "truncate text-agg-muted-foreground", children: formatCountLabel(
                   venueCount,
                   labels.eventItem.venueSingular,
                   labels.eventItem.venuePlural
                 ) }),
-                showVenueLogo && !singleVenue && visibleVenueLogos.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "flex items-center gap-1 overflow-hidden", children: visibleVenueLogos.map((venue) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(VenueLogo, { venue, size: "xs" }, venue)) }) : null
+                showVenueLogo && !singleVenue && visibleVenueLogos.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "flex items-center gap-1 overflow-hidden", children: visibleVenueLogos.map((venue) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+                  VenueLogo,
+                  {
+                    venue,
+                    size: "small",
+                    isMonochromatic: true,
+                    className: "text-agg-muted-foreground!"
+                  },
+                  venue
+                )) }) : null
               ] }),
-              volumeLabel ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Typography, { variant: "meta", className: "text-agg-sm", children: volumeLabel }) : null
+              volumeLabel ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Typography, { variant: "label", className: "text-agg-sm text-agg-muted-foreground", children: volumeLabel }) : null
             ]
           }
         )
@@ -3474,7 +3285,7 @@ var EventListItemByEventId = (_a) => {
     event: fetchedEvent,
     isError,
     isLoading
-  } = (0, import_hooks11.useEvent)(eventId, {
+  } = (0, import_hooks12.useEvent)(eventId, {
     enabled: !!eventId
   });
   const resolvedEvent = (0, import_react3.useMemo)(() => {
@@ -3570,7 +3381,7 @@ var resolveTabVenus = (tab) => {
 var import_jsx_runtime62 = require("react/jsx-runtime");
 var renderTabIcon = (tab, isActive) => {
   if (tab.venueLogo) {
-    return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(VenueLogo, { venue: tab.venueLogo, size: "xs" });
+    return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(VenueLogo, { venue: tab.venueLogo, size: "small" });
   }
   if (!tab.iconName)
     return null;
@@ -3578,11 +3389,37 @@ var renderTabIcon = (tab, isActive) => {
     Icon,
     {
       name: tab.iconName,
-      size: "s",
+      size: "small",
       color: isActive ? "var(--agg-color-primary)" : "var(--agg-color-foreground)"
     }
   );
 };
+var TAB_MIN_WIDTH = 80;
+var TAB_HORIZONTAL_PADDING = 32;
+var TAB_ICON_AND_GAP_WIDTH = 24;
+var TAB_OUTER_BORDER_WIDTH = 2;
+var TAB_INNER_BORDER_WIDTH = 1;
+var measureTabLabelWidth = (label) => {
+  if (typeof document === "undefined")
+    return label.length * 9;
+  const canvas = document.createElement("canvas");
+  const context = canvas.getContext("2d");
+  if (!context)
+    return label.length * 9;
+  context.font = "700 16px Inter";
+  return context.measureText(label).width;
+};
+var estimateTabsWidth = (items) => {
+  if (items.length === 0)
+    return 0;
+  const tabsWidth = items.reduce((sum, item) => {
+    const textWidth = Math.ceil(measureTabLabelWidth(item.label));
+    const iconWidth = item.icon ? TAB_ICON_AND_GAP_WIDTH : 0;
+    const buttonWidth = Math.max(TAB_MIN_WIDTH, textWidth + iconWidth + TAB_HORIZONTAL_PADDING);
+    return sum + buttonWidth;
+  }, 0);
+  return tabsWidth + TAB_OUTER_BORDER_WIDTH + (items.length - 1) * TAB_INNER_BORDER_WIDTH;
+};
 var EventList = ({
   title,
   maxItemsPerRow = 3,
@@ -3593,13 +3430,14 @@ var EventList = ({
   categoryIds
 }) => {
   var _a, _b;
-  const labels = (0, import_hooks12.useLabels)();
+  const labels = (0, import_hooks13.useLabels)();
   const defaultEventListTabs = (0, import_react4.useMemo)(() => {
     return getDefaultEventListTabs(labels);
   }, [labels]);
   const [activeTabValue, setActiveTabValue] = (0, import_react4.useState)(
     (_b = (_a = defaultEventListTabs[0]) == null ? void 0 : _a.value) != null ? _b : "matched"
   );
+  const [shouldUseSelectOverflow, setShouldUseSelectOverflow] = (0, import_react4.useState)(false);
   const activeTab = (0, import_react4.useMemo)(() => {
     return defaultEventListTabs.find((tab) => tab.value === activeTabValue);
   }, [activeTabValue]);
@@ -3613,7 +3451,7 @@ var EventList = ({
   }, [maxVisibleItems]);
   const requestLimit = resolvedMaxVisibleItems != null ? resolvedMaxVisibleItems : limit;
   const shouldPaginate = resolvedMaxVisibleItems == null;
-  const { events, isLoading, isError, fetchNextPage, hasNextPage, isFetchingNextPage } = (0, import_hooks12.useEvents)({
+  const { events, isLoading, isError, fetchNextPage, hasNextPage, isFetchingNextPage } = (0, import_hooks13.useEvents)({
     venues,
     search,
     categoryIds,
@@ -3639,6 +3477,46 @@ var EventList = ({
       };
     });
   }, [activeTabValue]);
+  const headerRef = (0, import_react4.useRef)(null);
+  const titleRef = (0, import_react4.useRef)(null);
+  const updateTabsOverflowBehavior = (0, import_react4.useCallback)(() => {
+    if (typeof window === "undefined")
+      return;
+    const headerElement = headerRef.current;
+    const titleElement = titleRef.current;
+    if (!headerElement || !titleElement)
+      return;
+    const isDesktop = window.matchMedia("(min-width: 768px)").matches;
+    if (!isDesktop) {
+      setShouldUseSelectOverflow(false);
+      return;
+    }
+    const headerStyles = window.getComputedStyle(headerElement);
+    const rawGap = headerStyles.columnGap || headerStyles.gap || "0";
+    const horizontalGap = Number.parseFloat(rawGap) || 0;
+    const availableTabsWidth = headerElement.clientWidth - titleElement.getBoundingClientRect().width - horizontalGap;
+    const estimatedTabsWidth = estimateTabsWidth(tabsItems);
+    setShouldUseSelectOverflow(availableTabsWidth > 0 && estimatedTabsWidth > availableTabsWidth);
+  }, [tabsItems]);
+  (0, import_react4.useEffect)(() => {
+    updateTabsOverflowBehavior();
+  }, [updateTabsOverflowBehavior]);
+  (0, import_react4.useEffect)(() => {
+    if (typeof ResizeObserver === "undefined")
+      return;
+    const headerElement = headerRef.current;
+    const titleElement = titleRef.current;
+    if (!headerElement || !titleElement)
+      return;
+    const resizeObserver = new ResizeObserver(() => {
+      updateTabsOverflowBehavior();
+    });
+    resizeObserver.observe(headerElement);
+    resizeObserver.observe(titleElement);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [updateTabsOverflowBehavior]);
   const resolvedMaxItemsPerRow = Number.isFinite(maxItemsPerRow) ? Math.max(1, Math.floor(maxItemsPerRow)) : 1;
   const loadingPlaceholderCount = isFetchingNextPage ? Math.min(resolvedMaxItemsPerRow, resolvedMaxVisibleItems != null ? resolvedMaxVisibleItems : Infinity) : 0;
   const shouldRenderLoadingState = isLoading && tileEvents.length === 0;
@@ -3680,19 +3558,25 @@ var EventList = ({
     return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Skeleton, { view: "event-list", ariaLabel: labels.eventList.loading(title) });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("section", { className: "flex w-full flex-col gap-5", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("header", { className: "flex flex-col md:flex-row w-full flex-nowrap items-start md:items-center justify-between gap-2 md:gap-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Typography, { as: "h2", variant: "value", className: "truncate [&::first-letter]:uppercase", children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
-        Tabs,
-        {
-          ariaLabel: labels.eventList.tabsAria(title),
-          className: "max-w-full",
-          items: tabsItems,
-          value: activeTabValue,
-          onChange: setActiveTabValue
-        }
-      )
-    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
+      "header",
+      {
+        ref: headerRef,
+        className: "flex flex-col sm:flex-row w-full flex-nowrap items-start sm:items-center justify-between gap-2 sm:gap-4",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { ref: titleRef, className: "min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Typography, { as: "h2", variant: "title", className: "truncate [&::first-letter]:uppercase", children: title }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+            Tabs,
+            {
+              ariaLabel: labels.eventList.tabsAria(title),
+              items: tabsItems,
+              value: activeTabValue,
+              onChange: setActiveTabValue
+            }
+          )
+        ]
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: gridClassName, style: gridStyle, children: [
       tileEvents.map((event) => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
         EventListItem,
@@ -3873,11 +3757,11 @@ var HomePage = ({
   categoriesLimit = DEFAULT_CATEGORIES_LIMIT,
   allCategoryTabLabel = DEFAULT_ALL_CATEGORY_TAB_LABEL
 }) => {
-  const labels = (0, import_hooks13.useLabels)();
+  const labels = (0, import_hooks14.useLabels)();
   const hasCustomTabs = !!tabs && tabs.length > 0;
   const shouldUseCategoriesTabs = !hasCustomTabs && useCategoriesTabs;
   const resolvedAllCategoryTabLabel = allCategoryTabLabel === DEFAULT_ALL_CATEGORY_TAB_LABEL ? labels.home.trending : allCategoryTabLabel;
-  const { categories } = (0, import_hooks13.useCategories)({
+  const { categories } = (0, import_hooks14.useCategories)({
     limit: categoriesLimit,
     enabled: shouldUseCategoriesTabs
   });
@@ -3913,7 +3797,7 @@ var HomePage = ({
           Icon,
           {
             name: tab.iconName,
-            size: "m",
+            size: "medium",
             color: isActive ? "var(--agg-color-primary)" : "var(--agg-color-foreground)"
           }
         ) : void 0,