funuicss 3.8.8 → 3.8.9

package/ui/form/Form.js

@@ -97,10 +97,44 @@ var react_1 = __importStar(require("react"));
 var Button_1 = __importDefault(require("../button/Button"));
 var Input_1 = __importDefault(require("../input/Input"));
 var Flex_1 = __importDefault(require("../flex/Flex"));
-var Div_1 = __importDefault(require("../div/Div"));
 var Text_1 = __importDefault(require("../text/Text"));
 var pi_1 = require("react-icons/pi");
-// Custom Checkbox Component
+var componentUtils_1 = require("../../utils/componentUtils");
+var theme_1 = require("../theme/theme");
+// Helper function to parse JSON input
+var parseJsonInput = function (input, defaultValue) {
+    if (input === undefined || input === null) {
+        return defaultValue;
+    }
+    // If it's already the correct type, return as is
+    if (typeof input !== 'string') {
+        return input;
+    }
+    try {
+        // Try to parse as JSON
+        var parsed = JSON.parse(input);
+        return parsed;
+    }
+    catch (error) {
+        console.warn('Failed to parse JSON input:', input, error);
+        // If parsing fails, try to interpret as a string that might be valid
+        try {
+            // Try to handle common cases like arrays or objects without quotes
+            var trimmed = input.trim();
+            if (trimmed.startsWith('[') && trimmed.endsWith(']')) {
+                return JSON.parse(trimmed);
+            }
+            else if (trimmed.startsWith('{') && trimmed.endsWith('}')) {
+                return JSON.parse(trimmed);
+            }
+        }
+        catch (e) {
+            // If still fails, return default
+        }
+        return defaultValue;
+    }
+};
+// Custom Checkbox Component (unchanged)
 var FormCheckbox = function (_a) {
     var label = _a.label, checked = _a.checked, onChange = _a.onChange, disabled = _a.disabled, required = _a.required, value = _a.value, id = _a.id;
     return (react_1.default.createElement("label", { className: "funui_form-checkbox", style: {
@@ -110,12 +144,19 @@ var FormCheckbox = function (_a) {
             cursor: disabled ? 'not-allowed' : 'pointer',
             userSelect: 'none',
             width: 'fit-content',
+            padding: '0.25rem 0',
         } },
-        react_1.default.createElement("input", { type: "checkbox", id: id, checked: checked, onChange: function (e) { return !disabled && onChange(e.target.checked); }, disabled: disabled, required: required, value: value, style: { display: 'none' } }),
+        react_1.default.createElement("input", { type: "checkbox", id: id, checked: checked, onChange: function (e) { return !disabled && onChange(e.target.checked); }, disabled: disabled, required: required, value: value, style: {
+                position: 'absolute',
+                opacity: 0,
+                width: 0,
+                height: 0,
+                pointerEvents: 'none'
+            } }),
         react_1.default.createElement("div", { className: "funui_form-checkbox-box", style: {
                 width: '1.25rem',
                 height: '1.25rem',
-                border: checked ? '2px solid var(--primary)' : '2px solid var(--border)',
+                border: checked ? '2px solid var(--primary)' : '2px solid var(--borderColor)',
                 borderRadius: '0.25rem',
                 backgroundColor: checked ? 'var(--primary)' : 'transparent',
                 position: 'relative',
@@ -124,17 +165,22 @@ var FormCheckbox = function (_a) {
                 alignItems: 'center',
                 justifyContent: 'center',
                 flexShrink: 0,
-            } }, checked && (react_1.default.createElement("div", { style: {
-                width: '0.75rem',
-                height: '0.75rem',
-                backgroundColor: 'white',
-                borderRadius: '0.125rem',
-            } }))),
-        label && (react_1.default.createElement("span", { className: "funui_form-checkbox-label", style: { fontSize: '0.875rem' } },
+            } }, checked && (react_1.default.createElement("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: {
+                stroke: 'white',
+                strokeWidth: '2',
+                strokeLinecap: 'round',
+                strokeLinejoin: 'round',
+            } },
+            react_1.default.createElement("path", { d: "M3 7L6 10L11 4" })))),
+        label && (react_1.default.createElement("span", { className: "funui_form-checkbox-label", style: {
+                fontSize: '0.875rem',
+                color: disabled ? 'var(--text-muted)' : 'var(--text)',
+                fontWeight: checked ? '500' : '400',
+            } },
             label,
             required && ' *'))));
 };
-// Custom Radio Component
+// Custom Radio Component (unchanged)
 var FormRadio = function (_a) {
     var label = _a.label, checked = _a.checked, onChange = _a.onChange, disabled = _a.disabled, required = _a.required, value = _a.value, id = _a.id;
     return (react_1.default.createElement("label", { className: "funui_form-radio", style: {
@@ -144,12 +190,19 @@ var FormRadio = function (_a) {
             cursor: disabled ? 'not-allowed' : 'pointer',
             userSelect: 'none',
             width: 'fit-content',
+            padding: '0.25rem 0',
         } },
-        react_1.default.createElement("input", { type: "radio", id: id, checked: checked, onChange: function (e) { return !disabled && onChange(e.target.checked); }, disabled: disabled, required: required, value: value, style: { display: 'none' } }),
+        react_1.default.createElement("input", { type: "radio", id: id, checked: checked, onChange: function (e) { return !disabled && onChange(e.target.checked); }, disabled: disabled, required: required, value: value, style: {
+                position: 'absolute',
+                opacity: 0,
+                width: 0,
+                height: 0,
+                pointerEvents: 'none'
+            } }),
         react_1.default.createElement("div", { className: "funui_form-radio-circle", style: {
                 width: '1.25rem',
                 height: '1.25rem',
-                border: checked ? '2px solid var(--primary)' : '2px solid var(--border)',
+                border: checked ? '2px solid var(--primary)' : '2px solid var(--borderColor)',
                 borderRadius: '50%',
                 backgroundColor: 'transparent',
                 position: 'relative',
@@ -164,33 +217,30 @@ var FormRadio = function (_a) {
                 backgroundColor: 'var(--primary)',
                 borderRadius: '50%',
             } }))),
-        label && (react_1.default.createElement("span", { className: "funui_form-radio-label", style: { fontSize: '0.875rem' } },
+        label && (react_1.default.createElement("span", { className: "funui_form-radio-label", style: {
+                fontSize: '0.875rem',
+                color: disabled ? 'var(--text-muted)' : 'var(--text)',
+                fontWeight: checked ? '500' : '400',
+            } },
             label,
             required && ' *'))));
 };
-// Password Toggle
-var PasswordToggle = function (_a) {
-    var isVisible = _a.isVisible, onToggle = _a.onToggle, disabled = _a.disabled;
-    return (react_1.default.createElement("button", { type: "button", onClick: onToggle, disabled: disabled, className: "funui_form-password-toggle", style: {
-            background: 'none',
-            border: 'none',
-            padding: '0.5rem',
-            cursor: disabled ? 'not-allowed' : 'pointer',
-            opacity: disabled ? 0.5 : 1,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-        }, "aria-label": isVisible ? 'Hide password' : 'Show password' }, isVisible ? react_1.default.createElement(pi_1.PiEyeSlash, { size: 18 }) : react_1.default.createElement(pi_1.PiEye, { size: 18 })));
-};
-// WhatsApp Button Component
-var WhatsAppButton = function (_a) {
-    var onClick = _a.onClick, disabled = _a.disabled, _b = _a.text, text = _b === void 0 ? 'Send via WhatsApp' : _b;
-    return (react_1.default.createElement(Button_1.default, { type: "button", text: text, bg: "#25D366", color: "white", raised: true, startIcon: react_1.default.createElement(pi_1.PiWhatsappLogo, null), disabled: disabled, onClick: onClick, funcss: "funui_form-whatsapp-button" }));
-};
-// Function to format WhatsApp message
-var formatWhatsAppMessage = function (values, fields, headerMessage, footerMessage) {
+// Function to format WhatsApp message (unchanged)
+var formatWhatsAppMessage = function (values, fields, header, footer) {
+    // Build message lines
+    var message = '';
+    // Add header if provided
+    if (header) {
+        message += "".concat(header, "\n\n");
+    }
+    // Add form data
     var fieldLines = fields
-        .filter(function (field) { return values[field.name] !== undefined && values[field.name] !== null && values[field.name] !== ''; })
+        .filter(function (field) {
+        var value = values[field.name];
+        return value !== undefined && value !== null && value !== '' &&
+            !(Array.isArray(value) && value.length === 0) &&
+            !(typeof value === 'boolean' && !value);
+    })
         .map(function (field) {
         var value = values[field.name];
         var displayValue = value;
@@ -210,69 +260,92 @@ var formatWhatsAppMessage = function (values, fields, headerMessage, footerMessa
         return "*".concat(field.label || field.name, ":* ").concat(displayValue);
     })
         .join('\n');
-    var message = '';
-    if (headerMessage) {
-        message += "".concat(headerMessage, "\n\n");
-    }
     message += fieldLines;
-    if (footerMessage) {
-        message += "\n\n".concat(footerMessage);
+    // Add footer if provided
+    if (footer) {
+        message += "\n\n".concat(footer);
     }
     return encodeURIComponent(message);
 };
 // Main Form Component
 var Form = function (_a) {
-    var fields = _a.fields, onSubmit = _a.onSubmit, _b = _a.defaultValues, defaultValues = _b === void 0 ? {} : _b, _c = _a.submitText, submitText = _c === void 0 ? 'Submit' : _c, _d = _a.resetText, resetText = _d === void 0 ? 'Reset' : _d, _e = _a.showReset, showReset = _e === void 0 ? true : _e, _f = _a.isLoading, isLoading = _f === void 0 ? false : _f, _g = _a.className, className = _g === void 0 ? '' : _g, _h = _a.layout, layout = _h === void 0 ? 'vertical' : _h, _j = _a.gap, gap = _j === void 0 ? '1.5rem' : _j, whatsappIntegration = _a.whatsappIntegration;
+    var fields = _a.fields, onSubmit = _a.onSubmit, _b = _a.defaultValues, defaultValues = _b === void 0 ? {} : _b, _c = _a.submitText, submitText = _c === void 0 ? 'Submit' : _c, _d = _a.submitBg, submitBg = _d === void 0 ? 'primary' : _d, submitPrefix = _a.submitPrefix, submitSuffix = _a.submitSuffix, _e = _a.resetText, resetText = _e === void 0 ? 'Reset' : _e, _f = _a.showReset, showReset = _f === void 0 ? true : _f, _g = _a.isLoading, isLoading = _g === void 0 ? false : _g, _h = _a.className, className = _h === void 0 ? '' : _h, _j = _a.layout, layout = _j === void 0 ? 'vertical' : _j, _k = _a.gap, gap = _k === void 0 ? '1.5rem' : _k, title = _a.title, titleSize = _a.titleSize, titleColor = _a.titleColor, description = _a.description, descriptionSize = _a.descriptionSize, descriptionColor = _a.descriptionColor, whatsappContact = _a.whatsappContact, width = _a.width, centered = _a.centered, whatsappHeader = _a.whatsappHeader, whatsappFooter = _a.whatsappFooter, _l = _a.fullWidth, fullWidth = _l === void 0 ? true : _l, _m = _a.variant, variant = _m === void 0 ? '' : _m;
+    // Use theme variant
+    var themeVariant = (0, theme_1.useVariant)().variant;
+    // Use component configuration with variant
+    var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Form', variant).mergeWithLocal;
+    // Parse JSON inputs
+    var parsedFields = (0, react_1.useMemo)(function () { return parseJsonInput(fields, []); }, [fields]);
+    var parsedDefaultValues = (0, react_1.useMemo)(function () { return parseJsonInput(defaultValues, {}); }, [defaultValues]);
+    // Create local props for configuration
+    var localProps = {
+        fields: parsedFields,
+        onSubmit: onSubmit,
+        defaultValues: parsedDefaultValues,
+        submitText: submitText,
+        submitBg: submitBg,
+        submitPrefix: submitPrefix,
+        submitSuffix: submitSuffix,
+        resetText: resetText,
+        showReset: showReset,
+        isLoading: isLoading,
+        className: className,
+        layout: layout,
+        gap: gap,
+        title: title,
+        titleSize: titleSize,
+        titleColor: titleColor,
+        description: description,
+        descriptionSize: descriptionSize,
+        descriptionColor: descriptionColor,
+        whatsappContact: whatsappContact,
+        width: width,
+        centered: centered,
+        whatsappHeader: whatsappHeader,
+        whatsappFooter: whatsappFooter,
+        fullWidth: fullWidth,
+        variant: variant,
+    };
+    // Merge with theme configuration
+    var mergedProps = mergeWithLocal(localProps).props;
+    // Destructure merged props with defaults
+    var _o = mergedProps.fields, finalFields = _o === void 0 ? parsedFields : _o, _p = mergedProps.onSubmit, finalOnSubmit = _p === void 0 ? onSubmit : _p, _q = mergedProps.defaultValues, finalDefaultValues = _q === void 0 ? parsedDefaultValues : _q, _r = mergedProps.submitText, finalSubmitText = _r === void 0 ? submitText : _r, _s = mergedProps.submitBg, finalSubmitBg = _s === void 0 ? submitBg : _s, _t = mergedProps.submitPrefix, finalSubmitPrefix = _t === void 0 ? submitPrefix : _t, _u = mergedProps.submitSuffix, finalSubmitSuffix = _u === void 0 ? submitSuffix : _u, _v = mergedProps.resetText, finalResetText = _v === void 0 ? resetText : _v, _w = mergedProps.showReset, finalShowReset = _w === void 0 ? showReset : _w, _x = mergedProps.isLoading, finalIsLoading = _x === void 0 ? isLoading : _x, _y = mergedProps.className, finalClassName = _y === void 0 ? className : _y, _z = mergedProps.layout, finalLayout = _z === void 0 ? layout : _z, _0 = mergedProps.gap, finalGap = _0 === void 0 ? gap : _0, _1 = mergedProps.title, finalTitle = _1 === void 0 ? title : _1, _2 = mergedProps.titleSize, finalTitleSize = _2 === void 0 ? titleSize : _2, _3 = mergedProps.titleColor, finalTitleColor = _3 === void 0 ? titleColor : _3, _4 = mergedProps.description, finalDescription = _4 === void 0 ? description : _4, _5 = mergedProps.descriptionSize, finalDescriptionSize = _5 === void 0 ? descriptionSize : _5, _6 = mergedProps.descriptionColor, finalDescriptionColor = _6 === void 0 ? descriptionColor : _6, _7 = mergedProps.whatsappContact, finalWhatsappContact = _7 === void 0 ? whatsappContact : _7, _8 = mergedProps.width, finalWidth = _8 === void 0 ? width : _8, _9 = mergedProps.centered, finalCentered = _9 === void 0 ? centered : _9, _10 = mergedProps.whatsappHeader, finalWhatsappHeader = _10 === void 0 ? whatsappHeader : _10, _11 = mergedProps.whatsappFooter, finalWhatsappFooter = _11 === void 0 ? whatsappFooter : _11, _12 = mergedProps.fullWidth, finalFullWidth = _12 === void 0 ? fullWidth : _12;
     // State management
-    var _k = (0, react_1.useState)({}), formValues = _k[0], setFormValues = _k[1];
-    var _l = (0, react_1.useState)({}), errors = _l[0], setErrors = _l[1];
-    var _m = (0, react_1.useState)({}), touched = _m[0], setTouched = _m[1];
-    var _o = (0, react_1.useState)({}), showPassword = _o[0], setShowPassword = _o[1];
-    var _p = (0, react_1.useState)(false), isSubmitting = _p[0], setIsSubmitting = _p[1];
-    var _q = (0, react_1.useState)(''), whatsappPhone = _q[0], setWhatsappPhone = _q[1];
-    // Initialize form values
-    (0, react_1.useEffect)(function () {
+    var _13 = (0, react_1.useState)({}), errors = _13[0], setErrors = _13[1];
+    var _14 = (0, react_1.useState)({}), touched = _14[0], setTouched = _14[1];
+    var _15 = (0, react_1.useState)(function () {
+        // Initialize form values from defaultValues and field values
         var initialValues = {};
-        fields.forEach(function (field) {
-            var _a, _b;
-            // Priority: field.value > defaultValues > default based on type
+        finalFields.forEach(function (field) {
             if (field.value !== undefined) {
                 initialValues[field.name] = field.value;
             }
-            else if (defaultValues[field.name] !== undefined) {
-                initialValues[field.name] = defaultValues[field.name];
-            }
-            else if (field.type === 'checkbox') {
-                initialValues[field.name] = field.multiple ? [] : false;
-            }
-            else if (field.type === 'radio' && ((_a = field.options) === null || _a === void 0 ? void 0 : _a.length)) {
-                initialValues[field.name] = '';
-            }
-            else if (field.type === 'select' && ((_b = field.options) === null || _b === void 0 ? void 0 : _b.length)) {
-                initialValues[field.name] = '';
+            else if (finalDefaultValues[field.name] !== undefined) {
+                initialValues[field.name] = finalDefaultValues[field.name];
             }
             else {
-                initialValues[field.name] = '';
-            }
-            // Initialize password visibility
-            if (field.type === 'password') {
-                setShowPassword(function (prev) {
-                    var _a;
-                    return (__assign(__assign({}, prev), (_a = {}, _a[field.name] = false, _a)));
-                });
+                // Set default empty values
+                if (field.type === 'checkbox' && field.multiple) {
+                    initialValues[field.name] = [];
+                }
+                else if (field.type === 'checkbox') {
+                    initialValues[field.name] = false;
+                }
+                else {
+                    initialValues[field.name] = '';
+                }
             }
         });
-        setFormValues(initialValues);
-    }, [fields, defaultValues]);
-    // Initialize WhatsApp phone number
+        return initialValues;
+    }), formValues = _15[0], setFormValues = _15[1];
+    var _16 = (0, react_1.useState)(false), isSubmitting = _16[0], setIsSubmitting = _16[1];
+    // Update form values when defaultValues prop changes
     (0, react_1.useEffect)(function () {
-        if (whatsappIntegration === null || whatsappIntegration === void 0 ? void 0 : whatsappIntegration.phoneNumber) {
-            // Clean the phone number (remove +, spaces, etc.)
-            var cleanPhone = whatsappIntegration.phoneNumber.replace(/[\s+\-()]/g, '');
-            setWhatsappPhone(cleanPhone);
+        if (Object.keys(finalDefaultValues).length > 0) {
+            setFormValues(function (prev) { return (__assign(__assign({}, prev), finalDefaultValues)); });
         }
-    }, [whatsappIntegration]);
-    // Validate a single field
+    }, [finalDefaultValues]);
+    // Validate a single field (unchanged)
     var validateField = (0, react_1.useCallback)(function (field, value) {
         var _a, _b, _c, _d, _e;
         // Required validation
@@ -287,10 +360,10 @@ var Form = function (_a) {
                 return "".concat(field.label || field.name, " is required");
             }
         }
-        // Type-specific validations
-        if (value && value !== '') {
+        // Type-specific validations (only for non-empty values)
+        if (value && (typeof value !== 'string' || value !== '')) {
             // Email validation
-            if (field.type === 'email') {
+            if (field.type === 'email' && typeof value === 'string') {
                 var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                 if (!emailRegex.test(value)) {
                     return 'Please enter a valid email address';
@@ -298,7 +371,16 @@ var Form = function (_a) {
             }
             // Number validation
             if (field.type === 'number') {
-                var numValue = parseFloat(value);
+                var numValue = void 0;
+                if (typeof value === 'string') {
+                    numValue = parseFloat(value);
+                }
+                else if (typeof value === 'number') {
+                    numValue = value;
+                }
+                else {
+                    return 'Please enter a valid number';
+                }
                 if (isNaN(numValue)) {
                     return 'Please enter a valid number';
                 }
@@ -311,14 +393,14 @@ var Form = function (_a) {
                     return "Maximum value is ".concat(max);
                 }
             }
-            // Phone validation (basic)
-            if (field.type === 'tel') {
+            // Phone validation (basic) - only for strings
+            if (field.type === 'tel' && typeof value === 'string') {
                 var phoneRegex = /^[\+]?[1-9][\d]{0,17}$/;
                 if (!phoneRegex.test(value.replace(/[\s+\-()]/g, ''))) {
                     return 'Please enter a valid phone number';
                 }
             }
-            // Length validation
+            // Length validation for strings
             if (typeof value === 'string') {
                 var minLength = (_c = field.inputProps) === null || _c === void 0 ? void 0 : _c.minLength;
                 var maxLength = (_d = field.inputProps) === null || _d === void 0 ? void 0 : _d.maxLength;
@@ -329,53 +411,81 @@ var Form = function (_a) {
                     return "Maximum ".concat(maxLength, " characters allowed");
                 }
             }
-            // Pattern validation if provided
-            if ((_e = field.inputProps) === null || _e === void 0 ? void 0 : _e.pattern) {
-                var regex = new RegExp(field.inputProps.pattern);
-                if (!regex.test(value)) {
-                    return 'Invalid format';
+            // Pattern validation if provided - only for strings
+            if (((_e = field.inputProps) === null || _e === void 0 ? void 0 : _e.pattern) && typeof value === 'string') {
+                try {
+                    var regex = new RegExp(field.inputProps.pattern);
+                    if (!regex.test(value)) {
+                        return 'Invalid format';
+                    }
+                }
+                catch (error) {
+                    console.warn('Invalid regex pattern:', field.inputProps.pattern);
                 }
             }
         }
         return null;
     }, []);
-    // Handle field change
-    var handleFieldChange = (0, react_1.useCallback)(function (fieldName, value) {
-        var field = fields.find(function (f) { return f.name === fieldName; });
-        if (!field)
-            return;
+    // Validate form (unchanged)
+    var validateForm = (0, react_1.useCallback)(function () {
+        var newErrors = {};
+        var hasErrors = false;
+        finalFields.forEach(function (field) {
+            var value = formValues[field.name];
+            var error = validateField(field, value);
+            if (error) {
+                newErrors[field.name] = error;
+                hasErrors = true;
+            }
+        });
+        setErrors(newErrors);
+        return !hasErrors;
+    }, [finalFields, validateField, formValues]);
+    // Handle field change for checkboxes and radios (unchanged)
+    var handleFieldChange = (0, react_1.useCallback)(function (fieldName, newValue) {
+        // Update form values
         setFormValues(function (prev) {
             var _a;
-            var newValues = __assign(__assign({}, prev), (_a = {}, _a[fieldName] = value, _a));
-            // Validate on change if field has been touched
-            if (touched[fieldName]) {
-                var error_1 = validateField(field, value);
-                setErrors(function (prevErrors) {
-                    var _a;
-                    if (error_1) {
-                        return __assign(__assign({}, prevErrors), (_a = {}, _a[fieldName] = error_1, _a));
-                    }
-                    else {
-                        var newErrors = __assign({}, prevErrors);
-                        delete newErrors[fieldName];
-                        return newErrors;
-                    }
-                });
-            }
-            return newValues;
+            return (__assign(__assign({}, prev), (_a = {}, _a[fieldName] = newValue, _a)));
         });
-    }, [fields, touched, validateField]);
-    // Handle field blur
-    var handleFieldBlur = (0, react_1.useCallback)(function (fieldName) {
-        var field = fields.find(function (f) { return f.name === fieldName; });
+        // Update touched state
+        setTouched(function (prev) {
+            var _a;
+            return (__assign(__assign({}, prev), (_a = {}, _a[fieldName] = true, _a)));
+        });
+        // Validate the changed field
+        var field = finalFields.find(function (f) { return f.name === fieldName; });
         if (!field)
             return;
+        var error = validateField(field, newValue);
+        setErrors(function (prev) {
+            var _a;
+            if (error) {
+                return __assign(__assign({}, prev), (_a = {}, _a[fieldName] = error, _a));
+            }
+            else {
+                var newErrors = __assign({}, prev);
+                delete newErrors[fieldName];
+                return newErrors;
+            }
+        });
+    }, [finalFields, validateField]);
+    // Handle input field change (unchanged)
+    var handleInputChange = (0, react_1.useCallback)(function (fieldName, value) {
+        // Update form values
+        setFormValues(function (prev) {
+            var _a;
+            return (__assign(__assign({}, prev), (_a = {}, _a[fieldName] = value, _a)));
+        });
+        // Update touched state
         setTouched(function (prev) {
             var _a;
             return (__assign(__assign({}, prev), (_a = {}, _a[fieldName] = true, _a)));
         });
-        // Validate on blur
-        var value = formValues[fieldName];
+        // Validate the changed field
+        var field = finalFields.find(function (f) { return f.name === fieldName; });
+        if (!field)
+            return;
         var error = validateField(field, value);
         setErrors(function (prev) {
             var _a;
@@ -388,271 +498,227 @@ var Form = function (_a) {
                 return newErrors;
             }
         });
-    }, [fields, formValues, validateField]);
-    // Toggle password visibility
-    var togglePasswordVisibility = (0, react_1.useCallback)(function (fieldName) {
-        setShowPassword(function (prev) {
+    }, [finalFields, validateField]);
+    // Handle field blur (unchanged)
+    var handleFieldBlur = (0, react_1.useCallback)(function (fieldName) {
+        setTouched(function (prev) {
             var _a;
-            return (__assign(__assign({}, prev), (_a = {}, _a[fieldName] = !prev[fieldName], _a)));
+            return (__assign(__assign({}, prev), (_a = {}, _a[fieldName] = true, _a)));
         });
-    }, []);
-    // Handle WhatsApp submission
-    var handleWhatsAppSubmit = (0, react_1.useCallback)(function () {
-        if (!(whatsappIntegration === null || whatsappIntegration === void 0 ? void 0 : whatsappIntegration.enabled) || !whatsappPhone) {
-            console.error('WhatsApp integration not properly configured');
+        // Validate the field
+        var field = finalFields.find(function (f) { return f.name === fieldName; });
+        if (!field)
             return;
-        }
-        // Validate form before sending
-        var newErrors = {};
-        var hasErrors = false;
-        fields.forEach(function (field) {
-            var value = formValues[field.name];
-            var error = validateField(field, value);
+        var value = formValues[fieldName];
+        var error = validateField(field, value);
+        setErrors(function (prev) {
+            var _a;
             if (error) {
-                newErrors[field.name] = error;
-                hasErrors = true;
+                return __assign(__assign({}, prev), (_a = {}, _a[fieldName] = error, _a));
+            }
+            else {
+                var newErrors = __assign({}, prev);
+                delete newErrors[fieldName];
+                return newErrors;
             }
         });
-        setErrors(newErrors);
-        if (hasErrors) {
-            // Mark all fields as touched to show errors
-            var allTouched_1 = {};
-            fields.forEach(function (field) {
-                allTouched_1[field.name] = true;
-            });
-            setTouched(allTouched_1);
-            return;
-        }
-        // Format the message
-        var message = formatWhatsAppMessage(formValues, fields, whatsappIntegration.headerMessage, whatsappIntegration.footerMessage);
-        // Create WhatsApp URL
-        var whatsappUrl = "https://wa.me/".concat(whatsappPhone, "?text=").concat(message);
-        // Open WhatsApp in new tab
-        window.open(whatsappUrl, '_blank');
-    }, [whatsappIntegration, whatsappPhone, fields, formValues, validateField]);
-    // Handle form submission
+    }, [finalFields, validateField, formValues]);
+    // Handle form submission (unchanged)
     var handleSubmit = (0, react_1.useCallback)(function (e) { return __awaiter(void 0, void 0, void 0, function () {
-        var allTouched, newErrors, hasErrors, error_2;
+        var allTouched, isValid, firstErrorField, element, message, cleanPhone, whatsappUrl, error_1;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
                     e.preventDefault();
                     allTouched = {};
-                    fields.forEach(function (field) {
+                    finalFields.forEach(function (field) {
                         allTouched[field.name] = true;
                     });
                     setTouched(allTouched);
-                    newErrors = {};
-                    hasErrors = false;
-                    fields.forEach(function (field) {
-                        var value = formValues[field.name];
-                        var error = validateField(field, value);
-                        if (error) {
-                            newErrors[field.name] = error;
-                            hasErrors = true;
+                    isValid = validateForm();
+                    if (!isValid) {
+                        firstErrorField = Object.keys(errors)[0];
+                        if (firstErrorField) {
+                            element = document.getElementById("form-field-".concat(firstErrorField));
+                            element === null || element === void 0 ? void 0 : element.scrollIntoView({ behavior: 'smooth', block: 'center' });
                         }
-                    });
-                    setErrors(newErrors);
-                    if (hasErrors)
                         return [2 /*return*/];
-                    // Submit
+                    }
+                    // Get form data and submit
                     setIsSubmitting(true);
                     _a.label = 1;
                 case 1:
-                    _a.trys.push([1, 3, 4, 5]);
-                    return [4 /*yield*/, onSubmit(formValues)];
+                    _a.trys.push([1, 7, 8, 9]);
+                    if (!finalWhatsappContact) return [3 /*break*/, 4];
+                    message = formatWhatsAppMessage(formValues, finalFields, finalWhatsappHeader, finalWhatsappFooter);
+                    cleanPhone = finalWhatsappContact.replace(/[\s+\-()]/g, '');
+                    whatsappUrl = "https://wa.me/".concat(cleanPhone, "?text=").concat(message);
+                    window.open(whatsappUrl, '_blank');
+                    if (!finalOnSubmit) return [3 /*break*/, 3];
+                    return [4 /*yield*/, finalOnSubmit(formValues, true)];
                 case 2:
                     _a.sent();
-                    return [3 /*break*/, 5];
-                case 3:
-                    error_2 = _a.sent();
-                    console.error('Form submission error:', error_2);
-                    setErrors(function (prev) { return (__assign(__assign({}, prev), { _form: 'There was an error submitting the form. Please try again.' })); });
-                    return [3 /*break*/, 5];
+                    _a.label = 3;
+                case 3: return [3 /*break*/, 6];
                 case 4:
+                    if (!finalOnSubmit) return [3 /*break*/, 6];
+                    return [4 /*yield*/, finalOnSubmit(formValues, false)];
+                case 5:
+                    _a.sent();
+                    _a.label = 6;
+                case 6: return [3 /*break*/, 9];
+                case 7:
+                    error_1 = _a.sent();
+                    console.error('Form submission error:', error_1);
+                    setErrors(function (prev) { return (__assign(__assign({}, prev), { _form: 'There was an error submitting the form. Please try again.' })); });
+                    return [3 /*break*/, 9];
+                case 8:
                     setIsSubmitting(false);
                     return [7 /*endfinally*/];
-                case 5: return [2 /*return*/];
+                case 9: return [2 /*return*/];
             }
         });
-    }); }, [fields, formValues, validateField, onSubmit]);
-    // Handle form reset
+    }); }, [finalFields, validateForm, formValues, finalWhatsappContact, finalWhatsappHeader, finalWhatsappFooter, finalOnSubmit, errors]);
+    // Handle form reset (unchanged)
     var handleReset = (0, react_1.useCallback)(function () {
-        var resetValues = {};
-        fields.forEach(function (field) {
-            var _a, _b;
-            if (field.type === 'checkbox') {
-                resetValues[field.name] = field.multiple ? [] : false;
-            }
-            else if (field.type === 'radio' && ((_a = field.options) === null || _a === void 0 ? void 0 : _a.length)) {
-                resetValues[field.name] = '';
+        // Reset to initial values
+        var initialValues = {};
+        finalFields.forEach(function (field) {
+            if (field.value !== undefined) {
+                initialValues[field.name] = field.value;
             }
-            else if (field.type === 'select' && ((_b = field.options) === null || _b === void 0 ? void 0 : _b.length)) {
-                resetValues[field.name] = '';
+            else if (finalDefaultValues[field.name] !== undefined) {
+                initialValues[field.name] = finalDefaultValues[field.name];
             }
             else {
-                resetValues[field.name] = '';
+                if (field.type === 'checkbox' && field.multiple) {
+                    initialValues[field.name] = [];
+                }
+                else if (field.type === 'checkbox') {
+                    initialValues[field.name] = false;
+                }
+                else {
+                    initialValues[field.name] = '';
+                }
             }
         });
-        setFormValues(resetValues);
+        setFormValues(initialValues);
         setErrors({});
         setTouched({});
-        setShowPassword({});
-    }, [fields]);
-    // Get field status for Input component
+    }, [finalFields, finalDefaultValues]);
+    // Get field status for Input component (unchanged)
     var getFieldStatus = (0, react_1.useCallback)(function (fieldName) {
         var error = errors[fieldName];
         var isTouched = touched[fieldName];
-        var value = formValues[fieldName];
         if (error)
-            return 'error';
-        if (isTouched && !error && value && value !== '' && !(Array.isArray(value) && value.length === 0)) {
+            return 'danger';
+        if (isTouched && !error && formValues[fieldName] !== '') {
             return 'success';
         }
-        return 'default';
+        return undefined;
     }, [errors, touched, formValues]);
-    // Get column class based on layout and column setting
-    var getColumnClass = (0, react_1.useCallback)(function (field) {
-        if (layout === 'grid') {
-            switch (field.column) {
-                case 'half': return 'funui_form-col-half';
-                case 'third': return 'funui_form-col-third';
-                case 'quarter': return 'funui_form-col-quarter';
-                case 'full':
-                default: return 'funui_form-col-full';
+    // Check if form is valid for submission (unchanged)
+    var isFormValid = (0, react_1.useMemo)(function () {
+        // Check if any required fields are empty
+        var hasEmptyRequiredFields = finalFields.some(function (field) {
+            if (!field.required)
+                return false;
+            var value = formValues[field.name];
+            if (field.type === 'checkbox' && field.multiple) {
+                return !Array.isArray(value) || value.length === 0;
             }
-        }
-        return '';
-    }, [layout]);
-    // Render field based on type
+            if (field.type === 'checkbox') {
+                return value === false;
+            }
+            return !value || value === '';
+        });
+        // Check if there are any validation errors
+        var hasValidationErrors = Object.keys(errors).length > 0;
+        return !hasEmptyRequiredFields && !hasValidationErrors;
+    }, [finalFields, formValues, errors]);
+    // Submit button disabled state (unchanged)
+    var isSubmitDisabled = isSubmitting || finalIsLoading || !isFormValid;
+    // Check if WhatsApp is configured (unchanged)
+    var hasWhatsApp = !!finalWhatsappContact;
+    // Render field based on type (unchanged)
     var renderField = (0, react_1.useCallback)(function (field) {
-        var _a, _b, _c, _d, _e, _f;
-        var value = (_a = formValues[field.name]) !== null && _a !== void 0 ? _a : '';
+        var _a, _b, _c, _d, _e;
         var status = getFieldStatus(field.name);
         var error = errors[field.name];
         var isTouched = touched[field.name];
         var showError = error && isTouched;
+        var value = formValues[field.name];
         // Field wrapper classes
-        var wrapperClass = "funui_form-field ".concat(getColumnClass(field), " ").concat(showError ? 'funui_form-field-error' : '').trim();
+        var wrapperClass = "col min-w-200 field ".concat(showError ? 'field-error' : '').trim();
         // Helper text (error takes priority)
         var helperText = showError ? error : field.helperText;
-        var helperIcon = showError ? react_1.default.createElement(pi_1.PiWarningCircle, null) : status === 'success' ? react_1.default.createElement(pi_1.PiCheckCircle, null) : undefined;
+        // Generate unique ID for the input
+        var inputId = ((_a = field.inputProps) === null || _a === void 0 ? void 0 : _a.id) || "form-field-".concat(field.name);
         // Base props for Input component
-        var baseProps = __assign({ id: ((_b = field.inputProps) === null || _b === void 0 ? void 0 : _b.id) || field.name, name: field.name, label: field.label, placeholder: field.placeholder, helperText: helperText, status: status, disabled: field.disabled || isLoading, fullWidth: true }, field.inputProps);
+        var baseProps = __assign({ id: inputId, name: field.name, label: field.label, placeholder: field.placeholder, helperText: helperText, disabled: field.disabled || finalIsLoading, fullWidth: finalFullWidth }, field.inputProps);
+        // Only add status if it's not undefined
+        if (status !== undefined) {
+            baseProps.status = status;
+        }
         // Render based on field type
         switch (field.type) {
             case 'checkbox':
-                if ((_c = field.options) === null || _c === void 0 ? void 0 : _c.length) {
+                if ((_b = field.options) === null || _b === void 0 ? void 0 : _b.length) {
                     // Multiple checkboxes (checkbox group)
-                    return (react_1.default.createElement(Div_1.default, { key: field.name, className: wrapperClass },
-                        field.label && (react_1.default.createElement("div", { className: "funui_form-label", style: { marginBottom: '0.5rem' } },
+                    var checkedValues_1 = Array.isArray(value) ? value : [];
+                    return (react_1.default.createElement("div", { key: field.name, className: wrapperClass },
+                        field.label && (react_1.default.createElement("div", { className: "form-label", style: { marginBottom: '0.5rem' } },
                             react_1.default.createElement(Text_1.default, { text: field.label + (field.required ? ' *' : ''), size: "sm", color: "text", bold: true }))),
                         react_1.default.createElement(Flex_1.default, { direction: "column", gap: "0.5rem" }, field.options.map(function (option, index) {
-                            var isChecked = field.multiple
-                                ? Array.isArray(value) && value.includes(option.value)
-                                : value === option.value;
-                            return (react_1.default.createElement(FormCheckbox, { key: "".concat(field.name, "_").concat(index), id: "".concat(field.name, "_").concat(index), label: option.label, checked: !!isChecked, onChange: function (checked) {
-                                    if (field.multiple) {
-                                        var currentValues = Array.isArray(value) ? value : [];
-                                        if (checked) {
-                                            handleFieldChange(field.name, __spreadArray(__spreadArray([], currentValues, true), [option.value], false));
-                                        }
-                                        else {
-                                            handleFieldChange(field.name, currentValues.filter(function (v) { return v !== option.value; }));
-                                        }
+                            var isChecked = checkedValues_1.includes(option.value);
+                            return (react_1.default.createElement(FormCheckbox, { key: "".concat(field.name, "_").concat(index), id: "".concat(inputId, "_").concat(index), label: option.label, checked: isChecked, onChange: function (checked) {
+                                    if (checked) {
+                                        // Add value to array
+                                        var newValues = __spreadArray(__spreadArray([], checkedValues_1, true), [option.value], false);
+                                        handleFieldChange(field.name, newValues);
                                     }
                                     else {
-                                        handleFieldChange(field.name, checked ? option.value : false);
+                                        // Remove value from array
+                                        var newValues = checkedValues_1.filter(function (v) { return v !== option.value; });
+                                        handleFieldChange(field.name, newValues);
                                     }
-                                }, disabled: field.disabled || option.disabled || isLoading, required: field.required && index === 0, value: option.value }));
+                                }, disabled: field.disabled || option.disabled || finalIsLoading, required: field.required && index === 0, value: option.value }));
                         }))));
                 }
                 else {
                     // Single checkbox (boolean)
-                    return (react_1.default.createElement(Div_1.default, { key: field.name, className: wrapperClass },
-                        react_1.default.createElement(FormCheckbox, { label: field.label, checked: !!value, onChange: function (checked) { return handleFieldChange(field.name, checked); }, disabled: field.disabled || isLoading, required: field.required, id: field.name })));
+                    return (react_1.default.createElement("div", { key: field.name, className: wrapperClass },
+                        react_1.default.createElement(FormCheckbox, { label: field.label, checked: !!value, onChange: function (checked) { return handleFieldChange(field.name, checked); }, disabled: field.disabled || finalIsLoading, required: field.required, id: inputId })));
                 }
             case 'radio':
-                if (!((_d = field.options) === null || _d === void 0 ? void 0 : _d.length))
+                if (!((_c = field.options) === null || _c === void 0 ? void 0 : _c.length))
                     return null;
-                return (react_1.default.createElement(Div_1.default, { key: field.name, className: wrapperClass },
-                    field.label && (react_1.default.createElement("div", { className: "funui_form-label", style: { marginBottom: '0.5rem' } },
+                return (react_1.default.createElement("div", { key: field.name, className: wrapperClass },
+                    field.label && (react_1.default.createElement("div", { className: "form-label", style: { marginBottom: '0.5rem' } },
                         react_1.default.createElement(Text_1.default, { text: field.label + (field.required ? ' *' : ''), size: "sm", color: "text", bold: true }))),
-                    react_1.default.createElement(Flex_1.default, { direction: "column", gap: "0.5rem" }, field.options.map(function (option, index) { return (react_1.default.createElement(FormRadio, { key: "".concat(field.name, "_").concat(index), id: "".concat(field.name, "_").concat(index), label: option.label, checked: value === option.value, onChange: function () { return handleFieldChange(field.name, option.value); }, disabled: field.disabled || option.disabled || isLoading, required: field.required && index === 0, value: option.value })); }))));
+                    react_1.default.createElement(Flex_1.default, { direction: "column", gap: "0.5rem" }, field.options.map(function (option, index) { return (react_1.default.createElement(FormRadio, { key: "".concat(field.name, "_").concat(index), id: "".concat(inputId, "_").concat(index), label: option.label, checked: value === option.value, onChange: function () { return handleFieldChange(field.name, option.value); }, disabled: field.disabled || option.disabled || finalIsLoading, required: field.required && index === 0, value: option.value })); }))));
             case 'textarea':
-                return (react_1.default.createElement(Div_1.default, { key: field.name, className: wrapperClass },
-                    react_1.default.createElement(Input_1.default, { multiline: true, rows: ((_e = field.inputProps) === null || _e === void 0 ? void 0 : _e.rows) || 4, value: value, onChange: function (e) { return handleFieldChange(field.name, e.target.value); }, onBlur: function () { return handleFieldBlur(field.name); } })));
+                return (react_1.default.createElement("div", { key: field.name, className: wrapperClass },
+                    react_1.default.createElement(Input_1.default, __assign({ multiline: true, rows: ((_d = field.inputProps) === null || _d === void 0 ? void 0 : _d.rows) || 4, value: value || '', onChange: function (e) { return handleInputChange(field.name, e.target.value); }, onBlur: function () { return handleFieldBlur(field.name); } }, baseProps))));
             case 'select':
-                return (react_1.default.createElement(Div_1.default, { key: field.name, className: wrapperClass },
-                    react_1.default.createElement(Input_1.default, { select: true, options: ((_f = field.options) === null || _f === void 0 ? void 0 : _f.map(function (opt) { return ({ text: opt.label, value: opt.value }); })) || [], value: value, onChange: function (e) { return handleFieldChange(field.name, e.target.value); }, onBlur: function () { return handleFieldBlur(field.name); } })));
-            case 'password':
-                return (react_1.default.createElement(Div_1.default, { key: field.name, className: wrapperClass },
-                    react_1.default.createElement(Input_1.default, { type: showPassword[field.name] ? 'text' : 'password', value: value, onChange: function (e) { return handleFieldChange(field.name, e.target.value); }, onBlur: function () { return handleFieldBlur(field.name); }, endIcon: react_1.default.createElement(PasswordToggle, { isVisible: !!showPassword[field.name], onToggle: function () { return togglePasswordVisibility(field.name); }, disabled: field.disabled || isLoading }) })));
+                return (react_1.default.createElement("div", { key: field.name, className: wrapperClass },
+                    react_1.default.createElement(Input_1.default, __assign({ select: true, options: ((_e = field.options) === null || _e === void 0 ? void 0 : _e.map(function (opt) { return ({ text: opt.label, value: opt.value }); })) || [], value: value || '', onChange: function (e) { return handleInputChange(field.name, e.target.value); }, onBlur: function () { return handleFieldBlur(field.name); } }, baseProps))));
             default:
-                // text, email, number, tel, date, file
-                return (react_1.default.createElement(Div_1.default, { key: field.name, className: wrapperClass },
-                    react_1.default.createElement(Input_1.default, { type: field.type, value: value, onChange: function (e) { return handleFieldChange(field.name, e.target.value); }, onBlur: function () { return handleFieldBlur(field.name); } })));
-        }
-    }, [formValues, errors, touched, showPassword, isLoading, getFieldStatus, getColumnClass, handleFieldChange, handleFieldBlur, togglePasswordVisibility]);
-    // Check if form is valid
-    var isFormValid = (0, react_1.useMemo)(function () {
-        return Object.keys(errors).length === 0;
-    }, [errors]);
-    // Check if form has empty required fields
-    var hasEmptyRequiredFields = (0, react_1.useMemo)(function () {
-        return fields.some(function (field) {
-            if (!field.required)
-                return false;
-            var value = formValues[field.name];
-            if (field.type === 'checkbox' && field.multiple) {
-                return !Array.isArray(value) || value.length === 0;
-            }
-            if (field.type === 'checkbox' && !field.multiple) {
-                return value === false;
-            }
-            return value === undefined || value === null || value === '';
-        });
-    }, [fields, formValues]);
-    // Submit button disabled state
-    var isSubmitDisabled = isSubmitting || isLoading || (!isFormValid && hasEmptyRequiredFields);
-    // WhatsApp button disabled state
-    var isWhatsAppDisabled = isSubmitDisabled || !whatsappPhone;
-    // Layout container
-    var LayoutContainer = (0, react_1.useMemo)(function () {
-        if (layout === 'grid') {
-            return function (_a) {
-                var children = _a.children;
-                return (react_1.default.createElement("div", { className: "funui_form-grid", style: { display: 'grid', gap: gap, gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))' } }, children));
-            };
-        }
-        else if (layout === 'horizontal') {
-            return function (_a) {
-                var children = _a.children;
-                return (react_1.default.createElement(Flex_1.default, { gap: gap, wrap: "wrap" }, children));
-            };
-        }
-        else {
-            // vertical layout (default)
-            return function (_a) {
-                var children = _a.children;
-                return (react_1.default.createElement(Flex_1.default, { direction: "column", gap: gap }, children));
-            };
+                // text, email, number, tel, date, file, password
+                return (react_1.default.createElement("div", { key: field.name, className: wrapperClass },
+                    react_1.default.createElement(Input_1.default, __assign({ type: field.type, value: value || '', onChange: function (e) { return handleInputChange(field.name, e.target.value); }, onBlur: function () { return handleFieldBlur(field.name); } }, baseProps))));
         }
-    }, [layout, gap]);
-    return (react_1.default.createElement("form", { className: "funui_form ".concat(className), onSubmit: handleSubmit, onReset: handleReset, style: { width: '100%' } },
-        errors._form && (react_1.default.createElement(Div_1.default, { className: "funui_form-error", style: { marginBottom: '1rem' } },
-            react_1.default.createElement(Flex_1.default, { gap: "0.5rem", alignItems: "center" },
-                react_1.default.createElement(pi_1.PiWarningCircle, { className: "text-error", size: 20 }),
-                react_1.default.createElement(Text_1.default, { text: errors._form, size: "sm", color: "error", bold: true })))),
-        (whatsappIntegration === null || whatsappIntegration === void 0 ? void 0 : whatsappIntegration.enabled) && !whatsappPhone && (react_1.default.createElement(Div_1.default, { className: "funui_form-warning", style: { marginBottom: '1rem', padding: '0.75rem', backgroundColor: 'var(--warning-light)', borderRadius: '0.375rem' } },
-            react_1.default.createElement(Flex_1.default, { gap: "0.5rem", alignItems: "center" },
-                react_1.default.createElement(pi_1.PiWarningCircle, { className: "text-warning", size: 20 }),
-                react_1.default.createElement(Text_1.default, { text: "WhatsApp phone number is not configured. Please provide a valid phone number.", size: "sm", color: "warning" })))),
-        react_1.default.createElement(LayoutContainer, null, fields.map(renderField)),
-        react_1.default.createElement(Flex_1.default, { direction: "column", gap: "1rem", style: { marginTop: '2rem' } },
-            react_1.default.createElement(Flex_1.default, { gap: "1rem", alignItems: "center", justify: "space-between", wrap: "wrap" },
-                showReset && (react_1.default.createElement(Button_1.default, { type: "reset", text: resetText, bg: "light", color: "text", disabled: isSubmitting || isLoading, funcss: "funui_form-reset-btn" })),
-                react_1.default.createElement(Button_1.default, { type: "submit", text: submitText, bg: "primary", color: "white", raised: true, startIcon: react_1.default.createElement(pi_1.PiPaperPlaneTilt, null), disabled: isSubmitDisabled, isLoading: isSubmitting || isLoading, funcss: "funui_form-submit-btn" })),
-            (whatsappIntegration === null || whatsappIntegration === void 0 ? void 0 : whatsappIntegration.enabled) && whatsappPhone && (react_1.default.createElement(WhatsAppButton, { onClick: handleWhatsAppSubmit, disabled: isWhatsAppDisabled, text: "Send via WhatsApp" })))));
+    }, [errors, touched, formValues, finalIsLoading, getFieldStatus, handleFieldChange, handleInputChange, handleFieldBlur, finalFullWidth]);
+    return (react_1.default.createElement("div", { className: "form-wrapper ".concat(finalCentered ? 'center' : '', " ").concat(finalClassName), style: { width: "100%", maxWidth: finalWidth || "450px" } },
+        finalTitle && (react_1.default.createElement("div", { className: "form-header", style: { marginBottom: '2rem' } },
+            react_1.default.createElement(Text_1.default, { text: finalTitle, size: finalTitleSize || "3xl", color: finalTitleColor || "", block: true }),
+            finalDescription && (react_1.default.createElement(Text_1.default, { article: true, size: finalDescriptionSize || "sm", color: finalDescriptionColor || "" },
+                react_1.default.createElement("div", { className: "article text-sm", dangerouslySetInnerHTML: { __html: finalDescription } }))))),
+        react_1.default.createElement("form", { className: "form", onSubmit: handleSubmit, style: { width: '100%' } },
+            react_1.default.createElement(Flex_1.default, { direction: finalLayout === 'horizontal' ? 'row' : 'column', gap: finalGap, width: '100%' }, finalFields.map(renderField)),
+            react_1.default.createElement(Flex_1.default, { direction: "column", gap: "1rem", style: { marginTop: '2rem', width: finalFullWidth ? '100%' : undefined } },
+                react_1.default.createElement(Button_1.default, { type: "submit", text: hasWhatsApp ? "Send via WhatsApp" : finalSubmitText, bg: finalSubmitBg || "primary", raised: true, prefix: finalSubmitPrefix || hasWhatsApp ? react_1.default.createElement(pi_1.PiWhatsappLogo, null) : react_1.default.createElement(pi_1.PiPaperPlaneTilt, null), suffix: finalSubmitSuffix, 
+                    // startIcon={hasWhatsApp ? <PiWhatsappLogo /> : <PiPaperPlaneTilt />}
+                    disabled: isSubmitDisabled, isLoading: isSubmitting || finalIsLoading, fullWidth: finalFullWidth })))));
 };
 exports.default = Form;