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

package/dist/index.browser.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var React19 = require('react');
+var React20 = require('react');
 var react$1 = require('@wallet-standard/react');
 var react$2 = require('@zag-js/react');
 var menu = require('@zag-js/menu');
@@ -32,25 +32,25 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React19__default = /*#__PURE__*/_interopDefault(React19);
+var React20__default = /*#__PURE__*/_interopDefault(React20);
 var menu__namespace = /*#__PURE__*/_interopNamespace(menu);
 var dialog__namespace = /*#__PURE__*/_interopNamespace(dialog);
 
 // src/base-button.tsx
 function BaseButton({ className, label, leftSection, onClick, rightSection, size, ...props }) {
-  return /* @__PURE__ */ React19__default.default.createElement("button", { "data-wu": "base-button", className: `${size ?? "md"} ${className ?? ""}`, onClick, ...props }, leftSection ? /* @__PURE__ */ React19__default.default.createElement("span", { "data-wu": "base-button-left-section" }, leftSection) : null, label, rightSection ? /* @__PURE__ */ React19__default.default.createElement("span", { "data-wu": "base-button-right-section" }, rightSection) : null);
+  return /* @__PURE__ */ React20__default.default.createElement("button", { "data-wu": "base-button", className: `${size ?? "md"} ${className ?? ""}`, onClick, ...props }, leftSection ? /* @__PURE__ */ React20__default.default.createElement("span", { "data-wu": "base-button-left-section" }, leftSection) : null, label, rightSection ? /* @__PURE__ */ React20__default.default.createElement("span", { "data-wu": "base-button-right-section" }, rightSection) : null);
 }
-var WalletUiContext = React19__default.default.createContext({});
+var WalletUiContext = React20__default.default.createContext({});
 
 // src/use-wallet-ui.tsx
 function useWalletUi() {
-  return React19__default.default.useContext(WalletUiContext);
+  return React20__default.default.useContext(WalletUiContext);
 }
-var WalletUiAccountContext = React19.createContext({});
+var WalletUiAccountContext = React20.createContext({});
 
 // src/use-wallet-ui-account.tsx
 function useWalletUiAccount() {
-  return React19.useContext(WalletUiAccountContext);
+  return React20.useContext(WalletUiAccountContext);
 }
 
 // src/use-wallet-ui-wallet.tsx
@@ -59,7 +59,7 @@ function useWalletUiWallet({ wallet }) {
   const { setAccount } = useWalletUiAccount();
   const [isConnecting, connect3] = react$1.useConnect(wallet);
   const [isDisconnecting, disconnect] = react$1.useDisconnect(wallet);
-  React19.useEffect(() => {
+  React20.useEffect(() => {
   }, [isDisconnecting]);
   return {
     connect: async () => {
@@ -82,7 +82,7 @@ function WalletUiIcon({ className, size = "md", wallet, ...props }) {
   if (!wallet) {
     return null;
   }
-  return /* @__PURE__ */ React19__default.default.createElement(
+  return /* @__PURE__ */ React20__default.default.createElement(
     "img",
     {
       "data-wu": "wallet-ui-icon",
@@ -105,17 +105,17 @@ var BaseDropdownItemType = /* @__PURE__ */ ((BaseDropdownItemType2) => {
 })(BaseDropdownItemType || {});
 function BaseDropdown({ buttonProps, dropdown, items, showIndicator, size = "md" }) {
   const api = dropdown.api;
-  const trigger = /* @__PURE__ */ React19__default.default.createElement(
+  const trigger = /* @__PURE__ */ React20__default.default.createElement(
     BaseButton,
     {
       ...api.getTriggerProps(),
       size,
-      rightSection: showIndicator ? /* @__PURE__ */ React19__default.default.createElement("span", { ...api.getIndicatorProps() }, /* @__PURE__ */ React19__default.default.createElement(BaseDropdownChevronDown, { size: 12 })) : null,
+      rightSection: showIndicator ? /* @__PURE__ */ React20__default.default.createElement("span", { ...api.getIndicatorProps() }, /* @__PURE__ */ React20__default.default.createElement(BaseDropdownChevronDown, { size: 12 })) : null,
       ...buttonProps
     }
   );
-  return /* @__PURE__ */ React19__default.default.createElement("div", { "data-wu": "base-dropdown" }, trigger, /* @__PURE__ */ React19__default.default.createElement("div", { ...api.getPositionerProps(), "data-wu": "base-dropdown-wrapper" }, /* @__PURE__ */ React19__default.default.createElement("div", { ...api.getContentProps(), "data-wu": "base-dropdown-list", "data-part": "content" }, items.map((item) => {
-    return /* @__PURE__ */ React19__default.default.createElement(
+  return /* @__PURE__ */ React20__default.default.createElement("div", { "data-wu": "base-dropdown" }, trigger, /* @__PURE__ */ React20__default.default.createElement("div", { ...api.getPositionerProps(), "data-wu": "base-dropdown-wrapper" }, /* @__PURE__ */ React20__default.default.createElement("div", { ...api.getContentProps(), "data-wu": "base-dropdown-list", "data-part": "content" }, items.map((item) => {
+    return /* @__PURE__ */ React20__default.default.createElement(
       BaseDropdownItem,
       {
         ...api.getItemProps({ value: item.value }),
@@ -136,17 +136,17 @@ function BaseDropdown({ buttonProps, dropdown, items, showIndicator, size = "md"
 }
 function BaseDropdownItem({ afterClick, item, size }) {
   if (!item.wallet) {
-    return /* @__PURE__ */ React19__default.default.createElement(BaseDropdownItemRender, { afterClick, item, size });
+    return /* @__PURE__ */ React20__default.default.createElement(BaseDropdownItemRender, { afterClick, item, size });
   }
   switch (item.type) {
     case "Item" /* Item */:
-      return /* @__PURE__ */ React19__default.default.createElement(BaseDropdownItemRender, { afterClick, item, size });
+      return /* @__PURE__ */ React20__default.default.createElement(BaseDropdownItemRender, { afterClick, item, size });
     case "WalletConnect" /* WalletConnect */:
-      return /* @__PURE__ */ React19__default.default.createElement(BaseDropdownItemWalletConnect, { afterClick, item, size, wallet: item.wallet });
+      return /* @__PURE__ */ React20__default.default.createElement(BaseDropdownItemWalletConnect, { afterClick, item, size, wallet: item.wallet });
     case "WalletCopy" /* WalletCopy */:
-      return /* @__PURE__ */ React19__default.default.createElement(BaseDropdownItemRender, { afterClick, item, size });
+      return /* @__PURE__ */ React20__default.default.createElement(BaseDropdownItemRender, { afterClick, item, size });
     case "WalletDisconnect" /* WalletDisconnect */:
-      return /* @__PURE__ */ React19__default.default.createElement(
+      return /* @__PURE__ */ React20__default.default.createElement(
         BaseDropdownItemWalletDisconnect,
         {
           afterClick,
@@ -164,7 +164,7 @@ function BaseDropdownItemWalletConnect({
   wallet
 }) {
   const { connect: connect3 } = useWalletUiWallet({ wallet });
-  return /* @__PURE__ */ React19__default.default.createElement(
+  return /* @__PURE__ */ React20__default.default.createElement(
     BaseDropdownItemRender,
     {
       afterClick,
@@ -174,7 +174,7 @@ function BaseDropdownItemWalletConnect({
           await connect3();
           return await item.handler();
         },
-        leftSection: wallet ? /* @__PURE__ */ React19__default.default.createElement(WalletUiIcon, { wallet, size }) : void 0
+        leftSection: wallet ? /* @__PURE__ */ React20__default.default.createElement(WalletUiIcon, { wallet, size }) : void 0
       },
       size
     }
@@ -187,7 +187,7 @@ function BaseDropdownItemWalletDisconnect({
   wallet
 }) {
   const { disconnect } = useWalletUiWallet({ wallet });
-  return /* @__PURE__ */ React19__default.default.createElement(
+  return /* @__PURE__ */ React20__default.default.createElement(
     BaseDropdownItemRender,
     {
       afterClick,
@@ -211,10 +211,10 @@ function BaseDropdownItemRender({ afterClick, item, size }) {
       afterClick();
     });
   }
-  return /* @__PURE__ */ React19__default.default.createElement("button", { type: "button", "data-wu": "base-dropdown-item", className: size, "data-part": "item", onClick }, item.leftSection ? /* @__PURE__ */ React19__default.default.createElement("span", { "data-wu": "base-dropdown-item-left-section" }, item.leftSection) : null, item.label, item.rightSection ? /* @__PURE__ */ React19__default.default.createElement("span", { "data-wu": "base-dropdown-item-right-section" }, item.rightSection) : null);
+  return /* @__PURE__ */ React20__default.default.createElement("button", { type: "button", "data-wu": "base-dropdown-item", className: size, "data-part": "item", onClick }, item.leftSection ? /* @__PURE__ */ React20__default.default.createElement("span", { "data-wu": "base-dropdown-item-left-section" }, item.leftSection) : null, item.label, item.rightSection ? /* @__PURE__ */ React20__default.default.createElement("span", { "data-wu": "base-dropdown-item-right-section" }, item.rightSection) : null);
 }
 function BaseDropdownChevronDown(props) {
-  return /* @__PURE__ */ React19__default.default.createElement(
+  return /* @__PURE__ */ React20__default.default.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -228,17 +228,17 @@ function BaseDropdownChevronDown(props) {
       strokeLinejoin: "round",
       ...props
     },
-    /* @__PURE__ */ React19__default.default.createElement("path", { d: "m6 9 6 6 6-6" })
+    /* @__PURE__ */ React20__default.default.createElement("path", { d: "m6 9 6 6 6-6" })
   );
 }
 function BaseSvg({ sizes = {}, ...props }) {
   const size = props.size ? sizes[props.size] : 12;
-  return /* @__PURE__ */ React19__default.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, ...props }, props.children);
+  return /* @__PURE__ */ React20__default.default.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__default.default.createElement(
+  return /* @__PURE__ */ React20__default.default.createElement(
     BaseSvg,
     {
       size,
@@ -249,17 +249,17 @@ function WalletUiIconClose({ size = "md", ...props }) {
       viewBox: "0 0 14 14",
       ...props
     },
-    /* @__PURE__ */ React19__default.default.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__default.default.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__default.default.createElement(React19__default.default.Fragment, null, buttonLabel ? /* @__PURE__ */ React19__default.default.createElement(BaseButton, { label: buttonLabel, size, ...buttonProps, ...api.getTriggerProps() }) : null, api.open && /* @__PURE__ */ React19__default.default.createElement(react$2.Portal, null, /* @__PURE__ */ React19__default.default.createElement("div", { ...api.getBackdropProps() }), /* @__PURE__ */ React19__default.default.createElement("div", { ...api.getPositionerProps() }, /* @__PURE__ */ React19__default.default.createElement("div", { ...api.getContentProps(), className: size }, /* @__PURE__ */ React19__default.default.createElement("header", null, /* @__PURE__ */ React19__default.default.createElement("button", { ...api.getCloseTriggerProps() }, /* @__PURE__ */ React19__default.default.createElement(WalletUiIconClose, { size }))), props.description ? /* @__PURE__ */ React19__default.default.createElement("p", { ...api.getDescriptionProps() }, props.description) : null, /* @__PURE__ */ React19__default.default.createElement("main", null, props.children)))));
+  return /* @__PURE__ */ React20__default.default.createElement(React20__default.default.Fragment, null, buttonLabel ? /* @__PURE__ */ React20__default.default.createElement(BaseButton, { label: buttonLabel, size, ...buttonProps, ...api.getTriggerProps() }) : null, api.open && /* @__PURE__ */ React20__default.default.createElement(react$2.Portal, null, /* @__PURE__ */ React20__default.default.createElement("div", { ...api.getBackdropProps() }), /* @__PURE__ */ React20__default.default.createElement("div", { ...api.getPositionerProps() }, /* @__PURE__ */ React20__default.default.createElement("div", { ...api.getContentProps(), className: size }, /* @__PURE__ */ React20__default.default.createElement("header", null, /* @__PURE__ */ React20__default.default.createElement("button", { ...api.getCloseTriggerProps() }, /* @__PURE__ */ React20__default.default.createElement(WalletUiIconClose, { size }))), props.description ? /* @__PURE__ */ React20__default.default.createElement("p", { ...api.getDescriptionProps() }, props.description) : null, /* @__PURE__ */ React20__default.default.createElement("main", null, props.children)))));
 }
 function useBaseDropdown() {
-  const service = react$2.useMachine(menu__namespace.machine, { id: React19.useId() });
+  const service = react$2.useMachine(menu__namespace.machine, { id: React20.useId() });
   const api = menu__namespace.connect(service, react$2.normalizeProps);
   return {
     api,
@@ -268,7 +268,7 @@ function useBaseDropdown() {
   };
 }
 function useBaseModal() {
-  const service = react$2.useMachine(dialog__namespace.machine, { id: React19.useId(), modal: true });
+  const service = react$2.useMachine(dialog__namespace.machine, { id: React20.useId(), modal: true });
   const api = dialog__namespace.connect(service, react$2.normalizeProps);
   return {
     api,
@@ -276,11 +276,11 @@ function useBaseModal() {
     open: () => service.send({ type: "OPEN" })
   };
 }
-var WalletUiClusterContext = React19.createContext({});
+var WalletUiClusterContext = React20.createContext({});
 
 // src/use-wallet-ui-cluster.tsx
 function useWalletUiCluster() {
-  return React19.useContext(WalletUiClusterContext);
+  return React20.useContext(WalletUiClusterContext);
 }
 function getDropdownItemsWallets({
   wallets,
@@ -314,8 +314,8 @@ function getDropdownItemsWallets({
 function useWalletUiDropdown({ size = "md" } = {}) {
   const dropdown = useBaseDropdown();
   const { account, connect: connect3, copy, disconnect, connected, wallet, wallets } = useWalletUi();
-  const itemsWallets = React19.useMemo(() => getDropdownItemsWallets({ connect: connect3, wallets }), [wallets, connect3]);
-  const itemsConnected = React19.useMemo(
+  const itemsWallets = React20.useMemo(() => getDropdownItemsWallets({ connect: connect3, wallets }), [wallets, connect3]);
+  const itemsConnected = React20.useMemo(
     () => [
       {
         handler: async () => {
@@ -340,13 +340,13 @@ function useWalletUiDropdown({ size = "md" } = {}) {
     ],
     [copy, disconnect, dropdown, itemsWallets]
   );
-  const items = React19.useMemo(() => {
+  const items = React20.useMemo(() => {
     return connected ? itemsConnected : itemsWallets;
   }, [connected, itemsConnected, itemsWallets]);
-  const buttonProps = React19.useMemo(() => {
+  const buttonProps = React20.useMemo(() => {
     return {
       label: connected ? (account ? ellipsify(account.address) : wallet?.name) ?? "Connected" : "Select Wallet",
-      leftSection: connected ? /* @__PURE__ */ React19__default.default.createElement(WalletUiIcon, { size, wallet }) : void 0
+      leftSection: connected ? /* @__PURE__ */ React20__default.default.createElement(WalletUiIcon, { size, wallet }) : void 0
     };
   }, [account, connected, size, wallet]);
   return {
@@ -365,11 +365,11 @@ function useWalletUiSigner() {
   const { account, cluster } = useWalletUi();
   return react.useWalletAccountTransactionSendingSigner(account, cluster.id);
 }
-var WalletUiSolanaClientContext = React19.createContext({});
+var WalletUiSolanaClientContext = React20.createContext({});
 
 // src/use-wallet-ui-solana-client.tsx
 function useWalletUiSolanaClient() {
-  return React19.useContext(WalletUiSolanaClientContext);
+  return React20.useContext(WalletUiSolanaClientContext);
 }
 function useWalletUiSignAndSend() {
   const { client } = useWalletUi();
@@ -387,7 +387,7 @@ function useWalletUiSignAndSend() {
 }
 function useWalletUiWallets() {
   const readonlyWallets = react$1.useWallets();
-  return React19.useMemo(
+  return React20.useMemo(
     () => readonlyWallets.filter((wallet) => wallet.chains.some((i) => i.startsWith("solana:"))).sort((a, b) => a.name.localeCompare(b.name)),
     [readonlyWallets]
   );
@@ -417,7 +417,7 @@ function WalletUiAccountContextProvider({
 }) {
   const wallets = react$1.useWallets();
   const accountId = react$3.useStore(storage.value);
-  const [account, setAccountInternal] = React19.useState(
+  const [account, setAccountInternal] = React20.useState(
     () => getSavedWalletAccount(wallets, accountId)
   );
   function setAccount(setStateAction) {
@@ -429,13 +429,13 @@ function WalletUiAccountContextProvider({
       return nextWalletAccount;
     });
   }
-  React19.useEffect(() => {
+  React20.useEffect(() => {
     const savedWalletAccount = getSavedWalletAccount(wallets, accountId);
     if (savedWalletAccount) {
       setAccountInternal(savedWalletAccount);
     }
   }, [accountId, wallets]);
-  const walletAccount = React19.useMemo(() => {
+  const walletAccount = React20.useMemo(() => {
     if (account) {
       for (const uiWallet of wallets) {
         for (const uiWalletAccount of uiWallet.accounts) {
@@ -449,12 +449,12 @@ function WalletUiAccountContextProvider({
       }
     }
   }, [account, wallets]);
-  React19.useEffect(() => {
+  React20.useEffect(() => {
     if (account && !walletAccount) {
       setAccountInternal(void 0);
     }
   }, [account, walletAccount]);
-  const wallet = React19.useMemo(() => {
+  const wallet = React20.useMemo(() => {
     if (!walletAccount) {
       return void 0;
     }
@@ -469,16 +469,16 @@ function WalletUiAccountContextProvider({
       }
     }
   }, [walletAccount, wallets]);
-  const accountKeys = React19.useMemo(() => {
+  const accountKeys = React20.useMemo(() => {
     if (!account) {
       return [];
     }
     return [cluster.id, react$1.getUiWalletAccountStorageKey(account)].filter(Boolean);
   }, [account, cluster.id]);
-  return /* @__PURE__ */ React19__default.default.createElement(
+  return /* @__PURE__ */ React20__default.default.createElement(
     WalletUiAccountContext.Provider,
     {
-      value: React19.useMemo(
+      value: React20.useMemo(
         () => ({
           account: walletAccount,
           accountKeys,
@@ -514,7 +514,7 @@ function WalletUiClusterContextProvider({
       storage.set(clusterId2);
     }
   };
-  return /* @__PURE__ */ React19__default.default.createElement(WalletUiClusterContext.Provider, { value }, render(value));
+  return /* @__PURE__ */ React20__default.default.createElement(WalletUiClusterContext.Provider, { value }, render(value));
 }
 function WalletUiContextProvider({ children, size = "md" }) {
   const { account, accountKeys, cluster, setAccount, wallet } = useWalletUiAccount();
@@ -546,16 +546,16 @@ function WalletUiContextProvider({ children, size = "md" }) {
     wallet,
     wallets
   };
-  return /* @__PURE__ */ React19__default.default.createElement(WalletUiContext.Provider, { value }, children);
+  return /* @__PURE__ */ React20__default.default.createElement(WalletUiContext.Provider, { value }, children);
 }
 function WalletUiSolanaClientContextProvider({
   children,
   urlOrMoniker
 }) {
-  return /* @__PURE__ */ React19__default.default.createElement(
+  return /* @__PURE__ */ React20__default.default.createElement(
     WalletUiSolanaClientContext.Provider,
     {
-      value: React19.useMemo(() => gill.createSolanaClient({ urlOrMoniker }), [urlOrMoniker])
+      value: React20.useMemo(() => gill.createSolanaClient({ urlOrMoniker }), [urlOrMoniker])
     },
     children
   );
@@ -566,24 +566,34 @@ function createWalletUiConfig(props) {
   return { ...props };
 }
 function WalletUi({ children, config: { accountStorage, clusters, clusterStorage, ...config } }) {
-  return /* @__PURE__ */ React19__default.default.createElement(React19__default.default.Fragment, null, /* @__PURE__ */ React19__default.default.createElement(
+  return /* @__PURE__ */ React20__default.default.createElement(React20__default.default.Fragment, null, /* @__PURE__ */ React20__default.default.createElement(
     WalletUiClusterContextProvider,
     {
       clusters,
       storage: clusterStorage,
       render: ({ cluster }) => {
-        return /* @__PURE__ */ React19__default.default.createElement(WalletUiSolanaClientContextProvider, { urlOrMoniker: cluster.urlOrMoniker }, /* @__PURE__ */ React19__default.default.createElement(WalletUiAccountContextProvider, { cluster, storage: accountStorage }, /* @__PURE__ */ React19__default.default.createElement(WalletUiContextProvider, { ...config }, children)));
+        return /* @__PURE__ */ React20__default.default.createElement(WalletUiSolanaClientContextProvider, { urlOrMoniker: cluster.urlOrMoniker }, /* @__PURE__ */ React20__default.default.createElement(WalletUiAccountContextProvider, { cluster, storage: accountStorage }, /* @__PURE__ */ React20__default.default.createElement(WalletUiContextProvider, { ...config }, children)));
       }
     }
   ));
 }
+function WalletUiDropdown({ size = "md", ...props }) {
+  const { buttonProps, items, dropdown } = useWalletUiDropdown({ size });
+  return /* @__PURE__ */ React20__default.default.createElement(BaseDropdown, { ...props, buttonProps: { ...buttonProps }, dropdown, items, size });
+}
+
+// src/wallet-ui-account-guard.tsx
+function WalletUiAccountGuard({ fallback = /* @__PURE__ */ React20__default.default.createElement(WalletUiDropdown, null), render }) {
+  const { account, accountKeys, cluster, wallet } = useWalletUiAccount();
+  return account ? render({ account, accountKeys, cluster, wallet }) : fallback;
+}
 function WalletUiButton({ ...props }) {
-  return /* @__PURE__ */ React19__default.default.createElement(BaseButton, { ...props, label: "CLICK" });
+  return /* @__PURE__ */ React20__default.default.createElement(BaseButton, { ...props, label: "CLICK" });
 }
 function WalletUiClusterDropdown({ buttonProps, size = "md", ...props }) {
   const dropdown = useBaseDropdown();
   const { cluster, clusters, setCluster } = useWalletUiCluster();
-  return /* @__PURE__ */ React19__default.default.createElement(
+  return /* @__PURE__ */ React20__default.default.createElement(
     BaseDropdown,
     {
       size,
@@ -602,12 +612,8 @@ function WalletUiClusterDropdown({ buttonProps, size = "md", ...props }) {
     }
   );
 }
-function WalletUiDropdown({ size = "md", ...props }) {
-  const { buttonProps, items, dropdown } = useWalletUiDropdown({ size });
-  return /* @__PURE__ */ React19__default.default.createElement(BaseDropdown, { ...props, buttonProps: { ...buttonProps }, dropdown, items, size });
-}
 function WalletUiIconNoWallet({ size, ...props }) {
-  return /* @__PURE__ */ React19__default.default.createElement(BaseSvg, { size, sizes: { lg: 125, md: 100, sm: 75 }, fill: "none", viewBox: "0 0 97 96", ...props }, /* @__PURE__ */ React19__default.default.createElement("circle", { cx: "48.5", cy: "48", r: "48", fill: "url(#paint0_linear_880_5115)", fillOpacity: "0.1" }), /* @__PURE__ */ React19__default.default.createElement(
+  return /* @__PURE__ */ React20__default.default.createElement(BaseSvg, { size, sizes: { lg: 125, md: 100, sm: 75 }, fill: "none", viewBox: "0 0 97 96", ...props }, /* @__PURE__ */ React20__default.default.createElement("circle", { cx: "48.5", cy: "48", r: "48", fill: "url(#paint0_linear_880_5115)", fillOpacity: "0.1" }), /* @__PURE__ */ React20__default.default.createElement(
     "circle",
     {
       cx: "48.5",
@@ -617,19 +623,19 @@ function WalletUiIconNoWallet({ size, ...props }) {
       strokeOpacity: "0.4",
       strokeWidth: "2"
     }
-  ), /* @__PURE__ */ React19__default.default.createElement("g", { clipPath: "url(#clip0_880_5115)" }, /* @__PURE__ */ React19__default.default.createElement(
+  ), /* @__PURE__ */ React20__default.default.createElement("g", { clipPath: "url(#clip0_880_5115)" }, /* @__PURE__ */ React20__default.default.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__default.default.createElement(
+  ), /* @__PURE__ */ React20__default.default.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__default.default.createElement("defs", null, /* @__PURE__ */ React19__default.default.createElement(
+  )), /* @__PURE__ */ React20__default.default.createElement("defs", null, /* @__PURE__ */ React20__default.default.createElement(
     "linearGradient",
     {
       id: "paint0_linear_880_5115",
@@ -639,13 +645,13 @@ function WalletUiIconNoWallet({ size, ...props }) {
       y2: "8.42498",
       gradientUnits: "userSpaceOnUse"
     },
-    /* @__PURE__ */ React19__default.default.createElement("stop", { stopColor: "#9945FF" }),
-    /* @__PURE__ */ React19__default.default.createElement("stop", { offset: "0.14", stopColor: "#8A53F4" }),
-    /* @__PURE__ */ React19__default.default.createElement("stop", { offset: "0.42", stopColor: "#6377D6" }),
-    /* @__PURE__ */ React19__default.default.createElement("stop", { offset: "0.79", stopColor: "#24B0A7" }),
-    /* @__PURE__ */ React19__default.default.createElement("stop", { offset: "0.99", stopColor: "#00D18C" }),
-    /* @__PURE__ */ React19__default.default.createElement("stop", { offset: "1", stopColor: "#00D18C" })
-  ), /* @__PURE__ */ React19__default.default.createElement(
+    /* @__PURE__ */ React20__default.default.createElement("stop", { stopColor: "#9945FF" }),
+    /* @__PURE__ */ React20__default.default.createElement("stop", { offset: "0.14", stopColor: "#8A53F4" }),
+    /* @__PURE__ */ React20__default.default.createElement("stop", { offset: "0.42", stopColor: "#6377D6" }),
+    /* @__PURE__ */ React20__default.default.createElement("stop", { offset: "0.79", stopColor: "#24B0A7" }),
+    /* @__PURE__ */ React20__default.default.createElement("stop", { offset: "0.99", stopColor: "#00D18C" }),
+    /* @__PURE__ */ React20__default.default.createElement("stop", { offset: "1", stopColor: "#00D18C" })
+  ), /* @__PURE__ */ React20__default.default.createElement(
     "linearGradient",
     {
       id: "paint1_linear_880_5115",
@@ -655,13 +661,13 @@ function WalletUiIconNoWallet({ size, ...props }) {
       y2: "8.42498",
       gradientUnits: "userSpaceOnUse"
     },
-    /* @__PURE__ */ React19__default.default.createElement("stop", { stopColor: "#9945FF" }),
-    /* @__PURE__ */ React19__default.default.createElement("stop", { offset: "0.14", stopColor: "#8A53F4" }),
-    /* @__PURE__ */ React19__default.default.createElement("stop", { offset: "0.42", stopColor: "#6377D6" }),
-    /* @__PURE__ */ React19__default.default.createElement("stop", { offset: "0.79", stopColor: "#24B0A7" }),
-    /* @__PURE__ */ React19__default.default.createElement("stop", { offset: "0.99", stopColor: "#00D18C" }),
-    /* @__PURE__ */ React19__default.default.createElement("stop", { offset: "1", stopColor: "#00D18C" })
-  ), /* @__PURE__ */ React19__default.default.createElement(
+    /* @__PURE__ */ React20__default.default.createElement("stop", { stopColor: "#9945FF" }),
+    /* @__PURE__ */ React20__default.default.createElement("stop", { offset: "0.14", stopColor: "#8A53F4" }),
+    /* @__PURE__ */ React20__default.default.createElement("stop", { offset: "0.42", stopColor: "#6377D6" }),
+    /* @__PURE__ */ React20__default.default.createElement("stop", { offset: "0.79", stopColor: "#24B0A7" }),
+    /* @__PURE__ */ React20__default.default.createElement("stop", { offset: "0.99", stopColor: "#00D18C" }),
+    /* @__PURE__ */ React20__default.default.createElement("stop", { offset: "1", stopColor: "#00D18C" })
+  ), /* @__PURE__ */ React20__default.default.createElement(
     "linearGradient",
     {
       id: "paint2_linear_880_5115",
@@ -671,13 +677,13 @@ function WalletUiIconNoWallet({ size, ...props }) {
       y2: "23.7879",
       gradientUnits: "userSpaceOnUse"
     },
-    /* @__PURE__ */ React19__default.default.createElement("stop", { stopColor: "#9945FF" }),
-    /* @__PURE__ */ React19__default.default.createElement("stop", { offset: "0.14", stopColor: "#8A53F4" }),
-    /* @__PURE__ */ React19__default.default.createElement("stop", { offset: "0.42", stopColor: "#6377D6" }),
-    /* @__PURE__ */ React19__default.default.createElement("stop", { offset: "0.79", stopColor: "#24B0A7" }),
-    /* @__PURE__ */ React19__default.default.createElement("stop", { offset: "0.99", stopColor: "#00D18C" }),
-    /* @__PURE__ */ React19__default.default.createElement("stop", { offset: "1", stopColor: "#00D18C" })
-  ), /* @__PURE__ */ React19__default.default.createElement(
+    /* @__PURE__ */ React20__default.default.createElement("stop", { stopColor: "#9945FF" }),
+    /* @__PURE__ */ React20__default.default.createElement("stop", { offset: "0.14", stopColor: "#8A53F4" }),
+    /* @__PURE__ */ React20__default.default.createElement("stop", { offset: "0.42", stopColor: "#6377D6" }),
+    /* @__PURE__ */ React20__default.default.createElement("stop", { offset: "0.79", stopColor: "#24B0A7" }),
+    /* @__PURE__ */ React20__default.default.createElement("stop", { offset: "0.99", stopColor: "#00D18C" }),
+    /* @__PURE__ */ React20__default.default.createElement("stop", { offset: "1", stopColor: "#00D18C" })
+  ), /* @__PURE__ */ React20__default.default.createElement(
     "linearGradient",
     {
       id: "paint3_linear_880_5115",
@@ -687,22 +693,22 @@ function WalletUiIconNoWallet({ size, ...props }) {
       y2: "45.4453",
       gradientUnits: "userSpaceOnUse"
     },
-    /* @__PURE__ */ React19__default.default.createElement("stop", { stopColor: "#9945FF" }),
-    /* @__PURE__ */ React19__default.default.createElement("stop", { offset: "0.14", stopColor: "#8A53F4" }),
-    /* @__PURE__ */ React19__default.default.createElement("stop", { offset: "0.42", stopColor: "#6377D6" }),
-    /* @__PURE__ */ React19__default.default.createElement("stop", { offset: "0.79", stopColor: "#24B0A7" }),
-    /* @__PURE__ */ React19__default.default.createElement("stop", { offset: "0.99", stopColor: "#00D18C" }),
-    /* @__PURE__ */ React19__default.default.createElement("stop", { offset: "1", stopColor: "#00D18C" })
-  ), /* @__PURE__ */ React19__default.default.createElement("clipPath", { id: "clip0_880_5115" }, /* @__PURE__ */ React19__default.default.createElement("rect", { width: "48", height: "48", fill: "white", transform: "translate(24.5 24)" }))));
+    /* @__PURE__ */ React20__default.default.createElement("stop", { stopColor: "#9945FF" }),
+    /* @__PURE__ */ React20__default.default.createElement("stop", { offset: "0.14", stopColor: "#8A53F4" }),
+    /* @__PURE__ */ React20__default.default.createElement("stop", { offset: "0.42", stopColor: "#6377D6" }),
+    /* @__PURE__ */ React20__default.default.createElement("stop", { offset: "0.79", stopColor: "#24B0A7" }),
+    /* @__PURE__ */ React20__default.default.createElement("stop", { offset: "0.99", stopColor: "#00D18C" }),
+    /* @__PURE__ */ React20__default.default.createElement("stop", { offset: "1", stopColor: "#00D18C" })
+  ), /* @__PURE__ */ React20__default.default.createElement("clipPath", { id: "clip0_880_5115" }, /* @__PURE__ */ React20__default.default.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__default.default.createElement("span", { "data-wu": "wallet-ui-label", className: `${size ?? "md"} ${className ?? ""}`, ...props }, wallet.name);
+  return /* @__PURE__ */ React20__default.default.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__default.default.useState(false);
+  const [pending, setPending] = React20__default.default.useState(false);
   function handleSelect() {
     if (!select) {
       return;
@@ -714,7 +720,7 @@ function WalletUiListButton({ className, select, size = "md", wallet, ...props }
     }
     void select(account).finally(() => setPending(false));
   }
-  return /* @__PURE__ */ React19__default.default.createElement(
+  return /* @__PURE__ */ React20__default.default.createElement(
     "button",
     {
       disabled: pending,
@@ -723,20 +729,20 @@ function WalletUiListButton({ className, select, size = "md", wallet, ...props }
       onClick: handleSelect,
       ...props
     },
-    /* @__PURE__ */ React19__default.default.createElement(WalletUiIcon, { wallet, size }),
-    /* @__PURE__ */ React19__default.default.createElement(WalletUiLabel, { wallet, size })
+    /* @__PURE__ */ React20__default.default.createElement(WalletUiIcon, { wallet, size }),
+    /* @__PURE__ */ React20__default.default.createElement(WalletUiLabel, { wallet, size })
   );
 }
 
 // src/wallet-ui-list.tsx
 function WalletUiList({ className, select, size = "md", wallets, ...props }) {
-  return /* @__PURE__ */ React19__default.default.createElement("div", { "data-wu": "wallet-ui-list", className: `${size} ${className ?? ""}`, ...props }, wallets.map((wallet) => /* @__PURE__ */ React19__default.default.createElement(WalletUiListButton, { key: wallet.name, select, size, wallet })));
+  return /* @__PURE__ */ React20__default.default.createElement("div", { "data-wu": "wallet-ui-list", className: `${size} ${className ?? ""}`, ...props }, wallets.map((wallet) => /* @__PURE__ */ React20__default.default.createElement(WalletUiListButton, { key: wallet.name, select, size, wallet })));
 }
 function WalletUiModal({ size = "md", wallets, select, ...props }) {
-  return /* @__PURE__ */ React19__default.default.createElement(BaseModal, { description: "Connect a wallet on Solana to continue", size, ...props }, /* @__PURE__ */ React19__default.default.createElement(WalletUiList, { size, wallets, select }));
+  return /* @__PURE__ */ React20__default.default.createElement(BaseModal, { description: "Connect a wallet on Solana to continue", size, ...props }, /* @__PURE__ */ React20__default.default.createElement(WalletUiList, { size, wallets, select }));
 }
 function WalletUiModalTrigger({ label = "Select Wallet", modal, ...props }) {
-  return /* @__PURE__ */ React19__default.default.createElement(BaseButton, { label, onClick: () => void modal.open(), ...props });
+  return /* @__PURE__ */ React20__default.default.createElement(BaseButton, { label, onClick: () => void modal.open(), ...props });
 }
 
 exports.BaseButton = BaseButton;
@@ -748,6 +754,7 @@ exports.BaseSvg = BaseSvg;
 exports.WalletUi = WalletUi;
 exports.WalletUiAccountContext = WalletUiAccountContext;
 exports.WalletUiAccountContextProvider = WalletUiAccountContextProvider;
+exports.WalletUiAccountGuard = WalletUiAccountGuard;
 exports.WalletUiButton = WalletUiButton;
 exports.WalletUiClusterContext = WalletUiClusterContext;
 exports.WalletUiClusterContextProvider = WalletUiClusterContextProvider;