@formsnip/embed 1.1.1 → 1.1.2

package/dist/index.js

@@ -2,13 +2,22 @@
 
 var React = require('react');
 
-const ALLOWED_FILE_EXTENSIONS = '.jpg,.jpeg,.png,.gif,.webp,.svg,.pdf,.mp4,.mpeg,.mov,.avi,.webm,.mkv,.mp3,.wav,.ogg,.aac,.flac';
+const HONEYPOT_FIELD = '_fs_hp';
+const SUBMIT_TOKEN_FIELD = '_fs_token';
+
+const ALLOWED_FILE_EXTENSIONS = '.jpg,.jpeg,.png,.gif,.webp,.pdf,.mp4,.mpeg,.mov,.avi,.webm,.mkv,.mp3,.wav,.ogg,.aac,.flac';
 const MAX_TOTAL_FILE_SIZE = 15 * 1024 * 1024; // 15MB
 /**
  * Upload a file to R2 via presigned URL
  */
-async function uploadFile(file, formId, baseUrl) {
+async function uploadFile(file, formId, baseUrl, submitToken) {
     try {
+        if (!submitToken) {
+            return {
+                success: false,
+                error: 'Form session expired. Please reload and try again.',
+            };
+        }
         // Step 1: Get presigned upload URL
         const signResponse = await fetch(`${baseUrl}/uploads/sign`, {
             method: 'POST',
@@ -21,6 +30,7 @@ async function uploadFile(file, formId, baseUrl) {
                 contentType: file.type,
                 size: file.size,
                 formId,
+                [SUBMIT_TOKEN_FIELD]: submitToken,
             }),
         });
         if (!signResponse.ok) {
@@ -66,7 +76,7 @@ async function uploadFile(file, formId, baseUrl) {
 /**
  * Upload multiple files to R2
  */
-async function uploadFiles(files, formId, baseUrl) {
+async function uploadFiles(files, formId, baseUrl, submitToken) {
     // Check total size
     const totalSize = files.reduce((sum, file) => sum + file.size, 0);
     if (totalSize > MAX_TOTAL_FILE_SIZE) {
@@ -75,7 +85,7 @@ async function uploadFiles(files, formId, baseUrl) {
             errors: [`Total file size exceeds 15MB limit per submission`],
         };
     }
-    const results = await Promise.allSettled(files.map((file) => uploadFile(file, formId, baseUrl)));
+    const results = await Promise.allSettled(files.map((file) => uploadFile(file, formId, baseUrl, submitToken)));
     const fileKeys = [];
     const errors = [];
     results.forEach((result, index) => {
@@ -263,6 +273,7 @@ function injectBaseStyles() {
         '.fs-space-x-2>*+*{margin-left:0.5rem}',
         '.fs-outline-none{outline:none}',
         '.fs-hover-opacity:hover{opacity:0.9}',
+        '.formsnip-embed-ph::placeholder{color:var(--fs-placeholder-color,#9ca3af);opacity:1}',
     ].join('');
     const style = document.createElement('style');
     style.id = 'formsnip-base-styles';
@@ -298,6 +309,9 @@ function applyStyles(styles, customStyles) {
     if (customStyles.fontSize !== undefined) {
         result.fontSize = `${customStyles.fontSize}px`;
     }
+    if (customStyles.placeholderColor) {
+        result['--fs-placeholder-color'] = customStyles.placeholderColor;
+    }
     // Note: fullWidth is handled separately in the component, not here
     // to ensure proper display property handling
     return result;
@@ -335,6 +349,86 @@ function pushFormSnipSubmissionDataLayer(options) {
     }
 }
 
+const PHONE_COUNTRIES = [
+    { iso: 'AU', name: 'Australia', dial: '+61' },
+    { iso: 'AT', name: 'Austria', dial: '+43' },
+    { iso: 'BE', name: 'Belgium', dial: '+32' },
+    { iso: 'BR', name: 'Brazil', dial: '+55' },
+    { iso: 'CA', name: 'Canada', dial: '+1' },
+    { iso: 'CN', name: 'China', dial: '+86' },
+    { iso: 'DK', name: 'Denmark', dial: '+45' },
+    { iso: 'FI', name: 'Finland', dial: '+358' },
+    { iso: 'FR', name: 'France', dial: '+33' },
+    { iso: 'DE', name: 'Germany', dial: '+49' },
+    { iso: 'GR', name: 'Greece', dial: '+30' },
+    { iso: 'HK', name: 'Hong Kong', dial: '+852' },
+    { iso: 'IS', name: 'Iceland', dial: '+354' },
+    { iso: 'IN', name: 'India', dial: '+91' },
+    { iso: 'IE', name: 'Ireland', dial: '+353' },
+    { iso: 'IT', name: 'Italy', dial: '+39' },
+    { iso: 'JP', name: 'Japan', dial: '+81' },
+    { iso: 'LU', name: 'Luxembourg', dial: '+352' },
+    { iso: 'MX', name: 'Mexico', dial: '+52' },
+    { iso: 'NL', name: 'Netherlands', dial: '+31' },
+    { iso: 'NZ', name: 'New Zealand', dial: '+64' },
+    { iso: 'NO', name: 'Norway', dial: '+47' },
+    { iso: 'PL', name: 'Poland', dial: '+48' },
+    { iso: 'PT', name: 'Portugal', dial: '+351' },
+    { iso: 'SG', name: 'Singapore', dial: '+65' },
+    { iso: 'ZA', name: 'South Africa', dial: '+27' },
+    { iso: 'KR', name: 'South Korea', dial: '+82' },
+    { iso: 'ES', name: 'Spain', dial: '+34' },
+    { iso: 'SE', name: 'Sweden', dial: '+46' },
+    { iso: 'CH', name: 'Switzerland', dial: '+41' },
+    { iso: 'AE', name: 'United Arab Emirates', dial: '+971' },
+    { iso: 'GB', name: 'United Kingdom', dial: '+44' },
+    { iso: 'US', name: 'United States', dial: '+1' },
+];
+const PREFERRED_ISO_FOR_DIAL = {
+    '+1': 'US',
+    '+44': 'GB',
+};
+function defaultPhoneIso() {
+    try {
+        const region = new Intl.Locale(navigator.language).region;
+        if (region && PHONE_COUNTRIES.some((country) => country.iso === region)) {
+            return region;
+        }
+    }
+    catch {
+        /* ignore */
+    }
+    return 'DK';
+}
+function phoneCountryByIso(iso) {
+    return PHONE_COUNTRIES.find((country) => country.iso === iso) ?? PHONE_COUNTRIES.find((country) => country.iso === 'DK');
+}
+function formatPhoneValue(dial, national) {
+    const digits = national.replace(/[^\d\s()-]/g, '').trim();
+    if (!digits)
+        return '';
+    return `${dial} ${digits}`;
+}
+function parsePhoneValue(value, fallbackIso = 'DK') {
+    const trimmed = value.trim();
+    if (!trimmed.startsWith('+')) {
+        return { iso: fallbackIso, national: trimmed };
+    }
+    const match = trimmed.match(/^(\+\d{1,4})(?:\s+(.*))?$/);
+    if (!match) {
+        return { iso: fallbackIso, national: trimmed };
+    }
+    const dial = match[1];
+    const national = (match[2] ?? '').trim();
+    const matches = PHONE_COUNTRIES.filter((country) => country.dial === dial);
+    if (matches.length === 0) {
+        return { iso: fallbackIso, national: trimmed.replace(/^\+\d{1,4}\s*/, '') };
+    }
+    const preferred = PREFERRED_ISO_FOR_DIAL[dial];
+    const country = matches.find((item) => item.iso === preferred) ?? matches[0];
+    return { iso: country.iso, national };
+}
+
 /** Build rows from flat fields (full = own row, half = paired in row) */
 function buildRowsFromFields(fields) {
     const rows = [];
@@ -370,6 +464,8 @@ const FormSnip = ({ formId, baseUrl = DEFAULT_BASE_URL, onSuccess, onError, clas
     const [submitError, setSubmitError] = React.useState(null);
     const [submitSuccess, setSubmitSuccess] = React.useState(false);
     const [isSubmitting, setIsSubmitting] = React.useState(false);
+    const [submitToken, setSubmitToken] = React.useState('');
+    const [honeypot, setHoneypot] = React.useState('');
     React.useEffect(() => {
         // Inject base styles on mount (same as embed script)
         injectBaseStyles();
@@ -384,6 +480,7 @@ const FormSnip = ({ formId, baseUrl = DEFAULT_BASE_URL, onSuccess, onError, clas
                     // Form data includes embedStyles from the database
                     // These styles are set in the EmbedForm page and stored in the Form model
                     setForm(json.data);
+                    setSubmitToken(json.data.submitToken || '');
                     // Parse URL query once for prefill support
                     let urlParams = null;
                     if (typeof window !== 'undefined') {
@@ -396,22 +493,27 @@ const FormSnip = ({ formId, baseUrl = DEFAULT_BASE_URL, onSuccess, onError, clas
                             return acc;
                         }
                         let initialValue = '';
-                        const prefillKey = field.urlPrefillParam;
+                        const prefillKey = field.id;
                         const canPrefillType = field.type === 'text' ||
                             field.type === 'email' ||
                             field.type === 'textarea' ||
                             field.type === 'number' ||
                             field.type === 'date' ||
                             field.type === 'datetime' ||
+                            field.type === 'time' ||
                             field.type === 'phone' ||
+                            field.type === 'website' ||
+                            field.type === 'choice' ||
                             field.type === 'hidden' ||
                             field.type === 'select';
                         // 1) Prefill prop (takes precedence over URL)
                         if (prefill && prefillKey && prefillKey.trim() !== '' && prefillKey in prefill) {
                             const v = prefill[prefillKey];
                             if (typeof v === 'string' && canPrefillType) {
-                                if (field.type === 'select' && Array.isArray(field.options) && !field.options.includes(v)) {
-                                    // Ignore invalid option values for selects
+                                const options = field.options || [];
+                                const optionField = field.type === 'select' || field.type === 'choice';
+                                if (optionField && options.length > 0 && !options.includes(v)) {
+                                    // Ignore invalid option values
                                 }
                                 else {
                                     initialValue = v;
@@ -423,8 +525,10 @@ const FormSnip = ({ formId, baseUrl = DEFAULT_BASE_URL, onSuccess, onError, clas
                             const v = urlParams.get(prefillKey);
                             if (v !== null && v !== '') {
                                 if (canPrefillType) {
-                                    if (field.type === 'select' && Array.isArray(field.options) && !field.options.includes(v)) {
-                                        // Ignore invalid option values for selects
+                                    const options = field.options || [];
+                                    const optionField = field.type === 'select' || field.type === 'choice';
+                                    if (optionField && options.length > 0 && !options.includes(v)) {
+                                        // Ignore invalid option values
                                     }
                                     else {
                                         initialValue = v;
@@ -477,7 +581,7 @@ const FormSnip = ({ formId, baseUrl = DEFAULT_BASE_URL, onSuccess, onError, clas
             delete newErrors[fieldId];
             return newErrors;
         });
-        const result = await uploadFiles(files, formId, baseUrl);
+        const result = await uploadFiles(files, formId, baseUrl, submitToken);
         setUploadingFiles((prev) => ({ ...prev, [fieldId]: false }));
         if (result.success && result.fileKeys && result.fileKeys.length > 0) {
             const existingFileKeys = Array.isArray(formData[fieldId])
@@ -501,6 +605,16 @@ const FormSnip = ({ formId, baseUrl = DEFAULT_BASE_URL, onSuccess, onError, clas
         setSubmitSuccess(false);
         setIsSubmitting(true);
         try {
+            const pageUrl = new URL(window.location.href);
+            const payload = {
+                ...formData,
+                [SUBMIT_TOKEN_FIELD]: submitToken,
+                [HONEYPOT_FIELD]: honeypot,
+                _fs_page: pageUrl.href,
+                _fs_utm_source: pageUrl.searchParams.get('utm_source') || undefined,
+                _fs_utm_medium: pageUrl.searchParams.get('utm_medium') || undefined,
+                _fs_utm_campaign: pageUrl.searchParams.get('utm_campaign') || undefined,
+            };
             const response = await fetch(`${baseUrl}/submissions/create-submission/${formId}`, {
                 method: 'POST',
                 headers: {
@@ -508,7 +622,7 @@ const FormSnip = ({ formId, baseUrl = DEFAULT_BASE_URL, onSuccess, onError, clas
                     'X-Requested-With': 'XMLHttpRequest',
                 },
                 credentials: 'include',
-                body: JSON.stringify(formData),
+                body: JSON.stringify(payload),
             });
             const json = await response.json();
             if (response.ok && (json.success === undefined || json.success === true)) {
@@ -520,6 +634,11 @@ const FormSnip = ({ formId, baseUrl = DEFAULT_BASE_URL, onSuccess, onError, clas
                 if (onSuccess) {
                     onSuccess(json.data);
                 }
+                const redirectUrl = form?.validation?.redirectUrl?.trim();
+                if (redirectUrl && /^https?:\/\//i.test(redirectUrl)) {
+                    window.location.assign(redirectUrl);
+                    return;
+                }
                 // Reset form
                 const emptyData = Object.keys(formData).reduce((acc, key) => {
                     const field = form?.fields.find((f) => f.id === key);
@@ -529,6 +648,15 @@ const FormSnip = ({ formId, baseUrl = DEFAULT_BASE_URL, onSuccess, onError, clas
                 setFormData(emptyData);
                 setSelectedFiles({});
                 setUploadErrors({});
+                setHoneypot('');
+                try {
+                    const refresh = await fetch(`${baseUrl}/forms/get-form/${formId}`);
+                    const refreshJson = await refresh.json();
+                    if (refreshJson?.data?.submitToken) {
+                        setSubmitToken(refreshJson.data.submitToken);
+                    }
+                }
+                catch (_) { }
             }
             else {
                 const errorMsg = json.message || 'Submission failed';
@@ -553,6 +681,7 @@ const FormSnip = ({ formId, baseUrl = DEFAULT_BASE_URL, onSuccess, onError, clas
         // Use embedStyles from database (set in EmbedForm page)
         const fieldStyles = form?.embedStyles?.field || {};
         const isRequired = field.required === true;
+        const inputStyle = applyStyles({}, fieldStyles);
         const commonProps = {
             id: `field-${field.id}`,
             name: field.id,
@@ -560,8 +689,8 @@ const FormSnip = ({ formId, baseUrl = DEFAULT_BASE_URL, onSuccess, onError, clas
             onChange: (e) => handleInputChange(field.id, e.target.value),
             placeholder: field.placeholder || '',
             required: isRequired,
-            style: applyStyles({}, fieldStyles),
-            className: field.type === 'textarea' ? CLASSES.textarea : CLASSES.input,
+            style: inputStyle,
+            className: `${field.type === 'textarea' ? CLASSES.textarea : CLASSES.input} formsnip-embed-ph`,
         };
         const labelStyle = {};
         if (fieldStyles.labelFontSize) {
@@ -570,18 +699,54 @@ const FormSnip = ({ formId, baseUrl = DEFAULT_BASE_URL, onSuccess, onError, clas
         if (field.type === 'hidden') {
             return (React.createElement("input", { type: "hidden", id: `field-${field.id}`, name: field.id, value: formData[field.id] || field.value || '' }));
         }
+        if (field.type === 'heading') {
+            return React.createElement("h2", { style: { margin: 0, fontSize: '1.5rem', fontWeight: 600 } }, field.label);
+        }
+        if (field.type === 'paragraph') {
+            return React.createElement("p", { style: { margin: 0, whiteSpace: 'pre-wrap', color: '#4b5563' } }, field.content || '');
+        }
+        if (field.type === 'divider') {
+            return React.createElement("hr", { style: { border: 0, borderTop: '1px solid #e5e7eb', margin: '0.25rem 0' } });
+        }
+        if (field.type === 'choice') {
+            const options = field.options && field.options.length > 0 ? field.options : ['Yes', 'No'];
+            return (React.createElement("div", { className: "fs-relative" },
+                !field.hideLabel && (React.createElement("label", { className: "fs-mb-2 fs-flex fs-w-full fs-items-center fs-justify-between fs-gap-2 fs-text-sm fs-text-gray-700", style: { fontWeight: 500, ...labelStyle } },
+                    React.createElement("span", { className: "fs-min-w-0 fs-flex-1" }, field.label),
+                    isRequired && React.createElement("span", { className: "fs-text-red-500 fs-flex-shrink-0", style: { lineHeight: 1 } }, "*"))),
+                options.map((option) => (React.createElement("label", { key: option, className: "fs-flex fs-items-center", style: { marginTop: '0.4rem' } },
+                    React.createElement("input", { type: "radio", name: field.id, value: option, checked: formData[field.id] === option, onChange: (event) => handleInputChange(field.id, event.target.value), required: isRequired }),
+                    React.createElement("span", { style: { marginLeft: '0.5rem' } }, option))))));
+        }
+        if (field.type === 'phone') {
+            const parsed = parsePhoneValue(formData[field.id] || '', defaultPhoneIso());
+            const country = phoneCountryByIso(parsed.iso);
+            return (React.createElement(React.Fragment, null,
+                !field.hideLabel && (React.createElement("label", { htmlFor: `field-${field.id}`, className: "fs-mb-2 fs-flex fs-w-full fs-items-center fs-justify-between fs-gap-2 fs-text-sm fs-text-gray-700", style: { fontWeight: 500, ...labelStyle } },
+                    React.createElement("span", { className: "fs-min-w-0 fs-flex-1" }, field.label),
+                    isRequired && React.createElement("span", { className: "fs-text-red-500 fs-flex-shrink-0", style: { lineHeight: 1 } }, "*"))),
+                React.createElement("div", { style: { display: 'flex', gap: '0.5rem' } },
+                    React.createElement("select", { "aria-label": "Country code", value: country.iso, onChange: (event) => {
+                            const next = phoneCountryByIso(event.target.value);
+                            handleInputChange(field.id, formatPhoneValue(next.dial, parsed.national));
+                        }, className: CLASSES.input, style: { ...inputStyle, width: '8.5rem', flex: '0 0 auto' } }, PHONE_COUNTRIES.map((item) => (React.createElement("option", { key: item.iso, value: item.iso },
+                        item.dial,
+                        " ",
+                        item.name)))),
+                    React.createElement("input", { id: `field-${field.id}`, name: field.id, type: "tel", value: parsed.national, onChange: (event) => handleInputChange(field.id, formatPhoneValue(country.dial, event.target.value)), placeholder: field.placeholder || '12 34 56 78', required: isRequired, style: { ...inputStyle, flex: 1 }, className: `${CLASSES.input} formsnip-embed-ph` }))));
+        }
         // For checkbox and radio, return without extra wrapper
         if (field.type === 'checkbox') {
-            return (React.createElement("label", { className: "fs-flex fs-items-center" },
+            return (React.createElement("label", { className: "fs-flex fs-w-full fs-items-center fs-gap-2" },
                 React.createElement("input", { type: "checkbox", id: `field-${field.id}`, name: field.id, checked: String(formData[field.id]) === 'true' || formData[field.id] === 'on', onChange: (e) => handleInputChange(field.id, e.target.checked ? 'true' : 'false'), required: isRequired }),
-                React.createElement("span", { style: { marginLeft: '0.5rem' } }, field.label || field.placeholder || 'Check this box'),
-                isRequired && React.createElement("span", { className: "fs-text-red-500", style: { marginLeft: '0.25rem' } }, "*")));
+                !field.hideLabel && (React.createElement("span", { className: "fs-min-w-0 fs-flex-1", style: { marginLeft: '0.5rem' } }, field.label || field.placeholder || 'Check this box')),
+                isRequired && React.createElement("span", { className: "fs-text-red-500 fs-flex-shrink-0 fs-ml-auto", style: { lineHeight: 1 } }, "*")));
         }
         if (field.type === 'radio') {
             return (React.createElement("div", { className: "fs-relative" },
-                React.createElement("label", { className: "fs-text-sm fs-text-gray-700 fs-mb-2", style: { fontWeight: 500 } },
-                    field.label,
-                    isRequired && React.createElement("span", { className: "fs-text-red-500", style: { marginLeft: '0.25rem' } }, "*")),
+                !field.hideLabel && (React.createElement("label", { className: "fs-mb-2 fs-flex fs-w-full fs-items-center fs-justify-between fs-gap-2 fs-text-sm fs-text-gray-700", style: { fontWeight: 500 } },
+                    React.createElement("span", { className: "fs-min-w-0 fs-flex-1" }, field.label),
+                    isRequired && React.createElement("span", { className: "fs-text-red-500 fs-flex-shrink-0", style: { lineHeight: 1 } }, "*"))),
                 React.createElement("label", { className: "fs-flex fs-items-center" },
                     React.createElement("input", { type: "radio", id: `field-${field.id}-yes`, name: field.id, value: "yes", checked: formData[field.id] === 'yes', onChange: (e) => handleInputChange(field.id, e.target.value), required: isRequired }),
                     React.createElement("span", { style: { marginLeft: '0.5rem' } }, " Yes")),
@@ -596,19 +761,19 @@ const FormSnip = ({ formId, baseUrl = DEFAULT_BASE_URL, onSuccess, onError, clas
                     ? [formData[field.id]]
                     : [];
             return (React.createElement(React.Fragment, null,
-                React.createElement("label", { htmlFor: `field-${field.id}`, className: "fs-text-sm fs-text-gray-700 fs-mb-2", style: { fontWeight: 500 } },
-                    field.label,
-                    isRequired && React.createElement("span", { className: "fs-text-red-500", style: { marginLeft: '0.25rem' } }, "*")),
+                !field.hideLabel && (React.createElement("label", { htmlFor: `field-${field.id}`, className: "fs-mb-2 fs-flex fs-w-full fs-items-center fs-justify-between fs-gap-2 fs-text-sm fs-text-gray-700", style: { fontWeight: 500 } },
+                    React.createElement("span", { className: "fs-min-w-0 fs-flex-1" }, field.label),
+                    isRequired && React.createElement("span", { className: "fs-text-red-500 fs-flex-shrink-0", style: { lineHeight: 1 } }, "*"))),
                 React.createElement(FileUpload, { id: field.id, required: isRequired, disabled: uploadingFiles[field.id], multiple: true, onFilesChange: (files) => handleFilesChange(field.id, files), uploadedFiles: uploadedFileKeys, uploading: uploadingFiles[field.id], error: uploadErrors[field.id] })));
         }
         // For other fields, use minimal wrapper structure
         return (React.createElement(React.Fragment, null,
-            React.createElement("label", { htmlFor: `field-${field.id}`, className: "fs-text-sm fs-text-gray-700 fs-mb-2", style: { fontWeight: 500, ...labelStyle } },
-                field.label,
-                isRequired && React.createElement("span", { className: "fs-text-red-500", style: { marginLeft: '0.25rem' } }, "*")),
-            React.createElement("div", { className: CLASSES.inner }, field.type === 'select' ? (React.createElement("select", { id: `field-${field.id}`, name: field.id, value: formData[field.id] || '', onChange: (e) => handleInputChange(field.id, e.target.value), required: isRequired, style: applyStyles({}, fieldStyles), className: CLASSES.input },
+            !field.hideLabel && (React.createElement("label", { htmlFor: `field-${field.id}`, className: "fs-mb-2 fs-flex fs-w-full fs-items-center fs-justify-between fs-gap-2 fs-text-sm fs-text-gray-700", style: { fontWeight: 500, ...labelStyle } },
+                React.createElement("span", { className: "fs-min-w-0 fs-flex-1" }, field.label),
+                isRequired && React.createElement("span", { className: "fs-text-red-500 fs-flex-shrink-0", style: { lineHeight: 1 } }, "*"))),
+            React.createElement("div", { className: CLASSES.inner }, field.type === 'select' ? (React.createElement("select", { id: `field-${field.id}`, name: field.id, value: formData[field.id] || '', onChange: (e) => handleInputChange(field.id, e.target.value), required: isRequired, style: inputStyle, className: `${CLASSES.input} formsnip-embed-ph` },
                 React.createElement("option", { value: "" }, field.placeholder || 'Select an option'),
-                field.options?.map((option, index) => (React.createElement("option", { key: index, value: option }, option))))) : field.type === 'textarea' ? (React.createElement("textarea", { ...commonProps, rows: 4 })) : field.type === 'phone' ? (React.createElement("input", { type: "tel", ...commonProps })) : field.type === 'datetime' ? (React.createElement("input", { type: "datetime-local", ...commonProps })) : (React.createElement("input", { type: field.type || 'text', ...commonProps })))));
+                field.options?.map((option, index) => (React.createElement("option", { key: index, value: option }, option))))) : field.type === 'textarea' ? (React.createElement("textarea", { ...commonProps, rows: 4 })) : field.type === 'phone' ? (React.createElement("input", { type: "tel", ...commonProps })) : field.type === 'website' ? (React.createElement("input", { type: "url", ...commonProps })) : field.type === 'time' ? (React.createElement("input", { type: "time", ...commonProps })) : field.type === 'datetime' ? (React.createElement("input", { type: "datetime-local", ...commonProps })) : (React.createElement("input", { type: field.type || 'text', ...commonProps })))));
     };
     if (loading) {
         const content = (React.createElement("div", { className: "fs-text-center", style: { padding: '2rem 0' } },
@@ -637,6 +802,14 @@ const FormSnip = ({ formId, baseUrl = DEFAULT_BASE_URL, onSuccess, onError, clas
                 marginBottom: '1rem',
             } }, form.validation?.confirmationText || 'Thank you! Your submission has been received.')),
         React.createElement("form", { id: "formsnip-form", onSubmit: handleSubmit, className: CLASSES.form },
+            React.createElement("input", { type: "text", name: HONEYPOT_FIELD, value: honeypot, onChange: (e) => setHoneypot(e.target.value), tabIndex: -1, autoComplete: "off", "aria-hidden": "true", style: {
+                    position: 'absolute',
+                    left: '-9999px',
+                    height: 0,
+                    width: 0,
+                    opacity: 0,
+                    overflow: 'hidden',
+                } }),
             form.fields.filter((f) => f.isActive !== false && f.type === 'hidden').map((field) => (React.createElement(React.Fragment, { key: field.id }, renderField(field)))),
             buildRowsFromFields(form.fields.filter((f) => f.isActive !== false && f.type !== 'hidden')).map((row, rowIdx) => row.length === 1 ? (React.createElement("div", { key: row[0].id, style: { display: 'flex', flexDirection: 'column' } }, renderField(row[0]))) : (React.createElement("div", { key: `row-${rowIdx}`, style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1.25rem' } }, row.map((field) => (React.createElement("div", { key: field.id, style: { display: 'flex', flexDirection: 'column' } }, renderField(field))))))),
             React.createElement("button", { type: "submit", disabled: isSubmitting, className: CLASSES.button, style: {