tp-react-elements 1.3.1 → 1.3.3

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

@@ -0,0 +1,240 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useMemo } from 'react';
+import { useMaterialReactTable, MaterialReactTable } from 'material-react-table';
+import { useQuery, keepPreviousData } from '@tanstack/react-query';
+import { Box, Tooltip, IconButton, Button, GlobalStyles, Typography, Select, MenuItem, CircularProgress } from '@mui/material';
+import RefreshIcon from '@mui/icons-material/Refresh';
+import FileDownloadIcon from '@mui/icons-material/FileDownload';
+import FirstPageIcon from '@mui/icons-material/FirstPage';
+import LastPageIcon from '@mui/icons-material/LastPage';
+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import DynamicFilterBar from './DynamicFilterBar.esm.js';
+
+// ─── Internal: overlay loader ─────────────────────────────────────────────────
+const OverlayLoader = ({ message }) => (jsxs(Box, { sx: {
+        position: 'absolute', inset: 0,
+        display: 'flex', flexDirection: 'column',
+        alignItems: 'center', justifyContent: 'center',
+        bgcolor: 'rgba(255,255,255,0.80)', backdropFilter: 'blur(2px)',
+        zIndex: 10, gap: 1.5,
+    }, children: [jsx(CircularProgress, { size: 50, thickness: 4 }), jsx(Typography, { variant: "body2", color: "text.secondary", fontWeight: 500, children: message })] }));
+const PaginationFooter = ({ pageIndex, pageSize, totalRecords, isFetching, isLoading, canPrev, canNext, onFirst, onPrev, onNext, onLast, onPageSizeChange, pageSizeOptions, }) => {
+    const startRow = totalRecords === 0 ? 0 : pageIndex * pageSize + 1;
+    const endRow = Math.min((pageIndex + 1) * pageSize, totalRecords);
+    return (jsxs(Box, { sx: {
+            display: 'flex', alignItems: 'center', justifyContent: 'flex-end',
+            gap: { xs: 1.5, md: 3 }, px: 2, py: 0.75,
+            borderTop: '1px solid', borderColor: 'divider',
+            bgcolor: 'background.paper', flexWrap: 'wrap', minHeight: 48,
+        }, children: [jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [jsx(Typography, { variant: "body2", color: "text.secondary", noWrap: true, children: "Rows per page:" }), jsx(Select, { value: pageSize, onChange: (e) => onPageSizeChange(Number(e.target.value)), size: "small", variant: "outlined", sx: {
+                            height: 28, fontSize: 13, minWidth: 80,
+                            '.MuiSelect-select': { py: '3px !important' },
+                            '.MuiOutlinedInput-notchedOutline': { borderColor: 'divider' },
+                        }, children: pageSizeOptions.map((opt) => (jsx(MenuItem, { value: opt, sx: { fontSize: 13 }, children: opt.toLocaleString() }, opt))) })] }), jsx(Typography, { variant: "body2", color: "text.secondary", noWrap: true, children: isLoading || (isFetching && totalRecords === 0)
+                    ? 'Loading…'
+                    : totalRecords === 0
+                        ? 'No records'
+                        : `${startRow.toLocaleString()}–${endRow.toLocaleString()} of ${totalRecords.toLocaleString()}` }), jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 0.25 }, children: [jsx(Tooltip, { title: "First page", children: jsx("span", { children: jsx(IconButton, { size: "small", onClick: onFirst, disabled: !canPrev, children: jsx(FirstPageIcon, { sx: { fontSize: 20 } }) }) }) }), jsx(Tooltip, { title: "Previous page", children: jsx("span", { children: jsx(IconButton, { size: "small", onClick: onPrev, disabled: !canPrev, children: jsx(ChevronLeftIcon, { sx: { fontSize: 20 } }) }) }) }), jsx(Typography, { variant: "body2", fontWeight: 600, sx: {
+                            mx: 0.5, minWidth: 28, height: 28,
+                            display: 'flex', alignItems: 'center', justifyContent: 'center',
+                            borderRadius: 1, border: '1px solid', borderColor: 'primary.main',
+                            color: 'primary.main', bgcolor: 'rgba(25,118,210,0.07)', fontSize: 13,
+                        }, 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, }) {
+    const defaultVisible = defaultVisibleFilterIds
+        ?? (serverFilterDefs.length > 0 ? [serverFilterDefs[0].id] : []);
+    // ── State ──────────────────────────────────────────────────────────────────
+    const [filterValues, setFilterValues] = useState(defaultFilters);
+    const [visibleFilterIds, setVisibleFilterIds] = useState(defaultVisible);
+    const [pagination, setPagination] = useState({
+        pageIndex: 0,
+        pageSize: batchSize,
+    });
+    const [sorting, setSorting] = useState([]);
+    const [columnFilters, setColumnFilters] = useState([]);
+    const [globalFilter, setGlobalFilter] = useState('');
+    const [columnPinning, setColumnPinning] = useState({});
+    // ── Data fetching ──────────────────────────────────────────────────────────
+    const { data, isLoading, isError, isFetching, refetch } = useQuery({
+        queryKey: [...queryKey, filterValues, pagination.pageIndex],
+        queryFn: () => fetchPage(filterValues, pagination.pageIndex),
+        placeholderData: keepPreviousData,
+        staleTime: 30000,
+    });
+    const rows = data?.data ?? [];
+    const totalRecords = data?.totalRecords ?? 0;
+    // ── Derive column list for filter chip picker ──────────────────────────────
+    //
+    // A column is excluded from the "Column Filters" section of Manage Filters
+    // when ANY of the following are true:
+    //   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.
+    const availableColumns = useMemo(() => {
+        const serverManagedColKeys = new Set(serverFilterDefs
+            .filter((d) => d.type === 'date')
+            .map((d) => d.columnKey));
+        return columns
+            .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,
+        }));
+    }, [columns, serverFilterDefs]);
+    // ── Handlers ───────────────────────────────────────────────────────────────
+    const handleFilterValuesChange = (newValues) => {
+        setFilterValues(newValues);
+        setPagination((p) => ({ ...p, pageIndex: 0 }));
+    };
+    const handleToggleFilter = (id) => setVisibleFilterIds((prev) => prev.includes(id) ? prev.filter((v) => v !== id) : [...prev, id]);
+    const handleClearAll = () => {
+        setFilterValues(defaultFilters);
+        setColumnFilters([]);
+        setVisibleFilterIds(defaultVisible);
+        setPagination((p) => ({ ...p, pageIndex: 0 }));
+    };
+    const handleExport = () => {
+        const headers = columns.map((c) => c.header).join(',');
+        const csvRows = rows.map((row) => columns
+            .map((c) => {
+            const key = c.accessorKey ?? '';
+            const val = row[key] ?? '';
+            return `"${String(val).replace(/"/g, '""')}"`;
+        })
+            .join(','));
+        const blob = new Blob([[headers, ...csvRows].join('\n')], { type: 'text/csv' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `${exportFilename}-page${pagination.pageIndex + 1}.csv`;
+        a.click();
+        URL.revokeObjectURL(url);
+    };
+    const hasAnyValue = Object.values(filterValues).some(Boolean) ||
+        columnFilters.some((f) => f.value);
+    // ── Table instance ─────────────────────────────────────────────────────────
+    const table = useMaterialReactTable({
+        columns,
+        data: rows,
+        manualPagination: true,
+        rowCount: totalRecords,
+        manualSorting: false,
+        manualFiltering: false,
+        state: {
+            pagination,
+            sorting,
+            columnFilters,
+            globalFilter,
+            columnPinning,
+            showAlertBanner: isError,
+            showProgressBars: false,
+        },
+        onPaginationChange: setPagination,
+        onSortingChange: setSorting,
+        onColumnFiltersChange: setColumnFilters,
+        onGlobalFilterChange: setGlobalFilter,
+        onColumnPinningChange: (updater) => {
+            setColumnPinning((prev) => {
+                const next = typeof updater === 'function' ? updater(prev) : updater;
+                return { ...next, right: [] };
+            });
+        },
+        enableColumnResizing: true,
+        enableColumnOrdering: true,
+        enableColumnActions: false,
+        enableColumnPinning: true,
+        columnResizeMode: 'onChange',
+        enableFilters: false,
+        enableGlobalFilter: true,
+        enableDensityToggle: true,
+        enableFullScreenToggle: true,
+        enableHiding: true,
+        enableStickyHeader: true,
+        enableRowVirtualization: true,
+        muiTableContainerProps: { sx: { maxHeight: tableHeight } },
+        muiTopToolbarProps: {
+            sx: {
+                alignItems: 'center',
+                flexWrap: 'nowrap',
+            },
+        },
+        muiTableHeadCellProps: ({ column }) => {
+            const colProps = column.columnDef.muiTableHeadCellProps;
+            const align = colProps && typeof colProps !== 'function'
+                ? colProps.align
+                : undefined;
+            const justifyContent = align === 'right' ? 'flex-start'
+                : align === 'center' ? 'center'
+                    : 'flex-end';
+            return {
+                align: (align ?? 'left'),
+                sx: {
+                    ...(headerBgColor ? { backgroundColor: headerBgColor } : {}),
+                    verticalAlign: 'bottom',
+                    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' },
+                    '& .Mui-TableHeadCell-ResizeHandle-Wrapper': {
+                        height: '100%',
+                        top: 0,
+                    },
+                    '& .Mui-TableHeadCell-ResizeHandle-Divider': {
+                        borderRight: 'none',
+                    },
+                    '& .Mui-TableHeadCell-Content': {
+                        alignItems: 'flex-end',
+                        justifyContent,
+                    },
+                    '& .Mui-TableHeadCell-Content-Labels': {
+                        flexWrap: 'wrap',
+                        whiteSpace: 'normal',
+                        overflowWrap: 'normal',
+                        lineHeight: 1.3,
+                        justifyContent,
+                    },
+                    '& .Mui-TableHeadCell-Content-Wrapper': {
+                        whiteSpace: 'normal',
+                        overflow: 'visible',
+                    },
+                },
+            };
+        },
+        muiTableBodyCellProps: {
+            sx: {
+                whiteSpace: 'nowrap',
+                borderRight: '1px solid rgba(224,224,224,1)',
+            },
+        },
+        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: {
+                        flexShrink: 0,
+                        textTransform: 'none',
+                        fontSize: 12,
+                        color: 'error.main',
+                        minWidth: 'auto',
+                        px: 1,
+                        '&:hover': { bgcolor: 'rgba(211,47,47,0.06)' },
+                    }, 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 })] }));
+}
+
+export { GenericPaginatedGrid as default };

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

@@ -0,0 +1,2 @@
+declare const InvoiceGrid: () => import("react/jsx-runtime").JSX.Element;
+export default InvoiceGrid;

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

@@ -0,0 +1,22 @@
+import type { MRT_ColumnDef } from 'material-react-table';
+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>[];

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

@@ -0,0 +1,3 @@
+export declare const formatDate: (dateString: string) => string;
+export declare const formatINR: (value: number) => string;
+export declare const formatNumber: (value: number, decimals?: number) => string;

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

@@ -0,0 +1,4 @@
+export { default as GenericPaginatedGrid } from './GenericPaginatedGrid';
+export type { GenericPaginatedGridProps, PagedResult } from './GenericPaginatedGrid';
+export { default as DynamicFilterBar } from './DynamicFilterBar';
+export type { ServerFilterDef } from './DynamicFilterBar';

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

@@ -0,0 +1,2 @@
+export { default as GenericPaginatedGrid } from './GenericPaginatedGrid.esm.js';
+export { default as DynamicFilterBar } from './DynamicFilterBar.esm.js';

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

@@ -0,0 +1,2 @@
+import type { InvoiceRequest, InvoiceApiResponse } from './types';
+export declare const fetchInvoiceDetails: (request: InvoiceRequest) => Promise<InvoiceApiResponse>;

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

@@ -0,0 +1,48 @@
+export interface InvoiceDetail {
+    Data_from: string;
+    FINYEAR: string;
+    Div_Code: string;
+    Depo_Code: string;
+    Customer: string;
+    category: string;
+    Dist_Chan: string;
+    InvoiceNo: number;
+    BillItem: string;
+    InvoiceDate: string;
+    Prod_ID: number;
+    Batch: string;
+    Allocated_Qty: number;
+    free_qty: number;
+    Nettrate: number;
+    fld_ed_diff: number;
+    disc_val: number;
+    Net_val: number;
+    Nett_ed_value: number;
+    Tax_amt_value: number;
+    Act_Division: string;
+    MRP: number;
+    Inv_time: string;
+    status: string;
+    createdate: string;
+    RetType: string;
+    Mkt_nett: number;
+    changeddate: string;
+    SHIP_TO_PARTY: string;
+}
+export interface InvoiceRequest {
+    FromDate: string;
+    ToDate: string;
+    Division: string;
+    Customer: string;
+    DC: string;
+    ProductCode: string;
+    PageNumber: number;
+}
+export interface InvoiceApiResponse {
+    PageNumber: number;
+    PageSize: number;
+    TotalRecords: number;
+    TotalPages: number;
+    HasNextPage: boolean;
+    Data: InvoiceDetail[];
+}

package/dist/index.d.ts

@@ -5,6 +5,8 @@ export { default as DeleteField } from './components/DeleteComponent/DeleteField
 export { default as SessionTimeoutField } from './components/SessionTimeOut/SessionTimeOut';
 export { default as useFormValidatingContext } from './components/Form/FormConstants';
 export { default as MultiSelectFieldComponent } from './components/SelectField/MultiSelectFieldComponent';
+export { default as GenericPaginatedGrid } from './components/PaginatedGrid/GenericPaginatedGrid';
+export { default as SearchableSelect } from './components/FormComponents/Select/SearchableSelect';
 export { TPElementsProvider } from './auth/authContext';
 export { calculateTotalArrayValueTotal, checkIsDateIsBefore, findMenuHierarchy, getDesiredDate, getFormattedDate, getInitials, getUsernameFromEmail, handleDownloadReactTableDataExcel, lightenColor, } from './utils';
 export * as Utils from './utils';

package/dist/index.esm.css

@@ -1 +1 @@
-.m-form__input .prestashop-switch.switch{display:block;height:30px;position:relative;width:160px}.m-form__input .prestashop-switch.switch.stactv{display:block;height:30px;position:relative;width:162px}.prestashop-switch.switch{background-color:#eee;border:1px solid #ccc;border-radius:50px;-webkit-box-shadow:inset 0 1px 4px 1px rgba(0,0,0,.15);-moz-box-shadow:inset 0 1px 4px 1px rgba(0,0,0,.15);box-shadow:inset 0 1px 4px 1px rgba(0,0,0,.15);color:#333;text-align:center}.prestashop-switch.switch *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.m-form__input .prestashop-switch.switch *{outline:0!important}.m-form__input .prestashop-switch.switch input[type=radio]{line-height:normal;margin:4px 0 0;opacity:0;position:absolute}.m-form__input .prestashop-switch.switch label,.m-form__input .prestashop-switch.switch>span{display:inline-block;line-height:30px;max-width:100%;vertical-align:middle}.m-form__input .prestashop-switch.switch label{color:#bbb;cursor:pointer;float:left;font-size:11px;font-weight:400;height:100%;margin:0;position:relative;text-align:center;text-transform:uppercase;-webkit-transition:color .2s ease-out;-o-transition:color .2s ease-out;transition:color .2s ease-out;width:50%;z-index:2}.m-form__input .prestashop-switch.switch input:checked+label{color:#fff}.m-form__input .prestashop-switch.switch .slide-button{background-color:green;border:1px solid green;border-radius:50px;-webkit-box-shadow:inset -1px 0 green;-moz-box-shadow:inset 0 -1px 0 green;box-shadow:inset 0 -1px 0 green;color:#fff;display:block;height:100%;left:0;padding:0;position:absolute;top:0;-webkit-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out;width:50%;z-index:1}.m-form__input{align-items:center;display:flex}.m-form__input .prestashop-switch.switch input:last-of-type:checked~.slide-button{background-color:#ec5c29;border:1px solid #fb561c;-webkit-box-shadow:inset 0 -1px 0 #fb561c;-moz-box-shadow:inset 0 -1px 0 #fb561c;box-shadow:inset 0 -1px 0 #fb561c;left:50%}#list-component{background-color:#fff;max-height:200px;overflow:auto!important}#list-component #MuiScrol-listbox{max-height:none!important;overflow:visible}.css-k2lwa0,.css-svpvcz-MuiFormLabel-root-MuiInputLabel-root{background:#fff;font-size:14px!important}.rdrCalendarWrapper{background:#fff;box-sizing:border-box;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{color:inherit;flex:1 1;text-align:center;width:0}.rdrDateDisplayItem+.rdrDateDisplayItem{margin-left:.833em}.rdrDateDisplayItem input{text-align:inherit}.rdrDateDisplayItem input:disabled{cursor:default}.rdrMonthAndYearWrapper{box-sizing:inherit;display:flex;justify-content:space-between}.rdrMonthAndYearPickers{align-items:center;display:flex;flex:1 1 auto;justify-content:center}.rdrNextPrevButton{box-sizing:inherit;cursor:pointer;outline:none}.rdrMonths{display:flex}.rdrMonthsVertical{flex-direction:column}.rdrMonthsHorizontal>div>div>div{display:flex;flex-direction:row}.rdrMonth{width:27.667em}.rdrWeekDays{display:flex}.rdrWeekDay{box-sizing:inherit;flex-basis:14.28571%;text-align:center}.rdrDays{display:flex;flex-wrap:wrap}.rdrInfiniteMonths{overflow:auto}.rdrDateRangeWrapper{-webkit-user-select:none;-moz-user-select:none;user-select:none}.rdrDateInput{position:relative}.rdrDateInput input{outline:none}.rdrDateInput .rdrWarning{color:red;font-size:1.6em;line-height:1.6em;position:absolute;right:.25em;top:0}.rdrDay{box-sizing:inherit;cursor:pointer;font:inherit;position:relative;width:14.28571%}.rdrDayNumber{display:block;position:relative}.rdrDayNumber span{color:#1d2429}.rdrDayDisabled{cursor:not-allowed}@supports (-ms-ime-align:auto){.rdrDay{flex-basis:14.285%!important}}.rdrEndEdge,.rdrInRange,.rdrSelected,.rdrStartEdge{pointer-events:none}.rdrDateRangePickerWrapper{display:inline-flex;-webkit-user-select:none;-moz-user-select:none;user-select:none}.rdrStaticRanges{display:flex;flex-direction:column}.rdrStaticRange{font-size:inherit}.rdrInputRange{display:flex}.rdrCalendarWrapper{color:#000;font-size:12px}.rdrDateDisplayWrapper{background-color:#eff2f7}.rdrDateDisplay{margin:.833em}.rdrDateDisplayItem{background-color:#fff;border:1px solid transparent;border-radius:4px;box-shadow:0 1px 2px 0 rgba(35,57,66,.21)}.rdrDateDisplayItem input{background:transparent;border:0;color:#849095;cursor:pointer;height:2.5em;line-height:2.5em;width:100%}.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;background:transparent;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;border:0;border-radius:4px;color:#3e484f;cursor:pointer;outline:0;padding:10px 30px 10px 10px;text-align:center}.rdrMonthAndYearPickers select:hover{background-color:rgba(0,0,0,.07)}.rdrMonthPicker,.rdrYearPicker{margin:0 5px}.rdrNextPrevButton{background:#eff2f7;border:0;border-radius:5px;display:block;height:24px;margin:0 .833em;padding:0;width:24px}.rdrNextPrevButton:hover{background:#e1e7f0}.rdrNextPrevButton i{border-style:solid;display:block;height:0;margin:auto;padding:0;text-align:center;transform:translate(-3px);width:0}.rdrPprevButton i{border-color:transparent #34495e transparent transparent;border-width:4px 6px 4px 4px;transform:translate(-3px)}.rdrNextButton i{border-color:transparent transparent transparent #34495e;border-width:4px 4px 4px 6px;margin:0 0 0 7px;transform:translate(3px)}.rdrWeekDays{padding:0 .833em}.rdrMonth{padding:0 .833em 1.666em}.rdrMonth .rdrWeekDays{padding:0}.rdrMonths.rdrMonthsVertical .rdrMonth:first-child .rdrMonthName{display:none}.rdrWeekDay{color:#849095;font-weight:400;line-height:2.667em}.rdrDay{background:transparent;border:0;color:#1d2429;height:3em;line-height:3em;padding:0;text-align:center;-webkit-user-select:none;-moz-user-select:none;user-select:none}.rdrDay:focus{outline:0}.rdrDayNumber{align-items:center;bottom:0;bottom:5px;display:flex;font-weight:300;justify-content:center;left:0;outline:0;position:absolute;right:0;top:0;top:5px}.rdrDayToday .rdrDayNumber span{font-weight:500}.rdrDayToday .rdrDayNumber span:after{background:#3d91ff;border-radius:2px;bottom:4px;content:"";height:2px;left:50%;position:absolute;transform:translate(-50%);width:18px}.rdrDayToday:not(.rdrDayPassive) .rdrEndEdge~.rdrDayNumber span:after,.rdrDayToday:not(.rdrDayPassive) .rdrInRange~.rdrDayNumber span:after,.rdrDayToday:not(.rdrDayPassive) .rdrSelected~.rdrDayNumber span:after,.rdrDayToday:not(.rdrDayPassive) .rdrStartEdge~.rdrDayNumber span:after{background:#fff}.rdrDay:not(.rdrDayPassive) .rdrEndEdge~.rdrDayNumber span,.rdrDay:not(.rdrDayPassive) .rdrInRange~.rdrDayNumber span,.rdrDay:not(.rdrDayPassive) .rdrSelected~.rdrDayNumber span,.rdrDay:not(.rdrDayPassive) .rdrStartEdge~.rdrDayNumber span{color:hsla(0,0%,100%,.85)}.rdrEndEdge,.rdrInRange,.rdrSelected,.rdrStartEdge{background:currentColor;bottom:5px;left:0;position:absolute;right:0;top:5px}.rdrSelected{left:2px;right:2px}.rdrStartEdge{border-bottom-left-radius:1.042em;border-top-left-radius:1.042em;left:2px}.rdrEndEdge{border-bottom-right-radius:1.042em;border-top-right-radius:1.042em;right:2px}.rdrSelected{border-radius:1.042em}.rdrDayStartOfMonth .rdrEndEdge,.rdrDayStartOfMonth .rdrInRange,.rdrDayStartOfWeek .rdrEndEdge,.rdrDayStartOfWeek .rdrInRange{border-bottom-left-radius:1.042em;border-top-left-radius:1.042em;left:2px}.rdrDayEndOfMonth .rdrInRange,.rdrDayEndOfMonth .rdrStartEdge,.rdrDayEndOfWeek .rdrInRange,.rdrDayEndOfWeek .rdrStartEdge{border-bottom-right-radius:1.042em;border-top-right-radius:1.042em;right:2px}.rdrDayStartOfMonth .rdrDayEndPreview,.rdrDayStartOfMonth .rdrDayInPreview,.rdrDayStartOfWeek .rdrDayEndPreview,.rdrDayStartOfWeek .rdrDayInPreview{border-bottom-left-radius:1.333em;border-left-width:1px;border-top-left-radius:1.333em;left:0}.rdrDayEndOfMonth .rdrDayInPreview,.rdrDayEndOfMonth .rdrDayStartPreview,.rdrDayEndOfWeek .rdrDayInPreview,.rdrDayEndOfWeek .rdrDayStartPreview{border-bottom-right-radius:1.333em;border-right-width:1px;border-top-right-radius:1.333em;right:0}.rdrDayEndPreview,.rdrDayInPreview,.rdrDayStartPreview{background:hsla(0,0%,100%,.09);border:0 solid;bottom:3px;left:0;pointer-events:none;position:absolute;right:0;top:3px;z-index:1}.rdrDayStartPreview{border-bottom-left-radius:1.333em;border-bottom-width:1px;border-left-width:1px;border-top-left-radius:1.333em;border-top-width:1px;left:0}.rdrDayInPreview{border-bottom-width:1px;border-top-width:1px}.rdrDayEndPreview{border-bottom-right-radius:1.333em;border-bottom-width:1px;border-right-width:1px;border-top-right-radius:1.333em;border-top-width:1px;right:2px;right:0}.rdrDefinedRangesWrapper{background:#fff;border-right:1px solid #eff2f7;font-size:12px;width:226px}.rdrDefinedRangesWrapper .rdrStaticRangeSelected{color:currentColor;font-weight:600}.rdrStaticRange{background:#fff;border:0;border-bottom:1px solid #eff2f7;cursor:pointer;display:block;outline:0;padding:0}.rdrStaticRange:focus .rdrStaticRangeLabel,.rdrStaticRange:hover .rdrStaticRangeLabel{background:#eff2f7}.rdrStaticRangeLabel{display:block;line-height:18px;outline:0;padding:10px 20px;text-align:left}.rdrInputRanges{padding:10px 0}.rdrInputRange{align-items:center;padding:5px 20px}.rdrInputRangeInput{border:1px solid #dee7eb;border-radius:4px;color:#6c767a;height:30px;line-height:30px;margin-right:10px;text-align:center;width:30px}.rdrInputRangeInput:focus,.rdrInputRangeInput:hover{border-color:#b4bfc4;color:#333;outline:0}.rdrCalendarWrapper:not(.rdrDateRangeWrapper) .rdrDayHovered .rdrDayNumber:after{background:transparent;border:1px solid;border-radius:1.333em;bottom:-2px;content:"";left:0;position:absolute;right:0;top:-2px}.rdrDayPassive{pointer-events:none}.rdrDayPassive .rdrDayNumber span{color:#d5dce0}.rdrDayPassive .rdrDayEndPreview,.rdrDayPassive .rdrDayInPreview,.rdrDayPassive .rdrDayStartPreview,.rdrDayPassive .rdrEndEdge,.rdrDayPassive .rdrInRange,.rdrDayPassive .rdrSelected,.rdrDayPassive .rdrStartEdge{display:none}.rdrDayDisabled{background-color:#f8f8f8}.rdrDayDisabled .rdrDayNumber span{color:#aeb9bf}.rdrDayDisabled .rdrDayEndPreview,.rdrDayDisabled .rdrDayInPreview,.rdrDayDisabled .rdrDayStartPreview,.rdrDayDisabled .rdrEndEdge,.rdrDayDisabled .rdrInRange,.rdrDayDisabled .rdrSelected,.rdrDayDisabled .rdrStartEdge{filter:grayscale(100%) opacity(60%)}.rdrMonthName{color:#849095;font-weight:600;padding:.833em;text-align:left}.rdrCalendarWrapper .rdrDay:not(.rdrDayPassive) .rdrEndEdge~.rdrDayNumber span,.rdrCalendarWrapper .rdrDay:not(.rdrDayPassive) .rdrInRange~.rdrDayNumber span,.rdrCalendarWrapper .rdrDay:not(.rdrDayPassive) .rdrSelected~.rdrDayNumber span,.rdrCalendarWrapper .rdrDay:not(.rdrDayPassive) .rdrStartEdge~.rdrDayNumber span{color:#fff!important}
+.m-form__input .prestashop-switch.switch{display:block;height:30px;position:relative;width:160px}.m-form__input .prestashop-switch.switch.stactv{display:block;height:30px;position:relative;width:162px}.prestashop-switch.switch{background-color:#eee;border:1px solid #ccc;border-radius:50px;-webkit-box-shadow:inset 0 1px 4px 1px rgba(0,0,0,.15);-moz-box-shadow:inset 0 1px 4px 1px rgba(0,0,0,.15);box-shadow:inset 0 1px 4px 1px rgba(0,0,0,.15);color:#333;text-align:center}.prestashop-switch.switch *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.m-form__input .prestashop-switch.switch *{outline:0!important}.m-form__input .prestashop-switch.switch input[type=radio]{line-height:normal;margin:4px 0 0;opacity:0;position:absolute}.m-form__input .prestashop-switch.switch label,.m-form__input .prestashop-switch.switch>span{display:inline-block;line-height:30px;max-width:100%;vertical-align:middle}.m-form__input .prestashop-switch.switch label{color:#bbb;cursor:pointer;float:left;font-size:11px;font-weight:400;height:100%;margin:0;position:relative;text-align:center;text-transform:uppercase;-webkit-transition:color .2s ease-out;-o-transition:color .2s ease-out;transition:color .2s ease-out;width:50%;z-index:2}.m-form__input .prestashop-switch.switch input:checked+label{color:#fff}.m-form__input .prestashop-switch.switch .slide-button{background-color:green;border:1px solid green;border-radius:50px;-webkit-box-shadow:inset -1px 0 green;-moz-box-shadow:inset 0 -1px 0 green;box-shadow:inset 0 -1px 0 green;color:#fff;display:block;height:100%;left:0;padding:0;position:absolute;top:0;-webkit-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out;width:50%;z-index:1}.m-form__input{align-items:center;display:flex}.m-form__input .prestashop-switch.switch input:last-of-type:checked~.slide-button{background-color:#ec5c29;border:1px solid #fb561c;-webkit-box-shadow:inset 0 -1px 0 #fb561c;-moz-box-shadow:inset 0 -1px 0 #fb561c;box-shadow:inset 0 -1px 0 #fb561c;left:50%}#list-component{background-color:#fff;max-height:200px;overflow:auto!important}#list-component #MuiScrol-listbox{max-height:none!important;overflow:visible}

package/dist/index.esm.js

@@ -5,6 +5,8 @@ export { default as DeleteField } from './components/DeleteComponent/DeleteField
 export { default as SessionTimeoutField } from './components/SessionTimeOut/SessionTimeOut.esm.js';
 export { default as useFormValidatingContext } from './components/Form/FormConstants.esm.js';
 export { default as MultiSelectFieldComponent } from './components/SelectField/MultiSelectFieldComponent.esm.js';
+export { default as GenericPaginatedGrid } from './components/PaginatedGrid/GenericPaginatedGrid.esm.js';
+export { default as SearchableSelect } from './components/FormComponents/Select/SearchableSelect.esm.js';
 export { TPElementsProvider } from './auth/authContext.esm.js';
 import * as index$1 from './utils/index.esm.js';
 export { index$1 as Utils };

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

@@ -1,4 +1,4 @@
-import { __exports as Calendar } from '../../../../../_virtual/index.esm5.js';
+import { __exports as Calendar } from '../../../../../_virtual/index.esm4.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/DateRange/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as DateRange } from '../../../../../_virtual/index.esm4.js';
+import { __exports as DateRange } from '../../../../../_virtual/index.esm5.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.esm7.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.esm7.js';
+import { __exports as DefinedRange } from '../../../../../_virtual/index.esm6.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/utils/Interface/FormInterface.d.ts

@@ -11,7 +11,7 @@ export interface TextFieldInputProps {
 export interface FormSectionPropsItem {
     name: string;
     label: string;
-    inputType: 'text' | 'password' | 'number' | 'select' | 'autocomplete-select' | 'autocomplete-multi-select' | 'single-select-search' | 'datepicker' | 'datetimepicker' | 'multiselect' | 'select-v2' | 'basic-select' | 'decimal' | 'alpha-numerical' | 'yearpicker' | 'dateRangePicker' | 'monthpicker' | 'multiselect' | 'file' | 'multifile' | 'multifile-with-preview' | 'textarea' | 'phoneNumber' | 'pincode' | 'email' | 'toggleSwitch' | 'rich-text-editor' | 'multiEmail' | 'timepicker' | 'checkbox-group' | 'radio-group' | 'checkbox' | 'custom' | 'input-select' | 'date-range-picker' | 'multiselect-table' | '';
+    inputType: 'text' | 'password' | 'number' | 'select' | 'autocomplete-select' | 'autocomplete-multi-select' | 'single-select-search' | 'datepicker' | 'datetimepicker' | 'multiselect' | 'select-v2' | 'basic-select' | 'searchable-select' | 'decimal' | 'alpha-numerical' | 'yearpicker' | 'dateRangePicker' | 'monthpicker' | 'multiselect' | 'file' | 'multifile' | 'multifile-with-preview' | 'textarea' | 'phoneNumber' | 'pincode' | 'email' | 'toggleSwitch' | 'rich-text-editor' | 'multiEmail' | 'timepicker' | 'checkbox-group' | 'radio-group' | 'checkbox' | 'custom' | 'input-select' | 'date-range-picker' | 'multiselect-table' | '';
     options?: OptionsProps[];
     required?: boolean;
     errorMessage?: string;

package/dist/utils/rdrStyles.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Call this hook at the top of any component that renders a `<DateRange />` calendar
+ * from `react-date-range`.  The styles are injected once into `document.head` and
+ * never removed (the injection is idempotent — safe to call from multiple components).
+ *
+ * @example
+ * const MyCalendarChip = () => {
+ *   useRdrStyles();
+ *   return <DateRange ... />;
+ * };
+ */
+export declare function useRdrStyles(): void;

package/dist/utils/rdrStyles.esm.js

@@ -0,0 +1,180 @@
+import { useEffect } from 'react';
+
+/**
+ * react-date-range CSS injected as a JavaScript string — NOT as a CSS import.
+ *
+ * WHY THIS FILE EXISTS
+ * --------------------
+ * Importing `react-date-range/dist/styles.css` and `theme/default.css` directly
+ * in the component source causes rollup-plugin-postcss (extract: true) to bundle
+ * those rules into the library's extracted `dist/index.css`.  When a consumer
+ * app imports that CSS file they get the react-date-range rules applied globally,
+ * which can interfere with the consumer's own MUI dropdowns and date-pickers.
+ *
+ * Instead we ship the CSS as a JavaScript string and inject a single <style> tag
+ * the first time any DateRange calendar is rendered.  This means:
+ *   • The CSS is NOT in the extracted CSS bundle.
+ *   • The CSS IS present at runtime (injected when the component mounts).
+ *   • The CSS only affects elements with react-date-range's own `.rdr*` class names,
+ *     so it cannot conflict with MUI or any other library.
+ *
+ * USAGE
+ * -----
+ * Call `useRdrStyles()` at the top of any component that renders <DateRange />.
+ * The injection is idempotent — subsequent calls are no-ops.
+ */
+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}
+`;
+/* ─── Singleton injection ─────────────────────────────────────────────────── */
+let _injected = false;
+function injectRdrStyles() {
+    if (_injected)
+        return;
+    if (typeof document === 'undefined')
+        return;
+    if (document.getElementById(STYLE_ID)) {
+        _injected = true;
+        return;
+    }
+    const style = document.createElement('style');
+    style.id = STYLE_ID;
+    style.textContent = RDR_CSS;
+    document.head.appendChild(style);
+    _injected = true;
+}
+/**
+ * Call this hook at the top of any component that renders a `<DateRange />` calendar
+ * from `react-date-range`.  The styles are injected once into `document.head` and
+ * never removed (the injection is idempotent — safe to call from multiple components).
+ *
+ * @example
+ * const MyCalendarChip = () => {
+ *   useRdrStyles();
+ *   return <DateRange ... />;
+ * };
+ */
+function useRdrStyles() {
+    useEffect(() => {
+        injectRdrStyles();
+    }, []);
+}
+
+export { useRdrStyles };