@coreui/react-pro 4.12.0-alpha.0 → 4.12.0-beta.0

package/dist/index.es.js

@@ -2474,6 +2474,46 @@ CSSTransition.propTypes = process.env.NODE_ENV !== "production" ? _extends$1({},
 }) : {};
 var CSSTransition$1 = CSSTransition;
 
+var getStoredTheme = function (localStorageItemName) { return localStorage.getItem(localStorageItemName); };
+var setStoredTheme = function (localStorageItemName, colorMode) {
+    return localStorage.setItem(localStorageItemName, colorMode);
+};
+var getPreferredColorScheme = function (localStorageItemName) {
+    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 = useState(getPreferredColorScheme(localStorageItemName)), colorMode = _a[0], setColorMode = _a[1];
+    useEffect(function () {
+        setStoredTheme(localStorageItemName, colorMode);
+        setTheme(colorMode);
+    }, [colorMode]);
+    useEffect(function () {
+        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function () {
+            var storedTheme = getStoredTheme(localStorageItemName);
+            if (storedTheme !== 'light' && storedTheme !== 'dark') {
+                setTheme(colorMode);
+            }
+        });
+    }, []);
+    return {
+        getColorMode: function () { return colorMode; },
+        setColorMode: function (mode) { return setColorMode(mode); },
+    };
+};
+
 // 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
@@ -2507,7 +2547,7 @@ value) {
         try {
             ref.current = value;
         }
-        catch (error) {
+        catch (_a) {
             throw new Error("Cannot assign value \"".concat(value, "\" to ref \"").concat(ref, "\""));
         }
     }
@@ -2698,7 +2738,10 @@ var textColorsPropType = PropTypes.oneOfType([
     PropTypes.oneOf(['white', 'muted']),
     PropTypes.string,
 ]);
-var triggerPropType = PropTypes.oneOf(['hover', 'focus', 'click']);
+var triggerPropType = PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.oneOf(['hover', 'focus', 'click']).isRequired),
+    PropTypes.oneOf(['hover', 'focus', 'click']),
+]);
 
 var CAlert = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, _b = _a.color, color = _b === void 0 ? 'primary' : _b, dismissible = _a.dismissible, variant = _a.variant, _c = _a.visible, visible = _c === void 0 ? true : _c, onClose = _a.onClose, rest = __rest$1(_a, ["children", "className", "color", "dismissible", "variant", "visible", "onClose"]);
@@ -3057,7 +3100,7 @@ var isObjectInArray = function (array, item, ignore) {
 };
 
 var isRTL = function (element) {
-    if (document.documentElement.dir === 'rtl') {
+    if (typeof document !== 'undefined' && document.documentElement.dir === 'rtl') {
         return true;
     }
     if (element) {
@@ -5428,7 +5471,7 @@ var unescapedLatinCharacterRegExp = /[a-zA-Z]/;
  * //=> "3 o'clock"
  */
 
-function format$1(dirtyDate, dirtyFormatStr, options) {
+function format(dirtyDate, dirtyFormatStr, options) {
   var _ref, _options$locale, _ref2, _ref3, _ref4, _options$firstWeekCon, _options$locale2, _options$locale2$opti, _defaultOptions$local, _defaultOptions$local2, _ref5, _ref6, _ref7, _options$weekStartsOn, _options$locale3, _options$locale3$opti, _defaultOptions$local3, _defaultOptions$local4;
   requiredArgs(2, arguments);
   var formatStr = String(dirtyFormatStr);
@@ -6758,7 +6801,7 @@ 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, onCellClick = props.onCellClick, onCellKeyDown = props.onCellKeyDown, onCellMouseEnter = props.onCellMouseEnter, onCellMouseLeave = props.onCellMouseLeave, 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 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 = useState(calendarDate), date = _a[0], setDate = _a[1];
     var _b = useState([]), listOfMonths = _b[0], setListOfMonths = _b[1];
     useEffect(function () {
@@ -6781,9 +6824,9 @@ var Calendar = function (props) {
                 return (React__default$1.createElement("th", { key: idx, className: "calendar-cell" },
                     React__default$1.createElement("div", { className: "calendar-header-cell-inner" }, typeof weekdayFormat === 'function'
                         ? weekdayFormat(date)
-                        : typeof weekdayFormat === 'string'
+                        : (typeof weekdayFormat === 'string'
                             ? date.toLocaleDateString(locale, { weekday: weekdayFormat })
-                            : date.toLocaleDateString(locale, { weekday: 'long' }).slice(0, weekdayFormat))));
+                            : date.toLocaleDateString(locale, { weekday: 'long' }).slice(0, weekdayFormat)))));
             })))),
         React__default$1.createElement("tbody", null,
             view === 'days' &&
@@ -6810,15 +6853,15 @@ var Calendar = function (props) {
                                 !isDateDisabled(date, minDate, maxDate, disabledDates)
                                 ? 0
                                 : -1, title: date.toLocaleDateString(locale) }, ((month === 'current' || selectAdjacementDays) && {
-                            onBlur: function () { return onCellMouseLeave(); },
-                            onClick: function () { return onCellClick(date); },
-                            onFocus: function () { return onCellMouseEnter(date); },
-                            onKeyDown: function (event) { return onCellKeyDown(event, date); },
-                            onMouseEnter: function () { return onCellMouseEnter(date); },
-                            onMouseLeave: function () { return onCellMouseLeave(); },
+                            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 onCellMouseLeave(); },
+                            onMouseEnter: function () { return onDayMouseLeave(); },
                         })),
                             React__default$1.createElement("div", { className: "calendar-cell-inner" }, typeof dayFormat === 'function'
                                 ? dayFormat(date)
@@ -6856,17 +6899,17 @@ var Navigation = function (props) {
     }, [calendarDate]);
     return (React__default$1.createElement("div", { className: "calendar-nav" },
         navigation && (React__default$1.createElement("div", { className: "calendar-nav-prev" },
-            React__default$1.createElement(CButton, { color: "transparent", size: "sm", onClick: function () { return onNavigationClick('prev', true); } }, navPrevDoubleIcon ? (navPrevDoubleIcon) : (React__default$1.createElement("span", { className: "calendar-nav-icon calendar-nav-icon-double-prev" }))),
-            view === 'days' && (React__default$1.createElement(CButton, { color: "transparent", size: "sm", onClick: function () { return onNavigationClick('prev'); } }, navPrevIcon ? (navPrevIcon) : (React__default$1.createElement("span", { className: "calendar-nav-icon calendar-nav-icon-prev" })))))),
+            React__default$1.createElement(CButton, { color: "transparent", size: "sm", onClick: function () { return onNavigationClick('prev', true); } }, navPrevDoubleIcon !== null && navPrevDoubleIcon !== void 0 ? navPrevDoubleIcon : (React__default$1.createElement("span", { className: "calendar-nav-icon calendar-nav-icon-double-prev" }))),
+            view === 'days' && (React__default$1.createElement(CButton, { color: "transparent", size: "sm", onClick: function () { return onNavigationClick('prev'); } }, navPrevIcon !== null && navPrevIcon !== void 0 ? navPrevIcon : React__default$1.createElement("span", { className: "calendar-nav-icon calendar-nav-icon-prev" }))))),
         React__default$1.createElement("div", __assign$1({ className: "calendar-nav-date" }, (navYearFirst && { style: { display: 'flex', justifyContent: 'center' } })),
             view === 'days' && (React__default$1.createElement(CButton, { color: "transparent", size: "sm", onClick: function () { return navigation && onMonthClick(); } }, date && date.toLocaleDateString(locale, { month: 'long' }))),
             React__default$1.createElement(CButton, __assign$1({ color: "transparent", size: "sm", onClick: function () { return navigation && onYearClick(); } }, (navYearFirst && { style: { order: '-1' } })), date && date.toLocaleDateString(locale, { year: 'numeric' }))),
         navigation && (React__default$1.createElement("div", { className: "calendar-nav-next" },
-            view === 'days' && (React__default$1.createElement(CButton, { color: "transparent", size: "sm", onClick: function () { return onNavigationClick('next'); } }, navNextIcon ? (navNextIcon) : (React__default$1.createElement("span", { className: "calendar-nav-icon calendar-nav-icon-next" })))),
-            React__default$1.createElement(CButton, { color: "transparent", size: "sm", onClick: function () { return onNavigationClick('next', true); } }, navNextDoubleIcon ? (navNextDoubleIcon) : (React__default$1.createElement("span", { className: "calendar-nav-icon calendar-nav-icon-double-next" })))))));
+            view === 'days' && (React__default$1.createElement(CButton, { color: "transparent", size: "sm", onClick: function () { return onNavigationClick('next'); } }, navNextIcon !== null && navNextIcon !== void 0 ? navNextIcon : React__default$1.createElement("span", { className: "calendar-nav-icon calendar-nav-icon-next" }))),
+            React__default$1.createElement(CButton, { color: "transparent", size: "sm", onClick: function () { return onNavigationClick('next', true); } }, navNextDoubleIcon !== null && navNextDoubleIcon !== void 0 ? navNextDoubleIcon : (React__default$1.createElement("span", { className: "calendar-nav-icon calendar-nav-icon-double-next" })))))));
 };
 var CCalendar = 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, onCalendarCellHover = _a.onCalendarCellHover, onCalendarDateChange = _a.onCalendarDateChange, onEndDateChange = _a.onEndDateChange, onStartDateChange = _a.onStartDateChange, onSelectEndChange = _a.onSelectEndChange, onViewChanged = _a.onViewChanged;
+    var startDate = _a.startDate, endDate = _a.endDate, _b = _a.calendarDate, calendarDate = _b === void 0 ? startDate || endDate || null : _b, _c = _a.calendars, calendars = _c === void 0 ? 1 : _c, className = _a.className, _d = _a.dayFormat, dayFormat = _d === void 0 ? 'numeric' : _d, disabledDates = _a.disabledDates, _e = _a.firstDayOfWeek, firstDayOfWeek = _e === void 0 ? 1 : _e, _f = _a.locale, locale = _f === void 0 ? 'default' : _f, maxDate = _a.maxDate, minDate = _a.minDate, _g = _a.navigation, navigation = _g === void 0 ? true : _g, navNextIcon = _a.navNextIcon, navNextDoubleIcon = _a.navNextDoubleIcon, navPrevIcon = _a.navPrevIcon, navPrevDoubleIcon = _a.navPrevDoubleIcon, navYearFirst = _a.navYearFirst, range = _a.range, _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 isInitialMount = useRef(true);
     var _l = useState(null), _calendarDate = _l[0], setCalendarDate = _l[1];
     useEffect(function () {
@@ -6930,7 +6973,7 @@ var CCalendar = forwardRef(function (_a, ref) {
         setCalendarDate(d);
         onCalendarDateChange && onCalendarDateChange(d);
     };
-    var handleCellOnClick = function (date, index) {
+    var handleDayClick = function (date, index) {
         if (isDateDisabled(date, _minDate, _maxDate, disabledDates)) {
             return;
         }
@@ -6968,23 +7011,22 @@ var CCalendar = forwardRef(function (_a, ref) {
         }
         setStartDate(date);
     };
-    var handleCellMouseEnter = function (date) {
+    var handleDayKeyDown = function (event, date, index) {
+        if (event.code === 'Space' || event.key === 'Enter') {
+            event.preventDefault();
+            handleDayClick(date, index);
+        }
+    };
+    var handleDayMouseEnter = function (date) {
         if (isDateDisabled(date, _minDate, _maxDate, disabledDates)) {
             return;
         }
         setHoverDate(date);
-        onCalendarCellHover && onCalendarCellHover(date);
+        onDayHover && onDayHover(date);
     };
-    var handleCellMouseLeave = function () {
+    var handleDayMouseLeave = function () {
         setHoverDate(null);
-        onCalendarCellHover && onCalendarCellHover(null);
-    };
-    var handleCellKeyDown = function (event, date, index) {
-        if (event.code === 'Space' || event.key === 'Enter') {
-            event.preventDefault();
-            handleCellOnClick && handleCellOnClick(date, index);
-            return;
-        }
+        onDayHover && onDayHover(null);
     };
     var handleMonthClick = function (month) {
         setCalendarPage(0, 0, month);
@@ -6992,8 +7034,7 @@ var CCalendar = forwardRef(function (_a, ref) {
     };
     var handleMonthKeyDown = function (event, month) {
         if (event.code === 'Space' || event.key === 'Enter') {
-            setCalendarPage(0, 0, month);
-            setView('days');
+            handleMonthClick(month);
         }
     };
     var handleNavigationOnClick = function (direction, double) {
@@ -7029,14 +7070,13 @@ var CCalendar = forwardRef(function (_a, ref) {
     };
     var handleYearKeyDown = function (event, date) {
         if (event.code === 'Space' || event.key === 'Enter') {
-            setCalendarDate(date);
-            setView('months');
+            handleYearClick(date);
         }
     };
     return (React__default$1.createElement("div", { className: classNames$1('calendars', className) }, _calendarDate &&
         Array.from({ length: calendars }, function (_, index) { return (React__default$1.createElement("div", { className: classNames$1('calendar', view), key: index, ref: ref },
             React__default$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__default$1.createElement(Calendar, { addMonths: index, calendarDate: _calendarDate, dayFormat: dayFormat, disabledDates: disabledDates, endDate: _endDate, firstDayOfWeek: firstDayOfWeek, hoverDate: _hoverDate, locale: locale, maxDate: _maxDate, minDate: _minDate, onCellClick: function (date) { return handleCellOnClick(date, index); }, onCellKeyDown: function (event, date) { return handleCellKeyDown(event, date, index); }, onCellMouseEnter: handleCellMouseEnter, onCellMouseLeave: handleCellMouseLeave, onMonthClick: handleMonthClick, onMonthKeyDown: handleMonthKeyDown, onYearClick: handleYearClick, onYearKeyDown: handleYearKeyDown, selectEndDate: _selectEndDate, selectAdjacementDays: selectAdjacementDays, showAdjacementDays: showAdjacementDays, startDate: _startDate, view: view, weekdayFormat: weekdayFormat }))); })));
+            React__default$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 }))); })));
 });
 CCalendar.propTypes = {
     className: PropTypes.string,
@@ -7068,7 +7108,7 @@ CCalendar.propTypes = {
         PropTypes.number,
         PropTypes.oneOf(['long', 'narrow', 'short']),
     ]),
-    onCalendarCellHover: PropTypes.func,
+    onDayHover: PropTypes.func,
     onCalendarDateChange: PropTypes.func,
     onEndDateChange: PropTypes.func,
     onSelectEndChange: PropTypes.func,
@@ -7611,17 +7651,7 @@ function effect$1(_ref2) {
     }
   }
 
-  if (process.env.NODE_ENV !== "production") {
-    if (!isHTMLElement(arrowElement)) {
-      console.error(['Popper: "arrow" element must be an HTMLElement (not an SVGElement).', 'To use an SVG arrow, wrap it in an HTMLElement that will be used as', 'the arrow.'].join(' '));
-    }
-  }
-
   if (!contains(state.elements.popper, arrowElement)) {
-    if (process.env.NODE_ENV !== "production") {
-      console.error(['Popper: "arrow" modifier\'s `element` must be a child of the popper', 'element.'].join(' '));
-    }
-
     return;
   }
 
@@ -7763,17 +7793,6 @@ function computeStyles(_ref5) {
       adaptive = _options$adaptive === void 0 ? true : _options$adaptive,
       _options$roundOffsets = options.roundOffsets,
       roundOffsets = _options$roundOffsets === void 0 ? true : _options$roundOffsets;
-
-  if (process.env.NODE_ENV !== "production") {
-    var transitionProperty = getComputedStyle$1(state.elements.popper).transitionProperty || '';
-
-    if (adaptive && ['transform', 'top', 'right', 'bottom', 'left'].some(function (property) {
-      return transitionProperty.indexOf(property) >= 0;
-    })) {
-      console.warn(['Popper: Detected CSS transitions on at least one of the following', 'CSS properties: "transform", "top", "right", "bottom", "left".', '\n\n', 'Disable the "computeStyles" modifier\'s `adaptive` option to allow', 'for smooth transitions, or remove these properties from the CSS', 'transition declaration on the popper element if only transitioning', 'opacity or background-color for example.', '\n\n', 'We recommend using the popper element as a wrapper around an inner', 'element that can have any CSS property transitioned for animations.'].join(' '));
-    }
-  }
-
   var commonStyles = {
     placement: getBasePlacement(state.placement),
     variation: getVariation(state.placement),
@@ -8214,10 +8233,6 @@ function computeAutoPlacement(state, options) {
 
   if (allowedPlacements.length === 0) {
     allowedPlacements = placements$1;
-
-    if (process.env.NODE_ENV !== "production") {
-      console.error(['Popper: The `allowedAutoPlacements` option did not allow any', 'placements. Ensure the `placement` option matches the variation', 'of the allowed placements.', 'For example, "auto" cannot be used to allow "bottom-start".', 'Use "auto-start" instead.'].join(' '));
-    }
   } // $FlowFixMe[incompatible-type]: Flow seems to have problems with two array unions...
 
 
@@ -8769,108 +8784,6 @@ function debounce(fn) {
   };
 }
 
-function format(str) {
-  for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-    args[_key - 1] = arguments[_key];
-  }
-
-  return [].concat(args).reduce(function (p, c) {
-    return p.replace(/%s/, c);
-  }, str);
-}
-
-var INVALID_MODIFIER_ERROR = 'Popper: modifier "%s" provided an invalid %s property, expected %s but got %s';
-var MISSING_DEPENDENCY_ERROR = 'Popper: modifier "%s" requires "%s", but "%s" modifier is not available';
-var VALID_PROPERTIES = ['name', 'enabled', 'phase', 'fn', 'effect', 'requires', 'options'];
-function validateModifiers(modifiers) {
-  modifiers.forEach(function (modifier) {
-    [].concat(Object.keys(modifier), VALID_PROPERTIES) // IE11-compatible replacement for `new Set(iterable)`
-    .filter(function (value, index, self) {
-      return self.indexOf(value) === index;
-    }).forEach(function (key) {
-      switch (key) {
-        case 'name':
-          if (typeof modifier.name !== 'string') {
-            console.error(format(INVALID_MODIFIER_ERROR, String(modifier.name), '"name"', '"string"', "\"" + String(modifier.name) + "\""));
-          }
-
-          break;
-
-        case 'enabled':
-          if (typeof modifier.enabled !== 'boolean') {
-            console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"enabled"', '"boolean"', "\"" + String(modifier.enabled) + "\""));
-          }
-
-          break;
-
-        case 'phase':
-          if (modifierPhases.indexOf(modifier.phase) < 0) {
-            console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"phase"', "either " + modifierPhases.join(', '), "\"" + String(modifier.phase) + "\""));
-          }
-
-          break;
-
-        case 'fn':
-          if (typeof modifier.fn !== 'function') {
-            console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"fn"', '"function"', "\"" + String(modifier.fn) + "\""));
-          }
-
-          break;
-
-        case 'effect':
-          if (modifier.effect != null && typeof modifier.effect !== 'function') {
-            console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"effect"', '"function"', "\"" + String(modifier.fn) + "\""));
-          }
-
-          break;
-
-        case 'requires':
-          if (modifier.requires != null && !Array.isArray(modifier.requires)) {
-            console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"requires"', '"array"', "\"" + String(modifier.requires) + "\""));
-          }
-
-          break;
-
-        case 'requiresIfExists':
-          if (!Array.isArray(modifier.requiresIfExists)) {
-            console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"requiresIfExists"', '"array"', "\"" + String(modifier.requiresIfExists) + "\""));
-          }
-
-          break;
-
-        case 'options':
-        case 'data':
-          break;
-
-        default:
-          console.error("PopperJS: an invalid property has been provided to the \"" + modifier.name + "\" modifier, valid properties are " + VALID_PROPERTIES.map(function (s) {
-            return "\"" + s + "\"";
-          }).join(', ') + "; but \"" + key + "\" was provided.");
-      }
-
-      modifier.requires && modifier.requires.forEach(function (requirement) {
-        if (modifiers.find(function (mod) {
-          return mod.name === requirement;
-        }) == null) {
-          console.error(format(MISSING_DEPENDENCY_ERROR, String(modifier.name), requirement, requirement));
-        }
-      });
-    });
-  });
-}
-
-function uniqueBy(arr, fn) {
-  var identifiers = new Set();
-  return arr.filter(function (item) {
-    var identifier = fn(item);
-
-    if (!identifiers.has(identifier)) {
-      identifiers.add(identifier);
-      return true;
-    }
-  });
-}
-
 function mergeByName(modifiers) {
   var merged = modifiers.reduce(function (merged, current) {
     var existing = merged[current.name];
@@ -8886,8 +8799,6 @@ function mergeByName(modifiers) {
   });
 }
 
-var INVALID_ELEMENT_ERROR = 'Popper: Invalid reference or popper argument provided. They must be either a DOM element or virtual element.';
-var INFINITE_LOOP_ERROR = 'Popper: An infinite loop in the modifiers cycle has been detected! The cycle has been interrupted to prevent a browser crash.';
 var DEFAULT_OPTIONS = {
   placement: 'bottom',
   modifiers: [],
@@ -8949,42 +8860,7 @@ function popperGenerator(generatorOptions) {
 
         state.orderedModifiers = orderedModifiers.filter(function (m) {
           return m.enabled;
-        }); // Validate the provided modifiers so that the consumer will get warned
-        // if one of the modifiers is invalid for any reason
-
-        if (process.env.NODE_ENV !== "production") {
-          var modifiers = uniqueBy([].concat(orderedModifiers, state.options.modifiers), function (_ref) {
-            var name = _ref.name;
-            return name;
-          });
-          validateModifiers(modifiers);
-
-          if (getBasePlacement(state.options.placement) === auto) {
-            var flipModifier = state.orderedModifiers.find(function (_ref2) {
-              var name = _ref2.name;
-              return name === 'flip';
-            });
-
-            if (!flipModifier) {
-              console.error(['Popper: "auto" placements require the "flip" modifier be', 'present and enabled to work.'].join(' '));
-            }
-          }
-
-          var _getComputedStyle = getComputedStyle$1(popper),
-              marginTop = _getComputedStyle.marginTop,
-              marginRight = _getComputedStyle.marginRight,
-              marginBottom = _getComputedStyle.marginBottom,
-              marginLeft = _getComputedStyle.marginLeft; // We no longer take into account `margins` on the popper, and it can
-          // cause bugs with positioning, so we'll warn the consumer
-
-
-          if ([marginTop, marginRight, marginBottom, marginLeft].some(function (margin) {
-            return parseFloat(margin);
-          })) {
-            console.warn(['Popper: CSS "margin" styles cannot be used to apply padding', 'between the popper and its reference element or boundary.', 'To replicate margin, use the `offset` modifier, as well as', 'the `padding` option in the `preventOverflow` and `flip`', 'modifiers.'].join(' '));
-          }
-        }
-
+        });
         runModifierEffects();
         return instance.update();
       },
@@ -9004,10 +8880,6 @@ function popperGenerator(generatorOptions) {
         // anymore
 
         if (!areValidElements(reference, popper)) {
-          if (process.env.NODE_ENV !== "production") {
-            console.error(INVALID_ELEMENT_ERROR);
-          }
-
           return;
         } // Store the reference and popper rects to be read by modifiers
 
@@ -9030,18 +8902,8 @@ function popperGenerator(generatorOptions) {
         state.orderedModifiers.forEach(function (modifier) {
           return state.modifiersData[modifier.name] = Object.assign({}, modifier.data);
         });
-        var __debug_loops__ = 0;
 
         for (var index = 0; index < state.orderedModifiers.length; index++) {
-          if (process.env.NODE_ENV !== "production") {
-            __debug_loops__ += 1;
-
-            if (__debug_loops__ > 100) {
-              console.error(INFINITE_LOOP_ERROR);
-              break;
-            }
-          }
-
           if (state.reset === true) {
             state.reset = false;
             index = -1;
@@ -9079,10 +8941,6 @@ function popperGenerator(generatorOptions) {
     };
 
     if (!areValidElements(reference, popper)) {
-      if (process.env.NODE_ENV !== "production") {
-        console.error(INVALID_ELEMENT_ERROR);
-      }
-
       return instance;
     }
 
@@ -9097,11 +8955,11 @@ function popperGenerator(generatorOptions) {
     // one.
 
     function runModifierEffects() {
-      state.orderedModifiers.forEach(function (_ref3) {
-        var name = _ref3.name,
-            _ref3$options = _ref3.options,
-            options = _ref3$options === void 0 ? {} : _ref3$options,
-            effect = _ref3.effect;
+      state.orderedModifiers.forEach(function (_ref) {
+        var name = _ref.name,
+            _ref$options = _ref.options,
+            options = _ref$options === void 0 ? {} : _ref$options,
+            effect = _ref.effect;
 
         if (typeof effect === 'function') {
           var cleanupFn = effect({
@@ -9522,9 +9380,9 @@ var getLocalDateFromString = function (string, locale, time) {
     var newDate = partials.groups &&
         (time
             ? new Date(Number(partials.groups['year']), Number(partials.groups['month']) - 1, Number(partials.groups['day']), partials.groups['ampm']
-                ? partials.groups['ampm'] === 'PM'
+                ? (partials.groups['ampm'] === 'PM'
                     ? Number(partials.groups['hour']) + 12
-                    : Number(partials.groups['hour'])
+                    : Number(partials.groups['hour']))
                 : Number(partials.groups['hour']), Number(partials.groups['minute']), Number(partials.groups['second']))
             : new Date(Number(partials.groups['year']), Number(partials.groups['month']) - 1, Number(partials.groups['day'])));
     return newDate;
@@ -9533,7 +9391,7 @@ var getLocalDateFromString = function (string, locale, time) {
 var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
 var CDateRangePicker = 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 = _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, 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 inputEndRef = useRef(null);
     var inputStartRef = useRef(null);
     var formRef = useRef();
@@ -9598,11 +9456,11 @@ var CDateRangePicker = forwardRef(function (_a, ref) {
         }
     }, [formRef, _startDate, _endDate]);
     var formatDate = function (date) {
-        return format
-            ? format$1(date, format)
-            : timepicker
+        return format$1
+            ? format(date, format$1)
+            : (timepicker
                 ? date.toLocaleString(locale)
-                : date.toLocaleDateString(locale);
+                : date.toLocaleDateString(locale));
     };
     var setInputValue = function (el, date) {
         if (!el) {
@@ -9614,7 +9472,7 @@ var CDateRangePicker = forwardRef(function (_a, ref) {
         }
         el.value = '';
     };
-    var handleCalendarCellHover = function (date) {
+    var handleDayHover = function (date) {
         selectEndDate ? setInputEndHoverValue(date) : setInputStartHoverValue(date);
     };
     var handleCalendarDateChange = function (date, difference) {
@@ -9663,7 +9521,7 @@ var CDateRangePicker = forwardRef(function (_a, ref) {
                 hover: inputStartHoverValue,
             }), 
             // delay={true}
-            disabled: disabled }, (id && { name: range ? "".concat(id, "-start-date") : "".concat(id, "-date") }), { placeholder: Array.isArray(placeholder) ? placeholder[0] : placeholder, readOnly: inputReadOnly || typeof format === 'string', required: required, onChange: function (event) {
+            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);
@@ -9675,7 +9533,7 @@ var CDateRangePicker = forwardRef(function (_a, ref) {
                 hover: inputEndHoverValue,
             }), 
             // delay={true}
-            disabled: disabled }, (id && { name: "".concat(id, "-end-date") }), { placeholder: placeholder[1], readOnly: inputReadOnly || typeof format === 'string', required: required, onChange: function (event) {
+            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);
@@ -9724,16 +9582,16 @@ var CDateRangePicker = forwardRef(function (_a, ref) {
                         handleStartDateChange(ranges[key][0]);
                         handleEndDateChange(ranges[key][1]);
                     }, size: rangesButtonsSize, variant: rangesButtonsVariant }, key)); }))),
-                React__default$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, onCalendarCellHover: function (date) { return handleCalendarCellHover(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__default$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 }),
                 timepicker && (React__default$1.createElement("div", { className: "date-picker-timepickers" }, isMobile_1 || (range && calendars === 1) ? (React__default$1.createElement(React__default$1.Fragment, null,
                     React__default$1.createElement(CTimePicker, { container: "inline", disabled: _startDate === null ? true : false, locale: locale, onTimeChange: function (_, __, date) { return date && handleStartDateChange(date); }, time: _startDate, variant: "select" }),
-                    React__default$1.createElement(CTimePicker, { container: "inline", disabled: _endDate === null ? true : false, locale: locale, onTimeChange: function (_, __, date) { return date && handleEndDateChange(date); }, time: _endDate, variant: "select" }))) : (__spreadArray([], Array(calendars), true).map(function (_, index) { return (React__default$1.createElement(CTimePicker, { container: "inline", disabled: index === 0
-                        ? _startDate === null
+                    React__default$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__default$1.createElement(CTimePicker, { container: "inline", disabled: index === 0
+                        ? (_startDate === null
                             ? true
-                            : false
-                        : _endDate === null
+                            : false)
+                        : (_endDate === null
                             ? true
-                            : false, key: index, locale: locale, onTimeChange: function (_, __, date) {
+                            : false), key: index, locale: locale, onTimeChange: function (_, __, date) {
                         return index === 0
                             ? date && handleStartDateChange(date)
                             : date && handleEndDateChange(date);
@@ -10478,8 +10336,12 @@ CDropdownToggle.propTypes = {
 CDropdownToggle.displayName = 'CDropdownToggle';
 
 var CSpinner = forwardRef(function (_a, ref) {
-    var className = _a.className, color = _a.color, _b = _a.component, Component = _b === void 0 ? 'div' : _b, size = _a.size, _c = _a.variant, variant = _c === void 0 ? 'border' : _c, _d = _a.visuallyHiddenLabel, visuallyHiddenLabel = _d === void 0 ? 'Loading...' : _d, rest = __rest$1(_a, ["className", "color", "component", "size", "variant", "visuallyHiddenLabel"]);
-    return (React__default$1.createElement(Component, __assign$1({ className: classNames$1("spinner-".concat(variant), "text-".concat(color), size && "spinner-".concat(variant, "-").concat(size), className), role: "status" }, rest, { ref: ref }),
+    var _b;
+    var className = _a.className, color = _a.color, _c = _a.component, Component = _c === void 0 ? 'div' : _c, size = _a.size, _d = _a.variant, variant = _d === void 0 ? 'border' : _d, _e = _a.visuallyHiddenLabel, visuallyHiddenLabel = _e === void 0 ? 'Loading...' : _e, rest = __rest$1(_a, ["className", "color", "component", "size", "variant", "visuallyHiddenLabel"]);
+    return (React__default$1.createElement(Component, __assign$1({ className: classNames$1("spinner-".concat(variant), (_b = {},
+            _b["spinner-".concat(variant, "-").concat(size)] = size,
+            _b["text-".concat(color)] = color,
+            _b), className), role: "status" }, rest, { ref: ref }),
         React__default$1.createElement("span", { className: "visually-hidden" }, visuallyHiddenLabel)));
 });
 CSpinner.propTypes = {
@@ -10659,7 +10521,8 @@ var CFormSelect = forwardRef(function (_a, ref) {
                 _b), className), size: htmlSize }, rest, { ref: ref }), options
             ? options.map(function (option, index) {
                 return (React__default$1.createElement("option", __assign$1({}, (typeof option === 'object' &&
-                    option.disabled && { disabled: option.disabled }), (typeof option === 'object' && option.value && { value: option.value }), { key: index }), typeof option === 'string' ? option : option.label));
+                    option.disabled && { disabled: option.disabled }), (typeof option === 'object' &&
+                    option.value !== undefined && { value: option.value }), { key: index }), typeof option === 'string' ? option : option.label));
             })
             : children)));
 });
@@ -11117,6 +10980,7 @@ var CModal = forwardRef(function (_a, ref) {
         if (backdrop === 'static') {
             return setStaticBackdrop(true);
         }
+        setVisible(false);
         return onClose && onClose();
     };
     useLayoutEffect(function () {
@@ -12146,6 +12010,7 @@ CProgressBar.propTypes = {
 };
 CProgressBar.displayName = 'CProgressBar';
 
+// TODO: update markup and add '.progress-stacked' in v5
 var CProgress = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, height = _a.height, thin = _a.thin, _b = _a.value, value = _b === void 0 ? 0 : _b, white = _a.white, rest = __rest$1(_a, ["children", "className", "height", "thin", "value", "white"]);
     return (React__default$1.createElement("div", { className: classNames$1('progress', {
@@ -12164,7 +12029,6 @@ CProgress.propTypes = {
 CProgress.displayName = 'CProgress';
 
 var getPlacement$1 = function (placement, element) {
-    console.log(element);
     switch (placement) {
         case 'right': {
             return isRTL(element) ? 'left' : 'right';
@@ -13856,7 +13720,8 @@ var CTable = forwardRef(function (_a, ref) {
                 React__default$1.createElement(CTableRow, null, columns.map(function (column, index) { return (React__default$1.createElement(CTableHeaderCell, __assign$1({}, (column._props && __assign$1({}, column._props)), (column._style && { style: __assign$1({}, column._style) }), { key: index }), getColumnLabel$1(column))); })))),
             items && (React__default$1.createElement(CTableBody, null, items.map(function (item, index) { return (React__default$1.createElement(CTableRow, __assign$1({}, (item._props && __assign$1({}, item._props)), { key: index }), columnNames &&
                 columnNames.map(function (colName, index) {
-                    return item[colName] ? (React__default$1.createElement(CTableDataCell, __assign$1({}, (item._cellProps && __assign$1(__assign$1({}, (item._cellProps['all'] && __assign$1({}, item._cellProps['all']))), (item._cellProps[colName] && __assign$1({}, item._cellProps[colName])))), { key: index }), item[colName])) : null;
+                    // eslint-disable-next-line unicorn/no-negated-condition
+                    return item[colName] !== undefined ? (React__default$1.createElement(CTableDataCell, __assign$1({}, (item._cellProps && __assign$1(__assign$1({}, (item._cellProps['all'] && __assign$1({}, item._cellProps['all']))), (item._cellProps[colName] && __assign$1({}, item._cellProps[colName])))), { key: index }), item[colName])) : null;
                 }))); }))),
             children,
             footer && (React__default$1.createElement(CTableFoot, __assign$1({}, tableFootProps),
@@ -14129,8 +13994,7 @@ var CSmartTableBody = forwardRef(function (_a, ref) {
                         React__default$1.cloneElement(scopedColumns[colName](item, trIndex + firstItemOnActivePageIndex), {
                             key: index,
                         })) ||
-                        // eslint-disable-next-line unicorn/no-typeof-undefined
-                        (typeof item[colName] !== 'undefined' && (React__default$1.createElement(CTableDataCell, __assign$1({}, getTableDataCellProps(item, colName), { key: index }), String(item[colName])))));
+                        (item[colName] !== undefined && (React__default$1.createElement(CTableDataCell, __assign$1({}, getTableDataCellProps(item, colName), { key: index }), item[colName]))));
                 })),
             scopedColumns && scopedColumns.details && (React__default$1.createElement(React__default$1.Fragment, null,
                 React__default$1.createElement(CTableRow, null,
@@ -14157,19 +14021,6 @@ CSmartTableBody.propTypes = {
 };
 CSmartTableBody.displayName = 'CSmartTableBody';
 
-var CSmartTableCleaner = forwardRef(function (_a, ref) {
-    var _b = _a.content, content = _b === void 0 ? React__default$1.createElement(CIcon, { width: 18, icon: cilFilterX }) : _b, isFiltered = _a.isFiltered, rest = __rest$1(_a, ["content", "isFiltered"]);
-    return (React__default$1.createElement("button", __assign$1({ type: "button", className: "btn btn-transparent" }, (!isFiltered && {
-        disabled: true,
-        tabIndex: -1,
-    }), rest, { ref: ref }), content));
-});
-CSmartTableCleaner.propTypes = {
-    content: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
-    isFiltered: PropTypes.string,
-};
-CSmartTableCleaner.displayName = 'CSmartTableCleaner';
-
 var CSmartTableHead = forwardRef(function (_a, ref) {
     var columnFilter = _a.columnFilter, columnFilterState = _a.columnFilterState, columnSorter = _a.columnSorter, _b = _a.component, Component = _b === void 0 ? CTableHead : _b, columns = _a.columns, handleOnCustomFilterChange = _a.handleOnCustomFilterChange, handleFilterOnChange = _a.handleFilterOnChange, handleFilterOnInput = _a.handleFilterOnInput, handleSelectAllChecked = _a.handleSelectAllChecked, handleSort = _a.handleSort, items = _a.items, selectable = _a.selectable, selectAll = _a.selectAll, selectedAll = _a.selectedAll, _c = _a.showGroups, showGroups = _c === void 0 ? true : _c, sorterState = _a.sorterState, sortingIcon = _a.sortingIcon, sortingIconAscending = _a.sortingIconAscending, sortingIconDescending = _a.sortingIconDescending, rest = __rest$1(_a, ["columnFilter", "columnFilterState", "columnSorter", "component", "columns", "handleOnCustomFilterChange", "handleFilterOnChange", "handleFilterOnInput", "handleSelectAllChecked", "handleSort", "items", "selectable", "selectAll", "selectedAll", "showGroups", "sorterState", "sortingIcon", "sortingIconAscending", "sortingIconDescending"]);
     var selectAllcheckboxRef = useRef(null);
@@ -14215,9 +14066,9 @@ var CSmartTableHead = forwardRef(function (_a, ref) {
                     React__default$1.createElement("div", { className: "d-inline" }, getColumnLabel(column)),
                     columnSorter &&
                         (typeof column === 'object'
-                            ? typeof column.sorter === 'undefined'
+                            ? (column.sorter === undefined
                                 ? true
-                                : column.sorter
+                                : column.sorter)
                             : true) &&
                         columnSorterIcon(column)));
             })),
@@ -14225,9 +14076,9 @@ var CSmartTableHead = forwardRef(function (_a, ref) {
             selectable && React__default$1.createElement(CTableHeaderCell, null),
             _columns.map(function (column, index) {
                 return (React__default$1.createElement(CTableHeaderCell, __assign$1({}, getTableHeaderCellProps(column), { key: index }), (typeof column === 'object'
-                    ? column.filter === undefined
+                    ? (column.filter === undefined
                         ? true
-                        : column.filter
+                        : column.filter)
                     : true) ? (typeof column !== 'string' && typeof column.filter === 'function' ? (!refresh &&
                     column.filter(getColumnValues(items, getColumnKey(column)), function (value) {
                         return handleOnCustomFilterChange &&
@@ -14285,6 +14136,7 @@ var CSmartTable = forwardRef(function (_a, ref) {
         if (items && items.length < _itemsPerPage * _activePage - _itemsPerPage) {
             setActivePage(1);
         }
+        var selected = [];
         items &&
             items.forEach(function (item) {
                 if (item._selected) {
@@ -14292,11 +14144,15 @@ var CSmartTable = forwardRef(function (_a, ref) {
                     delete _item['_cellProps'];
                     delete _item['_props'];
                     delete _item['_selected'];
-                    setSelected(__spreadArray(__spreadArray([], _selected, true), [_item], false));
+                    selected.push(_item);
                 }
             });
+        if (selected.length > 0) {
+            setSelected(__spreadArray(__spreadArray([], _selected, true), selected, true));
+        }
         if (Array.isArray(items)) {
             setItems(items);
+            // eslint-disable-next-line unicorn/explicit-length-check
             setItemsNumber(itemsNumber || items.length);
         }
     }, [JSON.stringify(items)]);
@@ -14455,12 +14311,16 @@ var CSmartTable = forwardRef(function (_a, ref) {
                         }, onChange: function (e) {
                             handleTableFilterChange(e.target.value, 'change');
                         }, placeholder: tableFilterPlaceholder, value: tableFilterState || '' }))))),
-            React__default$1.createElement("div", { className: "col-auto p-0" }, cleaner && (React__default$1.createElement(CSmartTableCleaner, { isFiltered: tableFilterState ||
-                    (sorterState === null || sorterState === void 0 ? void 0 : sorterState.column) ||
-                    Object.values(columnFilterState).join(''), onClick: function () { return handleClean(); }, onKeyDown: function (event) {
+            React__default$1.createElement("div", { className: "col-auto p-0" }, cleaner && (React__default$1.createElement("button", __assign$1({ type: "button", className: "btn btn-transparent" }, (!(tableFilterState ||
+                (sorterState === null || sorterState === void 0 ? void 0 : sorterState.column) ||
+                Object.values(columnFilterState).join('')) && {
+                disabled: true,
+                tabIndex: -1,
+            }), { onClick: function () { return handleClean(); }, onKeyDown: function (event) {
                     if (event.key === 'Enter')
                         handleClean();
-                } })))))))),
+                } }),
+                React__default$1.createElement(CIcon, { width: 18, icon: cilFilterX }))))))))),
         React__default$1.createElement("div", { className: "position-relative" },
             React__default$1.createElement(CTable, __assign$1({}, tableProps),
                 header && (React__default$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) {
@@ -14568,7 +14428,7 @@ var CSidebar = forwardRef(function (_a, ref) {
         var _a, _b;
         sidebarRef.current && setMobile(isOnMobile(sidebarRef.current));
         sidebarRef.current && setInViewport(isInViewport(sidebarRef.current));
-        window.addEventListener('resize', function () { return handleResize(); });
+        window.addEventListener('resize', handleResize);
         window.addEventListener('mouseup', handleClickOutside);
         window.addEventListener('keyup', handleKeyup);
         (_a = sidebarRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('mouseup', handleOnClick);
@@ -14577,7 +14437,7 @@ var CSidebar = forwardRef(function (_a, ref) {
         });
         return function () {
             var _a, _b;
-            window.removeEventListener('resize', function () { return handleResize(); });
+            window.removeEventListener('resize', handleResize);
             window.removeEventListener('mouseup', handleClickOutside);
             window.removeEventListener('keyup', handleKeyup);
             (_a = sidebarRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('mouseup', handleOnClick);
@@ -14855,7 +14715,6 @@ CToaster.propTypes = {
 CToaster.displayName = 'CToaster';
 
 var getPlacement = function (placement, element) {
-    console.log(element);
     switch (placement) {
         case 'right': {
             return isRTL(element) ? 'left' : 'right';
@@ -15066,5 +14925,5 @@ CWidgetStatsF.propTypes = {
 };
 CWidgetStatsF.displayName = 'CWidgetStatsF';
 
-export { CAccordion, CAccordionBody, CAccordionButton, CAccordionHeader, CAccordionItem, CAlert, CAlertHeading, CAlertLink, CAvatar, CBackdrop, CBadge, CBreadcrumb, CBreadcrumbItem, CButton, CButtonGroup, CButtonToolbar, CCallout, CCard, CCardBody, CCardFooter, CCardGroup, CCardHeader, CCardImage, CCardImageOverlay, CCardLink, CCardSubtitle, CCardText, CCardTitle, CCarousel, CCarouselCaption, CCarouselItem, CCloseButton, CCol, CCollapse, CConditionalPortal, CContainer, CDatePicker, CDateRangePicker, CDropdown, CDropdownDivider, CDropdownHeader, CDropdownItem, CDropdownItemPlain, CDropdownMenu, CDropdownToggle, CElementCover, CFooter, CForm, CFormCheck, CFormControlValidation, CFormControlWrapper, CFormFeedback, CFormFloating, CFormInput, CFormLabel, CFormRange, CFormSelect, CFormSwitch, CFormText, CFormTextarea, CHeader, CHeaderBrand, CHeaderDivider, CHeaderNav, CHeaderText, CHeaderToggler, CImage, CInputGroup, CInputGroupText, CLink, CListGroup, CListGroupItem, CLoadingButton, CModal, CModalBody, CModalContent, CModalDialog, CModalFooter, CModalHeader, CModalTitle, CMultiSelect, CNav, CNavGroup, CNavGroupItems, CNavItem, CNavLink, CNavTitle, CNavbar, CNavbarBrand, CNavbarNav, CNavbarText, CNavbarToggler, COffcanvas, COffcanvasBody, COffcanvasHeader, COffcanvasTitle, CPagination, CPaginationItem, CPlaceholder, CPopover, CProgress, CProgressBar, CRow, CSidebar, CSidebarBrand, CSidebarFooter, CSidebarHeader, CSidebarNav, CSidebarToggler, CSmartPagination, CSmartTable, CSpinner, CTabContent, CTabPane, CTable, CTableBody, CTableCaption, CTableDataCell, CTableFoot, CTableHead, CTableHeaderCell, CTableRow, CTimePicker, CToast, CToastBody, CToastClose, CToastHeader, CToaster, CTooltip, CVirtualScroller, CWidgetStatsA, CWidgetStatsB, CWidgetStatsC, CWidgetStatsD, CWidgetStatsE, CWidgetStatsF };
+export { CAccordion, CAccordionBody, CAccordionButton, CAccordionHeader, CAccordionItem, CAlert, CAlertHeading, CAlertLink, CAvatar, CBackdrop, CBadge, CBreadcrumb, CBreadcrumbItem, CButton, CButtonGroup, CButtonToolbar, CCallout, CCard, CCardBody, CCardFooter, CCardGroup, CCardHeader, CCardImage, CCardImageOverlay, CCardLink, CCardSubtitle, CCardText, CCardTitle, CCarousel, CCarouselCaption, CCarouselItem, CCloseButton, CCol, CCollapse, CConditionalPortal, CContainer, CDatePicker, CDateRangePicker, CDropdown, CDropdownDivider, CDropdownHeader, CDropdownItem, CDropdownItemPlain, CDropdownMenu, CDropdownToggle, CElementCover, CFooter, CForm, CFormCheck, CFormControlValidation, CFormControlWrapper, CFormFeedback, CFormFloating, CFormInput, CFormLabel, CFormRange, CFormSelect, CFormSwitch, CFormText, CFormTextarea, CHeader, CHeaderBrand, CHeaderDivider, CHeaderNav, CHeaderText, CHeaderToggler, CImage, CInputGroup, CInputGroupText, CLink, CListGroup, CListGroupItem, CLoadingButton, CModal, CModalBody, CModalContent, CModalDialog, CModalFooter, CModalHeader, CModalTitle, CMultiSelect, CNav, CNavGroup, CNavGroupItems, CNavItem, CNavLink, CNavTitle, CNavbar, CNavbarBrand, CNavbarNav, CNavbarText, CNavbarToggler, COffcanvas, COffcanvasBody, COffcanvasHeader, COffcanvasTitle, CPagination, CPaginationItem, CPlaceholder, CPopover, CProgress, CProgressBar, CRow, CSidebar, CSidebarBrand, CSidebarFooter, CSidebarHeader, CSidebarNav, CSidebarToggler, CSmartPagination, CSmartTable, CSpinner, CTabContent, CTabPane, CTable, CTableBody, CTableCaption, CTableDataCell, CTableFoot, CTableHead, CTableHeaderCell, CTableRow, CTimePicker, CToast, CToastBody, CToastClose, CToastHeader, CToaster, CTooltip, CVirtualScroller, CWidgetStatsA, CWidgetStatsB, CWidgetStatsC, CWidgetStatsD, CWidgetStatsE, CWidgetStatsF, useColorModes, useForkedRef, useStateWithCallback };
 //# sourceMappingURL=index.es.js.map