@hyperbridge/ui 0.0.5 → 0.0.7

package/dist/{chunk-WFUCFRU6.mjs → chunk-DO43LZ75.mjs}

@@ -901,10 +901,10 @@ var SvgLoader = (props) => /* @__PURE__ */ jsxs3(
 var Memo30 = memo30(SvgLoader);
 var Loader_default = Memo30;
 
-// src/components/icons/Menu.tsx
+// src/components/icons/Mainnet.tsx
 import { memo as memo31 } from "react";
 import { jsx as jsx31 } from "react/jsx-runtime";
-var SvgMenu = (props) => /* @__PURE__ */ jsx31(
+var SvgMainnet = (props) => /* @__PURE__ */ jsx31(
   "svg",
   __spreadProps(__spreadValues({
     width: "1em",
@@ -914,6 +914,30 @@ var SvgMenu = (props) => /* @__PURE__ */ jsx31(
     xmlns: "http://www.w3.org/2000/svg"
   }, props), {
     children: /* @__PURE__ */ jsx31(
+      "path",
+      {
+        d: "M15 4.5a3.5 3.5 0 1 0-7 0A3.5 3.5 0 1 0 4.5 8 3.5 3.5 0 1 0 8 11.5 3.5 3.5 0 1 0 11.501 8 3.5 3.5 0 0 0 15 4.5Z",
+        fill: "currentColor"
+      }
+    )
+  })
+);
+var Memo31 = memo31(SvgMainnet);
+var Mainnet_default = Memo31;
+
+// src/components/icons/Menu.tsx
+import { memo as memo32 } from "react";
+import { jsx as jsx32 } from "react/jsx-runtime";
+var SvgMenu = (props) => /* @__PURE__ */ jsx32(
+  "svg",
+  __spreadProps(__spreadValues({
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), {
+    children: /* @__PURE__ */ jsx32(
       "path",
       {
         d: "M1.833 10.167h12.334M1.834 6h12.333",
@@ -925,13 +949,13 @@ var SvgMenu = (props) => /* @__PURE__ */ jsx31(
     )
   })
 );
-var Memo31 = memo31(SvgMenu);
-var Menu_default = Memo31;
+var Memo32 = memo32(SvgMenu);
+var Menu_default = Memo32;
 
 // src/components/icons/Pen.tsx
-import { memo as memo32 } from "react";
-import { jsx as jsx32 } from "react/jsx-runtime";
-var SvgPen = (props) => /* @__PURE__ */ jsx32(
+import { memo as memo33 } from "react";
+import { jsx as jsx33 } from "react/jsx-runtime";
+var SvgPen = (props) => /* @__PURE__ */ jsx33(
   "svg",
   __spreadProps(__spreadValues({
     width: "1em",
@@ -940,7 +964,7 @@ var SvgPen = (props) => /* @__PURE__ */ jsx32(
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, props), {
-    children: /* @__PURE__ */ jsx32(
+    children: /* @__PURE__ */ jsx33(
       "path",
       {
         d: "m9.486 3.951 2.563 2.563-6.14 6.134a4.82 4.82 0 0 1-2.001 1.202l-2.097.64a.244.244 0 0 1-.3-.301l.64-2.097a4.822 4.822 0 0 1 1.201-2.002l6.134-6.139Zm3.672-2.134 1.025 1.025c.396.397.421 1.024.074 1.45l-1.168 1.173-2.554-2.554 1.09-1.094a1.084 1.084 0 0 1 1.533 0Z",
@@ -949,13 +973,13 @@ var SvgPen = (props) => /* @__PURE__ */ jsx32(
     )
   })
 );
-var Memo32 = memo32(SvgPen);
-var Pen_default = Memo32;
+var Memo33 = memo33(SvgPen);
+var Pen_default = Memo33;
 
 // src/components/icons/Percent.tsx
-import { memo as memo33 } from "react";
-import { jsx as jsx33 } from "react/jsx-runtime";
-var SvgPercent = (props) => /* @__PURE__ */ jsx33(
+import { memo as memo34 } from "react";
+import { jsx as jsx34 } from "react/jsx-runtime";
+var SvgPercent = (props) => /* @__PURE__ */ jsx34(
   "svg",
   __spreadProps(__spreadValues({
     width: "1em",
@@ -964,7 +988,7 @@ var SvgPercent = (props) => /* @__PURE__ */ jsx33(
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, props), {
-    children: /* @__PURE__ */ jsx33(
+    children: /* @__PURE__ */ jsx34(
       "path",
       {
         fillRule: "evenodd",
@@ -975,13 +999,13 @@ var SvgPercent = (props) => /* @__PURE__ */ jsx33(
     )
   })
 );
-var Memo33 = memo33(SvgPercent);
-var Percent_default = Memo33;
+var Memo34 = memo34(SvgPercent);
+var Percent_default = Memo34;
 
 // src/components/icons/Plus.tsx
-import { memo as memo34 } from "react";
-import { jsx as jsx34 } from "react/jsx-runtime";
-var SvgPlus = (props) => /* @__PURE__ */ jsx34(
+import { memo as memo35 } from "react";
+import { jsx as jsx35 } from "react/jsx-runtime";
+var SvgPlus = (props) => /* @__PURE__ */ jsx35(
   "svg",
   __spreadProps(__spreadValues({
     width: "1em",
@@ -990,7 +1014,7 @@ var SvgPlus = (props) => /* @__PURE__ */ jsx34(
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, props), {
-    children: /* @__PURE__ */ jsx34(
+    children: /* @__PURE__ */ jsx35(
       "path",
       {
         fillRule: "evenodd",
@@ -1001,13 +1025,13 @@ var SvgPlus = (props) => /* @__PURE__ */ jsx34(
     )
   })
 );
-var Memo34 = memo34(SvgPlus);
-var Plus_default = Memo34;
+var Memo35 = memo35(SvgPlus);
+var Plus_default = Memo35;
 
 // src/components/icons/Power.tsx
-import { memo as memo35 } from "react";
-import { jsx as jsx35 } from "react/jsx-runtime";
-var SvgPower = (props) => /* @__PURE__ */ jsx35(
+import { memo as memo36 } from "react";
+import { jsx as jsx36 } from "react/jsx-runtime";
+var SvgPower = (props) => /* @__PURE__ */ jsx36(
   "svg",
   __spreadProps(__spreadValues({
     width: "1em",
@@ -1016,7 +1040,7 @@ var SvgPower = (props) => /* @__PURE__ */ jsx35(
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, props), {
-    children: /* @__PURE__ */ jsx35(
+    children: /* @__PURE__ */ jsx36(
       "path",
       {
         d: "M7.999 2v6m3.816-3.216a5.4 5.4 0 1 1-7.639 0",
@@ -1028,13 +1052,13 @@ var SvgPower = (props) => /* @__PURE__ */ jsx35(
     )
   })
 );
-var Memo35 = memo35(SvgPower);
-var Power_default = Memo35;
+var Memo36 = memo36(SvgPower);
+var Power_default = Memo36;
 
 // src/components/icons/RotateCcw.tsx
-import { memo as memo36 } from "react";
-import { jsx as jsx36 } from "react/jsx-runtime";
-var SvgRotateCcw = (props) => /* @__PURE__ */ jsx36(
+import { memo as memo37 } from "react";
+import { jsx as jsx37 } from "react/jsx-runtime";
+var SvgRotateCcw = (props) => /* @__PURE__ */ jsx37(
   "svg",
   __spreadProps(__spreadValues({
     width: "1em",
@@ -1043,7 +1067,7 @@ var SvgRotateCcw = (props) => /* @__PURE__ */ jsx36(
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, props), {
-    children: /* @__PURE__ */ jsx36(
+    children: /* @__PURE__ */ jsx37(
       "path",
       {
         d: "M2.827 9.833A5.502 5.502 0 0 0 13.514 8a5.5 5.5 0 0 0-5.5-5.5c-1.878 0-3.133.803-4.347 2.173m-.5-2.006v2.166a.5.5 0 0 0 .5.5h2.166",
@@ -1055,13 +1079,13 @@ var SvgRotateCcw = (props) => /* @__PURE__ */ jsx36(
     )
   })
 );
-var Memo36 = memo36(SvgRotateCcw);
-var RotateCcw_default = Memo36;
+var Memo37 = memo37(SvgRotateCcw);
+var RotateCcw_default = Memo37;
 
 // src/components/icons/Search.tsx
-import { memo as memo37 } from "react";
-import { jsx as jsx37 } from "react/jsx-runtime";
-var SvgSearch = (props) => /* @__PURE__ */ jsx37(
+import { memo as memo38 } from "react";
+import { jsx as jsx38 } from "react/jsx-runtime";
+var SvgSearch = (props) => /* @__PURE__ */ jsx38(
   "svg",
   __spreadProps(__spreadValues({
     width: "1em",
@@ -1070,7 +1094,7 @@ var SvgSearch = (props) => /* @__PURE__ */ jsx37(
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, props), {
-    children: /* @__PURE__ */ jsx37(
+    children: /* @__PURE__ */ jsx38(
       "path",
       {
         d: "m14 14-2.9-2.9m1.567-3.767A5.333 5.333 0 1 1 2 7.333a5.333 5.333 0 0 1 10.667 0Z",
@@ -1082,13 +1106,13 @@ var SvgSearch = (props) => /* @__PURE__ */ jsx37(
     )
   })
 );
-var Memo37 = memo37(SvgSearch);
-var Search_default = Memo37;
+var Memo38 = memo38(SvgSearch);
+var Search_default = Memo38;
 
 // src/components/icons/Server.tsx
-import { memo as memo38 } from "react";
-import { jsx as jsx38 } from "react/jsx-runtime";
-var SvgServer = (props) => /* @__PURE__ */ jsx38(
+import { memo as memo39 } from "react";
+import { jsx as jsx39 } from "react/jsx-runtime";
+var SvgServer = (props) => /* @__PURE__ */ jsx39(
   "svg",
   __spreadProps(__spreadValues({
     width: "1em",
@@ -1097,7 +1121,7 @@ var SvgServer = (props) => /* @__PURE__ */ jsx38(
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, props), {
-    children: /* @__PURE__ */ jsx38(
+    children: /* @__PURE__ */ jsx39(
       "path",
       {
         d: "M11.665 3.208c0-.44-.25-.78-.527-1.013-.28-.236-.65-.422-1.056-.567-.817-.292-1.907-.461-3.083-.461-1.177 0-2.267.169-3.084.46-.406.146-.776.332-1.055.568-.277.234-.528.574-.528 1.013v2.625c0 .44.251.78.528 1.014.28.235.65.422 1.055.567.817.292 1.907.46 3.084.46 1.176 0 2.266-.168 3.083-.46.406-.145.776-.332 1.055-.567.277-.234.528-.574.528-1.014V3.208Zm-8.052-.122a.437.437 0 0 0-.11.122c.01.02.037.06.11.122.133.113.362.241.695.36.66.236 1.612.393 2.69.393 1.08 0 2.03-.157 2.692-.393.333-.119.561-.247.695-.36a.436.436 0 0 0 .11-.122.436.436 0 0 0-.11-.122c-.134-.113-.362-.24-.695-.36-.661-.236-1.612-.393-2.691-.393-1.08 0-2.03.157-2.691.393-.333.12-.562.247-.695.36ZM10.475 8.512a4.906 4.906 0 0 0 1.19-.6v2.88c0 .44-.25.78-.527 1.013-.28.236-.65.422-1.056.567-.817.292-1.907.461-3.083.461-1.177 0-2.267-.17-3.084-.46-.406-.146-.776-.332-1.055-.568-.277-.234-.528-.574-.528-1.013v-2.88c.374.266.794.459 1.19.6.974.348 2.203.53 3.477.53s2.503-.182 3.476-.53Z",
@@ -1106,13 +1130,13 @@ var SvgServer = (props) => /* @__PURE__ */ jsx38(
     )
   })
 );
-var Memo38 = memo38(SvgServer);
-var Server_default = Memo38;
+var Memo39 = memo39(SvgServer);
+var Server_default = Memo39;
 
 // src/components/icons/SettingsGear.tsx
-import { memo as memo39 } from "react";
-import { jsx as jsx39 } from "react/jsx-runtime";
-var SvgSettingsGear = (props) => /* @__PURE__ */ jsx39(
+import { memo as memo40 } from "react";
+import { jsx as jsx40 } from "react/jsx-runtime";
+var SvgSettingsGear = (props) => /* @__PURE__ */ jsx40(
   "svg",
   __spreadProps(__spreadValues({
     width: "1em",
@@ -1121,7 +1145,7 @@ var SvgSettingsGear = (props) => /* @__PURE__ */ jsx39(
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, props), {
-    children: /* @__PURE__ */ jsx39(
+    children: /* @__PURE__ */ jsx40(
       "path",
       {
         fillRule: "evenodd",
@@ -1132,13 +1156,13 @@ var SvgSettingsGear = (props) => /* @__PURE__ */ jsx39(
     )
   })
 );
-var Memo39 = memo39(SvgSettingsGear);
-var SettingsGear_default = Memo39;
+var Memo40 = memo40(SvgSettingsGear);
+var SettingsGear_default = Memo40;
 
 // src/components/icons/Settings.tsx
-import { memo as memo40 } from "react";
-import { jsx as jsx40 } from "react/jsx-runtime";
-var SvgSettings = (props) => /* @__PURE__ */ jsx40(
+import { memo as memo41 } from "react";
+import { jsx as jsx41 } from "react/jsx-runtime";
+var SvgSettings = (props) => /* @__PURE__ */ jsx41(
   "svg",
   __spreadProps(__spreadValues({
     width: "1em",
@@ -1147,7 +1171,7 @@ var SvgSettings = (props) => /* @__PURE__ */ jsx40(
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, props), {
-    children: /* @__PURE__ */ jsx40(
+    children: /* @__PURE__ */ jsx41(
       "path",
       {
         fillRule: "evenodd",
@@ -1158,12 +1182,12 @@ var SvgSettings = (props) => /* @__PURE__ */ jsx40(
     )
   })
 );
-var Memo40 = memo40(SvgSettings);
-var Settings_default = Memo40;
+var Memo41 = memo41(SvgSettings);
+var Settings_default = Memo41;
 
 // src/components/icons/Shuffle.tsx
-import { memo as memo41 } from "react";
-import { jsx as jsx41, jsxs as jsxs4 } from "react/jsx-runtime";
+import { memo as memo42 } from "react";
+import { jsx as jsx42, jsxs as jsxs4 } from "react/jsx-runtime";
 var SvgShuffle = (props) => /* @__PURE__ */ jsxs4(
   "svg",
   __spreadProps(__spreadValues({
@@ -1174,14 +1198,14 @@ var SvgShuffle = (props) => /* @__PURE__ */ jsxs4(
     xmlns: "http://www.w3.org/2000/svg"
   }, props), {
     children: [
-      /* @__PURE__ */ jsx41(
+      /* @__PURE__ */ jsx42(
         "path",
         {
           d: "M10.98 3.646a.5.5 0 0 0 0 .708l.48.48H8.918c-.447 0-.855.255-1.05.657l-.14.29a.267.267 0 0 0 0 .232l.379.783c.049.1.191.1.24 0l.421-.869a.167.167 0 0 1 .15-.094h2.542l-.48.48a.5.5 0 0 0 .707.707l1.333-1.333a.5.5 0 0 0 0-.707l-1.333-1.334a.5.5 0 0 0-.707 0ZM6.69 10.219a.267.267 0 0 0 0-.232l-.38-.783a.133.133 0 0 0-.24 0l-.421.869a.167.167 0 0 1-.15.094H3.334a.5.5 0 1 0 0 1h2.165c.447 0 .855-.256 1.05-.658l.14-.29Z",
           fill: "currentColor"
         }
       ),
-      /* @__PURE__ */ jsx41(
+      /* @__PURE__ */ jsx42(
         "path",
         {
           d: "M10.98 12.354a.5.5 0 0 1 0-.708l.48-.48H8.918c-.447 0-.855-.255-1.05-.657L5.649 5.927a.167.167 0 0 0-.15-.094H3.334a.5.5 0 1 1 0-1h2.165c.447 0 .855.256 1.05.658l2.219 4.582a.167.167 0 0 0 .15.094h2.542l-.48-.48a.5.5 0 0 1 .707-.707l1.333 1.333a.5.5 0 0 1 0 .707l-1.333 1.334a.5.5 0 0 1-.707 0Z",
@@ -1191,13 +1215,13 @@ var SvgShuffle = (props) => /* @__PURE__ */ jsxs4(
     ]
   })
 );
-var Memo41 = memo41(SvgShuffle);
-var Shuffle_default = Memo41;
+var Memo42 = memo42(SvgShuffle);
+var Shuffle_default = Memo42;
 
 // src/components/icons/SquareArrowTopRight.tsx
-import { memo as memo42 } from "react";
-import { jsx as jsx42 } from "react/jsx-runtime";
-var SvgSquareArrowTopRight = (props) => /* @__PURE__ */ jsx42(
+import { memo as memo43 } from "react";
+import { jsx as jsx43 } from "react/jsx-runtime";
+var SvgSquareArrowTopRight = (props) => /* @__PURE__ */ jsx43(
   "svg",
   __spreadProps(__spreadValues({
     width: "1em",
@@ -1206,7 +1230,7 @@ var SvgSquareArrowTopRight = (props) => /* @__PURE__ */ jsx42(
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, props), {
-    children: /* @__PURE__ */ jsx42(
+    children: /* @__PURE__ */ jsx43(
       "path",
       {
         fillRule: "evenodd",
@@ -1217,13 +1241,13 @@ var SvgSquareArrowTopRight = (props) => /* @__PURE__ */ jsx42(
     )
   })
 );
-var Memo42 = memo42(SvgSquareArrowTopRight);
-var SquareArrowTopRight_default = Memo42;
+var Memo43 = memo43(SvgSquareArrowTopRight);
+var SquareArrowTopRight_default = Memo43;
 
 // src/components/icons/StepBack.tsx
-import { memo as memo43 } from "react";
-import { jsx as jsx43 } from "react/jsx-runtime";
-var SvgStepBack = (props) => /* @__PURE__ */ jsx43(
+import { memo as memo44 } from "react";
+import { jsx as jsx44 } from "react/jsx-runtime";
+var SvgStepBack = (props) => /* @__PURE__ */ jsx44(
   "svg",
   __spreadProps(__spreadValues({
     width: "1em",
@@ -1232,7 +1256,7 @@ var SvgStepBack = (props) => /* @__PURE__ */ jsx43(
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, props), {
-    children: /* @__PURE__ */ jsx43(
+    children: /* @__PURE__ */ jsx44(
       "path",
       {
         fillRule: "evenodd",
@@ -1243,13 +1267,46 @@ var SvgStepBack = (props) => /* @__PURE__ */ jsx43(
     )
   })
 );
-var Memo43 = memo43(SvgStepBack);
-var StepBack_default = Memo43;
+var Memo44 = memo44(SvgStepBack);
+var StepBack_default = Memo44;
+
+// src/components/icons/Testnet.tsx
+import { memo as memo45 } from "react";
+import { jsx as jsx45, jsxs as jsxs5 } from "react/jsx-runtime";
+var SvgTestnet = (props) => /* @__PURE__ */ jsxs5(
+  "svg",
+  __spreadProps(__spreadValues({
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), {
+    children: [
+      /* @__PURE__ */ jsx45(
+        "path",
+        {
+          d: "M11.12 3.12a3.12 3.12 0 1 1-6.24 0 3.12 3.12 0 0 1 6.24 0ZM11.12 12.88a3.12 3.12 0 1 1-6.24 0 3.12 3.12 0 0 1 6.24 0ZM12.88 11.12a3.12 3.12 0 1 1 0-6.24 3.12 3.12 0 0 1 0 6.24Z",
+          fill: "#929DAA"
+        }
+      ),
+      /* @__PURE__ */ jsx45(
+        "path",
+        {
+          d: "M3.12 11.12a3.12 3.12 0 1 1 0-6.24 3.12 3.12 0 0 1 0 6.24Z",
+          fill: "currentColor"
+        }
+      )
+    ]
+  })
+);
+var Memo45 = memo45(SvgTestnet);
+var Testnet_default = Memo45;
 
 // src/components/icons/Transfer.tsx
-import { memo as memo44 } from "react";
-import { jsx as jsx44 } from "react/jsx-runtime";
-var SvgTransfer = (props) => /* @__PURE__ */ jsx44(
+import { memo as memo46 } from "react";
+import { jsx as jsx46 } from "react/jsx-runtime";
+var SvgTransfer = (props) => /* @__PURE__ */ jsx46(
   "svg",
   __spreadProps(__spreadValues({
     width: "1em",
@@ -1258,7 +1315,7 @@ var SvgTransfer = (props) => /* @__PURE__ */ jsx44(
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, props), {
-    children: /* @__PURE__ */ jsx44(
+    children: /* @__PURE__ */ jsx46(
       "path",
       {
         d: "M3 6.538 5.96 4v8.459M12.23 9.923l-2.96 2.538V4.002",
@@ -1270,13 +1327,13 @@ var SvgTransfer = (props) => /* @__PURE__ */ jsx44(
     )
   })
 );
-var Memo44 = memo44(SvgTransfer);
-var Transfer_default = Memo44;
+var Memo46 = memo46(SvgTransfer);
+var Transfer_default = Memo46;
 
 // src/components/icons/Trash.tsx
-import { memo as memo45 } from "react";
-import { jsx as jsx45 } from "react/jsx-runtime";
-var SvgTrash = (props) => /* @__PURE__ */ jsx45(
+import { memo as memo47 } from "react";
+import { jsx as jsx47 } from "react/jsx-runtime";
+var SvgTrash = (props) => /* @__PURE__ */ jsx47(
   "svg",
   __spreadProps(__spreadValues({
     width: "1em",
@@ -1285,7 +1342,7 @@ var SvgTrash = (props) => /* @__PURE__ */ jsx45(
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, props), {
-    children: /* @__PURE__ */ jsx45(
+    children: /* @__PURE__ */ jsx47(
       "path",
       {
         d: "m3.333 4.333.582 8.426c.048.699.629 1.241 1.33 1.241h5.51c.701 0 1.283-.542 1.33-1.241l.582-8.426M2.333 4h11.334M5.38 3.83a2.668 2.668 0 0 1 5.24 0",
@@ -1297,13 +1354,13 @@ var SvgTrash = (props) => /* @__PURE__ */ jsx45(
     )
   })
 );
-var Memo45 = memo45(SvgTrash);
-var Trash_default = Memo45;
+var Memo47 = memo47(SvgTrash);
+var Trash_default = Memo47;
 
 // src/components/icons/Wallet.tsx
-import { memo as memo46 } from "react";
-import { jsx as jsx46 } from "react/jsx-runtime";
-var SvgWallet = (props) => /* @__PURE__ */ jsx46(
+import { memo as memo48 } from "react";
+import { jsx as jsx48 } from "react/jsx-runtime";
+var SvgWallet = (props) => /* @__PURE__ */ jsx48(
   "svg",
   __spreadProps(__spreadValues({
     width: "1em",
@@ -1312,7 +1369,7 @@ var SvgWallet = (props) => /* @__PURE__ */ jsx46(
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, props), {
-    children: /* @__PURE__ */ jsx46(
+    children: /* @__PURE__ */ jsx48(
       "path",
       {
         fillRule: "evenodd",
@@ -1323,13 +1380,13 @@ var SvgWallet = (props) => /* @__PURE__ */ jsx46(
     )
   })
 );
-var Memo46 = memo46(SvgWallet);
-var Wallet_default = Memo46;
+var Memo48 = memo48(SvgWallet);
+var Wallet_default = Memo48;
 
 // src/components/icons/XCircle.tsx
-import { memo as memo47 } from "react";
-import { jsx as jsx47 } from "react/jsx-runtime";
-var SvgXCircle = (props) => /* @__PURE__ */ jsx47(
+import { memo as memo49 } from "react";
+import { jsx as jsx49 } from "react/jsx-runtime";
+var SvgXCircle = (props) => /* @__PURE__ */ jsx49(
   "svg",
   __spreadProps(__spreadValues({
     width: "1em",
@@ -1338,7 +1395,7 @@ var SvgXCircle = (props) => /* @__PURE__ */ jsx47(
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, props), {
-    children: /* @__PURE__ */ jsx47(
+    children: /* @__PURE__ */ jsx49(
       "path",
       {
         d: "M8 1a7 7 0 1 1 0 14A7 7 0 0 1 8 1Zm2.948 4.054a.673.673 0 0 0-.95-.001L8.001 7.05 6.003 5.052l-.105-.086a.674.674 0 0 0-.931.931l.087.106L7.05 8 5.054 9.997a.672.672 0 0 0 .95.95L8 8.95l1.996 1.996.105.086a.672.672 0 0 0 .931-.93l-.086-.106L8.951 8l1.996-1.996a.673.673 0 0 0 .001-.95Z",
@@ -1347,13 +1404,13 @@ var SvgXCircle = (props) => /* @__PURE__ */ jsx47(
     )
   })
 );
-var Memo47 = memo47(SvgXCircle);
-var XCircle_default = Memo47;
+var Memo49 = memo49(SvgXCircle);
+var XCircle_default = Memo49;
 
 // src/components/icons/XIcon.tsx
-import { memo as memo48 } from "react";
-import { jsx as jsx48 } from "react/jsx-runtime";
-var SvgXIcon = (props) => /* @__PURE__ */ jsx48(
+import { memo as memo50 } from "react";
+import { jsx as jsx50 } from "react/jsx-runtime";
+var SvgXIcon = (props) => /* @__PURE__ */ jsx50(
   "svg",
   __spreadProps(__spreadValues({
     width: "1em",
@@ -1362,7 +1419,7 @@ var SvgXIcon = (props) => /* @__PURE__ */ jsx48(
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, props), {
-    children: /* @__PURE__ */ jsx48(
+    children: /* @__PURE__ */ jsx50(
       "path",
       {
         d: "m3.334 3.334 9.333 9.333m0-9.333-9.333 9.333",
@@ -1373,8 +1430,8 @@ var SvgXIcon = (props) => /* @__PURE__ */ jsx48(
     )
   })
 );
-var Memo48 = memo48(SvgXIcon);
-var XIcon_default = Memo48;
+var Memo50 = memo50(SvgXIcon);
+var XIcon_default = Memo50;
 
 export {
   __spreadValues,
@@ -1410,6 +1467,7 @@ export {
   Gas_default,
   History_default,
   Loader_default,
+  Mainnet_default,
   Menu_default,
   Pen_default,
   Percent_default,
@@ -1423,6 +1481,7 @@ export {
   Shuffle_default,
   SquareArrowTopRight_default,
   StepBack_default,
+  Testnet_default,
   Transfer_default,
   Trash_default,
   Wallet_default,

package/dist/icons/index.d.mts

@@ -2,6 +2,10 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { SVGProps } from 'react';
 
+declare const Memo$N: React.MemoExoticComponent<(props: SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element>;
+
+declare const Memo$M: React.MemoExoticComponent<(props: SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element>;
+
 declare const Memo$L: React.MemoExoticComponent<(props: SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element>;
 
 declare const Memo$K: React.MemoExoticComponent<(props: SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element>;
@@ -98,4 +102,4 @@ declare const Memo$1: React.MemoExoticComponent<(props: SVGProps<SVGSVGElement>)
 
 declare const Memo: React.MemoExoticComponent<(props: SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element>;
 
-export { Memo$L as Alert, Memo$K as ArrowBottomTop, Memo$H as ArrowRight, Memo$J as ArrowRightDownCircle, Memo$I as ArrowRightUpCircle, Memo$G as ArrowSplit, Memo$F as ArrowTopBottom, Memo$E as ArrowTriangleBottom, Memo$D as ArrowTriangleTop, Memo$C as ArrowUpRight, Memo$B as ArtifactNews, Memo$A as BrowserWindow, Memo$z as Check, Memo$y as ChevronBottomDown, Memo$x as ChevronBottomUp, Memo$w as ChevronDoubleRight, Memo$v as ChevronDownSmall, Memo$t as ChevronGrabberVertical, Memo$u as ChevronGrabberVertical1, Memo$p as Circle, Memo$s as CircleInfo, Memo$q as CirclePlaceholder, Memo$r as CirclePlaceholderDashed, Memo$o as Clock, Memo$n as Coins, Memo$m as Copy, Memo$l as Filter, Memo$k as Gas, Memo$j as History, Memo$i as Loader, Memo$h as Menu, Memo$g as Pen, Memo$f as Percent, Memo$e as Plus, Memo$d as Power, Memo$c as RotateCcw, Memo$b as Search, Memo$a as Server, Memo$8 as Settings, Memo$9 as SettingsGear, Memo$7 as Shuffle, Memo$6 as SquareArrowTopRight, Memo$5 as StepBack, Memo$4 as Transfer, Memo$3 as Trash, Memo$2 as Wallet, Memo$1 as XCircle, Memo as XIcon };
+export { Memo$N as Alert, Memo$M as ArrowBottomTop, Memo$J as ArrowRight, Memo$L as ArrowRightDownCircle, Memo$K as ArrowRightUpCircle, Memo$I as ArrowSplit, Memo$H as ArrowTopBottom, Memo$G as ArrowTriangleBottom, Memo$F as ArrowTriangleTop, Memo$E as ArrowUpRight, Memo$D as ArtifactNews, Memo$C as BrowserWindow, Memo$B as Check, Memo$A as ChevronBottomDown, Memo$z as ChevronBottomUp, Memo$y as ChevronDoubleRight, Memo$x as ChevronDownSmall, Memo$v as ChevronGrabberVertical, Memo$w as ChevronGrabberVertical1, Memo$r as Circle, Memo$u as CircleInfo, Memo$s as CirclePlaceholder, Memo$t as CirclePlaceholderDashed, Memo$q as Clock, Memo$p as Coins, Memo$o as Copy, Memo$n as Filter, Memo$m as Gas, Memo$l as History, Memo$k as Loader, Memo$j as Mainnet, Memo$i as Menu, Memo$h as Pen, Memo$g as Percent, Memo$f as Plus, Memo$e as Power, Memo$d as RotateCcw, Memo$c as Search, Memo$b as Server, Memo$9 as Settings, Memo$a as SettingsGear, Memo$8 as Shuffle, Memo$7 as SquareArrowTopRight, Memo$6 as StepBack, Memo$5 as Testnet, Memo$4 as Transfer, Memo$3 as Trash, Memo$2 as Wallet, Memo$1 as XCircle, Memo as XIcon };

package/dist/icons/index.mjs

@@ -29,6 +29,7 @@ import {
   Gas_default,
   History_default,
   Loader_default,
+  Mainnet_default,
   Menu_default,
   Pen_default,
   Percent_default,
@@ -42,12 +43,13 @@ import {
   Shuffle_default,
   SquareArrowTopRight_default,
   StepBack_default,
+  Testnet_default,
   Transfer_default,
   Trash_default,
   Wallet_default,
   XCircle_default,
   XIcon_default
-} from "../chunk-WFUCFRU6.mjs";
+} from "../chunk-DO43LZ75.mjs";
 export {
   Alert_default as Alert,
   ArrowBottomTop_default as ArrowBottomTop,
@@ -79,6 +81,7 @@ export {
   Gas_default as Gas,
   History_default as History,
   Loader_default as Loader,
+  Mainnet_default as Mainnet,
   Menu_default as Menu,
   Pen_default as Pen,
   Percent_default as Percent,
@@ -92,6 +95,7 @@ export {
   Shuffle_default as Shuffle,
   SquareArrowTopRight_default as SquareArrowTopRight,
   StepBack_default as StepBack,
+  Testnet_default as Testnet,
   Transfer_default as Transfer,
   Trash_default as Trash,
   Wallet_default as Wallet,

package/dist/index.d.mts

@@ -10,6 +10,7 @@ import * as motion_dist_react from 'motion/dist/react';
 import { Variants } from 'motion/react';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { Drawer as Drawer$1 } from 'vaul';
 
 interface SearchInputProps extends Omit<React.ComponentProps<"input">, "size"> {
@@ -886,6 +887,37 @@ declare function Tooltip({ ...props }: React$1.ComponentProps<typeof TooltipPrim
 declare function TooltipTrigger({ ...props }: React$1.ComponentProps<typeof TooltipPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
 declare function TooltipContent({ className, sideOffset, children, ...props }: React$1.ComponentProps<typeof TooltipPrimitive.Content>): react_jsx_runtime.JSX.Element;
 
+declare function DropdownMenu({ ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Root>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuPortal({ ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Portal>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuTrigger({ ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuContent({ className, sideOffset, ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Content>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuGroup({ ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Group>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuItem({ className, inset, variant, ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+    variant?: "default" | "destructive";
+}): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuCheckboxItem({ className, children, checked, ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuRadioGroup({ ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuRadioItem({ className, children, ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuLabel({ className, inset, ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuSeparator({ className, ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Separator>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuShortcut({ className, ...props }: React$1.ComponentProps<"span">): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuSub({ ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Sub>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuSubContent({ className, ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.SubContent>): react_jsx_runtime.JSX.Element;
+
+declare const badgeVariants: (props?: ({
+    size?: "sm" | null | undefined;
+    variant?: "default" | "outline" | "secondary" | "destructive" | "success" | null | undefined;
+} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
+declare function Badge({ className, variant, asChild, ...props }: React$1.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
+    asChild?: boolean;
+}): react_jsx_runtime.JSX.Element;
+
 declare function HBDrawer({ ...props }: React$1.ComponentProps<typeof Drawer$1.Root>): react_jsx_runtime.JSX.Element;
 declare function HBDrawerTrigger({ ...props }: React$1.ComponentProps<typeof Drawer$1.Trigger>): react_jsx_runtime.JSX.Element;
 declare function HBDrawerPortal({ ...props }: React$1.ComponentProps<typeof Drawer$1.Portal>): react_jsx_runtime.JSX.Element;
@@ -897,4 +929,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, 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, 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, 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, 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

@@ -29,7 +29,7 @@ import {
   __objRest,
   __spreadProps,
   __spreadValues
-} from "./chunk-WFUCFRU6.mjs";
+} from "./chunk-DO43LZ75.mjs";
 
 // src/components/atoms/search-input.tsx
 import { cva } from "class-variance-authority";
@@ -199,7 +199,7 @@ function BadgeIcon(props) {
             draggable: false,
             objectFit: "cover",
             className: cn(
-              "absolute inset-0 aspect-square h-full w-full rounded-full bg-white shrink-0",
+              "absolute inset-0 aspect-square h-full w-full rounded-full bg-transparent shrink-0",
               className,
               {
                 "border border-brand-black-600": outline
@@ -3060,7 +3060,7 @@ function DialogMorphContent(_a) {
       event.preventDefault();
     }
   };
-  const Content7 = /* @__PURE__ */ jsxs22(
+  const Content8 = /* @__PURE__ */ jsxs22(
     DialogPrimitive2.Content,
     __spreadProps(__spreadValues({
       onInteractOutside: handleInteractOutside,
@@ -3092,7 +3092,7 @@ function DialogMorphContent(_a) {
   );
   return /* @__PURE__ */ jsxs22(DialogPortal, { "data-slot": "dialog-portal", children: [
     /* @__PURE__ */ jsx31(DialogOverlay, {}),
-    mode === "card" ? /* @__PURE__ */ jsx31(SmoothCorners, { children: Content7 }) : /* @__PURE__ */ jsx31(Fragment7, { children: Content7 })
+    mode === "card" ? /* @__PURE__ */ jsx31(SmoothCorners, { children: Content8 }) : /* @__PURE__ */ jsx31(Fragment7, { children: Content8 })
   ] });
 }
 
@@ -3323,7 +3323,7 @@ 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 }),
+                    !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(
                       Check_default,
                       {
@@ -3344,7 +3344,7 @@ function TimelineItem(props) {
                   layoutId,
                   className: "flex gap-[calc(10rem/16)] items-center",
                   children: [
-                    hideTime && /* @__PURE__ */ jsxs24("span", { className: "text-[calc(13rem/16)]", children: [
+                    !hideTime && /* @__PURE__ */ jsxs24("span", { className: "text-[calc(13rem/16)]", children: [
                       "~ ",
                       (_d = props == null ? void 0 : props.data) == null ? void 0 : _d.eta
                     ] }),
@@ -3669,10 +3669,10 @@ function TxList({ children }) {
 }
 
 // src/components/molecules/wallet-header.tsx
-import * as React14 from "react";
-import { motion as motion5 } from "motion/react";
-import { cva as cva6 } from "class-variance-authority";
 import { Slot as Slot10 } from "@radix-ui/react-slot";
+import { cva as cva6 } from "class-variance-authority";
+import { motion as motion5 } from "motion/react";
+import * as React14 from "react";
 
 // src/components/organisms/assets-collection.tsx
 import * as Tab_ from "@radix-ui/react-tabs";
@@ -4003,7 +4003,8 @@ var AccountStack = React14.forwardRef(
               src: account.wallet.image,
               alt: account.wallet.name,
               badgeSrc: account.network.image,
-              badgeAlt: account.network.name
+              badgeAlt: account.network.name,
+              className: "bg-white"
             }
           )
         },
@@ -4755,7 +4756,7 @@ function CWDrawerContent(_a) {
     __spreadProps(__spreadValues({}, props), {
       side: "right",
       className: "h-full max-h-auto max-w-[calc(29.75rem_+_1.25rem)] select-none border-none shadow-none text-brand-white-500 w-full sm:w-[540px] bg-transparent p-[0.625rem]",
-      children: /* @__PURE__ */ jsx48("div", { className: "bg-brand-black-550 flex-1 flex flex-col rounded-[1rem] w-[23.75rem] px-[1rem]", children })
+      children: /* @__PURE__ */ jsx48("div", { className: "bg-brand-black-550 flex-1 flex flex-col rounded-[1rem] px-[1rem]", children })
     })
   );
 }
@@ -4891,6 +4892,279 @@ var SwapTokenItem = ({
     }
   );
 };
+
+// src/@/ui/dropdown-menu.tsx
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+import { jsx as jsx50, jsxs as jsxs36 } from "react/jsx-runtime";
+function DropdownMenu(_a) {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ jsx50(DropdownMenuPrimitive.Root, __spreadValues({ "data-slot": "dropdown-menu" }, props));
+}
+function DropdownMenuPortal(_a) {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ jsx50(DropdownMenuPrimitive.Portal, __spreadValues({ "data-slot": "dropdown-menu-portal" }, props));
+}
+function DropdownMenuTrigger(_a) {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ jsx50(
+    DropdownMenuPrimitive.Trigger,
+    __spreadValues({
+      "data-slot": "dropdown-menu-trigger"
+    }, props)
+  );
+}
+function DropdownMenuContent(_a) {
+  var _b = _a, {
+    className,
+    sideOffset = 4
+  } = _b, props = __objRest(_b, [
+    "className",
+    "sideOffset"
+  ]);
+  return /* @__PURE__ */ jsx50(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx50(
+    DropdownMenuPrimitive.Content,
+    __spreadValues({
+      "data-slot": "dropdown-menu-content",
+      sideOffset,
+      className: cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-xl p-1 shadow-md",
+        className
+      )
+    }, props)
+  ) });
+}
+function DropdownMenuGroup(_a) {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ jsx50(DropdownMenuPrimitive.Group, __spreadValues({ "data-slot": "dropdown-menu-group" }, props));
+}
+function DropdownMenuItem(_a) {
+  var _b = _a, {
+    className,
+    inset,
+    variant = "default"
+  } = _b, props = __objRest(_b, [
+    "className",
+    "inset",
+    "variant"
+  ]);
+  return /* @__PURE__ */ jsx50(
+    DropdownMenuPrimitive.Item,
+    __spreadValues({
+      "data-slot": "dropdown-menu-item",
+      "data-inset": inset,
+      "data-variant": variant,
+      className: cn(
+        "focus:bg-accent first:-mt-1 last:-mb-1 -mx-1 focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 px-2.5 py-3 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )
+    }, props)
+  );
+}
+function DropdownMenuCheckboxItem(_a) {
+  var _b = _a, {
+    className,
+    children,
+    checked
+  } = _b, props = __objRest(_b, [
+    "className",
+    "children",
+    "checked"
+  ]);
+  return /* @__PURE__ */ jsxs36(
+    DropdownMenuPrimitive.CheckboxItem,
+    __spreadProps(__spreadValues({
+      "data-slot": "dropdown-menu-checkbox-item",
+      className: cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      checked
+    }, props), {
+      children: [
+        /* @__PURE__ */ jsx50("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx50(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx50(CheckIcon, { className: "size-4" }) }) }),
+        children
+      ]
+    })
+  );
+}
+function DropdownMenuRadioGroup(_a) {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ jsx50(
+    DropdownMenuPrimitive.RadioGroup,
+    __spreadValues({
+      "data-slot": "dropdown-menu-radio-group"
+    }, props)
+  );
+}
+function DropdownMenuRadioItem(_a) {
+  var _b = _a, {
+    className,
+    children
+  } = _b, props = __objRest(_b, [
+    "className",
+    "children"
+  ]);
+  return /* @__PURE__ */ jsxs36(
+    DropdownMenuPrimitive.RadioItem,
+    __spreadProps(__spreadValues({
+      "data-slot": "dropdown-menu-radio-item",
+      className: cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )
+    }, props), {
+      children: [
+        /* @__PURE__ */ jsx50("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx50(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx50(CircleIcon, { className: "size-2 fill-current" }) }) }),
+        children
+      ]
+    })
+  );
+}
+function DropdownMenuLabel(_a) {
+  var _b = _a, {
+    className,
+    inset
+  } = _b, props = __objRest(_b, [
+    "className",
+    "inset"
+  ]);
+  return /* @__PURE__ */ jsx50(
+    DropdownMenuPrimitive.Label,
+    __spreadValues({
+      "data-slot": "dropdown-menu-label",
+      "data-inset": inset,
+      className: cn(
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className
+      )
+    }, props)
+  );
+}
+function DropdownMenuSeparator(_a) {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx50(
+    DropdownMenuPrimitive.Separator,
+    __spreadValues({
+      "data-slot": "dropdown-menu-separator",
+      className: cn("bg-border -mx-1 my-1 h-px", className)
+    }, props)
+  );
+}
+function DropdownMenuShortcut(_a) {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx50(
+    "span",
+    __spreadValues({
+      "data-slot": "dropdown-menu-shortcut",
+      className: cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )
+    }, props)
+  );
+}
+function DropdownMenuSub(_a) {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ jsx50(DropdownMenuPrimitive.Sub, __spreadValues({ "data-slot": "dropdown-menu-sub" }, props));
+}
+function DropdownMenuSubTrigger(_a) {
+  var _b = _a, {
+    className,
+    inset,
+    children
+  } = _b, props = __objRest(_b, [
+    "className",
+    "inset",
+    "children"
+  ]);
+  return /* @__PURE__ */ jsxs36(
+    DropdownMenuPrimitive.SubTrigger,
+    __spreadProps(__spreadValues({
+      "data-slot": "dropdown-menu-sub-trigger",
+      "data-inset": inset,
+      className: cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
+        className
+      )
+    }, props), {
+      children: [
+        children,
+        /* @__PURE__ */ jsx50(ChevronRightIcon, { className: "ml-auto size-4" })
+      ]
+    })
+  );
+}
+function DropdownMenuSubContent(_a) {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx50(
+    DropdownMenuPrimitive.SubContent,
+    __spreadValues({
+      "data-slot": "dropdown-menu-sub-content",
+      className: cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        className
+      )
+    }, props)
+  );
+}
+
+// src/@/ui/badge.tsx
+import { Slot as Slot11 } from "@radix-ui/react-slot";
+import { cva as cva7 } from "class-variance-authority";
+import { jsx as jsx51 } from "react/jsx-runtime";
+var badgeVariants = cva7(
+  "inline-flex font-semibold whitespace-nowrap items-center justify-center rounded-full px-2 py-1 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      size: {
+        sm: "text-caption-2"
+      },
+      variant: {
+        success: "bg-brand-success-400/15 text-brand-success-400",
+        default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "sm"
+    }
+  }
+);
+function Badge(_a) {
+  var _b = _a, {
+    className,
+    variant,
+    asChild = false
+  } = _b, props = __objRest(_b, [
+    "className",
+    "variant",
+    "asChild"
+  ]);
+  const Comp = asChild ? Slot11 : "span";
+  return /* @__PURE__ */ jsx51(
+    Comp,
+    __spreadValues({
+      "data-slot": "badge",
+      className: cn(badgeVariants({ variant }), className)
+    }, props)
+  );
+}
 export {
   AccessoryButton,
   AccountItem,
@@ -4900,6 +5174,7 @@ export {
   AssetList,
   AssetListItem,
   AssetValueTrend,
+  Badge,
   BadgeIcon,
   Balance,
   BridgeForm,
@@ -4921,6 +5196,21 @@ export {
   DialogTrigger,
   Drawer,
   DrawerContent,
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
   EmptyState,
   EmptyStateConceal,
   EmptyStateContent,
@@ -5014,5 +5304,6 @@ export {
   WalletManagerUIContent,
   WalletManagerUIProvider,
   WalletProviderItem,
+  badgeVariants,
   makeEntry
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperbridge/ui",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "sideEffects": false,
   "license": "MIT",
   "private": false,
@@ -38,6 +38,7 @@
   },
   "dependencies": {
     "@radix-ui/react-dialog": "^1.1.14",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-popover": "^1.1.14",
     "@radix-ui/react-progress": "^1.1.7",
     "@radix-ui/react-scroll-area": "^1.2.9",

package/styles/shadcn.css

@@ -7,16 +7,16 @@
   --foreground: oklch(0.145 0 0);
   --card: oklch(1 0 0);
   --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
+  --popover: var(--color-brand-black-500);
+  --popover-foreground: var(--color-brand-white-400);
   --primary: oklch(0.205 0 0);
   --primary-foreground: oklch(0.985 0 0);
   --secondary: oklch(0.97 0 0);
   --secondary-foreground: oklch(0.205 0 0);
   --muted: oklch(0.97 0 0);
   --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
+  --accent: var(--color-brand-black-300);
+  --accent-foreground: oklch(0.985 0 0);
   --destructive: oklch(0.577 0.245 27.325);
   --destructive-foreground: oklch(0.577 0.245 27.325);
   --border: oklch(0.922 0 0);