tp-react-elements-dev 1.12.24 → 1.12.25

package/dist/components/Form/{FormConstants.js → FormConstants.esm.js}

@@ -4,52 +4,47 @@ const useFormValidatingContext = (formArray) => {
     const initialValues = {};
     const validationShape = {};
     const renderCustomError = (field) => {
-        if (field.customValidation) {
-            validationShape[field.name] = validationShape[field.name].test("custom-check", field.customErrorMessage || "Invalid value", (value) => {
-                // Call the custom validation function if provided
-                return field.customValidation ? field.customValidation(value) : true;
-            });
-        }
+        if (!field.customValidation)
+            return;
+        const base = validationShape[field.name] || Yup.mixed();
+        validationShape[field.name] = base.test('custom-check', field.customErrorMessage || 'Invalid value', (value) => (field.customValidation ? field.customValidation(value) : true));
     };
     formArray.forEach((field) => {
         switch (field.inputType) {
-            case "text":
-                initialValues[field.name] = "";
+            case 'text':
+                initialValues[field.name] = '';
                 if (field.required && field.errorMessage) {
-                    validationShape[field.name] = Yup.string()
+                    validationShape[field.name] = (validationShape[field.name] || Yup.string())
                         .typeError(field.errorMessage)
                         .required(field.errorMessage);
-                    renderCustomError(field);
                 }
                 renderCustomError(field);
                 break;
-            case "rich-text-editor":
-                initialValues[field.name] = "";
+            case 'rich-text-editor':
+                initialValues[field.name] = '';
                 if (field.required && field.errorMessage) {
-                    validationShape[field.name] = Yup.string()
+                    validationShape[field.name] = (validationShape[field.name] || Yup.string())
                         .typeError(field.errorMessage)
                         .required(field.errorMessage);
-                    renderCustomError(field);
                 }
                 renderCustomError(field);
                 break;
-            case "password":
-                initialValues[field.name] = "";
+            case 'password':
+                initialValues[field.name] = '';
                 if (field.required && field.errorMessage) {
-                    validationShape[field.name] = Yup.string()
+                    validationShape[field.name] = (validationShape[field.name] || Yup.string())
                         .typeError(field.errorMessage)
                         .required(field.errorMessage);
-                    renderCustomError(field);
                 }
                 renderCustomError(field);
                 break;
-            case "email":
-                initialValues[field.name] = "";
+            case 'email':
+                initialValues[field.name] = '';
                 if (field.required && field.errorMessage) {
                     validationShape[field.name] = Yup.string()
                         .typeError(`Please enter ${field.label}`)
                         .required(field.errorMessage)
-                        .test("valid-email", `Please enter valid Email`, (value) => {
+                        .test('valid-email', `Please enter valid Email`, (value) => {
                         return /\@.*\..+/.test(value);
                     });
                     renderCustomError(field);
@@ -57,7 +52,7 @@ const useFormValidatingContext = (formArray) => {
                 else {
                     validationShape[field.name] = Yup.string()
                         .typeError(`Please enter ${field.label}`)
-                        .test("valid-email", `Please enter valid Email`, (value) => {
+                        .test('valid-email', `Please enter valid Email`, (value) => {
                         // Custom validation to check for at least one period after '@'
                         return !value || /\@.*\..+/.test(value);
                     });
@@ -65,16 +60,16 @@ const useFormValidatingContext = (formArray) => {
                 }
                 renderCustomError(field);
                 break;
-            case "multiEmail":
-                initialValues[field.name] = "";
+            case 'multiEmail':
+                initialValues[field.name] = '';
                 if (field.required && field.errorMessage) {
                     validationShape[field.name] = Yup.string()
                         .typeError(`Please enter ${field.label}`)
                         .required(field.errorMessage)
-                        .test("valid-email", `Please enter valid Email`, (value) => {
+                        .test('valid-email', `Please enter valid Email`, (value) => {
                         if (!value)
                             return false;
-                        const emails = value.split(";");
+                        const emails = value.split(';');
                         const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                         return emails.every((email) => emailRegex.test(email.trim()));
                     });
@@ -83,13 +78,13 @@ const useFormValidatingContext = (formArray) => {
                 else {
                     validationShape[field.name] = Yup.string()
                         .typeError(`Please enter ${field.label}`)
-                        .test("custom", `Please enter valid Email`, (value) => {
+                        .test('custom', `Please enter valid Email`, (value) => {
                         // Custom validation to check for at least one period after '@'
-                        if (!value || value === "") {
+                        if (!value || value === '') {
                             return true;
                         }
                         else {
-                            const emails = value.split(";");
+                            const emails = value.split(';');
                             const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                             return emails.every((email) => emailRegex.test(email.trim()));
                         }
@@ -98,60 +93,56 @@ const useFormValidatingContext = (formArray) => {
                 }
                 renderCustomError(field);
                 break;
-            case "file":
+            case 'file':
                 initialValues[field.name] = null;
                 if (field.required && field.errorMessage) {
-                    validationShape[field.name] = Yup.mixed()
-                        .test("fileOrString", field?.errorMessage, (value) => {
-                        return (value instanceof File ||
-                            (typeof value === "string" && value.trim() !== ""));
+                    validationShape[field.name] = (validationShape[field.name] || Yup.mixed())
+                        .test('fileOrString', field?.errorMessage, (value) => {
+                        return value instanceof File || (typeof value === 'string' && value.trim() !== '');
                     })
                         .required(field.errorMessage);
-                    renderCustomError(field);
                 }
                 renderCustomError(field);
                 break;
-            case "multifile":
+            case 'multifile':
                 initialValues[field.name] = null;
                 if (field.required && field.errorMessage) {
-                    validationShape[field.name] = Yup.string()
-                        .test("hasAtLeastOneFile", field.errorMessage, (value) => {
+                    validationShape[field.name] = (validationShape[field.name] || Yup.string())
+                        .test('hasAtLeastOneFile', field.errorMessage, (value) => {
                         if (!value)
                             return false;
                         // Split by comma, trim, and filter out empty values
                         const files = value
-                            .split(",")
+                            .split(',')
                             .map((f) => f.trim())
-                            .filter((f) => f !== "");
+                            .filter((f) => f !== '');
                         return files.length > 0;
                     })
                         .required(field.errorMessage);
-                    renderCustomError(field);
                 }
                 renderCustomError(field);
                 break;
-            case "number":
+            case 'number':
                 initialValues[field.name] = null;
                 if (field.required && field.errorMessage) {
-                    validationShape[field.name] = Yup.number()
+                    validationShape[field.name] = (validationShape[field.name] || Yup.number())
                         .nullable()
                         .typeError(field.errorMessage)
                         .required(field.errorMessage);
-                    renderCustomError(field);
                 }
                 renderCustomError(field);
                 break;
-            case "checkbox":
+            case 'checkbox':
                 initialValues[field.name] = false;
                 break;
-            case "pincode":
+            case 'pincode':
                 initialValues[field.name] = null;
                 if (field.required && field.errorMessage) {
                     validationShape[field.name] = Yup.number()
                         .nullable()
                         .typeError(`Please enter PinCode`)
                         .required(field.errorMessage)
-                        .test("is-six-digits", `Please enter a 6-digit PinCode`, (value) => {
+                        .test('is-six-digits', `Please enter a 6-digit PinCode`, (value) => {
                         if (value) {
                             const stringValue = value.toString();
                             return stringValue.length === 6;
@@ -195,27 +186,26 @@ const useFormValidatingContext = (formArray) => {
             //       renderCustomError(field)
             //   }
             //   break;
-            case "phoneNumber":
+            case 'phoneNumber':
                 initialValues[field.name] = null;
                 if (field.required) {
-                    validationShape[field.name] = Yup.number()
+                    validationShape[field.name] = (validationShape[field.name] || Yup.number())
                         .nullable()
                         .typeError(`Please enter Mobile Number`)
                         .required(field.errorMessage)
-                        .test("is-two-digits", `Please enter a 10-digit Mobile Number`, (value) => {
+                        .test('is-two-digits', `Please enter a 10-digit Mobile Number`, (value) => {
                         if (value) {
                             const stringValue = value.toString();
                             return stringValue.length === 10;
                         }
                         return false;
                     });
-                    renderCustomError(field);
                 }
                 else {
-                    validationShape[field.name] = Yup.string()
+                    validationShape[field.name] = (validationShape[field.name] || Yup.string())
                         .nullable()
                         .typeError(``)
-                        .test("is-two-digits", `Please enter a 10-digit Mobile Number`, (value) => {
+                        .test('is-two-digits', `Please enter a 10-digit Mobile Number`, (value) => {
                         if (value) {
                             // Custom validation to check for at least one period after '@'
                             const stringValue = value.toString();
@@ -223,107 +213,103 @@ const useFormValidatingContext = (formArray) => {
                         }
                         return true; // Skip validation if no value is present
                     });
-                    renderCustomError(field);
                 }
                 break;
-            case "select":
-                initialValues[field.name] = "";
+            case 'select':
+            case 'autocomplete-select': // alias for searchable select
+                initialValues[field.name] = '';
                 if (field.required && field.errorMessage) {
-                    validationShape[field.name] = Yup.string()
+                    validationShape[field.name] = (validationShape[field.name] || Yup.string())
                         .typeError(`Select ${field.label}`)
                         .required(field.errorMessage);
-                    renderCustomError(field);
                 }
                 renderCustomError(field);
                 break;
-            case "checkbox-group":
-            case "radio-group":
-                initialValues[field.name] = "";
+            case 'basic-select': // alias for non-autocomplete select
+                initialValues[field.name] = '';
                 if (field.required && field.errorMessage) {
-                    validationShape[field.name] = Yup.string()
+                    validationShape[field.name] = (validationShape[field.name] || Yup.string())
                         .typeError(`Select ${field.label}`)
                         .required(field.errorMessage);
-                    renderCustomError(field);
                 }
                 renderCustomError(field);
                 break;
-            case "multiselect":
+            case 'checkbox-group':
+            case 'radio-group':
+                initialValues[field.name] = '';
+                if (field.required && field.errorMessage) {
+                    validationShape[field.name] = (validationShape[field.name] || Yup.string())
+                        .typeError(`Select ${field.label}`)
+                        .required(field.errorMessage);
+                }
+                renderCustomError(field);
+                break;
+            case 'multiselect':
                 initialValues[field.name] = null;
                 if (field.required && field.errorMessage) {
-                    validationShape[field.name] = validationShape[field.name] =
-                        Yup.string()
-                            .typeError(`Select atleast one ${field.label}`)
-                            .required(field.errorMessage);
-                    renderCustomError(field);
+                    validationShape[field.name] = (validationShape[field.name] || Yup.string())
+                        .typeError(`Select atleast one ${field.label}`)
+                        .required(field.errorMessage);
                 }
                 renderCustomError(field);
                 break;
-            case "datepicker":
-            case "timepicker":
+            case 'datepicker':
+            case 'timepicker':
                 initialValues[field.name] = null;
                 if (field.required && field.errorMessage) {
-                    validationShape[field.name] = validationShape[field.name] =
-                        Yup.string()
-                            .typeError(`Select ${field.label}`)
-                            .required(field.errorMessage);
-                    renderCustomError(field);
+                    validationShape[field.name] = (validationShape[field.name] || Yup.string())
+                        .typeError(`Select ${field.label}`)
+                        .required(field.errorMessage);
                 }
                 renderCustomError(field);
                 break;
-            case "yearpicker":
+            case 'yearpicker':
                 initialValues[field.name] = null;
                 if (field.required && field.errorMessage) {
-                    validationShape[field.name] = validationShape[field.name] =
-                        Yup.string()
-                            .typeError(`Select ${field.label}`)
-                            .required(field.errorMessage);
-                    renderCustomError(field);
+                    validationShape[field.name] = (validationShape[field.name] || Yup.string())
+                        .typeError(`Select ${field.label}`)
+                        .required(field.errorMessage);
                 }
                 renderCustomError(field);
                 break;
-            case "monthpicker":
+            case 'monthpicker':
                 initialValues[field.name] = null;
                 if (field.required && field.errorMessage) {
-                    validationShape[field.name] = validationShape[field.name] =
-                        Yup.string()
-                            .typeError(`Select ${field.label}`)
-                            .required(field.errorMessage);
-                    renderCustomError(field);
+                    validationShape[field.name] = (validationShape[field.name] || Yup.string())
+                        .typeError(`Select ${field.label}`)
+                        .required(field.errorMessage);
                 }
                 renderCustomError(field);
                 break;
-            case "toggleSwitch":
+            case 'toggleSwitch':
                 initialValues[field.name] = true;
                 renderCustomError(field);
                 break;
-            case "dateRangePicker":
+            case 'dateRangePicker':
                 const today = new Date();
-                const day = String(today.getDate()).padStart(2, "0");
-                const month = String(today.getMonth() + 1).padStart(2, "0"); // January is 0!
+                const day = String(today.getDate()).padStart(2, '0');
+                const month = String(today.getMonth() + 1).padStart(2, '0'); // January is 0!
                 const year = today.getFullYear();
                 const formattedDate = `${day}/${month}/${year}`;
                 const threeMonthsAgo = new Date(today);
                 threeMonthsAgo.setMonth(today.getMonth() - (field.monthSpan ?? 3));
-                const dayBeforeThreeMonths = String(threeMonthsAgo.getDate()).padStart(2, "0");
-                const monthBeforeThreeMonths = String(threeMonthsAgo.getMonth() + 1).padStart(2, "0"); // January is 0!
+                const dayBeforeThreeMonths = String(threeMonthsAgo.getDate()).padStart(2, '0');
+                const monthBeforeThreeMonths = String(threeMonthsAgo.getMonth() + 1).padStart(2, '0'); // January is 0!
                 const yearBeforeThreeMonths = threeMonthsAgo.getFullYear();
                 const formattedDateForThreeMonths = `${dayBeforeThreeMonths}/${monthBeforeThreeMonths}/${yearBeforeThreeMonths}`;
-                initialValues["FromDate"] = formattedDateForThreeMonths;
-                initialValues["ToDate"] = formattedDate;
+                initialValues['FromDate'] = formattedDateForThreeMonths;
+                initialValues['ToDate'] = formattedDate;
                 if (field.required && field.errorMessage) {
-                    validationShape[field.name] = validationShape[field.name] =
-                        Yup.string()
-                            .typeError(`Select ${field.label}`)
-                            .required(field.errorMessage);
-                    renderCustomError(field);
+                    validationShape[field.name] = (validationShape[field.name] || Yup.string())
+                        .typeError(`Select ${field.label}`)
+                        .required(field.errorMessage);
                 }
                 renderCustomError(field);
                 break;
             default:
                 initialValues[field.name] = null; // default value if inputType is not recognized
                 if (field.required && field.errorMessage) {
-                    validationShape[field.name] = Yup.mixed().required(field.errorMessage);
-                    renderCustomError(field);
+                    validationShape[field.name] = (validationShape[field.name] || Yup.mixed()).required(field.errorMessage);
                 }
                 renderCustomError(field);
                 break;

package/dist/components/Form/FormContainer.d.ts

@@ -1,3 +1,2 @@
-declare const FormContainer: () => import("react/jsx-runtime").JSX.Element;
-export default FormContainer;
-//# sourceMappingURL=FormContainer.d.ts.map
+declare const _default: never;
+export default _default;

package/dist/components/Form/FormContainer.esm.js

@@ -0,0 +1,3 @@
+var undefined$1 = undefined;
+
+export { undefined$1 as default };

package/dist/components/Form/FormRender.d.ts

@@ -1,4 +1,11 @@
-import { FormRenderProps } from "../../lib/Interface/FormInterface";
-declare const RenderForm: (props: FormRenderProps) => import("react/jsx-runtime").JSX.Element;
-export default RenderForm;
-//# sourceMappingURL=FormRender.d.ts.map
+import { FormRenderProps } from '../../utils';
+import React from 'react';
+/**
+ * Export the RenderForm component for use throughout the application
+ * This component is the central hub for rendering different form field types
+ * and is used by FormRenderWrapper and other form container components
+ *
+ * @see FormRenderWrapper
+ */
+declare const _default: React.MemoExoticComponent<(props: FormRenderProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/dist/components/Form/FormRender.esm.js

@@ -0,0 +1,130 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import React__default, { lazy, Suspense } from 'react';
+import FormCheckBox from '../FormComponents/FormCheckBox/FormCheckBox.esm.js';
+import FormCheckBoxGroup from '../FormComponents/FormCheckBoxGroup/FormCheckBoxGroup.esm.js';
+import FormNumberField from '../FormComponents/FormNumberField/FormNumberField.esm.js';
+import FormNumberFieldDecimal from '../FormComponents/FormNumberField/FormNumberFieldDecimal.esm.js';
+import FormRadioGroup from '../FormComponents/FormRadioGroup/FormRadioGroup.esm.js';
+import FormTextAreaField from '../FormComponents/FormTextAreaField/FormTextAreaField.esm.js';
+import FormTextField from '../FormComponents/FormTextField/FormTextField.esm.js';
+import PasswordField from '../FormComponents/PasswordField/PasswordField.esm.js';
+import SingleSelect from '../FormComponents/Select/SingleSelect.esm.js';
+import SingleSelectNonAutoComplete from '../FormComponents/Select/SingleSelectNonAutoComplete.esm.js';
+import FormActiveSwitch from './FormActiveSwitch.esm.js';
+
+// Lazy-loaded heavy components
+const RichTextEditorWrapper = lazy(() => import('../RichTextEditor/index.esm.js').then((m) => ({ default: m.RichTextEditorWrapper })));
+const MultiSelectV1 = lazy(() => import('../FormComponents/Select/MultiSelectv1.esm.js'));
+const FormRenderFileUpload = lazy(() => import('../FileUpload/index.esm.js').then((m) => ({ default: m.FormRenderFileUpload })));
+const FormRenderMultiFileUpload = lazy(() => import('../FileUpload/index.esm.js').then((m) => ({ default: m.FormRenderMultiFileUpload })));
+const DatepickerWrapperV2 = lazy(() => import('../DatePicker/index.esm.js').then((m) => ({ default: m.DatepickerWrapperV2 })));
+const Monthpickerrender = lazy(() => import('../DatePicker/index.esm.js').then((m) => ({ default: m.Monthpickerrender })));
+const TimePickerFieldWrapper = lazy(() => import('../TimePicker/index.esm.js').then((m) => ({ default: m.TimePicker })));
+// Loading fallback component
+const LoadingFallback = () => jsx("div", { style: { minHeight: '36px' }, children: "Loading..." });
+/**
+ * RenderForm Component
+ *
+ * Main renderer function that decides which form field component to render
+ * based on the `inputType` defined in the form item configuration.
+ *
+ * This component acts as a factory/mapper that instantiates the appropriate
+ * form field component based on the inputType property. It centralizes the
+ * mapping logic between input types and their corresponding components.
+ *
+ * @component
+ * @param {FormRenderProps} props - Form rendering properties including item configuration,
+ *                                  form control, errors, and other form state
+ * @returns {JSX.Element} The appropriate form field component based on inputType
+ */
+const RenderForm = (props) => {
+    /**
+     * Variant is an optional property that controls UI style differences
+     * Default is an empty string which will use the default styling
+     */
+    const variant = props.variant || '';
+    /**
+     * Switch between different input types and render the corresponding component
+     * This is the core mapping logic that determines which component to render
+     * based on the inputType property of the form item
+     */
+    switch (props.item?.inputType) {
+        /**
+         * Text input cases
+         * These cases handle standard text input, email input, and multi-email input
+         * All are rendered using the FormTextField component with appropriate validation
+         */
+        case 'text':
+        case 'multiEmail':
+        case 'email':
+            return jsx(FormTextField, { props: props, variant: variant });
+        // Rich text editor
+        case 'rich-text-editor':
+            return (jsx(Suspense, { fallback: jsx(LoadingFallback, {}), children: jsx(RichTextEditorWrapper, { props: props, variant: variant }) }));
+        // Password field
+        case 'password':
+            return jsx(PasswordField, { props: props, variant: variant });
+        // Dropdown select (auto-complete)
+        case 'select':
+        case 'autocomplete-select': // new alias
+            return jsx(SingleSelect, { props: props, variant: variant });
+        // Dropdown select (non auto-complete)
+        case 'select-v2':
+        case 'basic-select': // new alias
+            return jsx(SingleSelectNonAutoComplete, { props: props, variant: variant });
+        // Numeric inputs (integer, pincode, phone)
+        case 'number':
+        case 'pincode':
+        case 'phoneNumber':
+            return jsx(FormNumberField, { props: props, variant: variant });
+        // Decimal input
+        case 'decimal':
+            return jsx(FormNumberFieldDecimal, { props: props, variant: variant });
+        // Checkbox group (multiple options)
+        case 'checkbox-group':
+            return jsx(FormCheckBoxGroup, { props: props, variant: variant });
+        // Radio group (single option)
+        case 'radio-group':
+            return jsx(FormRadioGroup, { props: props, variant: variant });
+        // Date picker
+        case 'datepicker':
+            return (jsx(Suspense, { fallback: jsx(LoadingFallback, {}), children: jsx(DatepickerWrapperV2, { props: props, variant: variant }) }));
+        // Time picker
+        case 'timepicker':
+            return (jsx(Suspense, { fallback: jsx(LoadingFallback, {}), children: jsx(TimePickerFieldWrapper, { props: props, variant: variant }) }));
+        // Month picker
+        case 'monthpicker':
+            return (jsx(Suspense, { fallback: jsx(LoadingFallback, {}), children: jsx(Monthpickerrender, { props: props, variant: variant }) }));
+        // Multi-select dropdown
+        case 'multiselect':
+            return (jsx(Suspense, { fallback: jsx(LoadingFallback, {}), children: jsx(MultiSelectV1, { props: props, variant: variant }) }));
+        // Single file upload
+        case 'file':
+            return (jsx(Suspense, { fallback: jsx(LoadingFallback, {}), children: jsx(FormRenderFileUpload, { props: props, variant: variant }) }));
+        // Multi file upload
+        case 'multifile':
+            return (jsx(Suspense, { fallback: jsx(LoadingFallback, {}), children: jsx(FormRenderMultiFileUpload, { props: props, variant: variant }) }));
+        // Single checkbox
+        case 'checkbox':
+            return jsx(FormCheckBox, { props: props, variant: variant });
+        // Multi-line text input
+        case 'textarea':
+            return jsx(FormTextAreaField, { props: props, variant: variant });
+        // Toggle switch (active/inactive)
+        case 'toggleSwitch':
+            return jsx(FormActiveSwitch, { props: props }, props.item.name);
+        // Default case: if input type is not found, return nothing
+        default:
+            return jsx(Fragment, {});
+    }
+};
+/**
+ * Export the RenderForm component for use throughout the application
+ * This component is the central hub for rendering different form field types
+ * and is used by FormRenderWrapper and other form container components
+ *
+ * @see FormRenderWrapper
+ */
+var RenderForm$1 = React__default.memo(RenderForm);
+
+export { RenderForm$1 as default };

package/dist/components/Form/FormRenderConstants.d.ts

@@ -13,4 +13,3 @@ export interface FormsSection {
     arrayUpdate?: any;
     placeholderText?: string;
 }
-//# sourceMappingURL=FormRenderConstants.d.ts.map

package/dist/components/Form/FormRenderWrapper.d.ts

@@ -1,9 +1,31 @@
-import { FormSectionPropsItem, VariantProps } from "@/lib/Interface/FormInterface";
-import { UseFormReturn } from "react-hook-form";
+import React from 'react';
+import { UseFormReturn } from 'react-hook-form';
+import { FormSectionPropsItem, VariantProps } from '../../utils';
+/**
+ * Interface for FormRenderWrapper component props
+ *
+ * @interface FormRenderWrapperProps
+ */
 export interface FormRenderWrapperProps {
+    /**
+     * Array of form section items to render
+     * Each item represents a form field with its configuration
+     */
     formArray: FormSectionPropsItem[];
+    /**
+     * Unique name identifier for the form
+     * Used for generating unique keys for form items
+     */
     name: string;
+    /**
+     * Number of columns to display form fields in
+     * Defaults to 3 if not specified
+     */
     numberOfColumns?: number;
+    /**
+     * React Hook Form's form control object
+     * Contains methods and state for form management
+     */
     form: UseFormReturn<{
         [x: string]: string | number | boolean | null;
         [x: number]: string | number | boolean | null;
@@ -11,9 +33,19 @@ export interface FormRenderWrapperProps {
         [x: string]: string | number | boolean | null;
         [x: number]: string | number | boolean | null;
     }>;
+    /**
+     * UI variant style to apply to form fields
+     * Controls the visual appearance of form elements
+     */
     variant?: VariantProps;
+    /**
+     * Whether to show error borders on fields with validation errors
+     */
     fieldError?: boolean;
 }
-declare const FormRenderWrapper: ({ formArray, name, numberOfColumns, form, variant, fieldError, }: FormRenderWrapperProps) => import("react/jsx-runtime").JSX.Element;
-export default FormRenderWrapper;
-//# sourceMappingURL=FormRenderWrapper.d.ts.map
+/**
+ * Export the FormRenderWrapper component for use in form containers
+ * This component is the main entry point for rendering form fields
+ */
+declare const _default: React.MemoExoticComponent<({ formArray, name, numberOfColumns, form, variant, fieldError, }: FormRenderWrapperProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/dist/components/Form/FormRenderWrapper.esm.js

@@ -0,0 +1,33 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import React__default from 'react';
+import { useFormState } from 'react-hook-form';
+import { FormComponent, Formitem } from './Form.styles.esm.js';
+import RenderForm from './FormRender.esm.js';
+
+/**
+ * FormRenderWrapper Component
+ *
+ * A container component that renders a collection of form fields based on configuration.
+ * Provides theming, layout, and form state management for the form fields.
+ *
+ * @component
+ * @param {FormRenderWrapperProps} props - The component props
+ */
+const FormRenderWrapper = ({ formArray, name = '', numberOfColumns = 3, form, variant = '', fieldError, }) => {
+    // Subscribe to formState to react to validation changes
+    const { errors } = useFormState({ control: form.control });
+    /**
+     * Renders the form with theme provider and layout container
+     * Maps through the form array and renders each item with appropriate configuration
+     */
+    return (jsx(FormComponent, { container: true, margin: 'auto', children: formArray.map((item, i) => {
+            return (item.inputType && (jsx(Formitem, { container: true, sx: item.CustomProps, noOfColumn: item.numberOfColumns || numberOfColumns, children: item.inputType === 'custom' ? (item.FormElement || jsx(Fragment, {})) : (jsx(RenderForm, { item: item, register: form.register, control: form.control, errors: errors, getValues: form.getValues, clearErrors: form.clearErrors, setValue: form.setValue, variant: variant, fieldError: fieldError })) }, `${name}_${i}`)));
+        }) }));
+};
+/**
+ * Export the FormRenderWrapper component for use in form containers
+ * This component is the main entry point for rendering form fields
+ */
+var FormRenderWrapper$1 = React__default.memo(FormRenderWrapper);
+
+export { FormRenderWrapper$1 as default };

package/dist/components/Form/index.d.ts

@@ -0,0 +1,6 @@
+export { default as FormActiveSwitch } from './FormActiveSwitch';
+export { default as useFormValidatingContext } from './FormConstants';
+export { default as FormContainer } from './FormContainer';
+export { default as RenderForm } from './FormRenderWrapper';
+export { default as FormRender } from './FormRender';
+export * from './FormRenderConstants';