function ScanArea({ onCapture, onUpload, previewUrl, isScanning = false, error }) { const [upload, { loading: uploadLoading }] = useUpload(); const videoRef = useRef(null); const [stream, setStream] = useState(null); const [showCamera, setShowCamera] = useState(false); useEffect(()=>{ if (showCamera) { navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } }).then((mediaStream)=>{ setStream(mediaStream); if (videoRef.current) { videoRef.current.srcObject = mediaStream; } }).catch((err)=>{ console.error("Error accessing camera:", err); }); } else if (stream) { stream.getTracks().forEach((track)=>track.stop()); } return ()=>{ if (stream) { stream.getTracks().forEach((track)=>track.stop()); } }; }, [ showCamera ]); const handleCapture = useCallback(()=>{ if (videoRef.current) { const canvas = document.createElement("canvas"); canvas.width = videoRef.current.videoWidth; canvas.height = videoRef.current.videoHeight; const ctx = canvas.getContext("2d"); ctx.drawImage(videoRef.current, 0, 0); canvas.toBlob(async (blob)=>{ if (onCapture) { onCapture(blob); } }, "image/jpeg"); } }, [ onCapture ]); const handleFileUpload = useCallback(async (e)=>{ const file = e.target.files?.[0]; if (file) { const { url, error } = await upload({ file }); if (error) { console.error(error); return; } if (onUpload) { onUpload(url); } } }, [ onUpload, upload ]); return /*#__PURE__*/ React.createElement("div", { className: "bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6", __source: { fileName: "", lineNumber: 70, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center space-y-4", __source: { fileName: "", lineNumber: 71, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-lg aspect-[4/3] relative bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden", __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, showCamera ? /*#__PURE__*/ React.createElement("video", { ref: videoRef, autoPlay: true, playsInline: true, className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }) : previewUrl ? /*#__PURE__*/ React.createElement("img", { src: previewUrl, alt: "Scanned preview", className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this }) : /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center w-full h-full text-gray-400", __source: { fileName: "", lineNumber: 87, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-camera text-4xl", __source: { fileName: "", lineNumber: 88, columnNumber: 15 }, __self: this })), isScanning && /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 flex items-center justify-center bg-black bg-opacity-50", __source: { fileName: "", lineNumber: 92, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "animate-spin rounded-full h-12 w-12 border-4 border-white border-t-transparent", __source: { fileName: "", lineNumber: 93, columnNumber: 15 }, __self: this }))), error && /*#__PURE__*/ React.createElement("div", { className: "text-red-500 dark:text-red-400 text-sm font-inter", __source: { fileName: "", lineNumber: 99, columnNumber: 11 }, __self: this }, error), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-4 justify-center", __source: { fileName: "", lineNumber: 104, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowCamera(!showCamera), className: "inline-block px-6 py-3 bg-black text-white font-inter rounded-xl hover:bg-white hover:text-black transition-colors border border-black", __source: { fileName: "", lineNumber: 105, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-camera mr-2", __source: { fileName: "", lineNumber: 109, columnNumber: 13 }, __self: this }), showCamera ? "Stop Camera" : "Start Camera"), showCamera && /*#__PURE__*/ React.createElement("button", { onClick: handleCapture, className: "inline-block px-6 py-3 bg-black text-white font-inter rounded-xl hover:bg-white hover:text-black transition-colors border border-black", __source: { fileName: "", lineNumber: 114, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-circle mr-2", __source: { fileName: "", lineNumber: 118, columnNumber: 15 }, __self: this }), "Capture"), /*#__PURE__*/ React.createElement("label", { className: "inline-block px-6 py-3 bg-black text-white font-inter rounded-xl hover:bg-white hover:text-black transition-colors border border-black cursor-pointer", __source: { fileName: "", lineNumber: 123, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-upload mr-2", __source: { fileName: "", lineNumber: 124, columnNumber: 13 }, __self: this }), "Upload Image", /*#__PURE__*/ React.createElement("input", { type: "file", accept: "image/*", className: "hidden", onChange: handleFileUpload, disabled: uploadLoading, __source: { fileName: "", lineNumber: 126, columnNumber: 13 }, __self: this }))))); } function ScanAreaStory() { const [previewUrl, setPreviewUrl] = useState(null); const [isScanning, setIsScanning] = useState(false); const [error, setError] = useState(null); const handleCapture = async (blob)=>{ setIsScanning(true); setError(null); try { const reader = new FileReader(); reader.onloadend = ()=>{ setPreviewUrl(reader.result); }; reader.readAsDataURL(blob); await new Promise((resolve)=>setTimeout(resolve, 2000)); } catch (err) { setError("Failed to process captured image"); } finally{ setIsScanning(false); } }; const handleUpload = (url)=>{ setPreviewUrl(url); }; return /*#__PURE__*/ React.createElement("div", { className: "p-8 bg-gray-100 dark:bg-gray-900 min-h-screen", __source: { fileName: "", lineNumber: 167, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto", __source: { fileName: "", lineNumber: 168, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-6 text-gray-900 dark:text-white font-inter", __source: { fileName: "", lineNumber: 169, columnNumber: 9 }, __self: this }, "Business Card Scanner"), /*#__PURE__*/ React.createElement(ScanArea, { onCapture: handleCapture, onUpload: handleUpload, previewUrl: previewUrl, isScanning: isScanning, error: error, __source: { fileName: "", lineNumber: 172, columnNumber: 9 }, __self: this }))); } function SearchBar({ onSearch, initialFilters = {} }) { const [searchText, setSearchText] = useState(""); const [filters, setFilters] = useState({ name: initialFilters.name || "", company: initialFilters.company || "", tags: initialFilters.tags || [] }); const [isExpanded, setIsExpanded] = useState(false); const [tagInput, setTagInput] = useState(""); const handleSearchChange = (e)=>{ setSearchText(e.target.value); if (onSearch) { onSearch({ searchText: e.target.value, filters }); } }; const handleFilterChange = (field, value)=>{ const newFilters = { ...filters, [field]: value }; setFilters(newFilters); if (onSearch) { onSearch({ searchText, filters: newFilters }); } }; const addTag = ()=>{ if (tagInput && !filters.tags.includes(tagInput)) { const newTags = [ ...filters.tags, tagInput ]; handleFilterChange("tags", newTags); setTagInput(""); } }; const removeTag = (tagToRemove)=>{ const newTags = filters.tags.filter((tag)=>tag !== tagToRemove); handleFilterChange("tags", newTags); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-3xl bg-white dark:bg-black", __source: { fileName: "", lineNumber: 40, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", className: "w-full pl-10 pr-4 py-2 rounded-xl border border-black dark:border-white bg-white dark:bg-black text-black dark:text-white focus:outline-none", placeholder: "Search contacts...", value: searchText, onChange: handleSearchChange, __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-search absolute left-3 top-3 text-black dark:text-white", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsExpanded(!isExpanded), className: "absolute right-3 top-2 text-black dark:text-white hover:opacity-70", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-filter ${isExpanded ? "opacity-100" : "opacity-70"}`, __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }))), isExpanded && /*#__PURE__*/ React.createElement("div", { className: "mt-4 space-y-4", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-2", __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "text-sm text-black dark:text-white", __source: { fileName: "", lineNumber: 64, columnNumber: 15 }, __self: this }, "Name Filter"), /*#__PURE__*/ React.createElement("input", { type: "text", className: "px-3 py-2 rounded-xl border border-black dark:border-white bg-white dark:bg-black text-black dark:text-white", placeholder: "Filter by name...", value: filters.name, onChange: (e)=>handleFilterChange("name", e.target.value), __source: { fileName: "", lineNumber: 67, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-2", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "text-sm text-black dark:text-white", __source: { fileName: "", lineNumber: 77, columnNumber: 15 }, __self: this }, "Company Filter"), /*#__PURE__*/ React.createElement("input", { type: "text", className: "px-3 py-2 rounded-xl border border-black dark:border-white bg-white dark:bg-black text-black dark:text-white", placeholder: "Filter by company...", value: filters.company, onChange: (e)=>handleFilterChange("company", e.target.value), __source: { fileName: "", lineNumber: 80, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-2", __source: { fileName: "", lineNumber: 89, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "text-sm text-black dark:text-white", __source: { fileName: "", lineNumber: 90, columnNumber: 15 }, __self: this }, "Tags"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 91, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", className: "flex-1 px-3 py-2 rounded-xl border border-black dark:border-white bg-white dark:bg-black text-black dark:text-white", placeholder: "Add tags...", value: tagInput, onChange: (e)=>setTagInput(e.target.value), onKeyPress: (e)=>e.key === "Enter" && addTag(), __source: { fileName: "", lineNumber: 92, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: addTag, className: "px-4 py-2 bg-black dark:bg-white text-white dark:text-black rounded-xl hover:opacity-70", __source: { fileName: "", lineNumber: 100, columnNumber: 17 }, __self: this }, "Add")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2 mt-2", __source: { fileName: "", lineNumber: 107, columnNumber: 15 }, __self: this }, filters.tags.map((tag)=>/*#__PURE__*/ React.createElement("span", { key: tag, className: "inline-flex items-center px-3 py-1 rounded-xl text-sm border border-black dark:border-white text-black dark:text-white", __source: { fileName: "", lineNumber: 109, columnNumber: 19 }, __self: this }, tag, /*#__PURE__*/ React.createElement("button", { onClick: ()=>removeTag(tag), className: "ml-2 text-black dark:text-white hover:opacity-70", __source: { fileName: "", lineNumber: 114, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 118, columnNumber: 23 }, __self: this }))))))))); } function SearchBarStory() { const handleSearch = ({ searchText, filters })=>{ console.log("Search:", searchText); console.log("Filters:", filters); }; return /*#__PURE__*/ React.createElement("div", { className: "p-8 bg-white dark:bg-black min-h-screen", __source: { fileName: "", lineNumber: 138, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 139, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg mb-4 text-black dark:text-white font-inter", __source: { fileName: "", lineNumber: 140, columnNumber: 9 }, __self: this }, "Default Search Bar"), /*#__PURE__*/ React.createElement(SearchBar, { onSearch: handleSearch, __source: { fileName: "", lineNumber: 143, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 146, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg mb-4 text-black dark:text-white font-inter", __source: { fileName: "", lineNumber: 147, columnNumber: 9 }, __self: this }, "Pre-filled Search Bar"), /*#__PURE__*/ React.createElement(SearchBar, { onSearch: handleSearch, initialFilters: { name: "John", company: "Tech Corp", tags: [ "Developer", "Manager" ] }, __source: { fileName: "", lineNumber: 150, columnNumber: 9 }, __self: this }))); } function ContactCard({ name, company, title, thumbnail, onEdit, onDelete, onGenerateQR }) { const [qrCode, setQrCode] = useState(null); const [error, setError] = useState(null); const [isGeneratingQR, setIsGeneratingQR] = useState(false); const handleGenerateQR = async ()=>{ setIsGeneratingQR(true); setError(null); try { const contactInfo = `Name: ${name}\nCompany: ${company}\nTitle: ${title}`; const response = await fetch(`/integrations/qr-code/generatebasicbase64?data=${encodeURIComponent(contactInfo)}`); const base64Data = await response.text(); setQrCode(base64Data); } catch (err) { console.error(err); setError("Failed to generate QR code"); } finally{ setIsGeneratingQR(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "bg-white dark:bg-black p-6 w-full max-w-sm", __source: { fileName: "", lineNumber: 33, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-start space-x-4", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: thumbnail || "https://images.pexels.com/photos/771742/pexels-photo-771742.jpeg", alt: `${name}'s profile`, className: "w-16 h-16 object-cover", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-black dark:text-white font-inter text-lg", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, name), /*#__PURE__*/ React.createElement("p", { className: "text-black dark:text-white font-inter text-sm", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, company), /*#__PURE__*/ React.createElement("p", { className: "text-black dark:text-white font-inter text-sm", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, title))), /*#__PURE__*/ React.createElement("div", { className: "flex mt-4 space-x-2", __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: onEdit, className: "inline-block px-4 py-2 border border-black dark:border-white rounded-xl text-black dark:text-white font-inter text-sm hover:bg-black hover:text-white dark:hover:bg-white dark:hover:text-black transition-colors", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-edit mr-2", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }), "Edit"), /*#__PURE__*/ React.createElement("button", { onClick: onDelete, className: "inline-block px-4 py-2 border border-black dark:border-white rounded-xl text-black dark:text-white font-inter text-sm hover:bg-black hover:text-white dark:hover:bg-white dark:hover:text-black transition-colors", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-trash mr-2", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }), "Delete"), /*#__PURE__*/ React.createElement("button", { onClick: handleGenerateQR, disabled: isGeneratingQR, className: "inline-block px-4 py-2 bg-black dark:bg-white text-white dark:text-black font-inter text-sm rounded-xl hover:bg-white hover:text-black dark:hover:bg-black dark:hover:text-white transition-colors border border-black dark:border-white", __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-qrcode mr-2", __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }), isGeneratingQR ? "Generating..." : "QR Code")), error && /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-red-500 dark:text-red-400 text-sm font-inter", __source: { fileName: "", lineNumber: 80, columnNumber: 9 }, __self: this }, error), qrCode && /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 86, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: `data:image/png;base64,${qrCode}`, alt: "Contact QR Code", className: "w-32 h-32 mx-auto", __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this }))); } function ContactCardStory() { const [contacts] = useState([ { name: "Jane Cooper", company: "Microsoft", title: "Software Engineer", thumbnail: "https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg" }, { name: "John Smith", company: "Google", title: "Product Manager", thumbnail: "https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg" } ]); return /*#__PURE__*/ React.createElement("div", { className: "p-8 space-y-4 bg-white dark:bg-black", __source: { fileName: "", lineNumber: 117, columnNumber: 5 }, __self: this }, contacts.map((contact, index)=>/*#__PURE__*/ React.createElement(ContactCard, { key: index, ...contact, onEdit: ()=>console.log("Edit clicked for", contact.name), onDelete: ()=>console.log("Delete clicked for", contact.name), onGenerateQR: ()=>console.log("Generate QR clicked for", contact.name), __source: { fileName: "", lineNumber: 119, columnNumber: 9 }, __self: this }))); } function OutlineButton({ text, onClick, bgColor = 'bg-white' }) { const textColor = bgColor === 'bg-white' ? 'text-black' : 'text-white'; return /*#__PURE__*/ React.createElement("button", { className: `px-8 py-2 rounded-full border border-current ${textColor} font-inter bg-transparent hover:bg-opacity-10 transition-colors duration-300 w-[240px] h-[60px]`, onClick: onClick, __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, text); } function OutlineButtonStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4 flex flex-col space-y-4 justify-center items-center h-screen bg-gray-100", __source: { fileName: "", lineNumber: 16, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(OutlineButton, { text: "Click me", onClick: ()=>alert('Button clicked!'), __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(OutlineButton, { text: "Dark version", onClick: ()=>alert('Dark button clicked!'), bgColor: "bg-black", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this })); } function MainComponent() { const [error, setError] = useState(null); const [loading, setLoading] = useState(false); const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [validation, setValidation] = useState({ email: "", password: "" }); const { signUpWithCredentials } = useAuth(); const validateForm = ()=>{ const newValidation = { email: "", password: "" }; let isValid = true; if (!email) { newValidation.email = "Email is required"; isValid = false; } else if (!/\S+@\S+\.\S+/.test(email)) { newValidation.email = "Please enter a valid email address"; isValid = false; } if (!password) { newValidation.password = "Password is required"; isValid = false; } else if (password.length < 8) { newValidation.password = "Password must be at least 8 characters long"; isValid = false; } setValidation(newValidation); return isValid; }; const onSubmit = async (e)=>{ e.preventDefault(); setError(null); if (!validateForm()) { return; } setLoading(true); try { await signUpWithCredentials({ email, password, callbackUrl: "/dashboard", redirect: true }); } catch (err) { const errorMessages = { OAuthSignin: "Couldn't start sign-up. Please try again or use a different method.", OAuthCallback: "Sign-up failed after redirecting. Please try again.", OAuthCreateAccount: "Couldn't create an account with this sign-up option. Try another one.", EmailCreateAccount: "This email can't be used. It may already be registered.", Callback: "Something went wrong during sign-up. Please try again.", OAuthAccountNotLinked: "This account is linked to a different sign-in method. Try using that instead.", CredentialsSignin: "Invalid email or password. If you already have an account, try signing in instead.", AccessDenied: "You don't have permission to sign up.", Configuration: "Sign-up isn't working right now. Please try again later.", Verification: "Your sign-up link has expired. Request a new one." }; setError(errorMessages[err.message] || "Something went wrong. Please try again."); } finally{ setLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen w-full flex items-center justify-center bg-black p-4", __source: { fileName: "", lineNumber: 80, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("form", { noValidate: true, onSubmit: onSubmit, className: "w-full max-w-md p-8 border border-white", __source: { fileName: "", lineNumber: 81, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "mb-8 text-center text-3xl text-white font-inter", __source: { fileName: "", lineNumber: 86, columnNumber: 9 }, __self: this }, "Create CardConnect Account"), /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 90, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 91, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm text-white", __source: { fileName: "", lineNumber: 92, columnNumber: 13 }, __self: this }, "Email"), /*#__PURE__*/ React.createElement("input", { required: true, name: "email", type: "email", value: email, onChange: (e)=>setEmail(e.target.value), placeholder: "Enter your email", className: "w-full px-4 py-3 bg-black text-white border border-white rounded-xl", __source: { fileName: "", lineNumber: 93, columnNumber: 13 }, __self: this }), validation.email && /*#__PURE__*/ React.createElement("p", { className: "text-sm text-red-400", __source: { fileName: "", lineNumber: 103, columnNumber: 15 }, __self: this }, validation.email)), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 107, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm text-white", __source: { fileName: "", lineNumber: 108, columnNumber: 13 }, __self: this }, "Password"), /*#__PURE__*/ React.createElement("input", { required: true, name: "password", type: "password", value: password, onChange: (e)=>setPassword(e.target.value), placeholder: "Enter your password", className: "w-full px-4 py-3 bg-black text-white border border-white rounded-xl", __source: { fileName: "", lineNumber: 109, columnNumber: 13 }, __self: this }), validation.password && /*#__PURE__*/ React.createElement("p", { className: "text-sm text-red-400", __source: { fileName: "", lineNumber: 119, columnNumber: 15 }, __self: this }, validation.password)), error && /*#__PURE__*/ React.createElement("div", { className: "p-3 text-sm text-red-400 bg-red-900/50 rounded-xl", __source: { fileName: "", lineNumber: 124, columnNumber: 13 }, __self: this }, error), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: loading, className: "w-full py-3 text-black bg-white rounded-xl hover:bg-black hover:text-white border border-white transition-colors disabled:opacity-50", __source: { fileName: "", lineNumber: 129, columnNumber: 11 }, __self: this }, loading ? "Creating Account..." : "Sign Up for CardConnect"), /*#__PURE__*/ React.createElement("p", { className: "text-center text-sm text-white", __source: { fileName: "", lineNumber: 137, columnNumber: 11 }, __self: this }, "Already have a CardConnect account?", " ", /*#__PURE__*/ React.createElement("a", { href: "/account/signin", className: "underline hover:no-underline", __source: { fileName: "", lineNumber: 139, columnNumber: 13 }, __self: this }, "Sign in"))))); }