tp-react-elements 1.0.0

package/dist/components/FormComponents/Select/MultiSelectv1.esm.js

@@ -0,0 +1,150 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Box, TextField, Tooltip } from '@mui/material';
+import Checkbox from '@mui/material/Checkbox';
+import FormControl from '@mui/material/FormControl';
+import InputLabel from '@mui/material/InputLabel';
+import ListItemText from '@mui/material/ListItemText';
+import MenuItem from '@mui/material/MenuItem';
+import OutlinedInput from '@mui/material/OutlinedInput';
+import Select from '@mui/material/Select';
+import React__default, { useState, useMemo } from 'react';
+import { useWatch } from 'react-hook-form';
+import FormBottomField from '../FormBottomField/FormBottomField.esm.js';
+import 'dayjs';
+import { renderLabel } from '../../../utils/Constants/FormConstants.esm.js';
+
+const ITEM_HEIGHT = 48;
+const ITEM_PADDING_TOP = 3;
+const MenuProps = {
+    PaperProps: {
+        style: {
+            maxHeight: ITEM_HEIGHT * 5.5 + ITEM_PADDING_TOP,
+            // width: 250,
+        },
+    },
+    autoFocus: false,
+    disableAutoFocusItem: true,
+};
+// const useStyles = makeStyles(() => ({
+//   option: {
+//     fontSize: "10px", // Adjust the font size as needed
+//   },
+//   option2: {
+//     fontSize: "11px",
+//   },
+// }));
+const extractValuesToArray = (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(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 = useWatch({ control: props.control, name: props.item.name });
+    const mappedIds = useMemo(() => filterOptions.map((item) => item.value), [filterOptions]);
+    const filterIds = useMemo(() => filterOptions.map((item) => item.value), [filterOptions]);
+    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 {
+            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 = useMemo(() => options.filter((item) => fieldValue?.split(',').some((value) => value === item.value)), [options, fieldValue]);
+    const selectedValues = selectedOptions.map((item) => item.label).join(' , ');
+    const isError = !!props.errors?.[props.item.name];
+    const isShowBorderError = isError;
+    return (jsx(Box, { children: jsxs(FormControl, { 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: `${props.item.name}-ms-labelId`, children: [props.item.label, props.item.required ? ' *' : ''] })) : (''), jsxs(Select, { labelId: `${props.item.name}-ms-labelId`, id: `${props.item.name}-ms-select`, multiple: true, sx: {
+                        '& .MuiTypography-root': {
+                            fontSize: '5px !important',
+                        },
+                    }, error: isShowBorderError, disabled: props.item.disable, value: fieldValue ? extractValuesToArray(fieldValue) : [], onChange: handleChange, inputProps: {
+                        'aria-labelledby': `${props.item.name}-label`,
+                        'aria-describedby': `${props.item.name}-helper ${props.item.name}-error`,
+                        'aria-required': props.item.required ? true : undefined,
+                    }, 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, 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, { disabled: filterOptions.length === 0, sx: { zIndex: 0, fontSize: '5px !important' }, children: [jsx(Checkbox, { size: "small", checked: selectAll, onChange: () => {
+                                        setSelectAll(!selectAll);
+                                        const selectChanged = !selectAll;
+                                        if (!selectChanged) {
+                                            props.setValue(props.item.name, '');
+                                        }
+                                        else {
+                                            const allDataMapped = mappedIds.join(',');
+                                            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, { value: `${option.value}`, sx: { zIndex: 0, fontSize: '11px !important' }, children: [jsx(Checkbox, { 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, { disabled: true, value: 'NA', children: "No data Found" }, 'NA'))] }), jsx(FormBottomField, { ...props })] }) }, props.item.name));
+}
+
+export { MultiSelectV1 as default };

package/dist/components/FormComponents/Select/SingleSelect.d.ts

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

package/dist/components/FormComponents/Select/SingleSelect.esm.js

@@ -0,0 +1,62 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { createElement } from 'react';
+import { Autocomplete, TextField } from '@mui/material';
+import { useWatch, Controller } from 'react-hook-form';
+import FormBottomField from '../FormBottomField/FormBottomField.esm.js';
+import 'dayjs';
+import { renderLabel } from '../../../utils/Constants/FormConstants.esm.js';
+
+const SingleSelect = ({ props, variant }) => {
+    const isError = !!props.errors?.[props.item.name];
+    const watchedValue = useWatch({ control: props.control, name: props.item.name });
+    const isShowBorderError = isError && !watchedValue;
+    const currentValue = watchedValue;
+    const value = currentValue
+        ? props.item.options?.find((item) => item.value === currentValue)
+        : null;
+    return (jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => (jsxs(Fragment, { children: [renderLabel(variant, props), jsx(Autocomplete, { ...field, id: `${props.item.name}-autocomplete`, value: value, onChange: (_, newValue) => {
+                        props.setValue(props?.item?.name, newValue?.value);
+                        props?.item?.onChangeFn && props?.item?.onChangeFn(newValue?.value, newValue);
+                        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',
+                        },
+                        // Note: Options are rendered in a portal; keep this as a fallback only
+                        '& .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,
+                            },
+                        },
+                        listbox: {
+                            sx: {
+                                fontSize: '11px',
+                            },
+                        },
+                    }, renderOption: (props, option) => (createElement("li", { ...props, value: option.value, key: option.value }, option.label)), renderInput: (params) => (jsx(TextField, { ...params, placeholder: props.item.placeholder, error: isShowBorderError, label: variant !== 'standard'
+                            ? `${props.item.label}${props.item.required ? ' *' : ''}`
+                            : '', inputProps: {
+                            ...params.inputProps,
+                            'aria-labelledby': `${props.item.name}-label`,
+                            'aria-describedby': `${props.item.name}-helper ${props.item.name}-error`,
+                            'aria-required': props.item.required ? true : undefined,
+                        } })) }), jsx(FormBottomField, { ...props })] })) }, props.item.name));
+};
+
+export { SingleSelect as default };

package/dist/components/FormComponents/Select/SingleSelectNonAutoComplete.d.ts

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

package/dist/components/FormComponents/Select/SingleSelectNonAutoComplete.esm.js

@@ -0,0 +1,32 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { FormControl, InputLabel, Select, MenuItem } from '@mui/material';
+import { useWatch } from 'react-hook-form';
+import FormBottomField from '../FormBottomField/FormBottomField.esm.js';
+import 'dayjs';
+import { renderLabel } from '../../../utils/Constants/FormConstants.esm.js';
+
+const SingleSelectNonAutoComplete = ({ props, variant, }) => {
+    const isError = !!props.errors?.[props.item.name];
+    const isShowBorderError = isError;
+    const value = useWatch({ control: props.control, name: props.item.name });
+    return (jsxs(FormControl, { fullWidth: true, sx: {
+            position: 'relative',
+            '& .MuiFormLabel-root': {
+                top: -10,
+            },
+            '& .MuiInputLabel-shrink': {
+                top: 0,
+            },
+        }, disabled: props.item.disable, children: [renderLabel(variant, props), variant !== 'standard' && (jsx(InputLabel, { error: isShowBorderError, id: `${props.item.name}-labelId`, children: props.item.label })), jsx(Select, { labelId: `${props.item.name}-labelId`, id: `${props.item.name}-select`, value: value, label: variant !== 'standard' ? `${props.item.label}${props.item.required ? ' *' : ''}` : '', disabled: props.item.disable, onChange: (e) => props.setValue(props.item.name, e.target.value), onBlur: (e) => {
+                    props?.item?.onBlurFn && props?.item?.onBlurFn(e);
+                }, error: isShowBorderError, inputProps: {
+                    'aria-labelledby': `${props.item.name}-label`,
+                    'aria-describedby': `${props.item.name}-helper ${props.item.name}-error`,
+                    'aria-required': props.item.required ? true : undefined,
+                }, 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 }, item.value))) }), jsx(FormBottomField, { ...props })] }, props.item.name));
+};
+
+export { SingleSelectNonAutoComplete as default };

package/dist/components/FormComponents/Select/SingleSelectSearchApi.d.ts

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

package/dist/components/FormComponents/Select/SingleSelectSearchApi.esm.js

@@ -0,0 +1,85 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Autocomplete, Stack, Skeleton, Tooltip, TextField } from '@mui/material';
+import { useState, useEffect } from 'react';
+import { Controller } from 'react-hook-form';
+import '../../../node_modules/axios/index.esm.js';
+import 'dayjs';
+import { renderLabel } from '../../../utils/Constants/FormConstants.esm.js';
+import FormBottomField from '../FormBottomField/FormBottomField.esm.js';
+import axios from '../../../node_modules/axios/lib/axios.esm.js';
+
+// Create axios instance or import your configured jwtAxios
+const jwtAxios = axios.create();
+const SingleSelectSearchApi = ({ props, variant, }) => {
+    const [searchValue, setSearchValue] = useState('');
+    const [optionsFetched, setOptionsFetched] = useState([]);
+    const [isLoading, setIsLoading] = useState(false);
+    useEffect(() => {
+        // eslint-disable-next-line no-undef
+        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)) ;
+        if (searchValue && searchValue.length > 3) {
+            setIsLoading(true);
+            jwtAxios
+                .get(props.item.api + `&${props.item.searchValue || 'searchvalue'}=${searchValue}`, {
+                signal,
+                headers: props.item.jwtHeader,
+            })
+                .then((res) => {
+                setOptionsFetched(res.data);
+                setIsLoading(false);
+                props.item.setLoadList && props.item.setLoadList(res.data);
+            })
+                .catch((err) => {
+                console.log(err, 'error');
+                setIsLoading(false);
+            });
+        }
+        // }
+        // }
+        return () => controller.abort();
+    }, [searchValue, props.item.api, props.getValues(props.item.name), props?.item?.autoFIll]);
+    // useEffect(() => {
+    //   setSearchValue('');
+    // }, [props.item?.changeValue]);
+    const isOptionEqualToValue = (option, value) => option?.value === value?.value; // Assuming there's a 'value' property in your options
+    return (jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => (jsxs(Fragment, { children: [renderLabel(variant, props), jsx(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 || '');
+                        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+                        props?.item?.onChangeFn && props?.item?.onChangeFn(newValue?.value || '', newValue);
+                        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+                        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',
+                        },
+                        '& .MuiAutocomplete-option': {
+                            fontSize: '16px',
+                        },
+                    }, disabled: props.item.disable, options: optionsFetched, getOptionLabel: (option) => option.label, renderInput: (params) => {
+                        return (jsx(Tooltip, { title: params.inputProps.value && params.inputProps.value, children: jsx(TextField, { ...params, onChange: (e) => {
+                                    setSearchValue(e.target.value);
+                                }, label: variant !== 'standard'
+                                    ? `${props.item.label}${props.item.required ? ' *' : ''}`
+                                    : '', placeholder: props.item.placeholder }) }));
+                    }, PaperComponent: ({ children }) => (jsx("div", { style: {
+                            background: '#fff',
+                        }, children: isLoading ? (jsxs(Stack, { padding: 2, spacing: 1, children: [jsx(Skeleton, { variant: "rectangular", width: '100%', height: 20 }), jsx(Skeleton, { variant: "rectangular", width: '100%', height: 20 }), jsx(Skeleton, { variant: "rectangular", width: '100%', height: 20 }), jsx(Skeleton, { variant: "rectangular", width: '100%', height: 20 }), jsx(Skeleton, { variant: "rectangular", width: '100%', height: 20 }), jsx(Skeleton, { variant: "rectangular", width: '100%', height: 20 })] })) : (children) })), isOptionEqualToValue: isOptionEqualToValue }), props?.item?.helperText && (jsxs("span", { style: {
+                        fontFamily: 'Roboto-Reg',
+                        fontSize: '11px',
+                        color: '#3651d3',
+                    }, children: ["(", props?.item?.helperText, ")"] })), jsx(FormBottomField, { ...props })] })) }));
+};
+
+export { SingleSelectSearchApi as default };

package/dist/components/FormComponents/TimePicker/TimePicker.d.ts

@@ -0,0 +1,5 @@
+import { FormRenderProps, VariantProps } from '../../../utils';
+export default function TimePickerFieldWrapper({ props, variant, }: {
+    props: FormRenderProps;
+    variant: VariantProps;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/FormComponents/TimePicker/TimePicker.esm.js

@@ -0,0 +1,70 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { ErrorMessage } from '@hookform/error-message';
+import { useState, useEffect } from 'react';
+import { getTimePicker } from '../../../utils/Constants/date-pickers.esm.js';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { useWatch, Controller } from 'react-hook-form';
+import { ErrorMessageComponent } from '../../Form/Form.styles.esm.js';
+import 'dayjs';
+import { renderLabel, parseCustomTime, formatDayjsToCustomTime } from '../../../utils/Constants/FormConstants.esm.js';
+
+function TimePickerFieldWrapper({ props, variant, }) {
+    const [TimePicker, setTimePicker] = useState(null);
+    const [isLoading, setIsLoading] = useState(true);
+    useEffect(() => {
+        const loadComponents = async () => {
+            setIsLoading(true);
+            const [timePicker] = await Promise.all([getTimePicker()]);
+            setTimePicker(timePicker);
+            setIsLoading(false);
+        };
+        loadComponents();
+    }, []);
+    const value = useWatch({ control: props.control, name: props.item.name });
+    const isError = !!props.errors?.[props.item.name];
+    const isShowBorderError = isError;
+    if (isLoading) {
+        return jsx("div", { style: { minHeight: '36px' }, children: "Loading..." });
+    }
+    return (jsx(Fragment, { children: TimePicker && (jsxs(LocalizationProvider, { dateAdapter: AdapterDayjs, children: [jsx(Controller, { name: props.item.name, 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,
+                                            'aria-labelledby': `${props.item.name}-label`,
+                                            'aria-describedby': `${props.item.name}-helper ${props.item.name}-error`,
+                                            'aria-required': props.item.required ? true : undefined,
+                                        },
+                                        sx: {
+                                            '& .MuiFormLabel-root': {
+                                                top: -3,
+                                            },
+                                            '& .MuiInputLabel-shrink': {
+                                                top: 0,
+                                            },
+                                        },
+                                    },
+                                } })] })) }), jsx(ErrorMessageComponent, { children: jsx(ErrorMessage, { errors: props.errors, name: props.item.name }) })] })) }));
+}
+
+export { TimePickerFieldWrapper as default };

package/dist/components/FormComponents/YearPickerField/YearPickerField.d.ts

@@ -0,0 +1,2 @@
+declare const _default: never;
+export default _default;

package/dist/components/FormComponents/YearPickerField/YearPickerField.esm.js

@@ -0,0 +1,78 @@
+// 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;
+var undefined$1 = undefined;
+
+export { undefined$1 as default };

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

@@ -0,0 +1,16 @@
+export { FormNumberField, FormNumberFieldDecimal } from '../NumberField';
+export { FormTextAreaField } from '../TextAreaField';
+export { FormTextField } from '../TextField';
+export { PasswordField } from '../PasswordField';
+export { FormCheckBox } from '../CheckBox';
+export { default as SingleSelect } from './Select/SingleSelect';
+export { default as SingleSelectNonAutoComplete } from './Select/SingleSelectNonAutoComplete';
+export { default as SingleSelectSearchApi } from './Select/SingleSelectSearchApi';
+export { default as MultiSelectV1 } from './Select/MultiSelectv1';
+export { FormCheckBoxGroup } from '../CheckBoxGroup';
+export { FormRadioGroup } from '../RadioGroup';
+export { DatepickerWrapperV2, MonthPicker, Monthpickerrender, YearPickerField, } from '../DatePicker';
+export { TimePicker } from '../TimePicker';
+export { FormRenderFileUpload, FormRenderMultiFileUpload } from '../FileUpload';
+export { RichTextEditor, RichTextEditorWrapper } from '../RichTextEditor';
+export { FormBottomField, FormErrorField, HelperText } from '../Feedback';

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

@@ -0,0 +1,38 @@
+export { default as FormNumberField } from './FormNumberField/FormNumberField.esm.js';
+export { default as FormNumberFieldDecimal } from './FormNumberField/FormNumberFieldDecimal.esm.js';
+export { default as FormTextAreaField } from './FormTextAreaField/FormTextAreaField.esm.js';
+export { default as FormTextField } from './FormTextField/FormTextField.esm.js';
+export { default as PasswordField } from './PasswordField/PasswordField.esm.js';
+export { default as FormCheckBox } from './FormCheckBox/FormCheckBox.esm.js';
+export { default as SingleSelect } from './Select/SingleSelect.esm.js';
+export { default as SingleSelectNonAutoComplete } from './Select/SingleSelectNonAutoComplete.esm.js';
+export { default as SingleSelectSearchApi } from './Select/SingleSelectSearchApi.esm.js';
+export { default as MultiSelectV1 } from './Select/MultiSelectv1.esm.js';
+export { default as FormCheckBoxGroup } from './FormCheckBoxGroup/FormCheckBoxGroup.esm.js';
+export { default as FormRadioGroup } from './FormRadioGroup/FormRadioGroup.esm.js';
+export { default as DatepickerWrapperV2 } from './DatePicker/DatepickerWrapperV2.esm.js';
+export { default as MonthPicker } from './DatePicker/MonthPicker.esm.js';
+export { default as Monthpickerrender } from './DatePicker/Monthpickerrender.esm.js';
+export { default as YearPickerField } from './YearPickerField/YearPickerField.esm.js';
+export { default as TimePicker } from './TimePicker/TimePicker.esm.js';
+export { default as FormRenderFileUpload } from './FileUpload/FormRenderFileUpload.esm.js';
+export { default as FormRenderMultiFileUpload } from './FileUpload/FormRenderMultiFileUpload.esm.js';
+import 'react/jsx-runtime';
+import '@mui/material';
+import 'react';
+import 'react-hook-form';
+import 'dayjs';
+export { default as FormBottomField } from './FormBottomField/FormBottomField.esm.js';
+import '@mui/icons-material/Visibility';
+import '@mui/icons-material/Close';
+import '@mui/icons-material/NavigateBefore';
+import '@mui/icons-material/NavigateNext';
+import '@mui/icons-material/Delete';
+import '@mui/icons-material/UploadFile';
+import '@mui/icons-material/PictureAsPdf';
+import '@mui/icons-material/TableChart';
+import '@mui/icons-material/Description';
+export { default as RichTextEditor } from './RichTextEditor/RichTextEditor.esm.js';
+export { default as RichTextEditorWrapper } from './RichTextEditor/RichTextEditorWrapper.esm.js';
+export { default as FormErrorField } from './FormErrorField/FormErrorField.esm.js';
+export { default as HelperText } from './HelperText/HelperText.esm.js';

package/dist/components/Global.styles.d.ts

@@ -0,0 +1,8 @@
+export declare const AddButtonFloat: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "color" | "style" | "children" | "size" | "sx" | "className" | "tabIndex" | "classes" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "href" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "loading" | "loadingIndicator" | "loadingPosition" | "startIcon" | "variant"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const SubmitButton: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "color" | "style" | "children" | "size" | "sx" | "className" | "tabIndex" | "classes" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "href" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "loading" | "loadingIndicator" | "loadingPosition" | "startIcon" | "variant"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const CancelButton: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "color" | "style" | "children" | "size" | "sx" | "className" | "tabIndex" | "classes" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "href" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "loading" | "loadingIndicator" | "loadingPosition" | "startIcon" | "variant"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const SaveAsDraftButton: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "color" | "style" | "children" | "size" | "sx" | "className" | "tabIndex" | "classes" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "href" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "loading" | "loadingIndicator" | "loadingPosition" | "startIcon" | "variant"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const PageHeader: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform" | "style" | "children" | "sx" | "className" | "classes" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const ReportsItem: import("@emotion/styled").StyledComponent<any, {}, {}>;
+export declare const DialogContainer: import("@emotion/styled").StyledComponent<import("@mui/material").DialogProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const DialogTitleWrapper: import("@emotion/styled").StyledComponent<import("@mui/material").DialogTitleOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform" | "style" | "children" | "sx" | "className" | "classes" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;