@wallet-ui/react 2.0.0-canary-20250827030244 → 2.0.0-canary-20250829062001

package/dist/index.browser.mjs

@@ -1,4 +1,4 @@
-import React19, { createContext, useContext, useEffect, useId, useMemo, useState } from 'react';
+import React18, { 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';
@@ -13,14 +13,14 @@ export * from '@solana/wallet-standard-features';
 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);
+function BaseButton({ className, label, leftSection, onClick, rightSection, ...props }) {
+  return /* @__PURE__ */ React18.createElement("button", { "data-wu": "base-button", className: `${className ?? ""}`, onClick, ...props }, leftSection ? /* @__PURE__ */ React18.createElement("span", { "data-wu": "base-button-left-section" }, leftSection) : null, label, rightSection ? /* @__PURE__ */ React18.createElement("span", { "data-wu": "base-button-right-section" }, rightSection) : null);
 }
-var WalletUiContext = React19.createContext({});
+var WalletUiContext = React18.createContext({});
 
 // src/use-wallet-ui.tsx
 function useWalletUi() {
-  return React19.useContext(WalletUiContext);
+  return React18.useContext(WalletUiContext);
 }
 var WalletUiAccountContext = createContext({});
 
@@ -54,20 +54,11 @@ function useWalletUiWallet({ wallet }) {
     isDisconnecting
   };
 }
-function WalletUiIcon({ className, size = "md", wallet, ...props }) {
+function WalletUiIcon({ className, wallet, ...props }) {
   if (!wallet) {
     return null;
   }
-  return /* @__PURE__ */ React19.createElement(
-    "img",
-    {
-      "data-wu": "wallet-ui-icon",
-      src: wallet.icon,
-      alt: wallet.name,
-      className: `${size} ${className ?? ""}`,
-      ...props
-    }
-  );
+  return /* @__PURE__ */ React18.createElement("img", { "data-wu": "wallet-ui-icon", src: wallet.icon, alt: wallet.name, className: className ?? "", ...props });
 }
 
 // src/base-dropdown.tsx
@@ -79,25 +70,23 @@ var BaseDropdownItemType = /* @__PURE__ */ ((BaseDropdownItemType2) => {
   BaseDropdownItemType2["WalletNeeded"] = "WalletNeeded";
   return BaseDropdownItemType2;
 })(BaseDropdownItemType || {});
-function BaseDropdown({ buttonProps, dropdown, items, showIndicator, size = "md" }) {
+function BaseDropdown({ buttonProps, dropdown, items, showIndicator }) {
   const api = dropdown.api;
-  const trigger = /* @__PURE__ */ React19.createElement(
+  const trigger = /* @__PURE__ */ React18.createElement(
     BaseButton,
     {
       ...api.getTriggerProps(),
-      size,
-      rightSection: showIndicator ? /* @__PURE__ */ React19.createElement("span", { ...api.getIndicatorProps() }, /* @__PURE__ */ React19.createElement(BaseDropdownChevronDown, { size: 12 })) : null,
+      rightSection: showIndicator ? /* @__PURE__ */ React18.createElement("span", { ...api.getIndicatorProps() }, /* @__PURE__ */ React18.createElement(BaseDropdownChevronDown, null)) : 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__ */ React18.createElement("div", { "data-wu": "base-dropdown" }, trigger, /* @__PURE__ */ React18.createElement("div", { ...api.getPositionerProps(), "data-wu": "base-dropdown-wrapper" }, /* @__PURE__ */ React18.createElement("div", { ...api.getContentProps(), "data-wu": "base-dropdown-list", "data-part": "content" }, items.map((item) => {
+    return /* @__PURE__ */ React18.createElement(
       BaseDropdownItem,
       {
         ...api.getItemProps({ value: item.value }),
         key: item.value,
         item,
-        size,
         afterClick: () => {
           if (item.disabled) {
             return;
@@ -110,37 +99,28 @@ function BaseDropdown({ buttonProps, dropdown, items, showIndicator, size = "md"
     );
   }))));
 }
-function BaseDropdownItem({ afterClick, item, size }) {
+function BaseDropdownItem({ afterClick, item }) {
   if (!item.wallet) {
-    return /* @__PURE__ */ React19.createElement(BaseDropdownItemRender, { afterClick, item, size });
+    return /* @__PURE__ */ React18.createElement(BaseDropdownItemRender, { afterClick, item });
   }
   switch (item.type) {
     case "Item" /* Item */:
-      return /* @__PURE__ */ React19.createElement(BaseDropdownItemRender, { afterClick, item, size });
+      return /* @__PURE__ */ React18.createElement(BaseDropdownItemRender, { afterClick, item });
     case "WalletConnect" /* WalletConnect */:
-      return /* @__PURE__ */ React19.createElement(BaseDropdownItemWalletConnect, { afterClick, item, size, wallet: item.wallet });
+      return /* @__PURE__ */ React18.createElement(BaseDropdownItemWalletConnect, { afterClick, item, wallet: item.wallet });
     case "WalletCopy" /* WalletCopy */:
-      return /* @__PURE__ */ React19.createElement(BaseDropdownItemRender, { afterClick, item, size });
+      return /* @__PURE__ */ React18.createElement(BaseDropdownItemRender, { afterClick, item });
     case "WalletDisconnect" /* WalletDisconnect */:
-      return /* @__PURE__ */ React19.createElement(
-        BaseDropdownItemWalletDisconnect,
-        {
-          afterClick,
-          item,
-          size,
-          wallet: item.wallet
-        }
-      );
+      return /* @__PURE__ */ React18.createElement(BaseDropdownItemWalletDisconnect, { afterClick, item, wallet: item.wallet });
   }
 }
 function BaseDropdownItemWalletConnect({
   afterClick,
   item,
-  size,
   wallet
 }) {
   const { connect: connect3 } = useWalletUiWallet({ wallet });
-  return /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React18.createElement(
     BaseDropdownItemRender,
     {
       afterClick,
@@ -150,20 +130,18 @@ function BaseDropdownItemWalletConnect({
           await connect3();
           return await item.handler();
         },
-        leftSection: wallet ? /* @__PURE__ */ React19.createElement(WalletUiIcon, { wallet, size }) : void 0
-      },
-      size
+        leftSection: wallet ? /* @__PURE__ */ React18.createElement(WalletUiIcon, { wallet }) : void 0
+      }
     }
   );
 }
 function BaseDropdownItemWalletDisconnect({
   afterClick,
   item,
-  size,
   wallet
 }) {
   const { disconnect } = useWalletUiWallet({ wallet });
-  return /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React18.createElement(
     BaseDropdownItemRender,
     {
       afterClick,
@@ -173,12 +151,11 @@ function BaseDropdownItemWalletDisconnect({
           await disconnect();
           return await item.handler();
         }
-      },
-      size
+      }
     }
   );
 }
-function BaseDropdownItemRender({ afterClick, item, size }) {
+function BaseDropdownItemRender({ afterClick, item }) {
   function onClick() {
     if (item.disabled) {
       return;
@@ -187,15 +164,15 @@ 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__ */ React18.createElement("button", { type: "button", "data-wu": "base-dropdown-item", "data-part": "item", onClick }, item.leftSection ? /* @__PURE__ */ React18.createElement("span", { "data-wu": "base-dropdown-item-left-section" }, item.leftSection) : null, item.label, item.rightSection ? /* @__PURE__ */ React18.createElement("span", { "data-wu": "base-dropdown-item-right-section" }, item.rightSection) : null);
 }
 function BaseDropdownChevronDown(props) {
-  return /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React18.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
-      width: props.size ?? 24,
-      height: props.size ?? 24,
+      width: 12,
+      height: 12,
       viewBox: "0 0 24 24",
       fill: "none",
       stroke: "currentColor",
@@ -204,35 +181,34 @@ function BaseDropdownChevronDown(props) {
       strokeLinejoin: "round",
       ...props
     },
-    /* @__PURE__ */ React19.createElement("path", { d: "m6 9 6 6 6-6" })
+    /* @__PURE__ */ React18.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);
+function BaseSvg({ ...props }) {
+  return /* @__PURE__ */ React18.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", ...props }, props.children);
 }
 
 // src/wallet-ui-icon-close.tsx
-function WalletUiIconClose({ size = "md", ...props }) {
-  return /* @__PURE__ */ React19.createElement(
+function WalletUiIconClose({ ...props }) {
+  return /* @__PURE__ */ React18.createElement(
     BaseSvg,
     {
-      size,
-      sizes: { lg: 16, md: 12, sm: 8 },
       fill: "none",
       stroke: "currentColor",
       strokeWidth: "3",
+      width: 12,
+      height: 12,
       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__ */ React18.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 }) {
+function BaseModal({ modal, buttonLabel, buttonProps = {}, ...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__ */ React18.createElement(React18.Fragment, null, buttonLabel ? /* @__PURE__ */ React18.createElement(BaseButton, { label: buttonLabel, ...buttonProps, ...api.getTriggerProps() }) : null, api.open && /* @__PURE__ */ React18.createElement(Portal, null, /* @__PURE__ */ React18.createElement("div", { ...api.getBackdropProps() }), /* @__PURE__ */ React18.createElement("div", { ...api.getPositionerProps() }, /* @__PURE__ */ React18.createElement("div", { ...api.getContentProps() }, /* @__PURE__ */ React18.createElement("header", null, /* @__PURE__ */ React18.createElement("button", { ...api.getCloseTriggerProps() }, /* @__PURE__ */ React18.createElement(WalletUiIconClose, null))), props.description ? /* @__PURE__ */ React18.createElement("p", { ...api.getDescriptionProps() }, props.description) : null, /* @__PURE__ */ React18.createElement("main", null, props.children)))));
 }
 function useBaseDropdown() {
   const service = useMachine(menu.machine, { id: useId() });
@@ -287,7 +263,7 @@ function getDropdownItemsWallets({
     }
   ];
 }
-function useWalletUiDropdown({ size = "md" } = {}) {
+function useWalletUiDropdown() {
   const dropdown = useBaseDropdown();
   const { account, connect: connect3, copy, disconnect, connected, wallet, wallets } = useWalletUi();
   const itemsWallets = useMemo(() => getDropdownItemsWallets({ connect: connect3, wallets }), [wallets, connect3]);
@@ -322,9 +298,9 @@ 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__ */ React18.createElement(WalletUiIcon, { wallet }) : void 0
     };
-  }, [account, connected, size, wallet]);
+  }, [account, connected, wallet]);
   return {
     buttonProps,
     connected,
@@ -433,7 +409,7 @@ function WalletUiAccountContextProvider({
     }
     return [cluster.id, getUiWalletAccountStorageKey(account)].filter(Boolean);
   }, [account, cluster.id]);
-  return /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React18.createElement(
     WalletUiAccountContext.Provider,
     {
       value: useMemo(
@@ -472,9 +448,9 @@ function WalletUiClusterContextProvider({
       storage.set(clusterId2);
     }
   };
-  return /* @__PURE__ */ React19.createElement(WalletUiClusterContext.Provider, { value }, render(value));
+  return /* @__PURE__ */ React18.createElement(WalletUiClusterContext.Provider, { value }, render(value));
 }
-function WalletUiContextProvider({ children, size = "md" }) {
+function WalletUiContextProvider({ children }) {
   const { account, accountKeys, cluster, setAccount, wallet } = useWalletUiAccount();
   const wallets = useWalletUiWallets();
   const connected = Boolean(wallet && wallet?.accounts.length > 0);
@@ -498,11 +474,10 @@ function WalletUiContextProvider({ children, size = "md" }) {
     connected,
     copy,
     disconnect,
-    size,
     wallet,
     wallets
   };
-  return /* @__PURE__ */ React19.createElement(WalletUiContext.Provider, { value }, children);
+  return /* @__PURE__ */ React18.createElement(WalletUiContext.Provider, { value }, children);
 }
 
 // src/wallet-ui.tsx
@@ -510,38 +485,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__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(
     WalletUiClusterContextProvider,
     {
       clusters,
       storage: clusterStorage,
       render: ({ cluster }) => {
-        return /* @__PURE__ */ React19.createElement(WalletUiAccountContextProvider, { cluster, storage: accountStorage }, /* @__PURE__ */ React19.createElement(WalletUiContextProvider, { ...config }, children));
+        return /* @__PURE__ */ React18.createElement(WalletUiAccountContextProvider, { cluster, storage: accountStorage }, /* @__PURE__ */ React18.createElement(WalletUiContextProvider, { ...config }, children));
       }
     }
   ));
 }
-function WalletUiDropdown({ size = "md", ...props }) {
-  const { buttonProps, items, dropdown } = useWalletUiDropdown({ size });
-  return /* @__PURE__ */ React19.createElement(BaseDropdown, { ...props, buttonProps: { ...buttonProps }, dropdown, items, size });
+function WalletUiDropdown({ ...props }) {
+  const { buttonProps, items, dropdown } = useWalletUiDropdown();
+  return /* @__PURE__ */ React18.createElement(BaseDropdown, { ...props, buttonProps: { ...buttonProps }, dropdown, items });
 }
 
 // src/wallet-ui-account-guard.tsx
-function WalletUiAccountGuard({ fallback = /* @__PURE__ */ React19.createElement(WalletUiDropdown, null), render }) {
+function WalletUiAccountGuard({ fallback = /* @__PURE__ */ React18.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" });
-}
-function WalletUiClusterDropdown({ buttonProps, size = "md", ...props }) {
+function WalletUiClusterDropdown({ buttonProps, ...props }) {
   const dropdown = useBaseDropdown();
   const { cluster, clusters, setCluster } = useWalletUiCluster();
-  return /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React18.createElement(
     BaseDropdown,
     {
-      size,
-      buttonProps: { ...buttonProps, label: cluster.label, size },
+      buttonProps: { ...buttonProps, label: cluster.label },
       items: clusters.map((cluster2) => ({
         handler: async () => {
           setCluster(cluster2.id);
@@ -556,8 +527,8 @@ function WalletUiClusterDropdown({ buttonProps, size = "md", ...props }) {
     }
   );
 }
-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(
+function WalletUiIconNoWallet({ ...props }) {
+  return /* @__PURE__ */ React18.createElement(BaseSvg, { fill: "none", height: 100, width: 100, viewBox: "0 0 97 96", ...props }, /* @__PURE__ */ React18.createElement("circle", { cx: "48.5", cy: "48", r: "48", fill: "url(#paint0_linear_880_5115)", fillOpacity: "0.1" }), /* @__PURE__ */ React18.createElement(
     "circle",
     {
       cx: "48.5",
@@ -567,19 +538,19 @@ function WalletUiIconNoWallet({ size, ...props }) {
       strokeOpacity: "0.4",
       strokeWidth: "2"
     }
-  ), /* @__PURE__ */ React19.createElement("g", { clipPath: "url(#clip0_880_5115)" }, /* @__PURE__ */ React19.createElement(
+  ), /* @__PURE__ */ React18.createElement("g", { clipPath: "url(#clip0_880_5115)" }, /* @__PURE__ */ React18.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__ */ React18.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__ */ React18.createElement("defs", null, /* @__PURE__ */ React18.createElement(
     "linearGradient",
     {
       id: "paint0_linear_880_5115",
@@ -589,13 +560,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__ */ React18.createElement("stop", { stopColor: "#9945FF" }),
+    /* @__PURE__ */ React18.createElement("stop", { offset: "0.14", stopColor: "#8A53F4" }),
+    /* @__PURE__ */ React18.createElement("stop", { offset: "0.42", stopColor: "#6377D6" }),
+    /* @__PURE__ */ React18.createElement("stop", { offset: "0.79", stopColor: "#24B0A7" }),
+    /* @__PURE__ */ React18.createElement("stop", { offset: "0.99", stopColor: "#00D18C" }),
+    /* @__PURE__ */ React18.createElement("stop", { offset: "1", stopColor: "#00D18C" })
+  ), /* @__PURE__ */ React18.createElement(
     "linearGradient",
     {
       id: "paint1_linear_880_5115",
@@ -605,13 +576,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__ */ React18.createElement("stop", { stopColor: "#9945FF" }),
+    /* @__PURE__ */ React18.createElement("stop", { offset: "0.14", stopColor: "#8A53F4" }),
+    /* @__PURE__ */ React18.createElement("stop", { offset: "0.42", stopColor: "#6377D6" }),
+    /* @__PURE__ */ React18.createElement("stop", { offset: "0.79", stopColor: "#24B0A7" }),
+    /* @__PURE__ */ React18.createElement("stop", { offset: "0.99", stopColor: "#00D18C" }),
+    /* @__PURE__ */ React18.createElement("stop", { offset: "1", stopColor: "#00D18C" })
+  ), /* @__PURE__ */ React18.createElement(
     "linearGradient",
     {
       id: "paint2_linear_880_5115",
@@ -621,13 +592,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__ */ React18.createElement("stop", { stopColor: "#9945FF" }),
+    /* @__PURE__ */ React18.createElement("stop", { offset: "0.14", stopColor: "#8A53F4" }),
+    /* @__PURE__ */ React18.createElement("stop", { offset: "0.42", stopColor: "#6377D6" }),
+    /* @__PURE__ */ React18.createElement("stop", { offset: "0.79", stopColor: "#24B0A7" }),
+    /* @__PURE__ */ React18.createElement("stop", { offset: "0.99", stopColor: "#00D18C" }),
+    /* @__PURE__ */ React18.createElement("stop", { offset: "1", stopColor: "#00D18C" })
+  ), /* @__PURE__ */ React18.createElement(
     "linearGradient",
     {
       id: "paint3_linear_880_5115",
@@ -637,22 +608,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)" }))));
-}
-function WalletUiLabel({ className, size, wallet, ...props }) {
+    /* @__PURE__ */ React18.createElement("stop", { stopColor: "#9945FF" }),
+    /* @__PURE__ */ React18.createElement("stop", { offset: "0.14", stopColor: "#8A53F4" }),
+    /* @__PURE__ */ React18.createElement("stop", { offset: "0.42", stopColor: "#6377D6" }),
+    /* @__PURE__ */ React18.createElement("stop", { offset: "0.79", stopColor: "#24B0A7" }),
+    /* @__PURE__ */ React18.createElement("stop", { offset: "0.99", stopColor: "#00D18C" }),
+    /* @__PURE__ */ React18.createElement("stop", { offset: "1", stopColor: "#00D18C" })
+  ), /* @__PURE__ */ React18.createElement("clipPath", { id: "clip0_880_5115" }, /* @__PURE__ */ React18.createElement("rect", { width: "48", height: "48", fill: "white", transform: "translate(24.5 24)" }))));
+}
+function WalletUiLabel({ className, 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__ */ React18.createElement("span", { "data-wu": "wallet-ui-label", className: `${className ?? ""}`, ...props }, wallet.name);
 }
-function WalletUiListButton({ className, select, size = "md", wallet, ...props }) {
-  const [pending, setPending] = React19.useState(false);
+function WalletUiListButton({ className, select, wallet, ...props }) {
+  const [pending, setPending] = React18.useState(false);
   function handleSelect() {
     if (!select) {
       return;
@@ -664,31 +635,31 @@ function WalletUiListButton({ className, select, size = "md", wallet, ...props }
     }
     void select(account).finally(() => setPending(false));
   }
-  return /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React18.createElement(
     "button",
     {
       disabled: pending,
       "data-wu": "wallet-ui-list-button",
-      className: `${size} ${pending ? "pending" : ""} ${className ?? ""}`,
+      className: `${pending ? "pending" : ""} ${className ?? ""}`,
       onClick: handleSelect,
       ...props
     },
-    /* @__PURE__ */ React19.createElement(WalletUiIcon, { wallet, size }),
-    /* @__PURE__ */ React19.createElement(WalletUiLabel, { wallet, size })
+    /* @__PURE__ */ React18.createElement(WalletUiIcon, { wallet }),
+    /* @__PURE__ */ React18.createElement(WalletUiLabel, { wallet })
   );
 }
 
 // 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 })));
+function WalletUiList({ className, select, wallets, ...props }) {
+  return /* @__PURE__ */ React18.createElement("div", { "data-wu": "wallet-ui-list", className: `${className ?? ""}`, ...props }, wallets.map((wallet) => /* @__PURE__ */ React18.createElement(WalletUiListButton, { key: wallet.name, select, 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 }));
+function WalletUiModal({ wallets, select, ...props }) {
+  return /* @__PURE__ */ React18.createElement(BaseModal, { description: "Connect a wallet on Solana to continue", ...props }, /* @__PURE__ */ React18.createElement(WalletUiList, { wallets, select }));
 }
 function WalletUiModalTrigger({ label = "Select Wallet", modal, ...props }) {
-  return /* @__PURE__ */ React19.createElement(BaseButton, { label, onClick: () => void modal.open(), ...props });
+  return /* @__PURE__ */ React18.createElement(BaseButton, { label, onClick: () => void modal.open(), ...props });
 }
 
-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, createWalletUiConfig, ellipsify, useBaseDropdown, useBaseModal, useWalletUi, useWalletUiAccount, useWalletUiCluster, useWalletUiDropdown, useWalletUiSigner, useWalletUiWallet, useWalletUiWallets };
+export { BaseButton, BaseDropdown, BaseDropdownChevronDown, BaseDropdownItemType, BaseModal, BaseSvg, WalletUi, WalletUiAccountContext, WalletUiAccountContextProvider, WalletUiAccountGuard, WalletUiClusterContext, WalletUiClusterContextProvider, WalletUiClusterDropdown, WalletUiContext, WalletUiContextProvider, WalletUiDropdown, WalletUiIcon, WalletUiIconClose, WalletUiIconNoWallet, WalletUiLabel, WalletUiList, WalletUiListButton, WalletUiModal, WalletUiModalTrigger, createWalletUiConfig, ellipsify, useBaseDropdown, useBaseModal, useWalletUi, useWalletUiAccount, useWalletUiCluster, useWalletUiDropdown, useWalletUiSigner, useWalletUiWallet, useWalletUiWallets };
 //# sourceMappingURL=index.browser.mjs.map
 //# sourceMappingURL=index.browser.mjs.map