@vechain/vechain-kit 1.5.0 → 1.5.1

package/dist/index.js

@@ -1,9 +1,9 @@
 import { IVechainEnergyOracleV1__factory, IB3TR__factory, IVOT3__factory, GalaxyMember__factory, NodeManagement__factory, X2EarnApps__factory, XAllocationVoting__factory, XAllocationVotingGovernor__factory, XAllocationPool__factory, VoterRewards__factory, VeBetterPassport__factory, IERC20__factory, MockENS__factory, SubdomainClaimer__factory, IReverseRegistrar__factory, ERC20__factory, SimpleAccountFactory__factory, SimpleAccount__factory, Emissions__factory, X2EarnRewardsPool__factory } from './chunk-FOSPSOWT.js';
-import { getConfig, humanNumber, NodeStrengthLevelToImage, allNodeStrengthLevelToName, notFoundImage, convertUriToUrl, resolveMediaTypeFromMimeType, gmNfts, humanAddress, getPicassoImage, VECHAIN_PRIVY_APP_ID, compareAddresses, isValidAddress, TOKEN_LOGOS, humanDomain, uploadBlobToIPFS, randomTransactionUser } from './chunk-YKPB3KXP.js';
-export { getConfig } from './chunk-YKPB3KXP.js';
-import { SimpleAccountFactoryABI, VechainLogoHorizontal, VechainLogoLight, VechainLogoDark, PrivyLogo, SimpleAccountABI } from './chunk-RZI2FBKR.js';
+import { getConfig, humanNumber, NodeStrengthLevelToImage, allNodeStrengthLevelToName, notFoundImage, convertUriToUrl, resolveMediaTypeFromMimeType, gmNfts, humanAddress, getPicassoImage, VECHAIN_PRIVY_APP_ID, compareAddresses, isValidAddress, TOKEN_LOGO_COMPONENTS, TOKEN_LOGOS, humanDomain, uploadBlobToIPFS, randomTransactionUser } from './chunk-EUQRNI5E.js';
+export { getConfig } from './chunk-EUQRNI5E.js';
+import { SimpleAccountFactoryABI, VechainLogo, VechainLogoLight, VechainLogoDark, PrivyLogo, SimpleAccountABI } from './chunk-DYI6ON4O.js';
 import './chunk-PZ5AY32C.js';
-import React6, { createContext, useState, useEffect, useMemo, useCallback, useRef, useContext } from 'react';
+import React10, { createContext, useState, useEffect, useMemo, useCallback, useRef, useContext } from 'react';
 import { useLoginWithOAuth, usePrivy, useLoginWithEmail, useMfaEnrollment, useLoginWithPasskey as useLoginWithPasskey$1, PrivyProvider } from '@privy-io/react-auth';
 export { useMfaEnrollment, usePrivy } from '@privy-io/react-auth';
 import { useConnex, useWallet as useWallet$1, useWalletModal, useVechainDomain as useVechainDomain$1, DAppKitProvider } from '@vechain/dapp-kit-react';
@@ -1804,7 +1804,7 @@ function getOrCreateQueryClient() {
 }
 var EnsureQueryClient = ({ children }) => {
   try {
-    const existingQueryClient = React6.useContext(QueryClientContext);
+    const existingQueryClient = React10.useContext(QueryClientContext);
     if (existingQueryClient) {
       return /* @__PURE__ */ jsx(Fragment, { children });
     }
@@ -4966,7 +4966,7 @@ var AddressDisplay = ({
 // package.json
 var package_default = {
   name: "@vechain/vechain-kit",
-  version: "1.5.0",
+  version: "1.5.1",
   private: false,
   homepage: "https://github.com/vechain/vechain-kit",
   repository: "github:vechain/vechain-kit",
@@ -5093,16 +5093,26 @@ var VersionFooter = ({ ...props }) => {
       spacing: 0,
       ...props,
       children: [
-        /* @__PURE__ */ jsx(VechainLogoHorizontal, { isDark, w: "69px", opacity: 0.4 }),
+        /* @__PURE__ */ jsx(
+          VechainLogo,
+          {
+            isDark,
+            w: "70px",
+            h: "auto",
+            opacity: 0.4,
+            mr: 1
+          }
+        ),
         /* @__PURE__ */ jsxs(
           Link,
           {
             fontSize: "11px",
-            fontWeight: "800",
+            fontWeight: "500",
             opacity: 0.4,
             textAlign: "left",
             href: `https://github.com/vechain/vechain-kit/releases/tag/${package_default.version}`,
             isExternal: true,
+            pt: "1px",
             children: [
               "v",
               package_default.version
@@ -5138,7 +5148,7 @@ var StickyHeaderContainer = ({ children }) => {
         left: "0",
         w: "full",
         borderRadius: "24px 24px 0px 0px",
-        bg: isDark ? "rgba(31, 31, 30, 0.8)" : "rgba(255, 255, 255, 0.8)",
+        bg: isDark ? "rgb(24 24 27 / 90%)" : "rgba(255, 255, 255, 0.8)",
         backdropFilter: "blur(12px)",
         style: { WebkitBackdropFilter: "blur(12px)" },
         zIndex: 1e3,
@@ -5165,7 +5175,7 @@ var StickyFooterContainer = ({ children }) => {
       bottom: "0",
       left: "0",
       right: "0",
-      bg: isDark ? "#1f1f1e" : "white",
+      bg: isDark ? "#18181b" : "white",
       zIndex: "1000",
       p: 4,
       boxShadow: "0px -1px 6px -3px rgb(0 0 0 / 56%)",
@@ -5241,56 +5251,69 @@ var AssetButton = ({
   isDisabled,
   onClick,
   ...buttonProps
-}) => /* @__PURE__ */ jsxs(
-  Button,
-  {
-    height: "72px",
-    variant: "ghost",
-    justifyContent: "space-between",
-    isDisabled,
-    p: 4,
-    w: "100%",
-    _disabled: {
-      cursor: "not-allowed",
-      opacity: 0.5
-    },
-    onClick,
-    ...buttonProps,
-    children: [
-      /* @__PURE__ */ jsxs(HStack, { children: [
-        /* @__PURE__ */ jsx(
-          Image,
-          {
-            src: TOKEN_LOGOS[symbol],
-            alt: `${symbol} logo`,
+}) => {
+  const { darkMode: isDark } = useVeChainKitConfig();
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      height: "72px",
+      variant: "ghost",
+      justifyContent: "space-between",
+      isDisabled,
+      p: 4,
+      w: "100%",
+      _disabled: {
+        cursor: "not-allowed",
+        opacity: 0.5
+      },
+      onClick,
+      ...buttonProps,
+      children: [
+        /* @__PURE__ */ jsxs(HStack, { children: [
+          TOKEN_LOGO_COMPONENTS[symbol] ? React10.cloneElement(TOKEN_LOGO_COMPONENTS[symbol], {
             boxSize: "24px",
-            borderRadius: "full",
-            fallback: /* @__PURE__ */ jsx(
-              Box,
-              {
-                boxSize: "24px",
-                borderRadius: "full",
-                bg: "whiteAlpha.200",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                children: /* @__PURE__ */ jsx(Text, { fontSize: "10px", fontWeight: "bold", children: symbol.slice(0, 3) })
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx(Text, { children: symbol })
-      ] }),
-      /* @__PURE__ */ jsxs(VStack, { align: "flex-end", spacing: 0, children: [
-        /* @__PURE__ */ jsxs(Text, { children: [
-          "$",
-          compactFormatter.format(usdValue)
+            borderRadius: "full"
+          }) : /* @__PURE__ */ jsx(
+            Image,
+            {
+              src: TOKEN_LOGOS[symbol],
+              alt: `${symbol} logo`,
+              boxSize: "24px",
+              borderRadius: "full",
+              fallback: /* @__PURE__ */ jsx(
+                Box,
+                {
+                  boxSize: "24px",
+                  borderRadius: "full",
+                  bg: "whiteAlpha.200",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  children: /* @__PURE__ */ jsx(Text, { fontSize: "10px", fontWeight: "bold", children: symbol.slice(0, 3) })
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(Text, { children: symbol })
         ] }),
-        /* @__PURE__ */ jsx(Text, { fontSize: "sm", color: "gray.500", children: compactFormatter.format(amount) })
-      ] })
-    ]
-  }
-);
+        /* @__PURE__ */ jsxs(VStack, { align: "flex-end", spacing: 0, children: [
+          /* @__PURE__ */ jsxs(Text, { children: [
+            "$",
+            compactFormatter.format(usdValue)
+          ] }),
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              fontSize: "sm",
+              color: isDark ? "whiteAlpha.600" : "blackAlpha.600",
+              children: compactFormatter.format(amount)
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
 var compactFormatter2 = new Intl.NumberFormat("en-US", {
   notation: "compact",
   compactDisplay: "short",
@@ -5320,7 +5343,7 @@ var AddressDisplayCard = ({
       w: "full",
       p: 2,
       borderRadius: "lg",
-      bg: isDark ? "#ffffff0f" : "gray.50",
+      bg: isDark ? "#00000038" : "gray.50",
       wordBreak: "break-word",
       children: [
         /* @__PURE__ */ jsx(Text, { fontSize: "sm", fontWeight: "bold", mb: 2, children: label }),
@@ -5446,7 +5469,7 @@ var TransactionButtonAndStatus = ({
       {
         isExternal: true,
         fontSize: "sm",
-        color: isDark ? "whiteAlpha.600" : "gray.500",
+        color: isDark ? "whiteAlpha.600" : "blackAlpha.600",
         textAlign: "center",
         width: "full",
         href: `${getConfig(network.type).explorerUrl}/${txReceipt?.meta.txID}`,
@@ -5516,7 +5539,7 @@ var EmailCodeVerificationModal = ({
             otp: true,
             size: "lg",
             isInvalid: !!error,
-            errorBorderColor: "red.500",
+            errorBorderColor: "#ef4444",
             children: [
               /* @__PURE__ */ jsx(
                 PinInputField,
@@ -5611,7 +5634,7 @@ var EmailCodeVerificationModal = ({
             ]
           }
         ) }),
-        error && /* @__PURE__ */ jsx(Text, { color: "red.500", fontSize: "xs", children: error })
+        error && /* @__PURE__ */ jsx(Text, { color: "#ef4444", fontSize: "xs", children: error })
       ] }) }),
       /* @__PURE__ */ jsx(ModalFooter, { children: /* @__PURE__ */ jsxs(
         Text,
@@ -6293,7 +6316,7 @@ var ActionButton = ({
 }) => {
   const { t } = useTranslation();
   const { colorMode } = useColorMode();
-  const baseBackgroundColor = backgroundColor ?? colorMode === "dark" ? "whiteAlpha.100" : "#00000005";
+  const baseBackgroundColor = backgroundColor ?? colorMode === "dark" ? "#ffffff05" : "#00000005";
   return /* @__PURE__ */ jsx(
     Button,
     {
@@ -6307,7 +6330,9 @@ var ActionButton = ({
       isLoading,
       loadingText,
       bgColor: baseBackgroundColor,
-      _hover,
+      _hover: _hover ?? {
+        backgroundColor: colorMode === "dark" ? "#ffffff0d" : "blackAlpha.200"
+      },
       ...style,
       children: /* @__PURE__ */ jsxs(HStack, { w: "full", justify: "space-between", children: [
         /* @__PURE__ */ jsx(Box, { minW: "40px", children: leftImage ? /* @__PURE__ */ jsx(
@@ -6457,7 +6482,14 @@ var AssetIcons = ({
           border: "2px solid #00000024",
           alignItems: "center",
           justifyContent: "center",
-          children: TOKEN_LOGOS[token.symbol] ? /* @__PURE__ */ jsx(
+          children: TOKEN_LOGO_COMPONENTS[token.symbol] ? React10.cloneElement(
+            TOKEN_LOGO_COMPONENTS[token.symbol],
+            {
+              width: `${iconSize * 0.8}px`,
+              height: `${iconSize * 0.8}px`,
+              rounded: "full"
+            }
+          ) : TOKEN_LOGOS[token.symbol] ? /* @__PURE__ */ jsx(
             Image,
             {
               src: TOKEN_LOGOS[token.symbol],
@@ -6596,7 +6628,7 @@ var BalanceSection = ({
         onClick: onAssetsClick,
         maxIcons: 10,
         iconSize: 26,
-        iconsGap: 2,
+        iconsGap: 3,
         address: account?.address ?? "",
         showNoAssetsWarning: true,
         rightIcon: /* @__PURE__ */ jsx(
@@ -6611,12 +6643,12 @@ var BalanceSection = ({
         style: {
           width: "100%",
           mt: 2,
-          backgroundColor: isDark ? "whiteAlpha.200" : "blackAlpha.50",
+          backgroundColor: isDark ? "#ffffff05" : "blackAlpha.50",
           borderRadius: "xl",
           p: 3,
           cursor: "pointer",
           _hover: {
-            backgroundColor: isDark ? "whiteAlpha.300" : "blackAlpha.200"
+            backgroundColor: isDark ? "#ffffff0d" : "blackAlpha.200"
           },
           justifyContent: "space-between"
         }
@@ -7428,7 +7460,7 @@ var CrossAppConnectionCard = ({ connectionCache }) => {
     VStack,
     {
       p: 4,
-      bg: isDark ? "#1a1a1a" : "#f5f5f5",
+      bg: isDark ? "#00000038" : "#f5f5f5",
       borderRadius: "xl",
       spacing: 4,
       w: "full",
@@ -7490,7 +7522,7 @@ var DappKitConnectionCard = () => {
     VStack,
     {
       p: 4,
-      bg: isDark ? "#1a1a1a" : "#f5f5f5",
+      bg: isDark ? "#00000038" : "#f5f5f5",
       borderRadius: "xl",
       spacing: 4,
       w: "full",
@@ -7532,7 +7564,7 @@ var PrivyConnectionCard = () => {
     VStack,
     {
       p: 4,
-      bg: isDark ? "#1a1a1a" : "#f5f5f5",
+      bg: isDark ? "#00000038" : "#f5f5f5",
       borderRadius: "xl",
       spacing: 4,
       w: "full",
@@ -7585,8 +7617,16 @@ var WalletSecuredBy = () => {
         /* @__PURE__ */ jsx(Text, { fontSize: "xs", fontWeight: "800", children: t("Wallet secured by") }),
         /* @__PURE__ */ jsxs(HStack, { justify: "center", children: [
           /* @__PURE__ */ jsx(PrivyLogo, { isDark, w: "50px" }),
-          /* @__PURE__ */ jsx(Icon, { as: PiLineVertical, ml: 2 }),
-          connection.isConnectedWithVeChain ? /* @__PURE__ */ jsx(VechainLogoHorizontal, { isDark, w: "69px" }) : connection.isConnectedWithCrossApp && connectionCache && /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(Icon, { as: PiLineVertical, ml: 3 }),
+          connection.isConnectedWithVeChain ? /* @__PURE__ */ jsx(
+            VechainLogo,
+            {
+              isDark,
+              w: "80px",
+              h: "auto",
+              mb: "3px"
+            }
+          ) : connection.isConnectedWithCrossApp && connectionCache && /* @__PURE__ */ jsx(
             Image,
             {
               src: connectionCache.ecosystemApp.logoUrl,
@@ -7682,7 +7722,7 @@ var EmbeddedWalletContent = ({ setCurrentContent }) => {
                 {
                   href: "https://www.veworld.net/",
                   isExternal: true,
-                  color: "gray.500",
+                  color: "blackAlpha.600",
                   fontSize: "14px",
                   textDecoration: "underline",
                   children: [
@@ -7702,7 +7742,7 @@ var EmbeddedWalletContent = ({ setCurrentContent }) => {
                 {
                   href: "https://docs.vechainkit.vechain.org/vechain-kit/embedded-wallets",
                   isExternal: true,
-                  color: "gray.500",
+                  color: "blackAlpha.600",
                   fontSize: "14px",
                   textDecoration: "underline",
                   children: t("here")
@@ -7756,7 +7796,7 @@ var SelectTokenContent = ({ onSelectToken, onBack }) => {
           Input,
           {
             placeholder: "Search token",
-            bg: isDark ? "#1a1a1a" : "gray.50",
+            bg: isDark ? "#00000038" : "gray.50",
             borderRadius: "xl",
             height: "56px",
             pl: 12,
@@ -7786,7 +7826,7 @@ var SelectTokenContent = ({ onSelectToken, onBack }) => {
         {
           spacing: 2,
           py: 8,
-          color: isDark ? "whiteAlpha.600" : "gray.500",
+          color: isDark ? "whiteAlpha.600" : "blackAlpha.600",
           children: [
             /* @__PURE__ */ jsx(Icon, { as: FiSlash, boxSize: 12, opacity: 0.5 }),
             /* @__PURE__ */ jsx(Text, { fontSize: "lg", children: t("No tokens found") }),
@@ -7923,7 +7963,7 @@ var SendTokenContent = ({
         {
           p: 6,
           borderRadius: "xl",
-          bg: isDark ? "#1a1a1a" : "gray.50",
+          bg: isDark ? "#00000038" : "gray.50",
           children: /* @__PURE__ */ jsxs(VStack, { align: "stretch", spacing: 2, children: [
             /* @__PURE__ */ jsxs(FormControl, { isInvalid: !!errors.amount, children: [
               /* @__PURE__ */ jsxs(HStack, { justify: "space-between", children: [
@@ -7972,7 +8012,13 @@ var SendTokenContent = ({
                       bg: isDark ? "whiteAlpha.300" : "blackAlpha.300"
                     },
                     onClick: () => setIsSelectingToken(true),
-                    leftIcon: /* @__PURE__ */ jsx(
+                    leftIcon: TOKEN_LOGO_COMPONENTS[selectedToken.symbol] ? React10.cloneElement(
+                      TOKEN_LOGO_COMPONENTS[selectedToken.symbol],
+                      {
+                        boxSize: "20px",
+                        borderRadius: "full"
+                      }
+                    ) : /* @__PURE__ */ jsx(
                       Image,
                       {
                         src: TOKEN_LOGOS[selectedToken.symbol],
@@ -8023,7 +8069,7 @@ var SendTokenContent = ({
                   }
                 )
               ] }),
-              errors.amount && /* @__PURE__ */ jsx(Text, { color: "red.500", fontSize: "sm", children: errors.amount.message })
+              errors.amount && /* @__PURE__ */ jsx(Text, { color: "#ef4444", fontSize: "sm", children: errors.amount.message })
             ] }),
             selectedToken && /* @__PURE__ */ jsxs(
               HStack,
@@ -8066,7 +8112,7 @@ var SendTokenContent = ({
           marginTop: "-20px",
           marginBottom: "-20px",
           marginX: "auto",
-          bg: isDark ? "#262626" : "gray.100",
+          bg: isDark ? "#151515" : "gray.100",
           borderRadius: "xl",
           w: "40px",
           h: "40px",
@@ -8082,34 +8128,41 @@ var SendTokenContent = ({
           )
         }
       ),
-      /* @__PURE__ */ jsx(Box, { borderRadius: "xl", bg: isDark ? "#1a1a1a" : "gray.50", children: /* @__PURE__ */ jsx(VStack, { align: "stretch", spacing: 2, p: 6, width: "100%", children: /* @__PURE__ */ jsxs(FormControl, { isInvalid: !!errors.toAddressOrDomain, children: [
-        /* @__PURE__ */ jsx(
-          Input,
-          {
-            ...register("toAddressOrDomain", {
-              required: t("Address is required")
-            }),
-            onChange: (e) => {
-              const trimmed = e.target.value.trim();
-              e.target.value = trimmed;
-              setValue("toAddressOrDomain", trimmed, {
-                shouldValidate: true
-              });
-            },
-            placeholder: t(
-              "Type the receiver address or domain"
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          borderRadius: "xl",
+          bg: isDark ? "#00000038" : "gray.50",
+          children: /* @__PURE__ */ jsx(VStack, { align: "stretch", spacing: 2, p: 6, width: "100%", children: /* @__PURE__ */ jsxs(FormControl, { isInvalid: !!errors.toAddressOrDomain, children: [
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                ...register("toAddressOrDomain", {
+                  required: t("Address is required")
+                }),
+                onChange: (e) => {
+                  const trimmed = e.target.value.trim();
+                  e.target.value = trimmed;
+                  setValue("toAddressOrDomain", trimmed, {
+                    shouldValidate: true
+                  });
+                },
+                placeholder: t(
+                  "Type the receiver address or domain"
+                ),
+                _placeholder: {
+                  fontSize: "md",
+                  fontWeight: "normal"
+                },
+                fontSize: "lg",
+                fontWeight: "bold",
+                variant: "unstyled"
+              }
             ),
-            _placeholder: {
-              fontSize: "md",
-              fontWeight: "normal"
-            },
-            fontSize: "lg",
-            fontWeight: "bold",
-            variant: "unstyled"
-          }
-        ),
-        errors.toAddressOrDomain && /* @__PURE__ */ jsx(Text, { color: "red.500", fontSize: "sm", children: errors.toAddressOrDomain.message })
-      ] }) }) })
+            errors.toAddressOrDomain && /* @__PURE__ */ jsx(Text, { color: "#ef4444", fontSize: "sm", children: errors.toAddressOrDomain.message })
+          ] }) })
+        }
+      )
     ] }) }),
     /* @__PURE__ */ jsx(ModalFooter, { children: /* @__PURE__ */ jsx(
       Button,
@@ -8549,7 +8602,7 @@ var ExistingDomainsList = ({
                     Text,
                     {
                       fontSize: "sm",
-                      color: isDark ? "whiteAlpha.600" : "gray.500",
+                      color: isDark ? "whiteAlpha.600" : "blackAlpha.600",
                       children: t(
                         "Current domain"
                       )
@@ -8562,8 +8615,8 @@ var ExistingDomainsList = ({
               Tag,
               {
                 size: "sm",
-                bg: isDark ? "whiteAlpha.200" : "gray.100",
-                color: isDark ? "whiteAlpha.800" : "gray.600",
+                bg: isDark ? "#ffffff05" : "whiteAlpha.100",
+                color: isDark ? "whiteAlpha.900" : "blackAlpha.600",
                 px: 3,
                 py: 1,
                 borderRadius: "full",
@@ -8700,7 +8753,7 @@ var ChooseNameSearchContent = ({
             paddingRight: "120px",
             fontSize: "lg",
             height: "60px",
-            bg: isDark ? "#1a1a1a" : "white",
+            bg: isDark ? "#00000038" : "white",
             border: `1px solid ${isDark ? "#ffffff29" : "#ebebeb"}`,
             _hover: {
               border: `1px solid ${isDark ? "#ffffff40" : "#e0e0e0"}`
@@ -8723,19 +8776,19 @@ var ChooseNameSearchContent = ({
               {
                 mr: 4,
                 fontSize: "sm",
-                color: isDark ? "whiteAlpha.800" : "gray.500",
+                color: isDark ? "whiteAlpha.800" : "blackAlpha.600",
                 children: ".veworld.vet"
               }
             )
           }
         )
       ] }),
-      error && hasInteracted && /* @__PURE__ */ jsx(Text, { color: "red.500", fontSize: "sm", children: error }),
+      error && hasInteracted && /* @__PURE__ */ jsx(Text, { color: "#ef4444", fontSize: "sm", children: error }),
       !error && hasInteracted && name.length >= 3 && /* @__PURE__ */ jsx(
         Text,
         {
           fontSize: "sm",
-          color: isAvailable ? "green.500" : "red.500",
+          color: isAvailable ? "green.500" : "#ef4444",
           fontWeight: "500",
           children: isOwnDomain ? t("YOU OWN THIS") : isAvailable ? t("AVAILABLE") : t("UNAVAILABLE")
         }
@@ -8949,7 +9002,7 @@ var FAQAccordion = () => {
         Input,
         {
           placeholder: t("Search FAQ"),
-          bg: isDark ? "#1a1a1a" : "gray.50",
+          bg: isDark ? "#00000038" : "gray.50",
           borderRadius: "xl",
           height: "56px",
           pl: 12,
@@ -8957,14 +9010,19 @@ var FAQAccordion = () => {
           onChange: (e) => setSearchQuery(e.target.value)
         }
       ),
-      /* @__PURE__ */ jsx(InputLeftElement, { h: "56px", w: "56px", pl: 4, children: /* @__PURE__ */ jsx(CiSearch, { color: isDark ? "whiteAlpha.400" : "gray.400" }) })
+      /* @__PURE__ */ jsx(InputLeftElement, { h: "56px", w: "56px", pl: 4, children: /* @__PURE__ */ jsx(
+        CiSearch,
+        {
+          color: isDark ? "whiteAlpha.400" : "blackAlpha.600"
+        }
+      ) })
     ] }),
     filteredFaqItems.length === 0 ? /* @__PURE__ */ jsxs(
       VStack,
       {
         spacing: 2,
         py: 8,
-        color: isDark ? "whiteAlpha.600" : "gray.500",
+        color: isDark ? "whiteAlpha.600" : "blackAlpha.600",
         children: [
           /* @__PURE__ */ jsx(Icon, { as: FiSlash, boxSize: 12, opacity: 0.5 }),
           /* @__PURE__ */ jsx(Text, { fontSize: "lg", children: t("No questions found") }),
@@ -8975,10 +9033,10 @@ var FAQAccordion = () => {
       /* @__PURE__ */ jsxs(
         AccordionButton,
         {
-          bg: isDark ? "whiteAlpha.50" : "gray.50",
+          bg: isDark ? "whiteAlpha.50" : "blackAlpha.50",
           borderRadius: "xl",
           _hover: {
-            bg: isDark ? "whiteAlpha.100" : "gray.100"
+            bg: isDark ? "whiteAlpha.100" : "blackAlpha.100"
           },
           children: [
             /* @__PURE__ */ jsx(Box, { flex: "1", textAlign: "left", py: 2, children: /* @__PURE__ */ jsx(Text, { fontWeight: "500", children: item.question }) }),
@@ -9294,6 +9352,7 @@ var en_default = {
   "Save Changes": "Save Changes",
   "Saving changes...": "Saving changes...",
   "Say goodbye to 0x addresses, claim your .veworld.vet subdomain now for free!": "Say goodbye to 0x addresses, claim your .veworld.vet subdomain now for free!",
+  "Search Apps": "Search Apps",
   "Search FAQ": "Search FAQ",
   "Search dApps": "Search dApps",
   "Search for a domain": "Search for a domain",
@@ -9772,6 +9831,7 @@ var de_default = {
   "Save Changes": "\xC4nderungen speichern",
   "Saving changes...": "\xC4nderungen werden gespeichert...",
   "Say goodbye to 0x addresses, claim your .veworld.vet subdomain now for free!": "Verabschieden Sie sich von 0x-Adressen, beanspruchen Sie Ihre .veworld.vet-Subdomain jetzt kostenlos!",
+  "Search Apps": "Apps durchsuchen",
   "Search FAQ": "FAQ durchsuchen",
   "Search dApps": "dApps durchsuchen",
   "Search for a domain": "Nach einer Domain suchen",
@@ -10250,6 +10310,7 @@ var it_default = {
   "Save Changes": "Salva modifiche",
   "Saving changes...": "Salvataggio delle modifiche...",
   "Say goodbye to 0x addresses, claim your .veworld.vet subdomain now for free!": "D\xEC addio agli indirizzi 0x, richiedi il tuo sottodominio .veworld.vet ora gratuitamente!",
+  "Search Apps": "Cerca App",
   "Search FAQ": "Cerca FAQ",
   "Search dApps": "Cerca dApp",
   "Search for a domain": "Cerca un dominio",
@@ -10728,6 +10789,7 @@ var fr_default = {
   "Save Changes": "Enregistrer les modifications",
   "Saving changes...": "Enregistrement des modifications...",
   "Say goodbye to 0x addresses, claim your .veworld.vet subdomain now for free!": "Dites adieu aux adresses 0x, r\xE9clamez d\xE8s maintenant votre sous-domaine .veworld.vet gratuitement!",
+  "Search Apps": "Rechercher des applications",
   "Search FAQ": "Rechercher dans la FAQ",
   "Search dApps": "Rechercher des dApps",
   "Search for a domain": "Rechercher un domaine",
@@ -11206,6 +11268,7 @@ var es_default = {
   "Save Changes": "Guardar cambios",
   "Saving changes...": "Guardando cambios...",
   "Say goodbye to 0x addresses, claim your .veworld.vet subdomain now for free!": "Desp\xEDdete de las direcciones 0x, \xA1reclama tu subdominio .veworld.vet ahora gratis!",
+  "Search Apps": "Buscar aplicaciones",
   "Search FAQ": "Buscar en las preguntas frecuentes",
   "Search dApps": "Buscar dApps",
   "Search for a domain": "Buscar un dominio",
@@ -11684,6 +11747,7 @@ var zh_default = {
   "Save Changes": "\u4FDD\u5B58\u66F4\u6539",
   "Saving changes...": "\u6B63\u5728\u4FDD\u5B58\u66F4\u6539...",
   "Say goodbye to 0x addresses, claim your .veworld.vet subdomain now for free!": "\u544A\u522B 0x \u5730\u5740\uFF0C\u7ACB\u5373\u514D\u8D39\u9886\u53D6\u60A8\u7684 .veworld.vet \u5B50\u57DF\u540D\uFF01",
+  "Search Apps": "\u641C\u7D22\u5E94\u7528",
   "Search FAQ": "\u641C\u7D22\u5E38\u89C1\u95EE\u9898",
   "Search dApps": "\u641C\u7D22 dApps",
   "Search for a domain": "\u641C\u7D22\u57DF\u540D",
@@ -12162,6 +12226,7 @@ var ja_default = {
   "Save Changes": "\u5909\u66F4\u3092\u4FDD\u5B58",
   "Saving changes...": "\u5909\u66F4\u3092\u4FDD\u5B58\u3057\u3066\u3044\u307E\u3059...",
   "Say goodbye to 0x addresses, claim your .veworld.vet subdomain now for free!": "0x\u30A2\u30C9\u30EC\u30B9\u306B\u5225\u308C\u3092\u544A\u3052\u3001\u4ECA\u3059\u3050\u7121\u6599\u3067.veworld.vet\u30B5\u30D6\u30C9\u30E1\u30A4\u30F3\u3092\u53D6\u5F97\u3057\u307E\u3057\u3087\u3046\uFF01",
+  "Search Apps": "\u30A2\u30D7\u30EA\u3092\u691C\u7D22",
   "Search FAQ": "FAQ\u3092\u691C\u7D22",
   "Search dApps": "dApps\u3092\u691C\u7D22",
   "Search for a domain": "\u30C9\u30E1\u30A4\u30F3\u3092\u691C\u7D22",
@@ -12412,10 +12477,12 @@ var FAQContent = ({ onGoBack }) => {
     /* @__PURE__ */ jsx(ModalBody, { children: /* @__PURE__ */ jsxs(VStack, { spacing: 6, align: "stretch", children: [
       /* @__PURE__ */ jsxs(VStack, { children: [
         /* @__PURE__ */ jsx(HStack, { justify: "center", children: /* @__PURE__ */ jsx(
-          VechainLogoHorizontal,
+          VechainLogo,
           {
             isDark,
-            w: "200px"
+            w: "200px",
+            h: "auto",
+            ml: -6
           }
         ) }),
         /* @__PURE__ */ jsx(Text, { fontSize: "sm", opacity: 0.7, textAlign: "center", children: t(
@@ -12602,7 +12669,7 @@ var CustomizationContent = ({
       /* @__PURE__ */ jsxs(
         Card,
         {
-          bg: isDark ? "whiteAlpha.100" : "#00000005",
+          bg: isDark ? "#1e1e21" : "#00000005",
           borderRadius: "xl",
           width: "full",
           position: "relative",
@@ -12743,7 +12810,7 @@ var CustomizationContent = ({
                             placeholder: !hasDomain ? t("Set a domain first") : t("Enter your display name")
                           }
                         ),
-                        errors.displayName && /* @__PURE__ */ jsx(Text, { color: "red.500", fontSize: "sm", mt: 1, children: errors.displayName.message })
+                        errors.displayName && /* @__PURE__ */ jsx(Text, { color: "#ef4444", fontSize: "sm", mt: 1, children: errors.displayName.message })
                       ]
                     }
                   ),
@@ -12768,7 +12835,7 @@ var CustomizationContent = ({
                             placeholder: t("Eg: DevRel @ ENS Labs")
                           }
                         ),
-                        errors.description && /* @__PURE__ */ jsx(Text, { color: "red.500", fontSize: "sm", mt: 1, children: errors.description.message })
+                        errors.description && /* @__PURE__ */ jsx(Text, { color: "#ef4444", fontSize: "sm", mt: 1, children: errors.description.message })
                       ]
                     }
                   ),
@@ -12803,7 +12870,7 @@ var CustomizationContent = ({
                             errors.twitter && /* @__PURE__ */ jsx(
                               Text,
                               {
-                                color: "red.500",
+                                color: "#ef4444",
                                 fontSize: "sm",
                                 mt: 1,
                                 children: errors.twitter.message
@@ -12839,7 +12906,7 @@ var CustomizationContent = ({
                             errors.website && /* @__PURE__ */ jsx(
                               Text,
                               {
-                                color: "red.500",
+                                color: "#ef4444",
                                 fontSize: "sm",
                                 mt: 1,
                                 children: errors.website.message
@@ -12875,7 +12942,7 @@ var CustomizationContent = ({
                             errors.email && /* @__PURE__ */ jsx(
                               Text,
                               {
-                                color: "red.500",
+                                color: "#ef4444",
                                 fontSize: "sm",
                                 mt: 1,
                                 children: errors.email.message
@@ -13011,7 +13078,7 @@ var CustomizationSummaryContent = ({
         Text,
         {
           fontSize: "sm",
-          color: isDark ? "whiteAlpha.600" : "gray.500",
+          color: isDark ? "whiteAlpha.600" : "blackAlpha.600",
           children: label
         }
       ),
@@ -13041,7 +13108,7 @@ var CustomizationSummaryContent = ({
           Text,
           {
             fontSize: "sm",
-            color: isDark ? "whiteAlpha.600" : "gray.500",
+            color: isDark ? "whiteAlpha.600" : "blackAlpha.600",
             children: t("Profile Image")
           }
         ),
@@ -13303,7 +13370,7 @@ var AssetsContent = ({ setCurrentContent }) => {
           Input,
           {
             placeholder: "Search token",
-            bg: darkMode ? "#1a1a1a" : "gray.50",
+            bg: darkMode ? "#00000038" : "gray.50",
             borderRadius: "xl",
             height: "56px",
             pl: 12,
@@ -13416,7 +13483,7 @@ var ManageCustomTokenContent = ({
                 fontWeight: "medium"
               }
             ),
-            errors.newTokenAddress && /* @__PURE__ */ jsx(Text, { color: "red.500", fontSize: "sm", children: errors.newTokenAddress.message })
+            errors.newTokenAddress && /* @__PURE__ */ jsx(Text, { color: "#ef4444", fontSize: "sm", children: errors.newTokenAddress.message })
           ] }) })
         }
       ),
@@ -13520,7 +13587,7 @@ var BridgeContent = ({ setCurrentContent }) => {
       /* @__PURE__ */ jsx(
         Image,
         {
-          src: isDark ? "https://app.vechain.energy/assets/logo-dark.svg" : "https://app.vechain.energy/assets/logo-light.svg",
+          src: isDark ? "https://static.vechain.energy/logo-dark.svg" : "https://static.vechain.energy/logo-light.svg",
           alt: "bridge token",
           w: "200px",
           h: "200px",
@@ -13567,7 +13634,7 @@ var ConnectionDetailsContent = ({ onGoBack }) => {
     /* @__PURE__ */ jsxs(ModalBody, { w: "full", children: [
       connection.isConnectedWithCrossApp && connectionCache && /* @__PURE__ */ jsx(CrossAppConnectionCard, { connectionCache }),
       connection.isConnectedWithSocialLogin && /* @__PURE__ */ jsx(PrivyConnectionCard, {}),
-      connection.isConnectedWithDappKit && /* @__PURE__ */ jsx(VStack, { align: "stretch", textAlign: "center", mt: 5, children: /* @__PURE__ */ jsx(DappKitConnectionCard, {}) }),
+      connection.isConnectedWithDappKit && /* @__PURE__ */ jsx(DappKitConnectionCard, {}),
       connection.isConnectedWithPrivy && /* @__PURE__ */ jsx(WalletSecuredBy, {})
     ] }),
     /* @__PURE__ */ jsx(ModalFooter, { pt: 0 })
@@ -14271,6 +14338,7 @@ var NotificationsContent = ({ setCurrentContent }) => {
 var SharedAppCard = ({
   name,
   imageUrl,
+  logoComponent,
   onClick,
   size = "md"
 }) => {
@@ -14281,8 +14349,8 @@ var SharedAppCard = ({
       _hover: { opacity: 0.8 },
       cursor: "pointer",
       onClick,
-      children: /* @__PURE__ */ jsx(CardBody, { p: size === "sm" ? 2 : 4, alignItems: "center", children: /* @__PURE__ */ jsxs(VStack, { spacing: 3, alignItems: "center", justifyContent: "center", children: [
-        imageUrl && /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsx(CardBody, { p: size === "sm" ? 2 : 4, alignItems: "center", children: /* @__PURE__ */ jsxs(VStack, { spacing: 2, h: "100%", justifyContent: "space-between", children: [
+        logoComponent ? logoComponent : imageUrl && /* @__PURE__ */ jsx(
           Image,
           {
             src: imageUrl,
@@ -14318,6 +14386,7 @@ var AppComponent = ({ xApp, setCurrentContent }) => {
     {
       isLoaded: !appMetadataLoading && !isLogoLoading,
       borderRadius: "md",
+      height: "100%",
       children: /* @__PURE__ */ jsx(
         SharedAppCard,
         {
@@ -14346,6 +14415,7 @@ var CustomAppComponent = ({
   image,
   url,
   description,
+  logoComponent,
   setCurrentContent
 }) => {
   return /* @__PURE__ */ jsx(
@@ -14360,9 +14430,11 @@ var CustomAppComponent = ({
           name,
           image,
           url,
-          description
+          description,
+          logoComponent
         }
-      })
+      }),
+      ...logoComponent && { logoComponent }
     }
   );
 };
@@ -14450,7 +14522,17 @@ var ExploreEcosystemContent = ({ setCurrentContent }) => {
   ) : [];
   const filteredDefaultApps = DEFAULT_APPS.filter(
     (dapp) => dapp.name.toLowerCase().includes(searchQuery.toLowerCase())
-  );
+  ).map((dapp) => {
+    if (dapp.logoComponent) {
+      return {
+        ...dapp,
+        logoComponent: React10.cloneElement(dapp.logoComponent, {
+          isDark
+        })
+      };
+    }
+    return dapp;
+  });
   const { shortcuts } = useEcosystemShortcuts();
   return /* @__PURE__ */ jsxs(Box, { children: [
     /* @__PURE__ */ jsxs(StickyHeaderContainer, { children: [
@@ -14474,10 +14556,10 @@ var ExploreEcosystemContent = ({ setCurrentContent }) => {
         /* @__PURE__ */ jsx(
           Input,
           {
-            placeholder: t("Search dApps"),
+            placeholder: t("Search Apps"),
             value: searchQuery,
             onChange: (e) => setSearchQuery(e.target.value),
-            bg: isDark ? "#1a1a1a" : "gray.50",
+            bg: isDark ? "#00000038" : "gray.50",
             borderRadius: "xl",
             height: "56px",
             pl: 12
@@ -14498,7 +14580,10 @@ var ExploreEcosystemContent = ({ setCurrentContent }) => {
             image: dapp.logo,
             url: dapp.external_url,
             setCurrentContent,
-            description: dapp.description
+            description: dapp.description,
+            ...dapp.logoComponent && {
+              logoComponent: dapp.logoComponent
+            }
           }
         ) }, dapp.name)),
         filteredDapps.map((dapp) => /* @__PURE__ */ jsx(GridItem, { children: /* @__PURE__ */ jsx(
@@ -14542,7 +14627,8 @@ var AppOverviewContent = ({
   name,
   image,
   url,
-  description
+  description,
+  logoComponent
 }) => {
   const { t } = useTranslation();
   return /* @__PURE__ */ jsxs(Box, { children: [
@@ -14557,7 +14643,7 @@ var AppOverviewContent = ({
       /* @__PURE__ */ jsx(ModalCloseButton, {})
     ] }),
     /* @__PURE__ */ jsx(ModalBody, { children: /* @__PURE__ */ jsxs(VStack, { spacing: 6, align: "center", w: "full", children: [
-      /* @__PURE__ */ jsx(
+      logoComponent ? logoComponent : /* @__PURE__ */ jsx(
         Image,
         {
           src: image,
@@ -14719,7 +14805,7 @@ var TransactionModalContent = ({
             Icon,
             {
               as: MdOutlineErrorOutline,
-              color: "red",
+              color: "#ef4444",
               fontSize: "100px"
             }
           ),
@@ -14732,7 +14818,7 @@ var TransactionModalContent = ({
             Icon,
             {
               as: IoIosCheckmarkCircleOutline,
-              color: "#00ff45de",
+              color: "#22c55e",
               fontSize: "100px"
             }
           ),
@@ -14767,22 +14853,17 @@ var TransactionModalContent = ({
       )
     ] }),
     /* @__PURE__ */ jsx(ModalBody, { children: /* @__PURE__ */ jsxs(VStack, { align: "center", p: 6, spacing: 3, children: [
-      statusConfig.icon && /* @__PURE__ */ jsx(
-        motion.div,
-        {
-          transition: {
-            duration: 4,
-            ease: "easeInOut",
-            repeat: Infinity
-          },
-          animate: {
-            scale: [1, 1.1, 1]
-          },
-          children: statusConfig.icon
-        }
-      ),
-      status === "success" && uiConfig?.showShareOnSocials && /* @__PURE__ */ jsxs(VStack, { mt: 2, children: [
-        /* @__PURE__ */ jsx(Text, { fontSize: "xs", children: t("Share on") }),
+      statusConfig.icon,
+      status === "success" && uiConfig?.showShareOnSocials && /* @__PURE__ */ jsxs(VStack, { mt: 2, spacing: 3, children: [
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            fontSize: "sm",
+            fontWeight: "bold",
+            opacity: 0.5,
+            children: t("Share on")
+          }
+        ),
         /* @__PURE__ */ jsx(
           ShareButtons,
           {
@@ -14910,29 +14991,24 @@ var SuccessfulOperationContent = ({
     ] }),
     /* @__PURE__ */ jsx(ModalBody, { children: /* @__PURE__ */ jsxs(VStack, { align: "center", p: 6, spacing: 3, children: [
       /* @__PURE__ */ jsx(
-        motion.div,
+        Icon,
         {
-          transition: {
-            duration: 4,
-            ease: "easeInOut",
-            repeat: Infinity
-          },
-          animate: {
-            scale: [1, 1.1, 1]
-          },
-          children: /* @__PURE__ */ jsx(
-            Icon,
-            {
-              as: IoIosCheckmarkCircleOutline,
-              fontSize: "100px",
-              color: "#00ff45de"
-            }
-          )
+          as: IoIosCheckmarkCircleOutline,
+          fontSize: "100px",
+          color: "#22c55e"
         }
       ),
       description && /* @__PURE__ */ jsx(Text, { fontSize: "sm", textAlign: "center", children: description }),
-      showSocialButtons && txId && /* @__PURE__ */ jsxs(VStack, { mt: 2, children: [
-        /* @__PURE__ */ jsx(Text, { fontSize: "xs", children: t("Share on") }),
+      showSocialButtons && txId && /* @__PURE__ */ jsxs(VStack, { mt: 2, spacing: 3, children: [
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            fontSize: "sm",
+            fontWeight: "bold",
+            opacity: 0.5,
+            children: t("Share on")
+          }
+        ),
         /* @__PURE__ */ jsx(
           ShareButtons,
           {
@@ -15619,8 +15695,8 @@ var LoadingContent = ({
   onTryAgain
 }) => {
   const { t } = useTranslation();
-  const [showTimeout, setShowTimeout] = React6.useState(false);
-  React6.useEffect(() => {
+  const [showTimeout, setShowTimeout] = React10.useState(false);
+  React10.useEffect(() => {
     const timer = setTimeout(() => {
       setShowTimeout(true);
     }, 7e3);
@@ -15698,7 +15774,7 @@ var ErrorContent = ({
                 Icon,
                 {
                   as: MdOutlineErrorOutline,
-                  color: "red",
+                  color: "#ef4444",
                   fontSize: "60px",
                   opacity: 0.5
                 }
@@ -15884,7 +15960,7 @@ var ProfileCard = ({
   const activeAccountTextRecords = useGetTextRecords(
     activeAccountDomain?.data?.domain
   );
-  const baseBackgroundColor = isDark ? "whiteAlpha.100" : "#00000005";
+  const baseBackgroundColor = isDark ? "#1e1e21" : "#00000005";
   const headerImageSvg = getPicassoImage(address);
   const isConnectedAccount = address === account?.address;
   const hasLinks = activeAccountTextRecords?.data?.url || activeAccountTextRecords?.data?.["com.x"] || activeAccountTextRecords?.data?.email;
@@ -15939,7 +16015,7 @@ var ProfileCard = ({
             )
           }
         ),
-        /* @__PURE__ */ jsx(CardBody, { pt: "14", pb: "6", backgroundColor: "none", border: "none", children: /* @__PURE__ */ jsxs(VStack, { w: "full", spacing: 2, children: [
+        /* @__PURE__ */ jsx(CardBody, { mt: 10, backgroundColor: "none", border: "none", children: /* @__PURE__ */ jsxs(VStack, { w: "full", spacing: 2, children: [
           showDisplayName && activeAccountTextRecords?.data?.display && /* @__PURE__ */ jsx(
             Text,
             {
@@ -16004,7 +16080,7 @@ var ProfileCard = ({
             }
           )
         ] }) }),
-        isConnectedAccount && showEdit && /* @__PURE__ */ jsx(CardFooter, { pt: 0, justify: "space-between", children: /* @__PURE__ */ jsxs(VStack, { w: "full", justify: "space-between", spacing: 4, children: [
+        isConnectedAccount && showEdit && /* @__PURE__ */ jsx(CardFooter, { justify: "space-between", children: /* @__PURE__ */ jsxs(VStack, { w: "full", justify: "space-between", spacing: 4, children: [
           /* @__PURE__ */ jsx(Divider, {}),
           /* @__PURE__ */ jsxs(HStack, { w: "full", justify: "space-between", children: [
             /* @__PURE__ */ jsx(
@@ -16300,7 +16376,10 @@ var ModalProvider = ({ children }) => {
     []
   );
   const [isAccountModalOpen, setIsAccountModalOpen] = useState(false);
-  const openAccountModal = useCallback(() => setIsAccountModalOpen(true), []);
+  const openAccountModal = useCallback(() => {
+    setAccountModalContent("main");
+    setIsAccountModalOpen(true);
+  }, []);
   const closeAccountModal = useCallback(
     () => setIsAccountModalOpen(false),
     []
@@ -17700,14 +17779,14 @@ var variants = {
       overflowX: "hidden",
       maxHeight: "550px",
       borderRadius: "24px",
-      backgroundColor: props.colorMode === "dark" ? "#1f1f1e" : "white"
+      backgroundColor: props.colorMode === "dark" ? "#18181b" : "white"
     },
     closeButton: {
       borderRadius: "50%"
     },
     header: {
       w: "full",
-      color: props.colorMode === "dark" ? "#dfdfdd" : "#4d4d4d",
+      color: props.colorMode === "dark" ? "#dfdfdd" : "#2e2e2e",
       fontSize: "md",
       fontWeight: "700",
       textAlign: "center"
@@ -17726,7 +17805,7 @@ var variants = {
       pointerEvents: "auto",
       boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.1)",
       py: "10px",
-      backgroundColor: props.colorMode === "dark" ? "#1f1f1e" : "white"
+      backgroundColor: props.colorMode === "dark" ? "#18181b" : "white"
     },
     closeButton: {
       borderRadius: "50%",
@@ -17748,7 +17827,11 @@ var variants2 = {
     body: {
       borderRadius: "12px",
       backgroundColor: props.colorMode === "dark" ? "#1f1f1e" : "white",
-      border: props.colorMode === "dark" ? "1px solid #2d2d2d" : "1px solid #eaeaea"
+      border: props.colorMode === "dark" ? "1px solid #2d2d2d" : "1px solid #eaeaea",
+      p: 5
+    },
+    footer: {
+      p: 5
     }
   }),
   featureAnnouncement: (props) => definePartsStyle2({
@@ -17892,12 +17975,12 @@ var variants3 = {
   })),
   mainContentButton: defineStyle(({ colorMode }) => ({
     width: "100%",
-    backgroundColor: colorMode === "dark" ? "whiteAlpha.200" : "blackAlpha.50",
+    backgroundColor: colorMode === "dark" ? "#ffffff05" : "blackAlpha.50",
     borderRadius: "xl",
     p: 3,
     cursor: "pointer",
     _hover: {
-      backgroundColor: colorMode === "dark" ? "whiteAlpha.300" : "blackAlpha.200"
+      backgroundColor: colorMode === "dark" ? "#ffffff0d" : "blackAlpha.200"
     }
   }))
 };