@abstraxn/signer-react 3.3.10 → 4.0.0

package/dist/src/components/WalletModal/components/ChainSelector.js

@@ -2,25 +2,63 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Chain Selector Component
  */
-import { useState, useEffect, useMemo } from "react";
-import "./ChainSelector.css";
+import { useState, useEffect, useMemo, useRef } from "react";
+// If a chain switch somehow never resolves/rejects, this guarantees the selector
+// becomes clickable again instead of staying silently inert forever.
+const SWITCH_SAFETY_TIMEOUT_MS = 15000;
+function defaultFilterForChains(chains) {
+    if (chains.length === 0)
+        return "all";
+    const hasMainnet = chains.some((c) => !c.isTestnet);
+    const hasTestnet = chains.some((c) => c.isTestnet);
+    // Only testnets configured (e.g. BlockMaze) → open on Testnets, not Mainnets.
+    if (hasTestnet && !hasMainnet)
+        return "testnet";
+    // Only mainnets → Mainnets.
+    if (hasMainnet && !hasTestnet)
+        return "mainnet";
+    return "all";
+}
+function emptyListMessage(filterType, searchQuery) {
+    const q = searchQuery.trim();
+    if (q) {
+        return `No networks found for "${q}"`;
+    }
+    if (filterType === "mainnet") {
+        return "No mainnets configured";
+    }
+    if (filterType === "testnet") {
+        return "No testnets configured";
+    }
+    return "No networks configured";
+}
 export function ChainSelector({ currentChain, availableChains, onChainSelect, onClose, theme = "dark", isOpen, }) {
     const [searchQuery, setSearchQuery] = useState("");
     const [filterType, setFilterType] = useState("all");
     const [isSwitching, setIsSwitching] = useState(false);
     const [switchingChainId, setSwitchingChainId] = useState(null);
-    // Reset state when opened
+    const safetyTimeoutRef = useRef(null);
+    const clearSafetyTimeout = () => {
+        if (safetyTimeoutRef.current) {
+            clearTimeout(safetyTimeoutRef.current);
+            safetyTimeoutRef.current = null;
+        }
+    };
+    // Reset state when opened — pick a tab that actually has chains.
     useEffect(() => {
         if (isOpen) {
             setSearchQuery("");
-            setFilterType("all");
+            setFilterType(defaultFilterForChains(availableChains));
             setIsSwitching(false);
             setSwitchingChainId(null);
+            clearSafetyTimeout();
         }
-    }, [isOpen]);
+        return clearSafetyTimeout;
+    }, [isOpen, availableChains]);
     const filteredChains = useMemo(() => {
         return availableChains.filter((chain) => {
-            const matchesSearch = chain.displayName.toLowerCase().includes(searchQuery.toLowerCase()) ||
+            const label = (chain.displayName || chain.name || "").toLowerCase();
+            const matchesSearch = label.includes(searchQuery.toLowerCase()) ||
                 chain.id.toString().includes(searchQuery);
             const matchesFilter = filterType === "all" ||
                 (filterType === "mainnet" && !chain.isTestnet) ||
@@ -52,24 +90,41 @@ export function ChainSelector({ currentChain, availableChains, onChainSelect, on
                                     ? "ALL NETWORKS"
                                     : filterType === "mainnet"
                                         ? "MAINNETS"
-                                        : "TESTNETS" }), _jsxs("div", { className: "wallet-modal-chain-list", children: [filteredChains.map((chain) => (_jsxs("button", { className: `wallet-modal-chain-item ${currentChain?.id === chain.id ? "active" : ""} ${isSwitching && switchingChainId === chain.id
-                                            ? "switching"
-                                            : ""}`, disabled: isSwitching, onClick: async (e) => {
-                                            e.stopPropagation();
-                                            if (isSwitching)
-                                                return;
-                                            try {
+                                        : "TESTNETS" }), _jsxs("div", { className: "wallet-modal-chain-list", children: [filteredChains.map((chain) => {
+                                        const label = chain.displayName || chain.name || `Chain ${chain.id}`;
+                                        return (_jsxs("button", { className: `wallet-modal-chain-item ${currentChain?.id === chain.id ? "active" : ""} ${isSwitching && switchingChainId === chain.id
+                                                ? "switching"
+                                                : ""}`, "aria-disabled": isSwitching, onClick: async (e) => {
+                                                e.stopPropagation();
+                                                console.log("Chain item clicked:", {
+                                                    chainId: chain.id,
+                                                    isSwitching,
+                                                });
+                                                if (isSwitching)
+                                                    return;
                                                 setIsSwitching(true);
                                                 setSwitchingChainId(chain.id);
-                                                await onChainSelect(chain.id);
-                                            }
-                                            catch (error) {
-                                                console.error("Chain switch error:", error);
-                                            }
-                                            finally {
-                                                setIsSwitching(false);
-                                                setSwitchingChainId(null);
-                                            }
-                                        }, children: [_jsxs("div", { className: "wallet-modal-chain-item-icon-wrapper", children: [chain.iconUrl ? (_jsx("img", { src: chain.iconUrl, alt: chain.displayName, className: "wallet-modal-chain-item-icon-img" })) : (_jsx("div", { className: "wallet-modal-chain-item-icon-placeholder", children: chain.displayName.charAt(0) })), currentChain?.id === chain.id && (_jsx("span", { className: "wallet-modal-chain-item-status" }))] }), _jsx("span", { className: "wallet-modal-chain-item-name", children: chain.displayName }), currentChain?.id === chain.id && (_jsx("div", { className: "wallet-modal-chain-item-checkmark", children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("polyline", { points: "20 6 9 17 4 12" }) }) }))] }, chain.id))), filteredChains.length === 0 && (_jsxs("div", { className: "wallet-modal-chain-no-results", children: ["No networks found for \"", searchQuery, "\""] }))] })] })] })] }));
+                                                // Defense-in-depth: guarantees the guard clears even if
+                                                // onChainSelect hangs forever (never resolves or rejects), instead
+                                                // of leaving every future click silently inert.
+                                                clearSafetyTimeout();
+                                                safetyTimeoutRef.current = setTimeout(() => {
+                                                    console.warn("Chain switch timed out - resetting switching state.");
+                                                    setIsSwitching(false);
+                                                    setSwitchingChainId(null);
+                                                }, SWITCH_SAFETY_TIMEOUT_MS);
+                                                try {
+                                                    await onChainSelect(chain.id);
+                                                }
+                                                catch (error) {
+                                                    console.error("Chain switch error:", error);
+                                                }
+                                                finally {
+                                                    clearSafetyTimeout();
+                                                    setIsSwitching(false);
+                                                    setSwitchingChainId(null);
+                                                }
+                                            }, children: [_jsxs("div", { className: "wallet-modal-chain-item-icon-wrapper", children: [chain.iconUrl ? (_jsx("img", { src: chain.iconUrl, alt: label, className: "wallet-modal-chain-item-icon-img" })) : (_jsx("div", { className: "wallet-modal-chain-item-icon-placeholder", children: label.charAt(0) })), currentChain?.id === chain.id && (_jsx("span", { className: "wallet-modal-chain-item-status" }))] }), _jsx("span", { className: "wallet-modal-chain-item-name", children: label }), currentChain?.id === chain.id && (_jsx("div", { className: "wallet-modal-chain-item-checkmark", children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("polyline", { points: "20 6 9 17 4 12" }) }) }))] }, chain.id));
+                                    }), filteredChains.length === 0 && (_jsx("div", { className: "wallet-modal-chain-no-results", children: emptyListMessage(filterType, searchQuery) }))] })] })] })] }));
 }
 //# sourceMappingURL=ChainSelector.js.map

package/dist/src/components/WalletModal/components/CodeInput.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Code Input Component
+ * A row of single-character digit boxes for entering a fixed-length numeric code
+ */
+export interface CodeInputProps {
+    length: number;
+    value: string;
+    onChange: (value: string) => void;
+    onComplete?: () => void;
+    disabled?: boolean;
+}
+export declare function CodeInput({ length, value, onChange, onComplete, disabled }: CodeInputProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/WalletModal/components/CodeInput.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function CodeInput({ length, value, onChange, onComplete, disabled }) {
+    const handleChange = (index, e) => {
+        const val = e.target.value.replace(/\D/g, "");
+        if (!val)
+            return;
+        const newCode = value.split("");
+        newCode[index] = val;
+        const combined = newCode.join("").slice(0, length);
+        onChange(combined);
+        if (combined.length === length) {
+            onComplete?.();
+        }
+        if (index < length - 1) {
+            const target = e.target;
+            const next = target.parentElement?.nextElementSibling?.querySelector("input");
+            next?.focus();
+        }
+    };
+    const handleKeyDown = (index, e) => {
+        if (e.key !== "Backspace")
+            return;
+        const target = e.target;
+        if (!value[index] && index > 0) {
+            const prev = target.parentElement?.previousElementSibling?.querySelector("input");
+            prev?.focus();
+            const newCode = value.split("");
+            newCode[index - 1] = "";
+            onChange(newCode.join(""));
+        }
+        else {
+            const newCode = value.split("");
+            newCode[index] = "";
+            onChange(newCode.join(""));
+        }
+    };
+    return (_jsx("div", { className: "mfa-otp-grid", children: Array.from({ length }, (_, index) => (_jsx("div", { className: "mfa-otp-slot", children: _jsx("input", { type: "text", inputMode: "numeric", maxLength: 1, value: value[index] || "", onChange: (e) => handleChange(index, e), onKeyDown: (e) => handleKeyDown(index, e), className: "mfa-otp-input", disabled: disabled }) }, index))) }));
+}
+//# sourceMappingURL=CodeInput.js.map

package/dist/src/components/WalletModal/components/ExportKeyModal.css.d.ts

@@ -0,0 +1,2 @@
+declare const cssText: string;
+export default cssText;

package/dist/src/components/WalletModal/components/ExportKeyModal.css.js

@@ -0,0 +1 @@
+export default "/* Export Key Modal Styles - extracted from WalletModal.css */\n.wallet-modal-export-key-body {\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n\n.wallet-modal-export-key-warning {\n  display: flex;\n  align-items: flex-start;\n  gap: 12px;\n  padding: 12px 14px;\n  border-radius: 12px;\n  border: 1px solid;\n}\n\n.wallet-modal-theme-light .wallet-modal-export-key-warning {\n  background: #f3f4f6;\n  border-color: #e5e7eb;\n}\n\n.wallet-modal-theme-dark .wallet-modal-export-key-warning {\n  background: #2a2a2a;\n  border-color: #3a3a3a;\n}\n\n.wallet-modal-export-key-warning-icon {\n  flex-shrink: 0;\n  margin-top: 2px;\n  color: #2563eb;\n}\n\n.wallet-modal-theme-dark .wallet-modal-export-key-warning-icon {\n  color: #60a5fa;\n}\n\n.wallet-modal-export-key-warning-text {\n  min-width: 0;\n}\n\n.wallet-modal-export-key-warning-title {\n  font-size: 13px;\n  font-weight: 700;\n  line-height: 1.35;\n}\n\n.wallet-modal-export-key-warning-subtitle {\n  margin-top: 2px;\n  font-size: 12px;\n  line-height: 1.35;\n  opacity: 0.85;\n}\n\n.wallet-modal-theme-light .wallet-modal-export-key-warning-title,\n.wallet-modal-theme-light .wallet-modal-export-key-warning-subtitle {\n  color: #111827;\n}\n\n.wallet-modal-theme-dark .wallet-modal-export-key-warning-title,\n.wallet-modal-theme-dark .wallet-modal-export-key-warning-subtitle {\n  color: #ffffff;\n}\n\n.wallet-modal-export-key-field {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 12px 14px;\n  border-radius: 12px;\n  border: 1px solid;\n  box-sizing: border-box;\n}\n\n.wallet-modal-theme-light .wallet-modal-export-key-field {\n  background: #ffffff;\n  border-color: #e5e7eb;\n}\n\n.wallet-modal-theme-dark .wallet-modal-export-key-field {\n  background: #2a2a2a;\n  border-color: #3a3a3a;\n}\n\n.wallet-modal-export-key-value {\n  flex: 1;\n  min-width: 0;\n  font-family: 'GeistMono', 'SF Mono', monospace;\n  font-size: 13px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.wallet-modal-theme-light .wallet-modal-export-key-value {\n  color: #111827;\n}\n\n.wallet-modal-theme-dark .wallet-modal-export-key-value {\n  color: #ffffff;\n}\n\n.wallet-modal-export-key-inline-copy {\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  padding: 6px;\n  border-radius: 8px;\n  transition: background 0.15s ease;\n  color: inherit;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.wallet-modal-theme-light .wallet-modal-export-key-inline-copy {\n  color: #6b7280;\n}\n\n.wallet-modal-theme-dark .wallet-modal-export-key-inline-copy {\n  color: #9ca3af;\n}\n\n.wallet-modal-theme-light .wallet-modal-export-key-inline-copy:hover {\n  background: rgba(17, 24, 39, 0.06);\n  color: #111827;\n}\n\n.wallet-modal-theme-dark .wallet-modal-export-key-inline-copy:hover {\n  background: rgba(255, 255, 255, 0.08);\n  color: #ffffff;\n}\n";

package/dist/src/components/WalletModal/components/ExportKeyModal.d.ts

@@ -2,8 +2,6 @@
  * Export Key Modal Component
  */
 import { type CSSProperties } from 'react';
-import './ExportKeyModal.css';
-import '../../../WalletModal.css';
 export interface ExportKeyModalProps {
     isOpen: boolean;
     onClose: () => void;

package/dist/src/components/WalletModal/components/ExportKeyModal.js

@@ -3,9 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Export Key Modal Component
  */
 import { useState, useCallback } from 'react';
-import './ExportKeyModal.css';
-import '../../../WalletModal.css';
-import { FiInfo } from '../../icons';
+import { FiInfo, CloseIcon } from '../../icons';
 export function ExportKeyModal({ isOpen, onClose, privateKey, theme = 'dark', style, }) {
     const [copied, setCopied] = useState(false);
     const handleCopy = useCallback(() => {
@@ -21,6 +19,6 @@ export function ExportKeyModal({ isOpen, onClose, privateKey, theme = 'dark', st
     }, [onClose]);
     if (!isOpen)
         return null;
-    return (_jsx("div", { className: `wallet-modal-overlay wallet-modal-theme-${theme}`, onClick: handleClose, style: style, children: _jsxs("div", { className: `wallet-modal-content wallet-modal-theme-${theme} wallet-modal-export-key`, onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { className: "wallet-modal-receive-header", children: [_jsx("button", { className: "wallet-modal-back", onClick: handleClose, children: _jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: _jsx("path", { d: "M12.5 15L7.5 10L12.5 5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }), _jsx("h2", { className: "wallet-modal-receive-title", children: "Export Private Key" }), _jsx("button", { className: "wallet-modal-close", onClick: handleClose, "aria-label": "Close", children: _jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M18 6L6 18M6 6L18 18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] }), _jsxs("div", { className: "wallet-modal-export-key-body", children: [_jsxs("div", { className: "wallet-modal-export-key-warning", role: "note", children: [_jsx("div", { className: "wallet-modal-export-key-warning-icon", "aria-hidden": "true", children: _jsx(FiInfo, { size: 18 }) }), _jsxs("div", { className: "wallet-modal-export-key-warning-text", children: [_jsx("div", { className: "wallet-modal-export-key-warning-title", children: "Don't share your private key with anyone." }), _jsx("div", { className: "wallet-modal-export-key-warning-subtitle", children: "This private key grants full access to your wallet and all held assets." })] })] }), _jsxs("div", { className: "wallet-modal-export-key-field", children: [_jsx("div", { className: "wallet-modal-export-key-value", title: privateKey, children: privateKey }), _jsx("button", { className: "wallet-modal-export-key-inline-copy", onClick: handleCopy, type: "button", "aria-label": "Copy private key", children: _jsxs("svg", { width: "18", height: "18", viewBox: "0 0 16 16", fill: "none", children: [_jsx("path", { d: "M5.5 3.5H3.5C2.67157 3.5 2 4.17157 2 5V12.5C2 13.3284 2.67157 14 3.5 14H11C11.8284 14 12.5 13.3284 12.5 12.5V10.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M5.5 3.5C5.5 2.67157 6.17157 2 7 2H12.5C13.3284 2 14 2.67157 14 3.5V9C14 9.82843 13.3284 10.5 12.5 10.5H7C6.17157 10.5 5.5 9.82843 5.5 9V3.5Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }) })] }), _jsx("button", { className: "wallet-modal-primary-btn", onClick: handleCopy, type: "button", children: copied ? "Copied" : "Copy" })] })] }) }));
+    return (_jsx("div", { className: `wallet-modal-overlay wallet-modal-theme-${theme}`, onClick: handleClose, style: style, children: _jsxs("div", { className: `wallet-modal-content wallet-modal-theme-${theme} wallet-modal-export-key`, onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { className: "wallet-modal-receive-header", children: [_jsx("button", { className: "wallet-modal-back", onClick: handleClose, children: _jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: _jsx("path", { d: "M12.5 15L7.5 10L12.5 5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }), _jsx("h2", { className: "wallet-modal-receive-title", children: "Export Private Key" }), _jsx("button", { className: "wallet-modal-close", onClick: handleClose, "aria-label": "Close", children: _jsx(CloseIcon, { size: 24 }) })] }), _jsxs("div", { className: "wallet-modal-export-key-body", children: [_jsxs("div", { className: "wallet-modal-export-key-warning", role: "note", children: [_jsx("div", { className: "wallet-modal-export-key-warning-icon", "aria-hidden": "true", children: _jsx(FiInfo, { size: 18 }) }), _jsxs("div", { className: "wallet-modal-export-key-warning-text", children: [_jsx("div", { className: "wallet-modal-export-key-warning-title", children: "Don't share your private key with anyone." }), _jsx("div", { className: "wallet-modal-export-key-warning-subtitle", children: "This private key grants full access to your wallet and all held assets." })] })] }), _jsxs("div", { className: "wallet-modal-export-key-field", children: [_jsx("div", { className: "wallet-modal-export-key-value", title: privateKey, children: privateKey }), _jsx("button", { className: "wallet-modal-export-key-inline-copy", onClick: handleCopy, type: "button", "aria-label": "Copy private key", children: _jsxs("svg", { width: "18", height: "18", viewBox: "0 0 16 16", fill: "none", children: [_jsx("path", { d: "M5.5 3.5H3.5C2.67157 3.5 2 4.17157 2 5V12.5C2 13.3284 2.67157 14 3.5 14H11C11.8284 14 12.5 13.3284 12.5 12.5V10.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M5.5 3.5C5.5 2.67157 6.17157 2 7 2H12.5C13.3284 2 14 2.67157 14 3.5V9C14 9.82843 13.3284 10.5 12.5 10.5H7C6.17157 10.5 5.5 9.82843 5.5 9V3.5Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }) })] }), _jsx("button", { className: "wallet-modal-primary-btn", onClick: handleCopy, type: "button", children: copied ? "Copied" : "Copy" })] })] }) }));
 }
 //# sourceMappingURL=ExportKeyModal.js.map

package/dist/src/components/WalletModal/components/ExportWarningModal.css.d.ts

@@ -0,0 +1,2 @@
+declare const cssText: string;
+export default cssText;

package/dist/src/components/WalletModal/components/ExportWarningModal.css.js

@@ -0,0 +1 @@
+export default "/* Export Private Key (warning) - compact layout to match provided screenshot */\n\n.wallet-modal-content.wallet-modal-export-warning {\n  padding: 20px;\n  gap: 0;\n}\n\n.wallet-modal-export-warning-divider {\n  width: 100%;\n  height: 1px;\n  background: rgba(17, 24, 39, 0.08);\n  margin: 4px 0 14px;\n}\n\n.wallet-modal-theme-dark .wallet-modal-export-warning-divider {\n  background: rgba(255, 255, 255, 0.12);\n}\n\n.wallet-modal-export-warning-simple {\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 14px;\n  padding: 6px 0 0;\n}\n\n.wallet-modal-export-warning-key-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #7c3aed;\n  transform: rotate(-20deg);\n}\n\n.wallet-modal-export-warning-simple-text {\n  margin: 0;\n  font-size: 14px;\n  font-weight: 600;\n  text-align: center;\n  line-height: 1.4;\n  max-width: 360px;\n}\n\n.wallet-modal-theme-light .wallet-modal-export-warning-simple-text {\n  color: #111827;\n}\n\n.wallet-modal-theme-dark .wallet-modal-export-warning-simple-text {\n  color: #ffffff;\n}\n\n.wallet-modal-export-warning-simple-checkbox {\n  width: 100%;\n  display: flex;\n  align-items: flex-start;\n  gap: 10px;\n  padding: 0;\n  margin-top: 2px;\n  cursor: pointer;\n  user-select: none;\n}\n\n.wallet-modal-export-warning-simple-checkbox-input {\n  width: 18px;\n  height: 18px;\n  margin-top: 2px;\n  flex-shrink: 0;\n  cursor: pointer;\n  accent-color: #7c3aed;\n}\n\n.wallet-modal-export-warning-simple-checkbox span {\n  font-size: 12px;\n  line-height: 1.4;\n}\n\n.wallet-modal-theme-light .wallet-modal-export-warning-simple-checkbox span {\n  color: #111827;\n}\n\n.wallet-modal-theme-dark .wallet-modal-export-warning-simple-checkbox span {\n  color: #ffffff;\n}\n\n.wallet-modal-export-warning-continue {\n  width: 100%;\n  padding: 12px 18px;\n  border-radius: 10px;\n  border: none;\n  font-size: 14px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  background: var(--abstraxn-primary);\n  color: var(--abstraxn-primary-text);\n}\n\n.wallet-modal-export-warning-continue:hover:not(.disabled) {\n  background: var(--abstraxn-primary-hover);\n}\n\n.wallet-modal-export-warning-continue.disabled,\n.wallet-modal-export-warning-continue:disabled {\n  opacity: 0.55;\n  cursor: not-allowed;\n}\n";

package/dist/src/components/WalletModal/components/ExportWarningModal.d.ts

@@ -3,8 +3,6 @@
  */
 import { type CSSProperties } from 'react';
 import type { ChainData } from '../../../chains';
-import '../../../WalletModal.css';
-import './ExportWarningModal.css';
 export interface ExportWarningModalProps {
     isOpen: boolean;
     onClose: () => void;

package/dist/src/components/WalletModal/components/ExportWarningModal.js

@@ -3,9 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Export Warning Modal Component
  */
 import { useState } from 'react';
-import '../../../WalletModal.css';
-import './ExportWarningModal.css';
-import { IoKeyOutline } from '../../icons';
+import { IoKeyOutline, CloseIcon } from '../../icons';
 export function ExportWarningModal({ isOpen, onClose, onAcknowledge, currentChain: _currentChain, isExporting, theme = 'dark', style, }) {
     const [acknowledged, setAcknowledged] = useState(false);
     const handleReveal = () => {
@@ -15,6 +13,6 @@ export function ExportWarningModal({ isOpen, onClose, onAcknowledge, currentChai
     };
     if (!isOpen)
         return null;
-    return (_jsx("div", { className: `wallet-modal-overlay wallet-modal-theme-${theme}`, onClick: onClose, style: style, children: _jsxs("div", { className: `wallet-modal-content wallet-modal-theme-${theme} wallet-modal-export-warning`, onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { className: "wallet-modal-receive-header", children: [_jsx("button", { className: "wallet-modal-back", onClick: onClose, disabled: isExporting, children: _jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: _jsx("path", { d: "M12.5 15L7.5 10L12.5 5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }), _jsx("h2", { className: "wallet-modal-receive-title", children: "Export Private Key" }), _jsx("button", { className: "wallet-modal-close", onClick: onClose, "aria-label": "Close", disabled: isExporting, children: _jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M18 6L6 18M6 6L18 18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] }), _jsx("div", { className: "wallet-modal-export-warning-divider" }), _jsxs("div", { className: "wallet-modal-export-warning-simple", children: [_jsx("div", { className: "wallet-modal-export-warning-key-icon", "aria-hidden": "true", children: _jsx(IoKeyOutline, { size: 56 }) }), _jsx("p", { className: "wallet-modal-export-warning-simple-text", children: "Reveal your private key to manage this wallet in a different app." }), _jsxs("label", { className: "wallet-modal-export-warning-simple-checkbox", children: [_jsx("input", { type: "checkbox", checked: acknowledged, onChange: (e) => setAcknowledged(e.target.checked), className: "wallet-modal-export-warning-simple-checkbox-input" }), _jsx("span", { children: "I understand the risks of owning my private key and am fully responsible for keeping it secure." })] }), _jsx("button", { className: `wallet-modal-export-warning-continue ${!acknowledged || isExporting ? 'disabled' : ''}`, onClick: handleReveal, disabled: !acknowledged || isExporting, children: isExporting ? 'Loading...' : 'Continue' })] })] }) }));
+    return (_jsx("div", { className: `wallet-modal-overlay wallet-modal-theme-${theme}`, onClick: onClose, style: style, children: _jsxs("div", { className: `wallet-modal-content wallet-modal-theme-${theme} wallet-modal-export-warning`, onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { className: "wallet-modal-receive-header", children: [_jsx("button", { className: "wallet-modal-back", onClick: onClose, disabled: isExporting, children: _jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: _jsx("path", { d: "M12.5 15L7.5 10L12.5 5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }), _jsx("h2", { className: "wallet-modal-receive-title", children: "Export Private Key" }), _jsx("button", { className: "wallet-modal-close", onClick: onClose, "aria-label": "Close", disabled: isExporting, children: _jsx(CloseIcon, { size: 24 }) })] }), _jsx("div", { className: "wallet-modal-export-warning-divider" }), _jsxs("div", { className: "wallet-modal-export-warning-simple", children: [_jsx("div", { className: "wallet-modal-export-warning-key-icon", "aria-hidden": "true", children: _jsx(IoKeyOutline, { size: 56 }) }), _jsx("p", { className: "wallet-modal-export-warning-simple-text", children: "Reveal your private key to manage this wallet in a different app." }), _jsxs("label", { className: "wallet-modal-export-warning-simple-checkbox", children: [_jsx("input", { type: "checkbox", checked: acknowledged, onChange: (e) => setAcknowledged(e.target.checked), className: "wallet-modal-export-warning-simple-checkbox-input" }), _jsx("span", { children: "I understand the risks of owning my private key and am fully responsible for keeping it secure." })] }), _jsx("button", { className: `wallet-modal-export-warning-continue ${!acknowledged || isExporting ? 'disabled' : ''}`, onClick: handleReveal, disabled: !acknowledged || isExporting, children: isExporting ? 'Loading...' : 'Continue' })] })] }) }));
 }
 //# sourceMappingURL=ExportWarningModal.js.map

package/dist/src/components/WalletModal/components/ManageWalletModal.css

@@ -683,10 +683,13 @@
 
 .wallet-modal-linked-profiles-loading,
 .wallet-modal-linked-profiles-error,
+.wallet-modal-linked-profiles-success,
 .wallet-modal-linked-profiles-empty {
-  padding: 20px 0;
+  padding: 12px 0 16px;
   font-size: 14px;
   text-align: center;
+  line-height: 1.4;
+  word-break: break-word;
 }
 
 .wallet-modal-theme-dark .wallet-modal-linked-profiles-loading,
@@ -707,6 +710,14 @@
   color: #dc2626;
 }
 
+.wallet-modal-theme-dark .wallet-modal-linked-profiles-success {
+  color: #4ade80;
+}
+
+.wallet-modal-theme-light .wallet-modal-linked-profiles-success {
+  color: #16a34a;
+}
+
 /* Second-layer overlay (separate modals on top of manage modal) */
 .wallet-modal-overlay-layer2 {
   z-index: 110000 !important;
@@ -814,6 +825,21 @@
   color: #6b7280;
 }
 
+.wallet-modal-auth-error-message {
+  margin: 0 0 20px;
+  font-size: 14px;
+  line-height: 1.45;
+  word-break: break-word;
+}
+
+.wallet-modal-theme-dark .wallet-modal-auth-error-message {
+  color: rgba(255, 255, 255, 0.75);
+}
+
+.wallet-modal-theme-light .wallet-modal-auth-error-message {
+  color: #4b5563;
+}
+
 .wallet-modal-unlink-confirm-details {
   padding: 12px 16px;
   border-radius: 10px;

package/dist/src/components/WalletModal/components/ManageWalletModal.css.d.ts

@@ -0,0 +1,2 @@
+declare const cssText: string;
+export default cssText;

package/dist/src/components/WalletModal/components/ManageWalletModal.css.js

@@ -0,0 +1 @@
+export default "/* Manage Wallet Modal Styles - extracted from WalletModal.css */\n.wallet-modal-manage {\n  position: relative;\n}\n\n.wallet-modal-manage-content {\n  padding: 12px 0 20px;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n\n.wallet-modal-manage-list {\n  display: flex;\n  flex-direction: column;\n  padding: 0 20px;\n}\n\n.wallet-modal-manage-list-item {\n  width: 100%;\n  padding: 16px 0;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  text-align: left;\n  /* Calmer, SDK-style hover/press */\n  transition: color 0.18s ease-out, transform 0.12s ease-out;\n}\n\n.wallet-modal-theme-dark .wallet-modal-manage-list-item {\n  color: #ffffff;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.08);\n}\n\n.wallet-modal-theme-light .wallet-modal-manage-list-item {\n  color: #111827;\n  border-bottom: 1px solid rgba(17, 24, 39, 0.08);\n}\n\n.wallet-modal-theme-dark .wallet-modal-manage-list-item:hover {\n  color: #e5e7eb;\n}\n\n.wallet-modal-theme-light .wallet-modal-manage-list-item:hover {\n  color: #374151;\n}\n\n.wallet-modal-manage-list-item:active {\n  /* Subtle press instead of shrink/bounce */\n  transform: translateY(1px);\n}\n\n.wallet-modal-manage-list-icon {\n  width: 20px;\n  height: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  opacity: 0.85;\n}\n\n.wallet-modal-provider-icon {\n  color: currentColor;\n}\n\n.wallet-modal-provider-icon-google {\n  color: inherit;\n}\n\n.wallet-modal-provider-icon-discord {\n  color: #5865f2;\n}\n\n.wallet-modal-provider-icon-x {\n  color: inherit;\n}\n\n.wallet-modal-theme-dark .wallet-modal-provider-icon-x {\n  color: #ffffff;\n}\n\n.wallet-modal-theme-light .wallet-modal-provider-icon-x {\n  color: #111111;\n}\n\n.wallet-modal-theme-dark .wallet-modal-provider-icon-email,\n.wallet-modal-theme-dark .wallet-modal-provider-icon-passkey {\n  color: rgba(255, 255, 255, 0.92);\n}\n\n.wallet-modal-theme-light .wallet-modal-provider-icon-email,\n.wallet-modal-theme-light .wallet-modal-provider-icon-passkey {\n  color: #111827;\n}\n\n.wallet-modal-manage-list-label {\n  flex: 1;\n  font-size: 14px;\n  font-weight: 500;\n}\n\n.wallet-modal-mfa-badge {\n  display: inline-flex;\n  align-items: center;\n  padding: 4px 10px;\n  margin-right: 4px;\n  border-radius: 9999px;\n  font-size: 12px;\n  font-weight: 600;\n  flex-shrink: 0;\n}\n\n.wallet-modal-mfa-badge-enabled {\n  background-color: #dcfce7;\n  color: #166534;\n}\n\n.wallet-modal-theme-dark .wallet-modal-mfa-badge-enabled {\n  background-color: rgba(34, 197, 94, 0.2);\n  color: #86efac;\n}\n\n.wallet-modal-mfa-badge-disabled {\n  background-color: #fee2e2;\n  color: #991b1b;\n}\n\n.wallet-modal-theme-dark .wallet-modal-mfa-badge-disabled {\n  background-color: rgba(239, 68, 68, 0.2);\n  color: #fca5a5;\n}\n\n.wallet-modal-manage-list-arrow {\n  flex-shrink: 0;\n  opacity: 0.5;\n}\n\n.wallet-modal-mfa-disable-trigger {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 22px;\n  height: 22px;\n  margin-right: 8px;\n  border-radius: 999px;\n  color: #ef4444;\n  opacity: 0.95;\n  cursor: pointer;\n  transition: transform 0.15s ease, opacity 0.15s ease, background-color 0.15s ease;\n}\n\n.wallet-modal-mfa-disable-trigger:hover {\n  opacity: 1;\n  transform: scale(1.05);\n}\n\n.wallet-modal-theme-dark .wallet-modal-mfa-disable-trigger:hover {\n  background-color: rgba(239, 68, 68, 0.16);\n}\n\n.wallet-modal-theme-light .wallet-modal-mfa-disable-trigger:hover {\n  background-color: rgba(239, 68, 68, 0.12);\n}\n\n.wallet-modal-manage-toast {\n  position: absolute;\n  left: 50%;\n  bottom: 18px;\n  transform: translateX(-50%);\n  padding: 10px 14px;\n  border-radius: 10px;\n  font-size: 13px;\n  font-weight: 500;\n  pointer-events: none;\n  z-index: 2;\n}\n\n.wallet-modal-theme-dark .wallet-modal-manage-toast {\n  background: rgba(42, 42, 42, 0.95);\n  border: 1px solid rgba(255, 255, 255, 0.12);\n  color: #ffffff;\n}\n\n.wallet-modal-theme-light .wallet-modal-manage-toast {\n  background: rgba(249, 250, 251, 0.98);\n  border: 1px solid rgba(17, 24, 39, 0.12);\n  color: #111827;\n}\n\n.wallet-modal-manage-section {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n\n.wallet-modal-manage-section-title {\n  font-size: 16px;\n  font-weight: 500;\n  margin: 0;\n}\n\n.wallet-modal-theme-dark .wallet-modal-manage-section-title {\n  color: #ffffff;\n}\n\n.wallet-modal-theme-light .wallet-modal-manage-section-title {\n  color: #111827;\n}\n\n.wallet-modal-manage-item {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.wallet-modal-manage-label {\n  font-size: 12px;\n  opacity: 0.7;\n}\n\n.wallet-modal-theme-dark .wallet-modal-manage-label {\n  color: #9ca3af;\n}\n\n.wallet-modal-theme-light .wallet-modal-manage-label {\n  color: #6b7280;\n}\n\n.wallet-modal-manage-value {\n  font-size: 14px;\n  font-weight: 500;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.wallet-modal-theme-dark .wallet-modal-manage-value {\n  color: #ffffff;\n}\n\n.wallet-modal-theme-light .wallet-modal-manage-value {\n  color: #111827;\n}\n\n.wallet-modal-manage-address-text {\n  font-family: 'GeistMono', 'SF Mono', monospace;\n  flex: 1;\n  min-width: 0;\n}\n\n.wallet-modal-manage-copy-btn {\n  padding: 6px 12px;\n  border-radius: 6px;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  transition: all 0.2s;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  flex-shrink: 0;\n}\n\n.wallet-modal-theme-dark .wallet-modal-manage-copy-btn {\n  color: #9ca3af;\n}\n\n.wallet-modal-theme-light .wallet-modal-manage-copy-btn {\n  color: #6b7280;\n}\n\n.wallet-modal-theme-dark .wallet-modal-manage-copy-btn:hover {\n  background: #2a2a2a;\n  color: #ffffff;\n}\n\n.wallet-modal-theme-light .wallet-modal-manage-copy-btn:hover {\n  background: #f3f4f6;\n  color: #111827;\n}\n\n.wallet-modal-manage-copy-btn.copied {\n  color: #10b981;\n}\n\n.wallet-modal-manage-action-item {\n  width: 100%;\n  padding: 14px 16px;\n  border-radius: 10px;\n  border: 1px solid;\n  background: transparent;\n  cursor: pointer;\n  transition: all 0.2s;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  text-align: left;\n}\n\n.wallet-modal-theme-dark .wallet-modal-manage-action-item {\n  border-color: #3a3a3a;\n  background: #2a2a2a;\n  color: #ffffff;\n}\n\n.wallet-modal-theme-light .wallet-modal-manage-action-item {\n  border-color: #e5e7eb;\n  background: #f9fafb;\n  color: #111827;\n}\n\n.wallet-modal-theme-dark .wallet-modal-manage-action-item:hover {\n  background: #3a3a3a;\n  border-color: #4a4a4a;\n}\n\n.wallet-modal-theme-light .wallet-modal-manage-action-item:hover {\n  background: #f3f4f6;\n  border-color: #d1d5db;\n}\n\n.wallet-modal-manage-action-icon {\n  width: 20px;\n  height: 20px;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.wallet-modal-manage-action-label {\n  flex: 1;\n  font-size: 14px;\n  font-weight: 500;\n}\n\n.wallet-modal-manage-action-arrow {\n  flex-shrink: 0;\n  opacity: 0.5;\n}\n\n/* Linked Profiles sub-view */\n.wallet-modal-linked-profiles-list {\n  display: flex;\n  flex-direction: column;\n  padding: 0 20px;\n  gap: 0;\n}\n\n.wallet-modal-linked-profiles-row {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px 0;\n  border-bottom: 1px solid;\n  min-height: 52px;\n}\n\n.wallet-modal-theme-dark .wallet-modal-linked-profiles-row {\n  color: #ffffff;\n  border-bottom-color: rgba(255, 255, 255, 0.08);\n}\n\n.wallet-modal-theme-light .wallet-modal-linked-profiles-row {\n  color: #111827;\n  border-bottom-color: rgba(17, 24, 39, 0.08);\n}\n\n.wallet-modal-linked-profiles-row:last-child {\n  border-bottom: none;\n}\n\n.wallet-modal-linked-profiles-action {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.wallet-modal-linked-connect,\n.wallet-modal-linked-disconnect {\n  padding: 6px 12px;\n  border-radius: 8px;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  font-size: 13px;\n  font-weight: 500;\n  /* Consistent, minimal interaction motion */\n  transition: color 0.18s ease-out, transform 0.12s ease-out;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n}\n\n.wallet-modal-linked-disconnect {\n  padding: 8px;\n}\n\n.wallet-modal-linked-connect:disabled,\n.wallet-modal-linked-disconnect:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.wallet-modal-theme-dark .wallet-modal-linked-connect {\n  color: rgba(255, 255, 255, 0.9);\n}\n\n.wallet-modal-theme-dark .wallet-modal-linked-connect:hover:not(:disabled) {\n  color: #22c55e;\n}\n\n.wallet-modal-theme-dark .wallet-modal-linked-connect:active:not(:disabled) {\n  transform: translateY(1px);\n}\n\n.wallet-modal-theme-light .wallet-modal-linked-connect {\n  color: #374151;\n}\n\n.wallet-modal-theme-light .wallet-modal-linked-connect:hover:not(:disabled) {\n  color: #16a34a;\n}\n\n.wallet-modal-theme-light .wallet-modal-linked-connect:active:not(:disabled) {\n  transform: translateY(1px);\n}\n\n.wallet-modal-theme-dark .wallet-modal-linked-disconnect {\n  color: #9ca3af;\n}\n\n.wallet-modal-theme-dark .wallet-modal-linked-disconnect:hover:not(:disabled) {\n  color: #ef4444;\n}\n\n.wallet-modal-theme-dark .wallet-modal-linked-disconnect:active:not(:disabled) {\n  transform: translateY(1px);\n}\n\n.wallet-modal-theme-light .wallet-modal-linked-disconnect {\n  color: #6b7280;\n}\n\n.wallet-modal-theme-light .wallet-modal-linked-disconnect:hover:not(:disabled) {\n  color: #dc2626;\n}\n\n.wallet-modal-theme-light .wallet-modal-linked-disconnect:active:not(:disabled) {\n  transform: translateY(1px);\n}\n\n.wallet-modal-email-link-flow {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  padding: 16px 20px 20px;\n  min-width: 0;\n}\n\n.wallet-modal-email-link-form,\n.wallet-modal-email-link-otp {\n  width: 100%;\n  max-width: 360px;\n  margin: 0 auto;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.wallet-modal-email-link-icon {\n  width: 52px;\n  height: 52px;\n  border-radius: 999px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin: 0 auto 8px;\n}\n\n.wallet-modal-theme-dark .wallet-modal-email-link-icon {\n  background: rgba(148, 163, 184, 0.16);\n  color: #e5e7eb;\n}\n\n.wallet-modal-theme-light .wallet-modal-email-link-icon {\n  background: rgba(129, 140, 248, 0.16);\n  color: #4b5563;\n}\n\n.wallet-modal-email-link-title {\n  font-size: 18px;\n  font-weight: 600;\n  text-align: center;\n  margin: 4px 0;\n}\n\n.wallet-modal-theme-dark .wallet-modal-email-link-title {\n  color: #ffffff;\n}\n\n.wallet-modal-theme-light .wallet-modal-email-link-title {\n  color: #111827;\n}\n\n.wallet-modal-email-link-subtitle {\n  font-size: 13px;\n  text-align: center;\n  margin: 0 0 12px;\n}\n\n.wallet-modal-theme-dark .wallet-modal-email-link-subtitle {\n  color: #9ca3af;\n}\n\n.wallet-modal-theme-light .wallet-modal-email-link-subtitle {\n  color: #6b7280;\n}\n\n.wallet-modal-email-link-label {\n  font-size: 13px;\n  font-weight: 500;\n  margin-bottom: 4px;\n}\n\n.wallet-modal-theme-dark .wallet-modal-email-link-label {\n  color: #e5e7eb;\n}\n\n.wallet-modal-theme-light .wallet-modal-email-link-label {\n  color: #374151;\n}\n\n.wallet-modal-email-link-input {\n  width: 100%;\n  border-radius: 10px;\n  border: 1.5px solid;\n  padding: 10px 12px;\n  font-size: 14px;\n  outline: none;\n  background: transparent;\n  box-sizing: border-box;\n}\n\n.wallet-modal-theme-dark .wallet-modal-email-link-input {\n  border-color: #4b5563;\n  background: #111827;\n  color: #f9fafb;\n}\n\n.wallet-modal-theme-light .wallet-modal-email-link-input {\n  border-color: #e5e7eb;\n  background: #ffffff;\n  color: #111827;\n}\n\n.wallet-modal-email-link-input:focus {\n  border-color: var(--abstraxn-primary, #3b82f6);\n  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);\n}\n\n.wallet-modal-email-link-error {\n  margin: 4px 0 0;\n  font-size: 12px;\n  color: #ef4444;\n  text-align: left;\n}\n\n.wallet-modal-email-link-button {\n  margin-top: 8px;\n  width: 100%;\n  padding: 12px 16px;\n  border-radius: 999px;\n  border: none;\n  font-size: 14px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.18s ease-out;\n  background: var(--abstraxn-primary);\n  color: var(--abstraxn-primary-text);\n}\n\n.wallet-modal-email-link-button:hover:not(:disabled) {\n  transform: translateY(-1px);\n  filter: brightness(1.02);\n}\n\n.wallet-modal-email-link-button:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.wallet-modal-email-link-otp {\n  position: relative;\n}\n\n.wallet-modal-email-link-otp-back {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 32px;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 999px;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  transition: background 0.15s ease-out, transform 0.1s ease-out;\n}\n\n.wallet-modal-theme-dark .wallet-modal-email-link-otp-back {\n  color: #9ca3af;\n}\n\n.wallet-modal-theme-light .wallet-modal-email-link-otp-back {\n  color: #6b7280;\n}\n\n.wallet-modal-email-link-otp-back:hover:not(:disabled) {\n  transform: translateY(-1px);\n}\n\n.wallet-modal-email-link-email {\n  font-size: 14px;\n  font-weight: 600;\n  text-align: center;\n  margin: 0 0 16px;\n}\n\n.wallet-modal-theme-dark .wallet-modal-email-link-email {\n  color: #ffffff;\n}\n\n.wallet-modal-theme-light .wallet-modal-email-link-email {\n  color: #111827;\n}\n\n.wallet-modal-email-link-resend {\n  margin-top: 12px;\n  font-size: 12px;\n  text-align: center;\n}\n\n.wallet-modal-theme-dark .wallet-modal-email-link-resend {\n  color: #9ca3af;\n}\n\n.wallet-modal-theme-light .wallet-modal-email-link-resend {\n  color: #6b7280;\n}\n\n.wallet-modal-email-link-resend-cooldown {\n  font-weight: 500;\n}\n\n.wallet-modal-email-link-resend-button {\n  border: none;\n  background: transparent;\n  padding: 0;\n  margin: 0;\n  font-size: 12px;\n  font-weight: 500;\n  text-decoration: underline;\n  cursor: pointer;\n}\n\n.wallet-modal-theme-dark .wallet-modal-email-link-resend-button {\n  color: #e5e7eb;\n}\n\n.wallet-modal-theme-light .wallet-modal-email-link-resend-button {\n  color: #4b21a8;\n}\n\n.wallet-modal-linked-profiles-loading,\n.wallet-modal-linked-profiles-error,\n.wallet-modal-linked-profiles-success,\n.wallet-modal-linked-profiles-empty {\n  padding: 12px 0 16px;\n  font-size: 14px;\n  text-align: center;\n  line-height: 1.4;\n  word-break: break-word;\n}\n\n.wallet-modal-theme-dark .wallet-modal-linked-profiles-loading,\n.wallet-modal-theme-dark .wallet-modal-linked-profiles-empty {\n  color: rgba(255, 255, 255, 0.7);\n}\n\n.wallet-modal-theme-light .wallet-modal-linked-profiles-loading,\n.wallet-modal-theme-light .wallet-modal-linked-profiles-empty {\n  color: #6b7280;\n}\n\n.wallet-modal-theme-dark .wallet-modal-linked-profiles-error {\n  color: #f87171;\n}\n\n.wallet-modal-theme-light .wallet-modal-linked-profiles-error {\n  color: #dc2626;\n}\n\n.wallet-modal-theme-dark .wallet-modal-linked-profiles-success {\n  color: #4ade80;\n}\n\n.wallet-modal-theme-light .wallet-modal-linked-profiles-success {\n  color: #16a34a;\n}\n\n/* Second-layer overlay (separate modals on top of manage modal) */\n.wallet-modal-overlay-layer2 {\n  z-index: 110000 !important;\n  position: fixed;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 20px;\n  background: rgba(0, 0, 0, 0.4);\n  border-radius: 0;\n  transform: none !important;\n  -webkit-transform: none !important;\n}\n\n.wallet-modal-overlay-layer2 .wallet-modal-content {\n  position: relative;\n  z-index: 110001;\n  /* Reuse core modal motion for nested dialogs */\n  animation: slideUp 0.18s ease-out;\n}\n\n/* Unlink confirmation modal - standalone */\n.wallet-modal-unlink-confirm-modal {\n  position: relative;\n  max-width: 360px;\n  width: 100%;\n  padding: 24px 20px 20px;\n  padding-top: 48px;\n  text-align: center;\n  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);\n}\n\n.wallet-modal-unlink-confirm-close {\n  position: absolute;\n  top: 16px;\n  right: 16px;\n  padding: 6px;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  border-radius: 8px;\n  color: inherit;\n  opacity: 0.7;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: opacity 0.15s ease;\n}\n\n.wallet-modal-unlink-confirm-close:hover {\n  opacity: 1;\n}\n\n.wallet-modal-theme-dark .wallet-modal-unlink-confirm-close {\n  color: #e5e7eb;\n}\n\n.wallet-modal-theme-light .wallet-modal-unlink-confirm-close {\n  color: #374151;\n}\n\n/* Unlink confirmation content (shared with inline, keep for modal body) */\n.wallet-modal-unlink-confirm {\n  max-width: 400px;\n  padding: 24px 20px 20px;\n  text-align: center;\n}\n\n.wallet-modal-unlink-confirm-icon {\n  width: 48px;\n  height: 48px;\n  margin: 0 auto 16px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #ef4444;\n}\n\n.wallet-modal-unlink-confirm-title {\n  font-size: 18px;\n  font-weight: 600;\n  margin: 0 0 6px;\n}\n\n.wallet-modal-theme-dark .wallet-modal-unlink-confirm-title {\n  color: #ffffff;\n}\n\n.wallet-modal-theme-light .wallet-modal-unlink-confirm-title {\n  color: #111827;\n}\n\n.wallet-modal-unlink-confirm-subtitle {\n  font-size: 14px;\n  margin: 0 0 20px;\n  opacity: 0.8;\n}\n\n.wallet-modal-theme-dark .wallet-modal-unlink-confirm-subtitle {\n  color: #9ca3af;\n}\n\n.wallet-modal-theme-light .wallet-modal-unlink-confirm-subtitle {\n  color: #6b7280;\n}\n\n.wallet-modal-auth-error-message {\n  margin: 0 0 20px;\n  font-size: 14px;\n  line-height: 1.45;\n  word-break: break-word;\n}\n\n.wallet-modal-theme-dark .wallet-modal-auth-error-message {\n  color: rgba(255, 255, 255, 0.75);\n}\n\n.wallet-modal-theme-light .wallet-modal-auth-error-message {\n  color: #4b5563;\n}\n\n.wallet-modal-unlink-confirm-details {\n  padding: 12px 16px;\n  border-radius: 10px;\n  margin-bottom: 20px;\n  text-align: left;\n  font-size: 13px;\n}\n\n.wallet-modal-theme-dark .wallet-modal-unlink-confirm-details {\n  background: rgba(255, 255, 255, 0.06);\n  border: 1px solid rgba(255, 255, 255, 0.1);\n  color: #e5e7eb;\n}\n\n.wallet-modal-theme-light .wallet-modal-unlink-confirm-details {\n  background: rgba(17, 24, 39, 0.04);\n  border: 1px solid rgba(17, 24, 39, 0.08);\n  color: #374151;\n}\n\n.wallet-modal-unlink-confirm-details-line {\n  margin: 0;\n  line-height: 1.5;\n}\n\n.wallet-modal-unlink-confirm-btn {\n  width: 100%;\n  padding: 12px 24px;\n  border-radius: 10px;\n  border: none;\n  font-size: 14px;\n  font-weight: 600;\n  cursor: pointer;\n  background: #ef4444;\n  color: #ffffff;\n  transition: background 0.2s, transform 0.1s;\n}\n\n.wallet-modal-unlink-confirm-btn:hover:not(:disabled) {\n  background: #dc2626;\n}\n\n.wallet-modal-unlink-confirm-btn:active:not(:disabled) {\n  transform: scale(0.98);\n}\n\n.wallet-modal-unlink-confirm-btn:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.wallet-modal-unlink-confirm-footer {\n  margin-top: 20px;\n  font-size: 12px;\n  opacity: 0.7;\n}\n\n.wallet-modal-theme-dark .wallet-modal-unlink-confirm-footer {\n  color: #9ca3af;\n}\n\n.wallet-modal-theme-light .wallet-modal-unlink-confirm-footer {\n  color: #6b7280;\n}\n\n/* MFA disable confirm modal: two buttons in a row */\n.wallet-modal-mfa-disable-actions {\n  display: flex;\n  flex-direction: row;\n  gap: 12px;\n  justify-content: center;\n  margin-top: 20px;\n}\n\n.wallet-modal-mfa-disable-actions .wallet-modal-unlink-confirm-btn {\n  flex: 1;\n  min-width: 0;\n}\n\n.wallet-modal-mfa-disable-cancel {\n  background: #374151 !important;\n}\n\n.wallet-modal-mfa-disable-cancel:hover:not(:disabled) {\n  background: #4b5563 !important;\n}\n\n/* Success popup modal - standalone */\n.wallet-modal-success-popup-modal {\n  position: relative;\n  max-width: 340px;\n  width: 100%;\n  padding: 32px 24px 24px;\n  padding-top: 48px;\n  text-align: center;\n  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);\n}\n\n.wallet-modal-success-popup-close {\n  position: absolute;\n  top: 16px;\n  right: 16px;\n  padding: 6px;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  border-radius: 8px;\n  color: inherit;\n  opacity: 0.7;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: opacity 0.15s ease;\n}\n\n.wallet-modal-success-popup-close:hover {\n  opacity: 1;\n}\n\n.wallet-modal-theme-dark .wallet-modal-success-popup-close {\n  color: #e5e7eb;\n}\n\n.wallet-modal-theme-light .wallet-modal-success-popup-close {\n  color: #374151;\n}\n\n.wallet-modal-success-popup-btn {\n  width: 100%;\n  margin-top: 20px;\n  padding: 12px 24px;\n  border-radius: 10px;\n  border: 1px solid;\n  font-size: 14px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: background 0.2s, transform 0.1s;\n}\n\n.wallet-modal-theme-dark .wallet-modal-success-popup-btn {\n  background: rgba(255, 255, 255, 0.08);\n  border-color: rgba(255, 255, 255, 0.15);\n  color: #e5e7eb;\n}\n\n.wallet-modal-theme-light .wallet-modal-success-popup-btn {\n  background: #f9fafb;\n  border-color: rgba(17, 24, 39, 0.12);\n  color: #111827;\n}\n\n.wallet-modal-success-popup-btn:hover {\n  background: rgba(255, 255, 255, 0.12);\n}\n\n.wallet-modal-theme-light .wallet-modal-success-popup-btn:hover {\n  background: #f3f4f6;\n}\n\n.wallet-modal-success-popup-btn:active {\n  transform: scale(0.98);\n}\n\n/* Error popup modal (link-auth errors from OAuth redirect) */\n.wallet-modal-error-popup-modal {\n  position: relative;\n  max-width: 380px;\n  width: 100%;\n  padding: 32px 24px 24px;\n  padding-top: 48px;\n  text-align: center;\n  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);\n}\n\n.wallet-modal-error-popup-icon {\n  width: 64px;\n  height: 64px;\n  margin: 0 auto 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n}\n\n.wallet-modal-error-popup-title {\n  font-size: 15px;\n  line-height: 1.45;\n  margin: 0 0 24px;\n  font-weight: 500;\n  word-break: break-word;\n}\n\n.wallet-modal-theme-dark .wallet-modal-error-popup-title {\n  color: #e5e7eb;\n}\n\n.wallet-modal-theme-light .wallet-modal-error-popup-title {\n  color: #111827;\n}\n\n.wallet-modal-error-popup-actions {\n  display: flex;\n  justify-content: center;\n  margin-bottom: 20px;\n}\n\n.wallet-modal-error-popup-ok {\n  padding: 12px 32px;\n  border-radius: 9999px;\n  border: none;\n  font-size: 14px;\n  font-weight: 700;\n  letter-spacing: 0.02em;\n  text-transform: uppercase;\n  cursor: pointer;\n  transition: background 0.2s, transform 0.1s;\n  color: #ffffff;\n}\n\n.wallet-modal-theme-dark .wallet-modal-error-popup-ok {\n  background: #1f2937;\n}\n\n.wallet-modal-theme-light .wallet-modal-error-popup-ok {\n  background: #111827;\n}\n\n.wallet-modal-theme-dark .wallet-modal-error-popup-ok:hover {\n  background: #374151;\n}\n\n.wallet-modal-theme-light .wallet-modal-error-popup-ok:hover {\n  background: #374151;\n}\n\n.wallet-modal-error-popup-ok:active {\n  transform: scale(0.98);\n}\n\n.wallet-modal-error-popup-footer {\n  padding-top: 8px;\n  text-align: center;\n}\n\n.wallet-modal-theme-dark.wallet-modal-error-popup-footer .onboarding-footer-text {\n  color: #9ca3af;\n}\n\n.wallet-modal-theme-light.wallet-modal-error-popup-footer .onboarding-footer-text {\n  color: #6b7280;\n}\n\n/* Link/Unlink success popup (inline fallback / shared content) */\n.wallet-modal-success-popup {\n  max-width: 360px;\n  padding: 32px 24px 20px;\n  text-align: center;\n}\n\n.wallet-modal-success-popup-icon {\n  width: 64px;\n  height: 64px;\n  margin: 0 auto 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  background: #10b981;\n  color: #ffffff;\n}\n\n.wallet-modal-success-popup-title {\n  font-size: 18px;\n  font-weight: 600;\n  margin: 0 0 8px;\n}\n\n.wallet-modal-theme-dark .wallet-modal-success-popup-title {\n  color: #ffffff;\n}\n\n.wallet-modal-theme-light .wallet-modal-success-popup-title {\n  color: #111827;\n}\n\n.wallet-modal-success-popup-footer {\n  margin-top: 24px;\n  font-size: 12px;\n  opacity: 0.7;\n}\n\n.wallet-modal-theme-dark .wallet-modal-success-popup-footer {\n  color: #9ca3af;\n}\n\n.wallet-modal-theme-light .wallet-modal-success-popup-footer {\n  color: #6b7280;\n}\n\n/* MFA Redesign Styles */\n.wallet-modal-manage.mfa-redesign-container {\n  /* max-width: 480px; */\n  width: 100%;\n  padding: 0;\n  border-radius: 24px;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  gap: 0;\n}\n\n.wallet-modal-manage.mfa-redesign-container .wallet-modal-receive-header {\n  padding: 20px;\n  margin-bottom: 0;\n}\n\n.mfa-redesign-content {\n  padding: 12px 20px 20px;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n\n.mfa-info-box {\n  display: flex;\n  gap: 12px;\n  padding: 12px;\n  border-radius: 14px;\n  align-items: center;\n}\n\n.wallet-modal-theme-dark .mfa-info-box {\n  background: rgba(255, 255, 255, 0.04);\n}\n\n.wallet-modal-theme-light .mfa-info-box {\n  background: rgba(0, 0, 0, 0.03);\n}\n\n.mfa-info-icon {\n  width: 40px;\n  height: 40px;\n  border-radius: 10px;\n  background: rgba(255, 255, 255, 0.1);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  color: var(--abstraxn-primary, #3b82f6);\n}\n\n.mfa-info-text {\n  font-size: 14px;\n  line-height: 1.5;\n  margin: 0;\n  opacity: 0.8;\n}\n\n.mfa-status-enabled-box {\n  align-items: flex-start;\n}\n\n.mfa-status-enabled-icon {\n  color: #22c55e;\n}\n\n.wallet-modal-theme-dark .mfa-status-enabled-icon {\n  background: rgba(34, 197, 94, 0.12);\n}\n\n.wallet-modal-theme-light .mfa-status-enabled-icon {\n  background: rgba(34, 197, 94, 0.1);\n}\n\n.mfa-status-enabled-copy {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.mfa-status-enabled-title {\n  margin: 0;\n  font-size: 15px;\n  font-weight: 600;\n}\n\n.wallet-modal-theme-dark .mfa-status-enabled-title {\n  color: #e5e7eb;\n}\n\n.wallet-modal-theme-light .mfa-status-enabled-title {\n  color: #111827;\n}\n\n.wallet-modal-theme-dark .mfa-info-text {\n  color: rgba(255, 255, 255, 0.88);\n}\n\n.wallet-modal-theme-light .mfa-info-text {\n  color: #374151;\n}\n\n.mfa-qr-container {\n  padding: 18px;\n  border-radius: 20px;\n  border: 1px solid;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 16px;\n}\n\n.wallet-modal-theme-dark .mfa-qr-container {\n  border-color: rgba(255, 255, 255, 0.08);\n}\n\n.wallet-modal-theme-light .mfa-qr-container {\n  border-color: rgba(0, 0, 0, 0.08);\n}\n\n.mfa-qr-wrapper {\n  padding: 16px;\n  background: #ffffff;\n  border-radius: 16px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.mfa-qr-placeholder {\n  width: 100%;\n  min-height: 172px;\n  border-radius: 16px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 13px;\n  font-weight: 500;\n  padding: 16px;\n}\n\n.wallet-modal-theme-dark .mfa-qr-placeholder {\n  background: rgba(255, 255, 255, 0.04);\n  color: rgba(255, 255, 255, 0.7);\n}\n\n.wallet-modal-theme-light .mfa-qr-placeholder {\n  background: rgba(0, 0, 0, 0.03);\n  color: #6b7280;\n}\n\n.mfa-secret-display {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 16px;\n  border-radius: 14px;\n  width: 100%;\n}\n\n.wallet-modal-theme-dark .mfa-secret-display {\n  background: rgba(0, 0, 0, 0.3);\n}\n\n.wallet-modal-theme-light .mfa-secret-display {\n  background: rgba(0, 0, 0, 0.05);\n}\n\n.mfa-secret-key-icon {\n  opacity: 0.5;\n}\n\n.wallet-modal-theme-dark .mfa-secret-key-icon {\n  color: rgba(255, 255, 255, 0.78);\n  opacity: 1;\n}\n\n.wallet-modal-theme-light .mfa-secret-key-icon {\n  color: #6b7280;\n  opacity: 1;\n}\n\n.mfa-secret-code {\n  flex: 1;\n  font-family: \"GeistMono\", monospace;\n  font-size: 14px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  letter-spacing: 0.5px;\n}\n\n.wallet-modal-theme-dark .mfa-secret-code {\n  color: #f3f4f6;\n}\n\n.wallet-modal-theme-light .mfa-secret-code {\n  color: #1f2937;\n}\n\n.mfa-secret-copy {\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  padding: 6px;\n  border-radius: 6px;\n  color: inherit;\n  opacity: 0.6;\n  transition: all 0.2s;\n}\n\n.wallet-modal-theme-dark .mfa-secret-copy {\n  color: rgba(255, 255, 255, 0.78);\n  opacity: 1;\n}\n\n.wallet-modal-theme-light .mfa-secret-copy {\n  color: #4b5563;\n}\n\n.mfa-secret-copy:hover {\n  opacity: 1;\n  background: rgba(255, 255, 255, 0.1);\n}\n\n.mfa-secret-copy.copied {\n  color: #22c55e;\n  opacity: 1;\n}\n\n.mfa-verification-section {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  margin-top: 0;\n}\n\n.mfa-divider {\n  display: block;\n  font-size: 14px;\n  font-weight: 500;\n  /* opacity: 0.5; */\n  margin: 0;\n  text-align: left;\n}\n\n.wallet-modal-theme-dark .mfa-divider {\n  color: rgba(255, 255, 255, 0.75);\n}\n\n.wallet-modal-theme-light .mfa-divider {\n  color: #4b5563;\n}\n\n.mfa-otp-grid {\n  display: flex;\n  justify-content: center;\n  gap: 6px;\n}\n\n.mfa-otp-slot {\n  display: flex;\n  align-items: center;\n  gap: 0;\n}\n\n.mfa-otp-input {\n  width: 50px;\n  height: 55px;\n  border-radius: 14px;\n  border: 1.5px solid;\n  background: transparent;\n  text-align: center;\n  font-size: 24px;\n  font-weight: 700;\n  font-family: \"GeistMono\", monospace;\n  outline: none;\n  transition: all 0.2s;\n}\n\n.wallet-modal-theme-dark .mfa-otp-input {\n  border-color: rgba(255, 255, 255, 0.3);\n  color: #ffffff;\n}\n\n.wallet-modal-theme-light .mfa-otp-input {\n  border-color: rgba(0, 0, 0, 0.3);\n  color: #111827;\n}\n\n.mfa-otp-input:focus {\n  border-color: var(--abstraxn-primary, #3b82f6);\n  background: rgba(59, 130, 246, 0.05);\n  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);\n}\n\n.mfa-otp-dash {\n  font-size: 24px;\n  opacity: 0.3;\n}\n\n.mfa-refresh-text {\n  text-align: center;\n  font-size: 13px;\n  opacity: 0.5;\n  margin: 0;\n}\n\n.wallet-modal-theme-dark .mfa-refresh-text {\n  color: rgba(255, 255, 255, 0.72);\n}\n\n.wallet-modal-theme-light .mfa-refresh-text {\n  color: #6b7280;\n}\n\n.mfa-setup-error {\n  font-size: 14px;\n  color: #ef4444;\n  margin: 0;\n  text-align: center;\n}\n\n.mfa-verify-button {\n  width: 100%;\n  padding: 18px;\n  border-radius: 18px;\n  border: none;\n  background: var(--abstraxn-primary, #111827);\n  color: var(--abstraxn-primary-text, #ffffff);\n  font-size: 16px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.2s;\n}\n\n.mfa-verify-button:hover:not(:disabled) {\n  transform: translateY(-1px);\n  background: var(--abstraxn-primary-hover, #1f2937);\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n}\n\n.mfa-verify-button:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.mfa-verify-button.mfa-disable-primary-button {\n  background: #ef4444;\n  color: #ffffff;\n}\n\n.mfa-verify-button.mfa-disable-primary-button:hover:not(:disabled) {\n  background: #dc2626;\n}\n\n.mfa-trouble-text {\n  text-align: center;\n  font-size: 14px;\n  margin: 0;\n  opacity: 0.7;\n}\n\n.wallet-modal-theme-dark .mfa-trouble-text {\n  color: rgba(255, 255, 255, 0.82);\n}\n\n.wallet-modal-theme-light .mfa-trouble-text {\n  color: #374151;\n}\n\n.mfa-link-button {\n  background: transparent;\n  border: none;\n  color: inherit;\n  font-weight: 600;\n  cursor: pointer;\n  padding: 0;\n  text-decoration: underline;\n  text-underline-offset: 2px;\n}\n\n.wallet-modal-theme-dark .mfa-link-button {\n  color: #cbd5e1;\n}\n\n.wallet-modal-theme-light .mfa-link-button {\n  color: #080808;\n}\n\n.wallet-modal-theme-dark .mfa-link-button:hover {\n  color: #e2e8f0;\n}\n\n.wallet-modal-theme-light .mfa-link-button:hover {\n  color: #080808;\n}\n\n.mfa-recovery-section {\n  display: flex;\n  flex-direction: column;\n  gap: 14px;\n  margin-top: 8px;\n}\n\n.mfa-recovery-grid {\n  display: flex;\n  justify-content: center;\n  flex-wrap: wrap;\n  gap: 6px;\n}\n\n.mfa-recovery-input {\n  text-transform: uppercase;\n}\n\n.mfa-recovery-field {\n  width: 100%;\n  height: 55px;\n  border-radius: 14px;\n  border: 1.5px solid;\n  background: transparent;\n  text-align: center;\n  font-size: 20px;\n  font-weight: 700;\n  font-family: \"GeistMono\", monospace;\n  text-transform: uppercase;\n  letter-spacing: 0.16em;\n  outline: none;\n  transition: all 0.2s;\n  box-sizing: border-box;\n  padding: 0 14px;\n}\n\n.wallet-modal-theme-dark .mfa-recovery-field {\n  border-color: rgba(255, 255, 255, 0.1);\n  color: #ffffff;\n}\n\n.wallet-modal-theme-light .mfa-recovery-field {\n  border-color: rgba(0, 0, 0, 0.1);\n  color: #111827;\n}\n\n.mfa-recovery-field:focus {\n  border-color: var(--abstraxn-primary, #3b82f6);\n  background: rgba(59, 130, 246, 0.05);\n  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);\n}\n\n.mfa-recovery-field::placeholder {\n  letter-spacing: 0;\n  font-size: 14px;\n  font-weight: 500;\n  font-family: \"GeistSans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", sans-serif;\n  text-transform: none;\n}\n\n.wallet-modal-mfa-backup-list {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 10px;\n  margin-bottom: 14px;\n}\n\n.wallet-modal-mfa-backup-heading {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-top: 2px;\n  margin-bottom: 10px;\n}\n\n.wallet-modal-mfa-backup-heading-label {\n  font-size: 12px;\n  font-weight: 700;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n}\n\n.wallet-modal-theme-dark .wallet-modal-mfa-backup-heading-label {\n  color: rgba(226, 232, 240, 0.7);\n}\n\n.wallet-modal-theme-light .wallet-modal-mfa-backup-heading-label {\n  color: rgba(15, 23, 42, 0.65);\n}\n\n.wallet-modal-mfa-backup-code-wrapper {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  padding: 12px 14px;\n  border-radius: 10px;\n  border: 1px solid;\n  transition: all 0.2s ease;\n}\n\n.wallet-modal-theme-dark .wallet-modal-mfa-backup-code-wrapper {\n  background: rgba(15, 23, 42, 0.5);\n  border-color: rgba(148, 163, 184, 0.25);\n}\n\n.wallet-modal-theme-light .wallet-modal-mfa-backup-code-wrapper {\n  background: rgba(248, 250, 252, 0.9);\n  border-color: rgba(148, 163, 184, 0.35);\n}\n\n.wallet-modal-mfa-backup-code {\n  font-family: \"GeistMono\", monospace;\n  font-size: 15px;\n  font-weight: 700;\n  letter-spacing: 1px;\n}\n\n.wallet-modal-theme-dark .wallet-modal-mfa-backup-code {\n  color: #f9fafb;\n}\n\n.wallet-modal-theme-light .wallet-modal-mfa-backup-code {\n  color: #111827;\n}\n\n.wallet-modal-mfa-backup-actions {\n  display: flex;\n  gap: 12px;\n  margin-bottom: 12px;\n}\n\n.wallet-modal-mfa-backup-action-btn {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  padding: 12px 14px;\n  border-radius: 10px;\n  border: 1px solid transparent;\n  font-size: 14px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.wallet-modal-theme-dark .wallet-modal-mfa-backup-action-btn {\n  background: rgba(30, 41, 59, 0.45);\n  color: rgba(226, 232, 240, 0.95);\n  border-color: rgba(148, 163, 184, 0.28);\n}\n\n.wallet-modal-theme-light .wallet-modal-mfa-backup-action-btn {\n  background: rgba(241, 245, 249, 0.95);\n  color: #1f2937;\n  border-color: rgba(148, 163, 184, 0.3);\n}\n\n.wallet-modal-mfa-backup-action-btn:hover:not(:disabled) {\n  transform: translateY(-1px);\n  filter: brightness(1.05);\n}\n\n.wallet-modal-mfa-backup-action-btn.copied {\n  color: #22c55e;\n  background: rgba(34, 197, 94, 0.1);\n}\n\n.wallet-modal-mfa-backup-action-btn:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n  transform: none;\n}\n";

package/dist/src/components/WalletModal/components/ManageWalletModal.d.ts

@@ -1,4 +1,3 @@
-import "./ManageWalletModal.css";
 export interface ManageWalletModalProps {
     isOpen: boolean;
     onClose: () => void;