@hyperbridge/ui 0.0.2

package/dist/index.mjs

@@ -0,0 +1,4812 @@
+import {
+  Alert_default,
+  ArrowBottomTop_default,
+  ArrowRight_default,
+  ArrowSplit_default,
+  ArrowTriangleBottom_default,
+  ArrowUpRight_default,
+  Check_default,
+  ChevronBottomDown_default,
+  ChevronDoubleRight_default,
+  ChevronDownSmall_default,
+  CircleInfo_default,
+  CirclePlaceholderDashed_default,
+  CirclePlaceholder_default,
+  Circle_default,
+  Clock_default,
+  Copy_default,
+  Gas_default,
+  Pen_default,
+  Percent_default,
+  Power_default,
+  RotateCcw_default,
+  Search_default,
+  Server_default,
+  StepBack_default,
+  Wallet_default,
+  XCircle_default,
+  XIcon_default,
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-O7MCYCGJ.mjs";
+
+// src/components/atoms/search-input.tsx
+import { cva } from "class-variance-authority";
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function isSSR() {
+  return typeof window === "undefined";
+}
+function shortenAccountAddress(address, length = 6) {
+  return `${address.substring(0, length)}...${address.substring(
+    address.length - length
+  )}`;
+}
+var defaultPolkadotImage = {
+  name: "Polkadot",
+  src: "https://app.hyperbridge.network/networks/polkadot.png"
+};
+var defaultEvmImage = {
+  name: "Ethereum",
+  src: "https://app.hyperbridge.network/networks/ethereum.png"
+};
+
+// src/components/atoms/search-input.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function SearchInput(_a) {
+  var _b = _a, {
+    className = "h-[2rem]",
+    size = "sm"
+  } = _b, props = __objRest(_b, [
+    "className",
+    "size"
+  ]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center bg-brand-black-350 rounded-md relative",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          Search_default,
+          {
+            width: "1rem",
+            height: "1rem",
+            className: "basis-[1rem] absolute start-[0.625rem] shrink-0"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          __spreadProps(__spreadValues({
+            placeholder: "Search for transaction"
+          }, props), {
+            type: "text",
+            className: searchInput({ size })
+          })
+        )
+      ]
+    }
+  );
+}
+var searchInput = cva(
+  "indent-[1.875rem] text-white py-[0.5rem] flex-1 h-full !outline-none rounded-md ring-1 ring-transparent focus:text-brand-white-500 focus-visible:ring-brand-black-300 placeholder:text-brand-black-100 pr-[0.625rem]",
+  {
+    variants: {
+      size: {
+        sm: "text-[calc(12rem/16)]",
+        md: "text-[calc(13rem/16)]"
+      }
+    },
+    defaultVariants: {
+      size: "sm"
+    }
+  }
+);
+
+// src/components/atoms/separator.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function LabelledSeperator(props) {
+  return /* @__PURE__ */ jsxs2("div", { role: "presentation", className: "flex items-center", children: [
+    /* @__PURE__ */ jsx2("div", { className: "flex-1 border-t-2 border-brand-black-500" }),
+    /* @__PURE__ */ jsx2("div", { className: "inline-block px-2 text-xs", children: props.children }),
+    /* @__PURE__ */ jsx2("div", { className: "flex-1 border-t-2 border-brand-black-500" })
+  ] });
+}
+
+// src/components/atoms/text.tsx
+import { Slot } from "@radix-ui/react-slot";
+import { cva as cva2 } from "class-variance-authority";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var variant_ = {
+  disiplay: "text-display font-bold",
+  h1: "text-h1 font-bold",
+  h2: "text-h2 font-medium",
+  h3: "text-h3 font-bold",
+  h4: "text-h4 font-bold",
+  h5: "text-h5 font-bold",
+  h6: "text-h6 font-bold",
+  h7: "text-[1.25rem] font-medium",
+  body1: "text-body-2 font-medium",
+  body2: "text-body font-medium",
+  p: "text-base font-normal",
+  caption: "text-caption font-medium",
+  caption2: "text-caption-2 font-medium"
+};
+var textCVA = cva2("", {
+  variants: {
+    variant: variant_
+  },
+  defaultVariants: {
+    variant: "body1"
+  }
+});
+function Text(_a) {
+  var _b = _a, {
+    variant
+  } = _b, props = __objRest(_b, [
+    "variant"
+  ]);
+  const _a2 = props, { asChild, className } = _a2, _props = __objRest(_a2, ["asChild", "className"]);
+  const Component = asChild ? Slot : "p";
+  return /* @__PURE__ */ jsx3(Component, __spreadProps(__spreadValues({}, _props), { className: textCVA({ variant, className }), children: props.children }));
+}
+function ListHeading({ text, count }) {
+  return /* @__PURE__ */ jsxs3(Text, { variant: "body2", className: "leading-[1.25rem]", children: [
+    /* @__PURE__ */ jsx3("span", { className: "text-brand-white-500", children: text }),
+    "\xA0",
+    /* @__PURE__ */ jsx3("span", { className: "text-brand-black-100", children: count })
+  ] });
+}
+
+// src/components/badge-icon.tsx
+import { Image } from "@unpic/react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var safeRem = (value, defaultValue) => {
+  const parsed = Number.parseFloat(String(value));
+  if (Number.isNaN(parsed)) return defaultValue;
+  return `${parsed}rem`;
+};
+function BadgeIcon(props) {
+  const {
+    src = "",
+    className,
+    alt = "--",
+    badgeSrc = "",
+    badgeAlt = "",
+    outline = false
+  } = props;
+  const size = safeRem(props.size, "2rem");
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      "data-chain": "true",
+      "data-token": "BNC",
+      className: "relative rounded-full w-[var(--badge-size)] h-[var(--badge-size)]",
+      style: {
+        fontSize: size,
+        "--badge-size": size
+      },
+      children: [
+        /* @__PURE__ */ jsx4(
+          Image,
+          {
+            src,
+            layout: "constrained",
+            width: 400,
+            aspectRatio: 1,
+            alt,
+            draggable: false,
+            objectFit: "cover",
+            className: cn(
+              "absolute inset-0 aspect-square h-full w-full rounded-full bg-white shrink-0",
+              className,
+              {
+                "border border-brand-black-600": outline
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx4(
+          "div",
+          {
+            className: cn(
+              "w-[0.4375em] h-[0.4375em] right-0 bottom-0 absolute bg-white rounded-[0.15625em] overflow-hidden outline outline-offset-[-1px] outline-neutral-900",
+              {
+                "outline-brand-black-600": outline
+              }
+            ),
+            children: /* @__PURE__ */ jsx4(
+              Image,
+              {
+                src: badgeSrc,
+                layout: "constrained",
+                width: 24,
+                aspectRatio: 1,
+                draggable: false,
+                objectFit: "cover",
+                className: "w-full h-full",
+                alt: badgeAlt
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function TokenTransferPair(props) {
+  const { fromToken, toToken } = props;
+  return /* @__PURE__ */ jsxs4("div", { className: "shrink-0 flex gap-1 items-center", children: [
+    /* @__PURE__ */ jsx4(BadgeIcon, __spreadProps(__spreadValues({}, fromToken), { size: props.size })),
+    /* @__PURE__ */ jsx4(ArrowRight_default, { width: "0.75rem", height: "0.75rem" }),
+    /* @__PURE__ */ jsx4(BadgeIcon, __spreadProps(__spreadValues({}, toToken), { size: props.size }))
+  ] });
+}
+
+// src/components/button/button.tsx
+import { cva as cva4 } from "class-variance-authority";
+
+// src/@/ui/button.tsx
+import { Slot as Slot2 } from "@radix-ui/react-slot";
+import { cva as cva3 } from "class-variance-authority";
+
+// src/components/button/shared.ts
+var sharedButtonStyles = {
+  normalize: "inline-flex items-center justify-center select-none gap-2 whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  default: "bg-white text-brand-black-600 hover:bg-brand-white-400 focus-visible:ring-brand-neutral-200 disabled:opacity-100 disabled:text-brand-neutral-200",
+  secondary: "bg-brand-black-500 text-white focus-visible:ring-brand-black-200 disabled:text-brand-black-100 hover:bg-brand-black-300 disabled:opacity-100",
+  level_1: "bg-brand-black-350 text-white focus-visible:ring-brand-black-200 disabled:text-brand-black-100 hover:bg-brand-black-300 disabled:opacity-100",
+  level_2: "bg-brand-black-300 text-white focus-visible:ring-brand-black-200 disabled:text-brand-black-100 hover:bg-brand-black-200 disabled:opacity-100",
+  primary: "bg-white text-brand-black-600 hover:bg-brand-white-400 focus-visible:ring-brand-neutral-200 disabled:opacity-100 disabled:bg-brand-black-500 disabled:text-brand-black-100",
+  destructive: "bg-brand-danger-200 text-brand-danger-500 pointer-events-none focus-visible:ring-brand-danger-200 disabled:opacity-100",
+  unstyled: ""
+};
+
+// src/@/ui/button.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var buttonVariants = cva3(
+  "inline-flex items-center justify-center select-none gap-2 whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive cursor-pointer",
+  {
+    variants: {
+      variant: {
+        default: sharedButtonStyles.default,
+        primary: sharedButtonStyles.primary,
+        secondary: sharedButtonStyles.secondary,
+        level_1: sharedButtonStyles.level_1,
+        level_2: sharedButtonStyles.level_2,
+        unset: sharedButtonStyles.unstyled,
+        message: "bg-brand-black-300 text-white hover:brightness-110",
+        destructive: sharedButtonStyles.destructive,
+        outline: "border bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        sm: "h-[30px] px-2 py-1.5 text-xs rounded-[0.625rem] gap-1.5 has-[>svg]:px-2.5",
+        xs: "h-[24px] px-1.5 py-1 text-xs rounded-lg gap-1 has-[>svg]:px-2.5",
+        default: "h-[46px] px-4 text-base py-2 rounded-2xl gap-2 has-[>svg]:px-3",
+        lg: "h-[48px] px-4 py-3.5 rounded-2xl text-base gap-2 has-[>svg]:px-4",
+        xl: "h-[52px] px-4 py-3.5 text-lg rounded-2xl gap-3 has-[>svg]:px-4",
+        unset: ""
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button(_a) {
+  var _b = _a, {
+    className,
+    variant,
+    size,
+    asChild = false,
+    animatedGradient = false
+  } = _b, props = __objRest(_b, [
+    "className",
+    "variant",
+    "size",
+    "asChild",
+    "animatedGradient"
+  ]);
+  const Comp = asChild ? Slot2 : "button";
+  if (animatedGradient) {
+    return /* @__PURE__ */ jsx5("div", { className: "relative p-[1.5px] rounded-2xl animated-gradient-border", children: /* @__PURE__ */ jsx5(
+      Comp,
+      __spreadValues({
+        "data-slot": "button",
+        className: cn(buttonVariants({ variant, size, className }))
+      }, props)
+    ) });
+  }
+  return /* @__PURE__ */ jsx5(
+    Comp,
+    __spreadValues({
+      "data-slot": "button",
+      className: cn(buttonVariants({ variant, size, className }))
+    }, props)
+  );
+}
+
+// src/components/button/button.tsx
+import { Slot as Slot3 } from "@radix-ui/react-slot";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function Button2(_a) {
+  var _b = _a, { children } = _b, other = __objRest(_b, ["children"]);
+  return /* @__PURE__ */ jsx6(Button, __spreadProps(__spreadValues({ type: "button" }, other), { children }));
+}
+function ButtonAccessory(props) {
+  const { leftIcon = null, rightIcon = null, size = "default" } = props;
+  const accessory_classname = cn(
+    "inline-flex items-center justify-center aspect-square",
+    ACCESSORY_MAP[size]
+  );
+  return /* @__PURE__ */ jsxs5(
+    "span",
+    {
+      className: cn("inline-flex justify-center items-center", GAP_MAP[size]),
+      children: [
+        leftIcon ? /* @__PURE__ */ jsx6("span", { className: accessory_classname, children: leftIcon }) : null,
+        props.children,
+        rightIcon ? /* @__PURE__ */ jsx6("span", { className: accessory_classname, children: rightIcon }) : null
+      ]
+    }
+  );
+}
+var GAP_MAP = {
+  xs: "gap-1",
+  sm: "gap-1.5",
+  default: "gap-2",
+  lg: "gap-2",
+  xl: "gap-3"
+};
+var ACCESSORY_MAP = {
+  xs: "w-[14px]",
+  sm: "w-[16px]",
+  default: "w-[20px]",
+  lg: "w-[20px]",
+  xl: "w-[24px]"
+};
+function AccessoryButton(_a) {
+  var _b = _a, {
+    children,
+    leftIcon,
+    rightIcon
+  } = _b, other = __objRest(_b, [
+    "children",
+    "leftIcon",
+    "rightIcon"
+  ]);
+  return /* @__PURE__ */ jsx6(Button, __spreadProps(__spreadValues({ type: "button" }, other), { children: /* @__PURE__ */ jsx6(
+    ButtonAccessory,
+    {
+      size: other.size,
+      leftIcon,
+      rightIcon,
+      children
+    }
+  ) }));
+}
+var cvaIconButton = cva4(
+  "aspect-square inline-flex items-center justify-center select-none gap-2 transition-all disabled:pointer-events-none disabled:opacity-50 outline-none focus-visible:border-ring focus-visible:ring-ring focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: sharedButtonStyles.default,
+        secondary: sharedButtonStyles.secondary,
+        level_1: sharedButtonStyles.level_1,
+        level_2: sharedButtonStyles.level_2,
+        primary: sharedButtonStyles.primary,
+        destructive: sharedButtonStyles.destructive,
+        message: "bg-brand-black-300 text-white hover:brightness-110",
+        unset: ""
+      },
+      size: {
+        xs: "w-[20px]",
+        smx: "w-[30px]",
+        sm: "w-[32px]",
+        default: "w-[40px]",
+        lg: "w-[48px]",
+        xl: "w-[52px]",
+        unset: ""
+      },
+      rounded: {
+        xs: "rounded-[8px]",
+        smx: "rounded-[10px]",
+        sm: "rounded-[10px]",
+        lg: "rounded-[16px]",
+        xl: "rounded-[16px]",
+        default: "rounded-[16px]",
+        full: "rounded-full",
+        unset: ""
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function IconButton(props) {
+  const _a = props, {
+    variant,
+    asChild = false,
+    size = "default",
+    rounded = "default",
+    className
+  } = _a, _props = __objRest(_a, [
+    "variant",
+    "asChild",
+    "size",
+    "rounded",
+    "className"
+  ]);
+  const Component = asChild ? Slot3 : "button";
+  return /* @__PURE__ */ jsx6(
+    Component,
+    __spreadProps(__spreadValues({
+      type: "button"
+    }, _props), {
+      className: cvaIconButton({
+        variant,
+        size,
+        rounded: rounded === "default" ? size : "full",
+        className: cn("inline-flex items-center justify-center", className)
+      }),
+      children: props.children
+    })
+  );
+}
+
+// src/components/button/tag-button.tsx
+import { Image as Image2 } from "@unpic/react";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+function TagButton(props) {
+  const _a = props, { className, variant = "trigger" } = _a, _props = __objRest(_a, ["className", "variant"]);
+  return /* @__PURE__ */ jsxs6(
+    BaseButton,
+    __spreadProps(__spreadValues({
+      type: "button"
+    }, _props), {
+      className: cn("h-10", className, {
+        "pe-3": variant === "badge"
+      }),
+      children: [
+        /* @__PURE__ */ jsx7(
+          Image2,
+          {
+            src: props.src,
+            alt: props.symbol,
+            layout: "constrained",
+            className: "w-5 h-5 shrink-0 rounded-full",
+            width: 20,
+            aspectRatio: 1
+          }
+        ),
+        /* @__PURE__ */ jsx7("span", { className: "text-[14px] w-max shrink-0 overflow-hidden", children: props.symbol }),
+        variant === "trigger" ? /* @__PURE__ */ jsx7("span", { className: "w-4 h-4 shrink-0 inline-flex items-center justify-center text-brand-black-100 aspect-square", children: /* @__PURE__ */ jsx7(ChevronDownSmall_default, { className: "size-[1rem]" }) }) : null
+      ]
+    })
+  );
+}
+function SwapTokenButton(props) {
+  const _a = props, { token, network } = _a, _props = __objRest(_a, ["token", "network"]);
+  return /* @__PURE__ */ jsxs6(BaseButton, __spreadProps(__spreadValues({}, _props), { children: [
+    /* @__PURE__ */ jsx7("span", { className: "inline-flex text-[0.875rem]", children: /* @__PURE__ */ jsx7(
+      BadgeIcon,
+      {
+        src: token.image,
+        alt: token.symbol,
+        badgeAlt: network.name,
+        badgeSrc: network.image
+      }
+    ) }),
+    /* @__PURE__ */ jsxs6("span", { className: "flex flex-col font-medium shrink-0 text-start max-w-[10ch]", children: [
+      /* @__PURE__ */ jsx7("span", { className: "text-sm  uppercase text-brand-white-500 leading-[1.2]", children: token.symbol.toLowerCase() }),
+      /* @__PURE__ */ jsxs6("span", { className: "text-xs text-brand-black-100 leading-[1.2]", children: [
+        "on ",
+        /* @__PURE__ */ jsx7("span", { className: "capitalize", children: network.name.toLowerCase() })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx7("span", { className: "w-4 h-4 shrink-0 ml-1 inline-flex items-center justify-center text-brand-black-100 aspect-square", children: /* @__PURE__ */ jsx7(ChevronDownSmall_default, { className: "size-3", strokeWidth: 3 }) })
+  ] }));
+}
+function BridgeTokenButton(props) {
+  const _a = props, { token } = _a, _props = __objRest(_a, ["token"]);
+  return /* @__PURE__ */ jsxs6(BaseButton, __spreadProps(__spreadValues({}, _props), { children: [
+    /* @__PURE__ */ jsx7(
+      Image2,
+      {
+        src: token.image,
+        alt: token.symbol,
+        layout: "constrained",
+        className: "w-[1.75rem] h-[1.75rem] shrink-0 rounded-full",
+        width: 20,
+        aspectRatio: 1
+      }
+    ),
+    /* @__PURE__ */ jsx7("span", { className: "flex flex-col font-medium shrink-0 text-start max-w-[10ch]", children: /* @__PURE__ */ jsx7("span", { className: "text-sm uppercase text-brand-white-500", children: token.symbol.toLowerCase() }) }),
+    /* @__PURE__ */ jsx7("span", { className: "w-4 h-4 shrink-0 ml-1 inline-flex items-center justify-center text-brand-black-100 aspect-square", children: /* @__PURE__ */ jsx7(ChevronDownSmall_default, { strokeWidth: 3, className: "size-[0.8em]" }) })
+  ] }));
+}
+function BaseButton(props) {
+  const _a = props, { className } = _a, restProps = __objRest(_a, ["className"]);
+  return /* @__PURE__ */ jsx7(
+    "button",
+    __spreadProps(__spreadValues({
+      type: "button"
+    }, restProps), {
+      className: cn(
+        sharedButtonStyles.normalize,
+        sharedButtonStyles.secondary,
+        "items-center font-medium px-[0.375rem] pe-[0.5rem] py-[0.375rem] gap-[8px] justify-center rounded-[1rem] hover:brightness-110 bg-brand-black-300",
+        className
+      ),
+      children: props.children
+    })
+  );
+}
+
+// src/components/button/gradient-button.tsx
+import { Slot as Slot4 } from "@radix-ui/react-slot";
+import React from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var GradientButton = React.forwardRef((props, ref) => {
+  const _a = props, { asChild, variant, size, className } = _a, PROPS = __objRest(_a, ["asChild", "variant", "size", "className"]);
+  const Comp = asChild ? Slot4 : "button";
+  return /* @__PURE__ */ jsx8("div", { className: "relative p-[1.5px] rounded-2xl animated-gradient-border", children: /* @__PURE__ */ jsx8(
+    Comp,
+    __spreadProps(__spreadValues({
+      ref,
+      "data-slot": "button"
+    }, PROPS), {
+      className: cn("w-full", buttonVariants({ variant, size, className }))
+    })
+  ) });
+});
+
+// src/@/ui/input.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+function Input(_a) {
+  var _b = _a, { className, type } = _b, props = __objRest(_b, ["className", "type"]);
+  return /* @__PURE__ */ jsx9(
+    "input",
+    __spreadValues({
+      type,
+      "data-slot": "input",
+      className: cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )
+    }, props)
+  );
+}
+
+// src/lib/form-utils.ts
+var createKeyDownHandler = () => {
+  return (e) => {
+    if (["e", "E", "+", "-"].includes(e.key) || /^[a-zA-Z]$/.test(e.key)) {
+      e.preventDefault();
+    }
+  };
+};
+
+// src/components/form/swap-form.tsx
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+function SwapForm({
+  senderAddress,
+  senderBalance = "0",
+  senderAmount = "",
+  senderUsdValue = "0",
+  senderToken = {
+    symbol: "DOT",
+    image: "https://app.hyperbridge.network/networks/polkadot.png",
+    network: {
+      name: "Polkadot",
+      image: "https://app.hyperbridge.network/networks/polkadot.png"
+    }
+  },
+  onSenderAmountChange,
+  onSenderTokenSelect,
+  receiverAddress,
+  receiverAmount = "0",
+  receiverUsdValue = "0",
+  receiverToken = {
+    symbol: "DOT",
+    image: "https://app.hyperbridge.network/networks/polkadot.png",
+    network: {
+      name: "Ethereum",
+      image: "https://app.hyperbridge.network/networks/ethereum.png"
+    }
+  },
+  onReceiverTokenSelect,
+  onReceiverAddressEdit,
+  percentagePresets = [25, 50, 100],
+  activePercentage = null,
+  onPercentageClick,
+  onPercentageReset,
+  onInvert,
+  estimatedTime = "~ 10 min",
+  isLoading = false,
+  className,
+  error = false
+}) {
+  const handleKeyDown = createKeyDownHandler();
+  const handlePercentageClick = (percentage) => {
+    const numericBalance = Number.parseFloat(senderBalance.replace(/[^\d.]/g, "")) || 0;
+    const amount = numericBalance * percentage / 100;
+    onSenderAmountChange == null ? void 0 : onSenderAmountChange(amount.toString());
+    onPercentageClick == null ? void 0 : onPercentageClick(percentage);
+  };
+  const handleInvert = () => {
+    onInvert == null ? void 0 : onInvert();
+  };
+  const formatPercentageLabel = (percentage) => {
+    return percentage === 100 ? "Max" : `${percentage}%`;
+  };
+  return /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      className: cn(
+        "flex flex-col bg-brand-black-550 h-[300px] max-w-[440px] rounded-[16px]",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx10(
+          "div",
+          {
+            "data-testid": "send-section",
+            className: cn(
+              "relative h-1/2 -mx-[1.5px] rounded-[16px] p-[1.5px] transition-all duration-200",
+              error ? "bg-brand-danger-500 focus-within:bg-brand-danger-500/60 hover:bg-brand-danger-500/60" : "bridge-form-border"
+            ),
+            children: /* @__PURE__ */ jsxs7("div", { className: "bg-brand-black-500 rounded-[14.5px] h-full p-3 relative", children: [
+              /* @__PURE__ */ jsxs7("div", { className: "w-full flex justify-between", children: [
+                /* @__PURE__ */ jsx10("div", { className: "w-1/2", children: /* @__PURE__ */ jsx10("p", { className: "text-caption text-brand-black-100 font-medium", children: "Send" }) }),
+                /* @__PURE__ */ jsx10("div", { className: "w-1/2", children: /* @__PURE__ */ jsxs7("div", { className: "text-caption text-brand-black-100 font-medium text-right flex items-center gap-1 justify-end", children: [
+                  /* @__PURE__ */ jsx10("span", { className: "max-w-[100px] truncate", children: senderAddress ? senderAddress : "Balance" }),
+                  " ",
+                  /* @__PURE__ */ jsx10("span", { className: "text-white max-w-[100px] truncate", children: isLoading ? /* @__PURE__ */ jsx10(
+                    "div",
+                    {
+                      className: cn(
+                        "w-8 h-3 bg-brand-black-200 animate-pulse rounded",
+                        error && "text-danger-500"
+                      )
+                    }
+                  ) : senderBalance })
+                ] }) })
+              ] }),
+              /* @__PURE__ */ jsxs7("div", { className: "flex mt-3", children: [
+                /* @__PURE__ */ jsx10(
+                  Input,
+                  {
+                    min: 0,
+                    type: "number",
+                    placeholder: "0",
+                    value: senderAmount,
+                    onChange: (event) => {
+                      onSenderAmountChange == null ? void 0 : onSenderAmountChange(event.target.value, event);
+                      onPercentageReset == null ? void 0 : onPercentageReset();
+                    },
+                    onKeyDown: handleKeyDown,
+                    disabled: isLoading,
+                    "data-testid": "sender-amount-input",
+                    className: "border-none ring-0 focus-visible:ring-0 focus-visible:ring-offset-0 text-[48px] leading-[1.2] h-[58px] p-0 text-white placeholder:text-brand-black-100 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none disabled:opacity-50"
+                  }
+                ),
+                /* @__PURE__ */ jsx10("div", { className: "w-[170px] pl-3 py-[13px]", children: /* @__PURE__ */ jsx10(
+                  SwapTokenButton,
+                  {
+                    network: senderToken.network,
+                    token: { image: senderToken.image, symbol: senderToken.symbol },
+                    onClick: onSenderTokenSelect,
+                    disabled: isLoading
+                  }
+                ) })
+              ] }),
+              /* @__PURE__ */ jsxs7("div", { className: "flex justify-between pt-1 pb-3", children: [
+                /* @__PURE__ */ jsxs7(
+                  "div",
+                  {
+                    "data-testid": "sender-usd-value",
+                    className: "flex items-center text-caption text-brand-black-100 font-medium min-h-6",
+                    children: [
+                      "$",
+                      isLoading ? /* @__PURE__ */ jsx10("div", { className: "w-8 h-3 bg-brand-black-200 animate-pulse rounded ml-1" }) : senderUsdValue
+                    ]
+                  }
+                ),
+                senderAddress && /* @__PURE__ */ jsx10("div", { className: "flex gap-[6px]", children: percentagePresets.map((percentage) => /* @__PURE__ */ jsx10(
+                  Button,
+                  {
+                    onClick: () => handlePercentageClick(percentage),
+                    disabled: isLoading,
+                    className: cn(
+                      "rounded-[60px] h-6 py-1 px-[9.5px] text-caption transition-colors",
+                      activePercentage === percentage ? "bg-white text-brand-black-500 hover:bg-white/90" : "text-brand-black-100 hover:text-white hover:bg-brand-black-200"
+                    ),
+                    variant: "message",
+                    size: "sm",
+                    children: formatPercentageLabel(percentage)
+                  },
+                  percentage
+                )) })
+              ] }),
+              /* @__PURE__ */ jsx10(
+                "button",
+                {
+                  type: "button",
+                  onClick: handleInvert,
+                  disabled: isLoading,
+                  "aria-label": "ArrowDownUp",
+                  className: "absolute group -bottom-[15px] left-1/2 -translate-x-1/2 bg-brand-black-200 rounded-[8px] p-[6px] border-[3px] border-brand-black-500 cursor-pointer hover:scale-105 transition-all duration-200 disabled:cursor-not-allowed disabled:hover:scale-100",
+                  children: /* @__PURE__ */ jsx10(
+                    ArrowBottomTop_default,
+                    {
+                      className: "text-brand-black-100 size-3.5 transition-transform duration-200"
+                    }
+                  )
+                }
+              )
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsxs7("div", { className: "h-1/2 relative p-3", children: [
+          /* @__PURE__ */ jsxs7("div", { className: "w-full flex justify-between", children: [
+            /* @__PURE__ */ jsx10("div", { className: "w-1/2", children: /* @__PURE__ */ jsx10("div", { className: "text-caption text-brand-black-100 font-medium", children: "Receive" }) }),
+            receiverAddress && /* @__PURE__ */ jsx10("div", { className: "w-1/2", children: /* @__PURE__ */ jsxs7("div", { className: "text-caption text-brand-black-100 font-medium text-right flex items-center justify-end", children: [
+              /* @__PURE__ */ jsx10("span", { className: "max-w-[100px] truncate", children: receiverAddress }),
+              " ",
+              /* @__PURE__ */ jsx10(
+                "button",
+                {
+                  type: "button",
+                  onClick: onReceiverAddressEdit,
+                  disabled: isLoading,
+                  "aria-label": "Edit receiver's address",
+                  className: "cursor-pointer hover:scale-110 transition-transform disabled:opacity-50 ml-1",
+                  children: /* @__PURE__ */ jsx10(Pen_default, { className: "size-3.5" })
+                }
+              )
+            ] }) })
+          ] }),
+          /* @__PURE__ */ jsxs7("div", { className: "flex mt-3", children: [
+            /* @__PURE__ */ jsx10("div", { className: "w-full text-[48px] leading-[1.2] h-[58px] flex items-center", children: isLoading ? /* @__PURE__ */ jsx10("div", { className: "w-16 h-12 bg-brand-black-200 animate-pulse rounded" }) : /* @__PURE__ */ jsx10(
+              "span",
+              {
+                "data-testid": "receiver-amount",
+                className: "text-brand-black-100 max-w-[250px] truncate",
+                children: receiverAmount
+              }
+            ) }),
+            /* @__PURE__ */ jsx10("div", { className: "w-[170px] pl-3 py-[13px]", children: /* @__PURE__ */ jsx10(
+              SwapTokenButton,
+              {
+                network: receiverToken.network,
+                token: {
+                  image: receiverToken.image,
+                  symbol: receiverToken.symbol
+                },
+                onClick: onReceiverTokenSelect,
+                disabled: isLoading
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsxs7("div", { className: "flex justify-between pt-1 pb-3", children: [
+            /* @__PURE__ */ jsxs7(
+              "div",
+              {
+                "data-testid": "receiver-usd-value",
+                className: "flex items-center text-caption text-brand-black-100 font-medium",
+                children: [
+                  "$",
+                  isLoading ? /* @__PURE__ */ jsx10("div", { className: "w-8 h-3 bg-brand-black-200 animate-pulse rounded ml-1" }) : receiverUsdValue
+                ]
+              }
+            ),
+            senderAddress && receiverAddress && /* @__PURE__ */ jsx10("div", { className: "text-brand-black-100 text-caption font-medium", children: isLoading ? /* @__PURE__ */ jsx10("div", { className: "w-12 h-3 bg-brand-black-200 animate-pulse rounded" }) : `~ ${estimatedTime}` })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/images/token-image.tsx
+import { Image as Image3 } from "@unpic/react";
+import { jsx as jsx11 } from "react/jsx-runtime";
+function TokenImage(props) {
+  return /* @__PURE__ */ jsx11(
+    Image3,
+    {
+      src: props.src,
+      alt: props.alt,
+      layout: "constrained",
+      className: cn("shrink-0 object-cover rounded-full", props.className),
+      width: 20,
+      aspectRatio: 1
+    }
+  );
+}
+
+// src/components/atoms/smooth-corners.tsx
+import { Slot as Slot5 } from "@radix-ui/react-slot";
+import React2 from "react";
+import { cva as cva5 } from "class-variance-authority";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var SmoothCornersSingleton = {
+  activated: false,
+  promise: null,
+  async init() {
+    if (isSSR()) return;
+    if (this.activated && this.promise) {
+      await this.promise;
+      return;
+    }
+    if ("CSS" in window) {
+      this.promise = (CSS.paintWorklet || paintWorklet).addModule(
+        "worklets/smooth-corners/paint.js"
+      );
+      this.activated = true;
+      await this.promise;
+    }
+  }
+};
+var smoothCornersVariants = cva5("superellipse", {
+  variants: {
+    size: {
+      sm: "superellipse-sm",
+      default: "superellipse-base"
+    }
+  },
+  defaultVariants: {
+    size: "default"
+  }
+});
+function SmoothCorners(props) {
+  const { size } = props;
+  const [isLoaded, setIsLoaded] = React2.useState(false);
+  React2.useEffect(() => {
+    SmoothCornersSingleton.init().then(() => setIsLoaded(true)).catch(() => {
+      console.error(
+        "SmoothCorners/SuperEllipsePainter: Error Loading Necessary Worklet"
+      );
+    });
+  }, []);
+  return /* @__PURE__ */ jsx12(
+    Slot5,
+    {
+      className: cn(
+        props.className,
+        smoothCornersVariants({ size }),
+        isLoaded ? "loaded" : ""
+      ),
+      children: props.children
+    }
+  );
+}
+
+// src/components/molecules/network-switcher.tsx
+import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+var NetworkSwitcher = ({
+  from,
+  to,
+  onNetworkInvert,
+  onSourceClick,
+  onDestinationClick
+}) => {
+  return /* @__PURE__ */ jsxs8("div", { className: "relative flex w-full max-w-[440px] gap-2", children: [
+    /* @__PURE__ */ jsx13(
+      NetworkSwitcherButton,
+      {
+        label: "From",
+        image: { src: from.image, alt: from.name },
+        onClick: onSourceClick,
+        children: from.name
+      }
+    ),
+    /* @__PURE__ */ jsx13(
+      NetworkSwitcherButton,
+      {
+        label: "To",
+        image: { src: to.image, alt: to.name },
+        onClick: onDestinationClick,
+        children: to.name
+      }
+    ),
+    /* @__PURE__ */ jsx13(
+      Button,
+      {
+        type: "button",
+        onClick: onNetworkInvert,
+        className: "size-6 rounded-[7.5px] p-0 bg-brand-black-600 flex items-center justify-center absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 hover:scale-110 transition-all",
+        "aria-label": "Switch networks",
+        children: /* @__PURE__ */ jsx13("div", { className: "size-[19.2px] rounded-[6px] bg-brand-black-500 flex items-center justify-center", children: /* @__PURE__ */ jsx13(ArrowRight_default, { className: "text-brand-black-100 size-3" }) })
+      }
+    )
+  ] });
+};
+function NetworkSwitcherButton(props) {
+  const _a = props, { image, label } = _a, _props = __objRest(_a, ["image", "label"]);
+  return /* @__PURE__ */ jsx13(SmoothCorners, { children: /* @__PURE__ */ jsx13(
+    "button",
+    __spreadProps(__spreadValues({}, _props), {
+      type: "button",
+      className: "bg-brand-black-500 select-none rounded-[16px] py-[10px] px-3 w-[49%] cursor-pointer hover:bg-brand-black-300 duration-200 transition-all",
+      children: /* @__PURE__ */ jsxs8("span", { className: "flex gap-3 items-center", children: [
+        /* @__PURE__ */ jsx13(TokenImage, { className: "size-8", src: image.src, alt: image.alt }),
+        /* @__PURE__ */ jsxs8("span", { className: "flex flex-col items-start", children: [
+          /* @__PURE__ */ jsx13("span", { className: "text-caption font-medium text-brand-black-100", children: label }),
+          /* @__PURE__ */ jsx13("span", { className: "text-body text-white font-medium", children: props.children })
+        ] })
+      ] })
+    })
+  ) });
+}
+
+// src/components/network/network-selector.tsx
+import { useMemo } from "react";
+
+// src/components/molecules/modal.tsx
+import { motion, AnimatePresence } from "motion/react";
+import { useEffect, useState } from "react";
+
+// src/@/ui/drawer.tsx
+import { Drawer as DrawerPrimitive } from "vaul";
+import { Fragment, jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
+function Drawer(_a) {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ jsx14(DrawerPrimitive.Root, __spreadValues({ "data-slot": "drawer" }, props));
+}
+function DrawerOverlay(_a) {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx14(
+    DrawerPrimitive.Overlay,
+    __spreadValues({
+      "data-slot": "drawer-overlay",
+      className: cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )
+    }, props)
+  );
+}
+function DrawerContent(_a) {
+  var _b = _a, {
+    className,
+    children
+  } = _b, props = __objRest(_b, [
+    "className",
+    "children"
+  ]);
+  return /* @__PURE__ */ jsxs9(Fragment, { children: [
+    /* @__PURE__ */ jsx14(DrawerOverlay, {}),
+    /* @__PURE__ */ jsxs9(
+      DrawerPrimitive.Content,
+      __spreadProps(__spreadValues({
+        "data-slot": "drawer-content",
+        className: cn(
+          "group/drawer-content bg-background fixed z-50 flex h-auto flex-col",
+          "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
+          "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
+          "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
+          "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
+          className
+        )
+      }, props), {
+        children: [
+          /* @__PURE__ */ jsx14("div", { className: "bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" }),
+          children
+        ]
+      })
+    )
+  ] });
+}
+
+// src/lib/animations.ts
+var modalVariants = {
+  initial: {
+    opacity: 0,
+    y: 50,
+    scale: 0.95
+  },
+  animate: {
+    opacity: 1,
+    y: 0,
+    scale: 1
+  },
+  exit: {
+    opacity: 0,
+    y: 30,
+    scale: 0.95
+  }
+};
+var springTransition = {
+  type: "spring",
+  damping: 25,
+  stiffness: 300,
+  duration: 0.3
+};
+var smoothTransition = {
+  type: "tween",
+  duration: 0.2,
+  ease: "easeInOut"
+};
+var fastTransition = {
+  type: "tween",
+  duration: 0.15,
+  ease: "easeOut"
+};
+var slideUpVariants = {
+  initial: {
+    opacity: 0,
+    y: 20
+  },
+  animate: {
+    opacity: 1,
+    y: 0
+  },
+  exit: {
+    opacity: 0,
+    y: -10
+  }
+};
+var slideDownVariants = {
+  initial: {
+    opacity: 0,
+    y: -20
+  },
+  animate: {
+    opacity: 1,
+    y: 0
+  },
+  exit: {
+    opacity: 0,
+    y: 10
+  }
+};
+var fadeVariants = {
+  initial: {
+    opacity: 0
+  },
+  animate: {
+    opacity: 1
+  },
+  exit: {
+    opacity: 0
+  }
+};
+var scaleVariants = {
+  initial: {
+    opacity: 0,
+    scale: 0.9
+  },
+  animate: {
+    opacity: 1,
+    scale: 1
+  },
+  exit: {
+    opacity: 0,
+    scale: 0.95
+  }
+};
+var animationPresets = {
+  modal: {
+    variants: modalVariants,
+    transition: springTransition
+  },
+  slideUp: {
+    variants: slideUpVariants,
+    transition: smoothTransition
+  },
+  slideDown: {
+    variants: slideDownVariants,
+    transition: smoothTransition
+  },
+  fade: {
+    variants: fadeVariants,
+    transition: smoothTransition
+  },
+  scale: {
+    variants: scaleVariants,
+    transition: fastTransition
+  }
+};
+
+// src/components/molecules/modal.tsx
+import { jsx as jsx15 } from "react/jsx-runtime";
+var Modal = ({
+  isOpen,
+  children,
+  onClose,
+  className = "",
+  animationPreset = "modal"
+}) => {
+  const [isMobile, setIsMobile] = useState(false);
+  useEffect(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth < 768);
+    };
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+    return () => {
+      window.removeEventListener("resize", checkMobile);
+    };
+  }, []);
+  useEffect(() => {
+    const handleEscapeKey = (event) => {
+      if (event.key === "Escape" && isOpen && onClose && !isMobile) {
+        onClose();
+      }
+    };
+    if (isOpen && !isMobile) {
+      document.addEventListener("keydown", handleEscapeKey);
+    }
+    return () => {
+      document.removeEventListener("keydown", handleEscapeKey);
+    };
+  }, [isOpen, onClose, isMobile]);
+  const { variants, transition } = animationPresets[animationPreset];
+  if (isMobile) {
+    return /* @__PURE__ */ jsx15(Drawer, { open: isOpen, onOpenChange: onClose, children: /* @__PURE__ */ jsx15(DrawerContent, { className: "bg-brand-black-550 border-brand-black-300 min-h-[90dvh]", children }) });
+  }
+  return /* @__PURE__ */ jsx15(AnimatePresence, { mode: "wait", children: isOpen && /* @__PURE__ */ jsx15(
+    motion.div,
+    {
+      className: cn(
+        "absolute inset-0 z-50 bg-brand-black-550 rounded-xl w-full max-w-[440px] mx-auto overflow-hidden h-[min(515px,90vh)] flex flex-col ring-3 ring-brand-black-550",
+        className
+      ),
+      variants,
+      initial: "initial",
+      animate: "animate",
+      exit: "exit",
+      transition,
+      children
+    }
+  ) });
+};
+
+// src/hooks/selector-hooks.ts
+import { useState as useState2, useRef, useEffect as useEffect2 } from "react";
+var useScrollBorder = () => {
+  const [showHeaderBorder, setShowHeaderBorder] = useState2(false);
+  const scrollableRef = useRef(null);
+  useEffect2(() => {
+    const scrollableElement = scrollableRef.current;
+    if (!scrollableElement) return;
+    const handleScroll = () => {
+      const { scrollTop, scrollHeight, clientHeight } = scrollableElement;
+      const hasOverflow = scrollHeight > clientHeight;
+      const hasScrolled = scrollTop > 0;
+      setShowHeaderBorder(hasOverflow && hasScrolled);
+    };
+    handleScroll();
+    scrollableElement.addEventListener("scroll", handleScroll);
+    const resizeObserver = new ResizeObserver(handleScroll);
+    resizeObserver.observe(scrollableElement);
+    return () => {
+      scrollableElement.removeEventListener("scroll", handleScroll);
+      resizeObserver.disconnect();
+    };
+  }, []);
+  return { showHeaderBorder, scrollableRef };
+};
+var useSearch = () => {
+  const [searchQuery, setSearchQuery] = useState2("");
+  const resetSearch = () => setSearchQuery("");
+  return { searchQuery, setSearchQuery, resetSearch };
+};
+var filterItems = (items, searchQuery, searchFields) => {
+  if (!searchQuery.trim()) return items;
+  const query = searchQuery.toLowerCase();
+  return items.filter(
+    (item) => searchFields(item).some((field) => field.toLowerCase().includes(query))
+  );
+};
+var sortItems = (items, sortFn) => {
+  return [...items].sort(sortFn);
+};
+
+// src/components/molecules/empty-state.tsx
+import React3 from "react";
+import { Fragment as Fragment2, jsx as jsx16 } from "react/jsx-runtime";
+var ContextDefault = {
+  isEmpty: true
+};
+var EmptyStateCtx = isSSR() ? {} : React3.createContext(ContextDefault);
+function useContext() {
+  const context = React3.useContext(EmptyStateCtx);
+  return isSSR() ? ContextDefault : context;
+}
+var EmptyStateContent = React3.forwardRef(function Content(props, ref) {
+  const { isEmpty } = useContext();
+  if (!isEmpty) return null;
+  return /* @__PURE__ */ jsx16(
+    "div",
+    __spreadProps(__spreadValues({}, props), {
+      ref,
+      className: cn("flex flex-col items-center gap-4", props.className)
+    })
+  );
+});
+var EmptyStateTitle = React3.forwardRef(function ESTitle(props, ref) {
+  return /* @__PURE__ */ jsx16(
+    "h6",
+    __spreadProps(__spreadValues({
+      ref
+    }, props), {
+      className: cn("font-500 text-center font-semibold", props.className)
+    })
+  );
+});
+var EmptyStateDescription = React3.forwardRef(function ESDescription(props, ref) {
+  return /* @__PURE__ */ jsx16(
+    "div",
+    __spreadProps(__spreadValues({
+      ref
+    }, props), {
+      className: cn("text-xs text-muted-foreground", props.className)
+    })
+  );
+});
+function EmptyStateConceal(props) {
+  const { isEmpty } = useContext();
+  if (isEmpty) return null;
+  return /* @__PURE__ */ jsx16(Fragment2, { children: props.children });
+}
+function EmptyState(props) {
+  const { isEmpty = true, children } = props;
+  if (isSSR()) return /* @__PURE__ */ jsx16(Fragment2, { children });
+  return /* @__PURE__ */ jsx16(EmptyStateCtx.Provider, { value: { isEmpty }, children });
+}
+
+// src/components/network/network-selector.tsx
+import React5 from "react";
+
+// src/components/molecules/scroll-aware-area.tsx
+import React4 from "react";
+import { jsx as jsx17 } from "react/jsx-runtime";
+function ScrollAwareSeparator(props) {
+  const _a = props, { scrollRef } = _a, props_ = __objRest(_a, ["scrollRef"]);
+  const [showHeaderBorder, setShowHeaderBorder] = React4.useState(false);
+  React4.useEffect(() => {
+    let scrollableElement = scrollRef.current;
+    if (!scrollableElement) return;
+    const radixScrollArea = scrollableElement == null ? void 0 : scrollableElement.querySelector(
+      "[data-radix-scroll-area-viewport]"
+    );
+    scrollableElement = radixScrollArea ? radixScrollArea : scrollableElement;
+    const handleScroll = () => {
+      const { scrollTop, scrollHeight, clientHeight } = scrollableElement;
+      const hasOverflow = scrollHeight > clientHeight;
+      const hasScrolled = scrollTop > 0;
+      setShowHeaderBorder(hasOverflow && hasScrolled);
+    };
+    handleScroll();
+    scrollableElement.addEventListener("scroll", handleScroll);
+    const resizeObserver = new ResizeObserver(handleScroll);
+    resizeObserver.observe(scrollableElement);
+    return () => {
+      scrollableElement.removeEventListener("scroll", handleScroll);
+      resizeObserver.disconnect();
+    };
+  }, [scrollRef]);
+  return /* @__PURE__ */ jsx17(
+    "div",
+    __spreadProps(__spreadValues({}, props_), {
+      className: cn(
+        "border-b data-[active=true]:border-brand-black-300/70 data-[active=false]:border-brand-black-300/0",
+        props.className
+      ),
+      "data-active": showHeaderBorder
+    })
+  );
+}
+
+// src/components/network/network-selector.tsx
+import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
+var NetworkSelector = ({
+  title,
+  availableNetworks,
+  unavailableNetworks,
+  selectedNetwork,
+  onNetworkSelect,
+  isOpen = false,
+  onClose
+}) => {
+  const { searchQuery, setSearchQuery } = useSearch();
+  const scrollableRef = React5.useRef(null);
+  const filteredAvailableNetworks = useMemo(() => {
+    return filterItems(availableNetworks, searchQuery, (network) => [
+      network.name
+    ]);
+  }, [availableNetworks, searchQuery]);
+  const filteredUnavailableNetworks = useMemo(() => {
+    return filterItems(unavailableNetworks, searchQuery, (network) => [
+      network.name
+    ]);
+  }, [unavailableNetworks, searchQuery]);
+  const handleNetworkSelect = (network) => {
+    onNetworkSelect(network);
+  };
+  const renderNetworkItem = (network, isAvailable) => {
+    const isSelected = (selectedNetwork == null ? void 0 : selectedNetwork.name) === network.name;
+    return /* @__PURE__ */ jsx18(
+      NetworkSelectionItem,
+      {
+        network,
+        isActive: isSelected,
+        variant: isAvailable ? "default" : "secondary",
+        onClick: () => isAvailable && handleNetworkSelect(network),
+        SecondaryContent: /* @__PURE__ */ jsx18(Button2, { variant: "message", size: "sm", children: /* @__PURE__ */ jsx18("span", { className: "text-caption font-medium", children: "Connect" }) })
+      }
+    );
+  };
+  const hasNoResults = searchQuery.trim() && filteredAvailableNetworks.length === 0 && filteredUnavailableNetworks.length === 0;
+  const isEmpty = availableNetworks.length === 0 && unavailableNetworks.length === 0;
+  return /* @__PURE__ */ jsxs10(Modal, { isOpen, onClose, children: [
+    /* @__PURE__ */ jsxs10(
+      "div",
+      {
+        className: cn(
+          "bg-brand-black-550 px-6 pt-6 pb-4 transition-all duration-200"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs10("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsx18("div", { className: "body-1 font-medium text-white max-w-[200px] break-words", children: title != null ? title : "Select chain" }),
+            /* @__PURE__ */ jsx18(
+              IconButton,
+              {
+                size: "xs",
+                onClick: onClose,
+                variant: "unset",
+                className: "text-brand-black-100 hover:text-white",
+                children: /* @__PURE__ */ jsx18(XIcon_default, {})
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx18("div", { className: "mt-4", children: /* @__PURE__ */ jsx18(
+            SearchInput,
+            {
+              className: "h-10",
+              placeholder: "Search for chain",
+              value: searchQuery,
+              onChange: (e) => setSearchQuery(e.target.value)
+            }
+          ) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs10(EmptyState, { isEmpty, children: [
+      /* @__PURE__ */ jsxs10(EmptyStateConceal, { children: [
+        /* @__PURE__ */ jsx18(
+          ScrollAwareSeparator,
+          {
+            scrollRef: scrollableRef,
+            className: "data-[active=true]:border-brand-black-300/70 data-[active=false]:border-brand-black-300/0"
+          }
+        ),
+        /* @__PURE__ */ jsxs10(
+          "div",
+          {
+            ref: scrollableRef,
+            className: "px-6 pb-6 overflow-y-auto h-full space-y-4 no-scrollbar",
+            children: [
+              filteredAvailableNetworks.length > 0 && /* @__PURE__ */ jsxs10("div", { children: [
+                /* @__PURE__ */ jsx18("p", { className: "text-caption text-brand-black-100", children: "Available" }),
+                /* @__PURE__ */ jsx18("div", { className: "mt-[6px] space-y-2", children: filteredAvailableNetworks.map(
+                  (network) => renderNetworkItem(network, true)
+                ) })
+              ] }),
+              filteredUnavailableNetworks.length > 0 && /* @__PURE__ */ jsxs10("div", { children: [
+                /* @__PURE__ */ jsx18("p", { className: "text-caption text-brand-black-100", children: "Not available" }),
+                /* @__PURE__ */ jsx18("div", { className: "mt-[6px] space-y-2", children: filteredUnavailableNetworks.map(
+                  (network) => renderNetworkItem(network, false)
+                ) })
+              ] }),
+              hasNoResults && /* @__PURE__ */ jsx18("div", { className: "text-center py-8 h-full flex items-center justify-center", children: /* @__PURE__ */ jsxs10("p", { className: "text-caption text-brand-black-100", children: [
+                "No results found for",
+                " ",
+                /* @__PURE__ */ jsx18("span", { className: "text-white font-medium", children: searchQuery })
+              ] }) })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx18(EmptyStateContent, { className: "text-center py-8 h-full flex items-center justify-center", children: /* @__PURE__ */ jsxs10("div", { children: [
+        /* @__PURE__ */ jsx18("p", { className: "body-2 text-brand-black-100 mb-1", children: "No networks available" }),
+        /* @__PURE__ */ jsx18("p", { className: "text-caption text-brand-black-100", children: "Networks will appear here when available" })
+      ] }) })
+    ] })
+  ] });
+};
+function NetworkSelectionItem(props) {
+  const _a = props, {
+    network,
+    disabled = false,
+    variant = "default",
+    isActive
+  } = _a, PROPS = __objRest(_a, [
+    "network",
+    "disabled",
+    "variant",
+    "isActive"
+  ]);
+  const buttonRef = React5.useRef(null);
+  const is_default_mode = variant === "default";
+  const buttonContent = /* @__PURE__ */ jsxs10(
+    "div",
+    {
+      className: cn(
+        "w-full cursor-pointer group bg-brand-black-350 rounded-[16px] p-3 flex items-center justify-between hover:bg-brand-black-300 duration-200 transition-colors",
+        {
+          "pointer-events-none bg-transparent opacity-50": disabled
+        }
+      ),
+      onClick: () => {
+        var _a2;
+        return (_a2 = buttonRef.current) == null ? void 0 : _a2.click();
+      },
+      onKeyDown: () => {
+        var _a2;
+        return (_a2 = buttonRef.current) == null ? void 0 : _a2.click();
+      },
+      children: [
+        /* @__PURE__ */ jsxs10(
+          "button",
+          __spreadProps(__spreadValues({
+            type: "button",
+            ref: buttonRef,
+            className: "flex items-center gap-[10px]"
+          }, PROPS), {
+            disabled,
+            children: [
+              /* @__PURE__ */ jsx18(TokenImage, { className: "size-8", src: network.image, alt: network.name }),
+              /* @__PURE__ */ jsxs10("div", { className: "flex flex-col items-start", children: [
+                /* @__PURE__ */ jsx18("div", { className: "body-2 font-medium text-white", children: network.name }),
+                /* @__PURE__ */ jsx18("div", { className: "text-caption font-medium text-brand-black-100", children: network.group })
+              ] })
+            ]
+          })
+        ),
+        is_default_mode ? /* @__PURE__ */ jsx18(IconButton, { className: "cursor-pointer group", variant: "secondary", children: isActive ? /* @__PURE__ */ jsx18(Check_default, { className: "size-4 text-white" }) : /* @__PURE__ */ jsx18(Circle_default, { className: "size-4 text-brand-black-100 group-hover:text-white duration-200 transition-colors" }) }) : null,
+        variant === "secondary" ? props.SecondaryContent : null
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsx18(
+    "div",
+    {
+      className: cn(
+        "relative p-[1.5px] rounded-[16px]",
+        is_default_mode && isActive && "animated-gradient-border"
+      ),
+      children: buttonContent
+    },
+    network.name
+  );
+}
+
+// src/components/tokens/token-selector.tsx
+import React6 from "react";
+
+// src/@/ui/scroll-area.tsx
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import { jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
+function ScrollArea(_a) {
+  var _b = _a, {
+    className,
+    children
+  } = _b, props = __objRest(_b, [
+    "className",
+    "children"
+  ]);
+  return /* @__PURE__ */ jsxs11(
+    ScrollAreaPrimitive.Root,
+    __spreadProps(__spreadValues({
+      "data-slot": "scroll-area",
+      className: cn("relative", className)
+    }, props), {
+      children: [
+        /* @__PURE__ */ jsx19(
+          ScrollAreaPrimitive.Viewport,
+          {
+            "data-slot": "scroll-area-viewport",
+            className: "focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1",
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx19(ScrollBar, {}),
+        /* @__PURE__ */ jsx19(ScrollAreaPrimitive.Corner, {})
+      ]
+    })
+  );
+}
+function ScrollBar(_a) {
+  var _b = _a, {
+    className,
+    orientation = "vertical"
+  } = _b, props = __objRest(_b, [
+    "className",
+    "orientation"
+  ]);
+  return /* @__PURE__ */ jsx19(
+    ScrollAreaPrimitive.ScrollAreaScrollbar,
+    __spreadProps(__spreadValues({
+      "data-slot": "scroll-area-scrollbar",
+      orientation,
+      className: cn(
+        "flex touch-none p-px transition-colors select-none",
+        orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent",
+        orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent",
+        className
+      )
+    }, props), {
+      children: /* @__PURE__ */ jsx19(
+        ScrollAreaPrimitive.ScrollAreaThumb,
+        {
+          "data-slot": "scroll-area-thumb",
+          className: "bg-brand-black-350 hover:bg-brand-black-200 !w-[0.5rem] relative flex-1 rounded-full"
+        }
+      )
+    })
+  );
+}
+
+// src/components/tokens/token-selector.tsx
+import { Fragment as Fragment3, jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
+var tokenSortFn = (a, b) => {
+  const aHasAmount = a.amount > 0;
+  const bHasAmount = b.amount > 0;
+  if (aHasAmount && !bHasAmount) return -1;
+  if (!aHasAmount && bHasAmount) return 1;
+  return a.name.localeCompare(b.name);
+};
+var tokenSearchFields = (token) => [
+  token.name,
+  token.symbol,
+  token.address
+];
+var TokenSelector = ({
+  title,
+  isOpen,
+  onClose,
+  allTokens,
+  availableTokens,
+  selectedToken,
+  onTokenSelect,
+  onAddToWallet
+}) => {
+  const { showHeaderBorder, scrollableRef } = useScrollBorder();
+  const { searchQuery, setSearchQuery } = useSearch();
+  const isTokenAvailable = (token) => {
+    return availableTokens.some(
+      (availableToken) => availableToken.symbol === token.symbol && availableToken.address === token.address
+    );
+  };
+  const handleTokenSelect = (token) => {
+    onTokenSelect == null ? void 0 : onTokenSelect(token);
+  };
+  const handleAddToWallet = (token) => {
+    onAddToWallet == null ? void 0 : onAddToWallet(token);
+  };
+  const getFilteredTokens = () => {
+    if (searchQuery.trim()) {
+      const allSearchableTokens = [...availableTokens, ...allTokens];
+      const uniqueTokens = allSearchableTokens.filter(
+        (token, index, self) => index === self.findIndex(
+          (t) => t.symbol === token.symbol && t.address === token.address
+        )
+      );
+      const filtered = filterItems(
+        uniqueTokens,
+        searchQuery,
+        tokenSearchFields
+      );
+      return {
+        searchResults: sortItems(filtered, tokenSortFn),
+        availableTokens: [],
+        allTokens: []
+      };
+    }
+    return {
+      searchResults: [],
+      availableTokens: sortItems(availableTokens, tokenSortFn),
+      allTokens: sortItems(allTokens, tokenSortFn)
+    };
+  };
+  const {
+    searchResults,
+    availableTokens: sortedAvailableTokens,
+    allTokens: sortedAllTokens
+  } = getFilteredTokens();
+  const renderTokenItem = (token) => {
+    const isSelected = (selectedToken == null ? void 0 : selectedToken.symbol) === token.symbol && (selectedToken == null ? void 0 : selectedToken.address) === token.address;
+    const isAvailable = isTokenAvailable(token);
+    return /* @__PURE__ */ jsx20(
+      TokenSelectionItem,
+      {
+        token,
+        isActive: isSelected,
+        isAvailable,
+        onClick: () => handleTokenSelect(token),
+        AddWalletButton: /* @__PURE__ */ jsx20(
+          Button,
+          {
+            variant: "message",
+            size: "sm",
+            onClick: (e) => {
+              e.stopPropagation();
+              handleAddToWallet(token);
+            },
+            children: /* @__PURE__ */ jsx20("span", { className: "text-caption font-medium", children: "Add to wallet" })
+          }
+        )
+      },
+      `${token.symbol}-${token.address}`
+    );
+  };
+  const hasSearchResults = searchQuery.trim() && searchResults.length > 0;
+  const hasNoResults = searchQuery.trim() && searchResults.length === 0;
+  const isEmpty = availableTokens.length === 0 && allTokens.length === 0;
+  return /* @__PURE__ */ jsxs12(Modal, { isOpen, onClose, children: [
+    /* @__PURE__ */ jsxs12(
+      "div",
+      {
+        className: cn(
+          "bg-brand-black-550 px-6 pt-6 pb-4 transition-all duration-200",
+          showHeaderBorder && "border-b border-brand-black-300/70"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs12("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsx20("div", { className: "body-1 font-medium text-white max-w-[200px] break-words", children: title != null ? title : "Select token" }),
+            /* @__PURE__ */ jsx20(
+              XIcon_default,
+              {
+                className: "size-4 cursor-pointer text-brand-black-100 hover:text-white duration-200 transition-colors",
+                onClick: onClose
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx20("div", { className: "mt-4", children: /* @__PURE__ */ jsx20(
+            SearchInput,
+            {
+              className: "h-10",
+              placeholder: "Search for token",
+              value: searchQuery,
+              onChange: (e) => setSearchQuery(e.target.value)
+            }
+          ) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx20(ScrollAwareSeparator, { scrollRef: scrollableRef }),
+    /* @__PURE__ */ jsx20(ScrollArea, { ref: scrollableRef, className: "h-full", children: /* @__PURE__ */ jsxs12("div", { className: "px-6 pb-6 space-y-4", children: [
+      hasSearchResults && /* @__PURE__ */ jsxs12("div", { children: [
+        /* @__PURE__ */ jsx20("p", { className: "text-caption text-brand-black-100", children: "Search results" }),
+        /* @__PURE__ */ jsx20("div", { className: "mt-[6px] space-y-2", children: searchResults.map(renderTokenItem) })
+      ] }),
+      !searchQuery.trim() && sortedAvailableTokens.length > 0 && /* @__PURE__ */ jsxs12("div", { children: [
+        /* @__PURE__ */ jsx20("p", { className: "text-caption text-brand-black-100", children: "Your tokens" }),
+        /* @__PURE__ */ jsx20("div", { className: "mt-[6px] space-y-2", children: sortedAvailableTokens.map(renderTokenItem) })
+      ] }),
+      !searchQuery.trim() && sortedAllTokens.length > 0 && /* @__PURE__ */ jsxs12("div", { children: [
+        /* @__PURE__ */ jsx20("p", { className: "text-caption text-brand-black-100", children: "All tokens" }),
+        /* @__PURE__ */ jsx20("div", { className: "mt-[6px] space-y-2", children: sortedAllTokens.map(renderTokenItem) })
+      ] }),
+      hasNoResults && /* @__PURE__ */ jsx20("div", { className: "text-center py-8 h-full flex items-center justify-center", children: /* @__PURE__ */ jsxs12("p", { className: "text-caption text-brand-black-100", children: [
+        "No results found for",
+        " ",
+        /* @__PURE__ */ jsx20("span", { className: "text-white font-medium", children: searchQuery })
+      ] }) }),
+      isEmpty && /* @__PURE__ */ jsx20("div", { className: "text-center py-8 h-full flex items-center justify-center", children: /* @__PURE__ */ jsxs12("div", { children: [
+        /* @__PURE__ */ jsx20("p", { className: "body-2 text-brand-black-100 mb-1", children: "No tokens available" }),
+        /* @__PURE__ */ jsx20("p", { className: "text-caption text-brand-black-100", children: "Tokens will appear here when available" })
+      ] }) })
+    ] }) })
+  ] });
+};
+function TokenSelectionItem(props) {
+  const _a = props, { token, isAvailable, isActive, AddWalletButton } = _a, PROPS = __objRest(_a, ["token", "isAvailable", "isActive", "AddWalletButton"]);
+  const hasAmount = token.amount > 0;
+  const buttonRef = React6.useRef(null);
+  const buttonContent = /* @__PURE__ */ jsxs12(
+    "div",
+    {
+      className: "cursor-pointer flex items-center justify-between w-full bg-brand-black-500 hover:bg-brand-black-300 duration-200 transition-colors p-3 rounded-[16px]",
+      onClick: () => {
+        var _a2;
+        return (_a2 = buttonRef.current) == null ? void 0 : _a2.click();
+      },
+      onKeyDown: () => {
+        var _a2;
+        return (_a2 = buttonRef.current) == null ? void 0 : _a2.click();
+      },
+      children: [
+        /* @__PURE__ */ jsxs12(
+          "button",
+          __spreadProps(__spreadValues({
+            ref: buttonRef
+          }, PROPS), {
+            type: "button",
+            className: "flex items-center text-start gap-3",
+            disabled: !isAvailable || props.disabled,
+            children: [
+              /* @__PURE__ */ jsx20(TokenImage, { src: token.image, alt: token.symbol, className: "size-6" }),
+              /* @__PURE__ */ jsxs12("div", { className: "flex flex-col gap-[2px] items-start", children: [
+                /* @__PURE__ */ jsx20("p", { className: "body-1 font-medium text-white", children: token.name }),
+                /* @__PURE__ */ jsxs12("p", { className: "text-caption text-brand-black-100", children: [
+                  token.symbol,
+                  " \u2022 ",
+                  token.address
+                ] })
+              ] })
+            ]
+          })
+        ),
+        /* @__PURE__ */ jsx20("div", { className: "flex flex-col items-end gap-[2px]", children: isAvailable ? hasAmount ? /* @__PURE__ */ jsxs12(Fragment3, { children: [
+          /* @__PURE__ */ jsx20("p", { className: "body-1 font-medium text-white", children: token.amount.toFixed(6) }),
+          /* @__PURE__ */ jsx20("p", { className: "text-caption text-brand-black-100", children: token.usdValue })
+        ] }) : /* @__PURE__ */ jsx20("p", { className: "body-1 font-medium text-brand-black-100", children: "0" }) : AddWalletButton })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsx20(
+    "div",
+    {
+      className: cn(
+        "relative p-[1.5px] rounded-[16px]",
+        isAvailable && isActive && "animated-gradient-border"
+      ),
+      children: buttonContent
+    }
+  );
+}
+
+// src/components/form/bridge-form.tsx
+import { useState as useState3 } from "react";
+
+// src/components/input/input.tsx
+import * as React7 from "react";
+import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
+var Input2 = React7.forwardRef((_a, ref) => {
+  var _b = _a, { className, label, error, helperText, id } = _b, props = __objRest(_b, ["className", "label", "error", "helperText", "id"]);
+  const inputId = id || React7.useId();
+  return /* @__PURE__ */ jsxs13("div", { className: "space-y-2", children: [
+    label && /* @__PURE__ */ jsx21(
+      "label",
+      {
+        htmlFor: inputId,
+        className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsx21(
+      Input,
+      __spreadValues({
+        ref,
+        id: inputId,
+        className: cn(
+          error && "border-destructive focus-visible:border-destructive",
+          className
+        )
+      }, props)
+    ),
+    (error || helperText) && /* @__PURE__ */ jsx21(
+      "p",
+      {
+        className: cn(
+          "text-sm",
+          error ? "text-destructive" : "text-muted-foreground"
+        ),
+        children: error || helperText
+      }
+    )
+  ] });
+});
+Input2.displayName = "Input";
+
+// src/components/form/bridge-input.tsx
+import React8 from "react";
+import { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
+function BridgeInput(props) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+  const {
+    receiver,
+    sender,
+    percentage = {
+      options: [25, 50, 100],
+      value: null
+    },
+    presentation = "default",
+    mode = "ready",
+    hasError: error
+  } = props;
+  const isConnected = mode === "ready";
+  const isLoading = presentation === "loading";
+  const handleKeyDown = createKeyDownHandler();
+  const formatPercentageLabel = (percentage2) => {
+    return percentage2 === 100 ? "Max" : `${percentage2}%`;
+  };
+  return /* @__PURE__ */ jsxs14(
+    "div",
+    {
+      className: cn(
+        "flex flex-col bg-brand-black-550 select-none max-w-[440px] rounded-[16px]",
+        isConnected && "border-dashed-wide"
+      ),
+      children: [
+        /* @__PURE__ */ jsx22(
+          "section",
+          {
+            "data-testid": "send-section",
+            className: cn(
+              "relative h-1/2 -mx-[1.5px] rounded-[16px] p-[1.5px] transition-all duration-200",
+              isConnected && "bg-brand-black-200",
+              error ? "bg-brand-danger-500" : "bridge-form-border"
+            ),
+            children: /* @__PURE__ */ jsxs14("div", { className: "bg-brand-black-500 rounded-[14.5px] h-full relative px-3", children: [
+              /* @__PURE__ */ jsxs14("div", { className: "w-full flex justify-between h-10 items-center", children: [
+                /* @__PURE__ */ jsx22("div", { className: "w-1/2", children: /* @__PURE__ */ jsx22("p", { className: "text-caption text-brand-black-100 font-medium", children: "Send" }) }),
+                /* @__PURE__ */ jsx22("div", { className: "w-1/2", children: /* @__PURE__ */ jsxs14("div", { className: "text-caption text-brand-black-100 font-medium text-right flex items-center gap-1 justify-end", children: [
+                  /* @__PURE__ */ jsx22("span", { className: "max-w-[100px] truncate", children: sender.address ? sender.address : "Balance" }),
+                  " ",
+                  /* @__PURE__ */ jsx22(
+                    "span",
+                    {
+                      className: cn(
+                        "max-w-[100px] truncate",
+                        props.hasError ? "text-brand-danger-500" : "text-white"
+                      ),
+                      children: /* @__PURE__ */ jsx22(
+                        React8.Suspense,
+                        {
+                          fallback: /* @__PURE__ */ jsx22(
+                            "div",
+                            {
+                              className: cn(
+                                "w-8 h-3 bg-brand-black-200 animate-pulse rounded",
+                                error && "text-danger-500"
+                              )
+                            }
+                          ),
+                          children: sender.balance
+                        }
+                      )
+                    }
+                  )
+                ] }) })
+              ] }),
+              /* @__PURE__ */ jsxs14("div", { className: "flex h-[70px] items-center", children: [
+                /* @__PURE__ */ jsx22(
+                  Input2,
+                  {
+                    min: 0,
+                    type: "number",
+                    placeholder: "0",
+                    value: sender.amount,
+                    disabled: isLoading,
+                    onKeyDown: handleKeyDown,
+                    "data-testid": "sender-amount-input",
+                    className: "border-none ring-0 rounded-none focus-visible:ring-0 focus-visible:ring-offset-0 text-[48px] leading-[1.2] h-[58px] p-0 text-white placeholder:text-brand-black-100 disabled:opacity-50",
+                    onChange: (event) => {
+                      var _a2;
+                      (_a2 = props.onValueChange) == null ? void 0 : _a2.call(props, event.target.value, event);
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx22("div", { className: "w-[170px] pl-3 py-[13px] flex justify-end", children: props.TokenChangeButton })
+              ] }),
+              /* @__PURE__ */ jsxs14("div", { className: "flex justify-between h-10", children: [
+                /* @__PURE__ */ jsxs14(
+                  "div",
+                  {
+                    "data-testid": "sender-usd-value",
+                    className: "flex items-center text-caption text-brand-black-100 font-medium min-h-6 hover:text-white duration-200 transition-colors",
+                    children: [
+                      "$",
+                      isLoading ? /* @__PURE__ */ jsx22("div", { className: "w-8 h-3 bg-brand-black-200 animate-pulse rounded ml-1" }) : sender.usdValue
+                    ]
+                  }
+                ),
+                isConnected && /* @__PURE__ */ jsx22("div", { className: "flex gap-[6px] pt-1", children: percentage.options.map((percent_value) => /* @__PURE__ */ jsx22(
+                  Button2,
+                  {
+                    type: "button",
+                    size: "sm",
+                    disabled: isLoading,
+                    variant: "message",
+                    className: cn(
+                      "rounded-[60px] h-6 py-1 px-[9.5px] text-caption transition-colors",
+                      percentage.value === percent_value ? "bg-white text-brand-black-500 hover:bg-white/90" : "text-brand-black-100 hover:text-white hover:bg-brand-black-200"
+                    ),
+                    onClick: () => props.onPercentageChange(percent_value),
+                    children: formatPercentageLabel(percent_value)
+                  },
+                  percent_value
+                )) })
+              ] })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx22(
+          "section",
+          {
+            className: cn(
+              "grid transition-all duration-200 ease-out",
+              isConnected ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+            ),
+            children: /* @__PURE__ */ jsx22("div", { className: "overflow-hidden min-h-0", children: /* @__PURE__ */ jsxs14("div", { className: "p-3", children: [
+              /* @__PURE__ */ jsxs14("div", { className: "flex justify-between", children: [
+                /* @__PURE__ */ jsx22("p", { className: "text-caption text-brand-black-100 font-medium w-1/2", children: "Receive" }),
+                !props.EditDestAddressTrigger ? /* @__PURE__ */ jsx22("span", { className: "text-caption text-brand-black-100 font-medium text-right flex items-center justify-end w-1/2", children: /* @__PURE__ */ jsx22("span", { className: "max-w-[100px] truncate", children: receiver.address }) }) : /* @__PURE__ */ jsx22(props.EditDestAddressTrigger, { asChild: true, children: /* @__PURE__ */ jsxs14(
+                  "button",
+                  {
+                    type: "button",
+                    disabled: isLoading,
+                    "aria-label": "Edit receiver address",
+                    className: "cursor-pointer flex !gap-1.5 !text-caption text-brand-black-100 font-medium text-right items-center justify-end w-1/2",
+                    children: [
+                      /* @__PURE__ */ jsx22("span", { className: "max-w-[100px] truncate", children: receiver.address }),
+                      /* @__PURE__ */ jsx22(
+                        "span",
+                        {
+                          "aria-label": "Edit address",
+                          className: "cursor-pointer text-foreground hover:scale-110 transition-transform disabled:opacity-50",
+                          children: /* @__PURE__ */ jsx22(Pen_default, { className: "size-[0.875rem]" })
+                        }
+                      )
+                    ]
+                  }
+                ) })
+              ] }),
+              /* @__PURE__ */ jsx22(
+                "div",
+                {
+                  className: cn(
+                    "grid transition-all duration-200 ease-out",
+                    sender.amount ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+                  ),
+                  children: /* @__PURE__ */ jsxs14("div", { className: "overflow-hidden min-h-0", children: [
+                    /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-2 py-2", children: [
+                      /* @__PURE__ */ jsx22(
+                        BadgeIcon,
+                        {
+                          src: (_b = (_a = sender.token) == null ? void 0 : _a.image) != null ? _b : "",
+                          alt: (_d = (_c = sender.token) == null ? void 0 : _c.symbol) != null ? _d : "Token",
+                          badgeAlt: (_f = (_e = receiver.network) == null ? void 0 : _e.name) != null ? _f : "Badge",
+                          badgeSrc: (_h = (_g = receiver.network) == null ? void 0 : _g.image) != null ? _h : ""
+                        }
+                      ),
+                      /* @__PURE__ */ jsx22("span", { className: "text-[20px] leading-[1] font-medium text-brand-black-100", children: isLoading ? /* @__PURE__ */ jsx22("div", { className: "w-16 h-5 bg-brand-black-200 animate-pulse rounded" }) : `${receiver.amount} ${((_i = sender.token) == null ? void 0 : _i.symbol) || ""}` })
+                    ] }),
+                    /* @__PURE__ */ jsxs14("div", { className: "flex justify-between pt-1", children: [
+                      /* @__PURE__ */ jsxs14(
+                        "div",
+                        {
+                          "data-testid": "receiver-usd-value",
+                          className: "flex items-center text-caption text-brand-black-100 font-medium",
+                          children: [
+                            "$",
+                            isLoading ? /* @__PURE__ */ jsx22("div", { className: "w-8 h-3 bg-brand-black-200 animate-pulse rounded ml-1" }) : receiver.usdValue
+                          ]
+                        }
+                      ),
+                      isConnected && /* @__PURE__ */ jsx22("div", { className: "text-brand-black-100 text-caption font-medium", children: isLoading ? /* @__PURE__ */ jsx22("div", { className: "w-12 h-3 bg-brand-black-200 animate-pulse rounded" }) : receiver.estimatedTime })
+                    ] })
+                  ] })
+                }
+              )
+            ] }) })
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/@/ui/dialog.tsx
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { jsx as jsx23, jsxs as jsxs15 } from "react/jsx-runtime";
+function Dialog(_a) {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ jsx23(DialogPrimitive.Root, __spreadValues({ "data-slot": "dialog" }, props));
+}
+function DialogTrigger(_a) {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ jsx23(DialogPrimitive.Trigger, __spreadValues({ "data-slot": "dialog-trigger" }, props));
+}
+function DialogPortal(_a) {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ jsx23(DialogPrimitive.Portal, __spreadValues({ "data-slot": "dialog-portal" }, props));
+}
+function DialogClose(_a) {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ jsx23(DialogPrimitive.Close, __spreadValues({ "data-slot": "dialog-close" }, props));
+}
+function DialogOverlay(_a) {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx23(
+    DialogPrimitive.Overlay,
+    __spreadValues({
+      "data-slot": "dialog-overlay",
+      className: cn(
+        "data-[state=open]:animate-in backdrop-blur-xs data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 tile-bg",
+        className
+      )
+    }, props)
+  );
+}
+function DialogContent(_a) {
+  var _b = _a, {
+    className,
+    children,
+    showCloseButton = true
+  } = _b, props = __objRest(_b, [
+    "className",
+    "children",
+    "showCloseButton"
+  ]);
+  return /* @__PURE__ */ jsxs15(DialogPortal, { "data-slot": "dialog-portal", children: [
+    /* @__PURE__ */ jsx23(DialogOverlay, {}),
+    /* @__PURE__ */ jsx23(SmoothCorners, { children: /* @__PURE__ */ jsxs15(
+      DialogPrimitive.Content,
+      __spreadProps(__spreadValues({
+        "data-slot": "dialog-content",
+        className: cn(
+          "bg-brand-black-600 text-brand-black-100 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 pt-4 p-6 shadow-lg duration-200 sm:max-w-[28rem]",
+          className
+        )
+      }, props), {
+        children: [
+          children,
+          showCloseButton && /* @__PURE__ */ jsxs15(
+            DialogPrimitive.Close,
+            {
+              "data-slot": "dialog-close",
+              className: "ring-offset-background w-[calc(32rem/16)] inline-flex items-center justify-center !rounded-full text-brand-black-100 aspect-square focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+              children: [
+                /* @__PURE__ */ jsx23(XIcon_default, { className: "size-4" }),
+                /* @__PURE__ */ jsx23("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          )
+        ]
+      })
+    ) })
+  ] });
+}
+function DialogHeader(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx23(
+    "div",
+    __spreadValues({
+      "data-slot": "dialog-header",
+      className: cn(
+        "flex flex-col justify-center px-6 py-[calc(18rem/16)] gap-2 sm:text-left min-h-[calc(64rem/16)] items-start -mt-6 -mx-6",
+        className
+      )
+    }, props)
+  );
+}
+function DialogFooter(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx23(
+    "div",
+    __spreadValues({
+      "data-slot": "dialog-footer",
+      className: cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )
+    }, props)
+  );
+}
+function DialogTitle(_a) {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx23(
+    DialogPrimitive.Title,
+    __spreadValues({
+      "data-slot": "dialog-title",
+      className: cn(
+        "text-[calc(20rem/16)] leading-[calc(28rem/16)] font-medium text-brand-white-500",
+        className
+      )
+    }, props)
+  );
+}
+function DialogDescription(_a) {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx23(
+    DialogPrimitive.Description,
+    __spreadValues({
+      "data-slot": "dialog-description",
+      className: cn("text-muted-foreground text-sm", className)
+    }, props)
+  );
+}
+
+// src/components/form/bridge-form.tsx
+import { Fragment as Fragment4, jsx as jsx24, jsxs as jsxs16 } from "react/jsx-runtime";
+function BridgeForm({
+  networks,
+  onNetworkInvert,
+  senderAmount = "",
+  onSenderTokenSelect,
+  receiverAddress,
+  onReceiverAddressEdit,
+  senderBalance = "0",
+  senderUsdValue = "0",
+  senderToken = {
+    image: "https://app.hyperbridge.network/networks/polkadot.png",
+    symbol: "DOT"
+  },
+  onSenderAmountChange,
+  receiverAmount = "0",
+  receiverUsdValue = "0",
+  receiverToken = {
+    image: "https://app.hyperbridge.network/networks/polkadot.png",
+    symbol: "DOT"
+  },
+  percentagePresets = [25, 50, 100],
+  activePercentage = null,
+  onPercentageClick,
+  onPercentageReset,
+  estimatedTime = "~ 10 min",
+  className,
+  isLoading = false,
+  senderAddress,
+  error = false,
+  errorMessage,
+  onConnectWallet,
+  onSubmit,
+  onAdjustRelayerFee,
+  bridgeDetails = {
+    bridgeFee: "$1.1",
+    gasFee: "0.0004341 ETH",
+    slippageTolerance: "Auto",
+    routes: 6,
+    estimatedTime: "~ 3 mins"
+  },
+  // Network selector props
+  availableNetworks = [],
+  unavailableNetworks = [],
+  onSourceNetworkSelect,
+  onDestinationNetworkSelect
+}) {
+  const [showDetails, setShowDetails] = useState3(false);
+  const [isGasHovered, setIsGasHovered] = useState3(false);
+  const [networkSelectorState, setNetworkSelectorState] = useState3(null);
+  const isConnected = !!senderAddress;
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    const buttonState2 = getButtonState();
+    if (buttonState2.onClick && !buttonState2.disabled) {
+      buttonState2.onClick();
+    }
+  };
+  const handleSourceNetworkClick = () => {
+    setNetworkSelectorState("source");
+  };
+  const handleDestinationNetworkClick = () => {
+    setNetworkSelectorState("destination");
+  };
+  const handleCloseNetworkSelector = () => {
+    setNetworkSelectorState(null);
+  };
+  const handleNetworkSelect = (network) => {
+    if (networkSelectorState === "source") {
+      onSourceNetworkSelect == null ? void 0 : onSourceNetworkSelect(network);
+    } else if (networkSelectorState === "destination") {
+      onDestinationNetworkSelect == null ? void 0 : onDestinationNetworkSelect(network);
+    }
+    setNetworkSelectorState(null);
+  };
+  const getSelectedNetwork = () => {
+    if (networkSelectorState === "source") {
+      return availableNetworks.find((n) => n.name === networks.from.name) || null;
+    }
+    return availableNetworks.find((n) => n.name === networks.to.name) || null;
+  };
+  const getButtonState = () => {
+    const numericAmount = Number.parseFloat(senderAmount) || 0;
+    switch (true) {
+      case (error && !!errorMessage):
+        return {
+          text: errorMessage,
+          variant: "destructive",
+          disabled: true,
+          onClick: void 0,
+          animatedGradient: false
+        };
+      case isLoading:
+        return {
+          text: "Loading...",
+          variant: "primary",
+          disabled: true,
+          onClick: void 0,
+          animatedGradient: false
+        };
+      case !isConnected:
+        return {
+          text: "Connect your wallet",
+          variant: "primary",
+          disabled: false,
+          onClick: onConnectWallet,
+          animatedGradient: true
+        };
+      case numericAmount <= 0:
+        return {
+          text: "Enter an amount",
+          variant: "primary",
+          disabled: true,
+          onClick: void 0,
+          animatedGradient: false
+        };
+      default:
+        return {
+          text: "Continue",
+          variant: "primary",
+          disabled: false,
+          onClick: onSubmit,
+          animatedGradient: false
+        };
+    }
+  };
+  const effectiveReceiverAddress = receiverAddress != null ? receiverAddress : senderAddress;
+  const buttonState = getButtonState();
+  const getNetworkSelectorTitle = () => {
+    switch (networkSelectorState) {
+      case "source":
+        return "Select Source Network";
+      case "destination":
+        return "Select Destination Network";
+      default:
+        return "Select Network";
+    }
+  };
+  return /* @__PURE__ */ jsxs16("div", { className: "relative", children: [
+    /* @__PURE__ */ jsxs16("form", { onSubmit: handleSubmit, children: [
+      /* @__PURE__ */ jsx24(
+        NetworkSwitcher,
+        {
+          from: networks.from,
+          to: networks.to,
+          onNetworkInvert,
+          onSourceClick: handleSourceNetworkClick,
+          onDestinationClick: handleDestinationNetworkClick
+        }
+      ),
+      /* @__PURE__ */ jsx24("div", { className: "mt-4", children: /* @__PURE__ */ jsx24(
+        BridgeInput,
+        {
+          hasError: Boolean(error),
+          mode: isConnected ? "ready" : "idle",
+          presentation: isLoading ? "loading" : "default",
+          sender: {
+            token: senderToken,
+            amount: senderAmount,
+            balance: /* @__PURE__ */ jsx24(Fragment4, { children: senderBalance }),
+            usdValue: senderUsdValue,
+            address: senderAddress || ""
+          },
+          receiver: {
+            network: {
+              name: receiverToken.symbol,
+              image: receiverToken.image
+            },
+            amount: receiverAmount,
+            usdValue: receiverUsdValue,
+            address: effectiveReceiverAddress || "",
+            estimatedTime: estimatedTime != null ? estimatedTime : "~ 10 min"
+          },
+          percentage: {
+            value: activePercentage,
+            options: percentagePresets
+          },
+          onValueChange: (v) => onSenderAmountChange == null ? void 0 : onSenderAmountChange(v),
+          onPercentageChange: (percent_value) => {
+            const numericBalance = Number.parseFloat(senderBalance.replace(/[^\d.]/g, "")) || 0;
+            if (percent_value === null) {
+              onSenderAmountChange == null ? void 0 : onSenderAmountChange("0");
+              return onPercentageReset == null ? void 0 : onPercentageReset();
+            }
+            const amount = numericBalance * percent_value / 100;
+            onSenderAmountChange == null ? void 0 : onSenderAmountChange(amount.toString());
+            onPercentageClick == null ? void 0 : onPercentageClick(percent_value);
+          },
+          EditDestAddressTrigger: (props) => {
+            return /* @__PURE__ */ jsx24(
+              Button2,
+              __spreadProps(__spreadValues({}, props), {
+                variant: "unset",
+                size: "unset",
+                onClick: onReceiverAddressEdit,
+                asChild: true,
+                children: props.children
+              })
+            );
+          },
+          TokenChangeButton: /* @__PURE__ */ jsx24(TokenSelectorDialog, { children: /* @__PURE__ */ jsx24(
+            TagButton,
+            {
+              className: "cursor-pointer",
+              src: senderToken.image,
+              symbol: senderToken.symbol,
+              variant: "trigger",
+              disabled: isLoading
+            }
+          ) })
+        }
+      ) }),
+      /* @__PURE__ */ jsx24(
+        "div",
+        {
+          className: cn(
+            "grid transition-all duration-200 ease-out mt-4",
+            senderAmount && Number.parseFloat(senderAmount) > 0 ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+          ),
+          children: /* @__PURE__ */ jsxs16("div", { className: "overflow-hidden min-h-0", children: [
+            !showDetails ? /* @__PURE__ */ jsxs16("div", { className: "flex justify-between items-center text-brand-black-100", children: [
+              /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-3", children: [
+                /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-1", children: [
+                  /* @__PURE__ */ jsx24(Server_default, { className: "size-[14px] mt-[0.5px]" }),
+                  /* @__PURE__ */ jsx24("span", { className: "text-caption font-medium", children: bridgeDetails.bridgeFee })
+                ] }),
+                /* @__PURE__ */ jsx24(
+                  "button",
+                  {
+                    type: "button",
+                    className: "flex items-center gap-1 transition-all duration-200 cursor-pointer",
+                    onClick: onAdjustRelayerFee,
+                    onMouseEnter: () => setIsGasHovered(true),
+                    onMouseLeave: () => setIsGasHovered(false),
+                    children: !isGasHovered ? /* @__PURE__ */ jsxs16(Fragment4, { children: [
+                      /* @__PURE__ */ jsx24(Gas_default, { className: "size-[14px] mt-[0.5px]" }),
+                      /* @__PURE__ */ jsx24("span", { className: "text-caption font-medium", children: bridgeDetails.gasFee })
+                    ] }) : /* @__PURE__ */ jsxs16(Fragment4, { children: [
+                      /* @__PURE__ */ jsx24(Gas_default, { className: "size-[14px] mt-[0.5px] text-white" }),
+                      /* @__PURE__ */ jsx24("span", { className: "text-caption font-medium text-white", children: "Adjust relayer fee" })
+                    ] })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs16(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setShowDetails(!showDetails),
+                  className: "flex items-center gap-[2px] cursor-pointer hover:text-white duration-200 transition-colors",
+                  children: [
+                    /* @__PURE__ */ jsx24("span", { className: "text-caption font-medium", children: "Details" }),
+                    /* @__PURE__ */ jsx24(ChevronBottomDown_default, { className: "rotate-180 size-[14px]" })
+                  ]
+                }
+              )
+            ] }) : /* @__PURE__ */ jsxs16("div", { className: "flex justify-between items-center text-brand-black-100", children: [
+              /* @__PURE__ */ jsx24("span", { className: "text-caption font-medium opacity-50", children: "Bridge summary" }),
+              /* @__PURE__ */ jsxs16(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setShowDetails(!showDetails),
+                  className: "flex items-center gap-[2px] cursor-pointer hover:text-white duration-200 transition-colors",
+                  children: [
+                    /* @__PURE__ */ jsx24("span", { className: "text-caption font-medium", children: "Hide" }),
+                    /* @__PURE__ */ jsx24(ChevronBottomDown_default, { className: "size-[14px]" })
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx24(
+              "div",
+              {
+                className: cn(
+                  "grid transition-all duration-200 ease-out",
+                  showDetails ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+                ),
+                children: /* @__PURE__ */ jsx24("div", { className: "overflow-hidden min-h-0", children: /* @__PURE__ */ jsxs16("div", { className: "pt-4 space-y-3", children: [
+                  /* @__PURE__ */ jsxs16("div", { className: "flex justify-between items-center text-brand-black-100", children: [
+                    /* @__PURE__ */ jsxs16("span", { className: "text-caption font-medium flex items-center gap-1", children: [
+                      /* @__PURE__ */ jsx24(Percent_default, { className: "size-[14px]" }),
+                      "Bridge fee"
+                    ] }),
+                    /* @__PURE__ */ jsx24("span", { className: "text-caption font-medium text-white", children: bridgeDetails.bridgeFee })
+                  ] }),
+                  /* @__PURE__ */ jsxs16("div", { className: "flex justify-between items-center text-brand-black-100", children: [
+                    /* @__PURE__ */ jsxs16("span", { className: "text-caption font-medium flex items-center gap-1", children: [
+                      /* @__PURE__ */ jsx24(Gas_default, { className: "size-[14px]" }),
+                      "Gas costs"
+                    ] }),
+                    /* @__PURE__ */ jsx24("span", { className: "text-caption font-medium text-white", children: bridgeDetails.gasFee })
+                  ] }),
+                  /* @__PURE__ */ jsxs16("div", { className: "flex justify-between items-center text-brand-black-100", children: [
+                    /* @__PURE__ */ jsxs16("span", { className: "text-caption font-medium flex items-center gap-1", children: [
+                      /* @__PURE__ */ jsx24(ArrowBottomTop_default, { className: "size-[14px]" }),
+                      "Slippage tolerance"
+                    ] }),
+                    /* @__PURE__ */ jsx24("span", { className: "text-caption font-medium text-white", children: bridgeDetails.slippageTolerance })
+                  ] }),
+                  /* @__PURE__ */ jsxs16("div", { className: "flex justify-between items-center text-brand-black-100", children: [
+                    /* @__PURE__ */ jsxs16("span", { className: "text-caption font-medium flex items-center gap-1", children: [
+                      /* @__PURE__ */ jsx24(ArrowSplit_default, { className: "size-[14px]" }),
+                      "Route"
+                    ] }),
+                    /* @__PURE__ */ jsxs16("span", { className: "text-caption font-medium text-white", children: [
+                      bridgeDetails.routes,
+                      " stops"
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs16("div", { className: "flex justify-between items-center text-brand-black-100", children: [
+                    /* @__PURE__ */ jsxs16("span", { className: "text-caption font-medium flex items-center gap-1", children: [
+                      /* @__PURE__ */ jsx24(Clock_default, { className: "size-[14px]" }),
+                      "Estimated time"
+                    ] }),
+                    /* @__PURE__ */ jsx24("span", { className: "text-caption font-medium text-white", children: bridgeDetails.estimatedTime })
+                  ] })
+                ] }) })
+              }
+            )
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx24("div", { className: "mt-4", children: /* @__PURE__ */ jsx24(
+        Button2,
+        {
+          type: buttonState.onClick ? "submit" : "button",
+          className: "w-full body-2 font-medium",
+          variant: buttonState.variant,
+          disabled: buttonState.disabled,
+          animatedGradient: buttonState.animatedGradient,
+          onClick: buttonState.onClick ? void 0 : buttonState.onClick,
+          children: buttonState.text
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx24(
+      NetworkSelector,
+      {
+        isOpen: !!networkSelectorState,
+        title: getNetworkSelectorTitle(),
+        availableNetworks,
+        unavailableNetworks,
+        selectedNetwork: getSelectedNetwork(),
+        onNetworkSelect: handleNetworkSelect,
+        onClose: handleCloseNetworkSelector
+      }
+    )
+  ] });
+}
+function TokenSelectorDialog(props) {
+  const {
+    // Token selector props
+    allTokens = [],
+    availableTokens = [],
+    selectedToken = null,
+    onTokenSelect,
+    onAddToWallet,
+    children
+  } = props;
+  const [isTokenSelectorOpen, setIsTokenSelectorOpen] = useState3(false);
+  const handleCloseTokenSelector = () => {
+    setIsTokenSelectorOpen(false);
+  };
+  const handleTokenSelect = (token) => {
+    onTokenSelect == null ? void 0 : onTokenSelect(token);
+    setIsTokenSelectorOpen(false);
+  };
+  return /* @__PURE__ */ jsxs16(Dialog, { children: [
+    /* @__PURE__ */ jsx24(DialogTrigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx24(
+      TokenSelector,
+      {
+        isOpen: isTokenSelectorOpen,
+        title: "Select Token",
+        allTokens,
+        availableTokens,
+        selectedToken,
+        onTokenSelect: handleTokenSelect,
+        onAddToWallet,
+        onClose: handleCloseTokenSelector
+      }
+    )
+  ] });
+}
+
+// src/components/molecules/address-input.tsx
+import { useId as useId2, forwardRef as forwardRef2 } from "react";
+import { motion as motion2 } from "motion/react";
+import { Slot as Slot6 } from "@radix-ui/react-slot";
+import { jsx as jsx25, jsxs as jsxs17 } from "react/jsx-runtime";
+var AddressInput = forwardRef2((props, ref) => {
+  const id = useId2();
+  const _a = props, { network, validity } = _a, __props = __objRest(_a, ["network", "validity"]);
+  const input_id = `address${id}`;
+  return /* @__PURE__ */ jsxs17("div", { className: "flex flex-col gap-[calc(6rem/16)] w-full select-none", children: [
+    /* @__PURE__ */ jsx25(Text, { variant: "caption", className: "text-muted-foreground", asChild: true, children: /* @__PURE__ */ jsx25("label", { htmlFor: input_id, children: "To address" }) }),
+    /* @__PURE__ */ jsxs17("div", { className: "bg-brand-black-350 w-full h-[calc(50rem/16)] justify-start gap-2 flex py-[calc(13rem/16)] px-[calc(12rem/16)] rounded-[1rem]", children: [
+      props.validity.status === "error" ? /* @__PURE__ */ jsx25(IconButton, { variant: "level_2", rounded: "full", size: "xs", asChild: true, children: /* @__PURE__ */ jsx25("span", { className: "w-[calc(24rem/16)]", children: /* @__PURE__ */ jsx25(CirclePlaceholderDashed_default, { width: "1em" }) }) }) : /* @__PURE__ */ jsx25(
+        TokenImage,
+        {
+          className: "w-[calc(24rem/16)]",
+          src: props.network.imageUrl,
+          alt: props.network.name
+        }
+      ),
+      /* @__PURE__ */ jsx25(
+        "input",
+        __spreadProps(__spreadValues({
+          ref,
+          id: input_id,
+          type: "text",
+          placeholder: "Paste wallet address"
+        }, __props), {
+          className: "!outline-none placeholder:text-brand-black-100 text-foreground bg-transparent appearance-none w-full"
+        })
+      )
+    ] }),
+    /* @__PURE__ */ jsx25(Text, { variant: "caption", asChild: true, children: /* @__PURE__ */ jsxs17(
+      motion2.p,
+      {
+        initial: { opacity: 0, marginTop: -10 },
+        animate: props.value ? { opacity: 1, marginTop: 0 } : { opacity: 0, marginTop: -10 },
+        className: cn("inline-flex select-none gap-1 items-center", {
+          "text-brand-success-400": props.validity.status === "ok",
+          "text-brand-danger-500": props.validity.status === "error"
+        }),
+        children: [
+          props.validity.status === "ok" ? /* @__PURE__ */ jsx25(Check_default, { width: "1em" }) : /* @__PURE__ */ jsx25(XCircle_default, { width: "1em" }),
+          /* @__PURE__ */ jsx25("span", { children: props.validity.message })
+        ]
+      }
+    ) })
+  ] });
+});
+function AddressInputFocusBehaviour(props) {
+  return /* @__PURE__ */ jsx25(
+    Slot6,
+    __spreadProps(__spreadValues({}, props), {
+      onFocus: (e) => {
+        const input = e.currentTarget;
+        const alloweElements = /* @__PURE__ */ new Set(["input", "textarea"]);
+        if (!alloweElements.has(input.tagName.toLowerCase())) return;
+        const len = input.value.length;
+        input.setSelectionRange(len, len);
+      },
+      onMouseDown: (evt) => {
+        evt.preventDefault();
+        const { target } = evt;
+        target.setSelectionRange(43, 43);
+        target.focus();
+      },
+      children: props.children
+    })
+  );
+}
+
+// src/components/if.tsx
+import { Fragment as Fragment5, jsx as jsx26 } from "react/jsx-runtime";
+function If({ cond: condition, children }) {
+  if (!condition) return null;
+  return /* @__PURE__ */ jsx26(Fragment5, { children });
+}
+var if_default = If;
+
+// src/components/molecules/asset-list.tsx
+import { jsx as jsx27, jsxs as jsxs18 } from "react/jsx-runtime";
+function AssetListItem(props) {
+  const { caption, tokenImage } = props;
+  return /* @__PURE__ */ jsxs18("li", { className: "flex gap-[0.75rem] select-none items-center text-brand-black-100", children: [
+    /* @__PURE__ */ jsx27(BadgeIcon, __spreadValues({}, tokenImage)),
+    /* @__PURE__ */ jsxs18("div", { className: "flex flex-grow flex-col text-start gap-[0.125rem]", children: [
+      /* @__PURE__ */ jsx27("span", { className: "text-brand-white-500 text-[0.875rem] h-[1.25rem]", children: caption }),
+      /* @__PURE__ */ jsxs18("span", { className: "text-xs h-[1rem] flex items-center gap-[0.125rem]", children: [
+        props.amount,
+        " ",
+        /* @__PURE__ */ jsxs18(if_default, { cond: Boolean(props.address), children: [
+          "\u2022 ",
+          props.address
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx27("div", { className: "flex-col shrink-0 text-end", children: /* @__PURE__ */ jsx27("span", { className: "text-brand-white-500 text-[1rem] h-[1.25rem]", children: props.amountInUSD }) })
+  ] });
+}
+function AssetList(props) {
+  return /* @__PURE__ */ jsx27("ul", __spreadProps(__spreadValues({}, props), { className: cn("flex flex-col gap-[1rem]", props.className), children: props.children }));
+}
+
+// src/components/atoms/gradient-line.tsx
+import { Slot as Slot7 } from "@radix-ui/react-slot";
+import React9 from "react";
+import { jsx as jsx28, jsxs as jsxs19 } from "react/jsx-runtime";
+function GradientContainer(props) {
+  return /* @__PURE__ */ jsx28(Slot7, { className: "relative overflow-hidden", children: props.children });
+}
+function GradientLine(props) {
+  const ref = React9.useRef(null);
+  const { behaviour, value, mode = "default" } = props;
+  React9.useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const parent = el.parentElement;
+    if (!parent) return;
+    const updateWidth = () => {
+      const dim = parent.getBoundingClientRect();
+      parent.style.setProperty("--grad-container-w", `${dim.width}px`);
+      parent.style.setProperty("--grad-container-h", `${dim.height}px`);
+    };
+    updateWidth();
+    window.addEventListener("resize", updateWidth);
+    return () => {
+      window.removeEventListener("resize", updateWidth);
+    };
+  }, []);
+  React9.useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    if (behaviour !== "duration") return;
+    el.style.transition = `width ${value}ms linear`;
+    el.style.width = "100%";
+  }, [behaviour, value]);
+  React9.useEffect(() => {
+    if (behaviour !== "progress") return;
+    const el = ref.current;
+    if (!el) return;
+    el.style.width = `${value}%`;
+  }, [behaviour, value]);
+  return /* @__PURE__ */ jsx28("div", { className: "inset-0 flex flex-col absolute z-[0] justify-end", children: /* @__PURE__ */ jsx28(
+    "div",
+    {
+      ref,
+      className: "relative flex flex-col overflow-hidden w-0 h-[var(--grad-container-h)]",
+      children: /* @__PURE__ */ jsxs19("div", { className: "flex flex-col flex-1 z-[-1] w-[var(--grad-container-w)]", children: [
+        /* @__PURE__ */ jsx28(
+          "div",
+          {
+            className: cn("flex-1 w-full", {
+              "bg-[#2F1A28]": mode === "error",
+              "bg-brand-black-300/50": mode === "default"
+            })
+          }
+        ),
+        /* @__PURE__ */ jsx28(
+          "div",
+          {
+            className: "w-full h-px",
+            style: {
+              background: mode === "error" ? "var(--color-brand-danger-500)" : "linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 10%, #4ADEFF 29.71%, #FF35EB 78.68%, #FFED4A 100%)"
+            }
+          }
+        )
+      ] })
+    }
+  ) });
+}
+
+// src/components/molecules/connect-wallet.tsx
+import { Fragment as Fragment6, jsx as jsx29, jsxs as jsxs20 } from "react/jsx-runtime";
+function WalletAccountItem(props) {
+  const { network, wallet, address, isActive } = props;
+  return /* @__PURE__ */ jsxs20("li", { className: "p-[0.75rem] select-none h-[3.75rem] rounded-[1rem] bg-brand-black-350 items-center flex gap-[0.625rem] w-full", children: [
+    /* @__PURE__ */ jsx29(
+      BadgeIcon,
+      {
+        src: wallet.image,
+        alt: wallet.name,
+        badgeSrc: network.image,
+        badgeAlt: network.name
+      }
+    ),
+    /* @__PURE__ */ jsxs20(Fragment6, { children: [
+      /* @__PURE__ */ jsxs20("div", { className: "flex grow-1 flex-col font-medium text-brand-white-500", children: [
+        /* @__PURE__ */ jsx29("span", { className: "text-body", children: address != null ? address : "{{Address}}" }),
+        isActive && /* @__PURE__ */ jsxs20("span", { className: "text-caption-2 h-[1rem] text-brand-white-500 inline-flex items-center gap-0.5", children: [
+          /* @__PURE__ */ jsx29(Check_default, { className: "text-brand-success-400" }),
+          " Connected"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs20("div", { className: "flex grow-0 gap-[0.375rem] h-[2rem] items-stretch shrink-0 *:shrink-0", children: [
+        /* @__PURE__ */ jsx29(
+          IconButton,
+          {
+            size: "sm",
+            variant: "level_2",
+            rounded: "default",
+            className: "cursor-pointer",
+            onClick: () => {
+              var _a;
+              (_a = props == null ? void 0 : props.onCopy) == null ? void 0 : _a.call(props);
+            },
+            children: /* @__PURE__ */ jsx29(Copy_default, { className: "size-4 text-brand-black-100" })
+          }
+        ),
+        /* @__PURE__ */ jsxs20(
+          Button,
+          {
+            size: "sm",
+            variant: "level_2",
+            className: "h-[auto] !gap-0 group cursor-pointer",
+            onClick: () => {
+              var _a;
+              return (_a = props == null ? void 0 : props.onDisconnect) == null ? void 0 : _a.call(props);
+            },
+            children: [
+              /* @__PURE__ */ jsx29(Power_default, { className: "size-4 text-brand-black-100" }),
+              /* @__PURE__ */ jsx29("span", { className: "w-0 transition-all overflow-hidden group-hover:w-[10ch]", children: "Disconnect" })
+            ]
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+function WalletProviderItem(props) {
+  const {
+    status,
+    image: wallet,
+    installed = true,
+    unsupported = "supported",
+    transition = { progress_duration: 5e3 }
+  } = props;
+  const is_supported = unsupported === "supported";
+  return /* @__PURE__ */ jsx29(GradientContainer, { children: /* @__PURE__ */ jsxs20("li", { className: "p-[0.75rem] select-none w-full flex h-[3.75rem] rounded-[1rem] bg-brand-black-350 items-center", children: [
+    status === "connecting" ? /* @__PURE__ */ jsx29(
+      GradientLine,
+      {
+        behaviour: "duration",
+        value: transition.progress_duration
+      }
+    ) : null,
+    /* @__PURE__ */ jsxs20("div", { className: "flex z-10 gap-[0.625rem] w-full items-center", children: [
+      /* @__PURE__ */ jsx29(TokenImage, { src: wallet.src, alt: wallet.name, className: "w-[2rem]" }),
+      /* @__PURE__ */ jsx29("div", { className: "flex grow-1 flex-col font-medium text-brand-white-500", children: /* @__PURE__ */ jsx29("span", { className: "text-base leading-[1.6]", children: wallet.name }) }),
+      !is_supported ? /* @__PURE__ */ jsx29("span", { className: "text-brand-black-100 text-xs font-medium", children: unsupported }) : null,
+      !installed && is_supported ? /* @__PURE__ */ jsx29(Button, { variant: "level_2", size: "sm", onClick: props.onConnect, children: "Install" }) : null,
+      installed && is_supported && /* @__PURE__ */ jsxs20(Fragment6, { children: [
+        status === "failed" && /* @__PURE__ */ jsxs20("div", { className: "flex grow-0 gap-[0.375rem] h-[2rem] items-stretch shrink-0 *:shrink-0", children: [
+          /* @__PURE__ */ jsxs20(
+            Button,
+            {
+              size: "sm",
+              variant: "level_2",
+              className: "h-[auto]",
+              onClick: props.onRetry,
+              children: [
+                /* @__PURE__ */ jsx29(RotateCcw_default, { className: "size-4 text-brand-black-100" }),
+                "Try again"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx29(
+            IconButton,
+            {
+              className: "cursor-pointer",
+              variant: "level_2",
+              size: "sm",
+              onClick: props.onCancel,
+              rounded: "default",
+              children: /* @__PURE__ */ jsx29(XIcon_default, { className: "text-brand-black-100 size-[1em]" })
+            }
+          )
+        ] }),
+        (status === "connecting" || status === "idle") && /* @__PURE__ */ jsx29(
+          Button,
+          {
+            variant: "level_2",
+            size: "sm",
+            onClick: props.onConnect,
+            disabled: status === "connecting",
+            children: status === "connecting" ? "Connecting" : "Connect"
+          }
+        ),
+        status === "connected" && /* @__PURE__ */ jsx29("span", { className: "text-brand-success-400 text-xs font-medium", children: "Connected" })
+      ] })
+    ] })
+  ] }) });
+}
+function NetworkGroupItem(props) {
+  const { image: wallet } = props;
+  return /* @__PURE__ */ jsx29("li", { className: "p-[0.75rem] select-none flex h-[3.75rem] rounded-[1rem] bg-brand-black-350 w-full", children: /* @__PURE__ */ jsxs20("div", { className: "flex gap-[0.625rem] w-full z-20 relative items-center", children: [
+    /* @__PURE__ */ jsx29(TokenImage, { className: "w-[2rem]", src: wallet.src, alt: wallet.name }),
+    /* @__PURE__ */ jsxs20("div", { className: "flex grow-1 flex-col font-medium text-brand-white-500", children: [
+      /* @__PURE__ */ jsx29("span", { className: "text-body", children: wallet.name }),
+      /* @__PURE__ */ jsx29("span", { className: "text-caption-2 text-brand-black-100", children: props.description })
+    ] }),
+    /* @__PURE__ */ jsx29(Button, { variant: "level_2", size: "sm", onClick: props.onConnect, children: "Connect" })
+  ] }) });
+}
+function AccountItem(props) {
+  const { network, wallet, address, isActive } = props;
+  const handleSelect = () => {
+    var _a;
+    if (!isActive) {
+      (_a = props == null ? void 0 : props.onConnect) == null ? void 0 : _a.call(props);
+    }
+  };
+  return /* @__PURE__ */ jsxs20("li", { className: "select-none h-[3.75rem] items-center flex gap-[0.625rem] w-full", children: [
+    /* @__PURE__ */ jsx29(
+      IconButton,
+      {
+        className: `group ${isActive ? "cursor-default" : "cursor-pointer"}`,
+        variant: "secondary",
+        onClick: handleSelect,
+        title: isActive ? "Already active" : "Activate this account",
+        children: isActive ? /* @__PURE__ */ jsx29(Check_default, { className: "size-4 text-brand-success-400" }) : /* @__PURE__ */ jsx29(CirclePlaceholder_default, { className: "size-4 text-brand-black-100 group-hover:text-white duration-200 transition-colors" })
+      }
+    ),
+    /* @__PURE__ */ jsx29(
+      BadgeIcon,
+      {
+        src: wallet.image,
+        alt: wallet.name,
+        badgeSrc: network.image,
+        badgeAlt: network.name
+      }
+    ),
+    /* @__PURE__ */ jsxs20(Fragment6, { children: [
+      /* @__PURE__ */ jsx29("div", { className: "flex grow-1 flex-col font-medium text-brand-white-500", children: /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-[6px]", children: [
+        /* @__PURE__ */ jsx29("span", { className: "text-body", children: address != null ? address : "{{Address}}" }),
+        isActive && /* @__PURE__ */ jsx29("span", { className: "bg-brand-success-400/10 text-brand-success-400 px-[6px] py-[3px] rounded-[60px]", children: /* @__PURE__ */ jsx29(Text, { variant: "caption2", className: "font-semibold", children: "Active" }) })
+      ] }) }),
+      /* @__PURE__ */ jsxs20("div", { className: "flex gap-[6px] grow-0 h-[2rem] items-stretch shrink-0 *:shrink-0", children: [
+        /* @__PURE__ */ jsx29(
+          IconButton,
+          {
+            size: "sm",
+            variant: "level_2",
+            rounded: "default",
+            className: "cursor-pointer",
+            onClick: () => {
+              var _a;
+              (_a = props == null ? void 0 : props.onCopy) == null ? void 0 : _a.call(props);
+            },
+            children: /* @__PURE__ */ jsx29(Copy_default, { className: "size-4 text-brand-black-100" })
+          }
+        ),
+        /* @__PURE__ */ jsxs20(
+          Button,
+          {
+            size: "sm",
+            variant: "level_2",
+            className: "h-[auto] !gap-0 group cursor-pointer",
+            onClick: () => {
+              var _a;
+              return (_a = props == null ? void 0 : props.onDisconnect) == null ? void 0 : _a.call(props);
+            },
+            children: [
+              /* @__PURE__ */ jsx29(Power_default, { className: "size-4 text-brand-black-100" }),
+              /* @__PURE__ */ jsx29("span", { className: "w-0 transition-all overflow-hidden group-hover:w-[10ch]", children: "Disconnect" })
+            ]
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+
+// src/components/molecules/review-item.tsx
+import React10 from "react";
+import { jsx as jsx30, jsxs as jsxs21 } from "react/jsx-runtime";
+function ReviewItem(props) {
+  const Btn = props.AddressInfo ? props.AddressInfo : ReviewItemCopyAddressButton;
+  return /* @__PURE__ */ jsxs21("li", { className: "bg-brand-black-500 font-medium items-center w-full h-[calc(64rem/16)] flex gap-[1rem] p-[calc(12rem/16)]", children: [
+    /* @__PURE__ */ jsx30(BadgeIcon, __spreadValues({}, props.badge)),
+    /* @__PURE__ */ jsxs21("div", { className: "flex-1 text-start flex flex-col", children: [
+      /* @__PURE__ */ jsxs21("span", { className: "text-[1rem] leading-[1.25] text-brand-white-500", children: [
+        props.asset.amount,
+        " ",
+        props.asset.symbol
+      ] }),
+      /* @__PURE__ */ jsx30("span", { className: "text-[calc(12rem/16)] leading-[1rem]", children: props.asset.secondaryValue })
+    ] }),
+    /* @__PURE__ */ jsxs21("div", { className: "flex flex-col items-end gap-[2px] text-end shrink-0", children: [
+      /* @__PURE__ */ jsx30(Btn, { address: props.address, tag: props.tag }),
+      /* @__PURE__ */ jsx30("span", { className: "text-[calc(12rem/16)] leading-[1rem]", children: props.networkName })
+    ] })
+  ] });
+}
+var ReviewItemCopyAddressButton = React10.forwardRef((props, ref) => {
+  const _a = props, { address, tag } = _a, PROPS = __objRest(_a, ["address", "tag"]);
+  return /* @__PURE__ */ jsxs21(
+    "button",
+    __spreadProps(__spreadValues({}, PROPS), {
+      ref,
+      type: "button",
+      className: cn(
+        "rounded-full px-[6px] py-[3px] text-[calc(14rem/16)] inline-flex items-center gap-[calc(4rem/16)] bg-brand-black-300",
+        props.className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs21("span", { className: "sr-only", children: [
+          "Copy ",
+          tag,
+          " address"
+        ] }),
+        /* @__PURE__ */ jsx30("span", { className: "text-[calc(12rem/16)] not-sr-only leading-[1rem] text-brand-white-500", children: address }),
+        /* @__PURE__ */ jsx30(Copy_default, { className: "size-4" })
+      ]
+    })
+  );
+});
+
+// src/components/molecules/dialog.tsx
+import * as DialogPrimitive2 from "@radix-ui/react-dialog";
+import React11 from "react";
+import { Fragment as Fragment7, jsx as jsx31, jsxs as jsxs22 } from "react/jsx-runtime";
+function DialogMorphContent(_a) {
+  var _b = _a, {
+    className,
+    children,
+    showCloseButton = true
+  } = _b, props = __objRest(_b, [
+    "className",
+    "children",
+    "showCloseButton"
+  ]);
+  const [mode, setViewMode] = React11.useState("card");
+  React11.useEffect(() => {
+    const controller = new AbortController();
+    const signal = controller.signal;
+    const checkOrientation = () => {
+      const mode2 = window.innerHeight > window.innerWidth ? "portrait" : "landscape";
+      const viewMode = {
+        portrait: "fullscreen",
+        landscape: "card"
+      };
+      if (mode2 === "portrait" && window.innerWidth >= 600) {
+        return setViewMode("card");
+      }
+      setViewMode(viewMode[mode2]);
+    };
+    checkOrientation();
+    window.addEventListener("resize", checkOrientation, { signal });
+    return () => {
+      controller.abort();
+    };
+  }, []);
+  const Content7 = /* @__PURE__ */ jsxs22(
+    DialogPrimitive2.Content,
+    __spreadProps(__spreadValues({
+      "data-slot": "dialog-content",
+      className: cn(
+        "bg-brand-black-600 text-brand-black-100 data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 grid w-full gap-4 pt-4 p-6 duration-200",
+        {
+          "responsive-fullscren-dialog": mode === "fullscreen",
+          "responsive-card-dialog": mode === "card"
+        },
+        className
+      )
+    }, props), {
+      children: [
+        children,
+        showCloseButton && /* @__PURE__ */ jsxs22(
+          DialogPrimitive2.Close,
+          {
+            "data-slot": "dialog-close",
+            className: "ring-offset-background w-[calc(32rem/16)] inline-flex items-center justify-center rounded-full text-brand-black-100 aspect-square focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+            children: [
+              /* @__PURE__ */ jsx31(XIcon_default, { width: "1rem", height: "1rem" }),
+              /* @__PURE__ */ jsx31("span", { className: "sr-only", children: "Close" })
+            ]
+          }
+        )
+      ]
+    })
+  );
+  return /* @__PURE__ */ jsxs22(DialogPortal, { "data-slot": "dialog-portal", children: [
+    /* @__PURE__ */ jsx31(DialogOverlay, {}),
+    mode === "card" ? /* @__PURE__ */ jsx31(SmoothCorners, { children: Content7 }) : /* @__PURE__ */ jsx31(Fragment7, { children: Content7 })
+  ] });
+}
+
+// src/components/molecules/manage-wallet.tsx
+import React12 from "react";
+import { motion as motion3 } from "motion/react";
+
+// src/@/ui/sheet.tsx
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { jsx as jsx32, jsxs as jsxs23 } from "react/jsx-runtime";
+function Sheet(_a) {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ jsx32(SheetPrimitive.Root, __spreadValues({ "data-slot": "sheet" }, props));
+}
+function SheetTrigger(_a) {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ jsx32(SheetPrimitive.Trigger, __spreadValues({ "data-slot": "sheet-trigger" }, props));
+}
+function SheetPortal(_a) {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ jsx32(SheetPrimitive.Portal, __spreadValues({ "data-slot": "sheet-portal" }, props));
+}
+function SheetOverlay(_a) {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx32(
+    SheetPrimitive.Overlay,
+    __spreadValues({
+      "data-slot": "sheet-overlay",
+      className: cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )
+    }, props)
+  );
+}
+function SheetContent(_a) {
+  var _b = _a, {
+    className,
+    children,
+    side = "right"
+  } = _b, props = __objRest(_b, [
+    "className",
+    "children",
+    "side"
+  ]);
+  return /* @__PURE__ */ jsxs23(SheetPortal, { children: [
+    /* @__PURE__ */ jsx32(SheetOverlay, {}),
+    /* @__PURE__ */ jsxs23(
+      SheetPrimitive.Content,
+      __spreadProps(__spreadValues({
+        "data-slot": "sheet-content",
+        className: cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+          side === "right" && "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-sm",
+          side === "left" && "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+          side === "top" && "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
+          side === "bottom" && "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+          className
+        )
+      }, props), {
+        children: [
+          children,
+          /* @__PURE__ */ jsx32(
+            SheetPrimitive.Close,
+            {
+              asChild: true,
+              className: "absolute top-[1.625rem] -left-10",
+              children: /* @__PURE__ */ jsxs23(
+                IconButton,
+                {
+                  className: "cursor-pointer",
+                  variant: "secondary",
+                  rounded: "full",
+                  size: "sm",
+                  children: [
+                    /* @__PURE__ */ jsx32(ChevronDoubleRight_default, { className: "size-4 text-brand-black-100" }),
+                    /* @__PURE__ */ jsx32("span", { className: "sr-only", children: "Close" })
+                  ]
+                }
+              )
+            }
+          )
+        ]
+      })
+    )
+  ] });
+}
+function SheetHeader(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx32(
+    "div",
+    __spreadValues({
+      "data-slot": "sheet-header",
+      className: cn("flex flex-col gap-1.5 p-4", className)
+    }, props)
+  );
+}
+function SheetTitle(_a) {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx32(
+    SheetPrimitive.Title,
+    __spreadValues({
+      "data-slot": "sheet-title",
+      className: cn("text-foreground font-semibold", className)
+    }, props)
+  );
+}
+function SheetDescription(_a) {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx32(
+    SheetPrimitive.Description,
+    __spreadValues({
+      "data-slot": "sheet-description",
+      className: cn("text-muted-foreground text-sm", className)
+    }, props)
+  );
+}
+
+// src/components/organisms/manage-account.tsx
+import { jsx as jsx33, jsxs as jsxs24 } from "react/jsx-runtime";
+function ManageAccounts() {
+  return /* @__PURE__ */ jsxs24(SheetHeader, { className: "p-[1rem] -mx-[1rem]", children: [
+    /* @__PURE__ */ jsxs24("div", { className: "flex items-center gap-[0.625rem] select-none", children: [
+      /* @__PURE__ */ jsx33(
+        IconButton,
+        {
+          disabled: true,
+          className: "pointer-events-none !text-brand-white-500",
+          variant: "level_2",
+          rounded: "full",
+          size: "sm",
+          children: /* @__PURE__ */ jsx33(Wallet_default, { className: "size-5" })
+        }
+      ),
+      /* @__PURE__ */ jsx33(SheetTitle, { className: "text-brand-white-100", children: /* @__PURE__ */ jsx33("span", { className: "text-base font-medium", children: "Connect Your Wallet" }) })
+    ] }),
+    /* @__PURE__ */ jsx33(SheetDescription, { className: "sr-only", children: "Choose a wallet provider to connect to our application." })
+  ] });
+}
+function HeaderNested(props) {
+  var _a;
+  const { heading, image, onBack, hideBackButton } = props;
+  return /* @__PURE__ */ jsxs24("div", { className: "p-[1rem] -mx-[1rem]", children: [
+    /* @__PURE__ */ jsxs24("div", { className: "flex items-center gap-[0.625rem] select-none", children: [
+      /* @__PURE__ */ jsx33(
+        TokenImage,
+        {
+          src: image.src,
+          className: "w-[2rem]",
+          alt: (_a = image.alt) != null ? _a : heading
+        }
+      ),
+      /* @__PURE__ */ jsx33(SheetTitle, { className: "text-brand-white-100 flex-1", children: /* @__PURE__ */ jsx33("span", { className: "text-base font-medium", children: heading }) }),
+      !hideBackButton && /* @__PURE__ */ jsx33(
+        IconButton,
+        {
+          variant: "level_1",
+          rounded: "full",
+          size: "sm",
+          onClick: onBack,
+          children: /* @__PURE__ */ jsx33(
+            StepBack_default,
+            {
+              width: "1rem",
+              height: "1rem",
+              className: "text-brand-black-100"
+            }
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx33(SheetDescription, { className: "sr-only", children: "Choose a wallet provider to connect to our application." })
+  ] });
+}
+function ListSection({
+  children,
+  caption = "Heading"
+}) {
+  return /* @__PURE__ */ jsxs24("div", { className: "flex flex-col gap-y-[0.375rem]", children: [
+    /* @__PURE__ */ jsx33("div", { className: "text-caption text-brand-black-100 select-none font-normal", children: caption }),
+    /* @__PURE__ */ jsx33("div", { className: "grid gap-2", children })
+  ] });
+}
+function CWDrawerContent(_a) {
+  var _b = _a, {
+    children
+  } = _b, props = __objRest(_b, [
+    "children"
+  ]);
+  return /* @__PURE__ */ jsx33(
+    SheetContent,
+    __spreadProps(__spreadValues({}, props), {
+      side: "right",
+      className: "max-w-[calc(29.75rem_+_1.25rem)] select-none border-none shadow-none text-brand-white-500 sm:w-[540px] bg-transparent p-[0.625rem]",
+      children: /* @__PURE__ */ jsx33("div", { className: "bg-brand-black-550 flex-1 flex flex-col rounded-[1rem] w-[29.75rem] px-[1rem]", children })
+    })
+  );
+}
+
+// src/components/molecules/manage-wallet.tsx
+import { Slot as Slot8 } from "@radix-ui/react-slot";
+import { isHex } from "viem";
+import { Fragment as Fragment8, jsx as jsx34, jsxs as jsxs25 } from "react/jsx-runtime";
+var slideDown = {
+  show: {
+    opacity: [0, 0.8, 1]
+  },
+  hide: {
+    opacity: [1, 0.25, 0]
+  }
+};
+function ConnectedHeader(props) {
+  const { show: open, setShow } = useManager();
+  const { accounts, onCopy, onDisconnect, onConnect, polkadotImage, evmImage } = props;
+  const containerRef = React12.useRef(null);
+  const parent = React12.useRef(null);
+  const hasEVM = accounts.some((account) => isHex(account.address));
+  const hasPolkadot = accounts.some((account) => !isHex(account.address));
+  const shouldShowPolkadotOption = hasEVM && !hasPolkadot;
+  const shouldShowEVMOption = hasPolkadot && !hasEVM;
+  const shouldShowNetworkGroup = shouldShowPolkadotOption || shouldShowEVMOption;
+  React12.useEffect(() => {
+    const updateHeight = () => {
+      if (containerRef.current && parent.current) {
+        const height = containerRef.current.offsetHeight;
+        parent.current.style.setProperty("--container-height", `${height}px`);
+      }
+    };
+    updateHeight();
+    const resizeObserver = new ResizeObserver(updateHeight);
+    if (containerRef.current) {
+      resizeObserver.observe(containerRef.current);
+    }
+    return () => {
+      if (containerRef.current) {
+        resizeObserver.unobserve(containerRef.current);
+      }
+      resizeObserver.disconnect();
+    };
+  }, []);
+  return /* @__PURE__ */ jsx34(Fragment8, { children: /* @__PURE__ */ jsxs25(
+    "div",
+    {
+      ref: parent,
+      className: "bg-brand-black-550 z-50 relative rounded-t-[1rem] overflow-hidden -mx-[1rem]",
+      style: { "--container-height": "auto" },
+      children: [
+        /* @__PURE__ */ jsx34(
+          "button",
+          {
+            type: "button",
+            className: cn(
+              "p-[1rem] w-full cursor-pointer text-start appearance-none z-20 relative bg-gradient-to-b from-brand-black-550 to-transparent rounded-t-[1rem] border-b border-brand-black-350",
+              {
+                "hover:bg-brand-black-500 border-transparent": !open
+              }
+            ),
+            onClick: () => setShow((e) => !e),
+            children: /* @__PURE__ */ jsxs25("div", { className: "flex w-full gap-2 justify-between items-center", children: [
+              /* @__PURE__ */ jsx34(AccountStack, { items: accounts }),
+              /* @__PURE__ */ jsx34(
+                IconButton,
+                {
+                  variant: "level_1",
+                  "data-open": open,
+                  className: "data-[open=false]:rotate-180 shrink-0 transform transition-all",
+                  rounded: "full",
+                  size: "sm",
+                  asChild: true,
+                  children: /* @__PURE__ */ jsx34("span", { children: /* @__PURE__ */ jsx34(ChevronBottomDown_default, {}) })
+                }
+              )
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx34(
+          motion3.div,
+          {
+            initial: { height: 0 },
+            animate: { height: open ? "var(--container-height)" : 0 },
+            className: cn("z-10 relative", {
+              "pointer-events-none": !open
+            }),
+            children: /* @__PURE__ */ jsx34(
+              motion3.div,
+              {
+                ref: containerRef,
+                initial: { opacity: 0 },
+                variants: slideDown,
+                transition: { duration: 0.4 },
+                animate: open ? "show" : "hide",
+                className: "border-brand-black-350 px-[1rem] border-b pb-[1rem]",
+                children: /* @__PURE__ */ jsxs25(ListSection, { caption: "Networks", children: [
+                  accounts.map((account, index) => /* @__PURE__ */ jsx34(
+                    WalletAccountItem,
+                    {
+                      address: shortenAccountAddress(account.address),
+                      network: account.network,
+                      wallet: account.wallet,
+                      onCopy: () => onCopy == null ? void 0 : onCopy(account.address),
+                      onDisconnect: () => onDisconnect == null ? void 0 : onDisconnect(account, index),
+                      isActive: true
+                    },
+                    `${account.address}-${index}`
+                  )),
+                  shouldShowNetworkGroup && /* @__PURE__ */ jsxs25(Fragment8, { children: [
+                    shouldShowPolkadotOption && /* @__PURE__ */ jsx34(
+                      NetworkGroupItem,
+                      {
+                        image: polkadotImage || defaultPolkadotImage,
+                        description: "Use Polkadot-compatible wallets",
+                        onConnect: () => onConnect == null ? void 0 : onConnect("polkadot")
+                      }
+                    ),
+                    shouldShowEVMOption && /* @__PURE__ */ jsx34(
+                      NetworkGroupItem,
+                      {
+                        image: evmImage || defaultEvmImage,
+                        description: "Use Ethereum-compatible wallets",
+                        onConnect: () => onConnect == null ? void 0 : onConnect("evm")
+                      }
+                    )
+                  ] })
+                ] })
+              }
+            )
+          }
+        )
+      ]
+    }
+  ) });
+}
+function AccountStack({ items = [] }) {
+  var _a, _b, _c;
+  return /* @__PURE__ */ jsxs25("div", { className: "flex gap-[0.625rem] items-center", children: [
+    /* @__PURE__ */ jsx34("div", { className: "inline-flex -space-x-[0.3125rem]", children: items.map((item, index) => /* @__PURE__ */ jsx34(
+      "div",
+      {
+        style: { zIndex: items.length - index, position: "relative" },
+        children: /* @__PURE__ */ jsx34(
+          BadgeIcon,
+          {
+            outline: true,
+            src: item.wallet.image,
+            alt: item.wallet.name,
+            badgeSrc: item.network.image,
+            badgeAlt: item.network.name
+          }
+        )
+      },
+      item.address
+    )) }),
+    /* @__PURE__ */ jsxs25("span", { className: "flex flex-col whitespace-nowrap", children: [
+      /* @__PURE__ */ jsx34("span", { className: "text-base font-medium h-[1.25rem] text-brand-white-500", children: items.length > 1 ? /* @__PURE__ */ jsxs25(Fragment8, { children: [
+        items.length,
+        " wallets"
+      ] }) : /* @__PURE__ */ jsx34(Fragment8, { children: (_c = shortenAccountAddress((_b = (_a = items[0]) == null ? void 0 : _a.address) != null ? _b : "")) != null ? _c : "--" }) }),
+      /* @__PURE__ */ jsx34("span", { className: "text-xs text-start h-[1rem] font-medium inline-flex items-center gap-[0.125rem] text-brand-black-100", children: "Connected" })
+    ] })
+  ] });
+}
+function WalletManagerUIProvider(props) {
+  const { expand: open = false, children } = props;
+  const [show, setShow] = React12.useState(open);
+  return /* @__PURE__ */ jsx34(WalletManagerContext.Provider, { value: { show, setShow }, children });
+}
+var WalletManagerContext = React12.createContext({
+  show: false,
+  // @ts-expect-error
+  setShow: React12.Dispatch
+});
+function useManager() {
+  return React12.useContext(WalletManagerContext);
+}
+function WalletManagerUIContent({
+  children
+}) {
+  const { show } = useManager();
+  return /* @__PURE__ */ jsx34(
+    Slot8,
+    {
+      className: cn("transition-all pt-[1rem] flex-1", {
+        "opacity-15 pointer-events-none filter blur-[2px]": show
+      }),
+      children
+    }
+  );
+}
+
+// src/components/molecules/summary.tsx
+import { jsx as jsx35, jsxs as jsxs26 } from "react/jsx-runtime";
+function BridgeSummary(props) {
+  return /* @__PURE__ */ jsx35("div", { className: "flex flex-col gap-2 text-brand-black-100", children: props.children });
+}
+function SummaryEntry(props) {
+  const Icon = props.icon;
+  return /* @__PURE__ */ jsxs26("div", { className: "flex select-none items-center text-[calc(12rem/16)] font-medium", children: [
+    /* @__PURE__ */ jsxs26("dt", { className: "flex-1 gap-1 flex items-center", children: [
+      /* @__PURE__ */ jsx35(Icon, { size: "1.16em" }),
+      /* @__PURE__ */ jsx35("span", { className: "text-[1em] leading-[1rem]", children: props.name })
+    ] }),
+    /* @__PURE__ */ jsx35("dd", { children: props.children })
+  ] });
+}
+function makeEntry({
+  name,
+  icon
+}) {
+  return function Entry({ children }) {
+    return /* @__PURE__ */ jsx35(SummaryEntry, { icon, name, children }, name);
+  };
+}
+var Bridge = makeEntry({
+  icon: ({ size }) => /* @__PURE__ */ jsx35(Percent_default, { width: size }),
+  name: "Bridge fee"
+});
+var GasEntry = makeEntry({
+  icon: ({ size }) => /* @__PURE__ */ jsx35(Gas_default, { width: size }),
+  name: "Gas costs"
+});
+var SpillageTolerance = makeEntry({
+  icon: ({ size }) => /* @__PURE__ */ jsx35(ArrowBottomTop_default, { width: size }),
+  name: "Spillage tolerance"
+});
+var Route = makeEntry({
+  icon: ({ size }) => /* @__PURE__ */ jsx35(ArrowSplit_default, { width: size }),
+  name: "Route"
+});
+var ETA = makeEntry({
+  icon: ({ size }) => /* @__PURE__ */ jsx35(Clock_default, { width: size }),
+  name: "Estimated time"
+});
+var SummaryValues = {
+  Key: {
+    Bridge,
+    GasEntry,
+    SpillageTolerance,
+    Route,
+    ETA
+  },
+  Values: {
+    Highlight: ({ children }) => {
+      return /* @__PURE__ */ jsx35("span", { className: "text-[inherit] text-brand-white-500", children });
+    },
+    Soft: ({ children }) => {
+      return /* @__PURE__ */ jsx35("span", { className: "text-[inherit]text-brand-black-50", children });
+    }
+  }
+};
+
+// src/components/molecules/timeline.tsx
+import React13 from "react";
+import { Loader2 } from "lucide-react";
+import { AnimatePresence as AnimatePresence2, motion as motion4 } from "motion/react";
+
+// src/@/ui/progress.tsx
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+import { jsx as jsx36 } from "react/jsx-runtime";
+function Progress(_a) {
+  var _b = _a, {
+    className,
+    value
+  } = _b, props = __objRest(_b, [
+    "className",
+    "value"
+  ]);
+  return /* @__PURE__ */ jsx36(
+    ProgressPrimitive.Root,
+    __spreadProps(__spreadValues({
+      "data-slot": "progress",
+      className: cn(
+        "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
+        className
+      )
+    }, props), {
+      children: /* @__PURE__ */ jsx36(
+        ProgressPrimitive.Indicator,
+        {
+          "data-slot": "progress-indicator",
+          className: "bg-[var(--track-color)] h-full w-full flex-1 transition-all",
+          style: { transform: `translateX(-${100 - (value || 0)}%)` }
+        }
+      )
+    })
+  );
+}
+
+// src/components/molecules/timeline.tsx
+import { Slot as Slot9 } from "@radix-ui/react-slot";
+import { jsx as jsx37, jsxs as jsxs27 } from "react/jsx-runtime";
+function TimelineList(props) {
+  return /* @__PURE__ */ jsx37("ul", { className: "flex flex-col", children: props.children });
+}
+var StatusTextMap = {
+  processing: "Processing",
+  upcoming: "Upcoming",
+  error: "Failed"
+};
+function TimelineItem(props) {
+  var _a, _b, _c, _d;
+  const { processingStatus, caption } = props;
+  const is_visually_active = processingStatus !== "upcoming";
+  const id = React13.useId();
+  const layoutId = `${id}/${caption}/content-2`;
+  return /* @__PURE__ */ jsx37(
+    motion4.li,
+    {
+      "data-process-status": processingStatus,
+      className: "block bg-brand-black-350 cursor-default select-none font-medium text-brand-white-500",
+      children: /* @__PURE__ */ jsxs27(
+        motion4.div,
+        {
+          initial: { opacity: 0.5 },
+          animate: {
+            opacity: is_visually_active ? 1 : 0.5
+          },
+          className: "flex h-[3.5rem] items-center gap-[0.86rem] py-[0.5625rem] px-[0.75rem] ",
+          children: [
+            props.level === 0 ? /* @__PURE__ */ jsx37(BadgeIcon, __spreadValues({}, props.badge)) : /* @__PURE__ */ jsx37(
+              IconButton,
+              {
+                variant: "level_2",
+                size: "sm",
+                rounded: "full",
+                className: "pointer-events-none !bg-transparent backdrop-blur-[34px]",
+                style: {
+                  boxShadow: "0 4px 24px 0 rgba(255, 255, 255, 0.05) inset"
+                },
+                children: /* @__PURE__ */ jsx37(
+                  "span",
+                  {
+                    className: cn(
+                      "w-[0.5rem] inline-block aspect-square rounded-lg bg-brand-white-500",
+                      {
+                        "bg-brand-success-400": processingStatus === "completed",
+                        "bg-brand-danger-500": processingStatus === "error"
+                      }
+                    )
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxs27("div", { className: "flex flex-col flex-1 gap-[calc(4/16rem)]", children: [
+              /* @__PURE__ */ jsx37("div", { className: "text-brand-white-500 text-[1rem] h-[1.25rem]", children: caption }),
+              /* @__PURE__ */ jsxs27("div", { className: "text-xs h-[1rem] text-brand-black-100", children: [
+                processingStatus === "completed" ? /* @__PURE__ */ jsx37("span", { children: /* @__PURE__ */ jsxs27(
+                  "a",
+                  {
+                    href: (_a = props == null ? void 0 : props.data) == null ? void 0 : _a.transactionUrl,
+                    className: "flex cursor-pointer gap-[calc(2rem/16)] items-center",
+                    children: [
+                      /* @__PURE__ */ jsx37("span", { children: "View in explorer " }),
+                      /* @__PURE__ */ jsx37(ArrowUpRight_default, { width: "0.75rem", height: "0.75rem" })
+                    ]
+                  }
+                ) }) : null,
+                processingStatus === "completed" ? null : /* @__PURE__ */ jsx37("span", { children: /* @__PURE__ */ jsx37("span", { children: (_b = props == null ? void 0 : props.secondary) != null ? _b : StatusTextMap[processingStatus] }) })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs27(AnimatePresence2, { children: [
+              processingStatus === "completed" ? /* @__PURE__ */ jsxs27(
+                motion4.div,
+                {
+                  layoutId,
+                  initial: { x: 10, opacity: 0 },
+                  animate: { x: 0, opacity: 1 },
+                  exit: { x: 10, opacity: 0 },
+                  className: "flex gap-[calc(8rem/16)] items-center",
+                  children: [
+                    /* @__PURE__ */ jsx37("span", { className: "text-[calc(13rem/16)] text-brand-black-100", children: (_c = props == null ? void 0 : props.data) == null ? void 0 : _c.completedIn }),
+                    /* @__PURE__ */ jsx37(
+                      Check_default,
+                      {
+                        height: "1rem",
+                        width: "1rem",
+                        className: "text-brand-success-400"
+                      }
+                    )
+                  ]
+                }
+              ) : null,
+              processingStatus === "processing" ? /* @__PURE__ */ jsxs27(
+                motion4.div,
+                {
+                  initial: { x: 10, opacity: 0 },
+                  animate: { x: 0, opacity: 1 },
+                  exit: { x: 10, opacity: 0 },
+                  layoutId,
+                  className: "flex gap-[calc(10rem/16)] items-center",
+                  children: [
+                    /* @__PURE__ */ jsx37("span", { className: "text-[calc(13rem/16)]", children: (_d = props == null ? void 0 : props.data) == null ? void 0 : _d.eta }),
+                    /* @__PURE__ */ jsx37(
+                      Loader2,
+                      {
+                        size: "1rem",
+                        className: "animate text-brand-black-100 animate-spin"
+                      }
+                    )
+                  ]
+                }
+              ) : null
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+function TimelineListGroup(props) {
+  return /* @__PURE__ */ jsx37("ul", { className: cn("flex flex-col"), children: props.children });
+}
+var TimelineRoot = React13.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx37(
+    "ul",
+    __spreadProps(__spreadValues({
+      ref
+    }, props), {
+      className: cn(
+        "flex flex-col gap-y-[calc(2rem/16)] *:first:rounded-t-[1rem] *:last:rounded-b-[1rem]",
+        props.className
+      ),
+      children: props.children
+    })
+  );
+});
+TimelineRoot.displayName = "TimelineRoot";
+var trackColorMap = {
+  warning: "var(--color-brand-warning-500)",
+  default: "var(--color-brand-black-100)"
+};
+function TransactionTimer(props) {
+  const { mins, hours, seconds, severity = "warning" } = props;
+  return /* @__PURE__ */ jsxs27("div", { className: "flex flex-col gap-[calc(6rem/16)]", children: [
+    /* @__PURE__ */ jsxs27(
+      "div",
+      {
+        className: cn(
+          "flex gap-[calc(4rem/16)] font-medium h-[1rem] text-xs items-center",
+          {
+            "text-[#7A775F]": severity === "warning",
+            "text-brand-black-100": severity === "default"
+          }
+        ),
+        children: [
+          /* @__PURE__ */ jsx37("span", { children: "Transaction will timeout in" }),
+          /* @__PURE__ */ jsxs27("span", { className: "text-brand-white-500", children: [
+            String(hours).padStart(2, "0"),
+            ":",
+            String(mins).padStart(2, "0"),
+            ":",
+            String(seconds).padStart(2, "0")
+          ] }),
+          /* @__PURE__ */ jsx37("span", { children: /* @__PURE__ */ jsx37(CircleInfo_default, { width: "1em", height: "1em" }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx37(
+      Progress,
+      {
+        value: props.progress,
+        className: "bg-white/[0.04] h-[calc(3rem/16)]",
+        style: {
+          "--track-color": trackColorMap[severity]
+        }
+      }
+    )
+  ] });
+}
+function TimerWrap(props) {
+  const show = props.reveal;
+  return /* @__PURE__ */ jsxs27(
+    motion4.div,
+    {
+      initial: { paddingTop: 0 },
+      animate: !show ? { paddingBlockStart: 0 } : { paddingBlockStart: "var(--timer-top)" },
+      style: {
+        "--timer-top": "calc(calc(44 / 16) * 1rem)"
+      },
+      className: "flex flex-col items-stretch justify-start relative",
+      children: [
+        /* @__PURE__ */ jsx37(
+          "div",
+          {
+            className: cn(
+              "flex overflow-hidden transition-all select-none absolute top-0 inset-x-0 z-10 flex-col bg-[#30261c] border border-white/[0.05] !rounded-t-[1rem] pb-[calc(12rem/16)] items-center justify-center text-brand-white-500",
+              !show ? "h-[calc(40rem/16)]" : "h-[calc(56rem/16)]"
+            ),
+            children: props.Timer
+          }
+        ),
+        /* @__PURE__ */ jsx37(
+          Slot9,
+          {
+            className: cn("min-h-[calc(56rem/11)] z-20 relative !rounded-[1rem]", {
+              "!shadow-[0px_-1px_0_0_#55553E66]": show
+            }),
+            children: props.children
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/molecules/toast.tsx
+import { Fragment as Fragment9, jsx as jsx38, jsxs as jsxs28 } from "react/jsx-runtime";
+var SeverityConfig = {
+  error: {
+    icon: Alert_default,
+    color: "text-brand-danger-500"
+  },
+  warning: {
+    icon: Alert_default,
+    color: "text-brand-warning-500"
+  },
+  info: {
+    icon: CircleInfo_default,
+    color: "text-brand-black-100"
+  },
+  success: {
+    icon: Check_default,
+    color: "text-brand-success-400"
+  }
+};
+function ToastBox(props) {
+  const { actions, onDismiss } = props;
+  const { icon: Icon, color } = SeverityConfig[props.severity];
+  const handleDismiss = (event) => {
+    event.stopPropagation();
+    onDismiss == null ? void 0 : onDismiss(event);
+  };
+  return /* @__PURE__ */ jsx38(SmoothCorners, { size: "sm", children: /* @__PURE__ */ jsxs28("div", { className: "bg-brand-black-500 flex flex-col md:flex-row gap-[0.75rem] items-start py-[calc(10rem/16)] px-[calc(12rem/16)] text-muted-foreground", children: [
+    /* @__PURE__ */ jsx38(
+      "div",
+      {
+        className: cn("items-center justify-center shrink-0 grow-0", color),
+        style: { fontSize: "calc(calc(24/16) * 1rem)" },
+        children: /* @__PURE__ */ jsx38(Icon, { width: "1em", height: "1em" })
+      }
+    ),
+    /* @__PURE__ */ jsxs28("div", { className: "flex flex-col flex-1", children: [
+      /* @__PURE__ */ jsx38(Text, { variant: "body1", className: "text-foreground", children: props.heading }),
+      /* @__PURE__ */ jsx38(
+        Text,
+        {
+          variant: "caption2",
+          className: "text-muted-foreground text-balance",
+          children: props.children
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx38("div", { className: "flex gap-[calc(6rem/16)] items-center self-center w-full md:w-auto", children: actions ? /* @__PURE__ */ jsxs28(Fragment9, { children: [
+      /* @__PURE__ */ jsx38("div", { className: "flex gap-[calc(6rem/16)] flex-1 items-center  *:flex-1", children: actions }),
+      /* @__PURE__ */ jsx38(
+        IconButton,
+        {
+          className: "cursor-pointer",
+          onClick: handleDismiss,
+          size: "smx",
+          variant: "level_2",
+          rounded: "default",
+          children: /* @__PURE__ */ jsx38(XIcon_default, { width: "1rem" })
+        }
+      )
+    ] }) : /* @__PURE__ */ jsx38(
+      Button2,
+      {
+        size: "sm",
+        variant: "level_2",
+        className: "w-full cursor-pointer",
+        onClick: handleDismiss,
+        children: "Close"
+      }
+    ) })
+  ] }) });
+}
+
+// src/components/molecules/transaction-list.tsx
+import { motion as motion5 } from "motion/react";
+import { Fragment as Fragment10, jsx as jsx39, jsxs as jsxs29 } from "react/jsx-runtime";
+function TxListItemProcessing(props) {
+  return /* @__PURE__ */ jsx39(GradientContainer, { children: /* @__PURE__ */ jsxs29("div", { className: "rounded-[1rem] bg-brand-black-350 px-[0.75rem] h-[3.75rem] flex items-center", children: [
+    /* @__PURE__ */ jsx39(
+      GradientLine,
+      {
+        behaviour: "progress",
+        value: props.percentage,
+        mode: props.status === "failed" ? "error" : "default"
+      }
+    ),
+    /* @__PURE__ */ jsxs29("div", { className: "flex gap-[1rem] flex-1 z-20 text-brand-black-100 font-medium", children: [
+      /* @__PURE__ */ jsx39(
+        TokenTransferPair,
+        {
+          fromToken: props.from,
+          toToken: props.to,
+          size: "2rem"
+        }
+      ),
+      /* @__PURE__ */ jsxs29("div", { className: "flex flex-grow flex-col text-start", children: [
+        /* @__PURE__ */ jsx39("span", { className: "text-brand-white-500 text-[0.875rem] h-[1.25rem]", children: props.caption }),
+        /* @__PURE__ */ jsxs29(StatusBadge, { variant: props.status === "failed" ? "error" : "none", children: [
+          "~ ",
+          props.eta
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx39("div", { className: "basis-4/12 max-w-xs shrink-0 flex justify-end h-[2.25rem] whitespace-nowrap", children: /* @__PURE__ */ jsxs29(
+        motion5.div,
+        {
+          initial: { y: 0 },
+          animate: { y: props.status === "failed" ? "-100%" : 0 },
+          className: "grid",
+          children: [
+            /* @__PURE__ */ jsxs29(
+              motion5.div,
+              {
+                animate: { opacity: props.status === "processing" ? 1 : 0 },
+                className: "flex flex-col text-end h-[2.25rem]",
+                children: [
+                  /* @__PURE__ */ jsx39("span", { className: "text-base text-brand-white-500 h-[1.25rem]", children: props.amount }),
+                  /* @__PURE__ */ jsxs29("span", { className: "text-xs h-[1rem]", children: [
+                    props.percentage,
+                    "%"
+                  ] })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs29(
+              motion5.div,
+              {
+                animate: { opacity: props.status === "failed" ? 1 : 0 },
+                className: "flex gap-[0.75rem] items-center h-[2.25rem] justify-end",
+                children: [
+                  /* @__PURE__ */ jsx39("span", { className: "text-base text-brand-white-500 h-[1.25rem]", children: props.amount }),
+                  /* @__PURE__ */ jsx39(
+                    IconButton,
+                    {
+                      variant: "destructive",
+                      rounded: "default",
+                      size: "smx",
+                      children: /* @__PURE__ */ jsx39(RotateCcw_default, { className: "size-4 text-[currentColor]" })
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      ) })
+    ] })
+  ] }) });
+}
+var TxListItem = function TxListItem2(props) {
+  const _a = props, { caption, completedAt, from, to, amount } = _a, rest = __objRest(_a, ["caption", "completedAt", "from", "to", "amount"]);
+  return /* @__PURE__ */ jsx39(
+    "button",
+    __spreadProps(__spreadValues({}, rest), {
+      type: "button",
+      className: "apperance-none rounded-[1rem] bg-brand-black-350 px-[0.75rem] h-[3.75rem] flex items-center",
+      children: /* @__PURE__ */ jsxs29("div", { className: "flex gap-[1rem] flex-1 z-20 text-brand-black-100 font-medium", children: [
+        /* @__PURE__ */ jsx39(TokenTransferPair, { fromToken: from, toToken: to, size: "2rem" }),
+        /* @__PURE__ */ jsxs29("div", { className: "flex flex-grow flex-col text-start", children: [
+          /* @__PURE__ */ jsx39("span", { className: "text-brand-white-500 text-[0.875rem] h-[1.25rem]", children: caption }),
+          /* @__PURE__ */ jsx39(StatusBadge, { variant: "success" })
+        ] }),
+        /* @__PURE__ */ jsxs29("div", { className: "shrink-0 flex flex-col text-end", children: [
+          /* @__PURE__ */ jsx39("span", { className: "text-base text-brand-white-500 h-[1.25rem]", children: amount }),
+          /* @__PURE__ */ jsx39("span", { className: "text-xs h-[1rem]", children: completedAt })
+        ] })
+      ] })
+    })
+  );
+};
+function StatusBadge({
+  variant,
+  children
+}) {
+  return /* @__PURE__ */ jsxs29("span", { className: "text-xs h-[1rem] flex items-center gap-[0.125rem]", children: [
+    variant === "success" ? /* @__PURE__ */ jsxs29(Fragment10, { children: [
+      /* @__PURE__ */ jsx39(Check_default, { width: "0.75rem", height: "0.75rem" }),
+      " ",
+      /* @__PURE__ */ jsx39("span", { children: "Success" })
+    ] }) : null,
+    variant === "error" ? /* @__PURE__ */ jsxs29(Fragment10, { children: [
+      /* @__PURE__ */ jsx39(
+        Alert_default,
+        {
+          width: "0.75rem",
+          height: "0.75rem",
+          className: "text-brand-danger-500"
+        }
+      ),
+      /* @__PURE__ */ jsx39("span", { className: "text-brand-danger-500", children: "Order expired" })
+    ] }) : null,
+    variant === "none" ? children : null
+  ] });
+}
+function TxList({ children }) {
+  return /* @__PURE__ */ jsx39("ul", { className: "flex flex-col gap-[0.5rem]", children });
+}
+
+// src/components/molecules/wallet-header.tsx
+import * as React14 from "react";
+import { motion as motion6 } from "motion/react";
+import { cva as cva6 } from "class-variance-authority";
+import { Slot as Slot10 } from "@radix-ui/react-slot";
+
+// src/components/organisms/assets-collection.tsx
+import * as Tab_ from "@radix-ui/react-tabs";
+
+// src/@/ui/tabs.tsx
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { jsx as jsx40 } from "react/jsx-runtime";
+function Tabs(_a) {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx40(
+    TabsPrimitive.Root,
+    __spreadValues({
+      "data-slot": "tabs",
+      className: cn("flex flex-col gap-2", className)
+    }, props)
+  );
+}
+function TabsContent(_a) {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx40(
+    TabsPrimitive.Content,
+    __spreadValues({
+      "data-slot": "tabs-content",
+      className: cn("flex-1 outline-none", className)
+    }, props)
+  );
+}
+
+// src/components/organisms/assets-collection.tsx
+import { jsx as jsx41, jsxs as jsxs30 } from "react/jsx-runtime";
+function TabsList2(props) {
+  return /* @__PURE__ */ jsx41("nav", { className: "flex flex-col", children: /* @__PURE__ */ jsx41(Tab_.TabsList, { asChild: true, children: /* @__PURE__ */ jsx41("ul", { className: "flex p-0 bg-transparent gap-[0.5rem]", children: props.children }) }) });
+}
+function TabItem(props) {
+  return /* @__PURE__ */ jsx41(
+    Tab_.TabsTrigger,
+    {
+      value: props.value,
+      className: "apperance-none !text-brand-white-500 cursor-pointer text-[0.875rem] font-medium data-[state=inactive]:!text-brand-black-100 data-[state=active]:!text-brand-white-500 !p-[0rem] whitespace-nowrap",
+      children: props.children
+    }
+  );
+}
+function AssetValueTrend(props) {
+  const { percentage = 0, direction: dir, dollarValue = 0 } = props;
+  const isZero = dollarValue === 0;
+  const isUp = isZero ? "up" : dir === "up";
+  return /* @__PURE__ */ jsxs30(
+    "div",
+    {
+      className: "inline-flex select-none gap-[0.125rem] text-brand-black-100 h-[1rem] text-[0.7rem] font-medium items-center",
+      style: {
+        "--trend-base": isZero ? "inherit" : "var(--color-brand-white-500)",
+        "--trend-color": isZero ? "inherit" : !isUp ? "var(--color-brand-danger-500, indigo)" : "var(--color-brand-success-400, cyan)"
+      },
+      children: [
+        /* @__PURE__ */ jsx41("span", { className: "text-[var(--trend-color)]", children: /* @__PURE__ */ jsx41(
+          ArrowTriangleBottom_default,
+          {
+            width: "0.75rem",
+            height: "0.75rem",
+            className: cn(
+              "transform transition-all",
+              isUp ? "rotate-180" : "rotate-0"
+            )
+          }
+        ) }),
+        /* @__PURE__ */ jsxs30("span", { className: "flex items-center", children: [
+          /* @__PURE__ */ jsxs30("span", { className: "text-[var(--trend-color)]", children: [
+            "$",
+            dollarValue
+          ] }),
+          "\xA0",
+          /* @__PURE__ */ jsxs30("span", { className: "text-[var(--trend-base)]", children: [
+            "(",
+            percentage,
+            "%)"
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+var currencyFormat = new Intl.NumberFormat("en-US", {
+  currency: "USD"
+});
+function Balance(props) {
+  const { prefix = "$", suffix = "", formatter = currencyFormat } = props;
+  const [int_, decimal] = String(props.amount).split(".");
+  const int = Number.isNaN(+int_) ? 0 : int_;
+  const is_zero = props.amount === 0;
+  return /* @__PURE__ */ jsx41("div", { className: "select-none", children: /* @__PURE__ */ jsxs30("span", { className: "text-[2.375rem] font-medium leading-[2.875rem] whitespace-nowrap", children: [
+    /* @__PURE__ */ jsxs30(
+      "span",
+      {
+        className: cn(
+          is_zero ? "text-brand-black-100" : "text-brand-white-500"
+        ),
+        children: [
+          prefix,
+          formatter.format(+int)
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs30("span", { className: "text-brand-black-100", children: [
+      ".",
+      decimal != null ? decimal : "00"
+    ] }),
+    /* @__PURE__ */ jsxs30("span", { className: "text-brand-white-500", children: [
+      "\xA0",
+      suffix
+    ] })
+  ] }) });
+}
+
+// src/components/molecules/wallet-header.tsx
+import { Fragment as Fragment12, jsx as jsx42, jsxs as jsxs31 } from "react/jsx-runtime";
+var WalletHeaderContext = React14.createContext(null);
+function useWalletHeader() {
+  const context = React14.useContext(WalletHeaderContext);
+  if (!context) {
+    throw new Error("useWalletHeader must be used within a WalletHeader");
+  }
+  return context;
+}
+var walletHeaderVariants = cva6(
+  "bg-brand-black-550 z-50 relative rounded-t-[1rem] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default: "-mx-[1rem]",
+        contained: "mx-0"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var globalWalletHeaderState = null;
+var WalletHeader = React14.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      className,
+      variant,
+      asChild = false,
+      defaultOpen = false,
+      children
+    } = _b, props = __objRest(_b, [
+      "className",
+      "variant",
+      "asChild",
+      "defaultOpen",
+      "children"
+    ]);
+    const Comp = asChild ? Slot10 : "div";
+    const [show, setShow] = React14.useState(() => {
+      return globalWalletHeaderState !== null ? globalWalletHeaderState : defaultOpen;
+    });
+    React14.useEffect(() => {
+      globalWalletHeaderState = show;
+    }, [show]);
+    return /* @__PURE__ */ jsx42(WalletHeaderContext.Provider, { value: { show, setShow }, children: /* @__PURE__ */ jsx42(
+      Comp,
+      __spreadProps(__spreadValues({
+        ref,
+        className: cn(walletHeaderVariants({ variant }), className),
+        style: { "--container-height": "auto" }
+      }, props), {
+        children
+      })
+    ) });
+  }
+);
+WalletHeader.displayName = "WalletHeader";
+var WalletConnectedHeader = React14.forwardRef((_a, ref) => {
+  var _b = _a, { className, accounts, children } = _b, props = __objRest(_b, ["className", "accounts", "children"]);
+  const { show: open, setShow } = useWalletHeader();
+  return /* @__PURE__ */ jsx42(
+    "button",
+    __spreadProps(__spreadValues({
+      ref,
+      type: "button",
+      className: cn(
+        "p-[1rem] w-full cursor-pointer text-start appearance-none z-20 relative bg-gradient-to-b from-brand-black-550 to-transparent rounded-t-[1rem] border-b border-brand-black-350",
+        {
+          "hover:bg-brand-black-500 border-transparent": !open
+        },
+        className
+      ),
+      onClick: () => setShow((e) => !e)
+    }, props), {
+      children: /* @__PURE__ */ jsxs31("div", { className: "flex w-full gap-2 justify-between items-center", children: [
+        children || /* @__PURE__ */ jsx42(AccountStack2, { accounts }),
+        /* @__PURE__ */ jsx42(
+          IconButton,
+          {
+            variant: "level_1",
+            "data-open": open,
+            className: "data-[open=false]:rotate-180 shrink-0 transform transition-all",
+            rounded: "full",
+            size: "sm",
+            asChild: true,
+            children: /* @__PURE__ */ jsx42("span", { children: /* @__PURE__ */ jsx42(ChevronBottomDown_default, {}) })
+          }
+        )
+      ] })
+    })
+  );
+});
+WalletConnectedHeader.displayName = "WalletConnectedHeader";
+var WalletHeaderContent = React14.forwardRef((_a, _ref) => {
+  var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
+  const { show: open } = useWalletHeader();
+  const containerRef = React14.useRef(null);
+  const parentRef = React14.useRef(null);
+  const slideDown2 = {
+    show: { opacity: [0, 0.8, 1] },
+    hide: { opacity: [1, 0.25, 0] }
+  };
+  React14.useEffect(() => {
+    const updateHeight = () => {
+      if (containerRef.current && parentRef.current) {
+        const height = containerRef.current.offsetHeight;
+        parentRef.current.style.setProperty(
+          "--container-height",
+          `${height}px`
+        );
+      }
+    };
+    updateHeight();
+    const resizeObserver = new ResizeObserver(updateHeight);
+    if (containerRef.current) {
+      resizeObserver.observe(containerRef.current);
+    }
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, []);
+  const _a2 = props, {
+    onDrag: onDrag,
+    onDragEnd,
+    onDragStart,
+    onDragEnter,
+    onDragExit,
+    onDragLeave,
+    onDragOver,
+    onDrop,
+    onAnimationStart: onAnimationStart,
+    onAnimationEnd,
+    onAnimationIteration,
+    onTransitionEnd: onTransitionEnd,
+    onTransitionStart,
+    onTransitionRun,
+    onTransitionCancel
+  } = _a2, restProps = __objRest(_a2, [
+    // Drag events
+    "onDrag",
+    "onDragEnd",
+    "onDragStart",
+    "onDragEnter",
+    "onDragExit",
+    "onDragLeave",
+    "onDragOver",
+    "onDrop",
+    // Animation events
+    "onAnimationStart",
+    "onAnimationEnd",
+    "onAnimationIteration",
+    // Transition events
+    "onTransitionEnd",
+    "onTransitionStart",
+    "onTransitionRun",
+    "onTransitionCancel"
+  ]);
+  return /* @__PURE__ */ jsx42(
+    motion6.div,
+    {
+      ref: parentRef,
+      initial: { height: 0 },
+      animate: { height: open ? "var(--container-height)" : 0 },
+      className: cn("z-10 relative", {
+        "pointer-events-none": !open
+      }),
+      children: /* @__PURE__ */ jsx42(
+        motion6.div,
+        __spreadProps(__spreadValues({
+          ref: containerRef,
+          initial: { opacity: 0 },
+          variants: slideDown2,
+          transition: { duration: 0.4 },
+          animate: open ? "show" : "hide",
+          className: cn(
+            "border-brand-black-350 px-[1rem] border-b pb-[1rem]",
+            className
+          )
+        }, restProps), {
+          children
+        })
+      )
+    }
+  );
+});
+WalletHeaderContent.displayName = "WalletHeaderContent";
+var AccountStack2 = React14.forwardRef(
+  ({ accounts = [] }, ref) => {
+    var _a, _b;
+    return /* @__PURE__ */ jsx42("div", { ref, className: "flex gap-[0.625rem] items-center", children: accounts.length > 0 ? /* @__PURE__ */ jsxs31(React14.Fragment, { children: [
+      /* @__PURE__ */ jsx42("div", { className: "inline-flex -space-x-[0.3125rem]", children: accounts.map((account, index) => /* @__PURE__ */ jsx42(
+        "div",
+        {
+          style: {
+            zIndex: accounts.length - index,
+            position: "relative"
+          },
+          children: /* @__PURE__ */ jsx42(
+            BadgeIcon,
+            {
+              outline: true,
+              src: account.wallet.image,
+              alt: account.wallet.name,
+              badgeSrc: account.network.image,
+              badgeAlt: account.network.name
+            }
+          )
+        },
+        account.address
+      )) }),
+      /* @__PURE__ */ jsxs31("span", { className: "flex flex-col whitespace-nowrap", children: [
+        /* @__PURE__ */ jsx42("span", { className: "text-base font-medium h-[1.25rem] text-brand-white-500", children: accounts.length > 1 ? /* @__PURE__ */ jsxs31(Fragment12, { children: [
+          accounts.length,
+          " wallets"
+        ] }) : /* @__PURE__ */ jsx42(Fragment12, { children: shortenAccountAddress((_b = (_a = accounts[0]) == null ? void 0 : _a.address) != null ? _b : "") || "--" }) }),
+        /* @__PURE__ */ jsx42("span", { className: "text-xs text-start h-[1rem] font-medium inline-flex items-center gap-[0.125rem] text-brand-black-100", children: "Connected" })
+      ] })
+    ] }) : /* @__PURE__ */ jsxs31("div", { className: "flex items-center gap-[0.625rem] select-none", children: [
+      /* @__PURE__ */ jsx42(
+        IconButton,
+        {
+          disabled: true,
+          className: "pointer-events-none !text-brand-white-500",
+          variant: "level_2",
+          rounded: "full",
+          size: "sm",
+          children: /* @__PURE__ */ jsx42(Wallet_default, { className: "size-5" })
+        }
+      ),
+      /* @__PURE__ */ jsx42("p", { className: "text-base font-medium text-brand-white-100", children: "Connect Your Wallet" })
+    ] }) });
+  }
+);
+AccountStack2.displayName = "AccountStack";
+var WalletHeaderTabs = React14.forwardRef((_a, ref) => {
+  var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
+  return /* @__PURE__ */ jsx42(Tabs, __spreadProps(__spreadValues({ ref, className: cn("gap-0 pt-3", className) }, props), { children }));
+});
+WalletHeaderTabs.displayName = "WalletHeaderTabs";
+var WalletHeaderTabsList = React14.forwardRef((_a, ref) => {
+  var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
+  return /* @__PURE__ */ jsx42(
+    TabsList2,
+    __spreadProps(__spreadValues({
+      ref,
+      className: cn("flex p-0 bg-transparent gap-[0.5rem] h-auto", className)
+    }, props), {
+      children
+    })
+  );
+});
+WalletHeaderTabsList.displayName = "WalletHeaderTabsList";
+var WalletHeaderTabItem = React14.forwardRef((_a, ref) => {
+  var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
+  return /* @__PURE__ */ jsx42(
+    TabItem,
+    __spreadProps(__spreadValues({
+      ref,
+      className: cn(
+        "appearance-none !text-brand-white-500 cursor-pointer text-[0.875rem] font-medium data-[state=inactive]:!text-brand-black-100 data-[state=active]:!text-brand-white-500 !p-[0rem] whitespace-nowrap h-auto bg-transparent border-0 shadow-none",
+        className
+      )
+    }, props), {
+      children
+    })
+  );
+});
+WalletHeaderTabItem.displayName = "WalletHeaderTabItem";
+var WalletHeaderTabsContent = React14.forwardRef((_a, ref) => {
+  var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
+  return /* @__PURE__ */ jsx42(
+    TabsContent,
+    __spreadProps(__spreadValues({
+      ref,
+      className: cn("gap-[1.5rem] flex flex-col mt-[6px]", className)
+    }, props), {
+      children
+    })
+  );
+});
+WalletHeaderTabsContent.displayName = "WalletHeaderTabsContent";
+var WalletHeaderContentBlur = React14.forwardRef((_a, ref) => {
+  var _b = _a, { className, children, asChild = false } = _b, props = __objRest(_b, ["className", "children", "asChild"]);
+  const { show: open } = useWalletHeader();
+  const Comp = asChild ? Slot10 : "div";
+  return /* @__PURE__ */ jsx42(
+    Comp,
+    __spreadProps(__spreadValues({
+      ref,
+      className: cn(
+        "transition-all pt-[1rem]",
+        {
+          "opacity-15 pointer-events-none filter blur-[2px]": open
+        },
+        className
+      )
+    }, props), {
+      children
+    })
+  );
+});
+WalletHeaderContentBlur.displayName = "WalletHeaderContentBlur";
+
+// src/components/navigation/header.tsx
+import { jsx as jsx43 } from "react/jsx-runtime";
+function HeaderGradient() {
+  return /* @__PURE__ */ jsx43("div", { className: "absolute inset-0 h-[3px] bg-gradient-brand-animated" });
+}
+function HeaderContent({
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsx43(
+    "div",
+    {
+      className: cn(
+        "header-container w-full h-full px-4 md:px-6 flex items-center justify-between mx-auto",
+        className
+      ),
+      children
+    }
+  );
+}
+function Header({
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsx43(
+    "header",
+    {
+      className: cn(
+        "fixed top-0 left-0 z-50 h-20 backdrop-blur-sm w-full",
+        className
+      ),
+      children
+    }
+  );
+}
+
+// src/components/navigation/tabs.tsx
+import { jsx as jsx44, jsxs as jsxs32 } from "react/jsx-runtime";
+function TabAltHeader({
+  label,
+  isNew,
+  isActive,
+  onClick,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx44(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: cn(
+        "relative cursor-pointer w-max duration-200 transition-colors",
+        isActive ? "text-white" : "text-brand-black-100 hover:text-white",
+        className
+      ),
+      children: /* @__PURE__ */ jsxs32("span", { className: "relative z-10 flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx44("span", { className: "font-medium", children: label }),
+        isNew && /* @__PURE__ */ jsx44("span", { className: "text-brand-warning-500 caption-text absolute top-0 left-[100%] w-max", children: "New" })
+      ] })
+    }
+  );
+}
+function TabAltHeaders({
+  children,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx44("div", { className: cn("flex space-x-3 mb-6", className), children });
+}
+function TabAltContent({
+  children,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx44("div", { className, children });
+}
+function TabAltPanel({
+  id,
+  activeTab,
+  children,
+  className = ""
+}) {
+  if (activeTab !== id) return null;
+  return /* @__PURE__ */ jsx44("div", { className, children }, id);
+}
+function TabAlt({
+  children,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx44("div", { className: cn("w-full", className), children });
+}
+
+// src/@/ui/tooltip.tsx
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { jsx as jsx45, jsxs as jsxs33 } from "react/jsx-runtime";
+function TooltipProvider(_a) {
+  var _b = _a, {
+    delayDuration = 0
+  } = _b, props = __objRest(_b, [
+    "delayDuration"
+  ]);
+  return /* @__PURE__ */ jsx45(
+    TooltipPrimitive.Provider,
+    __spreadValues({
+      "data-slot": "tooltip-provider",
+      delayDuration
+    }, props)
+  );
+}
+function Tooltip(_a) {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ jsx45(TooltipProvider, { children: /* @__PURE__ */ jsx45(TooltipPrimitive.Root, __spreadValues({ "data-slot": "tooltip" }, props)) });
+}
+function TooltipTrigger(_a) {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ jsx45(TooltipPrimitive.Trigger, __spreadValues({ "data-slot": "tooltip-trigger" }, props));
+}
+function TooltipContent(_a) {
+  var _b = _a, {
+    className,
+    sideOffset = 0,
+    children
+  } = _b, props = __objRest(_b, [
+    "className",
+    "sideOffset",
+    "children"
+  ]);
+  return /* @__PURE__ */ jsx45(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs33(
+    TooltipPrimitive.Content,
+    __spreadProps(__spreadValues({
+      "data-slot": "tooltip-content",
+      sideOffset,
+      className: cn(
+        "bg-brand-black-600 text-brand-black-100 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+        className
+      )
+    }, props), {
+      children: [
+        children,
+        /* @__PURE__ */ jsx45(TooltipPrimitive.Arrow, { className: "bg-brand-black-600 fill-brand-black-600 z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })
+      ]
+    })
+  ) });
+}
+
+// src/components/organisms/settings.tsx
+import { useState as useState5 } from "react";
+import { jsx as jsx46, jsxs as jsxs34 } from "react/jsx-runtime";
+var PRESET_SLIPPAGES = ["Auto", "0.25%", "0.5%", "0.75%", "1%"];
+var DEFAULT_TOOLTIP_TEXTS = {
+  bridge: {
+    slippage: "Bridge slippage tolerance helps protect against price changes during cross-chain transaction processing",
+    deadline: "Bridge deadline is the maximum time allowed before the transaction times out and is cancelled"
+  },
+  swap: {
+    slippage: "Swap slippage tolerance helps protect against price changes during token exchange",
+    deadline: "Swap deadline is the maximum time allowed before the transaction times out and is cancelled"
+  }
+};
+var Settings = ({
+  isOpen,
+  onClose,
+  slippage = "Auto",
+  deadline,
+  onSlippageChange,
+  onDeadlineChange,
+  type,
+  slippageTooltipText,
+  deadlineTooltipText
+}) => {
+  const [customSlippage, setCustomSlippage] = useState5("");
+  const [customDeadline, setCustomDeadline] = useState5(deadline);
+  const handleKeyDown = createKeyDownHandler();
+  const handleSlippageSelect = (selectedSlippage) => {
+    onSlippageChange == null ? void 0 : onSlippageChange(selectedSlippage);
+    if (selectedSlippage !== "Custom") {
+      setCustomSlippage("");
+    }
+  };
+  const handleCustomSlippageChange = (e) => {
+    const value = e.target.value;
+    setCustomSlippage(value);
+    if (value) {
+      onSlippageChange == null ? void 0 : onSlippageChange(`${value}%`);
+    }
+  };
+  const handleCustomSlippageBlur = (e) => {
+    const value = Number.parseFloat(e.target.value);
+    if (value > 100) {
+      e.target.value = "100";
+      setCustomSlippage("100");
+      onSlippageChange == null ? void 0 : onSlippageChange("100%");
+    } else if (value < 0) {
+      e.target.value = "0";
+      setCustomSlippage("0");
+      onSlippageChange == null ? void 0 : onSlippageChange("0%");
+    }
+  };
+  const handleDeadlineChange = (e) => {
+    const value = e.target.value;
+    setCustomDeadline(value);
+    onDeadlineChange == null ? void 0 : onDeadlineChange(value);
+  };
+  const handleDeadlineBlur = (e) => {
+    const value = Number.parseFloat(e.target.value);
+    if (value < 0) {
+      e.target.value = "0";
+      setCustomDeadline("0");
+      onDeadlineChange == null ? void 0 : onDeadlineChange("0");
+    }
+  };
+  const isSlippageSelected = (option) => {
+    if (option === "Custom") {
+      return slippage !== "Auto" && !PRESET_SLIPPAGES.includes(slippage);
+    }
+    return slippage === option;
+  };
+  const isCustomSlippageActive = isSlippageSelected("Custom");
+  const title = type === "bridge" ? "Bridge" : "Swap";
+  const effectiveSlippageTooltip = slippageTooltipText || DEFAULT_TOOLTIP_TEXTS[type].slippage;
+  const effectiveDeadlineTooltip = deadlineTooltipText || DEFAULT_TOOLTIP_TEXTS[type].deadline;
+  return /* @__PURE__ */ jsxs34(Modal, { className: "p-4 !h-max", isOpen, onClose, children: [
+    /* @__PURE__ */ jsxs34("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs34("div", { className: "body-1 font-medium text-white max-w-[200px] break-words", children: [
+        title,
+        " settings"
+      ] }),
+      /* @__PURE__ */ jsx46(
+        XIcon_default,
+        {
+          className: "size-4 cursor-pointer text-brand-black-100 hover:text-white duration-200 transition-colors",
+          onClick: onClose
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs34("div", { className: "mt-4", children: [
+      /* @__PURE__ */ jsxs34("div", { className: "flex items-center gap-1 text-brand-black-100", children: [
+        /* @__PURE__ */ jsxs34("p", { className: "text-caption", children: [
+          title,
+          " Slippage"
+        ] }),
+        /* @__PURE__ */ jsxs34(Tooltip, { children: [
+          /* @__PURE__ */ jsx46(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx46(CircleInfo_default, { className: "size-[14px] cursor-pointer hover:text-white duration-200 transition-colors" }) }),
+          /* @__PURE__ */ jsx46(TooltipContent, { children: /* @__PURE__ */ jsx46("p", { className: "text-caption", children: effectiveSlippageTooltip }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs34("div", { className: "grid grid-cols-3 gap-2 mt-3", children: [
+        PRESET_SLIPPAGES.map((option) => /* @__PURE__ */ jsx46(
+          "div",
+          {
+            className: cn(
+              "relative rounded-2xl p-[1.5px]",
+              isSlippageSelected(option) ? "animated-gradient-border" : "bg-transparent"
+            ),
+            children: /* @__PURE__ */ jsx46(
+              "button",
+              {
+                type: "button",
+                onClick: () => handleSlippageSelect(option),
+                className: "cursor-pointer w-full rounded-[16px] bg-brand-card-100 hover:bg-brand-card-100/80 transition-colors duration-200 p-[14px] flex items-center justify-center min-h-12",
+                children: /* @__PURE__ */ jsx46("p", { className: "body-1 font-medium", children: option })
+              }
+            )
+          },
+          option
+        )),
+        /* @__PURE__ */ jsx46(
+          "div",
+          {
+            className: cn(
+              "relative rounded-2xl p-[1.5px]",
+              isCustomSlippageActive ? "animated-gradient-border" : "bg-transparent"
+            ),
+            children: /* @__PURE__ */ jsxs34("div", { className: "relative bg-brand-card-100 rounded-[16px]", children: [
+              /* @__PURE__ */ jsx46(
+                Input,
+                {
+                  min: 0,
+                  max: 100,
+                  value: customSlippage,
+                  onChange: handleCustomSlippageChange,
+                  onBlur: handleCustomSlippageBlur,
+                  onFocus: () => handleSlippageSelect("Custom"),
+                  className: "bg-transparent focus-visible:ring-1 focus-visible:ring-brand-black-100 h-12 border-none rounded-[16px] w-full p-4 body-1 pr-8",
+                  placeholder: "Custom",
+                  type: "number",
+                  onKeyDown: handleKeyDown
+                }
+              ),
+              /* @__PURE__ */ jsx46("span", { className: "body-1 absolute right-4 top-1/2 -translate-y-1/2 text-brand-black-100", children: "%" })
+            ] })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs34("div", { className: "mt-6", children: [
+      /* @__PURE__ */ jsxs34("div", { className: "flex items-center gap-1 text-brand-black-100", children: [
+        /* @__PURE__ */ jsxs34("p", { className: "text-caption", children: [
+          title,
+          " deadline"
+        ] }),
+        /* @__PURE__ */ jsxs34(Tooltip, { children: [
+          /* @__PURE__ */ jsx46(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx46(CircleInfo_default, { className: "size-[14px] cursor-pointer hover:text-white duration-200 transition-colors" }) }),
+          /* @__PURE__ */ jsx46(TooltipContent, { children: /* @__PURE__ */ jsx46("p", { className: "text-caption", children: effectiveDeadlineTooltip }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs34("div", { className: "relative mt-3", children: [
+        /* @__PURE__ */ jsx46(
+          Input,
+          {
+            value: customDeadline,
+            onChange: handleDeadlineChange,
+            onBlur: handleDeadlineBlur,
+            onKeyDown: handleKeyDown,
+            className: "bg-brand-card-100 focus-visible:ring-1 focus-visible:ring-brand-black-100 h-12 border-none rounded-[16px] w-full p-4 body-1 pr-18",
+            placeholder: "Enter deadline",
+            type: "number",
+            min: 0
+          }
+        ),
+        /* @__PURE__ */ jsx46("span", { className: "body-1 absolute right-4 top-1/2 -translate-y-1/2 text-brand-black-100", children: "minutes" })
+      ] })
+    ] })
+  ] });
+};
+
+// src/components/organisms/bridge-settings.tsx
+import { jsx as jsx47 } from "react/jsx-runtime";
+var BridgeSettings = (props) => {
+  return /* @__PURE__ */ jsx47(Settings, __spreadProps(__spreadValues({}, props), { type: "bridge" }));
+};
+export {
+  AccessoryButton,
+  AccountItem,
+  AccountStack2 as AccountStack,
+  AddressInput,
+  AddressInputFocusBehaviour,
+  AssetList,
+  AssetListItem,
+  AssetValueTrend,
+  BadgeIcon,
+  Balance,
+  BridgeForm,
+  BridgeInput,
+  BridgeSettings,
+  BridgeSummary,
+  BridgeTokenButton,
+  Button2 as Button,
+  CWDrawerContent,
+  ConnectedHeader,
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogMorphContent,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+  Drawer,
+  DrawerContent,
+  EmptyState,
+  EmptyStateConceal,
+  EmptyStateContent,
+  EmptyStateDescription,
+  EmptyStateTitle,
+  GradientButton,
+  Header,
+  HeaderContent,
+  HeaderGradient,
+  HeaderNested,
+  IconButton,
+  Input2 as Input,
+  LabelledSeperator,
+  ListHeading,
+  ListSection,
+  ManageAccounts,
+  Modal,
+  NetworkGroupItem,
+  NetworkSelectionItem,
+  NetworkSelector,
+  NetworkSwitcher,
+  NetworkSwitcherButton,
+  ReviewItem,
+  ReviewItemCopyAddressButton,
+  ScrollAwareSeparator,
+  SearchInput,
+  Settings,
+  Sheet,
+  SheetContent,
+  SheetTrigger,
+  SummaryValues,
+  SwapForm,
+  SwapTokenButton,
+  TabAlt,
+  TabAltContent,
+  TabAltHeader,
+  TabAltHeaders,
+  TabAltPanel,
+  TabItem,
+  Tabs,
+  TabsContent,
+  TabsList2 as TabsList,
+  TagButton,
+  Text,
+  TimelineItem,
+  TimelineList,
+  TimelineListGroup,
+  TimelineRoot,
+  TimerWrap,
+  ToastBox,
+  TokenImage,
+  TokenSelectionItem,
+  TokenSelector,
+  TokenTransferPair,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+  TransactionTimer,
+  TxList,
+  TxListItem,
+  TxListItemProcessing,
+  WalletAccountItem,
+  WalletConnectedHeader,
+  WalletHeader,
+  WalletHeaderContent,
+  WalletHeaderContentBlur,
+  WalletHeaderTabItem,
+  WalletHeaderTabs,
+  WalletHeaderTabsContent,
+  WalletHeaderTabsList,
+  WalletManagerUIContent,
+  WalletManagerUIProvider,
+  WalletProviderItem,
+  makeEntry
+};