@agg-market/ui 0.0.1

package/dist/onboarding-modal.js

@@ -0,0 +1,2242 @@
+"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);
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+
+// src/onboarding/index.tsx
+var onboarding_exports = {};
+__export(onboarding_exports, {
+  ConnectAccountsStep: () => ConnectAccountsStep,
+  ConnectKalshiModal: () => ConnectKalshiModal,
+  ConnectOnchainModal: () => ConnectOnchainModal,
+  HowItWorksStep: () => HowItWorksStep,
+  OnboardingModal: () => OnboardingModal,
+  ProfileSetupStep: () => ProfileSetupStep
+});
+module.exports = __toCommonJS(onboarding_exports);
+var import_react4 = require("react");
+var import_hooks9 = require("@agg-market/hooks");
+var Dialog4 = __toESM(require("@radix-ui/react-dialog"));
+
+// src/primitives/modal/index.tsx
+var Dialog = __toESM(require("@radix-ui/react-dialog"));
+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);
+};
+
+// src/primitives/icon/types.ts
+var getIconA11yProps = (title) => ({
+  role: title ? "img" : "presentation",
+  "aria-hidden": title ? void 0 : true
+});
+
+// src/primitives/icon/svg/close.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var CloseIcon = (_a) => {
+  var _b = _a, { title, className } = _b, props = __objRest(_b, ["title", "className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.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_runtime.jsx)("title", { children: title }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "path",
+          {
+            d: "M12 4L4 12M4 4l8 8",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ]
+    })
+  );
+};
+CloseIcon.displayName = "CloseIcon";
+
+// src/primitives/modal/index.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Modal = ({
+  open,
+  onOpenChange,
+  children,
+  "aria-label": _ariaLabel,
+  "aria-labelledby": _ariaLabelledBy
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Dialog.Root, { open, onOpenChange, children });
+};
+var ModalContainer = ({
+  children,
+  maxWidth = "600px",
+  classNames,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy
+}) => {
+  const { rootClassName, enableAnimations } = (0, import_hooks.useSdkUiConfig)();
+  const overlayAnimationClassName = enableAnimations ? "motion-safe:data-[state=open]:animate-agg-modal-overlay-in motion-safe:data-[state=closed]:animate-agg-modal-overlay-out motion-reduce:animate-none" : void 0;
+  const panelAnimationClassName = enableAnimations ? "motion-safe:data-[state=open]:animate-agg-modal-panel-in motion-safe:data-[state=closed]:animate-agg-modal-panel-out motion-reduce:animate-none" : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Dialog.Portal, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      Dialog.Overlay,
+      {
+        className: cn(
+          "fixed inset-0 z-agg-overlay bg-agg-overlay",
+          overlayAnimationClassName,
+          classNames == null ? void 0 : classNames.overlay
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      Dialog.Content,
+      {
+        className: cn(
+          "fixed inset-0 z-agg-modal",
+          "flex items-center justify-center p-4",
+          "sm:p-5",
+          classNames == null ? void 0 : classNames.content
+        ),
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        onCloseAutoFocus: (event) => {
+          event.preventDefault();
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "div",
+          {
+            className: cn(
+              AGG_ROOT_CLASS_NAME,
+              rootClassName,
+              "flex w-full max-h-[calc(100%-2rem)] flex-col font-agg-sans",
+              "rounded-agg-2xl border border-agg-separator",
+              "bg-agg-secondary text-agg-foreground shadow-agg-modal",
+              "origin-bottom overflow-hidden will-change-transform",
+              panelAnimationClassName,
+              classNames == null ? void 0 : classNames.container
+            ),
+            "data-agg-animations": enableAnimations ? "true" : "false",
+            style: { maxWidth },
+            children
+          }
+        )
+      }
+    )
+  ] });
+};
+Modal.Container = ModalContainer;
+var ModalHeader = ({
+  title,
+  subtitle,
+  leftElement,
+  rightElement,
+  hideClose = false,
+  closeIcon,
+  classNames,
+  children,
+  hideBorder = false
+}) => {
+  const { enableAnimations } = (0, import_hooks.useSdkUiConfig)();
+  const labels = (0, import_hooks.useLabels)();
+  const defaultCloseIcon = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CloseIcon, { className: "h-6 w-6" });
+  const resolvedCloseIcon = closeIcon != null ? closeIcon : defaultCloseIcon;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
+    {
+      className: cn(
+        "flex flex-col",
+        "sticky top-0 z-20",
+        "bg-agg-secondary",
+        hideBorder ? "border-0" : "border-b border-agg-separator",
+        subtitle ? "min-h-20" : "min-h-16",
+        classNames == null ? void 0 : classNames.root
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          "div",
+          {
+            className: cn(
+              "flex items-center justify-between",
+              "px-4 py-4",
+              "sm:px-8 sm:py-6",
+              subtitle && "sm:py-4",
+              children ? "pb-3 sm:pb-4" : void 0,
+              classNames == null ? void 0 : classNames.container
+            ),
+            children: [
+              leftElement ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: leftElement }) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: cn("max-w-[calc(100%-1rem)] flex-1", classNames == null ? void 0 : classNames.titleContainer), children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  Dialog.Title,
+                  {
+                    className: cn(
+                      !title && "invisible",
+                      "flex items-center text-agg-lg font-agg-bold leading-agg-6",
+                      "sm:text-agg-2xl sm:leading-agg-8",
+                      "text-ellipsis overflow-hidden whitespace-nowrap",
+                      classNames == null ? void 0 : classNames.title
+                    ),
+                    children: title
+                  }
+                ),
+                subtitle ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  "span",
+                  {
+                    className: cn(
+                      "text-agg-sm leading-agg-4 text-agg-muted-foreground sm:leading-agg-5",
+                      classNames == null ? void 0 : classNames.subtitle
+                    ),
+                    children: subtitle
+                  }
+                ) : null
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex flex-row gap-6 items-center justify-end", children: [
+                rightElement ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: rightElement }) : null,
+                !hideClose && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  Dialog.Close,
+                  {
+                    className: cn(
+                      "outline-0 flex items-center hover:cursor-pointer justify-center text-agg-foreground hover:text-agg-foreground/80",
+                      getMotionClassName(enableAnimations, "transition-colors"),
+                      classNames == null ? void 0 : classNames.close
+                    ),
+                    "aria-label": labels.common.close,
+                    children: resolvedCloseIcon
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        children ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { children }) : null
+      ]
+    }
+  );
+};
+Modal.Header = ModalHeader;
+var ModalBody = ({ children, classNames }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      className: cn(
+        "grow overflow-y-auto",
+        "px-4 py-6",
+        "sm:p-8",
+        "bg-agg-secondary text-agg-foreground",
+        classNames == null ? void 0 : classNames.root
+      ),
+      children
+    }
+  );
+};
+Modal.Body = ModalBody;
+var ModalFooter = ({
+  children,
+  classNames,
+  hideBorder = false
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      className: cn(
+        "sticky bottom-0",
+        "bg-agg-secondary",
+        "flex h-[73px] w-full flex-row items-center justify-between gap-3",
+        "border-agg-separator p-4",
+        "sm:h-20 sm:justify-end sm:px-8 sm:py-5",
+        hideBorder ? "border-0" : "border-t",
+        classNames == null ? void 0 : classNames.root
+      ),
+      children
+    }
+  );
+};
+Modal.Footer = ModalFooter;
+Modal.displayName = "Modal";
+
+// src/onboarding/onboarding-modal.constants.ts
+var HOW_IT_WORKS_FEATURE_KEYS = [
+  "createAccount",
+  "linkAccounts",
+  "bestPrices",
+  "stayInControl"
+];
+var ONBOARDING_STEPS = {
+  HOW_IT_WORKS: 0,
+  PROFILE_SETUP: 1,
+  CONNECT_ACCOUNTS: 2
+};
+var ONCHAIN_VENUES = [
+  "polymarket",
+  "opinion",
+  "probable"
+];
+
+// src/onboarding/steps/how-it-works.tsx
+var import_hooks3 = require("@agg-market/hooks");
+
+// src/primitives/button/index.tsx
+var import_hooks2 = require("@agg-market/hooks");
+
+// src/primitives/icon/icon.constants.ts
+var iconSizeClasses = {
+  xxs: "h-2 w-2",
+  xs: "h-3 w-3",
+  s: "h-4 w-4",
+  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_runtime3 = 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_hooks2.useSdkUiConfig)();
+  const isDisabled = disabled || isLoading;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.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_runtime3.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_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+        prefix != null ? prefix : null,
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children }),
+        suffix != null ? suffix : null
+      ] })
+    })
+  );
+};
+Button.displayName = "Button";
+
+// src/primitives/icon/svg/arrow-trend-up.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var ArrowTrendUpIcon = (_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: "M2 11.5L6.5 7L9.5 10L14 5.5",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime5 = require("react/jsx-runtime");
+var ArrowsToDotIcon = (_a) => {
+  var _b = _a, { title, className } = _b, props = __objRest(_b, ["title", "className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "svg",
+    __spreadProps(__spreadValues(__spreadValues({
+      viewBox: "0 0 16 16",
+      className,
+      fill: "none"
+    }, getIconA11yProps(title)), props), {
+      children: [
+        title ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("title", { children: title }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime5.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_runtime5.jsx)("circle", { cx: "8", cy: "8", r: "1.5", fill: "currentColor" })
+      ]
+    })
+  );
+};
+ArrowsToDotIcon.displayName = "ArrowsToDotIcon";
+
+// src/primitives/icon/svg/best-prices.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var BestPricesIcon = (_a) => {
+  var _b = _a, { title, className } = _b, props = __objRest(_b, ["title", "className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.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_runtime6.jsx)("title", { children: title }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("g", { clipPath: "url(#clip0_best_prices)", children: /* @__PURE__ */ (0, import_jsx_runtime6.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_runtime6.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("clipPath", { id: "clip0_best_prices", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("rect", { width: "28", height: "28", fill: "white" }) }) })
+      ]
+    })
+  );
+};
+BestPricesIcon.displayName = "BestPricesIcon";
+
+// src/primitives/icon/svg/check-circle.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var CheckCircleIcon = (_a) => {
+  var _b = _a, { title, className } = _b, props = __objRest(_b, ["title", "className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.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_runtime7.jsx)("title", { children: title }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("g", { clipPath: "url(#clip0_check_circle)", children: /* @__PURE__ */ (0, import_jsx_runtime7.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_runtime7.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("clipPath", { id: "clip0_check_circle", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("rect", { width: "24", height: "24", fill: "white" }) }) })
+      ]
+    })
+  );
+};
+CheckCircleIcon.displayName = "CheckCircleIcon";
+
+// src/primitives/icon/svg/chevron-down.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var ChevronDownIcon = (_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 14 14",
+      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: "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_runtime9 = require("react/jsx-runtime");
+var ChevronRightIcon = (_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 16 16",
+      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: "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_runtime10 = require("react/jsx-runtime");
+var ChevronUpIcon = (_a) => {
+  var _b = _a, { title, className } = _b, props = __objRest(_b, ["title", "className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    "svg",
+    __spreadProps(__spreadValues(__spreadValues({
+      viewBox: "0 0 14 14",
+      className,
+      fill: "none"
+    }, getIconA11yProps(title)), props), {
+      children: [
+        title ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("title", { children: title }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime10.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/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/onboarding/steps/how-it-works.tsx
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var defaultIcons = {
+  createAccount: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CreateAccountIcon, { className: "h-[28px] w-[28px] text-agg-muted-foreground" }),
+  linkAccounts: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(LinkAccountsIcon, { className: "h-[28px] w-[28px] text-agg-muted-foreground" }),
+  bestPrices: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(BestPricesIcon, { className: "h-[28px] w-[28px] text-agg-muted-foreground" }),
+  stayInControl: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(StayInControlIcon, { className: "h-[28px] w-[28px] text-agg-muted-foreground" })
+};
+var HowItWorksStep = ({ onContinue, icons }) => {
+  const labels = (0, import_hooks3.useLabels)();
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex flex-col gap-6", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("h2", { className: "text-center text-agg-2xl font-agg-bold text-agg-foreground sm:text-agg-3xl", children: labels.onboarding.howItWorks.title }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex flex-col gap-3", children: HOW_IT_WORKS_FEATURE_KEYS.map((featureKey) => {
+      var _a;
+      const icon = (_a = icons == null ? void 0 : icons[featureKey]) != null ? _a : defaultIcons[featureKey];
+      const feature = labels.onboarding.howItWorks.features[featureKey];
+      return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+        "div",
+        {
+          className: cn(
+            "flex items-center gap-4 p-4 sm:p-5",
+            "rounded-agg-lg",
+            "bg-agg-secondary-hover"
+          ),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex flex-col flex-1 min-w-0 gap-[6px]", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "text-agg-base font-agg-bold leading-agg-6 text-agg-foreground", children: feature.title }),
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "text-agg-sm leading-agg-5 text-agg-foreground", children: feature.description })
+            ] }),
+            icon ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "hidden shrink-0 items-center justify-center text-agg-muted-foreground sm:flex", children: icon }) : null
+          ]
+        },
+        featureKey
+      );
+    }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Button, { variant: "primary", size: "l", className: "w-full", onClick: onContinue, children: labels.onboarding.howItWorks.continue })
+  ] });
+};
+HowItWorksStep.displayName = "HowItWorksStep";
+
+// src/onboarding/steps/profile-setup.tsx
+var import_react = require("react");
+var import_hooks4 = require("@agg-market/hooks");
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var ProfileSetupStep = ({ onContinue }) => {
+  const labels = (0, import_hooks4.useLabels)();
+  const [username, setUsername] = (0, import_react.useState)("");
+  const [avatarFile, setAvatarFile] = (0, import_react.useState)();
+  const [avatarPreview, setAvatarPreview] = (0, import_react.useState)();
+  const fileInputRef = (0, import_react.useRef)(null);
+  const handleAvatarClick = (0, import_react.useCallback)(() => {
+    var _a;
+    (_a = fileInputRef.current) == null ? void 0 : _a.click();
+  }, []);
+  const handleFileChange = (0, import_react.useCallback)((e) => {
+    var _a;
+    const file = (_a = e.target.files) == null ? void 0 : _a[0];
+    if (!file)
+      return;
+    setAvatarFile(file);
+    const reader = new FileReader();
+    reader.onload = (event) => {
+      var _a2;
+      setAvatarPreview((_a2 = event.target) == null ? void 0 : _a2.result);
+    };
+    reader.readAsDataURL(file);
+  }, []);
+  const handleContinue = (0, import_react.useCallback)(() => {
+    onContinue({
+      username,
+      avatarFile,
+      avatarPreview
+    });
+  }, [username, avatarFile, avatarPreview, onContinue]);
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-col gap-6 sm:gap-8", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("h2", { className: "text-center text-agg-2xl font-agg-bold text-agg-foreground sm:text-agg-3xl", children: labels.onboarding.profileSetup.title }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex justify-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: handleAvatarClick,
+          className: cn(
+            "relative flex items-center justify-center",
+            "h-[80px] w-[80px]",
+            "rounded-agg-full",
+            "border-2 border-dashed border-agg-separator",
+            "bg-agg-secondary",
+            "hover:border-agg-muted-foreground hover:bg-agg-secondary-hover",
+            "transition-colors cursor-pointer",
+            "overflow-hidden"
+          ),
+          "aria-label": labels.onboarding.profileSetup.uploadProfilePictureAria,
+          children: avatarPreview ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+            "img",
+            {
+              src: avatarPreview,
+              alt: labels.onboarding.profileSetup.profilePreviewAlt,
+              className: "h-full w-full object-cover"
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ProfileIcon, { className: "h-8 w-8 text-agg-muted-foreground" })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        "input",
+        {
+          ref: fileInputRef,
+          type: "file",
+          accept: "image/*",
+          onChange: handleFileChange,
+          className: "hidden",
+          "aria-hidden": "true"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        "label",
+        {
+          htmlFor: "onboarding-username",
+          className: "text-agg-sm font-agg-bold text-agg-foreground",
+          children: labels.onboarding.profileSetup.usernameLabel
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        "input",
+        {
+          id: "onboarding-username",
+          type: "text",
+          value: username,
+          onChange: (e) => setUsername(e.target.value),
+          placeholder: labels.onboarding.profileSetup.usernamePlaceholder,
+          className: cn(
+            "w-full px-4 py-3",
+            "rounded-agg-xl",
+            "border border-agg-separator",
+            "bg-agg-secondary text-agg-foreground",
+            "placeholder:text-agg-muted-foreground",
+            "outline-none",
+            "focus:border-agg-primary focus:ring-1 focus:ring-agg-primary",
+            "transition-colors",
+            "text-agg-sm sm:text-agg-base"
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Button, { variant: "primary", size: "l", className: "w-full", onClick: handleContinue, children: labels.onboarding.profileSetup.continue })
+  ] });
+};
+ProfileSetupStep.displayName = "ProfileSetupStep";
+
+// src/onboarding/steps/connect-accounts.tsx
+var import_hooks6 = require("@agg-market/hooks");
+
+// src/primitives/venue-logo/index.tsx
+var import_hooks5 = 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_runtime29 = 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_runtime29.jsxs)(
+    "svg",
+    __spreadProps(__spreadValues(__spreadValues({
+      viewBox: "0 0 100 100",
+      className,
+      fill: "none"
+    }, getIconA11yProps(title)), props), {
+      children: [
+        title ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("title", { children: title }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("path", { d: "M20 10H36V90H20V10Z", fill: primaryColor }),
+        /* @__PURE__ */ (0, import_jsx_runtime29.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_runtime30 = 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_runtime30.jsxs)(
+    "svg",
+    __spreadProps(__spreadValues(__spreadValues({
+      viewBox: "0 0 100 100",
+      className,
+      fill: "none"
+    }, getIconA11yProps(title)), props), {
+      children: [
+        title ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("title", { children: title }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("circle", { cx: "50", cy: "50", r: "40", fill: primaryColor }),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          "rect",
+          {
+            x: "21",
+            y: "18",
+            width: "8",
+            height: "64",
+            rx: "4",
+            transform: "rotate(-7 21 18)",
+            fill: accentColor
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          "rect",
+          {
+            x: "37",
+            y: "12",
+            width: "8",
+            height: "76",
+            rx: "4",
+            transform: "rotate(-4 37 12)",
+            fill: accentColor
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          "rect",
+          {
+            x: "53",
+            y: "12",
+            width: "8",
+            height: "76",
+            rx: "4",
+            transform: "rotate(-4 53 12)",
+            fill: accentColor
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          "rect",
+          {
+            x: "69",
+            y: "18",
+            width: "8",
+            height: "64",
+            rx: "4",
+            transform: "rotate(-7 69 18)",
+            fill: accentColor
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime30.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_runtime31 = 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_runtime31.jsxs)(
+    "svg",
+    __spreadProps(__spreadValues(__spreadValues({
+      viewBox: "0 0 100 100",
+      className,
+      fill: "none"
+    }, getIconA11yProps(title)), props), {
+      children: [
+        title ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("title", { children: title }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+          "path",
+          {
+            d: "M18 10L78 2V98L18 88V10Z",
+            stroke: primaryColor,
+            strokeWidth: "8",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("path", { d: "M18 32L78 44", stroke: primaryColor, strokeWidth: "8", strokeLinecap: "round" }),
+        /* @__PURE__ */ (0, import_jsx_runtime31.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_runtime32 = 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_runtime32.jsxs)(
+    "svg",
+    __spreadProps(__spreadValues(__spreadValues({
+      viewBox: "0 0 100 100",
+      className,
+      fill: "none"
+    }, getIconA11yProps(title)), props), {
+      children: [
+        title ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("title", { children: title }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("rect", { x: "20", y: "16", width: "60", height: "12", fill: primaryColor }),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("rect", { x: "18", y: "36", width: "64", height: "46", rx: "23", fill: primaryColor }),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          "rect",
+          {
+            x: "32",
+            y: "50",
+            width: "40",
+            height: "18",
+            rx: "9",
+            fill: isColor && !color ? "white" : primaryColor
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime32.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_runtime33 = require("react/jsx-runtime");
+var VenueLogo = ({
+  venue,
+  isColor = true,
+  isMonochromatic = false,
+  color,
+  size = "m",
+  className,
+  ariaLabel,
+  title
+}) => {
+  const labels = (0, import_hooks5.useLabels)();
+  const Component = venueLogoRegistry[venue];
+  const sizeClass = sizeClasses2[size];
+  const resolvedIsColor = isMonochromatic ? false : isColor;
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    Component,
+    {
+      className: cn("shrink-0", sizeClass, className),
+      isColor: resolvedIsColor,
+      color,
+      "aria-label": ariaLabel != null ? ariaLabel : labels.venues[venue],
+      title
+    }
+  );
+};
+VenueLogo.displayName = "VenueLogo";
+
+// src/onboarding/steps/connect-accounts.tsx
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var OnchainVenueLogos = () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "flex -space-x-1.5", children: ONCHAIN_VENUES.map((venue, index) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    "div",
+    {
+      className: "overflow-hidden rounded-agg-lg",
+      style: { zIndex: ONCHAIN_VENUES.length - index },
+      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(VenueLogo, { venue, size: "l" })
+    },
+    venue
+  )) });
+};
+var VenueCard = ({
+  logos,
+  title,
+  mobileTitle,
+  description,
+  mobileDescription,
+  onConnect,
+  connected = false
+}) => {
+  const labels = (0, import_hooks6.useLabels)();
+  const action = connected ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CheckCircleIcon, { className: "h-6 w-6 text-agg-success" }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    Button,
+    {
+      variant: "tertiary",
+      size: "m",
+      className: "h-auto p-0 text-agg-primary hover:bg-transparent hover:text-agg-primary-hover",
+      onClick: onConnect,
+      children: labels.onboarding.connectAccounts.connect
+    }
+  );
+  const mobileAction = connected ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CheckCircleIcon, { className: "h-6 w-6 text-agg-success" }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    Button,
+    {
+      variant: "tertiary",
+      size: "m",
+      className: "h-auto p-0 text-agg-primary hover:bg-transparent hover:text-agg-primary-hover",
+      onClick: onConnect,
+      suffix: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ChevronRightIcon, { className: "h-4 w-4" }),
+      children: labels.onboarding.connectAccounts.connectAccount
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+    "div",
+    {
+      className: cn(
+        "rounded-agg-lg p-4 sm:p-5",
+        connected ? "bg-agg-success/5" : "bg-agg-secondary-hover"
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "hidden sm:flex items-center gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "shrink-0", children: logos }),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-agg-base font-agg-bold text-agg-foreground", children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "mt-0.5 text-agg-sm text-agg-muted-foreground", children: description })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "shrink-0", children: action })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex flex-col gap-3 sm:hidden", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "shrink-0", children: logos }),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-agg-base font-agg-bold text-agg-foreground", children: mobileTitle != null ? mobileTitle : title }),
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "mt-0.5 text-agg-sm text-agg-muted-foreground", children: mobileDescription != null ? mobileDescription : description })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { children: mobileAction })
+        ] })
+      ]
+    }
+  );
+};
+var ConnectAccountsStep = ({
+  onConnectOnchain,
+  onConnectKalshi,
+  onContinue,
+  connectedOnchain = false,
+  connectedKalshi = false
+}) => {
+  const labels = (0, import_hooks6.useLabels)();
+  const canContinue = connectedOnchain || connectedKalshi;
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex flex-col gap-6", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("h2", { className: "text-center text-agg-2xl font-agg-bold text-agg-foreground sm:text-agg-3xl", children: labels.onboarding.connectAccounts.title }),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex flex-col gap-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        VenueCard,
+        {
+          logos: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(OnchainVenueLogos, {}),
+          title: labels.onboarding.connectAccounts.onchainTitle,
+          mobileTitle: labels.onboarding.connectAccounts.onchainMobileTitle(
+            ONCHAIN_VENUES.length - 1
+          ),
+          description: labels.onboarding.connectAccounts.onchainDescription,
+          mobileDescription: labels.onboarding.connectAccounts.onchainMobileDescription,
+          onConnect: onConnectOnchain,
+          connected: connectedOnchain
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        VenueCard,
+        {
+          logos: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "overflow-hidden rounded-agg-lg", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(VenueLogo, { venue: "kalshi", size: "l" }) }),
+          title: labels.onboarding.connectAccounts.kalshiTitle,
+          mobileTitle: labels.onboarding.connectAccounts.kalshiMobileTitle,
+          description: labels.onboarding.connectAccounts.kalshiDescription,
+          mobileDescription: labels.onboarding.connectAccounts.kalshiMobileDescription,
+          onConnect: onConnectKalshi,
+          connected: connectedKalshi
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      Button,
+      {
+        variant: "primary",
+        size: "l",
+        className: "w-full",
+        onClick: onContinue,
+        disabled: !canContinue,
+        children: labels.onboarding.connectAccounts.continue
+      }
+    )
+  ] });
+};
+ConnectAccountsStep.displayName = "ConnectAccountsStep";
+
+// src/onboarding/steps/connect-kalshi-modal.tsx
+var import_react2 = require("react");
+var import_hooks7 = require("@agg-market/hooks");
+var Dialog2 = __toESM(require("@radix-ui/react-dialog"));
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var ConnectKalshiModal = ({
+  open,
+  onOpenChange,
+  onVerify
+}) => {
+  const labels = (0, import_hooks7.useLabels)();
+  const [apiKeyId, setApiKeyId] = (0, import_react2.useState)("");
+  const [privateKey, setPrivateKey] = (0, import_react2.useState)("");
+  const [verifying, setVerifying] = (0, import_react2.useState)(false);
+  const [error, setError] = (0, import_react2.useState)();
+  const canVerify = apiKeyId.trim().length > 0 && privateKey.trim().length > 0;
+  const handleCancel = (0, import_react2.useCallback)(() => {
+    onOpenChange(false);
+  }, [onOpenChange]);
+  const handleVerify = (0, import_react2.useCallback)(() => __async(void 0, null, function* () {
+    if (!canVerify || verifying)
+      return;
+    setVerifying(true);
+    setError(void 0);
+    try {
+      const credentials = {
+        apiKeyId: apiKeyId.trim(),
+        privateKey: privateKey.trim()
+      };
+      yield onVerify(credentials);
+      setApiKeyId("");
+      setPrivateKey("");
+      onOpenChange(false);
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : labels.onboarding.connectKalshiModal.fallbackError
+      );
+    } finally {
+      setVerifying(false);
+    }
+  }), [
+    apiKeyId,
+    canVerify,
+    labels.onboarding.connectKalshiModal.fallbackError,
+    onOpenChange,
+    onVerify,
+    privateKey,
+    verifying
+  ]);
+  const handleOpenChange = (0, import_react2.useCallback)(
+    (value) => {
+      if (value) {
+        setApiKeyId("");
+        setPrivateKey("");
+        setError(void 0);
+        setVerifying(false);
+      }
+      onOpenChange(value);
+    },
+    [onOpenChange]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Modal, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Modal.Container, { maxWidth: "600px", "aria-label": labels.onboarding.connectKalshiModal.ariaLabel, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Dialog2.Title, { className: "sr-only", children: labels.onboarding.connectKalshiModal.title }),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Modal.Header, { hideClose: false, hideBorder: true }),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Modal.Body, { classNames: { root: "px-5 pt-0 pb-6 sm:px-8 sm:pt-0 sm:pb-8" }, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex flex-col gap-8 items-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "overflow-hidden rounded-agg-lg", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(VenueLogo, { venue: "kalshi", size: "xl" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex flex-col gap-4 items-center text-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("h2", { className: "text-agg-2xl font-agg-bold text-agg-foreground", children: labels.onboarding.connectKalshiModal.title }),
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-agg-base leading-agg-6 text-agg-foreground", children: labels.onboarding.connectKalshiModal.description })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex flex-col gap-4 w-full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex flex-col gap-3 rounded-agg-xl bg-agg-secondary-hover p-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-agg-xs font-agg-bold uppercase leading-agg-4 text-agg-muted-foreground", children: labels.onboarding.connectKalshiModal.stepOne.label }),
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground", children: labels.onboarding.connectKalshiModal.stepOne.title })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "space-y-0 text-agg-sm leading-agg-5 text-agg-foreground", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { children: labels.onboarding.connectKalshiModal.stepOne.instructions.signIn }),
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("p", { children: [
+              labels.onboarding.connectKalshiModal.stepOne.instructions.goToProfilePrefix,
+              " ",
+              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "font-agg-bold", children: labels.onboarding.connectKalshiModal.stepOne.instructions.profileText }),
+              labels.onboarding.connectKalshiModal.stepOne.instructions.goToProfileSeparator,
+              " ",
+              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "text-agg-muted-foreground", children: labels.onboarding.connectKalshiModal.stepOne.instructions.profileUrl })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("p", { children: [
+              labels.onboarding.connectKalshiModal.stepOne.instructions.clickCreateKeyPrefix,
+              " ",
+              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "font-agg-bold", children: labels.onboarding.connectKalshiModal.stepOne.instructions.createKeyText }),
+              labels.onboarding.connectKalshiModal.stepOne.instructions.clickCreateKeySuffix
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("p", { children: [
+              labels.onboarding.connectKalshiModal.stepOne.instructions.selectPermissionsPrefix,
+              " ",
+              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "font-agg-bold", children: labels.onboarding.connectKalshiModal.stepOne.instructions.readWriteText }),
+              labels.onboarding.connectKalshiModal.stepOne.instructions.selectPermissionsSuffix
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { children: labels.onboarding.connectKalshiModal.stepOne.instructions.createKey })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("p", { className: "text-agg-sm leading-agg-5 text-agg-foreground", children: [
+            labels.onboarding.connectKalshiModal.stepOne.footerLineOne,
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("br", {}),
+            labels.onboarding.connectKalshiModal.stepOne.footerLineTwo
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex flex-col gap-3 rounded-agg-xl bg-agg-secondary-hover p-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-agg-xs font-agg-bold uppercase leading-agg-4 text-agg-muted-foreground", children: labels.onboarding.connectKalshiModal.stepTwo.label }),
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground", children: labels.onboarding.connectKalshiModal.stepTwo.title })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-agg-sm leading-agg-5 text-agg-foreground", children: labels.onboarding.connectKalshiModal.stepTwo.description }),
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex flex-col gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+              "label",
+              {
+                htmlFor: "kalshi-api-key-id",
+                className: "text-agg-sm font-agg-bold text-agg-foreground",
+                children: labels.onboarding.connectKalshiModal.stepTwo.apiKeyIdLabel
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+              "input",
+              {
+                id: "kalshi-api-key-id",
+                type: "text",
+                value: apiKeyId,
+                onChange: (e) => setApiKeyId(e.target.value),
+                placeholder: labels.onboarding.connectKalshiModal.stepTwo.apiKeyIdPlaceholder,
+                className: cn(
+                  "w-full px-3 py-2.5 h-10",
+                  "rounded-agg-md border border-agg-separator",
+                  "bg-agg-secondary text-agg-base text-agg-foreground",
+                  "placeholder:text-agg-muted-foreground",
+                  "outline-none",
+                  "focus:border-agg-primary focus:ring-1 focus:ring-agg-primary",
+                  "transition-colors"
+                )
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex flex-col gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+              "label",
+              {
+                htmlFor: "kalshi-private-key",
+                className: "text-agg-sm font-agg-bold text-agg-foreground",
+                children: labels.onboarding.connectKalshiModal.stepTwo.privateKeyLabel
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+              "textarea",
+              {
+                id: "kalshi-private-key",
+                value: privateKey,
+                onChange: (e) => setPrivateKey(e.target.value),
+                placeholder: labels.onboarding.connectKalshiModal.stepTwo.privateKeyPlaceholder,
+                rows: 3,
+                className: cn(
+                  "w-full px-3 py-2.5",
+                  "rounded-agg-md border border-agg-separator",
+                  "bg-agg-secondary text-agg-base text-agg-foreground",
+                  "placeholder:text-agg-muted-foreground",
+                  "outline-none resize-none",
+                  "focus:border-agg-primary focus:ring-1 focus:ring-agg-primary",
+                  "transition-colors"
+                )
+              }
+            )
+          ] })
+        ] })
+      ] }),
+      error ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex items-center gap-2 w-full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(WarningIcon, { className: "h-3.5 w-3.5 shrink-0 text-agg-error" }),
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-agg-sm leading-agg-5 text-agg-error", children: error })
+      ] }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex items-center justify-between w-full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-agg-base text-agg-foreground", children: labels.onboarding.connectKalshiModal.help.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+            "a",
+            {
+              href: "#",
+              className: "text-agg-base font-agg-bold text-agg-primary hover:underline",
+              children: labels.onboarding.connectKalshiModal.help.docsLinkLabel
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "h-3 w-px bg-agg-separator" }),
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+            "a",
+            {
+              href: "#",
+              className: "text-agg-base font-agg-bold text-agg-primary hover:underline",
+              children: labels.onboarding.connectKalshiModal.help.tutorialLinkLabel
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex items-center gap-3 justify-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Button, { variant: "secondary", size: "m", onClick: handleCancel, children: labels.onboarding.connectKalshiModal.actions.cancel }),
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+          Button,
+          {
+            variant: "primary",
+            size: "m",
+            onClick: handleVerify,
+            disabled: !canVerify,
+            isLoading: verifying,
+            children: labels.onboarding.connectKalshiModal.actions.verifyConnection
+          }
+        )
+      ] })
+    ] }) })
+  ] }) });
+};
+ConnectKalshiModal.displayName = "ConnectKalshiModal";
+
+// src/onboarding/steps/connect-onchain-modal.tsx
+var import_react3 = require("react");
+var import_hooks8 = require("@agg-market/hooks");
+var Dialog3 = __toESM(require("@radix-ui/react-dialog"));
+var import_jsx_runtime36 = require("react/jsx-runtime");
+var ConnectOnchainModal = ({
+  open,
+  onOpenChange,
+  onConnect
+}) => {
+  const labels = (0, import_hooks8.useLabels)();
+  const [connecting, setConnecting] = (0, import_react3.useState)(false);
+  const [error, setError] = (0, import_react3.useState)();
+  const handleCancel = (0, import_react3.useCallback)(() => {
+    onOpenChange(false);
+  }, [onOpenChange]);
+  const handleConnect = (0, import_react3.useCallback)(() => __async(void 0, null, function* () {
+    if (connecting)
+      return;
+    setConnecting(true);
+    setError(void 0);
+    try {
+      yield onConnect();
+      onOpenChange(false);
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : labels.onboarding.connectOnchainModal.fallbackError
+      );
+    } finally {
+      setConnecting(false);
+    }
+  }), [connecting, labels.onboarding.connectOnchainModal.fallbackError, onConnect, onOpenChange]);
+  const handleOpenChange = (0, import_react3.useCallback)(
+    (value) => {
+      if (value) {
+        setError(void 0);
+        setConnecting(false);
+      }
+      onOpenChange(value);
+    },
+    [onOpenChange]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Modal, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+    Modal.Container,
+    {
+      maxWidth: "600px",
+      "aria-label": labels.onboarding.connectOnchainModal.ariaLabel,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Dialog3.Title, { className: "sr-only", children: labels.onboarding.connectOnchainModal.title }),
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Modal.Header, { hideClose: false, hideBorder: true }),
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Modal.Body, { classNames: { root: "px-5 pt-0 pb-6 sm:px-8 sm:pt-0 sm:pb-8" }, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex flex-col gap-8 items-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex flex-col gap-4 items-center text-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("h2", { className: "text-agg-2xl font-agg-bold text-agg-foreground", children: labels.onboarding.connectOnchainModal.title }),
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "text-agg-base leading-agg-6 text-agg-foreground", children: labels.onboarding.connectOnchainModal.description })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex w-full flex-col items-center gap-4 rounded-agg-xl bg-agg-secondary-hover p-6", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "text-agg-sm font-agg-bold uppercase leading-agg-5 text-agg-muted-foreground", children: labels.onboarding.connectOnchainModal.supportedVenuesLabel }),
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "flex flex-wrap items-center justify-center gap-x-4 gap-y-3", children: ONCHAIN_VENUES.map((venue, index) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-center gap-[6px]", children: [
+              index > 0 && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "mr-2.5 h-3 w-px bg-agg-separator" }),
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(VenueLogo, { venue, size: "m", className: "h-5 w-5" }),
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "text-agg-base text-agg-foreground", children: labels.venues[venue] })
+            ] }, venue)) })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex flex-col gap-6 items-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex flex-col gap-3 items-center", children: [
+              error ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(WarningIcon, { className: "h-3.5 w-3.5 shrink-0 text-agg-error" }),
+                /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "text-agg-sm leading-agg-5 text-agg-error", children: error })
+              ] }) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Button, { variant: "primary", size: "l", onClick: handleConnect, isLoading: connecting, children: labels.onboarding.connectOnchainModal.connect })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+              Button,
+              {
+                variant: "tertiary",
+                size: "m",
+                className: "h-auto p-0 text-agg-primary hover:bg-transparent hover:text-agg-primary-hover",
+                onClick: handleCancel,
+                children: labels.onboarding.connectOnchainModal.cancel
+              }
+            )
+          ] })
+        ] }) })
+      ]
+    }
+  ) });
+};
+ConnectOnchainModal.displayName = "ConnectOnchainModal";
+
+// src/onboarding/index.tsx
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var OnboardingModal = ({
+  open,
+  onOpenChange,
+  onProfileSubmit,
+  onConnectOnchain,
+  onConnectKalshi,
+  onComplete,
+  howItWorksIcons,
+  connectedOnchain = false,
+  connectedKalshi = false
+}) => {
+  var _a;
+  const labels = (0, import_hooks9.useLabels)();
+  const [step, setStep] = (0, import_react4.useState)(ONBOARDING_STEPS.HOW_IT_WORKS);
+  const stepLabels = {
+    [ONBOARDING_STEPS.HOW_IT_WORKS]: labels.onboarding.modal.stepHowItWorks,
+    [ONBOARDING_STEPS.PROFILE_SETUP]: labels.onboarding.modal.stepProfileSetup,
+    [ONBOARDING_STEPS.CONNECT_ACCOUNTS]: labels.onboarding.modal.stepConnectAccounts
+  };
+  const resolvedTitle = (_a = stepLabels[step]) != null ? _a : labels.onboarding.modal.title;
+  const [kalshiModalOpen, setKalshiModalOpen] = (0, import_react4.useState)(false);
+  const [kalshiConnected, setKalshiConnected] = (0, import_react4.useState)(false);
+  const [onchainModalOpen, setOnchainModalOpen] = (0, import_react4.useState)(false);
+  const [onchainConnected, setOnchainConnected] = (0, import_react4.useState)(false);
+  (0, import_react4.useEffect)(() => {
+    if (open) {
+      setStep(ONBOARDING_STEPS.HOW_IT_WORKS);
+      setKalshiConnected(false);
+      setOnchainConnected(false);
+    }
+  }, [open]);
+  const handleHowItWorksContinue = (0, import_react4.useCallback)(() => {
+    setStep(ONBOARDING_STEPS.PROFILE_SETUP);
+  }, []);
+  const handleProfileContinue = (0, import_react4.useCallback)(
+    (data) => {
+      onProfileSubmit == null ? void 0 : onProfileSubmit(data);
+      setStep(ONBOARDING_STEPS.CONNECT_ACCOUNTS);
+    },
+    [onProfileSubmit]
+  );
+  const handleConnectContinue = (0, import_react4.useCallback)(() => {
+    onComplete == null ? void 0 : onComplete();
+  }, [onComplete]);
+  const handleOpenOnchainModal = (0, import_react4.useCallback)(() => {
+    setOnchainModalOpen(true);
+  }, []);
+  const handleOnchainConnect = (0, import_react4.useCallback)(() => __async(void 0, null, function* () {
+    yield onConnectOnchain == null ? void 0 : onConnectOnchain();
+    setOnchainConnected(true);
+  }), [onConnectOnchain]);
+  const handleOpenKalshiModal = (0, import_react4.useCallback)(() => {
+    setKalshiModalOpen(true);
+  }, []);
+  const handleKalshiVerify = (0, import_react4.useCallback)(
+    (credentials) => __async(void 0, null, function* () {
+      yield onConnectKalshi == null ? void 0 : onConnectKalshi(credentials);
+      setKalshiConnected(true);
+    }),
+    [onConnectKalshi]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Modal, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Modal.Container, { maxWidth: "600px", "aria-label": resolvedTitle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Dialog4.Title, { className: "sr-only", children: resolvedTitle }),
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Modal.Body, { classNames: { root: "px-5 py-6 sm:px-10 sm:py-8" }, children: [
+        step === ONBOARDING_STEPS.HOW_IT_WORKS && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(HowItWorksStep, { onContinue: handleHowItWorksContinue, icons: howItWorksIcons }),
+        step === ONBOARDING_STEPS.PROFILE_SETUP && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ProfileSetupStep, { onContinue: handleProfileContinue }),
+        step === ONBOARDING_STEPS.CONNECT_ACCOUNTS && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+          ConnectAccountsStep,
+          {
+            onConnectOnchain: handleOpenOnchainModal,
+            onConnectKalshi: handleOpenKalshiModal,
+            onContinue: handleConnectContinue,
+            connectedOnchain: connectedOnchain || onchainConnected,
+            connectedKalshi: connectedKalshi || kalshiConnected
+          }
+        )
+      ] })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      ConnectOnchainModal,
+      {
+        open: onchainModalOpen,
+        onOpenChange: setOnchainModalOpen,
+        onConnect: handleOnchainConnect
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      ConnectKalshiModal,
+      {
+        open: kalshiModalOpen,
+        onOpenChange: setKalshiModalOpen,
+        onVerify: handleKalshiVerify
+      }
+    )
+  ] });
+};
+OnboardingModal.displayName = "OnboardingModal";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ConnectAccountsStep,
+  ConnectKalshiModal,
+  ConnectOnchainModal,
+  HowItWorksStep,
+  OnboardingModal,
+  ProfileSetupStep
+});