tp-react-elements-dev 1.12.33 → 1.12.35

package/dist/assets/icons/flaticon_hvc.scss

@@ -1,243 +1,243 @@
-$flaticon_hvc-font: 'flaticon_hvc';
-
-@font-face {
-  font-family: $flaticon_hvc-font;
-  src:
-    url('./flaticon_hvc.woff2?09127989b5c99a4f290cd7bb7c4bad12') format('woff2'),
-    url('./flaticon_hvc.woff?09127989b5c99a4f290cd7bb7c4bad12') format('woff'),
-    url('./flaticon_hvc.eot?09127989b5c99a4f290cd7bb7c4bad12#iefix') format('embedded-opentype'),
-    url('./flaticon_hvc.ttf?09127989b5c99a4f290cd7bb7c4bad12') format('truetype'),
-    url('./flaticon_hvc.svg?09127989b5c99a4f290cd7bb7c4bad12#flaticon_hvc') format('svg');
-}
-
-i[class^='flaticon-']:before,
-i[class*=' flaticon-']:before {
-  font-family: flaticon_hvc !important;
-  font-style: normal;
-  font-weight: normal !important;
-  font-variant: normal;
-  text-transform: none;
-  line-height: 1;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-$flaticon_hvc-map: (
-  'setting': '\f101',
-  'refresh': '\f102',
-  'setting-1': '\f103',
-  'check': '\f104',
-  'bank': '\f105',
-  'user': '\f106',
-  'user-1': '\f107',
-  'info-sign': '\f108',
-  'clipboard': '\f109',
-  'right-arrow': '\f10a',
-  'home': '\f10b',
-  'search': '\f10c',
-  'eye': '\f10d',
-  'edit': '\f10e',
-  'delete': '\f10f',
-  'add-1': '\f110',
-  'plus-1': '\f111',
-  'compose': '\f112',
-  'trash': '\f113',
-  'download': '\f114',
-  'downloading': '\f115',
-  'upload': '\f116',
-  'right-arrow-1': '\f117',
-  'user-2': '\f118',
-  'man-in-suit-and-tie': '\f119',
-  'cancel': '\f11a',
-  'check-mark': '\f11b',
-  'bars': '\f11c',
-  'copy': '\f11d',
-  'printer': '\f11e',
-  'file': '\f11f',
-  'file-1': '\f120',
-  'file-2': '\f121',
-  'eye-1': '\f122',
-  'upload-1': '\f123',
-  'production': '\f124',
-  'cube': '\f125',
-  'rotation': '\f126',
-  'rotation-1': '\f127',
-  'spinning': '\f128',
-  'spinning-1': '\f129',
-  'ready-stock': '\f12a',
-  'ready-stock-1': '\f12b',
-  'visible': '\f12c',
-  'printing': '\f12d',
-  'like': '\f12e',
-  'thumb-up': '\f12f',
-  'thumbs-up': '\f130',
-  'thumb-down': '\f131',
-  'dislike': '\f132',
-  'thumb-down-1': '\f133',
-  'pointing-right': '\f134',
-  'point': '\f135',
-  'history': '\f136',
-);
-
-.flaticon-setting:before {
-  content: map-get($flaticon_hvc-map, 'setting');
-}
-.flaticon-refresh:before {
-  content: map-get($flaticon_hvc-map, 'refresh');
-}
-.flaticon-setting-1:before {
-  content: map-get($flaticon_hvc-map, 'setting-1');
-}
-.flaticon-check:before {
-  content: map-get($flaticon_hvc-map, 'check');
-}
-.flaticon-bank:before {
-  content: map-get($flaticon_hvc-map, 'bank');
-}
-.flaticon-user:before {
-  content: map-get($flaticon_hvc-map, 'user');
-}
-.flaticon-user-1:before {
-  content: map-get($flaticon_hvc-map, 'user-1');
-}
-.flaticon-info-sign:before {
-  content: map-get($flaticon_hvc-map, 'info-sign');
-}
-.flaticon-clipboard:before {
-  content: map-get($flaticon_hvc-map, 'clipboard');
-}
-.flaticon-right-arrow:before {
-  content: map-get($flaticon_hvc-map, 'right-arrow');
-}
-.flaticon-home:before {
-  content: map-get($flaticon_hvc-map, 'home');
-}
-.flaticon-search:before {
-  content: map-get($flaticon_hvc-map, 'search');
-}
-.flaticon-eye:before {
-  content: map-get($flaticon_hvc-map, 'eye');
-}
-.flaticon-edit:before {
-  content: map-get($flaticon_hvc-map, 'edit');
-}
-.flaticon-delete:before {
-  content: map-get($flaticon_hvc-map, 'delete');
-}
-.flaticon-add-1:before {
-  content: map-get($flaticon_hvc-map, 'add-1');
-}
-.flaticon-plus-1:before {
-  content: map-get($flaticon_hvc-map, 'plus-1');
-}
-.flaticon-compose:before {
-  content: map-get($flaticon_hvc-map, 'compose');
-}
-.flaticon-trash:before {
-  content: map-get($flaticon_hvc-map, 'trash');
-}
-.flaticon-download:before {
-  content: map-get($flaticon_hvc-map, 'download');
-}
-.flaticon-downloading:before {
-  content: map-get($flaticon_hvc-map, 'downloading');
-}
-.flaticon-upload:before {
-  content: map-get($flaticon_hvc-map, 'upload');
-}
-.flaticon-right-arrow-1:before {
-  content: map-get($flaticon_hvc-map, 'right-arrow-1');
-}
-.flaticon-user-2:before {
-  content: map-get($flaticon_hvc-map, 'user-2');
-}
-.flaticon-man-in-suit-and-tie:before {
-  content: map-get($flaticon_hvc-map, 'man-in-suit-and-tie');
-}
-.flaticon-cancel:before {
-  content: map-get($flaticon_hvc-map, 'cancel');
-}
-.flaticon-check-mark:before {
-  content: map-get($flaticon_hvc-map, 'check-mark');
-}
-.flaticon-bars:before {
-  content: map-get($flaticon_hvc-map, 'bars');
-}
-.flaticon-copy:before {
-  content: map-get($flaticon_hvc-map, 'copy');
-}
-.flaticon-printer:before {
-  content: map-get($flaticon_hvc-map, 'printer');
-}
-.flaticon-file:before {
-  content: map-get($flaticon_hvc-map, 'file');
-}
-.flaticon-file-1:before {
-  content: map-get($flaticon_hvc-map, 'file-1');
-}
-.flaticon-file-2:before {
-  content: map-get($flaticon_hvc-map, 'file-2');
-}
-.flaticon-eye-1:before {
-  content: map-get($flaticon_hvc-map, 'eye-1');
-}
-.flaticon-upload-1:before {
-  content: map-get($flaticon_hvc-map, 'upload-1');
-}
-.flaticon-production:before {
-  content: map-get($flaticon_hvc-map, 'production');
-}
-.flaticon-cube:before {
-  content: map-get($flaticon_hvc-map, 'cube');
-}
-.flaticon-rotation:before {
-  content: map-get($flaticon_hvc-map, 'rotation');
-}
-.flaticon-rotation-1:before {
-  content: map-get($flaticon_hvc-map, 'rotation-1');
-}
-.flaticon-spinning:before {
-  content: map-get($flaticon_hvc-map, 'spinning');
-}
-.flaticon-spinning-1:before {
-  content: map-get($flaticon_hvc-map, 'spinning-1');
-}
-.flaticon-ready-stock:before {
-  content: map-get($flaticon_hvc-map, 'ready-stock');
-}
-.flaticon-ready-stock-1:before {
-  content: map-get($flaticon_hvc-map, 'ready-stock-1');
-}
-.flaticon-visible:before {
-  content: map-get($flaticon_hvc-map, 'visible');
-}
-.flaticon-printing:before {
-  content: map-get($flaticon_hvc-map, 'printing');
-}
-.flaticon-like:before {
-  content: map-get($flaticon_hvc-map, 'like');
-}
-.flaticon-thumb-up:before {
-  content: map-get($flaticon_hvc-map, 'thumb-up');
-}
-.flaticon-thumbs-up:before {
-  content: map-get($flaticon_hvc-map, 'thumbs-up');
-}
-.flaticon-thumb-down:before {
-  content: map-get($flaticon_hvc-map, 'thumb-down');
-}
-.flaticon-dislike:before {
-  content: map-get($flaticon_hvc-map, 'dislike');
-}
-.flaticon-thumb-down-1:before {
-  content: map-get($flaticon_hvc-map, 'thumb-down-1');
-}
-.flaticon-pointing-right:before {
-  content: map-get($flaticon_hvc-map, 'pointing-right');
-}
-.flaticon-point:before {
-  content: map-get($flaticon_hvc-map, 'point');
-}
-.flaticon-history:before {
-  content: map-get($flaticon_hvc-map, 'history');
-}
+$flaticon_hvc-font: 'flaticon_hvc';
+
+@font-face {
+  font-family: $flaticon_hvc-font;
+  src:
+    url('./flaticon_hvc.woff2?09127989b5c99a4f290cd7bb7c4bad12') format('woff2'),
+    url('./flaticon_hvc.woff?09127989b5c99a4f290cd7bb7c4bad12') format('woff'),
+    url('./flaticon_hvc.eot?09127989b5c99a4f290cd7bb7c4bad12#iefix') format('embedded-opentype'),
+    url('./flaticon_hvc.ttf?09127989b5c99a4f290cd7bb7c4bad12') format('truetype'),
+    url('./flaticon_hvc.svg?09127989b5c99a4f290cd7bb7c4bad12#flaticon_hvc') format('svg');
+}
+
+i[class^='flaticon-']:before,
+i[class*=' flaticon-']:before {
+  font-family: flaticon_hvc !important;
+  font-style: normal;
+  font-weight: normal !important;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+$flaticon_hvc-map: (
+  'setting': '\f101',
+  'refresh': '\f102',
+  'setting-1': '\f103',
+  'check': '\f104',
+  'bank': '\f105',
+  'user': '\f106',
+  'user-1': '\f107',
+  'info-sign': '\f108',
+  'clipboard': '\f109',
+  'right-arrow': '\f10a',
+  'home': '\f10b',
+  'search': '\f10c',
+  'eye': '\f10d',
+  'edit': '\f10e',
+  'delete': '\f10f',
+  'add-1': '\f110',
+  'plus-1': '\f111',
+  'compose': '\f112',
+  'trash': '\f113',
+  'download': '\f114',
+  'downloading': '\f115',
+  'upload': '\f116',
+  'right-arrow-1': '\f117',
+  'user-2': '\f118',
+  'man-in-suit-and-tie': '\f119',
+  'cancel': '\f11a',
+  'check-mark': '\f11b',
+  'bars': '\f11c',
+  'copy': '\f11d',
+  'printer': '\f11e',
+  'file': '\f11f',
+  'file-1': '\f120',
+  'file-2': '\f121',
+  'eye-1': '\f122',
+  'upload-1': '\f123',
+  'production': '\f124',
+  'cube': '\f125',
+  'rotation': '\f126',
+  'rotation-1': '\f127',
+  'spinning': '\f128',
+  'spinning-1': '\f129',
+  'ready-stock': '\f12a',
+  'ready-stock-1': '\f12b',
+  'visible': '\f12c',
+  'printing': '\f12d',
+  'like': '\f12e',
+  'thumb-up': '\f12f',
+  'thumbs-up': '\f130',
+  'thumb-down': '\f131',
+  'dislike': '\f132',
+  'thumb-down-1': '\f133',
+  'pointing-right': '\f134',
+  'point': '\f135',
+  'history': '\f136',
+);
+
+.flaticon-setting:before {
+  content: map-get($flaticon_hvc-map, 'setting');
+}
+.flaticon-refresh:before {
+  content: map-get($flaticon_hvc-map, 'refresh');
+}
+.flaticon-setting-1:before {
+  content: map-get($flaticon_hvc-map, 'setting-1');
+}
+.flaticon-check:before {
+  content: map-get($flaticon_hvc-map, 'check');
+}
+.flaticon-bank:before {
+  content: map-get($flaticon_hvc-map, 'bank');
+}
+.flaticon-user:before {
+  content: map-get($flaticon_hvc-map, 'user');
+}
+.flaticon-user-1:before {
+  content: map-get($flaticon_hvc-map, 'user-1');
+}
+.flaticon-info-sign:before {
+  content: map-get($flaticon_hvc-map, 'info-sign');
+}
+.flaticon-clipboard:before {
+  content: map-get($flaticon_hvc-map, 'clipboard');
+}
+.flaticon-right-arrow:before {
+  content: map-get($flaticon_hvc-map, 'right-arrow');
+}
+.flaticon-home:before {
+  content: map-get($flaticon_hvc-map, 'home');
+}
+.flaticon-search:before {
+  content: map-get($flaticon_hvc-map, 'search');
+}
+.flaticon-eye:before {
+  content: map-get($flaticon_hvc-map, 'eye');
+}
+.flaticon-edit:before {
+  content: map-get($flaticon_hvc-map, 'edit');
+}
+.flaticon-delete:before {
+  content: map-get($flaticon_hvc-map, 'delete');
+}
+.flaticon-add-1:before {
+  content: map-get($flaticon_hvc-map, 'add-1');
+}
+.flaticon-plus-1:before {
+  content: map-get($flaticon_hvc-map, 'plus-1');
+}
+.flaticon-compose:before {
+  content: map-get($flaticon_hvc-map, 'compose');
+}
+.flaticon-trash:before {
+  content: map-get($flaticon_hvc-map, 'trash');
+}
+.flaticon-download:before {
+  content: map-get($flaticon_hvc-map, 'download');
+}
+.flaticon-downloading:before {
+  content: map-get($flaticon_hvc-map, 'downloading');
+}
+.flaticon-upload:before {
+  content: map-get($flaticon_hvc-map, 'upload');
+}
+.flaticon-right-arrow-1:before {
+  content: map-get($flaticon_hvc-map, 'right-arrow-1');
+}
+.flaticon-user-2:before {
+  content: map-get($flaticon_hvc-map, 'user-2');
+}
+.flaticon-man-in-suit-and-tie:before {
+  content: map-get($flaticon_hvc-map, 'man-in-suit-and-tie');
+}
+.flaticon-cancel:before {
+  content: map-get($flaticon_hvc-map, 'cancel');
+}
+.flaticon-check-mark:before {
+  content: map-get($flaticon_hvc-map, 'check-mark');
+}
+.flaticon-bars:before {
+  content: map-get($flaticon_hvc-map, 'bars');
+}
+.flaticon-copy:before {
+  content: map-get($flaticon_hvc-map, 'copy');
+}
+.flaticon-printer:before {
+  content: map-get($flaticon_hvc-map, 'printer');
+}
+.flaticon-file:before {
+  content: map-get($flaticon_hvc-map, 'file');
+}
+.flaticon-file-1:before {
+  content: map-get($flaticon_hvc-map, 'file-1');
+}
+.flaticon-file-2:before {
+  content: map-get($flaticon_hvc-map, 'file-2');
+}
+.flaticon-eye-1:before {
+  content: map-get($flaticon_hvc-map, 'eye-1');
+}
+.flaticon-upload-1:before {
+  content: map-get($flaticon_hvc-map, 'upload-1');
+}
+.flaticon-production:before {
+  content: map-get($flaticon_hvc-map, 'production');
+}
+.flaticon-cube:before {
+  content: map-get($flaticon_hvc-map, 'cube');
+}
+.flaticon-rotation:before {
+  content: map-get($flaticon_hvc-map, 'rotation');
+}
+.flaticon-rotation-1:before {
+  content: map-get($flaticon_hvc-map, 'rotation-1');
+}
+.flaticon-spinning:before {
+  content: map-get($flaticon_hvc-map, 'spinning');
+}
+.flaticon-spinning-1:before {
+  content: map-get($flaticon_hvc-map, 'spinning-1');
+}
+.flaticon-ready-stock:before {
+  content: map-get($flaticon_hvc-map, 'ready-stock');
+}
+.flaticon-ready-stock-1:before {
+  content: map-get($flaticon_hvc-map, 'ready-stock-1');
+}
+.flaticon-visible:before {
+  content: map-get($flaticon_hvc-map, 'visible');
+}
+.flaticon-printing:before {
+  content: map-get($flaticon_hvc-map, 'printing');
+}
+.flaticon-like:before {
+  content: map-get($flaticon_hvc-map, 'like');
+}
+.flaticon-thumb-up:before {
+  content: map-get($flaticon_hvc-map, 'thumb-up');
+}
+.flaticon-thumbs-up:before {
+  content: map-get($flaticon_hvc-map, 'thumbs-up');
+}
+.flaticon-thumb-down:before {
+  content: map-get($flaticon_hvc-map, 'thumb-down');
+}
+.flaticon-dislike:before {
+  content: map-get($flaticon_hvc-map, 'dislike');
+}
+.flaticon-thumb-down-1:before {
+  content: map-get($flaticon_hvc-map, 'thumb-down-1');
+}
+.flaticon-pointing-right:before {
+  content: map-get($flaticon_hvc-map, 'pointing-right');
+}
+.flaticon-point:before {
+  content: map-get($flaticon_hvc-map, 'point');
+}
+.flaticon-history:before {
+  content: map-get($flaticon_hvc-map, 'history');
+}

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

@@ -12,6 +12,7 @@ import SingleSelect from '../FormComponents/Select/SingleSelect.esm.js';
 import MultiSelectAutocomplete from '../FormComponents/Select/MultiSelectAutocomplete.esm.js';
 import SingleSelectNonAutoComplete from '../FormComponents/Select/SingleSelectNonAutoComplete.esm.js';
 import FormActiveSwitch from './FormActiveSwitch.esm.js';
+import FormTextFieldWithSelect from '../FormComponents/FormTextFieldWithSelect/FormTextFieldWithSelect.esm.js';
 
 // Lazy-loaded heavy components
 const RichTextEditorWrapper = lazy(() => import('../RichTextEditor/index.esm.js').then((m) => ({ default: m.RichTextEditorWrapper })));
@@ -78,6 +79,8 @@ const RenderForm = (props) => {
         case 'select-v2':
         case 'basic-select': // new alias
             return jsx(SingleSelectNonAutoComplete, { props: props, variant: variant });
+        case 'input-select':
+            return jsx(FormTextFieldWithSelect, { props: props, variant: variant });
         // Numeric inputs (integer, pincode, phone)
         case 'number':
         case 'pincode':

package/dist/components/FormComponents/FileUpload/MultiFileWithPreview.esm.js

@@ -11,6 +11,9 @@ import NavigateBeforeIcon from '@mui/icons-material/NavigateBefore';
 import NavigateNextIcon from '@mui/icons-material/NavigateNext';
 import DeleteIcon from '@mui/icons-material/Delete';
 import UploadFileIcon from '@mui/icons-material/UploadFile';
+import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
+import TableChartIcon from '@mui/icons-material/TableChart';
+import DescriptionIcon from '@mui/icons-material/Description';
 
 const MultiFileWithPreview = ({ props, variant, }) => {
     const inputRef = useRef(null);
@@ -134,6 +137,19 @@ const MultiFileWithPreview = ({ props, variant, }) => {
             : file.name.split('.').pop()?.toLowerCase();
         return ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'].includes(ext || '');
     };
+    const isPdfFile = (file) => {
+        const name = typeof file === 'string' ? file : file.name;
+        return name.toLowerCase().endsWith('.pdf');
+    };
+    const isExcelFile = (file) => {
+        const name = typeof file === 'string' ? file : file.name;
+        return /\.xlsx?$/.test(name.toLowerCase());
+    };
+    const isWordFile = (file) => {
+        const name = typeof file === 'string' ? file : file.name;
+        return /\.(doc|docx)$/.test(name.toLowerCase());
+    };
+    const getObjectUrl = (file) => typeof file === 'string' ? file : URL.createObjectURL(file);
     return (jsxs(Fragment, { children: [jsxs(Box, { paddingLeft: "4px", sx: { ...props.item.sx, position: 'relative' }, children: [props.item?.label && (jsx(Box, { sx: { fontSize: '10px' }, children: renderLabel(variant, props, true) })), jsxs(Box, { display: "flex", alignItems: "center", gap: 1, children: [jsxs(Button, { variant: "outlined", component: "label", startIcon: jsx(UploadFileIcon, {}), sx: { flex: 1, textTransform: 'none' }, color: isError ? 'error' : 'primary', children: [selectedFiles.length > 0
                                         ? isSingleFileMode
                                             ? '1 file selected'
@@ -148,7 +164,7 @@ const MultiFileWithPreview = ({ props, variant, }) => {
                                                     ? '.jpg,.jpeg,.png'
                                                     : props.item.fileType === 'all'
                                                         ? '.pdf,.jpg,.jpeg,.png,.xls,.xlsx,.doc,.docx'
-                                                        : '', ref: inputRef, onChange: handleFileChange })] }), props.item.showFileCarousel && selectedFiles.length > 0 && (jsx(IconButton, { onClick: handlePreviewClick, color: "primary", size: "small", sx: { mt: 0.5 }, children: jsx(VisibilityIcon, {}) }))] })] }), jsx(FormBottomField, { ...props }), jsx(Modal, { open: open, onClose: handleClose, children: jsxs(Box, { sx: {
+                                                        : '', ref: inputRef, onChange: handleFileChange })] }), jsx(Box, { sx: { width: 36, display: 'flex', justifyContent: 'center' }, children: props.item.showFileCarousel && selectedFiles.length > 0 ? (jsx(IconButton, { onClick: handlePreviewClick, color: "primary", size: "small", "aria-label": "preview selected files", children: jsx(VisibilityIcon, {}) })) : null })] })] }), jsx(FormBottomField, { ...props }), jsx(Modal, { open: open, onClose: handleClose, children: jsxs(Box, { sx: {
                         position: 'absolute',
                         top: '50%',
                         left: '50%',
@@ -158,30 +174,38 @@ const MultiFileWithPreview = ({ props, variant, }) => {
                         borderRadius: 2,
                         boxShadow: 24,
                         p: 3,
-                    }, children: [jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", children: [jsx(Typography, { variant: "h6", children: "File Preview" }), jsxs(Box, { display: "flex", gap: 1, children: [jsx(IconButton, { onClick: () => handleDeleteFile(currentFileIndex), color: "error", title: "Delete current file", children: jsx(DeleteIcon, {}) }), jsx(IconButton, { onClick: handleClose, children: jsx(CloseIcon, {}) })] })] }), jsx(Box, { mt: 2, children: selectedFiles.length > 0 && (jsxs(Fragment, { children: [jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "center", gap: 2, children: [jsx(IconButton, { onClick: handlePrevious, disabled: selectedFiles.length <= 1, children: jsx(NavigateBeforeIcon, {}) }), jsx(Box, { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", sx: { p: 2, minHeight: '400px', width: '100%' }, children: (() => {
+                    }, children: [jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", children: [jsx(Typography, { variant: "h6", children: "File Preview" }), jsxs(Box, { display: "flex", gap: 1, children: [jsx(IconButton, { onClick: () => handleDeleteFile(currentFileIndex), color: "error", title: "Delete current file", children: jsx(DeleteIcon, {}) }), jsx(IconButton, { onClick: handleClose, children: jsx(CloseIcon, {}) })] })] }), jsx(Box, { mt: 2, children: selectedFiles.length > 0 && (jsxs(Fragment, { children: [jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "center", gap: 2, children: [selectedFiles.length > 1 && !isSingleFileMode ? (jsx(IconButton, { onClick: handlePrevious, children: jsx(NavigateBeforeIcon, {}) })) : null, jsx(Box, { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", sx: { p: 2, minHeight: '400px', width: '100%' }, children: (() => {
                                                     const currentFile = selectedFiles[currentFileIndex];
-                                                    if (currentFile instanceof File) {
-                                                        if (isImageFile(currentFile)) {
-                                                            return (jsx("img", { alt: "Preview", src: URL.createObjectURL(currentFile), style: {
-                                                                    maxHeight: '400px',
-                                                                    maxWidth: '100%',
-                                                                    objectFit: 'contain',
-                                                                    borderRadius: 8,
-                                                                } }));
-                                                        }
-                                                        return (jsx(Typography, { variant: "body1", children: currentFile.name }));
-                                                    }
-                                                    else if (typeof currentFile === 'string') {
-                                                        const isImg = isImageFile(currentFile);
-                                                        return isImg ? (jsx("img", { alt: "Preview", src: currentFile, style: {
+                                                    const fileName = typeof currentFile === 'string'
+                                                        ? currentFile.split('/').pop() || currentFile
+                                                        : currentFile.name;
+                                                    // Images
+                                                    if (isImageFile(currentFile)) {
+                                                        return (jsx("img", { alt: "Preview", src: getObjectUrl(currentFile), style: {
                                                                 maxHeight: '400px',
                                                                 maxWidth: '100%',
                                                                 objectFit: 'contain',
                                                                 borderRadius: 8,
-                                                            } })) : (jsx(Typography, { variant: "body1", children: currentFile.split('/').pop() }));
+                                                            } }));
+                                                    }
+                                                    // PDF inline viewer
+                                                    if (isPdfFile(currentFile)) {
+                                                        const url = getObjectUrl(currentFile);
+                                                        return (jsx(Box, { width: "100%", height: 420, children: jsx("object", { data: url, type: "application/pdf", width: "100%", height: "100%", children: jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column", gap: 1, children: [jsx(PictureAsPdfIcon, { color: "error" }), jsx(Typography, { variant: "body2", children: "Preview not available. " }), jsx(Button, { size: "small", variant: "outlined", href: url, target: "_blank", rel: "noreferrer", children: "Open PDF" })] }) }) }));
+                                                    }
+                                                    // Excel preview placeholder with actions
+                                                    if (isExcelFile(currentFile)) {
+                                                        const url = getObjectUrl(currentFile);
+                                                        return (jsxs(Box, { textAlign: "center", children: [jsx(TableChartIcon, { color: "primary", sx: { fontSize: 64, mb: 1 } }), jsx(Typography, { variant: "body1", gutterBottom: true, children: fileName }), jsx(Button, { size: "small", variant: "outlined", href: url, target: "_blank", rel: "noreferrer", children: "Open" })] }));
+                                                    }
+                                                    // Word preview placeholder with actions
+                                                    if (isWordFile(currentFile)) {
+                                                        const url = getObjectUrl(currentFile);
+                                                        return (jsxs(Box, { textAlign: "center", children: [jsx(DescriptionIcon, { color: "primary", sx: { fontSize: 64, mb: 1 } }), jsx(Typography, { variant: "body1", gutterBottom: true, children: fileName }), jsx(Button, { size: "small", variant: "outlined", href: url, target: "_blank", rel: "noreferrer", children: "Open" })] }));
                                                     }
-                                                    return null;
-                                                })() }), jsx(IconButton, { onClick: handleNext, disabled: selectedFiles.length <= 1, children: jsx(NavigateNextIcon, {}) })] }), selectedFiles.length > 1 && (jsx(Box, { display: "flex", justifyContent: "center", mt: 2, children: jsxs(Typography, { variant: "body2", color: "text.secondary", children: [currentFileIndex + 1, " of ", selectedFiles.length] }) }))] })) })] }) })] }));
+                                                    // Fallback: show name
+                                                    return jsx(Typography, { variant: "body1", children: fileName });
+                                                })() }), selectedFiles.length > 1 && !isSingleFileMode ? (jsx(IconButton, { onClick: handleNext, children: jsx(NavigateNextIcon, {}) })) : null] }), selectedFiles.length > 1 && !isSingleFileMode && (jsx(Box, { display: "flex", justifyContent: "center", mt: 2, children: jsxs(Typography, { variant: "body2", color: "text.secondary", children: [currentFileIndex + 1, " of ", selectedFiles.length] }) }))] })) })] }) })] }));
 };
 
 export { MultiFileWithPreview as default };

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

@@ -0,0 +1,43 @@
+import { FormRenderProps, VariantProps } from '../../../utils';
+/**
+ * FormTextField Component
+ *
+ * A text input field component that integrates with react-hook-form for form state management.
+ * This component is used for standard text inputs, email inputs, and multi-email inputs.
+ *
+ * @component
+ * @param {Object} props - The component props
+ * @param {FormRenderProps} props.props - Form rendering properties from parent form
+ * @param {VariantProps} props.variant - UI variant style ('standard', 'outlined', etc.)
+ *
+ * @example
+ * // Basic usage in FormRender
+ * <FormTextField props={formRenderProps} variant="outlined" />
+ *
+ * @example
+ * // Usage with specific configuration
+ * const formItem = {
+ *   name: "email",
+ *   label: "Email Address",
+ *   inputType: "email",
+ *   required: true,
+ *   placeholder: "Enter your email"
+ * };
+ * <FormTextField
+ *   props={{
+ *     item: formItem,
+ *     control: formMethods.control,
+ *     errors: formMethods.formState.errors
+ *   }}
+ *   variant="outlined"
+ * />
+ */
+declare const FormTextFieldWithSelect: ({ props, variant, }: {
+    props: FormRenderProps;
+    variant: VariantProps;
+}) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Export the FormTextField component for use in the form renderer
+ * This component is used for text, email, and multi-email input types
+ */
+export default FormTextFieldWithSelect;