coinley-checkout 0.5.0 → 0.5.2

package/dist/coinley-checkout.es.js

@@ -19199,16 +19199,17 @@ var jsxRuntimeExports = jsxRuntime.exports;
 const ThemeContext = createContext();
 const useTheme = () => useContext(ThemeContext);
 const ThemeProvider = ({ initialTheme = "light", children }) => {
-  const [theme, setTheme] = useState(initialTheme);
+  const [theme2, setTheme] = useState(initialTheme);
   const toggleTheme = () => {
     setTheme((prevTheme) => prevTheme === "light" ? "dark" : "light");
   };
   useEffect(() => {
     document.documentElement.classList.remove("light", "dark");
-    document.documentElement.classList.add(theme);
-  }, [theme]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeContext.Provider, { value: { theme, setTheme, toggleTheme }, children });
+    document.documentElement.classList.add(theme2);
+  }, [theme2]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeContext.Provider, { value: { theme: theme2, setTheme, toggleTheme }, children });
 };
+const theme = "";
 const CoinleyContext = createContext();
 const useCoinley = () => useContext(CoinleyContext);
 const CoinleyProvider = ({
@@ -20397,7 +20398,7 @@ const QRCode = ({
   amount,
   currency,
   network,
-  theme = "light",
+  theme: theme2 = "light",
   size = 200
 }) => {
   const [qrData, setQrData] = useState("");
@@ -20505,8 +20506,8 @@ const QRCode = ({
       {
         value: qrData,
         size,
-        bgColor: theme === "dark" ? "#374151" : "#FFFFFF",
-        fgColor: theme === "dark" ? "#FFFFFF" : "#000000",
+        bgColor: theme2 === "dark" ? "#374151" : "#FFFFFF",
+        fgColor: theme2 === "dark" ? "#FFFFFF" : "#000000",
         level: "H",
         includeMargin: true
       }
@@ -20586,7 +20587,7 @@ const QRCode = ({
     ] }) })
   ] });
 };
-const PaymentStatus = ({ status, message, theme = "light" }) => {
+const PaymentStatus = ({ status, message, theme: theme2 = "light" }) => {
   const renderIcon = () => {
     switch (status) {
       case "processing":
@@ -20636,24 +20637,24 @@ const PaymentStatus = ({ status, message, theme = "light" }) => {
   const getMessageClasses = () => {
     switch (status) {
       case "processing":
-        return theme === "dark" ? "text-blue-300" : "text-blue-600";
+        return theme2 === "dark" ? "text-blue-300" : "text-blue-600";
       case "success":
-        return theme === "dark" ? "text-green-300" : "text-green-600";
+        return theme2 === "dark" ? "text-green-300" : "text-green-600";
       case "error":
-        return theme === "dark" ? "text-red-300" : "text-red-600";
+        return theme2 === "dark" ? "text-red-300" : "text-red-600";
       default:
-        return theme === "dark" ? "text-gray-300" : "text-gray-600";
+        return theme2 === "dark" ? "text-gray-300" : "text-gray-600";
     }
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center justify-center py-6", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-4", children: renderIcon() }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: `text-xl font-bold mb-2 ${theme === "dark" ? "text-white" : "text-gray-900"}`, children: getStatusTitle() }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: `text-xl font-bold mb-2 ${theme2 === "dark" ? "text-white" : "text-gray-900"}`, children: getStatusTitle() }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `text-center ${getMessageClasses()}`, children: message }),
-    status === "processing" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `mt-4 text-xs ${theme === "dark" ? "text-gray-400" : "text-gray-500"}`, children: "This may take a few moments. Please do not close this window." }),
-    status === "success" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `mt-4 p-2 rounded ${theme === "dark" ? "bg-gray-700" : "bg-gray-100"}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `text-xs ${theme === "dark" ? "text-gray-300" : "text-gray-600"}`, children: "Your payment has been successfully processed. You will receive a confirmation shortly." }) })
+    status === "processing" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `mt-4 text-xs ${theme2 === "dark" ? "text-gray-400" : "text-gray-500"}`, children: "This may take a few moments. Please do not close this window." }),
+    status === "success" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `mt-4 p-2 rounded ${theme2 === "dark" ? "bg-gray-700" : "bg-gray-100"}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `text-xs ${theme2 === "dark" ? "text-gray-300" : "text-gray-600"}`, children: "Your payment has been successfully processed. You will receive a confirmation shortly." }) })
   ] });
 };
-const PaymentMethods = ({ onSelect, selected, theme = "light", supportedNetworks = [] }) => {
+const PaymentMethods = ({ onSelect, selected, theme: theme2 = "light", supportedNetworks = [] }) => {
   const [selectedNetwork, setSelectedNetwork] = useState(NETWORK_TYPES.ETHEREUM);
   const [availableWallets, setAvailableWallets] = useState({});
   const [showMore, setShowMore] = useState(false);
@@ -20664,22 +20665,22 @@ const PaymentMethods = ({ onSelect, selected, theme = "light", supportedNetworks
     {
       id: NETWORK_TYPES.ETHEREUM,
       name: "Ethereum",
-      description: "ERC-20 tokens"
+      description: "ERC-20"
     },
     {
       id: NETWORK_TYPES.BSC,
-      name: "BSC (Binance Smart Chain)",
-      description: "BEP-20 tokens"
+      name: "BSC",
+      description: "BEP-20"
     },
     {
       id: NETWORK_TYPES.TRON,
       name: "Tron",
-      description: "TRC-20 tokens"
+      description: "TRC-20"
     },
     {
       id: NETWORK_TYPES.ALGORAND,
       name: "Algorand",
-      description: "ASA tokens"
+      description: "ASA"
     }
   ];
   const getPaymentMethodsForNetwork = (network) => {
@@ -20880,15 +20881,14 @@ const PaymentMethods = ({ onSelect, selected, theme = "light", supportedNetworks
     return isAvailable ? `${walletNames[wallet]} detected - Ready to pay` : `${walletNames[wallet]} required - Please install to continue`;
   }
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: `text-lg font-medium mb-4 ${theme === "dark" ? "text-white" : "text-gray-800"}`, children: "Select Payment Method" }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-6", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: `block text-sm font-medium mb-2 ${theme === "dark" ? "text-white" : "text-gray-700"}`, children: "Blockchain Network" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: `block text-sm font-medium mb-2 ${theme2 === "dark" ? "text-white" : "text-gray-700"}`, children: "Blockchain Network" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         "select",
         {
           value: selectedNetwork,
           onChange: (e) => handleNetworkChange(e.target.value),
-          className: `w-full p-3 rounded-lg border transition-colors ${theme === "dark" ? "bg-gray-700 border-gray-600 text-white focus:border-[#7042D2]" : "bg-white border-gray-300 text-gray-900 focus:border-[#7042D2]"} focus:outline-none focus:ring-2 focus:ring-[#7042D2] focus:ring-opacity-50`,
+          className: `w-full p-3 rounded-lg border transition-colors ${theme2 === "dark" ? "bg-gray-700 border-gray-600 text-white focus:border-[#7042D2]" : "bg-white border-gray-300 text-gray-900 focus:border-[#7042D2]"} focus:outline-none focus:ring-2 focus:ring-[#7042D2] focus:ring-opacity-50`,
           children: networks.filter((network) => supportedNetworks.length === 0 || supportedNetworks.includes(network.id)).map((network) => /* @__PURE__ */ jsxRuntimeExports.jsxs("option", { value: network.id, children: [
             network.name,
             " - ",
@@ -20898,17 +20898,17 @@ const PaymentMethods = ({ onSelect, selected, theme = "light", supportedNetworks
       )
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-4", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: `block text-sm font-medium mb-3 ${theme === "dark" ? "text-white" : "text-gray-700"}`, children: "Select Stablecoin" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: `block text-sm font-medium mb-3 ${theme2 === "dark" ? "text-white" : "text-gray-700"}`, children: "Select Stablecoin" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-2 gap-3 mb-4", children: visibleMethods.map((method) => /* @__PURE__ */ jsxRuntimeExports.jsx(
         "button",
         {
           onClick: () => handleSelectPaymentMethod(method),
-          className: `p-4 rounded-lg transition-all duration-200 border-1 ${(selected == null ? void 0 : selected.currency) === method.id && (selected == null ? void 0 : selected.network) === selectedNetwork ? theme === "dark" ? "bg-blue-900/30 border-[#7042D2] ring-2 ring-[#7042D2] ring-opacity-50" : "bg-blue-50 border-[#7042D2] ring-2 ring-[#7042D2] ring-opacity-50" : theme === "dark" ? "bg-gray-700 hover:bg-gray-600 border-gray-600 hover:border-gray-500" : "bg-white hover:bg-gray-50 border-gray-200 hover:border-gray-300"}`,
+          className: `p-1 rounded-xl transition-all duration-200 border ${(selected == null ? void 0 : selected.currency) === method.id && (selected == null ? void 0 : selected.network) === selectedNetwork ? theme2 === "dark" ? "bg-blue-900/30 border-[#7042D2] ring-2 ring-[#7042D2] ring-opacity-50" : "bg-blue-50 border-[#7042D2] ring-2 ring-[#7042D2] ring-opacity-50" : theme2 === "dark" ? "bg-gray-700 hover:bg-gray-600 border-gray-600 hover:border-gray-500" : "bg-white hover:bg-[#ECE3FF] border-gray-200 hover:border-gray-300"}`,
           children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center text-center", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-shrink-0 h-10 w-10 bg-white rounded-full flex items-center justify-center mb-2 shadow-sm", children: /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: method.logo, alt: method.name, className: "h-6 w-6" }) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: `font-medium text-sm ${theme === "dark" ? "text-white" : "text-gray-900"}`, children: method.name }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `text-xs ${theme === "dark" ? "text-gray-300" : "text-gray-500"}`, children: method.description })
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-shrink-0 py-2 w-10 bg-white rounded-full flex items-center justify-center mb-2 shadow-sm", children: /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: method.logo, alt: method.name, className: "h-6 w-6" }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-x-2 items-center", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: `font-medium text-sm ${theme2 === "dark" ? "text-white" : "text-gray-900"}`, children: method.name }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `text-xs ${theme2 === "dark" ? "text-gray-300" : "text-gray-500"}`, children: method.description })
             ] }),
             (selected == null ? void 0 : selected.currency) === method.id && (selected == null ? void 0 : selected.network) === selectedNetwork && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
               "svg",
@@ -20935,12 +20935,12 @@ const PaymentMethods = ({ onSelect, selected, theme = "light", supportedNetworks
         "button",
         {
           onClick: () => setShowMore(!showMore),
-          className: `w-full py-2 px-4 rounded-lg text-sm font-medium transition-colors ${theme === "dark" ? "bg-gray-700 text-gray-300 hover:bg-gray-600" : "bg-gray-100 text-gray-600 hover:bg-gray-200"}`,
+          className: `w-full py-2 px-4 rounded-lg text-sm font-medium transition-colors ${theme2 === "dark" ? "bg-gray-700 text-gray-300 hover:bg-gray-600" : "bg-gray-100 text-gray-600 hover:bg-gray-200"}`,
           children: showMore ? "Show Less" : `Show More (${availableMethods.length - 4} more)`
         }
       )
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `p-3 rounded-lg text-sm ${theme === "dark" ? "bg-gray-800 text-gray-300" : "bg-gray-50 text-gray-600"}`, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `p-3 rounded-lg text-sm ${theme2 === "dark" ? "bg-gray-800 text-gray-300" : "bg-gray-50 text-gray-600"}`, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `w-2 h-2 rounded-full mr-2 ${availableWallets[getRequiredWallet(selectedNetwork)] ? "bg-green-500" : "bg-red-500"}` }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs", children: getNetworkRequirement(selectedNetwork) })
     ] }) })
@@ -20957,7 +20957,7 @@ const CoinleyModal = ({
   onPayment,
   onBack,
   error,
-  theme = "light",
+  theme: theme2 = "light",
   merchantName,
   transactionHash,
   walletConnection,
@@ -21022,9 +21022,9 @@ const CoinleyModal = ({
   };
   if (!isOpen)
     return null;
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "fixed inset-0 z-50 overflow-y-auto bg-black/50", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex min-h-screen items-center justify-center p-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative p-6 w-full max-w-md mx-auto rounded-lg shadow-xl bg-white text-gray-800", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between items-center mb-6 bg-[#F1ECFB] p-3 rounded-xl", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-xl font-bold text-gray-900", children: /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: logo, className: "w-32", alt: "Coinley Logo" }) }) }),
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "fixed inset-0 z-50 overflow-y-auto bg-black/50", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex min-h-screen items-center justify-center p-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "coinley-modal relative p-6 w-full max-w-md mx-auto rounded-lg shadow-xl", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "coinley-header flex justify-between items-center mb-6 bg-white", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-xl font-bold", children: /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: logo, className: "w-24", alt: "Coinley Logo" }) }) }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         "button",
         {
@@ -21034,25 +21034,36 @@ const CoinleyModal = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-6 bg-[#F1ECFB] p-3 rounded-xl", children: [
-      payment && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-6 p-4 rounded-lg", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-lg text-gray-800 font-semibold", children: [
-          "PAY: ",
-          merchantName
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between items-center mt-2 bg-gray-100 px-3 rounded-lg", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium text-gray-700", children: "Amount:" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-bold text-xl text-[#7042D2]", children: [
+    payment && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "coinley-payment-info mb-6", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-600", children: "Total Amount" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "coinley-amount-display text-4xl font-extrabold", children: [
+          "$",
+          formatAmount(payment.totalAmount || payment.amount)
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-600", children: "Payment To" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "coinley-merchant-name text-lg", children: merchantName })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-center gap-4 text-sm", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-3 py-2 rounded-lg", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-gray-600 text-xs", children: "Original Amount" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "font-semibold", children: [
             "$",
-            formatAmount(payment.totalAmount || payment.amount)
+            formatAmount(payment.amount)
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs mt-1 text-right", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-gray-500", children: [
-          "Payment ID: ",
-          payment.id ? payment.id.slice(0, 8) : "",
-          "..."
-        ] }) })
-      ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-3 py-2 rounded-lg", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-gray-600 text-xs", children: "Fee (1.75%)" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "font-semibold", children: [
+            "$",
+            formatAmount((payment.totalAmount || payment.amount) - payment.amount)
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-6", children: [
       debug && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-2 text-right", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         "button",
         {
@@ -21073,7 +21084,7 @@ const CoinleyModal = ({
           {
             onSelect: onPaymentMethodSelect,
             selected: selectedPaymentMethod,
-            theme,
+            theme: theme2,
             supportedNetworks
           }
         ),
@@ -21084,7 +21095,7 @@ const CoinleyModal = ({
               console.log("Proceed button clicked, calling onPaymentMethodSelect");
               onPaymentMethodSelect(selectedPaymentMethod);
             },
-            className: "w-full py-3 px-4 bg-[#7042D2] hover:bg-[#7042D2] text-white font-medium rounded-lg transition-colors",
+            className: "coinley-button-primary w-full py-3 px-4 font-medium rounded-lg transition-colors",
             disabled: !selectedPaymentMethod,
             children: [
               "Proceed with ",
@@ -21100,15 +21111,15 @@ const CoinleyModal = ({
           /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-lg font-medium mb-2 text-gray-800", children: "Payment Details" }),
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[#7042D2] font-semibold", children: "Currency:" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-purple-600 font-semibold", children: "Currency:" }),
               /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: selectedPaymentMethod.currency })
             ] }),
             /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[#7042D2] font-semibold", children: "Network:" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-purple-600 font-semibold", children: "Network:" }),
               /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: getNetworkDisplayName(selectedPaymentMethod.network) })
             ] }),
             /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[#7042D2] font-semibold", children: "Fee:" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-purple-600 font-semibold", children: "Fee:" }),
               /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: "1.75%" })
             ] })
           ] })
@@ -21118,7 +21129,7 @@ const CoinleyModal = ({
             "button",
             {
               onClick: () => setPaymentType("wallet"),
-              className: `py-2 px-4 text-sm font-medium ${paymentType === "wallet" ? "border-b-2 border-[#7042D2] text-[#7042D2]" : "text-gray-500 hover:text-gray-700"}`,
+              className: `py-2 px-4 text-sm font-medium ${paymentType === "wallet" ? "border-b-2 border-purple-600 text-purple-600" : "text-gray-500 hover:text-gray-700"}`,
               children: "Connect Wallet"
             }
           ),
@@ -21126,7 +21137,7 @@ const CoinleyModal = ({
             "button",
             {
               onClick: () => setPaymentType("qrcode"),
-              className: `py-2 px-4 text-sm font-medium ${paymentType === "qrcode" ? "border-b-2 border-[#7042D2] text-[#7042D2]" : "text-gray-500 hover:text-gray-700"}`,
+              className: `py-2 px-4 text-sm font-medium ${paymentType === "qrcode" ? "border-b-2 border-purple-600 text-purple-600" : "text-gray-500 hover:text-gray-700"}`,
               children: "QR Code"
             }
           )
@@ -21134,7 +21145,7 @@ const CoinleyModal = ({
         testMode ? (
           // Test mode payment option
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 rounded-lg mb-4 bg-blue-50", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-[#7042D2] rounded-full p-2 mr-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-6 w-6 text-white", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 10V3L4 14h7v7l9-11h-7z" }) }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-purple-600 rounded-full p-2 mr-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-6 w-6 text-white", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 10V3L4 14h7v7l9-11h-7z" }) }) }),
             /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "font-medium text-gray-800", children: "Test Mode Payment" }),
               /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-600", children: 'Click "Pay Now" to simulate a successful payment' })
@@ -21149,7 +21160,7 @@ const CoinleyModal = ({
               amount: payment.totalAmount || payment.amount,
               currency: selectedPaymentMethod.currency,
               network: selectedPaymentMethod.network,
-              theme
+              theme: theme2
             }
           ) })
         ) : (
@@ -21196,7 +21207,7 @@ const CoinleyModal = ({
                     console.log("Connect wallet button clicked for:", walletType);
                     onConnectWallet(walletType);
                   },
-                  className: "py-2 px-4 bg-[#7042D2] hover:bg-[#7042D2] text-white font-medium rounded-md text-sm",
+                  className: "coinley-button-primary py-2 px-4 font-medium rounded-md text-sm",
                   children: "Connect"
                 }
               )
@@ -21212,7 +21223,7 @@ const CoinleyModal = ({
                   href: getWalletInstallUrl(walletType),
                   target: "_blank",
                   rel: "noopener noreferrer",
-                  className: "text-sm text-[#7042D2] hover:underline",
+                  className: "text-sm text-purple-600 hover:underline",
                   children: "Install"
                 }
               )
@@ -21226,7 +21237,7 @@ const CoinleyModal = ({
             {
               type: "button",
               onClick: onBack,
-              className: "w-full py-2 px-4 bg-gray-200 hover:bg-gray-300 text-[#7042D2] font-medium rounded-md",
+              className: "w-full py-2 px-4 bg-gray-200 hover:bg-gray-300 text-purple-600 font-medium rounded-md",
               children: "Back"
             }
           ),
@@ -21235,7 +21246,7 @@ const CoinleyModal = ({
             {
               type: "button",
               onClick: () => onPayment(paymentType === "qrcode"),
-              className: "w-full py-2 px-4 bg-[#7042D2] hover:bg-[#7042D2] text-white font-medium rounded-md",
+              className: "coinley-button-primary w-full py-2 px-4 font-medium rounded-md",
               disabled: !testMode && paymentType === "wallet" && !walletConnection,
               children: paymentType === "qrcode" ? "I have sent the payment" : "Pay Now"
             }
@@ -21246,7 +21257,7 @@ const CoinleyModal = ({
         PaymentStatus,
         {
           status: "processing",
-          theme,
+          theme: theme2,
           message: "Processing your payment..."
         }
       ),
@@ -21255,7 +21266,7 @@ const CoinleyModal = ({
           PaymentStatus,
           {
             status: "success",
-            theme,
+            theme: theme2,
             message: "Payment successful!"
           }
         ),
@@ -21268,7 +21279,7 @@ const CoinleyModal = ({
               href: `${getExplorerUrl(selectedPaymentMethod.network)}/${getExplorerPath(selectedPaymentMethod.network)}/${transactionHash}`,
               target: "_blank",
               rel: "noopener noreferrer",
-              className: "text-xs text-[#7042D2] mt-2 inline-block",
+              className: "text-xs text-purple-600 mt-2 inline-block",
               children: "View on Explorer →"
             }
           )
@@ -21279,7 +21290,7 @@ const CoinleyModal = ({
           PaymentStatus,
           {
             status: "error",
-            theme,
+            theme: theme2,
             message: error || "An error occurred while processing your payment."
           }
         ),
@@ -21296,7 +21307,7 @@ const CoinleyModal = ({
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center text-xs text-gray-500", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { children: [
       "Powered by ",
-      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[#7042D2]", children: "Coinley" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-purple-600", children: "Coinley" }),
       " - Secure Cryptocurrency Payments"
     ] }) })
   ] }) }) });
@@ -21330,7 +21341,7 @@ const CoinleyCheckout = forwardRef(({
   onSuccess,
   onError,
   onClose,
-  theme,
+  theme: theme2,
   autoOpen = false,
   debug = false,
   testMode = false,
@@ -21353,7 +21364,7 @@ const CoinleyCheckout = forwardRef(({
   const effectiveApiKey = apiKey || (coinleyContext == null ? void 0 : coinleyContext.apiKey);
   const effectiveApiSecret = apiSecret || (coinleyContext == null ? void 0 : coinleyContext.apiSecret);
   apiUrl || (coinleyContext == null ? void 0 : coinleyContext.apiUrl);
-  const effectiveTheme = theme || contextTheme;
+  const effectiveTheme = theme2 || contextTheme;
   const effectiveDebug = debug || (coinleyContext == null ? void 0 : coinleyContext.debug);
   const effectiveSupportedNetworks = supportedNetworks.length > 0 ? supportedNetworks : [NETWORK_TYPES.ETHEREUM, NETWORK_TYPES.BSC, NETWORK_TYPES.TRON, NETWORK_TYPES.ALGORAND];
   const log = (message, data) => {