@lumiapassport/ui-kit 1.4.15 → 1.4.16

package/dist/iframe/index.html

@@ -14,7 +14,7 @@
     <meta http-equiv="X-Content-Type-Options" content="nosniff" />
     <meta http-equiv="Referrer-Policy" content="strict-origin-when-cross-origin" />
 
-    <title>Lumia Passport Secure Wallet - iframe version 1.4.15</title>
+    <title>Lumia Passport Secure Wallet - iframe version 1.4.16</title>
 
     <!-- Styles will be injected by build process -->
     <style>

package/dist/iframe/main.js

@@ -3600,7 +3600,7 @@ var BackupManager = class {
 };
 
 // src/iframe/main.ts
-var IFRAME_VERSION = "1.4.15";
+var IFRAME_VERSION = "1.4.16";
 var IframeWallet = class {
   constructor() {
     console.log("=".repeat(60));

package/dist/index.cjs

@@ -3093,6 +3093,31 @@ function useTheme(configTheme, customColors) {
     } else {
       root.style.removeProperty("--lumia-border");
     }
+    if (currentCustomColors?.buttonBackground) {
+      root.style.setProperty("--lumia-button-bg", currentCustomColors.buttonBackground);
+    } else {
+      root.style.removeProperty("--lumia-button-bg");
+    }
+    if (currentCustomColors?.buttonBackgroundEnd) {
+      root.style.setProperty("--lumia-button-bg-end", currentCustomColors.buttonBackgroundEnd);
+    } else {
+      root.style.removeProperty("--lumia-button-bg-end");
+    }
+    if (currentCustomColors?.buttonText) {
+      root.style.setProperty("--lumia-button-text", currentCustomColors.buttonText);
+    } else {
+      root.style.removeProperty("--lumia-button-text");
+    }
+    if (currentCustomColors?.buttonBackgroundHover) {
+      root.style.setProperty("--lumia-button-bg-hover", currentCustomColors.buttonBackgroundHover);
+    } else {
+      root.style.removeProperty("--lumia-button-bg-hover");
+    }
+    if (currentCustomColors?.buttonBackgroundHoverEnd) {
+      root.style.setProperty("--lumia-button-bg-hover-end", currentCustomColors.buttonBackgroundHoverEnd);
+    } else {
+      root.style.removeProperty("--lumia-button-bg-hover-end");
+    }
   }, [currentCustomColors]);
   const themeClasses = (0, import_react3.useMemo)(
     () => {
@@ -5812,7 +5837,7 @@ var LumiaRainbowKitProvider = ({ children }) => {
   const rainbowConfig2 = import_react4.default.useMemo(() => {
     return createRainbowConfig(config.wallet?.walletConnectProjectId);
   }, [config.wallet?.walletConnectProjectId]);
-  const customTheme = isDark ? {
+  const customTheme = import_react4.default.useMemo(() => isDark ? {
     ...(0, import_rainbowkit2.darkTheme)(),
     colors: {
       ...(0, import_rainbowkit2.darkTheme)().colors,
@@ -5828,7 +5853,7 @@ var LumiaRainbowKitProvider = ({ children }) => {
     },
     shadows: rainbowTheme.lightMode.shadows,
     radii: rainbowTheme.lightMode.radii
-  };
+  }, [isDark]);
   const isWalletEnabled = config.wallet?.enabled ?? false;
   if (!isWalletEnabled) {
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children });
@@ -8490,7 +8515,7 @@ function useLumiaPassportLinkedProfiles() {
 // package.json
 var package_default = {
   name: "@lumiapassport/ui-kit",
-  version: "1.4.15",
+  version: "1.4.16",
   description: "React UI components and hooks for Lumia Passport authentication and Account Abstraction",
   type: "module",
   main: "./dist/index.cjs",
@@ -8931,21 +8956,23 @@ var ConnectWalletButton = ({
           paddingRight: "3rem",
           fontSize: "1.25rem",
           fontWeight: "600",
-          color: "white",
+          color: config.ui.colors?.[isDark ? "dark" : "light"]?.buttonText || "white",
           borderRadius: "1rem",
-          background: "linear-gradient(to right, #9333ea, #2563eb)",
+          background: config.ui.colors?.[isDark ? "dark" : "light"]?.buttonBackground && config.ui.colors?.[isDark ? "dark" : "light"]?.buttonBackgroundEnd ? `linear-gradient(to right, ${config.ui.colors[isDark ? "dark" : "light"]?.buttonBackground}, ${config.ui.colors[isDark ? "dark" : "light"]?.buttonBackgroundEnd})` : "linear-gradient(to right, #9333ea, #2563eb)",
           boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)",
           transition: "all 0.2s",
           border: "none",
           cursor: "pointer"
         },
         onMouseEnter: (e) => {
-          e.currentTarget.style.background = "linear-gradient(to right, #7e22ce, #1d4ed8)";
+          const hoverBg = config.ui.colors?.[isDark ? "dark" : "light"]?.buttonBackgroundHover && config.ui.colors?.[isDark ? "dark" : "light"]?.buttonBackgroundHoverEnd ? `linear-gradient(to right, ${config.ui.colors[isDark ? "dark" : "light"]?.buttonBackgroundHover}, ${config.ui.colors[isDark ? "dark" : "light"]?.buttonBackgroundHoverEnd})` : "linear-gradient(to right, #7e22ce, #1d4ed8)";
+          e.currentTarget.style.background = hoverBg;
           e.currentTarget.style.transform = "scale(1.05)";
           e.currentTarget.style.boxShadow = "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)";
         },
         onMouseLeave: (e) => {
-          e.currentTarget.style.background = "linear-gradient(to right, #9333ea, #2563eb)";
+          const normalBg = config.ui.colors?.[isDark ? "dark" : "light"]?.buttonBackground && config.ui.colors?.[isDark ? "dark" : "light"]?.buttonBackgroundEnd ? `linear-gradient(to right, ${config.ui.colors[isDark ? "dark" : "light"]?.buttonBackground}, ${config.ui.colors[isDark ? "dark" : "light"]?.buttonBackgroundEnd})` : "linear-gradient(to right, #9333ea, #2563eb)";
+          e.currentTarget.style.background = normalBg;
           e.currentTarget.style.transform = "scale(1)";
           e.currentTarget.style.boxShadow = "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)";
         },