@agg-market/ui 1.0.0 → 3.0.0

package/dist/index.js

@@ -191,6 +191,7 @@ __export(src_exports, {
   skeletonViews: () => skeletonViews,
   toDate: () => toDate,
   tradingVenueSchema: () => tradingVenueSchema,
+  typographyVariants: () => typographyVariants,
   venueLogoNames: () => venueLogoNames
 });
 module.exports = __toCommonJS(src_exports);
@@ -265,43 +266,26 @@ var formatAmountDisplay = (value) => {
 
 // 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/button/button.constants.ts
 var sizeClasses = {
-  xxs: cn("h-6 px-2.5 gap-1", "text-agg-xs leading-agg-4"),
-  xs: cn("h-7 px-3 gap-1", "text-agg-xs leading-agg-4"),
-  s: cn("h-8 px-4 gap-1.5", "text-agg-sm leading-agg-5"),
-  m: cn("h-9 px-5 gap-1.5", "text-agg-sm leading-agg-5"),
-  l: cn("h-10 px-6 gap-2", "text-agg-base leading-agg-6"),
-  xl: cn("h-11 px-7 gap-2", "text-agg-base leading-agg-6"),
-  xxl: cn("h-12 px-8 gap-2", "text-agg-base leading-agg-6")
+  small: cn("h-8 px-4 gap-1.5", "text-agg-sm leading-agg-5"),
+  medium: cn("h-9 px-5 gap-1.5", "text-agg-sm leading-agg-5"),
+  large: cn("h-10 px-6 gap-2", "text-agg-base leading-agg-6")
 };
 var iconSizeClasses2 = {
-  xxs: iconSizeClasses.xs,
-  xs: iconSizeClasses.xs,
-  s: iconSizeClasses.s,
-  m: iconSizeClasses.s,
-  l: iconSizeClasses.s,
-  xl: iconSizeClasses.s,
-  xxl: iconSizeClasses.s
+  small: iconSizeClasses.small,
+  medium: iconSizeClasses.small,
+  large: iconSizeClasses.small
 };
 var iconSlotClasses = {
-  xxs: "[&_svg]:h-3 [&_svg]:w-3",
-  xs: "[&_svg]:h-3 [&_svg]:w-3",
-  s: "[&_svg]:h-4 [&_svg]:w-4",
-  m: "[&_svg]:h-4 [&_svg]:w-4",
-  l: "[&_svg]:h-4 [&_svg]:w-4",
-  xl: "[&_svg]:h-4 [&_svg]:w-4",
-  xxl: "[&_svg]:h-4 [&_svg]:w-4"
+  small: "[&_svg]:h-4 [&_svg]:w-4",
+  medium: "[&_svg]:h-4 [&_svg]:w-4",
+  large: "[&_svg]:h-4 [&_svg]:w-4"
 };
 var variantClasses = {
   primary: cn(
@@ -317,10 +301,11 @@ var variantClasses = {
     "focus-visible:ring-agg-separator"
   ),
   tertiary: cn(
-    "bg-transparent text-agg-foreground",
-    "hover:bg-agg-secondary-hover",
+    "bg-transparent text-agg-primary",
+    "hover:text-agg-primary-hover",
     "disabled:bg-transparent disabled:text-agg-muted-foreground",
-    "focus-visible:ring-agg-separator"
+    "focus-visible:ring-agg-separator",
+    "px-0! py-0! h-fit!"
   )
 };
 var baseButtonClasses = cn(
@@ -336,7 +321,7 @@ var Button = (_a) => {
   var _b = _a, {
     children,
     variant = "primary",
-    size = "m",
+    size = "medium",
     isLoading = false,
     disabled,
     prefix,
@@ -363,8 +348,9 @@ var Button = (_a) => {
     __spreadProps(__spreadValues({
       type,
       className: cn(
+        "group/agg-button",
         baseButtonClasses,
-        getMotionClassName(enableAnimations, "transition-colors"),
+        getMotionClassName(enableAnimations, "transition-colors duration-200 ease-in-out"),
         sizeClasses[size],
         iconSlotClasses[size],
         variantClasses[variant],
@@ -423,19 +409,23 @@ var import_hooks4 = require("@agg-market/hooks");
 var import_hooks3 = require("@agg-market/hooks");
 var import_jsx_runtime3 = 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_hooks3.useSdkUiConfig)();
   return /* @__PURE__ */ (0, import_jsx_runtime3.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";
@@ -454,7 +444,7 @@ var EventListItemSkeletonView = ({
   return /* @__PURE__ */ (0, import_jsx_runtime4.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,
@@ -503,7 +493,7 @@ var EventListSkeletonView = ({ className, ariaLabel }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime5.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,
@@ -561,7 +551,7 @@ var EventListItemDetailsSkeletonView = ({
   return /* @__PURE__ */ (0, import_jsx_runtime6.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,
@@ -622,7 +612,7 @@ var MarketDetailsSkeletonView = ({
   return /* @__PURE__ */ (0, import_jsx_runtime7.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,
@@ -692,7 +682,7 @@ MarketDetailsSkeletonView.displayName = "MarketDetailsSkeletonView";
 var import_jsx_runtime8 = 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_runtime8.jsxs)("div", { className: "flex flex-col gap-6 p-5", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: cn("flex flex-col gap-6 p-5"), children: [
     /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-col gap-2", children: [
       /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-start justify-between gap-5", children: [
         /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
@@ -759,7 +749,7 @@ var PlaceOrderSkeletonView = ({
   return /* @__PURE__ */ (0, import_jsx_runtime8.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,
@@ -793,6 +783,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
       ),
@@ -951,7 +942,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_runtime11.jsxs)(
@@ -971,7 +965,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: {
@@ -995,15 +989,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) => {
@@ -1090,14 +1088,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" })
+        )
       ]
     })
   );
@@ -2332,7 +2326,7 @@ var Icon = (_a) => {
   var _b = _a, {
     name,
     color,
-    size = "m",
+    size = "medium",
     className = "text-agg-primary",
     style
   } = _b, props = __objRest(_b, [
@@ -2345,7 +2339,14 @@ 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";
 
@@ -2353,7 +2354,7 @@ Icon.displayName = "Icon";
 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,
@@ -2557,14 +2558,9 @@ var venueLogoLabels = {
 };
 var venueLogoNames = Object.keys(venueLogoRegistry);
 var sizeClasses2 = {
-  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
@@ -2574,7 +2570,7 @@ var VenueLogo = ({
   isColor = true,
   isMonochromatic = false,
   color,
-  size = "m",
+  size = "medium",
   className,
   ariaLabel,
   title
@@ -2586,7 +2582,7 @@ var VenueLogo = ({
   return /* @__PURE__ */ (0, import_jsx_runtime58.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],
@@ -2600,7 +2596,7 @@ VenueLogo.displayName = "VenueLogo";
 var import_hooks11 = require("@agg-market/hooks");
 var import_jsx_runtime59 = require("react/jsx-runtime");
 var LoadingIcon = ({
-  size = "m",
+  size = "medium",
   className,
   ariaLabel
 }) => {
@@ -2612,6 +2608,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
       ),
@@ -2879,7 +2876,7 @@ var ConnectButton = ({
       Button,
       __spreadProps(__spreadValues({
         variant: "primary",
-        size: "l",
+        size: "large",
         className: classNames == null ? void 0 : classNames.connectButton,
         onClick: handleConnectClick,
         disabled: isConnectDisabled,
@@ -2894,7 +2891,7 @@ var ConnectButton = ({
       Button,
       __spreadProps(__spreadValues({
         variant: "primary",
-        size: "l",
+        size: "large",
         className: classNames == null ? void 0 : classNames.signInButton,
         onClick: handleSignInClick,
         disabled: disabled || !hasWalletAddress,
@@ -2911,7 +2908,7 @@ var ConnectButton = ({
         Button,
         {
           variant: "primary",
-          size: "xxs",
+          size: "small",
           className: cn("h-6 px-3 text-agg-xs leading-agg-4", classNames == null ? void 0 : classNames.depositButton),
           onClick: handleDepositClick,
           disabled,
@@ -2919,13 +2916,7 @@ var ConnectButton = ({
           children: labels.auth.deposit
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
-        "p",
-        {
-          className: cn("text-agg-sm leading-none text-agg-foreground", classNames == null ? void 0 : classNames.balanceText),
-          children: isBalanceLoading ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(LoadingIcon, { size: "s" }) : formatUsd(totalBalance)
-        }
-      )
+      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("p", { className: cn("agg-type-label text-agg-foreground", classNames == null ? void 0 : classNames.balanceText), children: isBalanceLoading ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(LoadingIcon, { size: "small" }) : formatUsd(totalBalance) })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(DropdownMenu.Root, { open: isProfileMenuOpen, onOpenChange: handleProfileMenuOpenChange, children: [
       /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
@@ -2945,7 +2936,7 @@ var ConnectButton = ({
               "span",
               {
                 className: cn(
-                  "text-agg-base font-agg-bold leading-none text-agg-foreground",
+                  "agg-type-body-strong text-agg-foreground",
                   classNames == null ? void 0 : classNames.profileTriggerLabel
                 ),
                 children: resolvedProfileLabel
@@ -2955,7 +2946,7 @@ var ConnectButton = ({
               Icon,
               {
                 name: isProfileMenuOpen ? "chevron-up" : "chevron-down",
-                size: "s",
+                size: "small",
                 className: "h-3.5 w-3.5 text-agg-foreground",
                 "aria-hidden": "true"
               }
@@ -3013,7 +3004,7 @@ var ConnectButton = ({
                   Button,
                   {
                     variant: "tertiary",
-                    size: "xxs",
+                    size: "small",
                     className: "h-6 px-3 text-agg-xs leading-agg-4",
                     onClick: handleViewAllBalancesClick,
                     children: labels.auth.viewAll
@@ -3022,7 +3013,7 @@ var ConnectButton = ({
               ] }) }),
               !isBalanceLoading ? resolvedBalanceRows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "flex w-full items-center justify-between", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "flex items-center gap-1.5", children: [
-                  row.venue ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(VenueLogo, { venue: row.venue, size: "s" }) : null,
+                  row.venue ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(VenueLogo, { venue: row.venue, size: "small" }) : null,
                   /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("p", { className: "text-agg-sm font-agg-normal leading-agg-5 text-agg-foreground", children: row.label })
                 ] }),
                 /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("p", { className: "text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground", children: row.amountLabel })
@@ -3042,7 +3033,7 @@ var ConnectButton = ({
                   onSelect: handleProfileItemClick,
                   disabled,
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Icon, { name: "profile", size: "s", className: "text-agg-foreground" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Icon, { name: "profile", size: "small", className: "text-agg-foreground" }),
                     /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { children: labels.auth.myProfile })
                   ]
                 }
@@ -3054,7 +3045,7 @@ var ConnectButton = ({
                   onSelect: handleDepositClick,
                   disabled,
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Icon, { name: "download", size: "s", className: "text-agg-foreground" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Icon, { name: "download", size: "small", className: "text-agg-foreground" }),
                     /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { children: labels.auth.deposit })
                   ]
                 }
@@ -3066,7 +3057,7 @@ var ConnectButton = ({
                   onSelect: handleWithdrawClick,
                   disabled,
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Icon, { name: "upload", size: "s", className: "text-agg-foreground" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Icon, { name: "upload", size: "small", className: "text-agg-foreground" }),
                     /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { children: labels.auth.withdraw })
                   ]
                 }
@@ -3078,7 +3069,7 @@ var ConnectButton = ({
                   onSelect: handleDisconnectClick,
                   disabled,
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Icon, { name: "disconnect", size: "s", className: "text-agg-foreground" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Icon, { name: "disconnect", size: "small", className: "text-agg-foreground" }),
                     /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { children: labels.auth.disconnect })
                   ]
                 }
@@ -3096,21 +3087,39 @@ ConnectButton.displayName = "ConnectButton";
 var import_hooks13 = require("@agg-market/hooks");
 
 // src/primitives/typography/typography.constants.ts
-var variantClasses2 = {
-  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 typographyVariants = [
+  "display",
+  "heading",
+  "title",
+  "title-strong",
+  "body-large",
+  "body-large-strong",
+  "body",
+  "body-strong",
+  "label",
+  "label-strong",
+  "label-caps",
+  "caption",
+  "caption-strong",
+  "caption-caps",
+  "overline"
+];
+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
@@ -3121,7 +3130,18 @@ var Typography = ({
   className,
   children
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Component, { className: cn(variantClasses2[variant], "truncate", className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+    Component,
+    {
+      className: cn(
+        "group/agg-typography",
+        "text-agg-foreground",
+        typographyVariantClasses[variant],
+        className
+      ),
+      children
+    }
+  );
 };
 Typography.displayName = "Typography";
 
@@ -3305,7 +3325,7 @@ var LineChart = ({
     seriesSwitchAriaLabel: labels.common.lineChartSeriesSwitchAria,
     formatSeriesOptionAriaLabel: labels.common.lineChartSeriesOptionAria
   }) : null : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: cn("w-full", classNames == null ? void 0 : classNames.root), style: { width }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: cn("group/agg-chart", "w-full", classNames == null ? void 0 : classNames.root), style: { width }, children: [
     !isLoading && seriesControls ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: cn("mb-3", classNames == null ? void 0 : classNames.controls), children: seriesControls }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
       "div",
@@ -3382,16 +3402,15 @@ var NumberValue = ({
 };
 NumberValue.displayName = "NumberValue";
 
+// src/primitives/badge/index.tsx
+var import_hooks16 = require("@agg-market/hooks");
+
 // src/primitives/badge/badge.constants.ts
-var badgeSizes = ["xxs", "xs", "s", "m", "l", "xl", "xxl"];
+var badgeSizes = ["small", "medium", "large"];
 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",
@@ -3400,27 +3419,48 @@ var baseBadgeClasses = cn(
 
 // src/primitives/badge/index.tsx
 var import_jsx_runtime65 = 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_hooks16.useSdkUiConfig)();
   const resolvedText = `${text}`;
   const resolvedAriaLabel = resolvedText.length > 0 ? resolvedText : void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime65.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_runtime65.jsx)("span", { className: classNames == null ? void 0 : classNames.prefix, children: prefix }) : null,
         /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: cn("truncate", classNames == null ? void 0 : classNames.text), children: text }),
         suffix ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: classNames == null ? void 0 : classNames.suffix, children: suffix }) : null
       ]
-    }
+    })
   );
 }
 Badge.displayName = "Badge";
 
 // src/primitives/select/index.tsx
 var import_react5 = require("react");
-var import_hooks16 = require("@agg-market/hooks");
+var import_hooks17 = require("@agg-market/hooks");
 var import_jsx_runtime66 = require("react/jsx-runtime");
 var Select = ({
   items,
@@ -3431,8 +3471,8 @@ var Select = ({
   disabled = false
 }) => {
   var _a;
-  const labels = (0, import_hooks16.useLabels)();
-  const { enableAnimations } = (0, import_hooks16.useSdkUiConfig)();
+  const labels = (0, import_hooks17.useLabels)();
+  const { enableAnimations } = (0, import_hooks17.useSdkUiConfig)();
   const hasEnabledItems = items.some((item) => !item.disabled);
   const hasAnyIcon = items.some((item) => item.iconUrl);
   const [isOpen, setIsOpen] = (0, import_react5.useState)(false);
@@ -3442,7 +3482,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();
       }
     };
@@ -3453,7 +3493,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);
@@ -3462,7 +3502,7 @@ var Select = ({
   const isDisabled = disabled || !hasEnabledItems;
   const selectedItem = items.find((item) => item.value === value);
   if (!hasAnyIcon) {
-    return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("label", { className: cn("relative inline-flex w-full", className), children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("label", { className: cn("group/agg-select", "relative inline-flex w-full", className), children: [
       /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
         "select",
         {
@@ -3471,7 +3511,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"
@@ -3482,94 +3522,101 @@ var Select = ({
           children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("option", { value: item.value, disabled: item.disabled, children: item.label }, item.value))
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime66.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_runtime66.jsx)(Icon, { name: "chevron-down", size: "s", color: "currentColor" }) })
+      /* @__PURE__ */ (0, import_jsx_runtime66.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_runtime66.jsx)(Icon, { name: "chevron-down", size: "small", color: "currentColor" }) })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { ref: containerRef, className: cn("relative inline-flex w-full", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime66.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_runtime66.jsx)(
-            "img",
-            {
-              src: selectedItem.iconUrl,
-              alt: "",
-              className: "h-4 w-4 shrink-0 rounded-sm object-contain"
-            }
-          ) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "flex-1 truncate", children: (_a = selectedItem == null ? void 0 : selectedItem.label) != null ? _a : "" })
-        ]
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime66.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_runtime66.jsx)(Icon, { name: "chevron-down", size: "s", color: "currentColor" }) }),
-    isOpen ? /* @__PURE__ */ (0, import_jsx_runtime66.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_runtime66.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_runtime66.jsxs)(
+    "div",
+    {
+      ref: containerRef,
+      className: cn("group/agg-select", "relative inline-flex w-full", className),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime66.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_runtime66.jsx)(
+                "img",
+                {
+                  src: selectedItem.iconUrl,
+                  alt: "",
+                  className: "h-4 w-4 shrink-0 rounded-sm object-contain"
                 }
-              },
-              children: [
-                item.iconUrl ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
-                  "img",
-                  {
-                    src: item.iconUrl,
-                    alt: "",
-                    className: "h-4 w-4 shrink-0 rounded-sm object-contain"
-                  }
-                ) : null,
-                /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "truncate", children: item.label })
-              ]
-            },
-            item.value
-          );
-        })
-      }
-    ) : null
-  ] });
+              ) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "flex-1 truncate", children: (_a = selectedItem == null ? void 0 : selectedItem.label) != null ? _a : "" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime66.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_runtime66.jsx)(Icon, { name: "chevron-down", size: "small", color: "currentColor" }) }),
+        isOpen ? /* @__PURE__ */ (0, import_jsx_runtime66.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_runtime66.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_runtime66.jsx)(
+                      "img",
+                      {
+                        src: item.iconUrl,
+                        alt: "",
+                        className: "h-4 w-4 shrink-0 rounded-sm object-contain"
+                      }
+                    ) : null,
+                    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "truncate", children: item.label })
+                  ]
+                },
+                item.value
+              );
+            })
+          }
+        ) : null
+      ]
+    }
+  );
 };
 Select.displayName = "Select";
 
 // src/primitives/search/index.tsx
 var import_react6 = require("react");
-var import_hooks17 = require("@agg-market/hooks");
+var import_hooks18 = require("@agg-market/hooks");
 
 // src/primitives/search/search-empty-icon.tsx
 var import_jsx_runtime67 = require("react/jsx-runtime");
@@ -3644,6 +3691,7 @@ var SearchResultRow = ({
     {
       type: "button",
       className: cn(
+        "group/agg-search-result",
         "group flex w-full items-center gap-6 px-5 py-3 text-left",
         "focus-visible:outline-none focus-visible:bg-agg-secondary-hover",
         "hover:bg-agg-secondary-hover",
@@ -3676,13 +3724,13 @@ var SearchResultRow = ({
           )
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: cn("flex w-[200px] shrink-0 items-center gap-2", classNames == null ? void 0 : classNames.resultMeta), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(VenueLogo, { venue: item.venue, size: "s" }),
+          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(VenueLogo, { venue: item.venue, size: "small" }),
           /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "flex min-w-0 flex-1 items-baseline gap-2", children: [
             /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
               "p",
               {
                 className: cn(
-                  "shrink-0 whitespace-nowrap font-agg-sans text-[18px] leading-7 font-agg-bold text-agg-foreground",
+                  "agg-type-body-large-strong shrink-0 whitespace-nowrap text-agg-foreground",
                   classNames == null ? void 0 : classNames.resultValue
                 ),
                 children: item.valueLabel
@@ -3704,7 +3752,7 @@ var SearchResultRow = ({
           Icon,
           {
             name: "chevron-right",
-            size: "m",
+            size: "medium",
             className: cn("h-5 w-5 shrink-0 text-agg-muted-foreground", classNames == null ? void 0 : classNames.resultChevron)
           }
         )
@@ -3728,8 +3776,8 @@ var Search = ({
   classNames,
   inputProps
 }) => {
-  const labels = (0, import_hooks17.useLabels)();
-  const { enableAnimations } = (0, import_hooks17.useSdkUiConfig)();
+  const labels = (0, import_hooks18.useLabels)();
+  const { enableAnimations } = (0, import_hooks18.useSdkUiConfig)();
   const validatedResults = (0, import_react6.useMemo)(() => {
     return getValidatedResults(results);
   }, [results]);
@@ -3741,7 +3789,7 @@ var Search = ({
   const handleInputChange = (event) => {
     onValueChange(event.target.value);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: cn("flex w-full flex-col gap-1", classNames == null ? void 0 : classNames.root), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: cn("group/agg-search", "flex w-full flex-col gap-1", classNames == null ? void 0 : classNames.root), children: [
     /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("label", { className: "w-full", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
       "div",
       {
@@ -3751,7 +3799,7 @@ var Search = ({
           "focus-within:border-2 focus-within:border-agg-primary",
           getMotionClassName(
             enableAnimations,
-            "transition-[border-color,box-shadow] duration-200 ease-out"
+            "transition-[border-color,box-shadow] duration-200 ease-in-out"
           ),
           classNames == null ? void 0 : classNames.inputContainer
         ),
@@ -3760,7 +3808,7 @@ var Search = ({
             Icon,
             {
               name: "search",
-              size: "s",
+              size: "small",
               className: cn("text-agg-muted-foreground", classNames == null ? void 0 : classNames.searchIcon)
             }
           ),
@@ -3872,8 +3920,7 @@ Search.displayName = "Search";
 
 // src/primitives/tabs/index.tsx
 var import_react7 = require("react");
-var import_hooks18 = require("@agg-market/hooks");
-var DropdownMenu2 = __toESM(require("@radix-ui/react-dropdown-menu"));
+var import_hooks19 = require("@agg-market/hooks");
 
 // src/primitives/tabs/tabs.utils.ts
 var findNextEnabledIndex = (items, startIndex, direction) => {
@@ -3898,86 +3945,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_runtime69 = require("react/jsx-runtime");
-var mobileTabsMediaQuery = "(max-width: 767px)";
+var mobileTabsMediaQuery = "(max-width: 512px)";
 var getTabButtonClassName = ({
   enableAnimations,
   isBarVariant,
@@ -3989,7 +3960,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"
@@ -4001,35 +3976,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,
@@ -4037,12 +3983,12 @@ var Tabs = ({
   variant = "bar",
   size = "m",
   overflowBehavior,
-  overflowMenuAriaLabel,
   ariaLabel,
-  className
+  className,
+  classNames
 }) => {
-  const labels = (0, import_hooks18.useLabels)();
-  const { enableAnimations, rootClassName } = (0, import_hooks18.useSdkUiConfig)();
+  const labels = (0, import_hooks19.useLabels)();
+  const { enableAnimations } = (0, import_hooks19.useSdkUiConfig)();
   const buttonRefs = (0, import_react7.useRef)([]);
   const dragStateRef = (0, import_react7.useRef)({
     isPointerDown: false,
@@ -4054,8 +4000,6 @@ var Tabs = ({
   });
   const suppressClickRef = (0, import_react7.useRef)(false);
   const resolvedAriaLabel = ariaLabel != null ? ariaLabel : labels.common.tabsAria;
-  const resolvedOverflowMenuAriaLabel = overflowMenuAriaLabel != null ? overflowMenuAriaLabel : labels.common.hiddenTabsAria;
-  const [isMoreMenuOpen, setIsMoreMenuOpen] = (0, import_react7.useState)(false);
   const [isMobileViewport, setIsMobileViewport] = (0, import_react7.useState)(false);
   const [isDraggingTabs, setIsDraggingTabs] = (0, import_react7.useState)(false);
   const [activeUnderlineStyle, setActiveUnderlineStyle] = (0, import_react7.useState)({
@@ -4063,39 +4007,21 @@ var Tabs = ({
     width: 0,
     opacity: 0
   });
-  const [overflowLayout, setOverflowLayout] = (0, import_react7.useState)({
-    visibleItems: items,
-    hiddenItems: []
-  });
   const [scrollAffordanceState, setScrollAffordanceState] = (0, import_react7.useState)({
     showStart: false,
     showEnd: false
   });
-  const containerRef = (0, import_react7.useRef)(null);
   const tabListRef = (0, import_react7.useRef)(null);
-  const moreButtonMeasureRef = (0, import_react7.useRef)(null);
-  const tabMeasureRefs = (0, import_react7.useRef)(/* @__PURE__ */ new Map());
   const isBarVariant = variant === "bar";
   const resolvedOverflowBehavior = (0, import_react7.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_react7.useCallback)(
-    (tabValue, tabElement) => {
-      if (!tabElement) {
-        tabMeasureRefs.current.delete(tabValue);
-        return;
-      }
-      tabMeasureRefs.current.set(tabValue, tabElement);
-    },
-    []
-  );
   (0, import_react7.useEffect)(() => {
     if (typeof window === "undefined")
       return;
@@ -4115,55 +4041,6 @@ var Tabs = ({
       mediaQueryList.removeListener(handleMediaQueryChange);
     };
   }, []);
-  const handleRecalculateOverflow = (0, import_react7.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_react7.useEffect)(() => {
-    handleRecalculateOverflow();
-  }, [handleRecalculateOverflow]);
-  (0, import_react7.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_react7.useEffect)(() => {
-    if (overflowLayout.hiddenItems.length > 0)
-      return;
-    setIsMoreMenuOpen(false);
-  }, [overflowLayout.hiddenItems.length]);
   const updateScrollAffordances = (0, import_react7.useCallback)(() => {
     if (!shouldUseOverflowScroll) {
       setScrollAffordanceState({
@@ -4181,8 +4058,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_react7.useMemo)(() => {
     return items.map((item) => ({
       value: item.value,
@@ -4207,24 +4083,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;
       }
@@ -4232,22 +4108,16 @@ var Tabs = ({
         return;
     }
   };
-  const activeHiddenItem = (0, import_react7.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)
@@ -4336,14 +4206,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_react7.useCallback)(() => {
     if (isBarVariant) {
       setActiveUnderlineStyle({
@@ -4411,18 +4277,34 @@ var Tabs = ({
   (0, import_react7.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_runtime69.jsx)("div", { className: cn("w-full", className), children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: cn("w-full", className, classNames == null ? void 0 : classNames.root), children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
       Select,
       {
         ariaLabel,
@@ -4437,10 +4319,12 @@ var Tabs = ({
   return /* @__PURE__ */ (0, import_jsx_runtime69.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_runtime69.jsxs)(
@@ -4449,7 +4333,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,
@@ -4471,7 +4355,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({
@@ -4513,7 +4401,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]"
                   ),
@@ -4529,7 +4417,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"
               )
@@ -4540,104 +4428,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_runtime69.jsxs)(DropdownMenu2.Root, { open: isMoreMenuOpen, onOpenChange: setIsMoreMenuOpen, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime69.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_runtime69.jsx)(Icon, { name: "dots-horizontal", size: isBarVariant ? "s" : "m", color: "currentColor" })
-            }
-          ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(DropdownMenu2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
-            DropdownMenu2.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_runtime69.jsxs)(
-                  DropdownMenu2.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_runtime69.jsx)("span", { className: "inline-flex shrink-0 items-center justify-center", children: item.icon }) : null,
-                      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "truncate whitespace-nowrap [&::first-letter]:uppercase", children: item.label })
-                    ]
-                  },
-                  item.value
-                );
-              })
-            }
-          ) })
-        ] }) : null,
-        shouldUseOverflowMenu ? /* @__PURE__ */ (0, import_jsx_runtime69.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_runtime69.jsxs)(
-                "span",
-                {
-                  ref: (tabElement) => handleMeasureTabRef(item.value, tabElement),
-                  className: getMeasureTabClassName({
-                    isBarVariant,
-                    size
-                  }),
-                  children: [
-                    item.icon ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "inline-flex shrink-0 items-center justify-center", children: item.icon }) : null,
-                    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { children: item.label })
-                  ]
-                },
-                `measure-${item.value}`
-              )),
-              /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
-                "span",
-                {
-                  ref: moreButtonMeasureRef,
-                  className: getMoreButtonClassName({
-                    enableAnimations,
-                    isBarVariant,
-                    size
-                  }),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Icon, { name: "dots-horizontal", size: isBarVariant ? "s" : "m", color: "currentColor" })
-                }
-              )
-            ]
-          }
-        ) : null
+        ] }) : null
       ]
     }
   );
@@ -4646,7 +4443,7 @@ Tabs.displayName = "Tabs";
 
 // src/primitives/modal/index.tsx
 var Dialog = __toESM(require("@radix-ui/react-dialog"));
-var import_hooks19 = require("@agg-market/hooks");
+var import_hooks20 = require("@agg-market/hooks");
 var import_jsx_runtime70 = require("react/jsx-runtime");
 var Modal = ({
   open,
@@ -4664,7 +4461,7 @@ var ModalContainer = ({
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledBy
 }) => {
-  const { rootClassName, enableAnimations } = (0, import_hooks19.useSdkUiConfig)();
+  const { rootClassName, enableAnimations } = (0, import_hooks20.useSdkUiConfig)();
   const overlayAnimationClassName = enableAnimations ? "motion-safe:data-[state=open]:animate-agg-modal-overlay-in motion-safe:data-[state=closed]:animate-agg-modal-overlay-out motion-reduce:animate-none" : void 0;
   const panelAnimationClassName = enableAnimations ? "motion-safe:data-[state=open]:animate-agg-modal-panel-in motion-safe:data-[state=closed]:animate-agg-modal-panel-out motion-reduce:animate-none" : void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(Dialog.Portal, { children: [
@@ -4682,6 +4479,7 @@ var ModalContainer = ({
       Dialog.Content,
       {
         className: cn(
+          "group/agg-modal",
           "fixed inset-0 z-agg-modal",
           "flex items-center justify-center p-4",
           "sm:p-5",
@@ -4726,14 +4524,15 @@ var ModalHeader = ({
   children,
   hideBorder = false
 }) => {
-  const { enableAnimations } = (0, import_hooks19.useSdkUiConfig)();
-  const labels = (0, import_hooks19.useLabels)();
+  const { enableAnimations } = (0, import_hooks20.useSdkUiConfig)();
+  const labels = (0, import_hooks20.useLabels)();
   const defaultCloseIcon = /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(CloseIcon, { className: "h-6 w-6" });
   const resolvedCloseIcon = closeIcon != null ? closeIcon : defaultCloseIcon;
   return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(
     "div",
     {
       className: cn(
+        "group/agg-modal-header",
         "flex flex-col",
         "sticky top-0 z-20",
         "bg-agg-secondary",
@@ -4809,6 +4608,7 @@ var ModalBody = ({ children, classNames }) => {
     "div",
     {
       className: cn(
+        "group/agg-modal-body",
         "grow overflow-y-auto",
         "px-4 py-6",
         "sm:p-8",
@@ -4829,6 +4629,7 @@ var ModalFooter = ({
     "div",
     {
       className: cn(
+        "group/agg-modal-footer",
         "sticky bottom-0",
         "bg-agg-secondary",
         "flex h-[73px] w-full flex-row items-center justify-between gap-3",
@@ -4847,7 +4648,7 @@ Modal.displayName = "Modal";
 // src/events/item/index.tsx
 var import_dayjs2 = __toESM(require("dayjs"));
 var import_react8 = require("react");
-var import_hooks20 = require("@agg-market/hooks");
+var import_hooks21 = require("@agg-market/hooks");
 
 // src/events/item/event-list-item.utils.ts
 var resolveEventListItemEvent = (fetchedEvent) => {
@@ -5008,7 +4809,7 @@ var EventListItemLoadingState = ({
   classNames,
   ariaLabel
 }) => {
-  const labels = (0, import_hooks20.useLabels)();
+  const labels = (0, import_hooks21.useLabels)();
   return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
     Skeleton,
     {
@@ -5022,7 +4823,7 @@ var EventListItemUnavailableState = ({
   classNames,
   ariaLabel
 }) => {
-  const labels = (0, import_hooks20.useLabels)();
+  const labels = (0, import_hooks21.useLabels)();
   return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
     Card,
     {
@@ -5030,7 +4831,7 @@ var EventListItemUnavailableState = ({
       role: "status",
       "aria-label": ariaLabel != null ? ariaLabel : labels.eventItem.unavailableAria,
       children: /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: cn("flex flex-col gap-1", classNames == null ? void 0 : classNames.header), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Typography, { variant: "title", className: cn("truncate", classNames == null ? void 0 : classNames.title), children: labels.eventItem.unavailableTitle }),
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Typography, { variant: "body-large-strong", className: cn("truncate", classNames == null ? void 0 : classNames.title), children: labels.eventItem.unavailableTitle }),
         /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Typography, { variant: "body", className: "text-agg-muted-foreground", children: labels.eventItem.unavailableDescription })
       ] })
     }
@@ -5049,8 +4850,8 @@ var EventListItemContent = ({
   ariaLabel
 }) => {
   var _a;
-  const config = (0, import_hooks20.useSdkUiConfig)();
-  const labels = (0, import_hooks20.useLabels)();
+  const config = (0, import_hooks21.useSdkUiConfig)();
+  const labels = (0, import_hooks21.useLabels)();
   const allVenueMarkets = (0, import_react8.useMemo)(() => {
     return event.markets.flatMap((market) => market.venueMarkets);
   }, [event.markets]);
@@ -5074,8 +4875,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();
     }
   };
@@ -5084,9 +4885,17 @@ var EventListItemContent = ({
       return null;
     if (Math.abs(value) < config.arbitrageThreshold)
       return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: cn("flex items-baseline gap-1", "text-agg-success"), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Typography, { variant: "label", className: "text-agg-success", children: config.formatPercent(value) }),
-      /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Icon, { name: "triangle-up", size: "xxs", title: labels.eventItem.arbitrage })
+    return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: cn("flex items-center gap-1", "text-agg-success"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Typography, { variant: "label-strong", className: "text-agg-success", children: config.formatPercent(value) }),
+      /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+        Icon,
+        {
+          name: "triangle-up",
+          size: "small",
+          title: labels.eventItem.arbitrage,
+          className: "size-2!"
+        }
+      )
     ] });
   };
   return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
@@ -5111,9 +4920,10 @@ var EventListItemContent = ({
           /* @__PURE__ */ (0, import_jsx_runtime71.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
@@ -5130,7 +4940,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: [
@@ -5142,21 +4952,23 @@ var EventListItemContent = ({
                     children: formattedTitle
                   }
                 ),
-                renderArbitrage(arbitragePercent),
-                showBadge ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
-                  Badge,
-                  {
-                    text: config.formatPercent(probability),
-                    prefix: showVenueLogo ? /* @__PURE__ */ (0, import_jsx_runtime71.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_runtime71.jsxs)("div", { className: "flex flex-row gap-3 items-center justify-end", children: [
+                  renderArbitrage(arbitragePercent),
+                  showBadge ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+                    Badge,
+                    {
+                      text: config.formatPercent(probability),
+                      prefix: showVenueLogo ? /* @__PURE__ */ (0, import_jsx_runtime71.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}`
@@ -5171,7 +4983,7 @@ var EventListItemContent = ({
               classNames == null ? void 0 : classNames.footer
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: cn("flex items-center gap-2", "text-agg-sm leading-agg-5"), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: cn("flex items-center gap-1", "text-agg-sm leading-agg-5"), children: [
                 /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "truncate text-agg-muted-foreground", children: formatCountLabel(
                   marketCount,
                   labels.eventItem.marketSingular,
@@ -5179,16 +4991,33 @@ var EventListItemContent = ({
                 ) }),
                 /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "text-agg-muted-foreground", children: "\xD7" }),
                 singleVenue ? /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("span", { className: "flex items-center gap-1 truncate text-agg-muted-foreground", children: [
-                  showVenueLogo ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(VenueLogo, { venue: singleVenue, size: "xs" }) : null,
+                  showVenueLogo ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+                    VenueLogo,
+                    {
+                      venue: singleVenue,
+                      size: "small",
+                      isMonochromatic: true,
+                      className: "text-agg-muted-foreground!"
+                    }
+                  ) : null,
                   /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { children: venueLabel })
                 ] }) : /* @__PURE__ */ (0, import_jsx_runtime71.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_runtime71.jsx)("span", { className: "flex items-center gap-1 overflow-hidden", children: visibleVenueLogos.map((venue) => /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(VenueLogo, { venue, size: "xs" }, venue)) }) : null
+                showVenueLogo && !singleVenue && visibleVenueLogos.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "flex items-center gap-1 overflow-hidden", children: visibleVenueLogos.map((venue) => /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+                  VenueLogo,
+                  {
+                    venue,
+                    size: "small",
+                    isMonochromatic: true,
+                    className: "text-agg-muted-foreground!"
+                  },
+                  venue
+                )) }) : null
               ] }),
-              volumeLabel ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Typography, { variant: "meta", className: "text-agg-sm", children: volumeLabel }) : null
+              volumeLabel ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Typography, { variant: "label", className: "text-agg-sm text-agg-muted-foreground", children: volumeLabel }) : null
             ]
           }
         )
@@ -5206,7 +5035,7 @@ var EventListItemByEventId = (_a) => {
     event: fetchedEvent,
     isError,
     isLoading
-  } = (0, import_hooks20.useEvent)(eventId, {
+  } = (0, import_hooks21.useEvent)(eventId, {
     enabled: !!eventId
   });
   const resolvedEvent = (0, import_react8.useMemo)(() => {
@@ -5240,7 +5069,7 @@ EventListItem.displayName = "EventListItem";
 
 // src/events/item-details/index.tsx
 var import_react9 = require("react");
-var import_hooks21 = require("@agg-market/hooks");
+var import_hooks22 = require("@agg-market/hooks");
 
 // src/events/item-details/event-list-item-details.utils.ts
 var import_dayjs3 = __toESM(require("dayjs"));
@@ -5369,7 +5198,7 @@ var EventListItemDetailsLoadingState = ({
   classNames,
   ariaLabel
 }) => {
-  const labels = (0, import_hooks21.useLabels)();
+  const labels = (0, import_hooks22.useLabels)();
   return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
     Skeleton,
     {
@@ -5383,7 +5212,7 @@ var EventListItemDetailsUnavailableState = ({
   classNames,
   ariaLabel
 }) => {
-  const labels = (0, import_hooks21.useLabels)();
+  const labels = (0, import_hooks22.useLabels)();
   return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
     Card,
     {
@@ -5391,7 +5220,7 @@ var EventListItemDetailsUnavailableState = ({
       role: "status",
       "aria-label": ariaLabel != null ? ariaLabel : labels.eventItemDetails.unavailableAria,
       children: /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: cn("flex flex-col gap-1", classNames == null ? void 0 : classNames.header), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(Typography, { variant: "title", className: cn("truncate", classNames == null ? void 0 : classNames.title), children: labels.eventItemDetails.unavailableTitle }),
+        /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(Typography, { variant: "body-large-strong", className: cn("truncate", classNames == null ? void 0 : classNames.title), children: labels.eventItemDetails.unavailableTitle }),
         /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(Typography, { variant: "body", className: "text-agg-muted-foreground", children: labels.eventItemDetails.unavailableDescription })
       ] })
     }
@@ -5429,7 +5258,7 @@ var EventListItemDetailsGraphSection = ({
   formatPercent,
   selectedTimeRange
 }) => {
-  const labels = (0, import_hooks21.useLabels)();
+  const labels = (0, import_hooks22.useLabels)();
   const [selectedVenue, setSelectedVenue] = (0, import_react9.useState)(null);
   const [activeProbabilityMode, setActiveProbabilityMode] = (0, import_react9.useState)("yes");
   const probabilityModeConfigs = (0, import_react9.useMemo)(() => {
@@ -5516,7 +5345,7 @@ var EventListItemDetailsGraphSection = ({
   const timeWindow = (0, import_react9.useMemo)(() => {
     return getTimeWindowByRange(selectedTimeRange);
   }, [selectedTimeRange]);
-  const { data: priceHistoryData, isLoading: isPriceHistoryLoading } = (0, import_hooks21.usePriceHistory)(__spreadProps(__spreadValues({
+  const { data: priceHistoryData, isLoading: isPriceHistoryLoading } = (0, import_hooks22.usePriceHistory)(__spreadProps(__spreadValues({
     groups: priceHistoryGroups
   }, timeWindow), {
     enabled: priceHistoryGroups.length > 0
@@ -5654,25 +5483,27 @@ var EventListItemDetailsGraphSection = ({
                         className: cn(
                           "rounded-agg-full 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"
                         ),
-                        onClick: () => handleVenueToggle(venueData.venue),
                         children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
                           Badge,
                           {
                             text,
-                            size: "l",
+                            size: "large",
                             prefix: showVenueLogo ? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
                               VenueLogo,
                               {
                                 venue: venueData.venue,
-                                size: "s",
+                                size: "small",
                                 title: (_a = venueInfo == null ? void 0 : venueInfo[venueData.venue]) == null ? void 0 : _a.label
                               }
                             ) : void 0,
                             classNames: {
-                              root: cn(
-                                "h-9 shrink-0 border-2 px-4 text-agg-base leading-agg-6",
-                                isActiveVenue ? "border-agg-primary bg-agg-secondary font-agg-bold" : "border-transparent bg-agg-secondary-hover font-agg-normal"
-                              )
+                              root: cn("h-9 shrink-0 border-2 px-4 text-agg-base leading-agg-6")
+                            },
+                            isActive: isActiveVenue,
+                            onClick: (e) => {
+                              e.preventDefault();
+                              e.stopPropagation();
+                              handleVenueToggle(venueData.venue);
                             }
                           }
                         )
@@ -5714,8 +5545,8 @@ var EventListItemDetailsContent = ({
   ariaLabel,
   defaultTimeRange
 }) => {
-  const config = (0, import_hooks21.useSdkUiConfig)();
-  const labels = (0, import_hooks21.useLabels)();
+  const config = (0, import_hooks22.useSdkUiConfig)();
+  const labels = (0, import_hooks22.useLabels)();
   const venueMarkets = (0, import_react9.useMemo)(() => {
     var _a, _b, _c;
     return (_c = (_b = (_a = event.markets) == null ? void 0 : _a[0]) == null ? void 0 : _b.venueMarkets) != null ? _c : [];
@@ -5810,69 +5641,73 @@ var EventListItemDetailsContent = ({
       className: cn(detailsBaseCardClassName, classNames == null ? void 0 : classNames.root),
       "aria-label": ariaLabel != null ? ariaLabel : resolvedTitle,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: cn("flex items-start gap-3 md:gap-4 ", classNames == null ? void 0 : classNames.header), children: [
-          resolvedImage ? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
-            "img",
-            {
-              src: resolvedImage,
-              alt: "",
-              className: "size-10 rounded-agg-lg object-cover md:size-[60px]"
-            }
-          ) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-3", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
-              Typography,
-              {
-                variant: "value",
-                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:text-agg-2xl md:leading-agg-8 md:block md:truncate md:whitespace-nowrap",
-                  classNames == null ? void 0 : classNames.title
-                ),
-                children: resolvedTitle
-              }
+        /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
+          "div",
+          {
+            className: cn(
+              "flex flex-row gap-3 md:gap-4",
+              "items-center justify-start",
+              classNames == null ? void 0 : classNames.header
             ),
-            outcomeSelectorLabels.length > 2 ? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
-              "div",
-              {
-                className: cn(
-                  "flex items-center gap-2 overflow-x-auto pb-1 md:flex-wrap md:overflow-visible md:pb-0",
-                  classNames == null ? void 0 : classNames.headerPills
+            children: [
+              resolvedImage ? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+                "img",
+                {
+                  src: resolvedImage,
+                  alt: "",
+                  className: "size-10 rounded-agg-lg object-cover md:size-[60px]"
+                }
+              ) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-3", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+                  Typography,
+                  {
+                    variant: "body-strong",
+                    className: cn(
+                      "min-w-0 text-agg-base font-agg-bold! leading-agg-6 md:text-agg-2xl md:leading-agg-8",
+                      "truncate text-wrap wrap-break-word line-clamp-2",
+                      classNames == null ? void 0 : classNames.title
+                    ),
+                    children: resolvedTitle
+                  }
                 ),
-                children: outcomeSelectorLabels.map((outcomeSelectorLabel) => {
-                  const isActive = outcomeSelectorLabel === selectedOutcomeLabel;
-                  const displayLabel = isDateLikeLabel(outcomeSelectorLabel) ? formatDateLabel(outcomeSelectorLabel) : outcomeSelectorLabel;
-                  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
-                    Button,
-                    {
-                      size: "s",
-                      variant: "secondary",
-                      "aria-pressed": isActive,
-                      className: cn(
-                        "h-auto shrink-0 rounded-agg-full px-4 py-1.5 text-agg-sm leading-agg-5",
-                        "border-2",
-                        isActive ? "border-agg-primary bg-agg-secondary text-agg-foreground font-agg-bold" : "border-transparent bg-agg-secondary-hover text-agg-foreground font-agg-normal"
-                      ),
-                      onClick: () => setSelectedOutcomeLabel(outcomeSelectorLabel),
-                      children: displayLabel
-                    },
-                    outcomeSelectorLabel
-                  );
-                })
-              }
-            ) : null
-          ] })
-        ] }),
+                outcomeSelectorLabels.length > 2 ? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+                  "div",
+                  {
+                    className: cn(
+                      "flex items-center gap-2 overflow-x-auto pb-1 md:flex-wrap md:overflow-visible md:pb-0",
+                      classNames == null ? void 0 : classNames.headerPills
+                    ),
+                    children: outcomeSelectorLabels.map((outcomeSelectorLabel) => {
+                      const isActive = outcomeSelectorLabel === selectedOutcomeLabel;
+                      const displayLabel = isDateLikeLabel(outcomeSelectorLabel) ? formatDateLabel(outcomeSelectorLabel) : outcomeSelectorLabel;
+                      return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+                        Button,
+                        {
+                          size: "small",
+                          variant: "secondary",
+                          "aria-pressed": isActive,
+                          className: cn(
+                            "h-auto shrink-0 rounded-agg-full px-4 py-1.5 text-agg-sm leading-agg-5",
+                            "border-2",
+                            isActive ? "border-agg-primary bg-agg-secondary text-agg-foreground font-agg-bold" : "border-transparent bg-agg-secondary-hover text-agg-foreground font-agg-normal"
+                          ),
+                          onClick: () => setSelectedOutcomeLabel(outcomeSelectorLabel),
+                          children: displayLabel
+                        },
+                        outcomeSelectorLabel
+                      );
+                    })
+                  }
+                ) : null
+              ] })
+            ]
+          }
+        ),
         detailsStats && detailsStats.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: cn("flex flex-wrap items-start gap-4 md:gap-6", classNames == null ? void 0 : classNames.headerStats), children: detailsStats.map((statItem) => {
-          const deltaClassName = statItem.deltaTone === "positive" ? "text-agg-success" : statItem.deltaTone === "negative" ? "text-agg-error" : "text-agg-muted-foreground";
+          const deltaClassName = statItem.deltaTone === "positive" ? "text-agg-success!" : statItem.deltaTone === "negative" ? "text-agg-error!" : "text-agg-muted-foreground";
           return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: "flex flex-col gap-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
-              Typography,
-              {
-                variant: "label",
-                className: "text-agg-xs leading-agg-4 tracking-agg-normal text-agg-muted-foreground",
-                children: statItem.label
-              }
-            ),
+            /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(Typography, { variant: "caption-caps", className: "text-agg-muted-foreground", children: statItem.label }),
             /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: "flex items-baseline gap-1", children: [
               /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
                 Typography,
@@ -5882,14 +5717,7 @@ var EventListItemDetailsContent = ({
                   children: statItem.value
                 }
               ),
-              statItem.delta ? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
-                Typography,
-                {
-                  variant: "meta",
-                  className: cn("text-agg-sm leading-agg-5", deltaClassName),
-                  children: statItem.delta
-                }
-              ) : null
+              statItem.delta ? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(Typography, { variant: "label", className: cn(deltaClassName), children: statItem.delta }) : null
             ] })
           ] }, `${statItem.label}-${statItem.value}`);
         }) }) : null,
@@ -5909,18 +5737,19 @@ var EventListItemDetailsContent = ({
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: cn("flex flex-wrap items-center justify-between gap-4", classNames == null ? void 0 : classNames.footer), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(Typography, { variant: "meta", className: "text-agg-muted-foreground text-agg-sm leading-agg-5", children: volumeLabel || "-" }),
+          /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(Typography, { variant: "label", className: "text-agg-muted-foreground", children: volumeLabel || "-" }),
           /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: cn("flex items-center gap-2 md:gap-3", classNames == null ? void 0 : classNames.timeRange), children: eventListItemDetailsTimeRanges.map((timeRange) => {
             const isActive = timeRange === selectedTimeRange;
             return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
               Button,
               {
-                size: "xs",
+                size: "small",
                 variant: "tertiary",
                 className: cn(
                   "h-auto min-w-0 rounded-none px-0 py-0 text-agg-xs leading-agg-4 md:text-agg-sm md:leading-agg-5",
                   "border-0 bg-transparent shadow-none",
-                  isActive ? "font-agg-bold text-agg-foreground" : "font-agg-normal text-agg-muted-foreground"
+                  "hover:text-agg-foreground!",
+                  isActive ? "font-agg-bold! text-agg-foreground!" : "font-agg-normal! text-agg-muted-foreground!"
                 ),
                 "aria-pressed": isActive,
                 onClick: () => setSelectedTimeRange(timeRange),
@@ -5944,7 +5773,7 @@ var EventListItemDetailsByEventId = (_a) => {
     event: fetchedEvent,
     isError,
     isLoading
-  } = (0, import_hooks21.useEvent)(eventId, {
+  } = (0, import_hooks22.useEvent)(eventId, {
     enabled: !!eventId
   });
   const resolvedEvent = (0, import_react9.useMemo)(() => {
@@ -6021,7 +5850,7 @@ EventListItemDetails.displayName = "EventListItemDetails";
 
 // src/events/market-details/index.tsx
 var import_react10 = require("react");
-var import_hooks22 = require("@agg-market/hooks");
+var import_hooks23 = require("@agg-market/hooks");
 
 // src/events/market-details/market-details.utils.ts
 var import_dayjs4 = __toESM(require("dayjs"));
@@ -6262,7 +6091,7 @@ var MarketDetailsLoadingState = ({
   ariaLabel,
   classNames
 }) => {
-  const labels = (0, import_hooks22.useLabels)();
+  const labels = (0, import_hooks23.useLabels)();
   return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
     Skeleton,
     {
@@ -6276,7 +6105,7 @@ var MarketDetailsUnavailableState = ({
   ariaLabel,
   classNames
 }) => {
-  const labels = (0, import_hooks22.useLabels)();
+  const labels = (0, import_hooks23.useLabels)();
   return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
     Card,
     {
@@ -6284,8 +6113,8 @@ var MarketDetailsUnavailableState = ({
       role: "status",
       "aria-label": ariaLabel != null ? ariaLabel : labels.marketDetails.unavailableAria,
       children: /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "flex flex-col gap-1 p-5", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Typography, { variant: "title", children: labels.marketDetails.unavailableTitle }),
-        /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Typography, { variant: "meta", children: labels.marketDetails.unavailableDescription })
+        /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Typography, { variant: "body-large-strong", children: labels.marketDetails.unavailableTitle }),
+        /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Typography, { variant: "label", className: "text-agg-muted-foreground", children: labels.marketDetails.unavailableDescription })
       ] })
     }
   );
@@ -6296,16 +6125,16 @@ var OrderBookRows = ({
   formatNumber,
   formatCurrency
 }) => {
-  const labels = (0, import_hooks22.useLabels)();
+  const labels = (0, import_hooks23.useLabels)();
   const isAsks = title === labels.marketDetails.asks;
   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_runtime73.jsxs)("div", { className: "flex flex-col gap-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Typography, { variant: "label", className: "text-agg-xs leading-agg-4", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Typography, { variant: "caption-caps", children: title }),
     rows.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "flex flex-col gap-2", children: [
       /* @__PURE__ */ (0, import_jsx_runtime73.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_runtime73.jsxs)("div", { className: "flex items-center gap-1 md:gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(VenueLogo, { venue: row.venue, size: "xs" }),
+          /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(VenueLogo, { venue: row.venue, size: "small" }),
           /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
             "span",
             {
@@ -6339,11 +6168,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 = ({
@@ -6361,8 +6194,8 @@ var MarketDetailsContent = ({
   classNames,
   otherContent
 }) => {
-  const config = (0, import_hooks22.useSdkUiConfig)();
-  const labels = (0, import_hooks22.useLabels)();
+  const config = (0, import_hooks23.useSdkUiConfig)();
+  const labels = (0, import_hooks23.useLabels)();
   const detailsContentId = (0, import_react10.useId)();
   const model = (0, import_react10.useMemo)(() => {
     return buildMarketDetailsModel({
@@ -6448,7 +6281,7 @@ var MarketDetailsContent = ({
   const priceHistoryGroups = (0, import_react10.useMemo)(() => {
     return buildPriceHistoryGroups(graphOutcomes);
   }, [graphOutcomes]);
-  const { data: priceHistoryData, isLoading: isPriceHistoryLoading } = (0, import_hooks22.usePriceHistory)(__spreadProps(__spreadValues({
+  const { data: priceHistoryData, isLoading: isPriceHistoryLoading } = (0, import_hooks23.usePriceHistory)(__spreadProps(__spreadValues({
     groups: priceHistoryGroups
   }, timeWindow), {
     enabled: isOpened && selectedTab === "graph" && priceHistoryGroups.length > 0
@@ -6460,7 +6293,7 @@ var MarketDetailsContent = ({
       liveUpdate: true
     }));
   }, [selectedOutcomesByVenue]);
-  const { data: orderBookData, isLoading: isOrderBookLoading } = (0, import_hooks22.useOrderBook)({
+  const { data: orderBookData, isLoading: isOrderBookLoading } = (0, import_hooks23.useOrderBook)({
     orderbooks: orderBookInputs,
     enabled: isOpened && selectedTab === "order-book" && orderBookInputs.length > 0
   });
@@ -6550,7 +6383,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)
@@ -6562,9 +6395,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) => {
@@ -6588,88 +6429,101 @@ var MarketDetailsContent = ({
   return /* @__PURE__ */ (0, import_jsx_runtime73.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_runtime73.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_runtime73.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_runtime73.jsxs)("div", { className: "flex min-w-0 items-center gap-3 md:gap-4", children: [
-                  model.image ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
-                    "img",
-                    {
-                      src: model.image,
-                      alt: "",
-                      className: "size-12 rounded-agg-lg object-cover md:size-[60px]"
-                    }
-                  ) : null,
-                  /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "flex min-w-0 flex-col", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Typography, { as: "h3", variant: "title", className: "truncate text-agg-lg leading-agg-7", children: model.title }),
-                    /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Typography, { variant: "meta", className: "truncate text-agg-sm leading-agg-5", children: model.subtitle }) })
-                  ] })
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
-                  Typography,
+        /* @__PURE__ */ (0, import_jsx_runtime73.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_runtime73.jsxs)("div", { className: "flex min-w-0 items-center gap-3 md:gap-4", children: [
+                model.image ? /* @__PURE__ */ (0, import_jsx_runtime73.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_runtime73.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_runtime73.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_runtime73.jsxs)("span", { className: "inline-flex items-center gap-2", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
-                        VenueLogo,
-                        {
-                          venue: isPositive ? "polymarket" : "probable",
-                          size: "xs"
-                        }
-                      ),
-                      /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Typography, { className: "text-agg-base leading-agg-6", children: `${item.label} ${formatProbabilityCents(item.probability)}` })
-                    ] })
-                  },
-                  item.label
-                );
-              })
-            }
-          )
-        ] }),
+                ) : null,
+                /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "flex min-w-0 flex-col", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Typography, { as: "h3", variant: "body-large-strong", className: "truncate", children: model.title }),
+                  /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Typography, { variant: "label", className: "truncate text-agg-muted-foreground", children: model.subtitle }) })
+                ] })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Typography, { as: "div", variant: "heading", className: "shrink-0", children: formatProbabilityPercent(headlineProbability) }),
+              /* @__PURE__ */ (0, import_jsx_runtime73.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_runtime73.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_runtime73.jsxs)("span", { className: "inline-flex items-center gap-2", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+                            VenueLogo,
+                            {
+                              venue: isPositive ? "polymarket" : "probable",
+                              size: "small",
+                              color: isActiveOutcome ? "var(--agg-color-on-primary)" : void 0
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime73.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_runtime73.jsx)(
           "div",
           {
@@ -6721,7 +6575,7 @@ var MarketDetailsContent = ({
                           "aria-busy": true,
                           children: [
                             /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(LoadingIcon, {}),
-                            /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Typography, { variant: "meta", children: labels.marketDetails.loadingOrderbookLabel })
+                            /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Typography, { variant: "label", className: "text-agg-muted-foreground", children: labels.marketDetails.loadingOrderbookLabel })
                           ]
                         }
                       ) : /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(import_jsx_runtime73.Fragment, { children: [
@@ -6769,9 +6623,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_runtime73.jsx)(VenueLogo, { venue: item.venue, size: "xs" }),
+                                        /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(VenueLogo, { venue: item.venue, size: "small" }),
                                         /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "text-agg-base leading-agg-6 text-agg-foreground", children: probability })
                                       ]
                                     },
@@ -6816,7 +6674,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
@@ -6831,7 +6693,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_runtime73.jsx)(Typography, { variant: "meta", children: row.label }),
+                            /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Typography, { variant: "label", className: "text-agg-muted-foreground", children: row.label }),
                             /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Typography, { variant: "body", className: "text-right", children: row.value })
                           ]
                         },
@@ -6867,7 +6729,7 @@ var MarketDetails = (props) => {
     (_a2 = props.onOpenChange) == null ? void 0 : _a2.call(props, nextIsOpened);
   };
   const hasEventProp = "event" in props && !!props.event;
-  const { event: fetchedEvent, isLoading: isFetchingEvent } = (0, import_hooks22.useEvent)(
+  const { event: fetchedEvent, isLoading: isFetchingEvent } = (0, import_hooks23.useEvent)(
     hasEventProp ? void 0 : props.eventId,
     {
       enabled: !props.isLoading && !hasEventProp && !!props.eventId
@@ -6919,7 +6781,7 @@ MarketDetails.displayName = "MarketDetails";
 
 // src/events/list/index.tsx
 var import_react11 = require("react");
-var import_hooks23 = require("@agg-market/hooks");
+var import_hooks24 = require("@agg-market/hooks");
 
 // src/events/list/event-list.constants.ts
 var POLYMARKET_VENUE = "polymarket";
@@ -6985,7 +6847,7 @@ var resolveTabVenus = (tab) => {
 var import_jsx_runtime74 = require("react/jsx-runtime");
 var renderTabIcon = (tab, isActive) => {
   if (tab.venueLogo) {
-    return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(VenueLogo, { venue: tab.venueLogo, size: "xs" });
+    return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(VenueLogo, { venue: tab.venueLogo, size: "small" });
   }
   if (!tab.iconName)
     return null;
@@ -6993,11 +6855,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,
@@ -7008,13 +6896,14 @@ var EventList = ({
   categoryIds
 }) => {
   var _a, _b;
-  const labels = (0, import_hooks23.useLabels)();
+  const labels = (0, import_hooks24.useLabels)();
   const defaultEventListTabs = (0, import_react11.useMemo)(() => {
     return getDefaultEventListTabs(labels);
   }, [labels]);
   const [activeTabValue, setActiveTabValue] = (0, import_react11.useState)(
     (_b = (_a = defaultEventListTabs[0]) == null ? void 0 : _a.value) != null ? _b : "matched"
   );
+  const [shouldUseSelectOverflow, setShouldUseSelectOverflow] = (0, import_react11.useState)(false);
   const activeTab = (0, import_react11.useMemo)(() => {
     return defaultEventListTabs.find((tab) => tab.value === activeTabValue);
   }, [activeTabValue]);
@@ -7028,7 +6917,7 @@ var EventList = ({
   }, [maxVisibleItems]);
   const requestLimit = resolvedMaxVisibleItems != null ? resolvedMaxVisibleItems : limit;
   const shouldPaginate = resolvedMaxVisibleItems == null;
-  const { events, isLoading, isError, fetchNextPage, hasNextPage, isFetchingNextPage } = (0, import_hooks23.useEvents)({
+  const { events, isLoading, isError, fetchNextPage, hasNextPage, isFetchingNextPage } = (0, import_hooks24.useEvents)({
     venues,
     search,
     categoryIds,
@@ -7054,6 +6943,46 @@ var EventList = ({
       };
     });
   }, [activeTabValue]);
+  const headerRef = (0, import_react11.useRef)(null);
+  const titleRef = (0, import_react11.useRef)(null);
+  const updateTabsOverflowBehavior = (0, import_react11.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_react11.useEffect)(() => {
+    updateTabsOverflowBehavior();
+  }, [updateTabsOverflowBehavior]);
+  (0, import_react11.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;
@@ -7095,19 +7024,25 @@ var EventList = ({
     return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(Skeleton, { view: "event-list", ariaLabel: labels.eventList.loading(title) });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("section", { className: "flex w-full flex-col gap-5", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime74.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_runtime74.jsx)(Typography, { as: "h2", variant: "value", className: "truncate [&::first-letter]:uppercase", children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-        Tabs,
-        {
-          ariaLabel: labels.eventList.tabsAria(title),
-          className: "max-w-full",
-          items: tabsItems,
-          value: activeTabValue,
-          onChange: setActiveTabValue
-        }
-      )
-    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime74.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_runtime74.jsx)("div", { ref: titleRef, className: "min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(Typography, { as: "h2", variant: "title", className: "truncate [&::first-letter]:uppercase", children: title }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+            Tabs,
+            {
+              ariaLabel: labels.eventList.tabsAria(title),
+              items: tabsItems,
+              value: activeTabValue,
+              onChange: setActiveTabValue
+            }
+          )
+        ]
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: gridClassName, style: gridStyle, children: [
       tileEvents.map((event) => /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
         EventListItem,
@@ -7154,7 +7089,7 @@ EventList.displayName = "EventList";
 
 // src/pages/home/index.tsx
 var import_react12 = require("react");
-var import_hooks24 = require("@agg-market/hooks");
+var import_hooks25 = require("@agg-market/hooks");
 
 // src/pages/home/home.constants.ts
 var ALL_CATEGORIES_TAB_VALUE = "trending";
@@ -7292,11 +7227,11 @@ var HomePage = ({
   categoriesLimit = DEFAULT_CATEGORIES_LIMIT,
   allCategoryTabLabel = DEFAULT_ALL_CATEGORY_TAB_LABEL
 }) => {
-  const labels = (0, import_hooks24.useLabels)();
+  const labels = (0, import_hooks25.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_hooks24.useCategories)({
+  const { categories } = (0, import_hooks25.useCategories)({
     limit: categoriesLimit,
     enabled: shouldUseCategoriesTabs
   });
@@ -7332,7 +7267,7 @@ var HomePage = ({
           Icon,
           {
             name: tab.iconName,
-            size: "m",
+            size: "medium",
             color: isActive ? "var(--agg-color-primary)" : "var(--agg-color-foreground)"
           }
         ) : void 0,
@@ -7448,17 +7383,17 @@ var VenueRow = ({ venue, onSelect }) => {
         }
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(VenueLogo, { venue: venue.venue, size: "xl", className: "rounded-lg" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(VenueLogo, { venue: venue.venue, size: "large", className: "rounded-lg" }) }),
         /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "flex-1 min-w-0", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("p", { className: "text-base font-bold text-foreground leading-6", children: displayName }),
-          /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("p", { className: "text-sm text-muted-foreground leading-5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("p", { className: "agg-type-body-strong text-agg-foreground", children: displayName }),
+          /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("p", { className: "agg-type-label text-agg-muted-foreground", children: [
             "Balance ",
             formatCompactUsd(venue.balance)
           ] })
         ] }),
         hasShortfall ? /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "hidden sm:flex items-center gap-1.5 shrink-0", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(WarningFilledIcon, { className: "h-4 w-4 text-warning" }),
-          /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("span", { className: "text-sm font-bold text-warning whitespace-nowrap", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(WarningFilledIcon, { className: "h-4 w-4 text-agg-warning" }),
+          /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("span", { className: "agg-type-label-strong whitespace-nowrap text-agg-warning", children: [
             "Short ",
             formatCompactUsd(venue.shortfall)
           ] })
@@ -7467,7 +7402,7 @@ var VenueRow = ({ venue, onSelect }) => {
           Button,
           {
             variant: "secondary",
-            size: "s",
+            size: "small",
             suffix: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(ChevronRightIcon, {}),
             onClick: (e) => {
               e.stopPropagation();
@@ -7487,7 +7422,7 @@ var VenueSelectionStep = ({
 }) => /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(import_jsx_runtime76.Fragment, { children: [
   /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Modal.Header, { title: "Deposit", hideBorder: true }),
   /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Modal.Body, { classNames: { root: "px-5 pt-0 pb-6 sm:px-8 sm:pt-0 sm:pb-8" }, children: /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "flex flex-col gap-4", children: [
-    !hasAnyShortfall ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("p", { className: "text-base text-foreground leading-6", children: "Choose where to deposit funds:" }) : null,
+    !hasAnyShortfall ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("p", { className: "agg-type-body text-agg-foreground", children: "Choose where to deposit funds:" }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: "flex flex-col gap-3", children: venues.map((venue) => /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(VenueRow, { venue, onSelect: onSelectVenue }, venue.venue)) })
   ] }) })
 ] });
@@ -7520,14 +7455,14 @@ var DepositMethodCard = ({
     children: [
       /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: "shrink-0 flex items-center justify-center h-10 w-10 rounded-lg bg-secondary-hover", children: icon }),
       /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: "flex-1 min-w-0", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("p", { className: "text-base font-bold text-foreground leading-6", children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("p", { className: "text-sm text-muted-foreground leading-5", children: description })
+        /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("p", { className: "agg-type-body-strong text-agg-foreground", children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("p", { className: "agg-type-label text-agg-muted-foreground", children: description })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
         Button,
         {
           variant: "secondary",
-          size: "s",
+          size: "small",
           suffix: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(ChevronRightIcon, {}),
           onClick: (e) => {
             e.stopPropagation();
@@ -7556,7 +7491,7 @@ var DepositMethodStep = ({
           "button",
           {
             type: "button",
-            className: "flex items-center justify-center text-foreground hover:text-foreground/80 transition-colors hover:cursor-pointer mr-2",
+            className: "mr-2 flex items-center justify-center text-agg-foreground transition-colors hover:cursor-pointer hover:text-agg-foreground/80",
             onClick: onBack,
             "aria-label": "Go back",
             children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(ChevronLeftIcon, { className: "h-6 w-6" })
@@ -7566,8 +7501,8 @@ var DepositMethodStep = ({
     ),
     /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(Modal.Body, { classNames: { root: "px-5 pt-0 pb-6 sm:px-8 sm:pt-0 sm:pb-8" }, children: /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: "flex flex-col gap-4", children: [
       /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(VenueLogo, { venue: venue.venue, size: "xs", className: "rounded-sm" }),
-        /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("p", { className: "text-sm text-muted-foreground leading-5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(VenueLogo, { venue: venue.venue, size: "small", className: "rounded-sm" }),
+        /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("p", { className: "agg-type-label text-agg-muted-foreground", children: [
           displayName,
           " balance: ",
           formatCompactUsd(venue.balance)
@@ -7577,7 +7512,7 @@ var DepositMethodStep = ({
         /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
           DepositMethodCard,
           {
-            icon: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(BoltIcon, { className: "h-6 w-6 text-foreground" }),
+            icon: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(BoltIcon, { className: "h-6 w-6 text-agg-foreground" }),
             title: "Transfer Crypto",
             description: "Send USDC from your blockchain wallet.",
             onContinue: () => onSelectMethod("crypto")
@@ -7586,7 +7521,7 @@ var DepositMethodStep = ({
         /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
           DepositMethodCard,
           {
-            icon: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(CreditCardIcon, { className: "h-6 w-6 text-foreground" }),
+            icon: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(CreditCardIcon, { className: "h-6 w-6 text-agg-foreground" }),
             title: "Deposit with Card",
             description: "Buy USDC instantly with a debit or credit card.",
             onContinue: () => onSelectMethod("card")
@@ -7626,7 +7561,7 @@ var CardDepositStep = ({
           "button",
           {
             type: "button",
-            className: "flex items-center justify-center text-foreground hover:text-foreground/80 transition-colors hover:cursor-pointer mr-2",
+            className: "mr-2 flex items-center justify-center text-agg-foreground transition-colors hover:cursor-pointer hover:text-agg-foreground/80",
             onClick: onBack,
             "aria-label": "Go back",
             children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(ChevronLeftIcon, { className: "h-6 w-6" })
@@ -7636,8 +7571,8 @@ var CardDepositStep = ({
     ),
     /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Modal.Body, { classNames: { root: "px-5 pt-0 pb-6 sm:px-8 sm:pt-0 sm:pb-8" }, children: /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "flex flex-col gap-6", children: [
       /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(VenueLogo, { venue: venue.venue, size: "xs", className: "rounded-sm" }),
-        /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("p", { className: "text-sm text-muted-foreground leading-5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(VenueLogo, { venue: venue.venue, size: "small", className: "rounded-sm" }),
+        /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("p", { className: "agg-type-label text-agg-muted-foreground", children: [
           displayName,
           " balance: ",
           formatCompactUsd(venue.balance)
@@ -7656,7 +7591,7 @@ var CardDepositStep = ({
           }
         ) }),
         /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "flex items-baseline", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "text-3xl sm:text-4xl font-bold text-foreground leading-none", children: "$" }),
+          /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "agg-type-display text-agg-foreground", children: "$" }),
           /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
             "input",
             {
@@ -7664,8 +7599,8 @@ var CardDepositStep = ({
               inputMode: "decimal",
               "aria-label": "Amount",
               className: cn(
-                "w-full bg-transparent text-3xl sm:text-4xl font-bold leading-none outline-none",
-                isValid ? "text-foreground" : "text-muted-foreground"
+                "agg-type-display w-full bg-transparent outline-none",
+                isValid ? "text-agg-foreground" : "text-agg-muted-foreground"
               ),
               placeholder: "0",
               value: rawAmount ? formatAmountDisplay(rawAmount) : "",
@@ -7687,12 +7622,12 @@ var CardDepositStep = ({
           tabIndex: 0,
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "flex-1 min-w-0", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("p", { className: "text-base font-bold text-foreground leading-6", children: "Provider" }),
-              /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("p", { className: "text-sm text-muted-foreground leading-5", children: "Auto-picked for you" })
+              /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("p", { className: "agg-type-body-strong text-agg-foreground", children: "Provider" }),
+              /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("p", { className: "agg-type-label text-agg-muted-foreground", children: "Auto-picked for you" })
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "flex items-center gap-2 shrink-0", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "text-sm font-bold text-foreground", children: "Swapped" }),
-              /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(ChevronRightIcon, { className: "h-4 w-4 text-foreground" })
+              /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "agg-type-label-strong text-agg-foreground", children: "Swapped" }),
+              /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(ChevronRightIcon, { className: "h-4 w-4 text-agg-foreground" })
             ] })
           ]
         }
@@ -7701,7 +7636,7 @@ var CardDepositStep = ({
         Button,
         {
           variant: "primary",
-          size: "xl",
+          size: "large",
           className: "w-full",
           disabled: !isValid,
           onClick: () => onContinue(numericAmount),
@@ -7807,7 +7742,7 @@ var CryptoTransferStep = ({
           "button",
           {
             type: "button",
-            className: "flex items-center justify-center text-foreground hover:text-foreground/80 transition-colors hover:cursor-pointer mr-2",
+            className: "mr-2 flex items-center justify-center text-agg-foreground transition-colors hover:cursor-pointer hover:text-agg-foreground/80",
             onClick: onBack,
             "aria-label": "Go back",
             children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(ChevronLeftIcon, { className: "h-6 w-6" })
@@ -7819,7 +7754,7 @@ var CryptoTransferStep = ({
       /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "flex flex-col gap-5", children: [
         /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "flex gap-6", children: [
           /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "flex flex-1 flex-col gap-2 min-w-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("p", { className: "text-sm font-bold text-foreground leading-5", children: "Supported token" }),
+            /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("p", { className: "agg-type-label-strong text-agg-foreground", children: "Supported token" }),
             /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
               Select,
               {
@@ -7831,7 +7766,7 @@ var CryptoTransferStep = ({
             )
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "flex flex-1 flex-col gap-2 min-w-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("p", { className: "text-sm font-bold text-foreground leading-5", children: "Supported network" }),
+            /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("p", { className: "agg-type-label-strong text-agg-foreground", children: "Supported network" }),
             /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
               Select,
               {
@@ -7844,7 +7779,7 @@ var CryptoTransferStep = ({
           ] })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "flex flex-col gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("p", { className: "text-sm font-bold text-foreground leading-5", children: "Your deposit address" }),
+          /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("p", { className: "agg-type-label-strong text-agg-foreground", children: "Your deposit address" }),
           /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(
             "div",
             {
@@ -7854,12 +7789,12 @@ var CryptoTransferStep = ({
                 "h-10 px-3"
               ),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("p", { className: "flex-1 min-w-0 text-base text-foreground leading-6 truncate", children: depositAddress }),
+                /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("p", { className: "agg-type-body flex-1 min-w-0 truncate text-agg-foreground", children: depositAddress }),
                 /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
                   "button",
                   {
                     type: "button",
-                    className: "shrink-0 text-muted-foreground hover:text-foreground transition-colors",
+                    className: "shrink-0 text-agg-muted-foreground transition-colors hover:text-agg-foreground",
                     onClick: handleCopyAddress,
                     "aria-label": "Copy deposit address",
                     children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(CopyIcon, { className: "h-4 w-4" })
@@ -7870,7 +7805,7 @@ var CryptoTransferStep = ({
           )
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Button, { variant: "secondary", size: "xl", className: "w-full", onClick: onDone, children: "Done" })
+      /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Button, { variant: "secondary", size: "large", className: "w-full", onClick: onDone, children: "Done" })
     ] }) })
   ] });
 };
@@ -7883,13 +7818,13 @@ var KalshiStepCard = ({
   description,
   children
 }) => /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "flex flex-col gap-2 rounded-xl bg-secondary-hover p-4", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("p", { className: "text-xs font-bold uppercase leading-4 text-muted-foreground", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("p", { className: "agg-type-caption-caps text-agg-muted-foreground", children: [
     "Step ",
     step
   ] }),
   /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "flex flex-col gap-1", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("p", { className: "text-sm font-bold text-foreground leading-5", children: title }),
-    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("p", { className: "text-sm text-foreground leading-5", children: description })
+    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("p", { className: "agg-type-label-strong text-agg-foreground", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("p", { className: "agg-type-label text-agg-foreground", children: description })
   ] }),
   children
 ] });
@@ -7900,13 +7835,13 @@ var KalshiDepositStep = ({ depositUrl, onDone }) => /* @__PURE__ */ (0, import_j
       VenueLogo,
       {
         venue: "kalshi",
-        size: "xl",
+        size: "large",
         className: "h-[60px] w-[60px] rounded-lg"
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "flex flex-col items-center gap-4 text-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("h2", { className: "text-2xl font-bold text-foreground leading-8", children: "Fund Your Kalshi Account" }),
-      /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("p", { className: "text-base text-foreground leading-6", children: "To trade on Kalshi you'll need to add funds to your Kalshi balance first. You can do this on Kalshi's site." })
+      /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("h2", { className: "agg-type-heading text-agg-foreground", children: "Fund Your Kalshi Account" }),
+      /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("p", { className: "agg-type-body text-agg-foreground", children: "To trade on Kalshi you'll need to add funds to your Kalshi balance first. You can do this on Kalshi's site." })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "flex w-full flex-col gap-4", children: [
       /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
@@ -7919,7 +7854,7 @@ var KalshiDepositStep = ({ depositUrl, onDone }) => /* @__PURE__ */ (0, import_j
             Button,
             {
               variant: "secondary",
-              size: "s",
+              size: "small",
               suffix: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(ExternalLinkIcon, { className: "h-3.5 w-3.5" }),
               onClick: () => {
                 window.open(depositUrl, "_blank", "noopener,noreferrer");
@@ -7946,7 +7881,7 @@ var KalshiDepositStep = ({ depositUrl, onDone }) => /* @__PURE__ */ (0, import_j
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Button, { variant: "secondary", size: "l", onClick: onDone, children: "Done" })
+    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Button, { variant: "secondary", size: "large", onClick: onDone, children: "Done" })
   ] }) })
 ] });
 
@@ -8091,19 +8026,19 @@ var VenueRow2 = ({ venue, onSelect }) => {
         }
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(VenueLogo, { venue: venue.venue, size: "xl", className: "rounded-lg" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(VenueLogo, { venue: venue.venue, size: "large", className: "rounded-lg" }) }),
         /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "flex-1 min-w-0", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("p", { className: "text-base font-bold text-foreground leading-6", children: displayName }),
-          /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("p", { className: "text-sm text-muted-foreground leading-5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("p", { className: "agg-type-body-strong text-agg-foreground", children: displayName }),
+          /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("p", { className: "agg-type-label text-agg-muted-foreground", children: [
             "Balance ",
             formatCompactUsd(venue.balance)
           ] })
         ] }),
-        isDisabled ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("span", { className: "text-sm text-muted-foreground", children: (_b = venue.disabledReason) != null ? _b : "Unavailable" }) }) : /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+        isDisabled ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("span", { className: "agg-type-label text-agg-muted-foreground", children: (_b = venue.disabledReason) != null ? _b : "Unavailable" }) }) : /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
           Button,
           {
             variant: "secondary",
-            size: "s",
+            size: "small",
             suffix: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(ChevronRightIcon, {}),
             onClick: (e) => {
               e.stopPropagation();
@@ -8122,7 +8057,7 @@ var VenueSelectionStep2 = ({
 }) => /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(import_jsx_runtime82.Fragment, { children: [
   /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(Modal.Header, { title: "Withdraw", hideBorder: true }),
   /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(Modal.Body, { classNames: { root: "px-5 pt-0 pb-6 sm:px-8 sm:pt-0 sm:pb-8" }, children: /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "flex flex-col gap-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("p", { className: "text-base text-foreground leading-6", children: "Choose where to withdraw funds from:" }),
+    /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("p", { className: "agg-type-body text-agg-foreground", children: "Choose where to withdraw funds from:" }),
     /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "flex flex-col gap-3", children: venues.map((venue) => /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(VenueRow2, { venue, onSelect: onSelectVenue }, venue.venue)) })
   ] }) })
 ] });
@@ -8155,14 +8090,14 @@ var WithdrawMethodCard = ({
     children: [
       /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: "shrink-0 flex items-center justify-center h-10 w-10 rounded-lg bg-secondary-hover", children: icon }),
       /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: "flex-1 min-w-0", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("p", { className: "text-base font-bold text-foreground leading-6", children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("p", { className: "text-sm text-muted-foreground leading-5", children: description })
+        /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("p", { className: "agg-type-body-strong text-agg-foreground", children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("p", { className: "agg-type-label text-agg-muted-foreground", children: description })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
         Button,
         {
           variant: "secondary",
-          size: "s",
+          size: "small",
           suffix: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(ChevronRightIcon, {}),
           onClick: (e) => {
             e.stopPropagation();
@@ -8191,7 +8126,7 @@ var WithdrawMethodStep = ({
           "button",
           {
             type: "button",
-            className: "flex items-center justify-center text-foreground hover:text-foreground/80 transition-colors hover:cursor-pointer mr-2",
+            className: "mr-2 flex items-center justify-center text-agg-foreground transition-colors hover:cursor-pointer hover:text-agg-foreground/80",
             onClick: onBack,
             "aria-label": "Go back",
             children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(ChevronLeftIcon, { className: "h-6 w-6" })
@@ -8201,8 +8136,8 @@ var WithdrawMethodStep = ({
     ),
     /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Modal.Body, { classNames: { root: "px-5 pt-0 pb-6 sm:px-8 sm:pt-0 sm:pb-8" }, children: /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: "flex flex-col gap-4", children: [
       /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(VenueLogo, { venue: venue.venue, size: "xs", className: "rounded-sm" }),
-        /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("p", { className: "text-sm text-muted-foreground leading-5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(VenueLogo, { venue: venue.venue, size: "small", className: "rounded-sm" }),
+        /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("p", { className: "agg-type-label text-agg-muted-foreground", children: [
           displayName,
           " balance: ",
           formatCompactUsd(venue.balance)
@@ -8212,7 +8147,7 @@ var WithdrawMethodStep = ({
         /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
           WithdrawMethodCard,
           {
-            icon: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(WalletIcon, { className: "h-6 w-6 text-foreground" }),
+            icon: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(WalletIcon, { className: "h-6 w-6 text-agg-foreground" }),
             title: "Withdraw to Wallet",
             description: "Send funds to your crypto wallet as USDC.",
             onContinue: () => onSelectMethod("wallet")
@@ -8221,7 +8156,7 @@ var WithdrawMethodStep = ({
         /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
           WithdrawMethodCard,
           {
-            icon: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(BankIcon, { className: "h-6 w-6 text-foreground" }),
+            icon: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(BankIcon, { className: "h-6 w-6 text-agg-foreground" }),
             title: "Withdraw to Bank",
             description: "Transfer funds to your linked bank account.",
             onContinue: () => onSelectMethod("bank")
@@ -8267,7 +8202,7 @@ var WithdrawAmountStep = ({
           "button",
           {
             type: "button",
-            className: "flex items-center justify-center text-foreground hover:text-foreground/80 transition-colors hover:cursor-pointer mr-2",
+            className: "mr-2 flex items-center justify-center text-agg-foreground transition-colors hover:cursor-pointer hover:text-agg-foreground/80",
             onClick: onBack,
             "aria-label": "Go back",
             children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(ChevronLeftIcon, { className: "h-6 w-6" })
@@ -8278,8 +8213,8 @@ var WithdrawAmountStep = ({
     /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Modal.Body, { classNames: { root: "px-5 pt-0 pb-6 sm:px-8 sm:pt-0 sm:pb-8" }, children: /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: "flex flex-col gap-6", children: [
       /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: "flex items-center justify-between", children: [
         /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(VenueLogo, { venue: venue.venue, size: "xs", className: "rounded-sm" }),
-          /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("p", { className: "text-sm text-muted-foreground leading-5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(VenueLogo, { venue: venue.venue, size: "small", className: "rounded-sm" }),
+          /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("p", { className: "agg-type-label text-agg-muted-foreground", children: [
             displayName,
             " balance: ",
             formatCompactUsd(venue.balance)
@@ -8289,7 +8224,7 @@ var WithdrawAmountStep = ({
           "button",
           {
             type: "button",
-            className: "text-sm font-bold text-primary hover:text-primary/80 transition-colors",
+            className: "agg-type-label-strong text-agg-primary transition-colors hover:text-agg-primary/80",
             onClick: handleMax,
             children: "Max"
           }
@@ -8297,7 +8232,7 @@ var WithdrawAmountStep = ({
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: "flex-1 min-w-0", children: [
         /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: "flex items-baseline", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: "text-3xl sm:text-4xl font-bold text-foreground leading-none", children: "$" }),
+          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: "agg-type-display text-agg-foreground", children: "$" }),
           /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
             "input",
             {
@@ -8305,8 +8240,8 @@ var WithdrawAmountStep = ({
               inputMode: "decimal",
               "aria-label": "Amount",
               className: cn(
-                "w-full bg-transparent text-3xl sm:text-4xl font-bold leading-none outline-none",
-                exceedsBalance ? "text-error" : numericAmount > 0 ? "text-foreground" : "text-muted-foreground"
+                "agg-type-display w-full bg-transparent outline-none",
+                exceedsBalance ? "text-agg-error" : numericAmount > 0 ? "text-agg-foreground" : "text-agg-muted-foreground"
               ),
               placeholder: "0",
               value: rawAmount ? formatAmountDisplay(rawAmount) : "",
@@ -8314,13 +8249,13 @@ var WithdrawAmountStep = ({
             }
           )
         ] }),
-        exceedsBalance ? /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("p", { className: "mt-2 text-sm text-error", children: "Amount exceeds available balance" }) : null
+        exceedsBalance ? /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("p", { className: "agg-type-label mt-2 text-agg-error", children: "Amount exceeds available balance" }) : null
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
         Button,
         {
           variant: "primary",
-          size: "xl",
+          size: "large",
           className: "w-full",
           disabled: !isValid,
           onClick: () => onContinue(numericAmount),
@@ -8339,13 +8274,13 @@ var KalshiStepCard2 = ({
   description,
   children
 }) => /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: "flex flex-col gap-2 rounded-xl bg-secondary-hover p-4", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("p", { className: "text-xs font-bold uppercase leading-4 text-muted-foreground", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("p", { className: "agg-type-caption-caps text-agg-muted-foreground", children: [
     "Step ",
     step
   ] }),
   /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: "flex flex-col gap-1", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("p", { className: "text-sm font-bold text-foreground leading-5", children: title }),
-    /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("p", { className: "text-sm text-foreground leading-5", children: description })
+    /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("p", { className: "agg-type-label-strong text-agg-foreground", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("p", { className: "agg-type-label text-agg-foreground", children: description })
   ] }),
   children
 ] });
@@ -8359,13 +8294,13 @@ var KalshiWithdrawStep = ({
       VenueLogo,
       {
         venue: "kalshi",
-        size: "xl",
+        size: "large",
         className: "h-[60px] w-[60px] rounded-lg"
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: "flex flex-col items-center gap-4 text-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("h2", { className: "text-2xl font-bold text-foreground leading-8", children: "Withdraw from Kalshi" }),
-      /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("p", { className: "text-base text-foreground leading-6", children: "To withdraw from Kalshi you'll need to initiate the withdrawal from your Kalshi account directly on Kalshi's site." })
+      /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("h2", { className: "agg-type-heading text-agg-foreground", children: "Withdraw from Kalshi" }),
+      /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("p", { className: "agg-type-body text-agg-foreground", children: "To withdraw from Kalshi you'll need to initiate the withdrawal from your Kalshi account directly on Kalshi's site." })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: "flex w-full flex-col gap-4", children: [
       /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
@@ -8378,7 +8313,7 @@ var KalshiWithdrawStep = ({
             Button,
             {
               variant: "secondary",
-              size: "s",
+              size: "small",
               suffix: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(ExternalLinkIcon, { className: "h-3.5 w-3.5" }),
               onClick: () => {
                 window.open(withdrawUrl, "_blank", "noopener,noreferrer");
@@ -8405,7 +8340,7 @@ var KalshiWithdrawStep = ({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(Button, { variant: "secondary", size: "l", onClick: onDone, children: "Done" })
+    /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(Button, { variant: "secondary", size: "large", onClick: onDone, children: "Done" })
   ] }) })
 ] });
 
@@ -8500,7 +8435,7 @@ WithdrawModal.displayName = "WithdrawModal";
 
 // src/onboarding/index.tsx
 var import_react22 = require("react");
-var import_hooks30 = require("@agg-market/hooks");
+var import_hooks31 = require("@agg-market/hooks");
 var Dialog4 = __toESM(require("@radix-ui/react-dialog"));
 
 // src/onboarding/onboarding-modal.constants.ts
@@ -8523,7 +8458,7 @@ var ONCHAIN_VENUES = [
 
 // src/onboarding/steps/how-it-works.tsx
 var import_react18 = require("react");
-var import_hooks25 = require("@agg-market/hooks");
+var import_hooks26 = require("@agg-market/hooks");
 var import_jsx_runtime87 = require("react/jsx-runtime");
 var defaultIcons = {
   createAccount: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(CreateAccountIcon, { className: "h-[28px] w-[28px] text-agg-muted-foreground" }),
@@ -8532,7 +8467,7 @@ var defaultIcons = {
   stayInControl: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(StayInControlIcon, { className: "h-[28px] w-[28px] text-agg-muted-foreground" })
 };
 var HowItWorksStep = ({ onContinue, icons }) => {
-  const labels = (0, import_hooks25.useLabels)();
+  const labels = (0, import_hooks26.useLabels)();
   const scrollRef = (0, import_react18.useRef)(null);
   const [showTopGradient, setShowTopGradient] = (0, import_react18.useState)(false);
   const [showBottomGradient, setShowBottomGradient] = (0, import_react18.useState)(true);
@@ -8600,17 +8535,17 @@ var HowItWorksStep = ({ onContinue, icons }) => {
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Button, { variant: "primary", size: "l", className: "w-full", onClick: onContinue, children: labels.onboarding.howItWorks.continue })
+    /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Button, { variant: "primary", size: "large", className: "w-full", onClick: onContinue, children: labels.onboarding.howItWorks.continue })
   ] });
 };
 HowItWorksStep.displayName = "HowItWorksStep";
 
 // src/onboarding/steps/profile-setup.tsx
 var import_react19 = require("react");
-var import_hooks26 = require("@agg-market/hooks");
+var import_hooks27 = require("@agg-market/hooks");
 var import_jsx_runtime88 = require("react/jsx-runtime");
 var ProfileSetupStep = ({ onContinue }) => {
-  const labels = (0, import_hooks26.useLabels)();
+  const labels = (0, import_hooks27.useLabels)();
   const [username, setUsername] = (0, import_react19.useState)("");
   const [avatarFile, setAvatarFile] = (0, import_react19.useState)();
   const [avatarPreview, setAvatarPreview] = (0, import_react19.useState)();
@@ -8714,13 +8649,13 @@ var ProfileSetupStep = ({ onContinue }) => {
         )
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Button, { variant: "primary", size: "l", className: "w-full", onClick: handleContinue, children: labels.onboarding.profileSetup.continue })
+    /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Button, { variant: "primary", size: "large", className: "w-full", onClick: handleContinue, children: labels.onboarding.profileSetup.continue })
   ] });
 };
 ProfileSetupStep.displayName = "ProfileSetupStep";
 
 // src/onboarding/steps/connect-accounts.tsx
-var import_hooks27 = require("@agg-market/hooks");
+var import_hooks28 = require("@agg-market/hooks");
 var import_jsx_runtime89 = require("react/jsx-runtime");
 var OnchainVenueLogos = () => {
   return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { className: "flex gap-1 sm:gap-0 sm:-space-x-5", children: ONCHAIN_VENUES.map((venue, index) => /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
@@ -8728,7 +8663,7 @@ var OnchainVenueLogos = () => {
     {
       className: "overflow-hidden rounded sm:rounded-agg-md",
       style: { zIndex: ONCHAIN_VENUES.length - index },
-      children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(VenueLogo, { venue, size: "ms", className: "sm:h-8 sm:w-8" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(VenueLogo, { venue, size: "medium", className: "sm:h-8 sm:w-8" })
     },
     venue
   )) });
@@ -8742,12 +8677,12 @@ var VenueCard = ({
   onConnect,
   connected = false
 }) => {
-  const labels = (0, import_hooks27.useLabels)();
+  const labels = (0, import_hooks28.useLabels)();
   const action = connected ? /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(CheckCircleIcon, { className: "h-6 w-6 text-agg-success" }) : /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
     Button,
     {
       variant: "tertiary",
-      size: "l",
+      size: "large",
       className: "!h-auto !px-0 !py-0 text-agg-primary hover:bg-transparent hover:text-agg-primary-hover",
       onClick: onConnect,
       children: labels.onboarding.connectAccounts.connect
@@ -8757,7 +8692,7 @@ var VenueCard = ({
     Button,
     {
       variant: "tertiary",
-      size: "m",
+      size: "medium",
       className: "!h-auto !px-0 !py-0 text-agg-primary hover:bg-transparent hover:text-agg-primary-hover",
       onClick: onConnect,
       suffix: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(ChevronRightIcon, { className: "h-4 w-4" }),
@@ -8803,7 +8738,7 @@ var ConnectAccountsStep = ({
   connectedOnchain = false,
   connectedKalshi = false
 }) => {
-  const labels = (0, import_hooks27.useLabels)();
+  const labels = (0, import_hooks28.useLabels)();
   const canContinue = connectedOnchain || connectedKalshi;
   return /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: "flex flex-col gap-6", children: [
     /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("h2", { className: "text-center text-agg-2xl font-agg-bold text-agg-foreground", children: labels.onboarding.connectAccounts.title }),
@@ -8829,7 +8764,7 @@ var ConnectAccountsStep = ({
             VenueLogo,
             {
               venue: "kalshi",
-              size: "l",
+              size: "large",
               className: "h-6 w-6 sm:h-8 sm:w-8"
             }
           ) }),
@@ -8846,7 +8781,7 @@ var ConnectAccountsStep = ({
       Button,
       {
         variant: "primary",
-        size: "l",
+        size: "large",
         className: "w-full",
         onClick: onContinue,
         disabled: !canContinue,
@@ -8859,7 +8794,7 @@ ConnectAccountsStep.displayName = "ConnectAccountsStep";
 
 // src/onboarding/steps/connect-kalshi-modal.tsx
 var import_react20 = require("react");
-var import_hooks28 = require("@agg-market/hooks");
+var import_hooks29 = require("@agg-market/hooks");
 var Dialog2 = __toESM(require("@radix-ui/react-dialog"));
 var import_jsx_runtime90 = require("react/jsx-runtime");
 var ConnectKalshiModal = ({
@@ -8867,7 +8802,7 @@ var ConnectKalshiModal = ({
   onOpenChange,
   onVerify
 }) => {
-  const labels = (0, import_hooks28.useLabels)();
+  const labels = (0, import_hooks29.useLabels)();
   const [apiKeyId, setApiKeyId] = (0, import_react20.useState)("");
   const [privateKey, setPrivateKey] = (0, import_react20.useState)("");
   const [verifying, setVerifying] = (0, import_react20.useState)(false);
@@ -8938,7 +8873,7 @@ var ConnectKalshiModal = ({
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(Modal.Body, { classNames: { root: "!px-5 !pt-0 !pb-[60px] sm:!px-8" }, children: /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "flex flex-col gap-8 items-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: "overflow-hidden rounded-agg-lg", children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(VenueLogo, { venue: "kalshi", size: "xl" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: "overflow-hidden rounded-agg-lg", children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(VenueLogo, { venue: "kalshi", size: "large" }) }),
           /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "flex flex-col gap-4 items-center text-center", children: [
             /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("h2", { className: "text-agg-2xl font-agg-bold text-agg-foreground", children: labels.onboarding.connectKalshiModal.title }),
             /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("p", { className: "text-agg-base leading-agg-6 text-agg-foreground", children: labels.onboarding.connectKalshiModal.description })
@@ -9079,12 +9014,12 @@ var ConnectKalshiModal = ({
               /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("p", { className: "text-agg-sm leading-agg-5 text-agg-error", children: error })
             ] }) : null,
             /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "flex items-center gap-3 justify-center", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(Button, { variant: "secondary", size: "l", onClick: handleCancel, children: labels.onboarding.connectKalshiModal.actions.cancel }),
+              /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(Button, { variant: "secondary", size: "large", onClick: handleCancel, children: labels.onboarding.connectKalshiModal.actions.cancel }),
               /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
                 Button,
                 {
                   variant: "primary",
-                  size: "l",
+                  size: "large",
                   onClick: handleVerify,
                   disabled: !canVerify,
                   isLoading: verifying,
@@ -9102,7 +9037,7 @@ ConnectKalshiModal.displayName = "ConnectKalshiModal";
 
 // src/onboarding/steps/connect-onchain-modal.tsx
 var import_react21 = require("react");
-var import_hooks29 = require("@agg-market/hooks");
+var import_hooks30 = require("@agg-market/hooks");
 var Dialog3 = __toESM(require("@radix-ui/react-dialog"));
 var import_jsx_runtime91 = require("react/jsx-runtime");
 var ConnectOnchainModal = ({
@@ -9110,7 +9045,7 @@ var ConnectOnchainModal = ({
   onOpenChange,
   onConnect
 }) => {
-  const labels = (0, import_hooks29.useLabels)();
+  const labels = (0, import_hooks30.useLabels)();
   const [connecting, setConnecting] = (0, import_react21.useState)(false);
   const [error, setError] = (0, import_react21.useState)();
   const handleCancel = (0, import_react21.useCallback)(() => {
@@ -9170,7 +9105,7 @@ var ConnectOnchainModal = ({
             /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("p", { className: "text-agg-sm font-agg-bold uppercase leading-agg-5 text-agg-muted-foreground", children: labels.onboarding.connectOnchainModal.supportedVenuesLabel }),
             /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: "flex flex-wrap items-center justify-center gap-x-4 gap-y-3", children: ONCHAIN_VENUES.map((venue, index) => /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { className: "flex items-center gap-[6px]", children: [
               index > 0 && /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("span", { className: "mr-2.5 h-3 w-px bg-agg-separator" }),
-              /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(VenueLogo, { venue, size: "ms" }),
+              /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(VenueLogo, { venue, size: "medium" }),
               /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("span", { className: "text-agg-base text-agg-foreground", children: labels.venues[venue] })
             ] }, venue)) })
           ] }),
@@ -9180,13 +9115,22 @@ var ConnectOnchainModal = ({
                 /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(WarningIcon, { className: "h-3.5 w-3.5 shrink-0 text-agg-error" }),
                 /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("p", { className: "text-agg-sm leading-agg-5 text-agg-error", children: error })
               ] }) : null,
-              /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Button, { variant: "primary", size: "l", onClick: handleConnect, isLoading: connecting, children: labels.onboarding.connectOnchainModal.connect })
+              /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+                Button,
+                {
+                  variant: "primary",
+                  size: "large",
+                  onClick: handleConnect,
+                  isLoading: connecting,
+                  children: labels.onboarding.connectOnchainModal.connect
+                }
+              )
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
               Button,
               {
                 variant: "tertiary",
-                size: "m",
+                size: "medium",
                 className: "!h-auto !px-0 !py-0 text-agg-primary hover:bg-transparent hover:text-agg-primary-hover",
                 onClick: handleCancel,
                 children: labels.onboarding.connectOnchainModal.cancel
@@ -9214,7 +9158,7 @@ var OnboardingModal = ({
   connectedKalshi = false
 }) => {
   var _a;
-  const labels = (0, import_hooks30.useLabels)();
+  const labels = (0, import_hooks31.useLabels)();
   const [step, setStep] = (0, import_react22.useState)(ONBOARDING_STEPS.HOW_IT_WORKS);
   const stepLabels = {
     [ONBOARDING_STEPS.HOW_IT_WORKS]: labels.onboarding.modal.stepHowItWorks,
@@ -9324,7 +9268,7 @@ var PROFILE_TAB_ITEMS = [
 
 // src/profile/tabs/about-tab.tsx
 var import_react23 = require("react");
-var import_hooks31 = require("@agg-market/hooks");
+var import_hooks32 = require("@agg-market/hooks");
 var import_jsx_runtime93 = require("react/jsx-runtime");
 var AboutTab = ({
   avatarPreview,
@@ -9334,7 +9278,7 @@ var AboutTab = ({
   onDraftAvatarChange,
   draftAvatarPreview
 }) => {
-  const labels = (0, import_hooks31.useLabels)();
+  const labels = (0, import_hooks32.useLabels)();
   const fileInputRef = (0, import_react23.useRef)(null);
   const handleAvatarClick = (0, import_react23.useCallback)(() => {
     var _a;
@@ -9510,7 +9454,7 @@ var AccountsWalletsTab = ({
         const displayName = (_a = venueLogoLabels[account.venue]) != null ? _a : account.venue;
         return /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(AccountRow, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: "flex items-center gap-3 min-w-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(VenueLogo, { venue: account.venue, size: "s" }),
+            /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(VenueLogo, { venue: account.venue, size: "small" }),
             /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("span", { className: "text-agg-base font-agg-normal leading-6 text-agg-foreground whitespace-nowrap", children: displayName }),
             /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: "flex items-center gap-2 min-w-0", children: [
               /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("span", { className: "truncate text-agg-base font-agg-normal leading-6 text-agg-foreground", children: account.displayAddress }),
@@ -9518,7 +9462,7 @@ var AccountsWalletsTab = ({
                 Icon,
                 {
                   name: "check-badge",
-                  size: "s",
+                  size: "small",
                   color: "var(--agg-color-primary, #536dfe)"
                 }
               ) : null
@@ -9533,21 +9477,21 @@ var AccountsWalletsTab = ({
       /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: "flex flex-col gap-2", children: [
         /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(AccountRow, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: "flex items-center gap-3", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center text-agg-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(Icon, { name: "twitter", size: "s", color: "currentColor" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center text-agg-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(Icon, { name: "twitter", size: "small", color: "currentColor" }) }),
             /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("span", { className: "text-agg-base font-agg-normal leading-6 text-agg-foreground whitespace-nowrap", children: "X (Twitter)" })
           ] }),
           (twitter == null ? void 0 : twitter.connected) ? /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(DisconnectTextButton, { onClick: onDisconnectTwitter }) : /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(ConnectTextButton, { onClick: onConnectTwitter })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(AccountRow, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: "flex items-center gap-3", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center text-[#5865F2]", children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(Icon, { name: "discord", size: "s", color: "currentColor" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center text-[#5865F2]", children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(Icon, { name: "discord", size: "small", color: "currentColor" }) }),
             /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("span", { className: "text-agg-base font-agg-normal leading-6 text-agg-foreground whitespace-nowrap", children: "Discord" })
           ] }),
           (discord == null ? void 0 : discord.connected) ? /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(DisconnectTextButton, { onClick: onDisconnectDiscord }) : /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(ConnectTextButton, { onClick: onConnectDiscord })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(AccountRow, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: "flex items-center gap-3", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center text-[#26A5E4]", children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(Icon, { name: "telegram", size: "s", color: "currentColor" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center text-[#26A5E4]", children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(Icon, { name: "telegram", size: "small", color: "currentColor" }) }),
             /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("span", { className: "text-agg-base font-agg-normal leading-6 text-agg-foreground whitespace-nowrap", children: "Telegram" })
           ] }),
           (telegram == null ? void 0 : telegram.connected) ? /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(DisconnectTextButton, { onClick: onDisconnectTelegram }) : /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(ConnectTextButton, { onClick: onConnectTelegram })
@@ -9569,10 +9513,10 @@ var AccountsWalletsTab = ({
           ),
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: "flex items-center gap-3", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center text-agg-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(Icon, { name: "email", size: "s", color: "currentColor" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center text-agg-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(Icon, { name: "email", size: "small", color: "currentColor" }) }),
               /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("span", { className: "text-agg-base font-agg-normal leading-6 text-agg-foreground whitespace-nowrap", children: email != null ? email : "Connect email" })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(Icon, { name: "chevron-right", size: "s", color: "currentColor" })
+            /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(Icon, { name: "chevron-right", size: "small", color: "currentColor" })
           ]
         }
       )
@@ -9673,7 +9617,7 @@ var ProfileModal = ({
                 isActive ? "font-agg-normal text-agg-foreground bg-agg-secondary-hover border-agg-primary" : "font-agg-normal text-agg-foreground border-transparent"
               ),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(Icon, { name: tab.icon, size: "s", color: "currentColor" }),
+                /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(Icon, { name: tab.icon, size: "small", color: "currentColor" }),
                 /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("span", { className: "whitespace-nowrap", children: tab.label })
               ]
             },
@@ -9711,7 +9655,7 @@ var ProfileModal = ({
                   ),
                   children: [
                     isActive ? /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { className: "absolute left-0 top-0 bottom-0 w-1 bg-agg-primary" }) : null,
-                    /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(Icon, { name: tab.icon, size: "s", color: "currentColor" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(Icon, { name: tab.icon, size: "small", color: "currentColor" }),
                     /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("span", { className: "shrink-0 whitespace-nowrap", children: tab.label })
                   ]
                 },
@@ -9754,12 +9698,12 @@ var ProfileModal = ({
       ] })
     ] }) }),
     /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(Modal.Footer, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(Button, { variant: "secondary", size: "l", onClick: handleCancel, className: "min-w-[120px]", children: "Cancel" }),
+      /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(Button, { variant: "secondary", size: "large", onClick: handleCancel, className: "min-w-[120px]", children: "Cancel" }),
       /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
         Button,
         {
           variant: "primary",
-          size: "l",
+          size: "large",
           disabled: !hasChanges,
           isLoading: isSaving,
           onClick: handleSave,
@@ -9773,17 +9717,17 @@ ProfileModal.displayName = "ProfileModal";
 
 // src/pages/event-market/index.tsx
 var import_react27 = require("react");
-var import_hooks35 = require("@agg-market/hooks");
+var import_hooks36 = require("@agg-market/hooks");
 var import_dayjs6 = __toESM(require("dayjs"));
 
 // src/trading/place-order/index.tsx
 var import_react25 = require("react");
-var import_hooks33 = require("@agg-market/hooks");
+var import_hooks34 = require("@agg-market/hooks");
 
 // src/trading/utils.ts
-var import_hooks32 = require("@agg-market/hooks");
+var import_hooks33 = require("@agg-market/hooks");
 var import_dayjs5 = __toESM(require("dayjs"));
-var defaultLabels = (0, import_hooks32.resolveAggUiLabels)("en-US");
+var defaultLabels = (0, import_hooks33.resolveAggUiLabels)("en-US");
 var defaultSettlementSectionLabel = defaultLabels.trading.settlementSection;
 var defaultSettlementDifferencesTitle = defaultLabels.trading.settlementDifferencesTitle;
 var defaultTradingDisclaimer = defaultLabels.trading.disclaimer;
@@ -9875,6 +9819,26 @@ var getResultValueClassName = (tone) => {
     return "text-agg-foreground";
   return "text-agg-success";
 };
+var negativeOutcomePattern = /\b(no|down|against|under|lose|false)\b/i;
+var resolveIsPositiveOutcome = (outcome, index) => {
+  const outcomeText = `${outcome.id} ${outcome.label}`;
+  if (negativeOutcomePattern.test(outcomeText))
+    return false;
+  if (index === 1)
+    return false;
+  return true;
+};
+var getOutcomeButtonClassName2 = ({
+  enableAnimations,
+  isActive,
+  isPositive
+}) => {
+  return cn(
+    "flex-1 cursor-pointer rounded-agg-full border px-6 py-2.5 text-agg-base leading-agg-6",
+    getMotionClassName(enableAnimations, "transition-all duration-300 ease-in-out"),
+    isActive ? isPositive ? "border-transparent bg-[#18c15c] font-agg-bold text-agg-on-primary" : "border-transparent bg-[#e5455f] font-agg-bold text-agg-on-primary" : "border-transparent bg-agg-secondary-hover font-agg-normal text-agg-foreground hover:bg-agg-tertiary"
+  );
+};
 var getStatusContent = ({
   placement,
   status,
@@ -9931,8 +9895,8 @@ var PlaceOrder = ({
   onStatusAction,
   onTabChange
 }) => {
-  const { enableAnimations } = (0, import_hooks33.useSdkUiConfig)();
-  const labels = (0, import_hooks33.useLabels)();
+  const { enableAnimations } = (0, import_hooks34.useSdkUiConfig)();
+  const labels = (0, import_hooks34.useLabels)();
   const resolvedDisclaimer = disclaimer === defaultTradingDisclaimer ? labels.trading.disclaimer : disclaimer;
   if (isLoading) {
     return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
@@ -9977,7 +9941,7 @@ var PlaceOrder = ({
   const actionButton = /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
     Button,
     {
-      size: "xxl",
+      size: "large",
       className: "w-full",
       disabled: isPrimaryActionDisabled,
       isLoading: isPrimaryActionLoading,
@@ -10011,7 +9975,7 @@ var PlaceOrder = ({
               Icon,
               {
                 name: "close",
-                size: "m",
+                size: "medium",
                 className: "h-6 w-6 text-agg-foreground",
                 color: "currentColor"
               }
@@ -10031,21 +9995,25 @@ var PlaceOrder = ({
         variant: "underline",
         size: "s",
         overflowBehavior: "scroll",
-        className: "w-full"
+        classNames: {
+          root: "w-full",
+          tabList: "w-full"
+        }
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("div", { className: "flex flex-col gap-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { className: "flex w-full gap-2", children: outcomes.map((outcome) => {
+      /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { className: "flex w-full gap-2", children: outcomes.map((outcome, index) => {
         const isActive = outcome.id === resolvedOutcomeId;
+        const isPositive = resolveIsPositiveOutcome(outcome, index);
         return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
           "button",
           {
             type: "button",
-            className: cn(
-              "flex-1 rounded-agg-full px-6 py-2.5 text-agg-base leading-agg-6",
-              getMotionClassName(enableAnimations, "transition-colors"),
-              isActive ? "bg-agg-success font-agg-bold text-agg-on-primary" : "bg-agg-secondary-hover font-agg-normal text-agg-foreground"
-            ),
+            className: getOutcomeButtonClassName2({
+              enableAnimations,
+              isActive,
+              isPositive
+            }),
             "aria-pressed": isActive,
             "aria-label": `${outcome.label} ${outcome.priceLabel}`,
             onClick: () => handleOutcomeChange(outcome.id),
@@ -10088,7 +10056,7 @@ var PlaceOrder = ({
                       VenueLogo,
                       {
                         venue: row.venue,
-                        size: "s",
+                        size: "small",
                         ariaLabel: getTradingVenueLabel(row.venue)
                       }
                     ),
@@ -10150,7 +10118,7 @@ PlaceOrder.displayName = "PlaceOrder";
 
 // src/trading/settlement/index.tsx
 var import_react26 = require("react");
-var import_hooks34 = require("@agg-market/hooks");
+var import_hooks35 = require("@agg-market/hooks");
 var import_jsx_runtime97 = require("react/jsx-runtime");
 var getSettlementHeaderClassName = () => {
   return "flex items-center justify-between gap-4";
@@ -10169,12 +10137,18 @@ var Settlement = ({
   className
 }) => {
   var _a, _b;
-  const labels = (0, import_hooks34.useLabels)();
+  const labels = (0, import_hooks35.useLabels)();
+  const { enableAnimations } = (0, import_hooks35.useSdkUiConfig)();
   const resolvedSectionLabel = sectionLabel === defaultSettlementSectionLabel ? labels.trading.settlementSection : sectionLabel;
   const resolvedDifferencesTitle = differencesTitle === defaultSettlementDifferencesTitle ? labels.trading.settlementDifferencesTitle : differencesTitle;
   const [internalExpandedVenue, setInternalExpandedVenue] = (0, import_react26.useState)(
     (_b = defaultExpandedVenue != null ? defaultExpandedVenue : (_a = venues[0]) == null ? void 0 : _a.venue) != null ? _b : null
   );
+  const [expandedDescriptionByVenue, setExpandedDescriptionByVenue] = (0, import_react26.useState)({});
+  const [overflowingDescriptionByVenue, setOverflowingDescriptionByVenue] = (0, import_react26.useState)({});
+  const [collapsedDescriptionByVenue, setCollapsedDescriptionByVenue] = (0, import_react26.useState)({});
+  const descriptionWrapperRefs = (0, import_react26.useRef)(/* @__PURE__ */ new Map());
+  const descriptionMeasureRefs = (0, import_react26.useRef)(/* @__PURE__ */ new Map());
   (0, import_react26.useEffect)(() => {
     if (expandedVenue === void 0)
       return;
@@ -10188,6 +10162,154 @@ var Settlement = ({
     }
     onExpandedVenueChange == null ? void 0 : onExpandedVenueChange(nextVenue);
   };
+  const handleDescriptionWrapperRef = (0, import_react26.useCallback)(
+    (venue, element) => {
+      if (!element) {
+        descriptionWrapperRefs.current.delete(venue);
+        return;
+      }
+      descriptionWrapperRefs.current.set(venue, element);
+    },
+    []
+  );
+  const handleDescriptionMeasureRef = (0, import_react26.useCallback)(
+    (venue, element) => {
+      if (!element) {
+        descriptionMeasureRefs.current.delete(venue);
+        return;
+      }
+      descriptionMeasureRefs.current.set(venue, element);
+    },
+    []
+  );
+  const updateDescriptionLayout = (0, import_react26.useCallback)(
+    (venue, description, showMoreLabel) => {
+      const descriptionWrapperElement = descriptionWrapperRefs.current.get(venue);
+      const descriptionMeasureElement = descriptionMeasureRefs.current.get(venue);
+      if (!descriptionWrapperElement || !descriptionMeasureElement)
+        return;
+      const wrapperWidth = descriptionWrapperElement.clientWidth;
+      if (wrapperWidth <= 0)
+        return;
+      const computedStyles = window.getComputedStyle(descriptionWrapperElement);
+      const parsedLineHeight = Number.parseFloat(computedStyles.lineHeight);
+      const lineHeight = Number.isFinite(parsedLineHeight) ? parsedLineHeight : 20;
+      const maxHeight = lineHeight * 2 + 1;
+      descriptionMeasureElement.style.width = `${wrapperWidth}px`;
+      const getHeight = (value) => {
+        descriptionMeasureElement.textContent = value;
+        return descriptionMeasureElement.scrollHeight;
+      };
+      const fullHeight = getHeight(description);
+      if (fullHeight <= maxHeight) {
+        setOverflowingDescriptionByVenue((currentState) => {
+          if (currentState[venue] === false)
+            return currentState;
+          return __spreadProps(__spreadValues({}, currentState), {
+            [venue]: false
+          });
+        });
+        setCollapsedDescriptionByVenue((currentState) => {
+          if (currentState[venue] === description)
+            return currentState;
+          return __spreadProps(__spreadValues({}, currentState), {
+            [venue]: description
+          });
+        });
+        return;
+      }
+      const suffix = `... ${showMoreLabel}`;
+      let left = 0;
+      let right = description.length;
+      let bestLength = 0;
+      while (left <= right) {
+        const middle = Math.floor((left + right) / 2);
+        const candidate = description.slice(0, middle).trimEnd();
+        const candidateHeight = getHeight(`${candidate}${suffix}`);
+        if (candidateHeight <= maxHeight) {
+          bestLength = middle;
+          left = middle + 1;
+          continue;
+        }
+        right = middle - 1;
+      }
+      const collapsedDescription = description.slice(0, bestLength).trimEnd();
+      setOverflowingDescriptionByVenue((currentState) => {
+        if (currentState[venue] === true)
+          return currentState;
+        return __spreadProps(__spreadValues({}, currentState), {
+          [venue]: true
+        });
+      });
+      setCollapsedDescriptionByVenue((currentState) => {
+        if (currentState[venue] === collapsedDescription)
+          return currentState;
+        return __spreadProps(__spreadValues({}, currentState), {
+          [venue]: collapsedDescription
+        });
+      });
+    },
+    []
+  );
+  (0, import_react26.useEffect)(() => {
+    if (typeof window === "undefined")
+      return;
+    if (!resolvedExpandedVenue)
+      return;
+    if (expandedDescriptionByVenue[resolvedExpandedVenue])
+      return;
+    const expandedVenueItem = venues.find((venueItem) => venueItem.venue === resolvedExpandedVenue);
+    if (!expandedVenueItem)
+      return;
+    const frameId = window.requestAnimationFrame(() => {
+      var _a2;
+      updateDescriptionLayout(
+        resolvedExpandedVenue,
+        expandedVenueItem.description,
+        (_a2 = expandedVenueItem.showMoreLabel) != null ? _a2 : "Show more"
+      );
+    });
+    return () => {
+      window.cancelAnimationFrame(frameId);
+    };
+  }, [expandedDescriptionByVenue, resolvedExpandedVenue, updateDescriptionLayout, venues]);
+  (0, import_react26.useEffect)(() => {
+    if (!resolvedExpandedVenue)
+      return;
+    if (expandedDescriptionByVenue[resolvedExpandedVenue])
+      return;
+    if (typeof ResizeObserver === "undefined")
+      return;
+    const expandedVenueItem = venues.find((venueItem) => venueItem.venue === resolvedExpandedVenue);
+    if (!expandedVenueItem)
+      return;
+    const descriptionWrapperElement = descriptionWrapperRefs.current.get(resolvedExpandedVenue);
+    if (!descriptionWrapperElement)
+      return;
+    const resizeObserver = new ResizeObserver(() => {
+      var _a2;
+      updateDescriptionLayout(
+        resolvedExpandedVenue,
+        expandedVenueItem.description,
+        (_a2 = expandedVenueItem.showMoreLabel) != null ? _a2 : "Show more"
+      );
+    });
+    resizeObserver.observe(descriptionWrapperElement);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [expandedDescriptionByVenue, resolvedExpandedVenue, updateDescriptionLayout, venues]);
+  const handleDescriptionShowMoreClick = (event, venue) => {
+    event == null ? void 0 : event.stopPropagation();
+    setExpandedDescriptionByVenue((currentState) => {
+      if (currentState[venue])
+        return currentState;
+      return __spreadProps(__spreadValues({}, currentState), {
+        [venue]: true
+      });
+    });
+    onShowMore == null ? void 0 : onShowMore(venue);
+  };
   if (isLoading) {
     return /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
       Skeleton,
@@ -10216,25 +10338,53 @@ var Settlement = ({
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("div", { className: "h-px w-full bg-agg-separator" }),
         /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("div", { className: "flex flex-col gap-3", children: venues.map((venue) => {
+          var _a2, _b2;
           const venueLabel = getTradingVenueLabel(venue.venue, venue.label);
           const isExpanded = resolvedExpandedVenue === venue.venue;
-          return /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: cn("flex flex-col", isExpanded ? "gap-2" : "gap-0"), children: [
+          const isDescriptionExpanded = !!expandedDescriptionByVenue[venue.venue];
+          const isDescriptionOverflowing = !!overflowingDescriptionByVenue[venue.venue];
+          const shouldShowDescriptionCta = isExpanded && isDescriptionOverflowing && !isDescriptionExpanded;
+          const resolvedShowMoreLabel = (_a2 = venue.showMoreLabel) != null ? _a2 : "Show more";
+          return /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: "flex flex-col", children: [
             /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(
               "button",
               {
                 type: "button",
-                className: "flex items-center gap-2 text-left",
+                className: cn(
+                  "flex items-center gap-2 text-left",
+                  "cursor-pointer disabled:cursor-not-allowed hover:opacity-50",
+                  getMotionClassName(
+                    enableAnimations,
+                    "transition-[opacity,color] duration-200 ease-in-out"
+                  )
+                ),
                 "aria-expanded": isExpanded,
                 "aria-label": labels.trading.settlementDetailsAria(venueLabel),
                 onClick: () => handleVenueClick(venue.venue),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(VenueLogo, { venue: venue.venue, size: "s", ariaLabel: venueLabel }),
-                  /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("span", { className: "text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground", children: venueLabel }),
+                  /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+                    VenueLogo,
+                    {
+                      venue: venue.venue,
+                      size: "small",
+                      ariaLabel: venueLabel
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+                    "span",
+                    {
+                      className: cn(
+                        "text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground",
+                        isExpanded ? "text-agg-primary" : "text-agg-foreground"
+                      ),
+                      children: venueLabel
+                    }
+                  ),
                   /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
                     Icon,
                     {
                       name: isExpanded ? "chevron-up" : "chevron-down",
-                      size: "s",
+                      size: "small",
                       className: "text-agg-foreground",
                       color: "currentColor"
                     }
@@ -10242,25 +10392,65 @@ var Settlement = ({
                 ]
               }
             ),
-            isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("p", { className: "text-agg-sm leading-agg-5 text-agg-foreground", children: [
-              venue.description,
-              venue.showMoreLabel ? /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(import_jsx_runtime97.Fragment, { children: [
-                " ",
-                /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
-                  "button",
+            /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+              "div",
+              {
+                "aria-hidden": !isExpanded,
+                className: cn(
+                  "grid overflow-hidden",
+                  isExpanded ? "mt-2 grid-rows-[1fr] opacity-100" : "mt-0 grid-rows-[0fr] opacity-0",
+                  !isExpanded && "pointer-events-none",
+                  getMotionClassName(
+                    enableAnimations,
+                    "transition-[grid-template-rows,opacity,margin-top] duration-300 ease-in-out"
+                  )
+                ),
+                children: /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(
+                  "div",
                   {
-                    type: "button",
-                    className: "font-agg-normal text-agg-foreground underline-offset-2 hover:underline",
-                    "aria-label": labels.trading.settlementShowMoreAria(
-                      venue.showMoreLabel,
-                      venueLabel
-                    ),
-                    onClick: () => onShowMore == null ? void 0 : onShowMore(venue.venue),
-                    children: venue.showMoreLabel
+                    ref: (element) => handleDescriptionWrapperRef(venue.venue, element),
+                    className: "relative min-h-0",
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("p", { className: "min-h-0 text-agg-sm leading-agg-5 text-agg-foreground", children: [
+                        isDescriptionExpanded || !isDescriptionOverflowing ? venue.description : (_b2 = collapsedDescriptionByVenue[venue.venue]) != null ? _b2 : venue.description,
+                        shouldShowDescriptionCta ? /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(import_jsx_runtime97.Fragment, { children: [
+                          "... ",
+                          /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+                            "button",
+                            {
+                              type: "button",
+                              tabIndex: isExpanded ? 0 : -1,
+                              className: cn(
+                                "cursor-pointer disabled:cursor-not-allowed",
+                                "text-agg-sm leading-agg-5 text-agg-foreground underline-offset-2 hover:underline hover:font-agg-bold",
+                                getMotionClassName(
+                                  enableAnimations,
+                                  "transition-[text-decoration] duration-200 ease-in-out"
+                                )
+                              ),
+                              "aria-label": labels.trading.settlementShowMoreAria(
+                                resolvedShowMoreLabel,
+                                venueLabel
+                              ),
+                              onClick: (event) => handleDescriptionShowMoreClick(event, venue.venue),
+                              children: resolvedShowMoreLabel
+                            }
+                          )
+                        ] }) : null
+                      ] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+                        "p",
+                        {
+                          ref: (element) => handleDescriptionMeasureRef(venue.venue, element),
+                          "aria-hidden": true,
+                          className: "pointer-events-none invisible fixed top-0 left-0 -z-10 whitespace-normal text-agg-sm leading-agg-5"
+                        }
+                      )
+                    ]
                   }
                 )
-              ] }) : null
-            ] }) : null
+              }
+            )
           ] }, venue.venue);
         }) })
       ]
@@ -10329,7 +10519,7 @@ var resolveInitialExpandedMarketId = (detailedMarkets, defaultExpandedMarketId)
 var EventMarketPageUnavailableState = ({
   ariaLabel
 }) => {
-  const labels = (0, import_hooks35.useLabels)();
+  const labels = (0, import_hooks36.useLabels)();
   return /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
     Card,
     {
@@ -10337,8 +10527,8 @@ var EventMarketPageUnavailableState = ({
       role: "status",
       "aria-label": ariaLabel != null ? ariaLabel : labels.eventMarketPage.unavailableAria,
       children: /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(Typography, { variant: "title", children: labels.eventMarketPage.unavailableTitle }),
-        /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(Typography, { variant: "meta", children: labels.eventMarketPage.unavailableDescription })
+        /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(Typography, { variant: "body-large-strong", children: labels.eventMarketPage.unavailableTitle }),
+        /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(Typography, { variant: "label", className: "text-agg-muted-foreground", children: labels.eventMarketPage.unavailableDescription })
       ] })
     }
   );
@@ -10348,7 +10538,7 @@ var EventMarketPageLoadingState = ({
   settlement,
   classNames
 }) => {
-  const labels = (0, import_hooks35.useLabels)();
+  const labels = (0, import_hooks36.useLabels)();
   const fallbackSettlement = settlement != null ? settlement : {
     sectionLabel: labels.trading.settlementSection,
     question: labels.eventMarketPage.loadingSettlementQuestion,
@@ -10414,7 +10604,7 @@ var EventMarketPageContent = ({
   classNames,
   ariaLabel
 }) => {
-  const labels = (0, import_hooks35.useLabels)();
+  const labels = (0, import_hooks36.useLabels)();
   const resolvedHeroMarketId = (0, import_react27.useMemo)(() => {
     return resolveHeroMarketId(event, heroMarketId);
   }, [event, heroMarketId]);
@@ -10499,7 +10689,7 @@ var EventMarketPageContent = ({
 };
 var EventMarketPage = (props) => {
   const hasEventProp = "event" in props && !!props.event;
-  const { event: fetchedEvent, isLoading: isFetchingEvent } = (0, import_hooks35.useEvent)(
+  const { event: fetchedEvent, isLoading: isFetchingEvent } = (0, import_hooks36.useEvent)(
     hasEventProp ? void 0 : props.eventId,
     {
       enabled: !props.isLoading && !hasEventProp && !!props.eventId
@@ -10564,7 +10754,7 @@ var BalanceDisplay = ({
       ),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { className: "flex items-end gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("span", { className: "font-agg-sans text-[30px] leading-[36px] font-agg-bold text-agg-foreground", children: (_a = currentBalance == null ? void 0 : currentBalance.totalLabel) != null ? _a : "$0.00" }),
+          /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("span", { className: "agg-type-display text-agg-foreground", children: (_a = currentBalance == null ? void 0 : currentBalance.totalLabel) != null ? _a : "$0.00" }),
           /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("span", { className: "font-agg-sans text-agg-base leading-6 font-agg-normal text-agg-muted-foreground", children: "Profit/Loss" }),
           /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { className: "flex items-center gap-1", children: [
             /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
@@ -10581,7 +10771,7 @@ var BalanceDisplay = ({
               Icon,
               {
                 name: "triangle-up-filled",
-                size: "xxs",
+                size: "small",
                 className: cn(
                   (currentBalance == null ? void 0 : currentBalance.isPositive) ? "text-agg-success" : "rotate-180 text-agg-error"
                 )
@@ -10627,11 +10817,11 @@ var BalancesCard = ({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("h3", { className: "font-agg-sans text-[18px] leading-7 font-agg-bold text-agg-foreground", children: "Balances" }),
+        /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("h3", { className: "agg-type-body-large-strong text-agg-foreground", children: "Balances" }),
         /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("div", { className: "relative min-h-0 flex-1 overflow-clip", children: [
           /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("div", { className: "flex max-h-full flex-col gap-3 overflow-y-auto pr-1", children: venueBalances.map((balance, idx) => /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("div", { className: "flex items-center justify-between", children: [
             /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("div", { className: "flex items-center gap-1.5", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(VenueLogo, { venue: balance.venue, size: "s" }),
+              /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(VenueLogo, { venue: balance.venue, size: "small" }),
               /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("span", { className: "font-agg-sans text-agg-base leading-6 font-agg-normal text-agg-foreground capitalize", children: balance.venue })
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("span", { className: "font-agg-sans text-agg-base leading-6 font-agg-bold text-agg-foreground", children: balance.balanceLabel })
@@ -10645,8 +10835,8 @@ var BalancesCard = ({
           )
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("div", { className: "flex items-center gap-3", children: [
-          onDeposit ? /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(Button, { variant: "primary", size: "s", onClick: onDeposit, className: "flex-1", children: "Deposit" }) : null,
-          onWithdraw ? /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(Button, { variant: "secondary", size: "s", onClick: onWithdraw, className: "flex-1", children: "Withdraw" }) : null
+          onDeposit ? /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(Button, { variant: "primary", size: "small", onClick: onDeposit, className: "flex-1", children: "Deposit" }) : null,
+          onWithdraw ? /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(Button, { variant: "secondary", size: "small", onClick: onWithdraw, className: "flex-1", children: "Withdraw" }) : null
         ] })
       ]
     }
@@ -10676,7 +10866,7 @@ var ActivityRow = ({ activity, onClick }) => {
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("p", { className: "w-[60px] shrink-0 font-agg-sans text-agg-base leading-agg-6 font-agg-normal text-agg-foreground", children: activity.type }),
         /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(VenueLogo, { venue: activity.venue, size: "s", className: "shrink-0" }),
+          /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(VenueLogo, { venue: activity.venue, size: "small", className: "shrink-0" }),
           /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-4", children: [
             /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
               "img",
@@ -10788,7 +10978,7 @@ var PositionRow = ({ position, onClick }) => {
       onClick: handleClick,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(VenueLogo, { venue: position.venue, size: "s", className: "shrink-0" }),
+          /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(VenueLogo, { venue: position.venue, size: "small", className: "shrink-0" }),
           /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-4", children: [
             /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
               "img",
@@ -10807,8 +10997,8 @@ var PositionRow = ({ position, onClick }) => {
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("p", { className: "w-[120px] shrink-0 font-agg-sans text-[20px] leading-7 font-agg-normal text-agg-foreground", children: position.averageLabel }),
-        /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("p", { className: "w-[120px] shrink-0 font-agg-sans text-[20px] leading-7 font-agg-normal text-agg-foreground", children: position.currentLabel }),
+        /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("p", { className: "w-[120px] shrink-0 agg-type-title text-agg-foreground", children: position.averageLabel }),
+        /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("p", { className: "w-[120px] shrink-0 agg-type-title text-agg-foreground", children: position.currentLabel }),
         /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("div", { className: "flex items-center gap-6 shrink-0", children: [
           /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("div", { className: "flex w-[140px] flex-col items-end justify-center gap-1 text-agg-base leading-agg-6 whitespace-nowrap", children: [
             /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("p", { className: "font-agg-sans font-agg-bold text-black", children: position.valueLabel }),
@@ -10823,7 +11013,7 @@ var PositionRow = ({ position, onClick }) => {
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(Icon, { name: "chevron-right", size: "s", className: "shrink-0 text-agg-muted-foreground" })
+          /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(Icon, { name: "chevron-right", size: "small", className: "shrink-0 text-agg-muted-foreground" })
         ] })
       ]
     }
@@ -10904,7 +11094,7 @@ var PositionsActivity = ({
               ] }, filter.value);
             }) }) : null,
             /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("label", { className: "flex min-w-0 flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)("div", { className: "flex h-10 w-full items-center gap-3 rounded-agg-sm border border-agg-separator bg-agg-secondary px-3 py-2.5 focus-within:border-2 focus-within:border-agg-primary", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(Icon, { name: "search", size: "s", className: "shrink-0 text-agg-muted-foreground" }),
+              /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(Icon, { name: "search", size: "small", className: "shrink-0 text-agg-muted-foreground" }),
               /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
                 "input",
                 {
@@ -11028,14 +11218,14 @@ var UserInfoCard = ({
         /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-4", children: [
           /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
             /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("h2", { className: "font-agg-sans text-[24px] leading-8 font-agg-bold text-agg-foreground", children: user.username }),
+              /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("h2", { className: "agg-type-heading text-agg-foreground", children: user.username }),
               user.socialLinks && user.socialLinks.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: "flex items-center gap-2", children: user.socialLinks.map((social) => {
                 const iconName = social.platform === "twitter" ? "twitter" : social.platform === "discord" ? "discord" : "telegram";
                 return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
                   "span",
                   {
                     className: "flex size-8 shrink-0 items-center justify-center rounded-full border border-agg-separator bg-agg-secondary",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(Icon, { name: iconName, size: "s", className: "text-agg-foreground" })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(Icon, { name: iconName, size: "small", className: "text-agg-foreground" })
                   },
                   social.platform
                 );
@@ -11048,7 +11238,7 @@ var UserInfoCard = ({
                 onClick: onEditProfile,
                 className: "flex shrink-0 cursor-pointer items-center gap-1.5 bg-transparent text-agg-primary hover:opacity-80",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(Icon, { name: "pencil", size: "s", className: "text-agg-primary" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(Icon, { name: "pencil", size: "small", className: "text-agg-primary" }),
                   /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("span", { className: "text-agg-base font-agg-bold leading-6", children: "Edit" })
                 ]
               }
@@ -11064,7 +11254,7 @@ var UserInfoCard = ({
                     idx > 0 && "-ml-2"
                   ),
                   style: { zIndex: evmExchanges.length - idx },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(VenueLogo, { venue: exchange.venue, size: "s", className: "h-5 w-5" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(VenueLogo, { venue: exchange.venue, size: "small", className: "h-5 w-5" })
                 },
                 `${exchange.venue}-${idx}`
               )) }),
@@ -11075,11 +11265,11 @@ var UserInfoCard = ({
                   " exchange",
                   totalExchangeCount !== 1 ? "s" : ""
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(Icon, { name: "info", size: "xs", className: "text-agg-muted-foreground" })
+                /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(Icon, { name: "info", size: "small", className: "text-agg-muted-foreground" })
               ] })
             ] }) : null,
             user.socialHandle ? /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { className: "flex items-center gap-3", children: [
-              user.socialHandleVenue ? /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: "flex h-5 w-5 shrink-0 items-center justify-center overflow-hidden rounded-[4px]", children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(VenueLogo, { venue: user.socialHandleVenue, size: "s", className: "h-5 w-5" }) }) : null,
+              user.socialHandleVenue ? /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: "flex h-5 w-5 shrink-0 items-center justify-center overflow-hidden rounded-[4px]", children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(VenueLogo, { venue: user.socialHandleVenue, size: "small", className: "h-5 w-5" }) }) : null,
               /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("span", { className: "text-agg-base font-agg-normal leading-6 text-agg-foreground", children: user.socialHandle })
             ] }) : null
           ] }) : null
@@ -11349,5 +11539,6 @@ var placeOrderViewModelSchema = import_zod3.z.object({
   skeletonViews,
   toDate,
   tradingVenueSchema,
+  typographyVariants,
   venueLogoNames
 });