@vechain/vechain-kit 2.0.0-rc.11 → 2.0.0-rc.12

package/dist/index.cjs

@@ -48,10 +48,10 @@ var fa6 = require('react-icons/fa6');
 var si = require('react-icons/si');
 var bi = require('react-icons/bi');
 var go = require('react-icons/go');
-var sdkNetwork = require('@vechain/sdk-network');
 var react$1 = require('@emotion/react');
 var createCache = require('@emotion/cache');
 var anatomy = require('@chakra-ui/anatomy');
+var sdkNetwork = require('@vechain/sdk-network');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -337,6 +337,7 @@ var en_default = {
   "Manage your embedded wallet security settings: handle your login methods, add a passkey or back up your wallet to never lose access to your assets.": "Manage your embedded wallet security settings: handle your login methods, add a passkey or back up your wallet to never lose access to your assets.",
   "Manage your login methods and passkeys": "Manage your login methods and passkeys",
   "Manage your preferences for currency, language, and appearance.": "Manage your preferences for currency, language, and appearance.",
+  "Minimum {{symbol}} transfer is {{min}}": "Minimum {{symbol}} transfer is {{min}}",
   "Mobile browser may block the login window.": "Mobile browser may block the login window.",
   More: "More",
   "Multiclause Transaction temporary disabled": "Multiclause Transaction temporary disabled",
@@ -907,6 +908,7 @@ var de_default = {
   "Manage your embedded wallet security settings: handle your login methods, add a passkey or back up your wallet to never lose access to your assets.": "Verwalten Sie die Sicherheitseinstellungen Ihrer eingebetteten Wallet: Verwalten Sie Ihre Anmeldemethoden, f\xFCgen Sie einen Zugangsschl\xFCssel hinzu oder sichern Sie Ihre Wallet, um nie den Zugriff auf Ihre Assets zu verlieren.",
   "Manage your login methods and passkeys": "Verwalten Sie Ihre Anmeldemethoden und Zugangsschl\xFCssel",
   "Manage your preferences for currency, language, and appearance.": "Verwalten Sie Ihre Einstellungen f\xFCr W\xE4hrung, Sprache und Erscheinungsbild.",
+  "Minimum {{symbol}} transfer is {{min}}": "Die Mindest\xFCbertragung von {{symbol}} betr\xE4gt {{min}}",
   "Mobile browser may block the login window.": "Mobiler Browser kann das Anmeldefenster blockieren.",
   More: "Mehr",
   "Multiclause Transaction temporary disabled": "Multiclause-Transaktion vor\xFCbergehend deaktiviert",
@@ -1477,6 +1479,7 @@ var it_default = {
   "Manage your embedded wallet security settings: handle your login methods, add a passkey or back up your wallet to never lose access to your assets.": "Gestisci le impostazioni di sicurezza del tuo portafoglio integrato: gestisci i tuoi metodi di accesso, aggiungi una chiave di accesso o esegui il backup del portafoglio per non perdere mai l'accesso ai tuoi beni.",
   "Manage your login methods and passkeys": "Gestisci i tuoi metodi di accesso e chiavi di accesso",
   "Manage your preferences for currency, language, and appearance.": "Gestisci le tue preferenze per valuta, lingua e aspetto.",
+  "Minimum {{symbol}} transfer is {{min}}": "Il trasferimento minimo di {{symbol}} \xE8 {{min}}",
   "Mobile browser may block the login window.": "Il browser mobile potrebbe bloccare la finestra di accesso.",
   More: "Altro",
   "Multiclause Transaction temporary disabled": "Transazione multiclausola temporaneamente disabilitata",
@@ -2047,6 +2050,7 @@ var fr_default = {
   "Manage your embedded wallet security settings: handle your login methods, add a passkey or back up your wallet to never lose access to your assets.": "G\xE9rez les param\xE8tres de s\xE9curit\xE9 de votre portefeuille int\xE9gr\xE9 : g\xE9rez vos m\xE9thodes de connexion, ajoutez une cl\xE9 d'acc\xE8s ou sauvegardez votre portefeuille pour ne jamais perdre l'acc\xE8s \xE0 vos actifs.",
   "Manage your login methods and passkeys": "G\xE9rez vos m\xE9thodes de connexion et cl\xE9s d'acc\xE8s",
   "Manage your preferences for currency, language, and appearance.": "G\xE9rez vos pr\xE9f\xE9rences de devise, de langue et d'apparence.",
+  "Minimum {{symbol}} transfer is {{min}}": "Le transfert minimum {{symbol}} est {{min}}",
   "Mobile browser may block the login window.": "Le navigateur mobile peut bloquer la fen\xEAtre de connexion.",
   More: "Plus",
   "Multiclause Transaction temporary disabled": "Transaction \xE0 clauses multiples temporairement d\xE9sactiv\xE9e",
@@ -2617,6 +2621,7 @@ var es_default = {
   "Manage your embedded wallet security settings: handle your login methods, add a passkey or back up your wallet to never lose access to your assets.": "Administra la configuraci\xF3n de seguridad de tu billetera integrada: gestiona tus m\xE9todos de inicio de sesi\xF3n, a\xF1ade una clave de acceso o realiza una copia de seguridad de tu billetera para no perder nunca el acceso a tus activos.",
   "Manage your login methods and passkeys": "Gestiona tus m\xE9todos de inicio de sesi\xF3n y claves de acceso",
   "Manage your preferences for currency, language, and appearance.": "Administra tus preferencias de moneda, idioma y apariencia.",
+  "Minimum {{symbol}} transfer is {{min}}": "La transferencia m\xEDnima de {{symbol}} es {{min}}",
   "Mobile browser may block the login window.": "El navegador m\xF3vil puede bloquear la ventana de inicio de sesi\xF3n.",
   More: "M\xE1s",
   "Multiclause Transaction temporary disabled": "Transacci\xF3n con m\xFAltiples cl\xE1usulas temporalmente deshabilitada",
@@ -3187,6 +3192,7 @@ var zh_default = {
   "Manage your embedded wallet security settings: handle your login methods, add a passkey or back up your wallet to never lose access to your assets.": "\u7BA1\u7406\u60A8\u7684\u5D4C\u5165\u5F0F\u94B1\u5305\u7684\u5B89\u5168\u8BBE\u7F6E\uFF1A\u5904\u7406\u60A8\u7684\u767B\u5F55\u65B9\u6CD5\uFF0C\u6DFB\u52A0\u5BC6\u7801\u94A5\u5319\u6216\u5907\u4EFD\u60A8\u7684\u94B1\u5305\uFF0C\u4EE5\u514D\u5931\u53BB\u5BF9\u8D44\u4EA7\u7684\u8BBF\u95EE\u3002",
   "Manage your login methods and passkeys": "\u7BA1\u7406\u60A8\u7684\u767B\u5F55\u65B9\u5F0F\u548C\u901A\u884C\u5BC6\u94A5",
   "Manage your preferences for currency, language, and appearance.": "\u7BA1\u7406\u60A8\u5BF9\u8D27\u5E01\u3001\u8BED\u8A00\u548C\u5916\u89C2\u7684\u504F\u597D\u3002",
+  "Minimum {{symbol}} transfer is {{min}}": "{{symbol}}\u7684\u6700\u5C0F\u8F6C\u8D26\u91D1\u989D\u4E3A{{min}}",
   "Mobile browser may block the login window.": "\u79FB\u52A8\u6D4F\u89C8\u5668\u53EF\u80FD\u4F1A\u963B\u6B62\u767B\u5F55\u7A97\u53E3\u3002",
   More: "\u66F4\u591A",
   "Multiclause Transaction temporary disabled": "\u591A\u6761\u6B3E\u4EA4\u6613\u6682\u65F6\u7981\u7528",
@@ -3757,6 +3763,7 @@ var ja_default = {
   "Manage your embedded wallet security settings: handle your login methods, add a passkey or back up your wallet to never lose access to your assets.": "\u57CB\u3081\u8FBC\u307F\u30A6\u30A9\u30EC\u30C3\u30C8\u306E\u30BB\u30AD\u30E5\u30EA\u30C6\u30A3\u8A2D\u5B9A\u3092\u7BA1\u7406\u3057\u307E\u3059: \u30ED\u30B0\u30A4\u30F3\u65B9\u6CD5\u3092\u51E6\u7406\u3057\u305F\u308A\u3001\u30D1\u30B9\u30AD\u30FC\u3092\u8FFD\u52A0\u3057\u305F\u308A\u3001\u8CC7\u7523\u3078\u306E\u30A2\u30AF\u30BB\u30B9\u3092\u5931\u308F\u306A\u3044\u3088\u3046\u306B\u30A6\u30A9\u30EC\u30C3\u30C8\u3092\u30D0\u30C3\u30AF\u30A2\u30C3\u30D7\u3057\u305F\u308A\u3057\u307E\u3059\u3002",
   "Manage your login methods and passkeys": "\u30ED\u30B0\u30A4\u30F3\u65B9\u6CD5\u3068\u30D1\u30B9\u30AD\u30FC\u3092\u7BA1\u7406\u3059\u308B",
   "Manage your preferences for currency, language, and appearance.": "\u901A\u8CA8\u3001\u8A00\u8A9E\u3001\u5916\u89B3\u306E\u8A2D\u5B9A\u3092\u7BA1\u7406\u3057\u307E\u3059\u3002",
+  "Minimum {{symbol}} transfer is {{min}}": "\u6700\u5C0F{{symbol}}\u8EE2\u9001\u91CF\u306F{{min}}\u3067\u3059",
   "Mobile browser may block the login window.": "\u30E2\u30D0\u30A4\u30EB\u30D6\u30E9\u30A6\u30B6\u306F\u30ED\u30B0\u30A4\u30F3\u30A6\u30A3\u30F3\u30C9\u30A6\u3092\u30D6\u30ED\u30C3\u30AF\u3059\u308B\u53EF\u80FD\u6027\u304C\u3042\u308A\u307E\u3059\u3002",
   More: "\u3082\u3063\u3068\u898B\u308B",
   "Multiclause Transaction temporary disabled": "\u8907\u6570\u6761\u9805\u306E\u30C8\u30E9\u30F3\u30B6\u30AF\u30B7\u30E7\u30F3\u306F\u4E00\u6642\u7684\u306B\u7121\u52B9\u5316\u3055\u308C\u3066\u3044\u307E\u3059\u3002",
@@ -4858,7 +4865,7 @@ var AddressDisplay = ({
 
 // package.json
 var package_default = {
-  version: "2.0.0-rc.11"};
+  version: "2.0.0-rc.12"};
 var VersionFooter = ({ ...props }) => {
   const { darkMode: isDark } = useVeChainKitConfig();
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -4976,7 +4983,7 @@ var BaseModal = ({
   isCloseable = true
 }) => {
   const [isDesktop] = react.useMediaQuery("(min-width: 768px)");
-  const { darkMode } = useVeChainKitConfig();
+  const { portalRootRef } = useVechainKitThemeConfig();
   const modalContentProps = isDesktop ? {} : {
     position: "fixed",
     bottom: "0",
@@ -4987,7 +4994,7 @@ var BaseModal = ({
     overflowX: "hidden",
     scrollBehavior: "smooth"
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(VechainKitThemeProvider, { darkMode, children: /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     react.Modal,
     {
       motionPreset,
@@ -4999,7 +5006,7 @@ var BaseModal = ({
       blockScrollOnMount,
       closeOnOverlayClick: closeOnOverlayClick && isCloseable,
       preserveScrollBarGap: true,
-      portalProps: { containerRef: void 0 },
+      portalProps: { containerRef: portalRootRef },
       trapFocus: !allowExternalFocus,
       autoFocus: !allowExternalFocus,
       children: [
@@ -5015,7 +5022,7 @@ var BaseModal = ({
         )
       ]
     }
-  ) });
+  );
 };
 
 // src/utils/currencyUtils.ts
@@ -9761,7 +9768,7 @@ var SendTokenContent = ({
   onBack: parentOnBack = () => setCurrentContent("main")
 }) => {
   const { t } = reactI18next.useTranslation();
-  const { darkMode: isDark } = useVeChainKitConfig();
+  const { darkMode: isDark, feeDelegation } = useVeChainKitConfig();
   const { currentCurrency } = useCurrency();
   const { exchangeRates } = useTokenPrices();
   const [selectedToken, setSelectedToken] = React10.useState(
@@ -9865,6 +9872,30 @@ var SendTokenContent = ({
     }
     if (selectedToken) {
       const numericAmount = ethers.parseEther(data.amount);
+      const minB3tr = feeDelegation?.b3trTransfers?.minAmountInEther;
+      if (selectedToken.symbol === "B3TR" && typeof minB3tr === "number" && minB3tr > 0) {
+        try {
+          const minWei = ethers.parseEther(String(minB3tr));
+          if (numericAmount < minWei) {
+            setError("amount", {
+              type: "manual",
+              message: t(
+                "Minimum {{symbol}} transfer is {{min}}",
+                {
+                  symbol: selectedToken.symbol,
+                  min: minB3tr
+                }
+              )
+            });
+            Analytics.send.flow("review", {
+              tokenSymbol: selectedToken.symbol,
+              error: "Below minimum amount"
+            });
+            return;
+          }
+        } catch {
+        }
+      }
       if (numericAmount > ethers.parseEther(selectedToken.balance)) {
         setError("amount", {
           type: "manual",
@@ -9960,9 +9991,22 @@ var SendTokenContent = ({
                     validate: (value) => {
                       if (!value) return true;
                       const numericValue = parseFloat(value);
-                      return !isNaN(numericValue) || t(
-                        "Please enter a valid number"
-                      );
+                      if (isNaN(numericValue)) {
+                        return t(
+                          "Please enter a valid number"
+                        );
+                      }
+                      const minB3tr = feeDelegation?.b3trTransfers?.minAmountInEther;
+                      if (selectedToken?.symbol === "B3TR" && typeof minB3tr === "number" && minB3tr > 0 && numericValue < minB3tr) {
+                        return t(
+                          "Minimum {{symbol}} transfer is {{min}}",
+                          {
+                            symbol: selectedToken.symbol,
+                            min: minB3tr
+                          }
+                        );
+                      }
+                      return true;
                     }
                   }),
                   onChange: (e) => {
@@ -10060,8 +10104,7 @@ var SendTokenContent = ({
                 color: isDark ? "whiteAlpha.700" : "blackAlpha.700",
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { opacity: 0.5, children: [
-                    "\u2248",
-                    " ",
+                    "\u2248 ",
                     formattedValue
                   ] }),
                   /* @__PURE__ */ jsxRuntime.jsx(
@@ -15613,7 +15656,7 @@ var TransactionToast = ({
 }) => {
   const { darkMode: isDark } = useVeChainKitConfig();
   if (!isOpen) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(VechainKitThemeProvider, { darkMode: isDark, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     react.Box,
     {
       position: "fixed",
@@ -15638,7 +15681,7 @@ var TransactionToast = ({
         }
       )
     }
-  ) });
+  );
 };
 var LoginLoadingModal = ({
   isOpen,
@@ -16416,199 +16459,613 @@ var UpgradeSmartAccountModal = ({ isOpen, onClose, style }) => {
     }
   );
 };
-var ModalContext = React10.createContext(null);
-var useModal = () => {
-  const context = React10.useContext(ModalContext);
-  if (!context) {
-    throw new Error("useModal must be used within ModalProvider");
-  }
-  return context;
-};
-var ModalProvider = ({ children }) => {
-  const [isConnectModalOpen, setIsConnectModalOpen] = React10.useState(false);
-  const { setSource, connect } = dappKitReact.useWallet();
-  const openConnectModal = React10.useCallback(() => {
-    if (chunkM6WTSZ5C_cjs.isBrowser() && window.vechain && window.vechain.isInAppBrowser) {
-      setSource("veworld");
-      connect();
-    } else {
-      setIsConnectModalOpen(true);
-    }
-  }, []);
-  const closeConnectModal = React10.useCallback(
-    () => setIsConnectModalOpen(false),
-    []
-  );
-  const [isAccountModalOpen, setIsAccountModalOpen] = React10.useState(false);
-  const openAccountModal = React10.useCallback(
-    (content) => {
-      setAccountModalContent(content ?? "main");
-      setIsAccountModalOpen(true);
+var { definePartsStyle, defineMultiStyleConfig } = react.createMultiStyleConfigHelpers(anatomy.modalAnatomy.keys);
+var getModalVariants = (darkMode) => ({
+  vechainKitBase: definePartsStyle({
+    dialog: {
+      scrollbarWidth: "none",
+      overflow: "scroll",
+      overflowX: "hidden",
+      maxHeight: "550px",
+      borderRadius: "24px",
+      backgroundColor: darkMode ? "#1f1f1e" : "white"
     },
-    []
-  );
-  const closeAccountModal = React10.useCallback(
-    () => setIsAccountModalOpen(false),
-    []
-  );
-  const [isTransactionModalOpen, setIsTransactionModalOpen] = React10.useState(false);
-  const openTransactionModal = React10.useCallback(
-    () => setIsTransactionModalOpen(true),
-    []
-  );
-  const closeTransactionModal = React10.useCallback(
-    () => setIsTransactionModalOpen(false),
-    []
-  );
-  const [isTransactionToastOpen, setIsTransactionToastOpen] = React10.useState(false);
-  const openTransactionToast = React10.useCallback(
-    () => setIsTransactionToastOpen(true),
-    []
-  );
-  const closeTransactionToast = React10.useCallback(
-    () => setIsTransactionToastOpen(false),
-    []
-  );
-  const [isUpgradeSmartAccountModalOpen, setIsUpgradeSmartAccountModalOpen] = React10.useState(false);
-  const [upgradeSmartAccountModalStyle, setUpgradeSmartAccountModalStyle] = React10.useState(void 0);
-  const openUpgradeSmartAccountModal = React10.useCallback(
-    (style) => {
-      setUpgradeSmartAccountModalStyle(style);
-      setIsUpgradeSmartAccountModalOpen(true);
+    closeButton: {
+      borderRadius: "50%"
     },
-    []
-  );
-  const closeUpgradeSmartAccountModal = React10.useCallback(
-    () => setIsUpgradeSmartAccountModalOpen(false),
-    []
-  );
-  const [accountModalContent, setAccountModalContent] = React10.useState("main");
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    ModalContext.Provider,
-    {
-      value: {
-        openConnectModal,
-        closeConnectModal,
-        isConnectModalOpen,
-        openAccountModal,
-        closeAccountModal,
-        isAccountModalOpen,
-        setAccountModalContent,
-        accountModalContent,
-        openTransactionModal,
-        closeTransactionModal,
-        isTransactionModalOpen,
-        openTransactionToast,
-        closeTransactionToast,
-        isTransactionToastOpen,
-        openUpgradeSmartAccountModal,
-        closeUpgradeSmartAccountModal,
-        isUpgradeSmartAccountModalOpen
-      },
-      children: [
-        children,
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ConnectModal,
-          {
-            isOpen: isConnectModalOpen,
-            onClose: closeConnectModal
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          AccountModal,
-          {
-            isOpen: isAccountModalOpen,
-            onClose: closeAccountModal,
-            initialContent: accountModalContent
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          UpgradeSmartAccountModal,
-          {
-            isOpen: isUpgradeSmartAccountModalOpen,
-            onClose: closeUpgradeSmartAccountModal,
-            style: upgradeSmartAccountModalStyle
-          }
-        )
-      ]
+    header: {
+      w: "full",
+      color: darkMode ? "#dfdfdd" : "#2e2e2e",
+      fontSize: "md",
+      fontWeight: "700",
+      textAlign: "center"
     }
-  );
-};
-var useConnectModal = () => {
-  const { loginMethods } = useVeChainKitConfig();
-  const hasOnlyDappKit = loginMethods?.length === 1 && loginMethods[0].method === "dappkit";
-  const { openConnectModal, closeConnectModal, isConnectModalOpen } = useModal();
-  const { open: openDappKit, close: closeDappKit } = dappKitReact.useWalletModal();
-  return {
-    open: hasOnlyDappKit ? openDappKit : openConnectModal,
-    close: hasOnlyDappKit ? closeDappKit : closeConnectModal,
-    isOpen: hasOnlyDappKit ? false : isConnectModalOpen
-  };
-};
-var ConnectModalProvider = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
-var useAccountModal = () => {
-  const {
-    openAccountModal: open,
-    closeAccountModal: close,
-    isAccountModalOpen: isOpen
-  } = useModal();
-  return { open: () => open(), close, isOpen };
-};
-var AccountModalProvider = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
-var useTransactionModal = () => {
-  const {
-    openTransactionModal: open,
-    closeTransactionModal: close,
-    isTransactionModalOpen: isOpen
-  } = useModal();
-  return { open, close, isOpen };
-};
-var TransactionModalProvider = ({
-  children
-}) => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
-var useTransactionToast = () => {
-  const {
-    openTransactionToast: open,
-    closeTransactionToast: close,
-    isTransactionToastOpen: isOpen
-  } = useModal();
-  return { open, close, isOpen };
-};
-var TransactionToastProvider = ({
-  children
-}) => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
-var useWalletModal2 = () => {
-  const { connection } = useWallet();
-  const {
-    openConnectModal,
-    closeConnectModal,
-    isConnectModalOpen,
-    openAccountModal,
-    closeAccountModal,
-    isAccountModalOpen
-  } = useModal();
-  const open = () => {
-    if (connection.isConnected) {
-      openAccountModal();
-    } else {
-      openConnectModal();
+  })
+});
+var getModalTheme = (darkMode) => defineMultiStyleConfig({
+  variants: getModalVariants(darkMode),
+  defaultProps: {
+    variant: "vechainKitBase"
+  }
+});
+var { definePartsStyle: definePartsStyle2, defineMultiStyleConfig: defineMultiStyleConfig2 } = react.createMultiStyleConfigHelpers(anatomy.cardAnatomy.keys);
+var getCardVariants = (darkMode) => ({
+  vechainKitBase: definePartsStyle2({
+    container: {
+      backgroundColor: darkMode ? "#1c1c1b" : "#f5f5f5",
+      borderRadius: "14px",
+      width: "full",
+      border: "none"
+    },
+    body: {
+      p: 5,
+      width: "full"
+    },
+    header: {
+      p: 5,
+      width: "full",
+      borderRadius: "14px 14px 0 0"
+    },
+    footer: {
+      width: "full",
+      borderRadius: "0 0 14px 14px"
     }
-  };
-  const close = () => {
-    if (isAccountModalOpen) {
-      closeAccountModal();
+  }),
+  featureAnnouncement: definePartsStyle2({
+    body: {
+      backgroundColor: darkMode ? "#ffffff0a" : "blackAlpha.50",
+      borderRadius: "12px",
+      color: darkMode ? "#ffffff12" : "blackAlpha.200"
+    },
+    container: {
+      borderRadius: "12px",
+      backgroundColor: "transparent"
     }
-    if (isConnectModalOpen) {
-      closeConnectModal();
+  }),
+  vechainKitAppCard: definePartsStyle2({
+    body: {
+      height: "full",
+      borderRadius: "12px",
+      backgroundColor: darkMode ? "#1f1f1e" : "white",
+      border: darkMode ? "1px solid #2d2d2d" : "1px solid #eaeaea"
+    },
+    container: {
+      height: "150px",
+      borderRadius: "12px",
+      backgroundColor: "transparent"
     }
-  };
-  const isOpen = isConnectModalOpen || isAccountModalOpen;
-  return { open, close, isOpen };
-};
-var WalletModalProvider = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
-var useChooseNameModal = () => {
-  const {
-    openAccountModal,
+  })
+});
+var getCardTheme = (darkMode) => defineMultiStyleConfig2({
+  variants: getCardVariants(darkMode),
+  defaultProps: {
+    variant: "vechainKitBase"
+    // default is solid
+  }
+});
+var baseStyle = react.defineStyle({
+  borderRadius: "12px"
+});
+var variants = {
+  loginIn: react.defineStyle(() => ({
+    bg: "white",
+    color: "#1a1a1a",
+    fontSize: "14px",
+    fontWeight: "400",
+    border: "1px solid #ebebeb",
+    py: 6,
+    px: 3,
+    borderRadius: 16,
+    _hover: {
+      bg: "#eaeaea"
+    },
+    _dark: {
+      bg: "transparent",
+      color: "white",
+      _hover: {
+        bg: "#2a2a2a"
+      },
+      border: "1px solid #ffffff1a"
+    }
+  })),
+  loginWithVechain: react.defineStyle(() => ({
+    bg: "#1a1a1a",
+    color: "white",
+    fontSize: "14px",
+    fontWeight: "400",
+    py: 6,
+    px: 3,
+    borderRadius: 16,
+    border: "1px solid #5e5e5e",
+    _hover: {
+      bg: "#2a2a2a"
+    },
+    _dark: {
+      bg: "white",
+      color: "#1a1a1a",
+      _hover: {
+        bg: "#eaeaea"
+      },
+      border: "1px solid #ffffff1a"
+    },
+    transition: "all 0.2s"
+  })),
+  vechainKitSelector: react.defineStyle(({ colorMode }) => ({
+    bg: "transparent",
+    border: `1px solid ${colorMode === "dark" ? "#ffffff29" : "#ebebeb"}`,
+    _hover: {
+      borderColor: colorMode === "dark" ? "#ffffff50" : "#dedede",
+      bg: colorMode === "dark" ? "whiteAlpha.50" : "blackAlpha.50"
+    },
+    _active: {
+      transform: "scale(0.98)"
+    },
+    transition: "all 0.2s"
+  })),
+  vechainKitPrimary: react.defineStyle(() => ({
+    fontSize: "md",
+    px: 4,
+    width: "full",
+    height: "60px",
+    borderRadius: "xl",
+    bg: "#2B6CB0",
+    color: "white",
+    _hover: {
+      bg: "#2C5282",
+      _disabled: {
+        bg: "#2B6CB0"
+      }
+    },
+    _dark: {
+      bg: "#3182CE",
+      _hover: {
+        bg: "#2B6CB0"
+      }
+    },
+    transition: "all 0.2s"
+  })),
+  vechainKitSecondary: react.defineStyle(({ colorMode }) => ({
+    fontSize: "md",
+    px: 4,
+    width: "full",
+    height: "60px",
+    borderRadius: "xl",
+    backgroundColor: colorMode === "dark" ? "#ffffff0a" : "blackAlpha.50",
+    _hover: {
+      backgroundColor: colorMode === "dark" ? "#ffffff12" : "blackAlpha.200"
+    },
+    border: "1px solid",
+    borderColor: "gray.200",
+    color: "blackAlpha.900",
+    _dark: {
+      borderColor: "whiteAlpha.200",
+      color: "whiteAlpha.900"
+    },
+    transition: "all 0.2s"
+  })),
+  vechainKitLogout: react.defineStyle(({ colorMode }) => ({
+    width: "full",
+    minHeight: "50px",
+    height: "fit-content",
+    borderRadius: "xl",
+    p: 0,
+    backgroundColor: colorMode === "dark" ? "rgba(254, 178, 178, 0.12)" : "red.50",
+    _hover: {
+      backgroundColor: colorMode === "dark" ? "rgba(254, 178, 178, 0.37)" : "red.200",
+      color: colorMode === "dark" ? "red.50" : "red.900"
+    },
+    transition: "all 0.2s",
+    color: colorMode === "dark" ? "red.200" : "red.900"
+  })),
+  mainContentButton: react.defineStyle(({ colorMode }) => ({
+    width: "100%",
+    backgroundColor: colorMode === "dark" ? "#ffffff0a" : "blackAlpha.50",
+    borderRadius: "xl",
+    p: 3,
+    cursor: "pointer",
+    _hover: {
+      backgroundColor: colorMode === "dark" ? "#ffffff12" : "blackAlpha.200"
+    }
+  })),
+  actionButton: react.defineStyle(({ colorMode }) => ({
+    width: "full",
+    minHeight: "50px",
+    height: "fit-content",
+    backgroundColor: colorMode === "dark" ? "#ffffff0a" : "blackAlpha.50",
+    borderRadius: "xl",
+    p: 0,
+    _hover: {
+      backgroundColor: colorMode === "dark" ? "#ffffff12" : "blackAlpha.200"
+    },
+    transition: "all 0.2s"
+  }))
+};
+var buttonTheme = react.defineStyleConfig({
+  baseStyle,
+  variants
+});
+var { definePartsStyle: definePartsStyle3, defineMultiStyleConfig: defineMultiStyleConfig3 } = react.createMultiStyleConfigHelpers(anatomy.popoverAnatomy.keys);
+var getPopoverVariants = (darkMode) => ({
+  vechainKitBase: definePartsStyle3({
+    popper: {
+      zIndex: 1e3
+    },
+    content: {
+      borderRadius: "24px",
+      border: "none",
+      backgroundColor: darkMode ? "#1f1f1e" : "white",
+      boxShadow: "0px 4px 16px rgba(0, 0, 0, 0.12)",
+      minWidth: "380px"
+    },
+    body: {
+      padding: "16px"
+    }
+  })
+});
+var getPopoverTheme = (darkMode) => defineMultiStyleConfig3({
+  variants: getPopoverVariants(darkMode),
+  defaultProps: {
+    variant: "vechainKitBase"
+  }
+});
+
+// src/theme/theme.tsx
+var getThemeConfig = (darkMode) => ({
+  useSystemColorMode: false,
+  disableTransitionOnChange: false,
+  // @ts-ignore
+  components: {
+    Modal: getModalTheme(darkMode),
+    Card: getCardTheme(darkMode),
+    Button: buttonTheme,
+    Popover: getPopoverTheme(darkMode)
+  },
+  // COMPLETELY disable global styles to prevent any conflicts
+  styles: {
+    global: () => ({})
+    // empty object = no global styles injected
+  },
+  // only defining the semantic tokens we need, scoped to our components
+  semanticTokens: {
+    colors: {
+      "chakra-body-text": {
+        _light: "#1A202C",
+        _dark: "#F7FAFC"
+      },
+      "chakra-body-bg": {
+        _light: "#FFFFFF",
+        _dark: "#1A202C"
+      },
+      "chakra-border-color": {
+        _light: "#E2E8F0",
+        _dark: "#2D3748"
+      },
+      "chakra-placeholder-color": {
+        _light: "#A0AEC0",
+        _dark: "#718096"
+      }
+    },
+    config: {
+      cssVarPrefix: "vechain-kit"
+      // consistent naming across all components
+    }
+  },
+  // minimal foundations to prevent global style injection
+  fonts: react.theme.fonts,
+  colors: react.theme.colors,
+  space: react.theme.space
+});
+var getVechainKitTheme = (darkMode) => {
+  const theme = react.extendTheme(getThemeConfig(darkMode));
+  theme.styles.global = () => ({});
+  if (theme.__cssVars) {
+    theme.__cssVars.global = () => ({});
+  }
+  return theme;
+};
+var { ToastContainer } = react.createStandaloneToast();
+var createVeChainKitCache = () => {
+  return createCache__default.default({
+    key: "vechain-kit",
+    // consistent with our layer and class names
+    prepend: true
+    // CSS layers will be handled via Global component injection
+  });
+};
+var LayerSetup = () => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    react$1.Global,
+    {
+      styles: react$1.css`
+                /* define CSS layers with proper priority order */
+                @layer vechain-kit, host-app;
+
+                /* All vechain-kit styles go in the vechain-kit layer */
+                @layer vechain-kit {
+                    /* scope all Chakra styles to vechain-kit-root */
+                    .vechain-kit-root {
+                        /* vechain-kit styles are contained here */
+                    }
+                }
+            `
+    }
+  );
+};
+var EnsureChakraProvider = ({
+  children,
+  theme
+}) => {
+  const cache = React10.useMemo(() => createVeChainKitCache(), []);
+  return /* @__PURE__ */ jsxRuntime.jsxs(react$1.CacheProvider, { value: cache, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(LayerSetup, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      react.ChakraProvider,
+      {
+        theme,
+        resetCSS: false,
+        portalZIndex: void 0,
+        children
+      }
+    )
+  ] });
+};
+var EnsureColorModeScript = ({ darkMode }) => {
+  try {
+    const existingScript = chunkM6WTSZ5C_cjs.safeQuerySelector("[data-chakra-color-mode]");
+    if (existingScript) {
+      return null;
+    }
+  } catch (e) {
+    console.error(e);
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(react.ColorModeScript, { initialColorMode: darkMode ? "dark" : "light" });
+};
+var VechainKitThemeContext = React10.createContext({
+  portalRootRef: void 0
+});
+var useVechainKitThemeConfig = () => {
+  const context = React10.useContext(VechainKitThemeContext);
+  if (!context) {
+    throw new Error(
+      "useVechainKitTheme must be used within a VechainKitThemeProvider"
+    );
+  }
+  return context;
+};
+var VechainKitThemeProvider = ({
+  children,
+  darkMode = false
+}) => {
+  const portalRootRef = React10.useRef(null);
+  const theme = React10.useMemo(
+    () => ({
+      ...getVechainKitTheme(darkMode),
+      config: {
+        ...getVechainKitTheme(darkMode).config,
+        initialColorMode: darkMode ? "dark" : "light"
+      }
+    }),
+    [darkMode]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(VechainKitThemeContext.Provider, { value: { portalRootRef }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(EnsureColorModeScript, { darkMode }),
+    /* @__PURE__ */ jsxRuntime.jsx(EnsureChakraProvider, { theme, children: /* @__PURE__ */ jsxRuntime.jsx(
+      react.Box,
+      {
+        id: "vechain-kit-root",
+        ref: portalRootRef,
+        bg: "transparent",
+        borderRadius: "12px",
+        sx: {
+          bg: darkMode ? "#1A202C" : "#FFFFFF",
+          color: darkMode ? "#F7FAFC" : "#1A202C",
+          borderColor: darkMode ? "#2D3748" : "#E2E8F0",
+          "input::placeholder": {
+            color: darkMode ? "#718096" : "#A0AEC0"
+          }
+        },
+        children
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(ToastContainer, {})
+  ] });
+};
+var ModalContext = React10.createContext(null);
+var useModal = () => {
+  const context = React10.useContext(ModalContext);
+  if (!context) {
+    throw new Error("useModal must be used within ModalProvider");
+  }
+  return context;
+};
+var ModalProvider = ({ children }) => {
+  const { darkMode } = useVeChainKitConfig();
+  const [isConnectModalOpen, setIsConnectModalOpen] = React10.useState(false);
+  const { setSource, connect } = dappKitReact.useWallet();
+  const openConnectModal = React10.useCallback(() => {
+    if (chunkM6WTSZ5C_cjs.isBrowser() && window.vechain && window.vechain.isInAppBrowser) {
+      setSource("veworld");
+      connect();
+    } else {
+      setIsConnectModalOpen(true);
+    }
+  }, []);
+  const closeConnectModal = React10.useCallback(
+    () => setIsConnectModalOpen(false),
+    []
+  );
+  const [isAccountModalOpen, setIsAccountModalOpen] = React10.useState(false);
+  const openAccountModal = React10.useCallback(
+    (content) => {
+      setAccountModalContent(content ?? "main");
+      setIsAccountModalOpen(true);
+    },
+    []
+  );
+  const closeAccountModal = React10.useCallback(
+    () => setIsAccountModalOpen(false),
+    []
+  );
+  const [isTransactionModalOpen, setIsTransactionModalOpen] = React10.useState(false);
+  const openTransactionModal = React10.useCallback(
+    () => setIsTransactionModalOpen(true),
+    []
+  );
+  const closeTransactionModal = React10.useCallback(
+    () => setIsTransactionModalOpen(false),
+    []
+  );
+  const [isTransactionToastOpen, setIsTransactionToastOpen] = React10.useState(false);
+  const openTransactionToast = React10.useCallback(
+    () => setIsTransactionToastOpen(true),
+    []
+  );
+  const closeTransactionToast = React10.useCallback(
+    () => setIsTransactionToastOpen(false),
+    []
+  );
+  const [isUpgradeSmartAccountModalOpen, setIsUpgradeSmartAccountModalOpen] = React10.useState(false);
+  const [upgradeSmartAccountModalStyle, setUpgradeSmartAccountModalStyle] = React10.useState(void 0);
+  const openUpgradeSmartAccountModal = React10.useCallback(
+    (style) => {
+      setUpgradeSmartAccountModalStyle(style);
+      setIsUpgradeSmartAccountModalOpen(true);
+    },
+    []
+  );
+  const closeUpgradeSmartAccountModal = React10.useCallback(
+    () => setIsUpgradeSmartAccountModalOpen(false),
+    []
+  );
+  const [accountModalContent, setAccountModalContent] = React10.useState("main");
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    ModalContext.Provider,
+    {
+      value: {
+        openConnectModal,
+        closeConnectModal,
+        isConnectModalOpen,
+        openAccountModal,
+        closeAccountModal,
+        isAccountModalOpen,
+        setAccountModalContent,
+        accountModalContent,
+        openTransactionModal,
+        closeTransactionModal,
+        isTransactionModalOpen,
+        openTransactionToast,
+        closeTransactionToast,
+        isTransactionToastOpen,
+        openUpgradeSmartAccountModal,
+        closeUpgradeSmartAccountModal,
+        isUpgradeSmartAccountModalOpen
+      },
+      children: [
+        children,
+        /* @__PURE__ */ jsxRuntime.jsxs(VechainKitThemeProvider, { darkMode, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ConnectModal,
+            {
+              isOpen: isConnectModalOpen,
+              onClose: closeConnectModal
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            AccountModal,
+            {
+              isOpen: isAccountModalOpen,
+              onClose: closeAccountModal,
+              initialContent: accountModalContent
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            UpgradeSmartAccountModal,
+            {
+              isOpen: isUpgradeSmartAccountModalOpen,
+              onClose: closeUpgradeSmartAccountModal,
+              style: upgradeSmartAccountModalStyle
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+var useConnectModal = () => {
+  const { loginMethods } = useVeChainKitConfig();
+  const hasOnlyDappKit = loginMethods?.length === 1 && loginMethods[0].method === "dappkit";
+  const { openConnectModal, closeConnectModal, isConnectModalOpen } = useModal();
+  const { open: openDappKit, close: closeDappKit } = dappKitReact.useWalletModal();
+  return {
+    open: hasOnlyDappKit ? openDappKit : openConnectModal,
+    close: hasOnlyDappKit ? closeDappKit : closeConnectModal,
+    isOpen: hasOnlyDappKit ? false : isConnectModalOpen
+  };
+};
+var ConnectModalProvider = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+var useAccountModal = () => {
+  const {
+    openAccountModal: open,
+    closeAccountModal: close,
+    isAccountModalOpen: isOpen
+  } = useModal();
+  return { open: () => open(), close, isOpen };
+};
+var AccountModalProvider = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+var useTransactionModal = () => {
+  const {
+    openTransactionModal: open,
+    closeTransactionModal: close,
+    isTransactionModalOpen: isOpen
+  } = useModal();
+  return { open, close, isOpen };
+};
+var TransactionModalProvider = ({
+  children
+}) => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+var useTransactionToast = () => {
+  const {
+    openTransactionToast: open,
+    closeTransactionToast: close,
+    isTransactionToastOpen: isOpen
+  } = useModal();
+  return { open, close, isOpen };
+};
+var TransactionToastProvider = ({
+  children
+}) => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+var useWalletModal2 = () => {
+  const { connection } = useWallet();
+  const {
+    openConnectModal,
+    closeConnectModal,
+    isConnectModalOpen,
+    openAccountModal,
+    closeAccountModal,
+    isAccountModalOpen
+  } = useModal();
+  const open = () => {
+    if (connection.isConnected) {
+      openAccountModal();
+    } else {
+      openConnectModal();
+    }
+  };
+  const close = () => {
+    if (isAccountModalOpen) {
+      closeAccountModal();
+    }
+    if (isConnectModalOpen) {
+      closeConnectModal();
+    }
+  };
+  const isOpen = isConnectModalOpen || isAccountModalOpen;
+  return { open, close, isOpen };
+};
+var WalletModalProvider = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+var useChooseNameModal = () => {
+  const {
+    openAccountModal,
     closeAccountModal,
     isAccountModalOpen,
     setAccountModalContent
@@ -19167,7 +19624,7 @@ var useLegalDocuments = () => {
 };
 var LegalDocumentsProvider = ({ children }) => {
   const { connection, account, disconnect } = useWallet();
-  const { legalDocuments } = useVeChainKitConfig();
+  const { darkMode, legalDocuments } = useVeChainKitConfig();
   const [storedAgreements, setStoredAgreements] = useSyncableLocalStorage(LEGAL_DOCS_LOCAL_STORAGE_KEY, []);
   const [optionalRejected, setOptionalRejected] = useSyncableLocalStorage(LEGAL_DOCS_OPTIONAL_REJECT_LOCAL_STORAGE_KEY, []);
   const [showTermsModal, setShowTermsModal] = React10.useState(false);
@@ -19355,7 +19812,7 @@ var LegalDocumentsProvider = ({ children }) => {
       },
       children: [
         children,
-        /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx(VechainKitThemeProvider, { darkMode, children: /* @__PURE__ */ jsxRuntime.jsx(
           LegalDocumentsModal,
           {
             isOpen: showTermsModal,
@@ -19364,7 +19821,7 @@ var LegalDocumentsProvider = ({ children }) => {
             } : handleLogout,
             onlyOptionalDocuments
           }
-        )
+        ) })
       ]
     }
   );
@@ -19604,756 +20061,358 @@ var PrivyWalletProvider = ({
             // set the Privy wallet address as the owner of the smart account
           )
         );
-      }
-      dataToSign.forEach((data, index) => {
-        clauses.push(
-          sdkCore.Clause.callFunction(
-            sdkCore.Address.of(smartAccount.address ?? ""),
-            sdkCore.ABIContract.ofAbi(chunkEESC6JDT_cjs.SimpleAccountABI).getFunction(
-              "executeWithAuthorization"
-            ),
-            [
-              data.message.to,
-              BigInt(data.message.value),
-              data.message.data,
-              BigInt(data.message.validAfter),
-              BigInt(data.message.validBefore),
-              signatures[index]
-            ]
-          )
-        );
-      });
-    }
-    const gasResult = await thor.gas.estimateGas(
-      clauses,
-      connectedWallet.address ?? "",
-      {
-        gasPadding: 1
-      }
-    );
-    const parsedGasLimit = Math.max(
-      gasResult.totalGas,
-      suggestedMaxGas ?? 0
-    );
-    const txBody = await thor.transactions.buildTransactionBody(
-      clauses,
-      parsedGasLimit,
-      { isDelegated: true }
-    );
-    const wallet = new sdkNetwork.ProviderInternalBaseWallet(
-      [
-        {
-          privateKey: Buffer.from(
-            chunkM6WTSZ5C_cjs.randomTransactionUser.privateKey.slice(2),
-            "hex"
-          ),
-          address: chunkM6WTSZ5C_cjs.randomTransactionUser.address
-        }
-      ],
-      { gasPayer: { gasPayerServiceUrl: delegatorUrl } }
-    );
-    const providerWithDelegationEnabled = new sdkNetwork.VeChainProvider(
-      thor,
-      wallet,
-      true
-    );
-    const signer = await providerWithDelegationEnabled.getSigner(
-      chunkM6WTSZ5C_cjs.randomTransactionUser.address
-    );
-    const txInput = sdkNetwork.signerUtils.transactionBodyToTransactionRequestInput(
-      txBody,
-      chunkM6WTSZ5C_cjs.randomTransactionUser.address
-    );
-    const rawDelegateSigned = await signer.signTransaction(txInput);
-    const { id } = await fetch(`${nodeUrl}/transactions`, {
-      method: "POST",
-      headers: {
-        "content-type": "application/json"
-      },
-      body: JSON.stringify({
-        raw: rawDelegateSigned
-      })
-    }).then((res) => res.json());
-    return id;
-  };
-  const signMessage = async (message) => {
-    if (connection.isConnectedWithCrossApp) {
-      return await signMessageWithCrossApp(message);
-    }
-    return (await signMessagePrivy({
-      message
-    })).signature;
-  };
-  const signTypedData = async (data) => {
-    if (connection.isConnectedWithCrossApp) {
-      const mutableData = {
-        ...data,
-        address: connectedWallet?.address,
-        types: Object.fromEntries(
-          Object.entries(data.types).map(([k, v]) => [k, [...v]])
-        )
-      };
-      return await signTypedDataWithCrossApp(mutableData);
-    }
-    return (await signTypedDataPrivy(data)).signature;
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    PrivyWalletProviderContext.Provider,
-    {
-      value: {
-        accountFactory: chunkM6WTSZ5C_cjs.getConfig(network.type).accountFactoryAddress,
-        sendTransaction,
-        signMessage,
-        signTypedData,
-        exportWallet,
-        delegateAllTransactions
-      },
-      children
-    }
-  );
-};
-var usePrivyWalletProvider = () => {
-  const context = React10.useContext(PrivyWalletProviderContext);
-  if (!context) {
-    throw new Error(
-      "usePrivyWalletProvider must be used within a PrivyWalletProvider"
-    );
-  }
-  return context;
-};
-var VeChainKitContext = React10.createContext(null);
-var useVeChainKitConfig = () => {
-  const context = React10.useContext(VeChainKitContext);
-  if (!context) {
-    throw new Error("useVeChainKitConfig must be used within VeChainKit");
-  }
-  return context;
-};
-var validateConfig = (props) => {
-  const errors = [];
-  const requiresFeeDelegation = props.privy !== void 0 || props.loginMethods?.some(
-    (method7) => method7.method === "vechain" || method7.method === "ecosystem"
-  );
-  if (requiresFeeDelegation) {
-    if (!props.feeDelegation) {
-      errors.push(
-        "feeDelegation configuration is required when using Privy or vechain login method"
-      );
-    } else {
-      if (!props.feeDelegation || !props.feeDelegation.delegatorUrl) {
-        errors.push(
-          "feeDelegation.delegatorUrl is required when using Privy or vechain login method"
-        );
-      }
-    }
-  }
-  if (!props.network) {
-    errors.push("network configuration is required");
-  } else {
-    if (!props.network.type) {
-      errors.push("network.type is required");
-    }
-    if (!["main", "test", "solo"].includes(props.network.type)) {
-      errors.push('network.type must be either "main", "test" or "solo"');
-    }
-  }
-  if (props.loginMethods) {
-    if (!props.privy) {
-      const invalidMethods = props.loginMethods.filter(
-        (method7) => ["email", "google", "passkey", "more"].includes(method7.method)
-      );
-      if (invalidMethods.length > 0) {
-        errors.push(
-          `Login methods ${invalidMethods.map((m) => `"${m.method}"`).join(", ")} require Privy configuration. Please either remove these methods or configure the privy prop.`
-        );
-      }
-    }
-  }
-  if (props?.legalDocuments) {
-    if (props.legalDocuments.termsAndConditions) {
-      props.legalDocuments.termsAndConditions.forEach((term) => {
-        if (!chunkM6WTSZ5C_cjs.isValidUrl(term.url)) {
-          errors.push(
-            `legalDocuments.termsAndConditions.url is invalid: ${term.url}`
-          );
-        }
-      });
-    }
-    if (props.legalDocuments.privacyPolicy) {
-      props.legalDocuments.privacyPolicy.forEach((term) => {
-        if (!chunkM6WTSZ5C_cjs.isValidUrl(term.url)) {
-          errors.push(
-            `legalDocuments.privacyPolicy.url is invalid: ${term.url}`
-          );
-        }
-      });
-    }
-    if (props.legalDocuments.cookiePolicy) {
-      props.legalDocuments.cookiePolicy.forEach((term) => {
-        if (!chunkM6WTSZ5C_cjs.isValidUrl(term.url)) {
-          errors.push(
-            `legalDocuments.cookiePolicy.url is invalid: ${term.url}`
-          );
-        }
-      });
-    }
-  }
-  if (errors.length > 0) {
-    throw new Error(
-      "VeChainKit Configuration Error:\n" + errors.join("\n")
-    );
-  }
-  return props;
-};
-var VeChainKitProvider = (props) => {
-  const validatedProps = validateConfig(props);
-  const {
-    children,
-    privy,
-    feeDelegation,
-    dappKit,
-    loginModalUI,
-    loginMethods,
-    darkMode = false,
-    i18n: i18nConfig,
-    language = "en",
-    network,
-    allowCustomTokens,
-    legalDocuments,
-    defaultCurrency = "usd"
-  } = validatedProps;
-  const validatedLoginMethods = loginMethods;
-  const allowedEcosystemApps = React10.useMemo(() => {
-    const userEcosystemMethods = validatedLoginMethods?.find(
-      (method7) => method7.method === "ecosystem"
-    );
-    return userEcosystemMethods?.allowedApps ?? chunkM6WTSZ5C_cjs.DEFAULT_PRIVY_ECOSYSTEM_APPS.map((app) => app.id);
-  }, [validatedLoginMethods]);
-  let privyAppId, privyClientId;
-  if (!privy) {
-    privyAppId = "clzdb5k0b02b9qvzjm6jpknsc";
-    privyClientId = "client-WY2oy87y6KNrHFnpXuwVsiFMkwPZKTYpExtjvUQuMbCMF";
-  } else {
-    privyAppId = privy.appId;
-    privyClientId = privy.clientId;
-  }
-  React10.useEffect(() => {
-    initializeI18n(i18n_default);
-    if (language) {
-      i18n_default.changeLanguage(language);
-    }
-    if (i18nConfig) {
-      Object.keys(i18nConfig).forEach((lang) => {
-        i18n_default.addResourceBundle(
-          lang,
-          "translation",
-          i18nConfig[lang],
-          true,
-          true
-        );
+      }
+      dataToSign.forEach((data, index) => {
+        clauses.push(
+          sdkCore.Clause.callFunction(
+            sdkCore.Address.of(smartAccount.address ?? ""),
+            sdkCore.ABIContract.ofAbi(chunkEESC6JDT_cjs.SimpleAccountABI).getFunction(
+              "executeWithAuthorization"
+            ),
+            [
+              data.message.to,
+              BigInt(data.message.value),
+              data.message.data,
+              BigInt(data.message.validAfter),
+              BigInt(data.message.validBefore),
+              signatures[index]
+            ]
+          )
+        );
       });
     }
-  }, [language, i18nConfig]);
-  React10.useEffect(() => {
-    chunkM6WTSZ5C_cjs.setLocalStorageItem(chunkM6WTSZ5C_cjs.VECHAIN_KIT_STORAGE_KEYS.NETWORK, network.type);
-  }, [network]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(EnsureQueryClient, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(reactQueryDevtools.ReactQueryDevtools, { initialIsOpen: false }),
-    /* @__PURE__ */ jsxRuntime.jsx(PrivyCrossAppProvider, { privyEcosystemAppIDS: allowedEcosystemApps, children: /* @__PURE__ */ jsxRuntime.jsx(
-      VeChainKitContext.Provider,
+    const gasResult = await thor.gas.estimateGas(
+      clauses,
+      connectedWallet.address ?? "",
       {
-        value: {
-          privy,
-          privyEcosystemAppIDS: allowedEcosystemApps,
-          feeDelegation,
-          dappKit,
-          loginModalUI,
-          loginMethods: validatedLoginMethods,
-          darkMode,
-          i18n: i18nConfig,
-          language,
-          network,
-          allowCustomTokens,
-          legalDocuments,
-          defaultCurrency
-        },
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          reactAuth.PrivyProvider,
-          {
-            appId: privyAppId,
-            clientId: privyClientId,
-            config: {
-              // loginMethods: privy?.loginMethods,
-              loginMethodsAndOrder: {
-                primary: privy?.loginMethods.slice(0, 4) ?? [],
-                overflow: privy?.loginMethods.slice(4) ?? []
-              },
-              externalWallets: {
-                walletConnect: {
-                  enabled: false
-                }
-              },
-              appearance: {
-                theme: darkMode ? "dark" : "light",
-                accentColor: privy?.appearance.accentColor ?? (darkMode ? "#3182CE" : "#2B6CB0"),
-                loginMessage: privy?.appearance.loginMessage,
-                logo: privy?.appearance.logo
-              },
-              embeddedWallets: {
-                createOnLogin: privy?.embeddedWallets?.createOnLogin ?? "all-users"
-              },
-              passkeys: {
-                shouldUnlinkOnUnenrollMfa: false
-              }
-            },
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              dappKitReact.DAppKitProvider,
-              {
-                node: network.nodeUrl ?? chunkM6WTSZ5C_cjs.getConfig(network.type).nodeUrl,
-                i18n: i18nConfig,
-                language,
-                logLevel: dappKit.logLevel,
-                modalParent: dappKit.modalParent,
-                onSourceClick: dappKit.onSourceClick,
-                usePersistence: dappKit.usePersistence ?? true,
-                allowedWallets: dappKit.allowedWallets,
-                walletConnectOptions: dappKit.walletConnectOptions,
-                themeMode: darkMode ? "DARK" : "LIGHT",
-                themeVariables: {
-                  "--vdk-modal-z-index": "10000",
-                  "--vdk-modal-width": "22rem",
-                  "--vdk-modal-backdrop-filter": "blur(3px)",
-                  "--vdk-border-dark-source-card": `1px solid ${"#ffffff0a"}`,
-                  "--vdk-border-light-source-card": `1px solid ${"#ebebeb"}`,
-                  // Dark mode colors
-                  "--vdk-color-dark-primary": "transparent",
-                  "--vdk-color-dark-primary-hover": "rgba(255, 255, 255, 0.05)",
-                  "--vdk-color-dark-primary-active": "rgba(255, 255, 255, 0.1)",
-                  "--vdk-color-dark-secondary": "#1f1f1e",
-                  // Light mode colors
-                  "--vdk-color-light-primary": "#ffffff",
-                  "--vdk-color-light-primary-hover": "#f8f8f8",
-                  "--vdk-color-light-primary-active": "#f0f0f0",
-                  "--vdk-color-light-secondary": "white",
-                  // Font settings - using system fonts instead of Chakra variables
-                  "--vdk-font-family": 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
-                  "--vdk-font-size-medium": "14px",
-                  "--vdk-font-size-large": "16px",
-                  "--vdk-font-weight-medium": "500"
-                },
-                children: /* @__PURE__ */ jsxRuntime.jsx(
-                  PrivyWalletProvider,
-                  {
-                    nodeUrl: network.nodeUrl ?? chunkM6WTSZ5C_cjs.getConfig(network.type).nodeUrl,
-                    delegatorUrl: feeDelegation?.delegatorUrl ?? "",
-                    delegateAllTransactions: feeDelegation?.delegateAllTransactions ?? false,
-                    children: /* @__PURE__ */ jsxRuntime.jsx(ModalProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(LegalDocumentsProvider, { children }) })
-                  }
-                )
-              }
-            )
-          }
-        )
+        gasPadding: 1
       }
-    ) })
-  ] });
-};
-var { definePartsStyle, defineMultiStyleConfig } = react.createMultiStyleConfigHelpers(anatomy.modalAnatomy.keys);
-var variants = {
-  vechainKitBase: (props) => definePartsStyle({
-    dialog: {
-      scrollbarWidth: "none",
-      overflow: "scroll",
-      overflowX: "hidden",
-      maxHeight: "550px",
-      borderRadius: "24px",
-      backgroundColor: props.colorMode === "dark" ? "#1f1f1e" : "white"
-    },
-    closeButton: {
-      borderRadius: "50%"
-    },
-    header: {
-      w: "full",
-      color: props.colorMode === "dark" ? "#dfdfdd" : "#2e2e2e",
-      fontSize: "md",
-      fontWeight: "700",
-      textAlign: "center"
-    }
-  }),
-  vechainKitTransactionToast: (props) => definePartsStyle({
-    dialog: {
-      borderRadius: "15px",
-      position: "fixed",
-      bottom: "10px",
-      left: "10px",
-      mimHeight: "70px",
-      minWidth: "300px",
-      maxWidth: "400px",
-      width: "fit-content",
-      pointerEvents: "auto",
-      boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.1)",
-      py: "10px",
-      backgroundColor: props.colorMode === "dark" ? "#1f1f1e" : "white"
-    },
-    closeButton: {
-      borderRadius: "50%",
-      width: "25px",
-      height: "25px",
-      size: "10px"
-    }
-  })
-};
-var modalTheme = defineMultiStyleConfig({
-  variants,
-  defaultProps: {
-    variant: "vechainKitBase"
-  }
-});
-var { definePartsStyle: definePartsStyle2, defineMultiStyleConfig: defineMultiStyleConfig2 } = react.createMultiStyleConfigHelpers(anatomy.cardAnatomy.keys);
-var variants2 = {
-  vechainKitBase: (props) => definePartsStyle2({
-    container: {
-      backgroundColor: props.colorMode === "dark" ? "#1c1c1b" : "#f5f5f5",
-      borderRadius: "14px",
-      width: "full",
-      border: "none"
-    },
-    body: {
-      p: 5,
-      width: "full"
-    },
-    header: {
-      p: 5,
-      width: "full",
-      borderRadius: "14px 14px 0 0"
-    },
-    footer: {
-      width: "full",
-      borderRadius: "0 0 14px 14px"
-    }
-  }),
-  featureAnnouncement: (props) => definePartsStyle2({
-    body: {
-      backgroundColor: props.colorMode === "dark" ? "#ffffff0a" : "blackAlpha.50",
-      borderRadius: "12px",
-      color: props.colorMode === "dark" ? "#ffffff12" : "blackAlpha.200"
-    },
-    container: {
-      borderRadius: "12px",
-      backgroundColor: "transparent"
-    }
-  }),
-  vechainKitAppCard: (props) => definePartsStyle2({
-    body: {
-      height: "full",
-      borderRadius: "12px",
-      backgroundColor: props.colorMode === "dark" ? "#1f1f1e" : "white",
-      border: props.colorMode === "dark" ? "1px solid #2d2d2d" : "1px solid #eaeaea"
-    },
-    container: {
-      height: "150px",
-      borderRadius: "12px",
-      backgroundColor: "transparent"
-    }
-  })
-};
-var cardTheme = defineMultiStyleConfig2({
-  variants: variants2,
-  defaultProps: {
-    variant: "vechainKitBase"
-    // default is solid
-  }
-});
-var baseStyle = react.defineStyle({
-  borderRadius: "12px"
-});
-var variants3 = {
-  loginIn: react.defineStyle(() => ({
-    bg: "white",
-    color: "#1a1a1a",
-    fontSize: "14px",
-    fontWeight: "400",
-    border: "1px solid #ebebeb",
-    py: 6,
-    px: 3,
-    borderRadius: 16,
-    _hover: {
-      bg: "#eaeaea"
-    },
-    _dark: {
-      bg: "transparent",
-      color: "white",
-      _hover: {
-        bg: "#2a2a2a"
+    );
+    const parsedGasLimit = Math.max(
+      gasResult.totalGas,
+      suggestedMaxGas ?? 0
+    );
+    const txBody = await thor.transactions.buildTransactionBody(
+      clauses,
+      parsedGasLimit,
+      { isDelegated: true }
+    );
+    const wallet = new sdkNetwork.ProviderInternalBaseWallet(
+      [
+        {
+          privateKey: Buffer.from(
+            chunkM6WTSZ5C_cjs.randomTransactionUser.privateKey.slice(2),
+            "hex"
+          ),
+          address: chunkM6WTSZ5C_cjs.randomTransactionUser.address
+        }
+      ],
+      { gasPayer: { gasPayerServiceUrl: delegatorUrl } }
+    );
+    const providerWithDelegationEnabled = new sdkNetwork.VeChainProvider(
+      thor,
+      wallet,
+      true
+    );
+    const signer = await providerWithDelegationEnabled.getSigner(
+      chunkM6WTSZ5C_cjs.randomTransactionUser.address
+    );
+    const txInput = sdkNetwork.signerUtils.transactionBodyToTransactionRequestInput(
+      txBody,
+      chunkM6WTSZ5C_cjs.randomTransactionUser.address
+    );
+    const rawDelegateSigned = await signer.signTransaction(txInput);
+    const { id } = await fetch(`${nodeUrl}/transactions`, {
+      method: "POST",
+      headers: {
+        "content-type": "application/json"
       },
-      border: "1px solid #ffffff1a"
+      body: JSON.stringify({
+        raw: rawDelegateSigned
+      })
+    }).then((res) => res.json());
+    return id;
+  };
+  const signMessage = async (message) => {
+    if (connection.isConnectedWithCrossApp) {
+      return await signMessageWithCrossApp(message);
     }
-  })),
-  loginWithVechain: react.defineStyle(() => ({
-    bg: "#1a1a1a",
-    color: "white",
-    fontSize: "14px",
-    fontWeight: "400",
-    py: 6,
-    px: 3,
-    borderRadius: 16,
-    border: "1px solid #5e5e5e",
-    _hover: {
-      bg: "#2a2a2a"
-    },
-    _dark: {
-      bg: "white",
-      color: "#1a1a1a",
-      _hover: {
-        bg: "#eaeaea"
+    return (await signMessagePrivy({
+      message
+    })).signature;
+  };
+  const signTypedData = async (data) => {
+    if (connection.isConnectedWithCrossApp) {
+      const mutableData = {
+        ...data,
+        address: connectedWallet?.address,
+        types: Object.fromEntries(
+          Object.entries(data.types).map(([k, v]) => [k, [...v]])
+        )
+      };
+      return await signTypedDataWithCrossApp(mutableData);
+    }
+    return (await signTypedDataPrivy(data)).signature;
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    PrivyWalletProviderContext.Provider,
+    {
+      value: {
+        accountFactory: chunkM6WTSZ5C_cjs.getConfig(network.type).accountFactoryAddress,
+        sendTransaction,
+        signMessage,
+        signTypedData,
+        exportWallet,
+        delegateAllTransactions
       },
-      border: "1px solid #ffffff1a"
-    },
-    transition: "all 0.2s"
-  })),
-  vechainKitSelector: react.defineStyle(({ colorMode }) => ({
-    bg: "transparent",
-    border: `1px solid ${colorMode === "dark" ? "#ffffff29" : "#ebebeb"}`,
-    _hover: {
-      borderColor: colorMode === "dark" ? "#ffffff50" : "#dedede",
-      bg: colorMode === "dark" ? "whiteAlpha.50" : "blackAlpha.50"
-    },
-    _active: {
-      transform: "scale(0.98)"
-    },
-    transition: "all 0.2s"
-  })),
-  vechainKitPrimary: react.defineStyle(() => ({
-    fontSize: "md",
-    px: 4,
-    width: "full",
-    height: "60px",
-    borderRadius: "xl",
-    bg: "#2B6CB0",
-    color: "white",
-    _hover: {
-      bg: "#2C5282",
-      _disabled: {
-        bg: "#2B6CB0"
-      }
-    },
-    _dark: {
-      bg: "#3182CE",
-      _hover: {
-        bg: "#2B6CB0"
-      }
-    },
-    transition: "all 0.2s"
-  })),
-  vechainKitSecondary: react.defineStyle(({ colorMode }) => ({
-    fontSize: "md",
-    px: 4,
-    width: "full",
-    height: "60px",
-    borderRadius: "xl",
-    backgroundColor: colorMode === "dark" ? "#ffffff0a" : "blackAlpha.50",
-    _hover: {
-      backgroundColor: colorMode === "dark" ? "#ffffff12" : "blackAlpha.200"
-    },
-    border: "1px solid",
-    borderColor: "gray.200",
-    color: "blackAlpha.900",
-    _dark: {
-      borderColor: "whiteAlpha.200",
-      color: "whiteAlpha.900"
-    },
-    transition: "all 0.2s"
-  })),
-  vechainKitLogout: react.defineStyle(({ colorMode }) => ({
-    width: "full",
-    minHeight: "50px",
-    height: "fit-content",
-    borderRadius: "xl",
-    p: 0,
-    backgroundColor: colorMode === "dark" ? "rgba(254, 178, 178, 0.12)" : "red.50",
-    _hover: {
-      backgroundColor: colorMode === "dark" ? "rgba(254, 178, 178, 0.37)" : "red.200",
-      color: colorMode === "dark" ? "red.50" : "red.900"
-    },
-    transition: "all 0.2s",
-    color: colorMode === "dark" ? "red.200" : "red.900"
-  })),
-  mainContentButton: react.defineStyle(({ colorMode }) => ({
-    width: "100%",
-    backgroundColor: colorMode === "dark" ? "#ffffff0a" : "blackAlpha.50",
-    borderRadius: "xl",
-    p: 3,
-    cursor: "pointer",
-    _hover: {
-      backgroundColor: colorMode === "dark" ? "#ffffff12" : "blackAlpha.200"
+      children
     }
-  })),
-  actionButton: react.defineStyle(({ colorMode }) => ({
-    width: "full",
-    minHeight: "50px",
-    height: "fit-content",
-    backgroundColor: colorMode === "dark" ? "#ffffff0a" : "blackAlpha.50",
-    borderRadius: "xl",
-    p: 0,
-    _hover: {
-      backgroundColor: colorMode === "dark" ? "#ffffff12" : "blackAlpha.200"
-    },
-    transition: "all 0.2s"
-  }))
+  );
 };
-var buttonTheme = react.defineStyleConfig({
-  baseStyle,
-  variants: variants3
-});
-var { definePartsStyle: definePartsStyle3, defineMultiStyleConfig: defineMultiStyleConfig3 } = react.createMultiStyleConfigHelpers(anatomy.popoverAnatomy.keys);
-var variants4 = {
-  vechainKitBase: (props) => definePartsStyle3({
-    popper: {
-      zIndex: 1e3
-    },
-    content: {
-      borderRadius: "24px",
-      border: "none",
-      backgroundColor: props.colorMode === "dark" ? "#1f1f1e" : "white",
-      boxShadow: "0px 4px 16px rgba(0, 0, 0, 0.12)",
-      minWidth: "380px"
-    },
-    body: {
-      padding: "16px"
-    }
-  })
+var usePrivyWalletProvider = () => {
+  const context = React10.useContext(PrivyWalletProviderContext);
+  if (!context) {
+    throw new Error(
+      "usePrivyWalletProvider must be used within a PrivyWalletProvider"
+    );
+  }
+  return context;
 };
-var popoverTheme = defineMultiStyleConfig3({
-  variants: variants4,
-  defaultProps: {
-    variant: "vechainKitBase"
+var VeChainKitContext = React10.createContext(null);
+var useVeChainKitConfig = () => {
+  const context = React10.useContext(VeChainKitContext);
+  if (!context) {
+    throw new Error("useVeChainKitConfig must be used within VeChainKit");
   }
-});
-
-// src/theme/theme.tsx
-var themeConfig = {
-  useSystemColorMode: false,
-  disableTransitionOnChange: false,
-  // @ts-ignore
-  components: {
-    Modal: modalTheme,
-    Card: cardTheme,
-    Button: buttonTheme,
-    Popover: popoverTheme
-  },
-  cssVarPrefix: "vechain-kit",
-  // consistent naming across all components
-  // COMPLETELY disable global styles to prevent any conflicts
-  styles: {
-    global: () => ({})
-    // empty object = no global styles injected
-  },
-  // only defining the semantic tokens we need, scoped to our components
-  semanticTokens: {
-    colors: {
-      "chakra-body-text": {
-        _light: "#1A202C",
-        _dark: "#F7FAFC"
-      },
-      "chakra-body-bg": {
-        _light: "#FFFFFF",
-        _dark: "#1A202C"
-      },
-      "chakra-border-color": {
-        _light: "#E2E8F0",
-        _dark: "#2D3748"
-      },
-      "chakra-placeholder-color": {
-        _light: "#A0AEC0",
-        _dark: "#718096"
+  return context;
+};
+var validateConfig = (props) => {
+  const errors = [];
+  const requiresFeeDelegation = props.privy !== void 0 || props.loginMethods?.some(
+    (method7) => method7.method === "vechain" || method7.method === "ecosystem"
+  );
+  if (requiresFeeDelegation) {
+    if (!props.feeDelegation) {
+      errors.push(
+        "feeDelegation configuration is required when using Privy or vechain login method"
+      );
+    } else {
+      if (!props.feeDelegation || !props.feeDelegation.delegatorUrl) {
+        errors.push(
+          "feeDelegation.delegatorUrl is required when using Privy or vechain login method"
+        );
+      }
+    }
+  }
+  if (!props.network) {
+    errors.push("network configuration is required");
+  } else {
+    if (!props.network.type) {
+      errors.push("network.type is required");
+    }
+    if (!["main", "test", "solo"].includes(props.network.type)) {
+      errors.push('network.type must be either "main", "test" or "solo"');
+    }
+  }
+  if (props.loginMethods) {
+    if (!props.privy) {
+      const invalidMethods = props.loginMethods.filter(
+        (method7) => ["email", "google", "passkey", "more"].includes(method7.method)
+      );
+      if (invalidMethods.length > 0) {
+        errors.push(
+          `Login methods ${invalidMethods.map((m) => `"${m.method}"`).join(", ")} require Privy configuration. Please either remove these methods or configure the privy prop.`
+        );
       }
     }
-  },
-  // minimal foundations to prevent global style injection
-  fonts: react.theme.fonts,
-  colors: react.theme.colors,
-  space: react.theme.space
-};
-var VechainKitTheme = react.extendTheme(themeConfig);
-VechainKitTheme.styles.global = () => ({});
-if (VechainKitTheme.__cssVars) {
-  VechainKitTheme.__cssVars.global = () => ({});
-}
-var { ToastContainer } = react.createStandaloneToast();
-var createVeChainKitCache = () => {
-  return createCache__default.default({
-    key: "vechain-kit",
-    // consistent with our layer and class names
-    prepend: true
-    // CSS layers will be handled via Global component injection
-  });
-};
-var LayerSetup = () => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    react$1.Global,
-    {
-      styles: react$1.css`
-                /* define CSS layers with proper priority order */
-                @layer vechain-kit, host-app;
-
-                /* All vechain-kit styles go in the vechain-kit layer */
-                @layer vechain-kit {
-                    /* scope all Chakra styles to vechain-kit-root */
-                    .vechain-kit-root {
-                        /* vechain-kit styles are contained here */
-                    }
-                }
-            `
+  }
+  if (props?.legalDocuments) {
+    if (props.legalDocuments.termsAndConditions) {
+      props.legalDocuments.termsAndConditions.forEach((term) => {
+        if (!chunkM6WTSZ5C_cjs.isValidUrl(term.url)) {
+          errors.push(
+            `legalDocuments.termsAndConditions.url is invalid: ${term.url}`
+          );
+        }
+      });
     }
-  );
-};
-var EnsureChakraProvider = ({
-  children,
-  theme
-}) => {
-  const cache = React10.useMemo(() => createVeChainKitCache(), []);
-  return /* @__PURE__ */ jsxRuntime.jsxs(react$1.CacheProvider, { value: cache, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(LayerSetup, {}),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      react.ChakraProvider,
-      {
-        theme,
-        resetCSS: false,
-        portalZIndex: void 0,
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "vechain-kit-root", children })
-      }
-    )
-  ] });
-};
-var EnsureColorModeScript = ({ darkMode }) => {
-  try {
-    const existingScript = chunkM6WTSZ5C_cjs.safeQuerySelector("[data-chakra-color-mode]");
-    if (existingScript) {
-      return null;
+    if (props.legalDocuments.privacyPolicy) {
+      props.legalDocuments.privacyPolicy.forEach((term) => {
+        if (!chunkM6WTSZ5C_cjs.isValidUrl(term.url)) {
+          errors.push(
+            `legalDocuments.privacyPolicy.url is invalid: ${term.url}`
+          );
+        }
+      });
+    }
+    if (props.legalDocuments.cookiePolicy) {
+      props.legalDocuments.cookiePolicy.forEach((term) => {
+        if (!chunkM6WTSZ5C_cjs.isValidUrl(term.url)) {
+          errors.push(
+            `legalDocuments.cookiePolicy.url is invalid: ${term.url}`
+          );
+        }
+      });
     }
-  } catch (e) {
-    console.error(e);
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(react.ColorModeScript, { initialColorMode: darkMode ? "dark" : "light" });
+  if (errors.length > 0) {
+    throw new Error(
+      "VeChainKit Configuration Error:\n" + errors.join("\n")
+    );
+  }
+  return props;
 };
-var VechainKitThemeProvider = ({
-  children,
-  darkMode = false
-}) => {
-  const theme = React10.useMemo(
-    () => ({
-      ...VechainKitTheme,
-      config: {
-        ...VechainKitTheme.config,
-        initialColorMode: darkMode ? "dark" : "light"
+var VeChainKitProvider = (props) => {
+  const validatedProps = validateConfig(props);
+  const {
+    children,
+    privy,
+    feeDelegation,
+    dappKit,
+    loginModalUI,
+    loginMethods,
+    darkMode = false,
+    i18n: i18nConfig,
+    language = "en",
+    network,
+    allowCustomTokens,
+    legalDocuments,
+    defaultCurrency = "usd"
+  } = validatedProps;
+  const validatedLoginMethods = loginMethods;
+  const allowedEcosystemApps = React10.useMemo(() => {
+    const userEcosystemMethods = validatedLoginMethods?.find(
+      (method7) => method7.method === "ecosystem"
+    );
+    return userEcosystemMethods?.allowedApps ?? chunkM6WTSZ5C_cjs.DEFAULT_PRIVY_ECOSYSTEM_APPS.map((app) => app.id);
+  }, [validatedLoginMethods]);
+  let privyAppId, privyClientId;
+  if (!privy) {
+    privyAppId = "clzdb5k0b02b9qvzjm6jpknsc";
+    privyClientId = "client-WY2oy87y6KNrHFnpXuwVsiFMkwPZKTYpExtjvUQuMbCMF";
+  } else {
+    privyAppId = privy.appId;
+    privyClientId = privy.clientId;
+  }
+  React10.useEffect(() => {
+    initializeI18n(i18n_default);
+    if (language) {
+      i18n_default.changeLanguage(language);
+    }
+    if (i18nConfig) {
+      Object.keys(i18nConfig).forEach((lang) => {
+        i18n_default.addResourceBundle(
+          lang,
+          "translation",
+          i18nConfig[lang],
+          true,
+          true
+        );
+      });
+    }
+  }, [language, i18nConfig]);
+  React10.useEffect(() => {
+    chunkM6WTSZ5C_cjs.setLocalStorageItem(chunkM6WTSZ5C_cjs.VECHAIN_KIT_STORAGE_KEYS.NETWORK, network.type);
+  }, [network]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(EnsureQueryClient, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(reactQueryDevtools.ReactQueryDevtools, { initialIsOpen: false }),
+    /* @__PURE__ */ jsxRuntime.jsx(PrivyCrossAppProvider, { privyEcosystemAppIDS: allowedEcosystemApps, children: /* @__PURE__ */ jsxRuntime.jsx(
+      VeChainKitContext.Provider,
+      {
+        value: {
+          privy,
+          privyEcosystemAppIDS: allowedEcosystemApps,
+          feeDelegation,
+          dappKit,
+          loginModalUI,
+          loginMethods: validatedLoginMethods,
+          darkMode,
+          i18n: i18nConfig,
+          language,
+          network,
+          allowCustomTokens,
+          legalDocuments,
+          defaultCurrency
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          reactAuth.PrivyProvider,
+          {
+            appId: privyAppId,
+            clientId: privyClientId,
+            config: {
+              // loginMethods: privy?.loginMethods,
+              loginMethodsAndOrder: {
+                primary: privy?.loginMethods.slice(0, 4) ?? [],
+                overflow: privy?.loginMethods.slice(4) ?? []
+              },
+              externalWallets: {
+                walletConnect: {
+                  enabled: false
+                }
+              },
+              appearance: {
+                theme: darkMode ? "dark" : "light",
+                accentColor: privy?.appearance.accentColor ?? (darkMode ? "#3182CE" : "#2B6CB0"),
+                loginMessage: privy?.appearance.loginMessage,
+                logo: privy?.appearance.logo
+              },
+              embeddedWallets: {
+                createOnLogin: privy?.embeddedWallets?.createOnLogin ?? "all-users"
+              },
+              passkeys: {
+                shouldUnlinkOnUnenrollMfa: false
+              }
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              dappKitReact.DAppKitProvider,
+              {
+                node: network.nodeUrl ?? chunkM6WTSZ5C_cjs.getConfig(network.type).nodeUrl,
+                i18n: i18nConfig,
+                language,
+                logLevel: dappKit.logLevel,
+                modalParent: dappKit.modalParent,
+                onSourceClick: dappKit.onSourceClick,
+                usePersistence: dappKit.usePersistence ?? true,
+                allowedWallets: dappKit.allowedWallets,
+                walletConnectOptions: dappKit.walletConnectOptions,
+                themeMode: darkMode ? "DARK" : "LIGHT",
+                themeVariables: {
+                  "--vdk-modal-z-index": "10000",
+                  "--vdk-modal-width": "22rem",
+                  "--vdk-modal-backdrop-filter": "blur(3px)",
+                  "--vdk-border-dark-source-card": `1px solid ${"#ffffff0a"}`,
+                  "--vdk-border-light-source-card": `1px solid ${"#ebebeb"}`,
+                  // Dark mode colors
+                  "--vdk-color-dark-primary": "transparent",
+                  "--vdk-color-dark-primary-hover": "rgba(255, 255, 255, 0.05)",
+                  "--vdk-color-dark-primary-active": "rgba(255, 255, 255, 0.1)",
+                  "--vdk-color-dark-secondary": "#1f1f1e",
+                  // Light mode colors
+                  "--vdk-color-light-primary": "#ffffff",
+                  "--vdk-color-light-primary-hover": "#f8f8f8",
+                  "--vdk-color-light-primary-active": "#f0f0f0",
+                  "--vdk-color-light-secondary": "white",
+                  // Font settings - using system fonts instead of Chakra variables
+                  "--vdk-font-family": 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+                  "--vdk-font-size-medium": "14px",
+                  "--vdk-font-size-large": "16px",
+                  "--vdk-font-weight-medium": "500"
+                },
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  PrivyWalletProvider,
+                  {
+                    nodeUrl: network.nodeUrl ?? chunkM6WTSZ5C_cjs.getConfig(network.type).nodeUrl,
+                    delegatorUrl: feeDelegation?.delegatorUrl ?? "",
+                    delegateAllTransactions: feeDelegation?.delegateAllTransactions ?? false,
+                    children: /* @__PURE__ */ jsxRuntime.jsx(ModalProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(LegalDocumentsProvider, { children }) })
+                  }
+                )
+              }
+            )
+          }
+        )
       }
-    }),
-    [darkMode]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(EnsureColorModeScript, { darkMode }),
-    /* @__PURE__ */ jsxRuntime.jsx(EnsureChakraProvider, { theme, children }),
-    /* @__PURE__ */ jsxRuntime.jsx(ToastContainer, {})
+    ) })
   ] });
 };
 
@@ -20700,6 +20759,7 @@ exports.useUpgradeSmartAccountModal = useUpgradeSmartAccountModal;
 exports.useUploadImages = useUploadImages;
 exports.useVeChainKitConfig = useVeChainKitConfig;
 exports.useVechainDomain = useVechainDomain;
+exports.useVechainKitThemeConfig = useVechainKitThemeConfig;
 exports.useWallet = useWallet;
 exports.useWalletMetadata = useWalletMetadata;
 exports.useWalletModal = useWalletModal2;