@agg-market/ui 1.0.0 → 2.0.0

package/dist/chunk-K6IJ4WBM.mjs

@@ -0,0 +1,67 @@
+import {
+  __spreadProps,
+  __spreadValues,
+  cn,
+  getMotionClassName
+} from "./chunk-GJ4U5NCE.mjs";
+
+// src/primitives/badge/index.tsx
+import { useSdkUiConfig } from "@agg-market/hooks";
+
+// src/primitives/badge/badge.constants.ts
+var badgeSizes = ["small", "medium", "large"];
+var badgeSizeClasses = {
+  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",
+  "bg-agg-secondary-hover text-agg-foreground whitespace-nowrap font-agg-normal"
+);
+
+// src/primitives/badge/index.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Badge({
+  text,
+  prefix,
+  suffix,
+  size = "medium",
+  classNames,
+  onClick,
+  isActive = false
+}) {
+  const { enableAnimations } = useSdkUiConfig();
+  const resolvedText = `${text}`;
+  const resolvedAriaLabel = resolvedText.length > 0 ? resolvedText : void 0;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    __spreadProps(__spreadValues({
+      "aria-label": resolvedAriaLabel,
+      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__ */ jsx("span", { className: classNames == null ? void 0 : classNames.prefix, children: prefix }) : null,
+        /* @__PURE__ */ jsx("span", { className: cn("truncate", classNames == null ? void 0 : classNames.text), children: text }),
+        suffix ? /* @__PURE__ */ jsx("span", { className: classNames == null ? void 0 : classNames.suffix, children: suffix }) : null
+      ]
+    })
+  );
+}
+Badge.displayName = "Badge";
+
+export {
+  badgeSizes,
+  Badge
+};

package/dist/{chunk-PGSPYQOW.mjs → chunk-KAGYJ4XT.mjs}

@@ -1,6 +1,6 @@
 import {
   iconSizeClasses
-} from "./chunk-ZVBVGWSP.mjs";
+} from "./chunk-FO263M3V.mjs";
 import {
   __objRest,
   __spreadProps,
@@ -14,31 +14,19 @@ import { useSdkUiConfig } from "@agg-market/hooks";
 
 // 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(
@@ -54,10 +42,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(
@@ -73,7 +62,7 @@ var Button = (_a) => {
   var _b = _a, {
     children,
     variant = "primary",
-    size = "m",
+    size = "medium",
     isLoading = false,
     disabled,
     prefix,
@@ -100,8 +89,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],

package/dist/{chunk-RGZQHSNJ.mjs → chunk-KCPDVBIZ.mjs}

@@ -1,9 +1,9 @@
 import {
   Modal
-} from "./chunk-VIP7HSOU.mjs";
+} from "./chunk-5K7VXAYM.mjs";
 import {
   VenueLogo
-} from "./chunk-BLSHXIAH.mjs";
+} from "./chunk-D7JTOGYP.mjs";
 import {
   BestPricesIcon,
   CheckCircleIcon,
@@ -15,10 +15,10 @@ import {
   ProfileIcon,
   StayInControlIcon,
   WarningIcon
-} from "./chunk-F236MLT6.mjs";
+} from "./chunk-PZTHM6WG.mjs";
 import {
   Button
-} from "./chunk-PGSPYQOW.mjs";
+} from "./chunk-KAGYJ4XT.mjs";
 import {
   __async,
   cn
@@ -126,7 +126,7 @@ var HowItWorksStep = ({ onContinue, icons }) => {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx(Button, { variant: "primary", size: "l", className: "w-full", onClick: onContinue, children: labels.onboarding.howItWorks.continue })
+    /* @__PURE__ */ jsx(Button, { variant: "primary", size: "large", className: "w-full", onClick: onContinue, children: labels.onboarding.howItWorks.continue })
   ] });
 };
 HowItWorksStep.displayName = "HowItWorksStep";
@@ -240,7 +240,7 @@ var ProfileSetupStep = ({ onContinue }) => {
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsx2(Button, { variant: "primary", size: "l", className: "w-full", onClick: handleContinue, children: labels.onboarding.profileSetup.continue })
+    /* @__PURE__ */ jsx2(Button, { variant: "primary", size: "large", className: "w-full", onClick: handleContinue, children: labels.onboarding.profileSetup.continue })
   ] });
 };
 ProfileSetupStep.displayName = "ProfileSetupStep";
@@ -254,7 +254,7 @@ var OnchainVenueLogos = () => {
     {
       className: "overflow-hidden rounded sm:rounded-agg-md",
       style: { zIndex: ONCHAIN_VENUES.length - index },
-      children: /* @__PURE__ */ jsx3(VenueLogo, { venue, size: "ms", className: "sm:h-8 sm:w-8" })
+      children: /* @__PURE__ */ jsx3(VenueLogo, { venue, size: "medium", className: "sm:h-8 sm:w-8" })
     },
     venue
   )) });
@@ -273,7 +273,7 @@ var VenueCard = ({
     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
@@ -283,7 +283,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__ */ jsx3(ChevronRightIcon, { className: "h-4 w-4" }),
@@ -355,7 +355,7 @@ var ConnectAccountsStep = ({
             VenueLogo,
             {
               venue: "kalshi",
-              size: "l",
+              size: "large",
               className: "h-6 w-6 sm:h-8 sm:w-8"
             }
           ) }),
@@ -372,7 +372,7 @@ var ConnectAccountsStep = ({
       Button,
       {
         variant: "primary",
-        size: "l",
+        size: "large",
         className: "w-full",
         onClick: onContinue,
         disabled: !canContinue,
@@ -464,7 +464,7 @@ var ConnectKalshiModal = ({
           }
         ),
         /* @__PURE__ */ jsx4(Modal.Body, { classNames: { root: "!px-5 !pt-0 !pb-[60px] sm:!px-8" }, children: /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-8 items-center", children: [
-          /* @__PURE__ */ jsx4("div", { className: "overflow-hidden rounded-agg-lg", children: /* @__PURE__ */ jsx4(VenueLogo, { venue: "kalshi", size: "xl" }) }),
+          /* @__PURE__ */ jsx4("div", { className: "overflow-hidden rounded-agg-lg", children: /* @__PURE__ */ jsx4(VenueLogo, { venue: "kalshi", size: "large" }) }),
           /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-4 items-center text-center", children: [
             /* @__PURE__ */ jsx4("h2", { className: "text-agg-2xl font-agg-bold text-agg-foreground", children: labels.onboarding.connectKalshiModal.title }),
             /* @__PURE__ */ jsx4("p", { className: "text-agg-base leading-agg-6 text-agg-foreground", children: labels.onboarding.connectKalshiModal.description })
@@ -605,12 +605,12 @@ var ConnectKalshiModal = ({
               /* @__PURE__ */ jsx4("p", { className: "text-agg-sm leading-agg-5 text-agg-error", children: error })
             ] }) : null,
             /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-3 justify-center", children: [
-              /* @__PURE__ */ jsx4(Button, { variant: "secondary", size: "l", onClick: handleCancel, children: labels.onboarding.connectKalshiModal.actions.cancel }),
+              /* @__PURE__ */ jsx4(Button, { variant: "secondary", size: "large", onClick: handleCancel, children: labels.onboarding.connectKalshiModal.actions.cancel }),
               /* @__PURE__ */ jsx4(
                 Button,
                 {
                   variant: "primary",
-                  size: "l",
+                  size: "large",
                   onClick: handleVerify,
                   disabled: !canVerify,
                   isLoading: verifying,
@@ -696,7 +696,7 @@ var ConnectOnchainModal = ({
             /* @__PURE__ */ jsx5("p", { className: "text-agg-sm font-agg-bold uppercase leading-agg-5 text-agg-muted-foreground", children: labels.onboarding.connectOnchainModal.supportedVenuesLabel }),
             /* @__PURE__ */ jsx5("div", { className: "flex flex-wrap items-center justify-center gap-x-4 gap-y-3", children: ONCHAIN_VENUES.map((venue, index) => /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-[6px]", children: [
               index > 0 && /* @__PURE__ */ jsx5("span", { className: "mr-2.5 h-3 w-px bg-agg-separator" }),
-              /* @__PURE__ */ jsx5(VenueLogo, { venue, size: "ms" }),
+              /* @__PURE__ */ jsx5(VenueLogo, { venue, size: "medium" }),
               /* @__PURE__ */ jsx5("span", { className: "text-agg-base text-agg-foreground", children: labels.venues[venue] })
             ] }, venue)) })
           ] }),
@@ -706,13 +706,22 @@ var ConnectOnchainModal = ({
                 /* @__PURE__ */ jsx5(WarningIcon, { className: "h-3.5 w-3.5 shrink-0 text-agg-error" }),
                 /* @__PURE__ */ jsx5("p", { className: "text-agg-sm leading-agg-5 text-agg-error", children: error })
               ] }) : null,
-              /* @__PURE__ */ jsx5(Button, { variant: "primary", size: "l", onClick: handleConnect, isLoading: connecting, children: labels.onboarding.connectOnchainModal.connect })
+              /* @__PURE__ */ jsx5(
+                Button,
+                {
+                  variant: "primary",
+                  size: "large",
+                  onClick: handleConnect,
+                  isLoading: connecting,
+                  children: labels.onboarding.connectOnchainModal.connect
+                }
+              )
             ] }),
             /* @__PURE__ */ jsx5(
               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

package/dist/{chunk-ZHKMDK5M.mjs → chunk-KFOATMAE.mjs}

@@ -8,7 +8,7 @@ import {
   resolveOutcomeLabels,
   resolveOutcomesByVenue,
   resolveSeriesColor
-} from "./chunk-P23GR7NX.mjs";
+} from "./chunk-422MCIXV.mjs";
 import {
   normalizeProbability,
   resolveEventListItemEvent,
@@ -19,30 +19,30 @@ import {
 } from "./chunk-GHB3GOCW.mjs";
 import {
   Badge
-} from "./chunk-AEMAY3MR.mjs";
+} from "./chunk-K6IJ4WBM.mjs";
 import {
   Skeleton,
   detailsBaseCardClassName,
   eventListItemDetailsTimeRanges
-} from "./chunk-JH5VMNDL.mjs";
+} from "./chunk-V52WSZHQ.mjs";
 import {
   VenueLogo
-} from "./chunk-BLSHXIAH.mjs";
+} from "./chunk-D7JTOGYP.mjs";
 import {
   Button
-} from "./chunk-PGSPYQOW.mjs";
+} from "./chunk-KAGYJ4XT.mjs";
 import {
   Typography
-} from "./chunk-DYEWXEEY.mjs";
+} from "./chunk-ERGNR6UQ.mjs";
 import {
   Card
-} from "./chunk-3O4U3E5I.mjs";
+} from "./chunk-FO2QCB4Z.mjs";
 import {
   LineChart
-} from "./chunk-VC7LTPQD.mjs";
+} from "./chunk-BN5VVHNV.mjs";
 import {
   SwitchButton
-} from "./chunk-JRS2M5GY.mjs";
+} from "./chunk-CTVMT3VL.mjs";
 import {
   __objRest,
   __spreadProps,
@@ -80,7 +80,7 @@ var EventListItemDetailsUnavailableState = ({
       role: "status",
       "aria-label": ariaLabel != null ? ariaLabel : labels.eventItemDetails.unavailableAria,
       children: /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1", classNames == null ? void 0 : classNames.header), children: [
-        /* @__PURE__ */ jsx(Typography, { variant: "title", className: cn("truncate", classNames == null ? void 0 : classNames.title), children: labels.eventItemDetails.unavailableTitle }),
+        /* @__PURE__ */ jsx(Typography, { variant: "body-large-strong", className: cn("truncate", classNames == null ? void 0 : classNames.title), children: labels.eventItemDetails.unavailableTitle }),
         /* @__PURE__ */ jsx(Typography, { variant: "body", className: "text-agg-muted-foreground", children: labels.eventItemDetails.unavailableDescription })
       ] })
     }
@@ -343,25 +343,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__ */ jsx(
                           Badge,
                           {
                             text,
-                            size: "l",
+                            size: "large",
                             prefix: showVenueLogo ? /* @__PURE__ */ 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);
                             }
                           }
                         )
@@ -499,69 +501,73 @@ var EventListItemDetailsContent = ({
       className: cn(detailsBaseCardClassName, classNames == null ? void 0 : classNames.root),
       "aria-label": ariaLabel != null ? ariaLabel : resolvedTitle,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("flex items-start gap-3 md:gap-4 ", classNames == null ? void 0 : classNames.header), children: [
-          resolvedImage ? /* @__PURE__ */ jsx(
-            "img",
-            {
-              src: resolvedImage,
-              alt: "",
-              className: "size-10 rounded-agg-lg object-cover md:size-[60px]"
-            }
-          ) : null,
-          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-3", children: [
-            /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx(
+                "img",
+                {
+                  src: resolvedImage,
+                  alt: "",
+                  className: "size-10 rounded-agg-lg object-cover md:size-[60px]"
+                }
+              ) : null,
+              /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-3", children: [
+                /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-            /* @__PURE__ */ jsx(
-              Typography,
-              {
-                variant: "label",
-                className: "text-agg-xs leading-agg-4 tracking-agg-normal text-agg-muted-foreground",
-                children: statItem.label
-              }
-            ),
+            /* @__PURE__ */ jsx(Typography, { variant: "caption-caps", className: "text-agg-muted-foreground", children: statItem.label }),
             /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-1", children: [
               /* @__PURE__ */ jsx(
                 Typography,
@@ -571,14 +577,7 @@ var EventListItemDetailsContent = ({
                   children: statItem.value
                 }
               ),
-              statItem.delta ? /* @__PURE__ */ jsx(
-                Typography,
-                {
-                  variant: "meta",
-                  className: cn("text-agg-sm leading-agg-5", deltaClassName),
-                  children: statItem.delta
-                }
-              ) : null
+              statItem.delta ? /* @__PURE__ */ jsx(Typography, { variant: "label", className: cn(deltaClassName), children: statItem.delta }) : null
             ] })
           ] }, `${statItem.label}-${statItem.value}`);
         }) }) : null,
@@ -598,18 +597,19 @@ var EventListItemDetailsContent = ({
           }
         ),
         /* @__PURE__ */ jsxs("div", { className: cn("flex flex-wrap items-center justify-between gap-4", classNames == null ? void 0 : classNames.footer), children: [
-          /* @__PURE__ */ jsx(Typography, { variant: "meta", className: "text-agg-muted-foreground text-agg-sm leading-agg-5", children: volumeLabel || "-" }),
+          /* @__PURE__ */ jsx(Typography, { variant: "label", className: "text-agg-muted-foreground", children: volumeLabel || "-" }),
           /* @__PURE__ */ 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__ */ 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),