@coreui/react-pro 4.8.0 → 4.9.0-next.0

package/dist/index.js

@@ -3150,6 +3150,20 @@ var isInViewport = function (element) {
         Math.floor(rect.right) <= (window.innerWidth || document.documentElement.clientWidth));
 };
 
+var isObjectInArray = function (array, item, ignore) {
+    if (ignore === void 0) { ignore = []; }
+    return array.some(function (_item) {
+        var result = true;
+        for (var key in item) {
+            if (!ignore.includes(key) && item[key] !== _item[key]) {
+                result = false;
+                break;
+            }
+        }
+        return result;
+    });
+};
+
 var CCarouselContext = React$1.createContext({});
 var CCarousel = React$1.forwardRef(function (_a, ref) {
     var children = _a.children, _b = _a.activeIndex, activeIndex = _b === void 0 ? 0 : _b, className = _a.className, controls = _a.controls, dark = _a.dark, indicators = _a.indicators, _c = _a.interval, interval = _c === void 0 ? 5000 : _c, onSlid = _a.onSlid, onSlide = _a.onSlide, _d = _a.pause, pause = _d === void 0 ? 'hover' : _d, _e = _a.touch, touch = _e === void 0 ? true : _e, transition = _a.transition, _f = _a.wrap, wrap = _f === void 0 ? true : _f, rest = __rest$1(_a, ["children", "activeIndex", "className", "controls", "dark", "indicators", "interval", "onSlid", "onSlide", "pause", "touch", "transition", "wrap"]);
@@ -7025,40 +7039,145 @@ var isToday = function (date) {
         date.getFullYear() === today.getFullYear());
 };
 
+var Calendar = function (props) {
+    var addMonths = props.addMonths, calendarDate = props.calendarDate, dayFormat = props.dayFormat, disabledDates = props.disabledDates, endDate = props.endDate, firstDayOfWeek = props.firstDayOfWeek, hoverDate = props.hoverDate, locale = props.locale, maxDate = props.maxDate, minDate = props.minDate, onCellClick = props.onCellClick, onCellKeyDown = props.onCellKeyDown, onCellMouseEnter = props.onCellMouseEnter, onCellMouseLeave = props.onCellMouseLeave, onMonthClick = props.onMonthClick, onYearClick = props.onYearClick, selectEndDate = props.selectEndDate, startDate = props.startDate, view = props.view, weekdayFormat = props.weekdayFormat;
+    var _a = React$1.useState(calendarDate), date = _a[0], setDate = _a[1];
+    var _b = React$1.useState([]), listOfMonths = _b[0], setListOfMonths = _b[1];
+    React$1.useEffect(function () {
+        if (addMonths !== 0) {
+            setDate(new Date(calendarDate.getFullYear(), calendarDate.getMonth() + addMonths, 1));
+            return;
+        }
+        setDate(calendarDate);
+    }, [calendarDate]);
+    React$1.useEffect(function () {
+        setListOfMonths(createGroupsInArray(getMonthsNames(locale), 4));
+    }, []);
+    var monthDetails = getMonthDetails(date.getFullYear(), date.getMonth(), firstDayOfWeek);
+    var listOfYears = createGroupsInArray(getYears(date.getFullYear()), 4);
+    var weekDays = monthDetails[0];
+    return (React$1.createElement("table", null,
+        view === 'days' && (React$1.createElement("thead", null,
+            React$1.createElement("tr", null, weekDays.map(function (_a, idx) {
+                var date = _a.date;
+                return (React$1.createElement("th", { key: idx, className: "calendar-cell" },
+                    React$1.createElement("div", { className: "calendar-header-cell-inner" }, typeof weekdayFormat === 'function'
+                        ? weekdayFormat(date)
+                        : typeof weekdayFormat === 'string'
+                            ? date.toLocaleDateString(locale, { weekday: weekdayFormat })
+                            : date.toLocaleDateString(locale, { weekday: 'long' }).slice(0, weekdayFormat))));
+            })))),
+        React$1.createElement("tbody", null,
+            view === 'days' &&
+                monthDetails.map(function (week, index) {
+                    return (React$1.createElement("tr", { key: index }, week.map(function (_a, idx) {
+                        var _b;
+                        var date = _a.date, month = _a.month;
+                        return (React$1.createElement("td", __assign$1({ className: classNames$1('calendar-cell', (_b = {
+                                    today: month === 'current' && isToday(date),
+                                    disabled: isDateDisabled(date, minDate, maxDate, disabledDates)
+                                },
+                                _b[month] = true,
+                                _b.last = isLastDayOfMonth(date),
+                                _b['range-hover'] = month === 'current' &&
+                                    (hoverDate && selectEndDate
+                                        ? isDateInRange(date, startDate, hoverDate)
+                                        : isDateInRange(date, hoverDate, endDate)),
+                                _b.range = month === 'current' && isDateInRange(date, startDate, endDate),
+                                _b.selected = isDateSelected(date, startDate, endDate),
+                                _b.start = isStartDate(date, startDate, endDate),
+                                _b.end = isEndDate(date, startDate, endDate),
+                                _b)), key: idx, tabIndex: 0, title: date.toLocaleDateString(locale) }, (month === 'current' && {
+                            onBlur: function () { return onCellMouseLeave(); },
+                            onClick: function () { return onCellClick(date); },
+                            onFocus: function () { return onCellMouseEnter(date); },
+                            onKeyDown: function (event) { return onCellKeyDown(event, date); },
+                            onMouseEnter: function () { return onCellMouseEnter(date); },
+                            onMouseLeave: function () { return onCellMouseLeave(); },
+                        }), (month !== 'current' && {
+                            onMouseEnter: function () { return onCellMouseLeave(); },
+                        })),
+                            React$1.createElement("div", { className: "calendar-cell-inner" }, typeof dayFormat === 'function'
+                                ? dayFormat(date)
+                                : date.toLocaleDateString(locale, { day: dayFormat }))));
+                    })));
+                }),
+            view === 'months' &&
+                listOfMonths.map(function (row, index) {
+                    return (React$1.createElement("tr", { key: index }, row.map(function (month, idx) {
+                        return (React$1.createElement("td", { key: idx, className: "calendar-cell month", onClick: function () { return onMonthClick(index * 3 + idx - addMonths, 'days'); } },
+                            React$1.createElement("div", { className: "calendar-cell-inner" }, month)));
+                    })));
+                }),
+            view === 'years' &&
+                listOfYears.map(function (row, index) {
+                    return (React$1.createElement("tr", { key: index }, row.map(function (year, idx) {
+                        return (React$1.createElement("td", { key: idx, className: "calendar-cell year", onClick: function () {
+                                return onYearClick(new Date(year, date.getMonth() - addMonths, date.getDate()), 'months');
+                            } },
+                            React$1.createElement("div", { className: "calendar-cell-inner" }, new Date(year, 0, 1).toLocaleDateString(locale, { year: 'numeric' }))));
+                    })));
+                }))));
+};
+var Navigation = function (props) {
+    var addMonths = props.addMonths, calendarDate = props.calendarDate, locale = props.locale, navigation = props.navigation, navNextDoubleIcon = props.navNextDoubleIcon, navNextIcon = props.navNextIcon, navPrevDoubleIcon = props.navPrevDoubleIcon, navPrevIcon = props.navPrevIcon, navYearFirst = props.navYearFirst, onMonthClick = props.onMonthClick, onNavigationClick = props.onNavigationClick, onYearClick = props.onYearClick, view = props.view;
+    var _a = React$1.useState(), date = _a[0], setDate = _a[1];
+    React$1.useEffect(function () {
+        if (addMonths !== 0) {
+            setDate(new Date(calendarDate.getFullYear(), calendarDate.getMonth() + addMonths, 1));
+            return;
+        }
+        setDate(calendarDate);
+    }, [calendarDate]);
+    return (React$1.createElement("div", { className: "calendar-nav" },
+        navigation && (React$1.createElement("div", { className: "calendar-nav-prev" },
+            React$1.createElement(CButton, { color: "transparent", size: "sm", onClick: function () { return onNavigationClick('prev', true); } }, navPrevDoubleIcon ? (navPrevDoubleIcon) : (React$1.createElement("span", { className: "calendar-nav-icon calendar-nav-icon-double-prev" }))),
+            view === 'days' && (React$1.createElement(CButton, { color: "transparent", size: "sm", onClick: function () { return onNavigationClick('prev'); } }, navPrevIcon ? (navPrevIcon) : (React$1.createElement("span", { className: "calendar-nav-icon calendar-nav-icon-prev" })))))),
+        React$1.createElement("div", __assign$1({ className: "calendar-nav-date" }, (navYearFirst && { style: { display: 'flex', justifyContent: 'center' } })),
+            view === 'days' && (React$1.createElement(CButton, { color: "transparent", size: "sm", onClick: function () { return navigation && onMonthClick(); } }, date && date.toLocaleDateString(locale, { month: 'long' }))),
+            React$1.createElement(CButton, __assign$1({ color: "transparent", size: "sm", onClick: function () { return navigation && onYearClick(); } }, (navYearFirst && { style: { order: '-1' } })), date && date.toLocaleDateString(locale, { year: 'numeric' }))),
+        navigation && (React$1.createElement("div", { className: "calendar-nav-next" },
+            view === 'days' && (React$1.createElement(CButton, { color: "transparent", size: "sm", onClick: function () { return onNavigationClick('next'); } }, navNextIcon ? (navNextIcon) : (React$1.createElement("span", { className: "calendar-nav-icon calendar-nav-icon-next" })))),
+            React$1.createElement(CButton, { color: "transparent", size: "sm", onClick: function () { return onNavigationClick('next', true); } }, navNextDoubleIcon ? (navNextDoubleIcon) : (React$1.createElement("span", { className: "calendar-nav-icon calendar-nav-icon-double-next" })))))));
+};
 var CCalendar = React$1.forwardRef(function (_a, ref) {
-    var calendarDate = _a.calendarDate, _b = _a.calendars, calendars = _b === void 0 ? 1 : _b, className = _a.className, _c = _a.dayFormat, dayFormat = _c === void 0 ? 'numeric' : _c, disabledDates = _a.disabledDates, endDate = _a.endDate, _d = _a.firstDayOfWeek, firstDayOfWeek = _d === void 0 ? 1 : _d, _e = _a.locale, locale = _e === void 0 ? 'default' : _e, maxDate = _a.maxDate, minDate = _a.minDate, _f = _a.navigation, navigation = _f === void 0 ? true : _f, navNextIcon = _a.navNextIcon, navNextDoubleIcon = _a.navNextDoubleIcon, navPrevIcon = _a.navPrevIcon, navPrevDoubleIcon = _a.navPrevDoubleIcon, navYearFirst = _a.navYearFirst, range = _a.range, selectEndDate = _a.selectEndDate, startDate = _a.startDate, _g = _a.weekdayFormat, weekdayFormat = _g === void 0 ? 2 : _g, onCalendarCellHover = _a.onCalendarCellHover, onCalendarDateChange = _a.onCalendarDateChange, onEndDateChange = _a.onEndDateChange, onStartDateChange = _a.onStartDateChange, onSelectEndChange = _a.onSelectEndChange, onViewChanged = _a.onViewChanged;
+    var startDate = _a.startDate, endDate = _a.endDate, _b = _a.calendarDate, calendarDate = _b === void 0 ? startDate || endDate || null : _b, _c = _a.calendars, calendars = _c === void 0 ? 1 : _c, className = _a.className, _d = _a.dayFormat, dayFormat = _d === void 0 ? 'numeric' : _d, disabledDates = _a.disabledDates, _e = _a.firstDayOfWeek, firstDayOfWeek = _e === void 0 ? 1 : _e, _f = _a.locale, locale = _f === void 0 ? 'default' : _f, maxDate = _a.maxDate, minDate = _a.minDate, _g = _a.navigation, navigation = _g === void 0 ? true : _g, navNextIcon = _a.navNextIcon, navNextDoubleIcon = _a.navNextDoubleIcon, navPrevIcon = _a.navPrevIcon, navPrevDoubleIcon = _a.navPrevDoubleIcon, navYearFirst = _a.navYearFirst, range = _a.range, selectEndDate = _a.selectEndDate, _h = _a.weekdayFormat, weekdayFormat = _h === void 0 ? 2 : _h, onCalendarCellHover = _a.onCalendarCellHover, onCalendarDateChange = _a.onCalendarDateChange, onEndDateChange = _a.onEndDateChange, onStartDateChange = _a.onStartDateChange, onSelectEndChange = _a.onSelectEndChange, onViewChanged = _a.onViewChanged;
     var isInitialMount = React$1.useRef(true);
-    var _h = React$1.useState(calendarDate ? new Date(calendarDate) : startDate ? new Date(startDate) : new Date()), _calendarDate = _h[0], setCalendarDate = _h[1];
+    var _j = React$1.useState(null), _calendarDate = _j[0], setCalendarDate = _j[1];
     React$1.useEffect(function () {
+        if (calendarDate === null) {
+            setCalendarDate(new Date());
+            return;
+        }
         if (calendarDate) {
-            var d = new Date(calendarDate);
-            !isSameDateAs(_calendarDate, d) && setCalendarDate(d);
+            var date = new Date(calendarDate);
+            !isSameDateAs(_calendarDate, date) && setCalendarDate(date);
         }
     }, [calendarDate]);
-    var _j = useStateWithCallback(startDate ? new Date(startDate) : null, onStartDateChange, !isInitialMount.current), _startDate = _j[0], setStartDate = _j[1];
+    var _k = useStateWithCallback(startDate ? new Date(startDate) : null, onStartDateChange, !isInitialMount.current), _startDate = _k[0], setStartDate = _k[1];
     React$1.useEffect(function () {
         var date = startDate ? new Date(startDate) : null;
         if (!isSameDateAs(date, _startDate)) {
             setStartDate(date);
         }
     }, [startDate]);
-    var _k = useStateWithCallback(endDate ? new Date(endDate) : null, onEndDateChange, !isInitialMount.current), _endDate = _k[0], setEndDate = _k[1];
+    var _l = useStateWithCallback(endDate ? new Date(endDate) : null, onEndDateChange, !isInitialMount.current), _endDate = _l[0], setEndDate = _l[1];
     React$1.useEffect(function () {
         var date = endDate ? new Date(endDate) : null;
         if (!isSameDateAs(date, _endDate)) {
             setEndDate(date);
         }
     }, [endDate]);
-    var _l = React$1.useState(null), _hoverDate = _l[0], setHoverDate = _l[1];
-    var _m = React$1.useState(maxDate ? new Date(maxDate) : null), _maxDate = _m[0], setMaxDate = _m[1];
+    var _m = React$1.useState(null), _hoverDate = _m[0], setHoverDate = _m[1];
+    var _o = React$1.useState(maxDate ? new Date(maxDate) : null), _maxDate = _o[0], setMaxDate = _o[1];
     React$1.useEffect(function () {
         maxDate && setMaxDate(new Date(maxDate));
     }, [maxDate]);
-    var _o = React$1.useState(minDate ? new Date(minDate) : null), _minDate = _o[0], setMinDate = _o[1];
+    var _p = React$1.useState(minDate ? new Date(minDate) : null), _minDate = _p[0], setMinDate = _p[1];
     React$1.useEffect(function () {
         minDate && setMinDate(new Date(minDate));
     }, [minDate]);
-    var _p = useStateWithCallback(selectEndDate, onSelectEndChange), _selectEndDate = _p[0], setSelectEndDate = _p[1];
+    var _q = useStateWithCallback(selectEndDate, onSelectEndChange), _selectEndDate = _q[0], setSelectEndDate = _q[1];
     React$1.useEffect(function () {
         setSelectEndDate(selectEndDate);
     }, [selectEndDate]);
@@ -7068,12 +7187,15 @@ var CCalendar = React$1.forwardRef(function (_a, ref) {
             onSelectEndChange &&
             onSelectEndChange(_selectEndDate);
     }, [_selectEndDate]);
-    var _q = useStateWithCallback('days', onViewChanged), view = _q[0], setView = _q[1];
+    var _r = useStateWithCallback('days', onViewChanged), view = _r[0], setView = _r[1];
     React$1.useEffect(function () {
         isInitialMount.current = false;
     }, []);
     var setCalendarPage = function (years, months, setMonth) {
         if (months === void 0) { months = 0; }
+        if (_calendarDate === null) {
+            return;
+        }
         var year = _calendarDate.getFullYear();
         var month = _calendarDate.getMonth();
         var d = new Date(year, month, 1);
@@ -7164,105 +7286,16 @@ var CCalendar = React$1.forwardRef(function (_a, ref) {
             return;
         }
     };
-    var Calendar = function (props) {
-        var addMonths = props.addMonths;
-        var date = _calendarDate;
-        if (addMonths !== 0) {
-            date = new Date(_calendarDate.getFullYear(), _calendarDate.getMonth() + addMonths, 1);
-        }
-        var monthDetails = getMonthDetails(date.getFullYear(), date.getMonth(), firstDayOfWeek);
-        var listOfMonths = createGroupsInArray(getMonthsNames(locale), 4);
-        var listOfYears = createGroupsInArray(getYears(date.getFullYear()), 4);
-        var weekDays = monthDetails[0];
-        return (React$1.createElement("table", null,
-            view === 'days' && (React$1.createElement("thead", null,
-                React$1.createElement("tr", null, weekDays.map(function (_a, idx) {
-                    var date = _a.date;
-                    return (React$1.createElement("th", { key: idx, className: "calendar-cell" },
-                        React$1.createElement("div", { className: "calendar-header-cell-inner" }, typeof weekdayFormat === 'function'
-                            ? weekdayFormat(date)
-                            : typeof weekdayFormat === 'string'
-                                ? date.toLocaleDateString(locale, { weekday: weekdayFormat })
-                                : date
-                                    .toLocaleDateString(locale, { weekday: 'long' })
-                                    .slice(0, weekdayFormat))));
-                })))),
-            React$1.createElement("tbody", null,
-                view === 'days' &&
-                    monthDetails.map(function (week, index) {
-                        return (React$1.createElement("tr", { key: index }, week.map(function (_a, idx) {
-                            var _b;
-                            var date = _a.date, month = _a.month;
-                            return (React$1.createElement("td", __assign$1({ className: classNames$1('calendar-cell', (_b = {
-                                        today: month === 'current' && isToday(date),
-                                        disabled: isDateDisabled(date, _minDate, _maxDate, disabledDates)
-                                    },
-                                    _b[month] = true,
-                                    _b.last = isLastDayOfMonth(date),
-                                    _b['range-hover'] = month === 'current' &&
-                                        (_hoverDate && _selectEndDate
-                                            ? isDateInRange(date, _startDate, _hoverDate)
-                                            : isDateInRange(date, _hoverDate, _endDate)),
-                                    _b.range = month === 'current' && isDateInRange(date, _startDate, _endDate),
-                                    _b.selected = isDateSelected(date, _startDate, _endDate),
-                                    _b.start = isStartDate(date, _startDate, _endDate),
-                                    _b.end = isEndDate(date, _startDate, _endDate),
-                                    _b)), key: idx, tabIndex: 0, title: date.toLocaleDateString(locale) }, (month === 'current' && {
-                                onBlur: function () { return handleCellMouseLeave(); },
-                                onClick: function () { return handleCellOnClick(date); },
-                                onFocus: function () { return handleCellMouseEnter(date); },
-                                onKeyDown: function (event) { return handleCellKeyDown(event, date); },
-                                onMouseEnter: function () { return handleCellMouseEnter(date); },
-                                onMouseLeave: function () { return handleCellMouseLeave(); },
-                            }), (month !== 'current' && {
-                                onMouseEnter: function () { return handleCellMouseLeave(); },
-                            })),
-                                React$1.createElement("div", { className: "calendar-cell-inner" }, typeof dayFormat === 'function'
-                                    ? dayFormat(date)
-                                    : date.toLocaleDateString(locale, { day: dayFormat }))));
-                        })));
-                    }),
-                view === 'months' &&
-                    listOfMonths.map(function (row, index) {
-                        return (React$1.createElement("tr", { key: index }, row.map(function (month, idx) {
-                            return (React$1.createElement("td", { key: idx, className: "calendar-cell month", onClick: function () {
-                                    setCalendarPage(0, 0, index * 3 + idx - addMonths);
-                                    setView('days');
-                                } },
-                                React$1.createElement("div", { className: "calendar-cell-inner" }, month)));
-                        })));
-                    }),
-                view === 'years' &&
-                    listOfYears.map(function (row, index) {
-                        return (React$1.createElement("tr", { key: index }, row.map(function (year, idx) {
-                            return (React$1.createElement("td", { key: idx, className: "calendar-cell year", onClick: function () {
-                                    setCalendarDate(new Date(year, date.getMonth() - addMonths, date.getDate()));
-                                    setView('months');
-                                } },
-                                React$1.createElement("div", { className: "calendar-cell-inner" }, new Date(year, 0, 1).toLocaleDateString(locale, { year: 'numeric' }))));
-                        })));
-                    }))));
-    };
-    var Navigation = function (props) {
-        var addMonths = props.addMonths;
-        var date = _calendarDate;
-        if (addMonths !== 0) {
-            date = new Date(_calendarDate.getFullYear(), _calendarDate.getMonth() + addMonths, 1);
-        }
-        return (React$1.createElement("div", { className: "calendar-nav" },
-            navigation && (React$1.createElement("div", { className: "calendar-nav-prev" },
-                React$1.createElement(CButton, { color: "transparent", size: "sm", onClick: function () { return handleNavigationOnClick('prev', true); } }, navPrevDoubleIcon ? (navPrevDoubleIcon) : (React$1.createElement("span", { className: "calendar-nav-icon calendar-nav-icon-double-prev" }))),
-                view === 'days' && (React$1.createElement(CButton, { color: "transparent", size: "sm", onClick: function () { return handleNavigationOnClick('prev'); } }, navPrevIcon ? (navPrevIcon) : (React$1.createElement("span", { className: "calendar-nav-icon calendar-nav-icon-prev" })))))),
-            React$1.createElement("div", __assign$1({ className: "calendar-nav-date" }, (navYearFirst && { style: { display: 'flex', justifyContent: 'center' } })),
-                view === 'days' && (React$1.createElement(CButton, { color: "transparent", size: "sm", onClick: function () { return navigation && setView('months'); } }, date.toLocaleDateString(locale, { month: 'long' }))),
-                React$1.createElement(CButton, __assign$1({ color: "transparent", size: "sm", onClick: function () { return navigation && setView('years'); } }, (navYearFirst && { style: { order: '-1' } })), date.toLocaleDateString(locale, { year: 'numeric' }))),
-            navigation && (React$1.createElement("div", { className: "calendar-nav-next" },
-                view === 'days' && (React$1.createElement(CButton, { color: "transparent", size: "sm", onClick: function () { return handleNavigationOnClick('next'); } }, navNextIcon ? (navNextIcon) : (React$1.createElement("span", { className: "calendar-nav-icon calendar-nav-icon-next" })))),
-                React$1.createElement(CButton, { color: "transparent", size: "sm", onClick: function () { return handleNavigationOnClick('next', true); } }, navNextDoubleIcon ? (navNextDoubleIcon) : (React$1.createElement("span", { className: "calendar-nav-icon calendar-nav-icon-double-next" })))))));
-    };
-    return (React$1.createElement("div", { className: classNames$1('calendars', className) }, Array.from({ length: calendars }, function (_, index) { return (React$1.createElement("div", { className: classNames$1('calendar', view), key: index, ref: ref },
-        Navigation({ addMonths: index }),
-        Calendar({ addMonths: index }))); })));
+    return (React$1.createElement("div", { className: classNames$1('calendars', className) }, _calendarDate &&
+        Array.from({ length: calendars }, function (_, index) { return (React$1.createElement("div", { className: classNames$1('calendar', view), key: index, ref: ref },
+            React$1.createElement(Navigation, { addMonths: index, calendarDate: _calendarDate, locale: locale, navigation: navigation, navNextDoubleIcon: navNextDoubleIcon, navNextIcon: navNextIcon, navPrevDoubleIcon: navPrevDoubleIcon, navPrevIcon: navPrevIcon, navYearFirst: navYearFirst, onMonthClick: function () { return setView('months'); }, onNavigationClick: handleNavigationOnClick, onYearClick: function () { return setView('years'); }, view: view }),
+            React$1.createElement(Calendar, { addMonths: index, calendarDate: _calendarDate, dayFormat: dayFormat, disabledDates: disabledDates, endDate: _endDate, firstDayOfWeek: firstDayOfWeek, hoverDate: _hoverDate, locale: locale, maxDate: _maxDate, minDate: _minDate, onCellClick: handleCellOnClick, onCellKeyDown: handleCellKeyDown, onCellMouseEnter: handleCellMouseEnter, onCellMouseLeave: handleCellMouseLeave, onMonthClick: function (month, view) {
+                    setCalendarPage(0, 0, month);
+                    setView(view);
+                }, onYearClick: function (date, view) {
+                    setCalendarDate(date);
+                    setView(view);
+                }, selectEndDate: _selectEndDate, startDate: _startDate, view: view, weekdayFormat: weekdayFormat }))); })));
 });
 CCalendar.propTypes = {
     className: propTypesExports.string,
@@ -10307,46 +10340,34 @@ var getAmPm = function (date, locale) {
     }
     return date.getHours() >= 12 ? 'pm' : 'am';
 };
-var getListOfHours = function (locale, ampm) {
+var getLocalizedTimePartials = function (locale, ampm) {
     if (ampm === void 0) { ampm = 'auto'; }
-    return Array.from({ length: (ampm === 'auto' && isAmPm(locale)) || ampm === true ? 12 : 24 }, function (_, i) {
-        return {
-            value: (ampm === 'auto' && isAmPm(locale)) || ampm === true ? i + 1 : i,
-            label: ((ampm === 'auto' && isAmPm(locale)) || ampm === true ? i + 1 : i).toLocaleString(locale),
-        };
-    });
-};
-var getListOfMinutes = function (locale, valueAsString) {
-    if (valueAsString === void 0) { valueAsString = false; }
-    return Array.from({ length: 60 }, function (_, i) {
-        var d = new Date();
-        d.setMinutes(i);
+    var date = new Date();
+    var hour12 = ['am', 'AM', 'pm', 'PM'].some(function (el) { return date.toLocaleString(locale).includes(el); });
+    var listOfHours = Array.from({ length: (ampm === 'auto' && hour12) || ampm === true ? 12 : 24 }, function (_, i) {
         return {
-            value: valueAsString ? i.toString() : i,
-            label: d
-                .toLocaleTimeString(locale, {
-                minute: '2-digit',
-                second: '2-digit',
-            })
-                .split(/[^A-Za-z0-9]/)[0],
+            value: (ampm === 'auto' && hour12) || ampm === true ? i + 1 : i,
+            label: ((ampm === 'auto' && hour12) || ampm === true ? i + 1 : i).toLocaleString(locale),
         };
     });
-};
-var getListOfSeconds = function (locale, valueAsString) {
-    if (valueAsString === void 0) { valueAsString = false; }
-    return Array.from({ length: 60 }, function (_, i) {
-        var d = new Date();
-        d.setSeconds(i);
+    var listOfMinutesSeconds = Array.from({ length: 60 }, function (_, i) {
+        date.setMinutes(i);
         return {
-            value: valueAsString ? i.toString() : i,
-            label: d
+            value: i,
+            label: date
                 .toLocaleTimeString(locale, {
                 minute: '2-digit',
                 second: '2-digit',
             })
-                .split(/[^A-Za-z0-9]/)[1],
+                .split(/[^A-Za-z0-9\u06F0-\u06F90-9]/)[0],
         };
     });
+    return {
+        listOfHours: listOfHours,
+        listOfMinutes: listOfMinutesSeconds,
+        listOfSeconds: listOfMinutesSeconds,
+        hour12: hour12,
+    };
 };
 var getSelectedHour = function (date, locale, ampm) {
     if (ampm === void 0) { ampm = 'auto'; }
@@ -10374,13 +10395,22 @@ var CTimePicker = React$1.forwardRef(function (_a, ref) {
     var _o = React$1.useState(null), initialDate = _o[0], setInitialDate = _o[1];
     var _p = React$1.useState(date ? getAmPm(new Date(date), locale) : 'am'), _ampm = _p[0], setAmPm = _p[1];
     var _q = React$1.useState(visible), _visible = _q[0], setVisible = _q[1];
+    var _r = React$1.useState({
+        listOfHours: [],
+        listOfMinutes: [],
+        listOfSeconds: [],
+        hour12: false,
+    }), localizedTimePartials = _r[0], setLocalizedTimePartials = _r[1];
+    React$1.useEffect(function () {
+        setLocalizedTimePartials(getLocalizedTimePartials(locale, ampm));
+    }, [date]);
     React$1.useEffect(function () {
         setDate(convertTimeToDate(time));
     }, [time]);
     React$1.useEffect(function () {
         if (inputRef.current) {
             inputRef.current.value = date
-                ? date.toLocaleTimeString(locale, __assign$1({ hour12: (ampm === 'auto' && isAmPm(locale)) || (typeof ampm === 'boolean' && ampm) }, (!seconds && { timeStyle: 'short' })))
+                ? date.toLocaleTimeString(locale, __assign$1({ hour12: localizedTimePartials && localizedTimePartials.hour12 }, (!seconds && { timeStyle: 'short' })))
                 : '';
         }
         date && setAmPm(getAmPm(new Date(date), locale));
@@ -10401,7 +10431,7 @@ var CTimePicker = React$1.forwardRef(function (_a, ref) {
             }
         }
         if (set === 'hours') {
-            if ((ampm === 'auto' && isAmPm(locale)) || ampm === true) {
+            if (localizedTimePartials && localizedTimePartials.hour12) {
                 _date.setHours(convert12hTo24h(_ampm, parseInt(value)));
             }
             else {
@@ -10425,30 +10455,40 @@ var CTimePicker = React$1.forwardRef(function (_a, ref) {
             indicator && (React$1.createElement("span", { className: "picker-input-group-indicator" }, typeof indicator === 'boolean' ? (React$1.createElement("span", { className: "picker-input-group-icon time-picker-input-icon" })) : (indicator))),
             cleaner && date && (React$1.createElement("span", { className: "picker-input-group-cleaner", role: "button", onClick: function (event) { return handleClear(event); } }, typeof cleaner === 'boolean' ? (React$1.createElement("span", { className: "picker-input-group-icon time-picker-cleaner-icon" })) : (cleaner))))))); };
     var TimePickerSelect = function () {
+        var _a;
         return (React$1.createElement(React$1.Fragment, null,
             React$1.createElement("span", { className: "time-picker-inline-icon" }),
-            React$1.createElement(CFormSelect, { disabled: disabled, options: getListOfHours(locale).map(function (option) {
-                    return {
-                        value: option.value.toString(),
-                        label: option.label,
-                    };
-                }), onChange: function (event) {
+            React$1.createElement(CFormSelect, { disabled: disabled, options: localizedTimePartials &&
+                    ((_a = localizedTimePartials.listOfHours) === null || _a === void 0 ? void 0 : _a.map(function (option) {
+                        return {
+                            value: option.value.toString(),
+                            label: option.label,
+                        };
+                    })), onChange: function (event) {
                     return handleTimeChange('hours', event.target.value);
                 }, value: getSelectedHour(date, locale) }),
             React$1.createElement(React$1.Fragment, null, ":"),
-            React$1.createElement(CFormSelect, { disabled: disabled, 
-                // @ts-expect-error the getListOfMinutes function returns corect type
-                options: getListOfMinutes(locale, true), onChange: function (event) {
+            React$1.createElement(CFormSelect, { disabled: disabled, options: localizedTimePartials &&
+                    localizedTimePartials.listOfMinutes.map(function (option) {
+                        return {
+                            value: option.value.toString(),
+                            label: option.label,
+                        };
+                    }), onChange: function (event) {
                     return handleTimeChange('minutes', event.target.value);
                 }, value: getSelectedMinutes(date) }),
             seconds && (React$1.createElement(React$1.Fragment, null,
                 React$1.createElement(React$1.Fragment, null, ":"),
-                React$1.createElement(CFormSelect, { disabled: disabled, 
-                    // @ts-expect-error the getListOfSeconds function returns corect type
-                    options: getListOfSeconds(locale, true), onChange: function (event) {
+                React$1.createElement(CFormSelect, { disabled: disabled, options: localizedTimePartials &&
+                        localizedTimePartials.listOfSeconds.map(function (option) {
+                            return {
+                                value: option.value.toString(),
+                                label: option.label,
+                            };
+                        }), onChange: function (event) {
                         return handleTimeChange('seconds', event.target.value);
                     }, value: getSelectedSeconds(date) }))),
-            isAmPm(locale) && (React$1.createElement(CFormSelect, { disabled: disabled, options: [
+            localizedTimePartials && localizedTimePartials.hour12 && (React$1.createElement(CFormSelect, { disabled: disabled, options: [
                     { value: 'am', label: 'AM' },
                     { value: 'pm', label: 'PM' },
                 ], onChange: function (event) {
@@ -10456,10 +10496,10 @@ var CTimePicker = React$1.forwardRef(function (_a, ref) {
                 }, value: _ampm }))));
     };
     var TimePickerRoll = function () { return (React$1.createElement(React$1.Fragment, null,
-        React$1.createElement(CTimePickerRollCol, { elements: getListOfHours(locale, ampm), onClick: function (index) { return handleTimeChange('hours', index.toString()); }, selected: getSelectedHour(date, locale, ampm) }),
-        React$1.createElement(CTimePickerRollCol, { elements: getListOfMinutes(locale), onClick: function (index) { return handleTimeChange('minutes', index.toString()); }, selected: getSelectedMinutes(date) }),
-        seconds && (React$1.createElement(CTimePickerRollCol, { elements: getListOfSeconds(locale), onClick: function (index) { return handleTimeChange('seconds', index.toString()); }, selected: getSelectedSeconds(date) })),
-        ((ampm === 'auto' && isAmPm(locale)) || ampm === true) && (React$1.createElement(CTimePickerRollCol, { elements: [
+        React$1.createElement(CTimePickerRollCol, { elements: localizedTimePartials && localizedTimePartials.listOfHours, onClick: function (index) { return handleTimeChange('hours', index.toString()); }, selected: getSelectedHour(date, locale, ampm) }),
+        React$1.createElement(CTimePickerRollCol, { elements: localizedTimePartials && localizedTimePartials.listOfMinutes, onClick: function (index) { return handleTimeChange('minutes', index.toString()); }, selected: getSelectedMinutes(date) }),
+        seconds && (React$1.createElement(CTimePickerRollCol, { elements: localizedTimePartials && localizedTimePartials.listOfSeconds, onClick: function (index) { return handleTimeChange('seconds', index.toString()); }, selected: getSelectedSeconds(date) })),
+        localizedTimePartials && localizedTimePartials.hour12 && (React$1.createElement(CTimePickerRollCol, { elements: [
                 { value: 'am', label: 'AM' },
                 { value: 'pm', label: 'PM' },
             ], onClick: function (value) { return handleTimeChange('toggle', value); }, selected: _ampm })))); };
@@ -10708,6 +10748,73 @@ CDropdownItemPlain.propTypes = {
 };
 CDropdownItemPlain.displayName = 'CDropdownItemPlain';
 
+var CSpinner = React$1.forwardRef(function (_a, ref) {
+    var className = _a.className, color = _a.color, _b = _a.component, Component = _b === void 0 ? 'div' : _b, size = _a.size, _c = _a.variant, variant = _c === void 0 ? 'border' : _c, _d = _a.visuallyHiddenLabel, visuallyHiddenLabel = _d === void 0 ? 'Loading...' : _d, rest = __rest$1(_a, ["className", "color", "component", "size", "variant", "visuallyHiddenLabel"]);
+    var _className = classNames$1("spinner-".concat(variant), "text-".concat(color), size && "spinner-".concat(variant, "-").concat(size), className);
+    return (React$1.createElement(Component, __assign$1({ className: _className, role: "status" }, rest, { ref: ref }),
+        React$1.createElement("span", { className: "visually-hidden" }, visuallyHiddenLabel)));
+});
+CSpinner.propTypes = {
+    className: propTypesExports.string,
+    color: colorPropType,
+    component: propTypesExports.string,
+    size: propTypesExports.oneOf(['sm']),
+    variant: propTypesExports.oneOf(['border', 'grow']),
+    visuallyHiddenLabel: propTypesExports.string,
+};
+CSpinner.displayName = 'CSpinner';
+
+var CElementCover = React$1.forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, boundaries = _a.boundaries, _b = _a.opacity, opacity = _b === void 0 ? 0.4 : _b, rest = __rest$1(_a, ["children", "className", "boundaries", "opacity"]);
+    var elementCoverRef = React$1.useRef(null);
+    var forkedRef = useForkedRef(ref, elementCoverRef);
+    var _c = React$1.useState({}), customBoundaries = _c[0], setCustomBoundaries = _c[1];
+    var getCustomBoundaries = function () {
+        if (!elementCoverRef || !elementCoverRef.current || !boundaries) {
+            return {};
+        }
+        var parent = elementCoverRef.current.parentElement;
+        if (!parent) {
+            return {};
+        }
+        var parentCoords = parent.getBoundingClientRect();
+        var customBoundaries = {};
+        boundaries.forEach(function (_a) {
+            var sides = _a.sides, query = _a.query;
+            var element = parent.querySelector(query);
+            if (!element || !sides) {
+                return;
+            }
+            var coords = element.getBoundingClientRect();
+            sides.forEach(function (side) {
+                var sideMargin = Math.abs(coords[side] - parentCoords[side]);
+                customBoundaries[side] = "".concat(sideMargin, "px");
+            });
+        });
+        return customBoundaries;
+    };
+    React$1.useEffect(function () {
+        setCustomBoundaries(getCustomBoundaries());
+    }, [JSON.stringify(getCustomBoundaries())]);
+    var classes = classNames$1(className);
+    var containerCoords = __assign$1({ top: 0, left: 0, right: 0, bottom: 0 }, customBoundaries);
+    var coverStyles = __assign$1(__assign$1({}, containerCoords), { position: 'absolute', backgroundColor: "rgba(255,255,255,".concat(opacity, ")") });
+    return (React$1.createElement("div", __assign$1({ className: classes, style: coverStyles }, rest, { ref: forkedRef }),
+        React$1.createElement("div", { style: {
+                position: 'absolute',
+                top: '50%',
+                left: '50%',
+                transform: 'translateX(-50%) translateY(-50%)',
+            } }, children || React$1.createElement(CSpinner, { variant: "grow", color: "primary" }))));
+});
+CElementCover.propTypes = {
+    boundaries: propTypesExports.array,
+    children: propTypesExports.node,
+    className: propTypesExports.string,
+    opacity: propTypesExports.number,
+};
+CElementCover.displayName = 'CElementCover';
+
 var CFooter = React$1.forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, position = _a.position, rest = __rest$1(_a, ["children", "className", "position"]);
@@ -11035,22 +11142,6 @@ CListGroupItem.propTypes = {
 };
 CListGroupItem.displayName = 'CListGroupItem';
 
-var CSpinner = React$1.forwardRef(function (_a, ref) {
-    var className = _a.className, color = _a.color, _b = _a.component, Component = _b === void 0 ? 'div' : _b, size = _a.size, _c = _a.variant, variant = _c === void 0 ? 'border' : _c, _d = _a.visuallyHiddenLabel, visuallyHiddenLabel = _d === void 0 ? 'Loading...' : _d, rest = __rest$1(_a, ["className", "color", "component", "size", "variant", "visuallyHiddenLabel"]);
-    var _className = classNames$1("spinner-".concat(variant), "text-".concat(color), size && "spinner-".concat(variant, "-").concat(size), className);
-    return (React$1.createElement(Component, __assign$1({ className: _className, role: "status" }, rest, { ref: ref }),
-        React$1.createElement("span", { className: "visually-hidden" }, visuallyHiddenLabel)));
-});
-CSpinner.propTypes = {
-    className: propTypesExports.string,
-    color: colorPropType,
-    component: propTypesExports.string,
-    size: propTypesExports.oneOf(['sm']),
-    variant: propTypesExports.oneOf(['border', 'grow']),
-    visuallyHiddenLabel: propTypesExports.string,
-};
-CSpinner.displayName = 'CSpinner';
-
 var CLoadingButton = React$1.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, disabledOnLoading = _a.disabledOnLoading, loading = _a.loading, onClick = _a.onClick, _b = _a.spinnerType, spinnerType = _b === void 0 ? 'border' : _b, timeout = _a.timeout, rest = __rest$1(_a, ["children", "className", "disabledOnLoading", "loading", "onClick", "spinnerType", "timeout"]);
     var _c = React$1.useState(), _loading = _c[0], setLoading = _c[1];
@@ -11883,8 +11974,8 @@ CNavbarToggler.displayName = 'CNavbarToggler';
 
 var COffcanvas = React$1.forwardRef(function (_a, ref) {
     var _b;
-    var children = _a.children, _c = _a.backdrop, backdrop = _c === void 0 ? true : _c, className = _a.className, _d = _a.keyboard, keyboard = _d === void 0 ? true : _d, onHide = _a.onHide, onShow = _a.onShow, placement = _a.placement, _e = _a.portal, portal = _e === void 0 ? true : _e, _f = _a.scroll, scroll = _f === void 0 ? false : _f, _g = _a.visible, visible = _g === void 0 ? false : _g, rest = __rest$1(_a, ["children", "backdrop", "className", "keyboard", "onHide", "onShow", "placement", "portal", "scroll", "visible"]);
-    var _h = React$1.useState(visible), _visible = _h[0], setVisible = _h[1];
+    var children = _a.children, _c = _a.backdrop, backdrop = _c === void 0 ? true : _c, className = _a.className, _d = _a.keyboard, keyboard = _d === void 0 ? true : _d, onHide = _a.onHide, onShow = _a.onShow, placement = _a.placement, _e = _a.portal, portal = _e === void 0 ? false : _e, _f = _a.responsive, responsive = _f === void 0 ? true : _f, _g = _a.scroll, scroll = _g === void 0 ? false : _g, _h = _a.visible, visible = _h === void 0 ? false : _h, rest = __rest$1(_a, ["children", "backdrop", "className", "keyboard", "onHide", "onShow", "placement", "portal", "responsive", "scroll", "visible"]);
+    var _j = React$1.useState(visible), _visible = _j[0], setVisible = _j[1];
     var offcanvasRef = React$1.useRef(null);
     var forkedRef = useForkedRef(ref, offcanvasRef);
     React$1.useEffect(function () {
@@ -11903,19 +11994,27 @@ var COffcanvas = React$1.forwardRef(function (_a, ref) {
             document.body.style.removeProperty('padding-right');
         }
     }, [_visible]);
-    var _className = classNames$1('offcanvas', (_b = {},
+    var getTransitionClass = function (state) {
+        return state === 'entering'
+            ? 'showing'
+            : state === 'entered'
+                ? 'show'
+                : state === 'exiting'
+                    ? 'show hiding'
+                    : '';
+    };
+    var _className = classNames$1((_b = {},
+        _b["offcanvas".concat(typeof responsive !== 'boolean' ? '-' + responsive : '')] = responsive,
         _b["offcanvas-".concat(placement)] = placement,
-        _b.show = _visible,
         _b), className);
-    var transitionStyles = {
-        entering: { visibility: 'visible' },
-        entered: { visibility: 'visible' },
-        exiting: { visibility: 'visible' },
-        exited: { visibility: 'hidden' },
-    };
     var handleDismiss = function () {
         setVisible(false);
     };
+    var handleBackdropDismiss = function () {
+        if (backdrop !== 'static') {
+            setVisible(false);
+        }
+    };
     var handleKeyDown = React$1.useCallback(function (event) {
         if (event.key === 'Escape' && keyboard) {
             return handleDismiss();
@@ -11923,7 +12022,7 @@ var COffcanvas = React$1.forwardRef(function (_a, ref) {
     }, [ref, handleDismiss]);
     var offcanvas = function (ref, state) {
         return (React$1.createElement(React$1.Fragment, null,
-            React$1.createElement("div", __assign$1({ className: _className, role: "dialog", style: __assign$1({}, transitionStyles[state]), tabIndex: -1, onKeyDown: handleKeyDown }, rest, { ref: ref }), children)));
+            React$1.createElement("div", __assign$1({ className: classNames$1(_className, getTransitionClass(state)), role: "dialog", tabIndex: -1, onKeyDown: handleKeyDown }, rest, { ref: ref }), children)));
     };
     return (React$1.createElement(React$1.Fragment, null,
         React$1.createElement(Transition$1, { in: _visible, nodeRef: offcanvasRef, onEnter: onShow, onEntered: function () { var _a; return (_a = offcanvasRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, onExit: onHide, timeout: 300 }, function (state) {
@@ -11933,11 +12032,11 @@ var COffcanvas = React$1.forwardRef(function (_a, ref) {
         }),
         typeof window !== 'undefined' && portal
             ? backdrop &&
-                ReactDOM.createPortal(React$1.createElement(CBackdrop, { className: "offcanvas-backdrop", onClick: handleDismiss, visible: _visible }), document.body)
-            : backdrop && (React$1.createElement(CBackdrop, { className: "offcanvas-backdrop", onClick: handleDismiss, visible: _visible }))));
+                ReactDOM.createPortal(React$1.createElement(CBackdrop, { className: "offcanvas-backdrop", onClick: handleBackdropDismiss, visible: _visible }), document.body)
+            : backdrop && (React$1.createElement(CBackdrop, { className: "offcanvas-backdrop", onClick: handleBackdropDismiss, visible: _visible }))));
 });
 COffcanvas.propTypes = {
-    backdrop: propTypesExports.bool,
+    backdrop: propTypesExports.oneOfType([propTypesExports.bool, propTypesExports.oneOf(['static'])]),
     children: propTypesExports.node,
     className: propTypesExports.string,
     keyboard: propTypesExports.bool,
@@ -11946,6 +12045,10 @@ COffcanvas.propTypes = {
     placement: propTypesExports.oneOf(['start', 'end', 'top', 'bottom'])
         .isRequired,
     portal: propTypesExports.bool,
+    responsive: propTypesExports.oneOfType([
+        propTypesExports.bool,
+        propTypesExports.oneOf(['sm', 'md', 'lg', 'xl', 'xxl']),
+    ]),
     scroll: propTypesExports.bool,
     visible: propTypesExports.bool,
 };
@@ -12163,438 +12266,51 @@ CPopover.propTypes = {
 };
 CPopover.displayName = 'CPopover';
 
-const cilArrowBottom = ["512 512","<polygon fill='var(--ci-primary-color, currentColor)' points='367.997 338.75 271.999 434.747 271.999 17.503 239.999 17.503 239.999 434.745 144.003 338.75 121.376 361.377 256 496 390.624 361.377 367.997 338.75' class='ci-primary'/>"];
+var cilArrowBottom = ["512 512", "<polygon fill='var(--ci-primary-color, currentColor)' points='367.997 338.75 271.999 434.747 271.999 17.503 239.999 17.503 239.999 434.745 144.003 338.75 121.376 361.377 256 496 390.624 361.377 367.997 338.75' class='ci-primary'/>"];
 
-const cilArrowTop = ["512 512","<polygon fill='var(--ci-primary-color, currentColor)' points='390.624 150.625 256 16 121.376 150.625 144.004 173.252 240.001 77.254 240.001 495.236 272.001 495.236 272.001 77.257 367.996 173.252 390.624 150.625' class='ci-primary'/>"];
+var cilArrowTop = ["512 512", "<polygon fill='var(--ci-primary-color, currentColor)' points='390.624 150.625 256 16 121.376 150.625 144.004 173.252 240.001 77.254 240.001 495.236 272.001 495.236 272.001 77.257 367.996 173.252 390.624 150.625' class='ci-primary'/>"];
 
-const cilFilterX = ["512 512","<polygon fill='var(--ci-primary-color, currentColor)' points='40 16 40 53.828 109.024 136 150.815 136 76.896 48 459.51 48 304 242.388 304 401.373 241.373 464 240 464 240 368 208 368 208 496 254.627 496 336 414.627 336 253.612 496 53.612 496 16 40 16' class='ci-primary'/><polygon fill='var(--ci-primary-color, currentColor)' points='166.403 248.225 226.864 187.763 204.237 165.135 143.775 225.597 83.313 165.135 60.687 187.763 121.148 248.225 60.687 308.687 83.313 331.314 143.775 270.852 204.237 331.314 226.864 308.687 166.403 248.225' class='ci-primary'/>"];
+var cilFilterX = ["512 512", "<polygon fill='var(--ci-primary-color, currentColor)' points='40 16 40 53.828 109.024 136 150.815 136 76.896 48 459.51 48 304 242.388 304 401.373 241.373 464 240 464 240 368 208 368 208 496 254.627 496 336 414.627 336 253.612 496 53.612 496 16 40 16' class='ci-primary'/><polygon fill='var(--ci-primary-color, currentColor)' points='166.403 248.225 226.864 187.763 204.237 165.135 143.775 225.597 83.313 165.135 60.687 187.763 121.148 248.225 60.687 308.687 83.313 331.314 143.775 270.852 204.237 331.314 226.864 308.687 166.403 248.225' class='ci-primary'/>"];
 
-const cilSwapVertical = ["512 512","<polygon fill='var(--ci-primary-color, currentColor)' points='384 433.373 384 160 352 160 352 434.51 282.177 364.687 259.55 387.313 367.432 495.196 475.313 387.313 452.687 364.687 384 433.373' class='ci-primary'/><polygon fill='var(--ci-primary-color, currentColor)' points='159.432 17.372 51.55 125.255 74.177 147.882 144 78.059 144 352 176 352 176 79.195 244.687 147.882 267.313 125.255 159.432 17.372' class='ci-primary'/>"];
+var cilSwapVertical = ["512 512", "<polygon fill='var(--ci-primary-color, currentColor)' points='384 433.373 384 160 352 160 352 434.51 282.177 364.687 259.55 387.313 367.432 495.196 475.313 387.313 452.687 364.687 384 433.373' class='ci-primary'/><polygon fill='var(--ci-primary-color, currentColor)' points='159.432 17.372 51.55 125.255 74.177 147.882 144 78.059 144 352 176 352 176 79.195 244.687 147.882 267.313 125.255 159.432 17.372' class='ci-primary'/>"];
 
-var CElementCover = React$1.forwardRef(function (_a, ref) {
-    var children = _a.children, className = _a.className, boundaries = _a.boundaries, _b = _a.opacity, opacity = _b === void 0 ? 0.4 : _b, rest = __rest$1(_a, ["children", "className", "boundaries", "opacity"]);
-    var elementCoverRef = React$1.useRef(null);
-    var forkedRef = useForkedRef(ref, elementCoverRef);
-    var _c = React$1.useState({}), customBoundaries = _c[0], setCustomBoundaries = _c[1];
-    var getCustomBoundaries = function () {
-        if (!elementCoverRef || !elementCoverRef.current || !boundaries) {
-            return {};
-        }
-        var parent = elementCoverRef.current.parentElement;
-        if (!parent) {
-            return {};
-        }
-        var parentCoords = parent.getBoundingClientRect();
-        var customBoundaries = {};
-        boundaries.forEach(function (_a) {
-            var sides = _a.sides, query = _a.query;
-            var element = parent.querySelector(query);
-            if (!element || !sides) {
-                return;
-            }
-            var coords = element.getBoundingClientRect();
-            sides.forEach(function (side) {
-                var sideMargin = Math.abs(coords[side] - parentCoords[side]);
-                customBoundaries[side] = "".concat(sideMargin, "px");
-            });
-        });
-        return customBoundaries;
-    };
-    React$1.useEffect(function () {
-        setCustomBoundaries(getCustomBoundaries());
-    }, [JSON.stringify(getCustomBoundaries())]);
-    //render
-    var classes = classNames$1(className);
-    var containerCoords = __assign$1({ top: 0, left: 0, right: 0, bottom: 0 }, customBoundaries);
-    var coverStyles = __assign$1(__assign$1({}, containerCoords), { position: 'absolute', backgroundColor: "rgb(255,255,255,".concat(opacity, ")") });
-    return (React$1.createElement("div", __assign$1({ className: classes, style: coverStyles }, rest, { ref: forkedRef }), children || (React$1.createElement("div", { style: {
-            position: 'absolute',
-            top: '50%',
-            left: '50%',
-            transform: 'translateX(-50%) translateY(-50%)',
-        } },
-        React$1.createElement(CSpinner, { variant: "grow", color: "primary" })))));
-});
-CElementCover.propTypes = {
-    boundaries: propTypesExports.array,
-    children: propTypesExports.node,
-    className: propTypesExports.string,
-    opacity: propTypesExports.number,
-};
-CElementCover.displayName = 'CElementCover';
-
-var CSmartPagination = React$1.forwardRef(function (_a, ref) {
-    var className = _a.className, _b = _a.activePage, activePage = _b === void 0 ? 1 : _b, _c = _a.align, align = _c === void 0 ? 'start' : _c, _d = _a.arrows, arrows = _d === void 0 ? true : _d, _e = _a.dots, dots = _e === void 0 ? true : _e, _f = _a.doubleArrows, doubleArrows = _f === void 0 ? true : _f, _g = _a.firstButton, firstButton = _g === void 0 ? React$1.createElement(React$1.Fragment, null, "\u00AB") : _g, _h = _a.lastButton, lastButton = _h === void 0 ? React$1.createElement(React$1.Fragment, null, "\u00BB") : _h, _j = _a.limit, limit = _j === void 0 ? 5 : _j, _k = _a.nextButton, nextButton = _k === void 0 ? React$1.createElement(React$1.Fragment, null, "\u203A") : _k, onActivePageChange = _a.onActivePageChange, pages = _a.pages, _l = _a.previousButton, previousButton = _l === void 0 ? React$1.createElement(React$1.Fragment, null, "\u2039") : _l, size = _a.size, rest = __rest$1(_a, ["className", "activePage", "align", "arrows", "dots", "doubleArrows", "firstButton", "lastButton", "limit", "nextButton", "onActivePageChange", "pages", "previousButton", "size"]);
-    var _classNames = classNames$1("justify-content-".concat(align), className);
-    var showDots = (function () {
-        return dots && limit > 4 && limit < pages;
-    })();
-    var maxPrevItems = (function () {
-        return Math.floor((limit - 1) / 2);
-    })();
-    var maxNextItems = (function () {
-        return Math.ceil((limit - 1) / 2);
-    })();
-    var beforeDots = (function () {
-        return showDots && activePage > maxPrevItems + 1;
-    })();
-    var afterDots = (function () {
-        return showDots && activePage < pages - maxNextItems;
-    })();
-    var computedLimit = (function () {
-        return limit - (afterDots ? 1 : 0) - (beforeDots ? 1 : 0);
-    })();
-    var range = (function () {
-        return activePage + maxNextItems;
-    })();
-    var lastItem = (function () {
-        return range >= pages ? pages : range - (afterDots ? 1 : 0);
-    })();
-    var itemsAmount = (function () {
-        return pages < computedLimit ? pages : computedLimit;
-    })();
-    var items = (function () {
-        if (activePage - maxPrevItems <= 1) {
-            return Array.from({
-                length: itemsAmount,
-            }, function (_v, i) { return i + 1; });
-        }
-        else {
-            return Array.from({
-                length: itemsAmount,
-            }, function (_v, i) {
-                return lastItem - i;
-            }).reverse();
-        }
-    })();
-    var setPage = function (number) {
-        if (number !== activePage) {
-            onActivePageChange && onActivePageChange(number);
-        }
-    };
-    return (React$1.createElement(CPagination, __assign$1({ className: _classNames, "aria-label": "pagination", size: size }, rest, { ref: ref }),
-        doubleArrows && (React$1.createElement(CPaginationItem, { onClick: function () { return setPage(1); }, "aria-label": "Go to first page", "aria-disabled": activePage === 1, disabled: activePage === 1 }, firstButton)),
-        arrows && (React$1.createElement(CPaginationItem, { onClick: function () { return setPage(activePage - 1); }, "aria-label": "Go to previous page", "aria-disabled": activePage === 1, disabled: activePage === 1 }, previousButton)),
-        beforeDots && (React$1.createElement(CPaginationItem, { role: "separator", disabled: true }, "\u2026")),
-        items.map(function (i) {
-            return (React$1.createElement(CPaginationItem, { onClick: function () { return setPage(i); }, "aria-label": activePage === i ? "Current page ".concat(i) : "Go to page ".concat(i), active: activePage === i, key: i }, i));
-        }),
-        afterDots && (React$1.createElement(CPaginationItem, { role: "separator", disabled: true }, "\u2026")),
-        arrows && (React$1.createElement(CPaginationItem, { onClick: function () { return setPage(activePage + 1); }, "aria-label": "Go to next page", "aria-disabled": activePage === pages, disabled: activePage === pages }, nextButton)),
-        doubleArrows && (React$1.createElement(CPaginationItem, { onClick: function () { return setPage(pages); }, "aria-label": "Go to last page", "aria-disabled": activePage === pages, disabled: activePage === pages }, lastButton))));
-});
-CSmartPagination.propTypes = {
-    className: propTypesExports.oneOfType([propTypesExports.string]),
-    activePage: propTypesExports.number,
-    dots: propTypesExports.bool,
-    arrows: propTypesExports.bool,
-    doubleArrows: propTypesExports.bool,
-    firstButton: propTypesExports.oneOfType([propTypesExports.node, propTypesExports.string]),
-    previousButton: propTypesExports.oneOfType([propTypesExports.node, propTypesExports.string]),
-    nextButton: propTypesExports.oneOfType([propTypesExports.node, propTypesExports.string]),
-    lastButton: propTypesExports.oneOfType([propTypesExports.node, propTypesExports.string]),
-    size: propTypesExports.oneOf(['sm', 'lg']),
-    align: propTypesExports.oneOf(['start', 'center', 'end']),
-    limit: propTypesExports.number,
-    pages: propTypesExports.number.isRequired,
-    onActivePageChange: propTypesExports.func,
-};
-CSmartPagination.displayName = 'CSmartPagination';
-
-var CTableHead = React$1.forwardRef(function (_a, ref) {
-    var _b;
-    var children = _a.children, className = _a.className, color = _a.color, rest = __rest$1(_a, ["children", "className", "color"]);
-    var _className = classNames$1((_b = {},
-        _b["table-".concat(color)] = color,
-        _b), className);
-    return (React$1.createElement("thead", __assign$1({ className: _className ? _className : undefined }, rest, { ref: ref }), children));
-});
-CTableHead.propTypes = {
-    children: propTypesExports.node,
-    className: propTypesExports.string,
-    color: colorPropType,
-};
-CTableHead.displayName = 'CTableHead';
-
-var CTableHeaderCell = React$1.forwardRef(function (_a, ref) {
-    var _b;
-    var children = _a.children, className = _a.className, color = _a.color, rest = __rest$1(_a, ["children", "className", "color"]);
-    var _className = classNames$1((_b = {},
-        _b["table-".concat(color)] = color,
-        _b), className);
-    return (React$1.createElement("th", __assign$1({ className: _className ? _className : undefined }, rest, { ref: ref }), children));
-});
-CTableHeaderCell.propTypes = {
-    children: propTypesExports.node,
-    className: propTypesExports.string,
-    color: colorPropType,
-};
-CTableHeaderCell.displayName = 'CTableHeaderCell';
-
-var CTableBody = React$1.forwardRef(function (_a, ref) {
-    var _b;
-    var children = _a.children, className = _a.className, color = _a.color, rest = __rest$1(_a, ["children", "className", "color"]);
-    var _className = classNames$1((_b = {},
-        _b["table-".concat(color)] = color,
-        _b), className);
-    return (React$1.createElement("tbody", __assign$1({ className: _className ? _className : undefined }, rest, { ref: ref }), children));
-});
-CTableBody.propTypes = {
-    children: propTypesExports.node,
-    className: propTypesExports.string,
-    color: colorPropType,
-};
-CTableBody.displayName = 'CTableBody';
-
-var CTableDataCell = React$1.forwardRef(function (_a, ref) {
-    var _b;
-    var children = _a.children, active = _a.active, align = _a.align, className = _a.className, color = _a.color, rest = __rest$1(_a, ["children", "active", "align", "className", "color"]);
-    var _className = classNames$1((_b = {},
-        _b["align-".concat(align)] = align,
-        _b['table-active'] = active,
-        _b["table-".concat(color)] = color,
-        _b), className);
-    var Component = rest.scope ? 'th' : 'td';
-    return (React$1.createElement(Component, __assign$1({ className: _className ? _className : undefined }, rest, { ref: ref }), children));
-});
-CTableDataCell.propTypes = {
-    active: propTypesExports.bool,
-    align: propTypesExports.oneOf(['bottom', 'middle', 'top']),
-    children: propTypesExports.node,
-    className: propTypesExports.string,
-    color: colorPropType,
-};
-CTableDataCell.displayName = 'CTableDataCell';
-
-var CTableRow = React$1.forwardRef(function (_a, ref) {
-    var _b;
-    var children = _a.children, active = _a.active, align = _a.align, className = _a.className, color = _a.color, rest = __rest$1(_a, ["children", "active", "align", "className", "color"]);
-    var _className = classNames$1((_b = {},
-        _b["align-".concat(align)] = align,
-        _b['table-active'] = active,
-        _b["table-".concat(color)] = color,
-        _b), className);
-    return (React$1.createElement("tr", __assign$1({ className: _className ? _className : undefined }, rest, { ref: ref }), children));
-});
-CTableRow.propTypes = {
-    active: propTypesExports.bool,
-    align: propTypesExports.oneOf(['bottom', 'middle', 'top']),
-    children: propTypesExports.node,
-    className: propTypesExports.string,
-    color: colorPropType,
-};
-CTableRow.displayName = 'CTableRow';
-
-var CTableFoot = React$1.forwardRef(function (_a, ref) {
-    var _b;
-    var children = _a.children, className = _a.className, color = _a.color, rest = __rest$1(_a, ["children", "className", "color"]);
-    var _className = classNames$1((_b = {},
-        _b["table-".concat(color)] = color,
-        _b), className);
-    return (React$1.createElement("tfoot", __assign$1({ className: _className ? _className : undefined }, rest, { ref: ref }), children));
-});
-CTableFoot.propTypes = {
-    children: propTypesExports.node,
-    className: propTypesExports.string,
-    color: colorPropType,
-};
-CTableFoot.displayName = 'CTableFoot';
-
-var CTableCaption = React$1.forwardRef(function (_a, ref) {
-    var children = _a.children, props = __rest$1(_a, ["children"]);
-    return (React$1.createElement("caption", __assign$1({}, props, { ref: ref }), children));
-});
-CTableCaption.propTypes = {
-    children: propTypesExports.node,
-};
-CTableCaption.displayName = 'CTableCaption';
-
-var CTableResponsiveWrapper = function (_a) {
-    var children = _a.children, responsive = _a.responsive, rest = __rest$1(_a, ["children", "responsive"]);
-    return responsive ? (React$1.createElement("div", __assign$1({ className: typeof responsive === 'boolean' ? 'table-responsive' : "table-responsive-".concat(responsive) }, rest), children)) : (children);
-};
-CTableResponsiveWrapper.propTypes = {
-    children: propTypesExports.any,
-    responsive: propTypesExports.oneOfType([
-        propTypesExports.bool,
-        propTypesExports.oneOf(['sm', 'md', 'lg', 'xl', 'xxl']),
-    ]),
-};
-CTableResponsiveWrapper.displayName = 'CTableResponsiveWrapper';
-
-var CTable = React$1.forwardRef(function (_a, ref) {
-    var _b;
-    var children = _a.children, align = _a.align, borderColor = _a.borderColor, bordered = _a.bordered, borderless = _a.borderless, caption = _a.caption, captionTop = _a.captionTop, className = _a.className, color = _a.color, columns = _a.columns, footer = _a.footer, hover = _a.hover, items = _a.items, responsive = _a.responsive, small = _a.small, striped = _a.striped, stripedColumns = _a.stripedColumns, tableFootProps = _a.tableFootProps, tableHeadProps = _a.tableHeadProps, rest = __rest$1(_a, ["children", "align", "borderColor", "bordered", "borderless", "caption", "captionTop", "className", "color", "columns", "footer", "hover", "items", "responsive", "small", "striped", "stripedColumns", "tableFootProps", "tableHeadProps"]);
-    var _className = classNames$1('table', (_b = {},
-        _b["align-".concat(align)] = align,
-        _b["border-".concat(borderColor)] = borderColor,
-        _b["caption-top"] = captionTop || caption === 'top',
-        _b['table-bordered'] = bordered,
-        _b['table-borderless'] = borderless,
-        _b["table-".concat(color)] = color,
-        _b['table-hover'] = hover,
-        _b['table-sm'] = small,
-        _b['table-striped'] = striped,
-        _b['table-striped-columns'] = stripedColumns,
-        _b), className);
-    var rawColumnNames = columns
-        ? columns.map(function (column) {
-            if (typeof column === 'object')
-                return column.key;
-            else
-                return column;
-        })
-        : Object.keys((items && items[0]) || {}).filter(function (el) { return el.charAt(0) !== '_'; });
-    var pretifyName = function (name) {
-        return name
-            .replace(/[-_.]/g, ' ')
-            .replace(/ +/g, ' ')
-            .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
-            .split(' ')
-            .map(function (word) { return word.charAt(0).toUpperCase() + word.slice(1); })
-            .join(' ');
-    };
-    var label = function (column) {
-        return typeof column === 'object'
-            ? column.label !== undefined
-                ? column.label
-                : pretifyName(column.key)
-            : pretifyName(column);
-    };
-    return (React$1.createElement(CTableResponsiveWrapper, { responsive: responsive },
-        React$1.createElement("table", __assign$1({ className: _className }, rest, { ref: ref }),
-            ((caption && caption !== 'top') || captionTop) && (React$1.createElement(CTableCaption, null, caption || captionTop)),
-            columns && (React$1.createElement(CTableHead, __assign$1({}, tableHeadProps),
-                React$1.createElement(CTableRow, null, columns.map(function (column, index) { return (React$1.createElement(CTableHeaderCell, __assign$1({}, (column._props && __assign$1({}, column._props)), (column._style && { style: __assign$1({}, column._style) }), { key: index }), label(column))); })))),
-            items && (React$1.createElement(CTableBody, null, items.map(function (item, index) { return (React$1.createElement(CTableRow, __assign$1({}, (item._props && __assign$1({}, item._props)), { key: index }), rawColumnNames.map(function (colName, index) {
-                return item[colName] ? (React$1.createElement(CTableDataCell, __assign$1({}, (item._cellProps && __assign$1(__assign$1({}, (item._cellProps['all'] && __assign$1({}, item._cellProps['all']))), (item._cellProps[colName] && __assign$1({}, item._cellProps[colName])))), { key: index }), item[colName])) : null;
-            }))); }))),
-            children,
-            footer && (React$1.createElement(CTableFoot, __assign$1({}, tableFootProps),
-                React$1.createElement(CTableRow, null, footer.map(function (item, index) { return (React$1.createElement(CTableDataCell, __assign$1({}, (typeof item === 'object' && item._props && __assign$1({}, item._props)), { key: index }), typeof item === 'object' ? item.label : item)); })))))));
-});
-CTable.propTypes = {
-    align: propTypesExports.oneOf(['bottom', 'middle', 'top']),
-    borderColor: propTypesExports.string,
-    bordered: propTypesExports.bool,
-    borderless: propTypesExports.bool,
-    caption: propTypesExports.oneOfType([propTypesExports.string, propTypesExports.oneOf(['top'])]),
-    captionTop: propTypesExports.string,
-    children: propTypesExports.node,
-    className: propTypesExports.string,
-    color: colorPropType,
-    columns: propTypesExports.array,
-    footer: propTypesExports.array,
-    hover: propTypesExports.bool,
-    items: propTypesExports.array,
-    responsive: propTypesExports.oneOfType([
-        propTypesExports.bool,
-        propTypesExports.oneOf(['sm', 'md', 'lg', 'xl', 'xxl']),
-    ]),
-    small: propTypesExports.bool,
-    striped: propTypesExports.bool,
-    stripedColumns: propTypesExports.bool,
-    tableFootProps: propTypesExports.shape(__assign$1({}, CTableFoot.propTypes)),
-    tableHeadProps: propTypesExports.shape(__assign$1({}, CTableHead.propTypes)),
-};
-CTable.displayName = 'CTable';
-
-var CSmartTableBody = React$1.forwardRef(function (_a, ref) {
-    var clickableRows = _a.clickableRows, currentItems = _a.currentItems, firstItemOnActivePageIndex = _a.firstItemOnActivePageIndex, noItemsLabel = _a.noItemsLabel, onRowChecked = _a.onRowChecked, onRowClick = _a.onRowClick, rawColumnNames = _a.rawColumnNames, scopedColumns = _a.scopedColumns, selectable = _a.selectable, rest = __rest$1(_a, ["clickableRows", "currentItems", "firstItemOnActivePageIndex", "noItemsLabel", "onRowChecked", "onRowClick", "rawColumnNames", "scopedColumns", "selectable"]);
-    var tableDataCellProps = function (item, colName) {
-        var props = item._cellProps && __assign$1(__assign$1({}, (item._cellProps['all'] && __assign$1({}, item._cellProps['all']))), (item._cellProps[colName] && __assign$1({}, item._cellProps[colName])));
-        return props;
-    };
-    var getColumnName = function (event) {
-        var target = event.target;
-        var closest = target.closest('tr');
-        var children = closest ? Array.from(closest.children) : [];
-        var clickedCell = children.filter(function (child) { return child.contains(target); })[0];
-        return rawColumnNames[children.indexOf(clickedCell)];
-    };
-    var colspan = selectable ? rawColumnNames.length + 1 : rawColumnNames.length;
-    return (React$1.createElement(CTableBody, __assign$1({}, (clickableRows && {
-        style: { cursor: 'pointer' },
-    }), rest, { ref: ref }),
-        currentItems.map(function (item, trIndex) {
-            return (React$1.createElement(React$1.Fragment, { key: trIndex },
-                React$1.createElement(CTableRow, __assign$1({}, (item._props && __assign$1({}, item._props)), (clickableRows && { tabIndex: 0 }), { onClick: function (event) {
-                        return onRowClick &&
-                            onRowClick(item, trIndex + firstItemOnActivePageIndex, getColumnName(event), event);
-                    } }),
-                    selectable && (React$1.createElement(CTableDataCell, null,
-                        React$1.createElement(CFormCheck, { checked: item._selected ? item._selected : false, onChange: function (event) {
-                                return onRowChecked && onRowChecked(item._id, event.target.checked);
-                            } }))),
-                    rawColumnNames.map(function (colName, index) {
-                        return ((scopedColumns &&
-                            scopedColumns[colName] &&
-                            React$1.cloneElement(scopedColumns[colName](item, trIndex + firstItemOnActivePageIndex), {
-                                key: index,
-                            })) || (React$1.createElement(CTableDataCell, __assign$1({}, tableDataCellProps(item, colName), { key: index }), String(item[colName]))));
-                    })),
-                scopedColumns && scopedColumns.details && (React$1.createElement(React$1.Fragment, null,
-                    React$1.createElement(CTableRow, null,
-                        React$1.createElement(CTableDataCell, { colSpan: colspan, className: "p-0", style: { borderBottomWidth: 0 }, tabIndex: -1 })),
-                    React$1.createElement(CTableRow, { onClick: function (event) {
-                            return onRowClick &&
-                                onRowClick(item, trIndex + firstItemOnActivePageIndex, getColumnName(event), true);
-                        }, className: "p-0", key: "details".concat(trIndex) },
-                        React$1.createElement(CTableDataCell, { colSpan: colspan, className: "p-0", style: { border: 0 } }, scopedColumns.details(item, trIndex + firstItemOnActivePageIndex)))))));
-        }),
-        !currentItems.length && (React$1.createElement(CTableRow, null,
-            React$1.createElement(CTableDataCell, { colSpan: colspan }, noItemsLabel)))));
-});
-CSmartTableBody.propTypes = {
-    clickableRows: propTypesExports.bool,
-    currentItems: propTypesExports.array.isRequired,
-    firstItemOnActivePageIndex: propTypesExports.number.isRequired,
-    noItemsLabel: propTypesExports.oneOfType([propTypesExports.string, propTypesExports.node]),
-    onRowChecked: propTypesExports.func,
-    onRowClick: propTypesExports.func,
-    rawColumnNames: propTypesExports.array.isRequired,
-    scopedColumns: propTypesExports.object,
-    selectable: propTypesExports.bool,
-};
-CSmartTableBody.displayName = 'CSmartTableBody';
-
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-var __assign = function() {
-    __assign = Object.assign || function __assign(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
 
 var propTypes = {exports: {}};
 
@@ -13824,103 +13540,565 @@ var classnames = {exports: {}};
 				}
 			}
 
-			return classes.join(' ');
-		}
+			return classes.join(' ');
+		}
+
+		if (module.exports) {
+			classNames.default = classNames;
+			module.exports = classNames;
+		} else {
+			window.classNames = classNames;
+		}
+	}());
+} (classnames));
+
+var classNames = classnames.exports;
+
+var toCamelCase = function (str) {
+    return str
+        .replace(/([-_][a-z0-9])/gi, function ($1) {
+        return $1.toUpperCase();
+    })
+        .replace(/-/gi, '');
+};
+var CIcon = React$1.forwardRef(function (_a, ref) {
+    var _b;
+    var className = _a.className, content = _a.content, customClassName = _a.customClassName, height = _a.height, icon = _a.icon, name = _a.name, size = _a.size, title = _a.title, use = _a.use, width = _a.width, rest = __rest(_a, ["className", "content", "customClassName", "height", "icon", "name", "size", "title", "use", "width"]);
+    var _c = React$1.useState(0), change = _c[0], setChange = _c[1];
+    var _icon = icon || content || name;
+    if (content) {
+        process &&
+            process.env &&
+            process.env.NODE_ENV === 'development' &&
+            console.warn('[CIcon] The `content` property is deprecated and will be removed in v3, please use `icon={...}` instead of.');
+    }
+    if (name) {
+        process &&
+            process.env &&
+            process.env.NODE_ENV === 'development' &&
+            console.warn('[CIcon] The `name` property is deprecated and will be removed in v3, please use `icon="..."` instead of.');
+    }
+    React$1.useMemo(function () { return setChange(change + 1); }, [_icon, JSON.stringify(_icon)]);
+    var iconName = React$1.useMemo(function () {
+        return _icon && typeof _icon === 'string' && _icon.includes('-') ? toCamelCase(_icon) : _icon;
+    }, [change]);
+    var titleCode = title ? "<title>".concat(title, "</title>") : '';
+    var code = React$1.useMemo(function () {
+        if (Array.isArray(_icon)) {
+            return _icon;
+        }
+        if (typeof _icon === 'string' && React$1['icons']) {
+            return React$1['icons'][iconName];
+        }
+    }, [change]);
+    var iconCode = React$1.useMemo(function () {
+        return Array.isArray(code) ? code[1] || code[0] : code;
+    }, [change]);
+    var scale = (function () {
+        return Array.isArray(code) && code.length > 1 ? code[0] : '64 64';
+    })();
+    var viewBox = (function () {
+        return rest['viewBox'] || "0 0 ".concat(scale);
+    })();
+    // render
+    var _className = customClassName
+        ? classNames(customClassName)
+        : classNames('icon', (_b = {},
+            _b["icon-".concat(size)] = size,
+            _b["icon-custom-size"] = height || width,
+            _b), className);
+    return use ? (React$1.createElement("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", className: _className }, (height && { height: height }), (width && { width: width }), { role: "img" }, rest, { ref: ref }),
+        React$1.createElement("use", { href: use }))) : (React$1.createElement("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: viewBox, className: _className }, (height && { height: height }), (width && { width: width }), { role: "img", dangerouslySetInnerHTML: { __html: titleCode + iconCode } }, rest, { ref: ref })));
+});
+CIcon.propTypes = {
+    className: propTypes.exports.string,
+    content: propTypes.exports.oneOfType([propTypes.exports.array, propTypes.exports.string]),
+    customClassName: propTypes.exports.string,
+    height: propTypes.exports.number,
+    icon: propTypes.exports.oneOfType([propTypes.exports.array, propTypes.exports.string]),
+    name: propTypes.exports.string,
+    size: propTypes.exports.oneOf([
+        'custom',
+        'custom-size',
+        'sm',
+        'lg',
+        'xl',
+        'xxl',
+        '3xl',
+        '4xl',
+        '5xl',
+        '6xl',
+        '7xl',
+        '8xl',
+        '9xl',
+    ]),
+    title: propTypes.exports.any,
+    use: propTypes.exports.any,
+    width: propTypes.exports.number,
+};
+CIcon.displayName = 'CIcon';
+
+var CSmartPagination = React$1.forwardRef(function (_a, ref) {
+    var className = _a.className, _b = _a.activePage, activePage = _b === void 0 ? 1 : _b, _c = _a.align, align = _c === void 0 ? 'start' : _c, _d = _a.arrows, arrows = _d === void 0 ? true : _d, _e = _a.dots, dots = _e === void 0 ? true : _e, _f = _a.doubleArrows, doubleArrows = _f === void 0 ? true : _f, _g = _a.firstButton, firstButton = _g === void 0 ? React$1.createElement(React$1.Fragment, null, "\u00AB") : _g, _h = _a.lastButton, lastButton = _h === void 0 ? React$1.createElement(React$1.Fragment, null, "\u00BB") : _h, _j = _a.limit, limit = _j === void 0 ? 5 : _j, _k = _a.nextButton, nextButton = _k === void 0 ? React$1.createElement(React$1.Fragment, null, "\u203A") : _k, onActivePageChange = _a.onActivePageChange, pages = _a.pages, _l = _a.previousButton, previousButton = _l === void 0 ? React$1.createElement(React$1.Fragment, null, "\u2039") : _l, size = _a.size, rest = __rest$1(_a, ["className", "activePage", "align", "arrows", "dots", "doubleArrows", "firstButton", "lastButton", "limit", "nextButton", "onActivePageChange", "pages", "previousButton", "size"]);
+    var _classNames = classNames$1("justify-content-".concat(align), className);
+    var showDots = (function () {
+        return dots && limit > 4 && limit < pages;
+    })();
+    var maxPrevItems = (function () {
+        return Math.floor((limit - 1) / 2);
+    })();
+    var maxNextItems = (function () {
+        return Math.ceil((limit - 1) / 2);
+    })();
+    var beforeDots = (function () {
+        return showDots && activePage > maxPrevItems + 1;
+    })();
+    var afterDots = (function () {
+        return showDots && activePage < pages - maxNextItems;
+    })();
+    var computedLimit = (function () {
+        return limit - (afterDots ? 1 : 0) - (beforeDots ? 1 : 0);
+    })();
+    var range = (function () {
+        return activePage + maxNextItems;
+    })();
+    var lastItem = (function () {
+        return range >= pages ? pages : range - (afterDots ? 1 : 0);
+    })();
+    var itemsAmount = (function () {
+        return pages < computedLimit ? pages : computedLimit;
+    })();
+    var items = (function () {
+        if (activePage - maxPrevItems <= 1) {
+            return Array.from({
+                length: itemsAmount,
+            }, function (_v, i) { return i + 1; });
+        }
+        else {
+            return Array.from({
+                length: itemsAmount,
+            }, function (_v, i) {
+                return lastItem - i;
+            }).reverse();
+        }
+    })();
+    var setPage = function (number) {
+        if (number !== activePage) {
+            onActivePageChange && onActivePageChange(number);
+        }
+    };
+    return (React$1.createElement(CPagination, __assign$1({ className: _classNames, "aria-label": "pagination", size: size }, rest, { ref: ref }),
+        doubleArrows && (React$1.createElement(CPaginationItem, { onClick: function () { return setPage(1); }, "aria-label": "Go to first page", "aria-disabled": activePage === 1, disabled: activePage === 1 }, firstButton)),
+        arrows && (React$1.createElement(CPaginationItem, { onClick: function () { return setPage(activePage - 1); }, "aria-label": "Go to previous page", "aria-disabled": activePage === 1, disabled: activePage === 1 }, previousButton)),
+        beforeDots && (React$1.createElement(CPaginationItem, { role: "separator", disabled: true }, "\u2026")),
+        items.map(function (i) {
+            return (React$1.createElement(CPaginationItem, { onClick: function () { return setPage(i); }, "aria-label": activePage === i ? "Current page ".concat(i) : "Go to page ".concat(i), active: activePage === i, key: i }, i));
+        }),
+        afterDots && (React$1.createElement(CPaginationItem, { role: "separator", disabled: true }, "\u2026")),
+        arrows && (React$1.createElement(CPaginationItem, { onClick: function () { return setPage(activePage + 1); }, "aria-label": "Go to next page", "aria-disabled": activePage === pages, disabled: activePage === pages }, nextButton)),
+        doubleArrows && (React$1.createElement(CPaginationItem, { onClick: function () { return setPage(pages); }, "aria-label": "Go to last page", "aria-disabled": activePage === pages, disabled: activePage === pages }, lastButton))));
+});
+CSmartPagination.propTypes = {
+    className: propTypesExports.oneOfType([propTypesExports.string]),
+    activePage: propTypesExports.number,
+    dots: propTypesExports.bool,
+    arrows: propTypesExports.bool,
+    doubleArrows: propTypesExports.bool,
+    firstButton: propTypesExports.oneOfType([propTypesExports.node, propTypesExports.string]),
+    previousButton: propTypesExports.oneOfType([propTypesExports.node, propTypesExports.string]),
+    nextButton: propTypesExports.oneOfType([propTypesExports.node, propTypesExports.string]),
+    lastButton: propTypesExports.oneOfType([propTypesExports.node, propTypesExports.string]),
+    size: propTypesExports.oneOf(['sm', 'lg']),
+    align: propTypesExports.oneOf(['start', 'center', 'end']),
+    limit: propTypesExports.number,
+    pages: propTypesExports.number.isRequired,
+    onActivePageChange: propTypesExports.func,
+};
+CSmartPagination.displayName = 'CSmartPagination';
+
+var CTableHead = React$1.forwardRef(function (_a, ref) {
+    var _b;
+    var children = _a.children, className = _a.className, color = _a.color, rest = __rest$1(_a, ["children", "className", "color"]);
+    var _className = classNames$1((_b = {},
+        _b["table-".concat(color)] = color,
+        _b), className);
+    return (React$1.createElement("thead", __assign$1({ className: _className ? _className : undefined }, rest, { ref: ref }), children));
+});
+CTableHead.propTypes = {
+    children: propTypesExports.node,
+    className: propTypesExports.string,
+    color: colorPropType,
+};
+CTableHead.displayName = 'CTableHead';
+
+var CTableHeaderCell = React$1.forwardRef(function (_a, ref) {
+    var _b;
+    var children = _a.children, className = _a.className, color = _a.color, rest = __rest$1(_a, ["children", "className", "color"]);
+    var _className = classNames$1((_b = {},
+        _b["table-".concat(color)] = color,
+        _b), className);
+    return (React$1.createElement("th", __assign$1({ className: _className ? _className : undefined }, rest, { ref: ref }), children));
+});
+CTableHeaderCell.propTypes = {
+    children: propTypesExports.node,
+    className: propTypesExports.string,
+    color: colorPropType,
+};
+CTableHeaderCell.displayName = 'CTableHeaderCell';
+
+var CTableBody = React$1.forwardRef(function (_a, ref) {
+    var _b;
+    var children = _a.children, className = _a.className, color = _a.color, rest = __rest$1(_a, ["children", "className", "color"]);
+    var _className = classNames$1((_b = {},
+        _b["table-".concat(color)] = color,
+        _b), className);
+    return (React$1.createElement("tbody", __assign$1({ className: _className ? _className : undefined }, rest, { ref: ref }), children));
+});
+CTableBody.propTypes = {
+    children: propTypesExports.node,
+    className: propTypesExports.string,
+    color: colorPropType,
+};
+CTableBody.displayName = 'CTableBody';
 
-		if (module.exports) {
-			classNames.default = classNames;
-			module.exports = classNames;
-		} else {
-			window.classNames = classNames;
-		}
-	}());
-} (classnames));
+var CTableDataCell = React$1.forwardRef(function (_a, ref) {
+    var _b;
+    var children = _a.children, active = _a.active, align = _a.align, className = _a.className, color = _a.color, rest = __rest$1(_a, ["children", "active", "align", "className", "color"]);
+    var _className = classNames$1((_b = {},
+        _b["align-".concat(align)] = align,
+        _b['table-active'] = active,
+        _b["table-".concat(color)] = color,
+        _b), className);
+    var Component = rest.scope ? 'th' : 'td';
+    return (React$1.createElement(Component, __assign$1({ className: _className ? _className : undefined }, rest, { ref: ref }), children));
+});
+CTableDataCell.propTypes = {
+    active: propTypesExports.bool,
+    align: propTypesExports.oneOf(['bottom', 'middle', 'top']),
+    children: propTypesExports.node,
+    className: propTypesExports.string,
+    color: colorPropType,
+};
+CTableDataCell.displayName = 'CTableDataCell';
 
-var classNames = classnames.exports;
+var CTableRow = React$1.forwardRef(function (_a, ref) {
+    var _b;
+    var children = _a.children, active = _a.active, align = _a.align, className = _a.className, color = _a.color, rest = __rest$1(_a, ["children", "active", "align", "className", "color"]);
+    var _className = classNames$1((_b = {},
+        _b["align-".concat(align)] = align,
+        _b['table-active'] = active,
+        _b["table-".concat(color)] = color,
+        _b), className);
+    return (React$1.createElement("tr", __assign$1({ className: _className ? _className : undefined }, rest, { ref: ref }), children));
+});
+CTableRow.propTypes = {
+    active: propTypesExports.bool,
+    align: propTypesExports.oneOf(['bottom', 'middle', 'top']),
+    children: propTypesExports.node,
+    className: propTypesExports.string,
+    color: colorPropType,
+};
+CTableRow.displayName = 'CTableRow';
 
-var toCamelCase = function (str) {
-    return str
-        .replace(/([-_][a-z0-9])/gi, function ($1) {
-        return $1.toUpperCase();
-    })
-        .replace(/-/gi, '');
+var CTableFoot = React$1.forwardRef(function (_a, ref) {
+    var _b;
+    var children = _a.children, className = _a.className, color = _a.color, rest = __rest$1(_a, ["children", "className", "color"]);
+    var _className = classNames$1((_b = {},
+        _b["table-".concat(color)] = color,
+        _b), className);
+    return (React$1.createElement("tfoot", __assign$1({ className: _className ? _className : undefined }, rest, { ref: ref }), children));
+});
+CTableFoot.propTypes = {
+    children: propTypesExports.node,
+    className: propTypesExports.string,
+    color: colorPropType,
 };
-var CIcon = React$1.forwardRef(function (_a, ref) {
+CTableFoot.displayName = 'CTableFoot';
+
+var CTableCaption = React$1.forwardRef(function (_a, ref) {
+    var children = _a.children, props = __rest$1(_a, ["children"]);
+    return (React$1.createElement("caption", __assign$1({}, props, { ref: ref }), children));
+});
+CTableCaption.propTypes = {
+    children: propTypesExports.node,
+};
+CTableCaption.displayName = 'CTableCaption';
+
+var CTableResponsiveWrapper = function (_a) {
+    var children = _a.children, responsive = _a.responsive, rest = __rest$1(_a, ["children", "responsive"]);
+    return responsive ? (React$1.createElement("div", __assign$1({ className: typeof responsive === 'boolean' ? 'table-responsive' : "table-responsive-".concat(responsive) }, rest), children)) : (children);
+};
+CTableResponsiveWrapper.propTypes = {
+    children: propTypesExports.any,
+    responsive: propTypesExports.oneOfType([
+        propTypesExports.bool,
+        propTypesExports.oneOf(['sm', 'md', 'lg', 'xl', 'xxl']),
+    ]),
+};
+CTableResponsiveWrapper.displayName = 'CTableResponsiveWrapper';
+
+var CTable = React$1.forwardRef(function (_a, ref) {
     var _b;
-    var className = _a.className, content = _a.content, customClassName = _a.customClassName, height = _a.height, icon = _a.icon, name = _a.name, size = _a.size, title = _a.title, use = _a.use, width = _a.width, rest = __rest(_a, ["className", "content", "customClassName", "height", "icon", "name", "size", "title", "use", "width"]);
-    var _c = React$1.useState(0), change = _c[0], setChange = _c[1];
-    var _icon = icon || content || name;
-    if (content) {
-        process &&
-            process.env &&
-            process.env.NODE_ENV === 'development' &&
-            console.warn('[CIcon] The `content` property is deprecated and will be removed in v3, please use `icon={...}` instead of.');
-    }
-    if (name) {
-        process &&
-            process.env &&
-            process.env.NODE_ENV === 'development' &&
-            console.warn('[CIcon] The `name` property is deprecated and will be removed in v3, please use `icon="..."` instead of.');
+    var children = _a.children, align = _a.align, borderColor = _a.borderColor, bordered = _a.bordered, borderless = _a.borderless, caption = _a.caption, captionTop = _a.captionTop, className = _a.className, color = _a.color, columns = _a.columns, footer = _a.footer, hover = _a.hover, items = _a.items, responsive = _a.responsive, small = _a.small, striped = _a.striped, stripedColumns = _a.stripedColumns, tableFootProps = _a.tableFootProps, tableHeadProps = _a.tableHeadProps, rest = __rest$1(_a, ["children", "align", "borderColor", "bordered", "borderless", "caption", "captionTop", "className", "color", "columns", "footer", "hover", "items", "responsive", "small", "striped", "stripedColumns", "tableFootProps", "tableHeadProps"]);
+    var _className = classNames$1('table', (_b = {},
+        _b["align-".concat(align)] = align,
+        _b["border-".concat(borderColor)] = borderColor,
+        _b["caption-top"] = captionTop || caption === 'top',
+        _b['table-bordered'] = bordered,
+        _b['table-borderless'] = borderless,
+        _b["table-".concat(color)] = color,
+        _b['table-hover'] = hover,
+        _b['table-sm'] = small,
+        _b['table-striped'] = striped,
+        _b['table-striped-columns'] = stripedColumns,
+        _b), className);
+    var rawColumnNames = columns
+        ? columns.map(function (column) {
+            if (typeof column === 'object')
+                return column.key;
+            else
+                return column;
+        })
+        : Object.keys((items && items[0]) || {}).filter(function (el) { return el.charAt(0) !== '_'; });
+    var pretifyName = function (name) {
+        return name
+            .replace(/[-_.]/g, ' ')
+            .replace(/ +/g, ' ')
+            .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+            .split(' ')
+            .map(function (word) { return word.charAt(0).toUpperCase() + word.slice(1); })
+            .join(' ');
+    };
+    var label = function (column) {
+        return typeof column === 'object'
+            ? column.label !== undefined
+                ? column.label
+                : pretifyName(column.key)
+            : pretifyName(column);
+    };
+    return (React$1.createElement(CTableResponsiveWrapper, { responsive: responsive },
+        React$1.createElement("table", __assign$1({ className: _className }, rest, { ref: ref }),
+            ((caption && caption !== 'top') || captionTop) && (React$1.createElement(CTableCaption, null, caption || captionTop)),
+            columns && (React$1.createElement(CTableHead, __assign$1({}, tableHeadProps),
+                React$1.createElement(CTableRow, null, columns.map(function (column, index) { return (React$1.createElement(CTableHeaderCell, __assign$1({}, (column._props && __assign$1({}, column._props)), (column._style && { style: __assign$1({}, column._style) }), { key: index }), label(column))); })))),
+            items && (React$1.createElement(CTableBody, null, items.map(function (item, index) { return (React$1.createElement(CTableRow, __assign$1({}, (item._props && __assign$1({}, item._props)), { key: index }), rawColumnNames.map(function (colName, index) {
+                return item[colName] ? (React$1.createElement(CTableDataCell, __assign$1({}, (item._cellProps && __assign$1(__assign$1({}, (item._cellProps['all'] && __assign$1({}, item._cellProps['all']))), (item._cellProps[colName] && __assign$1({}, item._cellProps[colName])))), { key: index }), item[colName])) : null;
+            }))); }))),
+            children,
+            footer && (React$1.createElement(CTableFoot, __assign$1({}, tableFootProps),
+                React$1.createElement(CTableRow, null, footer.map(function (item, index) { return (React$1.createElement(CTableDataCell, __assign$1({}, (typeof item === 'object' && item._props && __assign$1({}, item._props)), { key: index }), typeof item === 'object' ? item.label : item)); })))))));
+});
+CTable.propTypes = {
+    align: propTypesExports.oneOf(['bottom', 'middle', 'top']),
+    borderColor: propTypesExports.string,
+    bordered: propTypesExports.bool,
+    borderless: propTypesExports.bool,
+    caption: propTypesExports.oneOfType([propTypesExports.string, propTypesExports.oneOf(['top'])]),
+    captionTop: propTypesExports.string,
+    children: propTypesExports.node,
+    className: propTypesExports.string,
+    color: colorPropType,
+    columns: propTypesExports.array,
+    footer: propTypesExports.array,
+    hover: propTypesExports.bool,
+    items: propTypesExports.array,
+    responsive: propTypesExports.oneOfType([
+        propTypesExports.bool,
+        propTypesExports.oneOf(['sm', 'md', 'lg', 'xl', 'xxl']),
+    ]),
+    small: propTypesExports.bool,
+    striped: propTypesExports.bool,
+    stripedColumns: propTypesExports.bool,
+    tableFootProps: propTypesExports.shape(__assign$1({}, CTableFoot.propTypes)),
+    tableHeadProps: propTypesExports.shape(__assign$1({}, CTableHead.propTypes)),
+};
+CTable.displayName = 'CTable';
+
+var filterColumns = function (items, columnFilter, columnFilterState, itemsDataColumns) {
+    if (columnFilter && typeof columnFilter === 'object' && columnFilter.external) {
+        return items;
     }
-    React$1.useMemo(function () { return setChange(change + 1); }, [_icon, JSON.stringify(_icon)]);
-    var iconName = React$1.useMemo(function () {
-        return _icon && typeof _icon === 'string' && _icon.includes('-') ? toCamelCase(_icon) : _icon;
-    }, [change]);
-    var titleCode = title ? "<title>".concat(title, "</title>") : '';
-    var code = React$1.useMemo(function () {
-        if (Array.isArray(_icon)) {
-            return _icon;
+    Object.entries(columnFilterState).forEach(function (_a) {
+        var key = _a[0], value = _a[1];
+        if (value instanceof Function) {
+            items = items.filter(function (item) { return value(item[key]); });
+            return;
         }
-        if (typeof _icon === 'string' && React$1['icons']) {
-            return React$1['icons'][iconName];
+        var columnFilter = String(value).toLowerCase();
+        if (columnFilter && itemsDataColumns.includes(key)) {
+            items = items.filter(function (item) {
+                return String(item[key]).toLowerCase().includes(columnFilter);
+            });
         }
-    }, [change]);
-    var iconCode = React$1.useMemo(function () {
-        return Array.isArray(code) ? code[1] || code[0] : code;
-    }, [change]);
-    var scale = (function () {
-        return Array.isArray(code) && code.length > 1 ? code[0] : '64 64';
-    })();
-    var viewBox = (function () {
-        return rest['viewBox'] || "0 0 ".concat(scale);
-    })();
-    // render
-    var _className = customClassName
-        ? classNames(customClassName)
-        : classNames('icon', (_b = {},
-            _b["icon-".concat(size)] = size,
-            _b["icon-custom-size"] = height || width,
-            _b), className);
-    return use ? (React$1.createElement("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", className: _className }, (height && { height: height }), (width && { width: width }), { role: "img" }, rest, { ref: ref }),
-        React$1.createElement("use", { href: use }))) : (React$1.createElement("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: viewBox, className: _className }, (height && { height: height }), (width && { width: width }), { role: "img", dangerouslySetInnerHTML: { __html: titleCode + iconCode } }, rest, { ref: ref })));
+    });
+    return items;
+};
+var filterTable = function (items, tableFilter, tableFilterState, itemsDataColumns) {
+    if (!tableFilterState ||
+        (tableFilter && typeof tableFilter === 'object' && tableFilter.external)) {
+        return items;
+    }
+    var filter = tableFilterState.toLowerCase();
+    var valueContainFilter = function (val) { return String(val).toLowerCase().includes(filter); };
+    items = items.filter(function (item) {
+        return !!itemsDataColumns.find(function (key) { return valueContainFilter(item[key]); });
+    });
+    return items;
+};
+var getClickedColumnName = function (target, columnNames) {
+    var closest = target.closest('tr');
+    var children = closest ? Array.from(closest.children) : [];
+    var clickedCell = children.filter(function (child) { return child.contains(target); })[0];
+    return columnNames[children.indexOf(clickedCell)];
+};
+var getColumnKey = function (column) {
+    return typeof column === 'object' ? column.key : column;
+};
+var getColumnLabel = function (column) {
+    return typeof column === 'object'
+        ? column.label !== undefined
+            ? column.label
+            : pretifyName(column.key)
+        : pretifyName(column);
+};
+var getColumnNames = function (columns, items) {
+    return columns
+        ? columns.map(function (column) {
+            if (typeof column === 'object')
+                return column.key;
+            else
+                return column;
+        })
+        : getColumnNamesFromItems(items);
+};
+var getColumnNamesFromItems = function (items) {
+    return Object.keys(items[0] || {}).filter(function (el) { return el.charAt(0) !== '_'; });
+};
+var getColumnSorterState = function (key, sorterState) {
+    if (sorterState && sorterState.column === key) {
+        if (sorterState.state) {
+            return sorterState.state;
+        }
+        return 0;
+    }
+    return 0;
+};
+var getColumnValues = function (items, key) {
+    return items.map(function (item) { return item[key]; });
+};
+var getTableDataCellProps = function (item, colName) {
+    var props = item._cellProps && __assign$1(__assign$1({}, (item._cellProps['all'] && __assign$1({}, item._cellProps['all']))), (item._cellProps[colName] && __assign$1({}, item._cellProps[colName])));
+    return props;
+};
+var getTableHeaderCellProps = function (column) {
+    if (typeof column === 'object' && column._props) {
+        return column._props;
+    }
+    return {};
+};
+var getTableHeaderCellStyles = function (column, columnSorter) {
+    var style = {};
+    if (columnSorter &&
+        (typeof column !== 'object' ||
+            (typeof column === 'object' && (typeof column.sorter === 'undefined' || column.sorter)))) {
+        style['cursor'] = 'pointer';
+    }
+    if (typeof column === 'object' && column._style) {
+        return __assign$1(__assign$1({}, style), column._style);
+    }
+    return style;
+};
+var isSortable = function (i, columns, columnSorter, itemsDataColumns, columnNames) {
+    var isDataColumn = itemsDataColumns.includes(columnNames[i]);
+    var column;
+    if (columns)
+        column = columns[i];
+    return (columnSorter &&
+        (!columns ||
+            typeof column !== 'object' ||
+            (typeof column === 'object' && (typeof column.sorter === 'undefined' || column.sorter))) &&
+        isDataColumn);
+};
+var pretifyName = function (name) {
+    return name
+        .replace(/[-_.]/g, ' ')
+        .replace(/ +/g, ' ')
+        .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+        .split(' ')
+        .map(function (word) { return word.charAt(0).toUpperCase() + word.slice(1); })
+        .join(' ');
+};
+var sortItems = function (columnSorter, items, itemsDataColumns, sorterState) {
+    var column = sorterState.column;
+    if (!column ||
+        !itemsDataColumns.includes(column) ||
+        (columnSorter && typeof columnSorter === 'object' && columnSorter.external)) {
+        return items;
+    }
+    var flip = sorterState.state === 'asc' ? 1 : sorterState.state === 'desc' ? -1 : 0;
+    var sorted = items.slice().sort(function (item, item2) {
+        var value = item[column];
+        var value2 = item2[column];
+        var a = typeof value === 'number' ? value : String(value).toLowerCase();
+        var b = typeof value2 === 'number' ? value2 : String(value2).toLowerCase();
+        return a > b ? 1 * flip : b > a ? -1 * flip : 0;
+    });
+    return sorted;
+};
+
+var CSmartTableBody = React$1.forwardRef(function (_a, ref) {
+    var clickableRows = _a.clickableRows, columnNames = _a.columnNames, currentItems = _a.currentItems, firstItemOnActivePageIndex = _a.firstItemOnActivePageIndex, noItemsLabel = _a.noItemsLabel, onRowChecked = _a.onRowChecked, onRowClick = _a.onRowClick, scopedColumns = _a.scopedColumns, selectable = _a.selectable, selected = _a.selected, rest = __rest$1(_a, ["clickableRows", "columnNames", "currentItems", "firstItemOnActivePageIndex", "noItemsLabel", "onRowChecked", "onRowClick", "scopedColumns", "selectable", "selected"]);
+    var colspan = selectable ? columnNames.length + 1 : columnNames.length;
+    return (React$1.createElement(CTableBody, __assign$1({}, (clickableRows && {
+        style: { cursor: 'pointer' },
+    }), rest, { ref: ref }),
+        currentItems.map(function (item, trIndex) {
+            return (React$1.createElement(React$1.Fragment, { key: trIndex },
+                React$1.createElement(CTableRow, __assign$1({}, (item._props && __assign$1({}, item._props)), (clickableRows && { tabIndex: 0 }), { onClick: function (event) {
+                        return onRowClick &&
+                            onRowClick(item, trIndex + firstItemOnActivePageIndex, getClickedColumnName(event.target, columnNames), event);
+                    } }),
+                    selectable && (React$1.createElement(CTableDataCell, null,
+                        React$1.createElement(CFormCheck, { checked: selected &&
+                                isObjectInArray(selected, item, ['_cellProps', '_props', '_selected']), onChange: function (event) {
+                                var _item = __assign$1({}, item);
+                                delete _item['_cellProps'];
+                                delete _item['_props'];
+                                delete _item['_selected'];
+                                onRowChecked && onRowChecked(_item, event.target.checked);
+                            } }))),
+                    columnNames.map(function (colName, index) {
+                        return ((scopedColumns &&
+                            scopedColumns[colName] &&
+                            React$1.cloneElement(scopedColumns[colName](item, trIndex + firstItemOnActivePageIndex), {
+                                key: index,
+                            })) || (React$1.createElement(CTableDataCell, __assign$1({}, getTableDataCellProps(item, colName), { key: index }), String(item[colName]))));
+                    })),
+                scopedColumns && scopedColumns.details && (React$1.createElement(React$1.Fragment, null,
+                    React$1.createElement(CTableRow, null,
+                        React$1.createElement(CTableDataCell, { colSpan: colspan, className: "p-0", style: { borderBottomWidth: 0 }, tabIndex: -1 })),
+                    React$1.createElement(CTableRow, { onClick: function (event) {
+                            return onRowClick &&
+                                onRowClick(item, trIndex + firstItemOnActivePageIndex, getClickedColumnName(event.target, columnNames), true);
+                        }, className: "p-0", key: "details".concat(trIndex) },
+                        React$1.createElement(CTableDataCell, { colSpan: colspan, className: "p-0", style: { border: 0 } }, scopedColumns.details(item, trIndex + firstItemOnActivePageIndex)))))));
+        }),
+        !currentItems.length && (React$1.createElement(CTableRow, null,
+            React$1.createElement(CTableDataCell, { colSpan: colspan }, noItemsLabel)))));
 });
-CIcon.propTypes = {
-    className: propTypes.exports.string,
-    content: propTypes.exports.oneOfType([propTypes.exports.array, propTypes.exports.string]),
-    customClassName: propTypes.exports.string,
-    height: propTypes.exports.number,
-    icon: propTypes.exports.oneOfType([propTypes.exports.array, propTypes.exports.string]),
-    name: propTypes.exports.string,
-    size: propTypes.exports.oneOf([
-        'custom',
-        'custom-size',
-        'sm',
-        'lg',
-        'xl',
-        'xxl',
-        '3xl',
-        '4xl',
-        '5xl',
-        '6xl',
-        '7xl',
-        '8xl',
-        '9xl',
-    ]),
-    title: propTypes.exports.any,
-    use: propTypes.exports.any,
-    width: propTypes.exports.number,
+CSmartTableBody.propTypes = {
+    clickableRows: propTypesExports.bool,
+    currentItems: propTypesExports.array.isRequired,
+    firstItemOnActivePageIndex: propTypesExports.number.isRequired,
+    noItemsLabel: propTypesExports.oneOfType([propTypesExports.string, propTypesExports.node]),
+    onRowChecked: propTypesExports.func,
+    onRowClick: propTypesExports.func,
+    columnNames: propTypesExports.array.isRequired,
+    scopedColumns: propTypesExports.object,
+    selectable: propTypesExports.bool,
+    selected: propTypesExports.array,
 };
-CIcon.displayName = 'CIcon';
+CSmartTableBody.displayName = 'CSmartTableBody';
 
 var CSmartTableCleaner = React$1.forwardRef(function (_a, ref) {
     var _b = _a.content, content = _b === void 0 ? React$1.createElement(CIcon, { width: 18, icon: cilFilterX }) : _b, isFiltered = _a.isFiltered, rest = __rest$1(_a, ["content", "isFiltered"]);
@@ -13935,23 +14113,20 @@ CSmartTableCleaner.propTypes = {
 };
 CSmartTableCleaner.displayName = 'CSmartTableCleaner';
 
-var CSmartTableFilter = React$1.forwardRef(function (_a, ref) {
-    var filterLabel = _a.filterLabel, filterPlaceholder = _a.filterPlaceholder, value = _a.value, rest = __rest$1(_a, ["filterLabel", "filterPlaceholder", "value"]);
-    return (React$1.createElement("div", { className: "row mb-2" },
-        React$1.createElement(CFormLabel, { className: "col-sm-auto col-form-label" }, filterLabel),
-        React$1.createElement("div", { className: "col-sm-auto" },
-            React$1.createElement(CFormInput, __assign$1({ placeholder: filterPlaceholder, value: value }, rest, { ref: ref })))));
-});
-CSmartTableFilter.propTypes = {
-    filterLabel: propTypesExports.string,
-    filterPlaceholder: propTypesExports.string,
-    value: propTypesExports.oneOfType([propTypesExports.number, propTypesExports.string]),
-};
-CSmartTableFilter.displayName = 'CSmartTableFilter';
-
 var CSmartTableHead = React$1.forwardRef(function (_a, ref) {
-    var columnFilter = _a.columnFilter, columnFilterState = _a.columnFilterState, columnSorter = _a.columnSorter, _b = _a.component, Component = _b === void 0 ? CTableHead : _b, columns = _a.columns, handleOnCustomFilterChange = _a.handleOnCustomFilterChange, handleFilterOnChange = _a.handleFilterOnChange, handleFilterOnInput = _a.handleFilterOnInput, handleSelectAllChecked = _a.handleSelectAllChecked, handleSort = _a.handleSort, items = _a.items, selectable = _a.selectable, selectAll = _a.selectAll, sorterState = _a.sorterState, sortingIcon = _a.sortingIcon, sortingIconAscending = _a.sortingIconAscending, sortingIconDescending = _a.sortingIconDescending, rest = __rest$1(_a, ["columnFilter", "columnFilterState", "columnSorter", "component", "columns", "handleOnCustomFilterChange", "handleFilterOnChange", "handleFilterOnInput", "handleSelectAllChecked", "handleSort", "items", "selectable", "selectAll", "sorterState", "sortingIcon", "sortingIconAscending", "sortingIconDescending"]);
+    var columnFilter = _a.columnFilter, columnFilterState = _a.columnFilterState, columnSorter = _a.columnSorter, _b = _a.component, Component = _b === void 0 ? CTableHead : _b, columns = _a.columns, handleOnCustomFilterChange = _a.handleOnCustomFilterChange, handleFilterOnChange = _a.handleFilterOnChange, handleFilterOnInput = _a.handleFilterOnInput, handleSelectAllChecked = _a.handleSelectAllChecked, handleSort = _a.handleSort, items = _a.items, selectable = _a.selectable, selectAll = _a.selectAll, selectedAll = _a.selectedAll, sorterState = _a.sorterState, sortingIcon = _a.sortingIcon, sortingIconAscending = _a.sortingIconAscending, sortingIconDescending = _a.sortingIconDescending, rest = __rest$1(_a, ["columnFilter", "columnFilterState", "columnSorter", "component", "columns", "handleOnCustomFilterChange", "handleFilterOnChange", "handleFilterOnInput", "handleSelectAllChecked", "handleSort", "items", "selectable", "selectAll", "selectedAll", "sorterState", "sortingIcon", "sortingIconAscending", "sortingIconDescending"]);
+    var selectAllcheckboxRef = React$1.useRef(null);
     var _c = React$1.useState(false), refresh = _c[0], setRefresh = _c[1];
+    React$1.useEffect(function () {
+        if (selectedAll === 'indeterminate') {
+            if (selectAllcheckboxRef.current)
+                selectAllcheckboxRef.current.indeterminate = true;
+        }
+        else {
+            if (selectAllcheckboxRef.current)
+                selectAllcheckboxRef.current.indeterminate = false;
+        }
+    }, [selectedAll]);
     React$1.useEffect(function () {
         if (columnFilterState && Object.keys(columnFilterState).length === 0) {
             setRefresh(true);
@@ -13965,83 +14140,24 @@ var CSmartTableHead = React$1.forwardRef(function (_a, ref) {
             setRefresh(false);
         }
     }, [refresh]);
-    var tableHeaderCellProps = function (column) {
-        if (typeof column === 'object' && column._props) {
-            return column._props;
-        }
-        return {};
-    };
-    var tableHeaderCellStyles = function (column) {
-        var style = { verticalAlign: 'middle', overflow: 'hidden', cursor: '' };
-        if (columnSorter &&
-            (typeof column !== 'object' ||
-                (typeof column === 'object' && (typeof column.sorter === 'undefined' || column.sorter)))) {
-            style.cursor = 'pointer';
-        }
-        if (typeof column === 'object' && column._style) {
-            return __assign$1(__assign$1({}, style), column._style);
-        }
-        return style;
-    };
-    var pretifyName = function (name) {
-        return name
-            .replace(/[-_.]/g, ' ')
-            .replace(/ +/g, ' ')
-            .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
-            .split(' ')
-            .map(function (word) { return word.charAt(0).toUpperCase() + word.slice(1); })
-            .join(' ');
-    };
-    var label = function (column) {
-        return typeof column === 'object'
-            ? column.label !== undefined
-                ? column.label
-                : pretifyName(column.key)
-            : pretifyName(column);
-    };
-    var key = function (column) { return (typeof column === 'object' ? column.key : column); };
-    var getColumnSorterState = function (key) {
-        if (sorterState && sorterState.column === key) {
-            if (sorterState.state) {
-                return sorterState.state;
-            }
-            return 0;
-        }
-        return 0;
-    };
-    var getValues = function (items, key) {
-        return items.map(function (a) { return a[key]; });
-    };
     var columnSorterIcon = function (column) {
-        if (getColumnSorterState(key(column)) === 0) {
+        if (getColumnSorterState(getColumnKey(column), sorterState) === 0) {
             return React$1.createElement("span", { className: "opacity-25 float-end me-1" }, sortingIcon);
         }
-        if (getColumnSorterState(key(column)) === 'asc') {
+        if (getColumnSorterState(getColumnKey(column), sorterState) === 'asc') {
             return React$1.createElement("span", { className: "float-end me-1" }, sortingIconAscending);
         }
-        if (getColumnSorterState(key(column)) === 'desc') {
+        if (getColumnSorterState(getColumnKey(column), sorterState) === 'desc') {
             return React$1.createElement("span", { className: "float-end me-1" }, sortingIconDescending);
         }
         return;
     };
-    var checkboxRef = React$1.useRef(null);
-    React$1.useEffect(function () {
-        if (selectAll === 'indeterminate') {
-            if (checkboxRef.current)
-                checkboxRef.current.indeterminate = true;
-        }
-        else {
-            if (checkboxRef.current)
-                checkboxRef.current.indeterminate = false;
-        }
-    }, [selectAll]);
     return (React$1.createElement(Component, __assign$1({}, rest, { ref: ref }),
         React$1.createElement(CTableRow, null,
-            selectable && (React$1.createElement(CTableHeaderCell, null,
-                React$1.createElement(CFormCheck, { checked: typeof selectAll === 'boolean' ? selectAll : false, onChange: function () { return handleSelectAllChecked && handleSelectAllChecked(); }, ref: checkboxRef }))),
+            selectable && (React$1.createElement(CTableHeaderCell, null, selectAll && (React$1.createElement(CFormCheck, { checked: typeof selectedAll === 'boolean' ? selectedAll : false, onChange: function () { return handleSelectAllChecked && handleSelectAllChecked(); }, ref: selectAllcheckboxRef })))),
             columns.map(function (column, index) {
-                return (React$1.createElement(CTableHeaderCell, __assign$1({}, tableHeaderCellProps(column), { onClick: function () { return handleSort && handleSort(key(column), index); }, style: tableHeaderCellStyles(column), key: index }),
-                    React$1.createElement("div", { className: "d-inline" }, label(column)),
+                return (React$1.createElement(CTableHeaderCell, __assign$1({}, getTableHeaderCellProps(column), { onClick: function () { return handleSort && handleSort(getColumnKey(column), index); }, style: getTableHeaderCellStyles(column, columnSorter), key: index }),
+                    React$1.createElement("div", { className: "d-inline" }, getColumnLabel(column)),
                     columnSorter &&
                         (typeof column !== 'object'
                             ? true
@@ -14053,23 +14169,23 @@ var CSmartTableHead = React$1.forwardRef(function (_a, ref) {
         columnFilter && (React$1.createElement(CTableRow, null,
             selectable && React$1.createElement(CTableHeaderCell, null),
             columns.map(function (column, index) {
-                return (React$1.createElement(CTableHeaderCell, __assign$1({}, tableHeaderCellProps(column), { key: index }), (typeof column !== 'object'
+                return (React$1.createElement(CTableHeaderCell, __assign$1({}, getTableHeaderCellProps(column), { key: index }), (typeof column !== 'object'
                     ? true
                     : typeof column.filter === 'undefined'
                         ? true
                         : column.filter) ? (typeof column !== 'string' && typeof column.filter === 'function' ? (!refresh &&
-                    column.filter(getValues(items, key(column)), function (value) {
+                    column.filter(getColumnValues(items, getColumnKey(column)), function (value) {
                         return handleOnCustomFilterChange &&
-                            handleOnCustomFilterChange(key(column), value);
+                            handleOnCustomFilterChange(getColumnKey(column), value);
                     })) : (React$1.createElement(CFormInput, { size: "sm", onInput: function (event) {
                         return handleFilterOnInput &&
-                            handleFilterOnInput(key(column), event.target.value);
+                            handleFilterOnInput(getColumnKey(column), event.target.value);
                     }, onChange: function (event) {
                         return handleFilterOnChange &&
-                            handleFilterOnChange(key(column), event.target.value);
-                    }, value: columnFilterState && columnFilterState[key(column)]
-                        ? columnFilterState[key(column)]
-                        : '', "aria-label": "column name: '".concat(label(column), "' filter input") }))) : ('')));
+                            handleFilterOnChange(getColumnKey(column), event.target.value);
+                    }, value: columnFilterState && columnFilterState[getColumnKey(column)]
+                        ? columnFilterState[getColumnKey(column)]
+                        : '', "aria-label": "column name: '".concat(getColumnLabel(column), "' filter input") }))) : ('')));
             })))));
 });
 CSmartTableHead.propTypes = {
@@ -14084,7 +14200,8 @@ CSmartTableHead.propTypes = {
     handleSelectAllChecked: propTypesExports.func,
     handleSort: propTypesExports.func,
     selectable: propTypesExports.bool,
-    selectAll: propTypesExports.oneOfType([propTypesExports.bool, propTypesExports.string]),
+    selectAll: propTypesExports.oneOfType([propTypesExports.bool, propTypesExports.object]),
+    selectedAll: propTypesExports.oneOfType([propTypesExports.bool, propTypesExports.string]),
     sorterState: propTypesExports.object,
     sortingIcon: propTypesExports.node,
     sortingIconAscending: propTypesExports.node,
@@ -14092,72 +14209,152 @@ CSmartTableHead.propTypes = {
 };
 CSmartTableHead.displayName = 'CSmartTableHead';
 
-var CSmartTableItemsPerPageSelector = React$1.forwardRef(function (_a, ref) {
-    var itemsPerPage = _a.itemsPerPage, itemsPerPageLabel = _a.itemsPerPageLabel, itemsPerPageOptions = _a.itemsPerPageOptions, rest = __rest$1(_a, ["itemsPerPage", "itemsPerPageLabel", "itemsPerPageOptions"]);
-    return (React$1.createElement("div", { className: "row" },
-        React$1.createElement(CFormLabel, { className: "col-auto col-form-label" }, itemsPerPageLabel),
-        React$1.createElement("div", { className: "col-auto" },
-            React$1.createElement(CFormSelect, __assign$1({ defaultValue: itemsPerPage }, rest, { ref: ref }), itemsPerPageOptions &&
-                itemsPerPageOptions.map(function (number, index) {
-                    return (React$1.createElement("option", { value: number, key: index }, number));
-                })))));
-});
-CSmartTableItemsPerPageSelector.propTypes = {
-    itemsPerPage: propTypesExports.number,
-    itemsPerPageLabel: propTypesExports.string,
-    itemsPerPageOptions: propTypesExports.array,
-};
-CSmartTableItemsPerPageSelector.displayName = 'CSmartTableItemsPerPageSelector';
-
 var CSmartTable = React$1.forwardRef(function (_a, ref) {
     var _b = _a.activePage, activePage = _b === void 0 ? 1 : _b, cleaner = _a.cleaner, clickableRows = _a.clickableRows, columnFilter = _a.columnFilter, columnFilterValue = _a.columnFilterValue, // TODO: consider to use only columnFilter prop
-    columns = _a.columns, columnSorter = _a.columnSorter, footer = _a.footer, _c = _a.header, header = _c === void 0 ? true : _c, items = _a.items, _d = _a.itemsPerPage, itemsPerPage = _d === void 0 ? 10 : _d, _e = _a.itemsPerPageLabel, itemsPerPageLabel = _e === void 0 ? 'Items per page:' : _e, _f = _a.itemsPerPageOptions, itemsPerPageOptions = _f === void 0 ? [5, 10, 20, 50] : _f, itemsPerPageSelect = _a.itemsPerPageSelect, loading = _a.loading, _g = _a.noItemsLabel, noItemsLabel = _g === void 0 ? 'No items found' : _g, onActivePageChange = _a.onActivePageChange, onColumnFilterChange = _a.onColumnFilterChange, onFilteredItemsChange = _a.onFilteredItemsChange, onItemsPerPageChange = _a.onItemsPerPageChange, onRowClick = _a.onRowClick, onSelectedItemsChange = _a.onSelectedItemsChange, onSorterChange = _a.onSorterChange, onTableFilterChange = _a.onTableFilterChange, pagination = _a.pagination, paginationProps = _a.paginationProps, scopedColumns = _a.scopedColumns, selectable = _a.selectable, sorterValue = _a.sorterValue, _h = _a.sortingIcon, sortingIcon = _h === void 0 ? React$1.createElement(CIcon, { width: 18, icon: cilSwapVertical, key: "csv" }) : _h, _j = _a.sortingIconAscending, sortingIconAscending = _j === void 0 ? React$1.createElement(CIcon, { width: 18, icon: cilArrowTop, key: "cat" }) : _j, _k = _a.sortingIconDescending, sortingIconDescending = _k === void 0 ? React$1.createElement(CIcon, { width: 18, icon: cilArrowBottom, key: "cab" }) : _k, tableBodyProps = _a.tableBodyProps, tableFootProps = _a.tableFootProps, tableFilter = _a.tableFilter, _l = _a.tableFilterLabel, tableFilterLabel = _l === void 0 ? 'Filter:' : _l, _m = _a.tableFilterPlaceholder, tableFilterPlaceholder = _m === void 0 ? 'type string...' : _m, tableFilterValue = _a.tableFilterValue, // TODO: consider to use only tableFilter prop
-    tableHeadProps = _a.tableHeadProps, tableProps = _a.tableProps, rest = __rest$1(_a, ["activePage", "cleaner", "clickableRows", "columnFilter", "columnFilterValue", "columns", "columnSorter", "footer", "header", "items", "itemsPerPage", "itemsPerPageLabel", "itemsPerPageOptions", "itemsPerPageSelect", "loading", "noItemsLabel", "onActivePageChange", "onColumnFilterChange", "onFilteredItemsChange", "onItemsPerPageChange", "onRowClick", "onSelectedItemsChange", "onSorterChange", "onTableFilterChange", "pagination", "paginationProps", "scopedColumns", "selectable", "sorterValue", "sortingIcon", "sortingIconAscending", "sortingIconDescending", "tableBodyProps", "tableFootProps", "tableFilter", "tableFilterLabel", "tableFilterPlaceholder", "tableFilterValue", "tableHeadProps", "tableProps"]);
-    // instance data
+    columns = _a.columns, columnSorter = _a.columnSorter, elementCover = _a.elementCover, footer = _a.footer, _c = _a.header, header = _c === void 0 ? true : _c, items = _a.items, itemsNumber = _a.itemsNumber, _d = _a.itemsPerPage, itemsPerPage = _d === void 0 ? 10 : _d, _e = _a.itemsPerPageLabel, itemsPerPageLabel = _e === void 0 ? 'Items per page:' : _e, _f = _a.itemsPerPageOptions, itemsPerPageOptions = _f === void 0 ? [5, 10, 20, 50] : _f, itemsPerPageSelect = _a.itemsPerPageSelect, loading = _a.loading, _g = _a.noItemsLabel, noItemsLabel = _g === void 0 ? 'No items found' : _g, onActivePageChange = _a.onActivePageChange, onColumnFilterChange = _a.onColumnFilterChange, onFilteredItemsChange = _a.onFilteredItemsChange, onItemsPerPageChange = _a.onItemsPerPageChange, onRowClick = _a.onRowClick, onSelectAll = _a.onSelectAll, onSelectedItemsChange = _a.onSelectedItemsChange, onSorterChange = _a.onSorterChange, onTableFilterChange = _a.onTableFilterChange, pagination = _a.pagination, paginationProps = _a.paginationProps, scopedColumns = _a.scopedColumns, selected = _a.selected, selectable = _a.selectable, _h = _a.selectAll, selectAll = _h === void 0 ? true : _h, sorterValue = _a.sorterValue, _j = _a.sortingIcon, sortingIcon = _j === void 0 ? React$1.createElement(CIcon, { width: 18, icon: cilSwapVertical, key: "csv" }) : _j, _k = _a.sortingIconAscending, sortingIconAscending = _k === void 0 ? React$1.createElement(CIcon, { width: 18, icon: cilArrowTop, key: "cat" }) : _k, _l = _a.sortingIconDescending, sortingIconDescending = _l === void 0 ? React$1.createElement(CIcon, { width: 18, icon: cilArrowBottom, key: "cab" }) : _l, tableBodyProps = _a.tableBodyProps, tableFootProps = _a.tableFootProps, tableFilter = _a.tableFilter, _m = _a.tableFilterLabel, tableFilterLabel = _m === void 0 ? 'Filter:' : _m, _o = _a.tableFilterPlaceholder, tableFilterPlaceholder = _o === void 0 ? 'type string...' : _o, tableFilterValue = _a.tableFilterValue, // TODO: consider to use only tableFilter prop
+    tableHeadProps = _a.tableHeadProps, tableProps = _a.tableProps, rest = __rest$1(_a, ["activePage", "cleaner", "clickableRows", "columnFilter", "columnFilterValue", "columns", "columnSorter", "elementCover", "footer", "header", "items", "itemsNumber", "itemsPerPage", "itemsPerPageLabel", "itemsPerPageOptions", "itemsPerPageSelect", "loading", "noItemsLabel", "onActivePageChange", "onColumnFilterChange", "onFilteredItemsChange", "onItemsPerPageChange", "onRowClick", "onSelectAll", "onSelectedItemsChange", "onSorterChange", "onTableFilterChange", "pagination", "paginationProps", "scopedColumns", "selected", "selectable", "selectAll", "sorterValue", "sortingIcon", "sortingIconAscending", "sortingIconDescending", "tableBodyProps", "tableFootProps", "tableFilter", "tableFilterLabel", "tableFilterPlaceholder", "tableFilterValue", "tableHeadProps", "tableProps"]);
     var mountedRef = React$1.useRef(false);
-    var _o = React$1.useState(activePage), _activePage = _o[0], setActivePage = _o[1];
-    var _p = React$1.useState([]), _items = _p[0], setItems = _p[1];
-    var _q = React$1.useState(itemsPerPage), _itemsPerPage = _q[0], setItemsPerPage = _q[1];
-    var _r = React$1.useState({}), columnFilterState = _r[0], setColumnFilterState = _r[1];
-    var _s = React$1.useState(), selectedAll = _s[0], setSelectedAll = _s[1];
-    var _t = React$1.useState({}), sorterState = _t[0], setSorterState = _t[1];
-    var _u = React$1.useState(tableFilterValue ? tableFilterValue : ''), tableFilterState = _u[0], setTableFilterState = _u[1];
+    var _p = React$1.useState(activePage), _activePage = _p[0], setActivePage = _p[1];
+    var _q = React$1.useState([]), _items = _q[0], setItems = _q[1];
+    var _r = React$1.useState(itemsNumber), _itemsNumber = _r[0], setItemsNumber = _r[1];
+    var _s = React$1.useState(itemsPerPage), _itemsPerPage = _s[0], setItemsPerPage = _s[1];
+    var _t = React$1.useState([]), _selected = _t[0], setSelected = _t[1];
+    var _u = React$1.useState({}), columnFilterState = _u[0], setColumnFilterState = _u[1];
+    var _v = React$1.useState(), selectedAll = _v[0], setSelectedAll = _v[1];
+    var _w = React$1.useState({}), sorterState = _w[0], setSorterState = _w[1];
+    var _x = React$1.useState(tableFilterValue ? tableFilterValue : ''), tableFilterState = _x[0], setTableFilterState = _x[1];
     React$1.useEffect(function () {
         setActivePage(activePage);
     }, [activePage]);
-    // watch
-    React$1.useMemo(function () {
+    React$1.useEffect(function () {
         if (items && items.length < _itemsPerPage * _activePage - _itemsPerPage) {
             setActivePage(1);
         }
-        // Create the internal array of items
-        Array.isArray(items) &&
-            setItems(items === null || items === void 0 ? void 0 : items.map(function (item, index) {
-                return __assign$1(__assign$1({}, item), { _id: index });
-            }));
+        items &&
+            items.forEach(function (item) {
+                if (item._selected) {
+                    var _item = __assign$1({}, item);
+                    delete _item['_cellProps'];
+                    delete _item['_props'];
+                    delete _item['_selected'];
+                    setSelected(__spreadArray(__spreadArray([], _selected, true), [_item], false));
+                }
+            });
+        if (Array.isArray(items)) {
+            setItems(items);
+            setItemsNumber(itemsNumber || items.length);
+        }
     }, [JSON.stringify(items)]);
-    React$1.useMemo(function () {
+    React$1.useEffect(function () {
+        Array.isArray(selected) && setSelected(selected);
+    }, [JSON.stringify(selected)]);
+    React$1.useEffect(function () {
+        itemsNumber && setItemsNumber(itemsNumber);
+    }, [itemsNumber]);
+    React$1.useEffect(function () {
         columnFilterValue && setColumnFilterState(columnFilterValue);
     }, [JSON.stringify(columnFilterValue)]);
-    React$1.useMemo(function () {
+    React$1.useEffect(function () {
         setSorterState(__assign$1({}, sorterValue));
     }, [JSON.stringify(sorterValue)]);
-    React$1.useMemo(function () { return setItemsPerPage(itemsPerPage); }, [itemsPerPage]);
-    // functions
-    var isSortable = function (i) {
-        var isDataColumn = itemsDataColumns.includes(rawColumnNames[i]);
-        var column;
-        if (columns)
-            column = columns[i];
-        return (columnSorter &&
-            (!columns ||
-                typeof column !== 'object' ||
-                (typeof column === 'object' &&
-                    (typeof column.sorter === 'undefined' || column.sorter))) &&
-            isDataColumn);
-    };
-    var sorterChange = function (column, index) {
-        if (!isSortable(index)) {
+    React$1.useEffect(function () { return setItemsPerPage(itemsPerPage); }, [itemsPerPage]);
+    React$1.useEffect(function () {
+        mountedRef.current && onActivePageChange && onActivePageChange(_activePage);
+    }, [_activePage]);
+    React$1.useEffect(function () {
+        mountedRef.current && onItemsPerPageChange && onItemsPerPageChange(_itemsPerPage);
+        itemsPerPage !== _itemsPerPage && setActivePage(1); // TODO: set proper page after _itemsPerPage update
+    }, [_itemsPerPage]);
+    React$1.useEffect(function () {
+        mountedRef.current && sorterState && onSorterChange && onSorterChange(sorterState);
+    }, [JSON.stringify(sorterState)]);
+    React$1.useEffect(function () {
+        mountedRef.current && onColumnFilterChange && onColumnFilterChange(columnFilterState);
+    }, [columnFilterState]);
+    React$1.useEffect(function () {
+        mountedRef.current && onTableFilterChange && onTableFilterChange(tableFilterState);
+    }, [tableFilterState]);
+    React$1.useEffect(function () {
+        if (selectable) {
+            onSelectedItemsChange && onSelectedItemsChange(_selected);
+            if (_selected.length === _itemsNumber) {
+                setSelectedAll(true);
+                return;
+            }
+            if (_selected.length === 0) {
+                setSelectedAll(false);
+                return;
+            }
+            if (_selected.length !== 0 && _selected.length !== _itemsNumber) {
+                setSelectedAll('indeterminate');
+            }
+        }
+    }, [JSON.stringify(_selected), _itemsNumber]);
+    var columnNames = React$1.useMemo(function () { return getColumnNames(columns, _items); }, [columns, _items]);
+    var itemsDataColumns = React$1.useMemo(function () { return columnNames.filter(function (name) { return getColumnNamesFromItems(_items).includes(name); }); }, [columnNames, _items]);
+    var filteredColumns = React$1.useMemo(function () { return filterColumns(_items, columnFilter, columnFilterState, itemsDataColumns); }, [columnFilterState, JSON.stringify(_items)]);
+    var filteredTable = React$1.useMemo(function () { return filterTable(filteredColumns, tableFilter, tableFilterState, itemsDataColumns); }, [tableFilterState, JSON.stringify(tableFilterValue), JSON.stringify(filteredColumns)]);
+    var sortedItems = React$1.useMemo(function () { return sortItems(columnSorter, filteredTable, itemsDataColumns, sorterState); }, [
+        JSON.stringify(filteredTable),
+        JSON.stringify(sorterState),
+        JSON.stringify(columnSorter),
+        JSON.stringify(filteredColumns),
+        JSON.stringify(_items),
+    ]);
+    var numberOfPages = _itemsPerPage ? Math.ceil(sortedItems.length / _itemsPerPage) : 1;
+    var firstItemOnActivePageIndex = _activePage ? (_activePage - 1) * _itemsPerPage : 0;
+    var currentItems = _activePage
+        ? sortedItems.slice(firstItemOnActivePageIndex, firstItemOnActivePageIndex + _itemsPerPage)
+        : sortedItems;
+    React$1.useEffect(function () {
+        mountedRef.current && onFilteredItemsChange && onFilteredItemsChange(sortedItems);
+    }, [JSON.stringify(sortedItems)]);
+    var handleClean = function () {
+        setTableFilterState('');
+        setColumnFilterState({});
+        setSorterState({});
+    };
+    var handleColumnFilterChange = function (colName, value, type) {
+        var _a;
+        var isLazy = columnFilter && typeof columnFilter === 'object' && columnFilter.lazy === true;
+        if ((isLazy && type === 'input') || (!isLazy && type === 'change')) {
+            return;
+        }
+        var newState = __assign$1(__assign$1({}, columnFilterState), (_a = {}, _a["".concat(colName)] = value, _a));
+        setActivePage(1);
+        setColumnFilterState(newState);
+    };
+    var handleItemsPerPageChange = function (event) {
+        if (typeof itemsPerPageSelect !== 'object' ||
+            (typeof itemsPerPageSelect === 'object' && !itemsPerPageSelect.external)) {
+            setItemsPerPage(Number(event.target.value));
+        }
+    };
+    var handleRowChecked = function (item, value) {
+        if (value && !isObjectInArray(_selected, item, ['_cellProps', '_props', '_selected'])) {
+            setSelected(__spreadArray(__spreadArray([], _selected, true), [item], false));
+            return;
+        }
+        setSelected(_selected.filter(function (_item) { return !isObjectInArray([_item], item, ['_cellProps', '_props', '_selected']); }));
+    };
+    var handleSelectAllChecked = function () {
+        if (selectedAll === true) {
+            setSelected([]);
+            return;
+        }
+        onSelectAll && onSelectAll();
+        if (selectAll && typeof selectAll === 'object' && selectAll.external) {
+            return;
+        }
+        setSelected(_items.map(function (item) {
+            delete item['_cellProps'];
+            delete item['_props'];
+            delete item['_selected'];
+            return item;
+        }));
+    };
+    var handleSorterChange = function (column, index) {
+        if (!isSortable(index, columns, columnSorter, itemsDataColumns, columnNames)) {
             return;
         }
         //if column changed or sort was descending change asc to true
@@ -14184,22 +14381,7 @@ var CSmartTable = React$1.forwardRef(function (_a, ref) {
         }
         setSorterState(__assign$1({}, state));
     };
-    var itemsPerPageChange = function (event) {
-        if (typeof itemsPerPageSelect !== 'object' ||
-            (typeof itemsPerPageSelect === 'object' && !itemsPerPageSelect.external))
-            setItemsPerPage(Number(event.target.value));
-    };
-    var columnFilterChange = function (colName, value, type) {
-        var _a;
-        var isLazy = columnFilter && typeof columnFilter === 'object' && columnFilter.lazy === true;
-        if ((isLazy && type === 'input') || (!isLazy && type === 'change')) {
-            return;
-        }
-        var newState = __assign$1(__assign$1({}, columnFilterState), (_a = {}, _a["".concat(colName)] = value, _a));
-        setActivePage(1);
-        setColumnFilterState(newState);
-    };
-    var tableFilterChange = function (value, type) {
+    var handleTableFilterChange = function (value, type) {
         var isLazy = tableFilter && typeof tableFilter === 'object' && tableFilter.lazy === true;
         if ((isLazy && type === 'input') || (!isLazy && type === 'change')) {
             return;
@@ -14207,171 +14389,55 @@ var CSmartTable = React$1.forwardRef(function (_a, ref) {
         setActivePage(1);
         setTableFilterState(value);
     };
-    var clean = function () {
-        setTableFilterState('');
-        setColumnFilterState({});
-        setSorterState({});
-    };
-    // computed
-    var genCols = Object.keys(_items[0] || {}).filter(function (el) { return el.charAt(0) !== '_'; });
-    var rawColumnNames = columns
-        ? columns.map(function (column) {
-            if (typeof column === 'object')
-                return column.key;
-            else
-                return column;
-        })
-        : genCols; //! || el
-    var itemsDataColumns = rawColumnNames.filter(function (name) { return genCols.includes(name); });
-    // variables
-    var filteredColumns = React$1.useMemo(function () {
-        var items = _items;
-        if (columnFilter && typeof columnFilter === 'object' && columnFilter.external) {
-            return items;
-        }
-        Object.entries(columnFilterState).forEach(function (_a) {
-            var key = _a[0], value = _a[1];
-            if (value instanceof Function) {
-                items = items.filter(function (item) { return value(item[key]); });
-                return;
-            }
-            var columnFilter = String(value).toLowerCase();
-            if (columnFilter && itemsDataColumns.includes(key)) {
-                items = items.filter(function (item) {
-                    return String(item[key]).toLowerCase().includes(columnFilter);
-                });
-            }
-        });
-        return items;
-    }, [columnFilterState, JSON.stringify(_items)]);
-    var filteredTable = React$1.useMemo(function () {
-        var items = filteredColumns;
-        if (!tableFilterState ||
-            (tableFilter && typeof tableFilter === 'object' && tableFilter.external)) {
-            return items;
-        }
-        var filter = tableFilterState.toLowerCase();
-        var valueContainFilter = function (val) { return String(val).toLowerCase().includes(filter); };
-        items = items.filter(function (item) {
-            return !!itemsDataColumns.find(function (key) { return valueContainFilter(item[key]); });
-        });
-        return items;
-    }, [tableFilterState, JSON.stringify(tableFilterValue), JSON.stringify(filteredColumns)]);
-    var sortedItems = React$1.useMemo(function () {
-        var col = sorterState === null || sorterState === void 0 ? void 0 : sorterState.column;
-        if (!col ||
-            !itemsDataColumns.includes(col) ||
-            (columnSorter && typeof columnSorter === 'object' && columnSorter.external)) {
-            return filteredTable;
-        }
-        var flip = sorterState.state === 'asc' ? 1 : sorterState.state === 'desc' ? -1 : 0;
-        var sorted = filteredTable.slice().sort(function (item, item2) {
-            var value = item[col];
-            var value2 = item2[col];
-            var a = typeof value === 'number' ? value : String(value).toLowerCase();
-            var b = typeof value2 === 'number' ? value2 : String(value2).toLowerCase();
-            return a > b ? 1 * flip : b > a ? -1 * flip : 0;
-        });
-        return sorted;
-    }, [
-        JSON.stringify(filteredTable),
-        JSON.stringify(sorterState),
-        JSON.stringify(columnSorter),
-        JSON.stringify(filteredColumns),
-        JSON.stringify(_items),
-    ]);
-    var numberOfPages = _itemsPerPage ? Math.ceil(sortedItems.length / _itemsPerPage) : 1;
-    var firstItemOnActivePageIndex = _activePage ? (_activePage - 1) * _itemsPerPage : 0;
-    var itemsOnActivePage = sortedItems.slice(firstItemOnActivePageIndex, firstItemOnActivePageIndex + _itemsPerPage);
-    var currentItems = _activePage ? itemsOnActivePage : sortedItems;
-    var isFiltered = tableFilterState || (sorterState === null || sorterState === void 0 ? void 0 : sorterState.column) || Object.values(columnFilterState).join('');
-    // effects
-    React$1.useEffect(function () {
-        mountedRef.current && onActivePageChange && onActivePageChange(_activePage);
-    }, [_activePage]);
-    React$1.useEffect(function () {
-        mountedRef.current && onItemsPerPageChange && onItemsPerPageChange(_itemsPerPage);
-        itemsPerPage !== _itemsPerPage && setActivePage(1); // TODO: set proper page after _itemsPerPage update
-    }, [_itemsPerPage]);
-    React$1.useEffect(function () {
-        mountedRef.current && sorterState && onSorterChange && onSorterChange(sorterState);
-    }, [JSON.stringify(sorterState)]);
-    React$1.useEffect(function () {
-        mountedRef.current && onColumnFilterChange && onColumnFilterChange(columnFilterState);
-    }, [columnFilterState]);
-    React$1.useEffect(function () {
-        mountedRef.current && onTableFilterChange && onTableFilterChange(tableFilterState);
-    }, [tableFilterState]);
-    React$1.useEffect(function () {
-        mountedRef.current && onFilteredItemsChange && onFilteredItemsChange(sortedItems);
-    }, [JSON.stringify(sortedItems)]);
-    var handleRowChecked = function (id, value) {
-        var newArr = __spreadArray([], _items, true);
-        newArr[id]._selected = value;
-        setItems(newArr);
-    };
-    var handleSelectAllChecked = function () {
-        if (selectedAll === true) {
-            setItems(_items.map(function (item) {
-                return __assign$1(__assign$1({}, item), { _selected: false });
-            }));
-            return;
-        }
-        setItems(_items.map(function (item) {
-            return __assign$1(__assign$1({}, item), { _selected: true });
-        }));
-    };
-    React$1.useEffect(function () {
-        if (selectable) {
-            var selected = _items.filter(function (item) { return item._selected === true; });
-            onSelectedItemsChange && onSelectedItemsChange(selected);
-            if (selected.length === _items.length) {
-                setSelectedAll(true);
-                return;
-            }
-            if (selected.length === 0) {
-                setSelectedAll(false);
-                return;
-            }
-            if (selected.length !== 0 && selected.length !== _items.length) {
-                setSelectedAll('indeterminate');
-            }
-        }
-    }, [_items]);
     React$1.useEffect(function () {
         mountedRef.current = true;
     }, []);
     return (React$1.createElement(React$1.Fragment, null,
         React$1.createElement("div", __assign$1({}, rest, { ref: ref }), (itemsPerPageSelect || tableFilter || cleaner) && (React$1.createElement("div", { className: "row my-2 mx-0" }, (tableFilter || cleaner) && (React$1.createElement(React$1.Fragment, null,
-            React$1.createElement("div", { className: "col-auto p-0" }, tableFilter && (React$1.createElement(CSmartTableFilter, { filterLabel: tableFilterLabel, filterPlaceholder: tableFilterPlaceholder, onInput: function (e) {
-                    tableFilterChange(e.target.value, 'input');
-                }, onChange: function (e) {
-                    tableFilterChange(e.target.value, 'change');
-                }, value: tableFilterState || '' }))),
-            React$1.createElement("div", { className: "col-auto p-0" }, cleaner && (React$1.createElement(CSmartTableCleaner, { isFiltered: isFiltered, onClick: function () { return clean(); }, onKeyUp: function (event) {
+            React$1.createElement("div", { className: "col-auto p-0" }, tableFilter && (React$1.createElement("div", { className: "row mb-2" },
+                React$1.createElement(CFormLabel, { className: "col-sm-auto col-form-label" }, tableFilterLabel),
+                React$1.createElement("div", { className: "col-sm-auto" },
+                    React$1.createElement(CFormInput, { onInput: function (e) {
+                            handleTableFilterChange(e.target.value, 'input');
+                        }, onChange: function (e) {
+                            handleTableFilterChange(e.target.value, 'change');
+                        }, placeholder: tableFilterPlaceholder, value: tableFilterState || '' }))))),
+            React$1.createElement("div", { className: "col-auto p-0" }, cleaner && (React$1.createElement(CSmartTableCleaner, { isFiltered: tableFilterState ||
+                    (sorterState === null || sorterState === void 0 ? void 0 : sorterState.column) ||
+                    Object.values(columnFilterState).join(''), onClick: function () { return handleClean(); }, onKeyUp: function (event) {
                     if (event.key === 'Enter')
-                        clean();
+                        handleClean();
                 } })))))))),
         React$1.createElement("div", { className: "position-relative" },
             React$1.createElement(CTable, __assign$1({}, tableProps),
-                header && (React$1.createElement(CSmartTableHead, __assign$1({}, tableHeadProps, { columnFilter: columnFilter, columnFilterState: columnFilterState, columns: columns ? columns : rawColumnNames, columnSorter: columnSorter, items: _items, selectable: selectable, selectAll: selectedAll, sorterState: sorterState, sortingIcon: sortingIcon, sortingIconAscending: sortingIconAscending, sortingIconDescending: sortingIconDescending, handleFilterOnChange: function (key, event) { return columnFilterChange(key, event, 'change'); }, handleFilterOnInput: function (key, event) { return columnFilterChange(key, event, 'input'); }, handleOnCustomFilterChange: function (key, event) { return columnFilterChange(key, event); }, handleSelectAllChecked: function () { return handleSelectAllChecked(); }, handleSort: function (key, index) { return sorterChange(key, index); } }))),
+                header && (React$1.createElement(CSmartTableHead, __assign$1({}, tableHeadProps, { columnFilter: columnFilter, columnFilterState: columnFilterState, columns: columns ? columns : columnNames, columnSorter: columnSorter, items: _items, selectable: selectable, selectAll: selectAll, selectedAll: selectedAll, sorterState: sorterState, sortingIcon: sortingIcon, sortingIconAscending: sortingIconAscending, sortingIconDescending: sortingIconDescending, handleFilterOnChange: function (key, event) {
+                        return handleColumnFilterChange(key, event, 'change');
+                    }, handleFilterOnInput: function (key, event) { return handleColumnFilterChange(key, event, 'input'); }, handleOnCustomFilterChange: function (key, event) { return handleColumnFilterChange(key, event); }, handleSelectAllChecked: function () { return handleSelectAllChecked(); }, handleSort: function (key, index) { return handleSorterChange(key, index); } }))),
                 React$1.createElement(CSmartTableBody, __assign$1({ clickableRows: clickableRows, currentItems: currentItems, firstItemOnActivePageIndex: firstItemOnActivePageIndex, noItemsLabel: noItemsLabel, onRowClick: function (item, index, columnName, event) {
                         return clickableRows && onRowClick && onRowClick(item, index, columnName, event);
-                    }, onRowChecked: function (id, value) { return handleRowChecked(id, value); }, rawColumnNames: rawColumnNames, scopedColumns: scopedColumns, selectable: selectable }, tableBodyProps)),
-                typeof footer === 'boolean' && footer && (React$1.createElement(CSmartTableHead, __assign$1({ component: CTableFoot }, tableFootProps, { columnFilter: false, columnSorter: false, columns: columns ? columns : rawColumnNames, items: _items, handleSelectAllChecked: function () { return handleSelectAllChecked(); }, selectable: selectable, selectAll: selectedAll }))),
+                    }, onRowChecked: function (item, value) { return handleRowChecked(item, value); }, columnNames: columnNames, scopedColumns: scopedColumns, selectable: selectable, selected: _selected }, tableBodyProps)),
+                typeof footer === 'boolean' && footer && (React$1.createElement(CSmartTableHead, __assign$1({ component: CTableFoot }, tableFootProps, { columnFilter: false, columnSorter: false, columns: columns ? columns : columnNames, items: _items, handleSelectAllChecked: function () { return handleSelectAllChecked(); }, selectable: selectable, selectAll: selectAll, selectedAll: selectedAll }))),
                 Array.isArray(footer) && (React$1.createElement(CTableFoot, __assign$1({}, tableFootProps),
                     React$1.createElement(CTableRow, null, footer.map(function (item, index) { return (React$1.createElement(CTableDataCell, __assign$1({}, (typeof item === 'object' && item._props && __assign$1({}, item._props)), { key: index }), typeof item === 'object' ? item.label : item)); }))))),
             loading && (React$1.createElement(CElementCover, { boundaries: [
-                    { sides: ['top'], query: 'td' },
+                    { sides: ['top'], query: 'tbody' },
                     { sides: ['bottom'], query: 'tbody' },
-                ] }))),
+                ] }, elementCover))),
         (pagination || itemsPerPageSelect) && (React$1.createElement("div", { className: "row" },
             React$1.createElement("div", { className: "col" }, ((pagination && numberOfPages > 1) || paginationProps) && (React$1.createElement(CSmartPagination, __assign$1({ activePage: _activePage, onActivePageChange: function (page) {
                     pagination && typeof pagination === 'object' && pagination.external
                         ? onActivePageChange && onActivePageChange(page)
                         : setActivePage(page);
                 }, pages: numberOfPages }, paginationProps)))),
-            React$1.createElement("div", { className: "col-auto ms-auto" }, itemsPerPageSelect && (React$1.createElement(CSmartTableItemsPerPageSelector, { itemsPerPage: _itemsPerPage, itemsPerPageLabel: itemsPerPageLabel, itemsPerPageOptions: itemsPerPageOptions, onChange: function (event) { return itemsPerPageChange(event); } })))))));
+            React$1.createElement("div", { className: "col-auto ms-auto" }, itemsPerPageSelect && (React$1.createElement("div", { className: "row" },
+                React$1.createElement(CFormLabel, { className: "col-auto col-form-label" }, itemsPerPageLabel),
+                React$1.createElement("div", { className: "col-auto" },
+                    React$1.createElement(CFormSelect, { defaultValue: _itemsPerPage, onChange: function (event) {
+                            return handleItemsPerPageChange(event);
+                        } }, itemsPerPageOptions &&
+                        itemsPerPageOptions.map(function (number, index) {
+                            return (React$1.createElement("option", { value: number, key: index }, number));
+                        }))))))))));
 });
 CSmartTable.propTypes = {
     activePage: propTypesExports.number,
@@ -14381,9 +14447,11 @@ CSmartTable.propTypes = {
     columnFilterValue: propTypesExports.object,
     columns: propTypesExports.array,
     columnSorter: propTypesExports.oneOfType([propTypesExports.bool, propTypesExports.object]),
+    elementCover: propTypesExports.node,
     footer: propTypesExports.oneOfType([propTypesExports.bool, propTypesExports.array]),
     header: propTypesExports.bool,
     items: propTypesExports.array,
+    itemsNumber: propTypesExports.number,
     itemsPerPage: propTypesExports.number,
     itemsPerPageLabel: propTypesExports.string,
     itemsPerPageOptions: propTypesExports.array,
@@ -14395,6 +14463,7 @@ CSmartTable.propTypes = {
     onFilteredItemsChange: propTypesExports.func,
     onItemsPerPageChange: propTypesExports.func,
     onRowClick: propTypesExports.func,
+    onSelectAll: propTypesExports.func,
     onSelectedItemsChange: propTypesExports.func,
     onSorterChange: propTypesExports.func,
     onTableFilterChange: propTypesExports.func,
@@ -14402,6 +14471,8 @@ CSmartTable.propTypes = {
     paginationProps: propTypesExports.any,
     scopedColumns: propTypesExports.object,
     selectable: propTypesExports.bool,
+    selectAll: propTypesExports.oneOfType([propTypesExports.bool, propTypesExports.object]),
+    selected: propTypesExports.array,
     sorterValue: propTypesExports.object,
     sortingIcon: propTypesExports.node,
     sortingIconAscending: propTypesExports.node,
@@ -14999,6 +15070,7 @@ exports.CDropdownItem = CDropdownItem;
 exports.CDropdownItemPlain = CDropdownItemPlain;
 exports.CDropdownMenu = CDropdownMenu;
 exports.CDropdownToggle = CDropdownToggle;
+exports.CElementCover = CElementCover;
 exports.CFooter = CFooter;
 exports.CForm = CForm;
 exports.CFormCheck = CFormCheck;