funuicss 3.8.8 → 3.8.10

package/ui/form/Form.js

@@ -97,10 +97,43 @@ 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");
+// 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 +143,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 +164,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.org2000/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 +189,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,34 +216,41 @@ 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) {
-    var fieldLines = fields
-        .filter(function (field) { return values[field.name] !== undefined && values[field.name] !== null && values[field.name] !== ''; })
-        .map(function (field) {
+// Function to format WhatsApp message - UPDATED with proper formatting
+var formatWhatsAppMessage = function (values, fields, header, footer) {
+    // Build message lines
+    var message = '';
+    // Add header if provided
+    if (header) {
+        message += "".concat(header, "\n\n");
+    }
+    // Filter out empty/null/undefined values
+    var nonEmptyFields = fields.filter(function (field) {
+        var value = values[field.name];
+        // Skip if value is undefined, null, or empty string
+        if (value === undefined || value === null || value === '') {
+            return false;
+        }
+        // Skip if array is empty
+        if (Array.isArray(value) && value.length === 0) {
+            return false;
+        }
+        // Skip if checkbox is false
+        if (field.type === 'checkbox' && !field.multiple && value === false) {
+            return false;
+        }
+        return true;
+    });
+    // Format each field
+    var fieldLines = nonEmptyFields.map(function (field) {
         var value = values[field.name];
         var displayValue = value;
         // Format array values (for multiple checkboxes)
@@ -207,71 +266,122 @@ var formatWhatsAppMessage = function (values, fields, headerMessage, footerMessa
             var option = field.options.find(function (opt) { return opt.value === value; });
             displayValue = option ? option.label : value;
         }
-        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);
+        // Ensure displayValue is a string and preserve spaces/newlines
+        displayValue = String(displayValue);
+        // WhatsApp formatting:
+        // - Field label on its own line
+        // - Value on next line wrapped in backticks
+        // - Double newline between fields for readability
+        return "".concat(field.label || field.name, "\n`").concat(displayValue, "`");
+    });
+    // Join with double newline for spacing
+    message += fieldLines.join('\n\n');
+    // 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;
+// Main Form Component - FIXED
+var Form = function (props) {
+    var fieldsProp = props.fields, onSubmitProp = props.onSubmit, _a = props.defaultValues, defaultValuesProp = _a === void 0 ? {} : _a, _b = props.submitText, submitTextProp = _b === void 0 ? 'Submit' : _b, _c = props.submitBg, submitBgProp = _c === void 0 ? 'primary' : _c, submitPrefixProp = props.submitPrefix, submitSuffixProp = props.submitSuffix, _d = props.resetText, resetTextProp = _d === void 0 ? 'Reset' : _d, _e = props.showReset, showResetProp = _e === void 0 ? true : _e, _f = props.isLoading, isLoadingProp = _f === void 0 ? false : _f, _g = props.className, classNameProp = _g === void 0 ? '' : _g, _h = props.layout, layoutProp = _h === void 0 ? 'vertical' : _h, _j = props.gap, gapProp = _j === void 0 ? '1.5rem' : _j, titleProp = props.title, titleSizeProp = props.titleSize, titleColorProp = props.titleColor, descriptionProp = props.description, descriptionSizeProp = props.descriptionSize, descriptionColorProp = props.descriptionColor, whatsappContactProp = props.whatsappContact, widthProp = props.width, centeredProp = props.centered, whatsappHeaderProp = props.whatsappHeader, whatsappFooterProp = props.whatsappFooter, _k = props.fullWidth, fullWidthProp = _k === void 0 ? true : _k, _l = props.variant, variant = _l === void 0 ? '' : _l;
+    // Use component configuration with variant
+    var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Form', variant).mergeWithLocal;
+    // Create local props object
+    var localProps = {
+        fields: fieldsProp,
+        onSubmit: onSubmitProp,
+        defaultValues: defaultValuesProp,
+        submitText: submitTextProp,
+        submitBg: submitBgProp,
+        submitPrefix: submitPrefixProp,
+        submitSuffix: submitSuffixProp,
+        resetText: resetTextProp,
+        showReset: showResetProp,
+        isLoading: isLoadingProp,
+        className: classNameProp,
+        layout: layoutProp,
+        gap: gapProp,
+        title: titleProp,
+        titleSize: titleSizeProp,
+        titleColor: titleColorProp,
+        description: descriptionProp,
+        descriptionSize: descriptionSizeProp,
+        descriptionColor: descriptionColorProp,
+        whatsappContact: whatsappContactProp,
+        width: widthProp,
+        centered: centeredProp,
+        whatsappHeader: whatsappHeaderProp,
+        whatsappFooter: whatsappFooterProp,
+        fullWidth: fullWidthProp,
+        variant: variant,
+    };
+    // Merge with theme configuration
+    var mergedProps = mergeWithLocal(localProps).props;
+    // Destructure with proper priority: local props override config props
+    var fields = fieldsProp !== undefined ? fieldsProp : mergedProps.fields;
+    var onSubmit = onSubmitProp !== undefined ? onSubmitProp : mergedProps.onSubmit;
+    var defaultValues = defaultValuesProp !== undefined ? defaultValuesProp : mergedProps.defaultValues;
+    var submitText = submitTextProp !== undefined ? submitTextProp : mergedProps.submitText;
+    var submitBg = submitBgProp !== undefined ? submitBgProp : mergedProps.submitBg;
+    var submitPrefix = submitPrefixProp !== undefined ? submitPrefixProp : mergedProps.submitPrefix;
+    var submitSuffix = submitSuffixProp !== undefined ? submitSuffixProp : mergedProps.submitSuffix;
+    var resetText = resetTextProp !== undefined ? resetTextProp : mergedProps.resetText;
+    var showReset = showResetProp !== undefined ? showResetProp : mergedProps.showReset;
+    var isLoading = isLoadingProp !== undefined ? isLoadingProp : mergedProps.isLoading;
+    var className = classNameProp !== undefined ? classNameProp : mergedProps.className;
+    var layout = layoutProp !== undefined ? layoutProp : mergedProps.layout;
+    var gap = gapProp !== undefined ? gapProp : mergedProps.gap;
+    var title = titleProp !== undefined ? titleProp : mergedProps.title;
+    var titleSize = titleSizeProp !== undefined ? titleSizeProp : mergedProps.titleSize;
+    var titleColor = titleColorProp !== undefined ? titleColorProp : mergedProps.titleColor;
+    var description = descriptionProp !== undefined ? descriptionProp : mergedProps.description;
+    var descriptionSize = descriptionSizeProp !== undefined ? descriptionSizeProp : mergedProps.descriptionSize;
+    var descriptionColor = descriptionColorProp !== undefined ? descriptionColorProp : mergedProps.descriptionColor;
+    var whatsappContact = whatsappContactProp !== undefined ? whatsappContactProp : mergedProps.whatsappContact;
+    var width = widthProp !== undefined ? widthProp : mergedProps.width;
+    var centered = centeredProp !== undefined ? centeredProp : mergedProps.centered;
+    var whatsappHeader = whatsappHeaderProp !== undefined ? whatsappHeaderProp : mergedProps.whatsappHeader;
+    var whatsappFooter = whatsappFooterProp !== undefined ? whatsappFooterProp : mergedProps.whatsappFooter;
+    var fullWidth = fullWidthProp !== undefined ? fullWidthProp : mergedProps.fullWidth;
+    // 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]);
     // 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 _m = (0, react_1.useState)({}), errors = _m[0], setErrors = _m[1];
+    var _o = (0, react_1.useState)({}), touched = _o[0], setTouched = _o[1];
+    var _p = (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
+        parsedFields.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 (parsedDefaultValues[field.name] !== undefined) {
+                initialValues[field.name] = parsedDefaultValues[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 = _p[0], setFormValues = _p[1];
+    var _q = (0, react_1.useState)(false), isSubmitting = _q[0], setIsSubmitting = _q[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(parsedDefaultValues).length > 0) {
+            setFormValues(function (prev) { return (__assign(__assign({}, prev), parsedDefaultValues)); });
         }
-    }, [whatsappIntegration]);
+    }, [parsedDefaultValues]);
     // Validate a single field
     var validateField = (0, react_1.useCallback)(function (field, value) {
         var _a, _b, _c, _d, _e;
@@ -287,10 +397,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 +408,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 +430,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 +448,83 @@ 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
+    var validateForm = (0, react_1.useCallback)(function () {
+        var newErrors = {};
+        var hasErrors = false;
+        parsedFields.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;
+    }, [parsedFields, validateField, formValues]);
+    // Handle field change for checkboxes and radios
+    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)));
+        });
+        // Update touched state
+        setTouched(function (prev) {
+            var _a;
+            return (__assign(__assign({}, prev), (_a = {}, _a[fieldName] = true, _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; });
+        // Validate the changed field
+        var field = parsedFields.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;
+            }
+        });
+    }, [parsedFields, validateField]);
+    // FIXED: Handle input change - pass event directly to Input component
+    var handleInputEventChange = (0, react_1.useCallback)(function (e) {
+        var fieldName = e.target.name;
+        var value = e.target.value;
+        // Update form values - PASS VALUE AS-IS (preserves spaces)
+        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 = parsedFields.find(function (f) { return f.name === fieldName; });
+        if (!field)
+            return;
         var error = validateField(field, value);
         setErrors(function (prev) {
             var _a;
@@ -388,271 +537,231 @@ var Form = function (_a) {
                 return newErrors;
             }
         });
-    }, [fields, formValues, validateField]);
-    // Toggle password visibility
-    var togglePasswordVisibility = (0, react_1.useCallback)(function (fieldName) {
-        setShowPassword(function (prev) {
+    }, [parsedFields, validateField]);
+    // FIXED: Handle blur event - pass event directly to Input component
+    var handleInputEventBlur = (0, react_1.useCallback)(function (e) {
+        var fieldName = e.target.name;
+        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 = parsedFields.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]);
+    }, [parsedFields, validateField, formValues]);
     // Handle form submission
     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) {
+                    parsedFields.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 (!whatsappContact) return [3 /*break*/, 4];
+                    message = formatWhatsAppMessage(formValues, parsedFields, whatsappHeader, whatsappFooter);
+                    cleanPhone = whatsappContact.replace(/[\s+\-()]/g, '');
+                    whatsappUrl = "https://wa.me/".concat(cleanPhone, "?text=").concat(message);
+                    window.open(whatsappUrl, '_blank');
+                    if (!onSubmit) return [3 /*break*/, 3];
+                    return [4 /*yield*/, onSubmit(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 (!onSubmit) return [3 /*break*/, 6];
+                    return [4 /*yield*/, onSubmit(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]);
+    }); }, [parsedFields, validateForm, formValues, whatsappContact, whatsappHeader, whatsappFooter, onSubmit, errors]);
     // Handle form reset
     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 = {};
+        parsedFields.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 (parsedDefaultValues[field.name] !== undefined) {
+                initialValues[field.name] = parsedDefaultValues[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]);
+    }, [parsedFields, parsedDefaultValues]);
     // Get field status for Input component
     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
+    var isFormValid = (0, react_1.useMemo)(function () {
+        // Check if any required fields are empty
+        var hasEmptyRequiredFields = parsedFields.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;
+    }, [parsedFields, formValues, errors]);
+    // Submit button disabled state
+    var isSubmitDisabled = isSubmitting || isLoading || !isFormValid;
+    // Check if WhatsApp is configured
+    var hasWhatsApp = !!whatsappContact;
+    // Render field based on type - FIXED
     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 || isLoading, fullWidth: fullWidth }, 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 }));
                         }))));
                 }
                 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 || isLoading, 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 || isLoading, 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: handleInputEventChange, onBlur: handleInputEventBlur }, 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: handleInputEventChange, onBlur: handleInputEventBlur }, 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); } })));
+                // 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: handleInputEventChange, onBlur: handleInputEventBlur }, baseProps))));
         }
-    }, [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));
-            };
-        }
-    }, [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, isLoading, getFieldStatus, handleFieldChange, handleInputEventChange, handleInputEventBlur, fullWidth]);
+    // Don't render if no fields are configured
+    if (parsedFields.length === 0) {
+        console.warn('Form: No fields configured. Please provide fields prop or configure via theme.');
+        return null;
+    }
+    return (react_1.default.createElement("div", { className: "form-wrapper ".concat(centered ? 'center' : '', " ").concat(className), style: { width: "100%", maxWidth: width || "450px" } },
+        title && (react_1.default.createElement("div", { className: "form-header", style: { marginBottom: '2rem' } },
+            react_1.default.createElement(Text_1.default, { text: title, size: titleSize || "3xl", color: titleColor || "", block: true }),
+            description && (react_1.default.createElement(Text_1.default, { article: true, size: descriptionSize || "sm", color: descriptionColor || "" },
+                react_1.default.createElement("div", { className: "article text-sm", dangerouslySetInnerHTML: { __html: description } }))))),
+        react_1.default.createElement("form", { className: "form", onSubmit: handleSubmit, style: { width: '100%' } },
+            react_1.default.createElement(Flex_1.default, { direction: layout === 'horizontal' ? 'row' : 'column', gap: gap, width: '100%' }, parsedFields.map(renderField)),
+            react_1.default.createElement(Flex_1.default, { direction: "column", gap: "1rem", style: { marginTop: '2rem', width: fullWidth ? '100%' : undefined } },
+                react_1.default.createElement(Button_1.default, { type: "submit", text: hasWhatsApp ? "Send via WhatsApp" : submitText, bg: submitBg || "primary", raised: true, prefix: submitPrefix || hasWhatsApp ? react_1.default.createElement(pi_1.PiWhatsappLogo, null) : react_1.default.createElement(pi_1.PiPaperPlaneTilt, null), suffix: submitSuffix, disabled: isSubmitDisabled, isLoading: isSubmitting || isLoading, fullWidth: fullWidth })))));
 };
 exports.default = Form;