@coreui/react-pro 5.0.0-alpha.0 → 5.0.0-alpha.2

package/dist/index.js

@@ -60,7 +60,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
-function getDefaultExportFromCjs (x) {
+function getDefaultExportFromCjs$1 (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
 }
 
@@ -1244,8 +1244,8 @@ if (process.env.NODE_ENV !== 'production') {
   propTypes$1.exports = requireFactoryWithThrowingShims$1()();
 }
 
-var propTypesExports = propTypes$1.exports;
-var PropTypes = /*@__PURE__*/getDefaultExportFromCjs(propTypesExports);
+var propTypesExports$1 = propTypes$1.exports;
+var PropTypes$1 = /*@__PURE__*/getDefaultExportFromCjs$1(propTypesExports$1);
 
 var classnames$1 = {exports: {}};
 
@@ -1306,8 +1306,8 @@ var classnames$1 = {exports: {}};
 	}()); 
 } (classnames$1));
 
-var classnamesExports = classnames$1.exports;
-var classNames$1 = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
+var classnamesExports$1 = classnames$1.exports;
+var classNames$1 = /*@__PURE__*/getDefaultExportFromCjs$1(classnamesExports$1);
 
 var CAccordionContext = React$1.createContext({});
 var CAccordion = React$1.forwardRef(function (_a, ref) {
@@ -1317,11 +1317,11 @@ var CAccordion = React$1.forwardRef(function (_a, ref) {
         React$1.createElement(CAccordionContext.Provider, { value: { _activeItemKey: _activeItemKey, alwaysOpen: alwaysOpen, setActiveKey: setActiveKey } }, children)));
 });
 CAccordion.propTypes = {
-    alwaysOpen: PropTypes.bool,
-    activeItemKey: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    children: PropTypes.node,
-    className: PropTypes.string,
-    flush: PropTypes.bool,
+    alwaysOpen: PropTypes$1.bool,
+    activeItemKey: PropTypes$1.oneOfType([PropTypes$1.number, PropTypes$1.string]),
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
+    flush: PropTypes$1.bool,
 };
 CAccordion.displayName = 'CAccordion';
 
@@ -1341,9 +1341,9 @@ var CAccordionItem = React$1.forwardRef(function (_a, ref) {
         React$1.createElement(CAccordionItemContext.Provider, { value: { setVisible: setVisible, visible: visible } }, children)));
 });
 CAccordionItem.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    itemKey: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
+    itemKey: PropTypes$1.oneOfType([PropTypes$1.number, PropTypes$1.string]),
 };
 CAccordionItem.displayName = 'CAccordionItem';
 
@@ -1436,22 +1436,22 @@ var config = {
   disabled: false
 };
 
-var timeoutsShape = process.env.NODE_ENV !== 'production' ? PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
-  enter: PropTypes.number,
-  exit: PropTypes.number,
-  appear: PropTypes.number
+var timeoutsShape = process.env.NODE_ENV !== 'production' ? PropTypes$1.oneOfType([PropTypes$1.number, PropTypes$1.shape({
+  enter: PropTypes$1.number,
+  exit: PropTypes$1.number,
+  appear: PropTypes$1.number
 }).isRequired]) : null;
-var classNamesShape = process.env.NODE_ENV !== 'production' ? PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
-  enter: PropTypes.string,
-  exit: PropTypes.string,
-  active: PropTypes.string
-}), PropTypes.shape({
-  enter: PropTypes.string,
-  enterDone: PropTypes.string,
-  enterActive: PropTypes.string,
-  exit: PropTypes.string,
-  exitDone: PropTypes.string,
-  exitActive: PropTypes.string
+var classNamesShape = process.env.NODE_ENV !== 'production' ? PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.shape({
+  enter: PropTypes$1.string,
+  exit: PropTypes$1.string,
+  active: PropTypes$1.string
+}), PropTypes$1.shape({
+  enter: PropTypes$1.string,
+  enterDone: PropTypes$1.string,
+  enterActive: PropTypes$1.string,
+  exit: PropTypes$1.string,
+  exitDone: PropTypes$1.string,
+  exitActive: PropTypes$1.string
 })]) : null;
 
 var TransitionGroupContext = React$1.createContext(null);
@@ -1878,10 +1878,10 @@ Transition.propTypes = process.env.NODE_ENV !== "production" ? {
    *     (see
    *     [test/CSSTransition-test.js](https://github.com/reactjs/react-transition-group/blob/13435f897b3ab71f6e19d724f145596f5910581c/test/CSSTransition-test.js#L362-L437)).
    */
-  nodeRef: PropTypes.shape({
-    current: typeof Element === 'undefined' ? PropTypes.any : function (propValue, key, componentName, location, propFullName, secret) {
+  nodeRef: PropTypes$1.shape({
+    current: typeof Element === 'undefined' ? PropTypes$1.any : function (propValue, key, componentName, location, propFullName, secret) {
       var value = propValue[key];
-      return PropTypes.instanceOf(value && 'ownerDocument' in value ? value.ownerDocument.defaultView.Element : Element)(propValue, key, componentName, location, propFullName, secret);
+      return PropTypes$1.instanceOf(value && 'ownerDocument' in value ? value.ownerDocument.defaultView.Element : Element)(propValue, key, componentName, location, propFullName, secret);
     }
   }),
 
@@ -1899,12 +1899,12 @@ Transition.propTypes = process.env.NODE_ENV !== "production" ? {
    * </Transition>
    * ```
    */
-  children: PropTypes.oneOfType([PropTypes.func.isRequired, PropTypes.element.isRequired]).isRequired,
+  children: PropTypes$1.oneOfType([PropTypes$1.func.isRequired, PropTypes$1.element.isRequired]).isRequired,
 
   /**
    * Show the component; triggers the enter or exit states
    */
-  in: PropTypes.bool,
+  in: PropTypes$1.bool,
 
   /**
    * By default the child component is mounted immediately along with
@@ -1912,13 +1912,13 @@ Transition.propTypes = process.env.NODE_ENV !== "production" ? {
    * first `in={true}` you can set `mountOnEnter`. After the first enter transition the component will stay
    * mounted, even on "exited", unless you also specify `unmountOnExit`.
    */
-  mountOnEnter: PropTypes.bool,
+  mountOnEnter: PropTypes$1.bool,
 
   /**
    * By default the child component stays mounted after it reaches the `'exited'` state.
    * Set `unmountOnExit` if you'd prefer to unmount the component after it finishes exiting.
    */
-  unmountOnExit: PropTypes.bool,
+  unmountOnExit: PropTypes$1.bool,
 
   /**
    * By default the child component does not perform the enter transition when
@@ -1931,17 +1931,17 @@ Transition.propTypes = process.env.NODE_ENV !== "production" ? {
    * > additional `.appear-*` classes, that way you can choose to style it
    * > differently.
    */
-  appear: PropTypes.bool,
+  appear: PropTypes$1.bool,
 
   /**
    * Enable or disable enter transitions.
    */
-  enter: PropTypes.bool,
+  enter: PropTypes$1.bool,
 
   /**
    * Enable or disable exit transitions.
    */
-  exit: PropTypes.bool,
+  exit: PropTypes$1.bool,
 
   /**
    * The duration of the transition, in milliseconds.
@@ -1994,7 +1994,7 @@ Transition.propTypes = process.env.NODE_ENV !== "production" ? {
    * }}
    * ```
    */
-  addEndListener: PropTypes.func,
+  addEndListener: PropTypes$1.func,
 
   /**
    * Callback fired before the "entering" status is applied. An extra parameter
@@ -2004,7 +2004,7 @@ Transition.propTypes = process.env.NODE_ENV !== "production" ? {
    *
    * @type Function(node: HtmlElement, isAppearing: bool) -> void
    */
-  onEnter: PropTypes.func,
+  onEnter: PropTypes$1.func,
 
   /**
    * Callback fired after the "entering" status is applied. An extra parameter
@@ -2014,7 +2014,7 @@ Transition.propTypes = process.env.NODE_ENV !== "production" ? {
    *
    * @type Function(node: HtmlElement, isAppearing: bool)
    */
-  onEntering: PropTypes.func,
+  onEntering: PropTypes$1.func,
 
   /**
    * Callback fired after the "entered" status is applied. An extra parameter
@@ -2024,7 +2024,7 @@ Transition.propTypes = process.env.NODE_ENV !== "production" ? {
    *
    * @type Function(node: HtmlElement, isAppearing: bool) -> void
    */
-  onEntered: PropTypes.func,
+  onEntered: PropTypes$1.func,
 
   /**
    * Callback fired before the "exiting" status is applied.
@@ -2033,7 +2033,7 @@ Transition.propTypes = process.env.NODE_ENV !== "production" ? {
    *
    * @type Function(node: HtmlElement) -> void
    */
-  onExit: PropTypes.func,
+  onExit: PropTypes$1.func,
 
   /**
    * Callback fired after the "exiting" status is applied.
@@ -2042,7 +2042,7 @@ Transition.propTypes = process.env.NODE_ENV !== "production" ? {
    *
    * @type Function(node: HtmlElement) -> void
    */
-  onExiting: PropTypes.func,
+  onExiting: PropTypes$1.func,
 
   /**
    * Callback fired after the "exited" status is applied.
@@ -2051,7 +2051,7 @@ Transition.propTypes = process.env.NODE_ENV !== "production" ? {
    *
    * @type Function(node: HtmlElement) -> void
    */
-  onExited: PropTypes.func
+  onExited: PropTypes$1.func
 } : {}; // Name the function so it is clearer in the documentation
 
 function noop() {}
@@ -2426,7 +2426,7 @@ CSSTransition.propTypes = process.env.NODE_ENV !== "production" ? _extends$1({},
    *
    * @type Function(node: HtmlElement, isAppearing: bool)
    */
-  onEnter: PropTypes.func,
+  onEnter: PropTypes$1.func,
 
   /**
    * A `<Transition>` callback fired immediately after the 'enter-active' or
@@ -2436,7 +2436,7 @@ CSSTransition.propTypes = process.env.NODE_ENV !== "production" ? _extends$1({},
    *
    * @type Function(node: HtmlElement, isAppearing: bool)
    */
-  onEntering: PropTypes.func,
+  onEntering: PropTypes$1.func,
 
   /**
    * A `<Transition>` callback fired immediately after the 'enter' or
@@ -2446,7 +2446,7 @@ CSSTransition.propTypes = process.env.NODE_ENV !== "production" ? _extends$1({},
    *
    * @type Function(node: HtmlElement, isAppearing: bool)
    */
-  onEntered: PropTypes.func,
+  onEntered: PropTypes$1.func,
 
   /**
    * A `<Transition>` callback fired immediately after the 'exit' class is
@@ -2456,7 +2456,7 @@ CSSTransition.propTypes = process.env.NODE_ENV !== "production" ? _extends$1({},
    *
    * @type Function(node: HtmlElement)
    */
-  onExit: PropTypes.func,
+  onExit: PropTypes$1.func,
 
   /**
    * A `<Transition>` callback fired immediately after the 'exit-active' is applied.
@@ -2465,7 +2465,7 @@ CSSTransition.propTypes = process.env.NODE_ENV !== "production" ? _extends$1({},
    *
    * @type Function(node: HtmlElement)
    */
-  onExiting: PropTypes.func,
+  onExiting: PropTypes$1.func,
 
   /**
    * A `<Transition>` callback fired immediately after the 'exit' classes
@@ -2475,7 +2475,7 @@ CSSTransition.propTypes = process.env.NODE_ENV !== "production" ? _extends$1({},
    *
    * @type Function(node: HtmlElement)
    */
-  onExited: PropTypes.func
+  onExited: PropTypes$1.func
 }) : {};
 var CSSTransition$1 = CSSTransition;
 
@@ -4361,14 +4361,117 @@ var createPopper = /*#__PURE__*/popperGenerator({
   defaultModifiers: defaultModifiers
 }); // eslint-disable-next-line import/no-unused-modules
 
+var getTransitionDurationFromElement = function (element) {
+    if (!element) {
+        return 0;
+    }
+    // Get transition-duration of the element
+    var _a = window.getComputedStyle(element), transitionDuration = _a.transitionDuration, transitionDelay = _a.transitionDelay;
+    var floatTransitionDuration = Number.parseFloat(transitionDuration);
+    var floatTransitionDelay = Number.parseFloat(transitionDelay);
+    // Return 0 if element or transition duration is not found
+    if (!floatTransitionDuration && !floatTransitionDelay) {
+        return 0;
+    }
+    // If multiple durations are defined, take the first
+    transitionDuration = transitionDuration.split(',')[0];
+    transitionDelay = transitionDelay.split(',')[0];
+    return (Number.parseFloat(transitionDuration) + Number.parseFloat(transitionDelay)) * 1000;
+};
+
+var execute = function (callback) {
+    if (typeof callback === 'function') {
+        callback();
+    }
+};
+var triggerTransitionEnd = function (element) {
+    element.dispatchEvent(new Event('transitionend'));
+};
+var executeAfterTransition = function (callback, transitionElement, waitForTransition) {
+    if (waitForTransition === void 0) { waitForTransition = true; }
+    if (!waitForTransition) {
+        execute(callback);
+        return;
+    }
+    var durationPadding = 5;
+    var emulatedDuration = getTransitionDurationFromElement(transitionElement) + durationPadding;
+    var called = false;
+    var handler = function (_a) {
+        var target = _a.target;
+        if (target !== transitionElement) {
+            return;
+        }
+        called = true;
+        transitionElement.removeEventListener('transitionend', handler);
+        execute(callback);
+    };
+    transitionElement.addEventListener('transitionend', handler);
+    setTimeout(function () {
+        if (!called) {
+            triggerTransitionEnd(transitionElement);
+        }
+    }, emulatedDuration);
+};
+
+var isRTL = function (element) {
+    if (typeof document !== 'undefined' && document.documentElement.dir === 'rtl') {
+        return true;
+    }
+    if (element) {
+        return element.closest('[dir="rtl"]') !== null;
+    }
+    return false;
+};
+
+var getRTLPlacement = function (placement, element) {
+    switch (placement) {
+        case 'right': {
+            return isRTL(element) ? 'left' : 'right';
+        }
+        case 'left': {
+            return isRTL(element) ? 'right' : 'left';
+        }
+        default: {
+            return placement;
+        }
+    }
+};
+
+var isInViewport = function (element) {
+    var rect = element.getBoundingClientRect();
+    return (Math.floor(rect.top) >= 0 &&
+        Math.floor(rect.left) >= 0 &&
+        Math.floor(rect.bottom) <= (window.innerHeight || document.documentElement.clientHeight) &&
+        Math.floor(rect.right) <= (window.innerWidth || document.documentElement.clientWidth));
+};
+
+var isObjectInArray = function (array, item, ignore) {
+    if (ignore === void 0) { ignore = []; }
+    return array.some(function (_item) {
+        var result = true;
+        for (var key in item) {
+            if (!ignore.includes(key) && item[key] !== _item[key]) {
+                result = false;
+                break;
+            }
+        }
+        return result;
+    });
+};
+
 var usePopper = function () {
     var _popper = React$1.useRef();
+    var el = React$1.useRef();
     var initPopper = function (reference, popper, options) {
         _popper.current = createPopper(reference, popper, options);
+        el.current = popper;
     };
     var destroyPopper = function () {
-        if (_popper.current) {
-            _popper.current.destroy();
+        var popperInstance = _popper.current;
+        if (popperInstance && el.current) {
+            executeAfterTransition(function () {
+                popperInstance.destroy();
+            }, el.current);
         }
         _popper.current = undefined;
     };
@@ -4443,12 +4546,12 @@ var CCollapse = React$1.forwardRef(function (_a, ref) {
     }));
 });
 CCollapse.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    horizontal: PropTypes.bool,
-    onHide: PropTypes.func,
-    onShow: PropTypes.func,
-    visible: PropTypes.bool,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
+    horizontal: PropTypes$1.bool,
+    onHide: PropTypes$1.func,
+    onShow: PropTypes$1.func,
+    visible: PropTypes$1.bool,
 };
 CCollapse.displayName = 'CCollapse';
 
@@ -4459,8 +4562,8 @@ var CAccordionBody = React$1.forwardRef(function (_a, ref) {
         React$1.createElement("div", __assign$1({ className: classNames$1('accordion-body', className) }, rest, { ref: ref }), children)));
 });
 CAccordionBody.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
 };
 CAccordionBody.displayName = 'CAccordionBody';
 
@@ -4470,8 +4573,8 @@ var CAccordionButton = React$1.forwardRef(function (_a, ref) {
     return (React$1.createElement("button", __assign$1({ type: "button", className: classNames$1('accordion-button', { collapsed: !visible }, className), "aria-expanded": !visible, onClick: function () { return setVisible(!visible); } }, rest, { ref: ref }), children));
 });
 CAccordionButton.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
 };
 CAccordionButton.displayName = 'CAccordionButton';
 
@@ -4481,26 +4584,27 @@ var CAccordionHeader = React$1.forwardRef(function (_a, ref) {
         React$1.createElement(CAccordionButton, null, children)));
 });
 CAccordionHeader.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
 };
 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.string,
-    disabled: PropTypes.bool,
-    white: PropTypes.bool,
+    className: PropTypes$1.string,
+    dark: PropTypes$1.bool,
+    disabled: PropTypes$1.bool,
+    white: PropTypes$1.bool,
 };
 CCloseButton.displayName = 'CCloseButton';
 
-var colorPropType = PropTypes.oneOfType([
-    PropTypes.oneOf([
+var colorPropType = PropTypes$1.oneOfType([
+    PropTypes$1.oneOf([
         'primary',
         'secondary',
         'success',
@@ -4510,13 +4614,13 @@ var colorPropType = PropTypes.oneOfType([
         'dark',
         'light',
     ]),
-    PropTypes.string,
+    PropTypes$1.string,
 ]);
-var fallbackPlacementsPropType = PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.oneOf(['top', 'bottom', 'right', 'left']).isRequired),
-    PropTypes.oneOf(['top', 'bottom', 'right', 'left']),
+var fallbackPlacementsPropType = PropTypes$1.oneOfType([
+    PropTypes$1.arrayOf(PropTypes$1.oneOf(['top', 'bottom', 'right', 'left']).isRequired),
+    PropTypes$1.oneOf(['top', 'bottom', 'right', 'left']),
 ]);
-var gradientsPropType = PropTypes.oneOf([
+var gradientsPropType = PropTypes$1.oneOf([
     'primary-gradient',
     'secondary-gradient',
     'success-gradient',
@@ -4526,7 +4630,7 @@ var gradientsPropType = PropTypes.oneOf([
     'dark-gradient',
     'light-gradient',
 ]);
-var placementPropType = PropTypes.oneOf([
+var placementPropType = PropTypes$1.oneOf([
     'auto',
     'auto-start',
     'auto-end',
@@ -4543,8 +4647,8 @@ var placementPropType = PropTypes.oneOf([
     'left',
     'left-end',
 ]);
-var shapePropType = PropTypes.oneOfType([
-    PropTypes.oneOf([
+var shapePropType = PropTypes$1.oneOfType([
+    PropTypes$1.oneOf([
         'rounded',
         'rounded-top',
         'rounded-end',
@@ -4557,16 +4661,16 @@ var shapePropType = PropTypes.oneOfType([
         'rounded-2',
         'rounded-3',
     ]),
-    PropTypes.string,
+    PropTypes$1.string,
 ]);
-var textColorsPropType = PropTypes.oneOfType([
+var textColorsPropType = PropTypes$1.oneOfType([
     colorPropType,
-    PropTypes.oneOf(['white', 'muted']),
-    PropTypes.string,
+    PropTypes$1.oneOf(['white', 'muted']),
+    PropTypes$1.string,
 ]);
-var triggerPropType = PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.oneOf(['hover', 'focus', 'click']).isRequired),
-    PropTypes.oneOf(['hover', 'focus', 'click']),
+var triggerPropType = PropTypes$1.oneOfType([
+    PropTypes$1.arrayOf(PropTypes$1.oneOf(['hover', 'focus', 'click']).isRequired),
+    PropTypes$1.oneOf(['hover', 'focus', 'click']),
 ]);
 
 var CAlert = React$1.forwardRef(function (_a, ref) {
@@ -4585,13 +4689,13 @@ var CAlert = React$1.forwardRef(function (_a, ref) {
         dismissible && React$1.createElement(CCloseButton, { onClick: function () { return setVisible(false); } }))); }));
 });
 CAlert.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
     color: colorPropType.isRequired,
-    dismissible: PropTypes.bool,
-    onClose: PropTypes.func,
-    variant: PropTypes.string,
-    visible: PropTypes.bool,
+    dismissible: PropTypes$1.bool,
+    onClose: PropTypes$1.func,
+    variant: PropTypes$1.string,
+    visible: PropTypes$1.bool,
 };
 CAlert.displayName = 'CAlert';
 
@@ -4600,9 +4704,9 @@ var CAlertHeading = React$1.forwardRef(function (_a, ref) {
     return (React$1.createElement(Component, __assign$1({ className: classNames$1('alert-heading', className) }, rest, { ref: ref }), children));
 });
 CAlertHeading.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    component: PropTypes.elementType,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
+    component: PropTypes$1.elementType,
 };
 CAlertHeading.displayName = 'CAlertHeading';
 
@@ -4620,11 +4724,11 @@ var CLink = React$1.forwardRef(function (_a, ref) {
     }), { disabled: disabled }, rest, { ref: ref }), children));
 });
 CLink.propTypes = {
-    active: PropTypes.bool,
-    children: PropTypes.node,
-    className: PropTypes.string,
-    component: PropTypes.elementType,
-    disabled: PropTypes.bool,
+    active: PropTypes$1.bool,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
+    component: PropTypes$1.elementType,
+    disabled: PropTypes$1.bool,
 };
 CLink.displayName = 'CLink';
 
@@ -4633,8 +4737,8 @@ var CAlertLink = React$1.forwardRef(function (_a, ref) {
     return (React$1.createElement(CLink, __assign$1({ className: classNames$1('alert-link', className) }, rest, { ref: ref }), children));
 });
 CAlertLink.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
 };
 CAlertLink.displayName = 'CAlertLink';
 
@@ -4651,13 +4755,13 @@ var CAvatar = React$1.forwardRef(function (_a, ref) {
         status && React$1.createElement("span", { className: statusClassName })));
 });
 CAvatar.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
     color: colorPropType,
     shape: shapePropType,
-    size: PropTypes.string,
-    src: PropTypes.string,
-    status: PropTypes.string,
+    size: PropTypes$1.string,
+    src: PropTypes$1.string,
+    status: PropTypes$1.string,
     textColor: textColorsPropType,
 };
 CAvatar.displayName = 'CAvatar';
@@ -4671,8 +4775,8 @@ var CBackdrop = React$1.forwardRef(function (_a, ref) {
         }) }, rest, { ref: forkedRef }))); }));
 });
 CBackdrop.propTypes = {
-    className: PropTypes.string,
-    visible: PropTypes.bool,
+    className: PropTypes$1.string,
+    visible: PropTypes$1.bool,
 };
 CBackdrop.displayName = 'CBackdrop';
 
@@ -4691,13 +4795,13 @@ var CBadge = React$1.forwardRef(function (_a, ref) {
             _b), shape, className) }, rest, { ref: ref }), children));
 });
 CBadge.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    color: PropTypes.oneOfType([colorPropType, gradientsPropType]),
-    component: PropTypes.string,
-    position: PropTypes.oneOf(['top-start', 'top-end', 'bottom-end', 'bottom-start']),
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
+    color: PropTypes$1.oneOfType([colorPropType, gradientsPropType]),
+    component: PropTypes$1.string,
+    position: PropTypes$1.oneOf(['top-start', 'top-end', 'bottom-end', 'bottom-start']),
     shape: shapePropType,
-    size: PropTypes.oneOf(['sm']),
+    size: PropTypes$1.oneOf(['sm']),
     textColor: textColorsPropType,
 };
 CBadge.displayName = 'CBadge';
@@ -4708,8 +4812,8 @@ var CBreadcrumb = React$1.forwardRef(function (_a, ref) {
         React$1.createElement("ol", __assign$1({ className: classNames$1('breadcrumb', className) }, rest, { ref: ref }), children)));
 });
 CBreadcrumb.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
 };
 CBreadcrumb.displayName = 'CBreadcrumb';
 
@@ -4720,27 +4824,27 @@ var CBreadcrumbItem = React$1.forwardRef(function (_a, ref) {
         }, className) }, (active && { 'aria-current': 'page' }), rest, { ref: ref }), href ? React$1.createElement(CLink, { href: href }, children) : children));
 });
 CBreadcrumbItem.propTypes = {
-    active: PropTypes.bool,
-    children: PropTypes.node,
-    className: PropTypes.string,
-    href: PropTypes.string,
+    active: PropTypes$1.bool,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
+    href: PropTypes$1.string,
 };
 CBreadcrumbItem.displayName = 'CBreadcrumbItem';
 
 var CButton = React$1.forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, _c = _a.color, color = _c === void 0 ? 'primary' : _c, _d = _a.component, component = _d === void 0 ? 'button' : _d, shape = _a.shape, size = _a.size, _e = _a.type, type = _e === void 0 ? 'button' : _e, variant = _a.variant, rest = __rest$1(_a, ["children", "className", "color", "component", "shape", "size", "type", "variant"]);
-    return (React$1.createElement(CLink, __assign$1({ component: rest.href ? 'a' : component, type: type, className: classNames$1('btn', variant ? "btn-".concat(variant, "-").concat(color) : "btn-".concat(color), (_b = {}, _b["btn-".concat(size)] = size, _b), shape, className) }, rest, { ref: ref }), children));
+    return (React$1.createElement(CLink, __assign$1({ component: rest.href ? 'a' : component }, (!rest.href && { type: type }), { className: classNames$1('btn', variant ? "btn-".concat(variant, "-").concat(color) : "btn-".concat(color), (_b = {}, _b["btn-".concat(size)] = size, _b), shape, className) }, rest, { ref: ref }), children));
 });
 CButton.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
     color: colorPropType,
-    component: PropTypes.elementType,
-    shape: PropTypes.string,
-    size: PropTypes.oneOf(['sm', 'lg']),
-    type: PropTypes.oneOf(['button', 'submit', 'reset']),
-    variant: PropTypes.oneOf(['outline', 'ghost']),
+    component: PropTypes$1.elementType,
+    shape: PropTypes$1.string,
+    size: PropTypes$1.oneOf(['sm', 'lg']),
+    type: PropTypes$1.oneOf(['button', 'submit', 'reset']),
+    variant: PropTypes$1.oneOf(['outline', 'ghost']),
 };
 CButton.displayName = 'CButton';
 
@@ -4749,8 +4853,8 @@ var CButtonToolbar = React$1.forwardRef(function (_a, ref) {
     return (React$1.createElement("div", __assign$1({ className: classNames$1('btn-toolbar', className) }, rest, { ref: ref }), children));
 });
 CButtonToolbar.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
 };
 CButtonToolbar.displayName = 'CButtonToolbar';
 
@@ -4760,10 +4864,10 @@ var CButtonGroup = React$1.forwardRef(function (_a, ref) {
     return (React$1.createElement("div", __assign$1({ className: classNames$1(vertical ? 'btn-group-vertical' : 'btn-group', (_b = {}, _b["btn-group-".concat(size)] = size, _b), className) }, rest, { ref: ref }), children));
 });
 CButtonGroup.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    size: PropTypes.oneOf(['sm', 'lg']),
-    vertical: PropTypes.bool,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
+    size: PropTypes$1.oneOf(['sm', 'lg']),
+    vertical: PropTypes$1.bool,
 };
 CButtonGroup.displayName = 'CButtonGroup';
 
@@ -4775,8 +4879,8 @@ var CCallout = React$1.forwardRef(function (_a, ref) {
             _b), className) }, rest, { ref: ref }), children));
 });
 CCallout.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
     color: colorPropType,
 };
 CCallout.displayName = 'CCallout';
@@ -4790,10 +4894,10 @@ var CCard = React$1.forwardRef(function (_a, ref) {
             _b), className) }, rest, { ref: ref }), children));
 });
 CCard.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    color: PropTypes.oneOfType([colorPropType, gradientsPropType]),
-    textColor: PropTypes.string,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
+    color: PropTypes$1.oneOfType([colorPropType, gradientsPropType]),
+    textColor: PropTypes$1.string,
 };
 CCard.displayName = 'CCard';
 
@@ -4802,8 +4906,8 @@ var CCardBody = React$1.forwardRef(function (_a, ref) {
     return (React$1.createElement("div", __assign$1({ className: classNames$1('card-body', className) }, rest, { ref: ref }), children));
 });
 CCardBody.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
 };
 CCardBody.displayName = 'CCardBody';
 
@@ -4812,8 +4916,8 @@ var CCardFooter = React$1.forwardRef(function (_a, ref) {
     return (React$1.createElement("div", __assign$1({ className: classNames$1('card-footer', className) }, rest, { ref: ref }), children));
 });
 CCardFooter.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
 };
 CCardFooter.displayName = 'CCardFooter';
 
@@ -4822,8 +4926,8 @@ var CCardGroup = React$1.forwardRef(function (_a, ref) {
     return (React$1.createElement("div", __assign$1({ className: classNames$1('card-group', className) }, rest, { ref: ref }), children));
 });
 CCardGroup.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
 };
 CCardGroup.displayName = 'CCardGroup';
 
@@ -4832,9 +4936,9 @@ var CCardHeader = React$1.forwardRef(function (_a, ref) {
     return (React$1.createElement(Component, __assign$1({ className: classNames$1('card-header', className) }, rest, { ref: ref }), children));
 });
 CCardHeader.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    component: PropTypes.elementType,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
+    component: PropTypes$1.elementType,
 };
 CCardHeader.displayName = 'CCardHeader';
 
@@ -4843,10 +4947,10 @@ var CCardImage = React$1.forwardRef(function (_a, ref) {
     return (React$1.createElement(Component, __assign$1({ className: classNames$1(orientation ? "card-img-".concat(orientation) : 'card-img', className) }, rest, { ref: ref }), children));
 });
 CCardImage.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    component: PropTypes.elementType,
-    orientation: PropTypes.oneOf(['top', 'bottom']),
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
+    component: PropTypes$1.elementType,
+    orientation: PropTypes$1.oneOf(['top', 'bottom']),
 };
 CCardImage.displayName = 'CCardImage';
 
@@ -4855,8 +4959,8 @@ var CCardImageOverlay = React$1.forwardRef(function (_a, ref) {
     return (React$1.createElement("div", __assign$1({ className: classNames$1('card-img-overlay', className) }, rest, { ref: ref }), children));
 });
 CCardImageOverlay.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
 };
 CCardImageOverlay.displayName = 'CCardImageOverlay';
 
@@ -4865,8 +4969,8 @@ var CCardLink = React$1.forwardRef(function (_a, ref) {
     return (React$1.createElement(CLink, __assign$1({ className: classNames$1('card-link', className) }, rest, { ref: ref }), children));
 });
 CCardLink.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
 };
 CCardLink.displayName = 'CCardLink';
 
@@ -4875,9 +4979,9 @@ var CCardSubtitle = React$1.forwardRef(function (_a, ref) {
     return (React$1.createElement(Component, __assign$1({ className: classNames$1('card-subtitle', className) }, rest, { ref: ref }), children));
 });
 CCardSubtitle.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    component: PropTypes.elementType,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
+    component: PropTypes$1.elementType,
 };
 CCardSubtitle.displayName = 'CCardSubtitle';
 
@@ -4886,9 +4990,9 @@ var CCardText = React$1.forwardRef(function (_a, ref) {
     return (React$1.createElement(Component, __assign$1({ className: classNames$1('card-text', className) }, rest, { ref: ref }), children));
 });
 CCardText.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    component: PropTypes.elementType,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
+    component: PropTypes$1.elementType,
 };
 CCardText.displayName = 'CCardText';
 
@@ -4897,58 +5001,12 @@ var CCardTitle = React$1.forwardRef(function (_a, ref) {
     return (React$1.createElement(Component, __assign$1({ className: classNames$1('card-title', className) }, rest, { ref: ref }), children));
 });
 CCardTitle.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    component: PropTypes.elementType,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
+    component: PropTypes$1.elementType,
 };
 CCardTitle.displayName = 'CCardTitle';
 
-var isRTL = function (element) {
-    if (typeof document !== 'undefined' && document.documentElement.dir === 'rtl') {
-        return true;
-    }
-    if (element) {
-        return element.closest('[dir="rtl"]') !== null;
-    }
-    return false;
-};
-
-var getRTLPlacement = function (placement, element) {
-    switch (placement) {
-        case 'right': {
-            return isRTL(element) ? 'left' : 'right';
-        }
-        case 'left': {
-            return isRTL(element) ? 'right' : 'left';
-        }
-        default: {
-            return placement;
-        }
-    }
-};
-
-var isInViewport = function (element) {
-    var rect = element.getBoundingClientRect();
-    return (Math.floor(rect.top) >= 0 &&
-        Math.floor(rect.left) >= 0 &&
-        Math.floor(rect.bottom) <= (window.innerHeight || document.documentElement.clientHeight) &&
-        Math.floor(rect.right) <= (window.innerWidth || document.documentElement.clientWidth));
-};
-
-var isObjectInArray = function (array, item, ignore) {
-    if (ignore === void 0) { ignore = []; }
-    return array.some(function (_item) {
-        var result = true;
-        for (var key in item) {
-            if (!ignore.includes(key) && item[key] !== _item[key]) {
-                result = false;
-                break;
-            }
-        }
-        return result;
-    });
-};
-
 var CCarouselContext = React$1.createContext({});
 var CCarousel = React$1.forwardRef(function (_a, ref) {
     var children = _a.children, _b = _a.activeIndex, activeIndex = _b === void 0 ? 0 : _b, className = _a.className, controls = _a.controls, dark = _a.dark, indicators = _a.indicators, _c = _a.interval, interval = _c === void 0 ? 5000 : _c, onSlid = _a.onSlid, onSlide = _a.onSlide, _d = _a.pause, pause = _d === void 0 ? 'hover' : _d, _e = _a.touch, touch = _e === void 0 ? true : _e, transition = _a.transition, _f = _a.wrap, wrap = _f === void 0 ? true : _f, rest = __rest$1(_a, ["children", "activeIndex", "className", "controls", "dark", "indicators", "interval", "onSlid", "onSlide", "pause", "touch", "transition", "wrap"]);
@@ -5053,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)) {
@@ -5082,19 +5141,19 @@ var CCarousel = React$1.forwardRef(function (_a, ref) {
                     React$1.createElement("span", { className: "carousel-control-next-icon", "aria-label": "next" })))))));
 });
 CCarousel.propTypes = {
-    activeIndex: PropTypes.number,
-    children: PropTypes.node,
-    className: PropTypes.string,
-    controls: PropTypes.bool,
-    dark: PropTypes.bool,
-    indicators: PropTypes.bool,
-    interval: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
-    onSlid: PropTypes.func,
-    onSlide: PropTypes.func,
-    pause: PropTypes.oneOf([false, 'hover']),
-    touch: PropTypes.bool,
-    transition: PropTypes.oneOf(['slide', 'crossfade']),
-    wrap: PropTypes.bool,
+    activeIndex: PropTypes$1.number,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
+    controls: PropTypes$1.bool,
+    dark: PropTypes$1.bool,
+    indicators: PropTypes$1.bool,
+    interval: PropTypes$1.oneOfType([PropTypes$1.bool, PropTypes$1.number]),
+    onSlid: PropTypes$1.func,
+    onSlide: PropTypes$1.func,
+    pause: PropTypes$1.oneOf([false, 'hover']),
+    touch: PropTypes$1.bool,
+    transition: PropTypes$1.oneOf(['slide', 'crossfade']),
+    wrap: PropTypes$1.bool,
 };
 CCarousel.displayName = 'CCarousel';
 
@@ -5103,7 +5162,7 @@ var CCarouselCaption = React$1.forwardRef(function (_a, ref) {
     return React$1.createElement("div", __assign$1({ className: classNames$1('carousel-caption', className) }, rest, { ref: ref }));
 });
 CCarouselCaption.propTypes = {
-    className: PropTypes.string,
+    className: PropTypes$1.string,
 };
 CCarouselCaption.displayName = 'CCarouselCaption';
 
@@ -5178,11 +5237,11 @@ var CCarouselItem = React$1.forwardRef(function (_a, ref) {
     return (React$1.createElement("div", __assign$1({ className: classNames$1('carousel-item', activeClassName, directionClassName, orderClassName, className), ref: forkedRef }, rest), children));
 });
 CCarouselItem.propTypes = {
-    active: PropTypes.bool,
-    children: PropTypes.node,
-    className: PropTypes.string,
-    direction: PropTypes.string,
-    interval: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
+    active: PropTypes$1.bool,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
+    direction: PropTypes$1.string,
+    interval: PropTypes$1.oneOfType([PropTypes$1.bool, PropTypes$1.number]),
 };
 CCarouselItem.displayName = 'CCarouselItem';
 
@@ -5191,8 +5250,8 @@ var CConditionalPortal = function (_a) {
     return typeof window !== 'undefined' && portal ? (ReactDOM.createPortal(children, document.body)) : (React$1.createElement(React$1.Fragment, null, children));
 };
 CConditionalPortal.propTypes = {
-    children: PropTypes.node,
-    portal: PropTypes.bool.isRequired,
+    children: PropTypes$1.node,
+    portal: PropTypes$1.bool.isRequired,
 };
 CConditionalPortal.displayName = 'CConditionalPortal';
 
@@ -8490,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();
@@ -8555,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);
@@ -8563,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: [],
+            });
         }
-        weeks[weeks.length - 1].push(day);
+        if ((index + 1) % 7 === 0) {
+            weeks[weeks.length - 1].weekNumber = getWeekNumber(day.date);
+        }
+        weeks[weeks.length - 1].days.push(day);
     });
     return weeks;
 };
@@ -8610,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() &&
@@ -8630,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() &&
@@ -8641,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]);
@@ -8795,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;
     }, []);
@@ -8813,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);
@@ -8851,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; }
@@ -8904,56 +9133,56 @@ 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.string,
-    calendarDate: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
-    calendars: PropTypes.number,
-    dayFormat: PropTypes.oneOfType([
-        PropTypes.func,
-        PropTypes.oneOf(['2-digit', 'numeric']),
+    className: PropTypes$1.string,
+    calendarDate: PropTypes$1.oneOfType([PropTypes$1.instanceOf(Date), PropTypes$1.string]),
+    calendars: PropTypes$1.number,
+    dayFormat: PropTypes$1.oneOfType([
+        PropTypes$1.func,
+        PropTypes$1.oneOf(['2-digit', 'numeric']),
     ]),
-    disabledDates: PropTypes.array,
-    endDate: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
-    firstDayOfWeek: PropTypes.number,
-    locale: PropTypes.string,
-    maxDate: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
-    minDate: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
-    navigation: PropTypes.bool,
-    navNextIcon: PropTypes.node,
-    navNextDoubleIcon: PropTypes.node,
-    navPrevIcon: PropTypes.node,
-    navPrevDoubleIcon: PropTypes.node,
-    navYearFirst: PropTypes.bool,
-    range: PropTypes.bool,
-    selectAdjacementDays: PropTypes.bool,
-    selectEndDate: PropTypes.bool,
-    showAdjacementDays: PropTypes.bool,
-    startDate: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
-    weekdayFormat: PropTypes.oneOfType([
-        PropTypes.func,
-        PropTypes.number,
-        PropTypes.oneOf(['long', 'narrow', 'short']),
+    disabledDates: PropTypes$1.array,
+    endDate: PropTypes$1.oneOfType([PropTypes$1.instanceOf(Date), PropTypes$1.string]),
+    firstDayOfWeek: PropTypes$1.number,
+    locale: PropTypes$1.string,
+    maxDate: PropTypes$1.oneOfType([PropTypes$1.instanceOf(Date), PropTypes$1.string]),
+    minDate: PropTypes$1.oneOfType([PropTypes$1.instanceOf(Date), PropTypes$1.string]),
+    navigation: PropTypes$1.bool,
+    navNextIcon: PropTypes$1.node,
+    navNextDoubleIcon: PropTypes$1.node,
+    navPrevIcon: PropTypes$1.node,
+    navPrevDoubleIcon: PropTypes$1.node,
+    navYearFirst: PropTypes$1.bool,
+    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.func,
-    onCalendarDateChange: PropTypes.func,
-    onEndDateChange: PropTypes.func,
-    onSelectEndChange: PropTypes.func,
-    onStartDateChange: PropTypes.func,
-    onViewChanged: PropTypes.func,
+    weekNumbersLabel: PropTypes$1.string,
+    onDateHover: PropTypes$1.func,
+    onCalendarDateChange: PropTypes$1.func,
+    onEndDateChange: PropTypes$1.func,
+    onSelectEndChange: PropTypes$1.func,
+    onStartDateChange: PropTypes$1.func,
+    onViewChanged: PropTypes$1.func,
 };
 CCalendar.displayName = 'CCalendar';
 
@@ -8966,12 +9195,12 @@ var CFormFeedback = React$1.forwardRef(function (_a, ref) {
             _b), className) }, rest, { ref: ref }), children));
 });
 CFormFeedback.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    component: PropTypes.elementType,
-    invalid: PropTypes.bool,
-    tooltip: PropTypes.bool,
-    valid: PropTypes.bool,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
+    component: PropTypes$1.elementType,
+    invalid: PropTypes$1.bool,
+    tooltip: PropTypes$1.bool,
+    valid: PropTypes$1.bool,
 };
 CFormFeedback.displayName = 'CFormFeedback';
 
@@ -8983,13 +9212,13 @@ var CFormControlValidation = function (_a) {
         feedbackValid && (React$1.createElement(CFormFeedback, { valid: true, tooltip: tooltipFeedback }, feedbackValid))));
 };
 CFormControlValidation.propTypes = {
-    describedby: PropTypes.string,
-    feedback: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
-    feedbackValid: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
-    feedbackInvalid: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
-    invalid: PropTypes.bool,
-    tooltipFeedback: PropTypes.bool,
-    valid: PropTypes.bool,
+    describedby: PropTypes$1.string,
+    feedback: PropTypes$1.oneOfType([PropTypes$1.node, PropTypes$1.string]),
+    feedbackValid: PropTypes$1.oneOfType([PropTypes$1.node, PropTypes$1.string]),
+    feedbackInvalid: PropTypes$1.oneOfType([PropTypes$1.node, PropTypes$1.string]),
+    invalid: PropTypes$1.bool,
+    tooltipFeedback: PropTypes$1.bool,
+    valid: PropTypes$1.bool,
 };
 CFormControlValidation.displayName = 'CFormControlValidation';
 
@@ -8998,8 +9227,8 @@ var CFormFloating = React$1.forwardRef(function (_a, ref) {
     return (React$1.createElement("div", __assign$1({ className: classNames$1('form-floating', className) }, rest, { ref: ref }), children));
 });
 CFormFloating.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
 };
 CFormFloating.displayName = 'CFormFloating';
 
@@ -9008,9 +9237,9 @@ var CFormLabel = React$1.forwardRef(function (_a, ref) {
     return (React$1.createElement("label", __assign$1({ className: customClassName !== null && customClassName !== void 0 ? customClassName : classNames$1('form-label', className) }, rest, { ref: ref }), children));
 });
 CFormLabel.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    customClassName: PropTypes.string,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
+    customClassName: PropTypes$1.string,
 };
 CFormLabel.displayName = 'CFormLabel';
 
@@ -9019,9 +9248,9 @@ var CFormText = React$1.forwardRef(function (_a, ref) {
     return (React$1.createElement(Component, __assign$1({ className: classNames$1('form-text', className) }, rest, { ref: ref }), children));
 });
 CFormText.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    component: PropTypes.elementType,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
+    component: PropTypes$1.elementType,
 };
 CFormText.displayName = 'CFormText';
 
@@ -9038,7 +9267,7 @@ var CFormControlWrapper = function (_a) {
         text && React$1.createElement(CFormText, { id: describedby }, text),
         React$1.createElement(FormControlValidation, null)));
 };
-CFormControlWrapper.propTypes = __assign$1({ children: PropTypes.node, floatingClassName: PropTypes.string, floatingLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.string]), label: PropTypes.oneOfType([PropTypes.node, PropTypes.string]), text: PropTypes.oneOfType([PropTypes.node, PropTypes.string]) }, CFormControlValidation.propTypes);
+CFormControlWrapper.propTypes = __assign$1({ children: PropTypes$1.node, floatingClassName: PropTypes$1.string, floatingLabel: PropTypes$1.oneOfType([PropTypes$1.node, PropTypes$1.string]), label: PropTypes$1.oneOfType([PropTypes$1.node, PropTypes$1.string]), text: PropTypes$1.oneOfType([PropTypes$1.node, PropTypes$1.string]) }, CFormControlValidation.propTypes);
 CFormControlWrapper.displayName = 'CFormControlWrapper';
 
 var CPicker = React$1.forwardRef(function (_a, ref) {
@@ -9117,16 +9346,16 @@ var CPicker = React$1.forwardRef(function (_a, ref) {
 });
 CPicker.displayName = 'CPicker';
 CPicker.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    container: PropTypes.oneOf(['dropdown', 'inline']),
-    disabled: PropTypes.bool,
-    dropdownClassNames: PropTypes.string,
-    footer: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),
-    footerContent: PropTypes.node,
-    onHide: PropTypes.func,
-    onShow: PropTypes.func,
-    toggler: PropTypes.node,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
+    container: PropTypes$1.oneOf(['dropdown', 'inline']),
+    disabled: PropTypes$1.bool,
+    dropdownClassNames: PropTypes$1.string,
+    footer: PropTypes$1.oneOfType([PropTypes$1.bool, PropTypes$1.node]),
+    footerContent: PropTypes$1.node,
+    onHide: PropTypes$1.func,
+    onShow: PropTypes$1.func,
+    toggler: PropTypes$1.node,
 };
 
 var CTimePickerRollCol = React$1.forwardRef(function (_a, ref) {
@@ -9158,9 +9387,9 @@ var CTimePickerRollCol = React$1.forwardRef(function (_a, ref) {
     })));
 });
 CTimePickerRollCol.propTypes = {
-    elements: PropTypes.array.isRequired,
-    onClick: PropTypes.func,
-    selected: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    elements: PropTypes$1.array.isRequired,
+    onClick: PropTypes$1.func,
+    selected: PropTypes$1.oneOfType([PropTypes$1.number, PropTypes$1.string]),
 };
 CTimePickerRollCol.displayName = 'CTimePickerRollCol';
 
@@ -9178,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')) {
@@ -9244,7 +9477,7 @@ var CTimePicker = React$1.forwardRef(function (_a, ref) {
     var inputRef = React$1.useRef(null);
     var _v = React$1.useState(convertTimeToDate(time)), date = _v[0], setDate = _v[1];
     var _w = React$1.useState(null), initialDate = _w[0], setInitialDate = _w[1];
-    var _x = React$1.useState(valid || (invalid && false)), isValid = _x[0], setIsValid = _x[1];
+    var _x = React$1.useState(valid !== null && valid !== void 0 ? valid : (invalid === true ? false : undefined)), isValid = _x[0], setIsValid = _x[1];
     var _y = React$1.useState(date ? getAmPm(new Date(date), locale) : 'am'), _ampm = _y[0], setAmPm = _y[1];
     var _z = React$1.useState(visible), _visible = _z[0], setVisible = _z[1];
     var _0 = React$1.useState({
@@ -9257,7 +9490,7 @@ var CTimePicker = React$1.forwardRef(function (_a, ref) {
         setDate(convertTimeToDate(time));
     }, [time]);
     React$1.useEffect(function () {
-        setIsValid(valid || (invalid && false));
+        setIsValid(valid !== null && valid !== void 0 ? valid : (invalid === true ? false : undefined));
     }, [valid, invalid]);
     React$1.useEffect(function () {
         setLocalizedTimePartials(getLocalizedTimePartials(locale, ampm));
@@ -9393,7 +9626,7 @@ var CTimePicker = React$1.forwardRef(function (_a, ref) {
                     _c['time-picker-roll'] = variant === 'roll',
                     _c)) }, variant === 'select' ? React$1.createElement(TimePickerSelect, null) : TimePickerRoll()))));
 });
-CTimePicker.propTypes = __assign$1(__assign$1(__assign$1({}, CFormControlWrapper.propTypes), CPicker.propTypes), { ampm: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.bool]), cancelButton: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]), cancelButtonColor: (_a$1 = CButton.propTypes) === null || _a$1 === void 0 ? void 0 : _a$1.color, cancelButtonSize: (_b$1 = CButton.propTypes) === null || _b$1 === void 0 ? void 0 : _b$1.size, cancelButtonVariant: (_c$1 = CButton.propTypes) === null || _c$1 === void 0 ? void 0 : _c$1.variant, className: PropTypes.string, confirmButton: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]), confirmButtonColor: (_d$1 = CButton.propTypes) === null || _d$1 === void 0 ? void 0 : _d$1.color, confirmButtonSize: (_e$1 = CButton.propTypes) === null || _e$1 === void 0 ? void 0 : _e$1.size, confirmButtonVariant: (_f$1 = CButton.propTypes) === null || _f$1 === void 0 ? void 0 : _f$1.variant, locale: PropTypes.string, onTimeChange: PropTypes.func, required: PropTypes.bool, seconds: PropTypes.bool, time: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]), variant: PropTypes.oneOf(['roll', 'select']) });
+CTimePicker.propTypes = __assign$1(__assign$1(__assign$1({}, CFormControlWrapper.propTypes), CPicker.propTypes), { ampm: PropTypes$1.oneOfType([PropTypes$1.oneOf(['auto']), PropTypes$1.bool]), cancelButton: PropTypes$1.oneOfType([PropTypes$1.bool, PropTypes$1.node]), cancelButtonColor: (_a$1 = CButton.propTypes) === null || _a$1 === void 0 ? void 0 : _a$1.color, cancelButtonSize: (_b$1 = CButton.propTypes) === null || _b$1 === void 0 ? void 0 : _b$1.size, cancelButtonVariant: (_c$1 = CButton.propTypes) === null || _c$1 === void 0 ? void 0 : _c$1.variant, className: PropTypes$1.string, confirmButton: PropTypes$1.oneOfType([PropTypes$1.bool, PropTypes$1.node]), confirmButtonColor: (_d$1 = CButton.propTypes) === null || _d$1 === void 0 ? void 0 : _d$1.color, confirmButtonSize: (_e$1 = CButton.propTypes) === null || _e$1 === void 0 ? void 0 : _e$1.size, confirmButtonVariant: (_f$1 = CButton.propTypes) === null || _f$1 === void 0 ? void 0 : _f$1.variant, locale: PropTypes$1.string, onTimeChange: PropTypes$1.func, required: PropTypes$1.bool, seconds: PropTypes$1.bool, time: PropTypes$1.oneOfType([PropTypes$1.instanceOf(Date), PropTypes$1.string]), variant: PropTypes$1.oneOf(['roll', 'select']) });
 CTimePicker.displayName = 'CTimePicker';
 
 var getLocalDateFromString = function (string, locale, time) {
@@ -9432,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 || (invalid && false)), 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 || (invalid && false));
+        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) {
@@ -9497,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) {
@@ -9513,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);
@@ -9561,7 +9793,7 @@ var CDateRangePicker = React$1.forwardRef(function (_a, ref) {
         React$1.createElement("input", __assign$1({ autoComplete: "off", className: classNames$1('date-picker-input', {
                 hover: inputStartHoverValue,
             }), 
-            // delay={true}
+            // 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()) {
@@ -9573,7 +9805,7 @@ var CDateRangePicker = React$1.forwardRef(function (_a, ref) {
         range && (React$1.createElement("input", __assign$1({ autoComplete: "off", className: classNames$1('date-picker-input', {
                 hover: inputEndHoverValue,
             }), 
-            // delay={true}
+            // 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()) {
@@ -9623,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
@@ -9636,21 +9868,35 @@ 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.oneOfType([PropTypes.bool, PropTypes.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.number, className: PropTypes.string, cleaner: PropTypes.bool, closeOnSelect: PropTypes.bool, confirmButton: PropTypes.oneOfType([PropTypes.bool, PropTypes.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.string, indicator: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]), inputReadOnly: PropTypes.bool, placeholder: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.arrayOf(PropTypes.string.isRequired),
-    ]), range: PropTypes.bool, ranges: PropTypes.object, rangesButtonsColor: (_g = CButton.propTypes) === null || _g === void 0 ? void 0 : _g.color, rangesButtonsSize: (_h = CButton.propTypes) === null || _h === void 0 ? void 0 : _h.size, rangesButtonsVariant: (_j = CButton.propTypes) === null || _j === void 0 ? void 0 : _j.variant, required: PropTypes.bool, separator: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]), size: PropTypes.oneOf(['sm', 'lg']), timepicker: PropTypes.bool, todayButton: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]), todayButtonColor: (_k = CButton.propTypes) === null || _k === void 0 ? void 0 : _k.color, todayButtonSize: (_l = CButton.propTypes) === null || _l === void 0 ? void 0 : _l.size, todayButtonVariant: (_m = CButton.propTypes) === null || _m === void 0 ? void 0 : _m.variant });
+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([
+        PropTypes$1.string,
+        PropTypes$1.arrayOf(PropTypes$1.string.isRequired),
+    ]), range: PropTypes$1.bool, ranges: PropTypes$1.object, rangesButtonsColor: (_g = CButton.propTypes) === null || _g === void 0 ? void 0 : _g.color, rangesButtonsSize: (_h = CButton.propTypes) === null || _h === void 0 ? void 0 : _h.size, rangesButtonsVariant: (_j = CButton.propTypes) === null || _j === void 0 ? void 0 : _j.variant, required: PropTypes$1.bool, separator: PropTypes$1.oneOfType([PropTypes$1.bool, PropTypes$1.node]), size: PropTypes$1.oneOf(['sm', 'lg']), timepicker: PropTypes$1.bool, todayButton: PropTypes$1.oneOfType([PropTypes$1.bool, PropTypes$1.node]), todayButtonColor: (_k = CButton.propTypes) === null || _k === void 0 ? void 0 : _k.color, todayButtonSize: (_l = CButton.propTypes) === null || _l === void 0 ? void 0 : _l.size, todayButtonVariant: (_m = CButton.propTypes) === null || _m === void 0 ? void 0 : _m.variant });
 
 var CDatePicker = React$1.forwardRef(function (_a, ref) {
     var date = _a.date, id = _a.id, onDateChange = _a.onDateChange, _b = _a.placeholder, placeholder = _b === void 0 ? 'Select date' : _b, rest = __rest$1(_a, ["date", "id", "onDateChange", "placeholder"]);
     return (React$1.createElement(CDateRangePicker, __assign$1({ calendars: 1, id: id, startDate: date, onStartDateChange: onDateChange, placeholder: placeholder, range: false, ref: ref }, rest)));
 });
 CDatePicker.displayName = 'CDatePicker';
-CDatePicker.propTypes = __assign$1(__assign$1({}, CDateRangePicker.propTypes), { date: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]), onDateChange: PropTypes.func });
+CDatePicker.propTypes = __assign$1(__assign$1({}, CDateRangePicker.propTypes), { date: PropTypes$1.oneOfType([PropTypes$1.instanceOf(Date), PropTypes$1.string]), onDateChange: PropTypes$1.func });
 
+var getNextActiveElement = function (list, activeElement, shouldGetNext, isCycleAllowed) {
+    var listLength = list.length;
+    var index = list.indexOf(activeElement);
+    if (index === -1) {
+        return !shouldGetNext && isCycleAllowed ? list[listLength - 1] : list[0];
+    }
+    index += shouldGetNext ? 1 : -1;
+    if (isCycleAllowed) {
+        index = (index + listLength) % listLength;
+    }
+    return list[Math.max(0, Math.min(index, listLength - 1))];
+};
 var getPlacement = function (placement, direction, alignment, isRTL) {
     var _placement = placement;
     if (direction === 'dropup') {
@@ -9713,18 +9959,33 @@ var CDropdown = React$1.forwardRef(function (_a, ref) {
     }, [visible]);
     React$1.useEffect(function () {
         if (_visible && dropdownToggleRef.current && dropdownMenuRef.current) {
+            dropdownToggleRef.current.focus();
             popper && initPopper(dropdownToggleRef.current, dropdownMenuRef.current, popperConfig);
             window.addEventListener('mouseup', handleMouseUp);
             window.addEventListener('keyup', handleKeyup);
+            dropdownToggleRef.current.addEventListener('keydown', handleKeydown);
+            dropdownMenuRef.current.addEventListener('keydown', handleKeydown);
             onShow && onShow();
         }
         return function () {
             popper && destroyPopper();
             window.removeEventListener('mouseup', handleMouseUp);
             window.removeEventListener('keyup', handleKeyup);
+            dropdownToggleRef.current &&
+                dropdownToggleRef.current.removeEventListener('keydown', handleKeydown);
+            dropdownMenuRef.current &&
+                dropdownMenuRef.current.removeEventListener('keydown', handleKeydown);
             onHide && onHide();
         };
     }, [_visible]);
+    var handleKeydown = function (event) {
+        if (_visible && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
+            var target = event.target;
+            event.preventDefault();
+            var items = [].concat.apply([], Element.prototype.querySelectorAll.call(dropdownMenuRef.current, '.dropdown-item:not(.disabled):not(:disabled)'));
+            getNextActiveElement(items, target, event.key === 'ArrowDown', true).focus();
+        }
+    };
     var handleKeyup = function (event) {
         if (autoClose === false) {
             return;
@@ -9752,37 +10013,36 @@ var CDropdown = React$1.forwardRef(function (_a, ref) {
                 'dropup dropup-center': direction === 'dropup-center'
             },
             _b["".concat(direction)] = direction && direction !== 'center' && direction !== 'dropup-center',
-            _b.show = _visible,
             _b), className) }, rest, { ref: forkedRef }), children))));
 });
-var alignmentDirection = PropTypes.oneOf(['start', 'end']);
+var alignmentDirection = PropTypes$1.oneOf(['start', 'end']);
 CDropdown.propTypes = {
-    alignment: PropTypes.oneOfType([
+    alignment: PropTypes$1.oneOfType([
         alignmentDirection,
-        PropTypes.shape({ xs: alignmentDirection.isRequired }),
-        PropTypes.shape({ sm: alignmentDirection.isRequired }),
-        PropTypes.shape({ md: alignmentDirection.isRequired }),
-        PropTypes.shape({ lg: alignmentDirection.isRequired }),
-        PropTypes.shape({ xl: alignmentDirection.isRequired }),
-        PropTypes.shape({ xxl: alignmentDirection.isRequired }),
+        PropTypes$1.shape({ xs: alignmentDirection.isRequired }),
+        PropTypes$1.shape({ sm: alignmentDirection.isRequired }),
+        PropTypes$1.shape({ md: alignmentDirection.isRequired }),
+        PropTypes$1.shape({ lg: alignmentDirection.isRequired }),
+        PropTypes$1.shape({ xl: alignmentDirection.isRequired }),
+        PropTypes$1.shape({ xxl: alignmentDirection.isRequired }),
     ]),
-    autoClose: PropTypes.oneOfType([
-        PropTypes.bool,
-        PropTypes.oneOf(['inside', 'outside']),
+    autoClose: PropTypes$1.oneOfType([
+        PropTypes$1.bool,
+        PropTypes$1.oneOf(['inside', 'outside']),
     ]),
-    children: PropTypes.node,
-    className: PropTypes.string,
-    component: PropTypes.elementType,
-    dark: PropTypes.bool,
-    direction: PropTypes.oneOf(['center', 'dropup', 'dropup-center', 'dropend', 'dropstart']),
-    offset: PropTypes.any,
-    onHide: PropTypes.func,
-    onShow: PropTypes.func,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
+    component: PropTypes$1.elementType,
+    dark: PropTypes$1.bool,
+    direction: PropTypes$1.oneOf(['center', 'dropup', 'dropup-center', 'dropend', 'dropstart']),
+    offset: PropTypes$1.any,
+    onHide: PropTypes$1.func,
+    onShow: PropTypes$1.func,
     placement: placementPropType,
-    popper: PropTypes.bool,
-    portal: PropTypes.bool,
-    variant: PropTypes.oneOf(['btn-group', 'dropdown', 'input-group', 'nav-item']),
-    visible: PropTypes.bool,
+    popper: PropTypes$1.bool,
+    portal: PropTypes$1.bool,
+    variant: PropTypes$1.oneOf(['btn-group', 'dropdown', 'input-group', 'nav-item']),
+    visible: PropTypes$1.bool,
 };
 CDropdown.displayName = 'CDropdown';
 
@@ -9791,7 +10051,7 @@ var CDropdownDivider = React$1.forwardRef(function (_a, ref) {
     return React$1.createElement("hr", __assign$1({ className: classNames$1('dropdown-divider', className) }, rest, { ref: ref }));
 });
 CDropdownDivider.propTypes = {
-    className: PropTypes.string,
+    className: PropTypes$1.string,
 };
 CDropdownDivider.displayName = 'CDropdownDivider';
 
@@ -9800,9 +10060,9 @@ var CDropdownHeader = React$1.forwardRef(function (_a, ref) {
     return (React$1.createElement(Component, __assign$1({ className: classNames$1('dropdown-header', className) }, rest, { ref: ref }), children));
 });
 CDropdownHeader.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    component: PropTypes.elementType,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
+    component: PropTypes$1.elementType,
 };
 CDropdownHeader.displayName = 'CDropdownHeader';
 
@@ -9811,9 +10071,9 @@ var CDropdownItem = React$1.forwardRef(function (_a, ref) {
     return (React$1.createElement(CLink, __assign$1({ className: classNames$1('dropdown-item', className), component: component }, rest, { ref: ref }), children));
 });
 CDropdownItem.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    component: PropTypes.elementType,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
+    component: PropTypes$1.elementType,
 };
 CDropdownItem.displayName = 'CDropdownItem';
 
@@ -9822,9 +10082,9 @@ var CDropdownItemPlain = React$1.forwardRef(function (_a, ref) {
     return (React$1.createElement(Component, __assign$1({ className: classNames$1('dropdown-item-text', className) }, rest, { ref: ref }), children));
 });
 CDropdownItemPlain.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    component: PropTypes.elementType,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
+    component: PropTypes$1.elementType,
 };
 CDropdownItemPlain.displayName = 'CDropdownItemPlain';
 
@@ -9846,9 +10106,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));
@@ -9858,15 +10117,15 @@ var CDropdownMenu = React$1.forwardRef(function (_a, ref) {
             : children)));
 });
 CDropdownMenu.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    component: PropTypes.elementType,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
+    component: PropTypes$1.elementType,
 };
 CDropdownMenu.displayName = 'CDropdownMenu';
 
 var CDropdownToggle = function (_a) {
     var children = _a.children, _b = _a.caret, caret = _b === void 0 ? true : _b, custom = _a.custom, className = _a.className, split = _a.split, _c = _a.trigger, trigger = _c === void 0 ? 'click' : _c, rest = __rest$1(_a, ["children", "caret", "custom", "className", "split", "trigger"]);
-    var _d = React$1.useContext(CDropdownContext), dropdownToggleRef = _d.dropdownToggleRef, variant = _d.variant, visible = _d.visible, setVisible = _d.setVisible;
+    var _d = React$1.useContext(CDropdownContext), dropdownToggleRef = _d.dropdownToggleRef, visible = _d.visible, setVisible = _d.setVisible;
     var triggers = __assign$1(__assign$1({}, ((trigger === 'click' || trigger.includes('click')) && {
         onClick: function (event) {
             event.preventDefault();
@@ -9879,28 +10138,24 @@ var CDropdownToggle = function (_a) {
     var togglerProps = __assign$1({ className: classNames$1({
             'dropdown-toggle': caret,
             'dropdown-toggle-split': split,
-            'nav-link': variant === 'nav-item',
+            show: visible,
         }, className), 'aria-expanded': visible }, (!rest.disabled && __assign$1({}, triggers)));
-    // We use any because Toggler can be `a` as well as `button`.
     var Toggler = function () {
         if (custom && React$1.isValidElement(children)) {
             return (React$1.createElement(React$1.Fragment, null, React$1.cloneElement(children, __assign$1(__assign$1({ 'aria-expanded': visible }, (!rest.disabled && __assign$1({}, triggers))), { ref: dropdownToggleRef }))));
         }
-        if (variant === 'nav-item') {
-            return (React$1.createElement("a", __assign$1({ href: "#" }, togglerProps, { ref: dropdownToggleRef }), children));
-        }
-        return (React$1.createElement(CButton, __assign$1({ type: "button" }, togglerProps, { tabIndex: 0 }, rest, { ref: dropdownToggleRef }),
+        return (React$1.createElement(CButton, __assign$1({}, togglerProps, { tabIndex: 0 }, rest, { ref: dropdownToggleRef }),
             children,
             split && React$1.createElement("span", { className: "visually-hidden" }, "Toggle Dropdown")));
     };
     return React$1.createElement(Toggler, null);
 };
 CDropdownToggle.propTypes = {
-    caret: PropTypes.bool,
-    children: PropTypes.node,
-    className: PropTypes.string,
-    custom: PropTypes.bool,
-    split: PropTypes.bool,
+    caret: PropTypes$1.bool,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
+    custom: PropTypes$1.bool,
+    split: PropTypes$1.bool,
     trigger: triggerPropType,
 };
 CDropdownToggle.displayName = 'CDropdownToggle';
@@ -9915,12 +10170,12 @@ var CSpinner = React$1.forwardRef(function (_a, ref) {
         React$1.createElement("span", { className: "visually-hidden" }, visuallyHiddenLabel)));
 });
 CSpinner.propTypes = {
-    className: PropTypes.string,
+    className: PropTypes$1.string,
     color: colorPropType,
-    component: PropTypes.string,
-    size: PropTypes.oneOf(['sm']),
-    variant: PropTypes.oneOf(['border', 'grow']),
-    visuallyHiddenLabel: PropTypes.string,
+    component: PropTypes$1.string,
+    size: PropTypes$1.oneOf(['sm']),
+    variant: PropTypes$1.oneOf(['border', 'grow']),
+    visuallyHiddenLabel: PropTypes$1.string,
 };
 CSpinner.displayName = 'CSpinner';
 
@@ -9968,10 +10223,10 @@ var CElementCover = React$1.forwardRef(function (_a, ref) {
             } }, children || React$1.createElement(CSpinner, { variant: "grow", color: "primary" }))));
 });
 CElementCover.propTypes = {
-    boundaries: PropTypes.array,
-    children: PropTypes.node,
-    className: PropTypes.string,
-    opacity: PropTypes.number,
+    boundaries: PropTypes$1.array,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
+    opacity: PropTypes$1.number,
 };
 CElementCover.displayName = 'CElementCover';
 
@@ -9981,9 +10236,9 @@ var CFooter = React$1.forwardRef(function (_a, ref) {
     return (React$1.createElement("div", __assign$1({ className: classNames$1('footer', (_b = {}, _b["footer-".concat(position)] = position, _b), className) }, rest, { ref: ref }), children));
 });
 CFooter.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    position: PropTypes.oneOf(['fixed', 'sticky']),
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
+    position: PropTypes$1.oneOf(['fixed', 'sticky']),
 };
 CFooter.displayName = 'CFooter';
 
@@ -9992,9 +10247,9 @@ var CForm = React$1.forwardRef(function (_a, ref) {
     return (React$1.createElement("form", __assign$1({ className: classNames$1({ 'was-validated': validated }, className) || undefined }, rest, { ref: ref }), children));
 });
 CForm.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    validated: PropTypes.bool,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
+    validated: PropTypes$1.bool,
 };
 CForm.displayName = 'CForm';
 
@@ -10046,7 +10301,7 @@ var CFormCheck = React$1.forwardRef(function (_a, ref) {
     };
     return React$1.createElement(FormCheck, null);
 });
-CFormCheck.propTypes = __assign$1({ button: PropTypes.object, className: PropTypes.string, hitArea: PropTypes.oneOf(['full']), id: PropTypes.string, indeterminate: PropTypes.bool, inline: PropTypes.bool, label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), reverse: PropTypes.bool, type: PropTypes.oneOf(['checkbox', 'radio']) }, CFormControlValidation.propTypes);
+CFormCheck.propTypes = __assign$1({ button: PropTypes$1.object, className: PropTypes$1.string, hitArea: PropTypes$1.oneOf(['full']), id: PropTypes$1.string, indeterminate: PropTypes$1.bool, inline: PropTypes$1.bool, label: PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.node]), reverse: PropTypes$1.bool, type: PropTypes$1.oneOf(['checkbox', 'radio']) }, CFormControlValidation.propTypes);
 CFormCheck.displayName = 'CFormCheck';
 
 var CFormInput = React$1.forwardRef(function (_a, ref) {
@@ -10065,7 +10320,7 @@ var CFormInput = React$1.forwardRef(function (_a, ref) {
                 _b['is-valid'] = valid,
                 _b), className), id: id, type: type, onChange: function (event) { return (delay ? setValue(event) : onChange && onChange(event)); } }, rest, { ref: ref }), children)));
 });
-CFormInput.propTypes = __assign$1({ className: PropTypes.string, id: PropTypes.string, delay: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]), plainText: PropTypes.bool, size: PropTypes.oneOf(['sm', 'lg']), type: PropTypes.oneOfType([PropTypes.oneOf(['color', 'file', 'text']), PropTypes.string]) }, CFormControlWrapper.propTypes);
+CFormInput.propTypes = __assign$1({ className: PropTypes$1.string, id: PropTypes$1.string, delay: PropTypes$1.oneOfType([PropTypes$1.bool, PropTypes$1.number]), plainText: PropTypes$1.bool, size: PropTypes$1.oneOf(['sm', 'lg']), type: PropTypes$1.oneOfType([PropTypes$1.oneOf(['color', 'file', 'text']), PropTypes$1.string]) }, CFormControlWrapper.propTypes);
 CFormInput.displayName = 'CFormInput';
 
 var CFormRange = React$1.forwardRef(function (_a, ref) {
@@ -10075,8 +10330,8 @@ var CFormRange = React$1.forwardRef(function (_a, ref) {
         React$1.createElement("input", __assign$1({ type: "range", className: classNames$1('form-range', className) }, rest, { ref: ref }))));
 });
 CFormRange.propTypes = {
-    className: PropTypes.string,
-    label: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
+    className: PropTypes$1.string,
+    label: PropTypes$1.oneOfType([PropTypes$1.node, PropTypes$1.string]),
 };
 CFormRange.displayName = 'CFormRange';
 
@@ -10096,7 +10351,7 @@ var CFormSelect = React$1.forwardRef(function (_a, ref) {
             })
             : children)));
 });
-CFormSelect.propTypes = __assign$1({ className: PropTypes.string, htmlSize: PropTypes.number, options: PropTypes.array }, CFormControlWrapper.propTypes);
+CFormSelect.propTypes = __assign$1({ className: PropTypes$1.string, htmlSize: PropTypes$1.number, options: PropTypes$1.array }, CFormControlWrapper.propTypes);
 CFormSelect.displayName = 'CFormSelect';
 
 var CFormSwitch = React$1.forwardRef(function (_a, ref) {
@@ -10116,14 +10371,14 @@ var CFormSwitch = React$1.forwardRef(function (_a, ref) {
         label && (React$1.createElement(CFormLabel, __assign$1({ customClassName: "form-check-label" }, (id && { htmlFor: id })), label))));
 });
 CFormSwitch.propTypes = {
-    className: PropTypes.string,
-    id: PropTypes.string,
-    invalid: PropTypes.bool,
-    label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    reverse: PropTypes.bool,
-    size: PropTypes.oneOf(['lg', 'xl']),
-    type: PropTypes.oneOf(['checkbox', 'radio']),
-    valid: PropTypes.bool,
+    className: PropTypes$1.string,
+    id: PropTypes$1.string,
+    invalid: PropTypes$1.bool,
+    label: PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.node]),
+    reverse: PropTypes$1.bool,
+    size: PropTypes$1.oneOf(['lg', 'xl']),
+    type: PropTypes$1.oneOf(['checkbox', 'radio']),
+    valid: PropTypes$1.bool,
 };
 CFormSwitch.displayName = 'CFormSwitch';
 
@@ -10135,7 +10390,7 @@ var CFormTextarea = React$1.forwardRef(function (_a, ref) {
                 'is-valid': valid,
             }, className), id: id }, rest, { ref: ref }), children)));
 });
-CFormTextarea.propTypes = __assign$1({ className: PropTypes.string, id: PropTypes.string, plainText: PropTypes.bool }, CFormControlWrapper.propTypes);
+CFormTextarea.propTypes = __assign$1({ className: PropTypes$1.string, id: PropTypes$1.string, plainText: PropTypes$1.bool }, CFormControlWrapper.propTypes);
 CFormTextarea.displayName = 'CFormTextarea';
 
 var CInputGroup = React$1.forwardRef(function (_a, ref) {
@@ -10146,9 +10401,9 @@ var CInputGroup = React$1.forwardRef(function (_a, ref) {
             _b), className) }, rest, { ref: ref }), children));
 });
 CInputGroup.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    size: PropTypes.oneOf(['sm', 'lg']),
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
+    size: PropTypes$1.oneOf(['sm', 'lg']),
 };
 CInputGroup.displayName = 'CInputGroup';
 
@@ -10157,9 +10412,9 @@ var CInputGroupText = React$1.forwardRef(function (_a, ref) {
     return (React$1.createElement(Component, __assign$1({ className: classNames$1('input-group-text', className) }, rest, { ref: ref }), children));
 });
 CInputGroupText.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    component: PropTypes.elementType,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
+    component: PropTypes$1.elementType,
 };
 CInputGroupText.displayName = 'CInputGroupText';
 
@@ -10201,27 +10456,27 @@ var CCol = React$1.forwardRef(function (_a, ref) {
     });
     return (React$1.createElement("div", __assign$1({ className: classNames$1(repsonsiveClassNames.length > 0 ? repsonsiveClassNames : 'col', className) }, rest, { ref: ref }), children));
 });
-var span = PropTypes.oneOfType([
-    PropTypes.bool,
-    PropTypes.number,
-    PropTypes.string,
-    PropTypes.oneOf(['auto']),
+var span = PropTypes$1.oneOfType([
+    PropTypes$1.bool,
+    PropTypes$1.number,
+    PropTypes$1.string,
+    PropTypes$1.oneOf(['auto']),
 ]);
-var col = PropTypes.oneOfType([
+var col = PropTypes$1.oneOfType([
     span,
-    PropTypes.shape({
+    PropTypes$1.shape({
         span: span,
-        offset: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-        order: PropTypes.oneOfType([
-            PropTypes.oneOf(['first', 'last']),
-            PropTypes.number,
-            PropTypes.string,
+        offset: PropTypes$1.oneOfType([PropTypes$1.number, PropTypes$1.string]),
+        order: PropTypes$1.oneOfType([
+            PropTypes$1.oneOf(['first', 'last']),
+            PropTypes$1.number,
+            PropTypes$1.string,
         ]),
     }),
 ]);
 CCol.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
     xs: col,
     sm: col,
     md: col,
@@ -10250,14 +10505,14 @@ var CContainer = React$1.forwardRef(function (_a, ref) {
     return (React$1.createElement("div", __assign$1({ className: classNames$1(repsonsiveClassNames.length > 0 ? repsonsiveClassNames : 'container', className) }, rest, { ref: ref }), children));
 });
 CContainer.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    sm: PropTypes.bool,
-    md: PropTypes.bool,
-    lg: PropTypes.bool,
-    xl: PropTypes.bool,
-    xxl: PropTypes.bool,
-    fluid: PropTypes.bool,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
+    sm: PropTypes$1.bool,
+    md: PropTypes$1.bool,
+    lg: PropTypes$1.bool,
+    xl: PropTypes$1.bool,
+    xxl: PropTypes$1.bool,
+    fluid: PropTypes$1.bool,
 };
 CContainer.displayName = 'CContainer';
 
@@ -10293,15 +10548,15 @@ var CRow = React$1.forwardRef(function (_a, ref) {
     });
     return (React$1.createElement("div", { className: classNames$1('row', repsonsiveClassNames, className), ref: ref }, children));
 });
-var bp = PropTypes.shape({
-    cols: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.string]),
-    gutter: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    gutterX: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    gutterY: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+var bp = PropTypes$1.shape({
+    cols: PropTypes$1.oneOfType([PropTypes$1.oneOf(['auto']), PropTypes$1.number, PropTypes$1.string]),
+    gutter: PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.number]),
+    gutterX: PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.number]),
+    gutterY: PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.number]),
 });
 CRow.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
     xs: bp,
     sm: bp,
     md: bp,
@@ -10317,11 +10572,11 @@ var CHeader = React$1.forwardRef(function (_a, ref) {
     return (React$1.createElement("div", __assign$1({ className: classNames$1('header', (_b = {}, _b["header-".concat(position)] = position, _b), 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))));
 });
 CHeader.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    container: PropTypes.oneOfType([
-        PropTypes.bool,
-        PropTypes.oneOf([
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
+    container: PropTypes$1.oneOfType([
+        PropTypes$1.bool,
+        PropTypes$1.oneOf([
             'sm',
             'md',
             'lg',
@@ -10330,7 +10585,7 @@ CHeader.propTypes = {
             'fluid',
         ]),
     ]),
-    position: PropTypes.oneOf(['fixed', 'sticky']),
+    position: PropTypes$1.oneOf(['fixed', 'sticky']),
 };
 CHeader.displayName = 'CHeader';
 
@@ -10339,9 +10594,9 @@ var CHeaderBrand = React$1.forwardRef(function (_a, ref) {
     return (React$1.createElement(Component, __assign$1({ className: classNames$1('header-brand', className) }, rest, { ref: ref }), children));
 });
 CHeaderBrand.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    component: PropTypes.elementType,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
+    component: PropTypes$1.elementType,
 };
 CHeaderBrand.displayName = 'CHeaderBrand';
 
@@ -10350,7 +10605,7 @@ var CHeaderDivider = React$1.forwardRef(function (_a, ref) {
     return React$1.createElement("div", __assign$1({ className: classNames$1('header-divider', className) }, rest, { ref: ref }));
 });
 CHeaderDivider.propTypes = {
-    className: PropTypes.string,
+    className: PropTypes$1.string,
 };
 CHeaderDivider.displayName = 'CHeaderDivider';
 
@@ -10359,9 +10614,9 @@ var CHeaderNav = React$1.forwardRef(function (_a, ref) {
     return (React$1.createElement(Component, __assign$1({ className: classNames$1('header-nav', className), role: "navigation" }, rest, { ref: ref }), children));
 });
 CHeaderNav.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    component: PropTypes.elementType,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
+    component: PropTypes$1.elementType,
 };
 CHeaderNav.displayName = 'CHeaderNav';
 
@@ -10370,8 +10625,8 @@ var CHeaderText = React$1.forwardRef(function (_a, ref) {
     return (React$1.createElement("span", __assign$1({ className: classNames$1('header-text', className) }, rest, { ref: ref }), children));
 });
 CHeaderText.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
 };
 CHeaderText.displayName = 'CHeaderText';
 
@@ -10380,8 +10635,8 @@ var CHeaderToggler = React$1.forwardRef(function (_a, ref) {
     return (React$1.createElement("button", __assign$1({ type: "button", className: classNames$1('header-toggler', className) }, rest, { ref: ref }), children !== null && children !== void 0 ? children : React$1.createElement("span", { className: "header-toggler-icon" })));
 });
 CHeaderToggler.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
 };
 CHeaderToggler.displayName = 'CHeaderToggler';
 
@@ -10397,11 +10652,11 @@ var CImage = React$1.forwardRef(function (_a, ref) {
             _b), className) || undefined }, rest, { ref: ref })));
 });
 CImage.propTypes = {
-    align: PropTypes.oneOf(['start', 'center', 'end']),
-    className: PropTypes.string,
-    fluid: PropTypes.bool,
-    rounded: PropTypes.bool,
-    thumbnail: PropTypes.bool,
+    align: PropTypes$1.oneOf(['start', 'center', 'end']),
+    className: PropTypes$1.string,
+    fluid: PropTypes$1.bool,
+    rounded: PropTypes$1.bool,
+    thumbnail: PropTypes$1.bool,
 };
 CImage.displayName = 'CImage';
 
@@ -10415,11 +10670,11 @@ var CListGroup = React$1.forwardRef(function (_a, ref) {
             _b), className), ref: ref }, children));
 });
 CListGroup.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    component: PropTypes.elementType,
-    flush: PropTypes.bool,
-    layout: PropTypes.oneOf([
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
+    component: PropTypes$1.elementType,
+    flush: PropTypes$1.bool,
+    layout: PropTypes$1.oneOf([
         'horizontal',
         'horizontal-sm',
         'horizontal-md',
@@ -10448,12 +10703,12 @@ var CListGroupItem = React$1.forwardRef(function (_a, ref) {
             _b), className) }, rest), children));
 });
 CListGroupItem.propTypes = {
-    active: PropTypes.bool,
-    children: PropTypes.node,
-    className: PropTypes.string,
+    active: PropTypes$1.bool,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
     color: colorPropType,
-    component: PropTypes.elementType,
-    disabled: PropTypes.bool,
+    component: PropTypes$1.elementType,
+    disabled: PropTypes$1.bool,
 };
 CListGroupItem.displayName = 'CListGroupItem';
 
@@ -10477,13 +10732,13 @@ var CLoadingButton = React$1.forwardRef(function (_a, ref) {
         children));
 });
 CLoadingButton.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    disabledOnLoading: PropTypes.bool,
-    loading: PropTypes.bool,
-    onClick: PropTypes.func,
-    spinnerType: PropTypes.oneOf(['border', 'grow']),
-    timeout: PropTypes.number,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
+    disabledOnLoading: PropTypes$1.bool,
+    loading: PropTypes$1.bool,
+    onClick: PropTypes$1.func,
+    spinnerType: PropTypes$1.oneOf(['border', 'grow']),
+    timeout: PropTypes$1.number,
 };
 CLoadingButton.displayName = 'CLoadingButton';
 
@@ -10492,8 +10747,8 @@ var CModalContent = React$1.forwardRef(function (_a, ref) {
     return (React$1.createElement("div", __assign$1({ className: classNames$1('modal-content', className) }, rest, { ref: ref }), children));
 });
 CModalContent.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
 };
 CModalContent.displayName = 'CModalContent';
 
@@ -10511,26 +10766,27 @@ var CModalDialog = React$1.forwardRef(function (_a, ref) {
             _b), className) }, rest, { ref: ref }), children));
 });
 CModalDialog.propTypes = {
-    alignment: PropTypes.oneOf(['top', 'center']),
-    children: PropTypes.node,
-    className: PropTypes.string,
-    fullscreen: PropTypes.oneOfType([
-        PropTypes.bool,
-        PropTypes.oneOf(['sm', 'md', 'lg', 'xl', 'xxl']),
+    alignment: PropTypes$1.oneOf(['top', 'center']),
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
+    fullscreen: PropTypes$1.oneOfType([
+        PropTypes$1.bool,
+        PropTypes$1.oneOf(['sm', 'md', 'lg', 'xl', 'xxl']),
     ]),
-    scrollable: PropTypes.bool,
-    size: PropTypes.oneOf(['sm', 'lg', 'xl']),
+    scrollable: PropTypes$1.bool,
+    size: PropTypes$1.oneOf(['sm', 'lg', 'xl']),
 };
 CModalDialog.displayName = 'CModalDialog';
 
 var CModalContext = React$1.createContext({});
 var CModal = React$1.forwardRef(function (_a, ref) {
-    var children = _a.children, alignment = _a.alignment, _b = _a.backdrop, backdrop = _b === void 0 ? true : _b, className = _a.className, _c = _a.duration, duration = _c === void 0 ? 150 : _c, fullscreen = _a.fullscreen, _d = _a.keyboard, keyboard = _d === void 0 ? true : _d, onClose = _a.onClose, onClosePrevented = _a.onClosePrevented, onShow = _a.onShow, _e = _a.portal, portal = _e === void 0 ? true : _e, scrollable = _a.scrollable, size = _a.size, _f = _a.transition, transition = _f === void 0 ? true : _f, _g = _a.unmountOnClose, unmountOnClose = _g === void 0 ? true : _g, visible = _a.visible, rest = __rest$1(_a, ["children", "alignment", "backdrop", "className", "duration", "fullscreen", "keyboard", "onClose", "onClosePrevented", "onShow", "portal", "scrollable", "size", "transition", "unmountOnClose", "visible"]);
+    var children = _a.children, alignment = _a.alignment, _b = _a.backdrop, backdrop = _b === void 0 ? true : _b, className = _a.className, _c = _a.duration, duration = _c === void 0 ? 150 : _c, _d = _a.focus, focus = _d === void 0 ? true : _d, fullscreen = _a.fullscreen, _e = _a.keyboard, keyboard = _e === void 0 ? true : _e, onClose = _a.onClose, onClosePrevented = _a.onClosePrevented, onShow = _a.onShow, _f = _a.portal, portal = _f === void 0 ? true : _f, scrollable = _a.scrollable, size = _a.size, _g = _a.transition, transition = _g === void 0 ? true : _g, _h = _a.unmountOnClose, unmountOnClose = _h === void 0 ? true : _h, visible = _a.visible, rest = __rest$1(_a, ["children", "alignment", "backdrop", "className", "duration", "focus", "fullscreen", "keyboard", "onClose", "onClosePrevented", "onShow", "portal", "scrollable", "size", "transition", "unmountOnClose", "visible"]);
+    var activeElementRef = React$1.useRef(null);
     var modalRef = React$1.useRef(null);
     var modalContentRef = React$1.useRef(null);
     var forkedRef = useForkedRef(ref, modalRef);
-    var _h = React$1.useState(visible), _visible = _h[0], setVisible = _h[1];
-    var _j = React$1.useState(false), staticBackdrop = _j[0], setStaticBackdrop = _j[1];
+    var _j = React$1.useState(visible), _visible = _j[0], setVisible = _j[1];
+    var _k = React$1.useState(false), staticBackdrop = _k[0], setStaticBackdrop = _k[1];
     var contextValues = {
         visible: _visible,
         setVisible: setVisible,
@@ -10539,10 +10795,17 @@ var CModal = React$1.forwardRef(function (_a, ref) {
         setVisible(visible);
     }, [visible]);
     React$1.useEffect(function () {
-        document.addEventListener('click', handleClickOutside);
-        document.addEventListener('keydown', handleKeyDown);
+        var _a;
+        if (_visible) {
+            activeElementRef.current = document.activeElement;
+            document.addEventListener('mouseup', handleClickOutside);
+            document.addEventListener('keydown', handleKeyDown);
+        }
+        else {
+            (_a = activeElementRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
         return function () {
-            document.removeEventListener('click', handleClickOutside);
+            document.removeEventListener('mouseup', handleClickOutside);
             document.removeEventListener('keydown', handleKeyDown);
         };
     }, [_visible]);
@@ -10567,7 +10830,7 @@ var CModal = React$1.forwardRef(function (_a, ref) {
             }
             setTimeout(function () {
                 var _a;
-                (_a = modalRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                focus && ((_a = modalRef.current) === null || _a === void 0 ? void 0 : _a.focus());
             }, transition ? duration : 0);
         }
         else {
@@ -10599,36 +10862,39 @@ var CModal = React$1.forwardRef(function (_a, ref) {
     return (React$1.createElement(React$1.Fragment, null,
         React$1.createElement(Transition$1, { in: _visible, mountOnEnter: true, nodeRef: modalRef, onEnter: onShow, onExit: onClose, unmountOnExit: unmountOnClose, timeout: transition ? duration : 0 }, function (state) { return (React$1.createElement(CConditionalPortal, { portal: portal },
             React$1.createElement(CModalContext.Provider, { value: contextValues },
-                React$1.createElement("div", { className: classNames$1('modal', {
+                React$1.createElement("div", __assign$1({ className: classNames$1('modal', {
                         'modal-static': staticBackdrop,
                         fade: transition,
                         show: state === 'entered',
-                    }, className), tabIndex: -1, role: "dialog", style: __assign$1({}, (state !== 'exited' && { display: 'block' })), ref: forkedRef },
+                    }, className), tabIndex: -1 }, (_visible
+                    ? { 'aria-modal': true, role: 'dialog' }
+                    : { 'aria-hidden': 'true' }), { style: __assign$1({}, (state !== 'exited' && { display: 'block' })) }, rest, { ref: forkedRef }),
                     React$1.createElement(CModalDialog, { alignment: alignment, fullscreen: fullscreen, scrollable: scrollable, size: size },
-                        React$1.createElement(CModalContent, __assign$1({}, rest, { ref: modalContentRef }), children)))))); }),
+                        React$1.createElement(CModalContent, { ref: modalContentRef }, children)))))); }),
         backdrop && (React$1.createElement(CConditionalPortal, { portal: portal },
             React$1.createElement(CBackdrop, { visible: _visible })))));
 });
 CModal.propTypes = {
-    alignment: PropTypes.oneOf(['top', 'center']),
-    backdrop: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['static'])]),
-    children: PropTypes.node,
-    className: PropTypes.string,
-    duration: PropTypes.number,
-    fullscreen: PropTypes.oneOfType([
-        PropTypes.bool,
-        PropTypes.oneOf(['sm', 'md', 'lg', 'xl', 'xxl']),
+    alignment: PropTypes$1.oneOf(['top', 'center']),
+    backdrop: PropTypes$1.oneOfType([PropTypes$1.bool, PropTypes$1.oneOf(['static'])]),
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
+    duration: PropTypes$1.number,
+    focus: PropTypes$1.bool,
+    fullscreen: PropTypes$1.oneOfType([
+        PropTypes$1.bool,
+        PropTypes$1.oneOf(['sm', 'md', 'lg', 'xl', 'xxl']),
     ]),
-    keyboard: PropTypes.bool,
-    onClose: PropTypes.func,
-    onClosePrevented: PropTypes.func,
-    onShow: PropTypes.func,
-    portal: PropTypes.bool,
-    scrollable: PropTypes.bool,
-    size: PropTypes.oneOf(['sm', 'lg', 'xl']),
-    transition: PropTypes.bool,
-    unmountOnClose: PropTypes.bool,
-    visible: PropTypes.bool,
+    keyboard: PropTypes$1.bool,
+    onClose: PropTypes$1.func,
+    onClosePrevented: PropTypes$1.func,
+    onShow: PropTypes$1.func,
+    portal: PropTypes$1.bool,
+    scrollable: PropTypes$1.bool,
+    size: PropTypes$1.oneOf(['sm', 'lg', 'xl']),
+    transition: PropTypes$1.bool,
+    unmountOnClose: PropTypes$1.bool,
+    visible: PropTypes$1.bool,
 };
 CModal.displayName = 'CModal';
 
@@ -10637,8 +10903,8 @@ var CModalBody = React$1.forwardRef(function (_a, ref) {
     return (React$1.createElement("div", __assign$1({ className: classNames$1('modal-body', className) }, rest, { ref: ref }), children));
 });
 CModalBody.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
 };
 CModalBody.displayName = 'CModalBody';
 
@@ -10647,8 +10913,8 @@ var CModalFooter = React$1.forwardRef(function (_a, ref) {
     return (React$1.createElement("div", __assign$1({ className: classNames$1('modal-footer', className) }, rest, { ref: ref }), children));
 });
 CModalFooter.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
 };
 CModalFooter.displayName = 'CModalFooter';
 
@@ -10660,9 +10926,9 @@ var CModalHeader = React$1.forwardRef(function (_a, ref) {
         closeButton && React$1.createElement(CCloseButton, { onClick: function () { return setVisible(false); } })));
 });
 CModalHeader.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    closeButton: PropTypes.bool,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
+    closeButton: PropTypes$1.bool,
 };
 CModalHeader.displayName = 'CModalHeader';
 
@@ -10671,16 +10937,16 @@ var CModalTitle = React$1.forwardRef(function (_a, ref) {
     return (React$1.createElement(Component, __assign$1({ className: classNames$1('modal-title', className) }, rest, { ref: ref }), children));
 });
 CModalTitle.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    component: PropTypes.elementType,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
+    component: PropTypes$1.elementType,
 };
 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) {
@@ -10688,11 +10954,11 @@ var CMultiSelectNativeSelect = React$1.forwardRef(function (_a, ref) {
     return (React$1.createElement("select", __assign$1({ className: "multi-select-new" }, (id && { id: "".concat(id, "-multi-select") }), (id && { name: "".concat(id, "-multi-select") }), { tabIndex: -1, style: { display: 'none' } }, rest, { ref: ref }), options && createNativeOptions(options)));
 });
 CMultiSelectNativeSelect.propTypes = {
-    options: PropTypes.array,
-    value: PropTypes.oneOfType([
-        PropTypes.number,
-        PropTypes.string,
-        PropTypes.arrayOf(PropTypes.string.isRequired),
+    options: PropTypes$1.array,
+    value: PropTypes$1.oneOfType([
+        PropTypes$1.number,
+        PropTypes$1.string,
+        PropTypes$1.arrayOf(PropTypes$1.string.isRequired),
     ]),
 };
 CMultiSelectNativeSelect.displayName = 'CMultiSelectNativeSelect';
@@ -10765,13 +11031,13 @@ var CVirtualScroller = React$1.forwardRef(function (_a, ref) {
         }))));
 });
 CVirtualScroller.propTypes = {
-    onScroll: PropTypes.func,
-    visibleItems: PropTypes.number.isRequired,
+    onScroll: PropTypes$1.func,
+    visibleItems: PropTypes$1.number.isRequired,
 };
 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; })) {
@@ -10781,7 +11047,7 @@ var createOption = function (text, options) {
     return [
         {
             value: uniqueValue,
-            text: text,
+            label: label,
             custom: true,
         },
     ];
@@ -10793,9 +11059,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 }));
             }
@@ -10897,7 +11163,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,
@@ -10907,16 +11173,16 @@ var CMultiSelectOptions = React$1.forwardRef(function (_a, ref) {
         loading && React$1.createElement(CElementCover, null)));
 });
 CMultiSelectOptions.propTypes = {
-    handleOptionOnClick: PropTypes.func,
-    loading: PropTypes.bool,
-    options: PropTypes.array.isRequired,
-    optionsMaxHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    optionsStyle: PropTypes.oneOf(['checkbox', 'text']),
-    optionsTemplate: PropTypes.func,
-    optionsGroupsTemplate: PropTypes.func,
-    searchNoResultsLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    virtualScroller: PropTypes.bool,
-    visibleItems: PropTypes.number,
+    handleOptionOnClick: PropTypes$1.func,
+    loading: PropTypes$1.bool,
+    options: PropTypes$1.array.isRequired,
+    optionsMaxHeight: PropTypes$1.oneOfType([PropTypes$1.number, PropTypes$1.string]),
+    optionsStyle: PropTypes$1.oneOf(['checkbox', 'text']),
+    optionsTemplate: PropTypes$1.func,
+    optionsGroupsTemplate: PropTypes$1.func,
+    searchNoResultsLabel: PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.node]),
+    virtualScroller: PropTypes$1.bool,
+    visibleItems: PropTypes$1.number,
 };
 CMultiSelectOptions.displayName = 'CMultiSelectOptions';
 
@@ -10936,7 +11202,7 @@ 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.label,
                         !option.disabled && (React$1.createElement("button", { className: "form-multi-select-tag-delete", "aria-label": "Close", onClick: function () { return onRemove && onRemove(option); } }))));
                 }
                 return;
@@ -10944,20 +11210,20 @@ var CMultiSelectSelection = React$1.forwardRef(function (_a, ref) {
         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 = {
-    multiple: PropTypes.bool,
-    onRemove: PropTypes.func,
-    placeholder: PropTypes.string,
-    search: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['external'])]),
-    selected: PropTypes.array,
-    selectionType: PropTypes.oneOf(['counter', 'tags', 'text']),
-    selectionTypeCounterText: PropTypes.string,
+    multiple: PropTypes$1.bool,
+    onRemove: PropTypes$1.func,
+    placeholder: PropTypes$1.string,
+    search: PropTypes$1.oneOfType([PropTypes$1.bool, PropTypes$1.oneOf(['external'])]),
+    selected: PropTypes$1.array,
+    selectionType: PropTypes$1.oneOf(['counter', 'tags', 'text']),
+    selectionTypeCounterText: PropTypes$1.string,
 };
 CMultiSelectSelection.displayName = 'CMultiSelectSelection';
 
@@ -10984,7 +11250,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);
@@ -11067,7 +11333,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('');
@@ -11133,7 +11399,7 @@ 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 })))),
                 React$1.createElement("div", { className: "form-multi-select-buttons" },
@@ -11149,7 +11415,7 @@ var CMultiSelect = React$1.forwardRef(function (_a, ref) {
                         ? userOption || []
                         : filteredOptions, optionsMaxHeight: optionsMaxHeight, optionsStyle: optionsStyle, optionsTemplate: optionsTemplate, optionsGroupsTemplate: optionsGroupsTemplate, searchNoResultsLabel: searchNoResultsLabel, selected: selected, virtualScroller: virtualScroller, visibleItems: visibleItems })))));
 });
-CMultiSelect.propTypes = __assign$1({ className: PropTypes.string, cleaner: PropTypes.bool, clearSearchOnSelect: PropTypes.bool, disabled: PropTypes.bool, loading: PropTypes.bool, multiple: PropTypes.bool, onChange: PropTypes.func, onFilterChange: PropTypes.func, onHide: PropTypes.func, onShow: PropTypes.func, options: PropTypes.array.isRequired, optionsMaxHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), optionsStyle: PropTypes.oneOf(['checkbox', 'text']), optionsTemplate: PropTypes.func, optionsGroupsTemplate: PropTypes.func, placeholder: PropTypes.string, required: PropTypes.bool, search: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['external'])]), searchNoResultsLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), selectAll: PropTypes.bool, selectAllLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), selectionType: PropTypes.oneOf(['counter', 'tags', 'text']), selectionTypeCounterText: PropTypes.string, size: PropTypes.oneOf(['sm', 'lg']), virtualScroller: PropTypes.bool, visible: PropTypes.bool, visibleItems: PropTypes.number }, CFormControlWrapper.propTypes);
+CMultiSelect.propTypes = __assign$1({ className: PropTypes$1.string, cleaner: PropTypes$1.bool, clearSearchOnSelect: PropTypes$1.bool, disabled: PropTypes$1.bool, loading: PropTypes$1.bool, multiple: PropTypes$1.bool, onChange: PropTypes$1.func, onFilterChange: PropTypes$1.func, onHide: PropTypes$1.func, onShow: PropTypes$1.func, options: PropTypes$1.array.isRequired, optionsMaxHeight: PropTypes$1.oneOfType([PropTypes$1.number, PropTypes$1.string]), optionsStyle: PropTypes$1.oneOf(['checkbox', 'text']), optionsTemplate: PropTypes$1.func, optionsGroupsTemplate: PropTypes$1.func, placeholder: PropTypes$1.string, required: PropTypes$1.bool, search: PropTypes$1.oneOfType([PropTypes$1.bool, PropTypes$1.oneOf(['external'])]), searchNoResultsLabel: PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.node]), selectAll: PropTypes$1.bool, selectAllLabel: PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.node]), selectionType: PropTypes$1.oneOf(['counter', 'tags', 'text']), selectionTypeCounterText: PropTypes$1.string, size: PropTypes$1.oneOf(['sm', 'lg']), virtualScroller: PropTypes$1.bool, visible: PropTypes$1.bool, visibleItems: PropTypes$1.number }, CFormControlWrapper.propTypes);
 CMultiSelect.displayName = 'CMultiSelect';
 
 var CNav = React$1.forwardRef(function (_a, ref) {
@@ -11161,11 +11427,11 @@ var CNav = React$1.forwardRef(function (_a, ref) {
             _b), className), role: "navigation" }, rest, { ref: ref }), children));
 });
 CNav.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    component: PropTypes.elementType,
-    layout: PropTypes.oneOf(['fill', 'justified']),
-    variant: PropTypes.oneOf(['tabs', 'pills', 'underline']),
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
+    component: PropTypes$1.elementType,
+    layout: PropTypes$1.oneOf(['fill', 'justified']),
+    variant: PropTypes$1.oneOf(['pills', 'tabs', 'underline']),
 };
 CNav.displayName = 'CNav';
 
@@ -11174,8 +11440,8 @@ var CNavGroupItems = React$1.forwardRef(function (_a, ref) {
     return (React$1.createElement("ul", __assign$1({ className: classNames$1('nav-group-items', className) }, rest, { ref: ref }), children));
 });
 CNavGroupItems.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
 };
 CNavGroupItems.displayName = 'CNavGroupItems';
 
@@ -11199,19 +11465,24 @@ var CSidebarNav = React$1.forwardRef(function (_a, ref) {
         }))));
 });
 CSidebarNav.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
 };
 CSidebarNav.displayName = 'CSidebarNav';
 
+var isInVisibleGroup = function (el1, el2) {
+    var array1 = el1.toString().split('.');
+    var array2 = el2.toString().split('.');
+    return array2.every(function (item, index) { return item === array1[index]; });
+};
 var CNavGroup = React$1.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, compact = _a.compact, idx = _a.idx, toggler = _a.toggler, visible = _a.visible, rest = __rest$1(_a, ["children", "className", "compact", "idx", "toggler", "visible"]);
     var _b = React$1.useState(), height = _b[0], setHeight = _b[1];
     var navItemsRef = React$1.useRef(null);
     var _c = React$1.useContext(CNavContext), visibleGroup = _c.visibleGroup, setVisibleGroup = _c.setVisibleGroup;
-    var _d = React$1.useState(Boolean(visible || (idx && visibleGroup && visibleGroup.toString().startsWith(idx.toString())))), _visible = _d[0], setVisible = _d[1];
+    var _d = React$1.useState(Boolean(visible || (idx && visibleGroup && isInVisibleGroup(visibleGroup, idx)))), _visible = _d[0], setVisible = _d[1];
     React$1.useEffect(function () {
-        setVisible(Boolean(idx && visibleGroup && visibleGroup.toString().startsWith(idx.toString())));
+        setVisible(Boolean(idx && visibleGroup && isInVisibleGroup(visibleGroup, idx)));
     }, [visibleGroup]);
     var handleTogglerOnCLick = function (event) {
         event.preventDefault();
@@ -11261,12 +11532,12 @@ var CNavGroup = React$1.forwardRef(function (_a, ref) {
         }))); })));
 });
 CNavGroup.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    compact: PropTypes.bool,
-    idx: PropTypes.string,
-    toggler: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    visible: PropTypes.bool,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
+    compact: PropTypes$1.bool,
+    idx: PropTypes$1.string,
+    toggler: PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.node]),
+    visible: PropTypes$1.bool,
 };
 CNavGroup.displayName = 'CNavGroup';
 
@@ -11283,9 +11554,9 @@ var CNavLink = React$1.forwardRef(function (_a, ref) {
     return (React$1.createElement(CLink, __assign$1({ className: classNames$1('nav-link', className) }, rest, { ref: forkedRef }), children));
 });
 CNavLink.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    idx: PropTypes.string,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
+    idx: PropTypes$1.string,
 };
 CNavLink.displayName = 'CNavLink';
 
@@ -11294,8 +11565,8 @@ var CNavItem = React$1.forwardRef(function (_a, ref) {
     return (React$1.createElement("li", { className: classNames$1('nav-item', className), ref: ref }, rest.href || rest.to ? (React$1.createElement(CNavLink, __assign$1({ className: className }, rest), children)) : (children)));
 });
 CNavItem.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
 };
 CNavItem.displayName = 'CNavItem';
 
@@ -11304,8 +11575,8 @@ var CNavTitle = React$1.forwardRef(function (_a, ref) {
     return (React$1.createElement("li", __assign$1({ className: classNames$1('nav-title', className) }, rest, { ref: ref }), children));
 });
 CNavTitle.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
 };
 CNavTitle.displayName = 'CNavTitle';
 
@@ -11314,19 +11585,18 @@ 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.node,
-    className: PropTypes.string,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
     color: colorPropType,
-    colorScheme: PropTypes.oneOf(['dark', 'light']),
-    component: PropTypes.elementType,
-    container: PropTypes.oneOfType([
-        PropTypes.bool,
-        PropTypes.oneOf([
+    colorScheme: PropTypes$1.oneOf(['dark', 'light']),
+    component: PropTypes$1.elementType,
+    container: PropTypes$1.oneOfType([
+        PropTypes$1.bool,
+        PropTypes$1.oneOf([
             'sm',
             'md',
             'lg',
@@ -11335,11 +11605,11 @@ CNavbar.propTypes = {
             'fluid',
         ]),
     ]),
-    expand: PropTypes.oneOfType([
-        PropTypes.bool,
-        PropTypes.oneOf(['sm', 'md', 'lg', 'xl', 'xxl']),
+    expand: PropTypes$1.oneOfType([
+        PropTypes$1.bool,
+        PropTypes$1.oneOf(['sm', 'md', 'lg', 'xl', 'xxl']),
     ]),
-    placement: PropTypes.oneOf(['fixed-top', 'fixed-bottom', 'sticky-top']),
+    placement: PropTypes$1.oneOf(['fixed-top', 'fixed-bottom', 'sticky-top']),
 };
 CNavbar.displayName = 'CNavbar';
 
@@ -11349,9 +11619,9 @@ var CNavbarBrand = React$1.forwardRef(function (_a, ref) {
     return (React$1.createElement(Component, __assign$1({ className: classNames$1('navbar-brand', className) }, rest, { ref: ref }), children));
 });
 CNavbarBrand.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    component: PropTypes.elementType,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
+    component: PropTypes$1.elementType,
 };
 CNavbarBrand.displayName = 'CNavbarBrand';
 
@@ -11360,9 +11630,9 @@ var CNavbarNav = React$1.forwardRef(function (_a, ref) {
     return (React$1.createElement(Component, __assign$1({ className: classNames$1('navbar-nav', className), role: "navigation" }, rest, { ref: ref }), children));
 });
 CNavbarNav.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    component: PropTypes.elementType,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
+    component: PropTypes$1.elementType,
 };
 CNavbarNav.displayName = 'CNavbarNav';
 
@@ -11371,8 +11641,8 @@ var CNavbarText = React$1.forwardRef(function (_a, ref) {
     return (React$1.createElement("span", __assign$1({ className: classNames$1('navbar-text', className) }, rest, { ref: ref }), children));
 });
 CNavbarText.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
 };
 CNavbarText.displayName = 'CNavbarText';
 
@@ -11381,13 +11651,13 @@ var CNavbarToggler = React$1.forwardRef(function (_a, ref) {
     return (React$1.createElement("button", __assign$1({ type: "button", className: classNames$1('navbar-toggler', className) }, rest, { ref: ref }), children !== null && children !== void 0 ? children : React$1.createElement("span", { className: "navbar-toggler-icon" })));
 });
 CNavbarToggler.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
 };
 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);
@@ -11428,27 +11698,28 @@ 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 })))));
 });
 COffcanvas.propTypes = {
-    backdrop: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['static'])]),
-    children: PropTypes.node,
-    className: PropTypes.string,
-    keyboard: PropTypes.bool,
-    onHide: PropTypes.func,
-    onShow: PropTypes.func,
-    placement: PropTypes.oneOf(['start', 'end', 'top', 'bottom'])
+    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,
+    placement: PropTypes$1.oneOf(['start', 'end', 'top', 'bottom'])
         .isRequired,
-    portal: PropTypes.bool,
-    responsive: PropTypes.oneOfType([
-        PropTypes.bool,
-        PropTypes.oneOf(['sm', 'md', 'lg', 'xl', 'xxl']),
+    portal: PropTypes$1.bool,
+    responsive: PropTypes$1.oneOfType([
+        PropTypes$1.bool,
+        PropTypes$1.oneOf(['sm', 'md', 'lg', 'xl', 'xxl']),
     ]),
-    scroll: PropTypes.bool,
-    visible: PropTypes.bool,
+    scroll: PropTypes$1.bool,
+    visible: PropTypes$1.bool,
 };
 COffcanvas.displayName = 'COffcanvas';
 
@@ -11457,8 +11728,8 @@ var COffcanvasBody = React$1.forwardRef(function (_a, ref) {
     return (React$1.createElement("div", __assign$1({ className: classNames$1('offcanvas-body', className) }, rest, { ref: ref }), children));
 });
 COffcanvasBody.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
 };
 COffcanvasBody.displayName = 'COffcanvasBody';
 
@@ -11467,8 +11738,8 @@ var COffcanvasHeader = React$1.forwardRef(function (_a, ref) {
     return (React$1.createElement("div", __assign$1({ className: classNames$1('offcanvas-header', className) }, rest, { ref: ref }), children));
 });
 COffcanvasHeader.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
 };
 COffcanvasHeader.displayName = 'COffcanvasHeader';
 
@@ -11477,9 +11748,9 @@ var COffcanvasTitle = React$1.forwardRef(function (_a, ref) {
     return (React$1.createElement(Component, __assign$1({ className: classNames$1('offcanvas-title', className) }, rest, { ref: ref }), children));
 });
 COffcanvasTitle.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    component: PropTypes.elementType,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
+    component: PropTypes$1.elementType,
 };
 COffcanvasTitle.displayName = 'COffcanvasTitle';
 
@@ -11493,10 +11764,10 @@ var CPagination = React$1.forwardRef(function (_a, ref) {
                 _b), className) }, children)));
 });
 CPagination.propTypes = {
-    align: PropTypes.oneOf(['start', 'center', 'end']),
-    children: PropTypes.node,
-    className: PropTypes.string,
-    size: PropTypes.oneOf(['sm', 'lg']),
+    align: PropTypes$1.oneOf(['start', 'center', 'end']),
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
+    size: PropTypes$1.oneOf(['sm', 'lg']),
 };
 CPagination.displayName = 'CPagination';
 
@@ -11509,9 +11780,9 @@ var CPaginationItem = React$1.forwardRef(function (_a, ref) {
         }, className) }, (rest.active && { 'aria-current': 'page' })), Component === 'a' ? (React$1.createElement(CLink, __assign$1({ className: "page-link", component: Component }, rest, { ref: ref }), children)) : (React$1.createElement(Component, { className: "page-link", ref: ref }, children))));
 });
 CPaginationItem.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    component: PropTypes.elementType,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
+    component: PropTypes$1.elementType,
 };
 CPaginationItem.displayName = 'CPaginationItem';
 
@@ -11544,12 +11815,12 @@ var CPlaceholder = React$1.forwardRef(function (_a, ref) {
             _b), repsonsiveClassNames, className) }, rest, { ref: ref }), children));
 });
 CPlaceholder.propTypes = {
-    animation: PropTypes.oneOf(['glow', 'wave']),
-    children: PropTypes.node,
-    className: PropTypes.string,
+    animation: PropTypes$1.oneOf(['glow', 'wave']),
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
     color: colorPropType,
-    component: PropTypes.elementType,
-    size: PropTypes.oneOf(['xs', 'sm', 'lg']),
+    component: PropTypes$1.elementType,
+    size: PropTypes$1.oneOf(['xs', 'sm', 'lg']),
 };
 CPlaceholder.displayName = 'CPlaceholder';
 
@@ -11562,8 +11833,8 @@ var CProgressStacked = React$1.forwardRef(function (_a, ref) {
             } }, children)));
 });
 CProgressStacked.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
 };
 CProgressStacked.displayName = 'CProgressStacked';
 
@@ -11578,12 +11849,12 @@ var CProgressBar = React$1.forwardRef(function (_a, ref) {
             _b), className) }, (!stacked && { style: { width: "".concat(value, "%") } }), rest, { ref: ref }), children));
 });
 CProgressBar.propTypes = {
-    animated: PropTypes.bool,
-    children: PropTypes.node,
-    className: PropTypes.string,
-    color: PropTypes.oneOfType([colorPropType, gradientsPropType]),
-    value: PropTypes.number,
-    variant: PropTypes.oneOf(['striped']),
+    animated: PropTypes$1.bool,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
+    color: PropTypes$1.oneOfType([colorPropType, gradientsPropType]),
+    value: PropTypes$1.number,
+    variant: PropTypes$1.oneOf(['striped']),
 };
 CProgressBar.displayName = 'CProgressBar';
 
@@ -11609,13 +11880,13 @@ var CProgress = React$1.forwardRef(function (_a, ref) {
     })) : (React$1.createElement(CProgressBar, __assign$1({}, (progressBarClassName && { className: progressBarClassName }), { value: value }, rest), children))));
 });
 CProgress.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    height: PropTypes.number,
-    progressBarClassName: PropTypes.string,
-    thin: PropTypes.bool,
-    value: PropTypes.number,
-    white: PropTypes.bool,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
+    height: PropTypes$1.number,
+    progressBarClassName: PropTypes$1.string,
+    thin: PropTypes$1.bool,
+    value: PropTypes$1.number,
+    white: PropTypes$1.bool,
 };
 CProgress.displayName = 'CProgress';
 
@@ -11680,7 +11951,7 @@ var CPopover = function (_a) {
         typeof window !== 'undefined' &&
             ReactDOM.createPortal(React$1.createElement(Transition$1, { in: _visible, mountOnEnter: true, nodeRef: popoverRef, onEnter: onShow, onExit: onHide, timeout: {
                     enter: 0,
-                    exit: 200,
+                    exit: popoverRef.current ? getTransitionDurationFromElement(popoverRef.current) + 50 : 200,
                 }, unmountOnExit: true }, function (state) { return (React$1.createElement("div", __assign$1({ className: classNames$1('popover', 'bs-popover-auto', {
                     fade: animation,
                     show: state === 'entered',
@@ -11690,25 +11961,25 @@ var CPopover = function (_a) {
                 React$1.createElement("div", { className: "popover-body" }, content))); }), document.body)));
 };
 CPopover.propTypes = {
-    animation: PropTypes.bool,
-    children: PropTypes.node,
-    className: PropTypes.string,
-    content: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    delay: PropTypes.oneOfType([
-        PropTypes.number,
-        PropTypes.shape({
-            show: PropTypes.number.isRequired,
-            hide: PropTypes.number.isRequired,
+    animation: PropTypes$1.bool,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
+    content: PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.node]),
+    delay: PropTypes$1.oneOfType([
+        PropTypes$1.number,
+        PropTypes$1.shape({
+            show: PropTypes$1.number.isRequired,
+            hide: PropTypes$1.number.isRequired,
         }),
     ]),
     fallbackPlacements: fallbackPlacementsPropType,
-    offset: PropTypes.any,
-    onHide: PropTypes.func,
-    onShow: PropTypes.func,
-    placement: PropTypes.oneOf(['auto', 'top', 'right', 'bottom', 'left']),
-    title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+    offset: PropTypes$1.any,
+    onHide: PropTypes$1.func,
+    onShow: PropTypes$1.func,
+    placement: PropTypes$1.oneOf(['auto', 'top', 'right', 'bottom', 'left']),
+    title: PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.node]),
     trigger: triggerPropType,
-    visible: PropTypes.bool,
+    visible: PropTypes$1.bool,
 };
 CPopover.displayName = 'CPopover';
 
@@ -11734,6 +12005,8 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol */
+
 
 var __assign = function() {
     __assign = Object.assign || function __assign(t) {
@@ -11756,6 +12029,15 @@ function __rest(s, e) {
                 t[p[i]] = s[p[i]];
         }
     return t;
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
 }
 
 var propTypes = {exports: {}};
@@ -11981,14 +12263,12 @@ var hasRequiredReactIs;
 function requireReactIs () {
 	if (hasRequiredReactIs) return reactIs.exports;
 	hasRequiredReactIs = 1;
-	(function (module) {
 
-		if (process.env.NODE_ENV === 'production') {
-		  module.exports = requireReactIs_production_min();
-		} else {
-		  module.exports = requireReactIs_development();
-		}
-} (reactIs));
+	if (process.env.NODE_ENV === 'production') {
+	  reactIs.exports = requireReactIs_production_min();
+	} else {
+	  reactIs.exports = requireReactIs_development();
+	}
 	return reactIs.exports;
 }
 
@@ -12940,12 +13220,15 @@ if (process.env.NODE_ENV !== 'production') {
   propTypes.exports = requireFactoryWithThrowingShims()();
 }
 
+var propTypesExports = propTypes.exports;
+var PropTypes = /*@__PURE__*/getDefaultExportFromCjs(propTypesExports);
+
 var classnames = {exports: {}};
 
 /*!
-  Copyright (c) 2018 Jed Watson.
-  Licensed under the MIT License (MIT), see
-  http://jedwatson.github.io/classnames
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
 */
 
 (function (module) {
@@ -12974,14 +13257,15 @@ var classnames = {exports: {}};
 						}
 					}
 				} else if (argType === 'object') {
-					if (arg.toString === Object.prototype.toString) {
-						for (var key in arg) {
-							if (hasOwn.call(arg, key) && arg[key]) {
-								classes.push(key);
-							}
-						}
-					} else {
+					if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
 						classes.push(arg.toString());
+						continue;
+					}
+
+					for (var key in arg) {
+						if (hasOwn.call(arg, key) && arg[key]) {
+							classes.push(key);
+						}
 					}
 				}
 			}
@@ -12995,10 +13279,11 @@ var classnames = {exports: {}};
 		} else {
 			window.classNames = classNames;
 		}
-	}());
+	}()); 
 } (classnames));
 
-var classNames = classnames.exports;
+var classnamesExports = classnames.exports;
+var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
 
 var toCamelCase = function (str) {
     return str
@@ -13025,11 +13310,9 @@ var CIcon = React$1.forwardRef(function (_a, ref) {
             console.warn('[CIcon] The `name` property is deprecated and will be removed in v3, please use `icon="..."` instead of.');
     }
     React$1.useMemo(function () { return setChange(change + 1); }, [_icon, JSON.stringify(_icon)]);
-    var iconName = React$1.useMemo(function () {
-        return _icon && typeof _icon === 'string' && _icon.includes('-') ? toCamelCase(_icon) : _icon;
-    }, [change]);
     var titleCode = title ? "<title>".concat(title, "</title>") : '';
     var code = React$1.useMemo(function () {
+        var iconName = _icon && typeof _icon === 'string' && _icon.includes('-') ? toCamelCase(_icon) : _icon;
         if (Array.isArray(_icon)) {
             return _icon;
         }
@@ -13046,24 +13329,25 @@ var CIcon = React$1.forwardRef(function (_a, ref) {
     var viewBox = (function () {
         return rest['viewBox'] || "0 0 ".concat(scale);
     })();
-    // render
     var _className = customClassName
         ? classNames(customClassName)
         : classNames('icon', (_b = {},
             _b["icon-".concat(size)] = size,
             _b["icon-custom-size"] = height || width,
             _b), className);
-    return use ? (React$1.createElement("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", className: _className }, (height && { height: height }), (width && { width: width }), { role: "img" }, rest, { ref: ref }),
-        React$1.createElement("use", { href: use }))) : (React$1.createElement("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: viewBox, className: _className }, (height && { height: height }), (width && { width: width }), { role: "img", dangerouslySetInnerHTML: { __html: titleCode + iconCode } }, rest, { ref: ref })));
+    return (React$1.createElement(React$1.Fragment, null,
+        use ? (React$1.createElement("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", className: _className }, (height && { height: height }), (width && { width: width }), { role: "img", "aria-hidden": "true" }, rest, { ref: ref }),
+            React$1.createElement("use", { href: use }))) : (React$1.createElement("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: viewBox, className: _className }, (height && { height: height }), (width && { width: width }), { role: "img", "aria-hidden": "true", dangerouslySetInnerHTML: { __html: titleCode + iconCode } }, rest, { ref: ref }))),
+        title && React$1.createElement("span", { className: "visually-hidden" }, title)));
 });
 CIcon.propTypes = {
-    className: propTypes.exports.string,
-    content: propTypes.exports.oneOfType([propTypes.exports.array, propTypes.exports.string]),
-    customClassName: propTypes.exports.string,
-    height: propTypes.exports.number,
-    icon: propTypes.exports.oneOfType([propTypes.exports.array, propTypes.exports.string]),
-    name: propTypes.exports.string,
-    size: propTypes.exports.oneOf([
+    className: PropTypes.string,
+    content: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
+    customClassName: PropTypes.string,
+    height: PropTypes.number,
+    icon: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
+    name: PropTypes.string,
+    size: PropTypes.oneOf([
         'custom',
         'custom-size',
         'sm',
@@ -13078,9 +13362,9 @@ CIcon.propTypes = {
         '8xl',
         '9xl',
     ]),
-    title: propTypes.exports.any,
-    use: propTypes.exports.any,
-    width: propTypes.exports.number,
+    title: PropTypes.any,
+    use: PropTypes.any,
+    width: PropTypes.number,
 };
 CIcon.displayName = 'CIcon';
 
@@ -13141,20 +13425,20 @@ var CSmartPagination = React$1.forwardRef(function (_a, ref) {
         doubleArrows && (React$1.createElement(CPaginationItem, { onClick: function () { return setPage(pages); }, "aria-label": "Go to last page", "aria-disabled": activePage === pages, disabled: activePage === pages }, lastButton))));
 });
 CSmartPagination.propTypes = {
-    className: PropTypes.oneOfType([PropTypes.string]),
-    activePage: PropTypes.number,
-    dots: PropTypes.bool,
-    arrows: PropTypes.bool,
-    doubleArrows: PropTypes.bool,
-    firstButton: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
-    previousButton: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
-    nextButton: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
-    lastButton: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
-    size: PropTypes.oneOf(['sm', 'lg']),
-    align: PropTypes.oneOf(['start', 'center', 'end']),
-    limit: PropTypes.number,
-    pages: PropTypes.number.isRequired,
-    onActivePageChange: PropTypes.func,
+    className: PropTypes$1.oneOfType([PropTypes$1.string]),
+    activePage: PropTypes$1.number,
+    dots: PropTypes$1.bool,
+    arrows: PropTypes$1.bool,
+    doubleArrows: PropTypes$1.bool,
+    firstButton: PropTypes$1.oneOfType([PropTypes$1.node, PropTypes$1.string]),
+    previousButton: PropTypes$1.oneOfType([PropTypes$1.node, PropTypes$1.string]),
+    nextButton: PropTypes$1.oneOfType([PropTypes$1.node, PropTypes$1.string]),
+    lastButton: PropTypes$1.oneOfType([PropTypes$1.node, PropTypes$1.string]),
+    size: PropTypes$1.oneOf(['sm', 'lg']),
+    align: PropTypes$1.oneOf(['start', 'center', 'end']),
+    limit: PropTypes$1.number,
+    pages: PropTypes$1.number.isRequired,
+    onActivePageChange: PropTypes$1.func,
 };
 CSmartPagination.displayName = 'CSmartPagination';
 
@@ -13166,8 +13450,8 @@ var CTableHead = React$1.forwardRef(function (_a, ref) {
             _b), className) || undefined }, rest, { ref: ref }), children));
 });
 CTableHead.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
     color: colorPropType,
 };
 CTableHead.displayName = 'CTableHead';
@@ -13180,8 +13464,8 @@ var CTableHeaderCell = React$1.forwardRef(function (_a, ref) {
             _b), className) || undefined }, rest, { ref: ref }), children));
 });
 CTableHeaderCell.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
     color: colorPropType,
 };
 CTableHeaderCell.displayName = 'CTableHeaderCell';
@@ -13194,8 +13478,8 @@ var CTableBody = React$1.forwardRef(function (_a, ref) {
             _b), className) || undefined }, rest, { ref: ref }), children));
 });
 CTableBody.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
     color: colorPropType,
 };
 CTableBody.displayName = 'CTableBody';
@@ -13211,10 +13495,10 @@ var CTableDataCell = React$1.forwardRef(function (_a, ref) {
             _b), className) || undefined }, rest, { ref: ref }), children));
 });
 CTableDataCell.propTypes = {
-    active: PropTypes.bool,
-    align: PropTypes.oneOf(['bottom', 'middle', 'top']),
-    children: PropTypes.node,
-    className: PropTypes.string,
+    active: PropTypes$1.bool,
+    align: PropTypes$1.oneOf(['bottom', 'middle', 'top']),
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
     color: colorPropType,
 };
 CTableDataCell.displayName = 'CTableDataCell';
@@ -13229,10 +13513,10 @@ var CTableRow = React$1.forwardRef(function (_a, ref) {
             _b), className) || undefined }, rest, { ref: ref }), children));
 });
 CTableRow.propTypes = {
-    active: PropTypes.bool,
-    align: PropTypes.oneOf(['bottom', 'middle', 'top']),
-    children: PropTypes.node,
-    className: PropTypes.string,
+    active: PropTypes$1.bool,
+    align: PropTypes$1.oneOf(['bottom', 'middle', 'top']),
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
     color: colorPropType,
 };
 CTableRow.displayName = 'CTableRow';
@@ -13245,8 +13529,8 @@ var CTableFoot = React$1.forwardRef(function (_a, ref) {
             _b), className) || undefined }, rest, { ref: ref }), children));
 });
 CTableFoot.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
     color: colorPropType,
 };
 CTableFoot.displayName = 'CTableFoot';
@@ -13256,7 +13540,7 @@ var CTableCaption = React$1.forwardRef(function (_a, ref) {
     return (React$1.createElement("caption", __assign$1({}, props, { ref: ref }), children));
 });
 CTableCaption.propTypes = {
-    children: PropTypes.node,
+    children: PropTypes$1.node,
 };
 CTableCaption.displayName = 'CTableCaption';
 
@@ -13265,10 +13549,10 @@ var CTableResponsiveWrapper = function (_a) {
     return responsive ? (React$1.createElement("div", __assign$1({ className: typeof responsive === 'boolean' ? 'table-responsive' : "table-responsive-".concat(responsive) }, rest), children)) : (React$1.createElement(React$1.Fragment, null, children));
 };
 CTableResponsiveWrapper.propTypes = {
-    children: PropTypes.node,
-    responsive: PropTypes.oneOfType([
-        PropTypes.bool,
-        PropTypes.oneOf(['sm', 'md', 'lg', 'xl', 'xxl']),
+    children: PropTypes$1.node,
+    responsive: PropTypes$1.oneOfType([
+        PropTypes$1.bool,
+        PropTypes$1.oneOf(['sm', 'md', 'lg', 'xl', 'xxl']),
     ]),
 };
 CTableResponsiveWrapper.displayName = 'CTableResponsiveWrapper';
@@ -13324,28 +13608,28 @@ var CTable = React$1.forwardRef(function (_a, ref) {
                 React$1.createElement(CTableRow, null, footer.map(function (item, index) { return (React$1.createElement(CTableDataCell, __assign$1({}, (typeof item === 'object' && item._props && __assign$1({}, item._props)), { key: index }), typeof item === 'object' ? item.label : item)); })))))));
 });
 CTable.propTypes = {
-    align: PropTypes.oneOf(['bottom', 'middle', 'top']),
-    borderColor: PropTypes.string,
-    bordered: PropTypes.bool,
-    borderless: PropTypes.bool,
-    caption: PropTypes.oneOfType([PropTypes.string, PropTypes.oneOf(['top'])]),
-    captionTop: PropTypes.string,
-    children: PropTypes.node,
-    className: PropTypes.string,
+    align: PropTypes$1.oneOf(['bottom', 'middle', 'top']),
+    borderColor: PropTypes$1.string,
+    bordered: PropTypes$1.bool,
+    borderless: PropTypes$1.bool,
+    caption: PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.oneOf(['top'])]),
+    captionTop: PropTypes$1.string,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
     color: colorPropType,
-    columns: PropTypes.array,
-    footer: PropTypes.array,
-    hover: PropTypes.bool,
-    items: PropTypes.array,
-    responsive: PropTypes.oneOfType([
-        PropTypes.bool,
-        PropTypes.oneOf(['sm', 'md', 'lg', 'xl', 'xxl']),
+    columns: PropTypes$1.array,
+    footer: PropTypes$1.array,
+    hover: PropTypes$1.bool,
+    items: PropTypes$1.array,
+    responsive: PropTypes$1.oneOfType([
+        PropTypes$1.bool,
+        PropTypes$1.oneOf(['sm', 'md', 'lg', 'xl', 'xxl']),
     ]),
-    small: PropTypes.bool,
-    striped: PropTypes.bool,
-    stripedColumns: PropTypes.bool,
-    tableFootProps: PropTypes.shape(__assign$1({}, CTableFoot.propTypes)),
-    tableHeadProps: PropTypes.shape(__assign$1({}, CTableHead.propTypes)),
+    small: PropTypes$1.bool,
+    striped: PropTypes$1.bool,
+    stripedColumns: PropTypes$1.bool,
+    tableFootProps: PropTypes$1.shape(__assign$1({}, CTableFoot.propTypes)),
+    tableHeadProps: PropTypes$1.shape(__assign$1({}, CTableHead.propTypes)),
 };
 CTable.displayName = 'CTable';
 
@@ -13384,7 +13668,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;
@@ -13396,6 +13680,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 = [];
@@ -13504,10 +13794,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;
@@ -13565,8 +13877,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) {
@@ -13584,13 +13896,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,
@@ -13604,16 +13917,16 @@ var CSmartTableBody = React$1.forwardRef(function (_a, ref) {
         React$1.createElement(CTableDataCell, { colSpan: colspan }, noItemsLabel)))));
 });
 CSmartTableBody.propTypes = {
-    clickableRows: PropTypes.bool,
-    currentItems: PropTypes.array.isRequired,
-    firstItemOnActivePageIndex: PropTypes.number.isRequired,
-    noItemsLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    onRowChecked: PropTypes.func,
-    onRowClick: PropTypes.func,
-    columnNames: PropTypes.array.isRequired,
-    scopedColumns: PropTypes.object,
-    selectable: PropTypes.bool,
-    selected: PropTypes.array,
+    clickableRows: PropTypes$1.bool,
+    currentItems: PropTypes$1.array.isRequired,
+    firstItemOnActivePageIndex: PropTypes$1.number.isRequired,
+    noItemsLabel: PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.node]),
+    onRowChecked: PropTypes$1.func,
+    onRowClick: PropTypes$1.func,
+    columnNames: PropTypes$1.array.isRequired,
+    scopedColumns: PropTypes$1.object,
+    selectable: PropTypes$1.bool,
+    selected: PropTypes$1.array,
 };
 CSmartTableBody.displayName = 'CSmartTableBody';
 
@@ -13658,23 +13971,41 @@ var CSmartTableHead = React$1.forwardRef(function (_a, ref) {
         React$1.createElement(CTableRow, null,
             selectable && (React$1.createElement(CTableHeaderCell, null, selectAll && (React$1.createElement(CFormCheck, { checked: typeof selectedAll === 'boolean' ? selectedAll : false, indeterminate: selectedAll === 'indeterminate' ? true : false, onChange: function () { return handleSelectAllChecked && handleSelectAllChecked(); }, ref: selectAllcheckboxRef })))),
             _columns.map(function (column, index) {
-                return (React$1.createElement(CTableHeaderCell, __assign$1({}, getTableHeaderCellProps(column), { onClick: function () { return handleSort && handleSort(getColumnKey(column), index); }, style: getTableHeaderCellStyles(column, columnSorter), key: index }),
+                var isSortable = columnSorter &&
+                    (typeof column === 'object'
+                        ? column.sorter === undefined
+                            ? true
+                            : column.sorter
+                        : true);
+                return (React$1.createElement(CTableHeaderCell, __assign$1({}, getTableHeaderCellProps(column), { 
+                    // onClick={() => handleSort && handleSort(getColumnKey(column), index)}
+                    style: getTableHeaderCellStyles(column, columnSorter), key: index }, (isSortable && {
+                    onClick: function () { return handleSort && handleSort(getColumnKey(column), index); },
+                    onKeyDown: function (event) {
+                        if (event.key === 'Enter') {
+                            handleSort && handleSort(getColumnKey(column), index);
+                        }
+                        if (event.key === 'ArrowUp') {
+                            event.preventDefault();
+                            handleSort && handleSort(getColumnKey(column), index, 'asc');
+                        }
+                        if (event.key === 'ArrowDown') {
+                            event.preventDefault();
+                            handleSort && handleSort(getColumnKey(column), index, 'desc');
+                        }
+                    },
+                    tabIndex: 0,
+                })),
                     React$1.createElement("div", { className: "d-inline" }, getColumnLabel(column)),
-                    columnSorter &&
-                        (typeof column === 'object'
-                            ? (column.sorter === undefined
-                                ? true
-                                : column.sorter)
-                            : true) &&
-                        columnSorterIcon(column)));
+                    isSortable && columnSorterIcon(column)));
             })),
         columnFilter && (React$1.createElement(CTableRow, null,
             selectable && React$1.createElement(CTableHeaderCell, null),
             _columns.map(function (column, index) {
                 return (React$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 &&
@@ -13691,23 +14022,23 @@ var CSmartTableHead = React$1.forwardRef(function (_a, ref) {
             })))));
 });
 CSmartTableHead.propTypes = {
-    columnFilter: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
-    columnFilterState: PropTypes.object,
-    columnSorter: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
-    component: PropTypes.elementType,
-    children: PropTypes.node,
-    columns: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.any, PropTypes.string])).isRequired,
-    handleFilterOnChange: PropTypes.func,
-    handleFilterOnInput: PropTypes.func,
-    handleSelectAllChecked: PropTypes.func,
-    handleSort: PropTypes.func,
-    selectable: PropTypes.bool,
-    selectAll: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
-    selectedAll: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-    sorterState: PropTypes.object,
-    sortingIcon: PropTypes.node,
-    sortingIconAscending: PropTypes.node,
-    sortingIconDescending: PropTypes.node,
+    columnFilter: PropTypes$1.oneOfType([PropTypes$1.bool, PropTypes$1.object]),
+    columnFilterState: PropTypes$1.object,
+    columnSorter: PropTypes$1.oneOfType([PropTypes$1.bool, PropTypes$1.object]),
+    component: PropTypes$1.elementType,
+    children: PropTypes$1.node,
+    columns: PropTypes$1.arrayOf(PropTypes$1.oneOfType([PropTypes$1.any, PropTypes$1.string])).isRequired,
+    handleFilterOnChange: PropTypes$1.func,
+    handleFilterOnInput: PropTypes$1.func,
+    handleSelectAllChecked: PropTypes$1.func,
+    handleSort: PropTypes$1.func,
+    selectable: PropTypes$1.bool,
+    selectAll: PropTypes$1.oneOfType([PropTypes$1.bool, PropTypes$1.object]),
+    selectedAll: PropTypes$1.oneOfType([PropTypes$1.bool, PropTypes$1.string]),
+    sorterState: PropTypes$1.object,
+    sortingIcon: PropTypes$1.node,
+    sortingIconAscending: PropTypes$1.node,
+    sortingIconDescending: PropTypes$1.node,
 };
 CSmartTableHead.displayName = 'CSmartTableHead';
 
@@ -13863,14 +14194,20 @@ var CSmartTable = React$1.forwardRef(function (_a, ref) {
             return item;
         }));
     };
-    var handleSorterChange = function (column, index) {
+    var handleSorterChange = function (column, index, order) {
         if (!isSortable(index, columns, columnSorter, itemsDataColumns, columnNames)) {
             return;
         }
         //if column changed or sort was descending change asc to true
         var state = sorterState !== null && sorterState !== void 0 ? sorterState : { column: '', state: '' };
+        if (order) {
+            state.state = order;
+        }
         if (state.column === column) {
-            if (state.state === 0) {
+            if (order) {
+                state.state = order;
+            }
+            else if (state.state === 0) {
                 state.state = 'asc';
             }
             else if (state.state === 'asc') {
@@ -13882,11 +14219,12 @@ var CSmartTable = React$1.forwardRef(function (_a, ref) {
         }
         else {
             state.column = column;
-            state.state = 'asc';
+            state.state = order || 'asc';
         }
         setSorterState(__assign$1({}, state));
     };
     var handleTableFilterChange = function (value, type) {
+        to;
         var isLazy = tableFilter && typeof tableFilter === 'object' && tableFilter.lazy === true;
         if ((isLazy && type === 'input') || (!isLazy && type === 'change')) {
             return;
@@ -13921,10 +14259,10 @@ var CSmartTable = React$1.forwardRef(function (_a, ref) {
             React$1.createElement(CTable, __assign$1({}, tableProps),
                 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) {
+                    }, 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, order) { return handleSorterChange(key, index, order); } }))),
+                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)); }))))),
@@ -13949,51 +14287,51 @@ var CSmartTable = React$1.forwardRef(function (_a, ref) {
                         }))))))))));
 });
 CSmartTable.propTypes = {
-    activePage: PropTypes.number,
-    cleaner: PropTypes.bool,
-    clickableRows: PropTypes.bool,
-    columnFilter: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
-    columnFilterValue: PropTypes.object,
-    columns: PropTypes.array,
-    columnSorter: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
-    elementCover: PropTypes.node,
-    footer: PropTypes.oneOfType([PropTypes.bool, PropTypes.array]),
-    header: PropTypes.bool,
-    items: PropTypes.array,
-    itemsNumber: PropTypes.number,
-    itemsPerPage: PropTypes.number,
-    itemsPerPageLabel: PropTypes.string,
-    itemsPerPageOptions: PropTypes.array,
-    itemsPerPageSelect: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
-    loading: PropTypes.bool,
-    noItemsLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    onActivePageChange: PropTypes.func,
-    onColumnFilterChange: PropTypes.func,
-    onFilteredItemsChange: PropTypes.func,
-    onItemsPerPageChange: PropTypes.func,
-    onRowClick: PropTypes.func,
-    onSelectAll: PropTypes.func,
-    onSelectedItemsChange: PropTypes.func,
-    onSorterChange: PropTypes.func,
-    onTableFilterChange: PropTypes.func,
-    pagination: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
-    paginationProps: PropTypes.any,
-    scopedColumns: PropTypes.object,
-    selectable: PropTypes.bool,
-    selectAll: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
-    selected: PropTypes.array,
-    sorterValue: PropTypes.object,
-    sortingIcon: PropTypes.node,
-    sortingIconAscending: PropTypes.node,
-    sortingIconDescending: PropTypes.node,
-    tableBodyProps: PropTypes.object,
-    tableFootProps: PropTypes.object,
-    tableFilter: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
-    tableFilterLabel: PropTypes.string,
-    tableFilterPlaceholder: PropTypes.string,
-    tableFilterValue: PropTypes.string,
-    tableHeadProps: PropTypes.object,
-    tableProps: PropTypes.object,
+    activePage: PropTypes$1.number,
+    cleaner: PropTypes$1.bool,
+    clickableRows: PropTypes$1.bool,
+    columnFilter: PropTypes$1.oneOfType([PropTypes$1.bool, PropTypes$1.object]),
+    columnFilterValue: PropTypes$1.object,
+    columns: PropTypes$1.array,
+    columnSorter: PropTypes$1.oneOfType([PropTypes$1.bool, PropTypes$1.object]),
+    elementCover: PropTypes$1.node,
+    footer: PropTypes$1.oneOfType([PropTypes$1.bool, PropTypes$1.array]),
+    header: PropTypes$1.bool,
+    items: PropTypes$1.array,
+    itemsNumber: PropTypes$1.number,
+    itemsPerPage: PropTypes$1.number,
+    itemsPerPageLabel: PropTypes$1.string,
+    itemsPerPageOptions: PropTypes$1.array,
+    itemsPerPageSelect: PropTypes$1.oneOfType([PropTypes$1.bool, PropTypes$1.object]),
+    loading: PropTypes$1.bool,
+    noItemsLabel: PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.node]),
+    onActivePageChange: PropTypes$1.func,
+    onColumnFilterChange: PropTypes$1.func,
+    onFilteredItemsChange: PropTypes$1.func,
+    onItemsPerPageChange: PropTypes$1.func,
+    onRowClick: PropTypes$1.func,
+    onSelectAll: PropTypes$1.func,
+    onSelectedItemsChange: PropTypes$1.func,
+    onSorterChange: PropTypes$1.func,
+    onTableFilterChange: PropTypes$1.func,
+    pagination: PropTypes$1.oneOfType([PropTypes$1.bool, PropTypes$1.object]),
+    paginationProps: PropTypes$1.any,
+    scopedColumns: PropTypes$1.object,
+    selectable: PropTypes$1.bool,
+    selectAll: PropTypes$1.oneOfType([PropTypes$1.bool, PropTypes$1.object]),
+    selected: PropTypes$1.array,
+    sorterValue: PropTypes$1.object,
+    sortingIcon: PropTypes$1.node,
+    sortingIconAscending: PropTypes$1.node,
+    sortingIconDescending: PropTypes$1.node,
+    tableBodyProps: PropTypes$1.object,
+    tableFootProps: PropTypes$1.object,
+    tableFilter: PropTypes$1.oneOfType([PropTypes$1.bool, PropTypes$1.object]),
+    tableFilterLabel: PropTypes$1.string,
+    tableFilterPlaceholder: PropTypes$1.string,
+    tableFilterValue: PropTypes$1.string,
+    tableHeadProps: PropTypes$1.object,
+    tableProps: PropTypes$1.object,
 };
 CSmartTable.displayName = 'CSmartTable';
 
@@ -14088,19 +14426,19 @@ var CSidebar = React$1.forwardRef(function (_a, ref) {
             ReactDOM.createPortal(React$1.createElement(CBackdrop, { className: "sidebar-backdrop", visible: _visible }), document.body)));
 });
 CSidebar.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    colorScheme: PropTypes.oneOf(['dark', 'light']),
-    narrow: PropTypes.bool,
-    onHide: PropTypes.func,
-    onShow: PropTypes.func,
-    onVisibleChange: PropTypes.func,
-    overlaid: PropTypes.bool,
-    placement: PropTypes.oneOf(['start', 'end']),
-    position: PropTypes.oneOf(['fixed', 'sticky']),
-    size: PropTypes.oneOf(['sm', 'lg', 'xl']),
-    unfoldable: PropTypes.bool,
-    visible: PropTypes.bool,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
+    colorScheme: PropTypes$1.oneOf(['dark', 'light']),
+    narrow: PropTypes$1.bool,
+    onHide: PropTypes$1.func,
+    onShow: PropTypes$1.func,
+    onVisibleChange: PropTypes$1.func,
+    overlaid: PropTypes$1.bool,
+    placement: PropTypes$1.oneOf(['start', 'end']),
+    position: PropTypes$1.oneOf(['fixed', 'sticky']),
+    size: PropTypes$1.oneOf(['sm', 'lg', 'xl']),
+    unfoldable: PropTypes$1.bool,
+    visible: PropTypes$1.bool,
 };
 CSidebar.displayName = 'CSidebar';
 
@@ -14109,8 +14447,8 @@ var CSidebarBrand = React$1.forwardRef(function (_a, ref) {
     return (React$1.createElement("div", __assign$1({ className: classNames$1('sidebar-brand', className), ref: ref }, rest), children));
 });
 CSidebarBrand.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
 };
 CSidebarBrand.displayName = 'CSidebarBrand';
 
@@ -14119,8 +14457,8 @@ var CSidebarFooter = React$1.forwardRef(function (_a, ref) {
     return (React$1.createElement("div", __assign$1({ className: classNames$1('sidebar-footer', className), ref: ref }, rest), children));
 });
 CSidebarFooter.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
 };
 CSidebarFooter.displayName = 'CSidebarFooter';
 
@@ -14129,8 +14467,8 @@ var CSidebarToggler = React$1.forwardRef(function (_a, ref) {
     return (React$1.createElement("button", __assign$1({ className: classNames$1('sidebar-toggler', className), ref: ref }, rest), children));
 });
 CSidebarToggler.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
 };
 CSidebarToggler.displayName = 'CSidebarToggler';
 
@@ -14139,8 +14477,8 @@ var CSidebarHeader = React$1.forwardRef(function (_a, ref) {
     return (React$1.createElement("div", __assign$1({ className: classNames$1('sidebar-header', className), ref: ref }, rest), children));
 });
 CSidebarHeader.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
 };
 CSidebarHeader.displayName = 'CSidebarHeader';
 
@@ -14149,8 +14487,8 @@ var CTabContent = React$1.forwardRef(function (_a, ref) {
     return (React$1.createElement("div", __assign$1({ className: classNames$1('tab-content', className) }, rest, { ref: ref }), children));
 });
 CTabContent.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
 };
 CTabContent.displayName = 'CTabContent';
 
@@ -14164,11 +14502,11 @@ var CTabPane = React$1.forwardRef(function (_a, ref) {
         }, className) }, rest, { ref: forkedRef }), children)); }));
 });
 CTabPane.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    onHide: PropTypes.func,
-    onShow: PropTypes.func,
-    visible: PropTypes.bool,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
+    onHide: PropTypes$1.func,
+    onShow: PropTypes$1.func,
+    visible: PropTypes$1.bool,
 };
 CTabPane.displayName = 'CTabPane';
 
@@ -14213,17 +14551,17 @@ var CToast = React$1.forwardRef(function (_a, ref) {
     }));
 });
 CToast.propTypes = {
-    animation: PropTypes.bool,
-    autohide: PropTypes.bool,
-    children: PropTypes.node,
-    className: PropTypes.string,
+    animation: PropTypes$1.bool,
+    autohide: PropTypes$1.bool,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
     color: colorPropType,
-    delay: PropTypes.number,
-    index: PropTypes.number,
-    key: PropTypes.number,
-    onClose: PropTypes.func,
-    onShow: PropTypes.func,
-    visible: PropTypes.bool,
+    delay: PropTypes$1.number,
+    index: PropTypes$1.number,
+    key: PropTypes$1.number,
+    onClose: PropTypes$1.func,
+    onShow: PropTypes$1.func,
+    visible: PropTypes$1.bool,
 };
 CToast.displayName = 'CToast';
 
@@ -14232,8 +14570,8 @@ var CToastBody = React$1.forwardRef(function (_a, ref) {
     return (React$1.createElement("div", __assign$1({ className: classNames$1('toast-body', className) }, rest, { ref: ref }), children));
 });
 CToastBody.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
 };
 CToastBody.displayName = 'CToastBody';
 
@@ -14242,7 +14580,7 @@ var CToastClose = React$1.forwardRef(function (_a, ref) {
     var setVisible = React$1.useContext(CToastContext).setVisible;
     return Component ? (React$1.createElement(Component, __assign$1({ onClick: function () { return setVisible(false); } }, rest, { ref: ref }), children)) : (React$1.createElement(CCloseButton, __assign$1({ onClick: function () { return setVisible(false); } }, rest, { ref: ref })));
 });
-CToastClose.propTypes = __assign$1(__assign$1({}, CCloseButton.propTypes), { component: PropTypes.elementType });
+CToastClose.propTypes = __assign$1(__assign$1({}, CCloseButton.propTypes), { component: PropTypes$1.elementType });
 CToastClose.displayName = 'CToastClose';
 
 var CToastHeader = React$1.forwardRef(function (_a, ref) {
@@ -14252,9 +14590,9 @@ var CToastHeader = React$1.forwardRef(function (_a, ref) {
         closeButton && React$1.createElement(CToastClose, null)));
 });
 CToastHeader.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    closeButton: PropTypes.bool,
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
+    closeButton: PropTypes$1.bool,
 };
 CToastHeader.displayName = 'CToastHeader';
 
@@ -14290,11 +14628,11 @@ var CToaster = React$1.forwardRef(function (_a, ref) {
         toasts.map(function (toast) { return React$1.cloneElement(toast, { visible: true }); }))) : null));
 });
 CToaster.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    placement: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.oneOf([
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
+    placement: PropTypes$1.oneOfType([
+        PropTypes$1.string,
+        PropTypes$1.oneOf([
             'top-start',
             'top-center',
             'top-end',
@@ -14306,7 +14644,7 @@ CToaster.propTypes = {
             'bottom-end',
         ]),
     ]),
-    push: PropTypes.any,
+    push: PropTypes$1.any,
 };
 CToaster.displayName = 'CToaster';
 
@@ -14371,7 +14709,7 @@ var CTooltip = function (_a) {
         typeof window !== 'undefined' &&
             ReactDOM.createPortal(React$1.createElement(Transition$1, { in: _visible, mountOnEnter: true, onEnter: onShow, onExit: onHide, timeout: {
                     enter: 0,
-                    exit: 200,
+                    exit: tooltipRef.current ? getTransitionDurationFromElement(tooltipRef.current) + 50 : 200,
                 }, unmountOnExit: true }, function (state) { return (React$1.createElement("div", __assign$1({ className: classNames$1('tooltip', 'bs-tooltip-auto', {
                     fade: animation,
                     show: state === 'entered',
@@ -14380,30 +14718,30 @@ var CTooltip = function (_a) {
                 React$1.createElement("div", { className: "tooltip-inner" }, content))); }), document.body)));
 };
 CTooltip.propTypes = {
-    animation: PropTypes.bool,
-    children: PropTypes.node,
-    content: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    delay: PropTypes.oneOfType([
-        PropTypes.number,
-        PropTypes.shape({
-            show: PropTypes.number.isRequired,
-            hide: PropTypes.number.isRequired,
+    animation: PropTypes$1.bool,
+    children: PropTypes$1.node,
+    content: PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.node]),
+    delay: PropTypes$1.oneOfType([
+        PropTypes$1.number,
+        PropTypes$1.shape({
+            show: PropTypes$1.number.isRequired,
+            hide: PropTypes$1.number.isRequired,
         }),
     ]),
     fallbackPlacements: fallbackPlacementsPropType,
-    offset: PropTypes.any,
-    onHide: PropTypes.func,
-    onShow: PropTypes.func,
-    placement: PropTypes.oneOf(['auto', 'top', 'right', 'bottom', 'left']),
+    offset: PropTypes$1.any,
+    onHide: PropTypes$1.func,
+    onShow: PropTypes$1.func,
+    placement: PropTypes$1.oneOf(['auto', 'top', 'right', 'bottom', 'left']),
     trigger: triggerPropType,
-    visible: PropTypes.bool,
+    visible: PropTypes$1.bool,
 };
 CTooltip.displayName = 'CTooltip';
 
 var CWidgetStatsA = React$1.forwardRef(function (_a, ref) {
     var _b;
     var action = _a.action, chart = _a.chart, className = _a.className, color = _a.color, title = _a.title, value = _a.value, rest = __rest$1(_a, ["action", "chart", "className", "color", "title", "value"]);
-    return (React$1.createElement(CCard, __assign$1({ className: classNames$1((_b = {}, _b["bg-".concat(color)] = color, _b['text-high-emphasis-inverse'] = color, _b), className) }, rest, { ref: ref }),
+    return (React$1.createElement(CCard, __assign$1({ className: classNames$1((_b = {}, _b["bg-".concat(color)] = color, _b['text-white'] = color, _b), className) }, rest, { ref: ref }),
         React$1.createElement(CCardBody, { className: "pb-0 d-flex justify-content-between align-items-start" },
             React$1.createElement("div", null,
                 value && React$1.createElement("div", { className: "fs-4 fw-semibold" }, value),
@@ -14412,52 +14750,52 @@ var CWidgetStatsA = React$1.forwardRef(function (_a, ref) {
         chart));
 });
 CWidgetStatsA.propTypes = {
-    action: PropTypes.node,
-    chart: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    className: PropTypes.string,
+    action: PropTypes$1.node,
+    chart: PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.node]),
+    className: PropTypes$1.string,
     color: colorPropType,
-    title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    value: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.number]),
+    title: PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.node]),
+    value: PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.node, PropTypes$1.number]),
 };
 CWidgetStatsA.displayName = 'CWidgetStatsA';
 
 var CWidgetStatsB = React$1.forwardRef(function (_a, ref) {
     var className = _a.className, color = _a.color, inverse = _a.inverse, progress = _a.progress, text = _a.text, title = _a.title, value = _a.value, rest = __rest$1(_a, ["className", "color", "inverse", "progress", "text", "title", "value"]);
-    return (React$1.createElement(CCard, __assign$1({ className: className, color: color }, (inverse && { textColor: 'high-emphasis-inverse' }), rest, { ref: ref }),
+    return (React$1.createElement(CCard, __assign$1({ className: className, color: color }, (inverse && { textColor: 'white' }), rest, { ref: ref }),
         React$1.createElement(CCardBody, null,
             value && React$1.createElement("div", { className: "fs-4 fw-semibold" }, value),
             title && React$1.createElement("div", null, title),
             React$1.createElement(CProgress, __assign$1({ className: "my-2", height: 4 }, (inverse && { white: true }), progress)),
-            text && (React$1.createElement("small", { className: inverse ? 'text-medium-emphasis-inverse' : 'text-medium-emphasis' }, text)))));
+            text && (React$1.createElement("small", { className: inverse ? 'text-white text-opacity-75' : 'text-body-secondary' }, text)))));
 });
 CWidgetStatsB.propTypes = {
-    className: PropTypes.string,
+    className: PropTypes$1.string,
     color: colorPropType,
-    inverse: PropTypes.bool,
-    progress: PropTypes.object,
-    text: PropTypes.string,
-    title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    value: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.number]),
+    inverse: PropTypes$1.bool,
+    progress: PropTypes$1.object,
+    text: PropTypes$1.string,
+    title: PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.node]),
+    value: PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.node, PropTypes$1.number]),
 };
 CWidgetStatsB.displayName = 'CWidgetCWidgetStatsB';
 
 var CWidgetStatsC = React$1.forwardRef(function (_a, ref) {
     var className = _a.className, color = _a.color, icon = _a.icon, inverse = _a.inverse, progress = _a.progress, title = _a.title, value = _a.value, rest = __rest$1(_a, ["className", "color", "icon", "inverse", "progress", "title", "value"]);
-    return (React$1.createElement(CCard, __assign$1({ className: className, color: color }, (inverse && { textColor: 'high-emphasis-inverse' }), rest, { ref: ref }),
+    return (React$1.createElement(CCard, __assign$1({ className: className, color: color }, (inverse && { textColor: 'white' }), rest, { ref: ref }),
         React$1.createElement(CCardBody, null,
-            icon && (React$1.createElement("div", { className: "text-medium-emphasis".concat(inverse ? '-inverse' : '', " text-end mb-4") }, icon)),
-            value && (React$1.createElement("div", { className: "text-high-emphasis".concat(inverse ? '-inverse' : '', " fs-4 fw-semibold") }, value)),
-            title && (React$1.createElement("div", { className: inverse ? 'text-medium-emphasis-inverse' : 'text-medium-emphasis' }, title)),
+            icon && React$1.createElement("div", { className: "text-end mb-4" }, icon),
+            value && React$1.createElement("div", { className: "fs-4 fw-semibold" }, value),
+            title && (React$1.createElement("div", { className: inverse ? 'text-white text-opacity-75' : 'text-body-secondary' }, title)),
             React$1.createElement(CProgress, __assign$1({ className: "mt-3 mb-0", height: 4 }, (inverse && { white: true }), progress)))));
 });
 CWidgetStatsC.propTypes = {
-    className: PropTypes.string,
+    className: PropTypes$1.string,
     color: colorPropType,
-    icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    inverse: PropTypes.bool,
-    progress: PropTypes.object,
-    title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    value: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.number]),
+    icon: PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.node]),
+    inverse: PropTypes$1.bool,
+    progress: PropTypes$1.object,
+    title: PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.node]),
+    value: PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.node, PropTypes$1.number]),
 };
 CWidgetStatsC.displayName = 'CWidgetStatsCWidgetStatsC';
 
@@ -14476,15 +14814,15 @@ var CWidgetStatsD = React$1.forwardRef(function (_a, ref) {
                     index % 2 !== 0 && React$1.createElement("div", { className: "vr" }),
                     React$1.createElement(CCol, null,
                         React$1.createElement("div", { className: "fs-5 fw-semibold" }, value.value),
-                        React$1.createElement("div", { className: "text-uppercase text-medium-emphasis small" }, value.title))));
+                        React$1.createElement("div", { className: "text-uppercase text-body-secondary small" }, value.title))));
             }))));
 });
 CWidgetStatsD.propTypes = {
-    chart: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    className: PropTypes.string,
+    chart: PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.node]),
+    className: PropTypes$1.string,
     color: colorPropType,
-    icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    values: PropTypes.arrayOf(PropTypes.any),
+    icon: PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.node]),
+    values: PropTypes$1.arrayOf(PropTypes$1.any),
 };
 CWidgetStatsD.displayName = 'CWidgetStatsD';
 
@@ -14492,16 +14830,16 @@ var CWidgetStatsE = React$1.forwardRef(function (_a, ref) {
     var chart = _a.chart, className = _a.className, title = _a.title, value = _a.value, rest = __rest$1(_a, ["chart", "className", "title", "value"]);
     return (React$1.createElement(CCard, __assign$1({ className: classNames$1(className) }, rest, { ref: ref }),
         React$1.createElement(CCardBody, { className: "text-center" },
-            title && (React$1.createElement("div", { className: "text-medium-emphasis small text-uppercase fw-semibold" }, title)),
+            title && (React$1.createElement("div", { className: "text-body-secondary small text-uppercase fw-semibold" }, title)),
             value && React$1.createElement("div", { className: "fs-6 fw-semibold py-3" }, value),
             chart)));
 });
 CWidgetStatsE.propTypes = {
-    children: PropTypes.node,
-    chart: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    className: PropTypes.string,
-    title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    value: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.number]),
+    children: PropTypes$1.node,
+    chart: PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.node]),
+    className: PropTypes$1.string,
+    title: PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.node]),
+    value: PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.node, PropTypes$1.number]),
 };
 CWidgetStatsE.displayName = 'CWidgetStatsE';
 
@@ -14512,17 +14850,17 @@ var CWidgetStatsF = React$1.forwardRef(function (_a, ref) {
             React$1.createElement("div", { className: "me-3 text-white bg-".concat(color, " ").concat(padding ? 'p-3' : 'p-4') }, icon),
             React$1.createElement("div", null,
                 React$1.createElement("div", { className: "fs-6 fw-semibold text-".concat(color) }, value),
-                React$1.createElement("div", { className: "text-medium-emphasis text-uppercase fw-semibold small" }, title))),
+                React$1.createElement("div", { className: "text-body-secondary text-uppercase fw-semibold small" }, title))),
         footer && React$1.createElement(CCardFooter, null, footer)));
 });
 CWidgetStatsF.propTypes = {
-    className: PropTypes.string,
+    className: PropTypes$1.string,
     color: colorPropType,
-    footer: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    padding: PropTypes.bool,
-    title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    value: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.number]),
+    footer: PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.node]),
+    icon: PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.node]),
+    padding: PropTypes$1.bool,
+    title: PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.node]),
+    value: PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.node, PropTypes$1.number]),
 };
 CWidgetStatsF.displayName = 'CWidgetStatsF';