@coreui/react-pro 4.13.1 → 5.0.0-alpha.1

package/dist/index.js

@@ -2479,6 +2479,54 @@ CSSTransition.propTypes = process.env.NODE_ENV !== "production" ? _extends$1({},
 }) : {};
 var CSSTransition$1 = CSSTransition;
 
+var getStoredTheme = function (localStorageItemName) {
+    return typeof window !== 'undefined' && localStorage.getItem(localStorageItemName);
+};
+var setStoredTheme = function (localStorageItemName, colorMode) {
+    return localStorage.setItem(localStorageItemName, colorMode);
+};
+var getPreferredColorScheme = function (localStorageItemName) {
+    if (typeof window === 'undefined') {
+        return 'light';
+    }
+    var storedTheme = getStoredTheme(localStorageItemName);
+    if (storedTheme) {
+        return storedTheme;
+    }
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+};
+var setTheme = function (colorMode) {
+    document.documentElement.dataset.coreuiTheme =
+        colorMode === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches
+            ? 'dark'
+            : colorMode;
+    var event = new Event('ColorSchemeChange');
+    document.documentElement.dispatchEvent(event);
+};
+var useColorModes = function (localStorageItemName) {
+    if (localStorageItemName === void 0) { localStorageItemName = 'coreui-react-color-scheme'; }
+    var _a = React$1.useState(getPreferredColorScheme(localStorageItemName)), colorMode = _a[0], setColorMode = _a[1];
+    React$1.useEffect(function () {
+        if (colorMode) {
+            setStoredTheme(localStorageItemName, colorMode);
+            setTheme(colorMode);
+        }
+    }, [colorMode]);
+    React$1.useEffect(function () {
+        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function () {
+            var storedTheme = getStoredTheme(localStorageItemName);
+            if (storedTheme !== 'light' && storedTheme !== 'dark' && colorMode) {
+                setTheme(colorMode);
+            }
+        });
+    });
+    return {
+        colorMode: colorMode,
+        isColorModeSet: function () { return Boolean(getStoredTheme(localStorageItemName)); },
+        setColorMode: setColorMode,
+    };
+};
+
 // code borrowed from https://github.com/reach/reach-ui
 // problem described https://github.com/facebook/react/issues/13029
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -4542,13 +4590,14 @@ CAccordionHeader.propTypes = {
 CAccordionHeader.displayName = 'CAccordionHeader';
 
 var CCloseButton = React$1.forwardRef(function (_a, ref) {
-    var className = _a.className, disabled = _a.disabled, white = _a.white, rest = __rest$1(_a, ["className", "disabled", "white"]);
+    var className = _a.className, dark = _a.dark, disabled = _a.disabled, white = _a.white, rest = __rest$1(_a, ["className", "dark", "disabled", "white"]);
     return (React$1.createElement("button", __assign$1({ type: "button", className: classNames$1('btn', 'btn-close', {
             'btn-close-white': white,
-        }, disabled, className), "aria-label": "Close", disabled: disabled }, rest, { ref: ref })));
+        }, disabled, className), "aria-label": "Close", disabled: disabled }, (dark && { 'data-coreui-theme': 'dark' }), rest, { ref: ref })));
 });
 CCloseButton.propTypes = {
     className: PropTypes$1.string,
+    dark: PropTypes$1.bool,
     disabled: PropTypes$1.bool,
     white: PropTypes$1.bool,
 };
@@ -5062,17 +5111,18 @@ var CCarousel = React$1.forwardRef(function (_a, ref) {
         setTouchPosition(touchDown);
     };
     return (React$1.createElement("div", __assign$1({ className: classNames$1('carousel slide', {
-            'carousel-dark': dark,
             'carousel-fade': transition === 'crossfade',
-        }, className), onMouseEnter: _pause, onMouseLeave: cycle }, (touch && { onTouchStart: handleTouchStart, onTouchMove: handleTouchMove }), rest, { ref: forkedRef }),
+        }, className) }, (dark && { 'data-coreui-theme': 'dark' }), { onMouseEnter: _pause, onMouseLeave: cycle }, (touch && { onTouchStart: handleTouchStart, onTouchMove: handleTouchMove }), rest, { ref: forkedRef }),
         React$1.createElement(CCarouselContext.Provider, { value: {
                 setAnimating: setAnimating,
                 setCustomInterval: setCustomInterval,
             } },
-            indicators && (React$1.createElement("ol", { className: "carousel-indicators" }, Array.from({ length: itemsNumber }, function (_, i) { return i; }).map(function (index) {
-                return (React$1.createElement("li", { key: "indicator".concat(index), onClick: function () {
+            indicators && (React$1.createElement("div", { className: "carousel-indicators" }, Array.from({ length: itemsNumber }, function (_, i) { return i; }).map(function (index) {
+                return (React$1.createElement("button", __assign$1({ key: "indicator".concat(index), onClick: function () {
                         !animating && handleIndicatorClick(index);
-                    }, className: active === index ? 'active' : '', "data-coreui-target": "" }));
+                    }, className: classNames$1({
+                        active: active === index
+                    }), "data-coreui-target": "" }, (active === index && { 'aria-current': true }), { "aria-label": "Slide ".concat(index + 1) })));
             }))),
             React$1.createElement("div", { className: "carousel-inner" }, React$1.Children.map(children, function (child, index) {
                 if (React$1.isValidElement(child)) {
@@ -8499,12 +8549,60 @@ lib.useDeviceSelectors = useDeviceSelectors;
 lib.useMobileOrientation = useMobileOrientation;
 lib.withOrientationChange = withOrientationChange;
 
+var convertIsoWeekToDate = function (isoWeek) {
+    var _a = isoWeek.split(/w/i), year = _a[0], week = _a[1];
+    // Get date for 4th of January for year
+    var date = new Date(Number(year), 0, 4);
+    // Get previous Monday, add 7 days for each week after first
+    date.setDate(date.getDate() - (date.getDay() || 7) + 1 + (Number(week) - 1) * 7);
+    return date;
+};
+var convertToDateObject = function (date, selectionType) {
+    // if (date === null) {
+    //   return null
+    // }
+    if (date instanceof Date) {
+        return date;
+    }
+    if (selectionType === 'week') {
+        return convertIsoWeekToDate(date);
+    }
+    return new Date(Date.parse(date));
+};
 var createGroupsInArray = function (arr, numberOfGroups) {
     var perGroup = Math.ceil(arr.length / numberOfGroups);
     return Array.from({ length: numberOfGroups })
         .fill('')
         .map(function (_, i) { return arr.slice(i * perGroup, (i + 1) * perGroup); });
 };
+var getCalendarDate = function (calendarDate, order, view) {
+    if (order !== 0 && view === 'days') {
+        return new Date(Date.UTC(calendarDate.getFullYear(), calendarDate.getMonth() + order, 1));
+    }
+    if (order !== 0 && view === 'months') {
+        return new Date(Date.UTC(calendarDate.getFullYear() + order, calendarDate.getMonth(), 1));
+    }
+    if (order !== 0 && view === 'years') {
+        return new Date(Date.UTC(calendarDate.getFullYear() + (12 * order), calendarDate.getMonth(), 1));
+    }
+    return calendarDate;
+};
+var getDateBySelectionType = function (date, selectionType) {
+    if (date === null) {
+        return null;
+    }
+    if (selectionType === 'week') {
+        return "".concat(date.getFullYear(), "W").concat(getWeekNumber(date));
+    }
+    if (selectionType === 'month') {
+        var monthNumber = "0".concat(date.getMonth() + 1).slice(-2);
+        return "".concat(date.getFullYear(), "-").concat(monthNumber);
+    }
+    if (selectionType === 'year') {
+        return "".concat(date.getFullYear());
+    }
+    return date;
+};
 var getMonthsNames = function (locale) {
     var months = [];
     var d = new Date();
@@ -8564,6 +8662,11 @@ var getTrailingDays = function (year, month, leadingDays, monthDays) {
     }
     return dates;
 };
+var getWeekNumber = function (date) {
+    var week1 = new Date(date.getFullYear(), 0, 4);
+    return (1 +
+        Math.round(((date.getTime() - week1.getTime()) / 86400000 - 3 + ((week1.getDay() + 6) % 7)) / 7));
+};
 var getMonthDetails = function (year, month, firstDayOfWeek) {
     var daysPrevMonth = getLeadingDays(year, month, firstDayOfWeek);
     var daysThisMonth = getMonthDays(year, month);
@@ -8572,9 +8675,14 @@ var getMonthDetails = function (year, month, firstDayOfWeek) {
     var weeks = [];
     days.forEach(function (day, index) {
         if (index % 7 === 0 || weeks.length === 0) {
-            weeks.push([]);
+            weeks.push({
+                days: [],
+            });
+        }
+        if ((index + 1) % 7 === 0) {
+            weeks[weeks.length - 1].weekNumber = getWeekNumber(day.date);
         }
-        weeks[weeks.length - 1].push(day);
+        weeks[weeks.length - 1].days.push(day);
     });
     return weeks;
 };
@@ -8619,15 +8727,6 @@ var isDateInRange = function (date, start, end) {
 var isDateSelected = function (date, start, end) {
     return (start && isSameDateAs(start, date)) || (end && isSameDateAs(end, date));
 };
-var isEndDate = function (date, start, end) {
-    return start && end && isSameDateAs(end, date) && start < end;
-};
-var isLastDayOfMonth = function (date) {
-    var test = new Date(date.getTime());
-    var month = test.getMonth();
-    test.setDate(test.getDate() + 1);
-    return test.getMonth() !== month;
-};
 var isSameDateAs = function (date, date2) {
     if (date instanceof Date && date2 instanceof Date) {
         return (date.getDate() === date2.getDate() &&
@@ -8639,9 +8738,6 @@ var isSameDateAs = function (date, date2) {
     }
     return false;
 };
-var isStartDate = function (date, start, end) {
-    return start && end && isSameDateAs(start, date) && start < end;
-};
 var isToday = function (date) {
     var today = new Date();
     return (date.getDate() === today.getDate() &&
@@ -8650,151 +8746,206 @@ var isToday = function (date) {
 };
 
 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, onDayClick = props.onDayClick, onDayKeyDown = props.onDayKeyDown, onDayMouseEnter = props.onDayMouseEnter, onDayMouseLeave = props.onDayMouseLeave, onMonthClick = props.onMonthClick, onMonthKeyDown = props.onMonthKeyDown, onYearClick = props.onYearClick, onYearKeyDown = props.onYearKeyDown, selectAdjacementDays = props.selectAdjacementDays, selectEndDate = props.selectEndDate, showAdjacementDays = props.showAdjacementDays, 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]);
+    var 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, onCalendarClick = props.onCalendarClick, onCalendarKeyDown = props.onCalendarKeyDown, onCalendarMouseEnter = props.onCalendarMouseEnter, onCalendarMouseLeave = props.onCalendarMouseLeave, selectAdjacementDays = props.selectAdjacementDays, selectEndDate = props.selectEndDate, selectionType = props.selectionType, showWeekNumber = props.showWeekNumber, showAdjacementDays = props.showAdjacementDays, startDate = props.startDate, view = props.view, weekdayFormat = props.weekdayFormat, weekNumbersLabel = props.weekNumbersLabel;
+    var _a = React$1.useState([]), listOfMonths = _a[0], setListOfMonths = _a[1];
     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];
+    var monthDetails = getMonthDetails(calendarDate.getFullYear(), calendarDate.getMonth(), firstDayOfWeek);
+    var listOfYears = createGroupsInArray(getYears(calendarDate.getFullYear()), 4);
+    var weekDays = monthDetails[0].days;
     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("tr", null,
+                showWeekNumber && (React$1.createElement("th", { className: "calendar-cell" },
+                    React$1.createElement("div", { className: "calendar-header-cell-inner" }, weekNumbersLabel))),
+                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 month === 'current' || showAdjacementDays ? (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.clickable = month !== 'current' && selectAdjacementDays,
-                                _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: (month === 'current' || selectAdjacementDays) &&
-                                !isDateDisabled(date, minDate, maxDate, disabledDates)
-                                ? 0
-                                : -1, title: date.toLocaleDateString(locale) }, ((month === 'current' || selectAdjacementDays) && {
-                            onBlur: function () { return onDayMouseLeave(); },
-                            onClick: function () { return onDayClick(date); },
-                            onFocus: function () { return onDayMouseEnter(date); },
-                            onKeyDown: function (event) { return onDayKeyDown(event, date); },
-                            onMouseEnter: function () { return onDayMouseEnter(date); },
-                            onMouseLeave: function () { return onDayMouseLeave(); },
-                        }), (month !== 'current' &&
-                            !selectAdjacementDays && {
-                            onMouseEnter: function () { return onDayMouseLeave(); },
-                        })),
-                            React$1.createElement("div", { className: "calendar-cell-inner" }, typeof dayFormat === 'function'
-                                ? dayFormat(date)
-                                : date.toLocaleDateString(locale, { day: dayFormat })))) : (React$1.createElement("td", { key: idx }));
-                    })));
+                    var date = convertToDateObject(week.weekNumber === 0
+                        ? "".concat(calendarDate.getFullYear(), "W53")
+                        : "".concat(calendarDate.getFullYear(), "W").concat(week.weekNumber), selectionType);
+                    var isDisabled = isDateDisabled(date, minDate, maxDate, disabledDates);
+                    return (React$1.createElement("tr", __assign$1({ className: classNames$1('calendar-row', {
+                            disabled: isDisabled,
+                            range: selectionType === 'week' && isDateInRange(date, startDate, endDate),
+                            'range-hover': selectionType === 'week' && hoverDate && selectEndDate
+                                ? isDateInRange(date, startDate, hoverDate)
+                                : isDateInRange(date, hoverDate, endDate),
+                            selected: isDateSelected(date, startDate, endDate),
+                        }), key: index, tabIndex: selectionType === 'week' && !isDisabled ? 0 : -1 }, (selectionType === 'week' &&
+                        !isDisabled && {
+                        onBlur: function () { return onCalendarMouseLeave(); },
+                        onClick: function () { return onCalendarClick(date); },
+                        onFocus: function () { return onCalendarMouseEnter(date); },
+                        onKeyDown: function (event) { return onCalendarKeyDown(event, date); },
+                        onMouseEnter: function () { return onCalendarMouseEnter(date); },
+                        onMouseLeave: function () { return onCalendarMouseLeave(); },
+                    })),
+                        showWeekNumber && (React$1.createElement("th", { className: "calendar-cell-week-number" }, week.weekNumber === 0 ? 53 : week.weekNumber)),
+                        week.days.map(function (_a, idx) {
+                            var _b;
+                            var date = _a.date, month = _a.month;
+                            var isDisabled = isDateDisabled(date, minDate, maxDate, disabledDates);
+                            return month === 'current' || showAdjacementDays ? (React$1.createElement("td", __assign$1({ className: classNames$1('calendar-cell', __assign$1(__assign$1({}, (selectionType === 'day' && {
+                                    clickable: month !== 'current' && selectAdjacementDays,
+                                    disabled: isDisabled,
+                                    'range-hover': month === 'current' &&
+                                        (hoverDate && selectEndDate
+                                            ? isDateInRange(date, startDate, hoverDate)
+                                            : isDateInRange(date, hoverDate, endDate)),
+                                    range: month === 'current' && isDateInRange(date, startDate, endDate),
+                                    selected: isDateSelected(date, startDate, endDate),
+                                })), (_b = {}, _b[month] = true, _b.today = month === 'current' && isToday(date), _b))), key: idx, tabIndex: selectionType === 'day' &&
+                                    (month === 'current' || selectAdjacementDays) &&
+                                    !isDisabled
+                                    ? 0
+                                    : -1, title: date.toLocaleDateString(locale) }, (selectionType === 'day' &&
+                                (month === 'current' || selectAdjacementDays) && {
+                                onBlur: function () { return onCalendarMouseLeave(); },
+                                onClick: function () { return onCalendarClick(date); },
+                                onFocus: function () { return onCalendarMouseEnter(date); },
+                                onKeyDown: function (event) { return onCalendarKeyDown(event, date); },
+                                onMouseEnter: function () { return onCalendarMouseEnter(date); },
+                                onMouseLeave: function () { return onCalendarMouseLeave(); },
+                            }), (month !== 'current' &&
+                                !selectAdjacementDays && {
+                                onMouseEnter: function () { return onCalendarMouseLeave(); },
+                            })),
+                                React$1.createElement("div", { className: "calendar-cell-inner" }, typeof dayFormat === 'function'
+                                    ? dayFormat(date)
+                                    : date.toLocaleDateString(locale, { day: dayFormat })))) : (React$1.createElement("td", { key: idx }));
+                        })));
                 }),
             view === 'months' &&
                 listOfMonths.map(function (row, index) {
                     return (React$1.createElement("tr", { key: index }, row.map(function (month, idx) {
-                        return (React$1.createElement("td", { className: "calendar-cell month", key: idx, onClick: function () { return onMonthClick(index * 3 + idx - addMonths); }, onKeyDown: function (event) { return onMonthKeyDown(event, index * 3 + idx - addMonths); }, tabIndex: 0 },
+                        var monthNumber = index * 3 + idx;
+                        var date = new Date(Date.UTC(calendarDate.getFullYear(), monthNumber, 1));
+                        var isDisabled = isDateDisabled(date, minDate, maxDate, disabledDates);
+                        return (React$1.createElement("td", __assign$1({ className: classNames$1('calendar-cell', {
+                                disabled: isDisabled,
+                                selected: isDateSelected(date, startDate, endDate),
+                                'range-hover': selectionType === 'month' &&
+                                    (hoverDate && selectEndDate
+                                        ? isDateInRange(date, startDate, hoverDate)
+                                        : isDateInRange(date, hoverDate, endDate)),
+                                range: isDateInRange(date, startDate, endDate),
+                            }), key: idx, tabIndex: !isDisabled ? 0 : -1 }, (!isDisabled && {
+                            onBlur: function () { return onCalendarMouseLeave(); },
+                            onClick: function () { return onCalendarClick(date); },
+                            onFocus: function () { return onCalendarMouseEnter(date); },
+                            onKeyDown: function (event) { return onCalendarKeyDown(event, date); },
+                            onMouseEnter: function () { return onCalendarMouseEnter(date); },
+                            onMouseLeave: function () { return onCalendarMouseLeave(); },
+                        })),
                             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", { className: "calendar-cell year", key: idx, onClick: function () {
-                                return onYearClick(new Date(year, date.getMonth() - addMonths, date.getDate()));
-                            }, onKeyDown: function (event) {
-                                return onYearKeyDown(event, new Date(year, date.getMonth() - addMonths, date.getDate()));
-                            }, tabIndex: 0 },
+                        var date = new Date(Date.UTC(year, 0, 1));
+                        var isDisabled = isDateDisabled(date, minDate, maxDate, disabledDates);
+                        return (React$1.createElement("td", __assign$1({ className: classNames$1('calendar-cell year', {
+                                disabled: isDisabled,
+                                selected: isDateSelected(date, startDate, endDate),
+                                'range-hover': selectionType === 'year' &&
+                                    (hoverDate && selectEndDate
+                                        ? isDateInRange(date, startDate, hoverDate)
+                                        : isDateInRange(date, hoverDate, endDate)),
+                                range: isDateInRange(date, startDate, endDate),
+                            }), key: idx, tabIndex: !isDisabled ? 0 : -1 }, (!isDisabled && {
+                            onBlur: function () { return onCalendarMouseLeave(); },
+                            onClick: function () { return onCalendarClick(date); },
+                            onFocus: function () { return onCalendarMouseEnter(date); },
+                            onKeyDown: function (event) { return onCalendarKeyDown(event, date); },
+                            onMouseEnter: function () { return onCalendarMouseEnter(date); },
+                            onMouseLeave: function () { return onCalendarMouseLeave(); },
+                        })),
                             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]);
+    var 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;
     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 !== null && navPrevDoubleIcon !== void 0 ? 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 !== null && navPrevIcon !== void 0 ? 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' }))),
+            view === 'days' && (React$1.createElement(CButton, { color: "transparent", size: "sm", onClick: function () { return navigation && onMonthClick(); } }, calendarDate && calendarDate.toLocaleDateString(locale, { month: 'long' }))),
+            React$1.createElement(CButton, __assign$1({ color: "transparent", size: "sm", onClick: function () { return navigation && onYearClick(); } }, (navYearFirst && { style: { order: '-1' } })), calendarDate && calendarDate.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 !== null && navNextIcon !== void 0 ? 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 !== null && navNextDoubleIcon !== void 0 ? navNextDoubleIcon : (React$1.createElement("span", { className: "calendar-nav-icon calendar-nav-icon-double-next" })))))));
 };
 var CCalendar = React$1.forwardRef(function (_a, ref) {
-    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, _h = _a.selectAdjacementDays, selectAdjacementDays = _h === void 0 ? false : _h, selectEndDate = _a.selectEndDate, _j = _a.showAdjacementDays, showAdjacementDays = _j === void 0 ? true : _j, _k = _a.weekdayFormat, weekdayFormat = _k === void 0 ? 2 : _k, onDayHover = _a.onDayHover, onCalendarDateChange = _a.onCalendarDateChange, onEndDateChange = _a.onEndDateChange, onStartDateChange = _a.onStartDateChange, onSelectEndChange = _a.onSelectEndChange, onViewChanged = _a.onViewChanged;
+    var _b;
+    var startDate = _a.startDate, endDate = _a.endDate, _c = _a.calendarDate, calendarDate = _c === void 0 ? startDate || endDate || null : _c, _d = _a.calendars, calendars = _d === void 0 ? 1 : _d, className = _a.className, _e = _a.dayFormat, dayFormat = _e === void 0 ? 'numeric' : _e, disabledDates = _a.disabledDates, _f = _a.firstDayOfWeek, firstDayOfWeek = _f === void 0 ? 1 : _f, _g = _a.locale, locale = _g === void 0 ? 'default' : _g, maxDate = _a.maxDate, minDate = _a.minDate, _h = _a.navigation, navigation = _h === void 0 ? true : _h, navNextIcon = _a.navNextIcon, navNextDoubleIcon = _a.navNextDoubleIcon, navPrevIcon = _a.navPrevIcon, navPrevDoubleIcon = _a.navPrevDoubleIcon, navYearFirst = _a.navYearFirst, range = _a.range, _j = _a.selectAdjacementDays, selectAdjacementDays = _j === void 0 ? false : _j, selectEndDate = _a.selectEndDate, _k = _a.selectionType, selectionType = _k === void 0 ? 'day' : _k, _l = _a.showAdjacementDays, showAdjacementDays = _l === void 0 ? true : _l, _m = _a.showWeekNumber, showWeekNumber = _m === void 0 ? false : _m, _o = _a.weekdayFormat, weekdayFormat = _o === void 0 ? 2 : _o, weekNumbersLabel = _a.weekNumbersLabel, onCalendarDateChange = _a.onCalendarDateChange, onDateHover = _a.onDateHover, onEndDateChange = _a.onEndDateChange, onStartDateChange = _a.onStartDateChange, onSelectEndChange = _a.onSelectEndChange, onViewChanged = _a.onViewChanged;
+    var calendarRef = React$1.useRef(null);
+    var forkedRef = useForkedRef(ref, calendarRef);
     var isInitialMount = React$1.useRef(true);
-    var _l = React$1.useState(null), _calendarDate = _l[0], setCalendarDate = _l[1];
+    var _p = React$1.useState(null), _calendarDate = _p[0], setCalendarDate = _p[1];
+    React$1.useEffect(function () {
+        if (selectionType === 'day' || selectionType === 'week') {
+            setView('days');
+            return;
+        }
+        if (selectionType === 'month') {
+            setView('months');
+            return;
+        }
+        if (selectionType === 'year') {
+            setView('years');
+            return;
+        }
+    }, [selectionType]);
     React$1.useEffect(function () {
         if (calendarDate === null) {
             setCalendarDate(new Date());
             return;
         }
         if (calendarDate) {
-            var date = new Date(calendarDate);
+            var date = convertToDateObject(calendarDate, selectionType);
             !isSameDateAs(_calendarDate, date) && setCalendarDate(date);
         }
     }, [calendarDate]);
-    var _m = useStateWithCallback(startDate ? new Date(startDate) : null, onStartDateChange, !isInitialMount.current), _startDate = _m[0], setStartDate = _m[1];
+    var _q = useStateWithCallback(startDate ? convertToDateObject(startDate, selectionType) : null, function () {
+        return onStartDateChange && onStartDateChange(getDateBySelectionType(_startDate, selectionType));
+    }, !isInitialMount.current), _startDate = _q[0], setStartDate = _q[1];
     React$1.useEffect(function () {
-        var date = startDate ? new Date(startDate) : null;
+        var date = startDate ? convertToDateObject(startDate, selectionType) : null;
         if (!isSameDateAs(date, _startDate)) {
             setStartDate(date);
         }
     }, [startDate]);
-    var _o = useStateWithCallback(endDate ? new Date(endDate) : null, onEndDateChange, !isInitialMount.current), _endDate = _o[0], setEndDate = _o[1];
+    var _r = useStateWithCallback(endDate ? convertToDateObject(endDate, selectionType) : null, function () { return onEndDateChange && onEndDateChange(getDateBySelectionType(_endDate, selectionType)); }, !isInitialMount.current), _endDate = _r[0], setEndDate = _r[1];
     React$1.useEffect(function () {
-        var date = endDate ? new Date(endDate) : null;
+        var date = endDate ? convertToDateObject(endDate, selectionType) : null;
         if (!isSameDateAs(date, _endDate)) {
             setEndDate(date);
         }
     }, [endDate]);
-    var _p = React$1.useState(null), _hoverDate = _p[0], setHoverDate = _p[1];
-    var _q = React$1.useState(maxDate ? new Date(maxDate) : null), _maxDate = _q[0], setMaxDate = _q[1];
+    var _s = React$1.useState(null), _hoverDate = _s[0], setHoverDate = _s[1];
+    var _t = React$1.useState(maxDate ? convertToDateObject(maxDate, selectionType) : null), _maxDate = _t[0], setMaxDate = _t[1];
     React$1.useEffect(function () {
-        maxDate && setMaxDate(new Date(maxDate));
+        maxDate && setMaxDate(convertToDateObject(maxDate, selectionType));
     }, [maxDate]);
-    var _r = React$1.useState(minDate ? new Date(minDate) : null), _minDate = _r[0], setMinDate = _r[1];
+    var _u = React$1.useState(minDate ? convertToDateObject(minDate, selectionType) : null), _minDate = _u[0], setMinDate = _u[1];
     React$1.useEffect(function () {
-        minDate && setMinDate(new Date(minDate));
+        minDate && setMinDate(convertToDateObject(minDate, selectionType));
     }, [minDate]);
-    var _s = useStateWithCallback(selectEndDate, onSelectEndChange), _selectEndDate = _s[0], setSelectEndDate = _s[1];
+    var _v = useStateWithCallback(selectEndDate, onSelectEndChange), _selectEndDate = _v[0], setSelectEndDate = _v[1];
     React$1.useEffect(function () {
         setSelectEndDate(selectEndDate);
     }, [selectEndDate]);
@@ -8804,7 +8955,7 @@ var CCalendar = React$1.forwardRef(function (_a, ref) {
             onSelectEndChange &&
             onSelectEndChange(_selectEndDate);
     }, [_selectEndDate]);
-    var _t = useStateWithCallback('days', onViewChanged), view = _t[0], setView = _t[1];
+    var _w = useStateWithCallback('days', onViewChanged), view = _w[0], setView = _w[1];
     React$1.useEffect(function () {
         isInitialMount.current = false;
     }, []);
@@ -8822,12 +8973,24 @@ var CCalendar = React$1.forwardRef(function (_a, ref) {
         setCalendarDate(d);
         onCalendarDateChange && onCalendarDateChange(d);
     };
-    var handleDayClick = function (date, index) {
+    var handleCalendarClick = function (date, index) {
         if (isDateDisabled(date, _minDate, _maxDate, disabledDates)) {
             return;
         }
         var _date = new Date(date);
-        setCalendarDate(index ? new Date(_date.setMonth(_date.getMonth() - index)) : _date);
+        if (view === 'days') {
+            setCalendarDate(index ? new Date(_date.setMonth(_date.getMonth() - index)) : _date);
+        }
+        if (view === 'months' && selectionType !== 'month') {
+            setCalendarDate(index ? new Date(_date.setMonth(_date.getMonth() - index)) : _date);
+            setView('days');
+            return;
+        }
+        if (view === 'years' && selectionType !== 'year') {
+            setCalendarDate(index ? new Date(_date.setFullYear(_date.getFullYear() - index)) : _date);
+            setView('months');
+            return;
+        }
         if (range) {
             if (_selectEndDate) {
                 setSelectEndDate(false);
@@ -8860,31 +9023,88 @@ var CCalendar = React$1.forwardRef(function (_a, ref) {
         }
         setStartDate(date);
     };
-    var handleDayKeyDown = function (event, date, index) {
+    var handleCalendarKeyDown = function (event, date, index) {
         if (event.code === 'Space' || event.key === 'Enter') {
             event.preventDefault();
-            handleDayClick(date, index);
+            handleCalendarClick(date, index);
+        }
+        if (event.key === 'ArrowRight' ||
+            event.key === 'ArrowLeft' ||
+            event.key === 'ArrowUp' ||
+            event.key === 'ArrowDown') {
+            event.preventDefault();
+            if (maxDate &&
+                date >= convertToDateObject(maxDate, selectionType) &&
+                (event.key === 'ArrowRight' || event.key === 'ArrowDown')) {
+                return;
+            }
+            if (minDate &&
+                date <= convertToDateObject(minDate, selectionType) &&
+                (event.key === 'ArrowLeft' || event.key === 'ArrowUp')) {
+                return;
+            }
+            var element_1 = event.target;
+            if (selectionType === 'week' && element_1.tabIndex === -1) {
+                element_1 = element_1.closest('tr[tabindex="0"]');
+            }
+            var list_1 = [].concat.apply([], Element.prototype.querySelectorAll.call(calendarRef.current, 'td[tabindex="0"], tr[tabindex="0"]'));
+            var index_1 = list_1.indexOf(element_1);
+            var first = index_1 === 0;
+            var last = index_1 === list_1.length - 1;
+            var toBoundary = {
+                start: index_1,
+                end: list_1.length - (index_1 + 1),
+            };
+            var gap_1 = {
+                ArrowRight: 1,
+                ArrowLeft: -1,
+                ArrowUp: selectionType === 'week' && view === 'days' ? -1 : view === 'days' ? -7 : -3,
+                ArrowDown: selectionType === 'week' && view === 'days' ? 1 : view === 'days' ? 7 : 3,
+            };
+            if ((event.key === 'ArrowRight' && last) ||
+                (event.key === 'ArrowDown' && toBoundary['end'] < gap_1['ArrowDown']) ||
+                (event.key === 'ArrowLeft' && first) ||
+                (event.key === 'ArrowUp' && toBoundary['start'] < Math.abs(gap_1['ArrowUp']))) {
+                if (view === 'days') {
+                    setCalendarPage(0, event.key === 'ArrowRight' || event.key === 'ArrowDown' ? 1 : -1);
+                }
+                if (view === 'months') {
+                    setCalendarPage(event.key === 'ArrowRight' || event.key === 'ArrowDown' ? 1 : -1);
+                }
+                if (view === 'years') {
+                    setCalendarPage(event.key === 'ArrowRight' || event.key === 'ArrowDown' ? 10 : -10);
+                }
+                setTimeout(function () {
+                    var _a;
+                    var _list = [].concat.apply([], Element.prototype.querySelectorAll.call((_a = element_1.parentNode) === null || _a === void 0 ? void 0 : _a.parentNode, 'td[tabindex="0"], tr[tabindex="0"]'));
+                    if (_list.length && event.key === 'ArrowRight') {
+                        _list[0].focus();
+                    }
+                    if (_list.length && event.key === 'ArrowLeft') {
+                        _list[_list.length - 1].focus();
+                    }
+                    if (_list.length && event.key === 'ArrowDown') {
+                        _list[gap_1['ArrowDown'] - (list_1.length - index_1)].focus();
+                    }
+                    if (_list.length && event.key === 'ArrowUp') {
+                        _list[_list.length - (Math.abs(gap_1['ArrowUp']) + 1 - (index_1 + 1))].focus();
+                    }
+                }, 1);
+                return;
+            }
+            list_1[index_1 + gap_1[event.key]].focus();
         }
     };
-    var handleDayMouseEnter = function (date) {
+    var handleCalendarMouseEnter = function (date) {
         if (isDateDisabled(date, _minDate, _maxDate, disabledDates)) {
             return;
         }
         setHoverDate(date);
-        onDayHover && onDayHover(date);
+        date && onDateHover && onDateHover(getDateBySelectionType(date, selectionType));
     };
-    var handleDayMouseLeave = function () {
+    var handleCalendarMouseLeave = function () {
         setHoverDate(null);
-        onDayHover && onDayHover(null);
-    };
-    var handleMonthClick = function (month) {
-        setCalendarPage(0, 0, month);
-        setView('days');
-    };
-    var handleMonthKeyDown = function (event, month) {
-        if (event.code === 'Space' || event.key === 'Enter') {
-            handleMonthClick(month);
-        }
+        onDateHover && onDateHover(null);
     };
     var handleNavigationOnClick = function (direction, double) {
         if (double === void 0) { double = false; }
@@ -8913,19 +9133,16 @@ var CCalendar = React$1.forwardRef(function (_a, ref) {
             return;
         }
     };
-    var handleYearClick = function (date) {
-        setCalendarDate(date);
-        setView('months');
-    };
-    var handleYearKeyDown = function (event, date) {
-        if (event.code === 'Space' || event.key === 'Enter') {
-            handleYearClick(date);
-        }
-    };
-    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, onDayClick: function (date) { return handleDayClick(date, index); }, onDayKeyDown: function (event, date) { return handleDayKeyDown(event, date, index); }, onDayMouseEnter: handleDayMouseEnter, onDayMouseLeave: handleDayMouseLeave, onMonthClick: handleMonthClick, onMonthKeyDown: handleMonthKeyDown, onYearClick: handleYearClick, onYearKeyDown: handleYearKeyDown, selectEndDate: _selectEndDate, selectAdjacementDays: selectAdjacementDays, showAdjacementDays: showAdjacementDays, startDate: _startDate, view: view, weekdayFormat: weekdayFormat }))); })));
+    return (React$1.createElement("div", { className: classNames$1('calendars', (_b = {},
+            _b["select-".concat(selectionType)] = selectionType && view === 'days',
+            _b['show-week-numbers'] = showWeekNumber,
+            _b), className), ref: forkedRef }, _calendarDate &&
+        Array.from({ length: calendars }, function (_, index) {
+            var calendarDate = getCalendarDate(_calendarDate, index, view);
+            return (React$1.createElement("div", { className: classNames$1('calendar', view), key: index },
+                React$1.createElement(Navigation, { 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, { calendarDate: calendarDate, dayFormat: dayFormat, disabledDates: disabledDates, endDate: _endDate, firstDayOfWeek: firstDayOfWeek, hoverDate: _hoverDate, locale: locale, maxDate: _maxDate, minDate: _minDate, onCalendarClick: function (date) { return handleCalendarClick(date, index); }, onCalendarKeyDown: function (event, date) { return handleCalendarKeyDown(event, date, index); }, onCalendarMouseEnter: handleCalendarMouseEnter, onCalendarMouseLeave: handleCalendarMouseLeave, order: index, selectAdjacementDays: selectAdjacementDays, selectEndDate: _selectEndDate, selectionType: selectionType, showAdjacementDays: showAdjacementDays, showWeekNumber: showWeekNumber, startDate: _startDate, view: view, weekdayFormat: weekdayFormat, weekNumbersLabel: weekNumbersLabel })));
+        })));
 });
 CCalendar.propTypes = {
     className: PropTypes$1.string,
@@ -8950,14 +9167,17 @@ CCalendar.propTypes = {
     range: PropTypes$1.bool,
     selectAdjacementDays: PropTypes$1.bool,
     selectEndDate: PropTypes$1.bool,
+    selectionType: PropTypes$1.oneOf(['day', 'week', 'month', 'year']),
     showAdjacementDays: PropTypes$1.bool,
+    showWeekNumber: PropTypes$1.bool,
     startDate: PropTypes$1.oneOfType([PropTypes$1.instanceOf(Date), PropTypes$1.string]),
     weekdayFormat: PropTypes$1.oneOfType([
         PropTypes$1.func,
         PropTypes$1.number,
         PropTypes$1.oneOf(['long', 'narrow', 'short']),
     ]),
-    onDayHover: PropTypes$1.func,
+    weekNumbersLabel: PropTypes$1.string,
+    onDateHover: PropTypes$1.func,
     onCalendarDateChange: PropTypes$1.func,
     onEndDateChange: PropTypes$1.func,
     onSelectEndChange: PropTypes$1.func,
@@ -9110,7 +9330,7 @@ var CPicker = React$1.forwardRef(function (_a, ref) {
             return (React$1.createElement("div", { className: classNames$1('picker', className), ref: pickerForkedRef }, children));
         }
         default: {
-            return (React$1.createElement("div", { className: classNames$1('dropdown', 'picker', className, {
+            return (React$1.createElement("div", { className: classNames$1(className, {
                     show: _visible,
                 }), onClick: function () { return !disabled && setVisible(true); }, ref: pickerForkedRef },
                 toggler &&
@@ -9118,9 +9338,7 @@ var CPicker = React$1.forwardRef(function (_a, ref) {
                     React$1.cloneElement(toggler, {
                         ref: togglerRef,
                     }),
-                React$1.createElement("div", { className: classNames$1('dropdown-menu', {
-                        show: _visible,
-                    }, dropdownClassNames), ref: dropdownRef },
+                React$1.createElement("div", { className: dropdownClassNames, ref: dropdownRef },
                     children,
                     footer && footerContent)));
         }
@@ -9189,7 +9407,11 @@ var convert12hTo24h = function (abbr, hour) {
 };
 var convert24hTo12h = function (hour) { return hour % 12 || 12; };
 var convertTimeToDate = function (time) {
-    return time ? (time instanceof Date ? new Date(time) : new Date("1970-01-01 ".concat(time))) : null;
+    return time
+        ? time instanceof Date
+            ? time
+            : new Date("1970-01-01 ".concat(time))
+        : null;
 };
 var getAmPm = function (date, locale) {
     if (date.toLocaleTimeString(locale).includes('AM')) {
@@ -9333,37 +9555,39 @@ var CTimePicker = React$1.forwardRef(function (_a, ref) {
         setDate(new Date(_date));
         onTimeChange && onTimeChange(_date.toTimeString(), _date.toLocaleTimeString(), _date);
     };
-    var InputGroup = function () {
-        var _a;
-        return (React$1.createElement("div", { className: classNames$1('input-group', 'picker-input-group', (_a = {},
-                _a["input-group-".concat(size)] = size,
-                _a)) },
-            React$1.createElement("input", { autoComplete: "off", className: "form-control", disabled: disabled, onChange: function (event) {
-                    return isValidTime(event.target.value) && setDate(convertTimeToDate(event.target.value));
-                }, placeholder: placeholder, readOnly: inputReadOnly, required: required, ref: inputRef }),
-            (indicator || cleaner) && (React$1.createElement("span", { className: "input-group-text" },
-                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 InputGroup = function () { return (React$1.createElement("div", { className: "time-picker-input-group" },
+        React$1.createElement("input", { autoComplete: "off", className: "time-picker-input", 
+            // delay={true}
+            disabled: disabled, onChange: function (event) {
+                return isValidTime(event.target.value) && setDate(convertTimeToDate(event.target.value));
+            }, placeholder: placeholder, readOnly: inputReadOnly, required: required, ref: inputRef }),
+        indicator &&
+            (typeof indicator === 'boolean' ? React$1.createElement("div", { className: "time-picker-indicator" }) : indicator),
+        cleaner &&
+            date &&
+            (typeof cleaner === 'boolean' ? (React$1.createElement("div", { className: "time-picker-cleaner", onClick: function (event) { return handleClear(event); } })) : (React$1.isValidElement(cleaner) &&
+                React$1.cloneElement(cleaner, {
+                    onClick: function (event) { return handleClear(event); },
+                }))))); };
     var TimePickerSelect = function () {
         return (React$1.createElement(React$1.Fragment, null,
             React$1.createElement("span", { className: "time-picker-inline-icon" }),
-            React$1.createElement("select", { className: "form-select", disabled: disabled, onChange: function (event) {
+            React$1.createElement("select", { className: "time-picker-inline-select", disabled: disabled, onChange: function (event) {
                     return handleTimeChange('hours', event.target.value);
                 }, value: getSelectedHour(date, locale) }, localizedTimePartials &&
                 localizedTimePartials.listOfHours.map(function (option, index) { return (React$1.createElement("option", { value: option.value.toString(), key: index }, option.label)); })),
             React$1.createElement(React$1.Fragment, null, ":"),
-            React$1.createElement("select", { className: "form-select", disabled: disabled, onChange: function (event) {
+            React$1.createElement("select", { className: "time-picker-inline-select", disabled: disabled, onChange: function (event) {
                     return handleTimeChange('minutes', event.target.value);
                 }, value: getSelectedMinutes(date) }, localizedTimePartials &&
                 localizedTimePartials.listOfMinutes.map(function (option, index) { return (React$1.createElement("option", { value: option.value.toString(), key: index }, option.label)); })),
             seconds && (React$1.createElement(React$1.Fragment, null,
                 React$1.createElement(React$1.Fragment, null, ":"),
-                React$1.createElement("select", { className: "form-select", disabled: disabled, onChange: function (event) {
+                React$1.createElement("select", { className: "time-picker-inline-select", disabled: disabled, onChange: function (event) {
                         return handleTimeChange('seconds', event.target.value);
                     }, value: getSelectedSeconds(date) }, localizedTimePartials &&
                     localizedTimePartials.listOfSeconds.map(function (option, index) { return (React$1.createElement("option", { value: option.value.toString(), key: index }, option.label)); })))),
-            localizedTimePartials && localizedTimePartials.hour12 && (React$1.createElement("select", { className: "form-select", disabled: disabled, onChange: function (event) {
+            localizedTimePartials && localizedTimePartials.hour12 && (React$1.createElement("select", { className: "time-picker-inline-select", disabled: disabled, onChange: function (event) {
                     return handleTimeChange('toggle', event.target.value);
                 }, value: _ampm },
                 React$1.createElement("option", { value: "am" }, "AM"),
@@ -9383,7 +9607,7 @@ var CTimePicker = React$1.forwardRef(function (_a, ref) {
                 _b.disabled = disabled,
                 _b['is-invalid'] = isValid === false ? true : false,
                 _b['is-valid'] = isValid,
-                _b), className), container: container, disabled: disabled, dropdownClassNames: "time-picker-dropdown", footer: footer, footerContent: React$1.createElement("div", { className: "picker-footer" },
+                _b), className), container: container, disabled: disabled, dropdownClassNames: "time-picker-dropdown", footer: footer, footerContent: React$1.createElement("div", { className: "time-picker-footer" },
                 cancelButton && (React$1.createElement(CButton, { color: cancelButtonColor, size: cancelButtonSize, variant: cancelButtonVariant, onClick: function () {
                         initialDate && setDate(new Date(initialDate));
                         setVisible(false);
@@ -9441,42 +9665,42 @@ var getLocalDateFromString = function (string, locale, time) {
 var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
 var CDateRangePicker = React$1.forwardRef(function (_a, ref) {
     var _b;
-    var _c = _a.calendars, calendars = _c === void 0 ? 2 : _c, calendarDate = _a.calendarDate, _d = _a.cancelButton, cancelButton = _d === void 0 ? 'Cancel' : _d, _e = _a.cancelButtonColor, cancelButtonColor = _e === void 0 ? 'primary' : _e, _f = _a.cancelButtonSize, cancelButtonSize = _f === void 0 ? 'sm' : _f, _g = _a.cancelButtonVariant, cancelButtonVariant = _g === void 0 ? 'ghost' : _g, className = _a.className, _h = _a.cleaner, cleaner = _h === void 0 ? true : _h, _j = _a.closeOnSelect, closeOnSelect = _j === void 0 ? true : _j, _k = _a.confirmButton, confirmButton = _k === void 0 ? 'OK' : _k, _l = _a.confirmButtonColor, confirmButtonColor = _l === void 0 ? 'primary' : _l, _m = _a.confirmButtonSize, confirmButtonSize = _m === void 0 ? 'sm' : _m, confirmButtonVariant = _a.confirmButtonVariant, _o = _a.indicator, indicator = _o === void 0 ? true : _o, dayFormat = _a.dayFormat, disabled = _a.disabled, disabledDates = _a.disabledDates, endDate = _a.endDate, feedback = _a.feedback, feedbackInvalid = _a.feedbackInvalid, feedbackValid = _a.feedbackValid, firstDayOfWeek = _a.firstDayOfWeek, format$1 = _a.format, footer = _a.footer, id = _a.id, inputReadOnly = _a.inputReadOnly, invalid = _a.invalid, label = _a.label, _p = _a.locale, locale = _p === void 0 ? 'default' : _p, maxDate = _a.maxDate, minDate = _a.minDate, navigation = _a.navigation, navYearFirst = _a.navYearFirst, onEndDateChange = _a.onEndDateChange, onHide = _a.onHide, onStartDateChange = _a.onStartDateChange, onShow = _a.onShow, _q = _a.placeholder, placeholder = _q === void 0 ? ['Start date', 'End date'] : _q, _r = _a.range, range = _r === void 0 ? true : _r, ranges = _a.ranges, _s = _a.rangesButtonsColor, rangesButtonsColor = _s === void 0 ? 'secondary' : _s, rangesButtonsSize = _a.rangesButtonsSize, _t = _a.rangesButtonsVariant, rangesButtonsVariant = _t === void 0 ? 'ghost' : _t, required = _a.required, _u = _a.separator, separator = _u === void 0 ? true : _u, selectAdjacementDays = _a.selectAdjacementDays, showAdjacementDays = _a.showAdjacementDays, size = _a.size, startDate = _a.startDate, text = _a.text, timepicker = _a.timepicker, toggler = _a.toggler, _v = _a.todayButton, todayButton = _v === void 0 ? 'Today' : _v, _w = _a.todayButtonColor, todayButtonColor = _w === void 0 ? 'primary' : _w, _x = _a.todayButtonSize, todayButtonSize = _x === void 0 ? 'sm' : _x, todayButtonVariant = _a.todayButtonVariant, tooltipFeedback = _a.tooltipFeedback, valid = _a.valid, visible = _a.visible, weekdayFormat = _a.weekdayFormat, rest = __rest$1(_a, ["calendars", "calendarDate", "cancelButton", "cancelButtonColor", "cancelButtonSize", "cancelButtonVariant", "className", "cleaner", "closeOnSelect", "confirmButton", "confirmButtonColor", "confirmButtonSize", "confirmButtonVariant", "indicator", "dayFormat", "disabled", "disabledDates", "endDate", "feedback", "feedbackInvalid", "feedbackValid", "firstDayOfWeek", "format", "footer", "id", "inputReadOnly", "invalid", "label", "locale", "maxDate", "minDate", "navigation", "navYearFirst", "onEndDateChange", "onHide", "onStartDateChange", "onShow", "placeholder", "range", "ranges", "rangesButtonsColor", "rangesButtonsSize", "rangesButtonsVariant", "required", "separator", "selectAdjacementDays", "showAdjacementDays", "size", "startDate", "text", "timepicker", "toggler", "todayButton", "todayButtonColor", "todayButtonSize", "todayButtonVariant", "tooltipFeedback", "valid", "visible", "weekdayFormat"]);
+    var _c = _a.calendars, calendars = _c === void 0 ? 2 : _c, calendarDate = _a.calendarDate, _d = _a.cancelButton, cancelButton = _d === void 0 ? 'Cancel' : _d, _e = _a.cancelButtonColor, cancelButtonColor = _e === void 0 ? 'primary' : _e, _f = _a.cancelButtonSize, cancelButtonSize = _f === void 0 ? 'sm' : _f, _g = _a.cancelButtonVariant, cancelButtonVariant = _g === void 0 ? 'ghost' : _g, className = _a.className, _h = _a.cleaner, cleaner = _h === void 0 ? true : _h, _j = _a.closeOnSelect, closeOnSelect = _j === void 0 ? true : _j, _k = _a.confirmButton, confirmButton = _k === void 0 ? 'OK' : _k, _l = _a.confirmButtonColor, confirmButtonColor = _l === void 0 ? 'primary' : _l, _m = _a.confirmButtonSize, confirmButtonSize = _m === void 0 ? 'sm' : _m, confirmButtonVariant = _a.confirmButtonVariant, _o = _a.indicator, indicator = _o === void 0 ? true : _o, dayFormat = _a.dayFormat, disabled = _a.disabled, disabledDates = _a.disabledDates, endDate = _a.endDate, feedback = _a.feedback, feedbackInvalid = _a.feedbackInvalid, feedbackValid = _a.feedbackValid, firstDayOfWeek = _a.firstDayOfWeek, format$1 = _a.format, footer = _a.footer, id = _a.id, inputReadOnly = _a.inputReadOnly, invalid = _a.invalid, label = _a.label, _p = _a.locale, locale = _p === void 0 ? 'default' : _p, maxDate = _a.maxDate, minDate = _a.minDate, navigation = _a.navigation, navYearFirst = _a.navYearFirst, onEndDateChange = _a.onEndDateChange, onHide = _a.onHide, onStartDateChange = _a.onStartDateChange, onShow = _a.onShow, _q = _a.placeholder, placeholder = _q === void 0 ? ['Start date', 'End date'] : _q, _r = _a.range, range = _r === void 0 ? true : _r, ranges = _a.ranges, _s = _a.rangesButtonsColor, rangesButtonsColor = _s === void 0 ? 'secondary' : _s, rangesButtonsSize = _a.rangesButtonsSize, _t = _a.rangesButtonsVariant, rangesButtonsVariant = _t === void 0 ? 'ghost' : _t, required = _a.required, _u = _a.separator, separator = _u === void 0 ? true : _u, selectAdjacementDays = _a.selectAdjacementDays, _v = _a.selectionType, selectionType = _v === void 0 ? 'day' : _v, showAdjacementDays = _a.showAdjacementDays, showWeekNumber = _a.showWeekNumber, size = _a.size, startDate = _a.startDate, text = _a.text, timepicker = _a.timepicker, toggler = _a.toggler, _w = _a.todayButton, todayButton = _w === void 0 ? 'Today' : _w, _x = _a.todayButtonColor, todayButtonColor = _x === void 0 ? 'primary' : _x, _y = _a.todayButtonSize, todayButtonSize = _y === void 0 ? 'sm' : _y, todayButtonVariant = _a.todayButtonVariant, tooltipFeedback = _a.tooltipFeedback, valid = _a.valid, visible = _a.visible, weekdayFormat = _a.weekdayFormat, rest = __rest$1(_a, ["calendars", "calendarDate", "cancelButton", "cancelButtonColor", "cancelButtonSize", "cancelButtonVariant", "className", "cleaner", "closeOnSelect", "confirmButton", "confirmButtonColor", "confirmButtonSize", "confirmButtonVariant", "indicator", "dayFormat", "disabled", "disabledDates", "endDate", "feedback", "feedbackInvalid", "feedbackValid", "firstDayOfWeek", "format", "footer", "id", "inputReadOnly", "invalid", "label", "locale", "maxDate", "minDate", "navigation", "navYearFirst", "onEndDateChange", "onHide", "onStartDateChange", "onShow", "placeholder", "range", "ranges", "rangesButtonsColor", "rangesButtonsSize", "rangesButtonsVariant", "required", "separator", "selectAdjacementDays", "selectionType", "showAdjacementDays", "showWeekNumber", "size", "startDate", "text", "timepicker", "toggler", "todayButton", "todayButtonColor", "todayButtonSize", "todayButtonVariant", "tooltipFeedback", "valid", "visible", "weekdayFormat"]);
     var inputEndRef = React$1.useRef(null);
     var inputStartRef = React$1.useRef(null);
     var formRef = React$1.useRef();
-    var _y = React$1.useState(calendarDate ? new Date(calendarDate) : new Date()), _calendarDate = _y[0], setCalendarDate = _y[1];
-    var _z = React$1.useState(endDate ? new Date(endDate) : null), _endDate = _z[0], setEndDate = _z[1];
-    var _0 = React$1.useState(maxDate ? new Date(maxDate) : null), _maxDate = _0[0], setMaxDate = _0[1];
-    var _1 = React$1.useState(minDate ? new Date(minDate) : null), _minDate = _1[0], setMinDate = _1[1];
-    var _2 = React$1.useState(startDate ? new Date(startDate) : null), _startDate = _2[0], setStartDate = _2[1];
-    var _3 = React$1.useState(visible), _visible = _3[0], setVisible = _3[1];
-    var _4 = React$1.useState(startDate ? new Date(startDate) : null), initialStartDate = _4[0], setInitialStartDate = _4[1];
-    var _5 = React$1.useState(endDate ? new Date(endDate) : null), initialEndDate = _5[0], setInitialEndDate = _5[1];
-    var _6 = React$1.useState(null), inputStartHoverValue = _6[0], setInputStartHoverValue = _6[1];
-    var _7 = React$1.useState(null), inputEndHoverValue = _7[0], setInputEndHoverValue = _7[1];
-    var _8 = React$1.useState(valid !== null && valid !== void 0 ? valid : (invalid === true ? false : undefined)), isValid = _8[0], setIsValid = _8[1];
-    var _9 = React$1.useState(false), selectEndDate = _9[0], setSelectEndDate = _9[1];
+    var _z = React$1.useState(calendarDate !== null && calendarDate !== void 0 ? calendarDate : null), _calendarDate = _z[0], setCalendarDate = _z[1];
+    var _0 = React$1.useState(endDate !== null && endDate !== void 0 ? endDate : null), _endDate = _0[0], setEndDate = _0[1];
+    var _1 = React$1.useState(maxDate !== null && maxDate !== void 0 ? maxDate : null), _maxDate = _1[0], setMaxDate = _1[1];
+    var _2 = React$1.useState(minDate !== null && minDate !== void 0 ? minDate : null), _minDate = _2[0], setMinDate = _2[1];
+    var _3 = React$1.useState(startDate !== null && startDate !== void 0 ? startDate : null), _startDate = _3[0], setStartDate = _3[1];
+    var _4 = React$1.useState(visible), _visible = _4[0], setVisible = _4[1];
+    var _5 = React$1.useState(startDate !== null && startDate !== void 0 ? startDate : null), initialStartDate = _5[0], setInitialStartDate = _5[1];
+    var _6 = React$1.useState(endDate !== null && endDate !== void 0 ? endDate : null), initialEndDate = _6[0], setInitialEndDate = _6[1];
+    var _7 = React$1.useState(null), inputStartHoverValue = _7[0], setInputStartHoverValue = _7[1];
+    var _8 = React$1.useState(null), inputEndHoverValue = _8[0], setInputEndHoverValue = _8[1];
+    var _9 = React$1.useState(valid !== null && valid !== void 0 ? valid : (invalid === true ? false : undefined)), isValid = _9[0], setIsValid = _9[1];
+    var _10 = React$1.useState(false), selectEndDate = _10[0], setSelectEndDate = _10[1];
     React$1.useEffect(function () {
         setIsValid(valid !== null && valid !== void 0 ? valid : (invalid === true ? false : undefined));
     }, [valid, invalid]);
     React$1.useEffect(function () {
         if (startDate) {
-            setStartDate(new Date(startDate));
-            setCalendarDate(new Date(startDate));
+            setStartDate(startDate);
+            setCalendarDate(startDate);
         }
     }, [startDate]);
     React$1.useEffect(function () {
         if (endDate) {
-            setEndDate(new Date(endDate));
-            setCalendarDate(new Date(endDate));
+            setEndDate(endDate);
+            setCalendarDate(endDate);
         }
     }, [endDate]);
     React$1.useEffect(function () {
-        maxDate && setMaxDate(new Date(maxDate));
+        maxDate && setMaxDate(maxDate);
     }, [maxDate]);
     React$1.useEffect(function () {
-        minDate && setMinDate(new Date(minDate));
+        minDate && setMinDate(minDate);
     }, [minDate]);
     React$1.useEffect(function () {
         if (inputStartHoverValue) {
@@ -9506,11 +9730,15 @@ var CDateRangePicker = React$1.forwardRef(function (_a, ref) {
         }
     }, [formRef, _startDate, _endDate]);
     var formatDate = function (date) {
-        return format$1
-            ? format(date, format$1)
-            : timepicker
-                ? date.toLocaleString(locale)
-                : date.toLocaleDateString(locale);
+        if (selectionType !== 'day') {
+            return date;
+        }
+        var _date = new Date(date);
+        return format$1 ?
+            format(_date, format$1) :
+            timepicker ?
+                _date.toLocaleString(locale) :
+                _date.toLocaleDateString(locale);
     };
     var setInputValue = function (el, date) {
         if (!el) {
@@ -9522,14 +9750,9 @@ var CDateRangePicker = React$1.forwardRef(function (_a, ref) {
         }
         el.value = '';
     };
-    var handleDayHover = function (date) {
+    var handleDateHover = function (date) {
         selectEndDate ? setInputEndHoverValue(date) : setInputStartHoverValue(date);
     };
-    var handleCalendarDateChange = function (date, difference) {
-        difference
-            ? setCalendarDate(new Date(date.getFullYear(), date.getMonth() - difference, 1))
-            : setCalendarDate(date);
-    };
     var handleClear = function (event) {
         event.stopPropagation();
         setStartDate(null);
@@ -9566,42 +9789,45 @@ var CDateRangePicker = React$1.forwardRef(function (_a, ref) {
             setVisible(false);
         }
     };
-    var InputGroup = function () {
-        var _a;
-        return (React$1.createElement("div", { className: classNames$1('input-group', 'picker-input-group', (_a = {},
-                _a["input-group-".concat(size)] = size,
-                _a)) },
-            React$1.createElement("input", __assign$1({ autoComplete: "off", className: classNames$1('form-control date-picker-input', {
-                    hover: inputStartHoverValue,
-                }), disabled: disabled }, (id && { name: range ? "".concat(id, "-start-date") : "".concat(id, "-date") }), { placeholder: Array.isArray(placeholder) ? placeholder[0] : placeholder, readOnly: inputReadOnly || typeof format$1 === 'string', required: required, onChange: function (event) {
-                    var date = getLocalDateFromString(event.target.value, locale, timepicker);
-                    if (date instanceof Date && date.getTime()) {
-                        setCalendarDate(date);
-                        setStartDate(date);
-                    }
-                }, onClick: function () { return setSelectEndDate(false); }, ref: inputStartRef })),
-            range && separator !== false && (React$1.createElement("span", { className: "input-group-text" },
-                React$1.createElement("span", { className: "picker-input-group-icon date-picker-arrow-icon" }))),
-            range && (React$1.createElement("input", __assign$1({ autoComplete: "off", className: classNames$1('form-control date-picker-input', {
-                    hover: inputEndHoverValue,
-                }), disabled: disabled }, (id && { name: "".concat(id, "-end-date") }), { placeholder: placeholder[1], readOnly: inputReadOnly || typeof format$1 === 'string', required: required, onChange: function (event) {
-                    var date = getLocalDateFromString(event.target.value, locale, timepicker);
-                    if (date instanceof Date && date.getTime()) {
-                        setCalendarDate(date);
-                        setEndDate(date);
-                    }
-                }, onClick: function () { return setSelectEndDate(true); }, ref: inputEndRef }))),
-            (indicator || cleaner) && (React$1.createElement("span", { className: "input-group-text" },
-                indicator && (React$1.createElement("span", { className: "picker-input-group-indicator" }, typeof indicator === 'boolean' ? (React$1.createElement("span", { className: "picker-input-group-icon date-picker-input-icon" })) : (indicator))),
-                cleaner && (_startDate || _endDate) && (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 date-picker-cleaner-icon" })) : (cleaner)))))));
-    };
+    var InputGroup = function () { return (React$1.createElement("div", { className: "date-picker-input-group" },
+        React$1.createElement("input", __assign$1({ autoComplete: "off", className: classNames$1('date-picker-input', {
+                hover: inputStartHoverValue,
+            }), 
+            // delay={true} TODO
+            disabled: disabled }, (id && { name: range ? "".concat(id, "-start-date") : "".concat(id, "-date") }), { placeholder: Array.isArray(placeholder) ? placeholder[0] : placeholder, readOnly: inputReadOnly || typeof format$1 === 'string', required: required, onChange: function (event) {
+                var date = getLocalDateFromString(event.target.value, locale, timepicker);
+                if (date instanceof Date && date.getTime()) {
+                    setCalendarDate(date);
+                    setStartDate(date);
+                }
+            }, onClick: function () { return setSelectEndDate(false); }, ref: inputStartRef })),
+        range && separator !== false && React$1.createElement("div", { className: "date-picker-separator" }),
+        range && (React$1.createElement("input", __assign$1({ autoComplete: "off", className: classNames$1('date-picker-input', {
+                hover: inputEndHoverValue,
+            }), 
+            // delay={true} TODO
+            disabled: disabled }, (id && { name: "".concat(id, "-end-date") }), { placeholder: placeholder[1], readOnly: inputReadOnly || typeof format$1 === 'string', required: required, onChange: function (event) {
+                var date = getLocalDateFromString(event.target.value, locale, timepicker);
+                if (date instanceof Date && date.getTime()) {
+                    setCalendarDate(date);
+                    setEndDate(date);
+                }
+            }, onClick: function () { return setSelectEndDate(true); }, ref: inputEndRef }))),
+        indicator &&
+            (typeof indicator === 'boolean' ? React$1.createElement("div", { className: "date-picker-indicator" }) : indicator),
+        cleaner &&
+            (_startDate || _endDate) &&
+            (typeof cleaner === 'boolean' ? (React$1.createElement("div", { className: "date-picker-cleaner", onClick: function (event) { return handleClear(event); } })) : (React$1.isValidElement(cleaner) &&
+                React$1.cloneElement(cleaner, {
+                    onClick: function (event) { return handleClear(event); },
+                }))))); };
     return (React$1.createElement(CFormControlWrapper, { describedby: rest['aria-describedby'], feedback: feedback, feedbackInvalid: feedbackInvalid, feedbackValid: feedbackValid, id: id, invalid: isValid === false ? true : false, label: label, text: text, tooltipFeedback: tooltipFeedback, valid: isValid },
         React$1.createElement(CPicker, __assign$1({ className: classNames$1('date-picker', (_b = {},
                 _b["date-picker-".concat(size)] = size,
                 _b.disabled = disabled,
                 _b['is-invalid'] = isValid === false ? true : false,
                 _b['is-valid'] = isValid,
-                _b), className), disabled: disabled, footer: footer || timepicker, footerContent: React$1.createElement("div", { className: "picker-footer" },
+                _b), className), disabled: disabled, dropdownClassNames: "date-picker-dropdown", footer: footer || timepicker, footerContent: React$1.createElement("div", { className: "date-picker-footer" },
                 todayButton && (React$1.createElement(CButton, { className: "me-auto", color: todayButtonColor, size: todayButtonSize, variant: todayButtonVariant, onClick: function () {
                         var date = new Date();
                         handleStartDateChange(date);
@@ -9629,10 +9855,10 @@ var CDateRangePicker = React$1.forwardRef(function (_a, ref) {
                         handleStartDateChange(ranges[key][0]);
                         handleEndDateChange(ranges[key][1]);
                     }, size: rangesButtonsSize, variant: rangesButtonsVariant }, key)); }))),
-                React$1.createElement(CCalendar, { calendarDate: _calendarDate, calendars: isMobile_1 ? 1 : calendars, className: "date-picker-calendars", dayFormat: dayFormat, disabledDates: disabledDates, endDate: _endDate, firstDayOfWeek: firstDayOfWeek, locale: locale, maxDate: _maxDate, minDate: _minDate, navigation: navigation, navYearFirst: navYearFirst, range: range, selectAdjacementDays: selectAdjacementDays, selectEndDate: selectEndDate, showAdjacementDays: showAdjacementDays, startDate: _startDate, onDayHover: function (date) { return handleDayHover(date); }, onCalendarDateChange: function (date) { return handleCalendarDateChange(date); }, onStartDateChange: function (date) { return handleStartDateChange(date); }, onEndDateChange: function (date) { return handleEndDateChange(date); }, onSelectEndChange: function (value) { return setSelectEndDate(value); }, weekdayFormat: weekdayFormat }),
+                React$1.createElement(CCalendar, { calendarDate: _calendarDate, calendars: isMobile_1 ? 1 : calendars, className: "date-picker-calendars", dayFormat: dayFormat, disabledDates: disabledDates, endDate: _endDate, firstDayOfWeek: firstDayOfWeek, locale: locale, maxDate: _maxDate, minDate: _minDate, navigation: navigation, navYearFirst: navYearFirst, range: range, selectAdjacementDays: selectAdjacementDays, selectEndDate: selectEndDate, selectionType: selectionType, showAdjacementDays: showAdjacementDays, showWeekNumber: showWeekNumber, startDate: _startDate, onDateHover: function (date) { return handleDateHover(date); }, onCalendarDateChange: function (date) { return setCalendarDate(date); }, onStartDateChange: function (date) { return handleStartDateChange(date); }, onEndDateChange: function (date) { return handleEndDateChange(date); }, onSelectEndChange: function (value) { return setSelectEndDate(value); }, weekdayFormat: weekdayFormat }),
                 timepicker && (React$1.createElement("div", { className: "date-picker-timepickers" }, isMobile_1 || (range && calendars === 1) ? (React$1.createElement(React$1.Fragment, null,
-                    React$1.createElement(CTimePicker, { container: "inline", disabled: _startDate === null ? true : false, locale: locale, onTimeChange: function (_, __, date) { return date && handleStartDateChange(date); }, time: _startDate, variant: "select" }),
-                    React$1.createElement(CTimePicker, { container: "inline", disabled: _endDate === null ? true : false, locale: locale, onTimeChange: function (_, __, date) { return date && handleEndDateChange(date); }, time: _endDate, variant: "select" }))) : (Array.from({ length: calendars }).map(function (_, index) { return (React$1.createElement(CTimePicker, { container: "inline", disabled: index === 0
+                    React$1.createElement(CTimePicker, { container: "inline", disabled: _startDate === null ? true : false, locale: locale, onTimeChange: function (_, __, date) { return date && handleStartDateChange(date); }, time: _startDate && new Date(_startDate), variant: "select" }),
+                    React$1.createElement(CTimePicker, { container: "inline", disabled: _endDate === null ? true : false, locale: locale, onTimeChange: function (_, __, date) { return date && handleEndDateChange(date); }, time: _endDate && new Date(_endDate), variant: "select" }))) : (Array.from({ length: calendars }).map(function (_, index) { return (React$1.createElement(CTimePicker, { container: "inline", disabled: index === 0
                         ? _startDate === null
                             ? true
                             : false
@@ -9642,7 +9868,9 @@ var CDateRangePicker = React$1.forwardRef(function (_a, ref) {
                         return index === 0
                             ? date && handleStartDateChange(date)
                             : date && handleEndDateChange(date);
-                    }, time: index === 0 ? _startDate : _endDate, variant: "select" })); }))))))));
+                    }, time: index === 0
+                        ? _startDate && new Date(_startDate)
+                        : _endDate && new Date(_endDate), variant: "select" })); }))))))));
 });
 CDateRangePicker.displayName = 'CDateRangePicker';
 CDateRangePicker.propTypes = __assign$1(__assign$1(__assign$1(__assign$1({}, CCalendar.propTypes), CFormControlWrapper.propTypes), CPicker.propTypes), { cancelButton: PropTypes$1.oneOfType([PropTypes$1.bool, PropTypes$1.node]), cancelButtonColor: (_a = CButton.propTypes) === null || _a === void 0 ? void 0 : _a.color, cancelButtonSize: (_b = CButton.propTypes) === null || _b === void 0 ? void 0 : _b.size, cancelButtonVariant: (_c = CButton.propTypes) === null || _c === void 0 ? void 0 : _c.variant, calendars: PropTypes$1.number, className: PropTypes$1.string, cleaner: PropTypes$1.bool, closeOnSelect: PropTypes$1.bool, confirmButton: PropTypes$1.oneOfType([PropTypes$1.bool, PropTypes$1.node]), confirmButtonColor: (_d = CButton.propTypes) === null || _d === void 0 ? void 0 : _d.color, confirmButtonSize: (_e = CButton.propTypes) === null || _e === void 0 ? void 0 : _e.size, confirmButtonVariant: (_f = CButton.propTypes) === null || _f === void 0 ? void 0 : _f.variant, id: PropTypes$1.string, indicator: PropTypes$1.oneOfType([PropTypes$1.bool, PropTypes$1.node]), inputReadOnly: PropTypes$1.bool, placeholder: PropTypes$1.oneOfType([
@@ -9852,9 +10080,8 @@ var CDropdownMenu = React$1.forwardRef(function (_a, ref) {
     var forkedRef = useForkedRef(ref, dropdownMenuRef);
     return (React$1.createElement(CConditionalPortal, { portal: portal !== null && portal !== void 0 ? portal : false },
         React$1.createElement(Component, __assign$1({ className: classNames$1('dropdown-menu', {
-                'dropdown-menu-dark': dark,
                 show: visible,
-            }, alignment && alignmentClassNames(alignment), className), ref: forkedRef, role: "menu", "aria-hidden": !visible }, (!popper && { 'data-coreui-popper': 'static' }), rest), Component === 'ul'
+            }, alignment && alignmentClassNames(alignment), className), ref: forkedRef, role: "menu", "aria-hidden": !visible }, (!popper && { 'data-coreui-popper': 'static' }), (dark && { 'data-coreui-theme': 'dark' }), rest), Component === 'ul'
             ? React$1.Children.map(children, function (child, index) {
                 if (React$1.isValidElement(child)) {
                     return React$1.createElement("li", { key: index }, React$1.cloneElement(child));
@@ -10697,7 +10924,7 @@ CModalTitle.displayName = 'CModalTitle';
 var createNativeOptions = function (options) {
     return options &&
         options.map(function (option, index) {
-            return option.options ? (React$1.createElement("optgroup", { label: option.label, key: index }, createNativeOptions(option.options))) : (React$1.createElement("option", { value: option.value, key: index, disabled: option.disabled }, option.text));
+            return option.options ? (React$1.createElement("optgroup", { label: option.label, key: index }, createNativeOptions(option.options))) : (React$1.createElement("option", { value: option.value, key: index, disabled: option.disabled }, option.label));
         });
 };
 var CMultiSelectNativeSelect = React$1.forwardRef(function (_a, ref) {
@@ -10787,8 +11014,8 @@ CVirtualScroller.propTypes = {
 };
 CVirtualScroller.displayName = 'CVirtualScroller';
 
-var createOption = function (text, options) {
-    var value = text.toLowerCase().replace(/\s/g, '-');
+var createOption = function (label, options) {
+    var value = label.toLowerCase().replace(/\s/g, '-');
     var uniqueValue = value;
     var i = 1;
     while (options.some(function (option) { return String(option.value) === uniqueValue; })) {
@@ -10798,7 +11025,7 @@ var createOption = function (text, options) {
     return [
         {
             value: uniqueValue,
-            text: text,
+            label: label,
             custom: true,
         },
     ];
@@ -10810,9 +11037,9 @@ var filterOptionsList = function (search, _options) {
             var option = _options_1[_i];
             var options = option.options &&
                 option.options.filter(function (option) {
-                    return option.text && option.text.toLowerCase().includes(search.toLowerCase());
+                    return option.lable && option.label.toLowerCase().includes(search.toLowerCase());
                 });
-            if ((option.text && option.text.toLowerCase().includes(search.toLowerCase())) ||
+            if ((option.lable && option.label.toLowerCase().includes(search.toLowerCase())) ||
                 (options && options.length > 0)) {
                 optionsList.push(Object.assign({}, option, options && options.length > 0 && { options: options }));
             }
@@ -10914,7 +11141,7 @@ var CMultiSelectOptions = React$1.forwardRef(function (_a, ref) {
                     'form-multi-select-option-with-checkbox': optionsStyle === 'checkbox',
                     'form-multi-selected': selected.some(function (_option) { return _option.value === option.value; }),
                     disabled: option.disabled,
-                }), key: index, onClick: function () { return handleOptionOnClick && handleOptionOnClick(option); }, onKeyDown: function (event) { return handleKeyDown(event, option); }, tabIndex: 0 }, optionsTemplate ? optionsTemplate(option) : option.text)) : (React$1.createElement("div", { className: "form-multi-select-optgroup-label", key: index }, optionsGroupsTemplate ? optionsGroupsTemplate(option) : option.label));
+                }), key: index, onClick: function () { return handleOptionOnClick && handleOptionOnClick(option); }, onKeyDown: function (event) { return handleKeyDown(event, option); }, tabIndex: 0 }, optionsTemplate ? optionsTemplate(option) : option.label)) : (React$1.createElement("div", { className: "form-multi-select-optgroup-label", key: index }, optionsGroupsTemplate ? optionsGroupsTemplate(option) : option.label));
         })) : (React$1.createElement("div", { className: "form-multi-select-options-empty" }, searchNoResultsLabel));
     };
     return (React$1.createElement(React$1.Fragment, null,
@@ -10953,19 +11180,18 @@ var CMultiSelectSelection = React$1.forwardRef(function (_a, ref) {
             selected.map(function (option, index) {
                 if (selectionType === 'tags') {
                     return (React$1.createElement("span", { className: "form-multi-select-tag", key: index },
-                        option.text,
-                        !option.disabled && (React$1.createElement("button", { className: "form-multi-select-tag-delete", "aria-label": "Close", onClick: function () { return onRemove && onRemove(option); } },
-                            React$1.createElement("span", { "aria-hidden": "true" }, "\u00D7")))));
+                        option.label,
+                        !option.disabled && (React$1.createElement("button", { className: "form-multi-select-tag-delete", "aria-label": "Close", onClick: function () { return onRemove && onRemove(option); } }))));
                 }
                 return;
             }),
         multiple &&
             selectionType === 'text' &&
             selected.map(function (option, index) { return (React$1.createElement("span", { key: index },
-                option.text,
+                option.label,
                 index === selected.length - 1 ? '' : ',',
                 "\u00A0")); }),
-        !multiple && !search && selected.map(function (option) { return option.text; })[0],
+        !multiple && !search && selected.map(function (option) { return option.label; })[0],
         children));
 });
 CMultiSelectSelection.propTypes = {
@@ -11002,7 +11228,7 @@ var CMultiSelect = React$1.forwardRef(function (_a, ref) {
     var flattenedOptions = React$1.useMemo(function () { return flattenOptionsArray(options); }, [JSON.stringify(options)]);
     var userOption = React$1.useMemo(function () {
         if (allowCreateOptions &&
-            filteredOptions.some(function (option) { return option.text && option.text.toLowerCase() === searchValue.toLowerCase(); })) {
+            filteredOptions.some(function (option) { return option.label && option.label.toLowerCase() === searchValue.toLowerCase(); })) {
             return false;
         }
         return searchRef.current && createOption(String(searchValue), flattenedOptions);
@@ -11085,7 +11311,7 @@ var CMultiSelect = React$1.forwardRef(function (_a, ref) {
             }
             if (!userOption) {
                 setSelected(__spreadArray(__spreadArray([], selected, true), [
-                    filteredOptions.find(function (option) { return String(option.text).toLowerCase() === searchValue.toLowerCase(); }),
+                    filteredOptions.find(function (option) { return String(option.label).toLowerCase() === searchValue.toLowerCase(); }),
                 ], false));
             }
             setSearchValue('');
@@ -11136,14 +11362,11 @@ var CMultiSelect = React$1.forwardRef(function (_a, ref) {
         setSelected(selected.filter(function (option) { return option.disabled; }));
     };
     return (React$1.createElement(CFormControlWrapper, { describedby: rest['aria-describedby'], feedback: feedback, feedbackInvalid: feedbackInvalid, feedbackValid: feedbackValid, id: id, invalid: invalid, label: label, text: text, tooltipFeedback: tooltipFeedback, valid: valid },
-        React$1.createElement(CMultiSelectNativeSelect, { className: 'form-multi-select', id: id, multiple: multiple, options: selected, required: required, value: multiple
+        React$1.createElement(CMultiSelectNativeSelect, { id: id, multiple: multiple, options: selected, required: required, value: multiple
                 ? selected.map(function (option) { return option.value.toString(); })
                 : selected.map(function (option) { return option.value; })[0], onChange: function () { return onChange && onChange(selected); }, ref: nativeSelectRef }),
-        React$1.createElement("div", { className: classNames$1('form-multi-select', (_b = {
-                    'form-multi-select-with-cleaner': cleaner
-                },
+        React$1.createElement("div", { className: classNames$1('form-multi-select', (_b = {},
                 _b["form-multi-select-".concat(size)] = size,
-                _b['form-multi-select-selection-tags'] = multiple && selectionType === 'tags',
                 _b.disabled = disabled,
                 _b['is-invalid'] = invalid,
                 _b['is-valid'] = valid,
@@ -11154,10 +11377,16 @@ var CMultiSelect = React$1.forwardRef(function (_a, ref) {
                     selectionType === 'counter' && {
                     placeholder: "".concat(selected.length, " ").concat(selectionTypeCounterText),
                 }), (selected.length > 0 &&
-                    !multiple && { placeholder: selected.map(function (option) { return option.text; })[0] }), (multiple &&
+                    !multiple && { placeholder: selected.map(function (option) { return option.label; })[0] }), (multiple &&
                     selected.length > 0 &&
                     selectionType !== 'counter' && { size: searchValue.length + 2 }), { ref: searchRef })))),
-                !disabled && cleaner && selected.length > 0 && (React$1.createElement("button", { type: "button", className: "form-multi-select-selection-cleaner", onClick: function () { return handleDeselectAll(); } }))),
+                React$1.createElement("div", { className: "form-multi-select-buttons" },
+                    !disabled && cleaner && selected.length > 0 && (React$1.createElement("button", { type: "button", className: "form-multi-select-cleaner", onClick: function () { return handleDeselectAll(); } })),
+                    React$1.createElement("button", { type: "button", className: "form-multi-select-indicator", onClick: function (event) {
+                            event.preventDefault();
+                            event.stopPropagation();
+                            setVisible(!_visible);
+                        } }))),
             React$1.createElement("div", { className: "form-multi-select-dropdown", role: "menu", ref: dropdownRef },
                 multiple && selectAll && (React$1.createElement("button", { type: "button", className: "form-multi-select-all", onClick: function () { return handleSelectAll(); } }, selectAllLabel)),
                 React$1.createElement(CMultiSelectOptions, { handleOptionOnClick: function (option) { return !disabled && handleOptionOnClick(option); }, loading: loading, options: filteredOptions.length === 0 && allowCreateOptions
@@ -11180,7 +11409,7 @@ CNav.propTypes = {
     className: PropTypes$1.string,
     component: PropTypes$1.elementType,
     layout: PropTypes$1.oneOf(['fill', 'justified']),
-    variant: PropTypes$1.oneOf(['tabs', 'pills', 'underline']),
+    variant: PropTypes$1.oneOf(['pills', 'tabs', 'underline']),
 };
 CNav.displayName = 'CNav';
 
@@ -11334,9 +11563,8 @@ var CNavbar = React$1.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, color = _a.color, colorScheme = _a.colorScheme, _c = _a.component, Component = _c === void 0 ? 'nav' : _c, container = _a.container, expand = _a.expand, placement = _a.placement, rest = __rest$1(_a, ["children", "className", "color", "colorScheme", "component", "container", "expand", "placement"]);
     return (React$1.createElement(Component, __assign$1({ className: classNames$1('navbar', (_b = {},
             _b["bg-".concat(color)] = color,
-            _b["navbar-".concat(colorScheme)] = colorScheme,
             _b[typeof expand === 'boolean' ? 'navbar-expand' : "navbar-expand-".concat(expand)] = expand,
-            _b), placement, className) }, rest, { ref: ref }), container ? (React$1.createElement("div", { className: typeof container === 'string' ? "container-".concat(container) : 'container' }, children)) : (React$1.createElement(React$1.Fragment, null, children))));
+            _b), placement, className) }, (colorScheme && { 'data-coreui-theme': colorScheme }), rest, { ref: ref }), container ? (React$1.createElement("div", { className: typeof container === 'string' ? "container-".concat(container) : 'container' }, children)) : (React$1.createElement(React$1.Fragment, null, children))));
 });
 CNavbar.propTypes = {
     children: PropTypes$1.node,
@@ -11407,7 +11635,7 @@ CNavbarToggler.propTypes = {
 CNavbarToggler.displayName = 'CNavbarToggler';
 
 var COffcanvas = React$1.forwardRef(function (_a, ref) {
-    var children = _a.children, _b = _a.backdrop, backdrop = _b === void 0 ? true : _b, className = _a.className, _c = _a.keyboard, keyboard = _c === void 0 ? true : _c, onHide = _a.onHide, onShow = _a.onShow, placement = _a.placement, _d = _a.portal, portal = _d === void 0 ? false : _d, _e = _a.responsive, responsive = _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", "responsive", "scroll", "visible"]);
+    var children = _a.children, _b = _a.backdrop, backdrop = _b === void 0 ? true : _b, className = _a.className, dark = _a.dark, _c = _a.keyboard, keyboard = _c === void 0 ? true : _c, onHide = _a.onHide, onShow = _a.onShow, placement = _a.placement, _d = _a.portal, portal = _d === void 0 ? false : _d, _e = _a.responsive, responsive = _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", "dark", "keyboard", "onHide", "onShow", "placement", "portal", "responsive", "scroll", "visible"]);
     var _h = React$1.useState(visible), _visible = _h[0], setVisible = _h[1];
     var offcanvasRef = React$1.useRef(null);
     var forkedRef = useForkedRef(ref, offcanvasRef);
@@ -11448,7 +11676,7 @@ var COffcanvas = React$1.forwardRef(function (_a, ref) {
                         _a.showing = state === 'entering',
                         _a.show = state === 'entered',
                         _a['show hiding'] = state === 'exiting',
-                        _a), className), role: "dialog", tabIndex: -1, onKeyDown: handleKeyDown }, rest, { ref: forkedRef }), children)));
+                        _a), className), role: "dialog", tabIndex: -1, onKeyDown: handleKeyDown }, (dark && { 'data-coreui-theme': 'dark' }), rest, { ref: forkedRef }), children)));
         }),
         backdrop && (React$1.createElement(CConditionalPortal, { portal: portal },
             React$1.createElement(CBackdrop, { className: "offcanvas-backdrop", onClick: handleBackdropDismiss, visible: _visible })))));
@@ -11457,6 +11685,7 @@ COffcanvas.propTypes = {
     backdrop: PropTypes$1.oneOfType([PropTypes$1.bool, PropTypes$1.oneOf(['static'])]),
     children: PropTypes$1.node,
     className: PropTypes$1.string,
+    dark: PropTypes$1.bool,
     keyboard: PropTypes$1.bool,
     onHide: PropTypes$1.func,
     onShow: PropTypes$1.func,
@@ -13417,7 +13646,7 @@ 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)];
+    return columnNames[children.indexOf(clickedCell) - 1];
 };
 var getColumnKey = function (column) {
     return typeof column === 'object' ? column.key : column;
@@ -13429,6 +13658,12 @@ var getColumnLabel = function (column) {
             : pretifyName(column.key)
         : pretifyName(column);
 };
+var getColumnName = function (column) {
+    if (typeof column === 'object') {
+        return column.key;
+    }
+    return column;
+};
 var getColumnNames = function (columns, items) {
     if (columns) {
         var _columns = [];
@@ -13537,10 +13772,32 @@ var getColumnSorterState = function (key, sorterState) {
 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])));
+var getTableDataCellProps = function (column, item, colName) {
+    var props = {};
+    if (typeof column === 'object' && column._colProps) {
+        Object.assign(props, column._colProps);
+    }
+    if (item._cellProps && item._cellProps['all']) {
+        Object.assign(props, item._cellProps['all']);
+    }
+    if (item._cellProps && item._cellProps[colName]) {
+        Object.assign(props, item._cellProps[colName]);
+    }
     return props;
 };
+var getTableDataCellStyles = function (column, item, colName) {
+    var styles = {};
+    if (typeof column === 'object' && column._colStyle) {
+        Object.assign(styles, column._colStyle);
+    }
+    if (item._cellStyle && item._cellStyle['all']) {
+        Object.assign(styles, item._cellStyle['all']);
+    }
+    if (item._cellStyle && item._cellStyle[colName]) {
+        Object.assign(styles, item._cellStyle[colName]);
+    }
+    return styles;
+};
 var getTableHeaderCellProps = function (column) {
     if (typeof column === 'object' && column._props) {
         return column._props;
@@ -13598,8 +13855,8 @@ var sortItems = function (columnSorter, items, itemsDataColumns, sorterState) {
 };
 
 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;
+    var clickableRows = _a.clickableRows, columnNames = _a.columnNames, columns = _a.columns, 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", "columns", "currentItems", "firstItemOnActivePageIndex", "noItemsLabel", "onRowChecked", "onRowClick", "scopedColumns", "selectable", "selected"]);
+    var colspan = selectable ? columns.length + 1 : columns.length;
     return (React$1.createElement(CTableBody, __assign$1({}, (clickableRows && {
         style: { cursor: 'pointer' },
     }), rest, { ref: ref }), currentItems.length > 0 ? (currentItems.map(function (item, trIndex) {
@@ -13617,13 +13874,14 @@ var CSmartTableBody = React$1.forwardRef(function (_a, ref) {
                             delete _item['_selected'];
                             onRowChecked && onRowChecked(_item, event.target.checked);
                         } }))),
-                columnNames.map(function (colName, index) {
+                columns.map(function (column, index) {
+                    var colName = getColumnName(column);
                     return ((scopedColumns &&
                         scopedColumns[colName] &&
                         React$1.cloneElement(scopedColumns[colName](item, trIndex + firstItemOnActivePageIndex), {
                             key: index,
                         })) ||
-                        (item[colName] !== undefined && (React$1.createElement(CTableDataCell, __assign$1({}, getTableDataCellProps(item, colName), { key: index }), item[colName]))));
+                        (item[colName] !== undefined && (React$1.createElement(CTableDataCell, __assign$1({}, getTableDataCellProps(column, item, colName), { style: getTableDataCellStyles(column, item, colName), key: index }), item[colName]))));
                 })),
             scopedColumns && scopedColumns.details && (React$1.createElement(React$1.Fragment, null,
                 React$1.createElement(CTableRow, null,
@@ -13955,9 +14213,9 @@ var CSmartTable = React$1.forwardRef(function (_a, ref) {
                 header && (React$1.createElement(CSmartTableHead, __assign$1({}, tableHeadProps, { columnFilter: columnFilter, columnFilterState: columnFilterState, columns: columns !== null && columns !== void 0 ? 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) {
+                React$1.createElement(CSmartTableBody, __assign$1({ clickableRows: clickableRows, columnNames: columnNames, columns: columns !== null && columns !== void 0 ? columns : columnNames, currentItems: currentItems, firstItemOnActivePageIndex: firstItemOnActivePageIndex, noItemsLabel: noItemsLabel, onRowClick: function (item, index, columnName, event) {
                         return clickableRows && onRowClick && onRowClick(item, index, columnName, event);
-                    }, onRowChecked: function (item, value) { return handleRowChecked(item, value); }, columnNames: columnNames, scopedColumns: scopedColumns, selectable: selectable, selected: _selected }, tableBodyProps)),
+                    }, onRowChecked: function (item, value) { return handleRowChecked(item, value); }, 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 !== null && columns !== void 0 ? columns : columnNames, items: _items, handleSelectAllChecked: function () { return handleSelectAllChecked(); }, selectable: selectable, selectAll: selectAll, selectedAll: selectedAll, showGroups: false }))),
                 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)); }))))),
@@ -14696,6 +14954,7 @@ exports.CWidgetStatsC = CWidgetStatsC;
 exports.CWidgetStatsD = CWidgetStatsD;
 exports.CWidgetStatsE = CWidgetStatsE;
 exports.CWidgetStatsF = CWidgetStatsF;
+exports.useColorModes = useColorModes;
 exports.useForkedRef = useForkedRef;
 exports.usePopper = usePopper;
 exports.useStateWithCallback = useStateWithCallback;