@wallet-ui/react 2.0.0-canary-20250814043428 → 2.0.0-canary-20250814153001

package/dist/index.browser.mjs

@@ -1,4 +1,4 @@
-import React19, { createContext, useContext, useEffect, useId, useMemo, useState } from 'react';
+import React20, { createContext, useContext, useEffect, useId, useMemo, useState } from 'react';
 import { useConnect, useDisconnect, useWallets, uiWalletAccountsAreSame, uiWalletAccountBelongsToUiWallet, getUiWalletAccountStorageKey } from '@wallet-standard/react';
 export * from '@wallet-standard/react';
 import { Portal, useMachine, normalizeProps } from '@zag-js/react';
@@ -15,13 +15,13 @@ export * from '@wallet-standard/core';
 
 // src/base-button.tsx
 function BaseButton({ className, label, leftSection, onClick, rightSection, size, ...props }) {
-  return /* @__PURE__ */ React19.createElement("button", { "data-wu": "base-button", className: `${size ?? "md"} ${className ?? ""}`, onClick, ...props }, leftSection ? /* @__PURE__ */ React19.createElement("span", { "data-wu": "base-button-left-section" }, leftSection) : null, label, rightSection ? /* @__PURE__ */ React19.createElement("span", { "data-wu": "base-button-right-section" }, rightSection) : null);
+  return /* @__PURE__ */ React20.createElement("button", { "data-wu": "base-button", className: `${size ?? "md"} ${className ?? ""}`, onClick, ...props }, leftSection ? /* @__PURE__ */ React20.createElement("span", { "data-wu": "base-button-left-section" }, leftSection) : null, label, rightSection ? /* @__PURE__ */ React20.createElement("span", { "data-wu": "base-button-right-section" }, rightSection) : null);
 }
-var WalletUiContext = React19.createContext({});
+var WalletUiContext = React20.createContext({});
 
 // src/use-wallet-ui.tsx
 function useWalletUi() {
-  return React19.useContext(WalletUiContext);
+  return React20.useContext(WalletUiContext);
 }
 var WalletUiAccountContext = createContext({});
 
@@ -59,7 +59,7 @@ function WalletUiIcon({ className, size = "md", wallet, ...props }) {
   if (!wallet) {
     return null;
   }
-  return /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React20.createElement(
     "img",
     {
       "data-wu": "wallet-ui-icon",
@@ -82,17 +82,17 @@ var BaseDropdownItemType = /* @__PURE__ */ ((BaseDropdownItemType2) => {
 })(BaseDropdownItemType || {});
 function BaseDropdown({ buttonProps, dropdown, items, showIndicator, size = "md" }) {
   const api = dropdown.api;
-  const trigger = /* @__PURE__ */ React19.createElement(
+  const trigger = /* @__PURE__ */ React20.createElement(
     BaseButton,
     {
       ...api.getTriggerProps(),
       size,
-      rightSection: showIndicator ? /* @__PURE__ */ React19.createElement("span", { ...api.getIndicatorProps() }, /* @__PURE__ */ React19.createElement(BaseDropdownChevronDown, { size: 12 })) : null,
+      rightSection: showIndicator ? /* @__PURE__ */ React20.createElement("span", { ...api.getIndicatorProps() }, /* @__PURE__ */ React20.createElement(BaseDropdownChevronDown, { size: 12 })) : null,
       ...buttonProps
     }
   );
-  return /* @__PURE__ */ React19.createElement("div", { "data-wu": "base-dropdown" }, trigger, /* @__PURE__ */ React19.createElement("div", { ...api.getPositionerProps(), "data-wu": "base-dropdown-wrapper" }, /* @__PURE__ */ React19.createElement("div", { ...api.getContentProps(), "data-wu": "base-dropdown-list", "data-part": "content" }, items.map((item) => {
-    return /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React20.createElement("div", { "data-wu": "base-dropdown" }, trigger, /* @__PURE__ */ React20.createElement("div", { ...api.getPositionerProps(), "data-wu": "base-dropdown-wrapper" }, /* @__PURE__ */ React20.createElement("div", { ...api.getContentProps(), "data-wu": "base-dropdown-list", "data-part": "content" }, items.map((item) => {
+    return /* @__PURE__ */ React20.createElement(
       BaseDropdownItem,
       {
         ...api.getItemProps({ value: item.value }),
@@ -113,17 +113,17 @@ function BaseDropdown({ buttonProps, dropdown, items, showIndicator, size = "md"
 }
 function BaseDropdownItem({ afterClick, item, size }) {
   if (!item.wallet) {
-    return /* @__PURE__ */ React19.createElement(BaseDropdownItemRender, { afterClick, item, size });
+    return /* @__PURE__ */ React20.createElement(BaseDropdownItemRender, { afterClick, item, size });
   }
   switch (item.type) {
     case "Item" /* Item */:
-      return /* @__PURE__ */ React19.createElement(BaseDropdownItemRender, { afterClick, item, size });
+      return /* @__PURE__ */ React20.createElement(BaseDropdownItemRender, { afterClick, item, size });
     case "WalletConnect" /* WalletConnect */:
-      return /* @__PURE__ */ React19.createElement(BaseDropdownItemWalletConnect, { afterClick, item, size, wallet: item.wallet });
+      return /* @__PURE__ */ React20.createElement(BaseDropdownItemWalletConnect, { afterClick, item, size, wallet: item.wallet });
     case "WalletCopy" /* WalletCopy */:
-      return /* @__PURE__ */ React19.createElement(BaseDropdownItemRender, { afterClick, item, size });
+      return /* @__PURE__ */ React20.createElement(BaseDropdownItemRender, { afterClick, item, size });
     case "WalletDisconnect" /* WalletDisconnect */:
-      return /* @__PURE__ */ React19.createElement(
+      return /* @__PURE__ */ React20.createElement(
         BaseDropdownItemWalletDisconnect,
         {
           afterClick,
@@ -141,7 +141,7 @@ function BaseDropdownItemWalletConnect({
   wallet
 }) {
   const { connect: connect3 } = useWalletUiWallet({ wallet });
-  return /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React20.createElement(
     BaseDropdownItemRender,
     {
       afterClick,
@@ -151,7 +151,7 @@ function BaseDropdownItemWalletConnect({
           await connect3();
           return await item.handler();
         },
-        leftSection: wallet ? /* @__PURE__ */ React19.createElement(WalletUiIcon, { wallet, size }) : void 0
+        leftSection: wallet ? /* @__PURE__ */ React20.createElement(WalletUiIcon, { wallet, size }) : void 0
       },
       size
     }
@@ -164,7 +164,7 @@ function BaseDropdownItemWalletDisconnect({
   wallet
 }) {
   const { disconnect } = useWalletUiWallet({ wallet });
-  return /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React20.createElement(
     BaseDropdownItemRender,
     {
       afterClick,
@@ -188,10 +188,10 @@ function BaseDropdownItemRender({ afterClick, item, size }) {
       afterClick();
     });
   }
-  return /* @__PURE__ */ React19.createElement("button", { type: "button", "data-wu": "base-dropdown-item", className: size, "data-part": "item", onClick }, item.leftSection ? /* @__PURE__ */ React19.createElement("span", { "data-wu": "base-dropdown-item-left-section" }, item.leftSection) : null, item.label, item.rightSection ? /* @__PURE__ */ React19.createElement("span", { "data-wu": "base-dropdown-item-right-section" }, item.rightSection) : null);
+  return /* @__PURE__ */ React20.createElement("button", { type: "button", "data-wu": "base-dropdown-item", className: size, "data-part": "item", onClick }, item.leftSection ? /* @__PURE__ */ React20.createElement("span", { "data-wu": "base-dropdown-item-left-section" }, item.leftSection) : null, item.label, item.rightSection ? /* @__PURE__ */ React20.createElement("span", { "data-wu": "base-dropdown-item-right-section" }, item.rightSection) : null);
 }
 function BaseDropdownChevronDown(props) {
-  return /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React20.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -205,17 +205,17 @@ function BaseDropdownChevronDown(props) {
       strokeLinejoin: "round",
       ...props
     },
-    /* @__PURE__ */ React19.createElement("path", { d: "m6 9 6 6 6-6" })
+    /* @__PURE__ */ React20.createElement("path", { d: "m6 9 6 6 6-6" })
   );
 }
 function BaseSvg({ sizes = {}, ...props }) {
   const size = props.size ? sizes[props.size] : 12;
-  return /* @__PURE__ */ React19.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, ...props }, props.children);
+  return /* @__PURE__ */ React20.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, ...props }, props.children);
 }
 
 // src/wallet-ui-icon-close.tsx
 function WalletUiIconClose({ size = "md", ...props }) {
-  return /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React20.createElement(
     BaseSvg,
     {
       size,
@@ -226,14 +226,14 @@ function WalletUiIconClose({ size = "md", ...props }) {
       viewBox: "0 0 14 14",
       ...props
     },
-    /* @__PURE__ */ React19.createElement("path", { d: "M14 12.461 8.3 6.772l5.234-5.233L12.006 0 6.772 5.234 1.54 0 0 1.539l5.234 5.233L0 12.006l1.539 1.528L6.772 8.3l5.69 5.7L14 12.461z" })
+    /* @__PURE__ */ React20.createElement("path", { d: "M14 12.461 8.3 6.772l5.234-5.233L12.006 0 6.772 5.234 1.54 0 0 1.539l5.234 5.233L0 12.006l1.539 1.528L6.772 8.3l5.69 5.7L14 12.461z" })
   );
 }
 
 // src/base-modal.tsx
 function BaseModal({ modal, buttonLabel, buttonProps = {}, size = "md", ...props }) {
   const api = modal.api;
-  return /* @__PURE__ */ React19.createElement(React19.Fragment, null, buttonLabel ? /* @__PURE__ */ React19.createElement(BaseButton, { label: buttonLabel, size, ...buttonProps, ...api.getTriggerProps() }) : null, api.open && /* @__PURE__ */ React19.createElement(Portal, null, /* @__PURE__ */ React19.createElement("div", { ...api.getBackdropProps() }), /* @__PURE__ */ React19.createElement("div", { ...api.getPositionerProps() }, /* @__PURE__ */ React19.createElement("div", { ...api.getContentProps(), className: size }, /* @__PURE__ */ React19.createElement("header", null, /* @__PURE__ */ React19.createElement("button", { ...api.getCloseTriggerProps() }, /* @__PURE__ */ React19.createElement(WalletUiIconClose, { size }))), props.description ? /* @__PURE__ */ React19.createElement("p", { ...api.getDescriptionProps() }, props.description) : null, /* @__PURE__ */ React19.createElement("main", null, props.children)))));
+  return /* @__PURE__ */ React20.createElement(React20.Fragment, null, buttonLabel ? /* @__PURE__ */ React20.createElement(BaseButton, { label: buttonLabel, size, ...buttonProps, ...api.getTriggerProps() }) : null, api.open && /* @__PURE__ */ React20.createElement(Portal, null, /* @__PURE__ */ React20.createElement("div", { ...api.getBackdropProps() }), /* @__PURE__ */ React20.createElement("div", { ...api.getPositionerProps() }, /* @__PURE__ */ React20.createElement("div", { ...api.getContentProps(), className: size }, /* @__PURE__ */ React20.createElement("header", null, /* @__PURE__ */ React20.createElement("button", { ...api.getCloseTriggerProps() }, /* @__PURE__ */ React20.createElement(WalletUiIconClose, { size }))), props.description ? /* @__PURE__ */ React20.createElement("p", { ...api.getDescriptionProps() }, props.description) : null, /* @__PURE__ */ React20.createElement("main", null, props.children)))));
 }
 function useBaseDropdown() {
   const service = useMachine(menu.machine, { id: useId() });
@@ -323,7 +323,7 @@ function useWalletUiDropdown({ size = "md" } = {}) {
   const buttonProps = useMemo(() => {
     return {
       label: connected ? (account ? ellipsify(account.address) : wallet?.name) ?? "Connected" : "Select Wallet",
-      leftSection: connected ? /* @__PURE__ */ React19.createElement(WalletUiIcon, { size, wallet }) : void 0
+      leftSection: connected ? /* @__PURE__ */ React20.createElement(WalletUiIcon, { size, wallet }) : void 0
     };
   }, [account, connected, size, wallet]);
   return {
@@ -452,7 +452,7 @@ function WalletUiAccountContextProvider({
     }
     return [cluster.id, getUiWalletAccountStorageKey(account)].filter(Boolean);
   }, [account, cluster.id]);
-  return /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React20.createElement(
     WalletUiAccountContext.Provider,
     {
       value: useMemo(
@@ -491,7 +491,7 @@ function WalletUiClusterContextProvider({
       storage.set(clusterId2);
     }
   };
-  return /* @__PURE__ */ React19.createElement(WalletUiClusterContext.Provider, { value }, render(value));
+  return /* @__PURE__ */ React20.createElement(WalletUiClusterContext.Provider, { value }, render(value));
 }
 function WalletUiContextProvider({ children, size = "md" }) {
   const { account, accountKeys, cluster, setAccount, wallet } = useWalletUiAccount();
@@ -523,13 +523,13 @@ function WalletUiContextProvider({ children, size = "md" }) {
     wallet,
     wallets
   };
-  return /* @__PURE__ */ React19.createElement(WalletUiContext.Provider, { value }, children);
+  return /* @__PURE__ */ React20.createElement(WalletUiContext.Provider, { value }, children);
 }
 function WalletUiSolanaClientContextProvider({
   children,
   urlOrMoniker
 }) {
-  return /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React20.createElement(
     WalletUiSolanaClientContext.Provider,
     {
       value: useMemo(() => createSolanaClient({ urlOrMoniker }), [urlOrMoniker])
@@ -543,24 +543,34 @@ function createWalletUiConfig(props) {
   return { ...props };
 }
 function WalletUi({ children, config: { accountStorage, clusters, clusterStorage, ...config } }) {
-  return /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(
     WalletUiClusterContextProvider,
     {
       clusters,
       storage: clusterStorage,
       render: ({ cluster }) => {
-        return /* @__PURE__ */ React19.createElement(WalletUiSolanaClientContextProvider, { urlOrMoniker: cluster.urlOrMoniker }, /* @__PURE__ */ React19.createElement(WalletUiAccountContextProvider, { cluster, storage: accountStorage }, /* @__PURE__ */ React19.createElement(WalletUiContextProvider, { ...config }, children)));
+        return /* @__PURE__ */ React20.createElement(WalletUiSolanaClientContextProvider, { urlOrMoniker: cluster.urlOrMoniker }, /* @__PURE__ */ React20.createElement(WalletUiAccountContextProvider, { cluster, storage: accountStorage }, /* @__PURE__ */ React20.createElement(WalletUiContextProvider, { ...config }, children)));
       }
     }
   ));
 }
+function WalletUiDropdown({ size = "md", ...props }) {
+  const { buttonProps, items, dropdown } = useWalletUiDropdown({ size });
+  return /* @__PURE__ */ React20.createElement(BaseDropdown, { ...props, buttonProps: { ...buttonProps }, dropdown, items, size });
+}
+
+// src/wallet-ui-account-guard.tsx
+function WalletUiAccountGuard({ fallback = /* @__PURE__ */ React20.createElement(WalletUiDropdown, null), render }) {
+  const { account, accountKeys, cluster, wallet } = useWalletUiAccount();
+  return account ? render({ account, accountKeys, cluster, wallet }) : fallback;
+}
 function WalletUiButton({ ...props }) {
-  return /* @__PURE__ */ React19.createElement(BaseButton, { ...props, label: "CLICK" });
+  return /* @__PURE__ */ React20.createElement(BaseButton, { ...props, label: "CLICK" });
 }
 function WalletUiClusterDropdown({ buttonProps, size = "md", ...props }) {
   const dropdown = useBaseDropdown();
   const { cluster, clusters, setCluster } = useWalletUiCluster();
-  return /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React20.createElement(
     BaseDropdown,
     {
       size,
@@ -579,12 +589,8 @@ function WalletUiClusterDropdown({ buttonProps, size = "md", ...props }) {
     }
   );
 }
-function WalletUiDropdown({ size = "md", ...props }) {
-  const { buttonProps, items, dropdown } = useWalletUiDropdown({ size });
-  return /* @__PURE__ */ React19.createElement(BaseDropdown, { ...props, buttonProps: { ...buttonProps }, dropdown, items, size });
-}
 function WalletUiIconNoWallet({ size, ...props }) {
-  return /* @__PURE__ */ React19.createElement(BaseSvg, { size, sizes: { lg: 125, md: 100, sm: 75 }, fill: "none", viewBox: "0 0 97 96", ...props }, /* @__PURE__ */ React19.createElement("circle", { cx: "48.5", cy: "48", r: "48", fill: "url(#paint0_linear_880_5115)", fillOpacity: "0.1" }), /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React20.createElement(BaseSvg, { size, sizes: { lg: 125, md: 100, sm: 75 }, fill: "none", viewBox: "0 0 97 96", ...props }, /* @__PURE__ */ React20.createElement("circle", { cx: "48.5", cy: "48", r: "48", fill: "url(#paint0_linear_880_5115)", fillOpacity: "0.1" }), /* @__PURE__ */ React20.createElement(
     "circle",
     {
       cx: "48.5",
@@ -594,19 +600,19 @@ function WalletUiIconNoWallet({ size, ...props }) {
       strokeOpacity: "0.4",
       strokeWidth: "2"
     }
-  ), /* @__PURE__ */ React19.createElement("g", { clipPath: "url(#clip0_880_5115)" }, /* @__PURE__ */ React19.createElement(
+  ), /* @__PURE__ */ React20.createElement("g", { clipPath: "url(#clip0_880_5115)" }, /* @__PURE__ */ React20.createElement(
     "path",
     {
       d: "M65.5769 28.1523H31.4231C27.6057 28.1523 24.5 31.258 24.5 35.0754V60.9215C24.5 64.7389 27.6057 67.8446 31.4231 67.8446H65.5769C69.3943 67.8446 72.5 64.7389 72.5 60.9215V35.0754C72.5 31.258 69.3943 28.1523 65.5769 28.1523ZM69.7308 52.1523H59.5769C57.2865 52.1523 55.4231 50.289 55.4231 47.9985C55.4231 45.708 57.2864 43.8446 59.5769 43.8446H69.7308V52.1523ZM69.7308 41.0754H59.5769C55.7595 41.0754 52.6539 44.1811 52.6539 47.9985C52.6539 51.8159 55.7595 54.9215 59.5769 54.9215H69.7308V60.9215C69.7308 63.2119 67.8674 65.0754 65.5769 65.0754H31.4231C29.1327 65.0754 27.2692 63.212 27.2692 60.9215V35.0754C27.2692 32.785 29.1326 30.9215 31.4231 30.9215H65.5769C67.8673 30.9215 69.7308 32.7849 69.7308 35.0754V41.0754Z",
       fill: "url(#paint2_linear_880_5115)"
     }
-  ), /* @__PURE__ */ React19.createElement(
+  ), /* @__PURE__ */ React20.createElement(
     "path",
     {
       d: "M61.4231 46.6172H59.577C58.8123 46.6172 58.1924 47.2371 58.1924 48.0018C58.1924 48.7665 58.8123 49.3863 59.577 49.3863H61.4231C62.1878 49.3863 62.8077 48.7664 62.8077 48.0018C62.8077 47.2371 62.1878 46.6172 61.4231 46.6172Z",
       fill: "url(#paint3_linear_880_5115)"
     }
-  )), /* @__PURE__ */ React19.createElement("defs", null, /* @__PURE__ */ React19.createElement(
+  )), /* @__PURE__ */ React20.createElement("defs", null, /* @__PURE__ */ React20.createElement(
     "linearGradient",
     {
       id: "paint0_linear_880_5115",
@@ -616,13 +622,13 @@ function WalletUiIconNoWallet({ size, ...props }) {
       y2: "8.42498",
       gradientUnits: "userSpaceOnUse"
     },
-    /* @__PURE__ */ React19.createElement("stop", { stopColor: "#9945FF" }),
-    /* @__PURE__ */ React19.createElement("stop", { offset: "0.14", stopColor: "#8A53F4" }),
-    /* @__PURE__ */ React19.createElement("stop", { offset: "0.42", stopColor: "#6377D6" }),
-    /* @__PURE__ */ React19.createElement("stop", { offset: "0.79", stopColor: "#24B0A7" }),
-    /* @__PURE__ */ React19.createElement("stop", { offset: "0.99", stopColor: "#00D18C" }),
-    /* @__PURE__ */ React19.createElement("stop", { offset: "1", stopColor: "#00D18C" })
-  ), /* @__PURE__ */ React19.createElement(
+    /* @__PURE__ */ React20.createElement("stop", { stopColor: "#9945FF" }),
+    /* @__PURE__ */ React20.createElement("stop", { offset: "0.14", stopColor: "#8A53F4" }),
+    /* @__PURE__ */ React20.createElement("stop", { offset: "0.42", stopColor: "#6377D6" }),
+    /* @__PURE__ */ React20.createElement("stop", { offset: "0.79", stopColor: "#24B0A7" }),
+    /* @__PURE__ */ React20.createElement("stop", { offset: "0.99", stopColor: "#00D18C" }),
+    /* @__PURE__ */ React20.createElement("stop", { offset: "1", stopColor: "#00D18C" })
+  ), /* @__PURE__ */ React20.createElement(
     "linearGradient",
     {
       id: "paint1_linear_880_5115",
@@ -632,13 +638,13 @@ function WalletUiIconNoWallet({ size, ...props }) {
       y2: "8.42498",
       gradientUnits: "userSpaceOnUse"
     },
-    /* @__PURE__ */ React19.createElement("stop", { stopColor: "#9945FF" }),
-    /* @__PURE__ */ React19.createElement("stop", { offset: "0.14", stopColor: "#8A53F4" }),
-    /* @__PURE__ */ React19.createElement("stop", { offset: "0.42", stopColor: "#6377D6" }),
-    /* @__PURE__ */ React19.createElement("stop", { offset: "0.79", stopColor: "#24B0A7" }),
-    /* @__PURE__ */ React19.createElement("stop", { offset: "0.99", stopColor: "#00D18C" }),
-    /* @__PURE__ */ React19.createElement("stop", { offset: "1", stopColor: "#00D18C" })
-  ), /* @__PURE__ */ React19.createElement(
+    /* @__PURE__ */ React20.createElement("stop", { stopColor: "#9945FF" }),
+    /* @__PURE__ */ React20.createElement("stop", { offset: "0.14", stopColor: "#8A53F4" }),
+    /* @__PURE__ */ React20.createElement("stop", { offset: "0.42", stopColor: "#6377D6" }),
+    /* @__PURE__ */ React20.createElement("stop", { offset: "0.79", stopColor: "#24B0A7" }),
+    /* @__PURE__ */ React20.createElement("stop", { offset: "0.99", stopColor: "#00D18C" }),
+    /* @__PURE__ */ React20.createElement("stop", { offset: "1", stopColor: "#00D18C" })
+  ), /* @__PURE__ */ React20.createElement(
     "linearGradient",
     {
       id: "paint2_linear_880_5115",
@@ -648,13 +654,13 @@ function WalletUiIconNoWallet({ size, ...props }) {
       y2: "23.7879",
       gradientUnits: "userSpaceOnUse"
     },
-    /* @__PURE__ */ React19.createElement("stop", { stopColor: "#9945FF" }),
-    /* @__PURE__ */ React19.createElement("stop", { offset: "0.14", stopColor: "#8A53F4" }),
-    /* @__PURE__ */ React19.createElement("stop", { offset: "0.42", stopColor: "#6377D6" }),
-    /* @__PURE__ */ React19.createElement("stop", { offset: "0.79", stopColor: "#24B0A7" }),
-    /* @__PURE__ */ React19.createElement("stop", { offset: "0.99", stopColor: "#00D18C" }),
-    /* @__PURE__ */ React19.createElement("stop", { offset: "1", stopColor: "#00D18C" })
-  ), /* @__PURE__ */ React19.createElement(
+    /* @__PURE__ */ React20.createElement("stop", { stopColor: "#9945FF" }),
+    /* @__PURE__ */ React20.createElement("stop", { offset: "0.14", stopColor: "#8A53F4" }),
+    /* @__PURE__ */ React20.createElement("stop", { offset: "0.42", stopColor: "#6377D6" }),
+    /* @__PURE__ */ React20.createElement("stop", { offset: "0.79", stopColor: "#24B0A7" }),
+    /* @__PURE__ */ React20.createElement("stop", { offset: "0.99", stopColor: "#00D18C" }),
+    /* @__PURE__ */ React20.createElement("stop", { offset: "1", stopColor: "#00D18C" })
+  ), /* @__PURE__ */ React20.createElement(
     "linearGradient",
     {
       id: "paint3_linear_880_5115",
@@ -664,22 +670,22 @@ function WalletUiIconNoWallet({ size, ...props }) {
       y2: "45.4453",
       gradientUnits: "userSpaceOnUse"
     },
-    /* @__PURE__ */ React19.createElement("stop", { stopColor: "#9945FF" }),
-    /* @__PURE__ */ React19.createElement("stop", { offset: "0.14", stopColor: "#8A53F4" }),
-    /* @__PURE__ */ React19.createElement("stop", { offset: "0.42", stopColor: "#6377D6" }),
-    /* @__PURE__ */ React19.createElement("stop", { offset: "0.79", stopColor: "#24B0A7" }),
-    /* @__PURE__ */ React19.createElement("stop", { offset: "0.99", stopColor: "#00D18C" }),
-    /* @__PURE__ */ React19.createElement("stop", { offset: "1", stopColor: "#00D18C" })
-  ), /* @__PURE__ */ React19.createElement("clipPath", { id: "clip0_880_5115" }, /* @__PURE__ */ React19.createElement("rect", { width: "48", height: "48", fill: "white", transform: "translate(24.5 24)" }))));
+    /* @__PURE__ */ React20.createElement("stop", { stopColor: "#9945FF" }),
+    /* @__PURE__ */ React20.createElement("stop", { offset: "0.14", stopColor: "#8A53F4" }),
+    /* @__PURE__ */ React20.createElement("stop", { offset: "0.42", stopColor: "#6377D6" }),
+    /* @__PURE__ */ React20.createElement("stop", { offset: "0.79", stopColor: "#24B0A7" }),
+    /* @__PURE__ */ React20.createElement("stop", { offset: "0.99", stopColor: "#00D18C" }),
+    /* @__PURE__ */ React20.createElement("stop", { offset: "1", stopColor: "#00D18C" })
+  ), /* @__PURE__ */ React20.createElement("clipPath", { id: "clip0_880_5115" }, /* @__PURE__ */ React20.createElement("rect", { width: "48", height: "48", fill: "white", transform: "translate(24.5 24)" }))));
 }
 function WalletUiLabel({ className, size, wallet, ...props }) {
   if (!wallet) {
     return null;
   }
-  return /* @__PURE__ */ React19.createElement("span", { "data-wu": "wallet-ui-label", className: `${size ?? "md"} ${className ?? ""}`, ...props }, wallet.name);
+  return /* @__PURE__ */ React20.createElement("span", { "data-wu": "wallet-ui-label", className: `${size ?? "md"} ${className ?? ""}`, ...props }, wallet.name);
 }
 function WalletUiListButton({ className, select, size = "md", wallet, ...props }) {
-  const [pending, setPending] = React19.useState(false);
+  const [pending, setPending] = React20.useState(false);
   function handleSelect() {
     if (!select) {
       return;
@@ -691,7 +697,7 @@ function WalletUiListButton({ className, select, size = "md", wallet, ...props }
     }
     void select(account).finally(() => setPending(false));
   }
-  return /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React20.createElement(
     "button",
     {
       disabled: pending,
@@ -700,22 +706,22 @@ function WalletUiListButton({ className, select, size = "md", wallet, ...props }
       onClick: handleSelect,
       ...props
     },
-    /* @__PURE__ */ React19.createElement(WalletUiIcon, { wallet, size }),
-    /* @__PURE__ */ React19.createElement(WalletUiLabel, { wallet, size })
+    /* @__PURE__ */ React20.createElement(WalletUiIcon, { wallet, size }),
+    /* @__PURE__ */ React20.createElement(WalletUiLabel, { wallet, size })
   );
 }
 
 // src/wallet-ui-list.tsx
 function WalletUiList({ className, select, size = "md", wallets, ...props }) {
-  return /* @__PURE__ */ React19.createElement("div", { "data-wu": "wallet-ui-list", className: `${size} ${className ?? ""}`, ...props }, wallets.map((wallet) => /* @__PURE__ */ React19.createElement(WalletUiListButton, { key: wallet.name, select, size, wallet })));
+  return /* @__PURE__ */ React20.createElement("div", { "data-wu": "wallet-ui-list", className: `${size} ${className ?? ""}`, ...props }, wallets.map((wallet) => /* @__PURE__ */ React20.createElement(WalletUiListButton, { key: wallet.name, select, size, wallet })));
 }
 function WalletUiModal({ size = "md", wallets, select, ...props }) {
-  return /* @__PURE__ */ React19.createElement(BaseModal, { description: "Connect a wallet on Solana to continue", size, ...props }, /* @__PURE__ */ React19.createElement(WalletUiList, { size, wallets, select }));
+  return /* @__PURE__ */ React20.createElement(BaseModal, { description: "Connect a wallet on Solana to continue", size, ...props }, /* @__PURE__ */ React20.createElement(WalletUiList, { size, wallets, select }));
 }
 function WalletUiModalTrigger({ label = "Select Wallet", modal, ...props }) {
-  return /* @__PURE__ */ React19.createElement(BaseButton, { label, onClick: () => void modal.open(), ...props });
+  return /* @__PURE__ */ React20.createElement(BaseButton, { label, onClick: () => void modal.open(), ...props });
 }
 
-export { BaseButton, BaseDropdown, BaseDropdownChevronDown, BaseDropdownItemType, BaseModal, BaseSvg, WalletUi, WalletUiAccountContext, WalletUiAccountContextProvider, WalletUiButton, WalletUiClusterContext, WalletUiClusterContextProvider, WalletUiClusterDropdown, WalletUiContext, WalletUiContextProvider, WalletUiDropdown, WalletUiIcon, WalletUiIconClose, WalletUiIconNoWallet, WalletUiLabel, WalletUiList, WalletUiListButton, WalletUiModal, WalletUiModalTrigger, WalletUiSolanaClientContext, WalletUiSolanaClientContextProvider, createWalletUiConfig, ellipsify, useBaseDropdown, useBaseModal, useWalletUi, useWalletUiAccount, useWalletUiCluster, useWalletUiDropdown, useWalletUiSignAndSend, useWalletUiSigner, useWalletUiSolanaClient, useWalletUiWallet, useWalletUiWallets };
+export { BaseButton, BaseDropdown, BaseDropdownChevronDown, BaseDropdownItemType, BaseModal, BaseSvg, WalletUi, WalletUiAccountContext, WalletUiAccountContextProvider, WalletUiAccountGuard, WalletUiButton, WalletUiClusterContext, WalletUiClusterContextProvider, WalletUiClusterDropdown, WalletUiContext, WalletUiContextProvider, WalletUiDropdown, WalletUiIcon, WalletUiIconClose, WalletUiIconNoWallet, WalletUiLabel, WalletUiList, WalletUiListButton, WalletUiModal, WalletUiModalTrigger, WalletUiSolanaClientContext, WalletUiSolanaClientContextProvider, createWalletUiConfig, ellipsify, useBaseDropdown, useBaseModal, useWalletUi, useWalletUiAccount, useWalletUiCluster, useWalletUiDropdown, useWalletUiSignAndSend, useWalletUiSigner, useWalletUiSolanaClient, useWalletUiWallet, useWalletUiWallets };
 //# sourceMappingURL=index.browser.mjs.map
 //# sourceMappingURL=index.browser.mjs.map