@hyperbridge/ui 0.0.9 → 0.0.11

package/dist/index.d.mts

@@ -259,7 +259,7 @@ type Props$1 = PercentageProps & {
         balance: React__default.JSX.Element;
         address: string;
         amount: string;
-        usdValue: string | number;
+        secondaryAmount: React__default.ReactNode;
         token: {
             image: string;
             symbol: string;
@@ -267,8 +267,8 @@ type Props$1 = PercentageProps & {
     };
     receiver: {
         address: string;
-        amount: string | number;
-        usdValue: string | number;
+        amount: React__default.ReactNode;
+        secondaryAmount: React__default.ReactNode;
         network: Omit<Network, "group">;
         estimatedTime?: string;
     };

package/dist/index.mjs

@@ -685,7 +685,7 @@ function SwapForm({
                         className: "border-none ring-0 focus-visible:ring-0 focus-visible:ring-offset-0 text-[48px] leading-[1.2] h-[58px] p-0 text-white placeholder:text-brand-black-100 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none disabled:opacity-50 !rounded-none"
                       }
                     ),
-                    /* @__PURE__ */ jsx10("div", { className: "w-[170px] pl-3 py-[13px]", children: /* @__PURE__ */ jsx10(
+                    /* @__PURE__ */ jsx10("div", { className: "w-[170px] pl-0 py-[13px]", children: /* @__PURE__ */ jsx10(
                       SwapTokenButton,
                       {
                         network: sender.token.network,
@@ -805,7 +805,7 @@ function SwapForm({
                         className: "border-none ring-0 focus-visible:ring-0 focus-visible:ring-offset-0 text-[48px] leading-[1.2] h-[58px] p-0 text-white placeholder:text-brand-black-100 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none disabled:opacity-50 !rounded-none"
                       }
                     ),
-                    /* @__PURE__ */ jsx10("div", { className: "w-[170px] pl-3 py-[13px]", children: /* @__PURE__ */ jsx10(
+                    /* @__PURE__ */ jsx10("div", { className: "w-[170px] pl-0 py-[13px]", children: /* @__PURE__ */ jsx10(
                       SwapTokenButton,
                       {
                         network: receiver.token.network,
@@ -839,28 +839,17 @@ function SwapForm({
   );
 }
 
-// src/components/images/token-image.tsx
-import { Image as Image3 } from "@unpic/react";
-import { jsx as jsx11 } from "react/jsx-runtime";
-function TokenImage(props) {
-  return /* @__PURE__ */ jsx11(
-    Image3,
-    {
-      src: props.src,
-      alt: props.alt,
-      layout: "constrained",
-      className: cn("shrink-0 object-cover rounded-full", props.className),
-      width: 20,
-      aspectRatio: 1
-    }
-  );
-}
+// src/components/form/bridge-form.tsx
+import { useState as useState5 } from "react";
+
+// src/@/ui/dialog.tsx
+import * as DialogPrimitive from "@radix-ui/react-dialog";
 
 // src/components/atoms/smooth-corners.tsx
 import { Slot as Slot5 } from "@radix-ui/react-slot";
 import React2 from "react";
 import { cva as cva5 } from "class-variance-authority";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var SmoothCornersSingleton = {
   activated: false,
   promise: null,
@@ -900,7 +889,7 @@ function SmoothCorners(props) {
       );
     });
   }, []);
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx11(
     Slot5,
     {
       className: cn(
@@ -913,8 +902,157 @@ function SmoothCorners(props) {
   );
 }
 
+// src/@/ui/dialog.tsx
+import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+function Dialog(_a) {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ jsx12(DialogPrimitive.Root, __spreadValues({ "data-slot": "dialog" }, props));
+}
+function DialogTrigger(_a) {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ jsx12(DialogPrimitive.Trigger, __spreadValues({ "data-slot": "dialog-trigger" }, props));
+}
+function DialogPortal(_a) {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ jsx12(DialogPrimitive.Portal, __spreadValues({ "data-slot": "dialog-portal" }, props));
+}
+function DialogClose(_a) {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ jsx12(DialogPrimitive.Close, __spreadValues({ "data-slot": "dialog-close" }, props));
+}
+function DialogOverlay(_a) {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx12(
+    DialogPrimitive.Overlay,
+    __spreadValues({
+      "data-slot": "dialog-overlay",
+      className: cn(
+        "data-[state=open]:animate-in backdrop-blur-xs data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 tile-bg",
+        className
+      )
+    }, props)
+  );
+}
+function DialogContent(_a) {
+  var _b = _a, {
+    className,
+    children,
+    showCloseButton = true
+  } = _b, props = __objRest(_b, [
+    "className",
+    "children",
+    "showCloseButton"
+  ]);
+  return /* @__PURE__ */ jsxs8(DialogPortal, { "data-slot": "dialog-portal", children: [
+    /* @__PURE__ */ jsx12(DialogOverlay, {}),
+    /* @__PURE__ */ jsx12(SmoothCorners, { children: /* @__PURE__ */ jsxs8(
+      DialogPrimitive.Content,
+      __spreadProps(__spreadValues({
+        "data-slot": "dialog-content",
+        className: cn(
+          "bg-brand-black-600 text-brand-black-100 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 pt-4 p-6 shadow-lg duration-200 sm:max-w-[28rem]",
+          className
+        )
+      }, props), {
+        children: [
+          children,
+          showCloseButton && /* @__PURE__ */ jsxs8(
+            DialogPrimitive.Close,
+            {
+              "data-slot": "dialog-close",
+              className: "ring-offset-background w-[calc(32rem/16)] inline-flex items-center justify-center !rounded-full text-brand-black-100 aspect-square focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+              children: [
+                /* @__PURE__ */ jsx12(XIcon_default, { className: "size-4" }),
+                /* @__PURE__ */ jsx12("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          )
+        ]
+      })
+    ) })
+  ] });
+}
+function DialogHeader(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx12(
+    "div",
+    __spreadValues({
+      "data-slot": "dialog-header",
+      className: cn(
+        "flex flex-col justify-center px-6 py-[calc(18rem/16)] gap-2 sm:text-left min-h-[calc(64rem/16)] items-start -mt-6 -mx-6",
+        className
+      )
+    }, props)
+  );
+}
+function DialogFooter(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx12(
+    "div",
+    __spreadValues({
+      "data-slot": "dialog-footer",
+      className: cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )
+    }, props)
+  );
+}
+function DialogTitle(_a) {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx12(
+    DialogPrimitive.Title,
+    __spreadValues({
+      "data-slot": "dialog-title",
+      className: cn(
+        "text-[calc(20rem/16)] leading-[calc(28rem/16)] font-medium text-brand-white-500",
+        className
+      )
+    }, props)
+  );
+}
+function DialogDescription(_a) {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx12(
+    DialogPrimitive.Description,
+    __spreadValues({
+      "data-slot": "dialog-description",
+      className: cn("text-muted-foreground text-sm", className)
+    }, props)
+  );
+}
+
+// src/components/images/token-image.tsx
+import { Image as Image3 } from "@unpic/react";
+import { jsx as jsx13 } from "react/jsx-runtime";
+function TokenImage(props) {
+  return /* @__PURE__ */ jsx13(
+    Image3,
+    {
+      src: props.src,
+      alt: props.alt,
+      layout: "constrained",
+      className: cn("shrink-0 object-cover rounded-full", props.className),
+      width: 20,
+      aspectRatio: 1
+    }
+  );
+}
+
 // src/components/molecules/network-switcher.tsx
-import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
 var NetworkSwitcher = ({
   from,
   to,
@@ -922,8 +1060,8 @@ var NetworkSwitcher = ({
   onSourceClick,
   onDestinationClick
 }) => {
-  return /* @__PURE__ */ jsxs8("div", { className: "relative flex w-full max-w-[440px] gap-2", children: [
-    /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsxs9("div", { className: "relative flex w-full max-w-[440px] gap-2", children: [
+    /* @__PURE__ */ jsx14(
       NetworkSwitcherButton,
       {
         label: "From",
@@ -932,7 +1070,7 @@ var NetworkSwitcher = ({
         children: from.name
       }
     ),
-    /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsx14(
       NetworkSwitcherButton,
       {
         label: "To",
@@ -941,30 +1079,30 @@ var NetworkSwitcher = ({
         children: to.name
       }
     ),
-    /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsx14(
       Button,
       {
         type: "button",
         onClick: onNetworkInvert,
         className: "size-6 rounded-[7.5px] p-0 bg-brand-black-600 flex items-center justify-center absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 hover:scale-110 transition-all",
         "aria-label": "Switch networks",
-        children: /* @__PURE__ */ jsx13("div", { className: "size-[19.2px] rounded-[6px] bg-brand-black-500 flex items-center justify-center", children: /* @__PURE__ */ jsx13(ArrowRight_default, { className: "text-brand-black-100 size-3" }) })
+        children: /* @__PURE__ */ jsx14("div", { className: "size-[19.2px] rounded-[6px] bg-brand-black-500 flex items-center justify-center", children: /* @__PURE__ */ jsx14(ArrowRight_default, { className: "text-brand-black-100 size-3" }) })
       }
     )
   ] });
 };
 function NetworkSwitcherButton(props) {
   const _a = props, { image, label } = _a, _props = __objRest(_a, ["image", "label"]);
-  return /* @__PURE__ */ jsx13(SmoothCorners, { children: /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx14(SmoothCorners, { children: /* @__PURE__ */ jsx14(
     "button",
     __spreadProps(__spreadValues({}, _props), {
       type: "button",
       className: "bg-brand-black-500 select-none rounded-[16px] py-[10px] px-3 w-[49%] cursor-pointer hover:bg-brand-black-300 duration-200 transition-all",
-      children: /* @__PURE__ */ jsxs8("span", { className: "flex gap-3 items-center", children: [
-        /* @__PURE__ */ jsx13(TokenImage, { className: "size-8", src: image.src, alt: image.alt }),
-        /* @__PURE__ */ jsxs8("span", { className: "flex flex-col items-start", children: [
-          /* @__PURE__ */ jsx13("span", { className: "text-caption font-medium text-brand-black-100", children: label }),
-          /* @__PURE__ */ jsx13("span", { className: "text-body text-white font-medium", children: props.children })
+      children: /* @__PURE__ */ jsxs9("span", { className: "flex gap-3 items-center", children: [
+        /* @__PURE__ */ jsx14(TokenImage, { className: "size-8", src: image.src, alt: image.alt }),
+        /* @__PURE__ */ jsxs9("span", { className: "flex flex-col items-start", children: [
+          /* @__PURE__ */ jsx14("span", { className: "text-caption font-medium text-brand-black-100", children: label }),
+          /* @__PURE__ */ jsx14("span", { className: "text-body text-white font-medium", children: props.children })
         ] })
       ] })
     })
@@ -1105,10 +1243,10 @@ var animationPresets = {
 
 // src/@/ui/drawer.tsx
 import { Drawer as DrawerPrimitive } from "vaul";
-import { Fragment, jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
 function Drawer(_a) {
   var props = __objRest(_a, []);
-  return /* @__PURE__ */ jsx14(DrawerPrimitive.Root, __spreadValues({ "data-slot": "drawer" }, props));
+  return /* @__PURE__ */ jsx15(DrawerPrimitive.Root, __spreadValues({ "data-slot": "drawer" }, props));
 }
 function DrawerOverlay(_a) {
   var _b = _a, {
@@ -1116,7 +1254,7 @@ function DrawerOverlay(_a) {
   } = _b, props = __objRest(_b, [
     "className"
   ]);
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     DrawerPrimitive.Overlay,
     __spreadValues({
       "data-slot": "drawer-overlay",
@@ -1135,9 +1273,9 @@ function DrawerContent(_a) {
     "className",
     "children"
   ]);
-  return /* @__PURE__ */ jsxs9(Fragment, { children: [
-    /* @__PURE__ */ jsx14(DrawerOverlay, {}),
-    /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs10(Fragment, { children: [
+    /* @__PURE__ */ jsx15(DrawerOverlay, {}),
+    /* @__PURE__ */ jsxs10(
       DrawerPrimitive.Content,
       __spreadProps(__spreadValues({
         "data-slot": "drawer-content",
@@ -1151,7 +1289,7 @@ function DrawerContent(_a) {
         )
       }, props), {
         children: [
-          /* @__PURE__ */ jsx14("div", { className: "bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" }),
+          /* @__PURE__ */ jsx15("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
         ]
       })
@@ -1160,14 +1298,14 @@ function DrawerContent(_a) {
 }
 
 // src/components/molecules/modal.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var Modal = (props) => {
   const { isOpen, children, onClose } = props;
   const isMobile = useIsMobile();
   if (isMobile) {
-    return /* @__PURE__ */ jsx15(Drawer, { open: isOpen, onOpenChange: onClose, children: /* @__PURE__ */ jsx15(DrawerContent, { className: "bg-brand-black-550 border-brand-black-300 min-h-[90dvh]", children }) });
+    return /* @__PURE__ */ jsx16(Drawer, { open: isOpen, onOpenChange: onClose, children: /* @__PURE__ */ jsx16(DrawerContent, { className: "bg-brand-black-550 border-brand-black-300 min-h-[90dvh]", children }) });
   }
-  return /* @__PURE__ */ jsx15(DestkopModal, __spreadValues({}, props));
+  return /* @__PURE__ */ jsx16(DestkopModal, __spreadValues({}, props));
 };
 function DestkopModal(props) {
   const {
@@ -1191,7 +1329,7 @@ function DestkopModal(props) {
       document.removeEventListener("keydown", handleEscapeKey);
     };
   }, [isOpen, onClose]);
-  return /* @__PURE__ */ jsx15(AnimatePresence, { mode: "wait", children: isOpen && /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(AnimatePresence, { mode: "wait", children: isOpen && /* @__PURE__ */ jsx16(
     motion.div,
     {
       "data-modal": "true",
@@ -1252,7 +1390,7 @@ var sortItems = (items, sortFn) => {
 
 // src/components/molecules/empty-state.tsx
 import React3 from "react";
-import { Fragment as Fragment2, jsx as jsx16 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx17 } from "react/jsx-runtime";
 var ContextDefault = {
   isEmpty: true
 };
@@ -1261,10 +1399,10 @@ function useContext() {
   const context = React3.useContext(EmptyStateCtx);
   return isSSR() ? ContextDefault : context;
 }
-var EmptyStateContent = React3.forwardRef(function Content(props, ref) {
+var EmptyStateContent = React3.forwardRef(function Content2(props, ref) {
   const { isEmpty } = useContext();
   if (!isEmpty) return null;
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     "div",
     __spreadProps(__spreadValues({}, props), {
       ref,
@@ -1273,7 +1411,7 @@ var EmptyStateContent = React3.forwardRef(function Content(props, ref) {
   );
 });
 var EmptyStateTitle = React3.forwardRef(function ESTitle(props, ref) {
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     "h6",
     __spreadProps(__spreadValues({
       ref
@@ -1283,7 +1421,7 @@ var EmptyStateTitle = React3.forwardRef(function ESTitle(props, ref) {
   );
 });
 var EmptyStateDescription = React3.forwardRef(function ESDescription(props, ref) {
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     "div",
     __spreadProps(__spreadValues({
       ref
@@ -1295,12 +1433,12 @@ var EmptyStateDescription = React3.forwardRef(function ESDescription(props, ref)
 function EmptyStateConceal(props) {
   const { isEmpty } = useContext();
   if (isEmpty) return null;
-  return /* @__PURE__ */ jsx16(Fragment2, { children: props.children });
+  return /* @__PURE__ */ jsx17(Fragment2, { children: props.children });
 }
 function EmptyState(props) {
   const { isEmpty = true, children } = props;
-  if (isSSR()) return /* @__PURE__ */ jsx16(Fragment2, { children });
-  return /* @__PURE__ */ jsx16(EmptyStateCtx.Provider, { value: { isEmpty }, children });
+  if (isSSR()) return /* @__PURE__ */ jsx17(Fragment2, { children });
+  return /* @__PURE__ */ jsx17(EmptyStateCtx.Provider, { value: { isEmpty }, children });
 }
 
 // src/components/network/network-selector.tsx
@@ -1308,7 +1446,7 @@ import React5 from "react";
 
 // src/components/molecules/scroll-aware-area.tsx
 import React4 from "react";
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 function ScrollAwareSeparator(props) {
   const _a = props, { scrollRef } = _a, props_ = __objRest(_a, ["scrollRef"]);
   const [showHeaderBorder, setShowHeaderBorder] = React4.useState(false);
@@ -1334,7 +1472,7 @@ function ScrollAwareSeparator(props) {
       resizeObserver.disconnect();
     };
   }, [scrollRef]);
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18(
     "div",
     __spreadProps(__spreadValues({}, props_), {
       className: cn(
@@ -1347,7 +1485,7 @@ function ScrollAwareSeparator(props) {
 }
 
 // src/components/network/network-selector.tsx
-import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
 var NetworkSelector = ({
   title,
   availableNetworks,
@@ -1374,41 +1512,41 @@ var NetworkSelector = ({
   };
   const renderNetworkItem = (network, isAvailable) => {
     const isSelected = (selectedNetwork == null ? void 0 : selectedNetwork.name) === network.name;
-    return /* @__PURE__ */ jsx18(
+    return /* @__PURE__ */ jsx19(
       NetworkSelectionItem,
       {
         network,
         isActive: isSelected,
         variant: isAvailable ? "default" : "secondary",
         onClick: () => isAvailable && handleNetworkSelect(network),
-        SecondaryContent: /* @__PURE__ */ jsx18(Button2, { variant: "message", size: "sm", children: /* @__PURE__ */ jsx18("span", { className: "text-caption font-medium", children: "Connect" }) })
+        SecondaryContent: /* @__PURE__ */ jsx19(Button2, { variant: "message", size: "sm", children: /* @__PURE__ */ jsx19("span", { className: "text-caption font-medium", children: "Connect" }) })
       }
     );
   };
   const hasNoResults = searchQuery.trim() && filteredAvailableNetworks.length === 0 && filteredUnavailableNetworks.length === 0;
   const isEmpty = availableNetworks.length === 0 && unavailableNetworks.length === 0;
-  return /* @__PURE__ */ jsxs10(Modal, { isOpen, onClose, children: [
-    /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(Modal, { isOpen, onClose, children: [
+    /* @__PURE__ */ jsxs11(
       "div",
       {
         className: cn(
           "bg-brand-black-550 px-6 pt-6 pb-4 transition-all duration-200"
         ),
         children: [
-          /* @__PURE__ */ jsxs10("div", { className: "flex items-center justify-between", children: [
-            /* @__PURE__ */ jsx18("div", { className: "body-1 font-medium text-white max-w-[200px] break-words", children: title != null ? title : "Select chain" }),
-            /* @__PURE__ */ jsx18(
+          /* @__PURE__ */ jsxs11("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsx19("div", { className: "body-1 font-medium text-white max-w-[200px] break-words", children: title != null ? title : "Select chain" }),
+            /* @__PURE__ */ jsx19(
               IconButton,
               {
                 size: "xs",
                 onClick: onClose,
                 variant: "unset",
                 className: "text-brand-black-100 hover:text-white",
-                children: /* @__PURE__ */ jsx18(XIcon_default, {})
+                children: /* @__PURE__ */ jsx19(XIcon_default, {})
               }
             )
           ] }),
-          /* @__PURE__ */ jsx18("div", { className: "mt-4", children: /* @__PURE__ */ jsx18(
+          /* @__PURE__ */ jsx19("div", { className: "mt-4", children: /* @__PURE__ */ jsx19(
             SearchInput,
             {
               className: "h-10",
@@ -1420,45 +1558,41 @@ var NetworkSelector = ({
         ]
       }
     ),
-    /* @__PURE__ */ jsxs10(EmptyState, { isEmpty, children: [
-      /* @__PURE__ */ jsxs10(EmptyStateConceal, { children: [
-        /* @__PURE__ */ jsx18(
+    /* @__PURE__ */ jsxs11(EmptyState, { isEmpty, children: [
+      /* @__PURE__ */ jsxs11(EmptyStateConceal, { children: [
+        /* @__PURE__ */ jsx19(
           ScrollAwareSeparator,
           {
             scrollRef: scrollableRef,
             className: "data-[active=true]:border-brand-black-300/70 data-[active=false]:border-brand-black-300/0"
           }
         ),
-        /* @__PURE__ */ jsxs10(
+        /* @__PURE__ */ jsxs11(
           "div",
           {
             ref: scrollableRef,
             className: "px-6 pb-6 overflow-y-auto h-full space-y-4 no-scrollbar",
             children: [
-              filteredAvailableNetworks.length > 0 && /* @__PURE__ */ jsxs10("div", { children: [
-                /* @__PURE__ */ jsx18("p", { className: "text-caption text-brand-black-100", children: "Available" }),
-                /* @__PURE__ */ jsx18("div", { className: "mt-[6px] space-y-2", children: filteredAvailableNetworks.map(
-                  (network) => renderNetworkItem(network, true)
-                ) })
+              filteredAvailableNetworks.length > 0 && /* @__PURE__ */ jsxs11("div", { children: [
+                /* @__PURE__ */ jsx19("p", { className: "text-caption text-brand-black-100", children: "Available" }),
+                /* @__PURE__ */ jsx19("div", { className: "mt-[6px] space-y-2", children: filteredAvailableNetworks.map((network) => /* @__PURE__ */ jsx19(React5.Fragment, { children: renderNetworkItem(network, true) }, network.name)) })
               ] }),
-              filteredUnavailableNetworks.length > 0 && /* @__PURE__ */ jsxs10("div", { children: [
-                /* @__PURE__ */ jsx18("p", { className: "text-caption text-brand-black-100", children: "Not available" }),
-                /* @__PURE__ */ jsx18("div", { className: "mt-[6px] space-y-2", children: filteredUnavailableNetworks.map(
-                  (network) => renderNetworkItem(network, false)
-                ) })
+              filteredUnavailableNetworks.length > 0 && /* @__PURE__ */ jsxs11("div", { children: [
+                /* @__PURE__ */ jsx19("p", { className: "text-caption text-brand-black-100", children: "Not available" }),
+                /* @__PURE__ */ jsx19("div", { className: "mt-[6px] space-y-2", children: filteredUnavailableNetworks.map((network) => /* @__PURE__ */ jsx19(React5.Fragment, { children: "renderNetworkItem(network, false)," }, network.name)) })
               ] }),
-              hasNoResults && /* @__PURE__ */ jsx18("div", { className: "text-center py-8 h-full flex items-center justify-center", children: /* @__PURE__ */ jsxs10("p", { className: "text-caption text-brand-black-100", children: [
+              hasNoResults && /* @__PURE__ */ jsx19("div", { className: "text-center py-8 h-full flex items-center justify-center", children: /* @__PURE__ */ jsxs11("p", { className: "text-caption text-brand-black-100", children: [
                 "No results found for",
                 " ",
-                /* @__PURE__ */ jsx18("span", { className: "text-white font-medium", children: searchQuery })
+                /* @__PURE__ */ jsx19("span", { className: "text-white font-medium", children: searchQuery })
               ] }) })
             ]
           }
         )
       ] }),
-      /* @__PURE__ */ jsx18(EmptyStateContent, { className: "text-center py-8 h-full flex items-center justify-center", children: /* @__PURE__ */ jsxs10("div", { children: [
-        /* @__PURE__ */ jsx18("p", { className: "body-2 text-brand-black-100 mb-1", children: "No networks available" }),
-        /* @__PURE__ */ jsx18("p", { className: "text-caption text-brand-black-100", children: "Networks will appear here when available" })
+      /* @__PURE__ */ jsx19(EmptyStateContent, { className: "text-center py-8 h-full flex items-center justify-center", children: /* @__PURE__ */ jsxs11("div", { children: [
+        /* @__PURE__ */ jsx19("p", { className: "body-2 text-brand-black-100 mb-1", children: "No networks available" }),
+        /* @__PURE__ */ jsx19("p", { className: "text-caption text-brand-black-100", children: "Networks will appear here when available" })
       ] }) })
     ] })
   ] });
@@ -1477,7 +1611,7 @@ function NetworkSelectionItem(props) {
   ]);
   const buttonRef = React5.useRef(null);
   const is_default_mode = variant === "default";
-  const buttonContent = /* @__PURE__ */ jsxs10(
+  const buttonContent = /* @__PURE__ */ jsxs11(
     "div",
     {
       className: cn(
@@ -1495,7 +1629,7 @@ function NetworkSelectionItem(props) {
         return (_a2 = buttonRef.current) == null ? void 0 : _a2.click();
       },
       children: [
-        /* @__PURE__ */ jsxs10(
+        /* @__PURE__ */ jsxs11(
           "button",
           __spreadProps(__spreadValues({
             type: "button",
@@ -1504,20 +1638,20 @@ function NetworkSelectionItem(props) {
           }, PROPS), {
             disabled,
             children: [
-              /* @__PURE__ */ jsx18(TokenImage, { className: "size-8", src: network.image, alt: network.name }),
-              /* @__PURE__ */ jsxs10("div", { className: "flex flex-col items-start", children: [
-                /* @__PURE__ */ jsx18("div", { className: "body-2 font-medium text-white", children: network.name }),
-                /* @__PURE__ */ jsx18("div", { className: "text-caption font-medium text-brand-black-100", children: network.group })
+              /* @__PURE__ */ jsx19(TokenImage, { className: "size-8", src: network.image, alt: network.name }),
+              /* @__PURE__ */ jsxs11("div", { className: "flex flex-col items-start", children: [
+                /* @__PURE__ */ jsx19("div", { className: "body-2 font-medium text-white", children: network.name }),
+                /* @__PURE__ */ jsx19("div", { className: "text-caption font-medium text-brand-black-100", children: network.group })
               ] })
             ]
           })
         ),
-        is_default_mode ? /* @__PURE__ */ jsx18(IconButton, { className: "cursor-pointer group", variant: "secondary", children: isActive ? /* @__PURE__ */ jsx18(Check_default, { className: "size-4 text-white" }) : /* @__PURE__ */ jsx18(Circle_default, { className: "size-4 text-brand-black-100 group-hover:text-white duration-200 transition-colors" }) }) : null,
+        is_default_mode ? /* @__PURE__ */ jsx19(IconButton, { className: "cursor-pointer group", variant: "secondary", children: isActive ? /* @__PURE__ */ jsx19(Check_default, { className: "size-4 text-white" }) : /* @__PURE__ */ jsx19(Circle_default, { className: "size-4 text-brand-black-100 group-hover:text-white duration-200 transition-colors" }) }) : null,
         variant === "secondary" ? props.SecondaryContent : null
       ]
     }
   );
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx19(
     "div",
     {
       className: cn(
@@ -1535,7 +1669,7 @@ import React6 from "react";
 
 // src/@/ui/scroll-area.tsx
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
-import { jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
 function ScrollArea(_a) {
   var _b = _a, {
     className,
@@ -1544,14 +1678,14 @@ function ScrollArea(_a) {
     "className",
     "children"
   ]);
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs12(
     ScrollAreaPrimitive.Root,
     __spreadProps(__spreadValues({
       "data-slot": "scroll-area",
       className: cn("relative", className)
     }, props), {
       children: [
-        /* @__PURE__ */ jsx19(
+        /* @__PURE__ */ jsx20(
           ScrollAreaPrimitive.Viewport,
           {
             "data-slot": "scroll-area-viewport",
@@ -1559,8 +1693,8 @@ function ScrollArea(_a) {
             children
           }
         ),
-        /* @__PURE__ */ jsx19(ScrollBar, {}),
-        /* @__PURE__ */ jsx19(ScrollAreaPrimitive.Corner, {})
+        /* @__PURE__ */ jsx20(ScrollBar, {}),
+        /* @__PURE__ */ jsx20(ScrollAreaPrimitive.Corner, {})
       ]
     })
   );
@@ -1573,7 +1707,7 @@ function ScrollBar(_a) {
     "className",
     "orientation"
   ]);
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx20(
     ScrollAreaPrimitive.ScrollAreaScrollbar,
     __spreadProps(__spreadValues({
       "data-slot": "scroll-area-scrollbar",
@@ -1585,7 +1719,7 @@ function ScrollBar(_a) {
         className
       )
     }, props), {
-      children: /* @__PURE__ */ jsx19(
+      children: /* @__PURE__ */ jsx20(
         ScrollAreaPrimitive.ScrollAreaThumb,
         {
           "data-slot": "scroll-area-thumb",
@@ -1597,7 +1731,7 @@ function ScrollBar(_a) {
 }
 
 // src/components/tokens/token-selector.tsx
-import { Fragment as Fragment3, jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
 var tokenSortFn = (a, b) => {
   const aHasAmount = a.amount > 0;
   const bHasAmount = b.amount > 0;
@@ -1666,14 +1800,14 @@ var TokenSelector = ({
   const renderTokenItem = (token) => {
     const isSelected = (selectedToken == null ? void 0 : selectedToken.symbol) === token.symbol && (selectedToken == null ? void 0 : selectedToken.address) === token.address;
     const isAvailable = isTokenAvailable(token);
-    return /* @__PURE__ */ jsx20(
+    return /* @__PURE__ */ jsx21(
       TokenSelectionItem,
       {
         token,
         isActive: isSelected,
         isAvailable,
         onClick: () => handleTokenSelect(token),
-        AddWalletButton: /* @__PURE__ */ jsx20(
+        AddWalletButton: /* @__PURE__ */ jsx21(
           Button,
           {
             variant: "message",
@@ -1682,7 +1816,7 @@ var TokenSelector = ({
               e.stopPropagation();
               handleAddToWallet(token);
             },
-            children: /* @__PURE__ */ jsx20("span", { className: "text-caption font-medium", children: "Add to wallet" })
+            children: /* @__PURE__ */ jsx21("span", { className: "text-caption font-medium", children: "Add to wallet" })
           }
         )
       },
@@ -1692,8 +1826,8 @@ var TokenSelector = ({
   const hasSearchResults = searchQuery.trim() && searchResults.length > 0;
   const hasNoResults = searchQuery.trim() && searchResults.length === 0;
   const isEmpty = availableTokens.length === 0 && allTokens.length === 0;
-  return /* @__PURE__ */ jsxs12(Modal, { isOpen, onClose, children: [
-    /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs13(Modal, { isOpen, onClose, children: [
+    /* @__PURE__ */ jsxs13(
       "div",
       {
         className: cn(
@@ -1701,9 +1835,9 @@ var TokenSelector = ({
           showHeaderBorder && "border-b border-brand-black-300/70"
         ),
         children: [
-          /* @__PURE__ */ jsxs12("div", { className: "flex items-center justify-between", children: [
-            /* @__PURE__ */ jsx20("div", { className: "body-1 font-medium text-white max-w-[200px] break-words", children: title != null ? title : "Select token" }),
-            /* @__PURE__ */ jsx20(
+          /* @__PURE__ */ jsxs13("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsx21("div", { className: "body-1 font-medium text-white max-w-[200px] break-words", children: title != null ? title : "Select token" }),
+            /* @__PURE__ */ jsx21(
               XIcon_default,
               {
                 className: "size-4 cursor-pointer text-brand-black-100 hover:text-white duration-200 transition-colors",
@@ -1711,7 +1845,7 @@ var TokenSelector = ({
               }
             )
           ] }),
-          /* @__PURE__ */ jsx20("div", { className: "mt-4", children: /* @__PURE__ */ jsx20(
+          /* @__PURE__ */ jsx21("div", { className: "mt-4", children: /* @__PURE__ */ jsx21(
             SearchInput,
             {
               className: "h-10",
@@ -1723,28 +1857,28 @@ var TokenSelector = ({
         ]
       }
     ),
-    /* @__PURE__ */ jsx20(ScrollAwareSeparator, { scrollRef: scrollableRef }),
-    /* @__PURE__ */ jsx20(ScrollArea, { ref: scrollableRef, className: "h-full", children: /* @__PURE__ */ jsxs12("div", { className: "px-6 pb-6 space-y-4", children: [
-      hasSearchResults && /* @__PURE__ */ jsxs12("div", { children: [
-        /* @__PURE__ */ jsx20("p", { className: "text-caption text-brand-black-100", children: "Search results" }),
-        /* @__PURE__ */ jsx20("div", { className: "mt-[6px] space-y-2", children: searchResults.map(renderTokenItem) })
+    /* @__PURE__ */ jsx21(ScrollAwareSeparator, { scrollRef: scrollableRef }),
+    /* @__PURE__ */ jsx21(ScrollArea, { ref: scrollableRef, className: "h-full", children: /* @__PURE__ */ jsxs13("div", { className: "px-6 pb-6 space-y-4", children: [
+      hasSearchResults && /* @__PURE__ */ jsxs13("div", { children: [
+        /* @__PURE__ */ jsx21("p", { className: "text-caption text-brand-black-100", children: "Search results" }),
+        /* @__PURE__ */ jsx21("div", { className: "mt-[6px] space-y-2", children: searchResults.map(renderTokenItem) })
       ] }),
-      !searchQuery.trim() && sortedAvailableTokens.length > 0 && /* @__PURE__ */ jsxs12("div", { children: [
-        /* @__PURE__ */ jsx20("p", { className: "text-caption text-brand-black-100", children: "Your tokens" }),
-        /* @__PURE__ */ jsx20("div", { className: "mt-[6px] space-y-2", children: sortedAvailableTokens.map(renderTokenItem) })
+      !searchQuery.trim() && sortedAvailableTokens.length > 0 && /* @__PURE__ */ jsxs13("div", { children: [
+        /* @__PURE__ */ jsx21("p", { className: "text-caption text-brand-black-100", children: "Your tokens" }),
+        /* @__PURE__ */ jsx21("div", { className: "mt-[6px] space-y-2", children: sortedAvailableTokens.map(renderTokenItem) })
       ] }),
-      !searchQuery.trim() && sortedAllTokens.length > 0 && /* @__PURE__ */ jsxs12("div", { children: [
-        /* @__PURE__ */ jsx20("p", { className: "text-caption text-brand-black-100", children: "All tokens" }),
-        /* @__PURE__ */ jsx20("div", { className: "mt-[6px] space-y-2", children: sortedAllTokens.map(renderTokenItem) })
+      !searchQuery.trim() && sortedAllTokens.length > 0 && /* @__PURE__ */ jsxs13("div", { children: [
+        /* @__PURE__ */ jsx21("p", { className: "text-caption text-brand-black-100", children: "All tokens" }),
+        /* @__PURE__ */ jsx21("div", { className: "mt-[6px] space-y-2", children: sortedAllTokens.map(renderTokenItem) })
       ] }),
-      hasNoResults && /* @__PURE__ */ jsx20("div", { className: "text-center py-8 h-full flex items-center justify-center", children: /* @__PURE__ */ jsxs12("p", { className: "text-caption text-brand-black-100", children: [
+      hasNoResults && /* @__PURE__ */ jsx21("div", { className: "text-center py-8 h-full flex items-center justify-center", children: /* @__PURE__ */ jsxs13("p", { className: "text-caption text-brand-black-100", children: [
         "No results found for",
         " ",
-        /* @__PURE__ */ jsx20("span", { className: "text-white font-medium", children: searchQuery })
+        /* @__PURE__ */ jsx21("span", { className: "text-white font-medium", children: searchQuery })
       ] }) }),
-      isEmpty && /* @__PURE__ */ jsx20("div", { className: "text-center py-8 h-full flex items-center justify-center", children: /* @__PURE__ */ jsxs12("div", { children: [
-        /* @__PURE__ */ jsx20("p", { className: "body-2 text-brand-black-100 mb-1", children: "No tokens available" }),
-        /* @__PURE__ */ jsx20("p", { className: "text-caption text-brand-black-100", children: "Tokens will appear here when available" })
+      isEmpty && /* @__PURE__ */ jsx21("div", { className: "text-center py-8 h-full flex items-center justify-center", children: /* @__PURE__ */ jsxs13("div", { children: [
+        /* @__PURE__ */ jsx21("p", { className: "body-2 text-brand-black-100 mb-1", children: "No tokens available" }),
+        /* @__PURE__ */ jsx21("p", { className: "text-caption text-brand-black-100", children: "Tokens will appear here when available" })
       ] }) })
     ] }) })
   ] });
@@ -1753,7 +1887,7 @@ function TokenSelectionItem(props) {
   const _a = props, { token, isAvailable, isActive, AddWalletButton } = _a, PROPS = __objRest(_a, ["token", "isAvailable", "isActive", "AddWalletButton"]);
   const hasAmount = token.amount > 0;
   const buttonRef = React6.useRef(null);
-  const buttonContent = /* @__PURE__ */ jsxs12(
+  const buttonContent = /* @__PURE__ */ jsxs13(
     "div",
     {
       className: "cursor-pointer flex items-center justify-between w-full bg-brand-black-500 hover:bg-brand-black-300 duration-200 transition-colors p-3 rounded-[16px]",
@@ -1766,7 +1900,7 @@ function TokenSelectionItem(props) {
         return (_a2 = buttonRef.current) == null ? void 0 : _a2.click();
       },
       children: [
-        /* @__PURE__ */ jsxs12(
+        /* @__PURE__ */ jsxs13(
           "button",
           __spreadProps(__spreadValues({
             ref: buttonRef
@@ -1775,10 +1909,10 @@ function TokenSelectionItem(props) {
             className: "flex items-center text-start gap-3",
             disabled: !isAvailable || props.disabled,
             children: [
-              /* @__PURE__ */ jsx20(TokenImage, { src: token.image, alt: token.symbol, className: "size-6" }),
-              /* @__PURE__ */ jsxs12("div", { className: "flex flex-col gap-[2px] items-start", children: [
-                /* @__PURE__ */ jsx20("p", { className: "body-1 font-medium text-white", children: token.name }),
-                /* @__PURE__ */ jsxs12("p", { className: "text-caption text-brand-black-100", children: [
+              /* @__PURE__ */ jsx21(TokenImage, { src: token.image, alt: token.symbol, className: "size-6" }),
+              /* @__PURE__ */ jsxs13("div", { className: "flex flex-col gap-[2px] items-start", children: [
+                /* @__PURE__ */ jsx21("p", { className: "body-1 font-medium text-white", children: token.name }),
+                /* @__PURE__ */ jsxs13("p", { className: "text-caption text-brand-black-100", children: [
                   token.symbol,
                   " \u2022 ",
                   token.address
@@ -1787,14 +1921,14 @@ function TokenSelectionItem(props) {
             ]
           })
         ),
-        /* @__PURE__ */ jsx20("div", { className: "flex flex-col items-end gap-[2px]", children: isAvailable ? hasAmount ? /* @__PURE__ */ jsxs12(Fragment3, { children: [
-          /* @__PURE__ */ jsx20("p", { className: "body-1 font-medium text-white", children: token.amount.toFixed(6) }),
-          /* @__PURE__ */ jsx20("p", { className: "text-caption text-brand-black-100", children: token.usdValue })
-        ] }) : /* @__PURE__ */ jsx20("p", { className: "body-1 font-medium text-brand-black-100", children: "0" }) : AddWalletButton })
+        /* @__PURE__ */ jsx21("div", { className: "flex flex-col items-end gap-[2px]", children: isAvailable ? hasAmount ? /* @__PURE__ */ jsxs13(Fragment3, { children: [
+          /* @__PURE__ */ jsx21("p", { className: "body-1 font-medium text-white", children: token.amount.toFixed(6) }),
+          /* @__PURE__ */ jsx21("p", { className: "text-caption text-brand-black-100", children: token.usdValue })
+        ] }) : /* @__PURE__ */ jsx21("p", { className: "body-1 font-medium text-brand-black-100", children: "0" }) : AddWalletButton })
       ]
     }
   );
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     "div",
     {
       className: cn(
@@ -1806,20 +1940,17 @@ function TokenSelectionItem(props) {
   );
 }
 
-// src/components/form/bridge-form.tsx
-import { useState as useState5 } from "react";
-
 // src/components/form/bridge-input.tsx
 import React8 from "react";
 
 // src/components/input/input.tsx
 import * as React7 from "react";
-import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
 var Input2 = React7.forwardRef((_a, ref) => {
   var _b = _a, { className, label, error, helperText, id } = _b, props = __objRest(_b, ["className", "label", "error", "helperText", "id"]);
   const inputId = id || React7.useId();
-  return /* @__PURE__ */ jsxs13("div", { className: "space-y-2", children: [
-    label && /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsxs14("div", { className: "space-y-2", children: [
+    label && /* @__PURE__ */ jsx22(
       "label",
       {
         htmlFor: inputId,
@@ -1827,7 +1958,7 @@ var Input2 = React7.forwardRef((_a, ref) => {
         children: label
       }
     ),
-    /* @__PURE__ */ jsx21(
+    /* @__PURE__ */ jsx22(
       Input,
       __spreadValues({
         ref,
@@ -1838,7 +1969,7 @@ var Input2 = React7.forwardRef((_a, ref) => {
         )
       }, props)
     ),
-    (error || helperText) && /* @__PURE__ */ jsx21(
+    (error || helperText) && /* @__PURE__ */ jsx22(
       "p",
       {
         className: cn(
@@ -1853,7 +1984,7 @@ var Input2 = React7.forwardRef((_a, ref) => {
 Input2.displayName = "Input";
 
 // src/components/form/bridge-input.tsx
-import { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs15 } from "react/jsx-runtime";
 function BridgeInput(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i;
   const {
@@ -1873,7 +2004,7 @@ function BridgeInput(props) {
   const formatPercentageLabel = (percentage2) => {
     return percentage2 === 100 ? "Max" : `${percentage2}%`;
   };
-  return /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs15(
     "div",
     {
       className: cn(
@@ -1881,7 +2012,7 @@ function BridgeInput(props) {
         isConnected && "border-dashed-wide"
       ),
       children: [
-        /* @__PURE__ */ jsx22(
+        /* @__PURE__ */ jsx23(
           "section",
           {
             "data-testid": "send-section",
@@ -1890,23 +2021,23 @@ function BridgeInput(props) {
               isConnected && "bg-brand-black-200",
               error ? "bg-brand-danger-500" : "bridge-form-border"
             ),
-            children: /* @__PURE__ */ jsxs14("div", { className: "bg-brand-black-500 rounded-[14.5px] h-full relative px-3", children: [
-              /* @__PURE__ */ jsxs14("div", { className: "w-full flex justify-between h-10 items-center", children: [
-                /* @__PURE__ */ jsx22("div", { className: "w-1/2", children: /* @__PURE__ */ jsx22("p", { className: "text-caption text-brand-black-100 font-medium", children: "Send" }) }),
-                /* @__PURE__ */ jsx22("div", { className: "w-1/2", children: /* @__PURE__ */ jsxs14("div", { className: "text-caption text-brand-black-100 font-medium text-right flex items-center gap-1 justify-end", children: [
-                  /* @__PURE__ */ jsx22("span", { className: "max-w-[100px] truncate", children: sender.address ? sender.address : "Balance" }),
+            children: /* @__PURE__ */ jsxs15("div", { className: "bg-brand-black-500 rounded-[14.5px] h-full relative px-3", children: [
+              /* @__PURE__ */ jsxs15("div", { className: "w-full flex justify-between h-10 items-center", children: [
+                /* @__PURE__ */ jsx23("div", { className: "w-1/2", children: /* @__PURE__ */ jsx23("p", { className: "text-caption text-brand-black-100 font-medium", children: "Send" }) }),
+                /* @__PURE__ */ jsx23("div", { className: "w-1/2", children: /* @__PURE__ */ jsxs15("div", { className: "text-caption text-brand-black-100 font-medium text-right flex items-center gap-1 justify-end", children: [
+                  /* @__PURE__ */ jsx23("span", { className: "max-w-[100px] truncate", children: sender.address ? sender.address : "Balance" }),
                   " ",
-                  /* @__PURE__ */ jsx22(
+                  /* @__PURE__ */ jsx23(
                     "span",
                     {
                       className: cn(
                         "max-w-[100px] truncate",
                         props.hasError ? "text-brand-danger-500" : "text-white"
                       ),
-                      children: /* @__PURE__ */ jsx22(
+                      children: /* @__PURE__ */ jsx23(
                         React8.Suspense,
                         {
-                          fallback: /* @__PURE__ */ jsx22(
+                          fallback: /* @__PURE__ */ jsx23(
                             "div",
                             {
                               className: cn(
@@ -1922,8 +2053,8 @@ function BridgeInput(props) {
                   )
                 ] }) })
               ] }),
-              /* @__PURE__ */ jsxs14("div", { className: "flex h-[70px] items-center", children: [
-                /* @__PURE__ */ jsx22(
+              /* @__PURE__ */ jsxs15("div", { className: "flex h-[70px] items-center", children: [
+                /* @__PURE__ */ jsx23(
                   Input2,
                   {
                     min: 0,
@@ -1940,21 +2071,18 @@ function BridgeInput(props) {
                     }
                   }
                 ),
-                /* @__PURE__ */ jsx22("div", { className: "w-[170px] pl-3 py-[13px] flex justify-end", children: props.TokenChangeButton })
+                /* @__PURE__ */ jsx23("div", { className: "w-[170px] pl-3 py-[13px] flex justify-end", children: props.TokenChangeButton })
               ] }),
-              /* @__PURE__ */ jsxs14("div", { className: "flex justify-between h-10", children: [
-                /* @__PURE__ */ jsxs14(
+              /* @__PURE__ */ jsxs15("div", { className: "flex justify-between h-10", children: [
+                /* @__PURE__ */ jsx23(
                   "div",
                   {
                     "data-testid": "sender-usd-value",
                     className: "flex items-center text-caption text-brand-black-100 font-medium min-h-6 hover:text-white duration-200 transition-colors",
-                    children: [
-                      "$",
-                      isLoading ? /* @__PURE__ */ jsx22("div", { className: "w-8 h-3 bg-brand-black-200 animate-pulse rounded ml-1" }) : sender.usdValue
-                    ]
+                    children: isLoading ? /* @__PURE__ */ jsx23("div", { className: "w-8 h-3 bg-brand-black-200 animate-pulse rounded ml-1" }) : sender.secondaryAmount
                   }
                 ),
-                isConnected && /* @__PURE__ */ jsx22("div", { className: "flex gap-[6px] pt-1", children: percentage.options.map((percent_value) => /* @__PURE__ */ jsx22(
+                isConnected && /* @__PURE__ */ jsx23("div", { className: "flex gap-[6px] pt-1", children: percentage.options.map((percent_value) => /* @__PURE__ */ jsx23(
                   Button2,
                   {
                     type: "button",
@@ -1974,17 +2102,17 @@ function BridgeInput(props) {
             ] })
           }
         ),
-        /* @__PURE__ */ jsx22(
+        /* @__PURE__ */ jsx23(
           "section",
           {
             className: cn(
               "grid transition-all duration-200 ease-out",
               isConnected ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
             ),
-            children: /* @__PURE__ */ jsx22("div", { className: "overflow-hidden min-h-0", children: /* @__PURE__ */ jsxs14("div", { className: "p-3", children: [
-              /* @__PURE__ */ jsxs14("div", { className: "flex justify-between", children: [
-                /* @__PURE__ */ jsx22("p", { className: "text-caption text-brand-black-100 font-medium w-1/2", children: "Receive" }),
-                !props.EditDestAddressTrigger ? /* @__PURE__ */ jsx22("span", { className: "text-caption text-brand-black-100 font-medium text-right flex items-center justify-end w-1/2", children: /* @__PURE__ */ jsx22("span", { className: "max-w-[100px] truncate", children: receiver.address }) }) : /* @__PURE__ */ jsx22(props.EditDestAddressTrigger, { asChild: true, children: /* @__PURE__ */ jsxs14(
+            children: /* @__PURE__ */ jsx23("div", { className: "overflow-hidden min-h-0", children: /* @__PURE__ */ jsxs15("div", { className: "p-3", children: [
+              /* @__PURE__ */ jsxs15("div", { className: "flex justify-between", children: [
+                /* @__PURE__ */ jsx23("p", { className: "text-caption text-brand-black-100 font-medium w-1/2", children: "Receive" }),
+                !props.EditDestAddressTrigger ? /* @__PURE__ */ jsx23("span", { className: "text-caption text-brand-black-100 font-medium text-right flex items-center justify-end w-1/2", children: /* @__PURE__ */ jsx23("span", { className: "max-w-[100px] truncate", children: receiver.address }) }) : /* @__PURE__ */ jsx23(props.EditDestAddressTrigger, { asChild: true, children: /* @__PURE__ */ jsxs15(
                   "button",
                   {
                     type: "button",
@@ -1992,29 +2120,29 @@ function BridgeInput(props) {
                     "aria-label": "Edit receiver address",
                     className: "cursor-pointer flex !gap-1.5 !text-caption text-brand-black-100 font-medium text-right items-center justify-end w-1/2",
                     children: [
-                      /* @__PURE__ */ jsx22("span", { className: "max-w-[100px] truncate", children: receiver.address }),
-                      /* @__PURE__ */ jsx22(
+                      /* @__PURE__ */ jsx23("span", { className: "max-w-[100px] truncate", children: receiver.address }),
+                      /* @__PURE__ */ jsx23(
                         "span",
                         {
                           "aria-label": "Edit address",
                           className: "cursor-pointer text-foreground hover:scale-110 transition-transform disabled:opacity-50",
-                          children: /* @__PURE__ */ jsx22(Pen_default, { className: "size-[0.875rem]" })
+                          children: /* @__PURE__ */ jsx23(Pen_default, { className: "size-[0.875rem]" })
                         }
                       )
                     ]
                   }
                 ) })
               ] }),
-              /* @__PURE__ */ jsx22(
+              /* @__PURE__ */ jsx23(
                 "div",
                 {
                   className: cn(
                     "grid transition-all duration-200 ease-out",
                     sender.amount ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
                   ),
-                  children: /* @__PURE__ */ jsxs14("div", { className: "overflow-hidden min-h-0", children: [
-                    /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-2 py-2", children: [
-                      /* @__PURE__ */ jsx22(
+                  children: /* @__PURE__ */ jsxs15("div", { className: "overflow-hidden min-h-0", children: [
+                    /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-2 py-2", children: [
+                      /* @__PURE__ */ jsx23(
                         BadgeIcon,
                         {
                           src: (_b = (_a = sender.token) == null ? void 0 : _a.image) != null ? _b : "",
@@ -2023,21 +2151,18 @@ function BridgeInput(props) {
                           badgeSrc: (_h = (_g = receiver.network) == null ? void 0 : _g.image) != null ? _h : ""
                         }
                       ),
-                      /* @__PURE__ */ jsx22("span", { className: "text-[20px] leading-[1] font-medium text-brand-black-100", children: isLoading ? /* @__PURE__ */ jsx22("div", { className: "w-16 h-5 bg-brand-black-200 animate-pulse rounded" }) : `${receiver.amount} ${((_i = sender.token) == null ? void 0 : _i.symbol) || ""}` })
+                      /* @__PURE__ */ jsx23("span", { className: "text-[20px] leading-[1] font-medium text-brand-black-100", children: isLoading ? /* @__PURE__ */ jsx23("div", { className: "w-16 h-5 bg-brand-black-200 animate-pulse rounded" }) : `${receiver.amount} ${((_i = sender.token) == null ? void 0 : _i.symbol) || ""}` })
                     ] }),
-                    /* @__PURE__ */ jsxs14("div", { className: "flex justify-between pt-1", children: [
-                      /* @__PURE__ */ jsxs14(
+                    /* @__PURE__ */ jsxs15("div", { className: "flex justify-between pt-1", children: [
+                      /* @__PURE__ */ jsx23(
                         "div",
                         {
                           "data-testid": "receiver-usd-value",
                           className: "flex items-center text-caption text-brand-black-100 font-medium",
-                          children: [
-                            "$",
-                            isLoading ? /* @__PURE__ */ jsx22("div", { className: "w-8 h-3 bg-brand-black-200 animate-pulse rounded ml-1" }) : receiver.usdValue
-                          ]
+                          children: isLoading ? /* @__PURE__ */ jsx23("div", { className: "w-8 h-3 bg-brand-black-200 animate-pulse rounded ml-1" }) : receiver.secondaryAmount
                         }
                       ),
-                      isConnected && /* @__PURE__ */ jsx22("div", { className: "text-brand-black-100 text-caption font-medium", children: isLoading ? /* @__PURE__ */ jsx22("div", { className: "w-12 h-3 bg-brand-black-200 animate-pulse rounded" }) : receiver.estimatedTime })
+                      isConnected && /* @__PURE__ */ jsx23("div", { className: "text-brand-black-100 text-caption font-medium", children: isLoading ? /* @__PURE__ */ jsx23("div", { className: "w-12 h-3 bg-brand-black-200 animate-pulse rounded" }) : receiver.estimatedTime })
                     ] })
                   ] })
                 }
@@ -2050,139 +2175,6 @@ function BridgeInput(props) {
   );
 }
 
-// src/@/ui/dialog.tsx
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { jsx as jsx23, jsxs as jsxs15 } from "react/jsx-runtime";
-function Dialog(_a) {
-  var props = __objRest(_a, []);
-  return /* @__PURE__ */ jsx23(DialogPrimitive.Root, __spreadValues({ "data-slot": "dialog" }, props));
-}
-function DialogTrigger(_a) {
-  var props = __objRest(_a, []);
-  return /* @__PURE__ */ jsx23(DialogPrimitive.Trigger, __spreadValues({ "data-slot": "dialog-trigger" }, props));
-}
-function DialogPortal(_a) {
-  var props = __objRest(_a, []);
-  return /* @__PURE__ */ jsx23(DialogPrimitive.Portal, __spreadValues({ "data-slot": "dialog-portal" }, props));
-}
-function DialogClose(_a) {
-  var props = __objRest(_a, []);
-  return /* @__PURE__ */ jsx23(DialogPrimitive.Close, __spreadValues({ "data-slot": "dialog-close" }, props));
-}
-function DialogOverlay(_a) {
-  var _b = _a, {
-    className
-  } = _b, props = __objRest(_b, [
-    "className"
-  ]);
-  return /* @__PURE__ */ jsx23(
-    DialogPrimitive.Overlay,
-    __spreadValues({
-      "data-slot": "dialog-overlay",
-      className: cn(
-        "data-[state=open]:animate-in backdrop-blur-xs data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 tile-bg",
-        className
-      )
-    }, props)
-  );
-}
-function DialogContent(_a) {
-  var _b = _a, {
-    className,
-    children,
-    showCloseButton = true
-  } = _b, props = __objRest(_b, [
-    "className",
-    "children",
-    "showCloseButton"
-  ]);
-  return /* @__PURE__ */ jsxs15(DialogPortal, { "data-slot": "dialog-portal", children: [
-    /* @__PURE__ */ jsx23(DialogOverlay, {}),
-    /* @__PURE__ */ jsx23(SmoothCorners, { children: /* @__PURE__ */ jsxs15(
-      DialogPrimitive.Content,
-      __spreadProps(__spreadValues({
-        "data-slot": "dialog-content",
-        className: cn(
-          "bg-brand-black-600 text-brand-black-100 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 pt-4 p-6 shadow-lg duration-200 sm:max-w-[28rem]",
-          className
-        )
-      }, props), {
-        children: [
-          children,
-          showCloseButton && /* @__PURE__ */ jsxs15(
-            DialogPrimitive.Close,
-            {
-              "data-slot": "dialog-close",
-              className: "ring-offset-background w-[calc(32rem/16)] inline-flex items-center justify-center !rounded-full text-brand-black-100 aspect-square focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-              children: [
-                /* @__PURE__ */ jsx23(XIcon_default, { className: "size-4" }),
-                /* @__PURE__ */ jsx23("span", { className: "sr-only", children: "Close" })
-              ]
-            }
-          )
-        ]
-      })
-    ) })
-  ] });
-}
-function DialogHeader(_a) {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx23(
-    "div",
-    __spreadValues({
-      "data-slot": "dialog-header",
-      className: cn(
-        "flex flex-col justify-center px-6 py-[calc(18rem/16)] gap-2 sm:text-left min-h-[calc(64rem/16)] items-start -mt-6 -mx-6",
-        className
-      )
-    }, props)
-  );
-}
-function DialogFooter(_a) {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx23(
-    "div",
-    __spreadValues({
-      "data-slot": "dialog-footer",
-      className: cn(
-        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
-        className
-      )
-    }, props)
-  );
-}
-function DialogTitle(_a) {
-  var _b = _a, {
-    className
-  } = _b, props = __objRest(_b, [
-    "className"
-  ]);
-  return /* @__PURE__ */ jsx23(
-    DialogPrimitive.Title,
-    __spreadValues({
-      "data-slot": "dialog-title",
-      className: cn(
-        "text-[calc(20rem/16)] leading-[calc(28rem/16)] font-medium text-brand-white-500",
-        className
-      )
-    }, props)
-  );
-}
-function DialogDescription(_a) {
-  var _b = _a, {
-    className
-  } = _b, props = __objRest(_b, [
-    "className"
-  ]);
-  return /* @__PURE__ */ jsx23(
-    DialogPrimitive.Description,
-    __spreadValues({
-      "data-slot": "dialog-description",
-      className: cn("text-muted-foreground text-sm", className)
-    }, props)
-  );
-}
-
 // src/components/form/bridge-form.tsx
 import { Fragment as Fragment4, jsx as jsx24, jsxs as jsxs16 } from "react/jsx-runtime";
 function BridgeForm({
@@ -2344,7 +2336,7 @@ function BridgeForm({
             token: senderToken,
             amount: senderAmount,
             balance: /* @__PURE__ */ jsx24(Fragment4, { children: senderBalance }),
-            usdValue: senderUsdValue,
+            secondaryAmount: senderUsdValue,
             address: senderAddress || ""
           },
           receiver: {
@@ -2353,7 +2345,7 @@ function BridgeForm({
               image: receiverToken.image
             },
             amount: receiverAmount,
-            usdValue: receiverUsdValue,
+            secondaryAmount: receiverUsdValue,
             address: effectiveReceiverAddress || "",
             estimatedTime: estimatedTime != null ? estimatedTime : "~ 10 min"
           },
@@ -4606,6 +4598,7 @@ function HBDrawerContent(_a) {
     "children"
   ]);
   return /* @__PURE__ */ jsxs33(Fragment12, { children: [
+    /* @__PURE__ */ jsx47(HBDrawerPortal, {}),
     /* @__PURE__ */ jsx47(HBDrawerOverlay, {}),
     /* @__PURE__ */ jsxs33(
       DrawerPrimitive2.Content,
@@ -4754,7 +4747,7 @@ function CWDrawerContent(_a) {
   ]);
   const isMobile = useIsMobile();
   if (isMobile) {
-    return /* @__PURE__ */ jsx48(HBDrawer, { open: true, children: /* @__PURE__ */ jsx48(HBDrawerContent, { className: "bg-brand-black-550 rounded-t-[1rem] w-full px-[1rem] !max-h-[95vh] h-full border-t border-brand-black-300", children: /* @__PURE__ */ jsx48("div", { className: "flex flex-col", children }) }) });
+    return /* @__PURE__ */ jsx48(HBDrawerContent, { className: "bg-brand-black-550 rounded-t-[1rem] w-full px-[1rem] border-t border-brand-black-300 min-h-[90dvh]", children: /* @__PURE__ */ jsx48("div", { className: "flex flex-col", children }) });
   }
   return /* @__PURE__ */ jsx48(
     SheetContent,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperbridge/ui",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "sideEffects": false,
   "license": "MIT",
   "private": false,