@hyperbridge/ui 0.0.12 → 0.0.14

package/dist/index.d.mts

@@ -557,9 +557,6 @@ declare const SummaryValues: {
     };
 };
 
-declare function TimelineList(props: {
-    children: React__default.ReactNode;
-}): react_jsx_runtime.JSX.Element;
 type TimePrefix = "min" | "second" | "hours";
 type EstimatedTimeFormatted = `${number} ${TimePrefix | `${TimePrefix}s`}` | "";
 type Prettify<T> = {
@@ -574,7 +571,7 @@ type Level = {
 type TimelineData = {
     processingStatus: "processing";
     data: {
-        eta: string;
+        eta: React__default.ReactNode;
     };
 } | {
     processingStatus: "upcoming" | "error";
@@ -594,6 +591,9 @@ declare function TimelineItem(props: TimelineItemProps): react_jsx_runtime.JSX.E
 declare function TimelineListGroup(props: {
     children: React__default.ReactNode;
 }): react_jsx_runtime.JSX.Element;
+declare function TimelineList(props: {
+    children: React__default.ReactNode;
+}): react_jsx_runtime.JSX.Element;
 declare const TimelineRoot: React__default.ForwardRefExoticComponent<Omit<React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & React__default.RefAttributes<HTMLUListElement>>;
 type TimerProps = {
     hours: number;
@@ -601,6 +601,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: {

package/dist/index.mjs

@@ -3244,11 +3244,61 @@ 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 TimelineList(props) {
-  return /* @__PURE__ */ jsx35("ul", { className: "flex flex-col", children: props.children });
+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",
@@ -3261,12 +3311,12 @@ function TimelineItem(props) {
   const id = React13.useId();
   const layoutId = `${id}/${caption}/content-2`;
   const hideTime = durationMode === "none";
-  return /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx36(
     motion3.li,
     {
       "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 },
@@ -3275,7 +3325,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",
@@ -3285,7 +3335,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(
@@ -3299,9 +3349,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" ? ((_a = props.data) == null ? void 0 : _a.transactionUrl) ? /* @__PURE__ */ jsxs25(
                 "a",
                 {
                   href: props.data.transactionUrl,
@@ -3309,14 +3359,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: (_b = props == null ? void 0 : props.secondary) != null ? _b : StatusTextMap[processingStatus] }) })
             ] }),
-            /* @__PURE__ */ jsxs24(AnimatePresence2, { children: [
-              processingStatus === "completed" ? /* @__PURE__ */ jsxs24(
+            /* @__PURE__ */ jsxs25(AnimatePresence2, { children: [
+              processingStatus === "completed" ? /* @__PURE__ */ jsxs25(
                 motion3.div,
                 {
                   layoutId,
@@ -3325,8 +3375,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: (_c = props == null ? void 0 : props.data) == null ? void 0 : _c.completedIn }),
+                    /* @__PURE__ */ jsx36(
                       Check_default,
                       {
                         height: "1rem",
@@ -3337,7 +3387,7 @@ function TimelineItem(props) {
                   ]
                 }
               ) : null,
-              processingStatus === "processing" ? /* @__PURE__ */ jsxs24(
+              processingStatus === "processing" ? /* @__PURE__ */ jsxs25(
                 motion3.div,
                 {
                   initial: { x: 10, opacity: 0 },
@@ -3346,11 +3396,8 @@ function TimelineItem(props) {
                   layoutId,
                   className: "flex gap-[calc(10rem/16)] items-center",
                   children: [
-                    !hideTime && /* @__PURE__ */ jsxs24("span", { className: "text-[calc(13rem/16)]", children: [
-                      "~ ",
-                      (_d = props == null ? void 0 : props.data) == null ? void 0 : _d.eta
-                    ] }),
-                    /* @__PURE__ */ jsx35(
+                    !hideTime && /* @__PURE__ */ jsx36("span", { className: "text-[calc(13rem/16)]", children: (_d = props == null ? void 0 : props.data) == null ? void 0 : _d.eta }),
+                    /* @__PURE__ */ jsx36(
                       Loader2,
                       {
                         size: "1rem",
@@ -3368,10 +3415,13 @@ 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__ */ 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
@@ -3390,9 +3440,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(
@@ -3403,19 +3460,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,
@@ -3429,7 +3489,7 @@ function TransactionTimer(props) {
 }
 function TimerWrap(props) {
   const show = props.reveal;
-  return /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsxs25(
     motion3.div,
     {
       initial: { paddingTop: 0 },
@@ -3439,7 +3499,7 @@ function TimerWrap(props) {
       },
       className: "flex flex-col items-stretch justify-start relative",
       children: [
-        /* @__PURE__ */ jsx35(
+        /* @__PURE__ */ jsx36(
           "div",
           {
             className: cn(
@@ -3449,7 +3509,7 @@ function TimerWrap(props) {
             children: props.Timer
           }
         ),
-        /* @__PURE__ */ jsx35(
+        /* @__PURE__ */ jsx36(
           Slot9,
           {
             className: cn("min-h-[calc(56rem/11)] z-20 relative !rounded-[1rem]", {
@@ -3464,7 +3524,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,
@@ -3490,23 +3550,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",
@@ -3515,9 +3575,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",
@@ -3525,10 +3585,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",
@@ -3545,10 +3605,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",
@@ -3556,8 +3616,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,
@@ -3565,48 +3625,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]" })
                     }
                   )
                 ]
@@ -3620,7 +3680,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",
@@ -3628,15 +3688,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 })
         ] })
       ] })
     })
@@ -3646,18 +3706,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",
@@ -3665,13 +3725,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
@@ -3685,14 +3745,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",
@@ -3706,7 +3766,7 @@ function TabsContent(_a) {
   } = _b, props = __objRest(_b, [
     "className"
   ]);
-  return /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx39(
     TabsPrimitive.Content,
     __spreadValues({
       "data-slot": "tabs-content",
@@ -3716,12 +3776,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,
@@ -3734,7 +3794,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",
@@ -3743,7 +3803,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",
@@ -3754,13 +3814,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,
             "%)"
@@ -3778,8 +3838,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(
@@ -3791,11 +3851,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
     ] })
@@ -3803,7 +3863,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);
@@ -3849,7 +3909,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,
@@ -3865,7 +3925,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,
@@ -3879,9 +3939,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",
@@ -3890,7 +3950,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, {}) })
           }
         )
       ] })
@@ -3962,7 +4022,7 @@ var WalletHeaderContent = React14.forwardRef((_a, _ref) => {
     "onTransitionRun",
     "onTransitionCancel"
   ]);
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx41(
     motion5.div,
     {
       ref: parentRef,
@@ -3971,7 +4031,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,
@@ -3994,15 +4054,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,
@@ -4016,15 +4076,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,
@@ -4032,22 +4092,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: "Connect Your Wallet" })
     ] }) });
   }
 );
 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,
@@ -4060,7 +4120,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,
@@ -4076,7 +4136,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,
@@ -4091,7 +4151,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,
@@ -4110,15 +4170,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(
@@ -4133,7 +4193,7 @@ function Header({
   children,
   className
 }) {
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx42(
     "header",
     {
       className: cn(
@@ -4146,7 +4206,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,
@@ -4154,7 +4214,7 @@ function TabAltHeader({
   onClick,
   className = ""
 }) {
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx43(
     "button",
     {
       type: "button",
@@ -4164,9 +4224,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" })
       ] })
     }
   );
@@ -4175,13 +4235,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,
@@ -4190,66 +4250,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

package/package.json

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