@hyperbridge/ui 0.0.4 → 0.0.5

package/dist/index.mjs

@@ -29,7 +29,7 @@ import {
   __objRest,
   __spreadProps,
   __spreadValues
-} from "./chunk-O7MCYCGJ.mjs";
+} from "./chunk-WFUCFRU6.mjs";
 
 // src/components/atoms/search-input.tsx
 import { cva } from "class-variance-authority";
@@ -48,14 +48,6 @@ function shortenAccountAddress(address, length = 6) {
     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";
@@ -97,7 +89,7 @@ function SearchInput(_a) {
   );
 }
 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]",
+  "pl-[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: {
@@ -126,7 +118,7 @@ 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",
+  display: "text-display font-bold",
   h1: "text-h1 font-bold",
   h2: "text-h2 font-medium",
   h3: "text-h3 font-bold",
@@ -134,6 +126,7 @@ var variant_ = {
   h5: "text-h5 font-bold",
   h6: "text-h6 font-bold",
   h7: "text-[1.25rem] font-medium",
+  title: "text-title",
   body1: "text-body-2 font-medium",
   body2: "text-body font-medium",
   p: "text-base font-normal",
@@ -189,7 +182,7 @@ function BadgeIcon(props) {
     {
       "data-chain": "true",
       "data-token": "BNC",
-      className: "relative rounded-full w-[var(--badge-size)] h-[var(--badge-size)]",
+      className: "relative rounded-full w-[var(--badge-size)] h-[var(--badge-size)] shrink-0",
       style: {
         fontSize: size,
         "--badge-size": size
@@ -218,7 +211,7 @@ function BadgeIcon(props) {
           "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",
+              "w-[0.4375em] h-[0.4375em] right-0 bottom-0 absolute bg-brand-black-300 rounded-[0.15625em] overflow-hidden outline outline-offset-[-1px] outline-neutral-900",
               {
                 "outline-brand-black-600": outline
               }
@@ -500,7 +493,7 @@ function TagButton(props) {
 }
 function SwapTokenButton(props) {
   const _a = props, { token, network } = _a, _props = __objRest(_a, ["token", "network"]);
-  return /* @__PURE__ */ jsxs6(BaseButton, __spreadProps(__spreadValues({}, _props), { children: [
+  return /* @__PURE__ */ jsxs6(BaseButton, __spreadProps(__spreadValues({ className: "cursor-pointer" }, _props), { children: [
     /* @__PURE__ */ jsx7("span", { className: "inline-flex text-[0.875rem]", children: /* @__PURE__ */ jsx7(
       BadgeIcon,
       {
@@ -596,6 +589,9 @@ function Input(_a) {
 // src/lib/form-utils.ts
 var createKeyDownHandler = () => {
   return (e) => {
+    if (e.ctrlKey || e.metaKey || e.altKey) {
+      return;
+    }
     if (["e", "E", "+", "-"].includes(e.key) || /^[a-zA-Z]$/.test(e.key)) {
       e.preventDefault();
     }
@@ -603,57 +599,30 @@ var createKeyDownHandler = () => {
 };
 
 // src/components/form/swap-form.tsx
+import { useState } from "react";
 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"
-    }
+  sender,
+  receiver,
+  percentage = {
+    options: [25, 50, 100],
+    value: null
   },
-  onReceiverTokenSelect,
-  onReceiverAddressEdit,
-  percentagePresets = [25, 50, 100],
-  activePercentage = null,
-  onPercentageClick,
-  onPercentageReset,
+  onPercentageChange,
   onInvert,
-  estimatedTime = "~ 10 min",
+  estimatedTime = "",
   isLoading = false,
   className,
   error = false
 }) {
+  var _a;
   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 [focusedSection, setFocusedSection] = useState("sender");
   const handleInvert = () => {
     onInvert == null ? void 0 : onInvert();
   };
-  const formatPercentageLabel = (percentage) => {
-    return percentage === 100 ? "Max" : `${percentage}%`;
+  const formatPercentageLabel = (percentage2) => {
+    return percentage2 === 100 ? "Max" : `${percentage2}%`;
   };
   return /* @__PURE__ */ jsxs7(
     "div",
@@ -671,154 +640,199 @@ function SwapForm({
               "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
-                    ]
-                  }
+            children: /* @__PURE__ */ jsxs7(
+              "div",
+              {
+                className: cn(
+                  "rounded-[14.5px] h-full p-3 relative transition-colors duration-200",
+                  focusedSection === "sender" ? "bg-brand-black-500" : "bg-brand-black-550"
                 ),
-                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"
+                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: (_a = sender.address) != null ? _a : "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"
+                          )
+                        }
+                      ) : sender.balance })
+                    ] }) })
+                  ] }),
+                  /* @__PURE__ */ jsxs7("div", { className: "flex mt-3", children: [
+                    /* @__PURE__ */ jsx10(
+                      Input,
+                      {
+                        min: 0,
+                        type: "number",
+                        placeholder: "0",
+                        value: sender.amount,
+                        onChange: (event) => {
+                          var _a2;
+                          (_a2 = sender.onAmountChange) == null ? void 0 : _a2.call(sender, event.target.value, event);
+                          onPercentageChange == null ? void 0 : onPercentageChange(null);
+                        },
+                        onKeyDown: handleKeyDown,
+                        onFocus: () => setFocusedSection("sender"),
+                        onBlur: () => setFocusedSection(null),
+                        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 !rounded-none"
+                      }
                     ),
-                    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,
+                    /* @__PURE__ */ jsx10("div", { className: "w-[170px] pl-3 py-[13px]", children: /* @__PURE__ */ jsx10(
+                      SwapTokenButton,
+                      {
+                        network: sender.token.network,
+                        token: {
+                          image: sender.token.image,
+                          symbol: sender.token.symbol
+                        },
+                        onClick: sender.onTokenSelect,
+                        disabled: isLoading
+                      }
+                    ) })
+                  ] }),
+                  /* @__PURE__ */ jsxs7("div", { className: "flex justify-between pt-1 pb-3", children: [
+                    /* @__PURE__ */ jsx10(
+                      "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" }) : sender.usdValue
+                      }
+                    ),
+                    sender.address && /* @__PURE__ */ jsx10("div", { className: "flex gap-[6px]", children: percentage.options.map((percent_value) => /* @__PURE__ */ jsx10(
+                      Button,
+                      {
+                        onClick: () => onPercentageChange == null ? void 0 : onPercentageChange(percent_value),
+                        disabled: isLoading,
+                        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"
+                        ),
+                        variant: "message",
+                        size: "sm",
+                        children: formatPercentageLabel(percent_value)
+                      },
+                      percent_value
+                    )) })
+                  ] }),
+                  /* @__PURE__ */ jsx10(
+                    "button",
                     {
-                      className: "text-brand-black-100 size-3.5 transition-transform duration-200"
+                      type: "button",
+                      onClick: handleInvert,
+                      disabled: isLoading,
+                      "aria-label": "ArrowDownUp",
+                      className: "absolute group z-[2] -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(
+        /* @__PURE__ */ jsx10(
+          "div",
+          {
+            "data-testid": "receive-section",
+            className: cn(
+              "relative mt-0.5 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",
               {
-                "data-testid": "receiver-usd-value",
-                className: "flex items-center text-caption text-brand-black-100 font-medium",
+                className: cn(
+                  "rounded-[14.5px] h-full p-3 relative transition-colors duration-200",
+                  focusedSection === "receiver" ? "bg-brand-black-500" : "bg-brand-black-550"
+                ),
                 children: [
-                  "$",
-                  isLoading ? /* @__PURE__ */ jsx10("div", { className: "w-8 h-3 bg-brand-black-200 animate-pulse rounded ml-1" }) : receiverUsdValue
+                  /* @__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" }) }),
+                    receiver.address && /* @__PURE__ */ jsx10("div", { className: "w-1/2", children: /* @__PURE__ */ jsx10("div", { className: "flex items-center justify-end", children: /* @__PURE__ */ jsxs7(
+                      "button",
+                      {
+                        type: "button",
+                        disabled: isLoading,
+                        onClick: receiver.onAddressEdit,
+                        "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__ */ jsx10("span", { className: "max-w-[100px]", children: receiver.address }),
+                          /* @__PURE__ */ jsx10(
+                            "span",
+                            {
+                              "aria-label": "Edit address",
+                              className: "cursor-pointer text-foreground hover:scale-110 transition-transform disabled:opacity-50",
+                              children: /* @__PURE__ */ jsx10(Pen_default, { className: "size-[0.875rem]" })
+                            }
+                          )
+                        ]
+                      }
+                    ) }) })
+                  ] }),
+                  /* @__PURE__ */ jsxs7("div", { className: "flex mt-3", children: [
+                    /* @__PURE__ */ jsx10(
+                      Input,
+                      {
+                        min: 0,
+                        type: "number",
+                        placeholder: "0",
+                        value: receiver.amount,
+                        onChange: (event) => {
+                          var _a2;
+                          (_a2 = receiver.onAmountChange) == null ? void 0 : _a2.call(receiver, event.target.value, event);
+                        },
+                        onKeyDown: handleKeyDown,
+                        onFocus: () => setFocusedSection("receiver"),
+                        onBlur: () => setFocusedSection(null),
+                        disabled: isLoading,
+                        "data-testid": "receiver-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-brand-black-100 placeholder:text-brand-black-100 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none disabled:opacity-50 !rounded-none"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx10("div", { className: "w-[170px] pl-3 py-[13px]", children: /* @__PURE__ */ jsx10(
+                      SwapTokenButton,
+                      {
+                        network: receiver.token.network,
+                        token: {
+                          image: receiver.token.image,
+                          symbol: receiver.token.symbol
+                        },
+                        onClick: receiver.onTokenSelect,
+                        disabled: isLoading
+                      }
+                    ) })
+                  ] }),
+                  /* @__PURE__ */ jsxs7("div", { className: "flex justify-between pt-1 pb-3", children: [
+                    /* @__PURE__ */ jsx10(
+                      "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" }) : receiver.usdValue
+                      }
+                    ),
+                    sender.address && receiver.address && /* @__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}` })
+                  ] })
                 ]
               }
-            ),
-            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}` })
-          ] })
-        ] })
+            )
+          }
+        )
       ]
     }
   );
@@ -960,64 +974,23 @@ function NetworkSwitcherButton(props) {
 import { useMemo } from "react";
 
 // src/components/molecules/modal.tsx
-import { motion, AnimatePresence } from "motion/react";
-import { useEffect, useState } from "react";
+import { AnimatePresence, motion } from "motion/react";
+import { useEffect as useEffect2 } 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/hooks/is-mobile.ts
+import { useEffect, useState as useState2 } from "react";
+var useIsMobile = () => {
+  const [isMobile, setIsMobile] = useState2(false);
+  useEffect(() => {
+    const checkIsMobile = () => {
+      setIsMobile(window.innerWidth < 768);
+    };
+    checkIsMobile();
+    window.addEventListener("resize", checkIsMobile);
+    return () => window.removeEventListener("resize", checkIsMobile);
+  }, []);
+  return isMobile;
+};
 
 // src/lib/animations.ts
 var modalVariants = {
@@ -1129,66 +1102,118 @@ var animationPresets = {
   }
 };
 
-// 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,
-    {
+// 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(
-        "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",
+        "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
-      ),
-      variants,
-      initial: "initial",
-      animate: "animate",
-      exit: "exit",
-      transition,
-      children
-    }
-  ) });
+      )
+    }, 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/components/molecules/modal.tsx
+import { jsx as jsx15 } from "react/jsx-runtime";
+var Modal = (props) => {
+  const { isOpen, children, onClose } = props;
+  const isMobile = useIsMobile();
+  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(DestkopModal, __spreadValues({}, props));
 };
+function DestkopModal(props) {
+  const {
+    children,
+    animationPreset = "modal",
+    isOpen,
+    onClose,
+    className
+  } = props;
+  const { variants, transition } = animationPresets[animationPreset];
+  useEffect2(() => {
+    const handleEscapeKey = (event) => {
+      if (event.key === "Escape" && isOpen && onClose) {
+        onClose();
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("keydown", handleEscapeKey);
+    }
+    return () => {
+      document.removeEventListener("keydown", handleEscapeKey);
+    };
+  }, [isOpen, onClose]);
+  return /* @__PURE__ */ jsx15(AnimatePresence, { mode: "wait", children: isOpen && /* @__PURE__ */ jsx15(
+    motion.div,
+    {
+      "data-modal": "true",
+      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";
+import { useState as useState4, useRef, useEffect as useEffect3 } from "react";
 var useScrollBorder = () => {
-  const [showHeaderBorder, setShowHeaderBorder] = useState2(false);
+  const [showHeaderBorder, setShowHeaderBorder] = useState4(false);
   const scrollableRef = useRef(null);
-  useEffect2(() => {
+  useEffect3(() => {
     const scrollableElement = scrollableRef.current;
     if (!scrollableElement) return;
     const handleScroll = () => {
@@ -1209,7 +1234,7 @@ var useScrollBorder = () => {
   return { showHeaderBorder, scrollableRef };
 };
 var useSearch = () => {
-  const [searchQuery, setSearchQuery] = useState2("");
+  const [searchQuery, setSearchQuery] = useState4("");
   const resetSearch = () => setSearchQuery("");
   return { searchQuery, setSearchQuery, resetSearch };
 };
@@ -1781,7 +1806,10 @@ function TokenSelectionItem(props) {
 }
 
 // src/components/form/bridge-form.tsx
-import { useState as useState3 } from "react";
+import { useState as useState5 } from "react";
+
+// src/components/form/bridge-input.tsx
+import React8 from "react";
 
 // src/components/input/input.tsx
 import * as React7 from "react";
@@ -1824,7 +1852,6 @@ var Input2 = React7.forwardRef((_a, ref) => {
 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;
@@ -2203,9 +2230,9 @@ function BridgeForm({
   onSourceNetworkSelect,
   onDestinationNetworkSelect
 }) {
-  const [showDetails, setShowDetails] = useState3(false);
-  const [isGasHovered, setIsGasHovered] = useState3(false);
-  const [networkSelectorState, setNetworkSelectorState] = useState3(null);
+  const [showDetails, setShowDetails] = useState5(false);
+  const [isGasHovered, setIsGasHovered] = useState5(false);
+  const [networkSelectorState, setNetworkSelectorState] = useState5(null);
   const isConnected = !!senderAddress;
   const handleSubmit = (e) => {
     e.preventDefault();
@@ -2516,7 +2543,7 @@ function TokenSelectorDialog(props) {
     onAddToWallet,
     children
   } = props;
-  const [isTokenSelectorOpen, setIsTokenSelectorOpen] = useState3(false);
+  const [isTokenSelectorOpen, setIsTokenSelectorOpen] = useState5(false);
   const handleCloseTokenSelector = () => {
     setIsTokenSelectorOpen(false);
   };
@@ -2829,7 +2856,22 @@ function WalletProviderItem(props) {
             children: status === "connecting" ? "Connecting" : "Connect"
           }
         ),
-        status === "connected" && /* @__PURE__ */ jsx29("span", { className: "text-brand-success-400 text-xs font-medium", children: "Connected" })
+        status === "connected" && /* @__PURE__ */ jsxs20(
+          Button,
+          {
+            size: "sm",
+            variant: "level_2",
+            className: "!h-8 min-w-8 !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" })
+            ]
+          }
+        )
       ] })
     ] })
   ] }) });
@@ -2857,7 +2899,10 @@ function AccountItem(props) {
     /* @__PURE__ */ jsx29(
       IconButton,
       {
-        className: `group ${isActive ? "cursor-default" : "cursor-pointer"}`,
+        className: cn(
+          "group shrink-0 !size-[1.875rem] !rounded-[10px]",
+          isActive ? "cursor-default" : "cursor-pointer"
+        ),
         variant: "secondary",
         onClick: handleSelect,
         title: isActive ? "Already active" : "Activate this account",
@@ -2870,15 +2915,13 @@ function AccountItem(props) {
         src: wallet.image,
         alt: wallet.name,
         badgeSrc: network.image,
-        badgeAlt: network.name
+        badgeAlt: network.name,
+        className: "shrink-0"
       }
     ),
     /* @__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("div", { className: "flex grow-1 flex-col font-medium text-brand-white-500", children: /* @__PURE__ */ jsx29("div", { className: "flex items-center gap-[6px]", children: /* @__PURE__ */ jsx29("span", { className: "text-body", children: address != null ? address : "{{Address}}" }) }) }),
+      /* @__PURE__ */ jsxs20("div", { className: "relative flex gap-[6px] grow-0 h-[2rem] items-stretch shrink-0 *:shrink-0 pr-[45px]", children: [
         /* @__PURE__ */ jsx29(
           IconButton,
           {
@@ -2898,7 +2941,7 @@ function AccountItem(props) {
           {
             size: "sm",
             variant: "level_2",
-            className: "h-[auto] !gap-0 group cursor-pointer",
+            className: "!min-w-8 !h-8 !gap-0 group cursor-pointer absolute right-0",
             onClick: () => {
               var _a;
               return (_a = props == null ? void 0 : props.onDisconnect) == null ? void 0 : _a.call(props);
@@ -2982,11 +3025,13 @@ function DialogMorphContent(_a) {
   var _b = _a, {
     className,
     children,
-    showCloseButton = true
+    showCloseButton = true,
+    onInteractOutside
   } = _b, props = __objRest(_b, [
     "className",
     "children",
-    "showCloseButton"
+    "showCloseButton",
+    "onInteractOutside"
   ]);
   const [mode, setViewMode] = React11.useState("card");
   React11.useEffect(() => {
@@ -3009,12 +3054,19 @@ function DialogMorphContent(_a) {
       controller.abort();
     };
   }, []);
+  const handleInteractOutside = (event) => {
+    onInteractOutside == null ? void 0 : onInteractOutside(event);
+    if (event.target.closest('[data-is-toast="true"]')) {
+      event.preventDefault();
+    }
+  };
   const Content7 = /* @__PURE__ */ jsxs22(
     DialogPrimitive2.Content,
     __spreadProps(__spreadValues({
+      onInteractOutside: handleInteractOutside,
       "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",
+        "review-dialog 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"
@@ -3028,7 +3080,7 @@ function DialogMorphContent(_a) {
           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",
+            className: "ring-offset-background cursor-pointer 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" })
@@ -3046,670 +3098,322 @@ function DialogMorphContent(_a) {
 
 // src/components/molecules/manage-wallet.tsx
 import React12 from "react";
-import { motion as motion3 } from "motion/react";
+import { Slot as Slot8 } from "@radix-ui/react-slot";
+import { jsx as jsx32 } from "react/jsx-runtime";
+function WalletManagerUIProvider(props) {
+  const { expand: open = false, children } = props;
+  const [show, setShow] = React12.useState(open);
+  return /* @__PURE__ */ jsx32(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__ */ jsx32(
+    Slot8,
+    {
+      className: cn("transition-all pt-[1rem] flex-1", {
+        "opacity-15 pointer-events-none filter blur-[2px]": show
+      }),
+      children
+    }
+  );
+}
 
-// 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));
+// src/components/molecules/summary.tsx
+import { jsx as jsx33, jsxs as jsxs23 } from "react/jsx-runtime";
+function Summary(props) {
+  return /* @__PURE__ */ jsx33("div", { className: "flex flex-col gap-2 text-brand-black-100", children: props.children });
 }
-function SheetTrigger(_a) {
-  var props = __objRest(_a, []);
-  return /* @__PURE__ */ jsx32(SheetPrimitive.Trigger, __spreadValues({ "data-slot": "sheet-trigger" }, props));
+function SummaryEntry(props) {
+  const Icon = props.icon;
+  return /* @__PURE__ */ jsxs23("div", { className: "flex select-none items-center text-[calc(12rem/16)] font-medium", children: [
+    /* @__PURE__ */ jsxs23("dt", { className: "flex-1 gap-1 flex items-center", children: [
+      /* @__PURE__ */ jsx33(Icon, { size: "1.16em" }),
+      /* @__PURE__ */ jsx33("span", { className: "text-[1em] leading-[1rem]", children: props.name })
+    ] }),
+    /* @__PURE__ */ jsx33("dd", { children: props.children })
+  ] });
 }
-function SheetPortal(_a) {
-  var props = __objRest(_a, []);
-  return /* @__PURE__ */ jsx32(SheetPrimitive.Portal, __spreadValues({ "data-slot": "sheet-portal" }, props));
+function makeEntry({
+  name,
+  icon
+}) {
+  return function Entry({ children }) {
+    return /* @__PURE__ */ jsx33(SummaryEntry, { icon, name, children }, name);
+  };
 }
-function SheetOverlay(_a) {
+var Bridge = makeEntry({
+  icon: ({ size }) => /* @__PURE__ */ jsx33(Percent_default, { width: size }),
+  name: "Bridge fee"
+});
+var RecipientAddress = makeEntry({
+  icon: ({ size }) => /* @__PURE__ */ jsx33(Wallet_default, { width: size }),
+  name: "Recipient Address"
+});
+var GasEntry = makeEntry({
+  icon: ({ size }) => /* @__PURE__ */ jsx33(Gas_default, { width: size }),
+  name: "Gas costs"
+});
+var SpillageTolerance = makeEntry({
+  icon: ({ size }) => /* @__PURE__ */ jsx33(ArrowBottomTop_default, { width: size }),
+  name: "Spillage tolerance"
+});
+var Route = makeEntry({
+  icon: ({ size }) => /* @__PURE__ */ jsx33(ArrowSplit_default, { width: size }),
+  name: "Route"
+});
+var Rate = makeEntry({
+  icon: ({ size }) => /* @__PURE__ */ jsx33(Percent_default, { width: size }),
+  name: "Rate"
+});
+var Fee = makeEntry({
+  icon: ({ size }) => /* @__PURE__ */ jsx33(ArrowBottomTop_default, { width: size }),
+  name: "Fee"
+});
+var ETA = makeEntry({
+  icon: ({ size }) => /* @__PURE__ */ jsx33(Clock_default, { width: size }),
+  name: "Estimated time"
+});
+var SummaryValues = {
+  Key: {
+    Bridge,
+    GasEntry,
+    Rate,
+    SpillageTolerance,
+    Route,
+    ETA,
+    RecipientAddress,
+    Fee
+  },
+  Values: {
+    Highlight: ({ children }) => {
+      return /* @__PURE__ */ jsx33("span", { className: "text-[inherit] text-brand-white-500", children });
+    },
+    Soft: ({ children }) => {
+      return /* @__PURE__ */ jsx33("span", { className: "text-[inherit]text-brand-black-50", children });
+    }
+  }
+};
+
+// src/components/molecules/timeline.tsx
+import { Slot as Slot9 } from "@radix-ui/react-slot";
+import { Loader2 } from "lucide-react";
+import { AnimatePresence as AnimatePresence2, motion as motion3 } from "motion/react";
+import React13 from "react";
+
+// src/@/ui/progress.tsx
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+import { jsx as jsx34 } from "react/jsx-runtime";
+function Progress(_a) {
   var _b = _a, {
-    className
+    className,
+    value
   } = _b, props = __objRest(_b, [
-    "className"
+    "className",
+    "value"
   ]);
-  return /* @__PURE__ */ jsx32(
-    SheetPrimitive.Overlay,
-    __spreadValues({
-      "data-slot": "sheet-overlay",
+  return /* @__PURE__ */ jsx34(
+    ProgressPrimitive.Root,
+    __spreadProps(__spreadValues({
+      "data-slot": "progress",
       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",
+        "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
         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)
+    }, props), {
+      children: /* @__PURE__ */ jsx34(
+        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/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/timeline.tsx
+import { jsx as jsx35, jsxs as jsxs24 } from "react/jsx-runtime";
+function TimelineList(props) {
+  return /* @__PURE__ */ jsx35("ul", { className: "flex flex-col", children: props.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]
-  }
+var StatusTextMap = {
+  processing: "Processing",
+  upcoming: "Upcoming",
+  error: "Failed"
 };
-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",
+function TimelineItem(props) {
+  var _a, _b, _c, _d;
+  const { processingStatus, caption, durationMode = "none" } = props;
+  const is_visually_active = processingStatus !== "upcoming";
+  const id = React13.useId();
+  const layoutId = `${id}/${caption}/content-2`;
+  const hideTime = durationMode === "none";
+  return /* @__PURE__ */ jsx35(
+    motion3.li,
     {
-      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",
+      "data-process-status": processingStatus,
+      className: "block bg-brand-black-350 cursor-default select-none font-medium text-brand-white-500",
+      children: /* @__PURE__ */ jsxs24(
+        motion3.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__ */ jsx35(BadgeIcon, __spreadValues({}, props.badge)) : /* @__PURE__ */ jsx35(
+              IconButton,
               {
-                "hover:bg-brand-black-500 border-transparent": !open
+                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__ */ jsx35(
+                  "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"
+                      }
+                    )
+                  }
+                )
               }
             ),
-            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,
+            /* @__PURE__ */ jsxs24("div", { className: "flex flex-col flex-1 gap-[calc(4/16rem)]", children: [
+              /* @__PURE__ */ jsx35("div", { className: "text-brand-white-500 text-[1rem] h-[1.25rem]", children: caption }),
+              /* @__PURE__ */ jsx35("div", { className: "text-xs h-[1rem] text-brand-black-100", children: processingStatus === "completed" ? ((_a = props.data) == null ? void 0 : _a.transactionUrl) ? /* @__PURE__ */ jsxs24(
+                "a",
                 {
-                  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, {}) })
+                  href: props.data.transactionUrl,
+                  className: "flex cursor-pointer gap-[calc(2rem/16)] items-center",
+                  target: "_blank",
+                  rel: "noopener noreferrer",
+                  children: [
+                    /* @__PURE__ */ jsx35("span", { children: "View in explorer " }),
+                    /* @__PURE__ */ jsx35(ArrowUpRight_default, { width: "0.75rem", height: "0.75rem" })
+                  ]
                 }
-              )
-            ] })
-          }
-        ),
-        /* @__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,
+              ) : /* @__PURE__ */ jsx35("span", { children: props.secondary }) : /* @__PURE__ */ jsx35("span", { children: (_b = props == null ? void 0 : props.secondary) != null ? _b : StatusTextMap[processingStatus] }) })
+            ] }),
+            /* @__PURE__ */ jsxs24(AnimatePresence2, { children: [
+              processingStatus === "completed" ? /* @__PURE__ */ jsxs24(
+                motion3.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: [
+                    hideTime && /* @__PURE__ */ jsx35("span", { className: "text-[calc(13rem/16)] text-brand-black-100", children: (_c = props == null ? void 0 : props.data) == null ? void 0 : _c.completedIn }),
+                    /* @__PURE__ */ jsx35(
+                      Check_default,
                       {
-                        image: polkadotImage || defaultPolkadotImage,
-                        description: "Use Polkadot-compatible wallets",
-                        onConnect: () => onConnect == null ? void 0 : onConnect("polkadot")
+                        height: "1rem",
+                        width: "1rem",
+                        className: "text-brand-success-400"
                       }
-                    ),
-                    shouldShowEVMOption && /* @__PURE__ */ jsx34(
-                      NetworkGroupItem,
+                    )
+                  ]
+                }
+              ) : null,
+              processingStatus === "processing" ? /* @__PURE__ */ jsxs24(
+                motion3.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: [
+                    hideTime && /* @__PURE__ */ jsxs24("span", { className: "text-[calc(13rem/16)]", children: [
+                      "~ ",
+                      (_d = props == null ? void 0 : props.data) == null ? void 0 : _d.eta
+                    ] }),
+                    /* @__PURE__ */ jsx35(
+                      Loader2,
                       {
-                        image: evmImage || defaultEvmImage,
-                        description: "Use Ethereum-compatible wallets",
-                        onConnect: () => onConnect == null ? void 0 : onConnect("evm")
+                        size: "1rem",
+                        className: "animate text-brand-black-100 animate-spin"
                       }
                     )
-                  ] })
-                ] })
-              }
-            )
-          }
-        )
-      ]
+                  ]
+                }
+              ) : null
+            ] })
+          ]
+        }
+      )
     }
-  ) });
+  );
 }
-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(
+function TimelineListGroup(props) {
+  return /* @__PURE__ */ jsx35("ul", { className: cn("flex flex-col"), children: props.children });
+}
+var TimelineRoot = React13.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx35(
+    "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__ */ jsxs24("div", { className: "flex flex-col gap-[calc(6rem/16)]", children: [
+    /* @__PURE__ */ jsxs24(
       "div",
       {
-        style: { zIndex: items.length - index, position: "relative" },
-        children: /* @__PURE__ */ jsx34(
-          BadgeIcon,
+        className: cn(
+          "flex gap-[calc(4rem/16)] font-medium h-[1rem] text-xs items-center",
           {
-            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"
+            "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: [
+          /* @__PURE__ */ jsx35("span", { children: "Transaction will timeout in" }),
+          /* @__PURE__ */ jsxs24("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__ */ jsx35("span", { children: /* @__PURE__ */ jsx35(CircleInfo_default, { width: "1em", height: "1em" }) })
         ]
       }
     ),
-    /* @__PURE__ */ jsx37(
+    /* @__PURE__ */ jsx35(
       Progress,
       {
         value: props.progress,
@@ -3723,8 +3427,8 @@ function TransactionTimer(props) {
 }
 function TimerWrap(props) {
   const show = props.reveal;
-  return /* @__PURE__ */ jsxs27(
-    motion4.div,
+  return /* @__PURE__ */ jsxs24(
+    motion3.div,
     {
       initial: { paddingTop: 0 },
       animate: !show ? { paddingBlockStart: 0 } : { paddingBlockStart: "var(--timer-top)" },
@@ -3733,7 +3437,7 @@ function TimerWrap(props) {
       },
       className: "flex flex-col items-stretch justify-start relative",
       children: [
-        /* @__PURE__ */ jsx37(
+        /* @__PURE__ */ jsx35(
           "div",
           {
             className: cn(
@@ -3743,7 +3447,7 @@ function TimerWrap(props) {
             children: props.Timer
           }
         ),
-        /* @__PURE__ */ jsx37(
+        /* @__PURE__ */ jsx35(
           Slot9,
           {
             className: cn("min-h-[calc(56rem/11)] z-20 relative !rounded-[1rem]", {
@@ -3758,7 +3462,7 @@ function TimerWrap(props) {
 }
 
 // src/components/molecules/toast.tsx
-import { Fragment as Fragment9, jsx as jsx38, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx36, jsxs as jsxs25 } from "react/jsx-runtime";
 var SeverityConfig = {
   error: {
     icon: Alert_default,
@@ -3784,67 +3488,74 @@ function ToastBox(props) {
     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",
+  return /* @__PURE__ */ jsx36(SmoothCorners, { size: "sm", children: /* @__PURE__ */ jsxs25(
+    "div",
+    {
+      "data-is-toast": "true",
+      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__ */ jsx36(
+          "div",
+          {
+            className: cn("items-center justify-center shrink-0 grow-0", color),
+            style: { fontSize: "calc(calc(24/16) * 1rem)" },
+            children: /* @__PURE__ */ jsx36(Icon, { width: "1em", height: "1em" })
+          }
+        ),
+        /* @__PURE__ */ jsxs25("div", { className: "flex flex-col flex-1", children: [
+          /* @__PURE__ */ jsx36(Text, { variant: "body1", className: "text-foreground", children: props.heading }),
+          /* @__PURE__ */ jsx36(
+            Text,
+            {
+              variant: "caption2",
+              className: "text-muted-foreground text-balance",
+              children: props.children
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx36("div", { className: "flex gap-[calc(6rem/16)] items-center self-center w-full md:w-auto", children: actions ? /* @__PURE__ */ jsxs25(Fragment8, { children: [
+          /* @__PURE__ */ jsx36("div", { className: "flex gap-[calc(6rem/16)] flex-1 items-center  *:flex-1", children: actions }),
+          /* @__PURE__ */ jsx36(
+            IconButton,
+            {
+              className: "cursor-pointer",
+              onClick: handleDismiss,
+              size: "smx",
+              variant: "level_2",
+              rounded: "default",
+              children: /* @__PURE__ */ jsx36(XIcon_default, { width: "1rem" })
+            }
+          )
+        ] }) : /* @__PURE__ */ jsx36(
+          Button2,
+          {
+            size: "sm",
+            variant: "level_2",
+            className: "w-full cursor-pointer",
+            onClick: handleDismiss,
+            children: "Close"
+          }
+        ) })
+      ]
+    }
+  ) });
+}
+
+// src/components/molecules/transaction-list.tsx
+import { motion as motion4 } from "motion/react";
+import { Fragment as Fragment9, jsx as jsx37, jsxs as jsxs26 } from "react/jsx-runtime";
+function TxListItemProcessing(props) {
+  return /* @__PURE__ */ jsx37(GradientContainer, { children: /* @__PURE__ */ jsxs26("div", { className: "rounded-[1rem] bg-brand-black-350 px-[0.75rem] h-[3.75rem] flex items-center", children: [
+    /* @__PURE__ */ jsx37(
+      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(
+    /* @__PURE__ */ jsxs26("div", { className: "flex gap-[1rem] flex-1 z-20 text-brand-black-100 font-medium", children: [
+      /* @__PURE__ */ jsx37(
         TokenTransferPair,
         {
           fromToken: props.from,
@@ -3852,48 +3563,48 @@ function TxListItemProcessing(props) {
           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: [
+      /* @__PURE__ */ jsxs26("div", { className: "flex flex-grow flex-col text-start", children: [
+        /* @__PURE__ */ jsx37("span", { className: "text-brand-white-500 text-[0.875rem] h-[1.25rem]", children: props.caption }),
+        /* @__PURE__ */ jsxs26(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,
+      /* @__PURE__ */ jsx37("div", { className: "basis-4/12 max-w-xs shrink-0 flex justify-end h-[2.25rem] whitespace-nowrap", children: /* @__PURE__ */ jsxs26(
+        motion4.div,
         {
           initial: { y: 0 },
           animate: { y: props.status === "failed" ? "-100%" : 0 },
           className: "grid",
           children: [
-            /* @__PURE__ */ jsxs29(
-              motion5.div,
+            /* @__PURE__ */ jsxs26(
+              motion4.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: [
+                  /* @__PURE__ */ jsx37("span", { className: "text-base text-brand-white-500 h-[1.25rem]", children: props.amount }),
+                  /* @__PURE__ */ jsxs26("span", { className: "text-xs h-[1rem]", children: [
                     props.percentage,
                     "%"
                   ] })
                 ]
               }
             ),
-            /* @__PURE__ */ jsxs29(
-              motion5.div,
+            /* @__PURE__ */ jsxs26(
+              motion4.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(
+                  /* @__PURE__ */ jsx37("span", { className: "text-base text-brand-white-500 h-[1.25rem]", children: props.amount }),
+                  /* @__PURE__ */ jsx37(
                     IconButton,
                     {
                       variant: "destructive",
                       rounded: "default",
                       size: "smx",
-                      children: /* @__PURE__ */ jsx39(RotateCcw_default, { className: "size-4 text-[currentColor]" })
+                      children: /* @__PURE__ */ jsx37(RotateCcw_default, { className: "size-4 text-[currentColor]" })
                     }
                   )
                 ]
@@ -3907,20 +3618,23 @@ function TxListItemProcessing(props) {
 }
 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(
+  return /* @__PURE__ */ jsx37(
     "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" })
+      className: cn(
+        "apperance-none rounded-[1rem] bg-brand-black-350 px-[0.75rem] h-[3.75rem] flex items-center",
+        props.className
+      ),
+      children: /* @__PURE__ */ jsxs26("div", { className: "flex gap-[1rem] flex-1 z-20 text-brand-black-100 font-medium", children: [
+        /* @__PURE__ */ jsx37(TokenTransferPair, { fromToken: from, toToken: to, size: "2rem" }),
+        /* @__PURE__ */ jsxs26("div", { className: "flex flex-grow flex-col text-start", children: [
+          /* @__PURE__ */ jsx37("span", { className: "text-brand-white-500 text-[0.875rem] h-[1.25rem]", children: caption }),
+          /* @__PURE__ */ jsx37(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 })
+        /* @__PURE__ */ jsxs26("div", { className: "shrink-0 flex flex-col text-end", children: [
+          /* @__PURE__ */ jsx37("span", { className: "text-base text-brand-white-500 h-[1.25rem]", children: amount }),
+          /* @__PURE__ */ jsx37("span", { className: "text-xs h-[1rem]", children: completedAt })
         ] })
       ] })
     })
@@ -3930,14 +3644,14 @@ 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" }),
+  return /* @__PURE__ */ jsxs26("span", { className: "text-xs h-[1rem] flex items-center gap-[0.125rem]", children: [
+    variant === "success" ? /* @__PURE__ */ jsxs26(Fragment9, { children: [
+      /* @__PURE__ */ jsx37(Check_default, { width: "0.75rem", height: "0.75rem" }),
       " ",
-      /* @__PURE__ */ jsx39("span", { children: "Success" })
+      /* @__PURE__ */ jsx37("span", { children: "Success" })
     ] }) : null,
-    variant === "error" ? /* @__PURE__ */ jsxs29(Fragment10, { children: [
-      /* @__PURE__ */ jsx39(
+    variant === "error" ? /* @__PURE__ */ jsxs26(Fragment9, { children: [
+      /* @__PURE__ */ jsx37(
         Alert_default,
         {
           width: "0.75rem",
@@ -3945,18 +3659,18 @@ function StatusBadge({
           className: "text-brand-danger-500"
         }
       ),
-      /* @__PURE__ */ jsx39("span", { className: "text-brand-danger-500", children: "Order expired" })
+      /* @__PURE__ */ jsx37("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 });
+  return /* @__PURE__ */ jsx37("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 { motion as motion5 } from "motion/react";
 import { cva as cva6 } from "class-variance-authority";
 import { Slot as Slot10 } from "@radix-ui/react-slot";
 
@@ -3965,14 +3679,14 @@ 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";
+import { jsx as jsx38 } from "react/jsx-runtime";
 function Tabs(_a) {
   var _b = _a, {
     className
   } = _b, props = __objRest(_b, [
     "className"
   ]);
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx38(
     TabsPrimitive.Root,
     __spreadValues({
       "data-slot": "tabs",
@@ -3986,7 +3700,7 @@ function TabsContent(_a) {
   } = _b, props = __objRest(_b, [
     "className"
   ]);
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx38(
     TabsPrimitive.Content,
     __spreadValues({
       "data-slot": "tabs-content",
@@ -3996,12 +3710,12 @@ function TabsContent(_a) {
 }
 
 // src/components/organisms/assets-collection.tsx
-import { jsx as jsx41, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs27 } 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 }) }) });
+  return /* @__PURE__ */ jsx39("nav", { className: "flex flex-col", children: /* @__PURE__ */ jsx39(Tab_.TabsList, { asChild: true, children: /* @__PURE__ */ jsx39("ul", { className: "flex p-0 bg-transparent gap-3", children: props.children }) }) });
 }
 function TabItem(props) {
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx39(
     Tab_.TabsTrigger,
     {
       value: props.value,
@@ -4014,7 +3728,7 @@ function AssetValueTrend(props) {
   const { percentage = 0, direction: dir, dollarValue = 0 } = props;
   const isZero = dollarValue === 0;
   const isUp = isZero ? "up" : dir === "up";
-  return /* @__PURE__ */ jsxs30(
+  return /* @__PURE__ */ jsxs27(
     "div",
     {
       className: "inline-flex select-none gap-[0.125rem] text-brand-black-100 h-[1rem] text-[0.7rem] font-medium items-center",
@@ -4023,7 +3737,7 @@ function AssetValueTrend(props) {
         "--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(
+        /* @__PURE__ */ jsx39("span", { className: "text-[var(--trend-color)]", children: /* @__PURE__ */ jsx39(
           ArrowTriangleBottom_default,
           {
             width: "0.75rem",
@@ -4034,13 +3748,13 @@ function AssetValueTrend(props) {
             )
           }
         ) }),
-        /* @__PURE__ */ jsxs30("span", { className: "flex items-center", children: [
-          /* @__PURE__ */ jsxs30("span", { className: "text-[var(--trend-color)]", children: [
+        /* @__PURE__ */ jsxs27("span", { className: "flex items-center", children: [
+          /* @__PURE__ */ jsxs27("span", { className: "text-[var(--trend-color)]", children: [
             "$",
             dollarValue
           ] }),
           "\xA0",
-          /* @__PURE__ */ jsxs30("span", { className: "text-[var(--trend-base)]", children: [
+          /* @__PURE__ */ jsxs27("span", { className: "text-[var(--trend-base)]", children: [
             "(",
             percentage,
             "%)"
@@ -4058,8 +3772,8 @@ function Balance(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(
+  return /* @__PURE__ */ jsx39("div", { className: "select-none", children: /* @__PURE__ */ jsxs27("span", { className: "text-[2.375rem] font-medium leading-[2.875rem] whitespace-nowrap", children: [
+    /* @__PURE__ */ jsxs27(
       "span",
       {
         className: cn(
@@ -4071,11 +3785,11 @@ function Balance(props) {
         ]
       }
     ),
-    /* @__PURE__ */ jsxs30("span", { className: "text-brand-black-100", children: [
+    /* @__PURE__ */ jsxs27("span", { className: "text-brand-black-100", children: [
       ".",
       decimal != null ? decimal : "00"
     ] }),
-    /* @__PURE__ */ jsxs30("span", { className: "text-brand-white-500", children: [
+    /* @__PURE__ */ jsxs27("span", { className: "text-brand-white-500", children: [
       "\xA0",
       suffix
     ] })
@@ -4083,7 +3797,7 @@ function Balance(props) {
 }
 
 // src/components/molecules/wallet-header.tsx
-import { Fragment as Fragment12, jsx as jsx42, jsxs as jsxs31 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx40, jsxs as jsxs28 } from "react/jsx-runtime";
 var WalletHeaderContext = React14.createContext(null);
 function useWalletHeader() {
   const context = React14.useContext(WalletHeaderContext);
@@ -4129,7 +3843,7 @@ var WalletHeader = React14.forwardRef(
     React14.useEffect(() => {
       globalWalletHeaderState = show;
     }, [show]);
-    return /* @__PURE__ */ jsx42(WalletHeaderContext.Provider, { value: { show, setShow }, children: /* @__PURE__ */ jsx42(
+    return /* @__PURE__ */ jsx40(WalletHeaderContext.Provider, { value: { show, setShow }, children: /* @__PURE__ */ jsx40(
       Comp,
       __spreadProps(__spreadValues({
         ref,
@@ -4145,7 +3859,7 @@ 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(
+  return /* @__PURE__ */ jsx40(
     "button",
     __spreadProps(__spreadValues({
       ref,
@@ -4159,9 +3873,9 @@ var WalletConnectedHeader = React14.forwardRef((_a, ref) => {
       ),
       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(
+      children: /* @__PURE__ */ jsxs28("div", { className: "flex w-full gap-2 justify-between items-center", children: [
+        children || /* @__PURE__ */ jsx40(AccountStack, { accounts }),
+        /* @__PURE__ */ jsx40(
           IconButton,
           {
             variant: "level_1",
@@ -4170,7 +3884,7 @@ var WalletConnectedHeader = React14.forwardRef((_a, ref) => {
             rounded: "full",
             size: "sm",
             asChild: true,
-            children: /* @__PURE__ */ jsx42("span", { children: /* @__PURE__ */ jsx42(ChevronBottomDown_default, {}) })
+            children: /* @__PURE__ */ jsx40("span", { children: /* @__PURE__ */ jsx40(ChevronBottomDown_default, {}) })
           }
         )
       ] })
@@ -4183,7 +3897,7 @@ var WalletHeaderContent = React14.forwardRef((_a, _ref) => {
   const { show: open } = useWalletHeader();
   const containerRef = React14.useRef(null);
   const parentRef = React14.useRef(null);
-  const slideDown2 = {
+  const slideDown = {
     show: { opacity: [0, 0.8, 1] },
     hide: { opacity: [1, 0.25, 0] }
   };
@@ -4242,8 +3956,8 @@ var WalletHeaderContent = React14.forwardRef((_a, _ref) => {
     "onTransitionRun",
     "onTransitionCancel"
   ]);
-  return /* @__PURE__ */ jsx42(
-    motion6.div,
+  return /* @__PURE__ */ jsx40(
+    motion5.div,
     {
       ref: parentRef,
       initial: { height: 0 },
@@ -4251,12 +3965,12 @@ var WalletHeaderContent = React14.forwardRef((_a, _ref) => {
       className: cn("z-10 relative", {
         "pointer-events-none": !open
       }),
-      children: /* @__PURE__ */ jsx42(
-        motion6.div,
+      children: /* @__PURE__ */ jsx40(
+        motion5.div,
         __spreadProps(__spreadValues({
           ref: containerRef,
           initial: { opacity: 0 },
-          variants: slideDown2,
+          variants: slideDown,
           transition: { duration: 0.4 },
           animate: open ? "show" : "hide",
           className: cn(
@@ -4271,18 +3985,18 @@ var WalletHeaderContent = React14.forwardRef((_a, _ref) => {
   );
 });
 WalletHeaderContent.displayName = "WalletHeaderContent";
-var AccountStack2 = React14.forwardRef(
+var AccountStack = 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(
+    return /* @__PURE__ */ jsx40("div", { ref, className: "flex gap-[0.625rem] items-center", children: accounts.length > 0 ? /* @__PURE__ */ jsxs28(React14.Fragment, { children: [
+      /* @__PURE__ */ jsx40("div", { className: "inline-flex -space-x-[0.3125rem]", children: accounts.map((account, index) => /* @__PURE__ */ jsx40(
         "div",
         {
           style: {
             zIndex: accounts.length - index,
             position: "relative"
           },
-          children: /* @__PURE__ */ jsx42(
+          children: /* @__PURE__ */ jsx40(
             BadgeIcon,
             {
               outline: true,
@@ -4295,15 +4009,15 @@ var AccountStack2 = React14.forwardRef(
         },
         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: [
+      /* @__PURE__ */ jsxs28("span", { className: "flex flex-col whitespace-nowrap", children: [
+        /* @__PURE__ */ jsx40("span", { className: "text-base font-medium h-[1.25rem] text-brand-white-500", children: accounts.length > 1 ? /* @__PURE__ */ jsxs28(Fragment11, { 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__ */ jsx40(Fragment11, { children: shortenAccountAddress((_b = (_a = accounts[0]) == null ? void 0 : _a.address) != null ? _b : "") || "--" }) }),
+        /* @__PURE__ */ jsx40("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(
+    ] }) : /* @__PURE__ */ jsxs28("div", { className: "flex items-center gap-[0.625rem] select-none", children: [
+      /* @__PURE__ */ jsx40(
         IconButton,
         {
           disabled: true,
@@ -4311,22 +4025,22 @@ var AccountStack2 = React14.forwardRef(
           variant: "level_2",
           rounded: "full",
           size: "sm",
-          children: /* @__PURE__ */ jsx42(Wallet_default, { className: "size-5" })
+          children: /* @__PURE__ */ jsx40(Wallet_default, { className: "size-5" })
         }
       ),
-      /* @__PURE__ */ jsx42("p", { className: "text-base font-medium text-brand-white-100", children: "Connect Your Wallet" })
+      /* @__PURE__ */ jsx40("p", { className: "text-base font-medium text-brand-white-100", children: "Connect Your Wallet" })
     ] }) });
   }
 );
-AccountStack2.displayName = "AccountStack";
+AccountStack.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 }));
+  return /* @__PURE__ */ jsx40(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(
+  return /* @__PURE__ */ jsx40(
     TabsList2,
     __spreadProps(__spreadValues({
       ref,
@@ -4339,7 +4053,7 @@ var WalletHeaderTabsList = React14.forwardRef((_a, ref) => {
 WalletHeaderTabsList.displayName = "WalletHeaderTabsList";
 var WalletHeaderTabItem = React14.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx40(
     TabItem,
     __spreadProps(__spreadValues({
       ref,
@@ -4355,7 +4069,7 @@ var WalletHeaderTabItem = React14.forwardRef((_a, ref) => {
 WalletHeaderTabItem.displayName = "WalletHeaderTabItem";
 var WalletHeaderTabsContent = React14.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx40(
     TabsContent,
     __spreadProps(__spreadValues({
       ref,
@@ -4370,357 +4084,817 @@ 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(
+  return /* @__PURE__ */ jsx40(
     Comp,
     __spreadProps(__spreadValues({
       ref,
       className: cn(
-        "transition-all pt-[1rem]",
-        {
-          "opacity-15 pointer-events-none filter blur-[2px]": open
-        },
+        "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 jsx41 } from "react/jsx-runtime";
+function HeaderGradient() {
+  return /* @__PURE__ */ jsx41("div", { className: "absolute inset-0 h-[3px] bg-gradient-brand-animated" });
+}
+function HeaderContent({
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsx41(
+    "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__ */ jsx41(
+    "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 jsx42, jsxs as jsxs29 } from "react/jsx-runtime";
+function TabAltHeader({
+  label,
+  isNew,
+  isActive,
+  onClick,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx42(
+    "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__ */ jsxs29("span", { className: "relative z-10 flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx42("span", { className: "font-medium", children: label }),
+        isNew && /* @__PURE__ */ jsx42("span", { className: "text-brand-warning-500 caption-text absolute top-0 left-[100%] w-max", children: "New" })
+      ] })
+    }
+  );
+}
+function TabAltHeaders({
+  children,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx42("div", { className: cn("flex space-x-3 mb-6", className), children });
+}
+function TabAltContent({
+  children,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx42("div", { className, children });
+}
+function TabAltPanel({
+  id,
+  activeTab,
+  children,
+  className = ""
+}) {
+  if (activeTab !== id) return null;
+  return /* @__PURE__ */ jsx42("div", { className, children }, id);
+}
+function TabAlt({
+  children,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx42("div", { className: cn("w-full", className), children });
+}
+
+// src/@/ui/tooltip.tsx
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { jsx as jsx43, jsxs as jsxs30 } from "react/jsx-runtime";
+function TooltipProvider(_a) {
+  var _b = _a, {
+    delayDuration = 0
+  } = _b, props = __objRest(_b, [
+    "delayDuration"
+  ]);
+  return /* @__PURE__ */ jsx43(
+    TooltipPrimitive.Provider,
+    __spreadValues({
+      "data-slot": "tooltip-provider",
+      delayDuration
+    }, props)
+  );
+}
+function Tooltip(_a) {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ jsx43(TooltipProvider, { children: /* @__PURE__ */ jsx43(TooltipPrimitive.Root, __spreadValues({ "data-slot": "tooltip" }, props)) });
+}
+function TooltipTrigger(_a) {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ jsx43(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__ */ jsx43(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs30(
+    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__ */ jsx43(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 useState7 } from "react";
+import { jsx as jsx44, jsxs as jsxs31 } 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] = useState7("");
+  const [customDeadline, setCustomDeadline] = useState7(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__ */ jsxs31(Modal, { className: "p-4 !h-max", isOpen, onClose, children: [
+    /* @__PURE__ */ jsxs31("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs31("div", { className: "body-1 font-medium text-white max-w-[200px] break-words", children: [
+        title,
+        " settings"
+      ] }),
+      /* @__PURE__ */ jsx44(
+        XIcon_default,
+        {
+          className: "size-4 cursor-pointer text-brand-black-100 hover:text-white duration-200 transition-colors",
+          onClick: onClose
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs31("div", { className: "mt-4", children: [
+      /* @__PURE__ */ jsxs31("div", { className: "flex items-center gap-1 text-brand-black-100", children: [
+        /* @__PURE__ */ jsxs31("p", { className: "text-caption", children: [
+          title,
+          " Slippage"
+        ] }),
+        /* @__PURE__ */ jsxs31(Tooltip, { children: [
+          /* @__PURE__ */ jsx44(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx44(CircleInfo_default, { className: "size-[14px] cursor-pointer hover:text-white duration-200 transition-colors" }) }),
+          /* @__PURE__ */ jsx44(TooltipContent, { children: /* @__PURE__ */ jsx44("p", { className: "text-caption", children: effectiveSlippageTooltip }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs31("div", { className: "grid grid-cols-3 gap-2 mt-3", children: [
+        PRESET_SLIPPAGES.map((option) => /* @__PURE__ */ jsx44(
+          "div",
+          {
+            className: cn(
+              "relative rounded-2xl p-[1.5px]",
+              isSlippageSelected(option) ? "animated-gradient-border" : "bg-transparent"
+            ),
+            children: /* @__PURE__ */ jsx44(
+              "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__ */ jsx44("p", { className: "body-1 font-medium", children: option })
+              }
+            )
+          },
+          option
+        )),
+        /* @__PURE__ */ jsx44(
+          "div",
+          {
+            className: cn(
+              "relative rounded-2xl p-[1.5px]",
+              isCustomSlippageActive ? "animated-gradient-border" : "bg-transparent"
+            ),
+            children: /* @__PURE__ */ jsxs31("div", { className: "relative bg-brand-card-100 rounded-[16px]", children: [
+              /* @__PURE__ */ jsx44(
+                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__ */ jsx44("span", { className: "body-1 absolute right-4 top-1/2 -translate-y-1/2 text-brand-black-100", children: "%" })
+            ] })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs31("div", { className: "mt-6", children: [
+      /* @__PURE__ */ jsxs31("div", { className: "flex items-center gap-1 text-brand-black-100", children: [
+        /* @__PURE__ */ jsxs31("p", { className: "text-caption", children: [
+          title,
+          " deadline"
+        ] }),
+        /* @__PURE__ */ jsxs31(Tooltip, { children: [
+          /* @__PURE__ */ jsx44(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx44(CircleInfo_default, { className: "size-[14px] cursor-pointer hover:text-white duration-200 transition-colors" }) }),
+          /* @__PURE__ */ jsx44(TooltipContent, { children: /* @__PURE__ */ jsx44("p", { className: "text-caption", children: effectiveDeadlineTooltip }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs31("div", { className: "relative mt-3", children: [
+        /* @__PURE__ */ jsx44(
+          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__ */ jsx44("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 jsx45 } from "react/jsx-runtime";
+var BridgeSettings = (props) => {
+  return /* @__PURE__ */ jsx45(Settings, __spreadProps(__spreadValues({}, props), { type: "bridge" }));
+};
+
+// src/@/ui/sheet.tsx
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { jsx as jsx46, jsxs as jsxs32 } from "react/jsx-runtime";
+function Sheet(_a) {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ jsx46(SheetPrimitive.Root, __spreadValues({ "data-slot": "sheet" }, props));
+}
+function SheetTrigger(_a) {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ jsx46(SheetPrimitive.Trigger, __spreadValues({ "data-slot": "sheet-trigger" }, props));
+}
+function SheetPortal(_a) {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ jsx46(SheetPrimitive.Portal, __spreadValues({ "data-slot": "sheet-portal" }, props));
+}
+function SheetOverlay(_a) {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx46(
+    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), {
-      children
-    })
+    }, props)
   );
-});
-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(
+function SheetContent(_a) {
+  var _b = _a, {
+    className,
+    children,
+    side = "right"
+  } = _b, props = __objRest(_b, [
+    "className",
+    "children",
+    "side"
+  ]);
+  return /* @__PURE__ */ jsxs32(SheetPortal, { children: [
+    /* @__PURE__ */ jsx46(SheetOverlay, {}),
+    /* @__PURE__ */ jsxs32(
+      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__ */ jsx46(
+            SheetPrimitive.Close,
+            {
+              asChild: true,
+              className: "absolute top-[1.625rem] -left-10",
+              children: /* @__PURE__ */ jsxs32(
+                IconButton,
+                {
+                  className: "cursor-pointer",
+                  variant: "secondary",
+                  rounded: "full",
+                  size: "sm",
+                  children: [
+                    /* @__PURE__ */ jsx46(ChevronDoubleRight_default, { className: "size-4 text-brand-black-100" }),
+                    /* @__PURE__ */ jsx46("span", { className: "sr-only", children: "Close" })
+                  ]
+                }
+              )
+            }
+          )
+        ]
+      })
+    )
+  ] });
+}
+function SheetHeader(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx46(
     "div",
-    {
-      className: cn(
-        "header-container w-full h-full px-4 md:px-6 flex items-center justify-between mx-auto",
-        className
-      ),
-      children
-    }
+    __spreadValues({
+      "data-slot": "sheet-header",
+      className: cn("flex flex-col gap-1.5 p-4", className)
+    }, props)
   );
 }
-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
-    }
+function SheetTitle(_a) {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx46(
+    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__ */ jsx46(
+    SheetPrimitive.Description,
+    __spreadValues({
+      "data-slot": "sheet-description",
+      className: cn("text-muted-foreground text-sm", className)
+    }, props)
   );
 }
 
-// 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,
+// src/components/navigation/hyperbridge-drawer.tsx
+import { Drawer as DrawerPrimitive2 } from "vaul";
+import { Fragment as Fragment12, jsx as jsx47, jsxs as jsxs33 } from "react/jsx-runtime";
+function HBDrawer(_a) {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ jsx47(DrawerPrimitive2.Root, __spreadValues({ "data-slot": "hb-drawer" }, props));
+}
+function HBDrawerTrigger(_a) {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ jsx47(DrawerPrimitive2.Trigger, __spreadValues({ "data-slot": "hb-drawer-trigger" }, props));
+}
+function HBDrawerPortal(_a) {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ jsx47(DrawerPrimitive2.Portal, __spreadValues({ "data-slot": "hb-drawer-portal" }, props));
+}
+function HBDrawerClose(_a) {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ jsx47(DrawerPrimitive2.Close, __spreadValues({ "data-slot": "hb-drawer-close" }, props));
+}
+function HBDrawerOverlay(_a) {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx47(
+    DrawerPrimitive2.Overlay,
+    __spreadValues({
+      "data-slot": "hb-drawer-overlay",
       className: cn(
-        "relative cursor-pointer w-max duration-200 transition-colors",
-        isActive ? "text-white" : "text-brand-black-100 hover:text-white",
+        "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
-      ),
-      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" })
-      ] })
-    }
+      )
+    }, props)
   );
 }
-function TabAltHeaders({
-  children,
-  className = ""
-}) {
-  return /* @__PURE__ */ jsx44("div", { className: cn("flex space-x-3 mb-6", className), children });
+function HBDrawerContent(_a) {
+  var _b = _a, {
+    className,
+    children
+  } = _b, props = __objRest(_b, [
+    "className",
+    "children"
+  ]);
+  return /* @__PURE__ */ jsxs33(Fragment12, { children: [
+    /* @__PURE__ */ jsx47(HBDrawerOverlay, {}),
+    /* @__PURE__ */ jsxs33(
+      DrawerPrimitive2.Content,
+      __spreadProps(__spreadValues({
+        "data-slot": "hb-drawer-content",
+        className: cn(
+          "group/drawer-content bg-brand-black-550 fixed z-50 flex h-auto flex-col rounded-t-2xl px-4 pb-4 pt-0 border-brand-black-300",
+          "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__ */ jsx47("div", { className: "bg-brand-black-350 mx-auto my-2 hidden h-[5px] w-16 shrink-0 rounded-[2.5px] group-data-[vaul-drawer-direction=bottom]/drawer-content:block" }),
+          children
+        ]
+      })
+    )
+  ] });
 }
-function TabAltContent({
-  children,
-  className = ""
-}) {
-  return /* @__PURE__ */ jsx44("div", { className, children });
+function HBDrawerHeader(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx47(
+    "div",
+    __spreadValues({
+      "data-slot": "hb-drawer-header",
+      className: cn(
+        "flex items-center justify-between py-5 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center",
+        className
+      )
+    }, props)
+  );
 }
-function TabAltPanel({
-  id,
-  activeTab,
-  children,
-  className = ""
-}) {
-  if (activeTab !== id) return null;
-  return /* @__PURE__ */ jsx44("div", { className, children }, id);
+function HBDrawerFooter(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx47(
+    "div",
+    __spreadValues({
+      "data-slot": "hb-drawer-footer",
+      className: cn("mt-auto flex flex-col gap-2 p-4", className)
+    }, props)
+  );
 }
-function TabAlt({
-  children,
-  className = ""
-}) {
-  return /* @__PURE__ */ jsx44("div", { className: cn("w-full", className), children });
+function HBDrawerTitle(_a) {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx47(
+    DrawerPrimitive2.Title,
+    __spreadValues({
+      "data-slot": "hb-drawer-title",
+      className: cn("text-foreground font-semibold", className)
+    }, props)
+  );
 }
-
-// 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) {
+function HBDrawerDescription(_a) {
   var _b = _a, {
-    delayDuration = 0
+    className
   } = _b, props = __objRest(_b, [
-    "delayDuration"
+    "className"
   ]);
-  return /* @__PURE__ */ jsx45(
-    TooltipPrimitive.Provider,
+  return /* @__PURE__ */ jsx47(
+    DrawerPrimitive2.Description,
     __spreadValues({
-      "data-slot": "tooltip-provider",
-      delayDuration
+      "data-slot": "hb-drawer-description",
+      className: cn("text-muted-foreground text-sm", className)
     }, props)
   );
 }
-function Tooltip(_a) {
-  var props = __objRest(_a, []);
-  return /* @__PURE__ */ jsx45(TooltipProvider, { children: /* @__PURE__ */ jsx45(TooltipPrimitive.Root, __spreadValues({ "data-slot": "tooltip" }, props)) });
+
+// src/components/organisms/manage-account.tsx
+import { jsx as jsx48, jsxs as jsxs34 } from "react/jsx-runtime";
+function ManageAccounts() {
+  return /* @__PURE__ */ jsxs34(SheetHeader, { className: "p-[1rem] -mx-[1rem]", children: [
+    /* @__PURE__ */ jsxs34("div", { className: "flex items-center gap-[0.625rem] select-none", children: [
+      /* @__PURE__ */ jsx48(
+        IconButton,
+        {
+          disabled: true,
+          className: "pointer-events-none !text-brand-white-500",
+          variant: "level_2",
+          rounded: "full",
+          size: "sm",
+          children: /* @__PURE__ */ jsx48(Wallet_default, { className: "size-5" })
+        }
+      ),
+      /* @__PURE__ */ jsx48(SheetTitle, { className: "text-brand-white-100", children: /* @__PURE__ */ jsx48("span", { className: "text-base font-medium", children: "Connect Your Wallet" }) })
+    ] }),
+    /* @__PURE__ */ jsx48(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__ */ jsxs34("div", { className: "p-[1rem] -mx-[1rem]", children: [
+    /* @__PURE__ */ jsxs34("div", { className: "flex items-center gap-[0.625rem] select-none", children: [
+      /* @__PURE__ */ jsx48(
+        TokenImage,
+        {
+          src: image.src,
+          className: "w-[2rem]",
+          alt: (_a = image.alt) != null ? _a : heading
+        }
+      ),
+      /* @__PURE__ */ jsx48(SheetTitle, { className: "text-brand-white-100 flex-1", children: /* @__PURE__ */ jsx48("span", { className: "text-base font-medium", children: heading }) }),
+      !hideBackButton && /* @__PURE__ */ jsx48(
+        IconButton,
+        {
+          variant: "level_1",
+          rounded: "full",
+          size: "sm",
+          onClick: onBack,
+          children: /* @__PURE__ */ jsx48(
+            StepBack_default,
+            {
+              width: "1rem",
+              height: "1rem",
+              className: "text-brand-black-100"
+            }
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx48(SheetDescription, { className: "sr-only", children: "Choose a wallet provider to connect to our application." })
+  ] });
 }
-function TooltipTrigger(_a) {
-  var props = __objRest(_a, []);
-  return /* @__PURE__ */ jsx45(TooltipPrimitive.Trigger, __spreadValues({ "data-slot": "tooltip-trigger" }, props));
+function ListSection({
+  children,
+  caption = "Heading",
+  contentClassName
+}) {
+  return /* @__PURE__ */ jsxs34("div", { className: "flex flex-col gap-y-[0.375rem]", children: [
+    /* @__PURE__ */ jsx48("div", { className: "text-caption text-brand-black-100 select-none font-normal", children: caption }),
+    /* @__PURE__ */ jsx48("div", { className: cn("flex flex-col gap-2", contentClassName), children })
+  ] });
 }
-function TooltipContent(_a) {
+function CWDrawerContent(_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]" })
-      ]
+  const isMobile = useIsMobile();
+  if (isMobile) {
+    return /* @__PURE__ */ jsx48(HBDrawer, { open: true, children: /* @__PURE__ */ jsx48(HBDrawerContent, { className: "bg-brand-black-550 rounded-t-[1rem] w-full px-[1rem] !max-h-[95vh] h-full border-t border-brand-black-300", children: /* @__PURE__ */ jsx48("div", { className: "flex flex-col", children }) }) });
+  }
+  return /* @__PURE__ */ jsx48(
+    SheetContent,
+    __spreadProps(__spreadValues({}, props), {
+      side: "right",
+      className: "h-full max-h-auto max-w-[calc(29.75rem_+_1.25rem)] select-none border-none shadow-none text-brand-white-500 w-full sm:w-[540px] bg-transparent p-[0.625rem]",
+      children: /* @__PURE__ */ jsx48("div", { className: "bg-brand-black-550 flex-1 flex flex-col rounded-[1rem] w-[23.75rem] px-[1rem]", children })
     })
-  ) });
+  );
 }
 
-// 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 = ({
+// src/components/tokens/swap-token-selector.tsx
+import { useRef as useRef3 } from "react";
+import { jsx as jsx49, jsxs as jsxs35 } from "react/jsx-runtime";
+var SwapTokenSelector = ({
   isOpen,
   onClose,
-  slippage = "Auto",
-  deadline,
-  onSlippageChange,
-  onDeadlineChange,
-  type,
-  slippageTooltipText,
-  deadlineTooltipText
+  children,
+  className
 }) => {
-  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");
+  return /* @__PURE__ */ jsx49(Modal, { isOpen, onClose, className, children });
+};
+var SwapTokenSelectorHeader = ({
+  title,
+  onClose,
+  children,
+  className
+}) => {
+  return /* @__PURE__ */ jsxs35(
+    "div",
+    {
+      className: cn(
+        "bg-brand-black-550 px-6 pt-6 pb-4 transition-all duration-200",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs35("div", { className: "flex items-center justify-between", children: [
+          title && /* @__PURE__ */ jsx49("div", { className: "body-1 font-medium text-white max-w-[200px] break-words", children: title }),
+          onClose && /* @__PURE__ */ jsx49(
+            XIcon_default,
+            {
+              className: "size-4 cursor-pointer text-brand-black-100 hover:text-white duration-200 transition-colors",
+              onClick: onClose
+            }
+          )
+        ] }),
+        children
+      ]
     }
-  };
-  const isSlippageSelected = (option) => {
-    if (option === "Custom") {
-      return slippage !== "Auto" && !PRESET_SLIPPAGES.includes(slippage);
+  );
+};
+var SwapTokenSelectorSearch = ({
+  children,
+  className
+}) => {
+  return /* @__PURE__ */ jsx49("div", { className: cn("mt-4", className), children });
+};
+var SwapTokenSelectorContent = ({
+  children,
+  className
+}) => {
+  const scrollRef = useRef3(null);
+  return /* @__PURE__ */ jsxs35("div", { className: "relative flex-1 flex flex-col min-h-0", children: [
+    /* @__PURE__ */ jsx49(ScrollAwareSeparator, { scrollRef }),
+    /* @__PURE__ */ jsx49(ScrollArea, { ref: scrollRef, className: "h-full", children: /* @__PURE__ */ jsx49("div", { className: cn("px-6 pb-6 space-y-4", className), children }) })
+  ] });
+};
+var SwapTokenSelectorSection = ({
+  title,
+  children,
+  className
+}) => {
+  return /* @__PURE__ */ jsxs35("div", { className: cn("flex flex-col", className), children: [
+    title && /* @__PURE__ */ jsx49("p", { className: "text-caption text-brand-black-100 mb-2", children: title }),
+    /* @__PURE__ */ jsx49("div", { className: "space-y-2", children })
+  ] });
+};
+var SwapTokenSelectorEmpty = ({
+  children,
+  className
+}) => {
+  return /* @__PURE__ */ jsx49(
+    "div",
+    {
+      className: cn(
+        "text-center py-8 h-full flex items-center justify-center",
+        className
+      ),
+      children
     }
-    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,
+  );
+};
+var SwapTokenItem = ({
+  token,
+  network,
+  address,
+  isActive = false,
+  onClick,
+  className,
+  amount,
+  usdValue
+}) => {
+  return /* @__PURE__ */ jsx49(
+    "div",
+    {
+      className: cn(
+        "relative p-[1.5px] rounded-[16px]",
+        isActive && "animated-gradient-border",
+        className
+      ),
+      children: /* @__PURE__ */ jsxs35(
+        "button",
         {
-          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,
+          type: "button",
+          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,
+          children: [
+            /* @__PURE__ */ jsxs35("div", { className: "flex items-center text-start gap-3", children: [
+              /* @__PURE__ */ jsx49(
+                BadgeIcon,
                 {
-                  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
+                  src: token.image,
+                  alt: token.symbol,
+                  badgeSrc: network.image,
+                  badgeAlt: network.name
                 }
               ),
-              /* @__PURE__ */ jsx46("span", { className: "body-1 absolute right-4 top-1/2 -translate-y-1/2 text-brand-black-100", children: "%" })
+              /* @__PURE__ */ jsxs35("div", { className: "flex flex-col gap-[2px] items-start", children: [
+                /* @__PURE__ */ jsx49("p", { className: "body-1 font-medium text-white", children: token.name }),
+                address
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs35("div", { className: "flex flex-col items-end gap-[2px]", children: [
+              /* @__PURE__ */ jsx49("p", { className: "body-1 font-medium text-white", children: amount }),
+              /* @__PURE__ */ jsx49("p", { className: "text-caption text-brand-black-100", children: usdValue })
             ] })
-          }
-        )
-      ] })
-    ] }),
-    /* @__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,
+  AccountStack,
   AddressInput,
   AddressInputFocusBehaviour,
   AssetList,
@@ -4731,11 +4905,9 @@ export {
   BridgeForm,
   BridgeInput,
   BridgeSettings,
-  BridgeSummary,
   BridgeTokenButton,
   Button2 as Button,
   CWDrawerContent,
-  ConnectedHeader,
   Dialog,
   DialogClose,
   DialogContent,
@@ -4755,6 +4927,16 @@ export {
   EmptyStateDescription,
   EmptyStateTitle,
   GradientButton,
+  HBDrawer,
+  HBDrawerClose,
+  HBDrawerContent,
+  HBDrawerDescription,
+  HBDrawerFooter,
+  HBDrawerHeader,
+  HBDrawerOverlay,
+  HBDrawerPortal,
+  HBDrawerTitle,
+  HBDrawerTrigger,
   Header,
   HeaderContent,
   HeaderGradient,
@@ -4780,9 +4962,17 @@ export {
   Sheet,
   SheetContent,
   SheetTrigger,
+  Summary,
   SummaryValues,
   SwapForm,
   SwapTokenButton,
+  SwapTokenItem,
+  SwapTokenSelector,
+  SwapTokenSelectorContent,
+  SwapTokenSelectorEmpty,
+  SwapTokenSelectorHeader,
+  SwapTokenSelectorSearch,
+  SwapTokenSelectorSection,
   TabAlt,
   TabAltContent,
   TabAltHeader,