@agg-market/ui 1.0.0 → 3.0.0

package/dist/event-list-item-details.js

@@ -63,7 +63,10 @@ __export(item_details_exports, {
 });
 module.exports = __toCommonJS(item_details_exports);
 var import_react3 = require("react");
-var import_hooks12 = require("@agg-market/hooks");
+var import_hooks13 = require("@agg-market/hooks");
+
+// src/primitives/badge/index.tsx
+var import_hooks = require("@agg-market/hooks");
 
 // src/shared/utils.ts
 var cn = (...values) => values.filter(Boolean).join(" ");
@@ -85,13 +88,9 @@ var toDate = (value) => {
 
 // src/primitives/badge/badge.constants.ts
 var badgeSizeClasses = {
-  xxs: cn("h-4 px-1.5 gap-0.5", "text-agg-xs leading-agg-3"),
-  xs: cn("h-5 px-2 gap-1", "text-agg-xs leading-agg-4"),
-  s: cn("h-6 px-2.5 gap-1", "text-agg-sm leading-agg-5"),
-  m: cn("h-7 px-3 gap-1.5", "text-agg-sm leading-agg-5"),
-  l: cn("h-8 px-3.5 gap-1.5", "text-agg-base leading-agg-6"),
-  xl: cn("h-9 px-4 gap-2", "text-agg-lg leading-agg-7"),
-  xxl: cn("h-10 px-5 gap-2", "text-agg-xl leading-agg-7")
+  small: cn("py-1.5 px-4 gap-1.5", "agg-type-label"),
+  medium: cn("py-1.5 px-4 gap-2", "agg-type-body"),
+  large: cn("py-2.5 px-6 gap-2", "agg-type-body")
 };
 var baseBadgeClasses = cn(
   "inline-flex items-center justify-center rounded-agg-full font-agg-sans",
@@ -100,66 +99,70 @@ var baseBadgeClasses = cn(
 
 // src/primitives/badge/index.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-function Badge({ text, prefix, suffix, size = "m", classNames }) {
+function Badge({
+  text,
+  prefix,
+  suffix,
+  size = "medium",
+  classNames,
+  onClick,
+  isActive = false
+}) {
+  const { enableAnimations } = (0, import_hooks.useSdkUiConfig)();
   const resolvedText = `${text}`;
   const resolvedAriaLabel = resolvedText.length > 0 ? resolvedText : void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "span",
-    {
+    __spreadProps(__spreadValues({
       "aria-label": resolvedAriaLabel,
-      className: cn(baseBadgeClasses, badgeSizeClasses[size], classNames == null ? void 0 : classNames.root),
+      className: cn(
+        "group/agg-badge",
+        baseBadgeClasses,
+        badgeSizeClasses[size],
+        onClick ? "cursor-pointer hover:bg-agg-tertiary disabled:cursor-not-allowed" : "",
+        getMotionClassName(
+          enableAnimations,
+          "transition-[border-color,background-color] duration-200 ease-in-out"
+        ),
+        isActive ? "border-agg-primary bg-agg-secondary! font-agg-bold!" : "border-transparent font-agg-normal",
+        classNames == null ? void 0 : classNames.root
+      )
+    }, onClick && { onClick }), {
       children: [
         prefix ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: classNames == null ? void 0 : classNames.prefix, children: prefix }) : null,
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: cn("truncate", classNames == null ? void 0 : classNames.text), children: text }),
         suffix ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: classNames == null ? void 0 : classNames.suffix, children: suffix }) : null
       ]
-    }
+    })
   );
 }
 Badge.displayName = "Badge";
 
 // src/primitives/button/index.tsx
-var import_hooks = require("@agg-market/hooks");
+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 sizeClasses = {
-  xxs: cn("h-6 px-2.5 gap-1", "text-agg-xs leading-agg-4"),
-  xs: cn("h-7 px-3 gap-1", "text-agg-xs leading-agg-4"),
-  s: cn("h-8 px-4 gap-1.5", "text-agg-sm leading-agg-5"),
-  m: cn("h-9 px-5 gap-1.5", "text-agg-sm leading-agg-5"),
-  l: cn("h-10 px-6 gap-2", "text-agg-base leading-agg-6"),
-  xl: cn("h-11 px-7 gap-2", "text-agg-base leading-agg-6"),
-  xxl: cn("h-12 px-8 gap-2", "text-agg-base leading-agg-6")
+  small: cn("h-8 px-4 gap-1.5", "text-agg-sm leading-agg-5"),
+  medium: cn("h-9 px-5 gap-1.5", "text-agg-sm leading-agg-5"),
+  large: cn("h-10 px-6 gap-2", "text-agg-base leading-agg-6")
 };
 var iconSizeClasses2 = {
-  xxs: iconSizeClasses.xs,
-  xs: iconSizeClasses.xs,
-  s: iconSizeClasses.s,
-  m: iconSizeClasses.s,
-  l: iconSizeClasses.s,
-  xl: iconSizeClasses.s,
-  xxl: iconSizeClasses.s
+  small: iconSizeClasses.small,
+  medium: iconSizeClasses.small,
+  large: iconSizeClasses.small
 };
 var iconSlotClasses = {
-  xxs: "[&_svg]:h-3 [&_svg]:w-3",
-  xs: "[&_svg]:h-3 [&_svg]:w-3",
-  s: "[&_svg]:h-4 [&_svg]:w-4",
-  m: "[&_svg]:h-4 [&_svg]:w-4",
-  l: "[&_svg]:h-4 [&_svg]:w-4",
-  xl: "[&_svg]:h-4 [&_svg]:w-4",
-  xxl: "[&_svg]:h-4 [&_svg]:w-4"
+  small: "[&_svg]:h-4 [&_svg]:w-4",
+  medium: "[&_svg]:h-4 [&_svg]:w-4",
+  large: "[&_svg]:h-4 [&_svg]:w-4"
 };
 var variantClasses = {
   primary: cn(
@@ -175,10 +178,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(
@@ -194,7 +198,7 @@ var Button = (_a) => {
   var _b = _a, {
     children,
     variant = "primary",
-    size = "m",
+    size = "medium",
     isLoading = false,
     disabled,
     prefix,
@@ -214,15 +218,16 @@ var Button = (_a) => {
     "className",
     "aria-label"
   ]);
-  const { enableAnimations } = (0, import_hooks.useSdkUiConfig)();
+  const { enableAnimations } = (0, import_hooks2.useSdkUiConfig)();
   const isDisabled = disabled || isLoading;
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "button",
     __spreadProps(__spreadValues({
       type,
       className: cn(
+        "group/agg-button",
         baseButtonClasses,
-        getMotionClassName(enableAnimations, "transition-colors"),
+        getMotionClassName(enableAnimations, "transition-colors duration-200 ease-in-out"),
         sizeClasses[size],
         iconSlotClasses[size],
         variantClasses[variant],
@@ -254,13 +259,13 @@ Button.displayName = "Button";
 
 // src/primitives/chart/index.tsx
 var import_dayjs = __toESM(require("dayjs"));
-var import_hooks3 = require("@agg-market/hooks");
+var import_hooks4 = require("@agg-market/hooks");
 var import_react2 = require("react");
 var import_liveline = require("liveline");
 
 // src/primitives/switch-button/index.tsx
 var import_react = require("react");
-var import_hooks2 = require("@agg-market/hooks");
+var import_hooks3 = require("@agg-market/hooks");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var resolveActiveIndex = (options, value) => {
   const activeIndex = options.findIndex((option) => option.value === value);
@@ -288,7 +293,7 @@ var SwitchButton = ({
   ariaLabel,
   className
 }) => {
-  const { enableAnimations } = (0, import_hooks2.useSdkUiConfig)();
+  const { enableAnimations } = (0, import_hooks3.useSdkUiConfig)();
   const activeIndex = (0, import_react.useMemo)(() => {
     return resolveActiveIndex(options, value);
   }, [options, value]);
@@ -334,7 +339,10 @@ var SwitchButton = ({
     "div",
     {
       className: cn(
+        "group/agg-switch",
         "inline-flex min-w-0 rounded-agg-full bg-agg-secondary-hover font-agg-sans",
+        getMotionClassName(enableAnimations, "transition-background duration-200 ease-in-out"),
+        "cursor-pointer hover:bg-agg-tertiary",
         className
       ),
       children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
@@ -354,7 +362,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: {
@@ -378,15 +386,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) => {
@@ -509,8 +521,8 @@ var LineChart = ({
   renderSeriesControls
 }) => {
   var _a, _b;
-  const labels = (0, import_hooks3.useLabels)();
-  const { theme } = (0, import_hooks3.useSdkUiConfig)();
+  const labels = (0, import_hooks4.useLabels)();
+  const { theme } = (0, import_hooks4.useSdkUiConfig)();
   const normalizedSeries = (0, import_react2.useMemo)(() => {
     return normalizeSeries(series);
   }, [series]);
@@ -564,7 +576,7 @@ var LineChart = ({
     seriesSwitchAriaLabel: labels.common.lineChartSeriesSwitchAria,
     formatSeriesOptionAriaLabel: labels.common.lineChartSeriesOptionAria
   }) : null : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: cn("w-full", classNames == null ? void 0 : classNames.root), style: { width }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: cn("group/agg-chart", "w-full", classNames == null ? void 0 : classNames.root), style: { width }, children: [
     !isLoading && seriesControls ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: cn("mb-3", classNames == null ? void 0 : classNames.controls), children: seriesControls }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       "div",
@@ -607,34 +619,38 @@ var LineChart = ({
 LineChart.displayName = "LineChart";
 
 // src/primitives/card/index.tsx
-var import_hooks4 = require("@agg-market/hooks");
+var import_hooks5 = require("@agg-market/hooks");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var Card = (_a) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  const { enableAnimations } = (0, import_hooks4.useSdkUiConfig)();
+  var _b = _a, { className, onClick } = _b, props = __objRest(_b, ["className", "onClick"]);
+  const { enableAnimations } = (0, import_hooks5.useSdkUiConfig)();
   return /* @__PURE__ */ (0, import_jsx_runtime5.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";
 
 // src/primitives/skeleton/views/event-list-skeleton-view.tsx
-var import_hooks7 = require("@agg-market/hooks");
+var import_hooks8 = require("@agg-market/hooks");
 
 // src/primitives/skeleton/skeleton-block.tsx
-var import_hooks5 = require("@agg-market/hooks");
+var import_hooks6 = require("@agg-market/hooks");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var SkeletonBlock = ({ className }) => {
-  const { enableAnimations } = (0, import_hooks5.useSdkUiConfig)();
+  const { enableAnimations } = (0, import_hooks6.useSdkUiConfig)();
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "div",
     {
@@ -650,7 +666,7 @@ var SkeletonBlock = ({ className }) => {
 SkeletonBlock.displayName = "SkeletonBlock";
 
 // src/primitives/skeleton/views/event-list-item-skeleton-view.tsx
-var import_hooks6 = require("@agg-market/hooks");
+var import_hooks7 = require("@agg-market/hooks");
 
 // src/events/item/event-list-item.constants.ts
 var baseCardClassName = "gap-3 overflow-hidden p-5 w-full";
@@ -662,11 +678,11 @@ var EventListItemSkeletonView = ({
   ariaLabel,
   isStandalone = false
 }) => {
-  const labels = (0, import_hooks6.useLabels)();
+  const labels = (0, import_hooks7.useLabels)();
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     Card,
     {
-      className: cn(baseCardClassName, className),
+      className: cn("group/agg-skeleton", baseCardClassName, className),
       role: isStandalone ? "status" : void 0,
       "aria-label": isStandalone ? ariaLabel != null ? ariaLabel : labels.eventItem.loading : void 0,
       "aria-busy": isStandalone || void 0,
@@ -711,11 +727,11 @@ EventListItemSkeletonView.displayName = "EventListItemSkeletonView";
 // src/primitives/skeleton/views/event-list-skeleton-view.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var EventListSkeletonView = ({ className, ariaLabel }) => {
-  const labels = (0, import_hooks7.useLabels)();
+  const labels = (0, import_hooks8.useLabels)();
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "section",
     {
-      className: cn("flex w-full flex-col gap-5", className),
+      className: cn("group/agg-skeleton", "flex w-full flex-col gap-5", className),
       role: "status",
       "aria-label": ariaLabel != null ? ariaLabel : labels.eventList.loading("events"),
       "aria-busy": true,
@@ -743,7 +759,7 @@ var EventListSkeletonView = ({ className, ariaLabel }) => {
 EventListSkeletonView.displayName = "EventListSkeletonView";
 
 // src/primitives/skeleton/views/event-list-item-details-skeleton-view.tsx
-var import_hooks8 = require("@agg-market/hooks");
+var import_hooks9 = require("@agg-market/hooks");
 
 // src/events/item-details/event-list-item-details.constants.ts
 var detailsBaseCardClassName = "w-full overflow-hidden gap-6 p-5 md:gap-8 md:p-10";
@@ -769,11 +785,11 @@ var EventListItemDetailsSkeletonView = ({
   className,
   ariaLabel
 }) => {
-  const labels = (0, import_hooks8.useLabels)();
+  const labels = (0, import_hooks9.useLabels)();
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     Card,
     {
-      className: cn(detailsBaseCardClassName, className),
+      className: cn("group/agg-skeleton", detailsBaseCardClassName, className),
       role: "status",
       "aria-label": ariaLabel != null ? ariaLabel : labels.eventItemDetails.loading,
       "aria-busy": true,
@@ -810,7 +826,7 @@ var EventListItemDetailsSkeletonView = ({
 EventListItemDetailsSkeletonView.displayName = "EventListItemDetailsSkeletonView";
 
 // src/primitives/skeleton/views/market-details-skeleton-view.tsx
-var import_hooks9 = require("@agg-market/hooks");
+var import_hooks10 = require("@agg-market/hooks");
 
 // src/events/market-details/market-details.constants.ts
 var marketDetailsBaseCardClassName = "w-full overflow-hidden rounded-agg-lg border border-agg-separator bg-agg-secondary text-agg-foreground shadow-none hover:shadow-none";
@@ -822,11 +838,11 @@ var MarketDetailsSkeletonView = ({
   ariaLabel,
   isDetailed
 }) => {
-  const labels = (0, import_hooks9.useLabels)();
+  const labels = (0, import_hooks10.useLabels)();
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     Card,
     {
-      className: cn(marketDetailsBaseCardClassName, className),
+      className: cn("group/agg-skeleton", marketDetailsBaseCardClassName, className),
       role: "status",
       "aria-label": ariaLabel != null ? ariaLabel : labels.marketDetails.loading,
       "aria-busy": true,
@@ -896,7 +912,7 @@ MarketDetailsSkeletonView.displayName = "MarketDetailsSkeletonView";
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var placeOrderCardClassName = "overflow-hidden rounded-agg-xl border border-agg-border bg-agg-secondary shadow-none hover:shadow-none";
 var ContentBody = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-col gap-6 p-5", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: cn("flex flex-col gap-6 p-5"), children: [
     /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-col gap-2", children: [
       /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-start justify-between gap-5", children: [
         /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
@@ -963,7 +979,7 @@ var PlaceOrderSkeletonView = ({
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     "div",
     {
-      className: cn("w-full", className),
+      className: cn("group/agg-skeleton", "w-full", className),
       role: "status",
       "aria-label": ariaLabel != null ? ariaLabel : "Loading place order",
       "aria-busy": true,
@@ -986,17 +1002,18 @@ var PlaceOrderSkeletonView = ({
 PlaceOrderSkeletonView.displayName = "PlaceOrderSkeletonView";
 
 // src/primitives/skeleton/views/settlement-skeleton-view.tsx
-var import_hooks10 = require("@agg-market/hooks");
+var import_hooks11 = require("@agg-market/hooks");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var SettlementSkeletonView = ({
   className,
   ariaLabel
 }) => {
-  const labels = (0, import_hooks10.useLabels)();
+  const labels = (0, import_hooks11.useLabels)();
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
     Card,
     {
       className: cn(
+        "group/agg-skeleton",
         "flex flex-col w-full gap-5 rounded-agg-xl border border-agg-separator bg-agg-secondary p-5 shadow-none hover:shadow-none",
         className
       ),
@@ -1080,21 +1097,22 @@ var Skeleton = ({ view, className, ariaLabel }) => {
 Skeleton.displayName = "Skeleton";
 
 // src/primitives/typography/typography.constants.ts
-var variantClasses2 = {
-  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")
+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
@@ -1105,12 +1123,23 @@ var Typography = ({
   className,
   children
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Component, { className: cn(variantClasses2[variant], "truncate", className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    Component,
+    {
+      className: cn(
+        "group/agg-typography",
+        "text-agg-foreground",
+        typographyVariantClasses[variant],
+        className
+      ),
+      children
+    }
+  );
 };
 Typography.displayName = "Typography";
 
 // src/primitives/venue-logo/index.tsx
-var import_hooks11 = require("@agg-market/hooks");
+var import_hooks12 = require("@agg-market/hooks");
 
 // src/primitives/icon/types.ts
 var getIconA11yProps = (title) => ({
@@ -1119,7 +1148,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,
@@ -1317,14 +1346,9 @@ var venueLogoRegistry = {
 };
 var venueLogoNames = Object.keys(venueLogoRegistry);
 var sizeClasses2 = {
-  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
@@ -1334,19 +1358,19 @@ var VenueLogo = ({
   isColor = true,
   isMonochromatic = false,
   color,
-  size = "m",
+  size = "medium",
   className,
   ariaLabel,
   title
 }) => {
-  const labels = (0, import_hooks11.useLabels)();
+  const labels = (0, import_hooks12.useLabels)();
   const Component = venueLogoRegistry[venue];
   const sizeClass = sizeClasses2[size];
   const resolvedIsColor = isMonochromatic ? false : isColor;
   return /* @__PURE__ */ (0, import_jsx_runtime19.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],
@@ -1583,7 +1607,7 @@ var EventListItemDetailsLoadingState = ({
   classNames,
   ariaLabel
 }) => {
-  const labels = (0, import_hooks12.useLabels)();
+  const labels = (0, import_hooks13.useLabels)();
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     Skeleton,
     {
@@ -1597,7 +1621,7 @@ var EventListItemDetailsUnavailableState = ({
   classNames,
   ariaLabel
 }) => {
-  const labels = (0, import_hooks12.useLabels)();
+  const labels = (0, import_hooks13.useLabels)();
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     Card,
     {
@@ -1605,7 +1629,7 @@ var EventListItemDetailsUnavailableState = ({
       role: "status",
       "aria-label": ariaLabel != null ? ariaLabel : labels.eventItemDetails.unavailableAria,
       children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: cn("flex flex-col gap-1", classNames == null ? void 0 : classNames.header), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Typography, { variant: "title", className: cn("truncate", classNames == null ? void 0 : classNames.title), children: labels.eventItemDetails.unavailableTitle }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Typography, { variant: "body-large-strong", className: cn("truncate", classNames == null ? void 0 : classNames.title), children: labels.eventItemDetails.unavailableTitle }),
         /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Typography, { variant: "body", className: "text-agg-muted-foreground", children: labels.eventItemDetails.unavailableDescription })
       ] })
     }
@@ -1643,7 +1667,7 @@ var EventListItemDetailsGraphSection = ({
   formatPercent,
   selectedTimeRange
 }) => {
-  const labels = (0, import_hooks12.useLabels)();
+  const labels = (0, import_hooks13.useLabels)();
   const [selectedVenue, setSelectedVenue] = (0, import_react3.useState)(null);
   const [activeProbabilityMode, setActiveProbabilityMode] = (0, import_react3.useState)("yes");
   const probabilityModeConfigs = (0, import_react3.useMemo)(() => {
@@ -1730,7 +1754,7 @@ var EventListItemDetailsGraphSection = ({
   const timeWindow = (0, import_react3.useMemo)(() => {
     return getTimeWindowByRange(selectedTimeRange);
   }, [selectedTimeRange]);
-  const { data: priceHistoryData, isLoading: isPriceHistoryLoading } = (0, import_hooks12.usePriceHistory)(__spreadProps(__spreadValues({
+  const { data: priceHistoryData, isLoading: isPriceHistoryLoading } = (0, import_hooks13.usePriceHistory)(__spreadProps(__spreadValues({
     groups: priceHistoryGroups
   }, timeWindow), {
     enabled: priceHistoryGroups.length > 0
@@ -1868,25 +1892,27 @@ var EventListItemDetailsGraphSection = ({
                         className: cn(
                           "rounded-agg-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-agg-primary focus-visible:ring-offset-2 focus-visible:ring-offset-agg-secondary-hover"
                         ),
-                        onClick: () => handleVenueToggle(venueData.venue),
                         children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                           Badge,
                           {
                             text,
-                            size: "l",
+                            size: "large",
                             prefix: showVenueLogo ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                               VenueLogo,
                               {
                                 venue: venueData.venue,
-                                size: "s",
+                                size: "small",
                                 title: (_a = venueInfo == null ? void 0 : venueInfo[venueData.venue]) == null ? void 0 : _a.label
                               }
                             ) : void 0,
                             classNames: {
-                              root: cn(
-                                "h-9 shrink-0 border-2 px-4 text-agg-base leading-agg-6",
-                                isActiveVenue ? "border-agg-primary bg-agg-secondary font-agg-bold" : "border-transparent bg-agg-secondary-hover font-agg-normal"
-                              )
+                              root: cn("h-9 shrink-0 border-2 px-4 text-agg-base leading-agg-6")
+                            },
+                            isActive: isActiveVenue,
+                            onClick: (e) => {
+                              e.preventDefault();
+                              e.stopPropagation();
+                              handleVenueToggle(venueData.venue);
                             }
                           }
                         )
@@ -1928,8 +1954,8 @@ var EventListItemDetailsContent = ({
   ariaLabel,
   defaultTimeRange
 }) => {
-  const config = (0, import_hooks12.useSdkUiConfig)();
-  const labels = (0, import_hooks12.useLabels)();
+  const config = (0, import_hooks13.useSdkUiConfig)();
+  const labels = (0, import_hooks13.useLabels)();
   const venueMarkets = (0, import_react3.useMemo)(() => {
     var _a, _b, _c;
     return (_c = (_b = (_a = event.markets) == null ? void 0 : _a[0]) == null ? void 0 : _b.venueMarkets) != null ? _c : [];
@@ -2024,69 +2050,73 @@ var EventListItemDetailsContent = ({
       className: cn(detailsBaseCardClassName, classNames == null ? void 0 : classNames.root),
       "aria-label": ariaLabel != null ? ariaLabel : resolvedTitle,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: cn("flex items-start gap-3 md:gap-4 ", classNames == null ? void 0 : classNames.header), children: [
-          resolvedImage ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-            "img",
-            {
-              src: resolvedImage,
-              alt: "",
-              className: "size-10 rounded-agg-lg object-cover md:size-[60px]"
-            }
-          ) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-3", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-              Typography,
-              {
-                variant: "value",
-                className: cn(
-                  "min-w-0 text-agg-base font-agg-bold! leading-agg-6 whitespace-normal [display:-webkit-box] [-webkit-box-orient:vertical] [-webkit-line-clamp:2] md:text-agg-2xl md:leading-agg-8 md:block md:truncate md:whitespace-nowrap",
-                  classNames == null ? void 0 : classNames.title
-                ),
-                children: resolvedTitle
-              }
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+          "div",
+          {
+            className: cn(
+              "flex flex-row gap-3 md:gap-4",
+              "items-center justify-start",
+              classNames == null ? void 0 : classNames.header
             ),
-            outcomeSelectorLabels.length > 2 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-              "div",
-              {
-                className: cn(
-                  "flex items-center gap-2 overflow-x-auto pb-1 md:flex-wrap md:overflow-visible md:pb-0",
-                  classNames == null ? void 0 : classNames.headerPills
+            children: [
+              resolvedImage ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                "img",
+                {
+                  src: resolvedImage,
+                  alt: "",
+                  className: "size-10 rounded-agg-lg object-cover md:size-[60px]"
+                }
+              ) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-3", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                  Typography,
+                  {
+                    variant: "body-strong",
+                    className: cn(
+                      "min-w-0 text-agg-base font-agg-bold! leading-agg-6 md:text-agg-2xl md:leading-agg-8",
+                      "truncate text-wrap wrap-break-word line-clamp-2",
+                      classNames == null ? void 0 : classNames.title
+                    ),
+                    children: resolvedTitle
+                  }
                 ),
-                children: outcomeSelectorLabels.map((outcomeSelectorLabel) => {
-                  const isActive = outcomeSelectorLabel === selectedOutcomeLabel;
-                  const displayLabel = isDateLikeLabel(outcomeSelectorLabel) ? formatDateLabel(outcomeSelectorLabel) : outcomeSelectorLabel;
-                  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                    Button,
-                    {
-                      size: "s",
-                      variant: "secondary",
-                      "aria-pressed": isActive,
-                      className: cn(
-                        "h-auto shrink-0 rounded-agg-full px-4 py-1.5 text-agg-sm leading-agg-5",
-                        "border-2",
-                        isActive ? "border-agg-primary bg-agg-secondary text-agg-foreground font-agg-bold" : "border-transparent bg-agg-secondary-hover text-agg-foreground font-agg-normal"
-                      ),
-                      onClick: () => setSelectedOutcomeLabel(outcomeSelectorLabel),
-                      children: displayLabel
-                    },
-                    outcomeSelectorLabel
-                  );
-                })
-              }
-            ) : null
-          ] })
-        ] }),
+                outcomeSelectorLabels.length > 2 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                  "div",
+                  {
+                    className: cn(
+                      "flex items-center gap-2 overflow-x-auto pb-1 md:flex-wrap md:overflow-visible md:pb-0",
+                      classNames == null ? void 0 : classNames.headerPills
+                    ),
+                    children: outcomeSelectorLabels.map((outcomeSelectorLabel) => {
+                      const isActive = outcomeSelectorLabel === selectedOutcomeLabel;
+                      const displayLabel = isDateLikeLabel(outcomeSelectorLabel) ? formatDateLabel(outcomeSelectorLabel) : outcomeSelectorLabel;
+                      return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                        Button,
+                        {
+                          size: "small",
+                          variant: "secondary",
+                          "aria-pressed": isActive,
+                          className: cn(
+                            "h-auto shrink-0 rounded-agg-full px-4 py-1.5 text-agg-sm leading-agg-5",
+                            "border-2",
+                            isActive ? "border-agg-primary bg-agg-secondary text-agg-foreground font-agg-bold" : "border-transparent bg-agg-secondary-hover text-agg-foreground font-agg-normal"
+                          ),
+                          onClick: () => setSelectedOutcomeLabel(outcomeSelectorLabel),
+                          children: displayLabel
+                        },
+                        outcomeSelectorLabel
+                      );
+                    })
+                  }
+                ) : null
+              ] })
+            ]
+          }
+        ),
         detailsStats && detailsStats.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: cn("flex flex-wrap items-start gap-4 md:gap-6", classNames == null ? void 0 : classNames.headerStats), children: detailsStats.map((statItem) => {
-          const deltaClassName = statItem.deltaTone === "positive" ? "text-agg-success" : statItem.deltaTone === "negative" ? "text-agg-error" : "text-agg-muted-foreground";
+          const deltaClassName = statItem.deltaTone === "positive" ? "text-agg-success!" : statItem.deltaTone === "negative" ? "text-agg-error!" : "text-agg-muted-foreground";
           return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-col gap-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-              Typography,
-              {
-                variant: "label",
-                className: "text-agg-xs leading-agg-4 tracking-agg-normal text-agg-muted-foreground",
-                children: statItem.label
-              }
-            ),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Typography, { variant: "caption-caps", className: "text-agg-muted-foreground", children: statItem.label }),
             /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-baseline gap-1", children: [
               /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                 Typography,
@@ -2096,14 +2126,7 @@ var EventListItemDetailsContent = ({
                   children: statItem.value
                 }
               ),
-              statItem.delta ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                Typography,
-                {
-                  variant: "meta",
-                  className: cn("text-agg-sm leading-agg-5", deltaClassName),
-                  children: statItem.delta
-                }
-              ) : null
+              statItem.delta ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Typography, { variant: "label", className: cn(deltaClassName), children: statItem.delta }) : null
             ] })
           ] }, `${statItem.label}-${statItem.value}`);
         }) }) : null,
@@ -2123,18 +2146,19 @@ var EventListItemDetailsContent = ({
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: cn("flex flex-wrap items-center justify-between gap-4", classNames == null ? void 0 : classNames.footer), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Typography, { variant: "meta", className: "text-agg-muted-foreground text-agg-sm leading-agg-5", children: volumeLabel || "-" }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Typography, { variant: "label", className: "text-agg-muted-foreground", children: volumeLabel || "-" }),
           /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: cn("flex items-center gap-2 md:gap-3", classNames == null ? void 0 : classNames.timeRange), children: eventListItemDetailsTimeRanges.map((timeRange) => {
             const isActive = timeRange === selectedTimeRange;
             return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
               Button,
               {
-                size: "xs",
+                size: "small",
                 variant: "tertiary",
                 className: cn(
                   "h-auto min-w-0 rounded-none px-0 py-0 text-agg-xs leading-agg-4 md:text-agg-sm md:leading-agg-5",
                   "border-0 bg-transparent shadow-none",
-                  isActive ? "font-agg-bold text-agg-foreground" : "font-agg-normal text-agg-muted-foreground"
+                  "hover:text-agg-foreground!",
+                  isActive ? "font-agg-bold! text-agg-foreground!" : "font-agg-normal! text-agg-muted-foreground!"
                 ),
                 "aria-pressed": isActive,
                 onClick: () => setSelectedTimeRange(timeRange),
@@ -2158,7 +2182,7 @@ var EventListItemDetailsByEventId = (_a) => {
     event: fetchedEvent,
     isError,
     isLoading
-  } = (0, import_hooks12.useEvent)(eventId, {
+  } = (0, import_hooks13.useEvent)(eventId, {
     enabled: !!eventId
   });
   const resolvedEvent = (0, import_react3.useMemo)(() => {