@agg-market/ui 1.0.0 → 3.0.0

package/dist/badge.d.mts

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
-import { A as AvailableSizes } from './types-Bed6Q0EK.mjs';
+import { A as AvailableSizes } from './types-BVj9ky9P.mjs';
 
-type BadgeSize = Exclude<AvailableSizes, "ms">;
+type BadgeSize = AvailableSizes;
 type BadgeClassNames = {
     root?: string;
     prefix?: string;
@@ -14,11 +14,13 @@ interface BadgeProps {
     suffix?: ReactNode;
     size?: BadgeSize;
     classNames?: BadgeClassNames;
+    isActive?: boolean;
+    onClick?: (e: React.MouseEvent) => void;
 }
 
 declare const badgeSizes: BadgeSize[];
 
-declare function Badge({ text, prefix, suffix, size, classNames }: BadgeProps): JSX.Element;
+declare function Badge({ text, prefix, suffix, size, classNames, onClick, isActive, }: BadgeProps): JSX.Element;
 declare namespace Badge {
     var displayName: string;
 }

package/dist/badge.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
-import { A as AvailableSizes } from './types-Bed6Q0EK.js';
+import { A as AvailableSizes } from './types-BVj9ky9P.js';
 
-type BadgeSize = Exclude<AvailableSizes, "ms">;
+type BadgeSize = AvailableSizes;
 type BadgeClassNames = {
     root?: string;
     prefix?: string;
@@ -14,11 +14,13 @@ interface BadgeProps {
     suffix?: ReactNode;
     size?: BadgeSize;
     classNames?: BadgeClassNames;
+    isActive?: boolean;
+    onClick?: (e: React.MouseEvent) => void;
 }
 
 declare const badgeSizes: BadgeSize[];
 
-declare function Badge({ text, prefix, suffix, size, classNames }: BadgeProps): JSX.Element;
+declare function Badge({ text, prefix, suffix, size, classNames, onClick, isActive, }: BadgeProps): JSX.Element;
 declare namespace Badge {
     var displayName: string;
 }

package/dist/badge.js

@@ -1,8 +1,25 @@
 "use strict";
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -24,20 +41,22 @@ __export(badge_exports, {
   badgeSizes: () => badgeSizes
 });
 module.exports = __toCommonJS(badge_exports);
+var import_hooks = require("@agg-market/hooks");
 
 // src/shared/utils.ts
 var cn = (...values) => values.filter(Boolean).join(" ");
+var getMotionClassName = (enabled, ...values) => {
+  if (!enabled)
+    return void 0;
+  return cn(...values);
+};
 
 // 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",
@@ -46,20 +65,41 @@ var baseBadgeClasses = cn(
 
 // src/primitives/badge/index.tsx
 var import_jsx_runtime = 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_hooks.useSdkUiConfig)();
   const resolvedText = `${text}`;
   const resolvedAriaLabel = resolvedText.length > 0 ? resolvedText : void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime.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_runtime.jsx)("span", { className: classNames == null ? void 0 : classNames.prefix, children: prefix }) : null,
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: cn("truncate", classNames == null ? void 0 : classNames.text), children: text }),
         suffix ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: classNames == null ? void 0 : classNames.suffix, children: suffix }) : null
       ]
-    }
+    })
   );
 }
 Badge.displayName = "Badge";

package/dist/badge.mjs

@@ -1,7 +1,7 @@
 import {
   Badge,
   badgeSizes
-} from "./chunk-AEMAY3MR.mjs";
+} from "./chunk-K6IJ4WBM.mjs";
 import "./chunk-GJ4U5NCE.mjs";
 export {
   Badge,

package/dist/button.d.mts

@@ -1,8 +1,8 @@
 import { ButtonHTMLAttributes, ReactNode, FC } from 'react';
-import { A as AvailableSizes } from './types-Bed6Q0EK.mjs';
+import { A as AvailableSizes } from './types-BVj9ky9P.mjs';
 
 type ButtonVariant = "primary" | "secondary" | "tertiary";
-type ButtonSize = Exclude<AvailableSizes, "ms">;
+type ButtonSize = AvailableSizes;
 type ButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> & {
     children: ReactNode;
     variant?: ButtonVariant;

package/dist/button.d.ts

@@ -1,8 +1,8 @@
 import { ButtonHTMLAttributes, ReactNode, FC } from 'react';
-import { A as AvailableSizes } from './types-Bed6Q0EK.js';
+import { A as AvailableSizes } from './types-BVj9ky9P.js';
 
 type ButtonVariant = "primary" | "secondary" | "tertiary";
-type ButtonSize = Exclude<AvailableSizes, "ms">;
+type ButtonSize = AvailableSizes;
 type ButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> & {
     children: ReactNode;
     variant?: ButtonVariant;

package/dist/button.js

@@ -64,43 +64,26 @@ var getMotionClassName = (enabled, ...values) => {
 
 // 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(
@@ -116,10 +99,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(
@@ -135,7 +119,7 @@ var Button = (_a) => {
   var _b = _a, {
     children,
     variant = "primary",
-    size = "m",
+    size = "medium",
     isLoading = false,
     disabled,
     prefix,
@@ -162,8 +146,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/button.mjs

@@ -1,7 +1,7 @@
 import {
   Button
-} from "./chunk-PGSPYQOW.mjs";
-import "./chunk-ZVBVGWSP.mjs";
+} from "./chunk-KAGYJ4XT.mjs";
+import "./chunk-FO263M3V.mjs";
 import "./chunk-GJ4U5NCE.mjs";
 export {
   Button

package/dist/card.d.mts

@@ -1,7 +1,9 @@
-type CardProps = React.HTMLAttributes<HTMLDivElement>;
+type CardProps = React.HTMLAttributes<HTMLDivElement> & {
+    onClick?: (e?: React.MouseEvent) => void;
+};
 
 declare const Card: {
-    ({ className, ...props }: CardProps): JSX.Element;
+    ({ className, onClick, ...props }: CardProps): JSX.Element;
     displayName: string;
 };
 

package/dist/card.d.ts

@@ -1,7 +1,9 @@
-type CardProps = React.HTMLAttributes<HTMLDivElement>;
+type CardProps = React.HTMLAttributes<HTMLDivElement> & {
+    onClick?: (e?: React.MouseEvent) => void;
+};
 
 declare const Card: {
-    ({ className, ...props }: CardProps): JSX.Element;
+    ({ className, onClick, ...props }: CardProps): JSX.Element;
     displayName: string;
 };
 

package/dist/card.js

@@ -62,19 +62,23 @@ var getMotionClassName = (enabled, ...values) => {
 // src/primitives/card/index.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var Card = (_a) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  var _b = _a, { className, onClick } = _b, props = __objRest(_b, ["className", "onClick"]);
   const { enableAnimations } = (0, import_hooks.useSdkUiConfig)();
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
-    __spreadValues({
+    __spreadValues(__spreadValues({
       className: cn(
+        "group/agg-card",
         "flex w-full flex-col font-agg-sans",
         "rounded-agg-xl border border-agg-separator",
         "bg-agg-secondary text-agg-foreground shadow-agg-card",
-        getMotionClassName(enableAnimations, "transition-shadow hover:shadow-agg-card-hover"),
+        getMotionClassName(
+          enableAnimations,
+          "transition-shadow hover:shadow-agg-card-hover duration-300 ease-in-out"
+        ),
         className
       )
-    }, props)
+    }, onClick ? { onClick } : {}), props)
   );
 };
 Card.displayName = "Card";

package/dist/card.mjs

@@ -1,6 +1,6 @@
 import {
   Card
-} from "./chunk-3O4U3E5I.mjs";
+} from "./chunk-FO2QCB4Z.mjs";
 import "./chunk-GJ4U5NCE.mjs";
 export {
   Card

package/dist/chart.js

@@ -141,7 +141,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_runtime.jsxs)(
@@ -161,7 +164,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: {
@@ -185,15 +188,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) => {
@@ -371,7 +378,7 @@ var LineChart = ({
     seriesSwitchAriaLabel: labels.common.lineChartSeriesSwitchAria,
     formatSeriesOptionAriaLabel: labels.common.lineChartSeriesOptionAria
   }) : null : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: cn("w-full", classNames == null ? void 0 : classNames.root), style: { width }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: cn("group/agg-chart", "w-full", classNames == null ? void 0 : classNames.root), style: { width }, children: [
     !isLoading && seriesControls ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: cn("mb-3", classNames == null ? void 0 : classNames.controls), children: seriesControls }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       "div",

package/dist/chart.mjs

@@ -1,7 +1,7 @@
 import {
   LineChart
-} from "./chunk-VC7LTPQD.mjs";
-import "./chunk-JRS2M5GY.mjs";
+} from "./chunk-BN5VVHNV.mjs";
+import "./chunk-CTVMT3VL.mjs";
 import "./chunk-GJ4U5NCE.mjs";
 export {
   LineChart

package/dist/{chunk-ZYREURXK.mjs → chunk-2MJY6RVY.mjs}

@@ -1,20 +1,20 @@
 import {
   Modal
-} from "./chunk-VIP7HSOU.mjs";
+} from "./chunk-5K7VXAYM.mjs";
 import {
   VenueLogo,
   venueLogoLabels
-} from "./chunk-BLSHXIAH.mjs";
+} from "./chunk-D7JTOGYP.mjs";
 import {
   BankIcon,
   ChevronLeftIcon,
   ChevronRightIcon,
   ExternalLinkIcon,
   WalletIcon
-} from "./chunk-F236MLT6.mjs";
+} from "./chunk-PZTHM6WG.mjs";
 import {
   Button
-} from "./chunk-PGSPYQOW.mjs";
+} from "./chunk-KAGYJ4XT.mjs";
 import {
   cn,
   formatAmountDisplay,
@@ -58,19 +58,19 @@ var VenueRow = ({ venue, onSelect }) => {
         }
       },
       children: [
-        /* @__PURE__ */ jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsx(VenueLogo, { venue: venue.venue, size: "xl", className: "rounded-lg" }) }),
+        /* @__PURE__ */ jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsx(VenueLogo, { venue: venue.venue, size: "large", className: "rounded-lg" }) }),
         /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-          /* @__PURE__ */ jsx("p", { className: "text-base font-bold text-foreground leading-6", children: displayName }),
-          /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground leading-5", children: [
+          /* @__PURE__ */ jsx("p", { className: "agg-type-body-strong text-agg-foreground", children: displayName }),
+          /* @__PURE__ */ jsxs("p", { className: "agg-type-label text-agg-muted-foreground", children: [
             "Balance ",
             formatCompactUsd(venue.balance)
           ] })
         ] }),
-        isDisabled ? /* @__PURE__ */ jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: (_b = venue.disabledReason) != null ? _b : "Unavailable" }) }) : /* @__PURE__ */ jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsx(
+        isDisabled ? /* @__PURE__ */ jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsx("span", { className: "agg-type-label text-agg-muted-foreground", children: (_b = venue.disabledReason) != null ? _b : "Unavailable" }) }) : /* @__PURE__ */ jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsx(
           Button,
           {
             variant: "secondary",
-            size: "s",
+            size: "small",
             suffix: /* @__PURE__ */ jsx(ChevronRightIcon, {}),
             onClick: (e) => {
               e.stopPropagation();
@@ -89,7 +89,7 @@ var VenueSelectionStep = ({
 }) => /* @__PURE__ */ jsxs(Fragment, { children: [
   /* @__PURE__ */ jsx(Modal.Header, { title: "Withdraw", hideBorder: true }),
   /* @__PURE__ */ jsx(Modal.Body, { classNames: { root: "px-5 pt-0 pb-6 sm:px-8 sm:pt-0 sm:pb-8" }, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
-    /* @__PURE__ */ jsx("p", { className: "text-base text-foreground leading-6", children: "Choose where to withdraw funds from:" }),
+    /* @__PURE__ */ jsx("p", { className: "agg-type-body text-agg-foreground", children: "Choose where to withdraw funds from:" }),
     /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: venues.map((venue) => /* @__PURE__ */ jsx(VenueRow, { venue, onSelect: onSelectVenue }, venue.venue)) })
   ] }) })
 ] });
@@ -122,14 +122,14 @@ var WithdrawMethodCard = ({
     children: [
       /* @__PURE__ */ jsx2("div", { className: "shrink-0 flex items-center justify-center h-10 w-10 rounded-lg bg-secondary-hover", children: icon }),
       /* @__PURE__ */ jsxs2("div", { className: "flex-1 min-w-0", children: [
-        /* @__PURE__ */ jsx2("p", { className: "text-base font-bold text-foreground leading-6", children: title }),
-        /* @__PURE__ */ jsx2("p", { className: "text-sm text-muted-foreground leading-5", children: description })
+        /* @__PURE__ */ jsx2("p", { className: "agg-type-body-strong text-agg-foreground", children: title }),
+        /* @__PURE__ */ jsx2("p", { className: "agg-type-label text-agg-muted-foreground", children: description })
       ] }),
       /* @__PURE__ */ jsx2("div", { className: "shrink-0", children: /* @__PURE__ */ jsx2(
         Button,
         {
           variant: "secondary",
-          size: "s",
+          size: "small",
           suffix: /* @__PURE__ */ jsx2(ChevronRightIcon, {}),
           onClick: (e) => {
             e.stopPropagation();
@@ -158,7 +158,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__ */ jsx2(ChevronLeftIcon, { className: "h-6 w-6" })
@@ -168,8 +168,8 @@ var WithdrawMethodStep = ({
     ),
     /* @__PURE__ */ jsx2(Modal.Body, { classNames: { root: "px-5 pt-0 pb-6 sm:px-8 sm:pt-0 sm:pb-8" }, children: /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-4", children: [
       /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx2(VenueLogo, { venue: venue.venue, size: "xs", className: "rounded-sm" }),
-        /* @__PURE__ */ jsxs2("p", { className: "text-sm text-muted-foreground leading-5", children: [
+        /* @__PURE__ */ jsx2(VenueLogo, { venue: venue.venue, size: "small", className: "rounded-sm" }),
+        /* @__PURE__ */ jsxs2("p", { className: "agg-type-label text-agg-muted-foreground", children: [
           displayName,
           " balance: ",
           formatCompactUsd(venue.balance)
@@ -179,7 +179,7 @@ var WithdrawMethodStep = ({
         /* @__PURE__ */ jsx2(
           WithdrawMethodCard,
           {
-            icon: /* @__PURE__ */ jsx2(WalletIcon, { className: "h-6 w-6 text-foreground" }),
+            icon: /* @__PURE__ */ jsx2(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")
@@ -188,7 +188,7 @@ var WithdrawMethodStep = ({
         /* @__PURE__ */ jsx2(
           WithdrawMethodCard,
           {
-            icon: /* @__PURE__ */ jsx2(BankIcon, { className: "h-6 w-6 text-foreground" }),
+            icon: /* @__PURE__ */ jsx2(BankIcon, { className: "h-6 w-6 text-agg-foreground" }),
             title: "Withdraw to Bank",
             description: "Transfer funds to your linked bank account.",
             onContinue: () => onSelectMethod("bank")
@@ -234,7 +234,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__ */ jsx3(ChevronLeftIcon, { className: "h-6 w-6" })
@@ -245,8 +245,8 @@ var WithdrawAmountStep = ({
     /* @__PURE__ */ jsx3(Modal.Body, { classNames: { root: "px-5 pt-0 pb-6 sm:px-8 sm:pt-0 sm:pb-8" }, children: /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-6", children: [
       /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between", children: [
         /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx3(VenueLogo, { venue: venue.venue, size: "xs", className: "rounded-sm" }),
-          /* @__PURE__ */ jsxs3("p", { className: "text-sm text-muted-foreground leading-5", children: [
+          /* @__PURE__ */ jsx3(VenueLogo, { venue: venue.venue, size: "small", className: "rounded-sm" }),
+          /* @__PURE__ */ jsxs3("p", { className: "agg-type-label text-agg-muted-foreground", children: [
             displayName,
             " balance: ",
             formatCompactUsd(venue.balance)
@@ -256,7 +256,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"
           }
@@ -264,7 +264,7 @@ var WithdrawAmountStep = ({
       ] }),
       /* @__PURE__ */ jsxs3("div", { className: "flex-1 min-w-0", children: [
         /* @__PURE__ */ jsxs3("div", { className: "flex items-baseline", children: [
-          /* @__PURE__ */ jsx3("span", { className: "text-3xl sm:text-4xl font-bold text-foreground leading-none", children: "$" }),
+          /* @__PURE__ */ jsx3("span", { className: "agg-type-display text-agg-foreground", children: "$" }),
           /* @__PURE__ */ jsx3(
             "input",
             {
@@ -272,8 +272,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) : "",
@@ -281,13 +281,13 @@ var WithdrawAmountStep = ({
             }
           )
         ] }),
-        exceedsBalance ? /* @__PURE__ */ jsx3("p", { className: "mt-2 text-sm text-error", children: "Amount exceeds available balance" }) : null
+        exceedsBalance ? /* @__PURE__ */ jsx3("p", { className: "agg-type-label mt-2 text-agg-error", children: "Amount exceeds available balance" }) : null
       ] }),
       /* @__PURE__ */ jsx3(
         Button,
         {
           variant: "primary",
-          size: "xl",
+          size: "large",
           className: "w-full",
           disabled: !isValid,
           onClick: () => onContinue(numericAmount),
@@ -306,13 +306,13 @@ var KalshiStepCard = ({
   description,
   children
 }) => /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-2 rounded-xl bg-secondary-hover p-4", children: [
-  /* @__PURE__ */ jsxs4("p", { className: "text-xs font-bold uppercase leading-4 text-muted-foreground", children: [
+  /* @__PURE__ */ jsxs4("p", { className: "agg-type-caption-caps text-agg-muted-foreground", children: [
     "Step ",
     step
   ] }),
   /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-1", children: [
-    /* @__PURE__ */ jsx4("p", { className: "text-sm font-bold text-foreground leading-5", children: title }),
-    /* @__PURE__ */ jsx4("p", { className: "text-sm text-foreground leading-5", children: description })
+    /* @__PURE__ */ jsx4("p", { className: "agg-type-label-strong text-agg-foreground", children: title }),
+    /* @__PURE__ */ jsx4("p", { className: "agg-type-label text-agg-foreground", children: description })
   ] }),
   children
 ] });
@@ -326,13 +326,13 @@ var KalshiWithdrawStep = ({
       VenueLogo,
       {
         venue: "kalshi",
-        size: "xl",
+        size: "large",
         className: "h-[60px] w-[60px] rounded-lg"
       }
     ),
     /* @__PURE__ */ jsxs4("div", { className: "flex flex-col items-center gap-4 text-center", children: [
-      /* @__PURE__ */ jsx4("h2", { className: "text-2xl font-bold text-foreground leading-8", children: "Withdraw from Kalshi" }),
-      /* @__PURE__ */ jsx4("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__ */ jsx4("h2", { className: "agg-type-heading text-agg-foreground", children: "Withdraw from Kalshi" }),
+      /* @__PURE__ */ jsx4("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__ */ jsxs4("div", { className: "flex w-full flex-col gap-4", children: [
       /* @__PURE__ */ jsx4(
@@ -345,7 +345,7 @@ var KalshiWithdrawStep = ({
             Button,
             {
               variant: "secondary",
-              size: "s",
+              size: "small",
               suffix: /* @__PURE__ */ jsx4(ExternalLinkIcon, { className: "h-3.5 w-3.5" }),
               onClick: () => {
                 window.open(withdrawUrl, "_blank", "noopener,noreferrer");
@@ -372,7 +372,7 @@ var KalshiWithdrawStep = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx4(Button, { variant: "secondary", size: "l", onClick: onDone, children: "Done" })
+    /* @__PURE__ */ jsx4(Button, { variant: "secondary", size: "large", onClick: onDone, children: "Done" })
   ] }) })
 ] });