@agg-market/ui 1.0.0 → 2.0.0

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

@@ -1,18 +1,18 @@
 import {
   EventListItemDetails
-} from "./chunk-ZHKMDK5M.mjs";
-import "./chunk-P23GR7NX.mjs";
+} from "./chunk-KFOATMAE.mjs";
+import "./chunk-422MCIXV.mjs";
 import "./chunk-GHB3GOCW.mjs";
-import "./chunk-AEMAY3MR.mjs";
-import "./chunk-JH5VMNDL.mjs";
-import "./chunk-BLSHXIAH.mjs";
+import "./chunk-K6IJ4WBM.mjs";
+import "./chunk-V52WSZHQ.mjs";
+import "./chunk-D7JTOGYP.mjs";
 import "./chunk-BNDFQPHF.mjs";
-import "./chunk-PGSPYQOW.mjs";
-import "./chunk-ZVBVGWSP.mjs";
-import "./chunk-DYEWXEEY.mjs";
-import "./chunk-3O4U3E5I.mjs";
-import "./chunk-VC7LTPQD.mjs";
-import "./chunk-JRS2M5GY.mjs";
+import "./chunk-KAGYJ4XT.mjs";
+import "./chunk-FO263M3V.mjs";
+import "./chunk-ERGNR6UQ.mjs";
+import "./chunk-FO2QCB4Z.mjs";
+import "./chunk-BN5VVHNV.mjs";
+import "./chunk-CTVMT3VL.mjs";
 import "./chunk-GJ4U5NCE.mjs";
 export {
   EventListItemDetails

package/dist/event-list-item.js

@@ -64,7 +64,10 @@ __export(item_exports, {
 module.exports = __toCommonJS(item_exports);
 var import_dayjs = __toESM(require("dayjs"));
 var import_react = require("react");
-var import_hooks9 = require("@agg-market/hooks");
+var import_hooks10 = 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(" ");
@@ -86,13 +89,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",
@@ -101,41 +100,66 @@ 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/card/index.tsx
-var import_hooks = require("@agg-market/hooks");
+var import_hooks2 = require("@agg-market/hooks");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var Card = (_a) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  const { enableAnimations } = (0, import_hooks.useSdkUiConfig)();
+  var _b = _a, { className, onClick } = _b, props = __objRest(_b, ["className", "onClick"]);
+  const { enableAnimations } = (0, import_hooks2.useSdkUiConfig)();
   return /* @__PURE__ */ (0, import_jsx_runtime2.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";
@@ -201,14 +225,10 @@ var ArrowsToDotIcon = (_a) => {
         /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.jsx)("circle", { cx: "8", cy: "8", r: "1.5", fill: "currentColor" })
+        )
       ]
     })
   );
@@ -742,14 +762,9 @@ InfoIcon.displayName = "InfoIcon";
 
 // 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/icon/svg/check-badge.tsx
@@ -1455,7 +1470,7 @@ var Icon = (_a) => {
   var _b = _a, {
     name,
     color,
-    size = "m",
+    size = "medium",
     className = "text-agg-primary",
     style
   } = _b, props = __objRest(_b, [
@@ -1468,18 +1483,25 @@ var Icon = (_a) => {
   const Component = iconRegistry[name];
   const resolvedStyle = resolveIconStyle(color, style);
   const resolvedClassName = cn(iconSizeClasses[size], className);
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Component, __spreadValues({ color, className: resolvedClassName, style: resolvedStyle }, props));
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    Component,
+    __spreadValues({
+      color,
+      className: cn("group/agg-icon", resolvedClassName),
+      style: resolvedStyle
+    }, props)
+  );
 };
 Icon.displayName = "Icon";
 
 // src/primitives/skeleton/views/event-list-skeleton-view.tsx
-var import_hooks4 = require("@agg-market/hooks");
+var import_hooks5 = require("@agg-market/hooks");
 
 // src/primitives/skeleton/skeleton-block.tsx
-var import_hooks2 = require("@agg-market/hooks");
+var import_hooks3 = require("@agg-market/hooks");
 var import_jsx_runtime45 = require("react/jsx-runtime");
 var SkeletonBlock = ({ className }) => {
-  const { enableAnimations } = (0, import_hooks2.useSdkUiConfig)();
+  const { enableAnimations } = (0, import_hooks3.useSdkUiConfig)();
   return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
     "div",
     {
@@ -1495,7 +1517,7 @@ var SkeletonBlock = ({ className }) => {
 SkeletonBlock.displayName = "SkeletonBlock";
 
 // src/primitives/skeleton/views/event-list-item-skeleton-view.tsx
-var import_hooks3 = require("@agg-market/hooks");
+var import_hooks4 = require("@agg-market/hooks");
 
 // src/events/item/event-list-item.constants.ts
 var baseCardClassName = "gap-3 overflow-hidden p-5 w-full";
@@ -1507,11 +1529,11 @@ var EventListItemSkeletonView = ({
   ariaLabel,
   isStandalone = false
 }) => {
-  const labels = (0, import_hooks3.useLabels)();
+  const labels = (0, import_hooks4.useLabels)();
   return /* @__PURE__ */ (0, import_jsx_runtime46.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,
@@ -1556,11 +1578,11 @@ EventListItemSkeletonView.displayName = "EventListItemSkeletonView";
 // src/primitives/skeleton/views/event-list-skeleton-view.tsx
 var import_jsx_runtime47 = require("react/jsx-runtime");
 var EventListSkeletonView = ({ className, ariaLabel }) => {
-  const labels = (0, import_hooks4.useLabels)();
+  const labels = (0, import_hooks5.useLabels)();
   return /* @__PURE__ */ (0, import_jsx_runtime47.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,
@@ -1588,7 +1610,7 @@ var EventListSkeletonView = ({ className, ariaLabel }) => {
 EventListSkeletonView.displayName = "EventListSkeletonView";
 
 // src/primitives/skeleton/views/event-list-item-details-skeleton-view.tsx
-var import_hooks5 = require("@agg-market/hooks");
+var import_hooks6 = 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";
@@ -1599,11 +1621,11 @@ var EventListItemDetailsSkeletonView = ({
   className,
   ariaLabel
 }) => {
-  const labels = (0, import_hooks5.useLabels)();
+  const labels = (0, import_hooks6.useLabels)();
   return /* @__PURE__ */ (0, import_jsx_runtime48.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,
@@ -1640,7 +1662,7 @@ var EventListItemDetailsSkeletonView = ({
 EventListItemDetailsSkeletonView.displayName = "EventListItemDetailsSkeletonView";
 
 // src/primitives/skeleton/views/market-details-skeleton-view.tsx
-var import_hooks6 = require("@agg-market/hooks");
+var import_hooks7 = 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";
@@ -1652,11 +1674,11 @@ var MarketDetailsSkeletonView = ({
   ariaLabel,
   isDetailed
 }) => {
-  const labels = (0, import_hooks6.useLabels)();
+  const labels = (0, import_hooks7.useLabels)();
   return /* @__PURE__ */ (0, import_jsx_runtime49.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,
@@ -1726,7 +1748,7 @@ MarketDetailsSkeletonView.displayName = "MarketDetailsSkeletonView";
 var import_jsx_runtime50 = 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_runtime50.jsxs)("div", { className: "flex flex-col gap-6 p-5", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: cn("flex flex-col gap-6 p-5"), children: [
     /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex flex-col gap-2", children: [
       /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex items-start justify-between gap-5", children: [
         /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
@@ -1793,7 +1815,7 @@ var PlaceOrderSkeletonView = ({
   return /* @__PURE__ */ (0, import_jsx_runtime50.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,
@@ -1816,17 +1838,18 @@ var PlaceOrderSkeletonView = ({
 PlaceOrderSkeletonView.displayName = "PlaceOrderSkeletonView";
 
 // src/primitives/skeleton/views/settlement-skeleton-view.tsx
-var import_hooks7 = require("@agg-market/hooks");
+var import_hooks8 = require("@agg-market/hooks");
 var import_jsx_runtime51 = require("react/jsx-runtime");
 var SettlementSkeletonView = ({
   className,
   ariaLabel
 }) => {
-  const labels = (0, import_hooks7.useLabels)();
+  const labels = (0, import_hooks8.useLabels)();
   return /* @__PURE__ */ (0, import_jsx_runtime51.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
       ),
@@ -1910,21 +1933,22 @@ var Skeleton = ({ view, className, ariaLabel }) => {
 Skeleton.displayName = "Skeleton";
 
 // 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")
+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
@@ -1935,15 +1959,26 @@ var Typography = ({
   className,
   children
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Component, { className: cn(variantClasses[variant], "truncate", className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime53.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_hooks8 = require("@agg-market/hooks");
+var import_hooks9 = require("@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,
@@ -2141,14 +2176,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
@@ -2158,19 +2188,19 @@ var VenueLogo = ({
   isColor = true,
   isMonochromatic = false,
   color,
-  size = "m",
+  size = "medium",
   className,
   ariaLabel,
   title
 }) => {
-  const labels = (0, import_hooks8.useLabels)();
+  const labels = (0, import_hooks9.useLabels)();
   const Component = venueLogoRegistry[venue];
   const sizeClass = sizeClasses[size];
   const resolvedIsColor = isMonochromatic ? false : isColor;
   return /* @__PURE__ */ (0, import_jsx_runtime58.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],
@@ -2339,7 +2369,7 @@ var EventListItemLoadingState = ({
   classNames,
   ariaLabel
 }) => {
-  const labels = (0, import_hooks9.useLabels)();
+  const labels = (0, import_hooks10.useLabels)();
   return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
     Skeleton,
     {
@@ -2353,7 +2383,7 @@ var EventListItemUnavailableState = ({
   classNames,
   ariaLabel
 }) => {
-  const labels = (0, import_hooks9.useLabels)();
+  const labels = (0, import_hooks10.useLabels)();
   return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
     Card,
     {
@@ -2361,7 +2391,7 @@ var EventListItemUnavailableState = ({
       role: "status",
       "aria-label": ariaLabel != null ? ariaLabel : labels.eventItem.unavailableAria,
       children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: cn("flex flex-col gap-1", classNames == null ? void 0 : classNames.header), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Typography, { variant: "title", className: cn("truncate", classNames == null ? void 0 : classNames.title), children: labels.eventItem.unavailableTitle }),
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Typography, { variant: "body-large-strong", className: cn("truncate", classNames == null ? void 0 : classNames.title), children: labels.eventItem.unavailableTitle }),
         /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Typography, { variant: "body", className: "text-agg-muted-foreground", children: labels.eventItem.unavailableDescription })
       ] })
     }
@@ -2380,8 +2410,8 @@ var EventListItemContent = ({
   ariaLabel
 }) => {
   var _a;
-  const config = (0, import_hooks9.useSdkUiConfig)();
-  const labels = (0, import_hooks9.useLabels)();
+  const config = (0, import_hooks10.useSdkUiConfig)();
+  const labels = (0, import_hooks10.useLabels)();
   const allVenueMarkets = (0, import_react.useMemo)(() => {
     return event.markets.flatMap((market) => market.venueMarkets);
   }, [event.markets]);
@@ -2405,8 +2435,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();
     }
   };
@@ -2415,9 +2445,17 @@ var EventListItemContent = ({
       return null;
     if (Math.abs(value) < config.arbitrageThreshold)
       return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: cn("flex items-baseline gap-1", "text-agg-success"), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Typography, { variant: "label", className: "text-agg-success", children: config.formatPercent(value) }),
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Icon, { name: "triangle-up", size: "xxs", title: labels.eventItem.arbitrage })
+    return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: cn("flex items-center gap-1", "text-agg-success"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Typography, { variant: "label-strong", className: "text-agg-success", children: config.formatPercent(value) }),
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+        Icon,
+        {
+          name: "triangle-up",
+          size: "small",
+          title: labels.eventItem.arbitrage,
+          className: "size-2!"
+        }
+      )
     ] });
   };
   return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
@@ -2442,9 +2480,10 @@ var EventListItemContent = ({
           /* @__PURE__ */ (0, import_jsx_runtime59.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
@@ -2461,7 +2500,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: [
@@ -2473,21 +2512,23 @@ var EventListItemContent = ({
                     children: formattedTitle
                   }
                 ),
-                renderArbitrage(arbitragePercent),
-                showBadge ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-                  Badge,
-                  {
-                    text: config.formatPercent(probability),
-                    prefix: showVenueLogo ? /* @__PURE__ */ (0, import_jsx_runtime59.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__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex flex-row gap-3 items-center justify-end", children: [
+                  renderArbitrage(arbitragePercent),
+                  showBadge ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+                    Badge,
+                    {
+                      text: config.formatPercent(probability),
+                      prefix: showVenueLogo ? /* @__PURE__ */ (0, import_jsx_runtime59.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}`
@@ -2502,7 +2543,7 @@ var EventListItemContent = ({
               classNames == null ? void 0 : classNames.footer
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: cn("flex items-center gap-2", "text-agg-sm leading-agg-5"), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: cn("flex items-center gap-1", "text-agg-sm leading-agg-5"), children: [
                 /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "truncate text-agg-muted-foreground", children: formatCountLabel(
                   marketCount,
                   labels.eventItem.marketSingular,
@@ -2510,16 +2551,33 @@ var EventListItemContent = ({
                 ) }),
                 /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "text-agg-muted-foreground", children: "\xD7" }),
                 singleVenue ? /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("span", { className: "flex items-center gap-1 truncate text-agg-muted-foreground", children: [
-                  showVenueLogo ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(VenueLogo, { venue: singleVenue, size: "xs" }) : null,
+                  showVenueLogo ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+                    VenueLogo,
+                    {
+                      venue: singleVenue,
+                      size: "small",
+                      isMonochromatic: true,
+                      className: "text-agg-muted-foreground!"
+                    }
+                  ) : null,
                   /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { children: venueLabel })
                 ] }) : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "truncate text-agg-muted-foreground", children: formatCountLabel(
                   venueCount,
                   labels.eventItem.venueSingular,
                   labels.eventItem.venuePlural
                 ) }),
-                showVenueLogo && !singleVenue && visibleVenueLogos.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "flex items-center gap-1 overflow-hidden", children: visibleVenueLogos.map((venue) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(VenueLogo, { venue, size: "xs" }, venue)) }) : null
+                showVenueLogo && !singleVenue && visibleVenueLogos.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "flex items-center gap-1 overflow-hidden", children: visibleVenueLogos.map((venue) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+                  VenueLogo,
+                  {
+                    venue,
+                    size: "small",
+                    isMonochromatic: true,
+                    className: "text-agg-muted-foreground!"
+                  },
+                  venue
+                )) }) : null
               ] }),
-              volumeLabel ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Typography, { variant: "meta", className: "text-agg-sm", children: volumeLabel }) : null
+              volumeLabel ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Typography, { variant: "label", className: "text-agg-sm text-agg-muted-foreground", children: volumeLabel }) : null
             ]
           }
         )
@@ -2537,7 +2595,7 @@ var EventListItemByEventId = (_a) => {
     event: fetchedEvent,
     isError,
     isLoading
-  } = (0, import_hooks9.useEvent)(eventId, {
+  } = (0, import_hooks10.useEvent)(eventId, {
     enabled: !!eventId
   });
   const resolvedEvent = (0, import_react.useMemo)(() => {

package/dist/event-list-item.mjs

@@ -1,16 +1,16 @@
 import {
   EventListItem
-} from "./chunk-W2DMBW4E.mjs";
+} from "./chunk-DL7STJQ5.mjs";
 import "./chunk-GHB3GOCW.mjs";
-import "./chunk-AEMAY3MR.mjs";
-import "./chunk-JH5VMNDL.mjs";
-import "./chunk-BLSHXIAH.mjs";
-import "./chunk-F236MLT6.mjs";
+import "./chunk-K6IJ4WBM.mjs";
+import "./chunk-V52WSZHQ.mjs";
+import "./chunk-D7JTOGYP.mjs";
+import "./chunk-PZTHM6WG.mjs";
 import "./chunk-NDG43KGL.mjs";
 import "./chunk-BNDFQPHF.mjs";
-import "./chunk-ZVBVGWSP.mjs";
-import "./chunk-DYEWXEEY.mjs";
-import "./chunk-3O4U3E5I.mjs";
+import "./chunk-FO263M3V.mjs";
+import "./chunk-ERGNR6UQ.mjs";
+import "./chunk-FO2QCB4Z.mjs";
 import "./chunk-GJ4U5NCE.mjs";
 export {
   EventListItem