@hyperbridge/ui 0.0.14 → 0.0.16

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;
@@ -652,9 +653,9 @@ declare function AssetValueTrend(props: {
     dollarValue: number;
 }): react_jsx_runtime.JSX.Element;
 declare function Balance(props: {
+    amount: number;
     prefix?: string;
     suffix?: string;
-    amount: number;
     formatter?: Intl.NumberFormat;
 }): react_jsx_runtime.JSX.Element;
 
@@ -761,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;
 
@@ -792,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: {
@@ -936,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
       ]
     }
   );
@@ -3304,16 +3304,30 @@ var StatusTextMap = {
   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__ */ 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__ */ jsxs25(
@@ -3351,7 +3365,7 @@ function TimelineItem(props) {
             ),
             /* @__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" ? ((_a = props.data) == null ? void 0 : _a.transactionUrl) ? /* @__PURE__ */ jsxs25(
+              /* @__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,
@@ -3363,7 +3377,7 @@ function TimelineItem(props) {
                     /* @__PURE__ */ jsx36(ArrowUpRight_default, { width: "0.75rem", height: "0.75rem" })
                   ]
                 }
-              ) : /* @__PURE__ */ jsx36("span", { children: props.secondary }) : /* @__PURE__ */ jsx36("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__ */ jsxs25(AnimatePresence2, { children: [
               processingStatus === "completed" ? /* @__PURE__ */ jsxs25(
@@ -3375,7 +3389,7 @@ function TimelineItem(props) {
                   exit: { x: 10, opacity: 0 },
                   className: "flex gap-[calc(8rem/16)] items-center",
                   children: [
-                    !hideTime && /* @__PURE__ */ jsx36("span", { className: "text-[calc(13rem/16)] text-brand-black-100", children: (_c = props == null ? void 0 : props.data) == null ? void 0 : _c.completedIn }),
+                    !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,
                       {
@@ -3396,7 +3410,7 @@ function TimelineItem(props) {
                   layoutId,
                   className: "flex gap-[calc(10rem/16)] items-center",
                   children: [
-                    !hideTime && /* @__PURE__ */ jsx36("span", { className: "text-[calc(13rem/16)]", children: (_d = props == null ? void 0 : props.data) == null ? void 0 : _d.eta }),
+                    !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,
                       {
@@ -3411,9 +3425,9 @@ function TimelineItem(props) {
           ]
         }
       )
-    }
+    })
   );
-}
+});
 function TimelineListGroup(props) {
   return /* @__PURE__ */ jsx36("ul", { className: cn("flex flex-col overflow-hidden"), children: props.children });
 }
@@ -3835,9 +3849,8 @@ var currencyFormat = new Intl.NumberFormat("en-US", {
 });
 function Balance(props) {
   const { prefix = "$", suffix = "", formatter = currencyFormat } = props;
-  const [int_, decimal] = String(props.amount).split(".");
-  const int = Number.isNaN(+int_) ? 0 : int_;
   const is_zero = props.amount === 0;
+  const [int_, fraction] = formatter.format(props.amount).split(".");
   return /* @__PURE__ */ jsx40("div", { className: "select-none", children: /* @__PURE__ */ jsxs28("span", { className: "text-[2.375rem] font-medium leading-[2.875rem] whitespace-nowrap", children: [
     /* @__PURE__ */ jsxs28(
       "span",
@@ -3847,13 +3860,13 @@ function Balance(props) {
         ),
         children: [
           prefix,
-          formatter.format(+int)
+          int_
         ]
       }
     ),
     /* @__PURE__ */ jsxs28("span", { className: "text-brand-black-100", children: [
       ".",
-      decimal != null ? decimal : "00"
+      fraction != null ? fraction : "00"
     ] }),
     /* @__PURE__ */ jsxs28("span", { className: "text-brand-white-500", children: [
       "\xA0",
@@ -4095,7 +4108,7 @@ var AccountStack = React14.forwardRef(
           children: /* @__PURE__ */ jsx41(Wallet_default, { className: "size-5" })
         }
       ),
-      /* @__PURE__ */ jsx41("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" })
     ] }) });
   }
 );
@@ -4692,6 +4705,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(
@@ -5242,6 +5259,7 @@ export {
   HBDrawerTitle,
   HBDrawerTrigger,
   Header,
+  HeaderChooseProvider,
   HeaderContent,
   HeaderGradient,
   HeaderNested,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperbridge/ui",
-  "version": "0.0.14",
+  "version": "0.0.16",
   "sideEffects": false,
   "license": "MIT",
   "private": false,
@@ -33,8 +33,8 @@
     "typescript": "5.8.3",
     "vite": "^6.3.4",
     "vitest": "^3.1.2",
-    "@repo/eslint-config": "0.0.0",
-    "@repo/typescript-config": "0.0.0"
+    "@repo/typescript-config": "0.0.0",
+    "@repo/eslint-config": "0.0.0"
   },
   "dependencies": {
     "@radix-ui/react-dialog": "^1.1.14",