@agg-market/ui 0.0.6 → 2.0.0

package/dist/{chunk-MXBPDNMC.mjs → chunk-BEDUFOIG.mjs}

@@ -1,21 +1,21 @@
 import {
   EventListItem
-} from "./chunk-W2DMBW4E.mjs";
+} from "./chunk-DL7STJQ5.mjs";
 import {
   Tabs
-} from "./chunk-LWTQD345.mjs";
+} from "./chunk-S3H63TQ5.mjs";
 import {
   Skeleton
-} from "./chunk-JH5VMNDL.mjs";
+} from "./chunk-V52WSZHQ.mjs";
 import {
   VenueLogo
-} from "./chunk-BLSHXIAH.mjs";
+} from "./chunk-D7JTOGYP.mjs";
 import {
   Icon
-} from "./chunk-F236MLT6.mjs";
+} from "./chunk-PZTHM6WG.mjs";
 import {
   Typography
-} from "./chunk-DYEWXEEY.mjs";
+} from "./chunk-ERGNR6UQ.mjs";
 import {
   __spreadProps,
   __spreadValues,
@@ -23,7 +23,7 @@ import {
 } from "./chunk-GJ4U5NCE.mjs";
 
 // src/events/list/index.tsx
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useEvents, useLabels } from "@agg-market/hooks";
 
 // src/events/list/event-list.constants.ts
@@ -90,7 +90,7 @@ var resolveTabVenus = (tab) => {
 import { jsx, jsxs } from "react/jsx-runtime";
 var renderTabIcon = (tab, isActive) => {
   if (tab.venueLogo) {
-    return /* @__PURE__ */ jsx(VenueLogo, { venue: tab.venueLogo, size: "xs" });
+    return /* @__PURE__ */ jsx(VenueLogo, { venue: tab.venueLogo, size: "small" });
   }
   if (!tab.iconName)
     return null;
@@ -98,11 +98,37 @@ var renderTabIcon = (tab, isActive) => {
     Icon,
     {
       name: tab.iconName,
-      size: "s",
+      size: "small",
       color: isActive ? "var(--agg-color-primary)" : "var(--agg-color-foreground)"
     }
   );
 };
+var TAB_MIN_WIDTH = 80;
+var TAB_HORIZONTAL_PADDING = 32;
+var TAB_ICON_AND_GAP_WIDTH = 24;
+var TAB_OUTER_BORDER_WIDTH = 2;
+var TAB_INNER_BORDER_WIDTH = 1;
+var measureTabLabelWidth = (label) => {
+  if (typeof document === "undefined")
+    return label.length * 9;
+  const canvas = document.createElement("canvas");
+  const context = canvas.getContext("2d");
+  if (!context)
+    return label.length * 9;
+  context.font = "700 16px Inter";
+  return context.measureText(label).width;
+};
+var estimateTabsWidth = (items) => {
+  if (items.length === 0)
+    return 0;
+  const tabsWidth = items.reduce((sum, item) => {
+    const textWidth = Math.ceil(measureTabLabelWidth(item.label));
+    const iconWidth = item.icon ? TAB_ICON_AND_GAP_WIDTH : 0;
+    const buttonWidth = Math.max(TAB_MIN_WIDTH, textWidth + iconWidth + TAB_HORIZONTAL_PADDING);
+    return sum + buttonWidth;
+  }, 0);
+  return tabsWidth + TAB_OUTER_BORDER_WIDTH + (items.length - 1) * TAB_INNER_BORDER_WIDTH;
+};
 var EventList = ({
   title,
   maxItemsPerRow = 3,
@@ -120,6 +146,7 @@ var EventList = ({
   const [activeTabValue, setActiveTabValue] = useState(
     (_b = (_a = defaultEventListTabs[0]) == null ? void 0 : _a.value) != null ? _b : "matched"
   );
+  const [shouldUseSelectOverflow, setShouldUseSelectOverflow] = useState(false);
   const activeTab = useMemo(() => {
     return defaultEventListTabs.find((tab) => tab.value === activeTabValue);
   }, [activeTabValue]);
@@ -159,6 +186,46 @@ var EventList = ({
       };
     });
   }, [activeTabValue]);
+  const headerRef = useRef(null);
+  const titleRef = useRef(null);
+  const updateTabsOverflowBehavior = useCallback(() => {
+    if (typeof window === "undefined")
+      return;
+    const headerElement = headerRef.current;
+    const titleElement = titleRef.current;
+    if (!headerElement || !titleElement)
+      return;
+    const isDesktop = window.matchMedia("(min-width: 768px)").matches;
+    if (!isDesktop) {
+      setShouldUseSelectOverflow(false);
+      return;
+    }
+    const headerStyles = window.getComputedStyle(headerElement);
+    const rawGap = headerStyles.columnGap || headerStyles.gap || "0";
+    const horizontalGap = Number.parseFloat(rawGap) || 0;
+    const availableTabsWidth = headerElement.clientWidth - titleElement.getBoundingClientRect().width - horizontalGap;
+    const estimatedTabsWidth = estimateTabsWidth(tabsItems);
+    setShouldUseSelectOverflow(availableTabsWidth > 0 && estimatedTabsWidth > availableTabsWidth);
+  }, [tabsItems]);
+  useEffect(() => {
+    updateTabsOverflowBehavior();
+  }, [updateTabsOverflowBehavior]);
+  useEffect(() => {
+    if (typeof ResizeObserver === "undefined")
+      return;
+    const headerElement = headerRef.current;
+    const titleElement = titleRef.current;
+    if (!headerElement || !titleElement)
+      return;
+    const resizeObserver = new ResizeObserver(() => {
+      updateTabsOverflowBehavior();
+    });
+    resizeObserver.observe(headerElement);
+    resizeObserver.observe(titleElement);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [updateTabsOverflowBehavior]);
   const resolvedMaxItemsPerRow = Number.isFinite(maxItemsPerRow) ? Math.max(1, Math.floor(maxItemsPerRow)) : 1;
   const loadingPlaceholderCount = isFetchingNextPage ? Math.min(resolvedMaxItemsPerRow, resolvedMaxVisibleItems != null ? resolvedMaxVisibleItems : Infinity) : 0;
   const shouldRenderLoadingState = isLoading && tileEvents.length === 0;
@@ -200,19 +267,25 @@ var EventList = ({
     return /* @__PURE__ */ jsx(Skeleton, { view: "event-list", ariaLabel: labels.eventList.loading(title) });
   }
   return /* @__PURE__ */ jsxs("section", { className: "flex w-full flex-col gap-5", children: [
-    /* @__PURE__ */ jsxs("header", { className: "flex flex-col md:flex-row w-full flex-nowrap items-start md:items-center justify-between gap-2 md:gap-4", children: [
-      /* @__PURE__ */ jsx(Typography, { as: "h2", variant: "value", className: "truncate [&::first-letter]:uppercase", children: title }),
-      /* @__PURE__ */ jsx(
-        Tabs,
-        {
-          ariaLabel: labels.eventList.tabsAria(title),
-          className: "max-w-full",
-          items: tabsItems,
-          value: activeTabValue,
-          onChange: setActiveTabValue
-        }
-      )
-    ] }),
+    /* @__PURE__ */ jsxs(
+      "header",
+      {
+        ref: headerRef,
+        className: "flex flex-col sm:flex-row w-full flex-nowrap items-start sm:items-center justify-between gap-2 sm:gap-4",
+        children: [
+          /* @__PURE__ */ jsx("div", { ref: titleRef, className: "min-w-0", children: /* @__PURE__ */ jsx(Typography, { as: "h2", variant: "title", className: "truncate [&::first-letter]:uppercase", children: title }) }),
+          /* @__PURE__ */ jsx(
+            Tabs,
+            {
+              ariaLabel: labels.eventList.tabsAria(title),
+              items: tabsItems,
+              value: activeTabValue,
+              onChange: setActiveTabValue
+            }
+          )
+        ]
+      }
+    ),
     /* @__PURE__ */ jsxs("div", { className: gridClassName, style: gridStyle, children: [
       tileEvents.map((event) => /* @__PURE__ */ jsx(
         EventListItem,

package/dist/{chunk-VC7LTPQD.mjs → chunk-BN5VVHNV.mjs}

@@ -1,6 +1,6 @@
 import {
   SwitchButton
-} from "./chunk-JRS2M5GY.mjs";
+} from "./chunk-CTVMT3VL.mjs";
 import {
   __spreadProps,
   __spreadValues,
@@ -170,7 +170,7 @@ var LineChart = ({
     seriesSwitchAriaLabel: labels.common.lineChartSeriesSwitchAria,
     formatSeriesOptionAriaLabel: labels.common.lineChartSeriesOptionAria
   }) : null : null;
-  return /* @__PURE__ */ jsxs("div", { className: cn("w-full", classNames == null ? void 0 : classNames.root), style: { width }, children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn("group/agg-chart", "w-full", classNames == null ? void 0 : classNames.root), style: { width }, children: [
     !isLoading && seriesControls ? /* @__PURE__ */ jsx("div", { className: cn("mb-3", classNames == null ? void 0 : classNames.controls), children: seriesControls }) : null,
     /* @__PURE__ */ jsx(
       "div",

package/dist/{chunk-JRS2M5GY.mjs → chunk-CTVMT3VL.mjs}

@@ -79,7 +79,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__ */ jsxs(
@@ -99,7 +102,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: {
@@ -123,15 +126,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) => {

package/dist/{chunk-USLTNDJA.mjs → chunk-D5FTFSKL.mjs}

@@ -1,21 +1,21 @@
 import {
   Settlement
-} from "./chunk-QFQHD2V6.mjs";
+} from "./chunk-4KMFDCAH.mjs";
 import {
   PlaceOrder
-} from "./chunk-VUDJ3PYM.mjs";
+} from "./chunk-O46OFVH6.mjs";
 import {
   EventListItemDetails
-} from "./chunk-ZHKMDK5M.mjs";
+} from "./chunk-KFOATMAE.mjs";
 import {
   MarketDetails
-} from "./chunk-XELWY7SO.mjs";
+} from "./chunk-QYZKC7KG.mjs";
 import {
   Typography
-} from "./chunk-DYEWXEEY.mjs";
+} from "./chunk-ERGNR6UQ.mjs";
 import {
   Card
-} from "./chunk-3O4U3E5I.mjs";
+} from "./chunk-FO2QCB4Z.mjs";
 import {
   __spreadProps,
   __spreadValues,
@@ -93,8 +93,8 @@ var EventMarketPageUnavailableState = ({
       role: "status",
       "aria-label": ariaLabel != null ? ariaLabel : labels.eventMarketPage.unavailableAria,
       children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ jsx(Typography, { variant: "title", children: labels.eventMarketPage.unavailableTitle }),
-        /* @__PURE__ */ jsx(Typography, { variant: "meta", children: labels.eventMarketPage.unavailableDescription })
+        /* @__PURE__ */ jsx(Typography, { variant: "body-large-strong", children: labels.eventMarketPage.unavailableTitle }),
+        /* @__PURE__ */ jsx(Typography, { variant: "label", className: "text-agg-muted-foreground", children: labels.eventMarketPage.unavailableDescription })
       ] })
     }
   );

package/dist/{chunk-BLSHXIAH.mjs → chunk-D7JTOGYP.mjs}

@@ -12,7 +12,7 @@ import {
 import { useLabels } from "@agg-market/hooks";
 
 // src/primitives/venue-logo/logo-props.ts
-var DEFAULT_MONOCHROME_COLOR = "#000000";
+var DEFAULT_MONOCHROME_COLOR = "currentColor";
 var resolveLogoPrimaryColor = ({
   brandColor,
   isColor = true,
@@ -216,14 +216,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/primitives/venue-logo/index.tsx
@@ -233,7 +228,7 @@ var VenueLogo = ({
   isColor = true,
   isMonochromatic = false,
   color,
-  size = "m",
+  size = "medium",
   className,
   ariaLabel,
   title
@@ -245,7 +240,7 @@ var VenueLogo = ({
   return /* @__PURE__ */ jsx5(
     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/{chunk-W2DMBW4E.mjs → chunk-DL7STJQ5.mjs}

@@ -12,23 +12,23 @@ import {
 } from "./chunk-GHB3GOCW.mjs";
 import {
   Badge
-} from "./chunk-AEMAY3MR.mjs";
+} from "./chunk-K6IJ4WBM.mjs";
 import {
   Skeleton,
   baseCardClassName
-} from "./chunk-JH5VMNDL.mjs";
+} from "./chunk-V52WSZHQ.mjs";
 import {
   VenueLogo
-} from "./chunk-BLSHXIAH.mjs";
+} from "./chunk-D7JTOGYP.mjs";
 import {
   Icon
-} from "./chunk-F236MLT6.mjs";
+} from "./chunk-PZTHM6WG.mjs";
 import {
   Typography
-} from "./chunk-DYEWXEEY.mjs";
+} from "./chunk-ERGNR6UQ.mjs";
 import {
   Card
-} from "./chunk-3O4U3E5I.mjs";
+} from "./chunk-FO2QCB4Z.mjs";
 import {
   __objRest,
   __spreadValues,
@@ -70,7 +70,7 @@ var EventListItemUnavailableState = ({
       role: "status",
       "aria-label": ariaLabel != null ? ariaLabel : labels.eventItem.unavailableAria,
       children: /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1", classNames == null ? void 0 : classNames.header), children: [
-        /* @__PURE__ */ jsx(Typography, { variant: "title", className: cn("truncate", classNames == null ? void 0 : classNames.title), children: labels.eventItem.unavailableTitle }),
+        /* @__PURE__ */ jsx(Typography, { variant: "body-large-strong", className: cn("truncate", classNames == null ? void 0 : classNames.title), children: labels.eventItem.unavailableTitle }),
         /* @__PURE__ */ jsx(Typography, { variant: "body", className: "text-agg-muted-foreground", children: labels.eventItem.unavailableDescription })
       ] })
     }
@@ -114,8 +114,8 @@ var EventListItemContent = ({
   const handleKeyDown = (eventToHandle) => {
     if (!onClick)
       return;
-    if (eventToHandle.key === "Enter" || eventToHandle.key === " ") {
-      eventToHandle.preventDefault();
+    if ((eventToHandle == null ? void 0 : eventToHandle.key) === "Enter" || (eventToHandle == null ? void 0 : eventToHandle.key) === " ") {
+      eventToHandle == null ? void 0 : eventToHandle.preventDefault();
       onClick();
     }
   };
@@ -124,9 +124,17 @@ var EventListItemContent = ({
       return null;
     if (Math.abs(value) < config.arbitrageThreshold)
       return null;
-    return /* @__PURE__ */ jsxs("div", { className: cn("flex items-baseline gap-1", "text-agg-success"), children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "label", className: "text-agg-success", children: config.formatPercent(value) }),
-      /* @__PURE__ */ jsx(Icon, { name: "triangle-up", size: "xxs", title: labels.eventItem.arbitrage })
+    return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-1", "text-agg-success"), children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "label-strong", className: "text-agg-success", children: config.formatPercent(value) }),
+      /* @__PURE__ */ jsx(
+        Icon,
+        {
+          name: "triangle-up",
+          size: "small",
+          title: labels.eventItem.arbitrage,
+          className: "size-2!"
+        }
+      )
     ] });
   };
   return /* @__PURE__ */ jsxs(
@@ -151,9 +159,10 @@ var EventListItemContent = ({
           /* @__PURE__ */ jsx(
             Typography,
             {
-              variant: "title",
+              variant: "body-strong",
               className: cn(
-                "min-w-0 text-agg-base font-agg-bold leading-agg-6 whitespace-normal [display:-webkit-box] [-webkit-box-orient:vertical] [-webkit-line-clamp:2] md:block md:truncate md:whitespace-nowrap",
+                "min-w-0 text-agg-base font-agg-bold leading-agg-6 ",
+                "truncate text-wrap wrap-break-word line-clamp-2",
                 classNames == null ? void 0 : classNames.title
               ),
               children: resolvedTitle
@@ -170,7 +179,7 @@ var EventListItemContent = ({
             "div",
             {
               className: cn(
-                "grid w-full grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-3",
+                "flex flex-row gap-3 w-full items-center justify-between",
                 classNames == null ? void 0 : classNames.outcomeRow
               ),
               children: [
@@ -182,21 +191,23 @@ var EventListItemContent = ({
                     children: formattedTitle
                   }
                 ),
-                renderArbitrage(arbitragePercent),
-                showBadge ? /* @__PURE__ */ jsx(
-                  Badge,
-                  {
-                    text: config.formatPercent(probability),
-                    prefix: showVenueLogo ? /* @__PURE__ */ jsx(VenueLogo, { venue: visibleOutcome.venue, size: "s" }) : void 0,
-                    size: "l",
-                    classNames: {
-                      root: cn(
-                        "h-9 min-w-[101px] justify-center px-4 text-agg-base leading-agg-6",
-                        classNames == null ? void 0 : classNames.badge
-                      )
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-3 items-center justify-end", children: [
+                  renderArbitrage(arbitragePercent),
+                  showBadge ? /* @__PURE__ */ jsx(
+                    Badge,
+                    {
+                      text: config.formatPercent(probability),
+                      prefix: showVenueLogo ? /* @__PURE__ */ jsx(VenueLogo, { venue: visibleOutcome.venue, size: "small" }) : void 0,
+                      size: "large",
+                      classNames: {
+                        root: cn(
+                          "h-9 min-w-[101px] justify-center px-4 text-agg-base leading-agg-6",
+                          classNames == null ? void 0 : classNames.badge
+                        )
+                      }
                     }
-                  }
-                ) : null
+                  ) : null
+                ] })
               ]
             },
             `${visibleOutcome.market.id}-${visibleOutcome.outcome.id}`
@@ -211,7 +222,7 @@ var EventListItemContent = ({
               classNames == null ? void 0 : classNames.footer
             ),
             children: [
-              /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", "text-agg-sm leading-agg-5"), children: [
+              /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-1", "text-agg-sm leading-agg-5"), children: [
                 /* @__PURE__ */ jsx("span", { className: "truncate text-agg-muted-foreground", children: formatCountLabel(
                   marketCount,
                   labels.eventItem.marketSingular,
@@ -219,16 +230,33 @@ var EventListItemContent = ({
                 ) }),
                 /* @__PURE__ */ jsx("span", { className: "text-agg-muted-foreground", children: "\xD7" }),
                 singleVenue ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 truncate text-agg-muted-foreground", children: [
-                  showVenueLogo ? /* @__PURE__ */ jsx(VenueLogo, { venue: singleVenue, size: "xs" }) : null,
+                  showVenueLogo ? /* @__PURE__ */ jsx(
+                    VenueLogo,
+                    {
+                      venue: singleVenue,
+                      size: "small",
+                      isMonochromatic: true,
+                      className: "text-agg-muted-foreground!"
+                    }
+                  ) : null,
                   /* @__PURE__ */ jsx("span", { children: venueLabel })
                 ] }) : /* @__PURE__ */ jsx("span", { className: "truncate text-agg-muted-foreground", children: formatCountLabel(
                   venueCount,
                   labels.eventItem.venueSingular,
                   labels.eventItem.venuePlural
                 ) }),
-                showVenueLogo && !singleVenue && visibleVenueLogos.length > 0 ? /* @__PURE__ */ jsx("span", { className: "flex items-center gap-1 overflow-hidden", children: visibleVenueLogos.map((venue) => /* @__PURE__ */ jsx(VenueLogo, { venue, size: "xs" }, venue)) }) : null
+                showVenueLogo && !singleVenue && visibleVenueLogos.length > 0 ? /* @__PURE__ */ jsx("span", { className: "flex items-center gap-1 overflow-hidden", children: visibleVenueLogos.map((venue) => /* @__PURE__ */ jsx(
+                  VenueLogo,
+                  {
+                    venue,
+                    size: "small",
+                    isMonochromatic: true,
+                    className: "text-agg-muted-foreground!"
+                  },
+                  venue
+                )) }) : null
               ] }),
-              volumeLabel ? /* @__PURE__ */ jsx(Typography, { variant: "meta", className: "text-agg-sm", children: volumeLabel }) : null
+              volumeLabel ? /* @__PURE__ */ jsx(Typography, { variant: "label", className: "text-agg-sm text-agg-muted-foreground", children: volumeLabel }) : null
             ]
           }
         )

package/dist/chunk-ERGNR6UQ.mjs

@@ -0,0 +1,67 @@
+import {
+  cn
+} from "./chunk-GJ4U5NCE.mjs";
+
+// src/primitives/typography/typography.constants.ts
+var typographyVariants = [
+  "display",
+  "heading",
+  "title",
+  "title-strong",
+  "body-large",
+  "body-large-strong",
+  "body",
+  "body-strong",
+  "label",
+  "label-strong",
+  "label-caps",
+  "caption",
+  "caption-strong",
+  "caption-caps",
+  "overline"
+];
+var typographyVariantClasses = {
+  display: cn("agg-type-display"),
+  heading: cn("agg-type-heading"),
+  title: cn("agg-type-title"),
+  "title-strong": cn("agg-type-title-strong"),
+  "body-large": cn("agg-type-body-large"),
+  "body-large-strong": cn("agg-type-body-large-strong"),
+  body: cn("agg-type-body"),
+  "body-strong": cn("agg-type-body-strong"),
+  label: cn("agg-type-label"),
+  "label-strong": cn("agg-type-label-strong"),
+  "label-caps": cn("agg-type-label-caps"),
+  caption: cn("agg-type-caption"),
+  "caption-strong": cn("agg-type-caption-strong"),
+  "caption-caps": cn("agg-type-caption-caps"),
+  overline: cn("agg-type-overline")
+};
+
+// src/primitives/typography/index.tsx
+import { jsx } from "react/jsx-runtime";
+var Typography = ({
+  as: Component = "p",
+  variant = "body",
+  className,
+  children
+}) => {
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      className: cn(
+        "group/agg-typography",
+        "text-agg-foreground",
+        typographyVariantClasses[variant],
+        className
+      ),
+      children
+    }
+  );
+};
+Typography.displayName = "Typography";
+
+export {
+  typographyVariants,
+  Typography
+};

package/dist/chunk-FO263M3V.mjs

@@ -0,0 +1,10 @@
+// src/primitives/icon/icon.constants.ts
+var iconSizeClasses = {
+  small: "h-4 w-4",
+  medium: "h-6 w-6",
+  large: "h-8 w-8"
+};
+
+export {
+  iconSizeClasses
+};

package/dist/{chunk-3O4U3E5I.mjs → chunk-FO2QCB4Z.mjs}

@@ -9,19 +9,23 @@ import {
 import { useSdkUiConfig } from "@agg-market/hooks";
 import { jsx } from "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 } = useSdkUiConfig();
   return /* @__PURE__ */ 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/{chunk-OGI343OV.mjs → chunk-IGPNIM2B.mjs}

@@ -1,6 +1,6 @@
 import {
   iconSizeClasses
-} from "./chunk-ZVBVGWSP.mjs";
+} from "./chunk-FO263M3V.mjs";
 import {
   cn
 } from "./chunk-GJ4U5NCE.mjs";
@@ -9,7 +9,7 @@ import {
 import { useLabels, useSdkUiConfig } from "@agg-market/hooks";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var LoadingIcon = ({
-  size = "m",
+  size = "medium",
   className,
   ariaLabel
 }) => {
@@ -21,6 +21,7 @@ var LoadingIcon = ({
       role: "status",
       "aria-label": ariaLabel != null ? ariaLabel : labels.common.loading,
       className: cn(
+        "group/agg-loading-icon",
         "inline-grid place-items-center text-agg-primary will-change-transform",
         className
       ),