tp-react-elements 1.0.0

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

@@ -0,0 +1,329 @@
+import * as Yup from 'yup';
+
+const useFormValidatingContext = (formArray) => {
+    const initialValues = {};
+    const validationShape = {};
+    const renderCustomError = (field) => {
+        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));
+    };
+    // Add null check to prevent forEach error
+    if (!formArray || !Array.isArray(formArray)) {
+        const validationSchema = Yup.object().shape(validationShape);
+        return { validationSchema, initialValues };
+    }
+    formArray.forEach((field) => {
+        switch (field.inputType) {
+            case 'text':
+            case 'input-select':
+                initialValues[field.name] = '';
+                if (field.required && field.errorMessage) {
+                    validationShape[field.name] = (validationShape[field.name] || Yup.string())
+                        .typeError(field.errorMessage)
+                        .required(field.errorMessage);
+                }
+                renderCustomError(field);
+                break;
+            case 'rich-text-editor':
+                initialValues[field.name] = '';
+                if (field.required && field.errorMessage) {
+                    validationShape[field.name] = (validationShape[field.name] || Yup.string())
+                        .typeError(field.errorMessage)
+                        .required(field.errorMessage);
+                }
+                renderCustomError(field);
+                break;
+            case 'password':
+                initialValues[field.name] = '';
+                if (field.required && field.errorMessage) {
+                    validationShape[field.name] = (validationShape[field.name] || Yup.string())
+                        .typeError(field.errorMessage)
+                        .required(field.errorMessage);
+                }
+                renderCustomError(field);
+                break;
+            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) => {
+                        return /\@.*\..+/.test(value);
+                    });
+                    renderCustomError(field);
+                }
+                else {
+                    validationShape[field.name] = Yup.string()
+                        .typeError(`Please enter ${field.label}`)
+                        .test('valid-email', `Please enter valid Email`, (value) => {
+                        // Custom validation to check for at least one period after '@'
+                        return !value || /\@.*\..+/.test(value);
+                    });
+                    renderCustomError(field);
+                }
+                renderCustomError(field);
+                break;
+            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) => {
+                        if (!value)
+                            return false;
+                        const emails = value.split(';');
+                        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+                        return emails.every((email) => emailRegex.test(email.trim()));
+                    });
+                    renderCustomError(field);
+                }
+                else {
+                    validationShape[field.name] = Yup.string()
+                        .typeError(`Please enter ${field.label}`)
+                        .test('custom', `Please enter valid Email`, (value) => {
+                        // Custom validation to check for at least one period after '@'
+                        if (!value || value === '') {
+                            return true;
+                        }
+                        else {
+                            const emails = value.split(';');
+                            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+                            return emails.every((email) => emailRegex.test(email.trim()));
+                        }
+                    });
+                    renderCustomError(field);
+                }
+                renderCustomError(field);
+                break;
+            case 'file':
+                initialValues[field.name] = null;
+                if (field.required && field.errorMessage) {
+                    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);
+                break;
+            case 'multifile':
+                initialValues[field.name] = null;
+                if (field.required && field.errorMessage) {
+                    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(',')
+                            .map((f) => f.trim())
+                            .filter((f) => f !== '');
+                        return files.length > 0;
+                    })
+                        .required(field.errorMessage);
+                }
+                renderCustomError(field);
+                break;
+            case 'number':
+                initialValues[field.name] = null;
+                if (field.required && field.errorMessage) {
+                    validationShape[field.name] = (validationShape[field.name] || Yup.number())
+                        .nullable()
+                        .typeError(field.errorMessage)
+                        .required(field.errorMessage);
+                }
+                renderCustomError(field);
+                break;
+            case 'checkbox':
+                initialValues[field.name] = false;
+                break;
+            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) => {
+                        if (value) {
+                            const stringValue = value.toString();
+                            return stringValue.length === 6;
+                        }
+                        return false;
+                    });
+                    renderCustomError(field);
+                }
+                renderCustomError(field);
+                break;
+            // case "phoneNumber":
+            //   initialValues[field.name] = null;
+            //   if (field.required && field.errorMessage) {
+            //     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) => {
+            //           if (value) {
+            //             const stringValue = value.toString();
+            //             return stringValue.length === 2;
+            //           }
+            //           return false;
+            //         }
+            //       );
+            //       renderCustomError(field)
+            //   } else {
+            //     validationShape[field.name] = Yup.number()
+            //       .nullable()
+            //       // .typeError(`Please enter Mobile Number`)
+            //       .test(
+            //         "is-two-digits",
+            //         `Please enter a 10-digit Mobile Number`,
+            //         (value: any) => {
+            //           return !value || value?.toString().length === 2;
+            //         }
+            //       );
+            //       renderCustomError(field)
+            //   }
+            //   break;
+            case 'phoneNumber':
+                initialValues[field.name] = null;
+                if (field.required) {
+                    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) => {
+                        if (value) {
+                            const stringValue = value.toString();
+                            return stringValue.length === 10;
+                        }
+                        return false;
+                    });
+                }
+                else {
+                    validationShape[field.name] = (validationShape[field.name] || Yup.string())
+                        .nullable()
+                        .typeError(``)
+                        .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();
+                            return stringValue.length === 10;
+                        }
+                        return true; // Skip validation if no value is present
+                    });
+                }
+                break;
+            case 'select':
+            case 'single-select-search':
+            case 'autocomplete-select': // alias for searchable select
+                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 'basic-select': // alias for non-autocomplete select
+                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 '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);
+                break;
+            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);
+                break;
+            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);
+                break;
+            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);
+                break;
+            case 'toggleSwitch':
+                initialValues[field.name] = true;
+                renderCustomError(field);
+                break;
+            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 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 yearBeforeThreeMonths = threeMonthsAgo.getFullYear();
+                const formattedDateForThreeMonths = `${dayBeforeThreeMonths}/${monthBeforeThreeMonths}/${yearBeforeThreeMonths}`;
+                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);
+                break;
+            default:
+                initialValues[field.name] = null; // default value if inputType is not recognized
+                if (field.required && field.errorMessage) {
+                    validationShape[field.name] = (validationShape[field.name] || Yup.mixed()).required(field.errorMessage);
+                }
+                renderCustomError(field);
+                break;
+        }
+    });
+    const validationSchema = Yup.object().shape(validationShape);
+    return { validationSchema, initialValues };
+};
+
+export { useFormValidatingContext as default };

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

@@ -0,0 +1,2 @@
+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

@@ -0,0 +1,11 @@
+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,156 @@
+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 MultiSelectAutocomplete from '../FormComponents/Select/MultiSelectAutocomplete.esm.js';
+import SingleSelectNonAutoComplete from '../FormComponents/Select/SingleSelectNonAutoComplete.esm.js';
+import FormActiveSwitch from './FormActiveSwitch.esm.js';
+import FormTextFieldWithSelect from '../FormComponents/FormTextFieldWithSelect/FormTextFieldWithSelect.esm.js';
+import DateRangePickerComponent from '../DateRangePicker/DateRangePicker.esm.js';
+import RichTextEditorWrapper from '../FormComponents/RichTextEditor/RichTextEditorWrapper.esm.js';
+import SingleSelectSearchApi from '../FormComponents/Select/SingleSelectSearchApi.esm.js';
+
+// Lazy-loaded heavy components
+// const RichTextEditorWrapper = lazy(() =>
+//   import('../RichTextEditor').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 MultiFileWithPreview = lazy(() => import('../FileUpload/index.esm.js').then((m) => ({ default: m.MultiFileWithPreview })));
+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
+     */
+    const inputType = props.item?.inputType;
+    switch (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 (
+            // <Suspense fallback={<LoadingFallback />}>
+            jsx(RichTextEditorWrapper, { props: props, variant: variant })
+            // </Suspense>
+            );
+        // 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 });
+        // Autocomplete multi-select with checkboxes
+        case 'autocomplete-multi-select':
+            return jsx(MultiSelectAutocomplete, { props: props, variant: variant });
+        case 'single-select-search':
+            return jsx(SingleSelectSearchApi, { props: props, variant: variant });
+        // Dropdown select (non auto-complete)
+        case 'select-v2':
+        case 'basic-select': // new alias
+            return jsx(SingleSelectNonAutoComplete, { props: props, variant: variant });
+        case 'input-select':
+            return jsx(FormTextFieldWithSelect, { 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 }) }));
+        // Multi file upload with preview carousel
+        case 'multifile-with-preview':
+            return (jsx(Suspense, { fallback: jsx(LoadingFallback, {}), children: jsx(MultiFileWithPreview, { 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);
+        // Toggle switch (active/inactive)
+        case 'date-range-picker':
+            return jsx(DateRangePickerComponent, { ...props, variant: variant }, 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

@@ -0,0 +1,15 @@
+export interface FormsSection {
+    name: string;
+    label: string;
+    value?: string;
+    inputType: string;
+    minDate?: any;
+    options?: any;
+    customStyles?: {};
+    mandatory?: boolean;
+    disable?: boolean;
+    settingsField?: FormsSection[];
+    setArrayUpdate?: any;
+    arrayUpdate?: any;
+    placeholderText?: string;
+}

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

@@ -0,0 +1,51 @@
+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;
+    }, any, {
+        [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;
+}
+/**
+ * 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, watch: form.watch, 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,8 @@
+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';
+export { default as MultiSelectField } from '../../components/SelectField/MultiSelectField';
+export { default as MultiSelectFieldComponent } from '../../components/SelectField/MultiSelectFieldComponent';

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

@@ -0,0 +1,6 @@
+export { default as FormActiveSwitch } from './FormActiveSwitch.esm.js';
+export { default as useFormValidatingContext } from './FormConstants.esm.js';
+export { default as FormContainer } from './FormContainer.esm.js';
+export { default as RenderForm } from './FormRenderWrapper.esm.js';
+export { default as FormRender } from './FormRender.esm.js';
+export { default as MultiSelectField, default as MultiSelectFieldComponent } from '../SelectField/MultiSelectFieldComponent.esm.js';

package/dist/components/FormComponents/DatePicker/DatepickerWrapperV2.d.ts

@@ -0,0 +1,6 @@
+import { FormRenderProps, VariantProps } from '../../../utils';
+declare const DatepickerWrapperV2: ({ props, variant, }: {
+    props: FormRenderProps;
+    variant: VariantProps;
+}) => import("react/jsx-runtime").JSX.Element;
+export default DatepickerWrapperV2;