@hyperbridge/ui 0.0.31 → 0.0.33

package/dist/index.mjs

@@ -30,7 +30,7 @@ import {
   __objRest,
   __spreadProps,
   __spreadValues
-} from "./chunk-Z3U6XEBY.mjs";
+} from "./chunk-VAQN7OAZ.mjs";
 
 // src/components/atoms/search-input.tsx
 import { cva } from "class-variance-authority";
@@ -183,7 +183,10 @@ function BadgeIcon(props) {
     {
       "data-chain": "true",
       "data-token": "BNC",
-      className: "relative rounded-full w-[var(--badge-size)] h-[var(--badge-size)] shrink-0",
+      className: cn(
+        "relative rounded-full w-[var(--badge-size)] h-[var(--badge-size)] shrink-0",
+        props.className
+      ),
       style: {
         fontSize: size,
         "--badge-size": size
@@ -3059,10 +3062,166 @@ var ReviewItemCopyAddressButton = React10.forwardRef((props, ref) => {
   );
 });
 
+// src/components/molecules/swap-review-item.tsx
+import { Loader2Icon } from "lucide-react";
+import React11 from "react";
+import { jsx as jsx31, jsxs as jsxs22 } from "react/jsx-runtime";
+function SwapReviewItem(props) {
+  const addressButton = props.addressButton;
+  const { pendingMode = "idle" } = props;
+  return /* @__PURE__ */ jsxs22("li", { className: "font-medium text-brand-black-100 items-center w-full h-[calc(48rem/16)] flex gap-[1rem]", children: [
+    /* @__PURE__ */ jsx31(BadgeIcon, __spreadValues({ size: "2.5rem" }, props.badge)),
+    /* @__PURE__ */ jsxs22("div", { className: "flex-1 text-start flex flex-col", children: [
+      /* @__PURE__ */ jsx31("span", { className: "text-[calc(12rem/16)] leading-[1rem]", children: props.tag === "from" ? "Amount in" : "Amount out" }),
+      /* @__PURE__ */ jsxs22(
+        "span",
+        {
+          className: cn(
+            "text-[calc(20rem/16)] leading-[1.25] text-brand-white-500",
+            {
+              "text-brand-success-400": pendingMode === "complete" && props.tag === "to"
+            }
+          ),
+          children: [
+            props.asset.amount,
+            " ",
+            props.asset.symbol
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs22("div", { className: "flex self-stretch items-end text-end shrink-0", children: [
+      /* @__PURE__ */ jsx31(if_default, { cond: props.variant === "processing", children: /* @__PURE__ */ jsx31(
+        "span",
+        {
+          className: cn(
+            "transition-all opacity-0 translate-y-full delay-200 transform mb-1 text-[calc(12rem/16)] leading-[1rem] duration-400 ease-fluid",
+            {
+              "opacity-100 translate-y-0 delay-100": props.asset.secondaryValue !== null,
+              "text-brand-success-400": pendingMode === "complete" && props.tag === "to"
+            }
+          ),
+          children: props.asset.secondaryValue
+        }
+      ) }),
+      /* @__PURE__ */ jsx31(if_default, { cond: props.variant === "reviewing", children: /* @__PURE__ */ jsxs22("div", { className: "flex flex-col items-end gap-1.5", children: [
+        addressButton,
+        /* @__PURE__ */ jsxs22("span", { className: "text-[calc(11rem/16)] text-brand-black-100 px-2", children: [
+          props.wallet.networkName,
+          " wallet"
+        ] })
+      ] }) })
+    ] })
+  ] });
+}
+var SwapReviewCopyAddressButton = React11.forwardRef(function SwapReviewCopyAddressButton2(props, ref) {
+  return /* @__PURE__ */ jsx31(
+    ReviewItemCopyAddressButton,
+    __spreadValues({
+      ref,
+      className: "bg-brand-black-500"
+    }, props)
+  );
+});
+var SwapReviewItemAddress = React11.forwardRef((props, ref) => {
+  const _a = props, { address, tag } = _a, PROPS = __objRest(_a, ["address", "tag"]);
+  return /* @__PURE__ */ jsx31(
+    "span",
+    __spreadProps(__spreadValues({
+      ref
+    }, PROPS), {
+      className: cn(
+        "rounded-full px-[6px] py-[3px] text-[calc(14rem/16)] inline-flex items-center gap-[calc(4rem/16)] bg-brand-black-300",
+        props.className
+      ),
+      children: /* @__PURE__ */ jsx31("span", { className: "text-[calc(12rem/16)] not-sr-only leading-[1rem] text-brand-white-500", children: address })
+    })
+  );
+});
+function SwapReviewRoot(props) {
+  return /* @__PURE__ */ jsx31(
+    "section",
+    {
+      className: "select-none flex max-w-[25rem] flex-col gap-2 rounded-xl bg-brand-black-550 py-5 px-3.5",
+      style: {
+        // @ts-expect-error Not fully supported in modern browsers
+        cornerShape: "superellipse(1.2)"
+      },
+      children: props.children
+    }
+  );
+}
+function SwapReviewSeperator(props) {
+  return /* @__PURE__ */ jsxs22("div", { className: "overflow-x-hidden relative flex items-center justify-center", children: [
+    /* @__PURE__ */ jsx31("div", { className: "border-dashed border-brand-black-200 z-10 absolute inset-x-0 border-b" }),
+    /* @__PURE__ */ jsx31(
+      "div",
+      {
+        className: "z-20 absolute inset-0",
+        style: {
+          backgroundImage: "linear-gradient(45deg, transparent 10%, var(--color-brand-black-550) 40%,var(--color-brand-black-550), var(--color-brand-black-550) 60%,transparent)"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx31("div", { className: "self-center place-self-center relative z-30", children: props.children })
+  ] });
+}
+function SwapReviewSeperatorStatus(props) {
+  const { mode } = props;
+  const isLoading = mode === "processing";
+  const isIdle = mode === "idle";
+  return /* @__PURE__ */ jsxs22(
+    "span",
+    {
+      className: cn(
+        "bg-[#1E2227] z-30 transition-all relative duration-[400ms] ease-fluid flex rounded-full py-1.5 px-2.5 items-center overflow-hidden",
+        {
+          "pr-6": !isIdle
+        }
+      ),
+      children: [
+        /* @__PURE__ */ jsx31(
+          "span",
+          {
+            className: cn("text-xs text-brand-black-100", {
+              "text-white": mode === "complete"
+            }),
+            children: mode === "processing" ? "Swapping" : "Swapped"
+          }
+        ),
+        /* @__PURE__ */ jsx31("span", { role: "presentation", className: "absolute end-2.5", children: /* @__PURE__ */ jsxs22("span", { className: "text-[0.65625rem] size-[1em] flex items-center justify-center *:absolute *:left-0 *:top-0 relative", children: [
+          /* @__PURE__ */ jsx31(
+            Loader2Icon,
+            {
+              className: cn(
+                "transition-all ease-fluid opacity-0 delay-0 duration-[400ms] animate-spin size-[1em]",
+                {
+                  "opacity-100 delay-200": isLoading
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx31(
+            Check_default,
+            {
+              className: cn(
+                "text-brand-success-400 opacity-0 transition-default -rotate-45 transform",
+                {
+                  "opacity-100 rotate-0": mode === "complete"
+                }
+              )
+            }
+          )
+        ] }) })
+      ]
+    }
+  );
+}
+
 // src/components/molecules/dialog.tsx
 import * as DialogPrimitive2 from "@radix-ui/react-dialog";
-import React11 from "react";
-import { Fragment as Fragment7, jsx as jsx31, jsxs as jsxs22 } from "react/jsx-runtime";
+import React12 from "react";
+import { Fragment as Fragment7, jsx as jsx32, jsxs as jsxs23 } from "react/jsx-runtime";
 function DialogMorphContent(_a) {
   var _b = _a, {
     className,
@@ -3075,8 +3234,8 @@ function DialogMorphContent(_a) {
     "showCloseButton",
     "onInteractOutside"
   ]);
-  const [mode, setViewMode] = React11.useState("card");
-  React11.useEffect(() => {
+  const [mode, setViewMode] = React12.useState("card");
+  React12.useEffect(() => {
     const controller = new AbortController();
     const signal = controller.signal;
     const checkOrientation = () => {
@@ -3102,7 +3261,7 @@ function DialogMorphContent(_a) {
       event.preventDefault();
     }
   };
-  const Content9 = /* @__PURE__ */ jsxs22(
+  const Content9 = /* @__PURE__ */ jsxs23(
     DialogPrimitive2.Content,
     __spreadProps(__spreadValues({
       onInteractOutside: handleInteractOutside,
@@ -3118,48 +3277,48 @@ function DialogMorphContent(_a) {
     }, props), {
       children: [
         children,
-        showCloseButton && /* @__PURE__ */ jsxs22(
+        showCloseButton && /* @__PURE__ */ jsxs23(
           DialogPrimitive2.Close,
           {
             "data-slot": "dialog-close",
             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" })
+              /* @__PURE__ */ jsx32(XIcon_default, { width: "1rem", height: "1rem" }),
+              /* @__PURE__ */ jsx32("span", { className: "sr-only", children: "Close" })
             ]
           }
         )
       ]
     })
   );
-  return /* @__PURE__ */ jsxs22(DialogPortal, { "data-slot": "dialog-portal", children: [
-    /* @__PURE__ */ jsx31(DialogOverlay, {}),
-    mode === "card" ? /* @__PURE__ */ jsx31(SmoothCorners, { children: Content9 }) : /* @__PURE__ */ jsx31(Fragment7, { children: Content9 })
+  return /* @__PURE__ */ jsxs23(DialogPortal, { "data-slot": "dialog-portal", children: [
+    /* @__PURE__ */ jsx32(DialogOverlay, {}),
+    mode === "card" ? /* @__PURE__ */ jsx32(SmoothCorners, { children: Content9 }) : /* @__PURE__ */ jsx32(Fragment7, { children: Content9 })
   ] });
 }
 
 // src/components/molecules/manage-wallet.tsx
-import React12 from "react";
+import React13 from "react";
 import { Slot as Slot8 } from "@radix-ui/react-slot";
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx33 } 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 });
+  const [show, setShow] = React13.useState(open);
+  return /* @__PURE__ */ jsx33(WalletManagerContext.Provider, { value: { show, setShow }, children });
 }
-var WalletManagerContext = React12.createContext({
+var WalletManagerContext = React13.createContext({
   show: false,
   // @ts-expect-error
-  setShow: React12.Dispatch
+  setShow: React13.Dispatch
 });
 function useManager() {
-  return React12.useContext(WalletManagerContext);
+  return React13.useContext(WalletManagerContext);
 }
 function WalletManagerUIContent({
   children
 }) {
   const { show } = useManager();
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx33(
     Slot8,
     {
       className: cn("transition-all pt-[1rem] flex-1", {
@@ -3175,14 +3334,14 @@ import { InfoIcon } from "lucide-react";
 
 // src/@/ui/tooltip.tsx
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { jsx as jsx33, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs24 } from "react/jsx-runtime";
 function TooltipProvider(_a) {
   var _b = _a, {
     delayDuration = 0
   } = _b, props = __objRest(_b, [
     "delayDuration"
   ]);
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx34(
     TooltipPrimitive.Provider,
     __spreadValues({
       "data-slot": "tooltip-provider",
@@ -3192,11 +3351,11 @@ function TooltipProvider(_a) {
 }
 function Tooltip(_a) {
   var props = __objRest(_a, []);
-  return /* @__PURE__ */ jsx33(TooltipProvider, { children: /* @__PURE__ */ jsx33(TooltipPrimitive.Root, __spreadValues({ "data-slot": "tooltip" }, props)) });
+  return /* @__PURE__ */ jsx34(TooltipProvider, { children: /* @__PURE__ */ jsx34(TooltipPrimitive.Root, __spreadValues({ "data-slot": "tooltip" }, props)) });
 }
 function TooltipTrigger(_a) {
   var props = __objRest(_a, []);
-  return /* @__PURE__ */ jsx33(TooltipPrimitive.Trigger, __spreadValues({ "data-slot": "tooltip-trigger" }, props));
+  return /* @__PURE__ */ jsx34(TooltipPrimitive.Trigger, __spreadValues({ "data-slot": "tooltip-trigger" }, props));
 }
 function TooltipContent(_a) {
   var _b = _a, {
@@ -3208,7 +3367,7 @@ function TooltipContent(_a) {
     "sideOffset",
     "children"
   ]);
-  return /* @__PURE__ */ jsx33(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsx34(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs24(
     TooltipPrimitive.Content,
     __spreadProps(__spreadValues({
       "data-slot": "tooltip-content",
@@ -3220,31 +3379,31 @@ function TooltipContent(_a) {
     }, props), {
       children: [
         children,
-        /* @__PURE__ */ jsx33(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]" })
+        /* @__PURE__ */ jsx34(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/molecules/summary.tsx
-import { jsx as jsx34, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs25 } from "react/jsx-runtime";
 function Summary(props) {
-  return /* @__PURE__ */ jsx34("div", { className: "flex flex-col gap-2 text-brand-black-100", children: props.children });
+  return /* @__PURE__ */ jsx35("div", { className: "flex flex-col gap-2 text-brand-black-100", children: props.children });
 }
 function SummaryEntry(props) {
   var _a;
   const Icon = props.icon;
-  const tooltip = typeof props.tooltip === "string" ? /* @__PURE__ */ jsxs24(Tooltip, { children: [
-    /* @__PURE__ */ jsx34(TooltipTrigger, { children: /* @__PURE__ */ jsx34(InfoIcon, { size: "1em" }) }),
-    /* @__PURE__ */ jsx34(TooltipContent, { children: props.tooltip })
+  const tooltip = typeof props.tooltip === "string" ? /* @__PURE__ */ jsxs25(Tooltip, { children: [
+    /* @__PURE__ */ jsx35(TooltipTrigger, { children: /* @__PURE__ */ jsx35(InfoIcon, { size: "1em" }) }),
+    /* @__PURE__ */ jsx35(TooltipContent, { children: props.tooltip })
   ] }) : (_a = props.tooltip) != null ? _a : null;
-  return /* @__PURE__ */ jsxs24("div", { className: "flex select-none items-center text-[calc(12rem/16)] font-medium", children: [
-    /* @__PURE__ */ jsxs24("dt", { className: "flex-1 gap-1 flex items-center", children: [
-      /* @__PURE__ */ jsx34(Icon, { size: "1.16em" }),
-      /* @__PURE__ */ jsx34("span", { className: "text-[1em] leading-[1rem]", children: props.name }),
+  return /* @__PURE__ */ jsxs25("div", { className: "flex select-none items-center text-[calc(12rem/16)] font-medium", children: [
+    /* @__PURE__ */ jsxs25("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 }),
       tooltip
     ] }),
-    /* @__PURE__ */ jsx34("dd", { children: props.children })
+    /* @__PURE__ */ jsx35("dd", { children: props.children })
   ] });
 }
 function makeEntry({
@@ -3256,7 +3415,7 @@ function makeEntry({
     children,
     tooltip: overwriteTooltip
   }) {
-    return /* @__PURE__ */ jsx34(
+    return /* @__PURE__ */ jsx35(
       SummaryEntry,
       {
         icon,
@@ -3269,39 +3428,39 @@ function makeEntry({
   };
 }
 var Bridge = makeEntry({
-  icon: ({ size }) => /* @__PURE__ */ jsx34(Percent_default, { width: size }),
+  icon: ({ size }) => /* @__PURE__ */ jsx35(Percent_default, { width: size }),
   name: "Bridge fee"
 });
 var RecipientAddress = makeEntry({
-  icon: ({ size }) => /* @__PURE__ */ jsx34(Wallet_default, { width: size }),
+  icon: ({ size }) => /* @__PURE__ */ jsx35(Wallet_default, { width: size }),
   name: "Recipient Address"
 });
 var GasEntry = makeEntry({
-  icon: ({ size }) => /* @__PURE__ */ jsx34(Gas_default, { width: size }),
+  icon: ({ size }) => /* @__PURE__ */ jsx35(Gas_default, { width: size }),
   name: "Gas costs"
 });
 var SpillageTolerance = makeEntry({
-  icon: ({ size }) => /* @__PURE__ */ jsx34(ArrowBottomTop_default, { width: size }),
+  icon: ({ size }) => /* @__PURE__ */ jsx35(ArrowBottomTop_default, { width: size }),
   name: "Spillage tolerance"
 });
 var Route = makeEntry({
-  icon: ({ size }) => /* @__PURE__ */ jsx34(ArrowSplit_default, { width: size }),
+  icon: ({ size }) => /* @__PURE__ */ jsx35(ArrowSplit_default, { width: size }),
   name: "Route"
 });
 var Rate = makeEntry({
-  icon: ({ size }) => /* @__PURE__ */ jsx34(ArrowBottomTop_default, { width: size }),
+  icon: ({ size }) => /* @__PURE__ */ jsx35(ArrowBottomTop_default, { width: size }),
   name: "Rate"
 });
 var Fee = makeEntry({
-  icon: ({ size }) => /* @__PURE__ */ jsx34(Gas_default, { width: size }),
+  icon: ({ size }) => /* @__PURE__ */ jsx35(Gas_default, { width: size }),
   name: "Fee"
 });
 var ETA = makeEntry({
-  icon: ({ size }) => /* @__PURE__ */ jsx34(Clock_default, { width: size }),
+  icon: ({ size }) => /* @__PURE__ */ jsx35(Clock_default, { width: size }),
   name: "Estimated time"
 });
 var Points = makeEntry({
-  icon: ({ size }) => /* @__PURE__ */ jsx34(Star_default, { width: size }),
+  icon: ({ size }) => /* @__PURE__ */ jsx35(Star_default, { width: size }),
   name: "Points"
 });
 var SummaryValues = {
@@ -3318,10 +3477,10 @@ var SummaryValues = {
   },
   Values: {
     Highlight: ({ children }) => {
-      return /* @__PURE__ */ jsx34("span", { className: "text-[inherit] text-brand-white-500", children });
+      return /* @__PURE__ */ jsx35("span", { className: "text-[inherit] text-brand-white-500", children });
     },
     Soft: ({ children }) => {
-      return /* @__PURE__ */ jsx34("span", { className: "text-[inherit]text-brand-black-50", children });
+      return /* @__PURE__ */ jsx35("span", { className: "text-[inherit]text-brand-black-50", children });
     }
   }
 };
@@ -3330,11 +3489,11 @@ var SummaryValues = {
 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";
+import React14 from "react";
 
 // src/@/ui/progress.tsx
 import * as ProgressPrimitive from "@radix-ui/react-progress";
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 function Progress(_a) {
   var _b = _a, {
     className,
@@ -3343,7 +3502,7 @@ function Progress(_a) {
     "className",
     "value"
   ]);
-  return /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx36(
     ProgressPrimitive.Root,
     __spreadProps(__spreadValues({
       "data-slot": "progress",
@@ -3352,7 +3511,7 @@ function Progress(_a) {
         className
       )
     }, props), {
-      children: /* @__PURE__ */ jsx35(
+      children: /* @__PURE__ */ jsx36(
         ProgressPrimitive.Indicator,
         {
           "data-slot": "progress-indicator",
@@ -3365,13 +3524,13 @@ function Progress(_a) {
 }
 
 // src/components/molecules/timeline.tsx
-import { jsx as jsx36, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs26 } from "react/jsx-runtime";
 var StatusTextMap = {
   processing: "Processing",
   upcoming: "Upcoming",
   error: "Failed"
 };
-var TimelineItem = React13.forwardRef(function TimelineItem2(props, ref) {
+var TimelineItem = React14.forwardRef(function TimelineItem2(props, ref) {
   var _b, _c, _d, _e;
   const _a = props, {
     processingStatus,
@@ -3387,17 +3546,17 @@ var TimelineItem = React13.forwardRef(function TimelineItem2(props, ref) {
     "durationMode"
   ]);
   const is_visually_active = processingStatus !== "upcoming";
-  const id = React13.useId();
+  const id = React14.useId();
   const layoutId = `${id}/${caption}/content-2`;
   const hideTime = durationMode === "none";
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx37(
     motion3.li,
     __spreadProps(__spreadValues({
       ref
     }, REST), {
       "data-process-status": processingStatus,
       className: "block bg-brand-black-350 cursor-default select-none font-medium text-brand-white-500",
-      children: /* @__PURE__ */ jsxs25(
+      children: /* @__PURE__ */ jsxs26(
         motion3.div,
         {
           initial: { opacity: 0.5 },
@@ -3406,7 +3565,7 @@ var TimelineItem = React13.forwardRef(function TimelineItem2(props, ref) {
           },
           className: "flex h-[3.5rem] items-center gap-[0.86rem] py-[0.5625rem] px-[0.75rem] ",
           children: [
-            props.level === 0 ? /* @__PURE__ */ jsx36(BadgeIcon, __spreadValues({}, props.badge)) : /* @__PURE__ */ jsx36(
+            props.level === 0 ? /* @__PURE__ */ jsx37(BadgeIcon, __spreadValues({}, props.badge)) : /* @__PURE__ */ jsx37(
               IconButton,
               {
                 variant: "level_2",
@@ -3416,7 +3575,7 @@ var TimelineItem = React13.forwardRef(function TimelineItem2(props, ref) {
                 style: {
                   boxShadow: "0 4px 24px 0 rgba(255, 255, 255, 0.05) inset"
                 },
-                children: /* @__PURE__ */ jsx36(
+                children: /* @__PURE__ */ jsx37(
                   "span",
                   {
                     className: cn(
@@ -3430,9 +3589,9 @@ var TimelineItem = React13.forwardRef(function TimelineItem2(props, ref) {
                 )
               }
             ),
-            /* @__PURE__ */ jsxs25("div", { className: "flex flex-col flex-1 gap-[calc(4/16rem)]", children: [
-              /* @__PURE__ */ jsx36("div", { className: "text-brand-white-500 text-xs md:!text-base h-auto md:h-[1.25rem] truncate max-w-[150px] md:max-w-full", children: caption }),
-              /* @__PURE__ */ jsx36("div", { className: "text-xs h-[1rem] text-brand-black-100", children: processingStatus === "completed" ? ((_b = props.data) == null ? void 0 : _b.transactionUrl) ? /* @__PURE__ */ jsxs25(
+            /* @__PURE__ */ jsxs26("div", { className: "flex flex-col flex-1 gap-[calc(4/16rem)]", children: [
+              /* @__PURE__ */ jsx37("div", { className: "text-brand-white-500 text-xs md:!text-base h-auto md:h-[1.25rem] truncate max-w-[150px] md:max-w-full", children: caption }),
+              /* @__PURE__ */ jsx37("div", { className: "text-xs h-[1rem] text-brand-black-100", children: processingStatus === "completed" ? ((_b = props.data) == null ? void 0 : _b.transactionUrl) ? /* @__PURE__ */ jsxs26(
                 "a",
                 {
                   href: props.data.transactionUrl,
@@ -3440,14 +3599,14 @@ var TimelineItem = React13.forwardRef(function TimelineItem2(props, ref) {
                   target: "_blank",
                   rel: "noopener noreferrer",
                   children: [
-                    /* @__PURE__ */ jsx36("span", { children: "View in explorer " }),
-                    /* @__PURE__ */ jsx36(ArrowUpRight_default, { width: "0.75rem", height: "0.75rem" })
+                    /* @__PURE__ */ jsx37("span", { children: "View in explorer " }),
+                    /* @__PURE__ */ jsx37(ArrowUpRight_default, { width: "0.75rem", height: "0.75rem" })
                   ]
                 }
-              ) : /* @__PURE__ */ jsx36("span", { children: props.secondary }) : /* @__PURE__ */ jsx36("span", { children: (_c = props == null ? void 0 : props.secondary) != null ? _c : StatusTextMap[processingStatus] }) })
+              ) : /* @__PURE__ */ jsx37("span", { children: props.secondary }) : /* @__PURE__ */ jsx37("span", { children: (_c = props == null ? void 0 : props.secondary) != null ? _c : StatusTextMap[processingStatus] }) })
             ] }),
-            /* @__PURE__ */ jsxs25(AnimatePresence2, { children: [
-              processingStatus === "completed" ? /* @__PURE__ */ jsxs25(
+            /* @__PURE__ */ jsxs26(AnimatePresence2, { children: [
+              processingStatus === "completed" ? /* @__PURE__ */ jsxs26(
                 motion3.div,
                 {
                   layoutId,
@@ -3456,8 +3615,8 @@ var TimelineItem = React13.forwardRef(function TimelineItem2(props, ref) {
                   exit: { x: 10, opacity: 0 },
                   className: "flex gap-[calc(8rem/16)] items-center",
                   children: [
-                    !hideTime && /* @__PURE__ */ jsx36("span", { className: "text-[calc(13rem/16)] text-brand-black-100", children: (_d = props == null ? void 0 : props.data) == null ? void 0 : _d.completedIn }),
-                    /* @__PURE__ */ jsx36(
+                    !hideTime && /* @__PURE__ */ jsx37("span", { className: "text-[calc(13rem/16)] text-brand-black-100", children: (_d = props == null ? void 0 : props.data) == null ? void 0 : _d.completedIn }),
+                    /* @__PURE__ */ jsx37(
                       Check_default,
                       {
                         height: "1rem",
@@ -3468,7 +3627,7 @@ var TimelineItem = React13.forwardRef(function TimelineItem2(props, ref) {
                   ]
                 }
               ) : null,
-              processingStatus === "processing" ? /* @__PURE__ */ jsxs25(
+              processingStatus === "processing" ? /* @__PURE__ */ jsxs26(
                 motion3.div,
                 {
                   initial: { x: 10, opacity: 0 },
@@ -3477,8 +3636,8 @@ var TimelineItem = React13.forwardRef(function TimelineItem2(props, ref) {
                   layoutId,
                   className: "flex gap-[calc(10rem/16)] items-center",
                   children: [
-                    !hideTime && /* @__PURE__ */ jsx36("span", { className: "text-[calc(13rem/16)]", children: (_e = props == null ? void 0 : props.data) == null ? void 0 : _e.eta }),
-                    /* @__PURE__ */ jsx36(
+                    !hideTime && /* @__PURE__ */ jsx37("span", { className: "text-[calc(13rem/16)]", children: (_e = props == null ? void 0 : props.data) == null ? void 0 : _e.eta }),
+                    /* @__PURE__ */ jsx37(
                       Loader2,
                       {
                         size: "1rem",
@@ -3496,13 +3655,13 @@ var TimelineItem = React13.forwardRef(function TimelineItem2(props, ref) {
   );
 });
 function TimelineListGroup(props) {
-  return /* @__PURE__ */ jsx36("ul", { className: cn("flex flex-col overflow-hidden"), children: props.children });
+  return /* @__PURE__ */ jsx37("ul", { className: cn("flex flex-col overflow-hidden"), children: props.children });
 }
 function TimelineList(props) {
-  return /* @__PURE__ */ jsx36("ul", { className: "flex flex-col", children: props.children });
+  return /* @__PURE__ */ jsx37("ul", { className: "flex flex-col", children: props.children });
 }
-var TimelineRoot = React13.forwardRef((props, ref) => {
-  return /* @__PURE__ */ jsx36(
+var TimelineRoot = React14.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx37(
     "ul",
     __spreadProps(__spreadValues({
       ref
@@ -3529,8 +3688,8 @@ function TransactionTimer(props) {
     tooltipContent,
     timerMessage = "Transaction will timeout in"
   } = props;
-  return /* @__PURE__ */ jsxs25("div", { className: "flex flex-col gap-[calc(6rem/16)]", children: [
-    /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs26("div", { className: "flex flex-col gap-[calc(6rem/16)]", children: [
+    /* @__PURE__ */ jsxs26(
       "div",
       {
         className: cn(
@@ -3541,22 +3700,22 @@ function TransactionTimer(props) {
           }
         ),
         children: [
-          /* @__PURE__ */ jsx36("span", { children: timerMessage }),
-          /* @__PURE__ */ jsxs25("span", { className: "text-brand-white-500", children: [
+          /* @__PURE__ */ jsx37("span", { children: timerMessage }),
+          /* @__PURE__ */ jsxs26("span", { className: "text-brand-white-500", children: [
             String(hours).padStart(2, "0"),
             ":",
             String(mins).padStart(2, "0"),
             ":",
             String(seconds).padStart(2, "0")
           ] }),
-          tooltipContent && /* @__PURE__ */ jsx36(TooltipProvider, { children: /* @__PURE__ */ jsxs25(Tooltip, { children: [
-            /* @__PURE__ */ jsx36(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx36("span", { children: /* @__PURE__ */ jsx36(CircleInfo_default, { width: "1em", height: "1em" }) }) }),
-            /* @__PURE__ */ jsx36(TooltipContent, { children: /* @__PURE__ */ jsx36("p", { children: tooltipContent }) })
+          tooltipContent && /* @__PURE__ */ jsx37(TooltipProvider, { children: /* @__PURE__ */ jsxs26(Tooltip, { children: [
+            /* @__PURE__ */ jsx37(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx37("span", { children: /* @__PURE__ */ jsx37(CircleInfo_default, { width: "1em", height: "1em" }) }) }),
+            /* @__PURE__ */ jsx37(TooltipContent, { children: /* @__PURE__ */ jsx37("p", { children: tooltipContent }) })
           ] }) })
         ]
       }
     ),
-    /* @__PURE__ */ jsx36(
+    /* @__PURE__ */ jsx37(
       Progress,
       {
         value: props.progress,
@@ -3570,7 +3729,7 @@ function TransactionTimer(props) {
 }
 function TimerWrap(props) {
   const show = props.reveal;
-  return /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs26(
     motion3.div,
     {
       initial: { paddingTop: 0 },
@@ -3580,7 +3739,7 @@ function TimerWrap(props) {
       },
       className: "flex flex-col items-stretch justify-start relative",
       children: [
-        /* @__PURE__ */ jsx36(
+        /* @__PURE__ */ jsx37(
           "div",
           {
             className: cn(
@@ -3590,7 +3749,7 @@ function TimerWrap(props) {
             children: props.Timer
           }
         ),
-        /* @__PURE__ */ jsx36(
+        /* @__PURE__ */ jsx37(
           Slot9,
           {
             className: cn("min-h-[calc(56rem/11)] z-20 relative !rounded-[1rem]", {
@@ -3604,8 +3763,165 @@ function TimerWrap(props) {
   );
 }
 
+// src/components/molecules/timeline-alt.tsx
+import { Loader2 as Loader22 } from "lucide-react";
+import { AnimatePresence as AnimatePresence3, motion as motion4 } from "motion/react";
+import React15 from "react";
+import { jsx as jsx38, jsxs as jsxs27 } from "react/jsx-runtime";
+var StatusTextMap2 = {
+  processing: "Processing",
+  upcoming: "Upcoming",
+  error: "Failed"
+};
+var TimelineAltItem = React15.forwardRef(function TimelineAltItem2(props, ref) {
+  var _b, _c, _d, _e;
+  const _a = props, {
+    processingStatus,
+    caption,
+    secondary,
+    data,
+    durationMode = "none"
+  } = _a, REST = __objRest(_a, [
+    "processingStatus",
+    "caption",
+    "secondary",
+    "data",
+    "durationMode"
+  ]);
+  const is_visually_active = processingStatus !== "upcoming";
+  const id = React15.useId();
+  const layoutId = `${id}/${caption}/content-2`;
+  const hideTime = durationMode === "none";
+  return /* @__PURE__ */ jsx38(
+    motion4.li,
+    __spreadProps(__spreadValues({
+      ref
+    }, REST), {
+      "data-process-status": processingStatus,
+      className: "block group-[.group-list]/list:border-x group-[.group-list]/list:border-y-0 border border-(--timeline-alt-list-outline) group-[.group-list-group]/listgroup:border-x group-[.group-list-group]/listgroup:border-y-0 cursor-default select-none font-medium text-brand-white-500",
+      style: {
+        "--timeline-alt-list-outline": "var(--timeline-alt-outline, #222429)"
+      },
+      children: /* @__PURE__ */ jsxs27(motion4.div, { className: "flex items-center bordergap-[0.86rem] py-[0.75rem] px-[0.875rem] ", children: [
+        /* @__PURE__ */ jsxs27("div", { className: "flex flex-col flex-1 gap-[calc(4/16rem)]", children: [
+          /* @__PURE__ */ jsx38(
+            "div",
+            {
+              className: cn(
+                "text-brand-white-500 text-xs md:!text-base truncate max-w-[150px] md:max-w-full",
+                {
+                  "text-brand-black-100": processingStatus !== "completed",
+                  "text-brand-white-500": processingStatus === "completed",
+                  "text-brand-danger-500": processingStatus === "error"
+                }
+              ),
+              children: caption
+            }
+          ),
+          /* @__PURE__ */ jsx38("div", { className: "text-xs h-[1rem] text-brand-black-100", children: processingStatus === "completed" ? ((_b = props.data) == null ? void 0 : _b.transactionUrl) ? /* @__PURE__ */ jsxs27(
+            "a",
+            {
+              href: props.data.transactionUrl,
+              className: "flex cursor-pointer transition-default hover:text-brand-white-500 gap-[calc(2rem/16)] items-center",
+              target: "_blank",
+              rel: "noopener noreferrer",
+              children: [
+                /* @__PURE__ */ jsx38("span", { children: "View in explorer " }),
+                /* @__PURE__ */ jsx38(ArrowUpRight_default, { width: "0.75rem", height: "0.75rem" })
+              ]
+            }
+          ) : /* @__PURE__ */ jsx38("span", { children: props.secondary }) : /* @__PURE__ */ jsx38("span", { children: (_c = props == null ? void 0 : props.secondary) != null ? _c : StatusTextMap2[processingStatus] }) })
+        ] }),
+        /* @__PURE__ */ jsxs27(AnimatePresence3, { 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: [
+                !hideTime && /* @__PURE__ */ jsx38(
+                  "span",
+                  {
+                    className: cn("text-[calc(13rem/16)] text-brand-black-100", {
+                      "text-brand-white-500": processingStatus === "completed"
+                    }),
+                    children: (_d = props == null ? void 0 : props.data) == null ? void 0 : _d.completedIn
+                  }
+                ),
+                /* @__PURE__ */ jsx38(
+                  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: [
+                !hideTime && /* @__PURE__ */ jsx38("span", { className: "text-[calc(13rem/16)]", children: (_e = props == null ? void 0 : props.data) == null ? void 0 : _e.eta }),
+                /* @__PURE__ */ jsx38(
+                  Loader22,
+                  {
+                    size: "1rem",
+                    className: "animate text-brand-black-100 animate-spin"
+                  }
+                )
+              ]
+            }
+          ) : null
+        ] })
+      ] })
+    })
+  );
+});
+function TimelineAltListGroup(props) {
+  return /* @__PURE__ */ jsx38(
+    "ul",
+    {
+      className: cn(
+        "flex group/listgroup group-list-group flex-col overflow-hidden !divide-y divide-[#222429]"
+      ),
+      children: props.children
+    }
+  );
+}
+function TimelineAltList(props) {
+  return /* @__PURE__ */ jsx38("ul", { className: "group/list group-list flex flex-col", children: props.children });
+}
+var TimelineAltRoot = React15.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx38(
+    "ul",
+    __spreadProps(__spreadValues({
+      ref
+    }, props), {
+      className: cn(
+        "flex flex-col gap-y-0 overflow-hidden *:first:rounded-t-[1rem] *:last:rounded-b-[1rem]",
+        props.className
+      ),
+      style: {
+        "--timeline-alt-outline": "#222429"
+      },
+      children: props.children
+    })
+  );
+});
+TimelineAltRoot.displayName = "TimelineAltRoot";
+
 // src/components/molecules/toast.tsx
-import { Fragment as Fragment8, jsx as jsx37, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx39, jsxs as jsxs28 } from "react/jsx-runtime";
 var SeverityConfig = {
   error: {
     icon: Alert_default,
@@ -3631,23 +3947,23 @@ function ToastBox(props) {
     event.stopPropagation();
     onDismiss == null ? void 0 : onDismiss(event);
   };
-  return /* @__PURE__ */ jsx37(SmoothCorners, { size: "sm", children: /* @__PURE__ */ jsxs26(
+  return /* @__PURE__ */ jsx39(SmoothCorners, { size: "sm", children: /* @__PURE__ */ jsxs28(
     "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__ */ jsx37(
+        /* @__PURE__ */ jsx39(
           "div",
           {
             className: cn("items-center justify-center shrink-0 grow-0", color),
             style: { fontSize: "calc(calc(24/16) * 1rem)" },
-            children: /* @__PURE__ */ jsx37(Icon, { width: "1em", height: "1em" })
+            children: /* @__PURE__ */ jsx39(Icon, { width: "1em", height: "1em" })
           }
         ),
-        /* @__PURE__ */ jsxs26("div", { className: "flex flex-col flex-1", children: [
-          /* @__PURE__ */ jsx37(Text, { variant: "body1", className: "text-foreground", children: props.heading }),
-          /* @__PURE__ */ jsx37(
+        /* @__PURE__ */ jsxs28("div", { className: "flex flex-col flex-1", children: [
+          /* @__PURE__ */ jsx39(Text, { variant: "body1", className: "text-foreground", children: props.heading }),
+          /* @__PURE__ */ jsx39(
             Text,
             {
               variant: "caption2",
@@ -3656,9 +3972,9 @@ function ToastBox(props) {
             }
           )
         ] }),
-        /* @__PURE__ */ jsx37("div", { className: "flex gap-[calc(6rem/16)] items-center self-center w-full md:w-auto", children: actions ? /* @__PURE__ */ jsxs26(Fragment8, { children: [
-          /* @__PURE__ */ jsx37("div", { className: "flex gap-[calc(6rem/16)] flex-1 items-center  *:flex-1", children: actions }),
-          /* @__PURE__ */ jsx37(
+        /* @__PURE__ */ jsx39("div", { className: "flex gap-[calc(6rem/16)] items-center self-center w-full md:w-auto", children: actions ? /* @__PURE__ */ jsxs28(Fragment8, { children: [
+          /* @__PURE__ */ jsx39("div", { className: "flex gap-[calc(6rem/16)] flex-1 items-center  *:flex-1", children: actions }),
+          /* @__PURE__ */ jsx39(
             IconButton,
             {
               className: "cursor-pointer",
@@ -3666,10 +3982,10 @@ function ToastBox(props) {
               size: "smx",
               variant: "level_2",
               rounded: "default",
-              children: /* @__PURE__ */ jsx37(XIcon_default, { width: "1rem" })
+              children: /* @__PURE__ */ jsx39(XIcon_default, { width: "1rem" })
             }
           )
-        ] }) : /* @__PURE__ */ jsx37(
+        ] }) : /* @__PURE__ */ jsx39(
           Button2,
           {
             size: "sm",
@@ -3685,12 +4001,12 @@ function ToastBox(props) {
 }
 
 // src/components/molecules/transaction-list.tsx
-import { motion as motion4 } from "motion/react";
-import { Fragment as Fragment9, jsx as jsx38, jsxs as jsxs27 } from "react/jsx-runtime";
+import { motion as motion5 } from "motion/react";
+import { Fragment as Fragment9, jsx as jsx40, jsxs as jsxs29 } from "react/jsx-runtime";
 function TxListItemProcessing(props) {
   const { size = "2rem" } = props;
-  return /* @__PURE__ */ jsx38(GradientContainer, { children: /* @__PURE__ */ jsxs27("div", { className: "rounded-[1rem] bg-brand-black-350 px-[0.75rem] h-[3.75rem] flex items-center", children: [
-    /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx40(GradientContainer, { children: /* @__PURE__ */ jsxs29("div", { className: "rounded-[1rem] bg-brand-black-350 px-[0.75rem] h-[3.75rem] flex items-center", children: [
+    /* @__PURE__ */ jsx40(
       GradientLine,
       {
         behaviour: "progress",
@@ -3698,8 +4014,8 @@ function TxListItemProcessing(props) {
         mode: props.status === "failed" ? "error" : "default"
       }
     ),
-    /* @__PURE__ */ jsxs27("div", { className: "flex gap-[1rem] flex-1 z-20 text-brand-black-100 font-medium", children: [
-      /* @__PURE__ */ jsx38(
+    /* @__PURE__ */ jsxs29("div", { className: "flex gap-[1rem] flex-1 z-20 text-brand-black-100 font-medium", children: [
+      /* @__PURE__ */ jsx40(
         TokenTransferPair,
         {
           fromToken: props.from,
@@ -3707,48 +4023,48 @@ function TxListItemProcessing(props) {
           size
         }
       ),
-      /* @__PURE__ */ jsxs27("div", { className: "flex flex-grow flex-col text-start", children: [
-        /* @__PURE__ */ jsx38("span", { className: "text-brand-white-500 whitespace-nowrap text-[0.875rem] h-[1.25rem] max-w-28 md:max-w-full truncate", children: props.caption }),
-        /* @__PURE__ */ jsxs27(StatusBadge, { variant: props.status === "failed" ? "error" : "none", children: [
+      /* @__PURE__ */ jsxs29("div", { className: "flex flex-grow flex-col text-start", children: [
+        /* @__PURE__ */ jsx40("span", { className: "text-brand-white-500 whitespace-nowrap text-[0.875rem] h-[1.25rem] max-w-28 md:max-w-full truncate", children: props.caption }),
+        /* @__PURE__ */ jsxs29(StatusBadge, { variant: props.status === "failed" ? "error" : "none", children: [
           "~ ",
           props.eta
         ] })
       ] }),
-      /* @__PURE__ */ jsx38("div", { className: "basis-4/12 max-w-xs shrink-0 flex justify-end h-[2.25rem] whitespace-nowrap", children: /* @__PURE__ */ jsxs27(
-        motion4.div,
+      /* @__PURE__ */ jsx40("div", { className: "basis-4/12 max-w-xs shrink-0 flex justify-end h-[2.25rem] whitespace-nowrap", children: /* @__PURE__ */ jsxs29(
+        motion5.div,
         {
           initial: { y: 0 },
           animate: { y: props.status === "failed" ? "-100%" : 0 },
           className: "grid",
           children: [
-            /* @__PURE__ */ jsxs27(
-              motion4.div,
+            /* @__PURE__ */ jsxs29(
+              motion5.div,
               {
                 animate: { opacity: props.status === "processing" ? 1 : 0 },
                 className: "flex flex-col text-end h-[2.25rem]",
                 children: [
-                  /* @__PURE__ */ jsx38("span", { className: "text-base text-brand-white-500 h-[1.25rem]", children: props.amount }),
-                  /* @__PURE__ */ jsxs27("span", { className: "text-xs h-[1rem]", children: [
+                  /* @__PURE__ */ jsx40("span", { className: "text-base text-brand-white-500 h-[1.25rem]", children: props.amount }),
+                  /* @__PURE__ */ jsxs29("span", { className: "text-xs h-[1rem]", children: [
                     props.percentage,
                     "%"
                   ] })
                 ]
               }
             ),
-            /* @__PURE__ */ jsxs27(
-              motion4.div,
+            /* @__PURE__ */ jsxs29(
+              motion5.div,
               {
                 animate: { opacity: props.status === "failed" ? 1 : 0 },
                 className: "flex gap-[0.75rem] items-center h-[2.25rem] justify-end",
                 children: [
-                  /* @__PURE__ */ jsx38("span", { className: "text-base text-brand-white-500 h-[1.25rem]", children: props.amount }),
-                  /* @__PURE__ */ jsx38(
+                  /* @__PURE__ */ jsx40("span", { className: "text-base text-brand-white-500 h-[1.25rem]", children: props.amount }),
+                  /* @__PURE__ */ jsx40(
                     IconButton,
                     {
                       variant: "destructive",
                       rounded: "default",
                       size: "smx",
-                      children: /* @__PURE__ */ jsx38(RotateCcw_default, { className: "size-4 text-[currentColor]" })
+                      children: /* @__PURE__ */ jsx40(RotateCcw_default, { className: "size-4 text-[currentColor]" })
                     }
                   )
                 ]
@@ -3778,7 +4094,7 @@ var TxListItem = function TxListItem2(props) {
     "amount",
     "size"
   ]);
-  return /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx40(
     "button",
     __spreadProps(__spreadValues({}, rest), {
       type: "button",
@@ -3786,15 +4102,15 @@ var TxListItem = function TxListItem2(props) {
         "apperance-none rounded-[1rem] bg-brand-black-350 px-[0.75rem] h-[3.75rem] flex items-center",
         props.className
       ),
-      children: /* @__PURE__ */ jsxs27("div", { className: "flex justify-between gap-4 flex-1 z-20 text-brand-black-100 font-medium", children: [
-        /* @__PURE__ */ jsx38(TokenTransferPair, { fromToken: from, toToken: to, size }),
-        /* @__PURE__ */ jsxs27("div", { className: "flex flex-grow flex-col text-start whitespace-nowrap", children: [
-          /* @__PURE__ */ jsx38("span", { className: "text-brand-white-500 text-[0.875rem] h-[1.25rem] max-w-28 md:max-w-full truncate", children: caption }),
-          /* @__PURE__ */ jsx38(StatusBadge, { variant: mode === "rollback" ? "refunded" : "success" })
+      children: /* @__PURE__ */ jsxs29("div", { className: "flex justify-between gap-4 flex-1 z-20 text-brand-black-100 font-medium", children: [
+        /* @__PURE__ */ jsx40(TokenTransferPair, { fromToken: from, toToken: to, size }),
+        /* @__PURE__ */ jsxs29("div", { className: "flex flex-grow flex-col text-start whitespace-nowrap", children: [
+          /* @__PURE__ */ jsx40("span", { className: "text-brand-white-500 text-[0.875rem] h-[1.25rem] max-w-28 md:max-w-full truncate", children: caption }),
+          /* @__PURE__ */ jsx40(StatusBadge, { variant: mode === "rollback" ? "refunded" : "success" })
         ] }),
-        /* @__PURE__ */ jsxs27("div", { className: "shrink-0 flex flex-col text-end", children: [
-          /* @__PURE__ */ jsx38("span", { className: "text-base text-brand-white-500 h-[1.25rem]", children: amount }),
-          /* @__PURE__ */ jsx38("span", { className: "text-xs h-[1rem]", children: completedAt })
+        /* @__PURE__ */ jsxs29("div", { className: "shrink-0 flex flex-col text-end", children: [
+          /* @__PURE__ */ jsx40("span", { className: "text-base text-brand-white-500 h-[1.25rem]", children: amount }),
+          /* @__PURE__ */ jsx40("span", { className: "text-xs h-[1rem]", children: completedAt })
         ] })
       ] })
     })
@@ -3804,46 +4120,46 @@ function StatusBadge({
   variant,
   children
 }) {
-  return /* @__PURE__ */ jsxs27("span", { className: "text-[0.625rem] md:text-xs h-[1rem] flex items-center gap-[0.125rem]", children: [
-    variant === "success" ? /* @__PURE__ */ jsxs27("span", { className: "text-brand-success-400 flex items-center gap-[0.125rem]", children: [
-      /* @__PURE__ */ jsx38(Check_default, { className: "size-2 md:size-3" }),
+  return /* @__PURE__ */ jsxs29("span", { className: "text-[0.625rem] md:text-xs h-[1rem] flex items-center gap-[0.125rem]", children: [
+    variant === "success" ? /* @__PURE__ */ jsxs29("span", { className: "text-brand-success-400 flex items-center gap-[0.125rem]", children: [
+      /* @__PURE__ */ jsx40(Check_default, { className: "size-2 md:size-3" }),
       " ",
-      /* @__PURE__ */ jsx38("span", { children: "Success" })
+      /* @__PURE__ */ jsx40("span", { children: "Success" })
     ] }) : null,
-    variant === "refunded" ? /* @__PURE__ */ jsxs27(Fragment9, { children: [
-      /* @__PURE__ */ jsx38(StepBack_default, { strokeWidth: 2, className: "size-2 md:size-3" }),
-      /* @__PURE__ */ jsx38("span", { children: "Refunded" })
+    variant === "refunded" ? /* @__PURE__ */ jsxs29(Fragment9, { children: [
+      /* @__PURE__ */ jsx40(StepBack_default, { strokeWidth: 2, className: "size-2 md:size-3" }),
+      /* @__PURE__ */ jsx40("span", { children: "Refunded" })
     ] }) : null,
-    variant === "error" ? /* @__PURE__ */ jsxs27(Fragment9, { children: [
-      /* @__PURE__ */ jsx38(Alert_default, { className: "size-2 md:size-3 text-brand-danger-500" }),
-      /* @__PURE__ */ jsx38("span", { className: "text-brand-danger-500", children: "Order expired" })
+    variant === "error" ? /* @__PURE__ */ jsxs29(Fragment9, { children: [
+      /* @__PURE__ */ jsx40(Alert_default, { className: "size-2 md:size-3 text-brand-danger-500" }),
+      /* @__PURE__ */ jsx40("span", { className: "text-brand-danger-500", children: "Order expired" })
     ] }) : null,
     variant === "none" ? children : null
   ] });
 }
 function TxList({ children }) {
-  return /* @__PURE__ */ jsx38("ul", { className: "flex flex-col gap-[0.5rem]", children });
+  return /* @__PURE__ */ jsx40("ul", { className: "flex flex-col gap-[0.5rem]", children });
 }
 
 // src/components/molecules/wallet-header.tsx
 import { Slot as Slot10 } from "@radix-ui/react-slot";
 import { cva as cva6 } from "class-variance-authority";
-import { motion as motion5 } from "motion/react";
-import * as React14 from "react";
+import { motion as motion6 } from "motion/react";
+import * as React16 from "react";
 
 // src/components/organisms/assets-collection.tsx
 import * as Tab_ from "@radix-ui/react-tabs";
 
 // src/@/ui/tabs.tsx
 import * as TabsPrimitive from "@radix-ui/react-tabs";
-import { jsx as jsx39 } from "react/jsx-runtime";
+import { jsx as jsx41 } from "react/jsx-runtime";
 function Tabs(_a) {
   var _b = _a, {
     className
   } = _b, props = __objRest(_b, [
     "className"
   ]);
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx41(
     TabsPrimitive.Root,
     __spreadValues({
       "data-slot": "tabs",
@@ -3857,7 +4173,7 @@ function TabsContent(_a) {
   } = _b, props = __objRest(_b, [
     "className"
   ]);
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx41(
     TabsPrimitive.Content,
     __spreadValues({
       "data-slot": "tabs-content",
@@ -3867,12 +4183,12 @@ function TabsContent(_a) {
 }
 
 // src/components/organisms/assets-collection.tsx
-import { jsx as jsx40, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs30 } from "react/jsx-runtime";
 function TabsList2(props) {
-  return /* @__PURE__ */ jsx40("nav", { className: "flex flex-col", children: /* @__PURE__ */ jsx40(Tab_.TabsList, { asChild: true, children: /* @__PURE__ */ jsx40("ul", { className: "flex p-0 bg-transparent gap-3", children: props.children }) }) });
+  return /* @__PURE__ */ jsx42("nav", { className: "flex flex-col", children: /* @__PURE__ */ jsx42(Tab_.TabsList, { asChild: true, children: /* @__PURE__ */ jsx42("ul", { className: "flex p-0 bg-transparent gap-3", children: props.children }) }) });
 }
 function TabItem(props) {
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx42(
     Tab_.TabsTrigger,
     {
       value: props.value,
@@ -3885,7 +4201,7 @@ function AssetValueTrend(props) {
   const { percentage = 0, direction: dir, dollarValue = 0 } = props;
   const isZero = dollarValue === 0;
   const isUp = isZero ? "up" : dir === "up";
-  return /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsxs30(
     "div",
     {
       className: "inline-flex select-none gap-[0.125rem] text-brand-black-100 h-[1rem] text-[0.7rem] font-medium items-center",
@@ -3894,7 +4210,7 @@ function AssetValueTrend(props) {
         "--trend-color": isZero ? "inherit" : !isUp ? "var(--color-brand-danger-500, indigo)" : "var(--color-brand-success-400, cyan)"
       },
       children: [
-        /* @__PURE__ */ jsx40("span", { className: "text-[var(--trend-color)]", children: /* @__PURE__ */ jsx40(
+        /* @__PURE__ */ jsx42("span", { className: "text-[var(--trend-color)]", children: /* @__PURE__ */ jsx42(
           ArrowTriangleBottom_default,
           {
             width: "0.75rem",
@@ -3905,13 +4221,13 @@ function AssetValueTrend(props) {
             )
           }
         ) }),
-        /* @__PURE__ */ jsxs28("span", { className: "flex items-center", children: [
-          /* @__PURE__ */ jsxs28("span", { className: "text-[var(--trend-color)]", children: [
+        /* @__PURE__ */ jsxs30("span", { className: "flex items-center", children: [
+          /* @__PURE__ */ jsxs30("span", { className: "text-[var(--trend-color)]", children: [
             "$",
             dollarValue
           ] }),
           "\xA0",
-          /* @__PURE__ */ jsxs28("span", { className: "text-[var(--trend-base)]", children: [
+          /* @__PURE__ */ jsxs30("span", { className: "text-[var(--trend-base)]", children: [
             "(",
             percentage,
             "%)"
@@ -3928,8 +4244,8 @@ function Balance(props) {
   const { prefix = "$", suffix = "", formatter = currencyFormat } = props;
   const is_zero = props.amount === 0;
   const [int_, fraction] = formatter.format(props.amount).split(".");
-  return /* @__PURE__ */ jsx40("div", { className: "select-none", children: /* @__PURE__ */ jsxs28("span", { className: "text-[2.375rem] font-medium leading-[2.875rem] whitespace-nowrap", children: [
-    /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsx42("div", { className: "select-none", children: /* @__PURE__ */ jsxs30("span", { className: "text-[2.375rem] font-medium leading-[2.875rem] whitespace-nowrap", children: [
+    /* @__PURE__ */ jsxs30(
       "span",
       {
         className: cn(
@@ -3941,11 +4257,11 @@ function Balance(props) {
         ]
       }
     ),
-    /* @__PURE__ */ jsxs28("span", { className: "text-brand-black-100", children: [
+    /* @__PURE__ */ jsxs30("span", { className: "text-brand-black-100", children: [
       ".",
       fraction != null ? fraction : "00"
     ] }),
-    /* @__PURE__ */ jsxs28("span", { className: "text-brand-white-500", children: [
+    /* @__PURE__ */ jsxs30("span", { className: "text-brand-white-500", children: [
       "\xA0",
       suffix
     ] })
@@ -3953,10 +4269,10 @@ function Balance(props) {
 }
 
 // src/components/molecules/wallet-header.tsx
-import { Fragment as Fragment11, jsx as jsx41, jsxs as jsxs29 } from "react/jsx-runtime";
-var WalletHeaderContext = React14.createContext(null);
+import { Fragment as Fragment11, jsx as jsx43, jsxs as jsxs31 } from "react/jsx-runtime";
+var WalletHeaderContext = React16.createContext(null);
 function useWalletHeader() {
-  const context = React14.useContext(WalletHeaderContext);
+  const context = React16.useContext(WalletHeaderContext);
   if (!context) {
     throw new Error("useWalletHeader must be used within a WalletHeader");
   }
@@ -3977,7 +4293,7 @@ var walletHeaderVariants = cva6(
   }
 );
 var globalWalletHeaderState = null;
-var WalletHeader = React14.forwardRef(
+var WalletHeader = React16.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -3995,15 +4311,15 @@ var WalletHeader = React14.forwardRef(
       "children"
     ]);
     const Comp = asChild ? Slot10 : "div";
-    const [show, setShow] = React14.useState(() => {
+    const [show, setShow] = React16.useState(() => {
       return persistOpen && globalWalletHeaderState !== null ? globalWalletHeaderState : defaultOpen;
     });
-    React14.useEffect(() => {
+    React16.useEffect(() => {
       if (persistOpen) {
         globalWalletHeaderState = show;
       }
     }, [show, persistOpen]);
-    return /* @__PURE__ */ jsx41(WalletHeaderContext.Provider, { value: { show, setShow }, children: /* @__PURE__ */ jsx41(
+    return /* @__PURE__ */ jsx43(WalletHeaderContext.Provider, { value: { show, setShow }, children: /* @__PURE__ */ jsx43(
       Comp,
       __spreadProps(__spreadValues({
         ref,
@@ -4016,10 +4332,10 @@ var WalletHeader = React14.forwardRef(
   }
 );
 WalletHeader.displayName = "WalletHeader";
-var WalletConnectedHeader = React14.forwardRef((_a, ref) => {
+var WalletConnectedHeader = React16.forwardRef((_a, ref) => {
   var _b = _a, { className, accounts, children } = _b, props = __objRest(_b, ["className", "accounts", "children"]);
   const { show: open, setShow } = useWalletHeader();
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx43(
     "button",
     __spreadProps(__spreadValues({
       ref,
@@ -4033,9 +4349,9 @@ var WalletConnectedHeader = React14.forwardRef((_a, ref) => {
       ),
       onClick: () => setShow((e) => !e)
     }, props), {
-      children: /* @__PURE__ */ jsxs29("div", { className: "flex w-full gap-2 justify-between items-center", children: [
-        children || /* @__PURE__ */ jsx41(AccountStack, { accounts }),
-        /* @__PURE__ */ jsx41(
+      children: /* @__PURE__ */ jsxs31("div", { className: "flex w-full gap-2 justify-between items-center", children: [
+        children || /* @__PURE__ */ jsx43(AccountStack, { accounts }),
+        /* @__PURE__ */ jsx43(
           IconButton,
           {
             variant: "level_1",
@@ -4044,7 +4360,7 @@ var WalletConnectedHeader = React14.forwardRef((_a, ref) => {
             rounded: "full",
             size: "sm",
             asChild: true,
-            children: /* @__PURE__ */ jsx41("span", { children: /* @__PURE__ */ jsx41(ChevronBottomDown_default, {}) })
+            children: /* @__PURE__ */ jsx43("span", { children: /* @__PURE__ */ jsx43(ChevronBottomDown_default, {}) })
           }
         )
       ] })
@@ -4052,16 +4368,16 @@ var WalletConnectedHeader = React14.forwardRef((_a, ref) => {
   );
 });
 WalletConnectedHeader.displayName = "WalletConnectedHeader";
-var WalletHeaderContent = React14.forwardRef((_a, _ref) => {
+var WalletHeaderContent = React16.forwardRef((_a, _ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
   const { show: open } = useWalletHeader();
-  const containerRef = React14.useRef(null);
-  const parentRef = React14.useRef(null);
+  const containerRef = React16.useRef(null);
+  const parentRef = React16.useRef(null);
   const slideDown = {
     show: { opacity: [0, 0.8, 1] },
     hide: { opacity: [1, 0.25, 0] }
   };
-  React14.useEffect(() => {
+  React16.useEffect(() => {
     const updateHeight = () => {
       if (containerRef.current && parentRef.current) {
         const height = containerRef.current.offsetHeight;
@@ -4116,8 +4432,8 @@ var WalletHeaderContent = React14.forwardRef((_a, _ref) => {
     "onTransitionRun",
     "onTransitionCancel"
   ]);
-  return /* @__PURE__ */ jsx41(
-    motion5.div,
+  return /* @__PURE__ */ jsx43(
+    motion6.div,
     {
       ref: parentRef,
       initial: { height: 0 },
@@ -4125,8 +4441,8 @@ var WalletHeaderContent = React14.forwardRef((_a, _ref) => {
       className: cn("z-10 relative", {
         "pointer-events-none": !open
       }),
-      children: /* @__PURE__ */ jsx41(
-        motion5.div,
+      children: /* @__PURE__ */ jsx43(
+        motion6.div,
         __spreadProps(__spreadValues({
           ref: containerRef,
           initial: { opacity: 0 },
@@ -4145,18 +4461,18 @@ var WalletHeaderContent = React14.forwardRef((_a, _ref) => {
   );
 });
 WalletHeaderContent.displayName = "WalletHeaderContent";
-var AccountStack = React14.forwardRef(
+var AccountStack = React16.forwardRef(
   ({ accounts = [] }, ref) => {
     var _a, _b;
-    return /* @__PURE__ */ jsx41("div", { ref, className: "flex gap-[0.625rem] items-center", children: accounts.length > 0 ? /* @__PURE__ */ jsxs29(React14.Fragment, { children: [
-      /* @__PURE__ */ jsx41("div", { className: "inline-flex -space-x-[0.3125rem]", children: accounts.map((account, index) => /* @__PURE__ */ jsx41(
+    return /* @__PURE__ */ jsx43("div", { ref, className: "flex gap-[0.625rem] items-center", children: accounts.length > 0 ? /* @__PURE__ */ jsxs31(React16.Fragment, { children: [
+      /* @__PURE__ */ jsx43("div", { className: "inline-flex -space-x-[0.3125rem]", children: accounts.map((account, index) => /* @__PURE__ */ jsx43(
         "div",
         {
           style: {
             zIndex: accounts.length - index,
             position: "relative"
           },
-          children: /* @__PURE__ */ jsx41(
+          children: /* @__PURE__ */ jsx43(
             BadgeIcon,
             {
               outline: true,
@@ -4170,15 +4486,15 @@ var AccountStack = React14.forwardRef(
         },
         account.address
       )) }),
-      /* @__PURE__ */ jsxs29("span", { className: "flex flex-col whitespace-nowrap", children: [
-        /* @__PURE__ */ jsx41("span", { className: "text-base font-medium h-[1.25rem] text-brand-white-500", children: accounts.length > 1 ? /* @__PURE__ */ jsxs29(Fragment11, { children: [
+      /* @__PURE__ */ jsxs31("span", { className: "flex flex-col whitespace-nowrap", children: [
+        /* @__PURE__ */ jsx43("span", { className: "text-base font-medium h-[1.25rem] text-brand-white-500", children: accounts.length > 1 ? /* @__PURE__ */ jsxs31(Fragment11, { children: [
           accounts.length,
           " wallets"
-        ] }) : /* @__PURE__ */ jsx41(Fragment11, { children: shortenAccountAddress((_b = (_a = accounts[0]) == null ? void 0 : _a.address) != null ? _b : "") || "--" }) }),
-        /* @__PURE__ */ jsx41("span", { className: "text-xs text-start h-[1rem] font-medium inline-flex items-center gap-[0.125rem] text-brand-black-100", children: "Connected" })
+        ] }) : /* @__PURE__ */ jsx43(Fragment11, { children: shortenAccountAddress((_b = (_a = accounts[0]) == null ? void 0 : _a.address) != null ? _b : "") || "--" }) }),
+        /* @__PURE__ */ jsx43("span", { className: "text-xs text-start h-[1rem] font-medium inline-flex items-center gap-[0.125rem] text-brand-black-100", children: "Connected" })
       ] })
-    ] }) : /* @__PURE__ */ jsxs29("div", { className: "flex items-center gap-[0.625rem] select-none", children: [
-      /* @__PURE__ */ jsx41(
+    ] }) : /* @__PURE__ */ jsxs31("div", { className: "flex items-center gap-[0.625rem] select-none", children: [
+      /* @__PURE__ */ jsx43(
         IconButton,
         {
           disabled: true,
@@ -4186,22 +4502,22 @@ var AccountStack = React14.forwardRef(
           variant: "level_2",
           rounded: "full",
           size: "sm",
-          children: /* @__PURE__ */ jsx41(Wallet_default, { className: "size-5" })
+          children: /* @__PURE__ */ jsx43(Wallet_default, { className: "size-5" })
         }
       ),
-      /* @__PURE__ */ jsx41("p", { className: "text-base font-medium text-brand-white-100", children: "Select an account" })
+      /* @__PURE__ */ jsx43("p", { className: "text-base font-medium text-brand-white-100", children: "Select an account" })
     ] }) });
   }
 );
 AccountStack.displayName = "AccountStack";
-var WalletHeaderTabs = React14.forwardRef((_a, ref) => {
+var WalletHeaderTabs = React16.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ jsx41(Tabs, __spreadProps(__spreadValues({ ref, className: cn("gap-0 pt-3", className) }, props), { children }));
+  return /* @__PURE__ */ jsx43(Tabs, __spreadProps(__spreadValues({ ref, className: cn("gap-0 pt-3", className) }, props), { children }));
 });
 WalletHeaderTabs.displayName = "WalletHeaderTabs";
-var WalletHeaderTabsList = React14.forwardRef((_a, ref) => {
+var WalletHeaderTabsList = React16.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx43(
     TabsList2,
     __spreadProps(__spreadValues({
       ref,
@@ -4212,9 +4528,9 @@ var WalletHeaderTabsList = React14.forwardRef((_a, ref) => {
   );
 });
 WalletHeaderTabsList.displayName = "WalletHeaderTabsList";
-var WalletHeaderTabItem = React14.forwardRef((_a, ref) => {
+var WalletHeaderTabItem = React16.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx43(
     TabItem,
     __spreadProps(__spreadValues({
       ref,
@@ -4228,9 +4544,9 @@ var WalletHeaderTabItem = React14.forwardRef((_a, ref) => {
   );
 });
 WalletHeaderTabItem.displayName = "WalletHeaderTabItem";
-var WalletHeaderTabsContent = React14.forwardRef((_a, ref) => {
+var WalletHeaderTabsContent = React16.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx43(
     TabsContent,
     __spreadProps(__spreadValues({
       ref,
@@ -4241,7 +4557,7 @@ var WalletHeaderTabsContent = React14.forwardRef((_a, ref) => {
   );
 });
 WalletHeaderTabsContent.displayName = "WalletHeaderTabsContent";
-var WalletHeaderContentBlur = React14.forwardRef((_a, ref) => {
+var WalletHeaderContentBlur = React16.forwardRef((_a, ref) => {
   var _b = _a, { className, children, asChild = false } = _b, props = __objRest(_b, ["className", "children", "asChild"]);
   const { show: open, setShow } = useWalletHeader();
   const Comp = asChild ? Slot10 : "div";
@@ -4252,7 +4568,7 @@ var WalletHeaderContentBlur = React14.forwardRef((_a, ref) => {
   const handleKeyDown = (e) => {
     if (["Enter", " "].includes(e.key)) handleClose(e);
   };
-  return /* @__PURE__ */ jsxs29(
+  return /* @__PURE__ */ jsxs31(
     Comp,
     __spreadProps(__spreadValues({
       ref,
@@ -4263,7 +4579,7 @@ var WalletHeaderContentBlur = React14.forwardRef((_a, ref) => {
       )
     }, props), {
       children: [
-        open && /* @__PURE__ */ jsx41(
+        open && /* @__PURE__ */ jsx43(
           "div",
           {
             className: "absolute inset-0 z-10",
@@ -4282,15 +4598,15 @@ var WalletHeaderContentBlur = React14.forwardRef((_a, ref) => {
 WalletHeaderContentBlur.displayName = "WalletHeaderContentBlur";
 
 // src/components/navigation/header.tsx
-import { jsx as jsx42 } from "react/jsx-runtime";
+import { jsx as jsx44 } from "react/jsx-runtime";
 function HeaderGradient() {
-  return /* @__PURE__ */ jsx42("div", { className: "absolute inset-0 h-[3px] bg-gradient-brand-animated" });
+  return /* @__PURE__ */ jsx44("div", { className: "absolute inset-0 h-[3px] bg-gradient-brand-animated" });
 }
 function HeaderContent({
   children,
   className
 }) {
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx44(
     "div",
     {
       className: cn(
@@ -4305,7 +4621,7 @@ function Header({
   children,
   className
 }) {
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx44(
     "header",
     {
       className: cn(
@@ -4318,7 +4634,7 @@ function Header({
 }
 
 // src/components/navigation/tabs.tsx
-import { jsx as jsx43, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs32 } from "react/jsx-runtime";
 function TabAltHeader({
   label,
   isNew,
@@ -4326,7 +4642,7 @@ function TabAltHeader({
   onClick,
   className = ""
 }) {
-  return /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsx45(
     "button",
     {
       type: "button",
@@ -4336,9 +4652,9 @@ function TabAltHeader({
         isActive ? "text-white" : "text-brand-black-100 hover:text-white",
         className
       ),
-      children: /* @__PURE__ */ jsxs30("span", { className: "relative z-10 flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx43("span", { className: "font-medium", children: label }),
-        isNew && /* @__PURE__ */ jsx43("span", { className: "text-brand-warning-500 caption-text absolute top-0 left-[100%] w-max", children: "New" })
+      children: /* @__PURE__ */ jsxs32("span", { className: "relative z-10 flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx45("span", { className: "font-medium", children: label }),
+        isNew && /* @__PURE__ */ jsx45("span", { className: "text-brand-warning-500 caption-text absolute top-0 left-[100%] w-max", children: "New" })
       ] })
     }
   );
@@ -4347,13 +4663,13 @@ function TabAltHeaders({
   children,
   className = ""
 }) {
-  return /* @__PURE__ */ jsx43("div", { className: cn("flex space-x-3 mb-6", className), children });
+  return /* @__PURE__ */ jsx45("div", { className: cn("flex space-x-3 mb-6", className), children });
 }
 function TabAltContent({
   children,
   className = ""
 }) {
-  return /* @__PURE__ */ jsx43("div", { className, children });
+  return /* @__PURE__ */ jsx45("div", { className, children });
 }
 function TabAltPanel({
   id,
@@ -4362,18 +4678,18 @@ function TabAltPanel({
   className = ""
 }) {
   if (activeTab !== id) return null;
-  return /* @__PURE__ */ jsx43("div", { className, children }, id);
+  return /* @__PURE__ */ jsx45("div", { className, children }, id);
 }
 function TabAlt({
   children,
   className = ""
 }) {
-  return /* @__PURE__ */ jsx43("div", { className: cn("w-full", className), children });
+  return /* @__PURE__ */ jsx45("div", { className: cn("w-full", className), children });
 }
 
 // src/components/organisms/settings.tsx
 import { useState as useState7 } from "react";
-import { jsx as jsx44, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs33 } from "react/jsx-runtime";
 var PRESET_SLIPPAGES = ["Auto", "0.25%", "0.5%", "0.75%", "1%"];
 var DEFAULT_TOOLTIP_TEXTS = {
   bridge: {
@@ -4447,13 +4763,13 @@ var Settings = ({
   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: [
+  return /* @__PURE__ */ jsxs33(Modal, { className: "p-4 !h-max", isOpen, onClose, children: [
+    /* @__PURE__ */ jsxs33("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs33("div", { className: "body-1 font-medium text-white max-w-[200px] break-words", children: [
         title,
         " settings"
       ] }),
-      /* @__PURE__ */ jsx44(
+      /* @__PURE__ */ jsx46(
         XIcon_default,
         {
           className: "size-4 cursor-pointer text-brand-black-100 hover:text-white duration-200 transition-colors",
@@ -4461,46 +4777,46 @@ var Settings = ({
         }
       )
     ] }),
-    /* @__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: [
+    /* @__PURE__ */ jsxs33("div", { className: "mt-4", children: [
+      /* @__PURE__ */ jsxs33("div", { className: "flex items-center gap-1 text-brand-black-100", children: [
+        /* @__PURE__ */ jsxs33("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__ */ jsxs33(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__ */ jsxs31("div", { className: "grid grid-cols-3 gap-2 mt-3", children: [
-        PRESET_SLIPPAGES.map((option) => /* @__PURE__ */ jsx44(
+      /* @__PURE__ */ jsxs33("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__ */ jsx44(
+            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__ */ jsx44("p", { className: "body-1 font-medium", children: option })
+                children: /* @__PURE__ */ jsx46("p", { className: "body-1 font-medium", children: option })
               }
             )
           },
           option
         )),
-        /* @__PURE__ */ jsx44(
+        /* @__PURE__ */ jsx46(
           "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(
+            children: /* @__PURE__ */ jsxs33("div", { className: "relative bg-brand-card-100 rounded-[16px]", children: [
+              /* @__PURE__ */ jsx46(
                 Input,
                 {
                   min: 0,
@@ -4515,25 +4831,25 @@ var Settings = ({
                   onKeyDown: handleKeyDown
                 }
               ),
-              /* @__PURE__ */ jsx44("span", { className: "body-1 absolute right-4 top-1/2 -translate-y-1/2 text-brand-black-100", children: "%" })
+              /* @__PURE__ */ jsx46("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: [
+    /* @__PURE__ */ jsxs33("div", { className: "mt-6", children: [
+      /* @__PURE__ */ jsxs33("div", { className: "flex items-center gap-1 text-brand-black-100", children: [
+        /* @__PURE__ */ jsxs33("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__ */ jsxs33(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__ */ jsxs31("div", { className: "relative mt-3", children: [
-        /* @__PURE__ */ jsx44(
+      /* @__PURE__ */ jsxs33("div", { className: "relative mt-3", children: [
+        /* @__PURE__ */ jsx46(
           Input,
           {
             value: customDeadline,
@@ -4546,32 +4862,32 @@ var Settings = ({
             min: 0
           }
         ),
-        /* @__PURE__ */ jsx44("span", { className: "body-1 absolute right-4 top-1/2 -translate-y-1/2 text-brand-black-100", children: "minutes" })
+        /* @__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 jsx45 } from "react/jsx-runtime";
+import { jsx as jsx47 } from "react/jsx-runtime";
 var BridgeSettings = (props) => {
-  return /* @__PURE__ */ jsx45(Settings, __spreadProps(__spreadValues({}, props), { type: "bridge" }));
+  return /* @__PURE__ */ jsx47(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";
+import { jsx as jsx48, jsxs as jsxs34 } from "react/jsx-runtime";
 function Sheet(_a) {
   var props = __objRest(_a, []);
-  return /* @__PURE__ */ jsx46(SheetPrimitive.Root, __spreadValues({ "data-slot": "sheet" }, props));
+  return /* @__PURE__ */ jsx48(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));
+  return /* @__PURE__ */ jsx48(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));
+  return /* @__PURE__ */ jsx48(SheetPrimitive.Portal, __spreadValues({ "data-slot": "sheet-portal" }, props));
 }
 function SheetOverlay(_a) {
   var _b = _a, {
@@ -4579,7 +4895,7 @@ function SheetOverlay(_a) {
   } = _b, props = __objRest(_b, [
     "className"
   ]);
-  return /* @__PURE__ */ jsx46(
+  return /* @__PURE__ */ jsx48(
     SheetPrimitive.Overlay,
     __spreadValues({
       "data-slot": "sheet-overlay",
@@ -4600,9 +4916,9 @@ function SheetContent(_a) {
     "children",
     "side"
   ]);
-  return /* @__PURE__ */ jsxs32(SheetPortal, { children: [
-    /* @__PURE__ */ jsx46(SheetOverlay, {}),
-    /* @__PURE__ */ jsxs32(
+  return /* @__PURE__ */ jsxs34(SheetPortal, { children: [
+    /* @__PURE__ */ jsx48(SheetOverlay, {}),
+    /* @__PURE__ */ jsxs34(
       SheetPrimitive.Content,
       __spreadProps(__spreadValues({
         "data-slot": "sheet-content",
@@ -4617,12 +4933,12 @@ function SheetContent(_a) {
       }, props), {
         children: [
           children,
-          /* @__PURE__ */ jsx46(
+          /* @__PURE__ */ jsx48(
             SheetPrimitive.Close,
             {
               asChild: true,
               className: "absolute top-[1.625rem] -left-10",
-              children: /* @__PURE__ */ jsxs32(
+              children: /* @__PURE__ */ jsxs34(
                 IconButton,
                 {
                   className: "cursor-pointer",
@@ -4630,8 +4946,8 @@ function SheetContent(_a) {
                   rounded: "full",
                   size: "sm",
                   children: [
-                    /* @__PURE__ */ jsx46(ChevronDoubleRight_default, { className: "size-4 text-brand-black-100" }),
-                    /* @__PURE__ */ jsx46("span", { className: "sr-only", children: "Close" })
+                    /* @__PURE__ */ jsx48(ChevronDoubleRight_default, { className: "size-4 text-brand-black-100" }),
+                    /* @__PURE__ */ jsx48("span", { className: "sr-only", children: "Close" })
                   ]
                 }
               )
@@ -4644,7 +4960,7 @@ function SheetContent(_a) {
 }
 function SheetHeader(_a) {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx46(
+  return /* @__PURE__ */ jsx48(
     "div",
     __spreadValues({
       "data-slot": "sheet-header",
@@ -4658,7 +4974,7 @@ function SheetTitle(_a) {
   } = _b, props = __objRest(_b, [
     "className"
   ]);
-  return /* @__PURE__ */ jsx46(
+  return /* @__PURE__ */ jsx48(
     SheetPrimitive.Title,
     __spreadValues({
       "data-slot": "sheet-title",
@@ -4672,7 +4988,7 @@ function SheetDescription(_a) {
   } = _b, props = __objRest(_b, [
     "className"
   ]);
-  return /* @__PURE__ */ jsx46(
+  return /* @__PURE__ */ jsx48(
     SheetPrimitive.Description,
     __spreadValues({
       "data-slot": "sheet-description",
@@ -4683,22 +4999,22 @@ function SheetDescription(_a) {
 
 // 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";
+import { Fragment as Fragment12, jsx as jsx49, jsxs as jsxs35 } from "react/jsx-runtime";
 function HBDrawer(_a) {
   var props = __objRest(_a, []);
-  return /* @__PURE__ */ jsx47(DrawerPrimitive2.Root, __spreadValues({ "data-slot": "hb-drawer" }, props));
+  return /* @__PURE__ */ jsx49(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));
+  return /* @__PURE__ */ jsx49(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));
+  return /* @__PURE__ */ jsx49(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));
+  return /* @__PURE__ */ jsx49(DrawerPrimitive2.Close, __spreadValues({ "data-slot": "hb-drawer-close" }, props));
 }
 function HBDrawerOverlay(_a) {
   var _b = _a, {
@@ -4706,7 +5022,7 @@ function HBDrawerOverlay(_a) {
   } = _b, props = __objRest(_b, [
     "className"
   ]);
-  return /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsx49(
     DrawerPrimitive2.Overlay,
     __spreadValues({
       "data-slot": "hb-drawer-overlay",
@@ -4725,10 +5041,10 @@ function HBDrawerContent(_a) {
     "className",
     "children"
   ]);
-  return /* @__PURE__ */ jsxs33(Fragment12, { children: [
-    /* @__PURE__ */ jsx47(HBDrawerPortal, {}),
-    /* @__PURE__ */ jsx47(HBDrawerOverlay, {}),
-    /* @__PURE__ */ jsxs33(
+  return /* @__PURE__ */ jsxs35(Fragment12, { children: [
+    /* @__PURE__ */ jsx49(HBDrawerPortal, {}),
+    /* @__PURE__ */ jsx49(HBDrawerOverlay, {}),
+    /* @__PURE__ */ jsxs35(
       DrawerPrimitive2.Content,
       __spreadProps(__spreadValues({
         "data-slot": "hb-drawer-content",
@@ -4742,7 +5058,7 @@ function HBDrawerContent(_a) {
         )
       }, 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" }),
+          /* @__PURE__ */ jsx49("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
         ]
       })
@@ -4751,7 +5067,7 @@ function HBDrawerContent(_a) {
 }
 function HBDrawerHeader(_a) {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsx49(
     "div",
     __spreadValues({
       "data-slot": "hb-drawer-header",
@@ -4764,7 +5080,7 @@ function HBDrawerHeader(_a) {
 }
 function HBDrawerFooter(_a) {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsx49(
     "div",
     __spreadValues({
       "data-slot": "hb-drawer-footer",
@@ -4778,7 +5094,7 @@ function HBDrawerTitle(_a) {
   } = _b, props = __objRest(_b, [
     "className"
   ]);
-  return /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsx49(
     DrawerPrimitive2.Title,
     __spreadValues({
       "data-slot": "hb-drawer-title",
@@ -4792,7 +5108,7 @@ function HBDrawerDescription(_a) {
   } = _b, props = __objRest(_b, [
     "className"
   ]);
-  return /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsx49(
     DrawerPrimitive2.Description,
     __spreadValues({
       "data-slot": "hb-drawer-description",
@@ -4802,15 +5118,15 @@ function HBDrawerDescription(_a) {
 }
 
 // src/components/organisms/manage-account.tsx
-import { jsx as jsx48, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs36 } from "react/jsx-runtime";
 function ManageAccounts() {
   console.warn("ManageAccounts is deprecated");
   return null;
 }
 function HeaderChooseProvider() {
-  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(
+  return /* @__PURE__ */ jsxs36(SheetHeader, { className: "p-[1rem] -mx-[1rem]", children: [
+    /* @__PURE__ */ jsxs36("div", { className: "flex items-center gap-[0.625rem] select-none", children: [
+      /* @__PURE__ */ jsx50(
         IconButton,
         {
           disabled: true,
@@ -4818,20 +5134,20 @@ function HeaderChooseProvider() {
           variant: "level_2",
           rounded: "full",
           size: "sm",
-          children: /* @__PURE__ */ jsx48(Wallet_default, { className: "size-5" })
+          children: /* @__PURE__ */ jsx50(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__ */ jsx50(SheetTitle, { className: "text-brand-white-100", children: /* @__PURE__ */ jsx50("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." })
+    /* @__PURE__ */ jsx50(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(
+  return /* @__PURE__ */ jsxs36("div", { className: "p-[1rem] -mx-[1rem]", children: [
+    /* @__PURE__ */ jsxs36("div", { className: "flex items-center gap-[0.625rem] select-none", children: [
+      /* @__PURE__ */ jsx50(
         TokenImage,
         {
           src: image.src,
@@ -4839,15 +5155,15 @@ function HeaderNested(props) {
           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(
+      /* @__PURE__ */ jsx50(SheetTitle, { className: "text-brand-white-100 flex-1", children: /* @__PURE__ */ jsx50("span", { className: "text-base font-medium", children: heading }) }),
+      !hideBackButton && /* @__PURE__ */ jsx50(
         IconButton,
         {
           variant: "level_1",
           rounded: "full",
           size: "sm",
           onClick: onBack,
-          children: /* @__PURE__ */ jsx48(
+          children: /* @__PURE__ */ jsx50(
             StepBack_default,
             {
               width: "1rem",
@@ -4858,7 +5174,7 @@ function HeaderNested(props) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx48(SheetDescription, { className: "sr-only", children: "Choose a wallet provider to connect to our application." })
+    /* @__PURE__ */ jsx50(SheetDescription, { className: "sr-only", children: "Choose a wallet provider to connect to our application." })
   ] });
 }
 function ListSection({
@@ -4866,9 +5182,9 @@ function ListSection({
   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 })
+  return /* @__PURE__ */ jsxs36("div", { className: "flex flex-col gap-y-[0.375rem]", children: [
+    /* @__PURE__ */ jsx50("div", { className: "text-caption text-brand-black-100 select-none font-normal", children: caption }),
+    /* @__PURE__ */ jsx50("div", { className: cn("flex flex-col gap-2", contentClassName), children })
   ] });
 }
 function CWDrawerContent(_a) {
@@ -4880,7 +5196,7 @@ function CWDrawerContent(_a) {
   const isMobile = useIsMobile();
   const viewportHeight = useViewportHeight(isMobile);
   if (isMobile) {
-    return /* @__PURE__ */ jsx48(
+    return /* @__PURE__ */ jsx50(
       HBDrawerContent,
       {
         className: "bg-brand-black-550 rounded-t-[1rem] w-full px-[1rem] border-t border-brand-black-300",
@@ -4891,30 +5207,30 @@ function CWDrawerContent(_a) {
         } : {
           minHeight: "90dvh"
         },
-        children: /* @__PURE__ */ jsx48("div", { className: "flex flex-col flex-1", children })
+        children: /* @__PURE__ */ jsx50("div", { className: "flex flex-col flex-1", children })
       }
     );
   }
-  return /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx50(
     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] px-[1rem] overflow-hidden", children })
+      children: /* @__PURE__ */ jsx50("div", { className: "bg-brand-black-550 flex-1 flex flex-col rounded-[1rem] px-[1rem] overflow-hidden", children })
     })
   );
 }
 
 // src/components/tokens/swap-token-selector.tsx
 import { useRef as useRef3 } from "react";
-import { jsx as jsx49, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs37 } from "react/jsx-runtime";
 var SwapTokenSelector = ({
   isOpen,
   onClose,
   children,
   className
 }) => {
-  return /* @__PURE__ */ jsx49(Modal, { isOpen, onClose, className, children });
+  return /* @__PURE__ */ jsx51(Modal, { isOpen, onClose, className, children });
 };
 var SwapTokenSelectorHeader = ({
   title,
@@ -4922,7 +5238,7 @@ var SwapTokenSelectorHeader = ({
   children,
   className
 }) => {
-  return /* @__PURE__ */ jsxs35(
+  return /* @__PURE__ */ jsxs37(
     "div",
     {
       className: cn(
@@ -4930,9 +5246,9 @@ var SwapTokenSelectorHeader = ({
         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(
+        /* @__PURE__ */ jsxs37("div", { className: "flex items-center justify-between", children: [
+          title && /* @__PURE__ */ jsx51("div", { className: "body-1 font-medium text-white max-w-[200px] break-words", children: title }),
+          onClose && /* @__PURE__ */ jsx51(
             XIcon_default,
             {
               className: "size-4 cursor-pointer text-brand-black-100 hover:text-white duration-200 transition-colors",
@@ -4949,16 +5265,16 @@ var SwapTokenSelectorSearch = ({
   children,
   className
 }) => {
-  return /* @__PURE__ */ jsx49("div", { className: cn("mt-4", className), children });
+  return /* @__PURE__ */ jsx51("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 }) })
+  return /* @__PURE__ */ jsxs37("div", { className: "relative flex-1 flex flex-col min-h-0", children: [
+    /* @__PURE__ */ jsx51(ScrollAwareSeparator, { scrollRef }),
+    /* @__PURE__ */ jsx51(ScrollArea, { ref: scrollRef, className: "h-full", children: /* @__PURE__ */ jsx51("div", { className: cn("px-6 pb-6 space-y-4", className), children }) })
   ] });
 };
 var SwapTokenSelectorSection = ({
@@ -4966,16 +5282,16 @@ var SwapTokenSelectorSection = ({
   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 })
+  return /* @__PURE__ */ jsxs37("div", { className: cn("flex flex-col", className), children: [
+    title && /* @__PURE__ */ jsx51("p", { className: "text-caption text-brand-black-100 mb-2", children: title }),
+    /* @__PURE__ */ jsx51("div", { className: "space-y-2", children })
   ] });
 };
 var SwapTokenSelectorEmpty = ({
   children,
   className
 }) => {
-  return /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsx51(
     "div",
     {
       className: cn(
@@ -4996,7 +5312,7 @@ var SwapTokenItem = ({
   amount,
   usdValue
 }) => {
-  return /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsx51(
     "div",
     {
       className: cn(
@@ -5004,15 +5320,15 @@ var SwapTokenItem = ({
         isActive && "animated-gradient-border",
         className
       ),
-      children: /* @__PURE__ */ jsxs35(
+      children: /* @__PURE__ */ jsxs37(
         "button",
         {
           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(
+            /* @__PURE__ */ jsxs37("div", { className: "flex items-center text-start gap-3", children: [
+              /* @__PURE__ */ jsx51(
                 BadgeIcon,
                 {
                   src: token.image,
@@ -5021,14 +5337,14 @@ var SwapTokenItem = ({
                   badgeAlt: network.name
                 }
               ),
-              /* @__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 }),
+              /* @__PURE__ */ jsxs37("div", { className: "flex flex-col gap-[2px] items-start", children: [
+                /* @__PURE__ */ jsx51("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__ */ jsxs37("div", { className: "flex flex-col items-end gap-[2px]", children: [
+              /* @__PURE__ */ jsx51("p", { className: "body-1 font-medium text-white", children: amount }),
+              /* @__PURE__ */ jsx51("p", { className: "text-caption text-brand-black-100", children: usdValue })
             ] })
           ]
         }
@@ -5040,18 +5356,18 @@ var SwapTokenItem = ({
 // src/@/ui/dropdown-menu.tsx
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
-import { jsx as jsx50, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs38 } from "react/jsx-runtime";
 function DropdownMenu(_a) {
   var props = __objRest(_a, []);
-  return /* @__PURE__ */ jsx50(DropdownMenuPrimitive.Root, __spreadValues({ "data-slot": "dropdown-menu" }, props));
+  return /* @__PURE__ */ jsx52(DropdownMenuPrimitive.Root, __spreadValues({ "data-slot": "dropdown-menu" }, props));
 }
 function DropdownMenuPortal(_a) {
   var props = __objRest(_a, []);
-  return /* @__PURE__ */ jsx50(DropdownMenuPrimitive.Portal, __spreadValues({ "data-slot": "dropdown-menu-portal" }, props));
+  return /* @__PURE__ */ jsx52(DropdownMenuPrimitive.Portal, __spreadValues({ "data-slot": "dropdown-menu-portal" }, props));
 }
 function DropdownMenuTrigger(_a) {
   var props = __objRest(_a, []);
-  return /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsx52(
     DropdownMenuPrimitive.Trigger,
     __spreadValues({
       "data-slot": "dropdown-menu-trigger"
@@ -5066,7 +5382,7 @@ function DropdownMenuContent(_a) {
     "className",
     "sideOffset"
   ]);
-  return /* @__PURE__ */ jsx50(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsx52(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx52(
     DropdownMenuPrimitive.Content,
     __spreadValues({
       "data-slot": "dropdown-menu-content",
@@ -5080,7 +5396,7 @@ function DropdownMenuContent(_a) {
 }
 function DropdownMenuGroup(_a) {
   var props = __objRest(_a, []);
-  return /* @__PURE__ */ jsx50(DropdownMenuPrimitive.Group, __spreadValues({ "data-slot": "dropdown-menu-group" }, props));
+  return /* @__PURE__ */ jsx52(DropdownMenuPrimitive.Group, __spreadValues({ "data-slot": "dropdown-menu-group" }, props));
 }
 function DropdownMenuItem(_a) {
   var _b = _a, {
@@ -5092,7 +5408,7 @@ function DropdownMenuItem(_a) {
     "inset",
     "variant"
   ]);
-  return /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsx52(
     DropdownMenuPrimitive.Item,
     __spreadValues({
       "data-slot": "dropdown-menu-item",
@@ -5115,7 +5431,7 @@ function DropdownMenuCheckboxItem(_a) {
     "children",
     "checked"
   ]);
-  return /* @__PURE__ */ jsxs36(
+  return /* @__PURE__ */ jsxs38(
     DropdownMenuPrimitive.CheckboxItem,
     __spreadProps(__spreadValues({
       "data-slot": "dropdown-menu-checkbox-item",
@@ -5126,7 +5442,7 @@ function DropdownMenuCheckboxItem(_a) {
       checked
     }, props), {
       children: [
-        /* @__PURE__ */ jsx50("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx50(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx50(CheckIcon, { className: "size-4" }) }) }),
+        /* @__PURE__ */ jsx52("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx52(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx52(CheckIcon, { className: "size-4" }) }) }),
         children
       ]
     })
@@ -5134,7 +5450,7 @@ function DropdownMenuCheckboxItem(_a) {
 }
 function DropdownMenuRadioGroup(_a) {
   var props = __objRest(_a, []);
-  return /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsx52(
     DropdownMenuPrimitive.RadioGroup,
     __spreadValues({
       "data-slot": "dropdown-menu-radio-group"
@@ -5149,7 +5465,7 @@ function DropdownMenuRadioItem(_a) {
     "className",
     "children"
   ]);
-  return /* @__PURE__ */ jsxs36(
+  return /* @__PURE__ */ jsxs38(
     DropdownMenuPrimitive.RadioItem,
     __spreadProps(__spreadValues({
       "data-slot": "dropdown-menu-radio-item",
@@ -5159,7 +5475,7 @@ function DropdownMenuRadioItem(_a) {
       )
     }, props), {
       children: [
-        /* @__PURE__ */ jsx50("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx50(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx50(CircleIcon, { className: "size-2 fill-current" }) }) }),
+        /* @__PURE__ */ jsx52("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx52(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx52(CircleIcon, { className: "size-2 fill-current" }) }) }),
         children
       ]
     })
@@ -5173,7 +5489,7 @@ function DropdownMenuLabel(_a) {
     "className",
     "inset"
   ]);
-  return /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsx52(
     DropdownMenuPrimitive.Label,
     __spreadValues({
       "data-slot": "dropdown-menu-label",
@@ -5191,7 +5507,7 @@ function DropdownMenuSeparator(_a) {
   } = _b, props = __objRest(_b, [
     "className"
   ]);
-  return /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsx52(
     DropdownMenuPrimitive.Separator,
     __spreadValues({
       "data-slot": "dropdown-menu-separator",
@@ -5205,7 +5521,7 @@ function DropdownMenuShortcut(_a) {
   } = _b, props = __objRest(_b, [
     "className"
   ]);
-  return /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsx52(
     "span",
     __spreadValues({
       "data-slot": "dropdown-menu-shortcut",
@@ -5218,7 +5534,7 @@ function DropdownMenuShortcut(_a) {
 }
 function DropdownMenuSub(_a) {
   var props = __objRest(_a, []);
-  return /* @__PURE__ */ jsx50(DropdownMenuPrimitive.Sub, __spreadValues({ "data-slot": "dropdown-menu-sub" }, props));
+  return /* @__PURE__ */ jsx52(DropdownMenuPrimitive.Sub, __spreadValues({ "data-slot": "dropdown-menu-sub" }, props));
 }
 function DropdownMenuSubTrigger(_a) {
   var _b = _a, {
@@ -5230,7 +5546,7 @@ function DropdownMenuSubTrigger(_a) {
     "inset",
     "children"
   ]);
-  return /* @__PURE__ */ jsxs36(
+  return /* @__PURE__ */ jsxs38(
     DropdownMenuPrimitive.SubTrigger,
     __spreadProps(__spreadValues({
       "data-slot": "dropdown-menu-sub-trigger",
@@ -5242,7 +5558,7 @@ function DropdownMenuSubTrigger(_a) {
     }, props), {
       children: [
         children,
-        /* @__PURE__ */ jsx50(ChevronRightIcon, { className: "ml-auto size-4" })
+        /* @__PURE__ */ jsx52(ChevronRightIcon, { className: "ml-auto size-4" })
       ]
     })
   );
@@ -5253,7 +5569,7 @@ function DropdownMenuSubContent(_a) {
   } = _b, props = __objRest(_b, [
     "className"
   ]);
-  return /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsx52(
     DropdownMenuPrimitive.SubContent,
     __spreadValues({
       "data-slot": "dropdown-menu-sub-content",
@@ -5267,14 +5583,14 @@ function DropdownMenuSubContent(_a) {
 
 // src/@/ui/popover.tsx
 import * as PopoverPrimitive from "@radix-ui/react-popover";
-import { jsx as jsx51 } from "react/jsx-runtime";
+import { jsx as jsx53 } from "react/jsx-runtime";
 function Popover(_a) {
   var props = __objRest(_a, []);
-  return /* @__PURE__ */ jsx51(PopoverPrimitive.Root, __spreadValues({ "data-slot": "popover" }, props));
+  return /* @__PURE__ */ jsx53(PopoverPrimitive.Root, __spreadValues({ "data-slot": "popover" }, props));
 }
 function PopoverTrigger(_a) {
   var props = __objRest(_a, []);
-  return /* @__PURE__ */ jsx51(PopoverPrimitive.Trigger, __spreadValues({ "data-slot": "popover-trigger" }, props));
+  return /* @__PURE__ */ jsx53(PopoverPrimitive.Trigger, __spreadValues({ "data-slot": "popover-trigger" }, props));
 }
 function PopoverContent(_a) {
   var _b = _a, {
@@ -5286,7 +5602,7 @@ function PopoverContent(_a) {
     "align",
     "sideOffset"
   ]);
-  return /* @__PURE__ */ jsx51(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsx53(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx53(
     PopoverPrimitive.Content,
     __spreadValues({
       "data-slot": "popover-content",
@@ -5301,13 +5617,13 @@ function PopoverContent(_a) {
 }
 function PopoverAnchor(_a) {
   var props = __objRest(_a, []);
-  return /* @__PURE__ */ jsx51(PopoverPrimitive.Anchor, __spreadValues({ "data-slot": "popover-anchor" }, props));
+  return /* @__PURE__ */ jsx53(PopoverPrimitive.Anchor, __spreadValues({ "data-slot": "popover-anchor" }, props));
 }
 
 // src/@/ui/badge.tsx
 import { Slot as Slot11 } from "@radix-ui/react-slot";
 import { cva as cva7 } from "class-variance-authority";
-import { jsx as jsx52 } from "react/jsx-runtime";
+import { jsx as jsx54 } from "react/jsx-runtime";
 var badgeVariants = cva7(
   "inline-flex font-semibold whitespace-nowrap items-center justify-center rounded-full px-2 py-1 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
   {
@@ -5340,7 +5656,7 @@ function Badge(_a) {
     "asChild"
   ]);
   const Comp = asChild ? Slot11 : "span";
-  return /* @__PURE__ */ jsx52(
+  return /* @__PURE__ */ jsx54(
     Comp,
     __spreadValues({
       "data-slot": "badge",
@@ -5443,6 +5759,12 @@ export {
   Summary,
   SummaryValues,
   SwapForm,
+  SwapReviewCopyAddressButton,
+  SwapReviewItem,
+  SwapReviewItemAddress,
+  SwapReviewRoot,
+  SwapReviewSeperator,
+  SwapReviewSeperatorStatus,
   SwapTokenButton,
   SwapTokenItem,
   SwapTokenSelector,
@@ -5462,6 +5784,10 @@ export {
   TabsList2 as TabsList,
   TagButton,
   Text,
+  TimelineAltItem,
+  TimelineAltList,
+  TimelineAltListGroup,
+  TimelineAltRoot,
   TimelineItem,
   TimelineList,
   TimelineListGroup,