@agg-market/ui 0.0.1

package/dist/place-order.js

@@ -0,0 +1,2916 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/trading/place-order/index.tsx
+var place_order_exports = {};
+__export(place_order_exports, {
+  PlaceOrder: () => PlaceOrder
+});
+module.exports = __toCommonJS(place_order_exports);
+var import_react2 = require("react");
+var import_hooks13 = require("@agg-market/hooks");
+
+// src/primitives/button/index.tsx
+var import_hooks = require("@agg-market/hooks");
+
+// src/constants.ts
+var AGG_ROOT_CLASS_NAME = "agg-root";
+
+// src/shared/utils.ts
+var cn = (...values) => values.filter(Boolean).join(" ");
+var getMotionClassName = (enabled, ...values) => {
+  if (!enabled)
+    return void 0;
+  return cn(...values);
+};
+var getScrollBehavior = (enabled) => {
+  return enabled ? "smooth" : "auto";
+};
+
+// src/primitives/icon/icon.constants.ts
+var iconSizeClasses = {
+  xxs: "h-2 w-2",
+  xs: "h-3 w-3",
+  s: "h-4 w-4",
+  m: "h-6 w-6",
+  l: "h-8 w-8",
+  xl: "h-10 w-10",
+  xxl: "h-12 w-12"
+};
+
+// 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")
+};
+var iconSizeClasses2 = {
+  xxs: iconSizeClasses.xs,
+  xs: iconSizeClasses.xs,
+  s: iconSizeClasses.s,
+  m: iconSizeClasses.s,
+  l: iconSizeClasses.s,
+  xl: iconSizeClasses.s,
+  xxl: iconSizeClasses.s
+};
+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"
+};
+var variantClasses = {
+  primary: cn(
+    "bg-agg-primary text-agg-on-primary",
+    "hover:bg-agg-primary-hover",
+    "disabled:bg-agg-separator disabled:text-agg-on-primary",
+    "focus-visible:ring-agg-primary-hover"
+  ),
+  secondary: cn(
+    "border border-agg-separator bg-agg-secondary text-agg-foreground",
+    "hover:bg-agg-secondary-hover",
+    "disabled:bg-agg-secondary disabled:text-agg-muted-foreground disabled:border-agg-separator",
+    "focus-visible:ring-agg-separator"
+  ),
+  tertiary: cn(
+    "bg-transparent text-agg-foreground",
+    "hover:bg-agg-secondary-hover",
+    "disabled:bg-transparent disabled:text-agg-muted-foreground",
+    "focus-visible:ring-agg-separator"
+  )
+};
+var baseButtonClasses = cn(
+  "cursor-pointer disabled:cursor-not-allowed",
+  "inline-flex items-center justify-center rounded-agg-full font-agg-sans font-agg-bold text-center",
+  "whitespace-nowrap",
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-agg-secondary"
+);
+
+// src/primitives/button/index.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Button = (_a) => {
+  var _b = _a, {
+    children,
+    variant = "primary",
+    size = "m",
+    isLoading = false,
+    disabled,
+    prefix,
+    suffix,
+    type = "button",
+    className,
+    "aria-label": ariaLabel
+  } = _b, other = __objRest(_b, [
+    "children",
+    "variant",
+    "size",
+    "isLoading",
+    "disabled",
+    "prefix",
+    "suffix",
+    "type",
+    "className",
+    "aria-label"
+  ]);
+  const { enableAnimations } = (0, import_hooks.useSdkUiConfig)();
+  const isDisabled = disabled || isLoading;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "button",
+    __spreadProps(__spreadValues({
+      type,
+      className: cn(
+        baseButtonClasses,
+        getMotionClassName(enableAnimations, "transition-colors"),
+        sizeClasses[size],
+        iconSlotClasses[size],
+        variantClasses[variant],
+        className
+      ),
+      disabled: isDisabled,
+      "aria-busy": isLoading,
+      "aria-label": ariaLabel
+    }, other), {
+      children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "span",
+        {
+          className: cn(
+            "inline-block rounded-agg-full border-2 border-current border-r-transparent",
+            getMotionClassName(enableAnimations, "animate-spin"),
+            iconSizeClasses2[size]
+          ),
+          "aria-hidden": "true"
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        prefix != null ? prefix : null,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children }),
+        suffix != null ? suffix : null
+      ] })
+    })
+  );
+};
+Button.displayName = "Button";
+
+// src/primitives/card/index.tsx
+var import_hooks2 = require("@agg-market/hooks");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Card = (_a) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  const { enableAnimations } = (0, import_hooks2.useSdkUiConfig)();
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    __spreadValues({
+      className: cn(
+        "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"),
+        className
+      )
+    }, props)
+  );
+};
+Card.displayName = "Card";
+
+// src/primitives/icon/types.ts
+var getIconA11yProps = (title) => ({
+  role: title ? "img" : "presentation",
+  "aria-hidden": title ? void 0 : true
+});
+
+// src/primitives/icon/svg/arrow-trend-up.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var ArrowTrendUpIcon = (_a) => {
+  var _b = _a, { title, className } = _b, props = __objRest(_b, ["title", "className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "svg",
+    __spreadProps(__spreadValues(__spreadValues({
+      viewBox: "0 0 16 16",
+      className,
+      fill: "none"
+    }, getIconA11yProps(title)), props), {
+      children: [
+        title ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("title", { children: title }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "path",
+          {
+            d: "M2 11.5L6.5 7L9.5 10L14 5.5",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "path",
+          {
+            d: "M10.5 5.5H14V9",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ]
+    })
+  );
+};
+ArrowTrendUpIcon.displayName = "ArrowTrendUpIcon";
+
+// src/primitives/icon/svg/arrows-to-dot.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var ArrowsToDotIcon = (_a) => {
+  var _b = _a, { title, className } = _b, props = __objRest(_b, ["title", "className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "svg",
+    __spreadProps(__spreadValues(__spreadValues({
+      viewBox: "0 0 16 16",
+      className,
+      fill: "none"
+    }, getIconA11yProps(title)), props), {
+      children: [
+        title ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("title", { children: title }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "path",
+          {
+            d: "M8 2V5M8 11V14M2 8H5M11 8H14M3.76 3.76L5.9 5.9M10.1 10.1L12.24 12.24M12.24 3.76L10.1 5.9M5.9 10.1L3.76 12.24",
+            stroke: "currentColor",
+            strokeWidth: "1.25",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "8", cy: "8", r: "1.5", fill: "currentColor" })
+      ]
+    })
+  );
+};
+ArrowsToDotIcon.displayName = "ArrowsToDotIcon";
+
+// src/primitives/icon/svg/best-prices.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var BestPricesIcon = (_a) => {
+  var _b = _a, { title, className } = _b, props = __objRest(_b, ["title", "className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "svg",
+    __spreadProps(__spreadValues(__spreadValues({
+      width: "28",
+      height: "28",
+      viewBox: "0 0 28 28",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className
+    }, getIconA11yProps(title)), props), {
+      children: [
+        title ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("title", { children: title }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("g", { clipPath: "url(#clip0_best_prices)", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "path",
+          {
+            d: "M12.8333 27.4167C12.8333 27.7387 12.572 28 12.25 28H5.25C2.3555 28 0 25.6445 0 22.75V5.25117C0 2.35667 2.35433 0 5.25 0H18.0833C20.9778 0 23.3333 2.35433 23.3333 5.24883V8.74883C23.3333 9.07083 23.0732 9.33217 22.75 9.33217C22.4268 9.33217 22.1667 9.07083 22.1667 8.74883V5.24883C22.1667 2.99717 20.3338 1.1655 18.0833 1.1655H5.25C2.99833 1.1655 1.16667 2.99833 1.16667 5.25V22.7488C1.16667 25.0005 2.9995 26.8322 5.25 26.8322H12.25C12.572 26.8322 12.8333 27.0947 12.8333 27.4167ZM27.8297 27.8297C27.7153 27.944 27.566 28 27.4167 28C27.2673 28 27.118 27.9428 27.0037 27.8297L23.0102 23.8362C21.6837 24.9748 19.964 25.6667 18.0822 25.6667C13.9008 25.6667 10.4988 22.2647 10.4988 18.0833C10.4988 13.902 13.9008 10.5 18.0822 10.5C22.2635 10.5 25.6655 13.902 25.6655 18.0833C25.6655 19.964 24.9725 21.6837 23.835 23.0113L27.8285 27.0048C28.056 27.2323 28.0572 27.6022 27.8297 27.8297ZM24.5 18.0833C24.5 14.546 21.6218 11.6667 18.0833 11.6667C14.5448 11.6667 11.6667 14.546 11.6667 18.0833C11.6667 21.6207 14.5448 24.5 18.0833 24.5C21.6218 24.5 24.5 21.6207 24.5 18.0833ZM7.58333 5.83333H5.25C4.928 5.83333 4.66667 6.09467 4.66667 6.41667C4.66667 6.73867 4.928 7 5.25 7H7.58333C7.90533 7 8.16667 6.73867 8.16667 6.41667C8.16667 6.09467 7.90533 5.83333 7.58333 5.83333ZM7.58333 17.5H5.25C4.928 17.5 4.66667 17.7613 4.66667 18.0833C4.66667 18.4053 4.928 18.6667 5.25 18.6667H7.58333C7.90533 18.6667 8.16667 18.4053 8.16667 18.0833C8.16667 17.7613 7.90533 17.5 7.58333 17.5ZM11.0833 5.83333C10.7613 5.83333 10.5 6.09467 10.5 6.41667C10.5 6.73867 10.7613 7 11.0833 7H18.0833C18.4053 7 18.6667 6.73867 18.6667 6.41667C18.6667 6.09467 18.4053 5.83333 18.0833 5.83333H11.0833ZM7.58333 11.6667H5.25C4.928 11.6667 4.66667 11.928 4.66667 12.25C4.66667 12.572 4.928 12.8333 5.25 12.8333H7.58333C7.90533 12.8333 8.16667 12.572 8.16667 12.25C8.16667 11.928 7.90533 11.6667 7.58333 11.6667ZM21.1668 16.4862L18.0098 19.5405C17.6167 19.9255 16.9762 19.9302 16.583 19.5452L14.9928 17.976C14.7642 17.7497 14.3943 17.752 14.168 17.9807C13.9417 18.2105 13.944 18.5803 14.1738 18.8055L15.7652 20.377C16.1875 20.79 16.7417 20.9965 17.2958 20.9965C17.85 20.9965 18.4053 20.7888 18.8253 20.3747L21.9788 17.325C22.2098 17.101 22.2168 16.7312 21.9928 16.5002C21.77 16.2692 21.399 16.2645 21.1668 16.4862Z",
+            fill: "currentColor"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("clipPath", { id: "clip0_best_prices", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("rect", { width: "28", height: "28", fill: "white" }) }) })
+      ]
+    })
+  );
+};
+BestPricesIcon.displayName = "BestPricesIcon";
+
+// src/primitives/icon/svg/check-circle.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var CheckCircleIcon = (_a) => {
+  var _b = _a, { title, className } = _b, props = __objRest(_b, ["title", "className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "svg",
+    __spreadProps(__spreadValues(__spreadValues({
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className
+    }, getIconA11yProps(title)), props), {
+      children: [
+        title ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("title", { children: title }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("g", { clipPath: "url(#clip0_check_circle)", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "path",
+          {
+            d: "M12 0C5.383 0 0 5.383 0 12C0 18.617 5.383 24 12 24C18.617 24 24 18.617 24 12C24 5.383 18.617 0 12 0ZM18.2 10.512L13.774 14.857C12.991 15.625 11.983 16.008 10.974 16.008C9.976 16.008 8.978 15.632 8.198 14.879L6.299 13.012C5.905 12.625 5.9 11.992 6.287 11.598C6.673 11.203 7.308 11.198 7.701 11.586L9.594 13.447C10.37 14.197 11.595 14.193 12.375 13.429L16.8 9.085C17.193 8.697 17.824 8.704 18.214 9.098C18.601 9.492 18.595 10.125 18.2 10.512Z",
+            fill: "currentColor"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("clipPath", { id: "clip0_check_circle", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("rect", { width: "24", height: "24", fill: "white" }) }) })
+      ]
+    })
+  );
+};
+CheckCircleIcon.displayName = "CheckCircleIcon";
+
+// src/primitives/icon/svg/chevron-down.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var ChevronDownIcon = (_a) => {
+  var _b = _a, { title, className } = _b, props = __objRest(_b, ["title", "className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    "svg",
+    __spreadProps(__spreadValues(__spreadValues({
+      viewBox: "0 0 14 14",
+      className,
+      fill: "none"
+    }, getIconA11yProps(title)), props), {
+      children: [
+        title ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("title", { children: title }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "path",
+          {
+            d: "M3.25 5.25L7 9L10.75 5.25",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ]
+    })
+  );
+};
+ChevronDownIcon.displayName = "ChevronDownIcon";
+
+// src/primitives/icon/svg/chevron-right.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var ChevronRightIcon = (_a) => {
+  var _b = _a, { title, className } = _b, props = __objRest(_b, ["title", "className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    "svg",
+    __spreadProps(__spreadValues(__spreadValues({
+      viewBox: "0 0 16 16",
+      className,
+      fill: "none"
+    }, getIconA11yProps(title)), props), {
+      children: [
+        title ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("title", { children: title }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "path",
+          {
+            d: "M10.2665 6.56563L7.20654 3.50563C7.08163 3.38146 6.91266 3.31177 6.73653 3.31177C6.56041 3.31177 6.39144 3.38146 6.26653 3.50563C6.20405 3.5676 6.15445 3.64134 6.12061 3.72258C6.08676 3.80382 6.06934 3.89095 6.06934 3.97896C6.06934 4.06697 6.08676 4.15411 6.12061 4.23535C6.15445 4.31659 6.20405 4.39032 6.26653 4.4523L9.3332 7.50563C9.39569 7.5676 9.44528 7.64134 9.47913 7.72258C9.51298 7.80382 9.5304 7.89095 9.5304 7.97896C9.5304 8.06697 9.51298 8.15411 9.47913 8.23535C9.44528 8.31659 9.39569 8.39032 9.3332 8.4523L6.26653 11.5056C6.141 11.6303 6.07012 11.7997 6.0695 11.9766C6.06887 12.1535 6.13855 12.3234 6.2632 12.449C6.38785 12.5745 6.55727 12.6454 6.73418 12.646C6.91109 12.6466 7.081 12.5769 7.20654 12.4523L10.2665 9.3923C10.6411 9.0173 10.8514 8.50896 10.8514 7.97896C10.8514 7.44896 10.6411 6.94063 10.2665 6.56563Z",
+            fill: "currentColor"
+          }
+        )
+      ]
+    })
+  );
+};
+ChevronRightIcon.displayName = "ChevronRightIcon";
+
+// src/primitives/icon/svg/chevron-up.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var ChevronUpIcon = (_a) => {
+  var _b = _a, { title, className } = _b, props = __objRest(_b, ["title", "className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    "svg",
+    __spreadProps(__spreadValues(__spreadValues({
+      viewBox: "0 0 14 14",
+      className,
+      fill: "none"
+    }, getIconA11yProps(title)), props), {
+      children: [
+        title ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("title", { children: title }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          "path",
+          {
+            d: "M3.25 8.75L7 5L10.75 8.75",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ]
+    })
+  );
+};
+ChevronUpIcon.displayName = "ChevronUpIcon";
+
+// src/primitives/icon/svg/close.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var CloseIcon = (_a) => {
+  var _b = _a, { title, className } = _b, props = __objRest(_b, ["title", "className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    "svg",
+    __spreadProps(__spreadValues(__spreadValues({
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className
+    }, getIconA11yProps(title)), props), {
+      children: [
+        title ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("title", { children: title }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          "path",
+          {
+            d: "M12 4L4 12M4 4l8 8",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ]
+    })
+  );
+};
+CloseIcon.displayName = "CloseIcon";
+
+// src/primitives/icon/svg/create-account.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var CreateAccountIcon = (_a) => {
+  var _b = _a, { title, className } = _b, props = __objRest(_b, ["title", "className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    "svg",
+    __spreadProps(__spreadValues(__spreadValues({
+      width: "28",
+      height: "28",
+      viewBox: "0 0 28 28",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className
+    }, getIconA11yProps(title)), props), {
+      children: [
+        title ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("title", { children: title }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("g", { clipPath: "url(#clip0_create_account)", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          "path",
+          {
+            d: "M22.1667 4.66667V0.583333C22.1667 0.261333 22.428 0 22.75 0C23.072 0 23.3333 0.261333 23.3333 0.583333V4.66667H27.4167C27.7387 4.66667 28 4.928 28 5.25C28 5.572 27.7387 5.83333 27.4167 5.83333H23.3333V9.91667C23.3333 10.2387 23.072 10.5 22.75 10.5C22.428 10.5 22.1667 10.2387 22.1667 9.91667V5.83333H18.0833C17.7613 5.83333 17.5 5.572 17.5 5.25C17.5 4.928 17.7613 4.66667 18.0833 4.66667H22.1667ZM18.6667 11.6667C18.6667 14.2403 16.5737 16.3333 14 16.3333C11.4263 16.3333 9.33333 14.2403 9.33333 11.6667C9.33333 9.093 11.4263 7 14 7C16.5737 7 18.6667 9.093 18.6667 11.6667ZM17.5 11.6667C17.5 9.737 15.9297 8.16667 14 8.16667C12.0703 8.16667 10.5 9.737 10.5 11.6667C10.5 13.5963 12.0703 15.1667 14 15.1667C15.9297 15.1667 17.5 13.5963 17.5 11.6667ZM27.3922 9.90617C27.7958 11.2292 28 12.6058 28 14C28 21.7198 21.7198 28 14 28C6.28017 28 0 21.7198 0 14C0 6.28017 6.28017 0 14 0C15.4548 0 16.8898 0.221667 18.2607 0.660333C18.5675 0.758333 18.7367 1.08617 18.6387 1.393C18.5395 1.69983 18.2105 1.87017 17.9048 1.771C16.6483 1.36967 15.3335 1.1655 13.9988 1.1655C6.92417 1.16667 1.16667 6.92417 1.16667 14C1.16667 18.5197 3.521 22.4933 7.063 24.78C7.5005 21.3383 10.4417 18.6667 14 18.6667C17.5583 18.6667 20.4995 21.3383 20.937 24.78C24.4778 22.4933 26.8333 18.5197 26.8333 14C26.8333 12.7213 26.6467 11.459 26.2757 10.2468C26.1823 9.93883 26.355 9.61217 26.6642 9.51883C26.9722 9.422 27.2977 9.59933 27.3922 9.90617ZM14 26.8333C16.0918 26.8333 18.0623 26.32 19.8088 25.4287C19.6805 22.3253 17.1348 19.8333 14 19.8333C10.8652 19.8333 8.31833 22.3242 8.19117 25.4287C9.93767 26.32 11.9082 26.8333 14 26.8333Z",
+            fill: "currentColor"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("clipPath", { id: "clip0_create_account", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("rect", { width: "28", height: "28", fill: "white" }) }) })
+      ]
+    })
+  );
+};
+CreateAccountIcon.displayName = "CreateAccountIcon";
+
+// src/primitives/icon/svg/disconnect.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var DisconnectIcon = (_a) => {
+  var _b = _a, { title, className } = _b, props = __objRest(_b, ["title", "className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    "svg",
+    __spreadProps(__spreadValues(__spreadValues({
+      viewBox: "0 0 16 16",
+      className,
+      fill: "none"
+    }, getIconA11yProps(title)), props), {
+      children: [
+        title ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("title", { children: title }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "path",
+          {
+            d: "M6.5 3H4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h2.5",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "path",
+          {
+            d: "M9.5 5.5 12 8m0 0-2.5 2.5M12 8H6",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ]
+    })
+  );
+};
+DisconnectIcon.displayName = "DisconnectIcon";
+
+// src/primitives/icon/svg/download.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var DownloadIcon = (_a) => {
+  var _b = _a, { title, className } = _b, props = __objRest(_b, ["title", "className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    "svg",
+    __spreadProps(__spreadValues(__spreadValues({
+      viewBox: "0 0 16 16",
+      className,
+      fill: "none"
+    }, getIconA11yProps(title)), props), {
+      children: [
+        title ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("title", { children: title }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          "path",
+          {
+            d: "M8 2.5v7m0 0 2.5-2.5M8 9.5 5.5 7",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M2.5 12.5h11", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+      ]
+    })
+  );
+};
+DownloadIcon.displayName = "DownloadIcon";
+
+// src/primitives/icon/svg/dots-horizontal.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var DotsHorizontalIcon = (_a) => {
+  var _b = _a, { title, className } = _b, props = __objRest(_b, ["title", "className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    "svg",
+    __spreadProps(__spreadValues(__spreadValues({
+      viewBox: "0 0 16 16",
+      className,
+      fill: "none"
+    }, getIconA11yProps(title)), props), {
+      children: [
+        title ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("title", { children: title }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("circle", { cx: "3.5", cy: "8", r: "1.25", fill: "currentColor" }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("circle", { cx: "8", cy: "8", r: "1.25", fill: "currentColor" }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("circle", { cx: "12.5", cy: "8", r: "1.25", fill: "currentColor" })
+      ]
+    })
+  );
+};
+DotsHorizontalIcon.displayName = "DotsHorizontalIcon";
+
+// src/primitives/icon/svg/link-accounts.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var LinkAccountsIcon = (_a) => {
+  var _b = _a, { title, className } = _b, props = __objRest(_b, ["title", "className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    "svg",
+    __spreadProps(__spreadValues(__spreadValues({
+      width: "28",
+      height: "28",
+      viewBox: "0 0 28 28",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className
+    }, getIconA11yProps(title)), props), {
+      children: [
+        title ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("title", { children: title }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("g", { clipPath: "url(#clip0_link_accounts)", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          "path",
+          {
+            d: "M28 18.0835C28 22.2648 24.598 25.6668 20.4167 25.6668H14.5833C10.402 25.6668 7 22.2648 7 18.0835C7 13.9022 10.402 10.5002 14.5833 10.5002H16.9167C17.2387 10.5002 17.5 10.7615 17.5 11.0835C17.5 11.4055 17.2387 11.6668 16.9167 11.6668H14.5833C11.0448 11.6668 8.16667 14.5462 8.16667 18.0835C8.16667 21.6208 11.0448 24.5002 14.5833 24.5002H20.4167C23.9552 24.5002 26.8333 21.6208 26.8333 18.0835C26.8333 15.7992 25.6037 13.67 23.625 12.5243C23.3462 12.3633 23.2505 12.0063 23.4127 11.7275C23.5725 11.4487 23.9283 11.3507 24.2095 11.514C26.5475 12.8662 28.0012 15.3827 28.0012 18.0823L28 18.0835ZM4.375 15.476C2.39517 14.3315 1.16667 12.2012 1.16667 9.91683C1.16667 6.3795 4.04483 3.50016 7.58333 3.50016H13.4167C16.9552 3.50016 19.8333 6.3795 19.8333 9.91683C19.8333 13.4542 16.9552 16.3335 13.4167 16.3335H11.0833C10.7613 16.3335 10.5 16.5948 10.5 16.9168C10.5 17.2388 10.7613 17.5002 11.0833 17.5002H13.4167C17.598 17.5002 21 14.0982 21 9.91683C21 5.7355 17.598 2.3335 13.4167 2.3335H7.58333C3.402 2.3335 0 5.7355 0 9.91683C0 12.6153 1.4525 15.133 3.79167 16.4852C4.0705 16.6462 4.4275 16.5517 4.5885 16.2717C4.75067 15.994 4.655 15.6358 4.37617 15.4748L4.375 15.476Z",
+            fill: "currentColor"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("clipPath", { id: "clip0_link_accounts", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("rect", { width: "28", height: "28", fill: "white" }) }) })
+      ]
+    })
+  );
+};
+LinkAccountsIcon.displayName = "LinkAccountsIcon";
+
+// src/primitives/icon/svg/profile.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var ProfileIcon = (_a) => {
+  var _b = _a, { title, className } = _b, props = __objRest(_b, ["title", "className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+    "svg",
+    __spreadProps(__spreadValues(__spreadValues({
+      viewBox: "0 0 16 16",
+      className,
+      fill: "none"
+    }, getIconA11yProps(title)), props), {
+      children: [
+        title ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("title", { children: title }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          "path",
+          {
+            d: "M8 8.25a2.75 2.75 0 1 0 0-5.5 2.75 2.75 0 0 0 0 5.5Z",
+            stroke: "currentColor",
+            strokeWidth: "1.5"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          "path",
+          {
+            d: "M3 13.5a5 5 0 0 1 10 0",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round"
+          }
+        )
+      ]
+    })
+  );
+};
+ProfileIcon.displayName = "ProfileIcon";
+
+// src/primitives/icon/svg/revenue-alt.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var RevenueAltIcon = (_a) => {
+  var _b = _a, { title, className } = _b, props = __objRest(_b, ["title", "className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+    "svg",
+    __spreadProps(__spreadValues(__spreadValues({
+      viewBox: "0 0 20 20",
+      className,
+      fill: "none"
+    }, getIconA11yProps(title)), props), {
+      children: [
+        title ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("title", { children: title }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          "path",
+          {
+            d: "M3 14V6M3 6L1.5 7.5M3 6L4.5 7.5M17 6V14M17 14L15.5 12.5M17 14L18.5 12.5",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          "path",
+          {
+            d: "M10 5.5V14.5M12.5 7.4C12.5 6.55 11.38 5.86 10 5.86C8.62 5.86 7.5 6.55 7.5 7.4C7.5 8.25 8.62 8.94 10 8.94C11.38 8.94 12.5 9.63 12.5 10.48C12.5 11.33 11.38 12.02 10 12.02C8.62 12.02 7.5 11.33 7.5 10.48",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ]
+    })
+  );
+};
+RevenueAltIcon.displayName = "RevenueAltIcon";
+
+// src/primitives/icon/svg/search.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var SearchIcon = (_a) => {
+  var _b = _a, { title, className } = _b, props = __objRest(_b, ["title", "className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+    "svg",
+    __spreadProps(__spreadValues(__spreadValues({
+      viewBox: "0 0 16 16",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className
+    }, getIconA11yProps(title)), props), {
+      children: [
+        title ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("title", { children: title }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          "path",
+          {
+            d: "M7.3335 12.3333C10.0949 12.3333 12.3335 10.0947 12.3335 7.33329C12.3335 4.57187 10.0949 2.33329 7.3335 2.33329C4.57208 2.33329 2.3335 4.57187 2.3335 7.33329C2.3335 10.0947 4.57208 12.3333 7.3335 12.3333Z",
+            stroke: "currentColor",
+            strokeWidth: "1.3",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          "path",
+          {
+            d: "M13.6668 13.6666L11.1667 11.1666",
+            stroke: "currentColor",
+            strokeWidth: "1.3",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ]
+    })
+  );
+};
+SearchIcon.displayName = "SearchIcon";
+
+// src/primitives/icon/svg/shield-trust.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var ShieldTrustIcon = (_a) => {
+  var _b = _a, { title, className } = _b, props = __objRest(_b, ["title", "className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+    "svg",
+    __spreadProps(__spreadValues(__spreadValues({
+      viewBox: "0 0 16 16",
+      className,
+      fill: "none"
+    }, getIconA11yProps(title)), props), {
+      children: [
+        title ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("title", { children: title }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          "path",
+          {
+            d: "M8 1.25L13.5 3.25V7.08C13.5 10.09 11.62 12.74 8 14.75C4.38 12.74 2.5 10.09 2.5 7.08V3.25L8 1.25Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          "path",
+          {
+            d: "M5.5 8.2L7.2 9.9L10.8 6.3",
+            stroke: "white",
+            strokeWidth: "1.4",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ]
+    })
+  );
+};
+ShieldTrustIcon.displayName = "ShieldTrustIcon";
+
+// src/primitives/icon/svg/stay-in-control.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var StayInControlIcon = (_a) => {
+  var _b = _a, { title, className } = _b, props = __objRest(_b, ["title", "className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+    "svg",
+    __spreadProps(__spreadValues(__spreadValues({
+      width: "28",
+      height: "28",
+      viewBox: "0 0 28 28",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className
+    }, getIconA11yProps(title)), props), {
+      children: [
+        title ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("title", { children: title }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("g", { clipPath: "url(#clip0_stay_in_control)", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            "path",
+            {
+              d: "M14 27.9406C13.9102 27.9406 13.8215 27.9196 13.7387 27.8788L13.2428 27.6314C10.6832 26.3504 2.32983 21.5753 2.32983 13.8648L2.33217 7.62776C2.33217 5.36093 3.77767 3.35776 5.93017 2.64493L13.8168 0.0292617C13.9358 -0.010405 14.0653 -0.010405 14.1832 0.0292617L22.0687 2.64376C24.2212 3.35776 25.6667 5.36093 25.6667 7.6266L25.6632 13.8636C25.6632 22.6113 17.2958 26.6584 14.7315 27.6909L14.217 27.8974C14.147 27.9254 14.0723 27.9394 13.9988 27.9394L14 27.9406ZM14 1.19826L6.29767 3.7521C4.6235 4.30743 3.5 5.86493 3.5 7.62776L3.49767 13.8648C3.49767 20.9056 11.3563 25.3844 13.7655 26.5884L14.0268 26.7191L14.2975 26.6106C16.6903 25.6481 24.4977 21.8833 24.4977 13.8659L24.5012 7.62893C24.5012 5.8661 23.3765 4.3086 21.7035 3.75326L14 1.19826Z",
+              fill: "currentColor"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            "path",
+            {
+              d: "M12.8112 17.5001C12.0633 17.5001 11.3155 17.2154 10.7462 16.6461L7.18083 13.2569C6.94749 13.0352 6.93816 12.6654 7.15983 12.4321C7.38149 12.1999 7.75016 12.1894 7.98466 12.4111L11.5605 15.8107C12.2535 16.5026 13.363 16.5037 14.0455 15.8212L20.5928 9.49791C20.8262 9.27508 21.196 9.28208 21.4177 9.51308C21.6417 9.74408 21.6358 10.1139 21.4037 10.3379L14.8622 16.6542C14.2987 17.2177 13.5543 17.5012 12.81 17.5012L12.8112 17.5001Z",
+              fill: "currentColor"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("clipPath", { id: "clip0_stay_in_control", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("rect", { width: "28", height: "28", fill: "white" }) }) })
+      ]
+    })
+  );
+};
+StayInControlIcon.displayName = "StayInControlIcon";
+
+// src/primitives/icon/svg/triangle-down.tsx
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var TriangleDownIcon = (_a) => {
+  var _b = _a, { title, className } = _b, props = __objRest(_b, ["title", "className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+    "svg",
+    __spreadProps(__spreadValues(__spreadValues({
+      viewBox: "0 0 8 8",
+      className,
+      fill: "none"
+    }, getIconA11yProps(title)), props), {
+      children: [
+        title ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("title", { children: title }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("g", { transform: "scale(1,-1) translate(0,-8)", clipPath: "url(#triangle_up)", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            "path",
+            {
+              d: "M3.99989 1.6805L6.23917 6.72896H1.76061L3.99989 1.6805ZM3.99989 0.366097C3.87788 0.36535 3.75832 0.400347 3.65596 0.466768C3.55361 0.53319 3.47295 0.628129 3.42393 0.739866L0.362237 7.63838H7.63755L4.57737 0.739866C4.52825 0.62789 4.44735 0.532789 4.3447 0.46635C4.24205 0.39991 4.12216 0.365052 3.99989 0.366097Z",
+              fill: "currentColor"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            "path",
+            {
+              d: "M4.00167 0.00284122C4.19344 0.00214978 4.38147 0.0566837 4.54252 0.160923C4.70445 0.265758 4.83154 0.416026 4.90931 0.592539L7.9697 7.4913L8.19705 8.00195H-0.197266L3.09048 0.593427C3.16804 0.41669 3.29625 0.26688 3.45815 0.161811C3.61872 0.0576301 3.80589 0.00261591 3.99723 0.00284122H3.99989L4.00256 0.00195312L4.00167 0.00284122ZM3.99989 0.366097C3.87788 0.36535 3.75832 0.400347 3.65596 0.466768L3.58337 0.521491C3.51516 0.581467 3.46071 0.656022 3.42393 0.739866L0.362237 7.63838H7.63755L4.57737 0.739866C4.54053 0.655873 4.48567 0.581521 4.4173 0.521491L4.3447 0.46635C4.24205 0.39991 4.12216 0.365052 3.99989 0.366097ZM6.23917 6.72896H1.76061L3.99989 1.6805L6.23917 6.72896ZM2.31961 6.36519H5.68018L3.99989 2.57655L2.31961 6.36519Z",
+              fill: "currentColor"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("clipPath", { id: "triangle_up", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("rect", { width: "8", height: "8", fill: "white" }) }) })
+      ]
+    })
+  );
+};
+TriangleDownIcon.displayName = "TriangleDownIcon";
+
+// src/primitives/icon/svg/triangle-up.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var TriangleUpIcon = (_a) => {
+  var _b = _a, { title, className } = _b, props = __objRest(_b, ["title", "className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+    "svg",
+    __spreadProps(__spreadValues(__spreadValues({
+      viewBox: "0 0 8 8",
+      className,
+      fill: "none"
+    }, getIconA11yProps(title)), props), {
+      children: [
+        title ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("title", { children: title }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("g", { clipPath: "url(#triangle_up)", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            "path",
+            {
+              d: "M3.99989 1.6805L6.23917 6.72896H1.76061L3.99989 1.6805ZM3.99989 0.366097C3.87788 0.36535 3.75832 0.400347 3.65596 0.466768C3.55361 0.53319 3.47295 0.628129 3.42393 0.739866L0.362237 7.63838H7.63755L4.57737 0.739866C4.52825 0.62789 4.44735 0.532789 4.3447 0.46635C4.24205 0.39991 4.12216 0.365052 3.99989 0.366097Z",
+              fill: "currentColor"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            "path",
+            {
+              d: "M4.00167 0.00284122C4.19344 0.00214978 4.38147 0.0566837 4.54252 0.160923C4.70445 0.265758 4.83154 0.416026 4.90931 0.592539L7.9697 7.4913L8.19705 8.00195H-0.197266L3.09048 0.593427C3.16804 0.41669 3.29625 0.26688 3.45815 0.161811C3.61872 0.0576301 3.80589 0.00261591 3.99723 0.00284122H3.99989L4.00256 0.00195312L4.00167 0.00284122ZM3.99989 0.366097C3.87788 0.36535 3.75832 0.400347 3.65596 0.466768L3.58337 0.521491C3.51516 0.581467 3.46071 0.656022 3.42393 0.739866L0.362237 7.63838H7.63755L4.57737 0.739866C4.54053 0.655873 4.48567 0.581521 4.4173 0.521491L4.3447 0.46635C4.24205 0.39991 4.12216 0.365052 3.99989 0.366097ZM6.23917 6.72896H1.76061L3.99989 1.6805L6.23917 6.72896ZM2.31961 6.36519H5.68018L3.99989 2.57655L2.31961 6.36519Z",
+              fill: "currentColor"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("clipPath", { id: "triangle_up", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("rect", { width: "8", height: "8", fill: "white" }) }) })
+      ]
+    })
+  );
+};
+TriangleUpIcon.displayName = "TriangleUpIcon";
+
+// src/primitives/icon/svg/upload.tsx
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var UploadIcon = (_a) => {
+  var _b = _a, { title, className } = _b, props = __objRest(_b, ["title", "className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+    "svg",
+    __spreadProps(__spreadValues(__spreadValues({
+      viewBox: "0 0 16 16",
+      className,
+      fill: "none"
+    }, getIconA11yProps(title)), props), {
+      children: [
+        title ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("title", { children: title }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          "path",
+          {
+            d: "M8 13.5v-7m0 0 2.5 2.5M8 6.5 5.5 9",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("path", { d: "M2.5 3.5h11", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+      ]
+    })
+  );
+};
+UploadIcon.displayName = "UploadIcon";
+
+// src/primitives/icon/svg/wallet-avatar.tsx
+var import_jsx_runtime24 = require("react/jsx-runtime");
+function WalletAvatarIcon(_a) {
+  var _b = _a, { title, className } = _b, props = __objRest(_b, ["title", "className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+    "svg",
+    __spreadProps(__spreadValues(__spreadValues({
+      fill: "none",
+      className,
+      viewBox: "0 0 16 16"
+    }, getIconA11yProps(title)), props), {
+      children: [
+        title ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("title", { children: title }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("circle", { cx: "8", cy: "5.25", r: "2.25", fill: "currentColor" }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("path", { d: "M3.75 12.75a4.25 4.25 0 0 1 8.5 0v.25h-8.5v-.25Z", fill: "currentColor" })
+      ]
+    })
+  );
+}
+WalletAvatarIcon.displayName = "WalletAvatarIcon";
+
+// src/primitives/icon/svg/warning.tsx
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var WarningIcon = (_a) => {
+  var _b = _a, { title, className } = _b, props = __objRest(_b, ["title", "className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+    "svg",
+    __spreadProps(__spreadValues(__spreadValues({
+      width: "14",
+      height: "14",
+      viewBox: "0 0 14 14",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className
+    }, getIconA11yProps(title)), props), {
+      children: [
+        title ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("title", { children: title }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("g", { clipPath: "url(#clip0_warning)", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          "path",
+          {
+            d: "M6.41665 8.16675V4.66675C6.41665 4.34591 6.67915 4.08341 6.99998 4.08341C7.32082 4.08341 7.58332 4.34591 7.58332 4.66675V8.16675C7.58332 8.48758 7.32082 8.75008 6.99998 8.75008C6.67915 8.75008 6.41665 8.48758 6.41665 8.16675ZM6.99998 9.33341C6.51582 9.33341 6.12498 9.72425 6.12498 10.2084C6.12498 10.6926 6.51582 11.0834 6.99998 11.0834C7.48415 11.0834 7.87498 10.6926 7.87498 10.2084C7.87498 9.72425 7.48415 9.33341 6.99998 9.33341ZM13.755 12.1801C13.3467 12.9676 12.4892 13.4167 11.4158 13.4167H2.58998C1.51082 13.4167 0.659151 12.9676 0.250818 12.1801C-0.163348 11.3867 -0.0466818 10.3717 0.542485 9.52008L5.23248 2.10008C5.64665 1.50508 6.29998 1.16675 6.99998 1.16675C7.69999 1.16675 8.35332 1.50508 8.74998 2.08258L13.4633 9.53175C14.0525 10.3834 14.1633 11.3926 13.7492 12.1801H13.755ZM12.5008 10.1851C12.5008 10.1851 12.4892 10.1734 12.4892 10.1617L7.78165 2.72425C7.61248 2.48508 7.32082 2.33341 6.99998 2.33341C6.67915 2.33341 6.38749 2.48508 6.20665 2.74758L1.51082 10.1617C1.14915 10.6751 1.06748 11.2351 1.27748 11.6376C1.48165 12.0342 1.94832 12.2501 2.58415 12.2501H11.4042C12.04 12.2501 12.5067 12.0342 12.7108 11.6376C12.9208 11.2351 12.8392 10.6751 12.495 10.1851H12.5008Z",
+            fill: "currentColor"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("clipPath", { id: "clip0_warning", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("rect", { width: "14", height: "14", fill: "white" }) }) })
+      ]
+    })
+  );
+};
+WarningIcon.displayName = "WarningIcon";
+
+// src/primitives/icon/registry.ts
+var iconRegistry = {
+  "arrow-trend-up": ArrowTrendUpIcon,
+  "arrows-to-dot": ArrowsToDotIcon,
+  "best-prices": BestPricesIcon,
+  "check-circle": CheckCircleIcon,
+  "chevron-down": ChevronDownIcon,
+  "chevron-right": ChevronRightIcon,
+  "chevron-up": ChevronUpIcon,
+  close: CloseIcon,
+  "create-account": CreateAccountIcon,
+  disconnect: DisconnectIcon,
+  download: DownloadIcon,
+  "dots-horizontal": DotsHorizontalIcon,
+  "link-accounts": LinkAccountsIcon,
+  profile: ProfileIcon,
+  "revenue-alt": RevenueAltIcon,
+  search: SearchIcon,
+  "shield-trust": ShieldTrustIcon,
+  "stay-in-control": StayInControlIcon,
+  "triangle-down": TriangleDownIcon,
+  "triangle-up": TriangleUpIcon,
+  upload: UploadIcon,
+  "wallet-avatar": WalletAvatarIcon,
+  warning: WarningIcon
+};
+var iconNames = Object.keys(iconRegistry);
+
+// src/primitives/icon/icon.utils.ts
+var resolveIconStyle = (color, style) => {
+  if (!color)
+    return style;
+  return __spreadProps(__spreadValues({}, style), {
+    color
+  });
+};
+
+// src/primitives/icon/index.tsx
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var Icon = (_a) => {
+  var _b = _a, {
+    name,
+    color,
+    size = "m",
+    className = "text-agg-primary",
+    style
+  } = _b, props = __objRest(_b, [
+    "name",
+    "color",
+    "size",
+    "className",
+    "style"
+  ]);
+  const Component = iconRegistry[name];
+  const resolvedStyle = resolveIconStyle(color, style);
+  const resolvedClassName = cn(iconSizeClasses[size], className);
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Component, __spreadValues({ color, className: resolvedClassName, style: resolvedStyle }, props));
+};
+Icon.displayName = "Icon";
+
+// src/primitives/skeleton/views/event-list-skeleton-view.tsx
+var import_hooks5 = require("@agg-market/hooks");
+
+// src/primitives/skeleton/skeleton-block.tsx
+var import_hooks3 = require("@agg-market/hooks");
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var SkeletonBlock = ({ className }) => {
+  const { enableAnimations } = (0, import_hooks3.useSdkUiConfig)();
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    "div",
+    {
+      "aria-hidden": true,
+      className: cn(
+        "bg-agg-separator",
+        getMotionClassName(enableAnimations, "animate-pulse"),
+        className
+      )
+    }
+  );
+};
+SkeletonBlock.displayName = "SkeletonBlock";
+
+// src/primitives/skeleton/views/event-list-item-skeleton-view.tsx
+var import_hooks4 = require("@agg-market/hooks");
+
+// src/events/item/event-list-item.constants.ts
+var baseCardClassName = "gap-3 overflow-hidden p-5 w-full";
+
+// src/primitives/skeleton/views/event-list-item-skeleton-view.tsx
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var EventListItemSkeletonView = ({
+  className,
+  ariaLabel,
+  isStandalone = false
+}) => {
+  const labels = (0, import_hooks4.useLabels)();
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+    Card,
+    {
+      className: cn(baseCardClassName, className),
+      role: isStandalone ? "status" : void 0,
+      "aria-label": isStandalone ? ariaLabel != null ? ariaLabel : labels.eventItem.loading : void 0,
+      "aria-busy": isStandalone || void 0,
+      "aria-hidden": isStandalone ? void 0 : true,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex w-full items-start gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SkeletonBlock, { className: "h-10 w-10 rounded-agg-lg" }),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-1 flex-col gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SkeletonBlock, { className: "h-5 w-[82%] rounded-agg-sm" }),
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SkeletonBlock, { className: "h-5 w-[68%] rounded-agg-sm" })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex flex-col gap-3", children: [0, 1].map((index) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+          "div",
+          {
+            className: "grid w-full grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-3",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SkeletonBlock, { className: "h-4 rounded-agg-sm" }),
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SkeletonBlock, { className: "h-4 w-10 rounded-agg-sm" }),
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SkeletonBlock, { className: "h-9 w-[101px] rounded-agg-full" })
+            ]
+          },
+          index
+        )) }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center justify-between gap-2 text-agg-muted-foreground", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SkeletonBlock, { className: "h-4 w-36 rounded-agg-sm" }),
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SkeletonBlock, { className: "size-3 rounded-agg-full" }),
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SkeletonBlock, { className: "size-3 rounded-agg-full" }),
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SkeletonBlock, { className: "size-3 rounded-agg-full" })
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SkeletonBlock, { className: "h-4 w-20 rounded-agg-sm" })
+        ] })
+      ]
+    }
+  );
+};
+EventListItemSkeletonView.displayName = "EventListItemSkeletonView";
+
+// src/primitives/skeleton/views/event-list-skeleton-view.tsx
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var EventListSkeletonView = ({ className, ariaLabel }) => {
+  const labels = (0, import_hooks5.useLabels)();
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+    "section",
+    {
+      className: cn("flex w-full flex-col gap-5", className),
+      role: "status",
+      "aria-label": ariaLabel != null ? ariaLabel : labels.eventList.loading("events"),
+      "aria-busy": true,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("header", { className: "flex w-full flex-col items-start justify-between gap-2 md:flex-row md:flex-nowrap md:items-center md:gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(SkeletonBlock, { className: "h-7 w-40 rounded-agg-sm" }),
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex max-w-full gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(SkeletonBlock, { className: "h-10 w-20 rounded-agg-full" }),
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(SkeletonBlock, { className: "h-10 w-20 rounded-agg-full" }),
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(SkeletonBlock, { className: "h-10 w-24 rounded-agg-full" })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "grid grid-cols-1 gap-5 md:grid-cols-3", children: Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          EventListItemSkeletonView,
+          {
+            isStandalone: false,
+            className: "w-full min-w-0 max-w-none"
+          },
+          index
+        )) })
+      ]
+    }
+  );
+};
+EventListSkeletonView.displayName = "EventListSkeletonView";
+
+// src/primitives/skeleton/views/event-list-item-details-skeleton-view.tsx
+var import_hooks6 = require("@agg-market/hooks");
+
+// src/events/item-details/event-list-item-details.constants.ts
+var detailsBaseCardClassName = "w-full overflow-hidden gap-6 p-5 md:gap-8 md:p-10";
+
+// src/primitives/skeleton/views/event-list-item-details-skeleton-view.tsx
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var EventListItemDetailsSkeletonView = ({
+  className,
+  ariaLabel
+}) => {
+  const labels = (0, import_hooks6.useLabels)();
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+    Card,
+    {
+      className: cn(detailsBaseCardClassName, className),
+      role: "status",
+      "aria-label": ariaLabel != null ? ariaLabel : labels.eventItemDetails.loading,
+      "aria-busy": true,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex w-full items-start gap-3 md:gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SkeletonBlock, { className: "size-10 rounded-agg-lg md:size-[60px]" }),
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex flex-1 flex-col gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SkeletonBlock, { className: "h-5 w-[82%] rounded-agg-sm md:h-7 md:w-[55%]" }),
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex gap-2 overflow-hidden", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SkeletonBlock, { className: "h-8 w-28 rounded-agg-full" }),
+              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SkeletonBlock, { className: "h-8 w-28 rounded-agg-full" }),
+              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SkeletonBlock, { className: "h-8 w-28 rounded-agg-full" })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex flex-col gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SkeletonBlock, { className: "h-10 w-full rounded-agg-full md:w-[220px]" }),
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex gap-2 overflow-hidden", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SkeletonBlock, { className: "h-9 w-20 rounded-agg-full" }),
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SkeletonBlock, { className: "h-9 w-20 rounded-agg-full" }),
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SkeletonBlock, { className: "h-9 w-20 rounded-agg-full" }),
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SkeletonBlock, { className: "h-9 w-20 rounded-agg-full" })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "h-[300px] w-full rounded-agg-xl", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SkeletonBlock, { className: "h-full w-full rounded-agg-xl" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SkeletonBlock, { className: "h-5 w-24 rounded-agg-sm" }),
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SkeletonBlock, { className: "h-5 w-40 rounded-agg-sm" })
+        ] })
+      ]
+    }
+  );
+};
+EventListItemDetailsSkeletonView.displayName = "EventListItemDetailsSkeletonView";
+
+// src/primitives/skeleton/views/market-details-skeleton-view.tsx
+var import_hooks7 = require("@agg-market/hooks");
+
+// src/events/market-details/market-details.constants.ts
+var marketDetailsBaseCardClassName = "w-full overflow-hidden rounded-agg-lg border border-agg-separator bg-agg-secondary text-agg-foreground shadow-none hover:shadow-none";
+
+// src/primitives/skeleton/views/market-details-skeleton-view.tsx
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var MarketDetailsSkeletonView = ({
+  className,
+  ariaLabel,
+  isDetailed
+}) => {
+  const labels = (0, import_hooks7.useLabels)();
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+    Card,
+    {
+      className: cn(marketDetailsBaseCardClassName, className),
+      role: "status",
+      "aria-label": ariaLabel != null ? ariaLabel : labels.marketDetails.loading,
+      "aria-busy": true,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex flex-col gap-3 p-4 md:px-5 md:py-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex min-w-0 items-center gap-3 md:gap-4", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SkeletonBlock, { className: "size-12 rounded-agg-lg md:size-[60px]" }),
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex min-w-0 flex-col gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SkeletonBlock, { className: "h-6 w-40 rounded-agg-sm" }),
+                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SkeletonBlock, { className: "h-4 w-28 rounded-agg-sm" })
+              ] })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SkeletonBlock, { className: "h-8 w-16 rounded-agg-sm" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SkeletonBlock, { className: "h-10 flex-1 rounded-agg-full" }),
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SkeletonBlock, { className: "h-10 flex-1 rounded-agg-full" })
+          ] })
+        ] }),
+        isDetailed ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "h-px w-full bg-agg-separator" }),
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex h-14 items-end", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SkeletonBlock, { className: "h-full w-full rounded-none" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "h-px w-full bg-agg-separator" }),
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex flex-col gap-4 p-5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex flex-col gap-3", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SkeletonBlock, { className: "h-4 w-12 rounded-agg-sm" }),
+              [0, 1, 2, 3].map((index) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+                "div",
+                {
+                  className: "grid grid-cols-[52px_1fr_1fr_52px] items-center gap-2",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SkeletonBlock, { className: "h-4 rounded-agg-sm" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SkeletonBlock, { className: "h-4 rounded-agg-sm" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SkeletonBlock, { className: "h-4 rounded-agg-sm" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SkeletonBlock, { className: "h-2 rounded-agg-full" })
+                  ]
+                },
+                `ask-${index}`
+              ))
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex flex-col gap-3", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SkeletonBlock, { className: "h-4 w-12 rounded-agg-sm" }),
+              [0, 1, 2, 3].map((index) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+                "div",
+                {
+                  className: "grid grid-cols-[52px_1fr_1fr_52px] items-center gap-2",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SkeletonBlock, { className: "h-4 rounded-agg-sm" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SkeletonBlock, { className: "h-4 rounded-agg-sm" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SkeletonBlock, { className: "h-4 rounded-agg-sm" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SkeletonBlock, { className: "h-2 rounded-agg-full" })
+                  ]
+                },
+                `bid-${index}`
+              ))
+            ] })
+          ] })
+        ] }) : null
+      ]
+    }
+  );
+};
+MarketDetailsSkeletonView.displayName = "MarketDetailsSkeletonView";
+
+// src/primitives/skeleton/views/place-order-skeleton-view.tsx
+var import_jsx_runtime32 = 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_runtime32.jsxs)("div", { className: "flex flex-col gap-6 p-5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-start justify-between gap-5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SkeletonBlock, { className: "h-12 w-12 shrink-0 rounded-agg-lg" }),
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SkeletonBlock, { className: "h-5 w-[92%] rounded-agg-sm" }),
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SkeletonBlock, { className: "h-5 w-[80%] rounded-agg-sm" })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SkeletonBlock, { className: "h-6 w-6 rounded-agg-sm" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SkeletonBlock, { className: "h-5 w-28 rounded-agg-sm" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex h-11 items-end border-b border-agg-separator", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center gap-8", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SkeletonBlock, { className: "h-5 w-10 rounded-agg-sm" }),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SkeletonBlock, { className: "h-[3px] w-12 rounded-t-agg-sm" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SkeletonBlock, { className: "h-5 w-10 rounded-agg-sm" })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-col gap-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SkeletonBlock, { className: "h-11 flex-1 rounded-agg-full" }),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SkeletonBlock, { className: "h-11 flex-1 rounded-agg-full" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SkeletonBlock, { className: "h-6 w-20 rounded-agg-sm" }),
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SkeletonBlock, { className: "h-4 w-28 rounded-agg-sm" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SkeletonBlock, { className: "h-9 w-28 rounded-agg-sm" })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "rounded-agg-lg border border-agg-trade-highlight-border bg-agg-trade-highlight-surface p-3", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-col gap-3", children: [
+        [0, 1].map((index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-col gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SkeletonBlock, { className: "size-4 rounded-agg-full" }),
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SkeletonBlock, { className: "h-5 w-24 rounded-agg-sm" })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SkeletonBlock, { className: "h-5 w-10 rounded-agg-sm" })
+          ] }),
+          index === 0 ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "h-px w-full bg-agg-trade-highlight-border" }) : null
+        ] }, `place-order-route-${index}`)),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SkeletonBlock, { className: "mx-auto h-5 w-40 rounded-agg-sm" })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SkeletonBlock, { className: "h-4 w-36 rounded-agg-sm" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SkeletonBlock, { className: "h-6 w-20 rounded-agg-sm" }),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SkeletonBlock, { className: "h-4 w-24 rounded-agg-sm" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SkeletonBlock, { className: "h-9 w-36 rounded-agg-sm" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SkeletonBlock, { className: "h-4 w-[88%] self-center rounded-agg-sm" })
+  ] });
+};
+var PlaceOrderSkeletonView = ({
+  className,
+  ariaLabel
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    "div",
+    {
+      className: cn("w-full", className),
+      role: "status",
+      "aria-label": ariaLabel != null ? ariaLabel : "Loading place order",
+      "aria-busy": true,
+      children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex w-full items-end justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+        Card,
+        {
+          className: cn(
+            placeOrderCardClassName,
+            "w-full max-w-[400px] rounded-t-agg-xl rounded-b-none border-b-0"
+          ),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ContentBody, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "border-t border-agg-separator bg-agg-secondary p-4", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SkeletonBlock, { className: "h-12 w-full rounded-agg-full" }) })
+          ]
+        }
+      ) })
+    }
+  );
+};
+PlaceOrderSkeletonView.displayName = "PlaceOrderSkeletonView";
+
+// src/primitives/skeleton/views/settlement-skeleton-view.tsx
+var import_hooks8 = require("@agg-market/hooks");
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var SettlementSkeletonView = ({
+  className,
+  ariaLabel
+}) => {
+  const labels = (0, import_hooks8.useLabels)();
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+    Card,
+    {
+      className: cn(
+        "gap-5 rounded-agg-xl border border-agg-separator bg-agg-secondary p-5 shadow-none hover:shadow-none",
+        className
+      ),
+      role: "status",
+      "aria-label": ariaLabel != null ? ariaLabel : labels.trading.settlementLoading,
+      "aria-busy": true,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex flex-col gap-1 md:flex-row md:items-center md:justify-between md:gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SkeletonBlock, { className: "h-4 w-20 rounded-agg-sm" }),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SkeletonBlock, { className: "h-5 w-full max-w-80 rounded-agg-sm" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SkeletonBlock, { className: "h-5 w-52 rounded-agg-sm" }),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex flex-col gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SkeletonBlock, { className: "h-4 w-[88%] rounded-agg-sm" }),
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SkeletonBlock, { className: "h-4 w-[84%] rounded-agg-sm" }),
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SkeletonBlock, { className: "h-4 w-[80%] rounded-agg-sm" }),
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SkeletonBlock, { className: "h-4 w-[74%] rounded-agg-sm" })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "h-px w-full bg-agg-separator" }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex flex-col gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex flex-col gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SkeletonBlock, { className: "size-4 rounded-agg-full" }),
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SkeletonBlock, { className: "h-5 w-24 rounded-agg-sm" }),
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SkeletonBlock, { className: "h-4 w-4 rounded-agg-sm" })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex flex-col gap-2 pl-6", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SkeletonBlock, { className: "h-4 w-full rounded-agg-sm" }),
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SkeletonBlock, { className: "h-4 w-[92%] rounded-agg-sm" }),
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SkeletonBlock, { className: "h-4 w-[34%] rounded-agg-sm" })
+            ] })
+          ] }),
+          [0, 1, 2].map((index) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SkeletonBlock, { className: "size-4 rounded-agg-full" }),
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SkeletonBlock, { className: "h-5 w-20 rounded-agg-sm" }),
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SkeletonBlock, { className: "h-4 w-4 rounded-agg-sm" })
+          ] }, `settlement-venue-${index}`))
+        ] })
+      ]
+    }
+  );
+};
+SettlementSkeletonView.displayName = "SettlementSkeletonView";
+
+// src/primitives/skeleton/skeleton.types.ts
+var skeletonViews = {
+  eventListItem: "event-list-item",
+  eventListItemDetails: "event-list-item-details",
+  marketDetailsMinified: "market-details-minified",
+  marketDetailsDetailed: "market-details-detailed",
+  eventList: "event-list",
+  settlement: "settlement",
+  placeOrder: "place-order"
+};
+
+// src/primitives/skeleton/index.tsx
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var Skeleton = ({ view, className, ariaLabel }) => {
+  if (view === skeletonViews.eventListItem) {
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(EventListItemSkeletonView, { className, ariaLabel, isStandalone: true });
+  }
+  if (view === skeletonViews.eventListItemDetails) {
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(EventListItemDetailsSkeletonView, { className, ariaLabel });
+  }
+  if (view === skeletonViews.marketDetailsMinified) {
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(MarketDetailsSkeletonView, { className, ariaLabel, isDetailed: false });
+  }
+  if (view === skeletonViews.marketDetailsDetailed) {
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(MarketDetailsSkeletonView, { className, ariaLabel, isDetailed: true });
+  }
+  if (view === skeletonViews.settlement) {
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SettlementSkeletonView, { className, ariaLabel });
+  }
+  if (view === skeletonViews.placeOrder) {
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(PlaceOrderSkeletonView, { className, ariaLabel });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(EventListSkeletonView, { className, ariaLabel });
+};
+Skeleton.displayName = "Skeleton";
+
+// src/primitives/tabs/index.tsx
+var import_react = require("react");
+var import_hooks10 = require("@agg-market/hooks");
+var DropdownMenu = __toESM(require("@radix-ui/react-dropdown-menu"));
+
+// src/primitives/select/index.tsx
+var import_hooks9 = require("@agg-market/hooks");
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var Select = ({
+  items,
+  value,
+  onChange,
+  ariaLabel,
+  className,
+  disabled = false
+}) => {
+  const labels = (0, import_hooks9.useLabels)();
+  const { enableAnimations } = (0, import_hooks9.useSdkUiConfig)();
+  const hasEnabledItems = items.some((item) => !item.disabled);
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("label", { className: cn("relative inline-flex w-full", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      "select",
+      {
+        "aria-label": ariaLabel != null ? ariaLabel : labels.common.selectAria,
+        className: cn(
+          "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"
+          ),
+          "focus:border-agg-primary focus:ring-2 focus:ring-agg-primary/15",
+          "disabled:cursor-not-allowed disabled:opacity-60"
+        ),
+        disabled: disabled || !hasEnabledItems,
+        value,
+        onChange: (event) => onChange(event.target.value),
+        children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("option", { value: item.value, disabled: item.disabled, children: item.label }, item.value))
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime35.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_runtime35.jsx)(Icon, { name: "chevron-down", size: "s", color: "currentColor" }) })
+  ] });
+};
+Select.displayName = "Select";
+
+// src/primitives/tabs/tabs.utils.ts
+var findNextEnabledIndex = (items, startIndex, direction) => {
+  var _a;
+  if (items.length === 0)
+    return -1;
+  for (let step = 1; step <= items.length; step += 1) {
+    const nextIndex = (startIndex + direction * step + items.length) % items.length;
+    if (!((_a = items[nextIndex]) == null ? void 0 : _a.disabled))
+      return nextIndex;
+  }
+  return -1;
+};
+var findEdgeEnabledIndex = (items, direction) => {
+  var _a;
+  if (direction === 1) {
+    return items.findIndex((item) => !item.disabled);
+  }
+  for (let index = items.length - 1; index >= 0; index -= 1) {
+    if (!((_a = items[index]) == null ? void 0 : _a.disabled))
+      return index;
+  }
+  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_runtime36 = require("react/jsx-runtime");
+var mobileTabsMediaQuery = "(max-width: 767px)";
+var getTabButtonClassName = ({
+  enableAnimations,
+  isBarVariant,
+  isActive,
+  isDisabled,
+  size
+}) => {
+  const isSmall = size === "s";
+  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 ? 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"
+    ) : cn(isSmall ? "px-4 text-agg-sm leading-agg-5" : "px-5 text-agg-base leading-agg-6"),
+    isBarVariant && isActive && "font-agg-bold text-agg-primary",
+    isBarVariant && !isActive && "font-agg-normal text-agg-foreground",
+    !isBarVariant && isActive && "font-agg-bold text-agg-primary",
+    !isBarVariant && !isActive && "font-agg-normal text-agg-foreground",
+    isDisabled && "cursor-not-allowed opacity-60"
+  );
+};
+var getMeasureTabClassName = ({
+  isBarVariant,
+  size
+}) => {
+  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_hooks10.useLabels)();
+  const { enableAnimations, rootClassName } = (0, import_hooks10.useSdkUiConfig)();
+  const buttonRefs = (0, import_react.useRef)([]);
+  const dragStateRef = (0, import_react.useRef)({
+    isPointerDown: false,
+    isDragging: false,
+    pointerId: null,
+    startClientX: 0,
+    startClientY: 0,
+    startScrollLeft: 0
+  });
+  const suppressClickRef = (0, import_react.useRef)(false);
+  const resolvedAriaLabel = ariaLabel != null ? ariaLabel : labels.common.tabsAria;
+  const resolvedOverflowMenuAriaLabel = overflowMenuAriaLabel != null ? overflowMenuAriaLabel : labels.common.hiddenTabsAria;
+  const [isMoreMenuOpen, setIsMoreMenuOpen] = (0, import_react.useState)(false);
+  const [isMobileViewport, setIsMobileViewport] = (0, import_react.useState)(false);
+  const [isDraggingTabs, setIsDraggingTabs] = (0, import_react.useState)(false);
+  const [activeUnderlineStyle, setActiveUnderlineStyle] = (0, import_react.useState)({
+    transform: "translateX(0px)",
+    width: 0,
+    opacity: 0
+  });
+  const [overflowLayout, setOverflowLayout] = (0, import_react.useState)({
+    visibleItems: items,
+    hiddenItems: []
+  });
+  const [scrollAffordanceState, setScrollAffordanceState] = (0, import_react.useState)({
+    showStart: false,
+    showEnd: false
+  });
+  const containerRef = (0, import_react.useRef)(null);
+  const tabListRef = (0, import_react.useRef)(null);
+  const moreButtonMeasureRef = (0, import_react.useRef)(null);
+  const tabMeasureRefs = (0, import_react.useRef)(/* @__PURE__ */ new Map());
+  const isBarVariant = variant === "bar";
+  const resolvedOverflowBehavior = (0, import_react.useMemo)(() => {
+    if (overflowBehavior)
+      return overflowBehavior;
+    if (!isBarVariant)
+      return "scroll";
+    return isMobileViewport ? "select" : "menu";
+  }, [isBarVariant, isMobileViewport, overflowBehavior]);
+  const shouldUseOverflowMenu = resolvedOverflowBehavior === "menu";
+  const shouldUseOverflowScroll = resolvedOverflowBehavior === "scroll";
+  const shouldUseOverflowSelect = resolvedOverflowBehavior === "select";
+  const handleMeasureTabRef = (0, import_react.useCallback)(
+    (tabValue, tabElement) => {
+      if (!tabElement) {
+        tabMeasureRefs.current.delete(tabValue);
+        return;
+      }
+      tabMeasureRefs.current.set(tabValue, tabElement);
+    },
+    []
+  );
+  (0, import_react.useEffect)(() => {
+    if (typeof window === "undefined")
+      return;
+    const mediaQueryList = window.matchMedia(mobileTabsMediaQuery);
+    const handleMediaQueryChange = (event) => {
+      setIsMobileViewport(event.matches);
+    };
+    handleMediaQueryChange(mediaQueryList);
+    if (typeof mediaQueryList.addEventListener === "function") {
+      mediaQueryList.addEventListener("change", handleMediaQueryChange);
+      return () => {
+        mediaQueryList.removeEventListener("change", handleMediaQueryChange);
+      };
+    }
+    mediaQueryList.addListener(handleMediaQueryChange);
+    return () => {
+      mediaQueryList.removeListener(handleMediaQueryChange);
+    };
+  }, []);
+  const handleRecalculateOverflow = (0, import_react.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_react.useEffect)(() => {
+    handleRecalculateOverflow();
+  }, [handleRecalculateOverflow]);
+  (0, import_react.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_react.useEffect)(() => {
+    if (overflowLayout.hiddenItems.length > 0)
+      return;
+    setIsMoreMenuOpen(false);
+  }, [overflowLayout.hiddenItems.length]);
+  const updateScrollAffordances = (0, import_react.useCallback)(() => {
+    if (!shouldUseOverflowScroll) {
+      setScrollAffordanceState({
+        showStart: false,
+        showEnd: false
+      });
+      return;
+    }
+    const tabListElement = tabListRef.current;
+    if (!tabListElement)
+      return;
+    const maxScrollLeft = tabListElement.scrollWidth - tabListElement.clientWidth;
+    setScrollAffordanceState({
+      showStart: tabListElement.scrollLeft > 4,
+      showEnd: maxScrollLeft - tabListElement.scrollLeft > 4
+    });
+  }, [shouldUseOverflowScroll]);
+  const renderedItems = shouldUseOverflowMenu ? overflowLayout.visibleItems : items;
+  const shouldShowMoreButton = shouldUseOverflowMenu && overflowLayout.hiddenItems.length > 0;
+  const selectItems = (0, import_react.useMemo)(() => {
+    return items.map((item) => ({
+      value: item.value,
+      label: item.label,
+      disabled: item.disabled
+    }));
+  }, [items]);
+  const isSelectDisabled = !items.some((item) => !item.disabled);
+  const handleSelect = (nextValue) => {
+    if (nextValue === value)
+      return;
+    onChange(nextValue);
+  };
+  const handleMoveFocus = (index) => {
+    var _a;
+    if (index < 0)
+      return;
+    const nextItem = renderedItems[index];
+    if (!nextItem)
+      return;
+    handleSelect(nextItem.value);
+    (_a = buttonRefs.current[index]) == null ? void 0 : _a.focus();
+  };
+  const handleKeyDown = (event, index) => {
+    switch (event.key) {
+      case "ArrowRight": {
+        event.preventDefault();
+        handleMoveFocus(findNextEnabledIndex(renderedItems, index, 1));
+        return;
+      }
+      case "ArrowLeft": {
+        event.preventDefault();
+        handleMoveFocus(findNextEnabledIndex(renderedItems, index, -1));
+        return;
+      }
+      case "Home": {
+        event.preventDefault();
+        handleMoveFocus(findEdgeEnabledIndex(renderedItems, 1));
+        return;
+      }
+      case "End": {
+        event.preventDefault();
+        handleMoveFocus(findEdgeEnabledIndex(renderedItems, -1));
+        return;
+      }
+      default:
+        return;
+    }
+  };
+  const activeHiddenItem = (0, import_react.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(
+      "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"
+  );
+  const handleTabListWheel = (event) => {
+    if (!shouldUseOverflowScroll)
+      return;
+    const tabListElement = event.currentTarget;
+    if (tabListElement.scrollWidth <= tabListElement.clientWidth)
+      return;
+    if (Math.abs(event.deltaX) > Math.abs(event.deltaY))
+      return;
+    event.preventDefault();
+    tabListElement.scrollLeft += event.deltaY;
+  };
+  const handleTabListPointerDown = (event) => {
+    if (!shouldUseOverflowScroll)
+      return;
+    if (event.pointerType !== "mouse")
+      return;
+    if (event.button !== 0)
+      return;
+    const tabListElement = tabListRef.current;
+    if (!tabListElement)
+      return;
+    if (tabListElement.scrollWidth <= tabListElement.clientWidth)
+      return;
+    dragStateRef.current = {
+      isPointerDown: true,
+      isDragging: false,
+      pointerId: event.pointerId,
+      startClientX: event.clientX,
+      startClientY: event.clientY,
+      startScrollLeft: tabListElement.scrollLeft
+    };
+  };
+  const handleTabListPointerMove = (event) => {
+    if (!shouldUseOverflowScroll)
+      return;
+    const dragState = dragStateRef.current;
+    const tabListElement = tabListRef.current;
+    if (!dragState.isPointerDown)
+      return;
+    if (dragState.pointerId !== event.pointerId)
+      return;
+    if (!tabListElement)
+      return;
+    const deltaX = event.clientX - dragState.startClientX;
+    const deltaY = event.clientY - dragState.startClientY;
+    const horizontalDistance = Math.abs(deltaX);
+    const verticalDistance = Math.abs(deltaY);
+    const hasExceededDragThreshold = horizontalDistance > 10 && horizontalDistance > verticalDistance;
+    if (hasExceededDragThreshold && !dragState.isDragging) {
+      dragState.isDragging = true;
+      setIsDraggingTabs(true);
+      tabListElement.setPointerCapture(event.pointerId);
+    }
+    if (!dragState.isDragging)
+      return;
+    event.preventDefault();
+    tabListElement.scrollLeft = dragState.startScrollLeft - deltaX;
+  };
+  const handleEndTabListDrag = (event) => {
+    const dragState = dragStateRef.current;
+    const tabListElement = tabListRef.current;
+    if (!dragState.isPointerDown)
+      return;
+    if (dragState.pointerId !== event.pointerId)
+      return;
+    if (tabListElement == null ? void 0 : tabListElement.hasPointerCapture(event.pointerId)) {
+      tabListElement.releasePointerCapture(event.pointerId);
+    }
+    if (dragState.isDragging) {
+      suppressClickRef.current = true;
+      window.setTimeout(() => {
+        suppressClickRef.current = false;
+      }, 0);
+    }
+    dragStateRef.current = {
+      isPointerDown: false,
+      isDragging: false,
+      pointerId: null,
+      startClientX: 0,
+      startClientY: 0,
+      startScrollLeft: 0
+    };
+    setIsDraggingTabs(false);
+  };
+  const handleTabListClickCapture = (event) => {
+    if (!suppressClickRef.current)
+      return;
+    event.preventDefault();
+    event.stopPropagation();
+    suppressClickRef.current = false;
+  };
+  const handleSelectHiddenItem = (nextValue) => {
+    handleSelect(nextValue);
+    setIsMoreMenuOpen(false);
+  };
+  const updateActiveUnderline = (0, import_react.useCallback)(() => {
+    if (isBarVariant) {
+      setActiveUnderlineStyle({
+        transform: "translateX(0px)",
+        width: 0,
+        opacity: 0
+      });
+      return;
+    }
+    const activeIndex = renderedItems.findIndex((item) => item.value === value);
+    const activeButton = activeIndex >= 0 ? buttonRefs.current[activeIndex] : null;
+    if (!activeButton || !tabListRef.current) {
+      setActiveUnderlineStyle((currentStyle) => __spreadProps(__spreadValues({}, currentStyle), {
+        opacity: 0
+      }));
+      return;
+    }
+    setActiveUnderlineStyle({
+      transform: `translateX(${activeButton.offsetLeft}px)`,
+      width: activeButton.offsetWidth,
+      opacity: 1
+    });
+  }, [isBarVariant, renderedItems, value]);
+  (0, import_react.useLayoutEffect)(() => {
+    updateActiveUnderline();
+  }, [updateActiveUnderline]);
+  (0, import_react.useEffect)(() => {
+    if (isBarVariant || !shouldUseOverflowScroll)
+      return;
+    const tabListElement = tabListRef.current;
+    if (!tabListElement)
+      return;
+    const handleScroll = () => {
+      updateActiveUnderline();
+      updateScrollAffordances();
+    };
+    tabListElement.addEventListener("scroll", handleScroll, { passive: true });
+    updateScrollAffordances();
+    return () => {
+      tabListElement.removeEventListener("scroll", handleScroll);
+    };
+  }, [isBarVariant, shouldUseOverflowScroll, updateActiveUnderline, updateScrollAffordances]);
+  (0, import_react.useEffect)(() => {
+    if (!shouldUseOverflowScroll)
+      return;
+    updateScrollAffordances();
+  }, [renderedItems, shouldUseOverflowScroll, updateScrollAffordances, value]);
+  (0, import_react.useEffect)(() => {
+    if (isBarVariant && !shouldUseOverflowScroll)
+      return;
+    if (typeof ResizeObserver === "undefined")
+      return;
+    const tabListElement = tabListRef.current;
+    if (!tabListElement)
+      return;
+    const resizeObserver = new ResizeObserver(() => {
+      updateActiveUnderline();
+      updateScrollAffordances();
+    });
+    resizeObserver.observe(tabListElement);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [isBarVariant, shouldUseOverflowScroll, updateActiveUnderline, updateScrollAffordances]);
+  (0, import_react.useEffect)(() => {
+    if (!shouldUseOverflowScroll)
+      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"
+    });
+  }, [enableAnimations, renderedItems, shouldUseOverflowScroll, value]);
+  if (shouldUseOverflowSelect) {
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: cn("w-full", className), children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      Select,
+      {
+        ariaLabel,
+        className: "w-full",
+        disabled: isSelectDisabled,
+        items: selectItems,
+        onChange: handleSelect,
+        value
+      }
+    ) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+    "div",
+    {
+      ref: containerRef,
+      className: cn(
+        "relative inline-flex max-w-full items-stretch font-agg-sans bg-agg-secondary",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+          "div",
+          {
+            ref: tabListRef,
+            role: "tablist",
+            "aria-label": resolvedAriaLabel,
+            className: cn("relative", tabListClassName),
+            onClickCapture: handleTabListClickCapture,
+            onPointerCancel: handleEndTabListDrag,
+            onPointerDown: handleTabListPointerDown,
+            onPointerMove: handleTabListPointerMove,
+            onPointerUp: handleEndTabListDrag,
+            onWheel: handleTabListWheel,
+            children: [
+              renderedItems.map((item, index) => {
+                const isActive = item.value === value;
+                return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+                  "button",
+                  {
+                    ref: (buttonElement) => {
+                      buttonRefs.current[index] = buttonElement;
+                    },
+                    type: "button",
+                    role: "tab",
+                    tabIndex: isActive ? 0 : -1,
+                    "aria-selected": isActive,
+                    "aria-label": item.label,
+                    disabled: item.disabled,
+                    onClick: () => handleSelect(item.value),
+                    onKeyDown: (event) => handleKeyDown(event, index),
+                    className: cn(
+                      getTabButtonClassName({
+                        enableAnimations,
+                        isBarVariant,
+                        isActive,
+                        isDisabled: !!item.disabled,
+                        size
+                      }),
+                      shouldUseOverflowScroll && !isBarVariant && "snap-start"
+                    ),
+                    children: [
+                      isBarVariant ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_jsx_runtime36.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                        "span",
+                        {
+                          "aria-hidden": true,
+                          className: cn(
+                            "pointer-events-none absolute inset-px origin-bottom rounded-[2px] bg-agg-secondary-hover",
+                            getMotionClassName(
+                              enableAnimations,
+                              "transition-[transform,opacity] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none"
+                            ),
+                            isActive ? "scale-y-100 opacity-100" : "scale-y-0 opacity-0"
+                          )
+                        }
+                      ) }) : null,
+                      item.icon ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "relative z-10 inline-flex shrink-0 items-center justify-center", children: item.icon }) : null,
+                      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "relative z-10 truncate whitespace-nowrap [&::first-letter]:uppercase", children: item.label })
+                    ]
+                  },
+                  item.value
+                );
+              }),
+              !isBarVariant ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                "span",
+                {
+                  "aria-hidden": true,
+                  className: cn(
+                    "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)]"
+                    ),
+                    "h-[3px]"
+                  ),
+                  style: activeUnderlineStyle
+                }
+              ) : null
+            ]
+          }
+        ),
+        shouldUseOverflowScroll && !isBarVariant ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+            "span",
+            {
+              "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",
+                getMotionClassName(enableAnimations, "transition-opacity duration-200"),
+                scrollAffordanceState.showStart ? "opacity-100" : "opacity-0"
+              )
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+            "span",
+            {
+              "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",
+                getMotionClassName(enableAnimations, "transition-opacity duration-200"),
+                scrollAffordanceState.showEnd ? "opacity-100" : "opacity-0"
+              )
+            }
+          )
+        ] }) : null,
+        shouldShowMoreButton ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(DropdownMenu.Root, { open: isMoreMenuOpen, onOpenChange: setIsMoreMenuOpen, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime36.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_runtime36.jsx)(Icon, { name: "dots-horizontal", size: isBarVariant ? "s" : "m", color: "currentColor" })
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DropdownMenu.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime36.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_runtime36.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_runtime36.jsx)("span", { className: "inline-flex shrink-0 items-center justify-center", children: item.icon }) : null,
+                      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "truncate whitespace-nowrap [&::first-letter]:uppercase", children: item.label })
+                    ]
+                  },
+                  item.value
+                );
+              })
+            }
+          ) })
+        ] }) : null,
+        shouldUseOverflowMenu ? /* @__PURE__ */ (0, import_jsx_runtime36.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_runtime36.jsxs)(
+                "span",
+                {
+                  ref: (tabElement) => handleMeasureTabRef(item.value, tabElement),
+                  className: getMeasureTabClassName({
+                    isBarVariant,
+                    size
+                  }),
+                  children: [
+                    item.icon ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "inline-flex shrink-0 items-center justify-center", children: item.icon }) : null,
+                    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { children: item.label })
+                  ]
+                },
+                `measure-${item.value}`
+              )),
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                "span",
+                {
+                  ref: moreButtonMeasureRef,
+                  className: getMoreButtonClassName({
+                    enableAnimations,
+                    isBarVariant,
+                    size
+                  }),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Icon, { name: "dots-horizontal", size: isBarVariant ? "s" : "m", color: "currentColor" })
+                }
+              )
+            ]
+          }
+        ) : null
+      ]
+    }
+  );
+};
+Tabs.displayName = "Tabs";
+
+// src/primitives/venue-logo/index.tsx
+var import_hooks11 = require("@agg-market/hooks");
+
+// src/primitives/venue-logo/logo-props.ts
+var DEFAULT_MONOCHROME_COLOR = "#000000";
+var resolveLogoPrimaryColor = ({
+  brandColor,
+  isColor = true,
+  color
+}) => {
+  if (typeof color === "string" && color.trim())
+    return color;
+  if (!isColor)
+    return DEFAULT_MONOCHROME_COLOR;
+  return brandColor;
+};
+
+// src/primitives/venue-logo/svg/logo-kalshi.tsx
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var KALSHI_GREEN = "#18C590";
+var LogoKalshiIcon = (_a) => {
+  var _b = _a, {
+    title,
+    className,
+    isColor = true,
+    color
+  } = _b, props = __objRest(_b, [
+    "title",
+    "className",
+    "isColor",
+    "color"
+  ]);
+  const primaryColor = resolveLogoPrimaryColor({
+    brandColor: KALSHI_GREEN,
+    isColor,
+    color
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+    "svg",
+    __spreadProps(__spreadValues(__spreadValues({
+      viewBox: "0 0 100 100",
+      className,
+      fill: "none"
+    }, getIconA11yProps(title)), props), {
+      children: [
+        title ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("title", { children: title }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("path", { d: "M20 10H36V90H20V10Z", fill: primaryColor }),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("path", { d: "M44 50L74 10H92L62 50L92 90H74L44 50Z", fill: primaryColor })
+      ]
+    })
+  );
+};
+LogoKalshiIcon.displayName = "LogoKalshiIcon";
+
+// src/primitives/venue-logo/svg/logo-opinion.tsx
+var import_jsx_runtime38 = require("react/jsx-runtime");
+var OPINION_BLACK = "#000000";
+var OPINION_WHITE = "#FFFFFF";
+var LogoOpinionIcon = (_a) => {
+  var _b = _a, {
+    title,
+    className,
+    isColor = true,
+    color
+  } = _b, props = __objRest(_b, [
+    "title",
+    "className",
+    "isColor",
+    "color"
+  ]);
+  const primaryColor = resolveLogoPrimaryColor({
+    brandColor: OPINION_BLACK,
+    isColor,
+    color
+  });
+  const accentColor = (color == null ? void 0 : color.trim()) ? primaryColor : OPINION_WHITE;
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+    "svg",
+    __spreadProps(__spreadValues(__spreadValues({
+      viewBox: "0 0 100 100",
+      className,
+      fill: "none"
+    }, getIconA11yProps(title)), props), {
+      children: [
+        title ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("title", { children: title }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("circle", { cx: "50", cy: "50", r: "40", fill: primaryColor }),
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+          "rect",
+          {
+            x: "21",
+            y: "18",
+            width: "8",
+            height: "64",
+            rx: "4",
+            transform: "rotate(-7 21 18)",
+            fill: accentColor
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+          "rect",
+          {
+            x: "37",
+            y: "12",
+            width: "8",
+            height: "76",
+            rx: "4",
+            transform: "rotate(-4 37 12)",
+            fill: accentColor
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+          "rect",
+          {
+            x: "53",
+            y: "12",
+            width: "8",
+            height: "76",
+            rx: "4",
+            transform: "rotate(-4 53 12)",
+            fill: accentColor
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+          "rect",
+          {
+            x: "69",
+            y: "18",
+            width: "8",
+            height: "64",
+            rx: "4",
+            transform: "rotate(-7 69 18)",
+            fill: accentColor
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("rect", { x: "12", y: "44", width: "76", height: "12", fill: primaryColor })
+      ]
+    })
+  );
+};
+LogoOpinionIcon.displayName = "LogoOpinionIcon";
+
+// src/primitives/venue-logo/svg/logo-polymarket.tsx
+var import_jsx_runtime39 = require("react/jsx-runtime");
+var POLYMARKET_BLUE = "#3861FB";
+var LogoPolymarketIcon = (_a) => {
+  var _b = _a, {
+    title,
+    className,
+    isColor = true,
+    color
+  } = _b, props = __objRest(_b, [
+    "title",
+    "className",
+    "isColor",
+    "color"
+  ]);
+  const primaryColor = resolveLogoPrimaryColor({
+    brandColor: POLYMARKET_BLUE,
+    isColor,
+    color
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+    "svg",
+    __spreadProps(__spreadValues(__spreadValues({
+      viewBox: "0 0 100 100",
+      className,
+      fill: "none"
+    }, getIconA11yProps(title)), props), {
+      children: [
+        title ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("title", { children: title }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+          "path",
+          {
+            d: "M18 10L78 2V98L18 88V10Z",
+            stroke: primaryColor,
+            strokeWidth: "8",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("path", { d: "M18 32L78 44", stroke: primaryColor, strokeWidth: "8", strokeLinecap: "round" }),
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("path", { d: "M18 58L78 70", stroke: primaryColor, strokeWidth: "8", strokeLinecap: "round" })
+      ]
+    })
+  );
+};
+LogoPolymarketIcon.displayName = "LogoPolymarketIcon";
+
+// src/primitives/venue-logo/svg/logo-probable.tsx
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var PROBABLE_ORANGE = "#F85B22";
+var LogoProbableIcon = (_a) => {
+  var _b = _a, {
+    title,
+    className,
+    isColor = true,
+    color
+  } = _b, props = __objRest(_b, [
+    "title",
+    "className",
+    "isColor",
+    "color"
+  ]);
+  const primaryColor = resolveLogoPrimaryColor({
+    brandColor: PROBABLE_ORANGE,
+    isColor,
+    color
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+    "svg",
+    __spreadProps(__spreadValues(__spreadValues({
+      viewBox: "0 0 100 100",
+      className,
+      fill: "none"
+    }, getIconA11yProps(title)), props), {
+      children: [
+        title ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("title", { children: title }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("rect", { x: "20", y: "16", width: "60", height: "12", fill: primaryColor }),
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("rect", { x: "18", y: "36", width: "64", height: "46", rx: "23", fill: primaryColor }),
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+          "rect",
+          {
+            x: "32",
+            y: "50",
+            width: "40",
+            height: "18",
+            rx: "9",
+            fill: isColor && !color ? "white" : primaryColor
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("circle", { cx: "61", cy: "59", r: "7", fill: primaryColor })
+      ]
+    })
+  );
+};
+LogoProbableIcon.displayName = "LogoProbableIcon";
+
+// src/primitives/venue-logo/venue-logo.constants.ts
+var venueLogoRegistry = {
+  kalshi: LogoKalshiIcon,
+  polymarket: LogoPolymarketIcon,
+  opinion: LogoOpinionIcon,
+  probable: LogoProbableIcon
+};
+var venueLogoNames = Object.keys(venueLogoRegistry);
+var sizeClasses2 = {
+  xxs: "h-2 w-2",
+  xs: "h-3 w-3",
+  s: "h-4 w-4",
+  m: "h-6 w-6",
+  l: "h-8 w-8",
+  xl: "h-10 w-10",
+  xxl: "h-12 w-12"
+};
+
+// src/primitives/venue-logo/index.tsx
+var import_jsx_runtime41 = require("react/jsx-runtime");
+var VenueLogo = ({
+  venue,
+  isColor = true,
+  isMonochromatic = false,
+  color,
+  size = "m",
+  className,
+  ariaLabel,
+  title
+}) => {
+  const labels = (0, import_hooks11.useLabels)();
+  const Component = venueLogoRegistry[venue];
+  const sizeClass = sizeClasses2[size];
+  const resolvedIsColor = isMonochromatic ? false : isColor;
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    Component,
+    {
+      className: cn("shrink-0", sizeClass, className),
+      isColor: resolvedIsColor,
+      color,
+      "aria-label": ariaLabel != null ? ariaLabel : labels.venues[venue],
+      title
+    }
+  );
+};
+VenueLogo.displayName = "VenueLogo";
+
+// src/trading/utils.ts
+var import_hooks12 = require("@agg-market/hooks");
+var import_dayjs = __toESM(require("dayjs"));
+var defaultLabels = (0, import_hooks12.resolveAggUiLabels)("en-US");
+var defaultSettlementSectionLabel = defaultLabels.trading.settlementSection;
+var defaultSettlementDifferencesTitle = defaultLabels.trading.settlementDifferencesTitle;
+var defaultTradingDisclaimer = defaultLabels.trading.disclaimer;
+var getTradingDateLabel = (value) => {
+  const parsedValue = (0, import_dayjs.default)(value);
+  if (!parsedValue.isValid()) {
+    return typeof value === "string" ? value : "";
+  }
+  return parsedValue.format("MMM D, YYYY");
+};
+var getTradingVenueLabel = (venue, label) => {
+  if (label)
+    return label;
+  return defaultLabels.venues[venue];
+};
+
+// src/trading/place-order/index.tsx
+var import_jsx_runtime42 = require("react/jsx-runtime");
+var WarningFilledIcon = ({ className }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+    "svg",
+    {
+      viewBox: "0 0 16 16",
+      fill: "none",
+      className: cn("text-agg-warning", className),
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("path", { d: "M8 1.33301L15.3333 14.6663H0.666656L8 1.33301Z", fill: "currentColor" }),
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("path", { d: "M8 5.33301V8.66634", stroke: "white", strokeWidth: "1.4", strokeLinecap: "round" }),
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("circle", { cx: "8", cy: "11.1667", r: "0.833333", fill: "white" })
+      ]
+    }
+  );
+};
+var ErrorFilledIcon = ({ className }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+    "svg",
+    {
+      viewBox: "0 0 16 16",
+      fill: "none",
+      className: cn("text-agg-error", className),
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("circle", { cx: "8", cy: "8", r: "8", fill: "currentColor" }),
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("path", { d: "M8 4.16699V8.50033", stroke: "white", strokeWidth: "1.4", strokeLinecap: "round" }),
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("circle", { cx: "8", cy: "11.167", r: "0.833333", fill: "white" })
+      ]
+    }
+  );
+};
+var getPlaceOrderContainerClassName = () => {
+  return "overflow-hidden rounded-agg-xl border border-agg-border bg-agg-secondary shadow-none hover:shadow-none";
+};
+var getRoutingCardClassName = (isHighlighted) => {
+  if (!isHighlighted) {
+    return "border-agg-border bg-agg-secondary";
+  }
+  return "border-agg-trade-highlight-border bg-agg-trade-highlight-surface";
+};
+var getResultValueClassName = (tone) => {
+  if (tone === "default")
+    return "text-agg-foreground";
+  return "text-agg-success";
+};
+var getStatusContent = ({
+  placement,
+  status,
+  onStatusAction
+}) => {
+  if (!status || status.placement !== placement)
+    return null;
+  if (status.tone === "warning") {
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex items-center justify-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(WarningFilledIcon, { className: "h-4 w-4 shrink-0" }),
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "text-agg-sm leading-agg-5 text-agg-foreground", children: status.message })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex items-center gap-3 rounded-agg-lg bg-agg-status-error-surface px-3 py-2.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ErrorFilledIcon, { className: "h-4 w-4 shrink-0" }),
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "min-w-0 flex-1 text-agg-sm leading-agg-5 text-agg-foreground", children: status.message })
+    ] }),
+    status.actionLabel ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      "button",
+      {
+        type: "button",
+        className: "shrink-0 text-agg-sm font-agg-bold leading-agg-5 text-agg-primary",
+        "aria-label": status.actionLabel,
+        onClick: onStatusAction,
+        children: status.actionLabel
+      }
+    ) : null
+  ] });
+};
+var PlaceOrder = ({
+  title,
+  marketDate,
+  marketImageUrl,
+  activeTab,
+  buyLabel,
+  sellLabel,
+  outcomes,
+  selectedOutcomeId,
+  primaryMetric,
+  routing,
+  result,
+  actionLabel,
+  disclaimer = defaultTradingDisclaimer,
+  isDismissible = false,
+  isLoading = false,
+  status,
+  className,
+  isPrimaryActionDisabled = false,
+  isPrimaryActionLoading = false,
+  onClose,
+  onOutcomeChange,
+  onPrimaryAction,
+  onStatusAction,
+  onTabChange
+}) => {
+  const { enableAnimations } = (0, import_hooks13.useSdkUiConfig)();
+  const labels = (0, import_hooks13.useLabels)();
+  const resolvedDisclaimer = disclaimer === defaultTradingDisclaimer ? labels.trading.disclaimer : disclaimer;
+  if (isLoading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      Skeleton,
+      {
+        ariaLabel: labels.common.loading,
+        className,
+        view: skeletonViews.placeOrder
+      }
+    );
+  }
+  const [internalTab, setInternalTab] = (0, import_react2.useState)(activeTab);
+  const [internalOutcomeId, setInternalOutcomeId] = (0, import_react2.useState)(selectedOutcomeId);
+  (0, import_react2.useEffect)(() => {
+    setInternalTab(activeTab);
+  }, [activeTab]);
+  (0, import_react2.useEffect)(() => {
+    setInternalOutcomeId(selectedOutcomeId);
+  }, [selectedOutcomeId]);
+  const resolvedTab = onTabChange ? activeTab : internalTab;
+  const resolvedOutcomeId = onOutcomeChange ? selectedOutcomeId : internalOutcomeId;
+  const hasHighlightedRouting = routing.tone === "highlighted";
+  const dateLabel = getTradingDateLabel(marketDate);
+  const tabItems = (0, import_react2.useMemo)(() => {
+    return [
+      { value: "buy", label: buyLabel },
+      { value: "sell", label: sellLabel }
+    ];
+  }, [buyLabel, sellLabel]);
+  const handleTabChange = (nextTab) => {
+    if (!onTabChange) {
+      setInternalTab(nextTab);
+    }
+    onTabChange == null ? void 0 : onTabChange(nextTab);
+  };
+  const handleOutcomeChange = (nextOutcomeId) => {
+    if (!onOutcomeChange) {
+      setInternalOutcomeId(nextOutcomeId);
+    }
+    onOutcomeChange == null ? void 0 : onOutcomeChange(nextOutcomeId);
+  };
+  const actionButton = /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    Button,
+    {
+      size: "xxl",
+      className: "w-full",
+      disabled: isPrimaryActionDisabled,
+      isLoading: isPrimaryActionLoading,
+      "aria-label": actionLabel,
+      onClick: onPrimaryAction,
+      children: actionLabel
+    }
+  );
+  const contentBody = /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex flex-col gap-6 p-5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex items-start justify-between gap-5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
+          marketImageUrl ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+            "img",
+            {
+              src: marketImageUrl,
+              alt: "",
+              className: "h-12 w-12 shrink-0 rounded-agg-lg object-cover"
+            }
+          ) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "min-w-0 text-agg-base font-agg-bold leading-agg-6 text-agg-foreground", children: title })
+        ] }),
+        isDismissible ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+          "button",
+          {
+            type: "button",
+            "aria-label": labels.common.close,
+            className: "shrink-0 text-agg-foreground",
+            onClick: onClose,
+            children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+              Icon,
+              {
+                name: "close",
+                size: "m",
+                className: "h-6 w-6 text-agg-foreground",
+                color: "currentColor"
+              }
+            )
+          }
+        ) : null
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "text-agg-base leading-agg-6 text-agg-foreground", children: dateLabel })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      Tabs,
+      {
+        ariaLabel: labels.common.tabsAria,
+        items: tabItems,
+        value: resolvedTab,
+        onChange: handleTabChange,
+        variant: "underline",
+        size: "s",
+        overflowBehavior: "scroll",
+        className: "w-full"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex flex-col gap-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "flex w-full gap-2", children: outcomes.map((outcome) => {
+        const isActive = outcome.id === resolvedOutcomeId;
+        return /* @__PURE__ */ (0, import_jsx_runtime42.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"
+            ),
+            "aria-pressed": isActive,
+            "aria-label": `${outcome.label} ${outcome.priceLabel}`,
+            onClick: () => handleOutcomeChange(outcome.id),
+            children: `${outcome.label} ${outcome.priceLabel}`
+          },
+          outcome.id
+        );
+      }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "text-agg-base font-agg-bold leading-agg-6 text-agg-foreground", children: primaryMetric.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "text-agg-sm leading-agg-5 text-agg-muted-foreground", children: primaryMetric.hint })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "text-agg-3xl font-agg-bold leading-agg-9 text-agg-foreground", children: primaryMetric.value })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+        "div",
+        {
+          className: cn(
+            "relative overflow-hidden rounded-agg-lg border p-3",
+            getRoutingCardClassName(hasHighlightedRouting)
+          ),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+              "div",
+              {
+                className: cn(
+                  "pointer-events-none absolute inset-x-0 bottom-0 h-11 bg-gradient-to-b from-transparent to-agg-trade-highlight-glow",
+                  hasHighlightedRouting ? "opacity-100" : "opacity-0"
+                )
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "relative flex flex-col gap-3", children: [
+              routing.rows.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex flex-col gap-3", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex min-w-0 items-center gap-2", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+                      VenueLogo,
+                      {
+                        venue: row.venue,
+                        size: "s",
+                        ariaLabel: getTradingVenueLabel(row.venue)
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "truncate text-agg-base leading-agg-6 text-agg-foreground", children: row.label })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "shrink-0 text-agg-base leading-agg-6 text-agg-foreground", children: row.priceLabel })
+                ] }),
+                index < routing.rows.length - 1 ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+                  "div",
+                  {
+                    className: cn(
+                      "h-px w-full",
+                      hasHighlightedRouting ? "bg-agg-trade-highlight-border" : "bg-agg-separator"
+                    )
+                  }
+                ) : null
+              ] }, `${row.venue}-${row.label}`)),
+              routing.highlightLabel ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "text-center text-agg-sm font-agg-bold leading-agg-5 uppercase text-agg-trade-highlight-accent", children: routing.highlightLabel }) : null
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "text-agg-sm leading-agg-5 text-agg-muted-foreground", children: routing.helperLabel })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex flex-col", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "text-agg-base font-agg-bold leading-agg-6 text-agg-foreground", children: result.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "text-agg-sm leading-agg-5 text-agg-muted-foreground", children: result.hint })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+        "p",
+        {
+          className: cn(
+            "text-agg-3xl font-agg-bold leading-agg-9",
+            getResultValueClassName(result.tone)
+          ),
+          children: result.value
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
+      getStatusContent({
+        placement: "above-action",
+        status,
+        onStatusAction
+      }),
+      actionButton,
+      getStatusContent({
+        placement: "below-action",
+        status,
+        onStatusAction
+      })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "text-center text-agg-xs leading-agg-4 text-agg-muted-foreground", children: resolvedDisclaimer })
+  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Card, { className: cn(getPlaceOrderContainerClassName(), className), children: contentBody });
+};
+PlaceOrder.displayName = "PlaceOrder";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PlaceOrder
+});