@agg-market/ui 1.0.0 → 3.0.0

package/dist/event-market-page.js

@@ -63,15 +63,15 @@ __export(event_market_exports, {
 });
 module.exports = __toCommonJS(event_market_exports);
 var import_react9 = require("react");
-var import_hooks20 = require("@agg-market/hooks");
+var import_hooks21 = require("@agg-market/hooks");
 var import_dayjs5 = __toESM(require("dayjs"));
 
 // src/events/item-details/index.tsx
 var import_react3 = require("react");
-var import_hooks12 = require("@agg-market/hooks");
+var import_hooks13 = require("@agg-market/hooks");
 
-// src/constants.ts
-var AGG_ROOT_CLASS_NAME = "agg-root";
+// src/primitives/badge/index.tsx
+var import_hooks = require("@agg-market/hooks");
 
 // src/shared/utils.ts
 var cn = (...values) => values.filter(Boolean).join(" ");
@@ -96,13 +96,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",
@@ -111,66 +107,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(
@@ -186,10 +186,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(
@@ -205,7 +206,7 @@ var Button = (_a) => {
   var _b = _a, {
     children,
     variant = "primary",
-    size = "m",
+    size = "medium",
     isLoading = false,
     disabled,
     prefix,
@@ -225,15 +226,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],
@@ -265,13 +267,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);
@@ -299,7 +301,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]);
@@ -345,7 +347,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)(
@@ -365,7 +370,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: {
@@ -389,15 +394,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) => {
@@ -520,8 +529,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]);
@@ -575,7 +584,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",
@@ -618,34 +627,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",
     {
@@ -661,7 +674,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";
@@ -673,11 +686,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,
@@ -722,11 +735,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,
@@ -754,7 +767,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";
@@ -780,11 +793,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,
@@ -821,7 +834,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";
@@ -841,11 +854,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,
@@ -915,7 +928,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: [
@@ -982,7 +995,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,
@@ -1005,17 +1018,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
       ),
@@ -1099,21 +1113,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
@@ -1124,12 +1139,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) => ({
@@ -1138,7 +1164,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,
@@ -1336,14 +1362,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
@@ -1353,19 +1374,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],
@@ -1610,7 +1631,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,
     {
@@ -1624,7 +1645,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,
     {
@@ -1632,7 +1653,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 })
       ] })
     }
@@ -1670,7 +1691,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)(() => {
@@ -1757,7 +1778,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
@@ -1895,25 +1916,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);
                             }
                           }
                         )
@@ -1955,8 +1978,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 : [];
@@ -2051,69 +2074,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,
@@ -2123,14 +2150,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,
@@ -2150,18 +2170,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),
@@ -2185,7 +2206,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)(() => {
@@ -2262,12 +2283,15 @@ EventListItemDetails.displayName = "EventListItemDetails";
 
 // src/events/market-details/index.tsx
 var import_react6 = require("react");
-var import_hooks16 = require("@agg-market/hooks");
+var import_hooks17 = require("@agg-market/hooks");
 
 // src/primitives/tabs/index.tsx
 var import_react5 = require("react");
+var import_hooks15 = require("@agg-market/hooks");
+
+// src/primitives/select/index.tsx
+var import_react4 = require("react");
 var import_hooks14 = require("@agg-market/hooks");
-var DropdownMenu = __toESM(require("@radix-ui/react-dropdown-menu"));
 
 // src/primitives/icon/svg/arrow-trend-up.tsx
 var import_jsx_runtime21 = require("react/jsx-runtime");
@@ -2324,14 +2348,10 @@ var ArrowsToDotIcon = (_a) => {
         /* @__PURE__ */ (0, import_jsx_runtime22.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_runtime22.jsx)("circle", { cx: "8", cy: "8", r: "1.5", fill: "currentColor" })
+        )
       ]
     })
   );
@@ -3566,7 +3586,7 @@ var Icon = (_a) => {
   var _b = _a, {
     name,
     color,
-    size = "m",
+    size = "medium",
     className = "text-agg-primary",
     style
   } = _b, props = __objRest(_b, [
@@ -3579,13 +3599,18 @@ var Icon = (_a) => {
   const Component = iconRegistry[name];
   const resolvedStyle = resolveIconStyle(color, style);
   const resolvedClassName = cn(iconSizeClasses[size], className);
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Component, __spreadValues({ color, className: resolvedClassName, style: resolvedStyle }, props));
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+    Component,
+    __spreadValues({
+      color,
+      className: cn("group/agg-icon", resolvedClassName),
+      style: resolvedStyle
+    }, props)
+  );
 };
 Icon.displayName = "Icon";
 
 // src/primitives/select/index.tsx
-var import_react4 = require("react");
-var import_hooks13 = require("@agg-market/hooks");
 var import_jsx_runtime63 = require("react/jsx-runtime");
 var Select = ({
   items,
@@ -3596,8 +3621,8 @@ var Select = ({
   disabled = false
 }) => {
   var _a;
-  const labels = (0, import_hooks13.useLabels)();
-  const { enableAnimations } = (0, import_hooks13.useSdkUiConfig)();
+  const labels = (0, import_hooks14.useLabels)();
+  const { enableAnimations } = (0, import_hooks14.useSdkUiConfig)();
   const hasEnabledItems = items.some((item) => !item.disabled);
   const hasAnyIcon = items.some((item) => item.iconUrl);
   const [isOpen, setIsOpen] = (0, import_react4.useState)(false);
@@ -3607,7 +3632,7 @@ var Select = ({
     if (!isOpen)
       return;
     const handlePointerDown = (e) => {
-      if (containerRef.current && !containerRef.current.contains(e.target)) {
+      if (containerRef.current && !containerRef.current.contains(e == null ? void 0 : e.target)) {
         close();
       }
     };
@@ -3618,7 +3643,7 @@ var Select = ({
     if (!isOpen)
       return;
     const handleKey = (e) => {
-      if (e.key === "Escape")
+      if ((e == null ? void 0 : e.key) === "Escape")
         close();
     };
     document.addEventListener("keydown", handleKey);
@@ -3627,7 +3652,7 @@ var Select = ({
   const isDisabled = disabled || !hasEnabledItems;
   const selectedItem = items.find((item) => item.value === value);
   if (!hasAnyIcon) {
-    return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("label", { className: cn("relative inline-flex w-full", className), children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("label", { className: cn("group/agg-select", "relative inline-flex w-full", className), children: [
       /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
         "select",
         {
@@ -3636,7 +3661,7 @@ var Select = ({
             "w-full appearance-none rounded-agg-md border border-agg-separator bg-agg-secondary px-4 py-2 pr-10 font-agg-sans text-agg-sm leading-agg-5 text-agg-foreground outline-none",
             getMotionClassName(
               enableAnimations,
-              "transition-[border-color,box-shadow] duration-200 ease-out"
+              "transition-[border-color,box-shadow] duration-200 ease-in-out"
             ),
             "focus:border-agg-primary focus:ring-2 focus:ring-agg-primary/15",
             "disabled:cursor-not-allowed disabled:opacity-60"
@@ -3647,88 +3672,95 @@ var Select = ({
           children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("option", { value: item.value, disabled: item.disabled, children: item.label }, item.value))
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "pointer-events-none absolute inset-y-0 right-3 inline-flex items-center justify-center text-agg-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Icon, { name: "chevron-down", size: "s", color: "currentColor" }) })
+      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "pointer-events-none absolute inset-y-0 right-3 inline-flex items-center justify-center text-agg-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Icon, { name: "chevron-down", size: "small", color: "currentColor" }) })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { ref: containerRef, className: cn("relative inline-flex w-full", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
-      "button",
-      {
-        type: "button",
-        "aria-label": ariaLabel != null ? ariaLabel : labels.common.selectAria,
-        "aria-expanded": isOpen,
-        "aria-haspopup": "listbox",
-        disabled: isDisabled,
-        className: cn(
-          "w-full rounded-agg-md border border-agg-separator bg-agg-secondary px-4 py-2 pr-10 font-agg-sans text-agg-sm leading-agg-5 text-agg-foreground outline-none",
-          "flex items-center gap-2 text-left",
-          getMotionClassName(
-            enableAnimations,
-            "transition-[border-color,box-shadow] duration-200 ease-out"
-          ),
-          "focus:border-agg-primary focus:ring-2 focus:ring-agg-primary/15",
-          "disabled:cursor-not-allowed disabled:opacity-60"
-        ),
-        onClick: () => setIsOpen((prev) => !prev),
-        children: [
-          (selectedItem == null ? void 0 : selectedItem.iconUrl) ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-            "img",
-            {
-              src: selectedItem.iconUrl,
-              alt: "",
-              className: "h-4 w-4 shrink-0 rounded-sm object-contain"
-            }
-          ) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "flex-1 truncate", children: (_a = selectedItem == null ? void 0 : selectedItem.label) != null ? _a : "" })
-        ]
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "pointer-events-none absolute inset-y-0 right-3 inline-flex items-center justify-center text-agg-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Icon, { name: "chevron-down", size: "s", color: "currentColor" }) }),
-    isOpen ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-      "div",
-      {
-        role: "listbox",
-        "aria-label": ariaLabel != null ? ariaLabel : labels.common.selectAria,
-        className: "absolute top-full left-0 z-50 mt-1 w-full overflow-hidden rounded-agg-md border border-agg-separator bg-agg-secondary shadow-lg",
-        children: items.map((item) => {
-          const isSelected = item.value === value;
-          return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
-            "button",
-            {
-              type: "button",
-              role: "option",
-              "aria-selected": isSelected,
-              disabled: item.disabled,
-              className: cn(
-                "flex w-full items-center gap-2 px-4 py-2 text-left text-agg-sm leading-agg-5 outline-none",
-                "hover:bg-agg-secondary-hover focus-visible:bg-agg-secondary-hover",
-                isSelected ? "font-agg-bold text-agg-primary" : "font-agg-normal text-agg-foreground",
-                item.disabled && "cursor-not-allowed opacity-60"
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
+    "div",
+    {
+      ref: containerRef,
+      className: cn("group/agg-select", "relative inline-flex w-full", className),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
+          "button",
+          {
+            type: "button",
+            "aria-label": ariaLabel != null ? ariaLabel : labels.common.selectAria,
+            "aria-expanded": isOpen,
+            "aria-haspopup": "listbox",
+            disabled: isDisabled,
+            className: cn(
+              "w-full rounded-agg-md border border-agg-separator bg-agg-secondary px-4 py-2 pr-10 font-agg-sans text-agg-sm leading-agg-5 text-agg-foreground outline-none",
+              "flex items-center gap-2 text-left",
+              getMotionClassName(
+                enableAnimations,
+                "transition-[border-color,box-shadow] duration-200 ease-in-out"
               ),
-              onClick: () => {
-                if (!item.disabled) {
-                  onChange(item.value);
-                  close();
+              "focus:border-agg-primary focus:ring-2 focus:ring-agg-primary/15",
+              "disabled:cursor-not-allowed disabled:opacity-60"
+            ),
+            onClick: () => setIsOpen((prev) => !prev),
+            children: [
+              (selectedItem == null ? void 0 : selectedItem.iconUrl) ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+                "img",
+                {
+                  src: selectedItem.iconUrl,
+                  alt: "",
+                  className: "h-4 w-4 shrink-0 rounded-sm object-contain"
                 }
-              },
-              children: [
-                item.iconUrl ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-                  "img",
-                  {
-                    src: item.iconUrl,
-                    alt: "",
-                    className: "h-4 w-4 shrink-0 rounded-sm object-contain"
-                  }
-                ) : null,
-                /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "truncate", children: item.label })
-              ]
-            },
-            item.value
-          );
-        })
-      }
-    ) : null
-  ] });
+              ) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "flex-1 truncate", children: (_a = selectedItem == null ? void 0 : selectedItem.label) != null ? _a : "" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "pointer-events-none absolute inset-y-0 right-3 inline-flex items-center justify-center text-agg-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Icon, { name: "chevron-down", size: "small", color: "currentColor" }) }),
+        isOpen ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+          "div",
+          {
+            role: "listbox",
+            "aria-label": ariaLabel != null ? ariaLabel : labels.common.selectAria,
+            className: "absolute top-full left-0 z-50 mt-1 w-full overflow-hidden rounded-agg-md border border-agg-separator bg-agg-secondary shadow-lg",
+            children: items.map((item) => {
+              const isSelected = item.value === value;
+              return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
+                "button",
+                {
+                  type: "button",
+                  role: "option",
+                  "aria-selected": isSelected,
+                  disabled: item.disabled,
+                  className: cn(
+                    "flex w-full items-center gap-2 px-4 py-2 text-left text-agg-sm leading-agg-5 outline-none",
+                    "hover:bg-agg-secondary-hover focus-visible:bg-agg-secondary-hover",
+                    isSelected ? "font-agg-bold text-agg-primary" : "font-agg-normal text-agg-foreground",
+                    item.disabled && "cursor-not-allowed opacity-60"
+                  ),
+                  onClick: () => {
+                    if (!item.disabled) {
+                      onChange(item.value);
+                      close();
+                    }
+                  },
+                  children: [
+                    item.iconUrl ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+                      "img",
+                      {
+                        src: item.iconUrl,
+                        alt: "",
+                        className: "h-4 w-4 shrink-0 rounded-sm object-contain"
+                      }
+                    ) : null,
+                    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "truncate", children: item.label })
+                  ]
+                },
+                item.value
+              );
+            })
+          }
+        ) : null
+      ]
+    }
+  );
 };
 Select.displayName = "Select";
 
@@ -3755,86 +3787,10 @@ var findEdgeEnabledIndex = (items, direction) => {
   }
   return -1;
 };
-var FALLBACK_TAB_WIDTH = 112;
-var FALLBACK_MORE_WIDTH = 56;
-var sumWidths = (indices, widths) => {
-  return [...indices].reduce((accumulator, index) => {
-    var _a;
-    return accumulator + ((_a = widths[index]) != null ? _a : 0);
-  }, 0);
-};
-var resolveTabsOverflowLayout = ({
-  items,
-  value,
-  containerWidth,
-  moreButtonWidth,
-  itemWidthByValue
-}) => {
-  var _a;
-  if (items.length === 0) {
-    return {
-      visibleItems: [],
-      hiddenItems: []
-    };
-  }
-  if (!Number.isFinite(containerWidth) || containerWidth <= 0) {
-    return {
-      visibleItems: items,
-      hiddenItems: []
-    };
-  }
-  const resolvedItemWidths = items.map((item) => {
-    var _a2;
-    const measuredWidth = (_a2 = itemWidthByValue.get(item.value)) != null ? _a2 : FALLBACK_TAB_WIDTH;
-    return Math.max(1, measuredWidth);
-  });
-  const totalItemsWidth = resolvedItemWidths.reduce((sum, width) => {
-    return sum + width;
-  }, 0);
-  if (totalItemsWidth <= containerWidth) {
-    return {
-      visibleItems: items,
-      hiddenItems: []
-    };
-  }
-  const reservedMoreWidth = Math.max(1, moreButtonWidth || FALLBACK_MORE_WIDTH);
-  const visibleIndices = /* @__PURE__ */ new Set();
-  let usedWidth = 0;
-  for (let index = 0; index < items.length; index += 1) {
-    const itemWidth = (_a = resolvedItemWidths[index]) != null ? _a : FALLBACK_TAB_WIDTH;
-    const hasRemainingItems = index < items.length - 1;
-    const requiredExtraWidth = hasRemainingItems ? reservedMoreWidth : 0;
-    if (usedWidth + itemWidth + requiredExtraWidth > containerWidth)
-      break;
-    visibleIndices.add(index);
-    usedWidth += itemWidth;
-  }
-  if (visibleIndices.size === 0) {
-    visibleIndices.add(0);
-  }
-  const activeIndex = items.findIndex((item) => item.value === value);
-  const isActiveHidden = activeIndex >= 0 && !visibleIndices.has(activeIndex);
-  if (isActiveHidden && activeIndex >= 0) {
-    visibleIndices.add(activeIndex);
-    while (visibleIndices.size > 1) {
-      const visibleWidth = sumWidths(visibleIndices, resolvedItemWidths);
-      if (visibleWidth + reservedMoreWidth <= containerWidth)
-        break;
-      const removableIndex = [...visibleIndices].sort((left, right) => right - left).find((index) => index !== activeIndex);
-      if (removableIndex == null)
-        break;
-      visibleIndices.delete(removableIndex);
-    }
-  }
-  return {
-    visibleItems: items.filter((_, index) => visibleIndices.has(index)),
-    hiddenItems: items.filter((_, index) => !visibleIndices.has(index))
-  };
-};
 
 // src/primitives/tabs/index.tsx
 var import_jsx_runtime64 = require("react/jsx-runtime");
-var mobileTabsMediaQuery = "(max-width: 767px)";
+var mobileTabsMediaQuery = "(max-width: 512px)";
 var getTabButtonClassName = ({
   enableAnimations,
   isBarVariant,
@@ -3846,7 +3802,11 @@ var getTabButtonClassName = ({
   return cn(
     "cursor-pointer disabled:cursor-not-allowed",
     "relative inline-flex h-full shrink-0 items-center justify-center gap-2 font-agg-sans",
-    getMotionClassName(enableAnimations, "transition-colors motion-reduce:transition-none"),
+    isBarVariant ? "hover:text-agg-foreground hover:bg-agg-secondary-hover" : "hover:text-agg-foreground hover:font-bold",
+    getMotionClassName(
+      enableAnimations,
+      "transition-[colors] duration-300 ease-in-out motion-reduce:transition-none"
+    ),
     isBarVariant ? cn(
       "min-w-20 overflow-hidden border-r border-agg-separator last:border-r-0",
       isSmall ? "px-3 text-agg-sm leading-agg-5" : "px-4 text-agg-base leading-agg-6"
@@ -3858,48 +3818,19 @@ var getTabButtonClassName = ({
     isDisabled && "cursor-not-allowed opacity-60"
   );
 };
-var getMeasureTabClassName = ({
-  isBarVariant,
-  size
+var Tabs = ({
+  items,
+  value,
+  onChange,
+  variant = "bar",
+  size = "m",
+  overflowBehavior,
+  ariaLabel,
+  className,
+  classNames
 }) => {
-  const isSmall = size === "s";
-  return cn(
-    "relative inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap font-agg-sans",
-    isBarVariant ? cn(
-      "h-8 min-w-20 border-r border-agg-separator font-agg-bold",
-      isSmall ? "px-3 text-agg-sm leading-agg-5" : "px-4 text-agg-base leading-agg-6"
-    ) : cn(
-      "h-12 font-agg-bold",
-      isSmall ? "px-4 text-agg-sm leading-agg-5" : "px-5 text-agg-base leading-agg-6"
-    )
-  );
-};
-var getMoreButtonClassName = ({
-  enableAnimations,
-  isBarVariant,
-  size
-}) => {
-  const isSmall = size === "s";
-  return cn(
-    "cursor-pointer disabled:cursor-not-allowed",
-    "relative inline-flex shrink-0 items-center justify-center overflow-hidden font-agg-sans text-agg-foreground hover:bg-agg-secondary-hover",
-    getMotionClassName(enableAnimations, "transition-colors motion-reduce:transition-none"),
-    isBarVariant ? "h-8 rounded-r-agg-sm border border-agg-separator bg-agg-secondary px-2" : cn("h-12 bg-agg-secondary", isSmall ? "px-3 text-agg-sm" : "px-4 text-agg-base")
-  );
-};
-var Tabs = ({
-  items,
-  value,
-  onChange,
-  variant = "bar",
-  size = "m",
-  overflowBehavior,
-  overflowMenuAriaLabel,
-  ariaLabel,
-  className
-}) => {
-  const labels = (0, import_hooks14.useLabels)();
-  const { enableAnimations, rootClassName } = (0, import_hooks14.useSdkUiConfig)();
+  const labels = (0, import_hooks15.useLabels)();
+  const { enableAnimations } = (0, import_hooks15.useSdkUiConfig)();
   const buttonRefs = (0, import_react5.useRef)([]);
   const dragStateRef = (0, import_react5.useRef)({
     isPointerDown: false,
@@ -3911,8 +3842,6 @@ var Tabs = ({
   });
   const suppressClickRef = (0, import_react5.useRef)(false);
   const resolvedAriaLabel = ariaLabel != null ? ariaLabel : labels.common.tabsAria;
-  const resolvedOverflowMenuAriaLabel = overflowMenuAriaLabel != null ? overflowMenuAriaLabel : labels.common.hiddenTabsAria;
-  const [isMoreMenuOpen, setIsMoreMenuOpen] = (0, import_react5.useState)(false);
   const [isMobileViewport, setIsMobileViewport] = (0, import_react5.useState)(false);
   const [isDraggingTabs, setIsDraggingTabs] = (0, import_react5.useState)(false);
   const [activeUnderlineStyle, setActiveUnderlineStyle] = (0, import_react5.useState)({
@@ -3920,39 +3849,21 @@ var Tabs = ({
     width: 0,
     opacity: 0
   });
-  const [overflowLayout, setOverflowLayout] = (0, import_react5.useState)({
-    visibleItems: items,
-    hiddenItems: []
-  });
   const [scrollAffordanceState, setScrollAffordanceState] = (0, import_react5.useState)({
     showStart: false,
     showEnd: false
   });
-  const containerRef = (0, import_react5.useRef)(null);
   const tabListRef = (0, import_react5.useRef)(null);
-  const moreButtonMeasureRef = (0, import_react5.useRef)(null);
-  const tabMeasureRefs = (0, import_react5.useRef)(/* @__PURE__ */ new Map());
   const isBarVariant = variant === "bar";
   const resolvedOverflowBehavior = (0, import_react5.useMemo)(() => {
     if (overflowBehavior)
       return overflowBehavior;
     if (!isBarVariant)
       return "scroll";
-    return isMobileViewport ? "select" : "menu";
+    return isMobileViewport ? "select" : "scroll";
   }, [isBarVariant, isMobileViewport, overflowBehavior]);
-  const shouldUseOverflowMenu = resolvedOverflowBehavior === "menu";
   const shouldUseOverflowScroll = resolvedOverflowBehavior === "scroll";
   const shouldUseOverflowSelect = resolvedOverflowBehavior === "select";
-  const handleMeasureTabRef = (0, import_react5.useCallback)(
-    (tabValue, tabElement) => {
-      if (!tabElement) {
-        tabMeasureRefs.current.delete(tabValue);
-        return;
-      }
-      tabMeasureRefs.current.set(tabValue, tabElement);
-    },
-    []
-  );
   (0, import_react5.useEffect)(() => {
     if (typeof window === "undefined")
       return;
@@ -3972,55 +3883,6 @@ var Tabs = ({
       mediaQueryList.removeListener(handleMediaQueryChange);
     };
   }, []);
-  const handleRecalculateOverflow = (0, import_react5.useCallback)(() => {
-    var _a, _b, _c, _d;
-    if (!shouldUseOverflowMenu) {
-      setOverflowLayout({
-        visibleItems: items,
-        hiddenItems: []
-      });
-      return;
-    }
-    const containerWidth = (_b = (_a = containerRef.current) == null ? void 0 : _a.clientWidth) != null ? _b : 0;
-    const moreButtonWidth = (_d = (_c = moreButtonMeasureRef.current) == null ? void 0 : _c.offsetWidth) != null ? _d : 0;
-    const itemWidthByValue = new Map(
-      items.map((item) => {
-        var _a2, _b2;
-        return [item.value, (_b2 = (_a2 = tabMeasureRefs.current.get(item.value)) == null ? void 0 : _a2.offsetWidth) != null ? _b2 : 0];
-      })
-    );
-    setOverflowLayout(
-      resolveTabsOverflowLayout({
-        items,
-        value,
-        containerWidth,
-        moreButtonWidth,
-        itemWidthByValue
-      })
-    );
-  }, [items, shouldUseOverflowMenu, value]);
-  (0, import_react5.useEffect)(() => {
-    handleRecalculateOverflow();
-  }, [handleRecalculateOverflow]);
-  (0, import_react5.useEffect)(() => {
-    if (!shouldUseOverflowMenu)
-      return;
-    const container = containerRef.current;
-    if (!container || typeof ResizeObserver === "undefined")
-      return;
-    const resizeObserver = new ResizeObserver(() => {
-      handleRecalculateOverflow();
-    });
-    resizeObserver.observe(container);
-    return () => {
-      resizeObserver.disconnect();
-    };
-  }, [handleRecalculateOverflow, shouldUseOverflowMenu]);
-  (0, import_react5.useEffect)(() => {
-    if (overflowLayout.hiddenItems.length > 0)
-      return;
-    setIsMoreMenuOpen(false);
-  }, [overflowLayout.hiddenItems.length]);
   const updateScrollAffordances = (0, import_react5.useCallback)(() => {
     if (!shouldUseOverflowScroll) {
       setScrollAffordanceState({
@@ -4038,8 +3900,7 @@ var Tabs = ({
       showEnd: maxScrollLeft - tabListElement.scrollLeft > 4
     });
   }, [shouldUseOverflowScroll]);
-  const renderedItems = shouldUseOverflowMenu ? overflowLayout.visibleItems : items;
-  const shouldShowMoreButton = shouldUseOverflowMenu && overflowLayout.hiddenItems.length > 0;
+  const renderedItems = items;
   const selectItems = (0, import_react5.useMemo)(() => {
     return items.map((item) => ({
       value: item.value,
@@ -4064,24 +3925,24 @@ var Tabs = ({
     (_a = buttonRefs.current[index]) == null ? void 0 : _a.focus();
   };
   const handleKeyDown = (event, index) => {
-    switch (event.key) {
+    switch (event == null ? void 0 : event.key) {
       case "ArrowRight": {
-        event.preventDefault();
+        event == null ? void 0 : event.preventDefault();
         handleMoveFocus(findNextEnabledIndex(renderedItems, index, 1));
         return;
       }
       case "ArrowLeft": {
-        event.preventDefault();
+        event == null ? void 0 : event.preventDefault();
         handleMoveFocus(findNextEnabledIndex(renderedItems, index, -1));
         return;
       }
       case "Home": {
-        event.preventDefault();
+        event == null ? void 0 : event.preventDefault();
         handleMoveFocus(findEdgeEnabledIndex(renderedItems, 1));
         return;
       }
       case "End": {
-        event.preventDefault();
+        event == null ? void 0 : event.preventDefault();
         handleMoveFocus(findEdgeEnabledIndex(renderedItems, -1));
         return;
       }
@@ -4089,22 +3950,16 @@ var Tabs = ({
         return;
     }
   };
-  const activeHiddenItem = (0, import_react5.useMemo)(() => {
-    if (!shouldUseOverflowMenu)
-      return void 0;
-    return overflowLayout.hiddenItems.find((item) => item.value === value);
-  }, [overflowLayout.hiddenItems, shouldUseOverflowMenu, value]);
   const tabListClassName = cn(
     "inline-flex items-stretch bg-agg-secondary",
-    shouldUseOverflowMenu ? "min-w-0 flex-1 overflow-hidden" : shouldUseOverflowScroll ? cn(
+    shouldUseOverflowScroll ? cn(
       "overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
       getMotionClassName(enableAnimations, "scroll-smooth")
     ) : "overflow-x-auto",
     isBarVariant ? "h-8 rounded-agg-sm border border-agg-separator" : "h-12 border-b border-agg-separator -mb-[1px]",
     shouldUseOverflowScroll && "select-none",
     shouldUseOverflowScroll && !isBarVariant && "snap-x snap-mandatory",
-    shouldUseOverflowScroll && (isDraggingTabs ? "cursor-grabbing" : "cursor-grab"),
-    shouldShowMoreButton && isBarVariant && "rounded-r-none border-r-0"
+    shouldUseOverflowScroll && (isDraggingTabs ? "cursor-grabbing" : "cursor-grab")
   );
   const handleTabListWheel = (event) => {
     if (!shouldUseOverflowScroll)
@@ -4193,14 +4048,10 @@ var Tabs = ({
   const handleTabListClickCapture = (event) => {
     if (!suppressClickRef.current)
       return;
-    event.preventDefault();
-    event.stopPropagation();
+    event == null ? void 0 : event.preventDefault();
+    event == null ? void 0 : event.stopPropagation();
     suppressClickRef.current = false;
   };
-  const handleSelectHiddenItem = (nextValue) => {
-    handleSelect(nextValue);
-    setIsMoreMenuOpen(false);
-  };
   const updateActiveUnderline = (0, import_react5.useCallback)(() => {
     if (isBarVariant) {
       setActiveUnderlineStyle({
@@ -4268,18 +4119,34 @@ var Tabs = ({
   (0, import_react5.useEffect)(() => {
     if (!shouldUseOverflowScroll)
       return;
+    const tabListElement = tabListRef.current;
+    if (!tabListElement)
+      return;
     const activeIndex = renderedItems.findIndex((item) => item.value === value);
     const activeButton = activeIndex >= 0 ? buttonRefs.current[activeIndex] : null;
     if (!activeButton)
       return;
-    activeButton.scrollIntoView({
-      behavior: getScrollBehavior(enableAnimations),
-      block: "nearest",
-      inline: "nearest"
+    if (tabListElement.scrollWidth - tabListElement.clientWidth <= 1)
+      return;
+    const currentScrollLeft = tabListElement.scrollLeft;
+    const currentScrollRight = currentScrollLeft + tabListElement.clientWidth;
+    const activeButtonLeft = activeButton.offsetLeft;
+    const activeButtonRight = activeButtonLeft + activeButton.offsetWidth;
+    let nextScrollLeft = currentScrollLeft;
+    if (activeButtonLeft < currentScrollLeft) {
+      nextScrollLeft = activeButtonLeft;
+    } else if (activeButtonRight > currentScrollRight) {
+      nextScrollLeft = activeButtonRight - tabListElement.clientWidth;
+    }
+    if (Math.abs(nextScrollLeft - currentScrollLeft) < 1)
+      return;
+    tabListElement.scrollTo({
+      left: Math.max(0, nextScrollLeft),
+      behavior: getScrollBehavior(enableAnimations)
     });
   }, [enableAnimations, renderedItems, shouldUseOverflowScroll, value]);
   if (shouldUseOverflowSelect) {
-    return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: cn("w-full", className), children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: cn("w-full", className, classNames == null ? void 0 : classNames.root), children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
       Select,
       {
         ariaLabel,
@@ -4294,10 +4161,12 @@ var Tabs = ({
   return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
     "div",
     {
-      ref: containerRef,
       className: cn(
-        "relative inline-flex max-w-full items-stretch font-agg-sans bg-agg-secondary",
-        className
+        "group/agg-tabs",
+        "relative max-w-full items-stretch font-agg-sans bg-agg-secondary",
+        "inline-flex",
+        className,
+        classNames == null ? void 0 : classNames.root
       ),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
@@ -4306,7 +4175,7 @@ var Tabs = ({
             ref: tabListRef,
             role: "tablist",
             "aria-label": resolvedAriaLabel,
-            className: cn("relative", tabListClassName),
+            className: cn("relative", tabListClassName, classNames == null ? void 0 : classNames.tabList),
             onClickCapture: handleTabListClickCapture,
             onPointerCancel: handleEndTabListDrag,
             onPointerDown: handleTabListPointerDown,
@@ -4328,7 +4197,11 @@ var Tabs = ({
                     "aria-selected": isActive,
                     "aria-label": item.label,
                     disabled: item.disabled,
-                    onClick: () => handleSelect(item.value),
+                    onClick: (e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      handleSelect(item.value);
+                    },
                     onKeyDown: (event) => handleKeyDown(event, index),
                     className: cn(
                       getTabButtonClassName({
@@ -4370,7 +4243,7 @@ var Tabs = ({
                     "pointer-events-none absolute bottom-0 left-0 rounded-t-agg-sm bg-agg-primary",
                     getMotionClassName(
                       enableAnimations,
-                      "transition-[transform,width,opacity] duration-300 ease-[cubic-bezier(0.4,0,0.2,1)]"
+                      "transition-[transform,width,opacity] duration-300 ease-in-out"
                     ),
                     "h-[3px]"
                   ),
@@ -4386,7 +4259,7 @@ var Tabs = ({
             {
               "aria-hidden": true,
               className: cn(
-                "pointer-events-none absolute top-0 bottom-0 left-0 z-10 w-12 md:w-18 bg-gradient-to-r from-agg-secondary via-agg-secondary to-transparent",
+                "pointer-events-none absolute top-0 bottom-0 left-8 z-10 w-12 md:w-18 bg-linear-to-r from-agg-secondary via-agg-secondary to-transparent",
                 getMotionClassName(enableAnimations, "transition-opacity duration-200"),
                 scrollAffordanceState.showStart ? "opacity-100" : "opacity-0"
               )
@@ -4397,104 +4270,13 @@ var Tabs = ({
             {
               "aria-hidden": true,
               className: cn(
-                "pointer-events-none absolute top-0 right-0 bottom-0 z-10 w-12 md:w-18 bg-gradient-to-l from-agg-secondary via-agg-secondary to-transparent",
+                "pointer-events-none absolute top-0 right-8 bottom-0 z-10 w-12 md:w-18 bg-linear-to-l from-agg-secondary via-agg-secondary to-transparent",
                 getMotionClassName(enableAnimations, "transition-opacity duration-200"),
                 scrollAffordanceState.showEnd ? "opacity-100" : "opacity-0"
               )
             }
           )
-        ] }) : null,
-        shouldShowMoreButton ? /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(DropdownMenu.Root, { open: isMoreMenuOpen, onOpenChange: setIsMoreMenuOpen, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
-            "button",
-            {
-              type: "button",
-              "aria-label": resolvedOverflowMenuAriaLabel,
-              className: cn(
-                getMoreButtonClassName({
-                  enableAnimations,
-                  isBarVariant,
-                  size
-                }),
-                activeHiddenItem ? "font-agg-bold text-agg-primary" : "font-agg-normal text-agg-foreground"
-              ),
-              children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Icon, { name: "dots-horizontal", size: isBarVariant ? "s" : "m", color: "currentColor" })
-            }
-          ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(DropdownMenu.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
-            DropdownMenu.Content,
-            {
-              align: "end",
-              "aria-label": resolvedOverflowMenuAriaLabel,
-              className: cn(
-                AGG_ROOT_CLASS_NAME,
-                rootClassName,
-                "z-agg-dropdown mt-2 min-w-48 overflow-hidden rounded-agg-md border border-agg-separator bg-agg-secondary shadow-agg-popover outline-none"
-              ),
-              "data-agg-animations": enableAnimations ? "true" : "false",
-              sideOffset: 8,
-              children: overflowLayout.hiddenItems.map((item) => {
-                const isSelected = item.value === value;
-                return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
-                  DropdownMenu.Item,
-                  {
-                    disabled: item.disabled,
-                    onSelect: () => handleSelectHiddenItem(item.value),
-                    className: cn(
-                      "cursor-pointer disabled:cursor-not-allowed",
-                      "flex w-full items-center gap-2 px-4 py-2 text-left text-agg-sm leading-agg-5 outline-none",
-                      getMotionClassName(enableAnimations, "transition-colors"),
-                      "focus:bg-agg-secondary-hover data-[highlighted]:bg-agg-secondary-hover",
-                      isSelected ? "font-agg-bold text-agg-primary" : "font-agg-normal text-agg-foreground",
-                      item.disabled && "cursor-not-allowed opacity-60"
-                    ),
-                    children: [
-                      item.icon ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { className: "inline-flex shrink-0 items-center justify-center", children: item.icon }) : null,
-                      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { className: "truncate whitespace-nowrap [&::first-letter]:uppercase", children: item.label })
-                    ]
-                  },
-                  item.value
-                );
-              })
-            }
-          ) })
-        ] }) : null,
-        shouldUseOverflowMenu ? /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
-          "div",
-          {
-            "aria-hidden": true,
-            className: "pointer-events-none invisible fixed top-0 left-0 -z-10 h-0 overflow-hidden whitespace-nowrap",
-            children: [
-              items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
-                "span",
-                {
-                  ref: (tabElement) => handleMeasureTabRef(item.value, tabElement),
-                  className: getMeasureTabClassName({
-                    isBarVariant,
-                    size
-                  }),
-                  children: [
-                    item.icon ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { className: "inline-flex shrink-0 items-center justify-center", children: item.icon }) : null,
-                    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { children: item.label })
-                  ]
-                },
-                `measure-${item.value}`
-              )),
-              /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
-                "span",
-                {
-                  ref: moreButtonMeasureRef,
-                  className: getMoreButtonClassName({
-                    enableAnimations,
-                    isBarVariant,
-                    size
-                  }),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Icon, { name: "dots-horizontal", size: isBarVariant ? "s" : "m", color: "currentColor" })
-                }
-              )
-            ]
-          }
-        ) : null
+        ] }) : null
       ]
     }
   );
@@ -4502,21 +4284,22 @@ var Tabs = ({
 Tabs.displayName = "Tabs";
 
 // src/primitives/loading-icon/index.tsx
-var import_hooks15 = require("@agg-market/hooks");
+var import_hooks16 = require("@agg-market/hooks");
 var import_jsx_runtime65 = require("react/jsx-runtime");
 var LoadingIcon = ({
-  size = "m",
+  size = "medium",
   className,
   ariaLabel
 }) => {
-  const labels = (0, import_hooks15.useLabels)();
-  const { enableAnimations } = (0, import_hooks15.useSdkUiConfig)();
+  const labels = (0, import_hooks16.useLabels)();
+  const { enableAnimations } = (0, import_hooks16.useSdkUiConfig)();
   return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
     "span",
     {
       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
       ),
@@ -4812,7 +4595,7 @@ var MarketDetailsLoadingState = ({
   ariaLabel,
   classNames
 }) => {
-  const labels = (0, import_hooks16.useLabels)();
+  const labels = (0, import_hooks17.useLabels)();
   return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
     Skeleton,
     {
@@ -4826,7 +4609,7 @@ var MarketDetailsUnavailableState = ({
   ariaLabel,
   classNames
 }) => {
-  const labels = (0, import_hooks16.useLabels)();
+  const labels = (0, import_hooks17.useLabels)();
   return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
     Card,
     {
@@ -4834,8 +4617,8 @@ var MarketDetailsUnavailableState = ({
       role: "status",
       "aria-label": ariaLabel != null ? ariaLabel : labels.marketDetails.unavailableAria,
       children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex flex-col gap-1 p-5", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Typography, { variant: "title", children: labels.marketDetails.unavailableTitle }),
-        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Typography, { variant: "meta", children: labels.marketDetails.unavailableDescription })
+        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Typography, { variant: "body-large-strong", children: labels.marketDetails.unavailableTitle }),
+        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Typography, { variant: "label", className: "text-agg-muted-foreground", children: labels.marketDetails.unavailableDescription })
       ] })
     }
   );
@@ -4846,16 +4629,16 @@ var OrderBookRows = ({
   formatNumber,
   formatCurrency
 }) => {
-  const labels = (0, import_hooks16.useLabels)();
+  const labels = (0, import_hooks17.useLabels)();
   const isAsks = title === labels.marketDetails.asks;
   const priceClassName = isAsks ? "text-agg-orderbook-ask" : "text-agg-orderbook-bid";
   const barClassName = isAsks ? "bg-agg-orderbook-ask/10" : "bg-agg-orderbook-bid/10";
   return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex flex-col gap-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Typography, { variant: "label", className: "text-agg-xs leading-agg-4", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Typography, { variant: "caption-caps", children: title }),
     rows.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex flex-col gap-2", children: [
       /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "grid grid-cols-[52px_1fr_1fr_52px] items-center gap-2 md:grid-cols-[88px_1fr_1fr_minmax(120px,220px)] md:gap-6", children: [
         /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex items-center gap-1 md:gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(VenueLogo, { venue: row.venue, size: "xs" }),
+          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(VenueLogo, { venue: row.venue, size: "small" }),
           /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
             "span",
             {
@@ -4889,11 +4672,15 @@ var getOutcomeButtonClassName = ({
   isPositive,
   isActive
 }) => {
+  const defaultStateClassName = isPositive ? "border-[#18c15c]/50 bg-[#18c15c]/5 text-agg-foreground hover:bg-[#18c15c]/10" : "border-[#e5455f]/50 bg-[#e5455f]/5 text-agg-foreground hover:bg-[#e5455f]/10";
+  const activeStateClassName = isPositive ? "border-transparent bg-[#18c15c] text-agg-on-primary" : "border-transparent bg-[#e5455f] text-agg-on-primary";
   return cn(
     "h-auto min-h-10 flex-1 rounded-agg-full border px-4 py-1.5 text-agg-base leading-agg-6 shadow-none md:flex-none md:min-w-[168px]",
-    getMotionClassName(enableAnimations, "transition-all duration-300"),
-    isPositive ? "border-agg-orderbook-bid/50 bg-agg-orderbook-bid/5 text-agg-foreground" : "border-agg-orderbook-ask/50 bg-agg-orderbook-ask/5 text-agg-foreground",
-    isActive && (isPositive ? "border-agg-orderbook-bid" : "border-agg-orderbook-ask")
+    getMotionClassName(enableAnimations, "transition-all duration-300 ease-in-out"),
+    isActive ? activeStateClassName : defaultStateClassName,
+    "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",
+    "cursor-pointer disabled:cursor-not-allowed disabled:text-agg-muted-foreground",
+    isActive ? "font-agg-bold" : "font-agg-normal"
   );
 };
 var MarketDetailsContent = ({
@@ -4911,8 +4698,8 @@ var MarketDetailsContent = ({
   classNames,
   otherContent
 }) => {
-  const config = (0, import_hooks16.useSdkUiConfig)();
-  const labels = (0, import_hooks16.useLabels)();
+  const config = (0, import_hooks17.useSdkUiConfig)();
+  const labels = (0, import_hooks17.useLabels)();
   const detailsContentId = (0, import_react6.useId)();
   const model = (0, import_react6.useMemo)(() => {
     return buildMarketDetailsModel({
@@ -4998,7 +4785,7 @@ var MarketDetailsContent = ({
   const priceHistoryGroups = (0, import_react6.useMemo)(() => {
     return buildPriceHistoryGroups(graphOutcomes);
   }, [graphOutcomes]);
-  const { data: priceHistoryData, isLoading: isPriceHistoryLoading } = (0, import_hooks16.usePriceHistory)(__spreadProps(__spreadValues({
+  const { data: priceHistoryData, isLoading: isPriceHistoryLoading } = (0, import_hooks17.usePriceHistory)(__spreadProps(__spreadValues({
     groups: priceHistoryGroups
   }, timeWindow), {
     enabled: isOpened && selectedTab === "graph" && priceHistoryGroups.length > 0
@@ -5010,7 +4797,7 @@ var MarketDetailsContent = ({
       liveUpdate: true
     }));
   }, [selectedOutcomesByVenue]);
-  const { data: orderBookData, isLoading: isOrderBookLoading } = (0, import_hooks16.useOrderBook)({
+  const { data: orderBookData, isLoading: isOrderBookLoading } = (0, import_hooks17.useOrderBook)({
     orderbooks: orderBookInputs,
     enabled: isOpened && selectedTab === "order-book" && orderBookInputs.length > 0
   });
@@ -5100,7 +4887,7 @@ var MarketDetailsContent = ({
   }, [labels, model]);
   const handleOutcomeKeyDown = (eventToHandle) => {
     var _a;
-    if (eventToHandle.key !== "ArrowLeft" && eventToHandle.key !== "ArrowRight") {
+    if ((eventToHandle == null ? void 0 : eventToHandle.key) !== "ArrowLeft" && (eventToHandle == null ? void 0 : eventToHandle.key) !== "ArrowRight") {
       return;
     }
     if (headerOutcomeItems.length <= 1)
@@ -5112,9 +4899,17 @@ var MarketDetailsContent = ({
     const nextIndex = activeIndex < 0 ? 0 : (activeIndex + direction + headerOutcomeItems.length) % headerOutcomeItems.length;
     setSelectedOutcomeLabel((_a = headerOutcomeItems[nextIndex]) == null ? void 0 : _a.label);
   };
-  const handleToggleExpanded = () => {
-    setIsOpened((prev) => !prev);
-    onOpenChange == null ? void 0 : onOpenChange(!isOpened);
+  const handleToggleExpanded = (event2) => {
+    if (event2 && "key" in event2 && (event2 == null ? void 0 : event2.key) !== "Enter" && (event2 == null ? void 0 : event2.key) !== " ") {
+      return;
+    }
+    event2 == null ? void 0 : event2.preventDefault();
+    event2 == null ? void 0 : event2.stopPropagation();
+    setIsOpened((prev) => {
+      const next = !prev;
+      onOpenChange == null ? void 0 : onOpenChange(next);
+      return next;
+    });
   };
   const handleGraphVenueToggle = (venue) => {
     setSelectedGraphVenue((currentVenue) => {
@@ -5138,88 +4933,101 @@ var MarketDetailsContent = ({
   return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
     Card,
     {
-      className: cn(marketDetailsBaseCardClassName, classNames == null ? void 0 : classNames.root),
-      "aria-label": ariaLabel != null ? ariaLabel : model.title,
+      className: cn(
+        "w-full cursor-pointer rounded-agg-2xl text-left outline-none",
+        marketDetailsBaseCardClassName,
+        classNames == null ? void 0 : classNames.root
+      ),
+      "aria-expanded": isOpened,
+      "aria-controls": detailsContentId,
+      role: "button",
+      tabIndex: 0,
+      "aria-label": isOpened ? labels.marketDetails.toggleCloseDetailsAria(model.title) : labels.marketDetails.toggleOpenDetailsAria(model.title),
+      onClick: handleToggleExpanded,
+      onKeyDown: handleToggleExpanded,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: cn("flex flex-col gap-3 px-5 py-4", isOpened && "pb-3", classNames == null ? void 0 : classNames.header), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
-            "button",
-            {
-              type: "button",
-              className: "flex w-full cursor-pointer items-center justify-between gap-4 rounded-agg-2xl text-left outline-none",
-              "aria-expanded": isOpened,
-              "aria-controls": detailsContentId,
-              "aria-label": isOpened ? labels.marketDetails.toggleCloseDetailsAria(model.title) : labels.marketDetails.toggleOpenDetailsAria(model.title),
-              onClick: handleToggleExpanded,
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex min-w-0 items-center gap-3 md:gap-4", children: [
-                  model.image ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
-                    "img",
-                    {
-                      src: model.image,
-                      alt: "",
-                      className: "size-12 rounded-agg-lg object-cover md:size-[60px]"
-                    }
-                  ) : null,
-                  /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex min-w-0 flex-col", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Typography, { as: "h3", variant: "title", className: "truncate text-agg-lg leading-agg-7", children: model.title }),
-                    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Typography, { variant: "meta", className: "truncate text-agg-sm leading-agg-5", children: model.subtitle }) })
-                  ] })
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
-                  Typography,
+        /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
+          "div",
+          {
+            className: cn(
+              "flex flex-row items-center justify-between gap-3 px-5 py-4",
+              isOpened && "pb-3",
+              classNames == null ? void 0 : classNames.header
+            ),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex min-w-0 items-center gap-3 md:gap-4", children: [
+                model.image ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+                  "img",
                   {
-                    as: "div",
-                    variant: "value",
-                    className: "shrink-0 text-agg-2xl font-agg-bold leading-agg-8",
-                    children: formatProbabilityPercent(headlineProbability)
+                    src: model.image,
+                    alt: "",
+                    className: "size-12 rounded-agg-lg object-cover md:size-[60px]"
                   }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
-            "div",
-            {
-              className: "flex gap-2",
-              role: "tablist",
-              "aria-label": labels.marketDetails.marketOutcomesAria,
-              tabIndex: 0,
-              onKeyDown: handleOutcomeKeyDown,
-              children: headerOutcomeItems.map((item) => {
-                const isPositive = item.tone === "positive";
-                return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
-                  "button",
-                  {
-                    type: "button",
-                    role: "tab",
-                    "aria-selected": item.label === selectedOutcomeLabel,
-                    tabIndex: item.label === selectedOutcomeLabel ? 0 : -1,
-                    className: getOutcomeButtonClassName({
-                      enableAnimations: config.enableAnimations,
-                      isPositive,
-                      isActive: item.label === selectedOutcomeLabel
-                    }),
-                    onClick: () => {
-                      setSelectedOutcomeLabel(item.label);
-                    },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("span", { className: "inline-flex items-center gap-2", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
-                        VenueLogo,
-                        {
-                          venue: isPositive ? "polymarket" : "probable",
-                          size: "xs"
-                        }
-                      ),
-                      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Typography, { className: "text-agg-base leading-agg-6", children: `${item.label} ${formatProbabilityCents(item.probability)}` })
-                    ] })
-                  },
-                  item.label
-                );
-              })
-            }
-          )
-        ] }),
+                ) : null,
+                /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex min-w-0 flex-col", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Typography, { as: "h3", variant: "body-large-strong", className: "truncate", children: model.title }),
+                  /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Typography, { variant: "label", className: "truncate text-agg-muted-foreground", children: model.subtitle }) })
+                ] })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Typography, { as: "div", variant: "heading", className: "shrink-0", children: formatProbabilityPercent(headlineProbability) }),
+              /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+                "div",
+                {
+                  className: "flex gap-2",
+                  role: "tablist",
+                  "aria-label": labels.marketDetails.marketOutcomesAria,
+                  tabIndex: 0,
+                  onKeyDown: (e) => handleOutcomeKeyDown(e),
+                  children: headerOutcomeItems.map((item) => {
+                    const isPositive = item.tone === "positive";
+                    const isActiveOutcome = item.label === selectedOutcomeLabel;
+                    return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+                      "button",
+                      {
+                        type: "button",
+                        role: "tab",
+                        "aria-selected": isActiveOutcome,
+                        tabIndex: isActiveOutcome ? 0 : -1,
+                        className: getOutcomeButtonClassName({
+                          enableAnimations: config.enableAnimations,
+                          isPositive,
+                          isActive: isActiveOutcome
+                        }),
+                        onClick: (e) => {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          setSelectedOutcomeLabel(item.label);
+                        },
+                        children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("span", { className: "inline-flex items-center gap-2", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+                            VenueLogo,
+                            {
+                              venue: isPositive ? "polymarket" : "probable",
+                              size: "small",
+                              color: isActiveOutcome ? "var(--agg-color-on-primary)" : void 0
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+                            Typography,
+                            {
+                              variant: isActiveOutcome ? "body-strong" : "body",
+                              className: cn(
+                                "text-agg-base leading-agg-6",
+                                isActiveOutcome ? "text-agg-on-primary" : "text-agg-foreground"
+                              ),
+                              children: `${item.label} ${formatProbabilityCents(item.probability)}`
+                            }
+                          )
+                        ] })
+                      },
+                      item.label
+                    );
+                  })
+                }
+              )
+            ]
+          }
+        ),
         /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
           "div",
           {
@@ -5271,7 +5079,7 @@ var MarketDetailsContent = ({
                           "aria-busy": true,
                           children: [
                             /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(LoadingIcon, {}),
-                            /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Typography, { variant: "meta", children: labels.marketDetails.loadingOrderbookLabel })
+                            /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Typography, { variant: "label", className: "text-agg-muted-foreground", children: labels.marketDetails.loadingOrderbookLabel })
                           ]
                         }
                       ) : /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(import_jsx_runtime66.Fragment, { children: [
@@ -5319,9 +5127,13 @@ var MarketDetailsContent = ({
                                         "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",
                                         isActiveVenue ? "border-agg-primary bg-agg-secondary" : "border-transparent bg-agg-secondary-hover"
                                       ),
-                                      onClick: () => handleGraphVenueToggle(item.venue),
+                                      onClick: (e) => {
+                                        e.preventDefault();
+                                        e.stopPropagation();
+                                        handleGraphVenueToggle(item.venue);
+                                      },
                                       children: [
-                                        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(VenueLogo, { venue: item.venue, size: "xs" }),
+                                        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(VenueLogo, { venue: item.venue, size: "small" }),
                                         /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "text-agg-base leading-agg-6 text-agg-foreground", children: probability })
                                       ]
                                     },
@@ -5366,7 +5178,11 @@ var MarketDetailsContent = ({
                                       isActive ? "font-agg-bold text-agg-foreground" : "font-agg-normal text-agg-muted-foreground"
                                     ),
                                     "aria-pressed": isActive,
-                                    onClick: () => setSelectedTimeRange(timeRange),
+                                    onClick: (e) => {
+                                      e.preventDefault();
+                                      e.stopPropagation();
+                                      setSelectedTimeRange(timeRange);
+                                    },
                                     children: timeRange === "ALL" ? labels.eventItemDetails.allTimeRange : timeRange
                                   },
                                   timeRange
@@ -5381,7 +5197,7 @@ var MarketDetailsContent = ({
                         {
                           className: "flex items-center justify-between rounded-agg-xl bg-agg-secondary-hover px-4 py-3",
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Typography, { variant: "meta", children: row.label }),
+                            /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Typography, { variant: "label", className: "text-agg-muted-foreground", children: row.label }),
                             /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Typography, { variant: "body", className: "text-right", children: row.value })
                           ]
                         },
@@ -5417,7 +5233,7 @@ var MarketDetails = (props) => {
     (_a2 = props.onOpenChange) == null ? void 0 : _a2.call(props, nextIsOpened);
   };
   const hasEventProp = "event" in props && !!props.event;
-  const { event: fetchedEvent, isLoading: isFetchingEvent } = (0, import_hooks16.useEvent)(
+  const { event: fetchedEvent, isLoading: isFetchingEvent } = (0, import_hooks17.useEvent)(
     hasEventProp ? void 0 : props.eventId,
     {
       enabled: !props.isLoading && !hasEventProp && !!props.eventId
@@ -5469,12 +5285,12 @@ MarketDetails.displayName = "MarketDetails";
 
 // src/trading/place-order/index.tsx
 var import_react7 = require("react");
-var import_hooks18 = require("@agg-market/hooks");
+var import_hooks19 = require("@agg-market/hooks");
 
 // src/trading/utils.ts
-var import_hooks17 = require("@agg-market/hooks");
+var import_hooks18 = require("@agg-market/hooks");
 var import_dayjs4 = __toESM(require("dayjs"));
-var defaultLabels = (0, import_hooks17.resolveAggUiLabels)("en-US");
+var defaultLabels = (0, import_hooks18.resolveAggUiLabels)("en-US");
 var defaultSettlementSectionLabel = defaultLabels.trading.settlementSection;
 var defaultSettlementDifferencesTitle = defaultLabels.trading.settlementDifferencesTitle;
 var defaultTradingDisclaimer = defaultLabels.trading.disclaimer;
@@ -5539,6 +5355,26 @@ var getResultValueClassName = (tone) => {
     return "text-agg-foreground";
   return "text-agg-success";
 };
+var negativeOutcomePattern = /\b(no|down|against|under|lose|false)\b/i;
+var resolveIsPositiveOutcome = (outcome, index) => {
+  const outcomeText = `${outcome.id} ${outcome.label}`;
+  if (negativeOutcomePattern.test(outcomeText))
+    return false;
+  if (index === 1)
+    return false;
+  return true;
+};
+var getOutcomeButtonClassName2 = ({
+  enableAnimations,
+  isActive,
+  isPositive
+}) => {
+  return cn(
+    "flex-1 cursor-pointer rounded-agg-full border px-6 py-2.5 text-agg-base leading-agg-6",
+    getMotionClassName(enableAnimations, "transition-all duration-300 ease-in-out"),
+    isActive ? isPositive ? "border-transparent bg-[#18c15c] font-agg-bold text-agg-on-primary" : "border-transparent bg-[#e5455f] font-agg-bold text-agg-on-primary" : "border-transparent bg-agg-secondary-hover font-agg-normal text-agg-foreground hover:bg-agg-tertiary"
+  );
+};
 var getStatusContent = ({
   placement,
   status,
@@ -5595,8 +5431,8 @@ var PlaceOrder = ({
   onStatusAction,
   onTabChange
 }) => {
-  const { enableAnimations } = (0, import_hooks18.useSdkUiConfig)();
-  const labels = (0, import_hooks18.useLabels)();
+  const { enableAnimations } = (0, import_hooks19.useSdkUiConfig)();
+  const labels = (0, import_hooks19.useLabels)();
   const resolvedDisclaimer = disclaimer === defaultTradingDisclaimer ? labels.trading.disclaimer : disclaimer;
   if (isLoading) {
     return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
@@ -5641,7 +5477,7 @@ var PlaceOrder = ({
   const actionButton = /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
     Button,
     {
-      size: "xxl",
+      size: "large",
       className: "w-full",
       disabled: isPrimaryActionDisabled,
       isLoading: isPrimaryActionLoading,
@@ -5675,7 +5511,7 @@ var PlaceOrder = ({
               Icon,
               {
                 name: "close",
-                size: "m",
+                size: "medium",
                 className: "h-6 w-6 text-agg-foreground",
                 color: "currentColor"
               }
@@ -5695,21 +5531,25 @@ var PlaceOrder = ({
         variant: "underline",
         size: "s",
         overflowBehavior: "scroll",
-        className: "w-full"
+        classNames: {
+          root: "w-full",
+          tabList: "w-full"
+        }
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex flex-col gap-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "flex w-full gap-2", children: outcomes.map((outcome) => {
+      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "flex w-full gap-2", children: outcomes.map((outcome, index) => {
         const isActive = outcome.id === resolvedOutcomeId;
+        const isPositive = resolveIsPositiveOutcome(outcome, index);
         return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
           "button",
           {
             type: "button",
-            className: cn(
-              "flex-1 rounded-agg-full px-6 py-2.5 text-agg-base leading-agg-6",
-              getMotionClassName(enableAnimations, "transition-colors"),
-              isActive ? "bg-agg-success font-agg-bold text-agg-on-primary" : "bg-agg-secondary-hover font-agg-normal text-agg-foreground"
-            ),
+            className: getOutcomeButtonClassName2({
+              enableAnimations,
+              isActive,
+              isPositive
+            }),
             "aria-pressed": isActive,
             "aria-label": `${outcome.label} ${outcome.priceLabel}`,
             onClick: () => handleOutcomeChange(outcome.id),
@@ -5752,7 +5592,7 @@ var PlaceOrder = ({
                       VenueLogo,
                       {
                         venue: row.venue,
-                        size: "s",
+                        size: "small",
                         ariaLabel: getTradingVenueLabel(row.venue)
                       }
                     ),
@@ -5814,7 +5654,7 @@ PlaceOrder.displayName = "PlaceOrder";
 
 // src/trading/settlement/index.tsx
 var import_react8 = require("react");
-var import_hooks19 = require("@agg-market/hooks");
+var import_hooks20 = require("@agg-market/hooks");
 var import_jsx_runtime68 = require("react/jsx-runtime");
 var getSettlementHeaderClassName = () => {
   return "flex items-center justify-between gap-4";
@@ -5833,12 +5673,18 @@ var Settlement = ({
   className
 }) => {
   var _a, _b;
-  const labels = (0, import_hooks19.useLabels)();
+  const labels = (0, import_hooks20.useLabels)();
+  const { enableAnimations } = (0, import_hooks20.useSdkUiConfig)();
   const resolvedSectionLabel = sectionLabel === defaultSettlementSectionLabel ? labels.trading.settlementSection : sectionLabel;
   const resolvedDifferencesTitle = differencesTitle === defaultSettlementDifferencesTitle ? labels.trading.settlementDifferencesTitle : differencesTitle;
   const [internalExpandedVenue, setInternalExpandedVenue] = (0, import_react8.useState)(
     (_b = defaultExpandedVenue != null ? defaultExpandedVenue : (_a = venues[0]) == null ? void 0 : _a.venue) != null ? _b : null
   );
+  const [expandedDescriptionByVenue, setExpandedDescriptionByVenue] = (0, import_react8.useState)({});
+  const [overflowingDescriptionByVenue, setOverflowingDescriptionByVenue] = (0, import_react8.useState)({});
+  const [collapsedDescriptionByVenue, setCollapsedDescriptionByVenue] = (0, import_react8.useState)({});
+  const descriptionWrapperRefs = (0, import_react8.useRef)(/* @__PURE__ */ new Map());
+  const descriptionMeasureRefs = (0, import_react8.useRef)(/* @__PURE__ */ new Map());
   (0, import_react8.useEffect)(() => {
     if (expandedVenue === void 0)
       return;
@@ -5852,6 +5698,154 @@ var Settlement = ({
     }
     onExpandedVenueChange == null ? void 0 : onExpandedVenueChange(nextVenue);
   };
+  const handleDescriptionWrapperRef = (0, import_react8.useCallback)(
+    (venue, element) => {
+      if (!element) {
+        descriptionWrapperRefs.current.delete(venue);
+        return;
+      }
+      descriptionWrapperRefs.current.set(venue, element);
+    },
+    []
+  );
+  const handleDescriptionMeasureRef = (0, import_react8.useCallback)(
+    (venue, element) => {
+      if (!element) {
+        descriptionMeasureRefs.current.delete(venue);
+        return;
+      }
+      descriptionMeasureRefs.current.set(venue, element);
+    },
+    []
+  );
+  const updateDescriptionLayout = (0, import_react8.useCallback)(
+    (venue, description, showMoreLabel) => {
+      const descriptionWrapperElement = descriptionWrapperRefs.current.get(venue);
+      const descriptionMeasureElement = descriptionMeasureRefs.current.get(venue);
+      if (!descriptionWrapperElement || !descriptionMeasureElement)
+        return;
+      const wrapperWidth = descriptionWrapperElement.clientWidth;
+      if (wrapperWidth <= 0)
+        return;
+      const computedStyles = window.getComputedStyle(descriptionWrapperElement);
+      const parsedLineHeight = Number.parseFloat(computedStyles.lineHeight);
+      const lineHeight = Number.isFinite(parsedLineHeight) ? parsedLineHeight : 20;
+      const maxHeight = lineHeight * 2 + 1;
+      descriptionMeasureElement.style.width = `${wrapperWidth}px`;
+      const getHeight = (value) => {
+        descriptionMeasureElement.textContent = value;
+        return descriptionMeasureElement.scrollHeight;
+      };
+      const fullHeight = getHeight(description);
+      if (fullHeight <= maxHeight) {
+        setOverflowingDescriptionByVenue((currentState) => {
+          if (currentState[venue] === false)
+            return currentState;
+          return __spreadProps(__spreadValues({}, currentState), {
+            [venue]: false
+          });
+        });
+        setCollapsedDescriptionByVenue((currentState) => {
+          if (currentState[venue] === description)
+            return currentState;
+          return __spreadProps(__spreadValues({}, currentState), {
+            [venue]: description
+          });
+        });
+        return;
+      }
+      const suffix = `... ${showMoreLabel}`;
+      let left = 0;
+      let right = description.length;
+      let bestLength = 0;
+      while (left <= right) {
+        const middle = Math.floor((left + right) / 2);
+        const candidate = description.slice(0, middle).trimEnd();
+        const candidateHeight = getHeight(`${candidate}${suffix}`);
+        if (candidateHeight <= maxHeight) {
+          bestLength = middle;
+          left = middle + 1;
+          continue;
+        }
+        right = middle - 1;
+      }
+      const collapsedDescription = description.slice(0, bestLength).trimEnd();
+      setOverflowingDescriptionByVenue((currentState) => {
+        if (currentState[venue] === true)
+          return currentState;
+        return __spreadProps(__spreadValues({}, currentState), {
+          [venue]: true
+        });
+      });
+      setCollapsedDescriptionByVenue((currentState) => {
+        if (currentState[venue] === collapsedDescription)
+          return currentState;
+        return __spreadProps(__spreadValues({}, currentState), {
+          [venue]: collapsedDescription
+        });
+      });
+    },
+    []
+  );
+  (0, import_react8.useEffect)(() => {
+    if (typeof window === "undefined")
+      return;
+    if (!resolvedExpandedVenue)
+      return;
+    if (expandedDescriptionByVenue[resolvedExpandedVenue])
+      return;
+    const expandedVenueItem = venues.find((venueItem) => venueItem.venue === resolvedExpandedVenue);
+    if (!expandedVenueItem)
+      return;
+    const frameId = window.requestAnimationFrame(() => {
+      var _a2;
+      updateDescriptionLayout(
+        resolvedExpandedVenue,
+        expandedVenueItem.description,
+        (_a2 = expandedVenueItem.showMoreLabel) != null ? _a2 : "Show more"
+      );
+    });
+    return () => {
+      window.cancelAnimationFrame(frameId);
+    };
+  }, [expandedDescriptionByVenue, resolvedExpandedVenue, updateDescriptionLayout, venues]);
+  (0, import_react8.useEffect)(() => {
+    if (!resolvedExpandedVenue)
+      return;
+    if (expandedDescriptionByVenue[resolvedExpandedVenue])
+      return;
+    if (typeof ResizeObserver === "undefined")
+      return;
+    const expandedVenueItem = venues.find((venueItem) => venueItem.venue === resolvedExpandedVenue);
+    if (!expandedVenueItem)
+      return;
+    const descriptionWrapperElement = descriptionWrapperRefs.current.get(resolvedExpandedVenue);
+    if (!descriptionWrapperElement)
+      return;
+    const resizeObserver = new ResizeObserver(() => {
+      var _a2;
+      updateDescriptionLayout(
+        resolvedExpandedVenue,
+        expandedVenueItem.description,
+        (_a2 = expandedVenueItem.showMoreLabel) != null ? _a2 : "Show more"
+      );
+    });
+    resizeObserver.observe(descriptionWrapperElement);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [expandedDescriptionByVenue, resolvedExpandedVenue, updateDescriptionLayout, venues]);
+  const handleDescriptionShowMoreClick = (event, venue) => {
+    event == null ? void 0 : event.stopPropagation();
+    setExpandedDescriptionByVenue((currentState) => {
+      if (currentState[venue])
+        return currentState;
+      return __spreadProps(__spreadValues({}, currentState), {
+        [venue]: true
+      });
+    });
+    onShowMore == null ? void 0 : onShowMore(venue);
+  };
   if (isLoading) {
     return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
       Skeleton,
@@ -5880,25 +5874,53 @@ var Settlement = ({
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "h-px w-full bg-agg-separator" }),
         /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "flex flex-col gap-3", children: venues.map((venue) => {
+          var _a2, _b2;
           const venueLabel = getTradingVenueLabel(venue.venue, venue.label);
           const isExpanded = resolvedExpandedVenue === venue.venue;
-          return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: cn("flex flex-col", isExpanded ? "gap-2" : "gap-0"), children: [
+          const isDescriptionExpanded = !!expandedDescriptionByVenue[venue.venue];
+          const isDescriptionOverflowing = !!overflowingDescriptionByVenue[venue.venue];
+          const shouldShowDescriptionCta = isExpanded && isDescriptionOverflowing && !isDescriptionExpanded;
+          const resolvedShowMoreLabel = (_a2 = venue.showMoreLabel) != null ? _a2 : "Show more";
+          return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "flex flex-col", children: [
             /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
               "button",
               {
                 type: "button",
-                className: "flex items-center gap-2 text-left",
+                className: cn(
+                  "flex items-center gap-2 text-left",
+                  "cursor-pointer disabled:cursor-not-allowed hover:opacity-50",
+                  getMotionClassName(
+                    enableAnimations,
+                    "transition-[opacity,color] duration-200 ease-in-out"
+                  )
+                ),
                 "aria-expanded": isExpanded,
                 "aria-label": labels.trading.settlementDetailsAria(venueLabel),
                 onClick: () => handleVenueClick(venue.venue),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(VenueLogo, { venue: venue.venue, size: "s", ariaLabel: venueLabel }),
-                  /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground", children: venueLabel }),
+                  /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+                    VenueLogo,
+                    {
+                      venue: venue.venue,
+                      size: "small",
+                      ariaLabel: venueLabel
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+                    "span",
+                    {
+                      className: cn(
+                        "text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground",
+                        isExpanded ? "text-agg-primary" : "text-agg-foreground"
+                      ),
+                      children: venueLabel
+                    }
+                  ),
                   /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
                     Icon,
                     {
                       name: isExpanded ? "chevron-up" : "chevron-down",
-                      size: "s",
+                      size: "small",
                       className: "text-agg-foreground",
                       color: "currentColor"
                     }
@@ -5906,25 +5928,65 @@ var Settlement = ({
                 ]
               }
             ),
-            isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("p", { className: "text-agg-sm leading-agg-5 text-agg-foreground", children: [
-              venue.description,
-              venue.showMoreLabel ? /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(import_jsx_runtime68.Fragment, { children: [
-                " ",
-                /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
-                  "button",
+            /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+              "div",
+              {
+                "aria-hidden": !isExpanded,
+                className: cn(
+                  "grid overflow-hidden",
+                  isExpanded ? "mt-2 grid-rows-[1fr] opacity-100" : "mt-0 grid-rows-[0fr] opacity-0",
+                  !isExpanded && "pointer-events-none",
+                  getMotionClassName(
+                    enableAnimations,
+                    "transition-[grid-template-rows,opacity,margin-top] duration-300 ease-in-out"
+                  )
+                ),
+                children: /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
+                  "div",
                   {
-                    type: "button",
-                    className: "font-agg-normal text-agg-foreground underline-offset-2 hover:underline",
-                    "aria-label": labels.trading.settlementShowMoreAria(
-                      venue.showMoreLabel,
-                      venueLabel
-                    ),
-                    onClick: () => onShowMore == null ? void 0 : onShowMore(venue.venue),
-                    children: venue.showMoreLabel
+                    ref: (element) => handleDescriptionWrapperRef(venue.venue, element),
+                    className: "relative min-h-0",
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("p", { className: "min-h-0 text-agg-sm leading-agg-5 text-agg-foreground", children: [
+                        isDescriptionExpanded || !isDescriptionOverflowing ? venue.description : (_b2 = collapsedDescriptionByVenue[venue.venue]) != null ? _b2 : venue.description,
+                        shouldShowDescriptionCta ? /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(import_jsx_runtime68.Fragment, { children: [
+                          "... ",
+                          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+                            "button",
+                            {
+                              type: "button",
+                              tabIndex: isExpanded ? 0 : -1,
+                              className: cn(
+                                "cursor-pointer disabled:cursor-not-allowed",
+                                "text-agg-sm leading-agg-5 text-agg-foreground underline-offset-2 hover:underline hover:font-agg-bold",
+                                getMotionClassName(
+                                  enableAnimations,
+                                  "transition-[text-decoration] duration-200 ease-in-out"
+                                )
+                              ),
+                              "aria-label": labels.trading.settlementShowMoreAria(
+                                resolvedShowMoreLabel,
+                                venueLabel
+                              ),
+                              onClick: (event) => handleDescriptionShowMoreClick(event, venue.venue),
+                              children: resolvedShowMoreLabel
+                            }
+                          )
+                        ] }) : null
+                      ] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+                        "p",
+                        {
+                          ref: (element) => handleDescriptionMeasureRef(venue.venue, element),
+                          "aria-hidden": true,
+                          className: "pointer-events-none invisible fixed top-0 left-0 -z-10 whitespace-normal text-agg-sm leading-agg-5"
+                        }
+                      )
+                    ]
                   }
                 )
-              ] }) : null
-            ] }) : null
+              }
+            )
           ] }, venue.venue);
         }) })
       ]
@@ -5993,7 +6055,7 @@ var resolveInitialExpandedMarketId = (detailedMarkets, defaultExpandedMarketId)
 var EventMarketPageUnavailableState = ({
   ariaLabel
 }) => {
-  const labels = (0, import_hooks20.useLabels)();
+  const labels = (0, import_hooks21.useLabels)();
   return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
     Card,
     {
@@ -6001,8 +6063,8 @@ var EventMarketPageUnavailableState = ({
       role: "status",
       "aria-label": ariaLabel != null ? ariaLabel : labels.eventMarketPage.unavailableAria,
       children: /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Typography, { variant: "title", children: labels.eventMarketPage.unavailableTitle }),
-        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Typography, { variant: "meta", children: labels.eventMarketPage.unavailableDescription })
+        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Typography, { variant: "body-large-strong", children: labels.eventMarketPage.unavailableTitle }),
+        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Typography, { variant: "label", className: "text-agg-muted-foreground", children: labels.eventMarketPage.unavailableDescription })
       ] })
     }
   );
@@ -6012,7 +6074,7 @@ var EventMarketPageLoadingState = ({
   settlement,
   classNames
 }) => {
-  const labels = (0, import_hooks20.useLabels)();
+  const labels = (0, import_hooks21.useLabels)();
   const fallbackSettlement = settlement != null ? settlement : {
     sectionLabel: labels.trading.settlementSection,
     question: labels.eventMarketPage.loadingSettlementQuestion,
@@ -6078,7 +6140,7 @@ var EventMarketPageContent = ({
   classNames,
   ariaLabel
 }) => {
-  const labels = (0, import_hooks20.useLabels)();
+  const labels = (0, import_hooks21.useLabels)();
   const resolvedHeroMarketId = (0, import_react9.useMemo)(() => {
     return resolveHeroMarketId(event, heroMarketId);
   }, [event, heroMarketId]);
@@ -6163,7 +6225,7 @@ var EventMarketPageContent = ({
 };
 var EventMarketPage = (props) => {
   const hasEventProp = "event" in props && !!props.event;
-  const { event: fetchedEvent, isLoading: isFetchingEvent } = (0, import_hooks20.useEvent)(
+  const { event: fetchedEvent, isLoading: isFetchingEvent } = (0, import_hooks21.useEvent)(
     hasEventProp ? void 0 : props.eventId,
     {
       enabled: !props.isLoading && !hasEventProp && !!props.eventId