@agg-market/ui 1.0.0 → 2.0.0

package/dist/deposit-modal.js

@@ -173,6 +173,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",
@@ -225,6 +226,7 @@ var ModalHeader = ({
     "div",
     {
       className: cn(
+        "group/agg-modal-header",
         "flex flex-col",
         "sticky top-0 z-20",
         "bg-agg-secondary",
@@ -300,6 +302,7 @@ var ModalBody = ({ children, classNames }) => {
     "div",
     {
       className: cn(
+        "group/agg-modal-body",
         "grow overflow-y-auto",
         "px-4 py-6",
         "sm:p-8",
@@ -320,6 +323,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",
@@ -336,7 +340,7 @@ Modal.Footer = ModalFooter;
 Modal.displayName = "Modal";
 
 // src/primitives/venue-logo/logo-props.ts
-var DEFAULT_MONOCHROME_COLOR = "#000000";
+var DEFAULT_MONOCHROME_COLOR = "currentColor";
 var resolveLogoPrimaryColor = ({
   brandColor,
   isColor = true,
@@ -540,14 +544,9 @@ var venueLogoLabels = {
 };
 var venueLogoNames = Object.keys(venueLogoRegistry);
 var sizeClasses = {
-  xxs: "h-2 w-2",
-  xs: "h-3 w-3",
-  s: "h-4 w-4",
-  ms: "h-5 w-5",
-  m: "h-6 w-6",
-  l: "h-8 w-8",
-  xl: "h-10 w-10",
-  xxl: "h-12 w-12"
+  small: "h-4 w-4",
+  medium: "h-6 w-6",
+  large: "h-8 w-8"
 };
 
 // src/deposit/deposit-modal.constants.ts
@@ -559,43 +558,26 @@ var import_hooks2 = require("@agg-market/hooks");
 
 // 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 sizeClasses2 = {
-  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(
@@ -611,10 +593,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(
@@ -630,7 +613,7 @@ var Button = (_a) => {
   var _b = _a, {
     children,
     variant = "primary",
-    size = "m",
+    size = "medium",
     isLoading = false,
     disabled,
     prefix,
@@ -657,8 +640,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"),
         sizeClasses2[size],
         iconSlotClasses[size],
         variantClasses[variant],
@@ -696,7 +680,7 @@ var VenueLogo = ({
   isColor = true,
   isMonochromatic = false,
   color,
-  size = "m",
+  size = "medium",
   className,
   ariaLabel,
   title
@@ -708,7 +692,7 @@ var VenueLogo = ({
   return /* @__PURE__ */ (0, import_jsx_runtime8.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],
@@ -773,14 +757,10 @@ var ArrowsToDotIcon = (_a) => {
         /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.jsx)("circle", { cx: "8", cy: "8", r: "1.5", fill: "currentColor" })
+        )
       ]
     })
   );
@@ -1983,7 +1963,7 @@ var Icon = (_a) => {
   var _b = _a, {
     name,
     color,
-    size = "m",
+    size = "medium",
     className = "text-agg-primary",
     style
   } = _b, props = __objRest(_b, [
@@ -1996,7 +1976,14 @@ var Icon = (_a) => {
   const Component = iconRegistry[name];
   const resolvedStyle = resolveIconStyle(color, style);
   const resolvedClassName = cn(iconSizeClasses[size], className);
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Component, __spreadValues({ color, className: resolvedClassName, style: resolvedStyle }, props));
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    Component,
+    __spreadValues({
+      color,
+      className: cn("group/agg-icon", resolvedClassName),
+      style: resolvedStyle
+    }, props)
+  );
 };
 Icon.displayName = "Icon";
 
@@ -2025,17 +2012,17 @@ var VenueRow = ({ venue, onSelect }) => {
         }
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(VenueLogo, { venue: venue.venue, size: "xl", className: "rounded-lg" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(VenueLogo, { venue: venue.venue, size: "large", className: "rounded-lg" }) }),
         /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex-1 min-w-0", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("p", { className: "text-base font-bold text-foreground leading-6", children: displayName }),
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("p", { className: "text-sm text-muted-foreground leading-5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("p", { className: "agg-type-body-strong text-agg-foreground", children: displayName }),
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("p", { className: "agg-type-label text-agg-muted-foreground", children: [
             "Balance ",
             formatCompactUsd(venue.balance)
           ] })
         ] }),
         hasShortfall ? /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "hidden sm:flex items-center gap-1.5 shrink-0", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(WarningFilledIcon, { className: "h-4 w-4 text-warning" }),
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("span", { className: "text-sm font-bold text-warning whitespace-nowrap", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(WarningFilledIcon, { className: "h-4 w-4 text-agg-warning" }),
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("span", { className: "agg-type-label-strong whitespace-nowrap text-agg-warning", children: [
             "Short ",
             formatCompactUsd(venue.shortfall)
           ] })
@@ -2044,7 +2031,7 @@ var VenueRow = ({ venue, onSelect }) => {
           Button,
           {
             variant: "secondary",
-            size: "s",
+            size: "small",
             suffix: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ChevronRightIcon, {}),
             onClick: (e) => {
               e.stopPropagation();
@@ -2064,7 +2051,7 @@ var VenueSelectionStep = ({
 }) => /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx_runtime50.Fragment, { children: [
   /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Modal.Header, { title: "Deposit", hideBorder: true }),
   /* @__PURE__ */ (0, import_jsx_runtime50.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_runtime50.jsxs)("div", { className: "flex flex-col gap-4", children: [
-    !hasAnyShortfall ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("p", { className: "text-base text-foreground leading-6", children: "Choose where to deposit funds:" }) : null,
+    !hasAnyShortfall ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("p", { className: "agg-type-body text-agg-foreground", children: "Choose where to deposit funds:" }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "flex flex-col gap-3", children: venues.map((venue) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(VenueRow, { venue, onSelect: onSelectVenue }, venue.venue)) })
   ] }) })
 ] });
@@ -2097,14 +2084,14 @@ var DepositMethodCard = ({
     children: [
       /* @__PURE__ */ (0, import_jsx_runtime51.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_runtime51.jsxs)("div", { className: "flex-1 min-w-0", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("p", { className: "text-base font-bold text-foreground leading-6", children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("p", { className: "text-sm text-muted-foreground leading-5", children: description })
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("p", { className: "agg-type-body-strong text-agg-foreground", children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("p", { className: "agg-type-label text-agg-muted-foreground", children: description })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
         Button,
         {
           variant: "secondary",
-          size: "s",
+          size: "small",
           suffix: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(ChevronRightIcon, {}),
           onClick: (e) => {
             e.stopPropagation();
@@ -2133,7 +2120,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_runtime51.jsx)(ChevronLeftIcon, { className: "h-6 w-6" })
@@ -2143,8 +2130,8 @@ var DepositMethodStep = ({
     ),
     /* @__PURE__ */ (0, import_jsx_runtime51.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_runtime51.jsxs)("div", { className: "flex flex-col gap-4", children: [
       /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(VenueLogo, { venue: venue.venue, size: "xs", className: "rounded-sm" }),
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("p", { className: "text-sm text-muted-foreground leading-5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(VenueLogo, { venue: venue.venue, size: "small", className: "rounded-sm" }),
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("p", { className: "agg-type-label text-agg-muted-foreground", children: [
           displayName,
           " balance: ",
           formatCompactUsd(venue.balance)
@@ -2154,7 +2141,7 @@ var DepositMethodStep = ({
         /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
           DepositMethodCard,
           {
-            icon: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(BoltIcon, { className: "h-6 w-6 text-foreground" }),
+            icon: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(BoltIcon, { className: "h-6 w-6 text-agg-foreground" }),
             title: "Transfer Crypto",
             description: "Send USDC from your blockchain wallet.",
             onContinue: () => onSelectMethod("crypto")
@@ -2163,7 +2150,7 @@ var DepositMethodStep = ({
         /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
           DepositMethodCard,
           {
-            icon: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(CreditCardIcon, { className: "h-6 w-6 text-foreground" }),
+            icon: /* @__PURE__ */ (0, import_jsx_runtime51.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")
@@ -2201,7 +2188,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();
       }
     };
@@ -2212,7 +2199,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);
@@ -2221,7 +2208,7 @@ var Select = ({
   const isDisabled = disabled || !hasEnabledItems;
   const selectedItem = items.find((item) => item.value === value);
   if (!hasAnyIcon) {
-    return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("label", { className: cn("relative inline-flex w-full", className), children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("label", { className: cn("group/agg-select", "relative inline-flex w-full", className), children: [
       /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
         "select",
         {
@@ -2230,7 +2217,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"
@@ -2241,88 +2228,95 @@ var Select = ({
           children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("option", { value: item.value, disabled: item.disabled, children: item.label }, item.value))
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "pointer-events-none absolute inset-y-0 right-3 inline-flex items-center justify-center text-agg-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Icon, { name: "chevron-down", size: "s", color: "currentColor" }) })
+      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "pointer-events-none absolute inset-y-0 right-3 inline-flex items-center justify-center text-agg-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Icon, { name: "chevron-down", size: "small", color: "currentColor" }) })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { ref: containerRef, className: cn("relative inline-flex w-full", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
-      "button",
-      {
-        type: "button",
-        "aria-label": ariaLabel != null ? ariaLabel : labels.common.selectAria,
-        "aria-expanded": isOpen,
-        "aria-haspopup": "listbox",
-        disabled: isDisabled,
-        className: cn(
-          "w-full rounded-agg-md border border-agg-separator bg-agg-secondary px-4 py-2 pr-10 font-agg-sans text-agg-sm leading-agg-5 text-agg-foreground outline-none",
-          "flex items-center gap-2 text-left",
-          getMotionClassName(
-            enableAnimations,
-            "transition-[border-color,box-shadow] duration-200 ease-out"
-          ),
-          "focus:border-agg-primary focus:ring-2 focus:ring-agg-primary/15",
-          "disabled:cursor-not-allowed disabled:opacity-60"
-        ),
-        onClick: () => setIsOpen((prev) => !prev),
-        children: [
-          (selectedItem == null ? void 0 : selectedItem.iconUrl) ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
-            "img",
-            {
-              src: selectedItem.iconUrl,
-              alt: "",
-              className: "h-4 w-4 shrink-0 rounded-sm object-contain"
-            }
-          ) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "flex-1 truncate", children: (_a = selectedItem == null ? void 0 : selectedItem.label) != null ? _a : "" })
-        ]
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "pointer-events-none absolute inset-y-0 right-3 inline-flex items-center justify-center text-agg-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Icon, { name: "chevron-down", size: "s", color: "currentColor" }) }),
-    isOpen ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
-      "div",
-      {
-        role: "listbox",
-        "aria-label": ariaLabel != null ? ariaLabel : labels.common.selectAria,
-        className: "absolute top-full left-0 z-50 mt-1 w-full overflow-hidden rounded-agg-md border border-agg-separator bg-agg-secondary shadow-lg",
-        children: items.map((item) => {
-          const isSelected = item.value === value;
-          return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
-            "button",
-            {
-              type: "button",
-              role: "option",
-              "aria-selected": isSelected,
-              disabled: item.disabled,
-              className: cn(
-                "flex w-full items-center gap-2 px-4 py-2 text-left text-agg-sm leading-agg-5 outline-none",
-                "hover:bg-agg-secondary-hover focus-visible:bg-agg-secondary-hover",
-                isSelected ? "font-agg-bold text-agg-primary" : "font-agg-normal text-agg-foreground",
-                item.disabled && "cursor-not-allowed opacity-60"
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+    "div",
+    {
+      ref: containerRef,
+      className: cn("group/agg-select", "relative inline-flex w-full", className),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+          "button",
+          {
+            type: "button",
+            "aria-label": ariaLabel != null ? ariaLabel : labels.common.selectAria,
+            "aria-expanded": isOpen,
+            "aria-haspopup": "listbox",
+            disabled: isDisabled,
+            className: cn(
+              "w-full rounded-agg-md border border-agg-separator bg-agg-secondary px-4 py-2 pr-10 font-agg-sans text-agg-sm leading-agg-5 text-agg-foreground outline-none",
+              "flex items-center gap-2 text-left",
+              getMotionClassName(
+                enableAnimations,
+                "transition-[border-color,box-shadow] duration-200 ease-in-out"
               ),
-              onClick: () => {
-                if (!item.disabled) {
-                  onChange(item.value);
-                  close();
+              "focus:border-agg-primary focus:ring-2 focus:ring-agg-primary/15",
+              "disabled:cursor-not-allowed disabled:opacity-60"
+            ),
+            onClick: () => setIsOpen((prev) => !prev),
+            children: [
+              (selectedItem == null ? void 0 : selectedItem.iconUrl) ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+                "img",
+                {
+                  src: selectedItem.iconUrl,
+                  alt: "",
+                  className: "h-4 w-4 shrink-0 rounded-sm object-contain"
                 }
-              },
-              children: [
-                item.iconUrl ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
-                  "img",
-                  {
-                    src: item.iconUrl,
-                    alt: "",
-                    className: "h-4 w-4 shrink-0 rounded-sm object-contain"
-                  }
-                ) : null,
-                /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "truncate", children: item.label })
-              ]
-            },
-            item.value
-          );
-        })
-      }
-    ) : null
-  ] });
+              ) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "flex-1 truncate", children: (_a = selectedItem == null ? void 0 : selectedItem.label) != null ? _a : "" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "pointer-events-none absolute inset-y-0 right-3 inline-flex items-center justify-center text-agg-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Icon, { name: "chevron-down", size: "small", color: "currentColor" }) }),
+        isOpen ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+          "div",
+          {
+            role: "listbox",
+            "aria-label": ariaLabel != null ? ariaLabel : labels.common.selectAria,
+            className: "absolute top-full left-0 z-50 mt-1 w-full overflow-hidden rounded-agg-md border border-agg-separator bg-agg-secondary shadow-lg",
+            children: items.map((item) => {
+              const isSelected = item.value === value;
+              return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+                "button",
+                {
+                  type: "button",
+                  role: "option",
+                  "aria-selected": isSelected,
+                  disabled: item.disabled,
+                  className: cn(
+                    "flex w-full items-center gap-2 px-4 py-2 text-left text-agg-sm leading-agg-5 outline-none",
+                    "hover:bg-agg-secondary-hover focus-visible:bg-agg-secondary-hover",
+                    isSelected ? "font-agg-bold text-agg-primary" : "font-agg-normal text-agg-foreground",
+                    item.disabled && "cursor-not-allowed opacity-60"
+                  ),
+                  onClick: () => {
+                    if (!item.disabled) {
+                      onChange(item.value);
+                      close();
+                    }
+                  },
+                  children: [
+                    item.iconUrl ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+                      "img",
+                      {
+                        src: item.iconUrl,
+                        alt: "",
+                        className: "h-4 w-4 shrink-0 rounded-sm object-contain"
+                      }
+                    ) : null,
+                    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "truncate", children: item.label })
+                  ]
+                },
+                item.value
+              );
+            })
+          }
+        ) : null
+      ]
+    }
+  );
 };
 Select.displayName = "Select";
 
@@ -2354,7 +2348,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_runtime53.jsx)(ChevronLeftIcon, { className: "h-6 w-6" })
@@ -2364,8 +2358,8 @@ var CardDepositStep = ({
     ),
     /* @__PURE__ */ (0, import_jsx_runtime53.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_runtime53.jsxs)("div", { className: "flex flex-col gap-6", children: [
       /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(VenueLogo, { venue: venue.venue, size: "xs", className: "rounded-sm" }),
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("p", { className: "text-sm text-muted-foreground leading-5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(VenueLogo, { venue: venue.venue, size: "small", className: "rounded-sm" }),
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("p", { className: "agg-type-label text-agg-muted-foreground", children: [
           displayName,
           " balance: ",
           formatCompactUsd(venue.balance)
@@ -2384,7 +2378,7 @@ var CardDepositStep = ({
           }
         ) }),
         /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "flex items-baseline", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "text-3xl sm:text-4xl font-bold text-foreground leading-none", children: "$" }),
+          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "agg-type-display text-agg-foreground", children: "$" }),
           /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
             "input",
             {
@@ -2392,8 +2386,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) : "",
@@ -2415,12 +2409,12 @@ var CardDepositStep = ({
           tabIndex: 0,
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "flex-1 min-w-0", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("p", { className: "text-base font-bold text-foreground leading-6", children: "Provider" }),
-              /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("p", { className: "text-sm text-muted-foreground leading-5", children: "Auto-picked for you" })
+              /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("p", { className: "agg-type-body-strong text-agg-foreground", children: "Provider" }),
+              /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("p", { className: "agg-type-label text-agg-muted-foreground", children: "Auto-picked for you" })
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "flex items-center gap-2 shrink-0", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "text-sm font-bold text-foreground", children: "Swapped" }),
-              /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ChevronRightIcon, { className: "h-4 w-4 text-foreground" })
+              /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "agg-type-label-strong text-agg-foreground", children: "Swapped" }),
+              /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ChevronRightIcon, { className: "h-4 w-4 text-agg-foreground" })
             ] })
           ]
         }
@@ -2429,7 +2423,7 @@ var CardDepositStep = ({
         Button,
         {
           variant: "primary",
-          size: "xl",
+          size: "large",
           className: "w-full",
           disabled: !isValid,
           onClick: () => onContinue(numericAmount),
@@ -2535,7 +2529,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_runtime54.jsx)(ChevronLeftIcon, { className: "h-6 w-6" })
@@ -2547,7 +2541,7 @@ var CryptoTransferStep = ({
       /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex flex-col gap-5", children: [
         /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex gap-6", children: [
           /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex flex-1 flex-col gap-2 min-w-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("p", { className: "text-sm font-bold text-foreground leading-5", children: "Supported token" }),
+            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("p", { className: "agg-type-label-strong text-agg-foreground", children: "Supported token" }),
             /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
               Select,
               {
@@ -2559,7 +2553,7 @@ var CryptoTransferStep = ({
             )
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex flex-1 flex-col gap-2 min-w-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("p", { className: "text-sm font-bold text-foreground leading-5", children: "Supported network" }),
+            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("p", { className: "agg-type-label-strong text-agg-foreground", children: "Supported network" }),
             /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
               Select,
               {
@@ -2572,7 +2566,7 @@ var CryptoTransferStep = ({
           ] })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex flex-col gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("p", { className: "text-sm font-bold text-foreground leading-5", children: "Your deposit address" }),
+          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("p", { className: "agg-type-label-strong text-agg-foreground", children: "Your deposit address" }),
           /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
             "div",
             {
@@ -2582,12 +2576,12 @@ var CryptoTransferStep = ({
                 "h-10 px-3"
               ),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("p", { className: "flex-1 min-w-0 text-base text-foreground leading-6 truncate", children: depositAddress }),
+                /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("p", { className: "agg-type-body flex-1 min-w-0 truncate text-agg-foreground", children: depositAddress }),
                 /* @__PURE__ */ (0, import_jsx_runtime54.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_runtime54.jsx)(CopyIcon, { className: "h-4 w-4" })
@@ -2598,7 +2592,7 @@ var CryptoTransferStep = ({
           )
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Button, { variant: "secondary", size: "xl", className: "w-full", onClick: onDone, children: "Done" })
+      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Button, { variant: "secondary", size: "large", className: "w-full", onClick: onDone, children: "Done" })
     ] }) })
   ] });
 };
@@ -2611,13 +2605,13 @@ var KalshiStepCard = ({
   description,
   children
 }) => /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "flex flex-col gap-2 rounded-xl bg-secondary-hover p-4", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("p", { className: "text-xs font-bold uppercase leading-4 text-muted-foreground", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("p", { className: "agg-type-caption-caps text-agg-muted-foreground", children: [
     "Step ",
     step
   ] }),
   /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "flex flex-col gap-1", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("p", { className: "text-sm font-bold text-foreground leading-5", children: title }),
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("p", { className: "text-sm text-foreground leading-5", children: description })
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("p", { className: "agg-type-label-strong text-agg-foreground", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("p", { className: "agg-type-label text-agg-foreground", children: description })
   ] }),
   children
 ] });
@@ -2628,13 +2622,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_runtime55.jsxs)("div", { className: "flex flex-col items-center gap-4 text-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("h2", { className: "text-2xl font-bold text-foreground leading-8", children: "Fund Your Kalshi Account" }),
-      /* @__PURE__ */ (0, import_jsx_runtime55.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_runtime55.jsx)("h2", { className: "agg-type-heading text-agg-foreground", children: "Fund Your Kalshi Account" }),
+      /* @__PURE__ */ (0, import_jsx_runtime55.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_runtime55.jsxs)("div", { className: "flex w-full flex-col gap-4", children: [
       /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
@@ -2647,7 +2641,7 @@ var KalshiDepositStep = ({ depositUrl, onDone }) => /* @__PURE__ */ (0, import_j
             Button,
             {
               variant: "secondary",
-              size: "s",
+              size: "small",
               suffix: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(ExternalLinkIcon, { className: "h-3.5 w-3.5" }),
               onClick: () => {
                 window.open(depositUrl, "_blank", "noopener,noreferrer");
@@ -2674,7 +2668,7 @@ var KalshiDepositStep = ({ depositUrl, onDone }) => /* @__PURE__ */ (0, import_j
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Button, { variant: "secondary", size: "l", onClick: onDone, children: "Done" })
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Button, { variant: "secondary", size: "large", onClick: onDone, children: "Done" })
   ] }) })
 ] });