tp-react-elements 1.3.4 → 1.3.6

package/dist/_virtual/index.esm10.js

@@ -1,3 +1,3 @@
-var accessibility = {};
+var propTypes = {exports: {}};
 
-export { accessibility as __exports };
+export { propTypes as __module };

package/dist/_virtual/index.esm12.js

@@ -1,3 +1,3 @@
-var Month = {};
+var InputRangeField = {};
 
-export { Month as __exports };
+export { InputRangeField as __exports };

package/dist/_virtual/index.esm14.js

@@ -1,3 +1,3 @@
-var InputRangeField = {};
+var Month = {};
 
-export { InputRangeField as __exports };
+export { Month as __exports };

package/dist/_virtual/index.esm5.js

@@ -1,3 +1,3 @@
-var DateRange = {};
+var DateRangePicker = {};
 
-export { DateRange as __exports };
+export { DateRangePicker as __exports };

package/dist/_virtual/index.esm6.js

@@ -1,3 +1,3 @@
-var DateRangePicker = {};
+var DateRange = {};
 
-export { DateRangePicker as __exports };
+export { DateRange as __exports };

package/dist/_virtual/index.esm9.js

@@ -1,3 +1,3 @@
-var propTypes = {exports: {}};
+var accessibility = {};
 
-export { propTypes as __module };
+export { accessibility as __exports };

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

@@ -1,5 +1,13 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
 import React__default, { lazy, Suspense } from 'react';
+import FormCheckBox from '../FormComponents/FormCheckBox/FormCheckBox.esm.js';
+import FormCheckBoxGroup from '../FormComponents/FormCheckBoxGroup/FormCheckBoxGroup.esm.js';
+import FormNumberField from '../FormComponents/FormNumberField/FormNumberField.esm.js';
+import FormNumberFieldDecimal from '../FormComponents/FormNumberField/FormNumberFieldDecimal.esm.js';
+import FormRadioGroup from '../FormComponents/FormRadioGroup/FormRadioGroup.esm.js';
+import FormTextAreaField from '../FormComponents/FormTextAreaField/FormTextAreaField.esm.js';
+import FormTextField from '../FormComponents/FormTextField/FormTextField.esm.js';
+import PasswordField from '../FormComponents/PasswordField/PasswordField.esm.js';
 import SingleSelect from '../FormComponents/Select/SingleSelect.esm.js';
 import MultiSelectAutocomplete from '../FormComponents/Select/MultiSelectAutocomplete.esm.js';
 import SingleSelectNonAutoComplete from '../FormComponents/Select/SingleSelectNonAutoComplete.esm.js';
@@ -10,14 +18,6 @@ import DateRangePickerComponent from '../DateRangePicker/DateRangePicker.esm.js'
 import RichTextEditorWrapper from '../FormComponents/RichTextEditor/RichTextEditorWrapper.esm.js';
 import SingleSelectSearchApi from '../FormComponents/Select/SingleSelectSearchApi.esm.js';
 import DatetimepickerWrapper from '../FormComponents/DatePicker/DatetimepickerWrapper.esm.js';
-import FormTextAreaField from '../FormComponents/FormTextAreaField/FormTextAreaField.esm.js';
-import FormCheckBox from '../FormComponents/FormCheckBox/FormCheckBox.esm.js';
-import FormRadioGroup from '../FormComponents/FormRadioGroup/FormRadioGroup.esm.js';
-import FormCheckBoxGroup from '../FormComponents/FormCheckBoxGroup/FormCheckBoxGroup.esm.js';
-import FormNumberFieldDecimal from '../FormComponents/FormNumberField/FormNumberFieldDecimal.esm.js';
-import FormNumberField from '../FormComponents/FormNumberField/FormNumberField.esm.js';
-import PasswordField from '../FormComponents/PasswordField/PasswordField.esm.js';
-import FormTextField from '../FormComponents/FormTextField/FormTextField.esm.js';
 
 // Lazy-loaded heavy components
 // const RichTextEditorWrapper = lazy(() =>

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

@@ -1,25 +1,39 @@
+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 MultiSelectTable } from './Select/MultiSelectTable.esm.js';
 export { default as SearchableSelect } from './Select/SearchableSelect.esm.js';
-export { default as DatepickerWrapperV2 } from './DatePicker/DatepickerWrapperV2.esm.js';
-export { default as FormBottomField } from './FormBottomField/FormBottomField.esm.js';
-export { default as FormCheckBox } from './FormCheckBox/FormCheckBox.esm.js';
 export { default as FormCheckBoxGroup } from './FormCheckBoxGroup/FormCheckBoxGroup.esm.js';
-export { default as FormErrorField } from './FormErrorField/FormErrorField.esm.js';
-export { default as FormNumberField } from './FormNumberField/FormNumberField.esm.js';
-export { default as FormNumberFieldDecimal } from './FormNumberField/FormNumberFieldDecimal.esm.js';
 export { default as FormRadioGroup } from './FormRadioGroup/FormRadioGroup.esm.js';
+export { default as DatepickerWrapperV2 } from './DatePicker/DatepickerWrapperV2.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';
-export { default as FormTextAreaField } from './FormTextAreaField/FormTextAreaField.esm.js';
-export { default as FormTextField } from './FormTextField/FormTextField.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 FormErrorField } from './FormErrorField/FormErrorField.esm.js';
 export { default as HelperText } from './HelperText/HelperText.esm.js';
-export { default as Monthpickerrender } from './DatePicker/Monthpickerrender.esm.js';
-export { default as PasswordField } from './PasswordField/PasswordField.esm.js';
 export { default as RichTextEditor } from './RichTextEditor/RichTextEditor.esm.js';
 export { default as RichTextEditorWrapper } from './RichTextEditor/RichTextEditorWrapper.esm.js';
-export { default as TimePicker } from './TimePicker/TimePicker.esm.js';
-export { default as YearPickerField } from './YearPickerField/YearPickerField.esm.js';

package/dist/components/PaginatedGrid/DynamicFilterBar.d.ts

@@ -80,6 +80,8 @@ export interface DynamicFilterBarProps {
     columnFilters: MRT_ColumnFiltersState;
     onColumnFilterChange: (f: MRT_ColumnFiltersState) => void;
     availableColumns: AvailableColumn[];
+    /** Maximum number of chips that may be visible at once. Default: 4. */
+    maxVisibleFilters?: number;
 }
-declare const DynamicFilterBar: ({ serverFilterDefs, visibleFilterIds, onToggleFilter, filterValues, onFilterValuesChange, columnFilters, onColumnFilterChange, availableColumns, }: DynamicFilterBarProps) => import("react/jsx-runtime").JSX.Element;
+declare const DynamicFilterBar: ({ serverFilterDefs, visibleFilterIds, onToggleFilter, filterValues, onFilterValuesChange, columnFilters, onColumnFilterChange, availableColumns, maxVisibleFilters, }: DynamicFilterBarProps) => import("react/jsx-runtime").JSX.Element;
 export default DynamicFilterBar;

package/dist/components/PaginatedGrid/DynamicFilterBar.esm.js

@@ -9,7 +9,7 @@ import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import SingleSelectNonAutoComplete from '../FormComponents/Select/SingleSelectNonAutoComplete.esm.js';
-import { Box, Typography, Button, Popover, TextField, Stack, InputAdornment, List, ListItemButton, ListItemText, Tooltip, Divider } from '@mui/material';
+import { Box, Typography, Tooltip, Button, Popover, TextField, Stack, InputAdornment, List, ListItemButton, ListItemText, Divider } from '@mui/material';
 import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
 import TuneIcon from '@mui/icons-material/Tune';
 import CloseIcon from '@mui/icons-material/Close';
@@ -50,8 +50,24 @@ const chipSx = (active) => ({
     whiteSpace: 'nowrap',
     px: 1.5,
     minHeight: 30,
+    // Cap chip width so long option labels don't break the filter bar layout
+    maxWidth: 260,
+    overflow: 'hidden',
     '&:hover': { borderColor: 'primary.main', bgcolor: 'rgba(25,118,210,0.08)' },
 });
+// ─── ChipLabel — renders button text with ellipsis when it overflows ──────────
+//
+// MUI Button is a flex container: the text child must have `min-width: 0`
+// (overrides the default `min-width: auto`) so it can shrink past its natural
+// size and trigger `text-overflow: ellipsis`.
+const ChipLabel = ({ text }) => (jsx(Box, { component: "span", sx: {
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        display: 'block',
+        minWidth: 0,
+        flex: '1 1 0',
+    }, children: text }));
 // ─── Date helper ──────────────────────────────────────────────────────────────
 const fmtDate = (iso) => {
     if (!iso)
@@ -104,13 +120,14 @@ const DateRangeChip = ({ label, fromDate, toDate, onApply, onRemove }) => {
             setAnchor(null);
         }
     };
-    return (jsxs(Fragment, { children: [jsx(Button, { variant: "outlined", size: "small", onClick: openPicker, startIcon: jsx(CalendarTodayIcon, { sx: { fontSize: 13 } }), endIcon: jsx(CloseIcon, { sx: { fontSize: '12px !important' }, onClick: (e) => { e.stopPropagation(); onRemove(); } }), sx: chipSx(active), children: chipLabel }), jsxs(Popover, { open: Boolean(anchor), anchorEl: anchor, onClose: () => setAnchor(null), anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, PaperProps: { sx: { mt: 0.75, borderRadius: 2, boxShadow: 6, overflow: 'hidden' } }, children: [jsx(distExports.DateRange, { editableDateInputs: false, onChange: handleRangeChange, moveRangeOnFirstSelection: false, ranges: selRange, months: 2, direction: "horizontal", showDateDisplay: false, dateDisplayFormat: "dd/MM/yyyy", rangeColors: ['#1976d2'] }), active && (jsx(Box, { sx: { display: 'flex', justifyContent: 'flex-end', px: 2, pb: 1.5 }, children: jsx(Button, { size: "small", color: "inherit", onClick: () => { onApply('', ''); setAnchor(null); }, children: "Clear" }) }))] })] }));
+    return (jsxs(Fragment, { children: [jsx(Tooltip, { title: active ? chipLabel : '', placement: "top", arrow: true, children: jsx(Button, { variant: "outlined", size: "small", onClick: openPicker, startIcon: jsx(CalendarTodayIcon, { sx: { fontSize: 13 } }), endIcon: jsx(CloseIcon, { sx: { fontSize: '12px !important' }, onClick: (e) => { e.stopPropagation(); onRemove(); } }), sx: chipSx(active), children: jsx(ChipLabel, { text: chipLabel }) }) }), jsxs(Popover, { open: Boolean(anchor), anchorEl: anchor, onClose: () => setAnchor(null), anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, PaperProps: { sx: { mt: 0.75, borderRadius: 2, boxShadow: 6, overflow: 'hidden' } }, children: [jsx(distExports.DateRange, { editableDateInputs: false, onChange: handleRangeChange, moveRangeOnFirstSelection: false, ranges: selRange, months: 2, direction: "horizontal", showDateDisplay: false, dateDisplayFormat: "dd/MM/yyyy", rangeColors: ['#1976d2'] }), active && (jsx(Box, { sx: { display: 'flex', justifyContent: 'flex-end', px: 2, pb: 1.5 }, children: jsx(Button, { size: "small", color: "inherit", onClick: () => { onApply('', ''); setAnchor(null); }, children: "Clear" }) }))] })] }));
 };
 const TextFilterChip = ({ label, value, onApply, onRemove, placeholder }) => {
     const [anchor, setAnchor] = useState(null);
     const [draft, setDraft] = useState('');
     const active = Boolean(value);
-    return (jsxs(Fragment, { children: [jsx(Button, { variant: "outlined", size: "small", onClick: (e) => { setDraft(value); setAnchor(e.currentTarget); }, endIcon: jsx(CloseIcon, { sx: { fontSize: '12px !important' }, onClick: (e) => { e.stopPropagation(); onRemove(); } }), sx: chipSx(active), children: active ? `${label}: ${value}` : label }), jsx(Popover, { open: Boolean(anchor), anchorEl: anchor, onClose: () => setAnchor(null), anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, PaperProps: { sx: { mt: 0.75, borderRadius: 2, boxShadow: 6, minWidth: 240 } }, children: jsxs(Box, { sx: { p: 2 }, children: [jsx(Typography, { variant: "caption", fontWeight: 600, color: "text.secondary", display: "block", mb: 1.5, children: label }), jsx(TextField, { value: draft, onChange: (e) => setDraft(e.target.value), placeholder: placeholder, size: "small", fullWidth: true, autoFocus: true, onKeyDown: (e) => {
+    const chipText = active ? `${label}: ${value}` : label;
+    return (jsxs(Fragment, { children: [jsx(Tooltip, { title: active ? chipText : '', placement: "top", arrow: true, children: jsx(Button, { variant: "outlined", size: "small", onClick: (e) => { setDraft(value); setAnchor(e.currentTarget); }, endIcon: jsx(CloseIcon, { sx: { fontSize: '12px !important' }, onClick: (e) => { e.stopPropagation(); onRemove(); } }), sx: chipSx(active), children: jsx(ChipLabel, { text: chipText }) }) }), jsx(Popover, { open: Boolean(anchor), anchorEl: anchor, onClose: () => setAnchor(null), anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, PaperProps: { sx: { mt: 0.75, borderRadius: 2, boxShadow: 6, minWidth: 240 } }, children: jsxs(Box, { sx: { p: 2 }, children: [jsx(Typography, { variant: "caption", fontWeight: 600, color: "text.secondary", display: "block", mb: 1.5, children: label }), jsx(TextField, { value: draft, onChange: (e) => setDraft(e.target.value), placeholder: placeholder, size: "small", fullWidth: true, autoFocus: true, onKeyDown: (e) => {
                                 if (e.key === 'Enter') {
                                     onApply(draft);
                                     setAnchor(null);
@@ -138,11 +155,12 @@ const DatePickerChip = ({ label, value, onApply, onRemove }) => {
         }
         setOpen(false);
     };
+    const chipText = active ? `${label}: ${fmtDate(value)}` : label;
     return (
     // LocalizationProvider must wrap DatePicker — scoped here so it only
     // loads when the chip is actually used (DatePickerChip is tree-shaken
     // if the 'date' filter type is never included in serverFilterDefs).
-    jsxs(LocalizationProvider, { dateAdapter: AdapterDayjs, children: [jsx(Button, { variant: "outlined", size: "small", onClick: handleChipClick, startIcon: jsx(CalendarTodayIcon, { sx: { fontSize: 13 } }), endIcon: jsx(CloseIcon, { sx: { fontSize: '12px !important' }, onClick: (e) => { e.stopPropagation(); onRemove(); } }), sx: chipSx(active), children: active ? `${label}: ${fmtDate(value)}` : label }), jsx(DatePicker, { value: dayjsValue, open: open, onClose: () => setOpen(false), onChange: handleChange, slotProps: {
+    jsxs(LocalizationProvider, { dateAdapter: AdapterDayjs, children: [jsx(Tooltip, { title: active ? chipText : '', placement: "top", arrow: true, children: jsx(Button, { variant: "outlined", size: "small", onClick: handleChipClick, startIcon: jsx(CalendarTodayIcon, { sx: { fontSize: 13 } }), endIcon: jsx(CloseIcon, { sx: { fontSize: '12px !important' }, onClick: (e) => { e.stopPropagation(); onRemove(); } }), sx: chipSx(active), children: jsx(ChipLabel, { text: chipText }) }) }), jsx(DatePicker, { value: dayjsValue, open: open, onClose: () => setOpen(false), onChange: handleChange, slotProps: {
                     textField: { sx: { display: 'none' }, size: 'small' },
                     popper: {
                         anchorEl,
@@ -180,7 +198,8 @@ const DropdownFilterChip = ({ label, value, options, onApply, onRemove }) => {
             ...options.map((o) => ({ label: o.label, value: o.value })),
         ],
     };
-    return (jsxs(Fragment, { children: [jsx(Button, { variant: "outlined", size: "small", onClick: (e) => setAnchor(e.currentTarget), startIcon: jsx(ArrowDropDownIcon, { sx: { fontSize: '15px !important', mr: -0.5 } }), endIcon: jsx(CloseIcon, { sx: { fontSize: '12px !important' }, onClick: (e) => { e.stopPropagation(); onRemove(); } }), sx: chipSx(active), children: active ? `${label}: ${selectedLabel}` : label }), jsx(Popover, { open: Boolean(anchor), anchorEl: anchor, onClose: () => setAnchor(null), anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, PaperProps: { sx: { mt: 0.75, borderRadius: 2, boxShadow: 6, p: 1.5, minWidth: 240 } }, children: jsx(SingleSelectNonAutoComplete, { props: {
+    const chipText = active ? `${label}: ${selectedLabel}` : label;
+    return (jsxs(Fragment, { children: [jsx(Tooltip, { title: active ? chipText : '', placement: "top", arrow: true, children: jsx(Button, { variant: "outlined", size: "small", onClick: (e) => setAnchor(e.currentTarget), startIcon: jsx(ArrowDropDownIcon, { sx: { fontSize: '15px !important', mr: -0.5 } }), endIcon: jsx(CloseIcon, { sx: { fontSize: '12px !important' }, onClick: (e) => { e.stopPropagation(); onRemove(); } }), sx: chipSx(active), children: jsx(ChipLabel, { text: chipText }) }) }), jsx(Popover, { open: Boolean(anchor), anchorEl: anchor, onClose: () => setAnchor(null), anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, PaperProps: { sx: { mt: 0.75, borderRadius: 2, boxShadow: 6, p: 1.5, minWidth: 240 } }, children: jsx(SingleSelectNonAutoComplete, { props: {
                         item,
                         register,
                         control,
@@ -208,7 +227,8 @@ const SearchableSelectChip = ({ label, value, options, onApply, onRemove, placeh
     const filtered = search
         ? options.filter((o) => o.label.toLowerCase().includes(search.toLowerCase()))
         : options;
-    return (jsxs(Fragment, { children: [jsx(Button, { variant: "outlined", size: "small", onClick: open, startIcon: jsx(SearchIcon, { sx: { fontSize: '14px !important', mr: -0.25 } }), endIcon: jsx(CloseIcon, { sx: { fontSize: '12px !important' }, onClick: (e) => { e.stopPropagation(); onRemove(); } }), sx: chipSx(active), children: active ? `${label}: ${selectedLabel}` : label }), jsxs(Popover, { open: Boolean(anchor), anchorEl: anchor, onClose: () => setAnchor(null), anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, PaperProps: {
+    const chipText = active ? `${label}: ${selectedLabel}` : label;
+    return (jsxs(Fragment, { children: [jsx(Tooltip, { title: active ? chipText : '', placement: "top", arrow: true, children: jsx(Button, { variant: "outlined", size: "small", onClick: open, startIcon: jsx(SearchIcon, { sx: { fontSize: '14px !important', mr: -0.25 } }), endIcon: jsx(CloseIcon, { sx: { fontSize: '12px !important' }, onClick: (e) => { e.stopPropagation(); onRemove(); } }), sx: chipSx(active), children: jsx(ChipLabel, { text: chipText }) }) }), jsxs(Popover, { open: Boolean(anchor), anchorEl: anchor, onClose: () => setAnchor(null), anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, PaperProps: {
                     sx: { mt: 0.75, borderRadius: 2, boxShadow: 6, width: 280, display: 'flex', flexDirection: 'column' },
                 }, children: [jsx(Box, { sx: { px: 1.5, pt: 1.5, pb: 0.75 }, children: jsx(TextField, { size: "small", fullWidth: true, autoFocus: true, placeholder: placeholder, value: search, onChange: (e) => setSearch(e.target.value), onKeyDown: (e) => { if (e.key === 'Escape')
                                 setAnchor(null); }, InputProps: {
@@ -226,52 +246,53 @@ const SearchableSelectChip = ({ label, value, options, onApply, onRemove, placeh
                                             } }), isSelected && (jsx(CheckIcon, { sx: { fontSize: 15, color: 'primary.main', flexShrink: 0 } }))] }, opt.value));
                             }))] })] })] }));
 };
-const ManageFiltersButton = ({ serverFilterDefs, visibleIds, availableColumns, onToggle, }) => {
+const ManageFiltersButton = ({ serverFilterDefs, visibleIds, availableColumns, onToggle, maxVisible = 4, }) => {
     const [anchor, setAnchor] = useState(null);
+    const atLimit = visibleIds.length >= maxVisible;
+    // Shared pill box renderer
+    const PillBox = ({ bg, color, label }) => (jsx(Box, { component: "span", sx: {
+            mr: 1.25, flexShrink: 0,
+            fontSize: 10, fontWeight: 700,
+            px: 0.75, py: '2px',
+            borderRadius: '4px',
+            bgcolor: bg,
+            color,
+            textTransform: 'uppercase',
+            letterSpacing: 0.4,
+            lineHeight: 1.6,
+        }, children: label }));
     return (jsxs(Fragment, { children: [jsx(Tooltip, { title: "Add or remove filter chips", children: jsx(Button, { size: "small", variant: "outlined", startIcon: jsx(TuneIcon, { sx: { fontSize: 14 } }), onClick: (e) => setAnchor(e.currentTarget), sx: {
                         borderRadius: 5, textTransform: 'none', fontSize: 12,
                         borderColor: 'divider', color: 'text.secondary',
                         px: 1.5, minHeight: 30,
                         '&:hover': { borderColor: 'primary.main', color: 'primary.main' },
-                    }, children: "Manage Filters" }) }), jsx(Popover, { open: Boolean(anchor), anchorEl: anchor, onClose: () => setAnchor(null), anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, PaperProps: { sx: { mt: 0.75, borderRadius: 2, boxShadow: 6, width: 280 } }, children: jsxs(Box, { sx: { py: 1 }, children: [serverFilterDefs.length > 0 && (jsxs(Fragment, { children: [jsx(Typography, { variant: "caption", fontWeight: 700, color: "text.disabled", sx: { px: 2, pb: 0.5, display: 'block', textTransform: 'uppercase', letterSpacing: 0.5 }, children: "Server Filters" }), jsx(List, { dense: true, disablePadding: true, children: serverFilterDefs.map((def) => {
-                                        const selected = visibleIds.includes(def.id);
-                                        const pill = TYPE_PILL[def.type];
-                                        return (jsxs(ListItemButton, { onClick: () => onToggle(def.id), sx: { px: 2, py: 0.5 }, children: [jsx(Box, { component: "span", sx: {
-                                                        mr: 1.25, flexShrink: 0,
-                                                        fontSize: 10, fontWeight: 700,
-                                                        px: 0.75, py: '2px',
-                                                        borderRadius: '4px',
-                                                        bgcolor: pill.bg,
-                                                        color: pill.color,
-                                                        textTransform: 'uppercase',
-                                                        letterSpacing: 0.4,
-                                                        lineHeight: 1.6,
-                                                    }, children: pill.label }), jsx(ListItemText, { primary: def.label, primaryTypographyProps: {
-                                                        fontSize: 13,
-                                                        color: selected ? 'primary.main' : 'text.primary',
-                                                    } }), selected && jsx(CheckIcon, { sx: { fontSize: 16, color: 'primary.main', flexShrink: 0 } })] }, def.id));
-                                    }) })] })), availableColumns.length > 0 && (jsxs(Fragment, { children: [jsx(Divider, { sx: { my: 1 } }), jsx(Typography, { variant: "caption", fontWeight: 700, color: "text.disabled", sx: { px: 2, pb: 0.5, display: 'block', textTransform: 'uppercase', letterSpacing: 0.5 }, children: "Column Filters" }), jsx(List, { dense: true, disablePadding: true, sx: { maxHeight: 260, overflowY: 'auto' }, children: availableColumns.map((col) => {
-                                        const selected = visibleIds.includes(col.id);
-                                        // Pick the type pill based on the column's declared filter type
-                                        const pill = COLUMN_TYPE_PILL[col.filterType ?? 'text'] ??
-                                            COLUMN_TYPE_PILL.text;
-                                        return (jsxs(ListItemButton, { onClick: () => onToggle(col.id), sx: { px: 2, py: 0.4 }, children: [jsx(Box, { component: "span", sx: {
-                                                        mr: 1.25, flexShrink: 0,
-                                                        fontSize: 10, fontWeight: 700,
-                                                        px: 0.75, py: '2px',
-                                                        borderRadius: '4px',
-                                                        bgcolor: pill.bg,
-                                                        color: pill.color,
-                                                        textTransform: 'uppercase',
-                                                        letterSpacing: 0.4,
-                                                        lineHeight: 1.6,
-                                                    }, children: pill.label }), jsx(ListItemText, { primary: col.label, primaryTypographyProps: {
-                                                        fontSize: 13,
-                                                        color: selected ? 'primary.main' : 'text.primary',
-                                                    } }), selected && jsx(CheckIcon, { sx: { fontSize: 16, color: 'primary.main', flexShrink: 0 } })] }, col.id));
-                                    }) })] }))] }) })] }));
+                    }, children: "Manage Filters" }) }), jsxs(Popover, { open: Boolean(anchor), anchorEl: anchor, onClose: () => setAnchor(null), anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, PaperProps: { sx: { mt: 0.75, borderRadius: 2, boxShadow: 6, width: 280, overflow: 'hidden' } }, children: [atLimit && (jsx(Box, { sx: {
+                            px: 2, py: 0.75,
+                            bgcolor: 'rgba(25,118,210,0.07)',
+                            borderBottom: '1px solid rgba(25,118,210,0.2)',
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: 0.75,
+                        }, children: jsxs(Typography, { sx: { fontSize: 11, color: 'primary.main', fontWeight: 600, lineHeight: 1.4 }, children: [visibleIds.length, "/", maxVisible, " filters active \u2014 remove one to add another"] }) })), jsxs(Box, { sx: { maxHeight: 360, overflowY: 'auto', py: 1 }, children: [serverFilterDefs.length > 0 && (jsxs(Fragment, { children: [jsx(Typography, { variant: "caption", fontWeight: 700, color: "text.disabled", sx: { px: 2, pb: 0.5, display: 'block', textTransform: 'uppercase', letterSpacing: 0.5 }, children: "Server Filters" }), jsx(List, { dense: true, disablePadding: true, children: serverFilterDefs.map((def) => {
+                                            const selected = visibleIds.includes(def.id);
+                                            const blocked = atLimit && !selected; // at cap and not yet shown → disabled
+                                            const pill = TYPE_PILL[def.type];
+                                            return (jsx(Tooltip, { title: blocked ? `Maximum ${maxVisible} filters allowed` : '', placement: "right", arrow: true, children: jsx("span", { style: { display: 'block' }, children: jsxs(ListItemButton, { onClick: () => !blocked && onToggle(def.id), disabled: blocked, sx: { px: 2, py: 0.5, opacity: blocked ? 0.45 : 1 }, children: [jsx(PillBox, { bg: pill.bg, color: pill.color, label: pill.label }), jsx(ListItemText, { primary: def.label, primaryTypographyProps: {
+                                                                    fontSize: 13,
+                                                                    color: selected ? 'primary.main' : 'text.primary',
+                                                                } }), selected && jsx(CheckIcon, { sx: { fontSize: 16, color: 'primary.main', flexShrink: 0 } })] }) }) }, def.id));
+                                        }) })] })), availableColumns.length > 0 && (jsxs(Fragment, { children: [jsx(Divider, { sx: { my: 1 } }), jsx(Typography, { variant: "caption", fontWeight: 700, color: "text.disabled", sx: { px: 2, pb: 0.5, display: 'block', textTransform: 'uppercase', letterSpacing: 0.5 }, children: "Column Filters" }), jsx(List, { dense: true, disablePadding: true, children: availableColumns.map((col) => {
+                                            const selected = visibleIds.includes(col.id);
+                                            const blocked = atLimit && !selected;
+                                            const pill = COLUMN_TYPE_PILL[col.filterType ?? 'text'] ??
+                                                COLUMN_TYPE_PILL.text;
+                                            return (jsx(Tooltip, { title: blocked ? `Maximum ${maxVisible} filters allowed` : '', placement: "right", arrow: true, children: jsx("span", { style: { display: 'block' }, children: jsxs(ListItemButton, { onClick: () => !blocked && onToggle(col.id), disabled: blocked, sx: { px: 2, py: 0.4, opacity: blocked ? 0.45 : 1 }, children: [jsx(PillBox, { bg: pill.bg, color: pill.color, label: pill.label }), jsx(ListItemText, { primary: col.label, primaryTypographyProps: {
+                                                                    fontSize: 13,
+                                                                    color: selected ? 'primary.main' : 'text.primary',
+                                                                } }), selected && jsx(CheckIcon, { sx: { fontSize: 16, color: 'primary.main', flexShrink: 0 } })] }) }) }, col.id));
+                                        }) })] }))] })] })] }));
 };
-const DynamicFilterBar = ({ serverFilterDefs, visibleFilterIds, onToggleFilter, filterValues, onFilterValuesChange, columnFilters, onColumnFilterChange, availableColumns, }) => {
+const DynamicFilterBar = ({ serverFilterDefs, visibleFilterIds, onToggleFilter, filterValues, onFilterValuesChange, columnFilters, onColumnFilterChange, availableColumns, maxVisibleFilters = 4, }) => {
     const getColValue = (id) => columnFilters.find((f) => f.id === id)?.value ?? '';
     const applyColFilter = (id, value) => {
         const rest = columnFilters.filter((f) => f.id !== id);
@@ -324,7 +345,7 @@ const DynamicFilterBar = ({ serverFilterDefs, visibleFilterIds, onToggleFilter,
                 }
                 // Default: free-text input
                 return (jsx(TextFilterChip, { label: col.label, value: getColValue(id), onApply: (v) => applyColFilter(id, v), onRemove: () => removeFilter(id), placeholder: `Filter by ${col.label}` }, id));
-            }), jsx(ManageFiltersButton, { serverFilterDefs: serverFilterDefs, visibleIds: visibleFilterIds, availableColumns: availableColumns, onToggle: onToggleFilter })] }));
+            }), jsx(ManageFiltersButton, { serverFilterDefs: serverFilterDefs, visibleIds: visibleFilterIds, availableColumns: availableColumns, onToggle: onToggleFilter, maxVisible: maxVisibleFilters })] }));
 };
 
 export { DynamicFilterBar as default };

package/dist/components/PaginatedGrid/GenericPaginatedGrid.d.ts

@@ -42,6 +42,12 @@ export interface GenericPaginatedGridProps<TData extends object> {
      * Accepts any valid CSS colour string.
      */
     headerBgColor?: string;
+    /**
+     * Maximum number of filter chips that can be visible at once.
+     * Prevents the filter bar from wrapping to a second row on typical screens.
+     * Default: 4.
+     */
+    maxVisibleFilters?: number;
 }
-declare function GenericPaginatedGrid<TData extends object>({ columns, fetchPage, queryKey, serverFilterDefs, defaultFilters, defaultVisibleFilterIds, batchSize, exportFilename, tableHeight, pageSizeOptions, headerBgColor, }: GenericPaginatedGridProps<TData>): import("react/jsx-runtime").JSX.Element;
+declare function GenericPaginatedGrid<TData extends object>({ columns, fetchPage, queryKey, serverFilterDefs, defaultFilters, defaultVisibleFilterIds, batchSize, exportFilename, tableHeight, pageSizeOptions, headerBgColor, maxVisibleFilters, }: GenericPaginatedGridProps<TData>): import("react/jsx-runtime").JSX.Element;
 export default GenericPaginatedGrid;

package/dist/components/PaginatedGrid/GenericPaginatedGrid.esm.js

@@ -43,7 +43,7 @@ const PaginationFooter = ({ pageIndex, pageSize, totalRecords, isFetching, isLoa
                         }, children: pageIndex + 1 }), jsx(Tooltip, { title: "Next page", children: jsx("span", { children: jsx(IconButton, { size: "small", onClick: onNext, disabled: !canNext, children: jsx(ChevronRightIcon, { sx: { fontSize: 20 } }) }) }) }), jsx(Tooltip, { title: "Last page", children: jsx("span", { children: jsx(IconButton, { size: "small", onClick: onLast, disabled: !canNext, children: jsx(LastPageIcon, { sx: { fontSize: 20 } }) }) }) })] })] }));
 };
 // ─── GenericPaginatedGrid ─────────────────────────────────────────────────────
-function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs, defaultFilters, defaultVisibleFilterIds, batchSize = 10000, exportFilename = 'export', tableHeight = '60vh', pageSizeOptions = [1000, 5000, 10000], headerBgColor, }) {
+function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs, defaultFilters, defaultVisibleFilterIds, batchSize = 10000, exportFilename = 'export', tableHeight = '60vh', pageSizeOptions = [1000, 5000, 10000], headerBgColor, maxVisibleFilters = 4, }) {
     const defaultVisible = defaultVisibleFilterIds
         ?? (serverFilterDefs.length > 0 ? [serverFilterDefs[0].id] : []);
     // ── State ──────────────────────────────────────────────────────────────────
@@ -125,7 +125,13 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
         setFilterValues(newValues);
         setPagination((p) => ({ ...p, pageIndex: 0 }));
     };
-    const handleToggleFilter = (id) => setVisibleFilterIds((prev) => prev.includes(id) ? prev.filter((v) => v !== id) : [...prev, id]);
+    const handleToggleFilter = (id) => setVisibleFilterIds((prev) => {
+        if (prev.includes(id))
+            return prev.filter((v) => v !== id); // always allow remove
+        if (prev.length >= maxVisibleFilters)
+            return prev; // cap reached — ignore add
+        return [...prev, id];
+    });
     const handleClearAll = () => {
         setFilterValues(defaultFilters);
         setColumnFilters([]);
@@ -213,8 +219,8 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
                     whiteSpace: 'normal',
                     borderRight: '1px solid rgba(224,224,224,1)',
                     borderBottom: '2px solid rgba(0,0,0,0.15)',
-                    '& button[aria-label="Move"]': { display: 'none' },
-                    '& .MuiTableSortLabel-icon': { display: 'none' },
+                    '& button[aria-label="Move"]': { display: 'none !important' },
+                    '& .MuiTableSortLabel-icon': { display: 'none !important' },
                     '& .Mui-TableHeadCell-ResizeHandle-Wrapper': {
                         height: '100%',
                         top: 0,
@@ -249,7 +255,7 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
         muiToolbarAlertBannerProps: isError
             ? { color: 'error', children: 'Failed to load data. Please try again.' }
             : undefined,
-        renderTopToolbarCustomActions: () => (jsxs(Box, { sx: { display: 'flex', alignItems: 'center', flex: 1, minWidth: 0, pr: 1, gap: 0.5 }, children: [jsxs(Box, { sx: { display: 'flex', alignItems: 'center', flexShrink: 0, gap: 0.25 }, children: [jsx(Tooltip, { title: "Refresh current batch", children: jsx("span", { children: jsx(IconButton, { size: "small", onClick: () => refetch(), disabled: isFetching, children: jsx(RefreshIcon, { fontSize: "small" }) }) }) }), jsx(Tooltip, { title: "Export batch as CSV", children: jsx("span", { children: jsx(IconButton, { size: "small", onClick: handleExport, disabled: rows.length === 0 || isFetching, children: jsx(FileDownloadIcon, { fontSize: "small" }) }) }) })] }), jsx(Box, { sx: { flex: 1, minWidth: 0 }, children: jsx(DynamicFilterBar, { serverFilterDefs: serverFilterDefs, visibleFilterIds: visibleFilterIds, onToggleFilter: handleToggleFilter, filterValues: filterValues, onFilterValuesChange: handleFilterValuesChange, columnFilters: columnFilters, onColumnFilterChange: setColumnFilters, availableColumns: availableColumns }) }), hasAnyValue && (jsx(Button, { size: "small", onClick: handleClearAll, sx: {
+        renderTopToolbarCustomActions: () => (jsxs(Box, { sx: { display: 'flex', alignItems: 'center', flex: 1, minWidth: 0, pr: 1, gap: 0.5 }, children: [jsxs(Box, { sx: { display: 'flex', alignItems: 'center', flexShrink: 0, gap: 0.25 }, children: [jsx(Tooltip, { title: "Refresh current batch", children: jsx("span", { children: jsx(IconButton, { size: "small", onClick: () => refetch(), disabled: isFetching, children: jsx(RefreshIcon, { fontSize: "small" }) }) }) }), jsx(Tooltip, { title: "Export batch as CSV", children: jsx("span", { children: jsx(IconButton, { size: "small", onClick: handleExport, disabled: rows.length === 0 || isFetching, children: jsx(FileDownloadIcon, { fontSize: "small" }) }) }) })] }), jsx(Box, { sx: { flex: 1, minWidth: 0 }, children: jsx(DynamicFilterBar, { serverFilterDefs: serverFilterDefs, visibleFilterIds: visibleFilterIds, onToggleFilter: handleToggleFilter, filterValues: filterValues, onFilterValuesChange: handleFilterValuesChange, columnFilters: columnFilters, onColumnFilterChange: setColumnFilters, availableColumns: availableColumns, maxVisibleFilters: maxVisibleFilters }) }), hasAnyValue && (jsx(Button, { size: "small", onClick: handleClearAll, sx: {
                         flexShrink: 0,
                         textTransform: 'none',
                         fontSize: 12,
@@ -260,7 +266,11 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
                     }, children: "Clear All" }))] })),
         renderBottomToolbar: ({ table: t }) => (jsx(PaginationFooter, { pageIndex: t.getState().pagination.pageIndex, pageSize: t.getState().pagination.pageSize, totalRecords: totalRecords, isFetching: isFetching, isLoading: isLoading, canPrev: t.getCanPreviousPage() && !isFetching, canNext: t.getCanNextPage() && !isFetching, onFirst: () => t.firstPage(), onPrev: () => t.previousPage(), onNext: () => t.nextPage(), onLast: () => t.lastPage(), onPageSizeChange: (s) => t.setPageSize(s), pageSizeOptions: pageSizeOptions })),
     });
-    return (jsxs(Box, { sx: { position: 'relative' }, children: [jsx(GlobalStyles, { styles: { 'button[aria-label="Pin to right"]': { display: 'none' } } }), isLoading && jsx(OverlayLoader, { message: "Loading data\u2026" }), !isLoading && isFetching && jsx(OverlayLoader, { message: "Updating data\u2026" }), jsx(MaterialReactTable, { table: table })] }));
+    return (jsxs(Box, { className: "tp-gpg-root", sx: { position: 'relative' }, children: [jsx(GlobalStyles, { styles: {
+                    'button[aria-label="Pin to right"]': { display: 'none' },
+                    '.tp-gpg-root .MuiTableSortLabel-icon': { display: 'none !important' },
+                    '.tp-gpg-root button[aria-label="Move"]': { display: 'none !important' },
+                } }), isLoading && jsx(OverlayLoader, { message: "Loading data\u2026" }), !isLoading && isFetching && jsx(OverlayLoader, { message: "Updating data\u2026" }), jsx(MaterialReactTable, { table: table })] }));
 }
 
 export { GenericPaginatedGrid as default };

package/dist/node_modules/prop-types/index.esm.js

@@ -1,4 +1,4 @@
-import { __module as propTypes } from '../../_virtual/index.esm9.js';
+import { __module as propTypes } from '../../_virtual/index.esm10.js';
 import { __require as requireReactIs } from './node_modules/react-is/index.esm.js';
 import { __require as requireFactoryWithTypeCheckers } from './factoryWithTypeCheckers.esm.js';
 import { __require as requireFactoryWithThrowingShims } from './factoryWithThrowingShims.esm.js';

package/dist/node_modules/react-date-range/dist/accessibility/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as accessibility } from '../../../../_virtual/index.esm10.js';
+import { __exports as accessibility } from '../../../../_virtual/index.esm9.js';
 import { __require as requirePropTypes } from '../../../prop-types/index.esm.js';
 
 var hasRequiredAccessibility;

package/dist/node_modules/react-date-range/dist/components/DateRange/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as DateRange } from '../../../../../_virtual/index.esm5.js';
+import { __exports as DateRange } from '../../../../../_virtual/index.esm6.js';
 import React__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireCalendar } from '../Calendar/index.esm.js';

package/dist/node_modules/react-date-range/dist/components/DateRangePicker/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as DateRangePicker } from '../../../../../_virtual/index.esm6.js';
+import { __exports as DateRangePicker } from '../../../../../_virtual/index.esm5.js';
 import React__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireDateRange } from '../DateRange/index.esm.js';

package/dist/node_modules/react-date-range/dist/components/InputRangeField/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as InputRangeField } from '../../../../../_virtual/index.esm14.js';
+import { __exports as InputRangeField } from '../../../../../_virtual/index.esm12.js';
 import React__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 

package/dist/node_modules/react-date-range/dist/components/Month/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as Month } from '../../../../../_virtual/index.esm12.js';
+import { __exports as Month } from '../../../../../_virtual/index.esm14.js';
 import React__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireDayCell } from '../DayCell/index.esm.js';

package/dist/utils/rdrStyles.esm.js

@@ -26,122 +26,122 @@ import { useEffect } from 'react';
 const STYLE_ID = 'tp-rdr-styles';
 /* ─── Combined CSS from react-date-range ──────────────────────────────────── */
 /* Source: react-date-range/dist/styles.css + theme/default.css v2.0.1        */
-const RDR_CSS = `
-/* ── react-date-range/dist/styles.css ── */
-.rdrCalendarWrapper{box-sizing:border-box;background:#ffffff;display:inline-flex;flex-direction:column;-webkit-user-select:none;-moz-user-select:none;user-select:none}
-.rdrDateDisplay{display:flex;justify-content:space-between}
-.rdrDateDisplayItem{flex:1 1;width:0;text-align:center;color:inherit}
-.rdrDateDisplayItem+.rdrDateDisplayItem{margin-left:.833em}
-.rdrDateDisplayItem input{text-align:inherit}
-.rdrDateDisplayItem input:disabled{cursor:default}
-.rdrDateDisplayItemActive{}
-.rdrMonthAndYearWrapper{box-sizing:inherit;display:flex;justify-content:space-between}
-.rdrMonthAndYearPickers{flex:1 1 auto;display:flex;justify-content:center;align-items:center}
-.rdrMonthPicker{}
-.rdrYearPicker{}
-.rdrNextPrevButton{box-sizing:inherit;cursor:pointer;outline:none}
-.rdrPprevButton{}
-.rdrNextButton{}
-.rdrMonths{display:flex}
-.rdrMonthsVertical{flex-direction:column}
-.rdrMonthsHorizontal>div>div>div{display:flex;flex-direction:row}
-.rdrMonth{width:27.667em}
-.rdrWeekDays{display:flex}
-.rdrWeekDay{flex-basis:calc(100% / 7);box-sizing:inherit;text-align:center}
-.rdrDays{display:flex;flex-wrap:wrap}
-.rdrDateDisplayWrapper{}
-.rdrMonthName{}
-.rdrInfiniteMonths{overflow:auto}
-.rdrDateRangeWrapper{-webkit-user-select:none;-moz-user-select:none;user-select:none}
-.rdrDateInput{position:relative}
-.rdrDateInput input{outline:none}
-.rdrDateInput .rdrWarning{position:absolute;font-size:1.6em;line-height:1.6em;top:0;right:.25em;color:#FF0000}
-.rdrDay{box-sizing:inherit;width:calc(100% / 7);position:relative;font:inherit;cursor:pointer}
-.rdrDayNumber{display:block;position:relative}
-.rdrDayNumber span{color:#1d2429}
-.rdrDayDisabled{cursor:not-allowed}
-@supports (-ms-ime-align:auto){.rdrDay{flex-basis:14.285% !important}}
-.rdrSelected,.rdrInRange,.rdrStartEdge,.rdrEndEdge{pointer-events:none}
-.rdrInRange{}
-.rdrDayStartPreview,.rdrDayInPreview,.rdrDayEndPreview{pointer-events:none}
-.rdrDayHovered{}
-.rdrDayActive{}
-.rdrDateRangePickerWrapper{display:inline-flex;-webkit-user-select:none;-moz-user-select:none;user-select:none}
-.rdrDefinedRangesWrapper{}
-.rdrStaticRanges{display:flex;flex-direction:column}
-.rdrStaticRange{font-size:inherit}
-.rdrStaticRangeLabel{}
-.rdrInputRanges{}
-.rdrInputRange{display:flex}
-.rdrInputRangeInput{}
-
-/* ── react-date-range/dist/theme/default.css ── */
-.rdrCalendarWrapper{color:#000000;font-size:12px}
-.rdrDateDisplayWrapper{background-color:rgb(239,242,247)}
-.rdrDateDisplay{margin:.833em}
-.rdrDateDisplayItem{border-radius:4px;background-color:rgb(255,255,255);box-shadow:0 1px 2px 0 rgba(35,57,66,.21);border:1px solid transparent}
-.rdrDateDisplayItem input{cursor:pointer;height:2.5em;line-height:2.5em;border:0;background:transparent;width:100%;color:#849095}
-.rdrDateDisplayItemActive{border-color:currentColor}
-.rdrDateDisplayItemActive input{color:#7d888d}
-.rdrMonthAndYearWrapper{align-items:center;height:60px;padding-top:10px}
-.rdrMonthAndYearPickers{font-weight:600}
-.rdrMonthAndYearPickers select{-moz-appearance:none;appearance:none;-webkit-appearance:none;border:0;background:transparent;padding:10px 30px 10px 10px;border-radius:4px;outline:0;color:#3e484f;background:url("data:image/svg+xml;utf8,<svg width='9px' height='6px' viewBox='0 0 9 6' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g id='Artboard' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' transform='translate(-636.000000, -171.000000)' fill-opacity='0.368716033'><g id='input' transform='translate(172.000000, 37.000000)' fill='%230E242F' fill-rule='nonzero'><g id='Group-9' transform='translate(323.000000, 127.000000)'><path d='M142.280245,7.23952813 C141.987305,6.92353472 141.512432,6.92361662 141.219585,7.23971106 C140.926739,7.5558055 140.926815,8.06821394 141.219755,8.38420735 L145.498801,13 L149.780245,8.38162071 C150.073185,8.0656273 150.073261,7.55321886 149.780415,7.23712442 C149.487568,6.92102998 149.012695,6.92094808 148.719755,7.23694149 L145.498801,10.7113732 L142.280245,7.23952813 Z' id='arrow'></path></g></g></g></svg>") no-repeat;background-position:right 8px center;cursor:pointer;text-align:center}
-.rdrMonthAndYearPickers select:hover{background-color:rgba(0,0,0,.07)}
-.rdrMonthPicker,.rdrYearPicker{margin:0 5px}
-.rdrNextPrevButton{display:block;width:24px;height:24px;margin:0 .833em;padding:0;border:0;border-radius:5px;background:#EFF2F7}
-.rdrNextPrevButton:hover{background:#E1E7F0}
-.rdrNextPrevButton i{display:block;width:0;height:0;padding:0;text-align:center;border-style:solid;margin:auto;transform:translate(-3px,0)}
-.rdrPprevButton i{border-width:4px 6px 4px 4px;border-color:transparent rgb(52,73,94) transparent transparent;transform:translate(-3px,0)}
-.rdrNextButton i{margin:0 0 0 7px;border-width:4px 4px 4px 6px;border-color:transparent transparent transparent rgb(52,73,94);transform:translate(3px,0)}
-.rdrWeekDays{padding:0 .833em}
-.rdrMonth{padding:0 .833em 1.666em .833em}
-.rdrMonth .rdrWeekDays{padding:0}
-.rdrMonths.rdrMonthsVertical .rdrMonth:first-child .rdrMonthName{display:none}
-.rdrWeekDay{font-weight:400;line-height:2.667em;color:rgb(132,144,149)}
-.rdrDay{background:transparent;-webkit-user-select:none;-moz-user-select:none;user-select:none;border:0;padding:0;line-height:3em;height:3em;text-align:center;color:#1d2429}
-.rdrDay:focus{outline:0}
-.rdrDayNumber{outline:0;font-weight:300;position:absolute;left:0;right:0;top:5px;bottom:5px;display:flex;align-items:center;justify-content:center}
-.rdrDayToday .rdrDayNumber span{font-weight:500}
-.rdrDayToday .rdrDayNumber span:after{content:'';position:absolute;bottom:4px;left:50%;transform:translate(-50%,0);width:18px;height:2px;border-radius:2px;background:#3d91ff}
-.rdrDayToday:not(.rdrDayPassive) .rdrInRange~.rdrDayNumber span:after,.rdrDayToday:not(.rdrDayPassive) .rdrStartEdge~.rdrDayNumber span:after,.rdrDayToday:not(.rdrDayPassive) .rdrEndEdge~.rdrDayNumber span:after,.rdrDayToday:not(.rdrDayPassive) .rdrSelected~.rdrDayNumber span:after{background:#fff}
-.rdrDay:not(.rdrDayPassive) .rdrInRange~.rdrDayNumber span,.rdrDay:not(.rdrDayPassive) .rdrStartEdge~.rdrDayNumber span,.rdrDay:not(.rdrDayPassive) .rdrEndEdge~.rdrDayNumber span,.rdrDay:not(.rdrDayPassive) .rdrSelected~.rdrDayNumber span{color:rgba(255,255,255,.85)}
-.rdrSelected,.rdrInRange,.rdrStartEdge,.rdrEndEdge{background:currentColor;position:absolute;top:5px;left:0;right:0;bottom:5px}
-.rdrSelected{left:2px;right:2px}
-.rdrInRange{}
-.rdrStartEdge{border-top-left-radius:1.042em;border-bottom-left-radius:1.042em;left:2px}
-.rdrEndEdge{border-top-right-radius:1.042em;border-bottom-right-radius:1.042em;right:2px}
-.rdrSelected{border-radius:1.042em}
-.rdrDayStartOfMonth .rdrInRange,.rdrDayStartOfMonth .rdrEndEdge,.rdrDayStartOfWeek .rdrInRange,.rdrDayStartOfWeek .rdrEndEdge{border-top-left-radius:1.042em;border-bottom-left-radius:1.042em;left:2px}
-.rdrDayEndOfMonth .rdrInRange,.rdrDayEndOfMonth .rdrStartEdge,.rdrDayEndOfWeek .rdrInRange,.rdrDayEndOfWeek .rdrStartEdge{border-top-right-radius:1.042em;border-bottom-right-radius:1.042em;right:2px}
-.rdrDayStartOfMonth .rdrDayInPreview,.rdrDayStartOfMonth .rdrDayEndPreview,.rdrDayStartOfWeek .rdrDayInPreview,.rdrDayStartOfWeek .rdrDayEndPreview{border-top-left-radius:1.333em;border-bottom-left-radius:1.333em;border-left-width:1px;left:0}
-.rdrDayEndOfMonth .rdrDayInPreview,.rdrDayEndOfMonth .rdrDayStartPreview,.rdrDayEndOfWeek .rdrDayInPreview,.rdrDayEndOfWeek .rdrDayStartPreview{border-top-right-radius:1.333em;border-bottom-right-radius:1.333em;border-right-width:1px;right:0}
-.rdrDayStartPreview,.rdrDayInPreview,.rdrDayEndPreview{background:rgba(255,255,255,.09);position:absolute;top:3px;left:0;right:0;bottom:3px;pointer-events:none;border:0 solid currentColor;z-index:1}
-.rdrDayStartPreview{border-top-width:1px;border-left-width:1px;border-bottom-width:1px;border-top-left-radius:1.333em;border-bottom-left-radius:1.333em;left:0}
-.rdrDayInPreview{border-top-width:1px;border-bottom-width:1px}
-.rdrDayEndPreview{border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-top-right-radius:1.333em;border-bottom-right-radius:1.333em;right:0}
-.rdrDefinedRangesWrapper{font-size:12px;width:226px;border-right:solid 1px #eff2f7;background:#fff}
-.rdrDefinedRangesWrapper .rdrStaticRangeSelected{color:currentColor;font-weight:600}
-.rdrStaticRange{border:0;cursor:pointer;display:block;outline:0;border-bottom:1px solid #eff2f7;padding:0;background:#fff}
-.rdrStaticRange:hover .rdrStaticRangeLabel,.rdrStaticRange:focus .rdrStaticRangeLabel{background:#eff2f7}
-.rdrStaticRangeLabel{display:block;outline:0;line-height:18px;padding:10px 20px;text-align:left}
-.rdrInputRanges{padding:10px 0}
-.rdrInputRange{align-items:center;padding:5px 20px}
-.rdrInputRangeInput{width:30px;height:30px;line-height:30px;border-radius:4px;text-align:center;border:solid 1px rgb(222,231,235);margin-right:10px;color:rgb(108,118,122)}
-.rdrInputRangeInput:focus,.rdrInputRangeInput:hover{border-color:rgb(180,191,196);outline:0;color:#333}
-.rdrCalendarWrapper:not(.rdrDateRangeWrapper) .rdrDayHovered .rdrDayNumber:after{content:'';border:1px solid currentColor;border-radius:1.333em;position:absolute;top:-2px;bottom:-2px;left:0;right:0;background:transparent}
-.rdrDayPassive{pointer-events:none}
-.rdrDayPassive .rdrDayNumber span{color:#d5dce0}
-.rdrDayPassive .rdrInRange,.rdrDayPassive .rdrStartEdge,.rdrDayPassive .rdrEndEdge,.rdrDayPassive .rdrSelected,.rdrDayPassive .rdrDayStartPreview,.rdrDayPassive .rdrDayInPreview,.rdrDayPassive .rdrDayEndPreview{display:none}
-.rdrDayDisabled{background-color:rgb(248,248,248)}
-.rdrDayDisabled .rdrDayNumber span{color:#aeb9bf}
-.rdrDayDisabled .rdrInRange,.rdrDayDisabled .rdrStartEdge,.rdrDayDisabled .rdrEndEdge,.rdrDayDisabled .rdrSelected,.rdrDayDisabled .rdrDayStartPreview,.rdrDayDisabled .rdrDayInPreview,.rdrDayDisabled .rdrDayEndPreview{filter:grayscale(100%) opacity(60%)}
-.rdrMonthName{text-align:left;font-weight:600;color:#849095;padding:.833em}
-
-/* ── DateRangePicker.scss override (compiled) ── */
-.rdrCalendarWrapper .rdrDay:not(.rdrDayPassive) .rdrInRange~.rdrDayNumber span,
-.rdrCalendarWrapper .rdrDay:not(.rdrDayPassive) .rdrStartEdge~.rdrDayNumber span,
-.rdrCalendarWrapper .rdrDay:not(.rdrDayPassive) .rdrEndEdge~.rdrDayNumber span,
-.rdrCalendarWrapper .rdrDay:not(.rdrDayPassive) .rdrSelected~.rdrDayNumber span{color:#fff !important}
+const RDR_CSS = `
+/* ── react-date-range/dist/styles.css ── */
+.rdrCalendarWrapper{box-sizing:border-box;background:#ffffff;display:inline-flex;flex-direction:column;-webkit-user-select:none;-moz-user-select:none;user-select:none}
+.rdrDateDisplay{display:flex;justify-content:space-between}
+.rdrDateDisplayItem{flex:1 1;width:0;text-align:center;color:inherit}
+.rdrDateDisplayItem+.rdrDateDisplayItem{margin-left:.833em}
+.rdrDateDisplayItem input{text-align:inherit}
+.rdrDateDisplayItem input:disabled{cursor:default}
+.rdrDateDisplayItemActive{}
+.rdrMonthAndYearWrapper{box-sizing:inherit;display:flex;justify-content:space-between}
+.rdrMonthAndYearPickers{flex:1 1 auto;display:flex;justify-content:center;align-items:center}
+.rdrMonthPicker{}
+.rdrYearPicker{}
+.rdrNextPrevButton{box-sizing:inherit;cursor:pointer;outline:none}
+.rdrPprevButton{}
+.rdrNextButton{}
+.rdrMonths{display:flex}
+.rdrMonthsVertical{flex-direction:column}
+.rdrMonthsHorizontal>div>div>div{display:flex;flex-direction:row}
+.rdrMonth{width:27.667em}
+.rdrWeekDays{display:flex}
+.rdrWeekDay{flex-basis:calc(100% / 7);box-sizing:inherit;text-align:center}
+.rdrDays{display:flex;flex-wrap:wrap}
+.rdrDateDisplayWrapper{}
+.rdrMonthName{}
+.rdrInfiniteMonths{overflow:auto}
+.rdrDateRangeWrapper{-webkit-user-select:none;-moz-user-select:none;user-select:none}
+.rdrDateInput{position:relative}
+.rdrDateInput input{outline:none}
+.rdrDateInput .rdrWarning{position:absolute;font-size:1.6em;line-height:1.6em;top:0;right:.25em;color:#FF0000}
+.rdrDay{box-sizing:inherit;width:calc(100% / 7);position:relative;font:inherit;cursor:pointer}
+.rdrDayNumber{display:block;position:relative}
+.rdrDayNumber span{color:#1d2429}
+.rdrDayDisabled{cursor:not-allowed}
+@supports (-ms-ime-align:auto){.rdrDay{flex-basis:14.285% !important}}
+.rdrSelected,.rdrInRange,.rdrStartEdge,.rdrEndEdge{pointer-events:none}
+.rdrInRange{}
+.rdrDayStartPreview,.rdrDayInPreview,.rdrDayEndPreview{pointer-events:none}
+.rdrDayHovered{}
+.rdrDayActive{}
+.rdrDateRangePickerWrapper{display:inline-flex;-webkit-user-select:none;-moz-user-select:none;user-select:none}
+.rdrDefinedRangesWrapper{}
+.rdrStaticRanges{display:flex;flex-direction:column}
+.rdrStaticRange{font-size:inherit}
+.rdrStaticRangeLabel{}
+.rdrInputRanges{}
+.rdrInputRange{display:flex}
+.rdrInputRangeInput{}
+
+/* ── react-date-range/dist/theme/default.css ── */
+.rdrCalendarWrapper{color:#000000;font-size:12px}
+.rdrDateDisplayWrapper{background-color:rgb(239,242,247)}
+.rdrDateDisplay{margin:.833em}
+.rdrDateDisplayItem{border-radius:4px;background-color:rgb(255,255,255);box-shadow:0 1px 2px 0 rgba(35,57,66,.21);border:1px solid transparent}
+.rdrDateDisplayItem input{cursor:pointer;height:2.5em;line-height:2.5em;border:0;background:transparent;width:100%;color:#849095}
+.rdrDateDisplayItemActive{border-color:currentColor}
+.rdrDateDisplayItemActive input{color:#7d888d}
+.rdrMonthAndYearWrapper{align-items:center;height:60px;padding-top:10px}
+.rdrMonthAndYearPickers{font-weight:600}
+.rdrMonthAndYearPickers select{-moz-appearance:none;appearance:none;-webkit-appearance:none;border:0;background:transparent;padding:10px 30px 10px 10px;border-radius:4px;outline:0;color:#3e484f;background:url("data:image/svg+xml;utf8,<svg width='9px' height='6px' viewBox='0 0 9 6' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g id='Artboard' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' transform='translate(-636.000000, -171.000000)' fill-opacity='0.368716033'><g id='input' transform='translate(172.000000, 37.000000)' fill='%230E242F' fill-rule='nonzero'><g id='Group-9' transform='translate(323.000000, 127.000000)'><path d='M142.280245,7.23952813 C141.987305,6.92353472 141.512432,6.92361662 141.219585,7.23971106 C140.926739,7.5558055 140.926815,8.06821394 141.219755,8.38420735 L145.498801,13 L149.780245,8.38162071 C150.073185,8.0656273 150.073261,7.55321886 149.780415,7.23712442 C149.487568,6.92102998 149.012695,6.92094808 148.719755,7.23694149 L145.498801,10.7113732 L142.280245,7.23952813 Z' id='arrow'></path></g></g></g></svg>") no-repeat;background-position:right 8px center;cursor:pointer;text-align:center}
+.rdrMonthAndYearPickers select:hover{background-color:rgba(0,0,0,.07)}
+.rdrMonthPicker,.rdrYearPicker{margin:0 5px}
+.rdrNextPrevButton{display:block;width:24px;height:24px;margin:0 .833em;padding:0;border:0;border-radius:5px;background:#EFF2F7}
+.rdrNextPrevButton:hover{background:#E1E7F0}
+.rdrNextPrevButton i{display:block;width:0;height:0;padding:0;text-align:center;border-style:solid;margin:auto;transform:translate(-3px,0)}
+.rdrPprevButton i{border-width:4px 6px 4px 4px;border-color:transparent rgb(52,73,94) transparent transparent;transform:translate(-3px,0)}
+.rdrNextButton i{margin:0 0 0 7px;border-width:4px 4px 4px 6px;border-color:transparent transparent transparent rgb(52,73,94);transform:translate(3px,0)}
+.rdrWeekDays{padding:0 .833em}
+.rdrMonth{padding:0 .833em 1.666em .833em}
+.rdrMonth .rdrWeekDays{padding:0}
+.rdrMonths.rdrMonthsVertical .rdrMonth:first-child .rdrMonthName{display:none}
+.rdrWeekDay{font-weight:400;line-height:2.667em;color:rgb(132,144,149)}
+.rdrDay{background:transparent;-webkit-user-select:none;-moz-user-select:none;user-select:none;border:0;padding:0;line-height:3em;height:3em;text-align:center;color:#1d2429}
+.rdrDay:focus{outline:0}
+.rdrDayNumber{outline:0;font-weight:300;position:absolute;left:0;right:0;top:5px;bottom:5px;display:flex;align-items:center;justify-content:center}
+.rdrDayToday .rdrDayNumber span{font-weight:500}
+.rdrDayToday .rdrDayNumber span:after{content:'';position:absolute;bottom:4px;left:50%;transform:translate(-50%,0);width:18px;height:2px;border-radius:2px;background:#3d91ff}
+.rdrDayToday:not(.rdrDayPassive) .rdrInRange~.rdrDayNumber span:after,.rdrDayToday:not(.rdrDayPassive) .rdrStartEdge~.rdrDayNumber span:after,.rdrDayToday:not(.rdrDayPassive) .rdrEndEdge~.rdrDayNumber span:after,.rdrDayToday:not(.rdrDayPassive) .rdrSelected~.rdrDayNumber span:after{background:#fff}
+.rdrDay:not(.rdrDayPassive) .rdrInRange~.rdrDayNumber span,.rdrDay:not(.rdrDayPassive) .rdrStartEdge~.rdrDayNumber span,.rdrDay:not(.rdrDayPassive) .rdrEndEdge~.rdrDayNumber span,.rdrDay:not(.rdrDayPassive) .rdrSelected~.rdrDayNumber span{color:rgba(255,255,255,.85)}
+.rdrSelected,.rdrInRange,.rdrStartEdge,.rdrEndEdge{background:currentColor;position:absolute;top:5px;left:0;right:0;bottom:5px}
+.rdrSelected{left:2px;right:2px}
+.rdrInRange{}
+.rdrStartEdge{border-top-left-radius:1.042em;border-bottom-left-radius:1.042em;left:2px}
+.rdrEndEdge{border-top-right-radius:1.042em;border-bottom-right-radius:1.042em;right:2px}
+.rdrSelected{border-radius:1.042em}
+.rdrDayStartOfMonth .rdrInRange,.rdrDayStartOfMonth .rdrEndEdge,.rdrDayStartOfWeek .rdrInRange,.rdrDayStartOfWeek .rdrEndEdge{border-top-left-radius:1.042em;border-bottom-left-radius:1.042em;left:2px}
+.rdrDayEndOfMonth .rdrInRange,.rdrDayEndOfMonth .rdrStartEdge,.rdrDayEndOfWeek .rdrInRange,.rdrDayEndOfWeek .rdrStartEdge{border-top-right-radius:1.042em;border-bottom-right-radius:1.042em;right:2px}
+.rdrDayStartOfMonth .rdrDayInPreview,.rdrDayStartOfMonth .rdrDayEndPreview,.rdrDayStartOfWeek .rdrDayInPreview,.rdrDayStartOfWeek .rdrDayEndPreview{border-top-left-radius:1.333em;border-bottom-left-radius:1.333em;border-left-width:1px;left:0}
+.rdrDayEndOfMonth .rdrDayInPreview,.rdrDayEndOfMonth .rdrDayStartPreview,.rdrDayEndOfWeek .rdrDayInPreview,.rdrDayEndOfWeek .rdrDayStartPreview{border-top-right-radius:1.333em;border-bottom-right-radius:1.333em;border-right-width:1px;right:0}
+.rdrDayStartPreview,.rdrDayInPreview,.rdrDayEndPreview{background:rgba(255,255,255,.09);position:absolute;top:3px;left:0;right:0;bottom:3px;pointer-events:none;border:0 solid currentColor;z-index:1}
+.rdrDayStartPreview{border-top-width:1px;border-left-width:1px;border-bottom-width:1px;border-top-left-radius:1.333em;border-bottom-left-radius:1.333em;left:0}
+.rdrDayInPreview{border-top-width:1px;border-bottom-width:1px}
+.rdrDayEndPreview{border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-top-right-radius:1.333em;border-bottom-right-radius:1.333em;right:0}
+.rdrDefinedRangesWrapper{font-size:12px;width:226px;border-right:solid 1px #eff2f7;background:#fff}
+.rdrDefinedRangesWrapper .rdrStaticRangeSelected{color:currentColor;font-weight:600}
+.rdrStaticRange{border:0;cursor:pointer;display:block;outline:0;border-bottom:1px solid #eff2f7;padding:0;background:#fff}
+.rdrStaticRange:hover .rdrStaticRangeLabel,.rdrStaticRange:focus .rdrStaticRangeLabel{background:#eff2f7}
+.rdrStaticRangeLabel{display:block;outline:0;line-height:18px;padding:10px 20px;text-align:left}
+.rdrInputRanges{padding:10px 0}
+.rdrInputRange{align-items:center;padding:5px 20px}
+.rdrInputRangeInput{width:30px;height:30px;line-height:30px;border-radius:4px;text-align:center;border:solid 1px rgb(222,231,235);margin-right:10px;color:rgb(108,118,122)}
+.rdrInputRangeInput:focus,.rdrInputRangeInput:hover{border-color:rgb(180,191,196);outline:0;color:#333}
+.rdrCalendarWrapper:not(.rdrDateRangeWrapper) .rdrDayHovered .rdrDayNumber:after{content:'';border:1px solid currentColor;border-radius:1.333em;position:absolute;top:-2px;bottom:-2px;left:0;right:0;background:transparent}
+.rdrDayPassive{pointer-events:none}
+.rdrDayPassive .rdrDayNumber span{color:#d5dce0}
+.rdrDayPassive .rdrInRange,.rdrDayPassive .rdrStartEdge,.rdrDayPassive .rdrEndEdge,.rdrDayPassive .rdrSelected,.rdrDayPassive .rdrDayStartPreview,.rdrDayPassive .rdrDayInPreview,.rdrDayPassive .rdrDayEndPreview{display:none}
+.rdrDayDisabled{background-color:rgb(248,248,248)}
+.rdrDayDisabled .rdrDayNumber span{color:#aeb9bf}
+.rdrDayDisabled .rdrInRange,.rdrDayDisabled .rdrStartEdge,.rdrDayDisabled .rdrEndEdge,.rdrDayDisabled .rdrSelected,.rdrDayDisabled .rdrDayStartPreview,.rdrDayDisabled .rdrDayInPreview,.rdrDayDisabled .rdrDayEndPreview{filter:grayscale(100%) opacity(60%)}
+.rdrMonthName{text-align:left;font-weight:600;color:#849095;padding:.833em}
+
+/* ── DateRangePicker.scss override (compiled) ── */
+.rdrCalendarWrapper .rdrDay:not(.rdrDayPassive) .rdrInRange~.rdrDayNumber span,
+.rdrCalendarWrapper .rdrDay:not(.rdrDayPassive) .rdrStartEdge~.rdrDayNumber span,
+.rdrCalendarWrapper .rdrDay:not(.rdrDayPassive) .rdrEndEdge~.rdrDayNumber span,
+.rdrCalendarWrapper .rdrDay:not(.rdrDayPassive) .rdrSelected~.rdrDayNumber span{color:#fff !important}
 `;
 /* ─── Singleton injection ─────────────────────────────────────────────────── */
 let _injected = false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tp-react-elements",
-  "version": "1.3.4",
+  "version": "1.3.6",
   "private": false,
   "type": "module",
   "description": "React form components library built with React Hook Form and Yup",

package/scripts/install-deps.js

@@ -1,4 +1,4 @@
-#!/usr/bin/env node
+#!/usr/bin/env node
 
 /**
  * Install exact versions of peerDependencies for tp-react-elements