@pubflow/react 0.3.1 → 0.3.4-beta.1

package/dist/index.cjs

@@ -455,7 +455,8 @@ function PubflowProvider({ children, config, instances, defaultInstance = 'defau
                         }
                     });
                 }
-                if (isMounted) {
+                // Only set context value if we have instances to set
+                if (isMounted && Object.keys(instancesMap).length > 0) {
                     setContextValue({
                         instances: instancesMap,
                         defaultInstance
@@ -8560,6 +8561,68 @@ function BridgeList({ renderItem, showPagination = true, showSearch = true, show
                                 }) })), renderPagination()] })] })] }));
 }
 
+/**
+ * Asset Utilities for Pubflow React
+ *
+ * Utilities for handling assets like logos, images, and other media files
+ * Supports both external URLs and internal assets with proper Vite/bundler integration
+ */
+/**
+ * Process asset URL - supports both external URLs and internal assets
+ *
+ * @param assetUrl - The asset URL to process
+ * @returns Processed URL ready for use in src attributes
+ */
+function processAssetUrl(assetUrl) {
+    // Return non-string values as-is (React components, null, undefined)
+    if (!assetUrl || typeof assetUrl !== 'string') {
+        return assetUrl;
+    }
+    // Return empty string as-is (no logo case)
+    if (assetUrl.trim() === '') {
+        return '';
+    }
+    // Check if it's an external URL (starts with http:// or https://)
+    if (assetUrl.startsWith('http://') || assetUrl.startsWith('https://')) {
+        return assetUrl;
+    }
+    // Check if it's a data URL (base64 encoded image)
+    if (assetUrl.startsWith('data:')) {
+        return assetUrl;
+    }
+    // Check if it's already a processed Vite asset (starts with /)
+    if (assetUrl.startsWith('/')) {
+        return assetUrl;
+    }
+    // Check if it's a blob URL
+    if (assetUrl.startsWith('blob:')) {
+        return assetUrl;
+    }
+    // For relative paths or simple filenames, assume they're in the public directory
+    // This handles cases like 'logo.svg', './logo.png', '../assets/logo.jpg', etc.
+    if (assetUrl.includes('.')) {
+        // Remove leading ./ if present
+        const cleanPath = assetUrl.replace(/^\.\//, '');
+        // If it starts with ../, keep it as is (relative to current directory)
+        if (assetUrl.startsWith('../')) {
+            return assetUrl;
+        }
+        // For simple filenames or paths, prepend with /
+        return `/${cleanPath}`;
+    }
+    // Return as-is for any other cases
+    return assetUrl;
+}
+/**
+ * Process logo URL specifically - alias for processAssetUrl with better naming
+ *
+ * @param logoUrl - The logo URL to process
+ * @returns Processed URL ready for use in img src
+ */
+function processLogoUrl(logoUrl) {
+    return processAssetUrl(logoUrl);
+}
+
 /**
  * Professional login form component
  */
@@ -8617,21 +8680,31 @@ function LoginForm({ config = {}, onSuccess, onError, onPasswordReset, onAccount
     const styles = {
         container: {
             maxWidth: '400px',
+            width: '100%',
             margin: '0 auto',
             padding: '24px',
             backgroundColor: '#ffffff',
             borderRadius: '24px',
             boxShadow: '0 8px 24px rgba(0, 0, 0, 0.1)',
-            border: '1px solid #f0f0f0'
+            border: '1px solid #f0f0f0',
+            boxSizing: 'border-box'
         },
         logoSection: {
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
             textAlign: 'center',
-            marginBottom: '32px'
+            marginBottom: '32px',
+            width: '100%'
         },
         logo: {
             maxWidth: '320px',
-            height: '80px',
-            marginBottom: '20px'
+            maxHeight: '80px',
+            height: 'auto',
+            width: 'auto',
+            objectFit: 'contain',
+            marginBottom: '20px',
+            display: 'block'
         },
         welcomeText: {
             fontSize: '32px',
@@ -8740,7 +8813,7 @@ function LoginForm({ config = {}, onSuccess, onError, onPasswordReset, onAccount
             textAlign: 'center'
         }
     };
-    return (jsxRuntime.jsxs("div", { className: className, style: styles.container, children: [jsxRuntime.jsxs("div", { style: styles.logoSection, children: [logo && (typeof logo === 'string' ? (jsxRuntime.jsx("img", { src: logo, alt: `${appName} Logo`, style: styles.logo })) : (logo)), jsxRuntime.jsxs("h1", { style: styles.welcomeText, children: ["Welcome to ", appName] }), jsxRuntime.jsx("p", { style: styles.subtitleText, children: "Sign in to your account" })] }), jsxRuntime.jsxs("form", { onSubmit: handleSubmit, children: [error && (jsxRuntime.jsxs("div", { style: styles.errorContainer, children: [jsxRuntime.jsx("span", { style: { color: '#ff4757', fontSize: '20px' }, children: "\u26A0" }), jsxRuntime.jsx("span", { style: styles.errorText, children: error })] })), jsxRuntime.jsxs("div", { style: styles.inputGroup, children: [jsxRuntime.jsx("label", { style: styles.inputLabel, children: "Email Address" }), jsxRuntime.jsxs("div", { style: styles.inputContainer, children: [jsxRuntime.jsx("span", { style: { marginRight: '12px', opacity: 0.7, color: '#666' }, children: "\u2709" }), jsxRuntime.jsx("input", { type: "email", style: styles.input, placeholder: "Enter your email", value: email, onChange: (e) => setEmail(e.target.value), autoCapitalize: "none", autoComplete: "email", disabled: isLoading, required: true })] })] }), jsxRuntime.jsxs("div", { style: styles.inputGroup, children: [jsxRuntime.jsx("label", { style: styles.inputLabel, children: "Password" }), jsxRuntime.jsxs("div", { style: styles.inputContainer, children: [jsxRuntime.jsx("span", { style: { marginRight: '12px', opacity: 0.7, color: '#666' }, children: "\uD83D\uDD12" }), jsxRuntime.jsx("input", { type: showPassword ? 'text' : 'password', style: styles.input, placeholder: "Enter your password", value: password, onChange: (e) => setPassword(e.target.value), autoComplete: "current-password", disabled: isLoading, required: true }), jsxRuntime.jsx("button", { type: "button", style: styles.eyeButton, onClick: () => setShowPassword(!showPassword), disabled: isLoading, children: showPassword ? '👁' : '👁‍🗨' })] })] }), jsxRuntime.jsxs("div", { style: styles.checkboxContainer, children: [jsxRuntime.jsxs("label", { style: { display: 'flex', alignItems: 'center', fontSize: '14px', color: '#666' }, children: [jsxRuntime.jsx("input", { type: "checkbox", checked: rememberMe, onChange: (e) => setRememberMe(e.target.checked), style: { marginRight: '8px' } }), "Remember me"] }), showPasswordReset && (jsxRuntime.jsx("button", { type: "button", style: { ...styles.linkButton, fontSize: '14px' }, onClick: onPasswordReset, disabled: isLoading, children: "Forgot password?" }))] }), jsxRuntime.jsx("button", { type: "submit", style: {
+    return (jsxRuntime.jsxs("div", { className: className, style: styles.container, children: [jsxRuntime.jsxs("div", { style: styles.logoSection, children: [logo && (typeof logo === 'string' ? (jsxRuntime.jsx("img", { src: processLogoUrl(logo), alt: `${appName} Logo`, style: styles.logo })) : (logo)), jsxRuntime.jsxs("h1", { style: styles.welcomeText, children: ["Welcome to ", appName] }), jsxRuntime.jsx("p", { style: styles.subtitleText, children: "Sign in to your account" })] }), jsxRuntime.jsxs("form", { onSubmit: handleSubmit, children: [error && (jsxRuntime.jsxs("div", { style: styles.errorContainer, children: [jsxRuntime.jsx("span", { style: { color: '#ff4757', fontSize: '20px' }, children: "\u26A0" }), jsxRuntime.jsx("span", { style: styles.errorText, children: error })] })), jsxRuntime.jsxs("div", { style: styles.inputGroup, children: [jsxRuntime.jsx("label", { style: styles.inputLabel, children: "Email Address" }), jsxRuntime.jsxs("div", { style: styles.inputContainer, children: [jsxRuntime.jsx("span", { style: { marginRight: '12px', opacity: 0.7, color: '#666' }, children: "\u2709" }), jsxRuntime.jsx("input", { type: "email", style: styles.input, placeholder: "Enter your email", value: email, onChange: (e) => setEmail(e.target.value), autoCapitalize: "none", autoComplete: "email", disabled: isLoading, required: true })] })] }), jsxRuntime.jsxs("div", { style: styles.inputGroup, children: [jsxRuntime.jsx("label", { style: styles.inputLabel, children: "Password" }), jsxRuntime.jsxs("div", { style: styles.inputContainer, children: [jsxRuntime.jsx("span", { style: { marginRight: '12px', opacity: 0.7, color: '#666' }, children: "\uD83D\uDD12" }), jsxRuntime.jsx("input", { type: showPassword ? 'text' : 'password', style: styles.input, placeholder: "Enter your password", value: password, onChange: (e) => setPassword(e.target.value), autoComplete: "current-password", disabled: isLoading, required: true }), jsxRuntime.jsx("button", { type: "button", style: styles.eyeButton, onClick: () => setShowPassword(!showPassword), disabled: isLoading, children: showPassword ? '👁' : '👁‍🗨' })] })] }), jsxRuntime.jsxs("div", { style: styles.checkboxContainer, children: [jsxRuntime.jsxs("label", { style: { display: 'flex', alignItems: 'center', fontSize: '14px', color: '#666' }, children: [jsxRuntime.jsx("input", { type: "checkbox", checked: rememberMe, onChange: (e) => setRememberMe(e.target.checked), style: { marginRight: '8px' } }), "Remember me"] }), showPasswordReset && (jsxRuntime.jsx("button", { type: "button", style: { ...styles.linkButton, fontSize: '14px' }, onClick: onPasswordReset, disabled: isLoading, children: "Forgot password?" }))] }), jsxRuntime.jsx("button", { type: "submit", style: {
                             ...styles.loginButton,
                             opacity: isLoading ? 0.8 : 1,
                             cursor: isLoading ? 'not-allowed' : 'pointer'
@@ -8857,21 +8930,32 @@ function PasswordResetForm({ config = {}, onSuccess, onError, onBackToLogin, res
     const styles = {
         container: {
             maxWidth: '400px',
+            width: '100%',
             margin: '0 auto',
             padding: '24px',
             backgroundColor: '#ffffff',
             borderRadius: '24px',
             boxShadow: '0 8px 24px rgba(0, 0, 0, 0.1)',
-            border: '1px solid #f0f0f0'
+            border: '1px solid #f0f0f0',
+            boxSizing: 'border-box'
         },
         logoSection: {
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            alignItems: 'center',
             textAlign: 'center',
-            marginBottom: '32px'
+            marginBottom: '32px',
+            width: '100%'
         },
         logo: {
             maxWidth: '320px',
-            height: '80px',
-            marginBottom: '20px'
+            maxHeight: '80px',
+            height: 'auto',
+            width: 'auto',
+            objectFit: 'contain',
+            marginBottom: '20px',
+            display: 'block'
         },
         title: {
             fontSize: '28px',
@@ -8990,7 +9074,7 @@ function PasswordResetForm({ config = {}, onSuccess, onError, onBackToLogin, res
     const renderStep = () => {
         switch (step) {
             case 'request':
-                return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { style: styles.logoSection, children: [logo && (typeof logo === 'string' ? (jsxRuntime.jsx("img", { src: logo, alt: `${appName} Logo`, style: styles.logo })) : (logo)), jsxRuntime.jsx("h1", { style: styles.title, children: "Reset Password" }), jsxRuntime.jsx("p", { style: styles.subtitle, children: "Enter your email to receive reset instructions" })] }), jsxRuntime.jsxs("form", { onSubmit: handleRequestReset, children: [error && (jsxRuntime.jsxs("div", { style: styles.errorContainer, children: [jsxRuntime.jsx("span", { style: { color: '#ff4757', fontSize: '20px' }, children: "\u26A0" }), jsxRuntime.jsx("span", { style: styles.errorText, children: error })] })), jsxRuntime.jsxs("div", { style: styles.inputGroup, children: [jsxRuntime.jsx("label", { style: styles.inputLabel, children: "Email Address" }), jsxRuntime.jsxs("div", { style: styles.inputContainer, children: [jsxRuntime.jsx("span", { style: { marginRight: '12px', opacity: 0.7, color: '#666' }, children: "\u2709" }), jsxRuntime.jsx("input", { type: "email", style: styles.input, placeholder: "Enter your email", value: email, onChange: (e) => setEmail(e.target.value), autoCapitalize: "none", autoComplete: "email", disabled: isLoading, required: true })] })] }), jsxRuntime.jsx("button", { type: "submit", style: {
+                return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { style: styles.logoSection, children: [logo && (typeof logo === 'string' ? (jsxRuntime.jsx("img", { src: processLogoUrl(logo), alt: `${appName} Logo`, style: styles.logo })) : (logo)), jsxRuntime.jsx("h1", { style: styles.title, children: "Reset Password" }), jsxRuntime.jsx("p", { style: styles.subtitle, children: "Enter your email to receive reset instructions" })] }), jsxRuntime.jsxs("form", { onSubmit: handleRequestReset, children: [error && (jsxRuntime.jsxs("div", { style: styles.errorContainer, children: [jsxRuntime.jsx("span", { style: { color: '#ff4757', fontSize: '20px' }, children: "\u26A0" }), jsxRuntime.jsx("span", { style: styles.errorText, children: error })] })), jsxRuntime.jsxs("div", { style: styles.inputGroup, children: [jsxRuntime.jsx("label", { style: styles.inputLabel, children: "Email Address" }), jsxRuntime.jsxs("div", { style: styles.inputContainer, children: [jsxRuntime.jsx("span", { style: { marginRight: '12px', opacity: 0.7, color: '#666' }, children: "\u2709" }), jsxRuntime.jsx("input", { type: "email", style: styles.input, placeholder: "Enter your email", value: email, onChange: (e) => setEmail(e.target.value), autoCapitalize: "none", autoComplete: "email", disabled: isLoading, required: true })] })] }), jsxRuntime.jsx("button", { type: "submit", style: {
                                         ...styles.button,
                                         opacity: isLoading ? 0.8 : 1,
                                         cursor: isLoading ? 'not-allowed' : 'pointer'
@@ -9127,21 +9211,32 @@ function AccountCreationForm({ config = {}, onSuccess, onError, onBackToLogin })
     const styles = {
         container: {
             maxWidth: '400px',
+            width: '100%',
             margin: '0 auto',
             padding: '24px',
             backgroundColor: '#ffffff',
             borderRadius: '24px',
             boxShadow: '0 8px 24px rgba(0, 0, 0, 0.1)',
-            border: '1px solid #f0f0f0'
+            border: '1px solid #f0f0f0',
+            boxSizing: 'border-box'
         },
         logoSection: {
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            alignItems: 'center',
             textAlign: 'center',
-            marginBottom: '32px'
+            marginBottom: '32px',
+            width: '100%'
         },
         logo: {
             maxWidth: '320px',
-            height: '80px',
-            marginBottom: '20px'
+            maxHeight: '80px',
+            height: 'auto',
+            width: 'auto',
+            objectFit: 'contain',
+            marginBottom: '20px',
+            display: 'block'
         },
         title: {
             fontSize: '28px',
@@ -9254,7 +9349,7 @@ function AccountCreationForm({ config = {}, onSuccess, onError, onBackToLogin })
     const renderStep = () => {
         switch (step) {
             case 'form':
-                return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { style: styles.logoSection, children: [logo && (typeof logo === 'string' ? (jsxRuntime.jsx("img", { src: logo, alt: `${appName} Logo`, style: styles.logo })) : (logo)), jsxRuntime.jsx("h1", { style: styles.title, children: "Create Account" }), jsxRuntime.jsxs("p", { style: styles.subtitle, children: ["Join ", appName, " today"] })] }), jsxRuntime.jsxs("form", { onSubmit: handleSubmit, children: [errors.general && (jsxRuntime.jsxs("div", { style: { ...styles.successContainer, backgroundColor: '#fef2f2', borderColor: '#fecaca' }, children: [jsxRuntime.jsx("span", { style: { color: '#ff4757', fontSize: '20px' }, children: "\u26A0" }), jsxRuntime.jsx("span", { style: { ...styles.successText, color: '#dc2626' }, children: errors.general })] })), jsxRuntime.jsxs("div", { style: styles.inputGroup, children: [jsxRuntime.jsx("label", { style: styles.inputLabel, children: "First Name *" }), jsxRuntime.jsxs("div", { style: { ...styles.inputContainer, ...(errors.name ? styles.inputError : {}) }, children: [jsxRuntime.jsx("span", { style: { marginRight: '12px', opacity: 0.7, color: '#666' }, children: "\uD83D\uDC64" }), jsxRuntime.jsx("input", { type: "text", style: styles.input, placeholder: "Enter your first name", value: formData.name, onChange: (e) => updateField('name', e.target.value), autoComplete: "given-name", disabled: isLoading, required: true })] }), errors.name && jsxRuntime.jsx("div", { style: styles.errorText, children: errors.name })] }), jsxRuntime.jsxs("div", { style: styles.inputGroup, children: [jsxRuntime.jsx("label", { style: styles.inputLabel, children: "Last Name *" }), jsxRuntime.jsxs("div", { style: { ...styles.inputContainer, ...(errors.lastName ? styles.inputError : {}) }, children: [jsxRuntime.jsx("span", { style: { marginRight: '12px', opacity: 0.7, color: '#666' }, children: "\uD83D\uDC64" }), jsxRuntime.jsx("input", { type: "text", style: styles.input, placeholder: "Enter your last name", value: formData.lastName, onChange: (e) => updateField('lastName', e.target.value), autoComplete: "family-name", disabled: isLoading, required: true })] }), errors.lastName && jsxRuntime.jsx("div", { style: styles.errorText, children: errors.lastName })] }), jsxRuntime.jsxs("div", { style: styles.inputGroup, children: [jsxRuntime.jsx("label", { style: styles.inputLabel, children: "Email Address *" }), jsxRuntime.jsxs("div", { style: { ...styles.inputContainer, ...(errors.email ? styles.inputError : {}) }, children: [jsxRuntime.jsx("span", { style: { marginRight: '12px', opacity: 0.7, color: '#666' }, children: "\u2709" }), jsxRuntime.jsx("input", { type: "email", style: styles.input, placeholder: "Enter your email", value: formData.email, onChange: (e) => updateField('email', e.target.value), autoCapitalize: "none", autoComplete: "email", disabled: isLoading, required: true })] }), errors.email && jsxRuntime.jsx("div", { style: styles.errorText, children: errors.email })] }), jsxRuntime.jsxs("div", { style: styles.inputGroup, children: [jsxRuntime.jsx("label", { style: styles.inputLabel, children: "Password *" }), jsxRuntime.jsxs("div", { style: { ...styles.inputContainer, ...(errors.password ? styles.inputError : {}) }, children: [jsxRuntime.jsx("span", { style: { marginRight: '12px', opacity: 0.7, color: '#666' }, children: "\uD83D\uDD12" }), jsxRuntime.jsx("input", { type: showPassword ? 'text' : 'password', style: styles.input, placeholder: "Create a password", value: formData.password, onChange: (e) => updateField('password', e.target.value), autoComplete: "new-password", disabled: isLoading, required: true }), jsxRuntime.jsx("button", { type: "button", style: styles.eyeButton, onClick: () => setShowPassword(!showPassword), disabled: isLoading, children: showPassword ? '👁' : '👁‍🗨' })] }), errors.password && jsxRuntime.jsx("div", { style: styles.errorText, children: errors.password })] }), jsxRuntime.jsxs("div", { style: styles.inputGroup, children: [jsxRuntime.jsx("label", { style: styles.inputLabel, children: "Confirm Password *" }), jsxRuntime.jsxs("div", { style: { ...styles.inputContainer, ...(errors.confirmPassword ? styles.inputError : {}) }, children: [jsxRuntime.jsx("span", { style: { marginRight: '12px', opacity: 0.7, color: '#666' }, children: "\uD83D\uDD12" }), jsxRuntime.jsx("input", { type: showConfirmPassword ? 'text' : 'password', style: styles.input, placeholder: "Confirm your password", value: formData.confirmPassword, onChange: (e) => updateField('confirmPassword', e.target.value), autoComplete: "new-password", disabled: isLoading, required: true }), jsxRuntime.jsx("button", { type: "button", style: styles.eyeButton, onClick: () => setShowConfirmPassword(!showConfirmPassword), disabled: isLoading, children: showConfirmPassword ? '👁' : '👁‍🗨' })] }), errors.confirmPassword && jsxRuntime.jsx("div", { style: styles.errorText, children: errors.confirmPassword })] }), jsxRuntime.jsx("button", { type: "submit", style: {
+                return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { style: styles.logoSection, children: [logo && (typeof logo === 'string' ? (jsxRuntime.jsx("img", { src: processLogoUrl(logo), alt: `${appName} Logo`, style: styles.logo })) : (logo)), jsxRuntime.jsx("h1", { style: styles.title, children: "Create Account" }), jsxRuntime.jsxs("p", { style: styles.subtitle, children: ["Join ", appName, " today"] })] }), jsxRuntime.jsxs("form", { onSubmit: handleSubmit, children: [errors.general && (jsxRuntime.jsxs("div", { style: { ...styles.successContainer, backgroundColor: '#fef2f2', borderColor: '#fecaca' }, children: [jsxRuntime.jsx("span", { style: { color: '#ff4757', fontSize: '20px' }, children: "\u26A0" }), jsxRuntime.jsx("span", { style: { ...styles.successText, color: '#dc2626' }, children: errors.general })] })), jsxRuntime.jsxs("div", { style: styles.inputGroup, children: [jsxRuntime.jsx("label", { style: styles.inputLabel, children: "First Name *" }), jsxRuntime.jsxs("div", { style: { ...styles.inputContainer, ...(errors.name ? styles.inputError : {}) }, children: [jsxRuntime.jsx("span", { style: { marginRight: '12px', opacity: 0.7, color: '#666' }, children: "\uD83D\uDC64" }), jsxRuntime.jsx("input", { type: "text", style: styles.input, placeholder: "Enter your first name", value: formData.name, onChange: (e) => updateField('name', e.target.value), autoComplete: "given-name", disabled: isLoading, required: true })] }), errors.name && jsxRuntime.jsx("div", { style: styles.errorText, children: errors.name })] }), jsxRuntime.jsxs("div", { style: styles.inputGroup, children: [jsxRuntime.jsx("label", { style: styles.inputLabel, children: "Last Name *" }), jsxRuntime.jsxs("div", { style: { ...styles.inputContainer, ...(errors.lastName ? styles.inputError : {}) }, children: [jsxRuntime.jsx("span", { style: { marginRight: '12px', opacity: 0.7, color: '#666' }, children: "\uD83D\uDC64" }), jsxRuntime.jsx("input", { type: "text", style: styles.input, placeholder: "Enter your last name", value: formData.lastName, onChange: (e) => updateField('lastName', e.target.value), autoComplete: "family-name", disabled: isLoading, required: true })] }), errors.lastName && jsxRuntime.jsx("div", { style: styles.errorText, children: errors.lastName })] }), jsxRuntime.jsxs("div", { style: styles.inputGroup, children: [jsxRuntime.jsx("label", { style: styles.inputLabel, children: "Email Address *" }), jsxRuntime.jsxs("div", { style: { ...styles.inputContainer, ...(errors.email ? styles.inputError : {}) }, children: [jsxRuntime.jsx("span", { style: { marginRight: '12px', opacity: 0.7, color: '#666' }, children: "\u2709" }), jsxRuntime.jsx("input", { type: "email", style: styles.input, placeholder: "Enter your email", value: formData.email, onChange: (e) => updateField('email', e.target.value), autoCapitalize: "none", autoComplete: "email", disabled: isLoading, required: true })] }), errors.email && jsxRuntime.jsx("div", { style: styles.errorText, children: errors.email })] }), jsxRuntime.jsxs("div", { style: styles.inputGroup, children: [jsxRuntime.jsx("label", { style: styles.inputLabel, children: "Password *" }), jsxRuntime.jsxs("div", { style: { ...styles.inputContainer, ...(errors.password ? styles.inputError : {}) }, children: [jsxRuntime.jsx("span", { style: { marginRight: '12px', opacity: 0.7, color: '#666' }, children: "\uD83D\uDD12" }), jsxRuntime.jsx("input", { type: showPassword ? 'text' : 'password', style: styles.input, placeholder: "Create a password", value: formData.password, onChange: (e) => updateField('password', e.target.value), autoComplete: "new-password", disabled: isLoading, required: true }), jsxRuntime.jsx("button", { type: "button", style: styles.eyeButton, onClick: () => setShowPassword(!showPassword), disabled: isLoading, children: showPassword ? '👁' : '👁‍🗨' })] }), errors.password && jsxRuntime.jsx("div", { style: styles.errorText, children: errors.password })] }), jsxRuntime.jsxs("div", { style: styles.inputGroup, children: [jsxRuntime.jsx("label", { style: styles.inputLabel, children: "Confirm Password *" }), jsxRuntime.jsxs("div", { style: { ...styles.inputContainer, ...(errors.confirmPassword ? styles.inputError : {}) }, children: [jsxRuntime.jsx("span", { style: { marginRight: '12px', opacity: 0.7, color: '#666' }, children: "\uD83D\uDD12" }), jsxRuntime.jsx("input", { type: showConfirmPassword ? 'text' : 'password', style: styles.input, placeholder: "Confirm your password", value: formData.confirmPassword, onChange: (e) => updateField('confirmPassword', e.target.value), autoComplete: "new-password", disabled: isLoading, required: true }), jsxRuntime.jsx("button", { type: "button", style: styles.eyeButton, onClick: () => setShowConfirmPassword(!showConfirmPassword), disabled: isLoading, children: showConfirmPassword ? '👁' : '👁‍🗨' })] }), errors.confirmPassword && jsxRuntime.jsx("div", { style: styles.errorText, children: errors.confirmPassword })] }), jsxRuntime.jsx("button", { type: "submit", style: {
                                         ...styles.button,
                                         opacity: isLoading ? 0.8 : 1,
                                         cursor: isLoading ? 'not-allowed' : 'pointer'