tp-react-elements-dev 1.12.20 → 1.12.22

package/dist/index.esm.js

@@ -1,2632 +0,0 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { Button, Typography, Grid, Dialog, DialogTitle, Slide, DialogContent, DialogActions, Tooltip, Box, MenuItem, TextField, Checkbox, FormControl, FormGroup, FormControlLabel, RadioGroup, Radio, IconButton, Autocomplete, InputLabel as InputLabel$1, Select as Select$1 } from '@mui/material';
-import CloseIcon from '@mui/icons-material/Close';
-import styled from '@emotion/styled';
-import * as React from 'react';
-import React__default, { useState, useRef, useEffect, useCallback } from 'react';
-import * as Yup from 'yup';
-import { createTheme } from '@mui/material/styles';
-import { ThemeProvider } from '@emotion/react';
-import ArrowDropDownSharpIcon from '@mui/icons-material/ArrowDropDownSharp';
-import Container from '@mui/material/Container';
-import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import dayjs from 'dayjs';
-import { Controller } from 'react-hook-form';
-import { ErrorMessage } from '@hookform/error-message';
-import { DatePicker as DatePicker$1 } from '@mui/x-date-pickers/DatePicker';
-import { Visibility, VisibilityOff } from '@mui/icons-material';
-import JoditEditor from 'jodit-react';
-import { Jodit } from 'jodit';
-import Checkbox$1 from '@mui/material/Checkbox';
-import FormControl$1 from '@mui/material/FormControl';
-import InputLabel from '@mui/material/InputLabel';
-import ListItemText from '@mui/material/ListItemText';
-import MenuItem$1 from '@mui/material/MenuItem';
-import OutlinedInput from '@mui/material/OutlinedInput';
-import Select from '@mui/material/Select';
-import { LocalizationProvider as LocalizationProvider$1 } from '@mui/x-date-pickers/LocalizationProvider';
-import { TimePicker } from '@mui/x-date-pickers/TimePicker';
-import { useIdleTimer } from 'react-idle-timer';
-import * as XLSX from 'xlsx-js-style';
-import { saveAs } from 'file-saver';
-import 'crypto-js';
-
-styled(Button) `
-  border: 0;
-  color: #fff;
-  position: absolute;
-  text-align: center;
-  padding: 5px 12px;
-  font-size: 13px;
-  height: 30px;
-  right: -38px;
-  text-transform: none;
-  z-index: 2;
-  border-radius: 10px 0px 0px 10px;
-  &:hover {
-    right: 0px;
-  }
-`;
-const SubmitButton = styled(Button) `
-  text-transform: none;
-`;
-const CancelButton = styled(Button) `
-  text-transform: none;
-  color: #000;
-  background: #ececee;
-  &:hover {
-    background: #0009;
-    color: #fff;
-  }
-`;
-const SaveAsDraftButton = styled(Button) `
-  text-transform: none;
-  font-size: 12px;
-  background: orange;
-  &:hover {
-    background: orange;
-  }
-`;
-styled(Typography) ``;
-styled(Grid, {
-    shouldForwardProp: (prop) => prop !== "isActive" && prop !== "noOfColumn",
-}) `
-  flex-direction: column;
-  margin-bottom: 8px;
-  min-width: 10%;
-  padding-left: 0px;
-  z-index: 2;
-  padding-right: 0px;
-  border: 1px solid #0003;
-  font-size: 12px;
-  padding: 6px;
-  text-align: center;
-  &:hover {
-    cursor: pointer;
-  }
-`;
-const DialogContainer = styled(Dialog) `
-  position: fixed;
-  top: -16px;
-  left: 0;
-  right: 0;
-  bottom: auto;
-  & .css-tlc64q-MuiPaper-root-MuiDialog-paper,
-  .css-mbdu2s {
-    max-width: 900px;
-  }
-`;
-const DialogTitleWrapper = styled(DialogTitle) `
-  padding: 8px 16px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  font-size: 14px;
-  cursor: move;
-  border-bottom: 1px solid rgb(229 231 235 / 1);
-`;
-
-const ConfirmationDialog = ({ openConfirmDialog, handleCancel, onClickSubmit, text, Submit = "Submit", Cancel = "Cancel", buttonStyleProps, }) => {
-    return (jsxs(Dialog, { open: openConfirmDialog, TransitionComponent: Slide, fullWidth: true, sx: {
-            position: "fixed",
-            top: "10%",
-            left: 0,
-            right: 0,
-            bottom: "auto",
-            "& .css-tlc64q-MuiPaper-root-MuiDialog-paper,.css-mbdu2s": {
-                maxWidth: "500px",
-            },
-            zIndex: 40,
-        }, "aria-labelledby": "draggable-dialog-title", children: [jsxs(DialogTitle, { sx: {
-                    // background: theme.palette.primary.main,
-                    // color: "#fff",
-                    padding: "8px 16px",
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "space-between",
-                    // fontFamily: "Roboto",
-                    fontSize: "14px",
-                    cursor: "move",
-                    borderBottom: "1px solid rgb(229 231 235 / 1)",
-                }, children: [jsx("span", { children: "Confirmation Dailog" }), jsx(CloseIcon, { sx: { cursor: "pointer" }, onClick: () => handleCancel() })] }), jsxs(DialogContent, { style: { paddingTop: "20px", paddingBottom: 0 }, sx: {
-                    "& .pt-0": {
-                        paddingTop: 0,
-                    },
-                }, children: [jsx(Typography, { children: text }), jsx(Grid, { container: true, gap: 3 })] }), jsx(DialogActions, { sx: { borderTop: "1px solid #e0e0e0", marginTop: 3 }, children: jsxs("div", { style: {
-                        display: "flex",
-                        justifyContent: "flex-end",
-                        gap: "8px",
-                    }, children: [jsx(SubmitButton, { variant: "contained", size: "small", type: "submit", onClick: () => onClickSubmit(), sx: {
-                                ...buttonStyleProps,
-                            }, children: Submit }), jsx(Button, { variant: "text", 
-                            // color="error"
-                            size: "small", sx: {
-                                textTransform: "none",
-                                color: "#000",
-                                background: "#ececee",
-                                ":hover": { background: "#0009", color: "#fff" },
-                            }, onClick: () => handleCancel(), children: Cancel })] }) })] }));
-};
-
-const DeleteField = ({ onClickFn, tooltip = "Delete", text }) => {
-    const [openDialog, setOpenDialog] = useState(false);
-    const handleCancel = () => {
-        setOpenDialog(false);
-    };
-    return (jsxs(Fragment, { children: [jsx(Tooltip, { title: jsx(Typography, { sx: { fontSize: "8px" }, children: tooltip }), children: jsx(Grid, { sx: { ":hover": { cursor: "pointer" } }, onClick: () => {
-                        setOpenDialog(true);
-                    }, children: jsx("i", { className: "flaticon-trash", style: {
-                            lineHeight: 1,
-                            fontSize: "11px",
-                            color: "red",
-                            marginTop: "10px",
-                        } }) }) }), jsx(ConfirmationDialog, { openConfirmDialog: openDialog, handleCancel: handleCancel, onClickSubmit: () => {
-                    handleCancel();
-                    onClickFn();
-                }, text: text })] }));
-};
-
-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;
-            });
-        }
-    };
-    formArray.forEach((field) => {
-        switch (field.inputType) {
-            case "text":
-                initialValues[field.name] = "";
-                if (field.required && field.errorMessage) {
-                    validationShape[field.name] = Yup.string()
-                        .typeError(field.errorMessage)
-                        .required(field.errorMessage);
-                    renderCustomError(field);
-                }
-                renderCustomError(field);
-                break;
-            case "rich-text-editor":
-                initialValues[field.name] = "";
-                if (field.required && field.errorMessage) {
-                    validationShape[field.name] = Yup.string()
-                        .typeError(field.errorMessage)
-                        .required(field.errorMessage);
-                    renderCustomError(field);
-                }
-                renderCustomError(field);
-                break;
-            case "password":
-                initialValues[field.name] = "";
-                if (field.required && field.errorMessage) {
-                    validationShape[field.name] = Yup.string()
-                        .typeError(field.errorMessage)
-                        .required(field.errorMessage);
-                    renderCustomError(field);
-                }
-                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] = 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":
-                initialValues[field.name] = null;
-                if (field.required && field.errorMessage) {
-                    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);
-                }
-                renderCustomError(field);
-                break;
-            case "number":
-                initialValues[field.name] = null;
-                if (field.required && field.errorMessage) {
-                    validationShape[field.name] = Yup.number()
-                        .nullable()
-                        .typeError(field.errorMessage)
-                        .required(field.errorMessage);
-                    renderCustomError(field);
-                }
-                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] = 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;
-                    });
-                    renderCustomError(field);
-                }
-                else {
-                    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
-                    });
-                    renderCustomError(field);
-                }
-                break;
-            case "select":
-                initialValues[field.name] = "";
-                if (field.required && field.errorMessage) {
-                    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] = "";
-                if (field.required && field.errorMessage) {
-                    validationShape[field.name] = Yup.string()
-                        .typeError(`Select ${field.label}`)
-                        .required(field.errorMessage);
-                    renderCustomError(field);
-                }
-                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);
-                }
-                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);
-                }
-                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);
-                }
-                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);
-                }
-                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);
-                }
-                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);
-                }
-                renderCustomError(field);
-                break;
-        }
-    });
-    const validationSchema = Yup.object().shape(validationShape);
-    return { validationSchema, initialValues };
-};
-
-const customTheme = createTheme({
-    breakpoints: {
-        values: {
-            xs: 0,
-            sm: 600,
-            md: 900,
-            lg: 1200,
-            xl: 1536,
-        },
-    },
-    typography: {},
-    palette: {
-    // primary: {
-    //   // main: 'linear-gradient(135deg, #6379c3 0%, #546ee5 60%)',
-    // },
-    // secondary: {
-    // main: 'linear-gradient(135deg, #6379c3 0%, #546ee5 60%)',
-    // },
-    },
-    components: {
-        MuiInputLabel: {
-            styleOverrides: {
-                root: {
-                    fontSize: "12px",
-                },
-            },
-        },
-        MuiInputBase: {
-            styleOverrides: {
-                root: {
-                    fontSize: "12px",
-                    input: {
-                        padding: "6.38px 14px",
-                    },
-                },
-            },
-        },
-        MuiRadio: {
-            styleOverrides: {
-                root: {
-                    padding: "4px 4px 0 8px",
-                },
-            },
-        },
-        MuiSelect: {
-            styleOverrides: {
-                select: {
-                    padding: "6.38px 32px 6.38px 14px",
-                },
-            },
-        },
-        MuiButton: {
-            styleOverrides: {
-                root: {
-                    textTransform: "none",
-                },
-            },
-        },
-    },
-});
-
-var index$2 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  customTheme: customTheme,
-  default: customTheme
-});
-
-const FormComponent = styled(Grid)(({ theme }) => ({
-    alignItems: "flex-start",
-    flexWrap: "wrap",
-    [theme.breakpoints.down("md")]: {
-        flexDirection: "column",
-    },
-}));
-styled(Box)(() => ({
-    margin: "5px 0px",
-    fontSize: "11px",
-    backgroundColor: "#ffff",
-    padding: "0.5em",
-    border: "0px solid rgba(0, 0, 0, 0.125)",
-    boxShadow: "0 1px 15px rgba(0,0,0,.04), 0 1px 6px rgba(0,0,0,.04)",
-    borderRadius: "0.75rem",
-}));
-const Formitem = styled(Grid, {
-    shouldForwardProp: (prop) => prop !== "isActive" && prop !== "noOfColumn",
-})(({ theme, noOfColumn }) => ({
-    width: `calc(100%/${noOfColumn})`,
-    flexDirection: "column",
-    paddingLeft: "15px",
-    paddingRight: "15px",
-    marginBottom: theme.spacing(1),
-    [theme.breakpoints.down("md")]: {
-        width: "100%",
-    },
-}));
-const ErrorMessageComponent = styled(Box)(() => ({
-    color: "red",
-    marginTop: "4px",
-    fontSize: "11px",
-    fontWeight: 500,
-}));
-styled(Container)(({ theme }) => ({
-    [theme.breakpoints.up("sm")]: {
-        padding: "16px 24px",
-    },
-    [theme.breakpoints.up("lg")]: {
-        paddingLeft: "30px",
-        paddingRight: "30px",
-    },
-}));
-styled(Button)(() => ({
-    color: "#fff",
-    backgroundColor: "#00acc1",
-    BorderColor: "#00acc1",
-}));
-styled(Button)(() => ({
-    color: "#fff",
-    backgroundColor: " #343a40",
-    borderColor: "#343a40",
-}));
-styled(Grid)(() => ({
-    alignItems: "start",
-    gap: "1px",
-}));
-styled("text")(() => ({
-    color: "red",
-}));
-styled(Box)(() => ({
-    margin: "5px 0px",
-    backgroundColor: "#ffff",
-    paddingBlock: "0.5em",
-    border: "0px solid rgba(0, 0, 0, 0.125)",
-    boxShadow: "0 1px 15px rgba(0,0,0,.04), 0 1px 6px rgba(0,0,0,.04)",
-    borderRadius: "0.75rem",
-    overflow: "hidden",
-    fontSize: "11px",
-}));
-styled(DatePicker)(() => ({
-    "& .MuiInputBase-input": {
-        padding: "6.38px 14px",
-    },
-}));
-styled(MenuItem)(() => ({
-    fontSize: "11px",
-}));
-styled(Box)(() => ({
-    maxHeight: "120px",
-    overflow: "auto",
-    position: "absolute",
-    top: "100%",
-    background: "#fff",
-    zIndex: 1000,
-    border: "1px solid #0001",
-}));
-styled(Typography)(() => ({
-    fontSize: "13px",
-    background: "#fff",
-    padding: "5px 13px",
-    zIndex: 1000,
-    "&:hover": {
-        backgroundColor: "#0001",
-        cursor: "pointer",
-    },
-}));
-styled(ArrowDropDownSharpIcon)(() => ({
-    fontSize: "25px",
-    position: "absolute",
-    right: 0,
-    color: "#0009",
-}));
-
-const renderLabel = (variant, props, showLabel = false) => (variant === "standard" || showLabel) && (jsxs("span", { className: "formInputlabel", style: { fontSize: "12px" }, children: [props.item.label, " ", props.item.required && jsx("span", { style: { color: "red" }, children: "*" })] }));
-function formatDateMonthAndYear(date) {
-    // Check if date is a string
-    if (typeof date !== "string") {
-        throw new TypeError("Expected a string");
-    }
-    // Split the date string into month and year
-    const [month, year] = date.split("/");
-    // If the month has only one digit, prepend '0' to it
-    const formattedMonth = month.length === 1 ? "0" + month : month;
-    // Return the formatted date with day set to '01'
-    return `${formattedMonth}/01/${year}`;
-}
-function parseCustomTime(timeString) {
-    if (!timeString)
-        return null; // Return null if empty
-    const [timePart, msPart] = timeString.split(".");
-    const [hours, minutes, seconds] = timePart.split(":").map(Number);
-    const milliseconds = msPart
-        ? Number(parseFloat(`0.${msPart}`).toFixed(3)) * 1000
-        : 0;
-    return dayjs()
-        .hour(hours)
-        .minute(minutes)
-        .second(seconds)
-        .millisecond(milliseconds);
-}
-/**
- * Formats a Day.js object into "HH:mm:ss.SSSSSSS"
- */
-function formatDayjsToCustomTime(date) {
-    if (!date || !date.isValid())
-        return "";
-    const milliseconds = date.millisecond().toString().padEnd(7, "0");
-    return `${date.format("HH:mm:ss")}.${milliseconds}`;
-}
-const extractDate = (inputDateString) => {
-    const inputDate = new Date(inputDateString);
-    if (!inputDateString) {
-        return "";
-    }
-    // Extract day, month, and year components
-    const day = inputDate.getDate();
-    const month = inputDate.getMonth() + 1; // Months are zero-based
-    const year = inputDate.getFullYear();
-    // Format the components as DD/MM/YYYY
-    const formattedDate = `${day}/${month}/${year}`;
-    return formattedDate;
-};
-
-const FormErrorField = (props) => {
-    return (jsx(ErrorMessageComponent, { children: jsx(ErrorMessage, { errors: props.errors, name: props.item.name }) }));
-};
-
-const HelperText = (props) => {
-    return props?.item?.helperText ? (jsx("span", { style: {
-            fontSize: "11px",
-            color: "#3651d3",
-        }, children: props?.item?.helperText })) : (jsx(Fragment, {}));
-};
-
-const FormBottomField = (props) => {
-    return (jsxs(Fragment, { children: [jsx(HelperText, { ...props }), jsx(FormErrorField, { ...props })] }));
-};
-
-const DatepickerWrapperV2 = ({ props, variant, }) => {
-    const inputTextRef = useRef(null);
-    const [open, setOpen] = useState(false);
-    const handleToggle = () => {
-        if (!open) {
-            inputTextRef.current?.blur();
-        }
-        setOpen(!open);
-    };
-    const isError = !!props.errors?.[props.item.name];
-    const isShowBorderError = isError && props.fieldError;
-    return (jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => (jsxs(Fragment, { children: [jsxs(LocalizationProvider, { dateAdapter: AdapterDayjs, children: [renderLabel(variant, props), jsx(DatePicker, { views: ["month", "year", "day"], label: variant !== "standard"
-                                ? `${props.item.label}${props.item.required ? " *" : ""}`
-                                : "", value: field.value
-                                ? typeof field.value === "string"
-                                    ? dayjs(field.value, "DD/MM/YYYY")
-                                    : dayjs(field.value)
-                                : null, className: "read-only", format: "DD/MM/YYYY", open: open, onOpen: handleToggle, onClose: handleToggle, minDate: props?.item?.minDate
-                                ? dayjs(props?.item?.minDate, "DD/MM/YYYY")
-                                : undefined, maxDate: props?.item?.maxDate
-                                ? dayjs(props?.item?.maxDate, "DD/MM/YYYY")
-                                : undefined, disabled: props.item.disable || false, onChange: (date) => {
-                                field.onChange(dayjs(date).format("DD/MM/YYYY"));
-                                props?.item?.onChangeFn &&
-                                    props?.item?.onChangeFn(dayjs(date).format("DD/MM/YYYY"));
-                            }, slotProps: {
-                                textField: {
-                                    onClick: () => handleToggle(),
-                                    inputRef: inputTextRef,
-                                    onBlur: (e) => {
-                                        props?.item?.onBlurFn && props?.item?.onBlurFn(e);
-                                    },
-                                    inputProps: {
-                                        input: { cursor: "pointer" },
-                                    },
-                                    error: isShowBorderError,
-                                    sx: {
-                                        "& .MuiPickersInputBase-sectionsContainer": {
-                                            paddingTop: 1,
-                                            paddingBottom: 1,
-                                            "& span": {
-                                                fontSize: "12px",
-                                            },
-                                        },
-                                        "& .MuiFormLabel-root": {
-                                            top: -10,
-                                        },
-                                        "& .MuiInputLabel-shrink": {
-                                            top: 0,
-                                        },
-                                    },
-                                },
-                            } })] }), jsx(FormBottomField, { ...props })] })) }, props.item.name));
-};
-
-const Monthpickerrender = ({ props, variant, }) => {
-    const ref = useRef(null);
-    const [open, setOpen] = useState(false);
-    const handleToggle = () => {
-        if (!open) {
-            ref.current?.blur();
-        }
-        setOpen(!open);
-    };
-    const isError = !!props.errors?.[props.item.name];
-    const isShowBorderError = isError && props.fieldError;
-    return (jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => (jsxs(Fragment, { children: [jsxs(LocalizationProvider, { dateAdapter: AdapterDayjs, children: [renderLabel(variant, props), jsx(DatePicker$1, { ref: ref, label: variant !== "standard" &&
-                                `${props.item.label}${props.item.required ? " *" : ""}`, views: ["month", "year"], disabled: props.item.disable, value: field.value
-                                ? dayjs(formatDateMonthAndYear(field.value || null))
-                                : null, slotProps: {
-                                textField: {
-                                    onClick: () => handleToggle(),
-                                    inputRef: ref,
-                                    error: isShowBorderError,
-                                },
-                            }, disableOpenPicker: props.item.disable, open: open, onOpen: handleToggle, onClose: handleToggle, defaultValue: field.value, onChange: (date) => {
-                                field.onChange(dayjs(date).format("MM/YYYY"));
-                                props.setValue(dayjs(date).format("MM/YYYY"));
-                            }, sx: {
-                                "& .MuiPickersInputBase-sectionsContainer": {
-                                    paddingTop: 1,
-                                    paddingBottom: 1,
-                                    "& span": {
-                                        fontSize: "12px",
-                                    },
-                                },
-                                "& input": {
-                                    paddingRight: "0px !important",
-                                },
-                                "& button": {
-                                    paddingLeft: "0px !important",
-                                    paddingRight: "0px !important",
-                                },
-                                "& .MuiFormLabel-root": {
-                                    top: -10,
-                                },
-                                "& .MuiInputLabel-shrink": {
-                                    top: 0,
-                                },
-                            }, minDate: props.item.minDate
-                                ? dayjs(props.item.minDate, "MM/YYYY")
-                                : undefined, maxDate: props.item.maxDate
-                                ? dayjs(props.item.maxDate, "MM/YYYY")
-                                : undefined })] }), props?.item?.helperText && (jsxs("span", { style: {
-                        fontSize: "11px",
-                        color: "#3651d3",
-                    }, children: ["(", props?.item?.helperText, ")"] })), jsx(FormBottomField, { ...props })] })) }));
-};
-
-const FormRenderFileUpload = ({ props, variant, }) => {
-    const isError = !!props.errors?.[props.item.name];
-    const isShowBorderError = isError && props.fieldError;
-    useEffect(() => {
-        if (props.getValues(props.item.name) === null ||
-            props.getValues(props.item.name) === undefined) {
-            const element = document.getElementById(props.item.name);
-            console.log(element, "elementelement");
-            if (element) {
-                element.value = ""; // Ensure it's an input element
-            }
-        }
-    }, [props.getValues(props.item.name)]);
-    return (jsxs(Fragment, { children: [jsxs(Box, { paddingLeft: "4px", sx: { ...props.item.sx }, children: [props.item?.label && (jsx(Box, { sx: { fontSize: "10px;" }, children: renderLabel(variant, props, true) })), jsx(TextField, { type: "file", id: props.item.name, error: isShowBorderError, inputProps: {
-                            accept: props.item.fileType === "excel"
-                                ? ".xls, .xlsx"
-                                : props.item.fileType === "pdf"
-                                    ? ".pdf"
-                                    : props.item.fileType === "zip"
-                                        ? ".zip"
-                                        : props.item.fileType === "all"
-                                            ? ".pdf,.jpg,.jpeg,.png,.xls,.xlsx,.doc,.docx,.zip"
-                                            : "",
-                        }, onChange: (event) => {
-                            const file = event.target?.files[0];
-                            console.log(file, "filefile");
-                            const fileName = file ? file.name : null;
-                            const allowedExtensions = {
-                                excel: ["xls", "xlsx"],
-                                pdf: ["pdf"],
-                                zip: ["zip"],
-                                all: [
-                                    "pdf",
-                                    "jpg",
-                                    "jpeg",
-                                    "png",
-                                    "xls",
-                                    "xlsx",
-                                    "doc",
-                                    "docx",
-                                    "zip",
-                                ],
-                                image: ["jpg", "jpeg", "png"],
-                            };
-                            const fileExtension = fileName
-                                ? fileName.split(".").pop().toLowerCase()
-                                : null;
-                            const validExtensions = props.item.fileType === "excel"
-                                ? allowedExtensions.excel
-                                : props.item.fileType === "pdf"
-                                    ? allowedExtensions.pdf
-                                    : allowedExtensions.all;
-                            if (props.item?.fileType &&
-                                fileExtension &&
-                                !validExtensions.includes(fileExtension)) {
-                                props.item?.handleFileError
-                                    ? props.item?.handleFileError(`Please upload ${allowedExtensions[props.item.fileType].join(",")} Files only`)
-                                    : alert(`Please upload ${allowedExtensions[props.item.fileType].join(",")} Files only`);
-                                event.target.value = ""; // Clear the file input\
-                                props.setValue(props.item?.name, null);
-                                props.setValue(props.item?.name + "Name", "");
-                                return;
-                            }
-                            else if (event.target.files[0].size > (props.item.filesize || 20000000)) {
-                                const maxSizeMB = ((props.item.filesize || 20000000) /
-                                    (1024 * 1024)).toFixed(2);
-                                props.item?.handleFileError
-                                    ? props.item?.handleFileError(`File size should be less than ${maxSizeMB}MB`)
-                                    : alert(`File size should be less than ${maxSizeMB}MB`);
-                                event.target.value = ""; // Clear the file input
-                                props.setValue(props.item?.name, null);
-                                props.setValue(props.item?.name + "Name", "");
-                                return;
-                            }
-                            props.setValue(props.item?.name, file);
-                            props.setValue(props.item?.name + "Name", fileName);
-                        }, sx: { width: "100%" } })] }), jsx(FormBottomField, { ...props })] }));
-};
-
-const FormRenderMultiFileUpload = ({ props, variant, }) => {
-    // const getDocument: Document = document;
-    useEffect(() => {
-        if (props.getValues(props.item.name) === null ||
-            props.getValues(props.item.name) === undefined) {
-            const element = document.getElementById(props.item.name);
-            console.log(element, "elementelement");
-            if (element) {
-                element.value = ""; // Ensure it's an input element
-            }
-        }
-    }, [props.getValues(props.item.name)]);
-    const isError = !!props.errors?.[props.item.name];
-    const isShowBorderError = isError && props.fieldError;
-    return (jsxs(Fragment, { children: [jsxs(Box, { paddingLeft: "4px", sx: { ...props.item.sx }, children: [props.item?.label && (jsx(Box, { sx: { fontSize: "10px;" }, children: renderLabel(variant, props, true) })), jsx(TextField, { type: "file", id: props.item.name, error: isShowBorderError, inputProps: {
-                            multiple: true,
-                            accept: props.item.fileType === "excel"
-                                ? ".xls,.xlsx"
-                                : props.item.fileType === "pdf"
-                                    ? ".pdf"
-                                    : props.item.fileType === "image"
-                                        ? ".jpg,.jpeg,.png"
-                                        : props.item.fileType === "all"
-                                            ? ".pdf,.jpg,.jpeg,.png,.xls,.xlsx,.doc,.docx"
-                                            : "",
-                        }, onChange: (event) => {
-                            const file = event.target.files;
-                            const fileName = file && file.length > 0
-                                ? Array.from(file)
-                                    .map((item) => item.name)
-                                    .join(",")
-                                : null;
-                            console.log(file, "filefile", file.length, fileName);
-                            const allowedExtensions = {
-                                excel: ["xls", "xlsx"],
-                                pdf: ["pdf"],
-                                image: ["jpg", "jpeg", "png"],
-                                all: [
-                                    "pdf",
-                                    "jpg",
-                                    "jpeg",
-                                    "png",
-                                    "xls",
-                                    "xlsx",
-                                    "doc",
-                                    "docx",
-                                    "zip",
-                                ],
-                                zip: ["zip"],
-                            };
-                            let fileExtension = null;
-                            if (fileName) {
-                                const ext = fileName.split(".").pop();
-                                if (ext) {
-                                    fileExtension = ext.toLowerCase();
-                                }
-                            }
-                            const validExtensions = props.item.fileType === "excel"
-                                ? allowedExtensions.excel
-                                : props.item.fileType === "pdf"
-                                    ? allowedExtensions.pdf
-                                    : props.item.fileType === "image"
-                                        ? allowedExtensions.image
-                                        : allowedExtensions.all;
-                            if (props.item?.fileType &&
-                                fileExtension &&
-                                !validExtensions.includes(fileExtension)) {
-                                props.item?.handleFileError &&
-                                    props.item?.handleFileError(`Please upload ${allowedExtensions[props.item.fileType].join(",")} Files only`);
-                                event.target.value = ""; // Clear the file input\
-                                props.setValue(props.item?.name, null);
-                                props.setValue(props.item?.name + "Name", "");
-                                return;
-                            }
-                            else if (event.target.files[event.target.files.length - 1].size > 20000000) {
-                                props.item?.handleFileError &&
-                                    props.item?.handleFileError(`File size should be less than 20MB`);
-                                event.target.files = null; // Clear the file input
-                                props.setValue(props.item?.name, null);
-                                props.setValue(props.item?.name + "File", []);
-                                return;
-                            }
-                            const fileArray = Array.from(file);
-                            console.log(fileArray, "fileArrayfileArray");
-                            props.setValue(props.item?.name, fileName);
-                            props.setValue(props.item?.name + "File", fileArray);
-                        }, sx: { width: "100%" } })] }), jsx(FormBottomField, { ...props })] }));
-};
-
-const FormCheckBox = ({ props, variant: _variant, }) => {
-    return (jsxs(Fragment, { children: [jsxs("span", { className: "formInputlabel", style: { fontSize: "12px" }, children: [props.item.label, " ", props.item.required && jsx("span", { style: { color: "red" }, children: "*" })] }), jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => (jsx(Checkbox, { ...field, checked: !!field.value, onChange: (e) => field.onChange(e.target.checked), sx: { width: "24px", height: "24px", ...props.item.sx } })) }), jsx(FormBottomField, { ...props })] }));
-};
-
-const FormCheckBoxGroup = ({ props, variant, }) => {
-    return (jsxs(Fragment, { children: [renderLabel(variant, props), jsx(FormControl, { component: "fieldset", children: jsx(FormGroup, { row: true, children: props.item?.settings &&
-                        props.item.settings.map((settings, i) => {
-                            return (jsx(Controller, { name: settings.name, control: props.control, render: ({ field }) => {
-                                    return (jsx(FormControlLabel, { control: jsx(Checkbox, { ...field, checked: field.value }), sx: {
-                                            ".MuiCheckbox-root": {
-                                                padding: "6px 2px 6px 8px",
-                                                ".css-imrjgg-MuiButtonBase-root-MuiCheckbox-root": {
-                                                    color: "rgb(0, 0, 0) !important",
-                                                },
-                                            },
-                                        }, label: jsx(Typography, { variant: "subtitle2", fontSize: "11px", fontWeight: "normal !important", children: settings.label }), labelPlacement: "end" }));
-                                } }, i));
-                        }) }) }), jsx(FormBottomField, { ...props })] }));
-};
-
-const FormNumberField = ({ props, variant, }) => {
-    const isError = !!props.errors?.[props.item.name];
-    const isShowBorderError = isError && props.fieldError;
-    const label = variant !== "standard"
-        ? `${props.item.label}${props.item.required ? " *" : ""}`
-        : "";
-    return (jsx(Fragment, { children: jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => {
-                return (jsxs(Fragment, { children: [renderLabel(variant, props), jsx(TextField, { ...field, size: "small", label: label, error: isShowBorderError, value: props.getValues(props.item.name) || "", defaultValue: props.getValues(props.item.name) || null, onInput: (e) => {
-                                e.target.value = e.target.value.replace(/[^0-9]/g, "");
-                                if (e.target.value === "") {
-                                    e.target.value = null;
-                                }
-                                props?.item?.onChangeFn &&
-                                    props?.item?.onChangeFn(e.target.value);
-                                props?.clearErrors && props?.clearErrors(props.item.name);
-                            }, onBlur: (e) => {
-                                props?.item?.onBlurFn && props?.item?.onBlurFn(e);
-                            }, sx: {
-                                "& .css-1holvmy,.css-lqj8pz-MuiFormLabel-root-MuiInputLabel-root,.css-kichxs-MuiFormLabel-root-MuiInputLabel-root": {
-                                    top: "-10px",
-                                },
-                            }, inputProps: {
-                                pattern: "[0-9]*", // Only allow numbers
-                                maxLength: props.item.maxLength || 20,
-                                onInput: (e) => {
-                                    if (props?.item?.donotAllowSpace) {
-                                        const value = e.target.value;
-                                        e.target.value = value.replace(" ", "");
-                                    }
-                                    if (!props?.item?.allowSpecialChars) {
-                                        const value = e.target.value;
-                                        e.target.value = value.replace(/[^a-zA-Z0-9 ]/g, "");
-                                    } // Allow only alphanumeric and space
-                                    if (e.target.value.length === 1 && e.target.value === " ") {
-                                        e.target.value = "";
-                                    }
-                                    props.item.onInputProps && props.item.onInputProps(e);
-                                },
-                            }, disabled: props.item.disable }), jsx(FormBottomField, { ...props })] }));
-            } }, props.item.name) }));
-};
-
-const FormNumberFieldDecimal = ({ props, variant, }) => {
-    const fixedLength = props.item.decimalFixedTo || 2;
-    const onInput = (e) => {
-        // Allow numbers, a single decimal point, and negation in the input
-        e.target.value = e.target.value.replace(/[^0-9.-]/g, "");
-        // Ensure only one decimal point is present
-        const decimalPointCount = e.target.value.split(".").length - 1;
-        if (decimalPointCount > 1) {
-            e.target.value = e.target.value.slice(0, -1);
-        }
-        // Ensure only two digits after the decimal point
-        const parts = e.target.value.split(".");
-        if (parts.length === fixedLength && parts[1].length > fixedLength) {
-            e.target.value = `${parts[0]}.${parts[1].slice(0, fixedLength)}`;
-        }
-    };
-    const label = variant !== "standard"
-        ? `${props.item.label}${props.item.required ? " *" : ""}`
-        : "";
-    const isError = !!props.errors?.[props.item.name];
-    const isShowBorderError = isError && props.fieldError;
-    return (jsx(Controller, { name: props.item.name, control: props.control, disabled: props.item?.disable, render: ({ field }) => (jsxs(Fragment, { children: [renderLabel(variant, props), jsx(TextField, { type: "text", size: "small", label: label, error: isShowBorderError, ...field, onChange: () => props?.clearErrors && props?.clearErrors(props.item.name), sx: {
-                        "& input": {
-                            textAlign: "right",
-                        },
-                        "& .css-16hdwvj,.css-1idq7r3-MuiFormLabel-root-MuiInputLabel-root": {
-                            top: "-5px",
-                        },
-                    }, onBlur: (e) => {
-                        props?.item?.onBlurFn && props?.item?.onBlurFn(e);
-                    }, onInput: onInput, InputProps: {
-                        inputProps: {
-                            pattern: "[1-9]",
-                            maxLength: 7,
-                        },
-                    } }), jsx(FormBottomField, { ...props })] })) }, props.item.name));
-};
-
-const FormRadioGroup = ({ props, variant, }) => {
-    return (jsxs(Fragment, { children: [renderLabel(variant, props), jsx(FormControl, { component: "fieldset", children: jsx(Controller, { name: props.item.name, control: props.control, render: ({ field }) => (jsx(RadioGroup, { value: field.value, onChange: (e) => {
-                            field.onChange(e.target.value); // ✅ update form state
-                            console.log(e.target.value, "radio value selected");
-                            props.item.onChangeFn && props.item.onChangeFn(e.target.value); // optional handler
-                        }, row: true, sx: {
-                            gap: "8px",
-                        }, children: props.item?.settings?.map((option, i) => (jsx(FormControlLabel, { value: option.name, control: jsx(Radio, { sx: {
-                                    padding: "6px 2px 6px 8px",
-                                    color: "black",
-                                    "&.Mui-checked": {
-                                        color: "#1976d2", // blue when selected
-                                    },
-                                    "& .MuiSvgIcon-root": {
-                                        fontSize: 16, // 🔹 this actually controls the radio icon size
-                                    },
-                                } }), label: jsx(Typography, { fontSize: "11px", fontWeight: "normal !important", children: option.label }) }, i))) })) }) }), jsx(FormBottomField, { ...props })] }));
-};
-
-const TextAreaField = styled(TextField)(() => ({
-    "& .css-1holvmy,.css-lqj8pz-MuiFormLabel-root-MuiInputLabel-root, .css-kichxs-MuiFormLabel-root-MuiInputLabel-root": {
-        top: "-10px",
-    },
-    "& input": {
-        fontSize: "11px",
-    },
-    "& .css-2rul56-MuiFormLabel-root-MuiInputLabel-root": {
-        top: "-10px",
-    },
-    "& .css-12ciryo-MuiFormLabel-root-MuiInputLabel-root ": {},
-    "& .css-1gq5vhi-MuiInputBase-root-MuiOutlinedInput-root input ": {
-        outline: "none",
-        border: "1px solid #ced4da", // Add this line to set border to none
-    },
-    "& .css-1gq5vhi-MuiInputBase-root-MuiOutlinedInput-root input:focus ": {
-        outline: "none",
-        border: "none", // Set border to none when input is focused
-    },
-    "& .css-1y03twt-MuiInputBase-root-MuiOutlinedInput-root": {
-        padding: "5px 5px", // Set border to none when input is focused
-        fontSize: "11px",
-    },
-    "& textarea": {
-        fontSize: "11px",
-        // textTransform:'uppercase'
-        maxHeight: "500px !important",
-        overflow: "auto",
-    },
-}));
-
-const FormTextAreaField = ({ props, variant, }) => {
-    const isError = !!props.errors?.[props.item.name];
-    const isShowBorderError = isError && props.fieldError;
-    return (jsx(Fragment, { children: jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => (jsxs(Fragment, { children: [renderLabel(variant, props), jsx(TextAreaField, { multiline: true, size: "small", InputProps: {
-                            style: {
-                                border: "none",
-                            },
-                        }, sx: {
-                            ...props.item.sx,
-                        }, minRows: props.item.minRows || 1, maxRows: props.item.maxRows || 100, placeholder: props.item.placeholder || "Type Something...", ...field, label: variant !== "standard"
-                            ? `${props.item.label}${props.item.required ? " *" : ""}`
-                            : "", error: isShowBorderError, value: field.value || "", disabled: props.item.disable, inputProps: {
-                            onInput: (e) => {
-                                if (!props?.item?.allowSpecialChars) {
-                                    const value = e.target.value;
-                                    e.target.value = value.replace(/[^a-zA-Z0-9 ]/g, "");
-                                } // Allow only alphanumeric and space
-                                if (e.target.value.length === 1 && e.target.value === " ") {
-                                    e.target.value = "";
-                                }
-                            },
-                        } }), jsx(FormBottomField, { ...props })] })) }, props.item.name) }));
-};
-
-const FormTextFieldComponent = styled(TextField)(() => ({
-    "& .css-1holvmy,.css-lqj8pz-MuiFormLabel-root-MuiInputLabel-root, .css-kichxs-MuiFormLabel-root-MuiInputLabel-root": {
-        top: "-10px",
-    },
-    "& .css-2rul56-MuiFormLabel-root-MuiInputLabel-root": {
-        top: "-10px",
-    },
-    "& .css-12ciryo-MuiFormLabel-root-MuiInputLabel-root ": {},
-    "& .css-1gq5vhi-MuiInputBase-root-MuiOutlinedInput-root input ": {
-        outline: "none",
-        border: "1px solid #ced4da", // Add this line to set border to none
-    },
-    "& .css-1gq5vhi-MuiInputBase-root-MuiOutlinedInput-root input:focus ": {
-        outline: "none",
-        border: "none", // Set border to none when input is focused
-    },
-}));
-
-const FormTextField = ({ props, variant, }) => {
-    const isError = !!props.errors?.[props.item.name];
-    const isShowBorderError = isError && props.fieldError;
-    const label = variant !== "standard"
-        ? `${props.item.label}${props.item.required ? " *" : ""}`
-        : "";
-    const onInput = (e) => {
-        if (props?.item?.donotAllowSpace) {
-            const value = e.target.value;
-            e.target.value = value.replace(" ", "");
-        }
-        if (!props?.item?.allowSpecialChars) {
-            const value = e.target.value;
-            e.target.value = value.replace(/[^a-zA-Z0-9 ]/g, "");
-        } // Allow only alphanumeric and space
-        if (e.target.value.length === 1 && e.target.value === " ") {
-            e.target.value = "";
-        }
-        props.item.onInputProps && props.item.onInputProps(e);
-    };
-    return (jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => (jsxs(Fragment, { children: [renderLabel(variant, props), jsx(FormTextFieldComponent, { ...field, fullWidth: true, error: isShowBorderError, label: label, placeholder: props.item.placeholder || "", InputProps: {
-                        style: {
-                            border: "none",
-                        },
-                    }, autoComplete: "off", sx: {
-                        ...props.item.sx,
-                    }, value: field.value || "", size: "small", disabled: props.item.disable, onBlur: (e) => {
-                        props?.item?.onBlurFn && props?.item?.onBlurFn(e);
-                    }, inputProps: {
-                        maxLength: props.item.maxLength || 100,
-                        onInput: onInput,
-                        onPaste: (e) => {
-                            if (props.item.doNotAllowPaste) {
-                                e.preventDefault();
-                            }
-                        },
-                    } }), jsx(FormBottomField, { ...props })] })) }, props.item.name));
-};
-
-const PasswordField = ({ props, variant, }) => {
-    const [showPassword, setShowPassword] = useState(false);
-    const handleTogglePasswordVisibility = () => {
-        setShowPassword((prevShowPassword) => !prevShowPassword);
-    };
-    const label = variant !== "standard"
-        ? `${props.item.label}${props.item.required ? " *" : ""}`
-        : "";
-    const isError = !!props.errors?.[props.item.name];
-    const isShowBorderError = isError && props.fieldError;
-    return (jsx(Box, { position: "relative", children: jsxs(FormControl, { fullWidth: true, children: [" ", jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => (jsxs(Fragment, { children: [jsxs(Box, { sx: { position: "relative" }, children: [" ", renderLabel(variant, props), jsx(TextField, { size: "small", error: isShowBorderError, type: showPassword ? "text" : "password", autoComplete: props.item?.InputProps?.autoComplete || "off", placeholder: props.item.placeholder || "", ...field, label: label, sx: {
-                                            width: "100%",
-                                            "& .css-kichxs-MuiFormLabel-root-MuiInputLabel-root,.css-1holvmy": {
-                                                top: "-8px",
-                                            },
-                                        }, inputProps: {
-                                            maxLength: props.item.maxLength || 100,
-                                            onInput: (e) => {
-                                                props.item.onInputProps && props.item.onInputProps(e);
-                                            },
-                                            onPaste: (e) => {
-                                                if (props.item?.doNotAllowPaste) {
-                                                    e.preventDefault();
-                                                }
-                                            },
-                                        }, value: field.value || null, disabled: props.item.disable }), jsx(IconButton, { sx: {
-                                            position: "absolute",
-                                            right: "14px",
-                                            top: variant === "standard" ? "70%" : "50%",
-                                            transform: "translateY(-50%)",
-                                            width: "25px",
-                                        }, "aria-label": "toggle password visibility", onClick: handleTogglePasswordVisibility, edge: "end", children: showPassword ? (jsx(Visibility, { sx: {
-                                                fontSize: "12px",
-                                                position: "absolute",
-                                            } })) : (jsx(VisibilityOff, { sx: {
-                                                fontSize: "12px",
-                                                position: "absolute",
-                                            } })) })] }), jsx(FormBottomField, { ...props })] })) })] }) }, props.item.name));
-};
-
-const RichTextEditor = ({ props }) => {
-    const editor = useRef(null);
-    const [content, setContent] = useState("");
-    const value = props.getValues(props.item.name);
-    const config = {
-        readonly: false,
-        placeholder: props.item.placeholder || "Start typing...",
-        statusbar: false,
-        removeButtons: props.item.removeButtons,
-        style: {
-            "font-family": "Arial",
-        },
-        controls: {
-            font: {
-                list: {
-                    Arial: "Arial",
-                    ...props.item?.FontFamily,
-                },
-            },
-            fontsize: {
-                list: Jodit.atom(props.item.Fonts || [
-                    8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24,
-                    25, 26, 27, 28, 29, 30,
-                ]),
-            },
-        },
-        defaultFont: "Arial",
-        defaultFontSize: "11px",
-        askBeforePasteFromWord: false,
-        askBeforePasteHTML: false,
-        hotkeys: {
-            redo: "ctrl+z",
-            undo: "ctrl+y,ctrl+shift+z",
-            indent: "ctrl+]",
-            outdent: "ctrl+[",
-            bold: "ctrl+b",
-            italic: "ctrl+i",
-            removeFormat: "ctrl+shift+m",
-            insertOrderedList: "ctrl+shift+7",
-            insertUnorderedList: "ctrl+shift+8",
-            openSearchDialog: "ctrl+f",
-            openReplaceDialog: "ctrl+r",
-        },
-        events: {
-            processPaste: (_event, html) => {
-                const instance = editor.current;
-                if (instance?.editor) {
-                    const joditEditor = instance.editor;
-                    joditEditor.selection.insertHTML(html);
-                    joditEditor.tempContent = joditEditor.getHTML();
-                }
-            },
-            afterPaste: () => {
-                const instance = editor.current;
-                if (instance?.editor) {
-                    const joditEditor = instance.editor;
-                    const el = document.createElement("div");
-                    el.innerHTML = joditEditor.tempContent
-                        ? joditEditor.tempContent
-                        : joditEditor.getHTML();
-                    joditEditor.setHTML(el.innerHTML);
-                    joditEditor.tempContent = null;
-                }
-            },
-        },
-        ...props.item.sx,
-    };
-    useEffect(() => {
-        setContent(value);
-    }, [value]);
-    const handleBlur = (newContent) => {
-        if (newContent === "<p><br></p>") {
-            setContent(newContent);
-            props.setValue(props.item.name, "");
-        }
-        else {
-            setContent(newContent);
-            props.setValue(props.item.name, newContent);
-        }
-        props.item.onBlurFn && props.item.onBlurFn(newContent);
-    };
-    const handleChange = (newContent) => {
-        props.item.onChangeFn && props.item.onChangeFn(newContent);
-    };
-    return (jsx(JoditEditor, { ref: editor, value: content, config: config, 
-        // tabIndex={1 as IJoditEditorProps["tabIndex"]}
-        onBlur: handleBlur, onChange: handleChange }));
-};
-
-const RichTextEditorWrapper = ({ props, variant, }) => {
-    return (jsx(Controller, { control: props.control, name: props.item.name, render: () => (jsxs(Fragment, { children: [renderLabel(variant, props), jsx(RichTextEditor, { props: props }), jsx(FormBottomField, { ...props })] })) }, props.item.name));
-};
-
-const ITEM_HEIGHT$1 = 48;
-const ITEM_PADDING_TOP$1 = 3;
-const MenuProps$1 = {
-    PaperProps: {
-        style: {
-            maxHeight: ITEM_HEIGHT$1 * 5.5 + ITEM_PADDING_TOP$1,
-            // width: 250,
-        },
-    },
-    autoFocus: false,
-    disableAutoFocusItem: true,
-};
-// const useStyles = makeStyles(() => ({
-//   option: {
-//     fontSize: "10px", // Adjust the font size as needed
-//   },
-//   option2: {
-//     fontSize: "11px",
-//   },
-// }));
-const extractValuesToArray$1 = (inputString) => {
-    const valuesArray = inputString?.split(",");
-    const trimmedArray = valuesArray?.map((value) => value.trim());
-    return trimmedArray;
-};
-function MultiSelectV1({ props, variant, }) {
-    const [personName, setPersonName] = React__default.useState(props.getValues(props.item.name)
-        ? extractValuesToArray$1(props.getValues(props.item.name))
-        : []);
-    const [searchText, setSearchText] = useState("");
-    const options = props.item?.options || [];
-    const [filterOptions, setFilterOptions] = useState(props.item.options || []);
-    const [selectAll, setSelectAll] = useState(false);
-    const textfieldRef = React__default.useRef(null);
-    const fieldValue = props.getValues(props.item.name);
-    const mappedIds = filterOptions.map((item) => item.value);
-    const filterIds = filterOptions.map((item) => item.value);
-    React__default.useEffect(() => {
-        if (searchText !== "") {
-            setFilterOptions(options.filter((item) => item.label.toLowerCase().includes(searchText.toLowerCase())));
-        }
-        else {
-            setFilterOptions(options);
-        }
-    }, [options, searchText]);
-    function hasExactMatch(array, value) {
-        return array.some((item) => item === value);
-    }
-    React__default.useEffect(() => {
-        if (fieldValue?.split(",").length !== filterOptions.length) {
-            setSelectAll(false);
-        }
-        else {
-            console.log(fieldValue?.split(","), 'fieldValue?.split(",")', filterIds);
-            if (fieldValue
-                ?.split(",")
-                .every((value) => hasExactMatch(filterIds, value))) {
-                setSelectAll(true);
-            }
-        }
-    }, [filterOptions, fieldValue]);
-    const handleChange = (event) => {
-        const { target: { value }, } = event;
-        setPersonName(typeof value === "string" ? value?.split(",") : value);
-        props.setValue(props.item.name, (typeof value === "string" ? value?.split(",") : value).join(","));
-    };
-    const selectedOptions = options.filter((item) => fieldValue?.split(",").some((value) => value === item.value));
-    const selectedValues = selectedOptions
-        .map((item) => item.label)
-        .join(" , ");
-    const isError = !!props.errors?.[props.item.name];
-    const isShowBorderError = isError && props.fieldError;
-    return (jsx(Box, { children: jsxs(FormControl$1, { fullWidth: true, sx: {
-                "& .css-kichxs-MuiFormLabel-root-MuiInputLabel-root,.css-1holvmy": {
-                    top: "-10px",
-                },
-                "& .MuiFormLabel-root": {
-                    top: -10,
-                },
-                "& .MuiInputLabel-shrink": {
-                    top: 0,
-                },
-            }, children: [renderLabel(variant, props), variant !== "standard" ? (jsxs(InputLabel, { error: isShowBorderError, id: "demo-multiple-checkbox-label", children: [props.item.label, props.item.required ? " *" : ""] })) : (""), jsxs(Select, { labelId: "demo-multiple-checkbox-label", id: "demo-multiple-checkbox", multiple: true, sx: {
-                        "& .MuiTypography-root": {
-                            fontSize: "5px !important",
-                        },
-                    }, error: isShowBorderError, disabled: props.item.disable, value: props.getValues(props.item.name)
-                        ? extractValuesToArray$1(props.getValues(props.item.name))
-                        : [], onChange: handleChange, onOpen: () => {
-                        setTimeout(() => {
-                            if (textfieldRef.current) {
-                                textfieldRef.current?.focus();
-                            }
-                        }, 0);
-                    }, onClose: () => {
-                        setSearchText("");
-                        props?.item?.onCloseMenu && props?.item?.onCloseMenu();
-                    }, input: jsx(OutlinedInput, { label: variant !== "standard" ? props.item.label : "" }), renderValue: (_selected) => (jsx(Tooltip, { title: selectedValues, children: jsx("span", { children: selectedOptions.length >
-                                (props.item.multiSelectLabelLength || 3)
-                                ? `${selectedOptions.length} Selected`
-                                : selectedValues }) })), MenuProps: MenuProps$1, autoFocus: false, children: [jsx(Box, { sx: {
-                                width: "100%",
-                                position: "sticky",
-                                top: "0px",
-                                padding: "7px",
-                                zIndex: 2,
-                                height: "33px",
-                                background: "#fff",
-                                display: options.length === 0 ? "none" : undefined,
-                            }, children: jsx(TextField, { inputRef: textfieldRef, autoFocus: true, value: searchText, sx: {
-                                    width: "100%",
-                                }, placeholder: "Search...", onChange: (e) => {
-                                    setSearchText(e.target.value);
-                                }, onKeyDown: (e) => {
-                                    if (e.key !== "Escape") {
-                                        e.stopPropagation();
-                                    }
-                                } }) }), jsxs(MenuItem$1, { disabled: filterOptions.length === 0, sx: { zIndex: 0, fontSize: "5px !important" }, children: [jsx(Checkbox$1, { size: "small", checked: selectAll, onChange: () => {
-                                        setSelectAll(!selectAll);
-                                        const selectChanged = !selectAll;
-                                        if (!selectChanged) {
-                                            props.setValue(props.item.name, "");
-                                        }
-                                        else {
-                                            const allDataMapped = mappedIds.join(",");
-                                            console.log(allDataMapped, "allDataMapped");
-                                            props.setValue(props.item.name, allDataMapped);
-                                        }
-                                    } }), jsx(ListItemText, { primary: "Select All", sx: {
-                                        fontSize: "5px !important",
-                                        "& span": {
-                                            fontSize: "12px !important",
-                                        },
-                                    } })] }), filterOptions.length !== 0 ? (filterOptions.map((option) => (jsxs(MenuItem$1, { value: `${option.value}`, sx: { zIndex: 0, fontSize: "11px !important" }, children: [jsx(Checkbox$1, { checked: fieldValue
-                                        ?.split(",")
-                                        .some((value) => value === option.value), size: "small" }), jsx(ListItemText, { primary: option.label, sx: {
-                                        fontSize: "5px !important",
-                                        "& span": {
-                                            fontSize: "12px !important",
-                                        },
-                                    } })] }, option.value)))) : (jsx(MenuItem$1, { disabled: true, value: "NA", children: "No data Found" }, "NA"))] }), jsx(FormBottomField, { ...props })] }) }, props.item.name));
-}
-
-const SingleSelect = ({ props, variant, }) => {
-    const isError = !!props.errors?.[props.item.name];
-    const isShowBorderError = isError && props.fieldError && !props.getValues(props.item.name);
-    const value = props.getValues(props.item.name)
-        ? props.item.options?.find((item) => item.value === props.getValues(props.item.name))
-        : null;
-    return (jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => (jsxs(Fragment, { children: [renderLabel(variant, props), jsx(Autocomplete, { ...field, value: value, onChange: (_, newValue) => {
-                        props.setValue(props?.item?.name, newValue?.value);
-                        props?.item?.onChangeFn &&
-                            props?.item?.onChangeFn(newValue?.value);
-                        props?.clearErrors && props?.clearErrors(props?.item?.name);
-                    }, onBlur: (e) => {
-                        props?.item?.onBlurFn && props?.item?.onBlurFn(e);
-                    }, size: "small", sx: {
-                        "& .MuiAutocomplete-input": {
-                            padding: "0px 0px 0px 5px !important",
-                        },
-                        "& .css-erkti9-MuiFormLabel-root-MuiInputLabel-root,.css-8edmr2-MuiFormLabel-root-MuiInputLabel-root": {
-                            top: "-3px",
-                        },
-                        "& .MuiAutocomplete-option": {
-                            fontSize: "11px",
-                            zIndex: 2000,
-                        },
-                        ...props.item.sx,
-                    }, ListboxProps: {
-                        onScroll: (event) => {
-                            const listboxNode = event.currentTarget;
-                            if (listboxNode.scrollTop + listboxNode.clientHeight ===
-                                listboxNode.scrollHeight) ;
-                        },
-                    }, disabled: props.item.disable, options: props.item.options || [], slotProps: {
-                        popper: {
-                            sx: {
-                                zIndex: 1401,
-                            },
-                        },
-                    }, renderInput: (params) => {
-                        return (jsx(Tooltip, { title: params.inputProps.value && params.inputProps.value, children: jsx(TextField, { ...params, placeholder: props.item.placeholder, error: isShowBorderError, label: variant !== "standard"
-                                    ? `${props.item.label}${props.item.required ? " *" : ""}`
-                                    : "" }) }));
-                    } }), jsx(FormBottomField, { ...props })] })) }, props.item.name));
-};
-
-const SingleSelectNonAutoComplete = ({ props, variant, }) => {
-    const isError = !!props.errors?.[props.item.name];
-    const isShowBorderError = isError && props.fieldError;
-    return (jsxs(FormControl, { fullWidth: true, sx: {
-            position: "relative",
-            "& .MuiFormLabel-root": {
-                top: -10,
-            },
-            "& .MuiInputLabel-shrink": {
-                top: 0,
-            },
-        }, children: [renderLabel(variant, props), variant !== "standard" && (jsx(InputLabel$1, { error: isShowBorderError, id: "demo-simple-select-label", children: props.item.label })), jsx(Select$1, { labelId: "demo-simple-select-label", id: "demo-simple-select", value: props.getValues(props.item.name), label: variant !== "standard"
-                    ? `${props.item.label}${props.item.required ? " *" : ""}`
-                    : "", onChange: (e) => props.setValue(props.item.name, e.target.value), onBlur: (e) => {
-                    props?.item?.onBlurFn && props?.item?.onBlurFn(e);
-                }, error: isShowBorderError, children: (props.item.options || []).map((item) => (jsx(MenuItem, { sx: {
-                        fontSize: "11px", // Adjust the font size as needed
-                        zIndex: 2000,
-                    }, value: item.value, children: item.label }))) }), jsx(FormBottomField, { ...props })] }, props.item.name));
-};
-
-function TimePickerFieldWrapper({ props, variant, }) {
-    const value = props.getValues(props.item.name);
-    const isError = !!props.errors?.[props.item.name];
-    const isShowBorderError = isError && props.fieldError;
-    return (jsxs(LocalizationProvider$1, { dateAdapter: AdapterDayjs, children: [jsx(Controller, { name: "time", control: props.control, render: ({ field }) => (jsxs(Fragment, { children: [" ", renderLabel(variant, props), jsx(TimePicker, { ...field, value: value ? parseCustomTime(value) : null, onChange: (newTime) => {
-                                const parsedTime = parseCustomTime(formatDayjsToCustomTime(newTime));
-                                const min = props.item.minTime
-                                    ? parseCustomTime(props.item.minTime)
-                                    : null;
-                                const max = props.item.maxTime
-                                    ? parseCustomTime(props.item.maxTime)
-                                    : null;
-                                let finalTime = parsedTime;
-                                if (min && parsedTime?.isBefore(min)) {
-                                    finalTime = min;
-                                }
-                                else if (max && parsedTime?.isAfter(max)) {
-                                    finalTime = max;
-                                }
-                                const formatted = formatDayjsToCustomTime(finalTime);
-                                props.setValue(props.item.name, formatted);
-                                props.item.onChangeFn && props.item.onChangeFn(formatted);
-                            }, minTime: props.item.minTime
-                                ? parseCustomTime(props.item.minTime) || undefined
-                                : undefined, maxTime: props.item.maxTime
-                                ? parseCustomTime(props.item.maxTime) || undefined
-                                : undefined, label: props.variant === "standard" ? "" : props.item.label, disabled: props.item.disable, slotProps: {
-                                textField: {
-                                    size: "small",
-                                    error: isShowBorderError,
-                                    inputProps: {
-                                        readOnly: true,
-                                    },
-                                    sx: {
-                                        "& .MuiPickersInputBase-sectionsContainer": {
-                                            paddingTop: 1,
-                                            paddingBottom: 1,
-                                            "& span": {
-                                                fontSize: "12px",
-                                            },
-                                        },
-                                        "& .MuiFormLabel-root": {
-                                            top: -3,
-                                        },
-                                        "& .MuiInputLabel-shrink": {
-                                            top: 0,
-                                        },
-                                    },
-                                },
-                            } })] })) }), jsx(ErrorMessageComponent, { children: jsx(ErrorMessage, { errors: props.errors, name: props.item.name }) })] }));
-}
-
-const FormActiveSwitch = ({ props }) => {
-    const [active, setActive] = useState(true);
-    const { getValues, setValue, item } = props;
-    const defaultValue1 = item.value1 ?? "A";
-    const defaultValue2 = item.value2 ?? "I";
-    useEffect(() => {
-        const currentValue = getValues(item.name);
-        setActive(currentValue === defaultValue1);
-    }, [getValues, item.name, defaultValue1]);
-    const handleSwitchChange = useCallback(() => {
-        setActive((prevActive) => {
-            const newValue = !prevActive ? defaultValue1 : defaultValue2;
-            setValue(item.name, newValue);
-            return !prevActive;
-        });
-    }, [setValue, item.name, defaultValue1, defaultValue2]);
-    return (jsxs("div", { className: "m-form__input", children: [item.label && (jsx("span", { style: {
-                    fontSize: "12px",
-                    fontWeight: 400,
-                    paddingRight: 10,
-                }, children: item.label })), jsxs("span", { className: "switch prestashop-switch fixed-width-lg", children: [jsx("input", { checked: active, id: `${item.name}_on`, name: item.name, type: "radio", value: "Active", onChange: handleSwitchChange }), jsx("label", { htmlFor: `${item.name}_on`, style: { textTransform: "none" }, children: item.label1 ?? "Active" }), jsx("input", { checked: !active, id: `${item.name}_off`, name: item.name, type: "radio", value: "In Active", onChange: handleSwitchChange }), jsx("label", { htmlFor: `${item.name}_off`, style: { textTransform: "none" }, children: item.label2 ?? "In Active" }), jsx("a", { className: "slide-button btn" })] })] }));
-};
-
-// Main renderer function: decides which form field component to render
-// based on the `inputType` defined in `props.item`
-const RenderForm = (props) => {
-    // Variant is an optional property that controls UI style differences
-    const variant = props.variant || "";
-    // Switch between different input types and render the corresponding component
-    switch (props.item?.inputType) {
-        // Common text-based inputs
-        case "text":
-        case "multiEmail":
-        case "email":
-            return jsx(FormTextField, { props: props, variant: variant });
-        // Rich text editor
-        case "rich-text-editor":
-            return jsx(RichTextEditorWrapper, { props: props, variant: variant });
-        // Password field
-        case "password":
-            return jsx(PasswordField, { props: props, variant: variant });
-        // Dropdown select (auto-complete)
-        case "select":
-            return jsx(SingleSelect, { props: props, variant: variant });
-        // Dropdown select (non auto-complete)
-        case "select-v2":
-            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(DatepickerWrapperV2, { props: props, variant: variant });
-        // Time picker
-        case "timepicker":
-            return jsx(TimePickerFieldWrapper, { props: props, variant: variant });
-        // Date range picker - TEMPORARILY DISABLED
-        case "dateRangePicker":
-            return jsx("div", {});
-        // return <DateRangePickerComponent props={props} variant={variant} />;
-        // Month picker
-        case "monthpicker":
-            return jsx(Monthpickerrender, { props: props, variant: variant });
-        // Multi-select dropdown
-        case "multiselect":
-            return jsx(MultiSelectV1, { props: props, variant: variant });
-        // Single file upload
-        case "file":
-            return jsx(FormRenderFileUpload, { props: props, variant: variant });
-        // Multi file upload
-        case "multifile":
-            return 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, {});
-    }
-};
-
-const FormRenderWrapper = ({ formArray, name = "", numberOfColumns = 3, form, variant = "", fieldError, }) => {
-    return (jsx(ThemeProvider, { theme: customTheme, children: 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.FormCell : jsx(RenderForm, { item: item, register: form.register, control: form.control, errors: form.formState.errors, getValues: form.getValues, clearErrors: form.clearErrors, setValue: form.setValue, variant: variant, fieldError: fieldError }) }, `${name}_${i}`)));
-            }) }) }));
-};
-
-const ModalField = ({ name, openModal, handleCancel, content, width = "900px", Transition = "", handleSubmit, styles = {}, saveButton: isSaveButton = false, submitButton = true, handleSaveButton = () => null, SubmitButtonName = "Submit", }) => {
-    const TransitionComponent = () => {
-        switch (Transition) {
-            case "Slide":
-                return Slide;
-            default:
-                return undefined;
-        }
-    };
-    return (jsxs(DialogContainer, { open: openModal, TransitionComponent: TransitionComponent(), fullWidth: true, "aria-labelledby": "draggable-dialog-title", sx: {
-            zIndex: 20,
-            "& .css-tlc64q-MuiPaper-root-MuiDialog-paper,.css-mbdu2s": {
-                maxWidth: width,
-            },
-            ...styles,
-        }, children: [jsxs(DialogTitleWrapper, { children: [jsx("span", { children: name }), jsx(CloseIcon, { sx: { cursor: "pointer" }, onClick: () => handleCancel() })] }), jsx(DialogContent, { style: { paddingTop: "20px", paddingBottom: 0 }, sx: {
-                    "& .pt-0": {
-                        paddingTop: 0,
-                    },
-                }, children: content }), jsx(DialogActions, { sx: { borderTop: "1px solid #e0e0e0", marginTop: 3 }, children: jsxs("div", { style: {
-                        display: "flex",
-                        justifyContent: "flex-end",
-                        gap: "8px",
-                    }, children: [isSaveButton && (jsx(SaveAsDraftButton, { variant: "contained", size: "small", onClick: () => handleSaveButton(), children: "Save" })), submitButton && (jsx(SubmitButton, { variant: "contained", size: "small", onClick: () => handleSubmit(), children: SubmitButtonName })), jsx(CancelButton, { variant: "text", size: "small", onClick: () => handleCancel(), children: "Cancel" })] }) })] }));
-};
-
-const ITEM_HEIGHT = 48;
-const ITEM_PADDING_TOP = 3;
-const MenuProps = {
-    PaperProps: {
-        style: {
-            maxHeight: ITEM_HEIGHT * 5.5 + ITEM_PADDING_TOP,
-        },
-    },
-    autoFocus: false,
-    disableAutoFocusItem: true,
-};
-const extractValuesToArray = (inputString) => {
-    const valuesArray = inputString?.split(",");
-    const trimmedArray = valuesArray?.map((value) => value.trim());
-    return trimmedArray;
-};
-function MultiSelectFieldComponent({ value, options, onChangeFn, disable = false, }) {
-    const [personName, setPersonName] = React.useState(value ? extractValuesToArray(value) : []);
-    const [searchText, setSearchText] = useState("");
-    const [filterOptions, setFilterOptions] = useState(options);
-    const [selectAll, setSelectAll] = useState(false);
-    const textfieldRef = React.useRef(null);
-    const fieldValue = value;
-    const mappedIds = filterOptions.map((item) => item.value);
-    const filterIds = filterOptions.map((item) => item.value);
-    React.useEffect(() => {
-        if (searchText !== "") {
-            setFilterOptions(options.filter((item) => item.label.toLowerCase().includes(searchText.toLowerCase())));
-        }
-        else {
-            setFilterOptions(options);
-        }
-    }, [options, searchText]);
-    function hasExactMatch(array, value) {
-        return array.some((item) => item === value);
-    }
-    React.useEffect(() => {
-        if (fieldValue?.split(",").length !== filterOptions.length) {
-            setSelectAll(false);
-        }
-        else {
-            if (fieldValue
-                ?.split(",")
-                .every((value) => hasExactMatch(filterIds, value))) {
-                setSelectAll(true);
-            }
-        }
-    }, [filterOptions, fieldValue]);
-    const handleChange = (event) => {
-        const { target: { value }, } = event;
-        setPersonName(typeof value === "string" ? value?.split(",") : value);
-        onChangeFn((typeof value === "string" ? value?.split(",") : value).join(","));
-    };
-    const selectedOptions = options.filter((item) => fieldValue?.split(",").some((value) => value === item.value));
-    const selectedValues = selectedOptions
-        .map((item) => item.label)
-        .join(" , ");
-    return (jsx(Box, { children: jsx(FormControl$1, { fullWidth: true, sx: {
-                "& .css-kichxs-MuiFormLabel-root-MuiInputLabel-root,.css-1holvmy": {
-                    top: "-10px",
-                },
-            }, children: jsxs(Select, { labelId: "demo-multiple-checkbox-label", id: "demo-multiple-checkbox", multiple: true, sx: {
-                    "& .MuiTypography-root": {
-                        fontSize: "5px !important",
-                    },
-                }, disabled: disable, value: value ? extractValuesToArray(value) : [], onChange: handleChange, onOpen: () => {
-                    setTimeout(() => {
-                        if (textfieldRef.current) {
-                            textfieldRef.current?.focus();
-                        }
-                    }, 0);
-                }, onClose: () => {
-                    setSearchText("");
-                }, renderValue: () => (jsx(Tooltip, { title: selectedValues, children: jsx("span", { children: selectedOptions.length > 3
-                            ? `${selectedOptions.length} Selected`
-                            : selectedValues }) })), MenuProps: MenuProps, autoFocus: false, children: [jsx(Box, { sx: {
-                            width: "100%",
-                            position: "sticky",
-                            top: "0px",
-                            padding: "7px",
-                            zIndex: 2,
-                            height: "33px",
-                            background: "#fff",
-                            display: options.length === 0 ? "none" : undefined,
-                        }, children: jsx(TextField, { inputRef: textfieldRef, autoFocus: true, value: searchText, sx: {
-                                width: "100%",
-                            }, placeholder: "Search...", onChange: (e) => {
-                                setSearchText(e.target.value);
-                            }, onKeyDown: (e) => {
-                                if (e.key !== "Escape") {
-                                    e.stopPropagation();
-                                }
-                            } }) }), jsxs(MenuItem$1, { disabled: filterOptions.length === 0, sx: { zIndex: 0, fontSize: "5px !important" }, children: [jsx(Checkbox$1, { size: "small", checked: selectAll, onChange: () => {
-                                    setSelectAll(!selectAll);
-                                    const selectChanged = !selectAll;
-                                    if (!selectChanged) {
-                                        onChangeFn("");
-                                    }
-                                    else {
-                                        const allDataMapped = mappedIds.join(",");
-                                        console.log(allDataMapped, "allDataMapped");
-                                        onChangeFn(allDataMapped);
-                                    }
-                                } }), jsx(ListItemText, { primary: "Select All", sx: {
-                                    fontSize: "5px !important",
-                                    "& span": {
-                                        fontSize: "12px !important",
-                                    },
-                                } })] }), filterOptions.length !== 0 ? (filterOptions.map((option) => (jsxs(MenuItem$1, { value: `${option.value}`, sx: { zIndex: 0, fontSize: "11px !important" }, children: [jsx(Checkbox$1, { checked: fieldValue
-                                    ?.split(",")
-                                    .some((value) => value === option.value), size: "small" }), jsx(ListItemText, { primary: option.label, sx: {
-                                    fontSize: "5px !important",
-                                    "& span": {
-                                        fontSize: "12px !important",
-                                    },
-                                } })] }, option.value)))) : (jsx(MenuItem$1, { disabled: true, value: "NA", children: "No data Found" }, "NA"))] }) }) }));
-}
-
-const secondsToMMSS = (totalSeconds) => {
-    const minutes = Math.floor(totalSeconds / 60);
-    const seconds = Math.floor(totalSeconds % 60);
-    const formattedMinutes = String(minutes).padStart(2, "0");
-    const formattedSeconds = String(seconds).padStart(2, "0");
-    return `${formattedMinutes}:${formattedSeconds}`;
-};
-const promptBeforeValue = 120000;
-const SessionTimeOut = ({ sessionTime, handleSubmitSession, onSessionExpire, handleSessionCancel, SubmitButtonName = "Submit", buttonStyleProps, }) => {
-    const [openConfirmModal, setOpenConfirmModal] = useState(false);
-    const expiryDetails = sessionTime;
-    const providedTimestamp = new Date(expiryDetails).getTime();
-    const currentTimestamp = new Date().getTime();
-    const remainingTime = providedTimestamp - currentTimestamp;
-    const timeout = remainingTime;
-    const promptBeforeIdle = Math.min(promptBeforeValue, timeout - 1000);
-    const [, setRemainingTimeInSeconds] = useState(Math.ceil(timeout / 1000));
-    const [formattedRemainingTime, setFormattedRemainingTime] = useState(secondsToMMSS(Math.ceil(timeout / 1000)));
-    const onIdle = () => {
-        if (sessionTime) {
-            onSessionExpire();
-        }
-    };
-    const handleSubmit = () => {
-        handleSubmitSession();
-        setOpenConfirmModal(false);
-    };
-    const handleCancel = () => {
-        handleSessionCancel();
-        setOpenConfirmModal(false);
-    };
-    const onPrompt = () => {
-        setOpenConfirmModal(true);
-    };
-    const { getRemainingTime } = useIdleTimer({
-        onIdle,
-        onPrompt,
-        promptBeforeIdle,
-        timeout,
-        throttle: 1000, // Adjust throttle to reduce delays
-    });
-    useEffect(() => {
-        const interval = setInterval(() => {
-            const remainingSeconds = Math.ceil(getRemainingTime() / 1000);
-            setRemainingTimeInSeconds(promptBeforeIdle !== promptBeforeValue ? remainingSeconds : 0);
-            const formattedTime = secondsToMMSS(remainingSeconds);
-            setFormattedRemainingTime(promptBeforeIdle !== promptBeforeValue ? formattedTime : "00:00");
-        }, 1000); // Adjust interval to 1000 ms
-        return () => {
-            clearInterval(interval);
-        };
-    }, [promptBeforeIdle, getRemainingTime]);
-    const sessionMessage = `Your session will expire in ${formattedRemainingTime} seconds. Do you want to extend the session?`;
-    console.log(promptBeforeIdle, "promptBeforeIdle");
-    return (jsx(Fragment, { children: jsx(ConfirmationDialog, { openConfirmDialog: openConfirmModal, handleCancel: handleCancel, onClickSubmit: handleSubmit, text: sessionMessage, Submit: SubmitButtonName, buttonStyleProps: buttonStyleProps }) }));
-};
-
-const toTitleCase = (str) => {
-    return str
-        .replace(/([A-Z])/g, " $1") // Insert space before capital letters
-        .replace(/^./, (match) => match.toUpperCase()) // Capitalize the first letter
-        .trim(); // Remove any leading or trailing spaces
-};
-const getMaxLength = (data, key) => {
-    const keyLength = key.length;
-    // Length of the key (column header)
-    const dataMaxLength = Math.max(...data.map((item) => (item[key] ? item[key].toString().length : 0)));
-    return Math.max(keyLength, dataMaxLength);
-}; // Return the maximum of key length or data length };
-const handleDownloadReactTableDataExcel = (fileName, rowData, columns = [], customColumns = [], HeaderBackGround = "FFF4694B", HeaderColor = "000000") => {
-    const EXCEL_TYPE = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8";
-    const EXCEL_EXTENSION = ".xlsx";
-    // Exclude 'actions' column and columns with hideOnExcel: true
-    const visibleColumns1 = columns.filter((col) => col?.accessorKey !== "actions");
-    const visibleColumns = visibleColumns1.filter((col) => !col?.hideOnExcel || col?.hideOnExcel !== true);
-    const data = rowData;
-    // Map column headers and accessorKeys
-    const columnHeaders = visibleColumns.length > 0
-        ? visibleColumns.map((col) => col.header)
-        : Object.keys(data[0]); // Use data keys as headers if columns are not provided
-    const accessorKeys = visibleColumns.length > 0
-        ? visibleColumns.map((col) => col.accessorKey)
-        : Object.keys(data[0]); // Use data keys as accessor keys if columns are not provided
-    // Reformat data to include only visible columns
-    const formattedData = data.map((row) => {
-        const formattedRow = {};
-        accessorKeys.forEach((key) => {
-            formattedRow[key] = row[key] || "";
-        });
-        return formattedRow;
-    });
-    // Create worksheet
-    const ws = XLSX.utils.json_to_sheet(formattedData, { header: accessorKeys });
-    // Apply column headers styling dynamically
-    accessorKeys.forEach((key, index) => {
-        const colLetter = XLSX.utils.encode_col(index); // Excel column letter
-        const cellAddress = `${colLetter}1`; // Header row cell
-        const headerText = toTitleCase(columnHeaders[index]);
-        ws[cellAddress] = {
-            t: "s",
-            v: headerText,
-            s: {
-                fill: { patternType: "solid", fgColor: { rgb: HeaderBackGround } },
-                font: { bold: true, color: { rgb: HeaderColor }, sz: 12 },
-                alignment: { horizontal: "center" },
-            },
-        };
-        // Apply custom color to entire column based on excelColumnColor in the column definition
-        const col = visibleColumns.length > 0
-            ? visibleColumns[index]
-            : customColumns.length > 0 &&
-                customColumns.find((item) => item.accessorKey === key);
-        if (col && col.excelColumnColor) {
-            const columnColor = col.excelColumnColor;
-            const textColor = col.excelTextColor;
-            // Apply color to all rows in that column (from row 2 onward)
-            for (let rowIndex = 2; rowIndex <= formattedData.length + 1; rowIndex++) {
-                const cell = `${colLetter}${rowIndex}`;
-                ws[cell] = ws[cell] || {}; // Ensure cell exists
-                ws[cell].s = ws[cell].s || {}; // Ensure style exists
-                ws[cell].s.fill = {
-                    patternType: "solid",
-                    fgColor: { rgb: columnColor },
-                    font: { color: { rgb: textColor } },
-                };
-                ws[cell].s.border = {
-                    top: { style: "thin", color: { rgb: "000000" } }, // Black thin border
-                    bottom: { style: "thin", color: { rgb: "000000" } },
-                    left: { style: "thin", color: { rgb: "000000" } },
-                    right: { style: "thin", color: { rgb: "000000" } },
-                };
-            }
-        }
-    });
-    // Set column widths dynamically or with defaults
-    const colWidths = visibleColumns.length > 0
-        ? accessorKeys.map((accessorKey) => {
-            // Find the corresponding column by accessorKey
-            const column = visibleColumns.find((col) => col.accessorKey === accessorKey);
-            // Check if `excelColumnSize` is defined for this column
-            if (column && column.excelColumnSize) {
-                return {
-                    wch: parseInt(column.excelColumnSize.replace("px", "")) / 7,
-                };
-            }
-            else {
-                return { wch: getMaxLength(data, accessorKey) + 5 }; // Default column width
-            }
-        })
-        : customColumns.length > 0
-            ? accessorKeys.map((accessorKey) => {
-                // Find the corresponding column by accessorKey
-                const column = customColumns.find((col) => col.accessorKey === accessorKey);
-                // Check if `excelColumnSize` is defined for this column
-                if (column && column.excelColumnSize) {
-                    return {
-                        wch: parseInt(column.excelColumnSize.replace("px", "")) / 7,
-                    };
-                }
-                else {
-                    return { wch: getMaxLength(data, accessorKey) + 5 }; // Default column width
-                }
-            })
-            : accessorKeys.map((accessorKey) => {
-                // Find the corresponding column by accessorKey
-                const column = customColumns.find((col) => col.accessorKey === accessorKey);
-                // Check if `excelColumnSize` is defined for this column
-                if (column && column.excelColumnSize) {
-                    return {
-                        wch: parseInt(column.excelColumnSize.replace("px", "")) / 7,
-                    };
-                }
-                else {
-                    return { wch: getMaxLength(data, accessorKey) + 5 }; // Default column width
-                }
-            });
-    ws["!cols"] = colWidths;
-    // Create workbook and save it
-    const wb = XLSX.utils.book_new();
-    XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
-    const eb = XLSX.write(wb, { bookType: "xlsx", type: "array" });
-    const blob = new Blob([eb], { type: EXCEL_TYPE });
-    saveAs(blob, fileName + EXCEL_EXTENSION);
-};
-function getUsernameFromEmail(email) {
-    return email.split("@")[0];
-}
-function getInitials(name) {
-    if (!name)
-        return "";
-    const words = name.trim().split(/\s+/); // split by any spaces
-    let initials = "";
-    for (let i = 0; i < words.length && initials.length < 2; i++) {
-        initials += words[i][0].toUpperCase();
-    }
-    return initials;
-}
-function findMenuHierarchy(menuData, currentUrl, URLProjectNameWithSlash) {
-    const url = currentUrl;
-    const pathname = url.pathname.replace(URLProjectNameWithSlash, "").toLowerCase() +
-        url.search.toLowerCase();
-    let result = [];
-    function traverse(menus, path = []) {
-        for (const menu of menus) {
-            const currentPath = [...path, menu];
-            const subMenusRaw = []
-                .concat(menu.SubMenu || [], menu.SubMenus || [])
-                .filter(Boolean);
-            // Match found
-            if (menu.Path && menu.Path.toLowerCase() === pathname) {
-                result = currentPath;
-                return true;
-            }
-            if (subMenusRaw.length > 0) {
-                if (traverse(subMenusRaw, currentPath)) {
-                    return true;
-                }
-            }
-        }
-        return false;
-    }
-    traverse(menuData);
-    return result;
-}
-/**
- * Calculates a date by adding/subtracting days from today or a base date
- * @param dayOffset - Days to add (positive) or subtract (negative) (default: 0)
- * @param baseDate - Base date in DD/MM/YYYY format (default: today)
- * @returns Formatted date string in DD/MM/YYYY format
- */
-const getDesiredDate = (dayOffset = 0, baseDate = null) => {
-    const startDate = baseDate ? dayjs(baseDate, "DD/MM/YYYY") : dayjs();
-    if (!startDate.isValid()) {
-        throw new Error("Invalid date format. Please use DD/MM/YYYY.");
-    }
-    return startDate.add(dayOffset, "day").format("DD/MM/YYYY");
-};
-/**
- * Calculates sum of numeric values for a specific property across array objects
- * @param array - Array of objects to sum
- * @param key - Property name to sum
- * @returns Total sum of numeric values
- */
-function calculateTotalArrayValueTotal(array, key) {
-    if (!Array.isArray(array)) {
-        return 0;
-    }
-    return array.reduce((sum, item) => {
-        const value = Number(item[key]) || 0;
-        return sum + value;
-    }, 0);
-}
-/**
- * Checks if first date comes before second date
- * @param dateStr1 - First date in DD/MM/YYYY format
- * @param dateStr2 - Second date in DD/MM/YYYY format
- * @returns True if dateStr1 is before dateStr2
- */
-function checkIsDateIsBefore(dateStr1, dateStr2) {
-    const date1 = dayjs(dateStr1.trim(), "DD/MM/YYYY");
-    const date2 = dayjs(dateStr2.trim(), "DD/MM/YYYY");
-    if (!date1.isValid() || !date2.isValid()) {
-        throw new Error("Invalid date format. Please use DD/MM/YYYY.");
-    }
-    return date1.isBefore(date2);
-}
-/**
- * Lightens a hex color by a specified percentage
- * @param color - Hex color string (with or without #)
- * @param percent - Percentage to lighten (0-100)
- * @returns Lightened hex color string
- */
-function lightenColor(color, percent) {
-    const num = parseInt(color.replace("#", ""), 16);
-    const amt = Math.round(2.55 * percent);
-    const R = (num >> 16) + amt;
-    const G = ((num >> 8) & 0x00ff) + amt;
-    const B = (num & 0x0000ff) + amt;
-    return ("#" +
-        (0x1000000 +
-            (R < 255 ? (R < 1 ? 0 : R) : 255) * 0x10000 +
-            (G < 255 ? (G < 1 ? 0 : G) : 255) * 0x100 +
-            (B < 255 ? (B < 1 ? 0 : B) : 255))
-            .toString(16)
-            .slice(1));
-}
-/**
- * Gets formatted date with optional day offset
- * @param dayOffset - Days to add (positive) or subtract (negative) from today (default: 0)
- * @returns Date string in DD/MM/YYYY format
- */
-function getFormattedDate(dayOffset = 0) {
-    return dayjs().add(dayOffset, "day").format("DD/MM/YYYY");
-}
-
-// Utility Functions - Helper functions for form operations and data manipulation
-
-var index$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  calculateTotalArrayValueTotal: calculateTotalArrayValueTotal,
-  checkIsDateIsBefore: checkIsDateIsBefore,
-  extractDate: extractDate,
-  findMenuHierarchy: findMenuHierarchy,
-  formatDateMonthAndYear: formatDateMonthAndYear,
-  formatDayjsToCustomTime: formatDayjsToCustomTime,
-  getDesiredDate: getDesiredDate,
-  getFormattedDate: getFormattedDate,
-  getInitials: getInitials,
-  getUsernameFromEmail: getUsernameFromEmail,
-  handleDownloadReactTableDataExcel: handleDownloadReactTableDataExcel,
-  lightenColor: lightenColor,
-  parseCustomTime: parseCustomTime,
-  renderLabel: renderLabel
-});
-
-// import { ErrorMessage } from "@hookform/error-message";
-// import {
-//   Autocomplete,
-//   Skeleton,
-//   Stack,
-//   TextField,
-//   Tooltip,
-//   Typography,
-// } from "@mui/material";
-// import { makeStyles } from "@mui/styles";
-// import React, { useEffect, useState } from "react";
-// import { Controller } from "react-hook-form";
-// import { ErrorMessageComponent, OptionRender } from "../Form.styles";
-// import { FormRenderProps } from "../../../Utilities/Interface/FormInterface";
-// const useStyles = makeStyles((theme) => ({
-//   option: {
-//     fontSize: "11px", // Adjust the font size as needed
-//   },
-//   option2: {
-//     fontSize: "14px",
-//   },
-// }));
-// const SingleSelectSearchApi = ({ props }: { props: FormRenderProps }) => {
-//   const classes = useStyles();
-//   const [searchValue, setSearchValue] = useState<string>("");
-//   const [optionsFetched, setOptionsFetched] = useState([]);
-//   const [isLoading, setIsLoading] = useState<boolean>(false);
-//   console.log(
-//     props.getValues(props.item.name),
-//     "props.getValues(props.item.name)"
-//   );
-//   useEffect(() => {
-//     const controller = new AbortController();
-//     const signal = controller.signal;
-//     if (props?.item?.autoFIll && props.getValues(props.item.name)) {
-//       setSearchValue(props.getValues(props.item.name));
-//       setOptionsFetched([]);
-//     } else if (props.getValues(props.item.name)) {
-//       setSearchValue(props.getValues(props.item.name));
-//     }
-//     // if(searchValue!==''){
-//     setIsLoading(true);
-//     props.item.AxiosInstance.get(
-//       props.item.ApiInstance + `&${props.item.searchInstance}=${searchValue}`,
-//       {
-//         signal,
-//         headers: {
-//           Authorization: `Bearer ${props.item.tokenInstance}`,
-//         },
-//       }
-//     )
-//       .then((res) => {
-//         setOptionsFetched(res.data);
-//         setIsLoading(false);
-//         props.item.setLoadedPaginationOptions &&
-//           props.item.setLoadedPaginationOptions(res.data);
-//       })
-//       .catch((err) => {
-//         console.log(err, "error");
-//       });
-//     return () => controller.abort();
-//     // }
-//   }, [
-//     searchValue,
-//     props.getValues(props.item.name),
-//     props.item.ApiInstance,
-//     props?.item?.autoFIll,
-//     props?.item?.tokenInstance
-//   ]);
-//   useEffect(() => {
-//     if (props.item?.ApiInstanceReferal) {
-//       setSearchValue("");
-//     }
-//   }, [props.item?.ApiInstanceReferal]);
-//   const isOptionEqualToValue = (option: any, value: any) =>
-//     option?.value === value?.value; // Assuming there's a 'value' property in your options
-//   return (
-//     <Controller
-//       control={props.control}
-//       name={props.item.name}
-//       render={({ field }) => (
-//         <>
-//           <Autocomplete
-//             {...field}
-//             value={
-//               props.getValues(props.item.name)
-//                 ? optionsFetched?.find(
-//                     (item) => item?.value === props.getValues(props.item.name)
-//                   )
-//                 : null
-//             }
-//             onChange={(_, newValue) => {
-//               // field.onChange(newValue);
-//               props.setValue(props.item.name, newValue?.value);
-//               props?.item?.onChangeFn &&
-//                 props?.item?.onChangeFn(newValue?.value);
-//               props?.clearErrors && props?.clearErrors(props.item.name);
-//             }}
-//             size="small"
-//             sx={{
-//               "& .MuiAutocomplete-input": {
-//                 padding: "0px 0px 0px 5px !important",
-//               },
-//               "& .css-erkti9-MuiFormLabel-root-MuiInputLabel-root ": {
-//                 top: "-5px",
-//               },
-//             }}
-//             disabled={props.item.disable}
-//             options={optionsFetched}
-//             classes={{
-//               option:
-//                 props.item.size === "extrasmall"
-//                   ? classes.option
-//                   : classes.option2,
-//             }}
-//             getOptionLabel={(option) => option.label}
-//             renderInput={(params) => {
-//               return (
-//                 <Tooltip
-//                   title={params.inputProps.value && params.inputProps.value}
-//                 >
-//                   <TextField
-//                     {...params}
-//                     onChange={(e) => {
-//                       setSearchValue(e.target.value);
-//                     }}
-//                     placeholder={props.item.placeholder}
-//                     label={props.item.label}
-//                   />
-//                 </Tooltip>
-//               );
-//             }}
-//             PaperComponent={({ children }) => (
-//               <div
-//                 style={{
-//                   background: "#fff",
-//                 }}
-//               >
-//                 {isLoading ? (
-//                   <Stack padding={2} spacing={1}>
-//                     <Skeleton
-//                       variant="rectangular"
-//                       width={"100%"}
-//                       height={20}
-//                     />
-//                     <Skeleton
-//                       variant="rectangular"
-//                       width={"100%"}
-//                       height={20}
-//                     />
-//                     <Skeleton
-//                       variant="rectangular"
-//                       width={"100%"}
-//                       height={20}
-//                     />
-//                     <Skeleton
-//                       variant="rectangular"
-//                       width={"100%"}
-//                       height={20}
-//                     />
-//                     <Skeleton
-//                       variant="rectangular"
-//                       width={"100%"}
-//                       height={20}
-//                     />
-//                     <Skeleton
-//                       variant="rectangular"
-//                       width={"100%"}
-//                       height={20}
-//                     />
-//                   </Stack>
-//                 ) : (
-//                   children
-//                 )}
-//               </div>
-//             )}
-//             isOptionEqualToValue={isOptionEqualToValue}
-//           />
-//           {props?.item?.helperText && (
-//             <span
-//               style={{
-//                 fontSize: "11px",
-//                 color: "#3651d3",
-//               }}
-//             >
-//               ({props?.item?.helperText})
-//             </span>
-//           )}
-//           <ErrorMessageComponent>
-//             <ErrorMessage errors={props.errors} name={props.item.name} />
-//           </ErrorMessageComponent>
-//         </>
-//       )}
-//     />
-//   );
-// };
-// export default SingleSelectSearchApi;
-const SingleSelectSearchApi = () => {
-    return jsx("div", { children: "SingleSelectSearchApi" });
-};
-
-const MonthPicker = ({ props }) => {
-    const [selectedMonths, setSelectedMonths] = useState([]);
-    const handleMonthChange = (date) => {
-        // Handle the selected months
-        setSelectedMonths((prevSelectedMonths) => {
-            const monthIndex = date.getMonth();
-            if (prevSelectedMonths.includes(monthIndex)) {
-                // If month is already selected, remove it
-                return prevSelectedMonths?.filter((month) => month !== monthIndex);
-            }
-            else {
-                // If month is not selected, add it
-                return [...prevSelectedMonths, monthIndex];
-            }
-        });
-    };
-    return (jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => (jsxs(Fragment, { children: [jsx(LocalizationProvider, { dateAdapter: AdapterDayjs, children: jsx(DatePicker$1, { value: field.value, onChange: handleMonthChange, slots: {
-                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                            textField: (textFieldProps) => (jsx(TextField, { ...textFieldProps, fullWidth: true, disabled: props.item.disable || false, InputLabelProps: {
-                                    shrink: true,
-                                }, error: props.errors, inputProps: {
-                                    min: props.item.minDate,
-                                } })),
-                        }, slotProps: {
-                            textField: {
-                                sx: {
-                                    "& .MuiPickersInputBase-sectionsContainer": {
-                                        paddingTop: 1,
-                                        paddingBottom: 1,
-                                        "& span": {
-                                            fontSize: "12px",
-                                        },
-                                    },
-                                    "& .MuiFormLabel-root": {
-                                        top: -10,
-                                    },
-                                    "& .MuiInputLabel-shrink": {
-                                        top: 0,
-                                    },
-                                },
-                            },
-                        } }) }), jsx(FormGroup, { children: Array.from({ length: 12 }).map((_, index) => (jsx(FormControlLabel, { control: jsx(Checkbox, { checked: selectedMonths.includes(index), onChange: () => handleMonthChange(new Date(2000, index, 1)), color: "primary" }), label: new Date(2000, index, 1).toLocaleDateString(undefined, {
-                            month: "short",
-                        }) }, index))) })] })) }));
-};
-
-// import FormBottomField from "../FormBottomField/FormBottomField";
-// import { Box, TextField } from "@mui/material";
-// import { LocalizationProvider } from "@mui/x-date-pickers";
-// import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
-// import dayjs from "dayjs";
-// import DatePicker from "react-datepicker";
-// import { Controller } from "react-hook-form";
-// import { renderLabel } from "../../../Utilities/Constants/FormConstants";
-// import {
-//   FormRenderProps,
-//   VariantProps,
-// } from "../../../Utilities/Interface/FormInterface";
-// const YearPickerField = ({
-//   props,
-//   variant,
-// }: {
-//   props: FormRenderProps;
-//   variant: VariantProps;
-// }) => {
-//   return (
-//     <Controller
-//       control={props.control}
-//       name={props.item.name}
-//       key={props.item.name}
-//       render={({ field }) => (
-//         <>
-//           <LocalizationProvider dateAdapter={AdapterDayjs}>
-//             {renderLabel(variant, props)}
-//             <Box
-//               sx={{
-//                 "& .css-1holvmy, .css-kichxs-MuiFormLabel-root-MuiInputLabel-root":
-//                   {
-//                     top: "-10px",
-//                   },
-//               }}
-//             >
-//               {" "}
-//               <DatePicker
-//                 views={["year"]}
-//                 value={
-//                   field.value
-//                     ? dayjs(field.value).format("YYYY-MM-DD")
-//                     : undefined
-//                 }
-//                 onChange={(date: any) => field.onChange(date)}
-//                 // minDate={}
-//                 slotProps={{
-//                   textField: {
-//                     label: `${props.item.label}${props.item.required ? " *" : ""}`,
-//                     variant: variant !== "standard" ? variant : undefined,
-//                   },
-//                 }}
-//                 slots={{
-//                   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-//                   textField: (textFieldProps: any) => (
-//                     <TextField
-//                       {...textFieldProps}
-//                       fullWidth
-//                       disabled={props.item.disable || false}
-//                       InputLabelProps={{
-//                         shrink: true,
-//                       }}
-//                     />
-//                   ),
-//                 }}
-//               />
-//             </Box>
-//           </LocalizationProvider>
-//           <FormBottomField {...props} />
-//         </>
-//       )}
-//     />
-//   );
-// };
-// export default YearPickerField;
-const YearPickerField = () => {
-    return jsx("div", { children: "YearPickerField" });
-};
-
-// Form Input Components - Individual form field components for advanced usage
-
-var index = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  DatepickerWrapperV2: DatepickerWrapperV2,
-  FormBottomField: FormBottomField,
-  FormCheckBox: FormCheckBox,
-  FormCheckBoxGroup: FormCheckBoxGroup,
-  FormErrorField: FormErrorField,
-  FormNumberField: FormNumberField,
-  FormNumberFieldDecimal: FormNumberFieldDecimal,
-  FormRadioGroup: FormRadioGroup,
-  FormRenderFileUpload: FormRenderFileUpload,
-  FormRenderMultiFileUpload: FormRenderMultiFileUpload,
-  FormTextAreaField: FormTextAreaField,
-  FormTextField: FormTextField,
-  HelperText: HelperText,
-  MonthPicker: MonthPicker,
-  Monthpickerrender: Monthpickerrender,
-  MultiSelectV1: MultiSelectV1,
-  PasswordField: PasswordField,
-  RichTextEditor: RichTextEditor,
-  RichTextEditorWrapper: RichTextEditorWrapper,
-  SingleSelect: SingleSelect,
-  SingleSelectNonAutoComplete: SingleSelectNonAutoComplete,
-  SingleSelectSearchApi: SingleSelectSearchApi,
-  TimePicker: TimePickerFieldWrapper,
-  YearPickerField: YearPickerField
-});
-
-// Common validation schemas
-const emailSchema = Yup
-    .string()
-    .email("Please enter a valid email address")
-    .required("Email is required");
-const passwordSchema = Yup
-    .string()
-    .min(8, "Password must be at least 8 characters")
-    .matches(/[A-Z]/, "Password must contain at least one uppercase letter")
-    .matches(/[a-z]/, "Password must contain at least one lowercase letter")
-    .matches(/[0-9]/, "Password must contain at least one number")
-    .required("Password is required");
-const phoneSchema = Yup
-    .string()
-    .matches(/^[+]?[1-9][\d]{0,15}$/, "Please enter a valid phone number")
-    .required("Phone number is required");
-const requiredStringSchema = Yup
-    .string()
-    .required("This field is required");
-const optionalStringSchema = Yup.string();
-const numberSchema = Yup
-    .number()
-    .typeError("Please enter a valid number")
-    .required("This field is required");
-const optionalNumberSchema = Yup
-    .number()
-    .typeError("Please enter a valid number");
-const dateSchema = Yup
-    .date()
-    .typeError("Please enter a valid date")
-    .required("Date is required");
-const urlSchema = Yup
-    .string()
-    .url("Please enter a valid URL")
-    .required("URL is required");
-// Example form schemas
-const loginSchema = Yup.object({
-    email: emailSchema,
-    password: Yup.string().required("Password is required"),
-});
-const registrationSchema = Yup.object({
-    firstName: requiredStringSchema,
-    lastName: requiredStringSchema,
-    email: emailSchema,
-    password: passwordSchema,
-    confirmPassword: Yup
-        .string()
-        .oneOf([Yup.ref("password")], "Passwords must match")
-        .required("Please confirm your password"),
-});
-const contactSchema = Yup.object({
-    name: requiredStringSchema,
-    email: emailSchema,
-    phone: phoneSchema.optional(),
-    message: requiredStringSchema,
-});
-
-var schemas = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  contactSchema: contactSchema,
-  dateSchema: dateSchema,
-  emailSchema: emailSchema,
-  loginSchema: loginSchema,
-  numberSchema: numberSchema,
-  optionalNumberSchema: optionalNumberSchema,
-  optionalStringSchema: optionalStringSchema,
-  passwordSchema: passwordSchema,
-  phoneSchema: phoneSchema,
-  registrationSchema: registrationSchema,
-  requiredStringSchema: requiredStringSchema,
-  urlSchema: urlSchema
-});
-
-export { ConfirmationDialog, DeleteField, index as FormComponents, ModalField, MultiSelectFieldComponent, FormRenderWrapper as RenderForm, SessionTimeOut as SessionTimeoutField, index$2 as Theme, index$1 as Utils, schemas as ValidationSchemas, calculateTotalArrayValueTotal, checkIsDateIsBefore, findMenuHierarchy, getDesiredDate, getFormattedDate, getInitials, getUsernameFromEmail, handleDownloadReactTableDataExcel, lightenColor, useFormValidatingContext };