@hyperbridge/ui 0.0.13 → 0.0.15

package/dist/index.d.mts

@@ -575,6 +575,7 @@ type TimelineData = {
     };
 } | {
     processingStatus: "upcoming" | "error";
+    data?: never;
 } | {
     processingStatus: "completed";
     data?: {
@@ -587,7 +588,7 @@ type TimelineItemProps = Prettify<TimelineData & Level & {
     secondary?: string;
     durationMode?: "none" | "visible";
 }>;
-declare function TimelineItem(props: TimelineItemProps): react_jsx_runtime.JSX.Element;
+declare const TimelineItem: React__default.ForwardRefExoticComponent<TimelineItemProps & React__default.RefAttributes<HTMLLIElement>>;
 declare function TimelineListGroup(props: {
     children: React__default.ReactNode;
 }): react_jsx_runtime.JSX.Element;
@@ -601,6 +602,8 @@ type TimerProps = {
     seconds: number;
     progress: number;
     severity?: "default" | "warning";
+    tooltipContent?: string;
+    timerMessage?: string;
 };
 declare function TransactionTimer(props: TimerProps): react_jsx_runtime.JSX.Element;
 declare function TimerWrap(props: {
@@ -759,8 +762,8 @@ interface NetworkSelectorProps {
 declare const NetworkSelector: ({ title, availableNetworks, unavailableNetworks, selectedNetwork, onNetworkSelect, isOpen, onClose, }: NetworkSelectorProps) => react_jsx_runtime.JSX.Element;
 declare function NetworkSelectionItem(props: {
     network: Network;
-    variant: "default" | "secondary";
     isActive?: boolean;
+    variant: "default" | "secondary";
     SecondaryContent: React__default.ReactNode;
 } & React__default.ComponentPropsWithoutRef<"button">): react_jsx_runtime.JSX.Element;
 
@@ -790,7 +793,13 @@ declare function SheetContent({ className, children, side, ...props }: React__de
 declare function Drawer({ ...props }: React$1.ComponentProps<typeof Drawer$1.Root>): react_jsx_runtime.JSX.Element;
 declare function DrawerContent({ className, children, ...props }: React$1.ComponentProps<typeof Drawer$1.Content>): react_jsx_runtime.JSX.Element;
 
-declare function ManageAccounts(): react_jsx_runtime.JSX.Element;
+/**
+ * @deprecated use <ChooseProviderHeader /> instead
+ * @description To be Remove in v1
+ * @returns
+ */
+declare function ManageAccounts(): null;
+declare function HeaderChooseProvider(): react_jsx_runtime.JSX.Element;
 declare function HeaderNested(props: {
     heading: string;
     image: {
@@ -934,4 +943,4 @@ declare function HBDrawerFooter({ className, ...props }: React$1.ComponentProps<
 declare function HBDrawerTitle({ className, ...props }: React$1.ComponentProps<typeof Drawer$1.Title>): react_jsx_runtime.JSX.Element;
 declare function HBDrawerDescription({ className, ...props }: React$1.ComponentProps<typeof Drawer$1.Description>): react_jsx_runtime.JSX.Element;
 
-export { AccessoryButton, type AccessoryButtonProps, AccountItem, AccountStack, type AccountStackProps, AddressInput, AddressInputFocusBehaviour, AssetList, AssetListItem, AssetValueTrend, Badge, BadgeIcon, Balance, BridgeForm, type BridgeFormProps, BridgeInput, BridgeSettings, type BridgeSettingsProps, BridgeTokenButton, Button, type ButtonProps, CWDrawerContent, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogMorphContent, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerContent, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, EmptyStateConceal, EmptyStateContent, EmptyStateDescription, EmptyStateTitle, type EstimatedTimeFormatted, GradientButton, HBDrawer, HBDrawerClose, HBDrawerContent, HBDrawerDescription, HBDrawerFooter, HBDrawerHeader, HBDrawerOverlay, HBDrawerPortal, HBDrawerTitle, HBDrawerTrigger, Header, HeaderContent, HeaderGradient, HeaderNested, IconButton, Input, type InputProps, LabelledSeperator, ListHeading, ListSection, ManageAccounts, Modal, type ModalProps, type Network, NetworkGroupItem, NetworkSelectionItem, NetworkSelector, type NetworkSelectorProps, NetworkSwitcher, NetworkSwitcherButton, type NetworkSwitcherProps, ReviewItem, ReviewItemAddress, ReviewItemCopyAddressButton, ScrollAwareSeparator, SearchInput, type SearchInputProps, Settings, type SettingsProps, Sheet, SheetContent, SheetTrigger, Summary, SummaryValues, SwapForm, type SwapFormProps, SwapTokenButton, SwapTokenItem, type SwapTokenItemProps, SwapTokenSelector, SwapTokenSelectorContent, type SwapTokenSelectorContentProps, SwapTokenSelectorEmpty, type SwapTokenSelectorEmptyProps, SwapTokenSelectorHeader, type SwapTokenSelectorHeaderProps, type SwapTokenSelectorProps, SwapTokenSelectorSearch, type SwapTokenSelectorSearchProps, SwapTokenSelectorSection, type SwapTokenSelectorSectionProps, TabAlt, TabAltContent, TabAltHeader, TabAltHeaders, TabAltPanel, TabItem, Tabs, TabsContent, TabsList, TagButton, Text, TimelineItem, TimelineList, TimelineListGroup, TimelineRoot, TimerWrap, ToastBox, type Token, TokenImage, type TokenInfo, TokenSelectionItem, TokenSelector, type TokenSelectorProps, TokenTransferPair, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TransactionTimer, TxList, TxListItem, TxListItemProcessing, type WalletAccount, WalletAccountItem, WalletConnectedHeader, type WalletConnectedHeaderProps, WalletHeader, type WalletHeaderCallbacks, WalletHeaderContent, WalletHeaderContentBlur, type WalletHeaderContentProps, type WalletHeaderProps, WalletHeaderTabItem, WalletHeaderTabs, WalletHeaderTabsContent, WalletHeaderTabsList, type WalletHeaderTabsProps, WalletManagerUIContent, WalletManagerUIProvider, WalletProviderItem, badgeVariants, makeEntry };
+export { AccessoryButton, type AccessoryButtonProps, AccountItem, AccountStack, type AccountStackProps, AddressInput, AddressInputFocusBehaviour, AssetList, AssetListItem, AssetValueTrend, Badge, BadgeIcon, Balance, BridgeForm, type BridgeFormProps, BridgeInput, BridgeSettings, type BridgeSettingsProps, BridgeTokenButton, Button, type ButtonProps, CWDrawerContent, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogMorphContent, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerContent, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, EmptyStateConceal, EmptyStateContent, EmptyStateDescription, EmptyStateTitle, type EstimatedTimeFormatted, GradientButton, HBDrawer, HBDrawerClose, HBDrawerContent, HBDrawerDescription, HBDrawerFooter, HBDrawerHeader, HBDrawerOverlay, HBDrawerPortal, HBDrawerTitle, HBDrawerTrigger, Header, HeaderChooseProvider, HeaderContent, HeaderGradient, HeaderNested, IconButton, Input, type InputProps, LabelledSeperator, ListHeading, ListSection, ManageAccounts, Modal, type ModalProps, type Network, NetworkGroupItem, NetworkSelectionItem, NetworkSelector, type NetworkSelectorProps, NetworkSwitcher, NetworkSwitcherButton, type NetworkSwitcherProps, ReviewItem, ReviewItemAddress, ReviewItemCopyAddressButton, ScrollAwareSeparator, SearchInput, type SearchInputProps, Settings, type SettingsProps, Sheet, SheetContent, SheetTrigger, Summary, SummaryValues, SwapForm, type SwapFormProps, SwapTokenButton, SwapTokenItem, type SwapTokenItemProps, SwapTokenSelector, SwapTokenSelectorContent, type SwapTokenSelectorContentProps, SwapTokenSelectorEmpty, type SwapTokenSelectorEmptyProps, SwapTokenSelectorHeader, type SwapTokenSelectorHeaderProps, type SwapTokenSelectorProps, SwapTokenSelectorSearch, type SwapTokenSelectorSearchProps, SwapTokenSelectorSection, type SwapTokenSelectorSectionProps, TabAlt, TabAltContent, TabAltHeader, TabAltHeaders, TabAltPanel, TabItem, Tabs, TabsContent, TabsList, TagButton, Text, TimelineItem, TimelineList, TimelineListGroup, TimelineRoot, TimerWrap, ToastBox, type Token, TokenImage, type TokenInfo, TokenSelectionItem, TokenSelector, type TokenSelectorProps, TokenTransferPair, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TransactionTimer, TxList, TxListItem, TxListItemProcessing, type WalletAccount, WalletAccountItem, WalletConnectedHeader, type WalletConnectedHeaderProps, WalletHeader, type WalletHeaderCallbacks, WalletHeaderContent, WalletHeaderContentBlur, type WalletHeaderContentProps, type WalletHeaderProps, WalletHeaderTabItem, WalletHeaderTabs, WalletHeaderTabsContent, WalletHeaderTabsList, type WalletHeaderTabsProps, WalletManagerUIContent, WalletManagerUIProvider, WalletProviderItem, badgeVariants, makeEntry };

package/dist/index.mjs

@@ -1111,16 +1111,111 @@ function NetworkSwitcherButton(props) {
 
 // src/components/network/network-selector.tsx
 import { useMemo } from "react";
+import React5 from "react";
+
+// src/hooks/selector-hooks.ts
+import { useState as useState2, useRef, useEffect } from "react";
+var useScrollBorder = () => {
+  const [showHeaderBorder, setShowHeaderBorder] = useState2(false);
+  const scrollableRef = useRef(null);
+  useEffect(() => {
+    const scrollableElement = scrollableRef.current;
+    if (!scrollableElement) return;
+    const handleScroll = () => {
+      const { scrollTop, scrollHeight, clientHeight } = scrollableElement;
+      const hasOverflow = scrollHeight > clientHeight;
+      const hasScrolled = scrollTop > 0;
+      setShowHeaderBorder(hasOverflow && hasScrolled);
+    };
+    handleScroll();
+    scrollableElement.addEventListener("scroll", handleScroll);
+    const resizeObserver = new ResizeObserver(handleScroll);
+    resizeObserver.observe(scrollableElement);
+    return () => {
+      scrollableElement.removeEventListener("scroll", handleScroll);
+      resizeObserver.disconnect();
+    };
+  }, []);
+  return { showHeaderBorder, scrollableRef };
+};
+var useSearch = () => {
+  const [searchQuery, setSearchQuery] = useState2("");
+  const resetSearch = () => setSearchQuery("");
+  return { searchQuery, setSearchQuery, resetSearch };
+};
+var filterItems = (items, searchQuery, searchFields) => {
+  if (!searchQuery.trim()) return items;
+  const query = searchQuery.toLowerCase();
+  return items.filter(
+    (item) => searchFields(item).some((field) => field.toLowerCase().includes(query))
+  );
+};
+var sortItems = (items, sortFn) => {
+  return [...items].sort(sortFn);
+};
+
+// src/components/molecules/empty-state.tsx
+import React3 from "react";
+import { Fragment, jsx as jsx15 } from "react/jsx-runtime";
+var ContextDefault = {
+  isEmpty: true
+};
+var EmptyStateCtx = isSSR() ? {} : React3.createContext(ContextDefault);
+function useContext() {
+  const context = React3.useContext(EmptyStateCtx);
+  return isSSR() ? ContextDefault : context;
+}
+var EmptyStateContent = React3.forwardRef(function Content2(props, ref) {
+  const { isEmpty } = useContext();
+  if (!isEmpty) return null;
+  return /* @__PURE__ */ jsx15(
+    "div",
+    __spreadProps(__spreadValues({}, props), {
+      ref,
+      className: cn("flex flex-col items-center gap-4", props.className)
+    })
+  );
+});
+var EmptyStateTitle = React3.forwardRef(function ESTitle(props, ref) {
+  return /* @__PURE__ */ jsx15(
+    "h6",
+    __spreadProps(__spreadValues({
+      ref
+    }, props), {
+      className: cn("font-500 text-center font-semibold", props.className)
+    })
+  );
+});
+var EmptyStateDescription = React3.forwardRef(function ESDescription(props, ref) {
+  return /* @__PURE__ */ jsx15(
+    "div",
+    __spreadProps(__spreadValues({
+      ref
+    }, props), {
+      className: cn("text-xs text-muted-foreground", props.className)
+    })
+  );
+});
+function EmptyStateConceal(props) {
+  const { isEmpty } = useContext();
+  if (isEmpty) return null;
+  return /* @__PURE__ */ jsx15(Fragment, { children: props.children });
+}
+function EmptyState(props) {
+  const { isEmpty = true, children } = props;
+  if (isSSR()) return /* @__PURE__ */ jsx15(Fragment, { children });
+  return /* @__PURE__ */ jsx15(EmptyStateCtx.Provider, { value: { isEmpty }, children });
+}
 
 // src/components/molecules/modal.tsx
 import { AnimatePresence, motion } from "motion/react";
-import { useEffect as useEffect2 } from "react";
+import { useEffect as useEffect3 } from "react";
 
 // src/hooks/is-mobile.ts
-import { useEffect, useState as useState2 } from "react";
+import { useEffect as useEffect2, useState as useState3 } from "react";
 var useIsMobile = () => {
-  const [isMobile, setIsMobile] = useState2(false);
-  useEffect(() => {
+  const [isMobile, setIsMobile] = useState3(false);
+  useEffect2(() => {
     const checkIsMobile = () => {
       setIsMobile(window.innerWidth < 768);
     };
@@ -1243,10 +1338,10 @@ var animationPresets = {
 
 // src/@/ui/drawer.tsx
 import { Drawer as DrawerPrimitive } from "vaul";
-import { Fragment, jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
 function Drawer(_a) {
   var props = __objRest(_a, []);
-  return /* @__PURE__ */ jsx15(DrawerPrimitive.Root, __spreadValues({ "data-slot": "drawer" }, props));
+  return /* @__PURE__ */ jsx16(DrawerPrimitive.Root, __spreadValues({ "data-slot": "drawer" }, props));
 }
 function DrawerOverlay(_a) {
   var _b = _a, {
@@ -1254,7 +1349,7 @@ function DrawerOverlay(_a) {
   } = _b, props = __objRest(_b, [
     "className"
   ]);
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(
     DrawerPrimitive.Overlay,
     __spreadValues({
       "data-slot": "drawer-overlay",
@@ -1273,8 +1368,8 @@ function DrawerContent(_a) {
     "className",
     "children"
   ]);
-  return /* @__PURE__ */ jsxs10(Fragment, { children: [
-    /* @__PURE__ */ jsx15(DrawerOverlay, {}),
+  return /* @__PURE__ */ jsxs10(Fragment2, { children: [
+    /* @__PURE__ */ jsx16(DrawerOverlay, {}),
     /* @__PURE__ */ jsxs10(
       DrawerPrimitive.Content,
       __spreadProps(__spreadValues({
@@ -1289,7 +1384,7 @@ function DrawerContent(_a) {
         )
       }, props), {
         children: [
-          /* @__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" }),
+          /* @__PURE__ */ jsx16("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
         ]
       })
@@ -1298,14 +1393,14 @@ function DrawerContent(_a) {
 }
 
 // src/components/molecules/modal.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var Modal = (props) => {
   const { isOpen, children, onClose } = props;
   const isMobile = useIsMobile();
   if (isMobile) {
-    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__ */ jsx17(Drawer, { open: isOpen, onOpenChange: onClose, children: /* @__PURE__ */ jsx17(DrawerContent, { className: "bg-brand-black-550 border-brand-black-300 min-h-[90dvh]", children }) });
   }
-  return /* @__PURE__ */ jsx16(DestkopModal, __spreadValues({}, props));
+  return /* @__PURE__ */ jsx17(DestkopModal, __spreadValues({}, props));
 };
 function DestkopModal(props) {
   const {
@@ -1316,7 +1411,7 @@ function DestkopModal(props) {
     className
   } = props;
   const { variants, transition } = animationPresets[animationPreset];
-  useEffect2(() => {
+  useEffect3(() => {
     const handleEscapeKey = (event) => {
       if (event.key === "Escape" && isOpen && onClose) {
         onClose();
@@ -1329,7 +1424,7 @@ function DestkopModal(props) {
       document.removeEventListener("keydown", handleEscapeKey);
     };
   }, [isOpen, onClose]);
-  return /* @__PURE__ */ jsx16(AnimatePresence, { mode: "wait", children: isOpen && /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(AnimatePresence, { mode: "wait", children: isOpen && /* @__PURE__ */ jsx17(
     motion.div,
     {
       "data-modal": "true",
@@ -1347,103 +1442,6 @@ function DestkopModal(props) {
   ) });
 }
 
-// src/hooks/selector-hooks.ts
-import { useState as useState4, useRef, useEffect as useEffect3 } from "react";
-var useScrollBorder = () => {
-  const [showHeaderBorder, setShowHeaderBorder] = useState4(false);
-  const scrollableRef = useRef(null);
-  useEffect3(() => {
-    const scrollableElement = scrollableRef.current;
-    if (!scrollableElement) return;
-    const handleScroll = () => {
-      const { scrollTop, scrollHeight, clientHeight } = scrollableElement;
-      const hasOverflow = scrollHeight > clientHeight;
-      const hasScrolled = scrollTop > 0;
-      setShowHeaderBorder(hasOverflow && hasScrolled);
-    };
-    handleScroll();
-    scrollableElement.addEventListener("scroll", handleScroll);
-    const resizeObserver = new ResizeObserver(handleScroll);
-    resizeObserver.observe(scrollableElement);
-    return () => {
-      scrollableElement.removeEventListener("scroll", handleScroll);
-      resizeObserver.disconnect();
-    };
-  }, []);
-  return { showHeaderBorder, scrollableRef };
-};
-var useSearch = () => {
-  const [searchQuery, setSearchQuery] = useState4("");
-  const resetSearch = () => setSearchQuery("");
-  return { searchQuery, setSearchQuery, resetSearch };
-};
-var filterItems = (items, searchQuery, searchFields) => {
-  if (!searchQuery.trim()) return items;
-  const query = searchQuery.toLowerCase();
-  return items.filter(
-    (item) => searchFields(item).some((field) => field.toLowerCase().includes(query))
-  );
-};
-var sortItems = (items, sortFn) => {
-  return [...items].sort(sortFn);
-};
-
-// src/components/molecules/empty-state.tsx
-import React3 from "react";
-import { Fragment as Fragment2, jsx as jsx17 } from "react/jsx-runtime";
-var ContextDefault = {
-  isEmpty: true
-};
-var EmptyStateCtx = isSSR() ? {} : React3.createContext(ContextDefault);
-function useContext() {
-  const context = React3.useContext(EmptyStateCtx);
-  return isSSR() ? ContextDefault : context;
-}
-var EmptyStateContent = React3.forwardRef(function Content2(props, ref) {
-  const { isEmpty } = useContext();
-  if (!isEmpty) return null;
-  return /* @__PURE__ */ jsx17(
-    "div",
-    __spreadProps(__spreadValues({}, props), {
-      ref,
-      className: cn("flex flex-col items-center gap-4", props.className)
-    })
-  );
-});
-var EmptyStateTitle = React3.forwardRef(function ESTitle(props, ref) {
-  return /* @__PURE__ */ jsx17(
-    "h6",
-    __spreadProps(__spreadValues({
-      ref
-    }, props), {
-      className: cn("font-500 text-center font-semibold", props.className)
-    })
-  );
-});
-var EmptyStateDescription = React3.forwardRef(function ESDescription(props, ref) {
-  return /* @__PURE__ */ jsx17(
-    "div",
-    __spreadProps(__spreadValues({
-      ref
-    }, props), {
-      className: cn("text-xs text-muted-foreground", props.className)
-    })
-  );
-});
-function EmptyStateConceal(props) {
-  const { isEmpty } = useContext();
-  if (isEmpty) return null;
-  return /* @__PURE__ */ jsx17(Fragment2, { children: props.children });
-}
-function EmptyState(props) {
-  const { isEmpty = true, children } = props;
-  if (isSSR()) return /* @__PURE__ */ jsx17(Fragment2, { children });
-  return /* @__PURE__ */ jsx17(EmptyStateCtx.Provider, { value: { isEmpty }, children });
-}
-
-// src/components/network/network-selector.tsx
-import React5 from "react";
-
 // src/components/molecules/scroll-aware-area.tsx
 import React4 from "react";
 import { jsx as jsx18 } from "react/jsx-runtime";
@@ -1602,12 +1600,14 @@ function NetworkSelectionItem(props) {
     network,
     disabled = false,
     variant = "default",
-    isActive
+    isActive,
+    SecondaryContent
   } = _a, PROPS = __objRest(_a, [
     "network",
     "disabled",
     "variant",
-    "isActive"
+    "isActive",
+    "SecondaryContent"
   ]);
   const buttonRef = React5.useRef(null);
   const is_default_mode = variant === "default";
@@ -1647,7 +1647,7 @@ function NetworkSelectionItem(props) {
           })
         ),
         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
+        variant === "secondary" ? SecondaryContent : null
       ]
     }
   );
@@ -3244,26 +3244,93 @@ function Progress(_a) {
   );
 }
 
-// src/components/molecules/timeline.tsx
+// src/@/ui/tooltip.tsx
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { jsx as jsx35, jsxs as jsxs24 } from "react/jsx-runtime";
+function TooltipProvider(_a) {
+  var _b = _a, {
+    delayDuration = 0
+  } = _b, props = __objRest(_b, [
+    "delayDuration"
+  ]);
+  return /* @__PURE__ */ jsx35(
+    TooltipPrimitive.Provider,
+    __spreadValues({
+      "data-slot": "tooltip-provider",
+      delayDuration
+    }, props)
+  );
+}
+function Tooltip(_a) {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ jsx35(TooltipProvider, { children: /* @__PURE__ */ jsx35(TooltipPrimitive.Root, __spreadValues({ "data-slot": "tooltip" }, props)) });
+}
+function TooltipTrigger(_a) {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ jsx35(TooltipPrimitive.Trigger, __spreadValues({ "data-slot": "tooltip-trigger" }, props));
+}
+function TooltipContent(_a) {
+  var _b = _a, {
+    className,
+    sideOffset = 0,
+    children
+  } = _b, props = __objRest(_b, [
+    "className",
+    "sideOffset",
+    "children"
+  ]);
+  return /* @__PURE__ */ jsx35(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs24(
+    TooltipPrimitive.Content,
+    __spreadProps(__spreadValues({
+      "data-slot": "tooltip-content",
+      sideOffset,
+      className: cn(
+        "bg-brand-black-600 text-brand-black-100 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+        className
+      )
+    }, props), {
+      children: [
+        children,
+        /* @__PURE__ */ jsx35(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/timeline.tsx
+import { jsx as jsx36, jsxs as jsxs25 } from "react/jsx-runtime";
 var StatusTextMap = {
   processing: "Processing",
   upcoming: "Upcoming",
   error: "Failed"
 };
-function TimelineItem(props) {
-  var _a, _b, _c, _d;
-  const { processingStatus, caption, durationMode = "none" } = props;
+var TimelineItem = React13.forwardRef(function TimelineItem2(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 = React13.useId();
   const layoutId = `${id}/${caption}/content-2`;
   const hideTime = durationMode === "none";
-  return /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx36(
     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__ */ jsxs24(
+      children: /* @__PURE__ */ jsxs25(
         motion3.div,
         {
           initial: { opacity: 0.5 },
@@ -3272,7 +3339,7 @@ function TimelineItem(props) {
           },
           className: "flex h-[3.5rem] items-center gap-[0.86rem] py-[0.5625rem] px-[0.75rem] ",
           children: [
-            props.level === 0 ? /* @__PURE__ */ jsx35(BadgeIcon, __spreadValues({}, props.badge)) : /* @__PURE__ */ jsx35(
+            props.level === 0 ? /* @__PURE__ */ jsx36(BadgeIcon, __spreadValues({}, props.badge)) : /* @__PURE__ */ jsx36(
               IconButton,
               {
                 variant: "level_2",
@@ -3282,7 +3349,7 @@ function TimelineItem(props) {
                 style: {
                   boxShadow: "0 4px 24px 0 rgba(255, 255, 255, 0.05) inset"
                 },
-                children: /* @__PURE__ */ jsx35(
+                children: /* @__PURE__ */ jsx36(
                   "span",
                   {
                     className: cn(
@@ -3296,9 +3363,9 @@ function TimelineItem(props) {
                 )
               }
             ),
-            /* @__PURE__ */ jsxs24("div", { className: "flex flex-col flex-1 gap-[calc(4/16rem)]", children: [
-              /* @__PURE__ */ jsx35("div", { className: "text-brand-white-500 text-[1rem] h-[1.25rem]", children: caption }),
-              /* @__PURE__ */ jsx35("div", { className: "text-xs h-[1rem] text-brand-black-100", children: processingStatus === "completed" ? ((_a = props.data) == null ? void 0 : _a.transactionUrl) ? /* @__PURE__ */ jsxs24(
+            /* @__PURE__ */ jsxs25("div", { className: "flex flex-col flex-1 gap-[calc(4/16rem)]", children: [
+              /* @__PURE__ */ jsx36("div", { className: "text-brand-white-500 text-[1rem] h-[1.25rem]", 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(
                 "a",
                 {
                   href: props.data.transactionUrl,
@@ -3306,14 +3373,14 @@ function TimelineItem(props) {
                   target: "_blank",
                   rel: "noopener noreferrer",
                   children: [
-                    /* @__PURE__ */ jsx35("span", { children: "View in explorer " }),
-                    /* @__PURE__ */ jsx35(ArrowUpRight_default, { width: "0.75rem", height: "0.75rem" })
+                    /* @__PURE__ */ jsx36("span", { children: "View in explorer " }),
+                    /* @__PURE__ */ jsx36(ArrowUpRight_default, { width: "0.75rem", height: "0.75rem" })
                   ]
                 }
-              ) : /* @__PURE__ */ jsx35("span", { children: props.secondary }) : /* @__PURE__ */ jsx35("span", { children: (_b = props == null ? void 0 : props.secondary) != null ? _b : StatusTextMap[processingStatus] }) })
+              ) : /* @__PURE__ */ jsx36("span", { children: props.secondary }) : /* @__PURE__ */ jsx36("span", { children: (_c = props == null ? void 0 : props.secondary) != null ? _c : StatusTextMap[processingStatus] }) })
             ] }),
-            /* @__PURE__ */ jsxs24(AnimatePresence2, { children: [
-              processingStatus === "completed" ? /* @__PURE__ */ jsxs24(
+            /* @__PURE__ */ jsxs25(AnimatePresence2, { children: [
+              processingStatus === "completed" ? /* @__PURE__ */ jsxs25(
                 motion3.div,
                 {
                   layoutId,
@@ -3322,8 +3389,8 @@ function TimelineItem(props) {
                   exit: { x: 10, opacity: 0 },
                   className: "flex gap-[calc(8rem/16)] items-center",
                   children: [
-                    !hideTime && /* @__PURE__ */ jsx35("span", { className: "text-[calc(13rem/16)] text-brand-black-100", children: (_c = props == null ? void 0 : props.data) == null ? void 0 : _c.completedIn }),
-                    /* @__PURE__ */ jsx35(
+                    !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(
                       Check_default,
                       {
                         height: "1rem",
@@ -3334,7 +3401,7 @@ function TimelineItem(props) {
                   ]
                 }
               ) : null,
-              processingStatus === "processing" ? /* @__PURE__ */ jsxs24(
+              processingStatus === "processing" ? /* @__PURE__ */ jsxs25(
                 motion3.div,
                 {
                   initial: { x: 10, opacity: 0 },
@@ -3343,8 +3410,8 @@ function TimelineItem(props) {
                   layoutId,
                   className: "flex gap-[calc(10rem/16)] items-center",
                   children: [
-                    !hideTime && /* @__PURE__ */ jsx35("span", { className: "text-[calc(13rem/16)]", children: (_d = props == null ? void 0 : props.data) == null ? void 0 : _d.eta }),
-                    /* @__PURE__ */ jsx35(
+                    !hideTime && /* @__PURE__ */ jsx36("span", { className: "text-[calc(13rem/16)]", children: (_e = props == null ? void 0 : props.data) == null ? void 0 : _e.eta }),
+                    /* @__PURE__ */ jsx36(
                       Loader2,
                       {
                         size: "1rem",
@@ -3358,17 +3425,17 @@ function TimelineItem(props) {
           ]
         }
       )
-    }
+    })
   );
-}
+});
 function TimelineListGroup(props) {
-  return /* @__PURE__ */ jsx35("ul", { className: cn("flex flex-col overflow-hidden"), children: props.children });
+  return /* @__PURE__ */ jsx36("ul", { className: cn("flex flex-col overflow-hidden"), children: props.children });
 }
 function TimelineList(props) {
-  return /* @__PURE__ */ jsx35("ul", { className: "flex flex-col", children: props.children });
+  return /* @__PURE__ */ jsx36("ul", { className: "flex flex-col", children: props.children });
 }
 var TimelineRoot = React13.forwardRef((props, ref) => {
-  return /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx36(
     "ul",
     __spreadProps(__spreadValues({
       ref
@@ -3387,9 +3454,16 @@ var trackColorMap = {
   default: "var(--color-brand-black-100)"
 };
 function TransactionTimer(props) {
-  const { mins, hours, seconds, severity = "warning" } = props;
-  return /* @__PURE__ */ jsxs24("div", { className: "flex flex-col gap-[calc(6rem/16)]", children: [
-    /* @__PURE__ */ jsxs24(
+  const {
+    mins,
+    hours,
+    seconds,
+    severity = "warning",
+    tooltipContent,
+    timerMessage = "Transaction will timeout in"
+  } = props;
+  return /* @__PURE__ */ jsxs25("div", { className: "flex flex-col gap-[calc(6rem/16)]", children: [
+    /* @__PURE__ */ jsxs25(
       "div",
       {
         className: cn(
@@ -3400,19 +3474,22 @@ function TransactionTimer(props) {
           }
         ),
         children: [
-          /* @__PURE__ */ jsx35("span", { children: "Transaction will timeout in" }),
-          /* @__PURE__ */ jsxs24("span", { className: "text-brand-white-500", children: [
+          /* @__PURE__ */ jsx36("span", { children: timerMessage }),
+          /* @__PURE__ */ jsxs25("span", { className: "text-brand-white-500", children: [
             String(hours).padStart(2, "0"),
             ":",
             String(mins).padStart(2, "0"),
             ":",
             String(seconds).padStart(2, "0")
           ] }),
-          /* @__PURE__ */ jsx35("span", { children: /* @__PURE__ */ jsx35(CircleInfo_default, { width: "1em", height: "1em" }) })
+          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 }) })
+          ] }) })
         ]
       }
     ),
-    /* @__PURE__ */ jsx35(
+    /* @__PURE__ */ jsx36(
       Progress,
       {
         value: props.progress,
@@ -3426,7 +3503,7 @@ function TransactionTimer(props) {
 }
 function TimerWrap(props) {
   const show = props.reveal;
-  return /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsxs25(
     motion3.div,
     {
       initial: { paddingTop: 0 },
@@ -3436,7 +3513,7 @@ function TimerWrap(props) {
       },
       className: "flex flex-col items-stretch justify-start relative",
       children: [
-        /* @__PURE__ */ jsx35(
+        /* @__PURE__ */ jsx36(
           "div",
           {
             className: cn(
@@ -3446,7 +3523,7 @@ function TimerWrap(props) {
             children: props.Timer
           }
         ),
-        /* @__PURE__ */ jsx35(
+        /* @__PURE__ */ jsx36(
           Slot9,
           {
             className: cn("min-h-[calc(56rem/11)] z-20 relative !rounded-[1rem]", {
@@ -3461,7 +3538,7 @@ function TimerWrap(props) {
 }
 
 // src/components/molecules/toast.tsx
-import { Fragment as Fragment8, jsx as jsx36, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx37, jsxs as jsxs26 } from "react/jsx-runtime";
 var SeverityConfig = {
   error: {
     icon: Alert_default,
@@ -3487,23 +3564,23 @@ function ToastBox(props) {
     event.stopPropagation();
     onDismiss == null ? void 0 : onDismiss(event);
   };
-  return /* @__PURE__ */ jsx36(SmoothCorners, { size: "sm", children: /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsx37(SmoothCorners, { size: "sm", children: /* @__PURE__ */ jsxs26(
     "div",
     {
       "data-is-toast": "true",
       className: "bg-brand-black-500 flex flex-col md:flex-row gap-[0.75rem] items-start py-[calc(10rem/16)] px-[calc(12rem/16)] text-muted-foreground",
       children: [
-        /* @__PURE__ */ jsx36(
+        /* @__PURE__ */ jsx37(
           "div",
           {
             className: cn("items-center justify-center shrink-0 grow-0", color),
             style: { fontSize: "calc(calc(24/16) * 1rem)" },
-            children: /* @__PURE__ */ jsx36(Icon, { width: "1em", height: "1em" })
+            children: /* @__PURE__ */ jsx37(Icon, { width: "1em", height: "1em" })
           }
         ),
-        /* @__PURE__ */ jsxs25("div", { className: "flex flex-col flex-1", children: [
-          /* @__PURE__ */ jsx36(Text, { variant: "body1", className: "text-foreground", children: props.heading }),
-          /* @__PURE__ */ jsx36(
+        /* @__PURE__ */ jsxs26("div", { className: "flex flex-col flex-1", children: [
+          /* @__PURE__ */ jsx37(Text, { variant: "body1", className: "text-foreground", children: props.heading }),
+          /* @__PURE__ */ jsx37(
             Text,
             {
               variant: "caption2",
@@ -3512,9 +3589,9 @@ function ToastBox(props) {
             }
           )
         ] }),
-        /* @__PURE__ */ jsx36("div", { className: "flex gap-[calc(6rem/16)] items-center self-center w-full md:w-auto", children: actions ? /* @__PURE__ */ jsxs25(Fragment8, { children: [
-          /* @__PURE__ */ jsx36("div", { className: "flex gap-[calc(6rem/16)] flex-1 items-center  *:flex-1", children: actions }),
-          /* @__PURE__ */ jsx36(
+        /* @__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(
             IconButton,
             {
               className: "cursor-pointer",
@@ -3522,10 +3599,10 @@ function ToastBox(props) {
               size: "smx",
               variant: "level_2",
               rounded: "default",
-              children: /* @__PURE__ */ jsx36(XIcon_default, { width: "1rem" })
+              children: /* @__PURE__ */ jsx37(XIcon_default, { width: "1rem" })
             }
           )
-        ] }) : /* @__PURE__ */ jsx36(
+        ] }) : /* @__PURE__ */ jsx37(
           Button2,
           {
             size: "sm",
@@ -3542,10 +3619,10 @@ function ToastBox(props) {
 
 // src/components/molecules/transaction-list.tsx
 import { motion as motion4 } from "motion/react";
-import { Fragment as Fragment9, jsx as jsx37, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx38, jsxs as jsxs27 } from "react/jsx-runtime";
 function TxListItemProcessing(props) {
-  return /* @__PURE__ */ jsx37(GradientContainer, { children: /* @__PURE__ */ jsxs26("div", { className: "rounded-[1rem] bg-brand-black-350 px-[0.75rem] h-[3.75rem] flex items-center", children: [
-    /* @__PURE__ */ jsx37(
+  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(
       GradientLine,
       {
         behaviour: "progress",
@@ -3553,8 +3630,8 @@ function TxListItemProcessing(props) {
         mode: props.status === "failed" ? "error" : "default"
       }
     ),
-    /* @__PURE__ */ jsxs26("div", { className: "flex gap-[1rem] flex-1 z-20 text-brand-black-100 font-medium", children: [
-      /* @__PURE__ */ jsx37(
+    /* @__PURE__ */ jsxs27("div", { className: "flex gap-[1rem] flex-1 z-20 text-brand-black-100 font-medium", children: [
+      /* @__PURE__ */ jsx38(
         TokenTransferPair,
         {
           fromToken: props.from,
@@ -3562,48 +3639,48 @@ function TxListItemProcessing(props) {
           size: "2rem"
         }
       ),
-      /* @__PURE__ */ jsxs26("div", { className: "flex flex-grow flex-col text-start", children: [
-        /* @__PURE__ */ jsx37("span", { className: "text-brand-white-500 whitespace-nowrap text-[0.875rem] h-[1.25rem]", children: props.caption }),
-        /* @__PURE__ */ jsxs26(StatusBadge, { variant: props.status === "failed" ? "error" : "none", children: [
+      /* @__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]", children: props.caption }),
+        /* @__PURE__ */ jsxs27(StatusBadge, { variant: props.status === "failed" ? "error" : "none", children: [
           "~ ",
           props.eta
         ] })
       ] }),
-      /* @__PURE__ */ jsx37("div", { className: "basis-4/12 max-w-xs shrink-0 flex justify-end h-[2.25rem] whitespace-nowrap", children: /* @__PURE__ */ jsxs26(
+      /* @__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,
         {
           initial: { y: 0 },
           animate: { y: props.status === "failed" ? "-100%" : 0 },
           className: "grid",
           children: [
-            /* @__PURE__ */ jsxs26(
+            /* @__PURE__ */ jsxs27(
               motion4.div,
               {
                 animate: { opacity: props.status === "processing" ? 1 : 0 },
                 className: "flex flex-col text-end h-[2.25rem]",
                 children: [
-                  /* @__PURE__ */ jsx37("span", { className: "text-base text-brand-white-500 h-[1.25rem]", children: props.amount }),
-                  /* @__PURE__ */ jsxs26("span", { className: "text-xs h-[1rem]", children: [
+                  /* @__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: [
                     props.percentage,
                     "%"
                   ] })
                 ]
               }
             ),
-            /* @__PURE__ */ jsxs26(
+            /* @__PURE__ */ jsxs27(
               motion4.div,
               {
                 animate: { opacity: props.status === "failed" ? 1 : 0 },
                 className: "flex gap-[0.75rem] items-center h-[2.25rem] justify-end",
                 children: [
-                  /* @__PURE__ */ jsx37("span", { className: "text-base text-brand-white-500 h-[1.25rem]", children: props.amount }),
-                  /* @__PURE__ */ jsx37(
+                  /* @__PURE__ */ jsx38("span", { className: "text-base text-brand-white-500 h-[1.25rem]", children: props.amount }),
+                  /* @__PURE__ */ jsx38(
                     IconButton,
                     {
                       variant: "destructive",
                       rounded: "default",
                       size: "smx",
-                      children: /* @__PURE__ */ jsx37(RotateCcw_default, { className: "size-4 text-[currentColor]" })
+                      children: /* @__PURE__ */ jsx38(RotateCcw_default, { className: "size-4 text-[currentColor]" })
                     }
                   )
                 ]
@@ -3617,7 +3694,7 @@ function TxListItemProcessing(props) {
 }
 var TxListItem = function TxListItem2(props) {
   const _a = props, { caption, completedAt, mode, from, to, amount } = _a, rest = __objRest(_a, ["caption", "completedAt", "mode", "from", "to", "amount"]);
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx38(
     "button",
     __spreadProps(__spreadValues({}, rest), {
       type: "button",
@@ -3625,15 +3702,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__ */ jsxs26("div", { className: "flex gap-[1rem] flex-1 z-20 text-brand-black-100 font-medium", children: [
-        /* @__PURE__ */ jsx37(TokenTransferPair, { fromToken: from, toToken: to, size: "2rem" }),
-        /* @__PURE__ */ jsxs26("div", { className: "flex flex-grow flex-col text-start whitespace-nowrap", children: [
-          /* @__PURE__ */ jsx37("span", { className: "text-brand-white-500 text-[0.875rem] h-[1.25rem]", children: caption }),
-          /* @__PURE__ */ jsx37(StatusBadge, { variant: mode === "rollback" ? "refunded" : "success" })
+      children: /* @__PURE__ */ jsxs27("div", { className: "flex gap-[1rem] flex-1 z-20 text-brand-black-100 font-medium", children: [
+        /* @__PURE__ */ jsx38(TokenTransferPair, { fromToken: from, toToken: to, size: "2rem" }),
+        /* @__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]", children: caption }),
+          /* @__PURE__ */ jsx38(StatusBadge, { variant: mode === "rollback" ? "refunded" : "success" })
         ] }),
-        /* @__PURE__ */ jsxs26("div", { className: "shrink-0 flex flex-col text-end", children: [
-          /* @__PURE__ */ jsx37("span", { className: "text-base text-brand-white-500 h-[1.25rem]", children: amount }),
-          /* @__PURE__ */ jsx37("span", { className: "text-xs h-[1rem]", children: completedAt })
+        /* @__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 })
         ] })
       ] })
     })
@@ -3643,18 +3720,18 @@ function StatusBadge({
   variant,
   children
 }) {
-  return /* @__PURE__ */ jsxs26("span", { className: "text-xs h-[1rem] flex items-center gap-[0.125rem]", children: [
-    variant === "success" ? /* @__PURE__ */ jsxs26("span", { className: "text-brand-success-400 flex items-center gap-[0.125rem]", children: [
-      /* @__PURE__ */ jsx37(Check_default, { width: "0.75rem", height: "0.75rem" }),
+  return /* @__PURE__ */ jsxs27("span", { className: "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, { width: "0.75rem", height: "0.75rem" }),
       " ",
-      /* @__PURE__ */ jsx37("span", { children: "Success" })
+      /* @__PURE__ */ jsx38("span", { children: "Success" })
     ] }) : null,
-    variant === "refunded" ? /* @__PURE__ */ jsxs26(Fragment9, { children: [
-      /* @__PURE__ */ jsx37(StepBack_default, { strokeWidth: 2, width: "0.75rem", height: "0.75rem" }),
-      /* @__PURE__ */ jsx37("span", { children: "Refunded" })
+    variant === "refunded" ? /* @__PURE__ */ jsxs27(Fragment9, { children: [
+      /* @__PURE__ */ jsx38(StepBack_default, { strokeWidth: 2, width: "0.75rem", height: "0.75rem" }),
+      /* @__PURE__ */ jsx38("span", { children: "Refunded" })
     ] }) : null,
-    variant === "error" ? /* @__PURE__ */ jsxs26(Fragment9, { children: [
-      /* @__PURE__ */ jsx37(
+    variant === "error" ? /* @__PURE__ */ jsxs27(Fragment9, { children: [
+      /* @__PURE__ */ jsx38(
         Alert_default,
         {
           width: "0.75rem",
@@ -3662,13 +3739,13 @@ function StatusBadge({
           className: "text-brand-danger-500"
         }
       ),
-      /* @__PURE__ */ jsx37("span", { className: "text-brand-danger-500", children: "Order expired" })
+      /* @__PURE__ */ jsx38("span", { className: "text-brand-danger-500", children: "Order expired" })
     ] }) : null,
     variant === "none" ? children : null
   ] });
 }
 function TxList({ children }) {
-  return /* @__PURE__ */ jsx37("ul", { className: "flex flex-col gap-[0.5rem]", children });
+  return /* @__PURE__ */ jsx38("ul", { className: "flex flex-col gap-[0.5rem]", children });
 }
 
 // src/components/molecules/wallet-header.tsx
@@ -3682,14 +3759,14 @@ import * as Tab_ from "@radix-ui/react-tabs";
 
 // src/@/ui/tabs.tsx
 import * as TabsPrimitive from "@radix-ui/react-tabs";
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { jsx as jsx39 } from "react/jsx-runtime";
 function Tabs(_a) {
   var _b = _a, {
     className
   } = _b, props = __objRest(_b, [
     "className"
   ]);
-  return /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx39(
     TabsPrimitive.Root,
     __spreadValues({
       "data-slot": "tabs",
@@ -3703,7 +3780,7 @@ function TabsContent(_a) {
   } = _b, props = __objRest(_b, [
     "className"
   ]);
-  return /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx39(
     TabsPrimitive.Content,
     __spreadValues({
       "data-slot": "tabs-content",
@@ -3713,12 +3790,12 @@ function TabsContent(_a) {
 }
 
 // src/components/organisms/assets-collection.tsx
-import { jsx as jsx39, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs28 } from "react/jsx-runtime";
 function TabsList2(props) {
-  return /* @__PURE__ */ jsx39("nav", { className: "flex flex-col", children: /* @__PURE__ */ jsx39(Tab_.TabsList, { asChild: true, children: /* @__PURE__ */ jsx39("ul", { className: "flex p-0 bg-transparent gap-3", children: props.children }) }) });
+  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 }) }) });
 }
 function TabItem(props) {
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx40(
     Tab_.TabsTrigger,
     {
       value: props.value,
@@ -3731,7 +3808,7 @@ function AssetValueTrend(props) {
   const { percentage = 0, direction: dir, dollarValue = 0 } = props;
   const isZero = dollarValue === 0;
   const isUp = isZero ? "up" : dir === "up";
-  return /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsxs28(
     "div",
     {
       className: "inline-flex select-none gap-[0.125rem] text-brand-black-100 h-[1rem] text-[0.7rem] font-medium items-center",
@@ -3740,7 +3817,7 @@ function AssetValueTrend(props) {
         "--trend-color": isZero ? "inherit" : !isUp ? "var(--color-brand-danger-500, indigo)" : "var(--color-brand-success-400, cyan)"
       },
       children: [
-        /* @__PURE__ */ jsx39("span", { className: "text-[var(--trend-color)]", children: /* @__PURE__ */ jsx39(
+        /* @__PURE__ */ jsx40("span", { className: "text-[var(--trend-color)]", children: /* @__PURE__ */ jsx40(
           ArrowTriangleBottom_default,
           {
             width: "0.75rem",
@@ -3751,13 +3828,13 @@ function AssetValueTrend(props) {
             )
           }
         ) }),
-        /* @__PURE__ */ jsxs27("span", { className: "flex items-center", children: [
-          /* @__PURE__ */ jsxs27("span", { className: "text-[var(--trend-color)]", children: [
+        /* @__PURE__ */ jsxs28("span", { className: "flex items-center", children: [
+          /* @__PURE__ */ jsxs28("span", { className: "text-[var(--trend-color)]", children: [
             "$",
             dollarValue
           ] }),
           "\xA0",
-          /* @__PURE__ */ jsxs27("span", { className: "text-[var(--trend-base)]", children: [
+          /* @__PURE__ */ jsxs28("span", { className: "text-[var(--trend-base)]", children: [
             "(",
             percentage,
             "%)"
@@ -3775,8 +3852,8 @@ function Balance(props) {
   const [int_, decimal] = String(props.amount).split(".");
   const int = Number.isNaN(+int_) ? 0 : int_;
   const is_zero = props.amount === 0;
-  return /* @__PURE__ */ jsx39("div", { className: "select-none", children: /* @__PURE__ */ jsxs27("span", { className: "text-[2.375rem] font-medium leading-[2.875rem] whitespace-nowrap", children: [
-    /* @__PURE__ */ jsxs27(
+  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(
       "span",
       {
         className: cn(
@@ -3788,11 +3865,11 @@ function Balance(props) {
         ]
       }
     ),
-    /* @__PURE__ */ jsxs27("span", { className: "text-brand-black-100", children: [
+    /* @__PURE__ */ jsxs28("span", { className: "text-brand-black-100", children: [
       ".",
       decimal != null ? decimal : "00"
     ] }),
-    /* @__PURE__ */ jsxs27("span", { className: "text-brand-white-500", children: [
+    /* @__PURE__ */ jsxs28("span", { className: "text-brand-white-500", children: [
       "\xA0",
       suffix
     ] })
@@ -3800,7 +3877,7 @@ function Balance(props) {
 }
 
 // src/components/molecules/wallet-header.tsx
-import { Fragment as Fragment11, jsx as jsx40, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx41, jsxs as jsxs29 } from "react/jsx-runtime";
 var WalletHeaderContext = React14.createContext(null);
 function useWalletHeader() {
   const context = React14.useContext(WalletHeaderContext);
@@ -3846,7 +3923,7 @@ var WalletHeader = React14.forwardRef(
     React14.useEffect(() => {
       globalWalletHeaderState = show;
     }, [show]);
-    return /* @__PURE__ */ jsx40(WalletHeaderContext.Provider, { value: { show, setShow }, children: /* @__PURE__ */ jsx40(
+    return /* @__PURE__ */ jsx41(WalletHeaderContext.Provider, { value: { show, setShow }, children: /* @__PURE__ */ jsx41(
       Comp,
       __spreadProps(__spreadValues({
         ref,
@@ -3862,7 +3939,7 @@ WalletHeader.displayName = "WalletHeader";
 var WalletConnectedHeader = React14.forwardRef((_a, ref) => {
   var _b = _a, { className, accounts, children } = _b, props = __objRest(_b, ["className", "accounts", "children"]);
   const { show: open, setShow } = useWalletHeader();
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx41(
     "button",
     __spreadProps(__spreadValues({
       ref,
@@ -3876,9 +3953,9 @@ var WalletConnectedHeader = React14.forwardRef((_a, ref) => {
       ),
       onClick: () => setShow((e) => !e)
     }, props), {
-      children: /* @__PURE__ */ jsxs28("div", { className: "flex w-full gap-2 justify-between items-center", children: [
-        children || /* @__PURE__ */ jsx40(AccountStack, { accounts }),
-        /* @__PURE__ */ jsx40(
+      children: /* @__PURE__ */ jsxs29("div", { className: "flex w-full gap-2 justify-between items-center", children: [
+        children || /* @__PURE__ */ jsx41(AccountStack, { accounts }),
+        /* @__PURE__ */ jsx41(
           IconButton,
           {
             variant: "level_1",
@@ -3887,7 +3964,7 @@ var WalletConnectedHeader = React14.forwardRef((_a, ref) => {
             rounded: "full",
             size: "sm",
             asChild: true,
-            children: /* @__PURE__ */ jsx40("span", { children: /* @__PURE__ */ jsx40(ChevronBottomDown_default, {}) })
+            children: /* @__PURE__ */ jsx41("span", { children: /* @__PURE__ */ jsx41(ChevronBottomDown_default, {}) })
           }
         )
       ] })
@@ -3959,7 +4036,7 @@ var WalletHeaderContent = React14.forwardRef((_a, _ref) => {
     "onTransitionRun",
     "onTransitionCancel"
   ]);
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx41(
     motion5.div,
     {
       ref: parentRef,
@@ -3968,7 +4045,7 @@ var WalletHeaderContent = React14.forwardRef((_a, _ref) => {
       className: cn("z-10 relative", {
         "pointer-events-none": !open
       }),
-      children: /* @__PURE__ */ jsx40(
+      children: /* @__PURE__ */ jsx41(
         motion5.div,
         __spreadProps(__spreadValues({
           ref: containerRef,
@@ -3991,15 +4068,15 @@ WalletHeaderContent.displayName = "WalletHeaderContent";
 var AccountStack = React14.forwardRef(
   ({ accounts = [] }, ref) => {
     var _a, _b;
-    return /* @__PURE__ */ jsx40("div", { ref, className: "flex gap-[0.625rem] items-center", children: accounts.length > 0 ? /* @__PURE__ */ jsxs28(React14.Fragment, { children: [
-      /* @__PURE__ */ jsx40("div", { className: "inline-flex -space-x-[0.3125rem]", children: accounts.map((account, index) => /* @__PURE__ */ jsx40(
+    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(
         "div",
         {
           style: {
             zIndex: accounts.length - index,
             position: "relative"
           },
-          children: /* @__PURE__ */ jsx40(
+          children: /* @__PURE__ */ jsx41(
             BadgeIcon,
             {
               outline: true,
@@ -4013,15 +4090,15 @@ var AccountStack = React14.forwardRef(
         },
         account.address
       )) }),
-      /* @__PURE__ */ jsxs28("span", { className: "flex flex-col whitespace-nowrap", children: [
-        /* @__PURE__ */ jsx40("span", { className: "text-base font-medium h-[1.25rem] text-brand-white-500", children: accounts.length > 1 ? /* @__PURE__ */ jsxs28(Fragment11, { children: [
+      /* @__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: [
           accounts.length,
           " wallets"
-        ] }) : /* @__PURE__ */ jsx40(Fragment11, { children: shortenAccountAddress((_b = (_a = accounts[0]) == null ? void 0 : _a.address) != null ? _b : "") || "--" }) }),
-        /* @__PURE__ */ jsx40("span", { className: "text-xs text-start h-[1rem] font-medium inline-flex items-center gap-[0.125rem] text-brand-black-100", children: "Connected" })
+        ] }) : /* @__PURE__ */ 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__ */ jsxs28("div", { className: "flex items-center gap-[0.625rem] select-none", children: [
-      /* @__PURE__ */ jsx40(
+    ] }) : /* @__PURE__ */ jsxs29("div", { className: "flex items-center gap-[0.625rem] select-none", children: [
+      /* @__PURE__ */ jsx41(
         IconButton,
         {
           disabled: true,
@@ -4029,22 +4106,22 @@ var AccountStack = React14.forwardRef(
           variant: "level_2",
           rounded: "full",
           size: "sm",
-          children: /* @__PURE__ */ jsx40(Wallet_default, { className: "size-5" })
+          children: /* @__PURE__ */ jsx41(Wallet_default, { className: "size-5" })
         }
       ),
-      /* @__PURE__ */ jsx40("p", { className: "text-base font-medium text-brand-white-100", children: "Connect Your Wallet" })
+      /* @__PURE__ */ jsx41("p", { className: "text-base font-medium text-brand-white-100", children: "Select an account" })
     ] }) });
   }
 );
 AccountStack.displayName = "AccountStack";
 var WalletHeaderTabs = React14.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ jsx40(Tabs, __spreadProps(__spreadValues({ ref, className: cn("gap-0 pt-3", className) }, props), { children }));
+  return /* @__PURE__ */ jsx41(Tabs, __spreadProps(__spreadValues({ ref, className: cn("gap-0 pt-3", className) }, props), { children }));
 });
 WalletHeaderTabs.displayName = "WalletHeaderTabs";
 var WalletHeaderTabsList = React14.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx41(
     TabsList2,
     __spreadProps(__spreadValues({
       ref,
@@ -4057,7 +4134,7 @@ var WalletHeaderTabsList = React14.forwardRef((_a, ref) => {
 WalletHeaderTabsList.displayName = "WalletHeaderTabsList";
 var WalletHeaderTabItem = React14.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx41(
     TabItem,
     __spreadProps(__spreadValues({
       ref,
@@ -4073,7 +4150,7 @@ var WalletHeaderTabItem = React14.forwardRef((_a, ref) => {
 WalletHeaderTabItem.displayName = "WalletHeaderTabItem";
 var WalletHeaderTabsContent = React14.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx41(
     TabsContent,
     __spreadProps(__spreadValues({
       ref,
@@ -4088,7 +4165,7 @@ var WalletHeaderContentBlur = React14.forwardRef((_a, ref) => {
   var _b = _a, { className, children, asChild = false } = _b, props = __objRest(_b, ["className", "children", "asChild"]);
   const { show: open } = useWalletHeader();
   const Comp = asChild ? Slot10 : "div";
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx41(
     Comp,
     __spreadProps(__spreadValues({
       ref,
@@ -4107,15 +4184,15 @@ var WalletHeaderContentBlur = React14.forwardRef((_a, ref) => {
 WalletHeaderContentBlur.displayName = "WalletHeaderContentBlur";
 
 // src/components/navigation/header.tsx
-import { jsx as jsx41 } from "react/jsx-runtime";
+import { jsx as jsx42 } from "react/jsx-runtime";
 function HeaderGradient() {
-  return /* @__PURE__ */ jsx41("div", { className: "absolute inset-0 h-[3px] bg-gradient-brand-animated" });
+  return /* @__PURE__ */ jsx42("div", { className: "absolute inset-0 h-[3px] bg-gradient-brand-animated" });
 }
 function HeaderContent({
   children,
   className
 }) {
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx42(
     "div",
     {
       className: cn(
@@ -4130,7 +4207,7 @@ function Header({
   children,
   className
 }) {
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx42(
     "header",
     {
       className: cn(
@@ -4143,7 +4220,7 @@ function Header({
 }
 
 // src/components/navigation/tabs.tsx
-import { jsx as jsx42, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs30 } from "react/jsx-runtime";
 function TabAltHeader({
   label,
   isNew,
@@ -4151,7 +4228,7 @@ function TabAltHeader({
   onClick,
   className = ""
 }) {
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx43(
     "button",
     {
       type: "button",
@@ -4161,9 +4238,9 @@ function TabAltHeader({
         isActive ? "text-white" : "text-brand-black-100 hover:text-white",
         className
       ),
-      children: /* @__PURE__ */ jsxs29("span", { className: "relative z-10 flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx42("span", { className: "font-medium", children: label }),
-        isNew && /* @__PURE__ */ jsx42("span", { className: "text-brand-warning-500 caption-text absolute top-0 left-[100%] w-max", children: "New" })
+      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" })
       ] })
     }
   );
@@ -4172,13 +4249,13 @@ function TabAltHeaders({
   children,
   className = ""
 }) {
-  return /* @__PURE__ */ jsx42("div", { className: cn("flex space-x-3 mb-6", className), children });
+  return /* @__PURE__ */ jsx43("div", { className: cn("flex space-x-3 mb-6", className), children });
 }
 function TabAltContent({
   children,
   className = ""
 }) {
-  return /* @__PURE__ */ jsx42("div", { className, children });
+  return /* @__PURE__ */ jsx43("div", { className, children });
 }
 function TabAltPanel({
   id,
@@ -4187,66 +4264,13 @@ function TabAltPanel({
   className = ""
 }) {
   if (activeTab !== id) return null;
-  return /* @__PURE__ */ jsx42("div", { className, children }, id);
+  return /* @__PURE__ */ jsx43("div", { className, children }, id);
 }
 function TabAlt({
   children,
   className = ""
 }) {
-  return /* @__PURE__ */ jsx42("div", { className: cn("w-full", className), children });
-}
-
-// src/@/ui/tooltip.tsx
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { jsx as jsx43, jsxs as jsxs30 } from "react/jsx-runtime";
-function TooltipProvider(_a) {
-  var _b = _a, {
-    delayDuration = 0
-  } = _b, props = __objRest(_b, [
-    "delayDuration"
-  ]);
-  return /* @__PURE__ */ jsx43(
-    TooltipPrimitive.Provider,
-    __spreadValues({
-      "data-slot": "tooltip-provider",
-      delayDuration
-    }, props)
-  );
-}
-function Tooltip(_a) {
-  var props = __objRest(_a, []);
-  return /* @__PURE__ */ jsx43(TooltipProvider, { children: /* @__PURE__ */ jsx43(TooltipPrimitive.Root, __spreadValues({ "data-slot": "tooltip" }, props)) });
-}
-function TooltipTrigger(_a) {
-  var props = __objRest(_a, []);
-  return /* @__PURE__ */ jsx43(TooltipPrimitive.Trigger, __spreadValues({ "data-slot": "tooltip-trigger" }, props));
-}
-function TooltipContent(_a) {
-  var _b = _a, {
-    className,
-    sideOffset = 0,
-    children
-  } = _b, props = __objRest(_b, [
-    "className",
-    "sideOffset",
-    "children"
-  ]);
-  return /* @__PURE__ */ jsx43(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs30(
-    TooltipPrimitive.Content,
-    __spreadProps(__spreadValues({
-      "data-slot": "tooltip-content",
-      sideOffset,
-      className: cn(
-        "bg-brand-black-600 text-brand-black-100 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
-        className
-      )
-    }, props), {
-      children: [
-        children,
-        /* @__PURE__ */ jsx43(TooltipPrimitive.Arrow, { className: "bg-brand-black-600 fill-brand-black-600 z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })
-      ]
-    })
-  ) });
+  return /* @__PURE__ */ jsx43("div", { className: cn("w-full", className), children });
 }
 
 // src/components/organisms/settings.tsx
@@ -4682,6 +4706,10 @@ function HBDrawerDescription(_a) {
 // src/components/organisms/manage-account.tsx
 import { jsx as jsx48, jsxs as jsxs34 } 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(
@@ -5232,6 +5260,7 @@ export {
   HBDrawerTitle,
   HBDrawerTrigger,
   Header,
+  HeaderChooseProvider,
   HeaderContent,
   HeaderGradient,
   HeaderNested,

package/package.json

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