tp-react-elements 1.3.3 → 1.3.6

package/dist/_virtual/index.esm12.js

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

package/dist/_virtual/index.esm13.js

@@ -1,3 +1,3 @@
-var Month = {};
+var DateInput = {};
 
-export { Month as __exports };
+export { DateInput 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.esm4.js

@@ -1,3 +1,3 @@
-var Calendar = {};
+var DefinedRange = {};
 
-export { Calendar as __exports };
+export { DefinedRange 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 DefinedRange = {};
+var DateRange = {};
 
-export { DefinedRange as __exports };
+export { DateRange as __exports };

package/dist/_virtual/index.esm7.js

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

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

@@ -61,11 +61,11 @@ interface AvailableColumn {
     label: string;
     /**
      * Filter chip variant used in the "Column Filters" section of Manage Filters.
-     * Mirrors the `meta.filterType` declared on the column definition.
+     * Sourced from the `filterType` prop on the column's `TPColumnDef`.
      * Defaults to `'text'` when omitted.
      */
-    filterType?: 'text' | 'date' | 'searchableDropdown';
-    /** Options for the `'searchableDropdown'` chip variant. */
+    filterType?: 'text' | 'date' | 'select' | 'searchable-select' | 'number';
+    /** Options for `'select'` / `'searchable-select'` chip variants. */
     filterOptions?: {
         label: string;
         value: string;
@@ -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';
@@ -22,6 +22,7 @@ import SearchIcon from '@mui/icons-material/Search';
 // that DatepickerWrapperV2 passes to onChangeFn
 dayjs.extend(customParseFormat);
 // ─── Type pill metadata ───────────────────────────────────────────────────────
+// Server-side filter pills (used in SERVER FILTERS section of Manage Filters)
 const TYPE_PILL = {
     dateRange: { label: 'Range', color: '#1565c0', bg: '#e3f2fd' },
     date: { label: 'Date', color: '#00695c', bg: '#e0f2f1' },
@@ -29,6 +30,14 @@ const TYPE_PILL = {
     dropdown: { label: 'Select', color: '#6a1b9a', bg: '#f3e5f5' },
     searchableDropdown: { label: 'Search', color: '#bf360c', bg: '#fbe9e7' },
 };
+// Column filter type pills (used in COLUMN FILTERS section of Manage Filters)
+const COLUMN_TYPE_PILL = {
+    text: { label: 'Text', color: '#2e7d32', bg: '#e8f5e9' },
+    date: { label: 'Date', color: '#00695c', bg: '#e0f2f1' },
+    select: { label: 'Select', color: '#bf360c', bg: '#fbe9e7' },
+    'searchable-select': { label: 'Search', color: '#bf360c', bg: '#fbe9e7' },
+    number: { label: 'Number', color: '#e65100', bg: '#fff3e0' },
+};
 // ─── Chip shared style ────────────────────────────────────────────────────────
 const chipSx = (active) => ({
     borderRadius: 5,
@@ -41,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)
@@ -95,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);
@@ -129,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,
@@ -171,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,
@@ -199,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: {
@@ -217,55 +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 = col.filterType === 'date'
-                                            ? TYPE_PILL.date
-                                            : col.filterType === 'searchableDropdown'
-                                                ? TYPE_PILL.searchableDropdown
-                                                : 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);
@@ -313,12 +340,12 @@ const DynamicFilterBar = ({ serverFilterDefs, visibleFilterIds, onToggleFilter,
                 if (col.filterType === 'date') {
                     return (jsx(DatePickerChip, { label: col.label, value: getColValue(id), onApply: (v) => applyColFilter(id, v), onRemove: () => removeFilter(id) }, id));
                 }
-                if (col.filterType === 'searchableDropdown') {
+                if (col.filterType === 'select' || col.filterType === 'searchable-select') {
                     return (jsx(SearchableSelectChip, { label: col.label, value: getColValue(id), options: col.filterOptions ?? [], onApply: (v) => applyColFilter(id, v), onRemove: () => removeFilter(id) }, id));
                 }
                 // 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

@@ -1,14 +1,21 @@
-import { type MRT_ColumnDef } from 'material-react-table';
+import type { TPColumnDef } from './types';
 import { type ServerFilterDef } from './DynamicFilterBar';
 export type { ServerFilterDef };
+export type { TPColumnDef } from './types';
 /** Shape that fetchPage must return. */
 export interface PagedResult<TData> {
     data: TData[];
     totalRecords: number;
 }
 export interface GenericPaginatedGridProps<TData extends object> {
-    /** MRT column definitions typed to your data shape. */
-    columns: MRT_ColumnDef<TData>[];
+    /**
+     * Column definitions. Use `TPColumnDef<TData>` (a superset of `MRT_ColumnDef`)
+     * to get top-level `filterType` and `options` support with no `meta` boilerplate.
+     *
+     * The grid automatically injects the right `filterFn` for each `filterType`,
+     * and wires up the correct chip in Manage Filters → Column Filters.
+     */
+    columns: TPColumnDef<TData>[];
     /**
      * Async function called on every page/filter change.
      * Receives the current flat filter map and the 0-based page index.
@@ -35,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 ──────────────────────────────────────────────────────────────────
@@ -66,6 +66,34 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
     });
     const rows = data?.data ?? [];
     const totalRecords = data?.totalRecords ?? 0;
+    // ── Strip custom props + auto-inject filterFn before passing to MRT ──────────
+    //
+    // `TPColumnDef` extends `MRT_ColumnDef` with `filterType` and `options`.
+    // MRT doesn't know these props, so we strip them here. We also inject the
+    // appropriate `filterFn` automatically so callers never have to write one.
+    const processedColumns = useMemo(() => {
+        return columns.map((col) => {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const { filterType, options, ...mrtCol } = col;
+            // Auto-inject filterFn only when the user hasn't already supplied one.
+            if (!mrtCol.filterFn && filterType) {
+                if (filterType === 'date') {
+                    // ISO date strings: "2026-05-05T00:00:00" → startsWith "2026-05-05"
+                    mrtCol.filterFn = (row, columnId, filterValue) => filterValue
+                        ? (row.getValue(columnId) ?? '').startsWith(filterValue)
+                        : true;
+                }
+                else if (filterType === 'select' || filterType === 'searchable-select') {
+                    // Exact-value match (avoids substring false positives)
+                    mrtCol.filterFn = (row, columnId, filterValue) => filterValue
+                        ? row.getValue(columnId) === filterValue
+                        : true;
+                }
+                // 'text' and 'number' use MRT's built-in client-side filtering
+            }
+            return mrtCol;
+        });
+    }, [columns]);
     // ── Derive column list for filter chip picker ──────────────────────────────
     //
     // A column is excluded from the "Column Filters" section of Manage Filters
@@ -73,7 +101,7 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
     //   1. It has no accessorKey (computed / display columns).
     //   2. Its accessorKey is already handled by a server-side 'date' filter def.
     //   3. Its MRT `enableColumnFilter` prop is explicitly set to `false` —
-    //      this is the standard MRT opt-out flag for column-level filters.
+    //      use this for numeric/computed columns that don't need a filter chip.
     const availableColumns = useMemo(() => {
         const serverManagedColKeys = new Set(serverFilterDefs
             .filter((d) => d.type === 'date')
@@ -82,16 +110,14 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
             .filter((c) => 'accessorKey' in c &&
             c.accessorKey &&
             !serverManagedColKeys.has(c.accessorKey) &&
-            // Honour the standard MRT opt-out flag: columns with
-            // enableColumnFilter: false should not appear in Manage Filters.
             c.enableColumnFilter !== false)
             .map((c) => ({
             id: c.accessorKey,
             label: c.header,
-            // Forward column-level filter type hints so DynamicFilterBar can render
-            // the right chip (text / date / searchableDropdown) for each column.
-            filterType: c.meta?.filterType,
-            filterOptions: c.meta?.filterOptions,
+            // Pass filterType directly from TPColumnDef (no meta unwrapping needed)
+            filterType: c.filterType,
+            // Map TPColumnDef.options → AvailableColumn.filterOptions
+            filterOptions: c.options,
         }));
     }, [columns, serverFilterDefs]);
     // ── Handlers ───────────────────────────────────────────────────────────────
@@ -99,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([]);
@@ -127,7 +159,7 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
         columnFilters.some((f) => f.value);
     // ── Table instance ─────────────────────────────────────────────────────────
     const table = useMaterialReactTable({
-        columns,
+        columns: processedColumns,
         data: rows,
         manualPagination: true,
         rowCount: totalRecords,
@@ -187,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,
@@ -223,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,
@@ -234,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/components/PaginatedGrid/columns.d.ts

@@ -1,22 +1,3 @@
-import type { MRT_ColumnDef } from 'material-react-table';
+import type { TPColumnDef } from './types';
 import type { InvoiceDetail } from './types';
-import type { RowData } from '@tanstack/table-core';
-declare module '@tanstack/table-core' {
-    interface ColumnMeta<TData extends RowData, TValue> {
-        /**
-         * Which chip variant to render in the "Column Filters" section of
-         * Manage Filters.  Defaults to `'text'` when omitted.
-         *
-         *   'text'               → TextFilterChip   (free-text input)
-         *   'date'               → DatePickerChip   (MUI X calendar)
-         *   'searchableDropdown' → SearchableSelectChip (search + options list)
-         */
-        filterType?: 'text' | 'date' | 'searchableDropdown';
-        /** Option pairs for the `'searchableDropdown'` filter chip. */
-        filterOptions?: {
-            label: string;
-            value: string;
-        }[];
-    }
-}
-export declare const invoiceColumns: MRT_ColumnDef<InvoiceDetail>[];
+export declare const invoiceColumns: TPColumnDef<InvoiceDetail>[];

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

@@ -1,3 +1,64 @@
+import type { MRT_ColumnDef } from 'material-react-table';
+/**
+ * Filter chip variant shown in Manage Filters → Column Filters.
+ *
+ *  | Value               | Chip rendered             |
+ *  |---------------------|---------------------------|
+ *  | `'text'`            | Free-text input (default) |
+ *  | `'date'`            | Calendar date picker      |
+ *  | `'select'`          | Searchable option list    |
+ *  | `'searchable-select'` | Searchable option list  |
+ *  | `'number'`          | Numeric input             |
+ *
+ * Set `enableColumnFilter: false` to hide the column from Manage Filters
+ * entirely (e.g. for computed or numeric columns that don't need filtering).
+ */
+export type ColumnFilterType = 'text' | 'date' | 'select' | 'searchable-select' | 'number';
+/**
+ * Drop-in replacement for `MRT_ColumnDef` that adds top-level
+ * `filterType` and `options` so you never have to write `meta` blocks
+ * or custom `filterFn` — the grid handles both automatically.
+ *
+ * @example
+ * ```ts
+ * import type { TPColumnDef } from './types';
+ *
+ * const columns: TPColumnDef<MyRow>[] = [
+ *   // Date picker chip
+ *   { accessorKey: 'invoiceDate', header: 'Invoice Date', filterType: 'date' },
+ *
+ *   // Searchable option list chip
+ *   {
+ *     accessorKey: 'status',
+ *     header: 'Status',
+ *     filterType: 'searchable-select',
+ *     options: [
+ *       { label: 'Active',   value: 'A' },
+ *       { label: 'Inactive', value: 'I' },
+ *     ],
+ *   },
+ *
+ *   // Hidden from Manage Filters (numeric column)
+ *   { accessorKey: 'qty', header: 'Qty', enableColumnFilter: false },
+ * ];
+ * ```
+ */
+export type TPColumnDef<TData extends object = object> = MRT_ColumnDef<TData> & {
+    /**
+     * Which filter chip to show in Manage Filters → Column Filters.
+     * Omit (or set to `'text'`) for a plain text-input chip.
+     */
+    filterType?: ColumnFilterType;
+    /**
+     * Option pairs for `'select'` and `'searchable-select'` filter types.
+     * Each entry needs `label` (display text) and `value` (filter value sent).
+     */
+    options?: {
+        label: string;
+        value: string | number;
+        disable?: boolean;
+    }[];
+};
 export interface InvoiceDetail {
     Data_from: string;
     FINYEAR: string;

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

@@ -1,4 +1,4 @@
-import { __exports as Calendar } from '../../../../../_virtual/index.esm4.js';
+import { __exports as Calendar } from '../../../../../_virtual/index.esm7.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/node_modules/react-date-range/dist/components/DateInput/index.esm.js

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

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.esm7.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/DefinedRange/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as DefinedRange } from '../../../../../_virtual/index.esm6.js';
+import { __exports as DefinedRange } from '../../../../../_virtual/index.esm4.js';
 import React__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireStyles } from '../../styles.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.esm13.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.3",
+  "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