@agg-market/ui 1.0.0 → 2.0.0

package/dist/user-profile-page.mjs

@@ -1,14 +1,14 @@
 import {
   UserProfilePage
-} from "./chunk-O2XH4A3G.mjs";
-import "./chunk-LWTQD345.mjs";
-import "./chunk-ZDF7QP4G.mjs";
-import "./chunk-BLSHXIAH.mjs";
-import "./chunk-F236MLT6.mjs";
+} from "./chunk-7NISYVSJ.mjs";
+import "./chunk-S3H63TQ5.mjs";
+import "./chunk-YJA5VQW6.mjs";
+import "./chunk-D7JTOGYP.mjs";
+import "./chunk-PZTHM6WG.mjs";
 import "./chunk-NDG43KGL.mjs";
 import "./chunk-BNDFQPHF.mjs";
-import "./chunk-PGSPYQOW.mjs";
-import "./chunk-ZVBVGWSP.mjs";
+import "./chunk-KAGYJ4XT.mjs";
+import "./chunk-FO263M3V.mjs";
 import "./chunk-GJ4U5NCE.mjs";
 export {
   UserProfilePage

package/dist/venue-logo.d.mts

@@ -1,6 +1,6 @@
-import { V as VenueLogoName, a as VenueLogoProps } from './venue-logo.types-DACqcTvY.mjs';
+import { V as VenueLogoName, a as VenueLogoProps } from './venue-logo.types-HRf1yBLD.mjs';
 import '@agg-market/hooks';
-import './types-Bed6Q0EK.mjs';
+import './types-BVj9ky9P.mjs';
 
 declare const venueLogoNames: VenueLogoName[];
 

package/dist/venue-logo.d.ts

@@ -1,6 +1,6 @@
-import { V as VenueLogoName, a as VenueLogoProps } from './venue-logo.types-BSAuY84j.js';
+import { V as VenueLogoName, a as VenueLogoProps } from './venue-logo.types-D8Cu2rAm.js';
 import '@agg-market/hooks';
-import './types-Bed6Q0EK.js';
+import './types-BVj9ky9P.js';
 
 declare const venueLogoNames: VenueLogoName[];
 

package/dist/venue-logo.js

@@ -65,7 +65,7 @@ var getIconA11yProps = (title) => ({
 });
 
 // src/primitives/venue-logo/logo-props.ts
-var DEFAULT_MONOCHROME_COLOR = "#000000";
+var DEFAULT_MONOCHROME_COLOR = "currentColor";
 var resolveLogoPrimaryColor = ({
   brandColor,
   isColor = true,
@@ -263,14 +263,9 @@ var venueLogoRegistry = {
 };
 var venueLogoNames = Object.keys(venueLogoRegistry);
 var sizeClasses = {
-  xxs: "h-2 w-2",
-  xs: "h-3 w-3",
-  s: "h-4 w-4",
-  ms: "h-5 w-5",
-  m: "h-6 w-6",
-  l: "h-8 w-8",
-  xl: "h-10 w-10",
-  xxl: "h-12 w-12"
+  small: "h-4 w-4",
+  medium: "h-6 w-6",
+  large: "h-8 w-8"
 };
 
 // src/primitives/venue-logo/index.tsx
@@ -280,7 +275,7 @@ var VenueLogo = ({
   isColor = true,
   isMonochromatic = false,
   color,
-  size = "m",
+  size = "medium",
   className,
   ariaLabel,
   title
@@ -292,7 +287,7 @@ var VenueLogo = ({
   return /* @__PURE__ */ (0, import_jsx_runtime5.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],

package/dist/venue-logo.mjs

@@ -1,7 +1,7 @@
 import {
   VenueLogo,
   venueLogoNames
-} from "./chunk-BLSHXIAH.mjs";
+} from "./chunk-D7JTOGYP.mjs";
 import "./chunk-BNDFQPHF.mjs";
 import "./chunk-GJ4U5NCE.mjs";
 export {

package/dist/{venue-logo.types-BSAuY84j.d.ts → venue-logo.types-D8Cu2rAm.d.ts}

@@ -1,5 +1,5 @@
 import { VenueMarket } from '@agg-market/hooks';
-import { A as AvailableSizes } from './types-Bed6Q0EK.js';
+import { A as AvailableSizes } from './types-BVj9ky9P.js';
 
 type AdditionalVenue = "opinion" | "probable";
 type VenueLogoName = VenueMarket["venue"] | AdditionalVenue;

package/dist/{venue-logo.types-DACqcTvY.d.mts → venue-logo.types-HRf1yBLD.d.mts}

@@ -1,5 +1,5 @@
 import { VenueMarket } from '@agg-market/hooks';
-import { A as AvailableSizes } from './types-Bed6Q0EK.mjs';
+import { A as AvailableSizes } from './types-BVj9ky9P.mjs';
 
 type AdditionalVenue = "opinion" | "probable";
 type VenueLogoName = VenueMarket["venue"] | AdditionalVenue;

package/dist/withdraw-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/withdraw/withdraw-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";
 
@@ -2030,19 +2017,19 @@ 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)
           ] })
         ] }),
-        isDisabled ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "text-sm text-muted-foreground", children: (_b = venue.disabledReason) != null ? _b : "Unavailable" }) }) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+        isDisabled ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "agg-type-label text-agg-muted-foreground", children: (_b = venue.disabledReason) != null ? _b : "Unavailable" }) }) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
           Button,
           {
             variant: "secondary",
-            size: "s",
+            size: "small",
             suffix: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ChevronRightIcon, {}),
             onClick: (e) => {
               e.stopPropagation();
@@ -2061,7 +2048,7 @@ var VenueSelectionStep = ({
 }) => /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx_runtime50.Fragment, { children: [
   /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Modal.Header, { title: "Withdraw", 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: [
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("p", { className: "text-base text-foreground leading-6", children: "Choose where to withdraw funds from:" }),
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("p", { className: "agg-type-body text-agg-foreground", children: "Choose where to withdraw funds from:" }),
     /* @__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)) })
   ] }) })
 ] });
@@ -2094,14 +2081,14 @@ var WithdrawMethodCard = ({
     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();
@@ -2130,7 +2117,7 @@ var WithdrawMethodStep = ({
           "button",
           {
             type: "button",
-            className: "flex items-center justify-center text-foreground hover:text-foreground/80 transition-colors hover:cursor-pointer mr-2",
+            className: "mr-2 flex items-center justify-center text-agg-foreground transition-colors hover:cursor-pointer hover:text-agg-foreground/80",
             onClick: onBack,
             "aria-label": "Go back",
             children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(ChevronLeftIcon, { className: "h-6 w-6" })
@@ -2140,8 +2127,8 @@ var WithdrawMethodStep = ({
     ),
     /* @__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)
@@ -2151,7 +2138,7 @@ var WithdrawMethodStep = ({
         /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
           WithdrawMethodCard,
           {
-            icon: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(WalletIcon, { className: "h-6 w-6 text-foreground" }),
+            icon: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(WalletIcon, { className: "h-6 w-6 text-agg-foreground" }),
             title: "Withdraw to Wallet",
             description: "Send funds to your crypto wallet as USDC.",
             onContinue: () => onSelectMethod("wallet")
@@ -2160,7 +2147,7 @@ var WithdrawMethodStep = ({
         /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
           WithdrawMethodCard,
           {
-            icon: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(BankIcon, { className: "h-6 w-6 text-foreground" }),
+            icon: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(BankIcon, { className: "h-6 w-6 text-agg-foreground" }),
             title: "Withdraw to Bank",
             description: "Transfer funds to your linked bank account.",
             onContinue: () => onSelectMethod("bank")
@@ -2206,7 +2193,7 @@ var WithdrawAmountStep = ({
           "button",
           {
             type: "button",
-            className: "flex items-center justify-center text-foreground hover:text-foreground/80 transition-colors hover:cursor-pointer mr-2",
+            className: "mr-2 flex items-center justify-center text-agg-foreground transition-colors hover:cursor-pointer hover:text-agg-foreground/80",
             onClick: onBack,
             "aria-label": "Go back",
             children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(ChevronLeftIcon, { className: "h-6 w-6" })
@@ -2217,8 +2204,8 @@ var WithdrawAmountStep = ({
     /* @__PURE__ */ (0, import_jsx_runtime52.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_runtime52.jsxs)("div", { className: "flex flex-col gap-6", children: [
       /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "flex items-center justify-between", children: [
         /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(VenueLogo, { venue: venue.venue, size: "xs", className: "rounded-sm" }),
-          /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("p", { className: "text-sm text-muted-foreground leading-5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(VenueLogo, { venue: venue.venue, size: "small", className: "rounded-sm" }),
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("p", { className: "agg-type-label text-agg-muted-foreground", children: [
             displayName,
             " balance: ",
             formatCompactUsd(venue.balance)
@@ -2228,7 +2215,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"
           }
@@ -2236,7 +2223,7 @@ var WithdrawAmountStep = ({
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "flex-1 min-w-0", children: [
         /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "flex items-baseline", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "text-3xl sm:text-4xl font-bold text-foreground leading-none", children: "$" }),
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "agg-type-display text-agg-foreground", children: "$" }),
           /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
             "input",
             {
@@ -2244,8 +2231,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) : "",
@@ -2253,13 +2240,13 @@ var WithdrawAmountStep = ({
             }
           )
         ] }),
-        exceedsBalance ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("p", { className: "mt-2 text-sm text-error", children: "Amount exceeds available balance" }) : null
+        exceedsBalance ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("p", { className: "agg-type-label mt-2 text-agg-error", children: "Amount exceeds available balance" }) : null
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
         Button,
         {
           variant: "primary",
-          size: "xl",
+          size: "large",
           className: "w-full",
           disabled: !isValid,
           onClick: () => onContinue(numericAmount),
@@ -2278,13 +2265,13 @@ var KalshiStepCard = ({
   description,
   children
 }) => /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "flex flex-col gap-2 rounded-xl bg-secondary-hover p-4", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("p", { className: "text-xs font-bold uppercase leading-4 text-muted-foreground", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("p", { className: "agg-type-caption-caps text-agg-muted-foreground", children: [
     "Step ",
     step
   ] }),
   /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "flex flex-col gap-1", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("p", { className: "text-sm font-bold text-foreground leading-5", children: title }),
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("p", { className: "text-sm text-foreground leading-5", children: description })
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("p", { className: "agg-type-label-strong text-agg-foreground", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("p", { className: "agg-type-label text-agg-foreground", children: description })
   ] }),
   children
 ] });
@@ -2298,13 +2285,13 @@ var KalshiWithdrawStep = ({
       VenueLogo,
       {
         venue: "kalshi",
-        size: "xl",
+        size: "large",
         className: "h-[60px] w-[60px] rounded-lg"
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "flex flex-col items-center gap-4 text-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("h2", { className: "text-2xl font-bold text-foreground leading-8", children: "Withdraw from Kalshi" }),
-      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("p", { className: "text-base text-foreground leading-6", children: "To withdraw from Kalshi you'll need to initiate the withdrawal from your Kalshi account directly on Kalshi's site." })
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("h2", { className: "agg-type-heading text-agg-foreground", children: "Withdraw from Kalshi" }),
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("p", { className: "agg-type-body text-agg-foreground", children: "To withdraw from Kalshi you'll need to initiate the withdrawal from your Kalshi account directly on Kalshi's site." })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "flex w-full flex-col gap-4", children: [
       /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
@@ -2317,7 +2304,7 @@ var KalshiWithdrawStep = ({
             Button,
             {
               variant: "secondary",
-              size: "s",
+              size: "small",
               suffix: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ExternalLinkIcon, { className: "h-3.5 w-3.5" }),
               onClick: () => {
                 window.open(withdrawUrl, "_blank", "noopener,noreferrer");
@@ -2344,7 +2331,7 @@ var KalshiWithdrawStep = ({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Button, { variant: "secondary", size: "l", onClick: onDone, children: "Done" })
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Button, { variant: "secondary", size: "large", onClick: onDone, children: "Done" })
   ] }) })
 ] });
 

package/dist/withdraw-modal.mjs

@@ -1,13 +1,13 @@
 import {
   WithdrawModal
-} from "./chunk-ZYREURXK.mjs";
-import "./chunk-VIP7HSOU.mjs";
-import "./chunk-BLSHXIAH.mjs";
-import "./chunk-F236MLT6.mjs";
+} from "./chunk-2MJY6RVY.mjs";
+import "./chunk-5K7VXAYM.mjs";
+import "./chunk-D7JTOGYP.mjs";
+import "./chunk-PZTHM6WG.mjs";
 import "./chunk-NDG43KGL.mjs";
 import "./chunk-BNDFQPHF.mjs";
-import "./chunk-PGSPYQOW.mjs";
-import "./chunk-ZVBVGWSP.mjs";
+import "./chunk-KAGYJ4XT.mjs";
+import "./chunk-FO263M3V.mjs";
 import "./chunk-GJ4U5NCE.mjs";
 export {
   WithdrawModal

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agg-market/ui",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "sideEffects": false,
   "license": "MIT",
   "main": "./dist/index.js",

package/dist/chunk-AEMAY3MR.mjs

@@ -1,44 +0,0 @@
-import {
-  cn
-} from "./chunk-GJ4U5NCE.mjs";
-
-// src/primitives/badge/badge.constants.ts
-var badgeSizes = ["xxs", "xs", "s", "m", "l", "xl", "xxl"];
-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")
-};
-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 = "m", classNames }) {
-  const resolvedText = `${text}`;
-  const resolvedAriaLabel = resolvedText.length > 0 ? resolvedText : void 0;
-  return /* @__PURE__ */ jsxs(
-    "span",
-    {
-      "aria-label": resolvedAriaLabel,
-      className: cn(baseBadgeClasses, badgeSizeClasses[size], classNames == null ? void 0 : classNames.root),
-      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-DYEWXEEY.mjs

@@ -1,37 +0,0 @@
-import {
-  cn
-} from "./chunk-GJ4U5NCE.mjs";
-
-// src/primitives/typography/typography.constants.ts
-var variantClasses = {
-  title: cn("font-agg-sans text-agg-lg leading-agg-7", "font-agg-bold", "text-agg-foreground"),
-  body: cn("font-agg-sans text-agg-base leading-agg-6", "font-agg-normal", "text-agg-foreground"),
-  meta: cn(
-    "font-agg-sans text-agg-sm leading-agg-5",
-    "font-agg-normal",
-    "text-agg-muted-foreground"
-  ),
-  label: cn(
-    "font-agg-sans text-agg-sm leading-agg-5",
-    "font-agg-bold uppercase",
-    "text-agg-foreground"
-  ),
-  value: cn("font-agg-sans text-agg-xl leading-agg-7", "font-agg-normal", "text-agg-foreground"),
-  caption: cn("font-agg-sans text-agg-xs leading-agg-4", "font-agg-normal", "text-agg-foreground")
-};
-
-// src/primitives/typography/index.tsx
-import { jsx } from "react/jsx-runtime";
-var Typography = ({
-  as: Component = "p",
-  variant = "body",
-  className,
-  children
-}) => {
-  return /* @__PURE__ */ jsx(Component, { className: cn(variantClasses[variant], "truncate", className), children });
-};
-Typography.displayName = "Typography";
-
-export {
-  Typography
-};