@coreui/react 4.9.0-beta.0 → 4.9.0-beta.2

package/dist/index.es.js

@@ -1,7 +1,5 @@
-import * as React from 'react';
-import React__default, { createContext, forwardRef, useState, useRef, useContext, useEffect, useMemo, Children, useLayoutEffect } from 'react';
-import * as ReactDOM from 'react-dom';
-import ReactDOM__default, { createPortal } from 'react-dom';
+import React, { createContext, forwardRef, useState, useRef, useContext, useEffect, useMemo, Children, useLayoutEffect } from 'react';
+import ReactDOM, { createPortal } from 'react-dom';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -17,7 +15,7 @@ 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 */
+/* global Reflect, Promise, SuppressedError, Symbol */
 
 
 var __assign = function() {
@@ -51,7 +49,12 @@ function __spreadArray(to, from, pack) {
         }
     }
     return to.concat(ar || Array.prototype.slice.call(from));
-}
+}
+
+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;
@@ -1306,8 +1309,8 @@ var CAccordionContext = createContext({});
 var CAccordion = forwardRef(function (_a, ref) {
     var children = _a.children, activeItemKey = _a.activeItemKey, _b = _a.alwaysOpen, alwaysOpen = _b === void 0 ? false : _b, className = _a.className, flush = _a.flush, rest = __rest(_a, ["children", "activeItemKey", "alwaysOpen", "className", "flush"]);
     var _c = useState(activeItemKey), _activeItemKey = _c[0], setActiveKey = _c[1];
-    return (React__default.createElement("div", __assign({ className: classNames('accordion', { 'accordion-flush': flush }, className) }, rest, { ref: ref }),
-        React__default.createElement(CAccordionContext.Provider, { value: { _activeItemKey: _activeItemKey, alwaysOpen: alwaysOpen, setActiveKey: setActiveKey } }, children)));
+    return (React.createElement("div", __assign({ className: classNames('accordion', { 'accordion-flush': flush }, className) }, rest, { ref: ref }),
+        React.createElement(CAccordionContext.Provider, { value: { _activeItemKey: _activeItemKey, alwaysOpen: alwaysOpen, setActiveKey: setActiveKey } }, children)));
 });
 CAccordion.propTypes = {
     alwaysOpen: PropTypes.bool,
@@ -1330,8 +1333,8 @@ var CAccordionItem = forwardRef(function (_a, ref) {
     useEffect(function () {
         setVisible(Boolean(_activeItemKey === _itemKey.current));
     }, [_activeItemKey]);
-    return (React__default.createElement("div", __assign({ className: classNames('accordion-item', className) }, rest, { ref: ref }),
-        React__default.createElement(CAccordionItemContext.Provider, { value: { setVisible: setVisible, visible: visible } }, children)));
+    return (React.createElement("div", __assign({ className: classNames('accordion-item', className) }, rest, { ref: ref }),
+        React.createElement(CAccordionItemContext.Provider, { value: { setVisible: setVisible, visible: visible } }, children)));
 });
 CAccordionItem.propTypes = {
     children: PropTypes.node,
@@ -1447,7 +1450,7 @@ var classNamesShape = process.env.NODE_ENV !== 'production' ? PropTypes.oneOfTyp
   exitActive: PropTypes.string
 })]) : null;
 
-var TransitionGroupContext = React__default.createContext(null);
+var TransitionGroupContext = React.createContext(null);
 
 var forceReflow = function forceReflow(node) {
   return node.scrollTop;
@@ -1673,7 +1676,7 @@ var Transition = /*#__PURE__*/function (_React$Component) {
 
       if (nextStatus === ENTERING) {
         if (this.props.unmountOnExit || this.props.mountOnEnter) {
-          var node = this.props.nodeRef ? this.props.nodeRef.current : ReactDOM__default.findDOMNode(this); // https://github.com/reactjs/react-transition-group/pull/749
+          var node = this.props.nodeRef ? this.props.nodeRef.current : ReactDOM.findDOMNode(this); // https://github.com/reactjs/react-transition-group/pull/749
           // With unmountOnExit or mountOnEnter, the enter animation should happen at the transition between `exited` and `entering`.
           // To make the animation happen,  we have to separate each rendering and avoid being processed as batched.
 
@@ -1697,7 +1700,7 @@ var Transition = /*#__PURE__*/function (_React$Component) {
     var enter = this.props.enter;
     var appearing = this.context ? this.context.isMounting : mounting;
 
-    var _ref2 = this.props.nodeRef ? [appearing] : [ReactDOM__default.findDOMNode(this), appearing],
+    var _ref2 = this.props.nodeRef ? [appearing] : [ReactDOM.findDOMNode(this), appearing],
         maybeNode = _ref2[0],
         maybeAppearing = _ref2[1];
 
@@ -1735,7 +1738,7 @@ var Transition = /*#__PURE__*/function (_React$Component) {
 
     var exit = this.props.exit;
     var timeouts = this.getTimeouts();
-    var maybeNode = this.props.nodeRef ? undefined : ReactDOM__default.findDOMNode(this); // no exit animation skip right to EXITED
+    var maybeNode = this.props.nodeRef ? undefined : ReactDOM.findDOMNode(this); // no exit animation skip right to EXITED
 
     if (!exit || config.disabled) {
       this.safeSetState({
@@ -1799,7 +1802,7 @@ var Transition = /*#__PURE__*/function (_React$Component) {
 
   _proto.onTransitionEnd = function onTransitionEnd(timeout, handler) {
     this.setNextCallback(handler);
-    var node = this.props.nodeRef ? this.props.nodeRef.current : ReactDOM__default.findDOMNode(this);
+    var node = this.props.nodeRef ? this.props.nodeRef.current : ReactDOM.findDOMNode(this);
     var doesNotHaveTimeoutOrListener = timeout == null && !this.props.addEndListener;
 
     if (!node || doesNotHaveTimeoutOrListener) {
@@ -1849,14 +1852,14 @@ var Transition = /*#__PURE__*/function (_React$Component) {
     return (
       /*#__PURE__*/
       // allows for nested Transitions
-      React__default.createElement(TransitionGroupContext.Provider, {
+      React.createElement(TransitionGroupContext.Provider, {
         value: null
-      }, typeof children === 'function' ? children(status, childProps) : React__default.cloneElement(React__default.Children.only(children), childProps))
+      }, typeof children === 'function' ? children(status, childProps) : React.cloneElement(React.Children.only(children), childProps))
     );
   };
 
   return Transition;
-}(React__default.Component);
+}(React.Component);
 
 Transition.contextType = TransitionGroupContext;
 Transition.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -2324,7 +2327,7 @@ var CSSTransition = /*#__PURE__*/function (_React$Component) {
         _this$props.classNames;
         var props = _objectWithoutPropertiesLoose(_this$props, ["classNames"]);
 
-    return /*#__PURE__*/React__default.createElement(Transition$1, _extends({}, props, {
+    return /*#__PURE__*/React.createElement(Transition$1, _extends({}, props, {
       onEnter: this.onEnter,
       onEntered: this.onEntered,
       onEntering: this.onEntering,
@@ -2335,7 +2338,7 @@ var CSSTransition = /*#__PURE__*/function (_React$Component) {
   };
 
   return CSSTransition;
-}(React__default.Component);
+}(React.Component);
 
 CSSTransition.defaultProps = {
   classNames: ''
@@ -2472,11 +2475,16 @@ CSSTransition.propTypes = process.env.NODE_ENV !== "production" ? _extends({}, T
 }) : {};
 var CSSTransition$1 = CSSTransition;
 
-var getStoredTheme = function (localStorageItemName) { return localStorage.getItem(localStorageItemName); };
+var getStoredTheme = function (localStorageItemName) {
+    return typeof window !== 'undefined' && localStorage.getItem(localStorageItemName);
+};
 var setStoredTheme = function (localStorageItemName, colorMode) {
     return localStorage.setItem(localStorageItemName, colorMode);
 };
 var getPreferredColorScheme = function (localStorageItemName) {
+    if (typeof window === 'undefined') {
+        return 'light';
+    }
     var storedTheme = getStoredTheme(localStorageItemName);
     if (storedTheme) {
         return storedTheme;
@@ -2495,20 +2503,23 @@ var useColorModes = function (localStorageItemName) {
     if (localStorageItemName === void 0) { localStorageItemName = 'coreui-react-color-scheme'; }
     var _a = useState(getPreferredColorScheme(localStorageItemName)), colorMode = _a[0], setColorMode = _a[1];
     useEffect(function () {
-        setStoredTheme(localStorageItemName, colorMode);
-        setTheme(colorMode);
+        if (colorMode) {
+            setStoredTheme(localStorageItemName, colorMode);
+            setTheme(colorMode);
+        }
     }, [colorMode]);
     useEffect(function () {
         window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function () {
             var storedTheme = getStoredTheme(localStorageItemName);
-            if (storedTheme !== 'light' && storedTheme !== 'dark') {
+            if (storedTheme !== 'light' && storedTheme !== 'dark' && colorMode) {
                 setTheme(colorMode);
             }
         });
-    }, []);
+    });
     return {
-        getColorMode: function () { return colorMode; },
-        setColorMode: function (mode) { return setColorMode(mode); },
+        colorMode: colorMode,
+        isColorModeSet: function () { return Boolean(getStoredTheme(localStorageItemName)); },
+        setColorMode: setColorMode,
     };
 };
 
@@ -2555,984 +2566,139 @@ function isFunction(value) {
     return !!(value && {}.toString.call(value) == '[object Function]');
 }
 
-var CCollapse = forwardRef(function (_a, ref) {
-    var children = _a.children, className = _a.className, horizontal = _a.horizontal, onHide = _a.onHide, onShow = _a.onShow, visible = _a.visible, rest = __rest(_a, ["children", "className", "horizontal", "onHide", "onShow", "visible"]);
-    var collapseRef = useRef(null);
-    var forkedRef = useForkedRef(ref, collapseRef);
-    var _b = useState(), height = _b[0], setHeight = _b[1];
-    var _c = useState(), width = _c[0], setWidth = _c[1];
-    var onEntering = function () {
-        onShow && onShow();
-        if (horizontal) {
-            collapseRef.current && setWidth(collapseRef.current.scrollWidth);
-            return;
-        }
-        collapseRef.current && setHeight(collapseRef.current.scrollHeight);
-    };
-    var onEntered = function () {
-        if (horizontal) {
-            setWidth(0);
-            return;
-        }
-        setHeight(0);
-    };
-    var onExit = function () {
-        if (horizontal) {
-            collapseRef.current && setWidth(collapseRef.current.scrollWidth);
-            return;
-        }
-        collapseRef.current && setHeight(collapseRef.current.scrollHeight);
-    };
-    var onExiting = function () {
-        onHide && onHide();
-        if (horizontal) {
-            setWidth(0);
-            return;
-        }
-        setHeight(0);
-    };
-    var onExited = function () {
-        if (horizontal) {
-            setWidth(0);
-            return;
-        }
-        setHeight(0);
-    };
-    return (React__default.createElement(CSSTransition$1, { in: visible, nodeRef: collapseRef, onEntering: onEntering, onEntered: onEntered, onExit: onExit, onExiting: onExiting, onExited: onExited, timeout: 350 }, function (state) {
-        var currentHeight = height === 0 ? null : { height: height };
-        var currentWidth = width === 0 ? null : { width: width };
-        return (React__default.createElement("div", __assign({ className: classNames(className, {
-                'collapse-horizontal': horizontal,
-                collapsing: state === 'entering' || state === 'exiting',
-                'collapse show': state === 'entered',
-                collapse: state === 'exited',
-            }), style: __assign(__assign({}, currentHeight), currentWidth) }, rest, { ref: forkedRef }), children));
-    }));
-});
-CCollapse.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    horizontal: PropTypes.bool,
-    onHide: PropTypes.func,
-    onShow: PropTypes.func,
-    visible: PropTypes.bool,
-};
-CCollapse.displayName = 'CCollapse';
-
-var CAccordionBody = forwardRef(function (_a, ref) {
-    var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
-    var visible = useContext(CAccordionItemContext).visible;
-    return (React__default.createElement(CCollapse, { className: "accordion-collapse", visible: visible },
-        React__default.createElement("div", __assign({ className: classNames('accordion-body', className) }, rest, { ref: ref }), children)));
-});
-CAccordionBody.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-};
-CAccordionBody.displayName = 'CAccordionBody';
+var top = 'top';
+var bottom = 'bottom';
+var right = 'right';
+var left = 'left';
+var auto = 'auto';
+var basePlacements = [top, bottom, right, left];
+var start = 'start';
+var end = 'end';
+var clippingParents = 'clippingParents';
+var viewport = 'viewport';
+var popper = 'popper';
+var reference = 'reference';
+var variationPlacements = /*#__PURE__*/basePlacements.reduce(function (acc, placement) {
+  return acc.concat([placement + "-" + start, placement + "-" + end]);
+}, []);
+var placements = /*#__PURE__*/[].concat(basePlacements, [auto]).reduce(function (acc, placement) {
+  return acc.concat([placement, placement + "-" + start, placement + "-" + end]);
+}, []); // modifiers that need to read the DOM
 
-var CAccordionButton = forwardRef(function (_a, ref) {
-    var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
-    var _b = useContext(CAccordionItemContext), visible = _b.visible, setVisible = _b.setVisible;
-    return (React__default.createElement("button", __assign({ type: "button", className: classNames('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,
-};
-CAccordionButton.displayName = 'CAccordionButton';
+var beforeRead = 'beforeRead';
+var read = 'read';
+var afterRead = 'afterRead'; // pure-logic modifiers
 
-var CAccordionHeader = forwardRef(function (_a, ref) {
-    var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
-    return (React__default.createElement("div", __assign({ className: classNames('accordion-header', className) }, rest, { ref: ref }),
-        React__default.createElement(CAccordionButton, null, children)));
-});
-CAccordionHeader.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-};
-CAccordionHeader.displayName = 'CAccordionHeader';
+var beforeMain = 'beforeMain';
+var main = 'main';
+var afterMain = 'afterMain'; // modifier with the purpose to write to the DOM (or write into a framework state)
 
-var CCloseButton = forwardRef(function (_a, ref) {
-    var className = _a.className, disabled = _a.disabled, white = _a.white, rest = __rest(_a, ["className", "disabled", "white"]);
-    return (React__default.createElement("button", __assign({ type: "button", className: classNames('btn', 'btn-close', {
-            'btn-close-white': white,
-        }, disabled, className), "aria-label": "Close", disabled: disabled }, rest, { ref: ref })));
-});
-CCloseButton.propTypes = {
-    className: PropTypes.string,
-    disabled: PropTypes.bool,
-    white: PropTypes.bool,
-};
-CCloseButton.displayName = 'CCloseButton';
+var beforeWrite = 'beforeWrite';
+var write = 'write';
+var afterWrite = 'afterWrite';
+var modifierPhases = [beforeRead, read, afterRead, beforeMain, main, afterMain, beforeWrite, write, afterWrite];
 
-var colorPropType = PropTypes.oneOfType([
-    PropTypes.oneOf([
-        'primary',
-        'secondary',
-        'success',
-        'danger',
-        'warning',
-        'info',
-        'dark',
-        'light',
-    ]),
-    PropTypes.string,
-]);
-var placementPropType = PropTypes.oneOf([
-    'auto',
-    'auto-start',
-    'auto-end',
-    'top-end',
-    'top',
-    'top-start',
-    'bottom-end',
-    'bottom',
-    'bottom-start',
-    'right-start',
-    'right',
-    'right-end',
-    'left-start',
-    'left',
-    'left-end',
-]);
-var shapePropType = PropTypes.oneOfType([
-    PropTypes.oneOf([
-        'rounded',
-        'rounded-top',
-        'rounded-end',
-        'rounded-bottom',
-        'rounded-start',
-        'rounded-circle',
-        'rounded-pill',
-        'rounded-0',
-        'rounded-1',
-        'rounded-2',
-        'rounded-3',
-    ]),
-    PropTypes.string,
-]);
-var textColorsPropType = PropTypes.oneOfType([
-    colorPropType,
-    PropTypes.oneOf(['white', 'muted']),
-    PropTypes.string,
-]);
-var triggerPropType = PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.oneOf(['hover', 'focus', 'click']).isRequired),
-    PropTypes.oneOf(['hover', 'focus', 'click']),
-]);
+function getNodeName(element) {
+  return element ? (element.nodeName || '').toLowerCase() : null;
+}
 
-var CAlert = forwardRef(function (_a, ref) {
-    var children = _a.children, className = _a.className, _b = _a.color, color = _b === void 0 ? 'primary' : _b, dismissible = _a.dismissible, variant = _a.variant, _c = _a.visible, visible = _c === void 0 ? true : _c, onClose = _a.onClose, rest = __rest(_a, ["children", "className", "color", "dismissible", "variant", "visible", "onClose"]);
-    var alertRef = useRef(null);
-    var forkedRef = useForkedRef(ref, alertRef);
-    var _d = useState(visible), _visible = _d[0], setVisible = _d[1];
-    useEffect(function () {
-        setVisible(visible);
-    }, [visible]);
-    return (React__default.createElement(Transition$1, { in: _visible, mountOnEnter: true, nodeRef: alertRef, onExit: onClose, timeout: 150, unmountOnExit: true }, function (state) { return (React__default.createElement("div", __assign({ className: classNames('alert', variant === 'solid' ? "bg-".concat(color, " text-white") : "alert-".concat(color), {
-            'alert-dismissible fade': dismissible,
-            show: state === 'entered',
-        }, className), role: "alert" }, rest, { ref: forkedRef }),
-        children,
-        dismissible && React__default.createElement(CCloseButton, { onClick: function () { return setVisible(false); } }))); }));
-});
-CAlert.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    color: colorPropType.isRequired,
-    dismissible: PropTypes.bool,
-    onClose: PropTypes.func,
-    variant: PropTypes.string,
-    visible: PropTypes.bool,
-};
-CAlert.displayName = 'CAlert';
+function getWindow(node) {
+  if (node == null) {
+    return window;
+  }
 
-var CAlertHeading = forwardRef(function (_a, ref) {
-    var children = _a.children, className = _a.className, _b = _a.component, Component = _b === void 0 ? 'h4' : _b, rest = __rest(_a, ["children", "className", "component"]);
-    return (React__default.createElement(Component, __assign({ className: classNames('alert-heading', className) }, rest, { ref: ref }), children));
-});
-CAlertHeading.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    component: PropTypes.elementType,
-};
-CAlertHeading.displayName = 'CAlertHeading';
+  if (node.toString() !== '[object Window]') {
+    var ownerDocument = node.ownerDocument;
+    return ownerDocument ? ownerDocument.defaultView || window : window;
+  }
 
-var CLink = forwardRef(function (_a, ref) {
-    var children = _a.children, active = _a.active, className = _a.className, _b = _a.component, Component = _b === void 0 ? 'a' : _b, disabled = _a.disabled, rest = __rest(_a, ["children", "active", "className", "component", "disabled"]);
-    return (React__default.createElement(Component
-    // TODO: remove duplicated classes ex. `active active` in `<CListGroupItem>`
-    , __assign({ 
-        // TODO: remove duplicated classes ex. `active active` in `<CListGroupItem>`
-        className: classNames(className, { active: active, disabled: disabled }) }, (active && { 'aria-current': 'page' }), (Component === 'a' && disabled && { 'aria-disabled': true, tabIndex: -1 }), ((Component === 'a' || Component === 'button') && {
-        onClick: function (event) {
-            event.preventDefault;
-            !disabled && rest.onClick && rest.onClick(event);
-        },
-    }), { disabled: disabled }, rest, { ref: ref }), children));
-});
-CLink.propTypes = {
-    active: PropTypes.bool,
-    children: PropTypes.node,
-    className: PropTypes.string,
-    component: PropTypes.elementType,
-    disabled: PropTypes.bool,
-};
-CLink.displayName = 'CLink';
+  return node;
+}
 
-var CAlertLink = forwardRef(function (_a, ref) {
-    var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
-    return (React__default.createElement(CLink, __assign({ className: classNames('alert-link', className) }, rest, { ref: ref }), children));
-});
-CAlertLink.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-};
-CAlertLink.displayName = 'CAlertLink';
-
-var CAvatar = forwardRef(function (_a, ref) {
-    var _b;
-    var children = _a.children, className = _a.className, color = _a.color, shape = _a.shape, size = _a.size, src = _a.src, status = _a.status, textColor = _a.textColor, rest = __rest(_a, ["children", "className", "color", "shape", "size", "src", "status", "textColor"]);
-    var statusClassName = status && classNames('avatar-status', "bg-".concat(status));
-    return (React__default.createElement("div", __assign({ className: classNames('avatar', (_b = {},
-            _b["bg-".concat(color)] = color,
-            _b["avatar-".concat(size)] = size,
-            _b["text-".concat(textColor)] = textColor,
-            _b), shape, className) }, rest, { ref: ref }),
-        src ? React__default.createElement("img", { src: src, className: "avatar-img" }) : children,
-        status && React__default.createElement("span", { className: statusClassName })));
-});
-CAvatar.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    color: colorPropType,
-    shape: shapePropType,
-    size: PropTypes.string,
-    src: PropTypes.string,
-    status: PropTypes.string,
-    textColor: textColorsPropType,
-};
-CAvatar.displayName = 'CAvatar';
+function isElement(node) {
+  var OwnElement = getWindow(node).Element;
+  return node instanceof OwnElement || node instanceof Element;
+}
 
-var CBackdrop = forwardRef(function (_a, ref) {
-    var _b = _a.className, className = _b === void 0 ? 'modal-backdrop' : _b, visible = _a.visible, rest = __rest(_a, ["className", "visible"]);
-    var backdropRef = useRef(null);
-    var forkedRef = useForkedRef(ref, backdropRef);
-    return (React__default.createElement(Transition$1, { in: visible, mountOnEnter: true, nodeRef: backdropRef, timeout: 150, unmountOnExit: true }, function (state) { return (React__default.createElement("div", __assign({ className: classNames(className, 'fade', {
-            show: state === 'entered',
-        }) }, rest, { ref: forkedRef }))); }));
-});
-CBackdrop.propTypes = {
-    className: PropTypes.string,
-    visible: PropTypes.bool,
-};
-CBackdrop.displayName = 'CBackdrop';
+function isHTMLElement(node) {
+  var OwnElement = getWindow(node).HTMLElement;
+  return node instanceof OwnElement || node instanceof HTMLElement;
+}
 
-var CBadge = forwardRef(function (_a, ref) {
-    var _b;
-    var children = _a.children, className = _a.className, color = _a.color, _c = _a.component, Component = _c === void 0 ? 'span' : _c, position = _a.position, shape = _a.shape, size = _a.size, textColor = _a.textColor, rest = __rest(_a, ["children", "className", "color", "component", "position", "shape", "size", "textColor"]);
-    return (React__default.createElement(Component, __assign({ className: classNames('badge', (_b = {},
-            _b["bg-".concat(color)] = color,
-            _b['position-absolute translate-middle'] = position,
-            _b['top-0'] = position === null || position === void 0 ? void 0 : position.includes('top'),
-            _b['top-100'] = position === null || position === void 0 ? void 0 : position.includes('bottom'),
-            _b['start-100'] = position === null || position === void 0 ? void 0 : position.includes('end'),
-            _b['start-0'] = position === null || position === void 0 ? void 0 : position.includes('start'),
-            _b["badge-".concat(size)] = size,
-            _b["text-".concat(textColor)] = textColor,
-            _b), shape, className) }, rest, { ref: ref }), children));
-});
-CBadge.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    color: colorPropType,
-    component: PropTypes.string,
-    position: PropTypes.oneOf(['top-start', 'top-end', 'bottom-end', 'bottom-start']),
-    shape: shapePropType,
-    size: PropTypes.oneOf(['sm']),
-    textColor: textColorsPropType,
-};
-CBadge.displayName = 'CBadge';
+function isShadowRoot(node) {
+  // IE 11 has no ShadowRoot
+  if (typeof ShadowRoot === 'undefined') {
+    return false;
+  }
 
-var CBreadcrumb = forwardRef(function (_a, ref) {
-    var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
-    return (React__default.createElement("nav", { "aria-label": "breadcrumb" },
-        React__default.createElement("ol", __assign({ className: classNames('breadcrumb', className) }, rest, { ref: ref }), children)));
-});
-CBreadcrumb.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-};
-CBreadcrumb.displayName = 'CBreadcrumb';
+  var OwnElement = getWindow(node).ShadowRoot;
+  return node instanceof OwnElement || node instanceof ShadowRoot;
+}
 
-var CBreadcrumbItem = forwardRef(function (_a, ref) {
-    var children = _a.children, active = _a.active, className = _a.className, href = _a.href, rest = __rest(_a, ["children", "active", "className", "href"]);
-    return (React__default.createElement("li", __assign({ className: classNames('breadcrumb-item', {
-            active: active,
-        }, className) }, (active && { 'aria-current': 'page' }), rest, { ref: ref }), href ? React__default.createElement(CLink, { href: href }, children) : children));
-});
-CBreadcrumbItem.propTypes = {
-    active: PropTypes.bool,
-    children: PropTypes.node,
-    className: PropTypes.string,
-    href: PropTypes.string,
-};
-CBreadcrumbItem.displayName = 'CBreadcrumbItem';
+// and applies them to the HTMLElements such as popper and arrow
 
-var CButton = 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(_a, ["children", "className", "color", "component", "shape", "size", "type", "variant"]);
-    return (React__default.createElement(CLink, __assign({ component: rest.href ? 'a' : component, type: type, className: classNames('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,
-    color: colorPropType,
-    component: PropTypes.elementType,
-    shape: PropTypes.string,
-    size: PropTypes.oneOf(['sm', 'lg']),
-    type: PropTypes.oneOf(['button', 'submit', 'reset']),
-    variant: PropTypes.oneOf(['outline', 'ghost']),
-};
-CButton.displayName = 'CButton';
+function applyStyles(_ref) {
+  var state = _ref.state;
+  Object.keys(state.elements).forEach(function (name) {
+    var style = state.styles[name] || {};
+    var attributes = state.attributes[name] || {};
+    var element = state.elements[name]; // arrow is optional + virtual elements
 
-var CButtonToolbar = forwardRef(function (_a, ref) {
-    var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
-    return (React__default.createElement("div", __assign({ className: classNames('btn-toolbar', className) }, rest, { ref: ref }), children));
-});
-CButtonToolbar.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-};
-CButtonToolbar.displayName = 'CButtonToolbar';
+    if (!isHTMLElement(element) || !getNodeName(element)) {
+      return;
+    } // Flow doesn't support to extend this property, but it's the most
+    // effective way to apply styles to an HTMLElement
+    // $FlowFixMe[cannot-write]
 
-var CButtonGroup = forwardRef(function (_a, ref) {
-    var _b;
-    var children = _a.children, className = _a.className, size = _a.size, vertical = _a.vertical, rest = __rest(_a, ["children", "className", "size", "vertical"]);
-    return (React__default.createElement("div", __assign({ className: classNames(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,
-};
-CButtonGroup.displayName = 'CButtonGroup';
 
-var CCallout = forwardRef(function (_a, ref) {
-    var _b;
-    var children = _a.children, className = _a.className, color = _a.color, rest = __rest(_a, ["children", "className", "color"]);
-    return (React__default.createElement("div", __assign({ className: classNames('callout', (_b = {},
-            _b["callout-".concat(color)] = color,
-            _b), className) }, rest, { ref: ref }), children));
-});
-CCallout.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    color: colorPropType,
-};
-CCallout.displayName = 'CCallout';
+    Object.assign(element.style, style);
+    Object.keys(attributes).forEach(function (name) {
+      var value = attributes[name];
 
-var CCard = forwardRef(function (_a, ref) {
-    var _b;
-    var children = _a.children, className = _a.className, color = _a.color, textColor = _a.textColor, rest = __rest(_a, ["children", "className", "color", "textColor"]);
-    return (React__default.createElement("div", __assign({ className: classNames('card', (_b = {},
-            _b["bg-".concat(color)] = color,
-            _b["text-".concat(textColor)] = textColor,
-            _b), className) }, rest, { ref: ref }), children));
-});
-CCard.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    color: colorPropType,
-    textColor: PropTypes.string,
-};
-CCard.displayName = 'CCard';
+      if (value === false) {
+        element.removeAttribute(name);
+      } else {
+        element.setAttribute(name, value === true ? '' : value);
+      }
+    });
+  });
+}
 
-var CCardBody = forwardRef(function (_a, ref) {
-    var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
-    return (React__default.createElement("div", __assign({ className: classNames('card-body', className) }, rest, { ref: ref }), children));
-});
-CCardBody.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-};
-CCardBody.displayName = 'CCardBody';
+function effect$2(_ref2) {
+  var state = _ref2.state;
+  var initialStyles = {
+    popper: {
+      position: state.options.strategy,
+      left: '0',
+      top: '0',
+      margin: '0'
+    },
+    arrow: {
+      position: 'absolute'
+    },
+    reference: {}
+  };
+  Object.assign(state.elements.popper.style, initialStyles.popper);
+  state.styles = initialStyles;
 
-var CCardFooter = forwardRef(function (_a, ref) {
-    var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
-    return (React__default.createElement("div", __assign({ className: classNames('card-footer', className) }, rest, { ref: ref }), children));
-});
-CCardFooter.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-};
-CCardFooter.displayName = 'CCardFooter';
+  if (state.elements.arrow) {
+    Object.assign(state.elements.arrow.style, initialStyles.arrow);
+  }
 
-var CCardGroup = forwardRef(function (_a, ref) {
-    var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
-    return (React__default.createElement("div", __assign({ className: classNames('card-group', className) }, rest, { ref: ref }), children));
-});
-CCardGroup.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-};
-CCardGroup.displayName = 'CCardGroup';
+  return function () {
+    Object.keys(state.elements).forEach(function (name) {
+      var element = state.elements[name];
+      var attributes = state.attributes[name] || {};
+      var styleProperties = Object.keys(state.styles.hasOwnProperty(name) ? state.styles[name] : initialStyles[name]); // Set all values to an empty string to unset them
 
-var CCardHeader = forwardRef(function (_a, ref) {
-    var children = _a.children, _b = _a.component, Component = _b === void 0 ? 'div' : _b, className = _a.className, rest = __rest(_a, ["children", "component", "className"]);
-    return (React__default.createElement(Component, __assign({ className: classNames('card-header', className) }, rest, { ref: ref }), children));
-});
-CCardHeader.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    component: PropTypes.elementType,
-};
-CCardHeader.displayName = 'CCardHeader';
+      var style = styleProperties.reduce(function (style, property) {
+        style[property] = '';
+        return style;
+      }, {}); // arrow is optional + virtual elements
 
-var CCardImage = forwardRef(function (_a, ref) {
-    var children = _a.children, className = _a.className, _b = _a.component, Component = _b === void 0 ? 'img' : _b, orientation = _a.orientation, rest = __rest(_a, ["children", "className", "component", "orientation"]);
-    return (React__default.createElement(Component, __assign({ className: classNames(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']),
-};
-CCardImage.displayName = 'CCardImage';
-
-var CCardImageOverlay = forwardRef(function (_a, ref) {
-    var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
-    return (React__default.createElement("div", __assign({ className: classNames('card-img-overlay', className) }, rest, { ref: ref }), children));
-});
-CCardImageOverlay.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-};
-CCardImageOverlay.displayName = 'CCardImageOverlay';
-
-var CCardLink = forwardRef(function (_a, ref) {
-    var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
-    return (React__default.createElement(CLink, __assign({ className: classNames('card-link', className) }, rest, { ref: ref }), children));
-});
-CCardLink.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-};
-CCardLink.displayName = 'CCardLink';
-
-var CCardSubtitle = forwardRef(function (_a, ref) {
-    var children = _a.children, _b = _a.component, Component = _b === void 0 ? 'h6' : _b, className = _a.className, rest = __rest(_a, ["children", "component", "className"]);
-    return (React__default.createElement(Component, __assign({ className: classNames('card-subtitle', className) }, rest, { ref: ref }), children));
-});
-CCardSubtitle.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    component: PropTypes.elementType,
-};
-CCardSubtitle.displayName = 'CCardSubtitle';
-
-var CCardText = forwardRef(function (_a, ref) {
-    var children = _a.children, _b = _a.component, Component = _b === void 0 ? 'p' : _b, className = _a.className, rest = __rest(_a, ["children", "component", "className"]);
-    return (React__default.createElement(Component, __assign({ className: classNames('card-text', className) }, rest, { ref: ref }), children));
-});
-CCardText.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    component: PropTypes.elementType,
-};
-CCardText.displayName = 'CCardText';
-
-var CCardTitle = forwardRef(function (_a, ref) {
-    var children = _a.children, _b = _a.component, Component = _b === void 0 ? 'h5' : _b, className = _a.className, rest = __rest(_a, ["children", "component", "className"]);
-    return (React__default.createElement(Component, __assign({ className: classNames('card-title', className) }, rest, { ref: ref }), children));
-});
-CCardTitle.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    component: PropTypes.elementType,
-};
-CCardTitle.displayName = 'CCardTitle';
-
-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 isRTL = function (element) {
-    if (typeof document !== 'undefined' && document.documentElement.dir === 'rtl') {
-        return true;
-    }
-    if (element) {
-        return element.closest('[dir="rtl"]') !== null;
-    }
-    return false;
-};
-
-var CCarouselContext = createContext({});
-var CCarousel = 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(_a, ["children", "activeIndex", "className", "controls", "dark", "indicators", "interval", "onSlid", "onSlide", "pause", "touch", "transition", "wrap"]);
-    var carouselRef = useRef(null);
-    var forkedRef = useForkedRef(ref, carouselRef);
-    var data = useRef({}).current;
-    var _g = useState(activeIndex), active = _g[0], setActive = _g[1];
-    var _h = useState(false), animating = _h[0], setAnimating = _h[1];
-    var _j = useState(), customInterval = _j[0], setCustomInterval = _j[1];
-    var _k = useState('next'), direction = _k[0], setDirection = _k[1];
-    var _l = useState(0), itemsNumber = _l[0], setItemsNumber = _l[1];
-    var _m = useState(null), touchPosition = _m[0], setTouchPosition = _m[1];
-    var _o = useState(), visible = _o[0], setVisible = _o[1];
-    useEffect(function () {
-        setItemsNumber(Children.toArray(children).length);
-    });
-    useEffect(function () {
-        visible && cycle();
-    }, [visible]);
-    useEffect(function () {
-        !animating && cycle();
-        !animating && onSlid && onSlid(active, direction);
-        animating && onSlide && onSlide(active, direction);
-    }, [animating]);
-    useEffect(function () {
-        window.addEventListener('scroll', handleScroll);
-        return function () {
-            window.removeEventListener('scroll', handleScroll);
-        };
-    });
-    var cycle = function () {
-        _pause();
-        if (!wrap && active === itemsNumber - 1) {
-            return;
-        }
-        if (typeof interval === 'number') {
-            data.timeout = setTimeout(function () { return nextItemWhenVisible(); }, typeof customInterval === 'number' ? customInterval : interval);
-        }
-    };
-    var _pause = function () { return pause && data.timeout && clearTimeout(data.timeout); };
-    var nextItemWhenVisible = function () {
-        // Don't call next when the page isn't visible
-        // or the carousel or its parent isn't visible
-        if (!document.hidden && carouselRef.current && isInViewport(carouselRef.current)) {
-            if (animating) {
-                return;
-            }
-            handleControlClick('next');
-        }
-    };
-    var handleControlClick = function (direction) {
-        if (animating) {
-            return;
-        }
-        setDirection(direction);
-        if (direction === 'next') {
-            active === itemsNumber - 1 ? setActive(0) : setActive(active + 1);
-        }
-        else {
-            active === 0 ? setActive(itemsNumber - 1) : setActive(active - 1);
-        }
-    };
-    var handleIndicatorClick = function (index) {
-        if (active === index) {
-            return;
-        }
-        if (active < index) {
-            setDirection('next');
-            setActive(index);
-            return;
-        }
-        if (active > index) {
-            setDirection('prev');
-            setActive(index);
-        }
-    };
-    var handleScroll = function () {
-        if (!document.hidden && carouselRef.current && isInViewport(carouselRef.current)) {
-            setVisible(true);
-        }
-        else {
-            setVisible(false);
-        }
-    };
-    var handleTouchMove = function (e) {
-        var touchDown = touchPosition;
-        if (touchDown === null) {
-            return;
-        }
-        var currentTouch = e.touches[0].clientX;
-        var diff = touchDown - currentTouch;
-        if (diff > 5) {
-            handleControlClick('next');
-        }
-        if (diff < -5) {
-            handleControlClick('prev');
-        }
-        setTouchPosition(null);
-    };
-    var handleTouchStart = function (e) {
-        var touchDown = e.touches[0].clientX;
-        setTouchPosition(touchDown);
-    };
-    return (React__default.createElement("div", __assign({ className: classNames('carousel slide', {
-            'carousel-dark': dark,
-            'carousel-fade': transition === 'crossfade',
-        }, className), onMouseEnter: _pause, onMouseLeave: cycle }, (touch && { onTouchStart: handleTouchStart, onTouchMove: handleTouchMove }), rest, { ref: forkedRef }),
-        React__default.createElement(CCarouselContext.Provider, { value: {
-                setAnimating: setAnimating,
-                setCustomInterval: setCustomInterval,
-            } },
-            indicators && (React__default.createElement("ol", { className: "carousel-indicators" }, Array.from({ length: itemsNumber }, function (_, i) { return i; }).map(function (index) {
-                return (React__default.createElement("li", { key: "indicator".concat(index), onClick: function () {
-                        !animating && handleIndicatorClick(index);
-                    }, className: active === index ? 'active' : '', "data-coreui-target": "" }));
-            }))),
-            React__default.createElement("div", { className: "carousel-inner" }, Children.map(children, function (child, index) {
-                if (React__default.isValidElement(child)) {
-                    return React__default.cloneElement(child, {
-                        active: active === index ? true : false,
-                        direction: direction,
-                        key: index,
-                    });
-                }
-                return;
-            })),
-            controls && (React__default.createElement(React__default.Fragment, null,
-                React__default.createElement("button", { className: "carousel-control-prev", onClick: function () { return handleControlClick('prev'); } },
-                    React__default.createElement("span", { className: "carousel-control-prev-icon", "aria-label": "prev" })),
-                React__default.createElement("button", { className: "carousel-control-next", onClick: function () { return handleControlClick('next'); } },
-                    React__default.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,
-};
-CCarousel.displayName = 'CCarousel';
-
-var CCarouselCaption = forwardRef(function (_a, ref) {
-    var className = _a.className, rest = __rest(_a, ["className"]);
-    return React__default.createElement("div", __assign({ className: classNames('carousel-caption', className) }, rest, { ref: ref }));
-});
-CCarouselCaption.propTypes = {
-    className: PropTypes.string,
-};
-CCarouselCaption.displayName = 'CCarouselCaption';
-
-var CCarouselItem = forwardRef(function (_a, ref) {
-    var children = _a.children, className = _a.className, active = _a.active, direction = _a.direction, _b = _a.interval, interval = _b === void 0 ? false : _b, rest = __rest(_a, ["children", "className", "active", "direction", "interval"]);
-    var _c = useContext(CCarouselContext), setAnimating = _c.setAnimating, setCustomInterval = _c.setCustomInterval;
-    var carouselItemRef = useRef(null);
-    var forkedRef = useForkedRef(ref, carouselItemRef);
-    var prevActive = useRef();
-    var _d = useState(), directionClassName = _d[0], setDirectionClassName = _d[1];
-    var _e = useState(), orderClassName = _e[0], setOrderClassName = _e[1];
-    var _f = useState(active && 'active'), activeClassName = _f[0], setActiveClassName = _f[1];
-    var _g = useState(0), count = _g[0], setCount = _g[1];
-    useEffect(function () {
-        if (active) {
-            setCustomInterval(interval);
-            if (count !== 0)
-                setOrderClassName("carousel-item-".concat(direction));
-        }
-        if (prevActive.current && !active) {
-            setActiveClassName('active');
-        }
-        if (active || prevActive.current) {
-            setTimeout(function () {
-                var _a;
-                if (count !== 0) {
-                    // @ts-expect-error reflow is necessary to proper transition
-                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                    (_a = carouselItemRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight;
-                    setDirectionClassName("carousel-item-".concat(direction === 'next' ? 'start' : 'end'));
-                }
-            }, 0);
-        }
-        prevActive.current = active;
-        if (count === 0)
-            setCount(count + 1);
-    }, [active]);
-    useEffect(function () {
-        var _a, _b;
-        (_a = carouselItemRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('transitionstart', function () {
-            active && setAnimating(true);
-        });
-        (_b = carouselItemRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener('transitionend', function () {
-            active && setAnimating(false);
-            setDirectionClassName('');
-            setOrderClassName('');
-            if (active) {
-                setActiveClassName('active');
-            }
-            if (!active) {
-                setActiveClassName('');
-            }
-        });
-        return function () {
-            var _a, _b;
-            (_a = carouselItemRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('transitionstart', function () {
-                active && setAnimating(true);
-            });
-            (_b = carouselItemRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('transitionend', function () {
-                active && setAnimating(false);
-                setDirectionClassName('');
-                setOrderClassName('');
-                if (active) {
-                    setActiveClassName('active');
-                }
-                if (!active) {
-                    setActiveClassName('');
-                }
-            });
-        };
-    });
-    return (React__default.createElement("div", __assign({ className: classNames('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]),
-};
-CCarouselItem.displayName = 'CCarouselItem';
-
-var CConditionalPortal = function (_a) {
-    var children = _a.children, portal = _a.portal;
-    return typeof window !== 'undefined' && portal ? (createPortal(children, document.body)) : (React__default.createElement(React__default.Fragment, null, children));
-};
-CConditionalPortal.propTypes = {
-    children: PropTypes.node,
-    portal: PropTypes.bool.isRequired,
-};
-CConditionalPortal.displayName = 'CConditionalPortal';
-
-var ManagerReferenceNodeContext = React.createContext();
-var ManagerReferenceNodeSetterContext = React.createContext();
-function Manager(_ref) {
-  var children = _ref.children;
-
-  var _React$useState = React.useState(null),
-      referenceNode = _React$useState[0],
-      setReferenceNode = _React$useState[1];
-
-  var hasUnmounted = React.useRef(false);
-  React.useEffect(function () {
-    return function () {
-      hasUnmounted.current = true;
-    };
-  }, []);
-  var handleSetReferenceNode = React.useCallback(function (node) {
-    if (!hasUnmounted.current) {
-      setReferenceNode(node);
-    }
-  }, []);
-  return /*#__PURE__*/React.createElement(ManagerReferenceNodeContext.Provider, {
-    value: referenceNode
-  }, /*#__PURE__*/React.createElement(ManagerReferenceNodeSetterContext.Provider, {
-    value: handleSetReferenceNode
-  }, children));
-}
-
-/**
- * Takes an argument and if it's an array, returns the first item in the array,
- * otherwise returns the argument. Used for Preact compatibility.
- */
-var unwrapArray = function unwrapArray(arg) {
-  return Array.isArray(arg) ? arg[0] : arg;
-};
-/**
- * Takes a maybe-undefined function and arbitrary args and invokes the function
- * only if it is defined.
- */
-
-var safeInvoke = function safeInvoke(fn) {
-  if (typeof fn === 'function') {
-    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-      args[_key - 1] = arguments[_key];
-    }
-
-    return fn.apply(void 0, args);
-  }
-};
-/**
- * Sets a ref using either a ref callback or a ref object
- */
-
-var setRef = function setRef(ref, node) {
-  // if its a function call it
-  if (typeof ref === 'function') {
-    return safeInvoke(ref, node);
-  } // otherwise we should treat it as a ref object
-  else if (ref != null) {
-      ref.current = node;
-    }
-};
-/**
- * Simple ponyfill for Object.fromEntries
- */
-
-var fromEntries = function fromEntries(entries) {
-  return entries.reduce(function (acc, _ref) {
-    var key = _ref[0],
-        value = _ref[1];
-    acc[key] = value;
-    return acc;
-  }, {});
-};
-/**
- * Small wrapper around `useLayoutEffect` to get rid of the warning on SSR envs
- */
-
-var useIsomorphicLayoutEffect = typeof window !== 'undefined' && window.document && window.document.createElement ? React.useLayoutEffect : React.useEffect;
-
-var top = 'top';
-var bottom = 'bottom';
-var right = 'right';
-var left = 'left';
-var auto = 'auto';
-var basePlacements = [top, bottom, right, left];
-var start = 'start';
-var end = 'end';
-var clippingParents = 'clippingParents';
-var viewport = 'viewport';
-var popper = 'popper';
-var reference = 'reference';
-var variationPlacements = /*#__PURE__*/basePlacements.reduce(function (acc, placement) {
-  return acc.concat([placement + "-" + start, placement + "-" + end]);
-}, []);
-var placements = /*#__PURE__*/[].concat(basePlacements, [auto]).reduce(function (acc, placement) {
-  return acc.concat([placement, placement + "-" + start, placement + "-" + end]);
-}, []); // modifiers that need to read the DOM
-
-var beforeRead = 'beforeRead';
-var read = 'read';
-var afterRead = 'afterRead'; // pure-logic modifiers
-
-var beforeMain = 'beforeMain';
-var main = 'main';
-var afterMain = 'afterMain'; // modifier with the purpose to write to the DOM (or write into a framework state)
-
-var beforeWrite = 'beforeWrite';
-var write = 'write';
-var afterWrite = 'afterWrite';
-var modifierPhases = [beforeRead, read, afterRead, beforeMain, main, afterMain, beforeWrite, write, afterWrite];
-
-function getNodeName(element) {
-  return element ? (element.nodeName || '').toLowerCase() : null;
-}
-
-function getWindow(node) {
-  if (node == null) {
-    return window;
-  }
-
-  if (node.toString() !== '[object Window]') {
-    var ownerDocument = node.ownerDocument;
-    return ownerDocument ? ownerDocument.defaultView || window : window;
-  }
-
-  return node;
-}
-
-function isElement(node) {
-  var OwnElement = getWindow(node).Element;
-  return node instanceof OwnElement || node instanceof Element;
-}
-
-function isHTMLElement(node) {
-  var OwnElement = getWindow(node).HTMLElement;
-  return node instanceof OwnElement || node instanceof HTMLElement;
-}
-
-function isShadowRoot(node) {
-  // IE 11 has no ShadowRoot
-  if (typeof ShadowRoot === 'undefined') {
-    return false;
-  }
-
-  var OwnElement = getWindow(node).ShadowRoot;
-  return node instanceof OwnElement || node instanceof ShadowRoot;
-}
-
-// and applies them to the HTMLElements such as popper and arrow
-
-function applyStyles(_ref) {
-  var state = _ref.state;
-  Object.keys(state.elements).forEach(function (name) {
-    var style = state.styles[name] || {};
-    var attributes = state.attributes[name] || {};
-    var element = state.elements[name]; // arrow is optional + virtual elements
-
-    if (!isHTMLElement(element) || !getNodeName(element)) {
-      return;
-    } // Flow doesn't support to extend this property, but it's the most
-    // effective way to apply styles to an HTMLElement
-    // $FlowFixMe[cannot-write]
-
-
-    Object.assign(element.style, style);
-    Object.keys(attributes).forEach(function (name) {
-      var value = attributes[name];
-
-      if (value === false) {
-        element.removeAttribute(name);
-      } else {
-        element.setAttribute(name, value === true ? '' : value);
-      }
-    });
-  });
-}
-
-function effect$2(_ref2) {
-  var state = _ref2.state;
-  var initialStyles = {
-    popper: {
-      position: state.options.strategy,
-      left: '0',
-      top: '0',
-      margin: '0'
-    },
-    arrow: {
-      position: 'absolute'
-    },
-    reference: {}
-  };
-  Object.assign(state.elements.popper.style, initialStyles.popper);
-  state.styles = initialStyles;
-
-  if (state.elements.arrow) {
-    Object.assign(state.elements.arrow.style, initialStyles.arrow);
-  }
-
-  return function () {
-    Object.keys(state.elements).forEach(function (name) {
-      var element = state.elements[name];
-      var attributes = state.attributes[name] || {};
-      var styleProperties = Object.keys(state.styles.hasOwnProperty(name) ? state.styles[name] : initialStyles[name]); // Set all values to an empty string to unset them
-
-      var style = styleProperties.reduce(function (style, property) {
-        style[property] = '';
-        return style;
-      }, {}); // arrow is optional + virtual elements
-
-      if (!isHTMLElement(element) || !getNodeName(element)) {
-        return;
-      }
+      if (!isHTMLElement(element) || !getNodeName(element)) {
+        return;
+      }
 
       Object.assign(element.style, style);
       Object.keys(attributes).forEach(function (attribute) {
@@ -5004,603 +4170,1025 @@ var DEFAULT_OPTIONS = {
   strategy: 'absolute'
 };
 
-function areValidElements() {
-  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-    args[_key] = arguments[_key];
-  }
-
-  return !args.some(function (element) {
-    return !(element && typeof element.getBoundingClientRect === 'function');
-  });
-}
-
-function popperGenerator(generatorOptions) {
-  if (generatorOptions === void 0) {
-    generatorOptions = {};
-  }
-
-  var _generatorOptions = generatorOptions,
-      _generatorOptions$def = _generatorOptions.defaultModifiers,
-      defaultModifiers = _generatorOptions$def === void 0 ? [] : _generatorOptions$def,
-      _generatorOptions$def2 = _generatorOptions.defaultOptions,
-      defaultOptions = _generatorOptions$def2 === void 0 ? DEFAULT_OPTIONS : _generatorOptions$def2;
-  return function createPopper(reference, popper, options) {
-    if (options === void 0) {
-      options = defaultOptions;
-    }
+function areValidElements() {
+  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+    args[_key] = arguments[_key];
+  }
+
+  return !args.some(function (element) {
+    return !(element && typeof element.getBoundingClientRect === 'function');
+  });
+}
+
+function popperGenerator(generatorOptions) {
+  if (generatorOptions === void 0) {
+    generatorOptions = {};
+  }
+
+  var _generatorOptions = generatorOptions,
+      _generatorOptions$def = _generatorOptions.defaultModifiers,
+      defaultModifiers = _generatorOptions$def === void 0 ? [] : _generatorOptions$def,
+      _generatorOptions$def2 = _generatorOptions.defaultOptions,
+      defaultOptions = _generatorOptions$def2 === void 0 ? DEFAULT_OPTIONS : _generatorOptions$def2;
+  return function createPopper(reference, popper, options) {
+    if (options === void 0) {
+      options = defaultOptions;
+    }
+
+    var state = {
+      placement: 'bottom',
+      orderedModifiers: [],
+      options: Object.assign({}, DEFAULT_OPTIONS, defaultOptions),
+      modifiersData: {},
+      elements: {
+        reference: reference,
+        popper: popper
+      },
+      attributes: {},
+      styles: {}
+    };
+    var effectCleanupFns = [];
+    var isDestroyed = false;
+    var instance = {
+      state: state,
+      setOptions: function setOptions(setOptionsAction) {
+        var options = typeof setOptionsAction === 'function' ? setOptionsAction(state.options) : setOptionsAction;
+        cleanupModifierEffects();
+        state.options = Object.assign({}, defaultOptions, state.options, options);
+        state.scrollParents = {
+          reference: isElement(reference) ? listScrollParents(reference) : reference.contextElement ? listScrollParents(reference.contextElement) : [],
+          popper: listScrollParents(popper)
+        }; // Orders the modifiers based on their dependencies and `phase`
+        // properties
+
+        var orderedModifiers = orderModifiers(mergeByName([].concat(defaultModifiers, state.options.modifiers))); // Strip out disabled modifiers
+
+        state.orderedModifiers = orderedModifiers.filter(function (m) {
+          return m.enabled;
+        });
+        runModifierEffects();
+        return instance.update();
+      },
+      // Sync update – it will always be executed, even if not necessary. This
+      // is useful for low frequency updates where sync behavior simplifies the
+      // logic.
+      // For high frequency updates (e.g. `resize` and `scroll` events), always
+      // prefer the async Popper#update method
+      forceUpdate: function forceUpdate() {
+        if (isDestroyed) {
+          return;
+        }
+
+        var _state$elements = state.elements,
+            reference = _state$elements.reference,
+            popper = _state$elements.popper; // Don't proceed if `reference` or `popper` are not valid elements
+        // anymore
+
+        if (!areValidElements(reference, popper)) {
+          return;
+        } // Store the reference and popper rects to be read by modifiers
+
+
+        state.rects = {
+          reference: getCompositeRect(reference, getOffsetParent(popper), state.options.strategy === 'fixed'),
+          popper: getLayoutRect(popper)
+        }; // Modifiers have the ability to reset the current update cycle. The
+        // most common use case for this is the `flip` modifier changing the
+        // placement, which then needs to re-run all the modifiers, because the
+        // logic was previously ran for the previous placement and is therefore
+        // stale/incorrect
+
+        state.reset = false;
+        state.placement = state.options.placement; // On each update cycle, the `modifiersData` property for each modifier
+        // is filled with the initial data specified by the modifier. This means
+        // it doesn't persist and is fresh on each update.
+        // To ensure persistent data, use `${name}#persistent`
+
+        state.orderedModifiers.forEach(function (modifier) {
+          return state.modifiersData[modifier.name] = Object.assign({}, modifier.data);
+        });
+
+        for (var index = 0; index < state.orderedModifiers.length; index++) {
+          if (state.reset === true) {
+            state.reset = false;
+            index = -1;
+            continue;
+          }
+
+          var _state$orderedModifie = state.orderedModifiers[index],
+              fn = _state$orderedModifie.fn,
+              _state$orderedModifie2 = _state$orderedModifie.options,
+              _options = _state$orderedModifie2 === void 0 ? {} : _state$orderedModifie2,
+              name = _state$orderedModifie.name;
+
+          if (typeof fn === 'function') {
+            state = fn({
+              state: state,
+              options: _options,
+              name: name,
+              instance: instance
+            }) || state;
+          }
+        }
+      },
+      // Async and optimistically optimized update – it will not be executed if
+      // not necessary (debounced to run at most once-per-tick)
+      update: debounce(function () {
+        return new Promise(function (resolve) {
+          instance.forceUpdate();
+          resolve(state);
+        });
+      }),
+      destroy: function destroy() {
+        cleanupModifierEffects();
+        isDestroyed = true;
+      }
+    };
+
+    if (!areValidElements(reference, popper)) {
+      return instance;
+    }
+
+    instance.setOptions(options).then(function (state) {
+      if (!isDestroyed && options.onFirstUpdate) {
+        options.onFirstUpdate(state);
+      }
+    }); // Modifiers have the ability to execute arbitrary code before the first
+    // update cycle runs. They will be executed in the same order as the update
+    // cycle. This is useful when a modifier adds some persistent data that
+    // other modifiers need to use, but the modifier is run after the dependent
+    // one.
+
+    function runModifierEffects() {
+      state.orderedModifiers.forEach(function (_ref) {
+        var name = _ref.name,
+            _ref$options = _ref.options,
+            options = _ref$options === void 0 ? {} : _ref$options,
+            effect = _ref.effect;
+
+        if (typeof effect === 'function') {
+          var cleanupFn = effect({
+            state: state,
+            name: name,
+            instance: instance,
+            options: options
+          });
+
+          var noopFn = function noopFn() {};
+
+          effectCleanupFns.push(cleanupFn || noopFn);
+        }
+      });
+    }
+
+    function cleanupModifierEffects() {
+      effectCleanupFns.forEach(function (fn) {
+        return fn();
+      });
+      effectCleanupFns = [];
+    }
+
+    return instance;
+  };
+}
+
+var defaultModifiers = [eventListeners, popperOffsets$1, computeStyles$1, applyStyles$1, offset$1, flip$1, preventOverflow$1, arrow$1, hide$1];
+var createPopper = /*#__PURE__*/popperGenerator({
+  defaultModifiers: defaultModifiers
+}); // eslint-disable-next-line import/no-unused-modules
+
+var usePopper = function () {
+    var _popper = useRef();
+    var initPopper = function (reference, popper, options) {
+        _popper.current = createPopper(reference, popper, options);
+    };
+    var destroyPopper = function () {
+        if (_popper.current) {
+            _popper.current.destroy();
+        }
+        _popper.current = undefined;
+    };
+    return {
+        popper: _popper.current,
+        initPopper: initPopper,
+        destroyPopper: destroyPopper,
+    };
+};
+
+var CCollapse = forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, horizontal = _a.horizontal, onHide = _a.onHide, onShow = _a.onShow, visible = _a.visible, rest = __rest(_a, ["children", "className", "horizontal", "onHide", "onShow", "visible"]);
+    var collapseRef = useRef(null);
+    var forkedRef = useForkedRef(ref, collapseRef);
+    var _b = useState(), height = _b[0], setHeight = _b[1];
+    var _c = useState(), width = _c[0], setWidth = _c[1];
+    var onEntering = function () {
+        onShow && onShow();
+        if (horizontal) {
+            collapseRef.current && setWidth(collapseRef.current.scrollWidth);
+            return;
+        }
+        collapseRef.current && setHeight(collapseRef.current.scrollHeight);
+    };
+    var onEntered = function () {
+        if (horizontal) {
+            setWidth(0);
+            return;
+        }
+        setHeight(0);
+    };
+    var onExit = function () {
+        if (horizontal) {
+            collapseRef.current && setWidth(collapseRef.current.scrollWidth);
+            return;
+        }
+        collapseRef.current && setHeight(collapseRef.current.scrollHeight);
+    };
+    var onExiting = function () {
+        onHide && onHide();
+        if (horizontal) {
+            setWidth(0);
+            return;
+        }
+        setHeight(0);
+    };
+    var onExited = function () {
+        if (horizontal) {
+            setWidth(0);
+            return;
+        }
+        setHeight(0);
+    };
+    return (React.createElement(CSSTransition$1, { in: visible, nodeRef: collapseRef, onEntering: onEntering, onEntered: onEntered, onExit: onExit, onExiting: onExiting, onExited: onExited, timeout: 350 }, function (state) {
+        var currentHeight = height === 0 ? null : { height: height };
+        var currentWidth = width === 0 ? null : { width: width };
+        return (React.createElement("div", __assign({ className: classNames(className, {
+                'collapse-horizontal': horizontal,
+                collapsing: state === 'entering' || state === 'exiting',
+                'collapse show': state === 'entered',
+                collapse: state === 'exited',
+            }), style: __assign(__assign({}, currentHeight), currentWidth) }, rest, { ref: forkedRef }), children));
+    }));
+});
+CCollapse.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    horizontal: PropTypes.bool,
+    onHide: PropTypes.func,
+    onShow: PropTypes.func,
+    visible: PropTypes.bool,
+};
+CCollapse.displayName = 'CCollapse';
+
+var CAccordionBody = forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
+    var visible = useContext(CAccordionItemContext).visible;
+    return (React.createElement(CCollapse, { className: "accordion-collapse", visible: visible },
+        React.createElement("div", __assign({ className: classNames('accordion-body', className) }, rest, { ref: ref }), children)));
+});
+CAccordionBody.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+};
+CAccordionBody.displayName = 'CAccordionBody';
 
-    var state = {
-      placement: 'bottom',
-      orderedModifiers: [],
-      options: Object.assign({}, DEFAULT_OPTIONS, defaultOptions),
-      modifiersData: {},
-      elements: {
-        reference: reference,
-        popper: popper
-      },
-      attributes: {},
-      styles: {}
-    };
-    var effectCleanupFns = [];
-    var isDestroyed = false;
-    var instance = {
-      state: state,
-      setOptions: function setOptions(setOptionsAction) {
-        var options = typeof setOptionsAction === 'function' ? setOptionsAction(state.options) : setOptionsAction;
-        cleanupModifierEffects();
-        state.options = Object.assign({}, defaultOptions, state.options, options);
-        state.scrollParents = {
-          reference: isElement(reference) ? listScrollParents(reference) : reference.contextElement ? listScrollParents(reference.contextElement) : [],
-          popper: listScrollParents(popper)
-        }; // Orders the modifiers based on their dependencies and `phase`
-        // properties
+var CAccordionButton = forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
+    var _b = useContext(CAccordionItemContext), visible = _b.visible, setVisible = _b.setVisible;
+    return (React.createElement("button", __assign({ type: "button", className: classNames('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,
+};
+CAccordionButton.displayName = 'CAccordionButton';
 
-        var orderedModifiers = orderModifiers(mergeByName([].concat(defaultModifiers, state.options.modifiers))); // Strip out disabled modifiers
+var CAccordionHeader = forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
+    return (React.createElement("div", __assign({ className: classNames('accordion-header', className) }, rest, { ref: ref }),
+        React.createElement(CAccordionButton, null, children)));
+});
+CAccordionHeader.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+};
+CAccordionHeader.displayName = 'CAccordionHeader';
 
-        state.orderedModifiers = orderedModifiers.filter(function (m) {
-          return m.enabled;
-        });
-        runModifierEffects();
-        return instance.update();
-      },
-      // Sync update – it will always be executed, even if not necessary. This
-      // is useful for low frequency updates where sync behavior simplifies the
-      // logic.
-      // For high frequency updates (e.g. `resize` and `scroll` events), always
-      // prefer the async Popper#update method
-      forceUpdate: function forceUpdate() {
-        if (isDestroyed) {
-          return;
-        }
+var CCloseButton = forwardRef(function (_a, ref) {
+    var className = _a.className, disabled = _a.disabled, white = _a.white, rest = __rest(_a, ["className", "disabled", "white"]);
+    return (React.createElement("button", __assign({ type: "button", className: classNames('btn', 'btn-close', {
+            'btn-close-white': white,
+        }, disabled, className), "aria-label": "Close", disabled: disabled }, rest, { ref: ref })));
+});
+CCloseButton.propTypes = {
+    className: PropTypes.string,
+    disabled: PropTypes.bool,
+    white: PropTypes.bool,
+};
+CCloseButton.displayName = 'CCloseButton';
 
-        var _state$elements = state.elements,
-            reference = _state$elements.reference,
-            popper = _state$elements.popper; // Don't proceed if `reference` or `popper` are not valid elements
-        // anymore
+var colorPropType = PropTypes.oneOfType([
+    PropTypes.oneOf([
+        'primary',
+        'secondary',
+        'success',
+        'danger',
+        'warning',
+        'info',
+        'dark',
+        'light',
+    ]),
+    PropTypes.string,
+]);
+var fallbackPlacementsPropType = PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.oneOf(['top', 'bottom', 'right', 'left']).isRequired),
+    PropTypes.oneOf(['top', 'bottom', 'right', 'left']),
+]);
+var placementPropType = PropTypes.oneOf([
+    'auto',
+    'auto-start',
+    'auto-end',
+    'top-end',
+    'top',
+    'top-start',
+    'bottom-end',
+    'bottom',
+    'bottom-start',
+    'right-start',
+    'right',
+    'right-end',
+    'left-start',
+    'left',
+    'left-end',
+]);
+var shapePropType = PropTypes.oneOfType([
+    PropTypes.oneOf([
+        'rounded',
+        'rounded-top',
+        'rounded-end',
+        'rounded-bottom',
+        'rounded-start',
+        'rounded-circle',
+        'rounded-pill',
+        'rounded-0',
+        'rounded-1',
+        'rounded-2',
+        'rounded-3',
+    ]),
+    PropTypes.string,
+]);
+var textColorsPropType = PropTypes.oneOfType([
+    colorPropType,
+    PropTypes.oneOf(['white', 'muted']),
+    PropTypes.string,
+]);
+var triggerPropType = PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.oneOf(['hover', 'focus', 'click']).isRequired),
+    PropTypes.oneOf(['hover', 'focus', 'click']),
+]);
 
-        if (!areValidElements(reference, popper)) {
-          return;
-        } // Store the reference and popper rects to be read by modifiers
+var CAlert = forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, _b = _a.color, color = _b === void 0 ? 'primary' : _b, dismissible = _a.dismissible, variant = _a.variant, _c = _a.visible, visible = _c === void 0 ? true : _c, onClose = _a.onClose, rest = __rest(_a, ["children", "className", "color", "dismissible", "variant", "visible", "onClose"]);
+    var alertRef = useRef(null);
+    var forkedRef = useForkedRef(ref, alertRef);
+    var _d = useState(visible), _visible = _d[0], setVisible = _d[1];
+    useEffect(function () {
+        setVisible(visible);
+    }, [visible]);
+    return (React.createElement(Transition$1, { in: _visible, mountOnEnter: true, nodeRef: alertRef, onExit: onClose, timeout: 150, unmountOnExit: true }, function (state) { return (React.createElement("div", __assign({ className: classNames('alert', variant === 'solid' ? "bg-".concat(color, " text-white") : "alert-".concat(color), {
+            'alert-dismissible fade': dismissible,
+            show: state === 'entered',
+        }, className), role: "alert" }, rest, { ref: forkedRef }),
+        children,
+        dismissible && React.createElement(CCloseButton, { onClick: function () { return setVisible(false); } }))); }));
+});
+CAlert.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    color: colorPropType.isRequired,
+    dismissible: PropTypes.bool,
+    onClose: PropTypes.func,
+    variant: PropTypes.string,
+    visible: PropTypes.bool,
+};
+CAlert.displayName = 'CAlert';
 
+var CAlertHeading = forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, _b = _a.component, Component = _b === void 0 ? 'h4' : _b, rest = __rest(_a, ["children", "className", "component"]);
+    return (React.createElement(Component, __assign({ className: classNames('alert-heading', className) }, rest, { ref: ref }), children));
+});
+CAlertHeading.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    component: PropTypes.elementType,
+};
+CAlertHeading.displayName = 'CAlertHeading';
 
-        state.rects = {
-          reference: getCompositeRect(reference, getOffsetParent(popper), state.options.strategy === 'fixed'),
-          popper: getLayoutRect(popper)
-        }; // Modifiers have the ability to reset the current update cycle. The
-        // most common use case for this is the `flip` modifier changing the
-        // placement, which then needs to re-run all the modifiers, because the
-        // logic was previously ran for the previous placement and is therefore
-        // stale/incorrect
+var CLink = forwardRef(function (_a, ref) {
+    var children = _a.children, active = _a.active, className = _a.className, _b = _a.component, Component = _b === void 0 ? 'a' : _b, disabled = _a.disabled, rest = __rest(_a, ["children", "active", "className", "component", "disabled"]);
+    return (React.createElement(Component
+    // TODO: remove duplicated classes ex. `active active` in `<CListGroupItem>`
+    , __assign({ 
+        // TODO: remove duplicated classes ex. `active active` in `<CListGroupItem>`
+        className: classNames(className, { active: active, disabled: disabled }) }, (active && { 'aria-current': 'page' }), (Component === 'a' && disabled && { 'aria-disabled': true, tabIndex: -1 }), ((Component === 'a' || Component === 'button') && {
+        onClick: function (event) {
+            event.preventDefault;
+            !disabled && rest.onClick && rest.onClick(event);
+        },
+    }), { disabled: disabled }, rest, { ref: ref }), children));
+});
+CLink.propTypes = {
+    active: PropTypes.bool,
+    children: PropTypes.node,
+    className: PropTypes.string,
+    component: PropTypes.elementType,
+    disabled: PropTypes.bool,
+};
+CLink.displayName = 'CLink';
 
-        state.reset = false;
-        state.placement = state.options.placement; // On each update cycle, the `modifiersData` property for each modifier
-        // is filled with the initial data specified by the modifier. This means
-        // it doesn't persist and is fresh on each update.
-        // To ensure persistent data, use `${name}#persistent`
+var CAlertLink = forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
+    return (React.createElement(CLink, __assign({ className: classNames('alert-link', className) }, rest, { ref: ref }), children));
+});
+CAlertLink.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+};
+CAlertLink.displayName = 'CAlertLink';
 
-        state.orderedModifiers.forEach(function (modifier) {
-          return state.modifiersData[modifier.name] = Object.assign({}, modifier.data);
-        });
+var CAvatar = forwardRef(function (_a, ref) {
+    var _b;
+    var children = _a.children, className = _a.className, color = _a.color, shape = _a.shape, size = _a.size, src = _a.src, status = _a.status, textColor = _a.textColor, rest = __rest(_a, ["children", "className", "color", "shape", "size", "src", "status", "textColor"]);
+    var statusClassName = status && classNames('avatar-status', "bg-".concat(status));
+    return (React.createElement("div", __assign({ className: classNames('avatar', (_b = {},
+            _b["bg-".concat(color)] = color,
+            _b["avatar-".concat(size)] = size,
+            _b["text-".concat(textColor)] = textColor,
+            _b), shape, className) }, rest, { ref: ref }),
+        src ? React.createElement("img", { src: src, className: "avatar-img" }) : children,
+        status && React.createElement("span", { className: statusClassName })));
+});
+CAvatar.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    color: colorPropType,
+    shape: shapePropType,
+    size: PropTypes.string,
+    src: PropTypes.string,
+    status: PropTypes.string,
+    textColor: textColorsPropType,
+};
+CAvatar.displayName = 'CAvatar';
 
-        for (var index = 0; index < state.orderedModifiers.length; index++) {
-          if (state.reset === true) {
-            state.reset = false;
-            index = -1;
-            continue;
-          }
+var CBackdrop = forwardRef(function (_a, ref) {
+    var _b = _a.className, className = _b === void 0 ? 'modal-backdrop' : _b, visible = _a.visible, rest = __rest(_a, ["className", "visible"]);
+    var backdropRef = useRef(null);
+    var forkedRef = useForkedRef(ref, backdropRef);
+    return (React.createElement(Transition$1, { in: visible, mountOnEnter: true, nodeRef: backdropRef, timeout: 150, unmountOnExit: true }, function (state) { return (React.createElement("div", __assign({ className: classNames(className, 'fade', {
+            show: state === 'entered',
+        }) }, rest, { ref: forkedRef }))); }));
+});
+CBackdrop.propTypes = {
+    className: PropTypes.string,
+    visible: PropTypes.bool,
+};
+CBackdrop.displayName = 'CBackdrop';
 
-          var _state$orderedModifie = state.orderedModifiers[index],
-              fn = _state$orderedModifie.fn,
-              _state$orderedModifie2 = _state$orderedModifie.options,
-              _options = _state$orderedModifie2 === void 0 ? {} : _state$orderedModifie2,
-              name = _state$orderedModifie.name;
+var CBadge = forwardRef(function (_a, ref) {
+    var _b;
+    var children = _a.children, className = _a.className, color = _a.color, _c = _a.component, Component = _c === void 0 ? 'span' : _c, position = _a.position, shape = _a.shape, size = _a.size, textColor = _a.textColor, rest = __rest(_a, ["children", "className", "color", "component", "position", "shape", "size", "textColor"]);
+    return (React.createElement(Component, __assign({ className: classNames('badge', (_b = {},
+            _b["bg-".concat(color)] = color,
+            _b['position-absolute translate-middle'] = position,
+            _b['top-0'] = position === null || position === void 0 ? void 0 : position.includes('top'),
+            _b['top-100'] = position === null || position === void 0 ? void 0 : position.includes('bottom'),
+            _b['start-100'] = position === null || position === void 0 ? void 0 : position.includes('end'),
+            _b['start-0'] = position === null || position === void 0 ? void 0 : position.includes('start'),
+            _b["badge-".concat(size)] = size,
+            _b["text-".concat(textColor)] = textColor,
+            _b), shape, className) }, rest, { ref: ref }), children));
+});
+CBadge.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    color: colorPropType,
+    component: PropTypes.string,
+    position: PropTypes.oneOf(['top-start', 'top-end', 'bottom-end', 'bottom-start']),
+    shape: shapePropType,
+    size: PropTypes.oneOf(['sm']),
+    textColor: textColorsPropType,
+};
+CBadge.displayName = 'CBadge';
 
-          if (typeof fn === 'function') {
-            state = fn({
-              state: state,
-              options: _options,
-              name: name,
-              instance: instance
-            }) || state;
-          }
-        }
-      },
-      // Async and optimistically optimized update – it will not be executed if
-      // not necessary (debounced to run at most once-per-tick)
-      update: debounce(function () {
-        return new Promise(function (resolve) {
-          instance.forceUpdate();
-          resolve(state);
-        });
-      }),
-      destroy: function destroy() {
-        cleanupModifierEffects();
-        isDestroyed = true;
-      }
-    };
+var CBreadcrumb = forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
+    return (React.createElement("nav", { "aria-label": "breadcrumb" },
+        React.createElement("ol", __assign({ className: classNames('breadcrumb', className) }, rest, { ref: ref }), children)));
+});
+CBreadcrumb.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+};
+CBreadcrumb.displayName = 'CBreadcrumb';
 
-    if (!areValidElements(reference, popper)) {
-      return instance;
-    }
+var CBreadcrumbItem = forwardRef(function (_a, ref) {
+    var children = _a.children, active = _a.active, className = _a.className, href = _a.href, rest = __rest(_a, ["children", "active", "className", "href"]);
+    return (React.createElement("li", __assign({ className: classNames('breadcrumb-item', {
+            active: active,
+        }, className) }, (active && { 'aria-current': 'page' }), rest, { ref: ref }), href ? React.createElement(CLink, { href: href }, children) : children));
+});
+CBreadcrumbItem.propTypes = {
+    active: PropTypes.bool,
+    children: PropTypes.node,
+    className: PropTypes.string,
+    href: PropTypes.string,
+};
+CBreadcrumbItem.displayName = 'CBreadcrumbItem';
 
-    instance.setOptions(options).then(function (state) {
-      if (!isDestroyed && options.onFirstUpdate) {
-        options.onFirstUpdate(state);
-      }
-    }); // Modifiers have the ability to execute arbitrary code before the first
-    // update cycle runs. They will be executed in the same order as the update
-    // cycle. This is useful when a modifier adds some persistent data that
-    // other modifiers need to use, but the modifier is run after the dependent
-    // one.
+var CButton = 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(_a, ["children", "className", "color", "component", "shape", "size", "type", "variant"]);
+    return (React.createElement(CLink, __assign({ component: rest.href ? 'a' : component, type: type, className: classNames('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,
+    color: colorPropType,
+    component: PropTypes.elementType,
+    shape: PropTypes.string,
+    size: PropTypes.oneOf(['sm', 'lg']),
+    type: PropTypes.oneOf(['button', 'submit', 'reset']),
+    variant: PropTypes.oneOf(['outline', 'ghost']),
+};
+CButton.displayName = 'CButton';
 
-    function runModifierEffects() {
-      state.orderedModifiers.forEach(function (_ref) {
-        var name = _ref.name,
-            _ref$options = _ref.options,
-            options = _ref$options === void 0 ? {} : _ref$options,
-            effect = _ref.effect;
+var CButtonToolbar = forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
+    return (React.createElement("div", __assign({ className: classNames('btn-toolbar', className) }, rest, { ref: ref }), children));
+});
+CButtonToolbar.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+};
+CButtonToolbar.displayName = 'CButtonToolbar';
 
-        if (typeof effect === 'function') {
-          var cleanupFn = effect({
-            state: state,
-            name: name,
-            instance: instance,
-            options: options
-          });
+var CButtonGroup = forwardRef(function (_a, ref) {
+    var _b;
+    var children = _a.children, className = _a.className, size = _a.size, vertical = _a.vertical, rest = __rest(_a, ["children", "className", "size", "vertical"]);
+    return (React.createElement("div", __assign({ className: classNames(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,
+};
+CButtonGroup.displayName = 'CButtonGroup';
 
-          var noopFn = function noopFn() {};
+var CCallout = forwardRef(function (_a, ref) {
+    var _b;
+    var children = _a.children, className = _a.className, color = _a.color, rest = __rest(_a, ["children", "className", "color"]);
+    return (React.createElement("div", __assign({ className: classNames('callout', (_b = {},
+            _b["callout-".concat(color)] = color,
+            _b), className) }, rest, { ref: ref }), children));
+});
+CCallout.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    color: colorPropType,
+};
+CCallout.displayName = 'CCallout';
 
-          effectCleanupFns.push(cleanupFn || noopFn);
-        }
-      });
-    }
+var CCard = forwardRef(function (_a, ref) {
+    var _b;
+    var children = _a.children, className = _a.className, color = _a.color, textColor = _a.textColor, rest = __rest(_a, ["children", "className", "color", "textColor"]);
+    return (React.createElement("div", __assign({ className: classNames('card', (_b = {},
+            _b["bg-".concat(color)] = color,
+            _b["text-".concat(textColor)] = textColor,
+            _b), className) }, rest, { ref: ref }), children));
+});
+CCard.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    color: colorPropType,
+    textColor: PropTypes.string,
+};
+CCard.displayName = 'CCard';
 
-    function cleanupModifierEffects() {
-      effectCleanupFns.forEach(function (fn) {
-        return fn();
-      });
-      effectCleanupFns = [];
-    }
+var CCardBody = forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
+    return (React.createElement("div", __assign({ className: classNames('card-body', className) }, rest, { ref: ref }), children));
+});
+CCardBody.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+};
+CCardBody.displayName = 'CCardBody';
 
-    return instance;
-  };
-}
+var CCardFooter = forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
+    return (React.createElement("div", __assign({ className: classNames('card-footer', className) }, rest, { ref: ref }), children));
+});
+CCardFooter.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+};
+CCardFooter.displayName = 'CCardFooter';
 
-var defaultModifiers = [eventListeners, popperOffsets$1, computeStyles$1, applyStyles$1, offset$1, flip$1, preventOverflow$1, arrow$1, hide$1];
-var createPopper = /*#__PURE__*/popperGenerator({
-  defaultModifiers: defaultModifiers
-}); // eslint-disable-next-line import/no-unused-modules
+var CCardGroup = forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
+    return (React.createElement("div", __assign({ className: classNames('card-group', className) }, rest, { ref: ref }), children));
+});
+CCardGroup.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+};
+CCardGroup.displayName = 'CCardGroup';
 
-/* global Map:readonly, Set:readonly, ArrayBuffer:readonly */
+var CCardHeader = forwardRef(function (_a, ref) {
+    var children = _a.children, _b = _a.component, Component = _b === void 0 ? 'div' : _b, className = _a.className, rest = __rest(_a, ["children", "component", "className"]);
+    return (React.createElement(Component, __assign({ className: classNames('card-header', className) }, rest, { ref: ref }), children));
+});
+CCardHeader.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    component: PropTypes.elementType,
+};
+CCardHeader.displayName = 'CCardHeader';
 
-var hasElementType = typeof Element !== 'undefined';
-var hasMap = typeof Map === 'function';
-var hasSet = typeof Set === 'function';
-var hasArrayBuffer = typeof ArrayBuffer === 'function' && !!ArrayBuffer.isView;
+var CCardImage = forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, _b = _a.component, Component = _b === void 0 ? 'img' : _b, orientation = _a.orientation, rest = __rest(_a, ["children", "className", "component", "orientation"]);
+    return (React.createElement(Component, __assign({ className: classNames(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']),
+};
+CCardImage.displayName = 'CCardImage';
 
-// Note: We **don't** need `envHasBigInt64Array` in fde es6/index.js
+var CCardImageOverlay = forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
+    return (React.createElement("div", __assign({ className: classNames('card-img-overlay', className) }, rest, { ref: ref }), children));
+});
+CCardImageOverlay.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+};
+CCardImageOverlay.displayName = 'CCardImageOverlay';
 
-function equal(a, b) {
-  // START: fast-deep-equal es6/index.js 3.1.3
-  if (a === b) return true;
+var CCardLink = forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
+    return (React.createElement(CLink, __assign({ className: classNames('card-link', className) }, rest, { ref: ref }), children));
+});
+CCardLink.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+};
+CCardLink.displayName = 'CCardLink';
 
-  if (a && b && typeof a == 'object' && typeof b == 'object') {
-    if (a.constructor !== b.constructor) return false;
+var CCardSubtitle = forwardRef(function (_a, ref) {
+    var children = _a.children, _b = _a.component, Component = _b === void 0 ? 'h6' : _b, className = _a.className, rest = __rest(_a, ["children", "component", "className"]);
+    return (React.createElement(Component, __assign({ className: classNames('card-subtitle', className) }, rest, { ref: ref }), children));
+});
+CCardSubtitle.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    component: PropTypes.elementType,
+};
+CCardSubtitle.displayName = 'CCardSubtitle';
 
-    var length, i, keys;
-    if (Array.isArray(a)) {
-      length = a.length;
-      if (length != b.length) return false;
-      for (i = length; i-- !== 0;)
-        if (!equal(a[i], b[i])) return false;
-      return true;
-    }
+var CCardText = forwardRef(function (_a, ref) {
+    var children = _a.children, _b = _a.component, Component = _b === void 0 ? 'p' : _b, className = _a.className, rest = __rest(_a, ["children", "component", "className"]);
+    return (React.createElement(Component, __assign({ className: classNames('card-text', className) }, rest, { ref: ref }), children));
+});
+CCardText.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    component: PropTypes.elementType,
+};
+CCardText.displayName = 'CCardText';
 
-    // START: Modifications:
-    // 1. Extra `has<Type> &&` helpers in initial condition allow es6 code
-    //    to co-exist with es5.
-    // 2. Replace `for of` with es5 compliant iteration using `for`.
-    //    Basically, take:
-    //
-    //    ```js
-    //    for (i of a.entries())
-    //      if (!b.has(i[0])) return false;
-    //    ```
-    //
-    //    ... and convert to:
-    //
-    //    ```js
-    //    it = a.entries();
-    //    while (!(i = it.next()).done)
-    //      if (!b.has(i.value[0])) return false;
-    //    ```
-    //
-    //    **Note**: `i` access switches to `i.value`.
-    var it;
-    if (hasMap && (a instanceof Map) && (b instanceof Map)) {
-      if (a.size !== b.size) return false;
-      it = a.entries();
-      while (!(i = it.next()).done)
-        if (!b.has(i.value[0])) return false;
-      it = a.entries();
-      while (!(i = it.next()).done)
-        if (!equal(i.value[1], b.get(i.value[0]))) return false;
-      return true;
-    }
+var CCardTitle = forwardRef(function (_a, ref) {
+    var children = _a.children, _b = _a.component, Component = _b === void 0 ? 'h5' : _b, className = _a.className, rest = __rest(_a, ["children", "component", "className"]);
+    return (React.createElement(Component, __assign({ className: classNames('card-title', className) }, rest, { ref: ref }), children));
+});
+CCardTitle.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    component: PropTypes.elementType,
+};
+CCardTitle.displayName = 'CCardTitle';
 
-    if (hasSet && (a instanceof Set) && (b instanceof Set)) {
-      if (a.size !== b.size) return false;
-      it = a.entries();
-      while (!(i = it.next()).done)
-        if (!b.has(i.value[0])) return false;
-      return true;
-    }
-    // END: Modifications
-
-    if (hasArrayBuffer && ArrayBuffer.isView(a) && ArrayBuffer.isView(b)) {
-      length = a.length;
-      if (length != b.length) return false;
-      for (i = length; i-- !== 0;)
-        if (a[i] !== b[i]) return false;
-      return true;
+var getRTLPlacement = function (placement, element) {
+    switch (placement) {
+        case 'right': {
+            return isRTL(element) ? 'left' : 'right';
+        }
+        case 'left': {
+            return isRTL(element) ? 'right' : 'left';
+        }
+        default: {
+            return placement;
+        }
     }
+};
 
-    if (a.constructor === RegExp) return a.source === b.source && a.flags === b.flags;
-    // START: Modifications:
-    // Apply guards for `Object.create(null)` handling. See:
-    // - https://github.com/FormidableLabs/react-fast-compare/issues/64
-    // - https://github.com/epoberezkin/fast-deep-equal/issues/49
-    if (a.valueOf !== Object.prototype.valueOf && typeof a.valueOf === 'function' && typeof b.valueOf === 'function') return a.valueOf() === b.valueOf();
-    if (a.toString !== Object.prototype.toString && typeof a.toString === 'function' && typeof b.toString === 'function') return a.toString() === b.toString();
-    // END: Modifications
-
-    keys = Object.keys(a);
-    length = keys.length;
-    if (length !== Object.keys(b).length) return false;
-
-    for (i = length; i-- !== 0;)
-      if (!Object.prototype.hasOwnProperty.call(b, keys[i])) return false;
-    // END: fast-deep-equal
-
-    // START: react-fast-compare
-    // custom handling for DOM elements
-    if (hasElementType && a instanceof Element) return false;
-
-    // custom handling for React/Preact
-    for (i = length; i-- !== 0;) {
-      if ((keys[i] === '_owner' || keys[i] === '__v' || keys[i] === '__o') && a.$$typeof) {
-        // React-specific: avoid traversing React elements' _owner
-        // Preact-specific: avoid traversing Preact elements' __v and __o
-        //    __v = $_original / $_vnode
-        //    __o = $_owner
-        // These properties contain circular references and are not needed when
-        // comparing the actual elements (and not their owners)
-        // .$$typeof and ._store on just reasonable markers of elements
-
-        continue;
-      }
+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));
+};
 
-      // all other properties should be traversed as usual
-      if (!equal(a[keys[i]], b[keys[i]])) return false;
+var isRTL = function (element) {
+    if (typeof document !== 'undefined' && document.documentElement.dir === 'rtl') {
+        return true;
     }
-    // END: react-fast-compare
-
-    // START: fast-deep-equal
-    return true;
-  }
-
-  return a !== a && b !== b;
-}
-// end fast-deep-equal
-
-var reactFastCompare = function isEqual(a, b) {
-  try {
-    return equal(a, b);
-  } catch (error) {
-    if (((error.message || '').match(/stack|recursion/i))) {
-      // warn on circular references, don't crash
-      // browsers give this different errors name and messages:
-      // chrome/safari: "RangeError", "Maximum call stack size exceeded"
-      // firefox: "InternalError", too much recursion"
-      // edge: "Error", "Out of stack space"
-      console.warn('react-fast-compare cannot handle circular refs');
-      return false;
+    if (element) {
+        return element.closest('[dir="rtl"]') !== null;
     }
-    // some other error. we should definitely know about these
-    throw error;
-  }
+    return false;
 };
 
-var isEqual = /*@__PURE__*/getDefaultExportFromCjs(reactFastCompare);
-
-var EMPTY_MODIFIERS$1 = [];
-var usePopper = function usePopper(referenceElement, popperElement, options) {
-  if (options === void 0) {
-    options = {};
-  }
-
-  var prevOptions = React.useRef(null);
-  var optionsWithDefaults = {
-    onFirstUpdate: options.onFirstUpdate,
-    placement: options.placement || 'bottom',
-    strategy: options.strategy || 'absolute',
-    modifiers: options.modifiers || EMPTY_MODIFIERS$1
-  };
+var CCarouselContext = createContext({});
+var CCarousel = 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(_a, ["children", "activeIndex", "className", "controls", "dark", "indicators", "interval", "onSlid", "onSlide", "pause", "touch", "transition", "wrap"]);
+    var carouselRef = useRef(null);
+    var forkedRef = useForkedRef(ref, carouselRef);
+    var data = useRef({}).current;
+    var _g = useState(activeIndex), active = _g[0], setActive = _g[1];
+    var _h = useState(false), animating = _h[0], setAnimating = _h[1];
+    var _j = useState(), customInterval = _j[0], setCustomInterval = _j[1];
+    var _k = useState('next'), direction = _k[0], setDirection = _k[1];
+    var _l = useState(0), itemsNumber = _l[0], setItemsNumber = _l[1];
+    var _m = useState(null), touchPosition = _m[0], setTouchPosition = _m[1];
+    var _o = useState(), visible = _o[0], setVisible = _o[1];
+    useEffect(function () {
+        setItemsNumber(Children.toArray(children).length);
+    });
+    useEffect(function () {
+        visible && cycle();
+    }, [visible]);
+    useEffect(function () {
+        !animating && cycle();
+        !animating && onSlid && onSlid(active, direction);
+        animating && onSlide && onSlide(active, direction);
+    }, [animating]);
+    useEffect(function () {
+        window.addEventListener('scroll', handleScroll);
+        return function () {
+            window.removeEventListener('scroll', handleScroll);
+        };
+    });
+    var cycle = function () {
+        _pause();
+        if (!wrap && active === itemsNumber - 1) {
+            return;
+        }
+        if (typeof interval === 'number') {
+            data.timeout = setTimeout(function () { return nextItemWhenVisible(); }, typeof customInterval === 'number' ? customInterval : interval);
+        }
+    };
+    var _pause = function () { return pause && data.timeout && clearTimeout(data.timeout); };
+    var nextItemWhenVisible = function () {
+        // Don't call next when the page isn't visible
+        // or the carousel or its parent isn't visible
+        if (!document.hidden && carouselRef.current && isInViewport(carouselRef.current)) {
+            if (animating) {
+                return;
+            }
+            handleControlClick('next');
+        }
+    };
+    var handleControlClick = function (direction) {
+        if (animating) {
+            return;
+        }
+        setDirection(direction);
+        if (direction === 'next') {
+            active === itemsNumber - 1 ? setActive(0) : setActive(active + 1);
+        }
+        else {
+            active === 0 ? setActive(itemsNumber - 1) : setActive(active - 1);
+        }
+    };
+    var handleIndicatorClick = function (index) {
+        if (active === index) {
+            return;
+        }
+        if (active < index) {
+            setDirection('next');
+            setActive(index);
+            return;
+        }
+        if (active > index) {
+            setDirection('prev');
+            setActive(index);
+        }
+    };
+    var handleScroll = function () {
+        if (!document.hidden && carouselRef.current && isInViewport(carouselRef.current)) {
+            setVisible(true);
+        }
+        else {
+            setVisible(false);
+        }
+    };
+    var handleTouchMove = function (e) {
+        var touchDown = touchPosition;
+        if (touchDown === null) {
+            return;
+        }
+        var currentTouch = e.touches[0].clientX;
+        var diff = touchDown - currentTouch;
+        if (diff > 5) {
+            handleControlClick('next');
+        }
+        if (diff < -5) {
+            handleControlClick('prev');
+        }
+        setTouchPosition(null);
+    };
+    var handleTouchStart = function (e) {
+        var touchDown = e.touches[0].clientX;
+        setTouchPosition(touchDown);
+    };
+    return (React.createElement("div", __assign({ className: classNames('carousel slide', {
+            'carousel-dark': dark,
+            'carousel-fade': transition === 'crossfade',
+        }, className), onMouseEnter: _pause, onMouseLeave: cycle }, (touch && { onTouchStart: handleTouchStart, onTouchMove: handleTouchMove }), rest, { ref: forkedRef }),
+        React.createElement(CCarouselContext.Provider, { value: {
+                setAnimating: setAnimating,
+                setCustomInterval: setCustomInterval,
+            } },
+            indicators && (React.createElement("ol", { className: "carousel-indicators" }, Array.from({ length: itemsNumber }, function (_, i) { return i; }).map(function (index) {
+                return (React.createElement("li", { key: "indicator".concat(index), onClick: function () {
+                        !animating && handleIndicatorClick(index);
+                    }, className: active === index ? 'active' : '', "data-coreui-target": "" }));
+            }))),
+            React.createElement("div", { className: "carousel-inner" }, Children.map(children, function (child, index) {
+                if (React.isValidElement(child)) {
+                    return React.cloneElement(child, {
+                        active: active === index ? true : false,
+                        direction: direction,
+                        key: index,
+                    });
+                }
+                return;
+            })),
+            controls && (React.createElement(React.Fragment, null,
+                React.createElement("button", { className: "carousel-control-prev", onClick: function () { return handleControlClick('prev'); } },
+                    React.createElement("span", { className: "carousel-control-prev-icon", "aria-label": "prev" })),
+                React.createElement("button", { className: "carousel-control-next", onClick: function () { return handleControlClick('next'); } },
+                    React.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,
+};
+CCarousel.displayName = 'CCarousel';
 
-  var _React$useState = React.useState({
-    styles: {
-      popper: {
-        position: optionsWithDefaults.strategy,
-        left: '0',
-        top: '0'
-      },
-      arrow: {
-        position: 'absolute'
-      }
-    },
-    attributes: {}
-  }),
-      state = _React$useState[0],
-      setState = _React$useState[1];
+var CCarouselCaption = forwardRef(function (_a, ref) {
+    var className = _a.className, rest = __rest(_a, ["className"]);
+    return React.createElement("div", __assign({ className: classNames('carousel-caption', className) }, rest, { ref: ref }));
+});
+CCarouselCaption.propTypes = {
+    className: PropTypes.string,
+};
+CCarouselCaption.displayName = 'CCarouselCaption';
 
-  var updateStateModifier = React.useMemo(function () {
-    return {
-      name: 'updateState',
-      enabled: true,
-      phase: 'write',
-      fn: function fn(_ref) {
-        var state = _ref.state;
-        var elements = Object.keys(state.elements);
-        ReactDOM.flushSync(function () {
-          setState({
-            styles: fromEntries(elements.map(function (element) {
-              return [element, state.styles[element] || {}];
-            })),
-            attributes: fromEntries(elements.map(function (element) {
-              return [element, state.attributes[element]];
-            }))
-          });
+var CCarouselItem = forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, active = _a.active, direction = _a.direction, _b = _a.interval, interval = _b === void 0 ? false : _b, rest = __rest(_a, ["children", "className", "active", "direction", "interval"]);
+    var _c = useContext(CCarouselContext), setAnimating = _c.setAnimating, setCustomInterval = _c.setCustomInterval;
+    var carouselItemRef = useRef(null);
+    var forkedRef = useForkedRef(ref, carouselItemRef);
+    var prevActive = useRef();
+    var _d = useState(), directionClassName = _d[0], setDirectionClassName = _d[1];
+    var _e = useState(), orderClassName = _e[0], setOrderClassName = _e[1];
+    var _f = useState(active && 'active'), activeClassName = _f[0], setActiveClassName = _f[1];
+    var _g = useState(0), count = _g[0], setCount = _g[1];
+    useEffect(function () {
+        if (active) {
+            setCustomInterval(interval);
+            if (count !== 0)
+                setOrderClassName("carousel-item-".concat(direction));
+        }
+        if (prevActive.current && !active) {
+            setActiveClassName('active');
+        }
+        if (active || prevActive.current) {
+            setTimeout(function () {
+                var _a;
+                if (count !== 0) {
+                    // @ts-expect-error reflow is necessary to proper transition
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    (_a = carouselItemRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight;
+                    setDirectionClassName("carousel-item-".concat(direction === 'next' ? 'start' : 'end'));
+                }
+            }, 0);
+        }
+        prevActive.current = active;
+        if (count === 0)
+            setCount(count + 1);
+    }, [active]);
+    useEffect(function () {
+        var _a, _b;
+        (_a = carouselItemRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('transitionstart', function () {
+            active && setAnimating(true);
         });
-      },
-      requires: ['computeStyles']
-    };
-  }, []);
-  var popperOptions = React.useMemo(function () {
-    var newOptions = {
-      onFirstUpdate: optionsWithDefaults.onFirstUpdate,
-      placement: optionsWithDefaults.placement,
-      strategy: optionsWithDefaults.strategy,
-      modifiers: [].concat(optionsWithDefaults.modifiers, [updateStateModifier, {
-        name: 'applyStyles',
-        enabled: false
-      }])
-    };
-
-    if (isEqual(prevOptions.current, newOptions)) {
-      return prevOptions.current || newOptions;
-    } else {
-      prevOptions.current = newOptions;
-      return newOptions;
-    }
-  }, [optionsWithDefaults.onFirstUpdate, optionsWithDefaults.placement, optionsWithDefaults.strategy, optionsWithDefaults.modifiers, updateStateModifier]);
-  var popperInstanceRef = React.useRef();
-  useIsomorphicLayoutEffect(function () {
-    if (popperInstanceRef.current) {
-      popperInstanceRef.current.setOptions(popperOptions);
-    }
-  }, [popperOptions]);
-  useIsomorphicLayoutEffect(function () {
-    if (referenceElement == null || popperElement == null) {
-      return;
-    }
-
-    var createPopper$1 = options.createPopper || createPopper;
-    var popperInstance = createPopper$1(referenceElement, popperElement, popperOptions);
-    popperInstanceRef.current = popperInstance;
-    return function () {
-      popperInstance.destroy();
-      popperInstanceRef.current = null;
-    };
-  }, [referenceElement, popperElement, options.createPopper]);
-  return {
-    state: popperInstanceRef.current ? popperInstanceRef.current.state : null,
-    styles: state.styles,
-    attributes: state.attributes,
-    update: popperInstanceRef.current ? popperInstanceRef.current.update : null,
-    forceUpdate: popperInstanceRef.current ? popperInstanceRef.current.forceUpdate : null
-  };
+        (_b = carouselItemRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener('transitionend', function () {
+            active && setAnimating(false);
+            setDirectionClassName('');
+            setOrderClassName('');
+            if (active) {
+                setActiveClassName('active');
+            }
+            if (!active) {
+                setActiveClassName('');
+            }
+        });
+        return function () {
+            var _a, _b;
+            (_a = carouselItemRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('transitionstart', function () {
+                active && setAnimating(true);
+            });
+            (_b = carouselItemRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('transitionend', function () {
+                active && setAnimating(false);
+                setDirectionClassName('');
+                setOrderClassName('');
+                if (active) {
+                    setActiveClassName('active');
+                }
+                if (!active) {
+                    setActiveClassName('');
+                }
+            });
+        };
+    });
+    return (React.createElement("div", __assign({ className: classNames('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]),
 };
+CCarouselItem.displayName = 'CCarouselItem';
 
-var NOOP = function NOOP() {
-  return void 0;
+var CConditionalPortal = function (_a) {
+    var children = _a.children, portal = _a.portal;
+    return typeof window !== 'undefined' && portal ? (createPortal(children, document.body)) : (React.createElement(React.Fragment, null, children));
 };
-
-var NOOP_PROMISE = function NOOP_PROMISE() {
-  return Promise.resolve(null);
+CConditionalPortal.propTypes = {
+    children: PropTypes.node,
+    portal: PropTypes.bool.isRequired,
 };
+CConditionalPortal.displayName = 'CConditionalPortal';
 
-var EMPTY_MODIFIERS = [];
-function Popper(_ref) {
-  var _ref$placement = _ref.placement,
-      placement = _ref$placement === void 0 ? 'bottom' : _ref$placement,
-      _ref$strategy = _ref.strategy,
-      strategy = _ref$strategy === void 0 ? 'absolute' : _ref$strategy,
-      _ref$modifiers = _ref.modifiers,
-      modifiers = _ref$modifiers === void 0 ? EMPTY_MODIFIERS : _ref$modifiers,
-      referenceElement = _ref.referenceElement,
-      onFirstUpdate = _ref.onFirstUpdate,
-      innerRef = _ref.innerRef,
-      children = _ref.children;
-  var referenceNode = React.useContext(ManagerReferenceNodeContext);
-
-  var _React$useState = React.useState(null),
-      popperElement = _React$useState[0],
-      setPopperElement = _React$useState[1];
-
-  var _React$useState2 = React.useState(null),
-      arrowElement = _React$useState2[0],
-      setArrowElement = _React$useState2[1];
-
-  React.useEffect(function () {
-    setRef(innerRef, popperElement);
-  }, [innerRef, popperElement]);
-  var options = React.useMemo(function () {
-    return {
-      placement: placement,
-      strategy: strategy,
-      onFirstUpdate: onFirstUpdate,
-      modifiers: [].concat(modifiers, [{
-        name: 'arrow',
-        enabled: arrowElement != null,
-        options: {
-          element: arrowElement
-        }
-      }])
-    };
-  }, [placement, strategy, onFirstUpdate, modifiers, arrowElement]);
-
-  var _usePopper = usePopper(referenceElement || referenceNode, popperElement, options),
-      state = _usePopper.state,
-      styles = _usePopper.styles,
-      forceUpdate = _usePopper.forceUpdate,
-      update = _usePopper.update;
-
-  var childrenProps = React.useMemo(function () {
-    return {
-      ref: setPopperElement,
-      style: styles.popper,
-      placement: state ? state.placement : placement,
-      hasPopperEscaped: state && state.modifiersData.hide ? state.modifiersData.hide.hasPopperEscaped : null,
-      isReferenceHidden: state && state.modifiersData.hide ? state.modifiersData.hide.isReferenceHidden : null,
-      arrowProps: {
-        style: styles.arrow,
-        ref: setArrowElement
-      },
-      forceUpdate: forceUpdate || NOOP,
-      update: update || NOOP_PROMISE
-    };
-  }, [setPopperElement, setArrowElement, placement, state, styles, update, forceUpdate]);
-  return unwrapArray(children)(childrenProps);
-}
-
-/**
- * Copyright (c) 2014-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * Similar to invariant but only logs a warning if the condition is not met.
- * This can be used to log issues in development environments in critical
- * paths. Removing the logging code for production environments will keep the
- * same logic and follow the same code paths.
- */
-
-var __DEV__ = process.env.NODE_ENV !== 'production';
-
-var warning = function() {};
-
-if (__DEV__) {
-  var printWarning = function printWarning(format, args) {
-    var len = arguments.length;
-    args = new Array(len > 1 ? len - 1 : 0);
-    for (var key = 1; key < len; key++) {
-      args[key - 1] = arguments[key];
+var getPlacement = function (placement, direction, alignment, isRTL) {
+    var _placement = placement;
+    if (direction === 'dropup') {
+        _placement = isRTL ? 'top-end' : 'top-start';
     }
-    var argIndex = 0;
-    var message = 'Warning: ' +
-      format.replace(/%s/g, function() {
-        return args[argIndex++];
-      });
-    if (typeof console !== 'undefined') {
-      console.error(message);
+    if (direction === 'dropup-center') {
+        _placement = 'top';
     }
-    try {
-      // --- Welcome to debugging React ---
-      // This error was thrown as a convenience so that you can use this stack
-      // to find the callsite that caused this warning to fire.
-      throw new Error(message);
-    } catch (x) {}
-  };
-
-  warning = function(condition, format, args) {
-    var len = arguments.length;
-    args = new Array(len > 2 ? len - 2 : 0);
-    for (var key = 2; key < len; key++) {
-      args[key - 2] = arguments[key];
+    if (direction === 'dropend') {
+        _placement = isRTL ? 'left-start' : 'right-start';
     }
-    if (format === undefined) {
-      throw new Error(
-          '`warning(condition, format, ...args)` requires a warning ' +
-          'message argument'
-      );
+    if (direction === 'dropstart') {
+        _placement = isRTL ? 'right-start' : 'left-start';
     }
-    if (!condition) {
-      printWarning.apply(null, [format].concat(args));
+    if (alignment === 'end') {
+        _placement = isRTL ? 'bottom-start' : 'bottom-end';
     }
-  };
-}
-
-var warning_1 = warning;
-
-var warning$1 = /*@__PURE__*/getDefaultExportFromCjs(warning_1);
-
-function Reference(_ref) {
-  var children = _ref.children,
-      innerRef = _ref.innerRef;
-  var setReferenceNode = React.useContext(ManagerReferenceNodeSetterContext);
-  var refHandler = React.useCallback(function (node) {
-    setRef(innerRef, node);
-    safeInvoke(setReferenceNode, node);
-  }, [innerRef, setReferenceNode]); // ran on unmount
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  React.useEffect(function () {
-    return function () {
-      return setRef(innerRef, null);
-    };
-  }, []);
-  React.useEffect(function () {
-    warning$1(Boolean(setReferenceNode), '`Reference` should not be used outside of a `Manager` component.');
-  }, [setReferenceNode]);
-  return unwrapArray(children)({
-    ref: refHandler
-  });
-}
-
-var PopperManagerWrapper = function (_a) {
-    var children = _a.children, popper = _a.popper;
-    return popper ? React__default.createElement(Manager, null, children) : React__default.createElement(React__default.Fragment, null, children);
+    return _placement;
 };
 var CDropdownContext = createContext({});
 var CDropdown = forwardRef(function (_a, ref) {
     var _b;
-    var children = _a.children, alignment = _a.alignment, _c = _a.autoClose, autoClose = _c === void 0 ? true : _c, className = _a.className, dark = _a.dark, direction = _a.direction, onHide = _a.onHide, onShow = _a.onShow, _d = _a.placement, placement = _d === void 0 ? 'bottom-start' : _d, _e = _a.popper, popper = _e === void 0 ? true : _e, _f = _a.portal, portal = _f === void 0 ? false : _f, _g = _a.variant, variant = _g === void 0 ? 'btn-group' : _g, _h = _a.component, component = _h === void 0 ? 'div' : _h, _j = _a.visible, visible = _j === void 0 ? false : _j, rest = __rest(_a, ["children", "alignment", "autoClose", "className", "dark", "direction", "onHide", "onShow", "placement", "popper", "portal", "variant", "component", "visible"]);
+    var children = _a.children, alignment = _a.alignment, _c = _a.autoClose, autoClose = _c === void 0 ? true : _c, className = _a.className, dark = _a.dark, direction = _a.direction, _d = _a.offset, offset = _d === void 0 ? [0, 2] : _d, onHide = _a.onHide, onShow = _a.onShow, _e = _a.placement, placement = _e === void 0 ? 'bottom-start' : _e, _f = _a.popper, popper = _f === void 0 ? true : _f, _g = _a.portal, portal = _g === void 0 ? false : _g, _h = _a.variant, variant = _h === void 0 ? 'btn-group' : _h, _j = _a.component, component = _j === void 0 ? 'div' : _j, _k = _a.visible, visible = _k === void 0 ? false : _k, rest = __rest(_a, ["children", "alignment", "autoClose", "className", "dark", "direction", "offset", "onHide", "onShow", "placement", "popper", "portal", "variant", "component", "visible"]);
     var dropdownRef = useRef(null);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     var dropdownToggleRef = useRef(null);
+    var dropdownMenuRef = useRef(null);
     var forkedRef = useForkedRef(ref, dropdownRef);
-    var _k = useState(visible), _visible = _k[0], setVisible = _k[1];
+    var _l = useState(visible), _visible = _l[0], setVisible = _l[1];
+    var _m = usePopper(), initPopper = _m.initPopper, destroyPopper = _m.destroyPopper;
     var Component = variant === 'nav-item' ? 'li' : component;
     // Disable popper if responsive aligment is set.
     if (typeof alignment === 'object') {
@@ -5608,44 +5196,83 @@ var CDropdown = forwardRef(function (_a, ref) {
     }
     var contextValues = {
         alignment: alignment,
-        autoClose: autoClose,
         dark: dark,
-        direction: direction,
         dropdownToggleRef: dropdownToggleRef,
-        placement: placement,
+        dropdownMenuRef: dropdownMenuRef,
         popper: popper,
         portal: portal,
         variant: variant,
         visible: _visible,
         setVisible: setVisible,
     };
+    var popperConfig = {
+        modifiers: [
+            {
+                name: 'offset',
+                options: {
+                    offset: offset,
+                },
+            },
+        ],
+        placement: getPlacement(placement, direction, alignment, isRTL(dropdownMenuRef.current)),
+    };
     useEffect(function () {
         setVisible(visible);
     }, [visible]);
     useEffect(function () {
-        _visible && onShow && onShow();
-        !_visible && onHide && onHide();
+        if (_visible && dropdownToggleRef.current && dropdownMenuRef.current) {
+            popper && initPopper(dropdownToggleRef.current, dropdownMenuRef.current, popperConfig);
+            window.addEventListener('mouseup', handleMouseUp);
+            window.addEventListener('keyup', handleKeyup);
+            onShow && onShow();
+        }
+        return function () {
+            popper && destroyPopper();
+            window.removeEventListener('mouseup', handleMouseUp);
+            window.removeEventListener('keyup', handleKeyup);
+            onHide && onHide();
+        };
     }, [_visible]);
-    return (React__default.createElement(CDropdownContext.Provider, { value: contextValues },
-        React__default.createElement(PopperManagerWrapper, { popper: popper }, variant === 'input-group' ? (React__default.createElement(React__default.Fragment, null, children)) : (React__default.createElement(Component, __assign({ className: classNames(variant === 'nav-item' ? 'nav-item dropdown' : variant, (_b = {
-                    'dropdown-center': direction === 'center',
-                    '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 handleKeyup = function (event) {
+        if (autoClose === false) {
+            return;
+        }
+        if (event.key === 'Escape') {
+            setVisible(false);
+        }
+    };
+    var handleMouseUp = function (event) {
+        if (!dropdownToggleRef.current || !dropdownMenuRef.current) {
+            return;
+        }
+        if (dropdownToggleRef.current.contains(event.target)) {
+            return;
+        }
+        if (autoClose === true ||
+            (autoClose === 'inside' && dropdownMenuRef.current.contains(event.target)) ||
+            (autoClose === 'outside' && !dropdownMenuRef.current.contains(event.target))) {
+            setTimeout(function () { return setVisible(false); }, 1);
+            return;
+        }
+    };
+    return (React.createElement(CDropdownContext.Provider, { value: contextValues }, variant === 'input-group' ? (React.createElement(React.Fragment, null, children)) : (React.createElement(Component, __assign({ className: classNames(variant === 'nav-item' ? 'nav-item dropdown' : variant, (_b = {
+                'dropdown-center': direction === 'center',
+                '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']);
 CDropdown.propTypes = {
-    // @ts-expect-error TODO: we have to find a solution
     alignment: PropTypes.oneOfType([
         alignmentDirection,
-        PropTypes.shape({ xs: alignmentDirection }),
-        PropTypes.shape({ sm: alignmentDirection }),
-        PropTypes.shape({ md: alignmentDirection }),
-        PropTypes.shape({ lg: alignmentDirection }),
-        PropTypes.shape({ xl: alignmentDirection }),
-        PropTypes.shape({ xxl: 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 }),
     ]),
     autoClose: PropTypes.oneOfType([
         PropTypes.bool,
@@ -5656,6 +5283,7 @@ CDropdown.propTypes = {
     component: PropTypes.elementType,
     dark: PropTypes.bool,
     direction: PropTypes.oneOf(['center', 'dropup', 'dropup-center', 'dropend', 'dropstart']),
+    offset: PropTypes.any,
     onHide: PropTypes.func,
     onShow: PropTypes.func,
     placement: placementPropType,
@@ -5668,7 +5296,7 @@ CDropdown.displayName = 'CDropdown';
 
 var CDropdownDivider = forwardRef(function (_a, ref) {
     var className = _a.className, rest = __rest(_a, ["className"]);
-    return React__default.createElement("hr", __assign({ className: classNames('dropdown-divider', className) }, rest, { ref: ref }));
+    return React.createElement("hr", __assign({ className: classNames('dropdown-divider', className) }, rest, { ref: ref }));
 });
 CDropdownDivider.propTypes = {
     className: PropTypes.string,
@@ -5677,7 +5305,7 @@ CDropdownDivider.displayName = 'CDropdownDivider';
 
 var CDropdownHeader = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, _b = _a.component, Component = _b === void 0 ? 'h6' : _b, rest = __rest(_a, ["children", "className", "component"]);
-    return (React__default.createElement(Component, __assign({ className: classNames('dropdown-header', className) }, rest, { ref: ref }), children));
+    return (React.createElement(Component, __assign({ className: classNames('dropdown-header', className) }, rest, { ref: ref }), children));
 });
 CDropdownHeader.propTypes = {
     children: PropTypes.node,
@@ -5688,7 +5316,7 @@ CDropdownHeader.displayName = 'CDropdownHeader';
 
 var CDropdownItem = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, _b = _a.component, component = _b === void 0 ? 'a' : _b, rest = __rest(_a, ["children", "className", "component"]);
-    return (React__default.createElement(CLink, __assign({ className: classNames('dropdown-item', className), component: component }, rest, { ref: ref }), children));
+    return (React.createElement(CLink, __assign({ className: classNames('dropdown-item', className), component: component }, rest, { ref: ref }), children));
 });
 CDropdownItem.propTypes = {
     children: PropTypes.node,
@@ -5699,7 +5327,7 @@ CDropdownItem.displayName = 'CDropdownItem';
 
 var CDropdownItemPlain = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, _b = _a.component, Component = _b === void 0 ? 'span' : _b, rest = __rest(_a, ["children", "className", "component"]);
-    return (React__default.createElement(Component, __assign({ className: classNames('dropdown-item-text', className) }, rest, { ref: ref }), children));
+    return (React.createElement(Component, __assign({ className: classNames('dropdown-item-text', className) }, rest, { ref: ref }), children));
 });
 CDropdownItemPlain.propTypes = {
     children: PropTypes.node,
@@ -5720,74 +5348,23 @@ var alignmentClassNames = function (alignment) {
     }
     return classNames;
 };
-var CDropdownMenu = function (_a) {
+var CDropdownMenu = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, _b = _a.component, Component = _b === void 0 ? 'ul' : _b, rest = __rest(_a, ["children", "className", "component"]);
-    var _c = useContext(CDropdownContext), alignment = _c.alignment, autoClose = _c.autoClose, dark = _c.dark, direction = _c.direction, dropdownToggleRef = _c.dropdownToggleRef, placement = _c.placement, popper = _c.popper, portal = _c.portal, visible = _c.visible, setVisible = _c.setVisible;
-    var dropdownMenuRef = useRef(null);
-    useEffect(function () {
-        visible && window.addEventListener('mouseup', handleMouseUp);
-        visible && window.addEventListener('keyup', handleKeyup);
-        return function () {
-            window.removeEventListener('mouseup', handleMouseUp);
-            window.removeEventListener('keyup', handleKeyup);
-        };
-    }, [visible]);
-    var handleKeyup = function (event) {
-        if (autoClose === false) {
-            return;
-        }
-        if (event.key === 'Escape') {
-            setVisible(false);
-        }
-    };
-    var handleMouseUp = function (event) {
-        var _a, _b;
-        if (dropdownToggleRef && dropdownToggleRef.current.contains(event.target)) {
-            return;
-        }
-        if (autoClose === true ||
-            (autoClose === 'inside' && ((_a = dropdownMenuRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) ||
-            (autoClose === 'outside' && !((_b = dropdownMenuRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target)))) {
-            setTimeout(function () { return setVisible(false); }, 1);
-            return;
-        }
-    };
-    var _placement = placement;
-    if (direction === 'center') {
-        _placement = 'bottom';
-    }
-    if (direction === 'dropup') {
-        _placement = isRTL(dropdownMenuRef.current) ? 'top-end' : 'top-start';
-    }
-    if (direction === 'dropup-center') {
-        _placement = 'top';
-    }
-    if (direction === 'dropend') {
-        _placement = isRTL(dropdownMenuRef.current) ? 'left-start' : 'right-start';
-    }
-    if (direction === 'dropstart') {
-        _placement = isRTL(dropdownMenuRef.current) ? 'right-start' : 'left-start';
-    }
-    if (alignment === 'end') {
-        _placement = isRTL(dropdownMenuRef.current) ? 'bottom-start' : 'bottom-end';
-    }
-    var dropdownMenuComponent = function (style, ref) { return (React__default.createElement(CConditionalPortal, { portal: portal !== null && portal !== void 0 ? portal : false },
-        React__default.createElement(Component, __assign({ className: classNames('dropdown-menu', {
+    var _c = useContext(CDropdownContext), alignment = _c.alignment, dark = _c.dark, dropdownMenuRef = _c.dropdownMenuRef, popper = _c.popper, portal = _c.portal, visible = _c.visible;
+    var forkedRef = useForkedRef(ref, dropdownMenuRef);
+    return (React.createElement(CConditionalPortal, { portal: portal !== null && portal !== void 0 ? portal : false },
+        React.createElement(Component, __assign({ className: classNames('dropdown-menu', {
                 'dropdown-menu-dark': dark,
                 show: visible,
-            }, alignment && alignmentClassNames(alignment), className), ref: ref, style: style, role: "menu", "aria-hidden": !visible }, (!popper && { 'data-coreui-popper': 'static' }), rest), Component === 'ul'
-            ? React__default.Children.map(children, function (child, index) {
-                if (React__default.isValidElement(child)) {
-                    return React__default.createElement("li", { key: index }, React__default.cloneElement(child));
+            }, alignment && alignmentClassNames(alignment), className), ref: forkedRef, role: "menu", "aria-hidden": !visible }, (!popper && { 'data-coreui-popper': 'static' }), rest), Component === 'ul'
+            ? React.Children.map(children, function (child, index) {
+                if (React.isValidElement(child)) {
+                    return React.createElement("li", { key: index }, React.cloneElement(child));
                 }
                 return;
             })
-            : children))); };
-    return popper && visible ? (React__default.createElement(Popper, { innerRef: dropdownMenuRef, placement: _placement }, function (_a) {
-        var ref = _a.ref, style = _a.style;
-        return dropdownMenuComponent(style, ref);
-    })) : (dropdownMenuComponent());
-};
+            : children)));
+});
 CDropdownMenu.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
@@ -5797,7 +5374,7 @@ 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(_a, ["children", "caret", "custom", "className", "split", "trigger"]);
-    var _d = useContext(CDropdownContext), dropdownToggleRef = _d.dropdownToggleRef, popper = _d.popper, variant = _d.variant, visible = _d.visible, setVisible = _d.setVisible;
+    var _d = useContext(CDropdownContext), dropdownToggleRef = _d.dropdownToggleRef, variant = _d.variant, visible = _d.visible, setVisible = _d.setVisible;
     var triggers = __assign(__assign({}, ((trigger === 'click' || trigger.includes('click')) && {
         onClick: function (event) {
             event.preventDefault();
@@ -5813,22 +5390,18 @@ var CDropdownToggle = function (_a) {
             'nav-link': variant === 'nav-item',
         }, className), 'aria-expanded': visible }, (!rest.disabled && __assign({}, triggers)));
     // We use any because Toggler can be `a` as well as `button`.
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    var Toggler = function (ref) {
-        if (custom && React__default.isValidElement(children)) {
-            return (React__default.createElement(React__default.Fragment, null, React__default.cloneElement(children, __assign(__assign({ 'aria-expanded': visible }, (!rest.disabled && __assign({}, triggers))), { ref: useForkedRef(ref, dropdownToggleRef) }))));
+    var Toggler = function () {
+        if (custom && React.isValidElement(children)) {
+            return (React.createElement(React.Fragment, null, React.cloneElement(children, __assign(__assign({ 'aria-expanded': visible }, (!rest.disabled && __assign({}, triggers))), { ref: dropdownToggleRef }))));
         }
         if (variant === 'nav-item') {
-            return (React__default.createElement("a", __assign({ href: "#" }, togglerProps, { ref: useForkedRef(ref, dropdownToggleRef) }), children));
+            return (React.createElement("a", __assign({ href: "#" }, togglerProps, { ref: dropdownToggleRef }), children));
         }
-        return (React__default.createElement(CButton, __assign({ type: "button" }, togglerProps, { tabIndex: 0 }, rest, { ref: useForkedRef(ref, dropdownToggleRef) }),
+        return (React.createElement(CButton, __assign({ type: "button" }, togglerProps, { tabIndex: 0 }, rest, { ref: dropdownToggleRef }),
             children,
-            split && React__default.createElement("span", { className: "visually-hidden" }, "Toggle Dropdown")));
+            split && React.createElement("span", { className: "visually-hidden" }, "Toggle Dropdown")));
     };
-    return popper ? React__default.createElement(Reference, null, function (_a) {
-        var ref = _a.ref;
-        return Toggler(ref);
-    }) : Toggler(dropdownToggleRef);
+    return React.createElement(Toggler, null);
 };
 CDropdownToggle.propTypes = {
     caret: PropTypes.bool,
@@ -5843,7 +5416,7 @@ CDropdownToggle.displayName = 'CDropdownToggle';
 var CFooter = forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, position = _a.position, rest = __rest(_a, ["children", "className", "position"]);
-    return (React__default.createElement("div", __assign({ className: classNames('footer', (_b = {}, _b["footer-".concat(position)] = position, _b), className) }, rest, { ref: ref }), children));
+    return (React.createElement("div", __assign({ className: classNames('footer', (_b = {}, _b["footer-".concat(position)] = position, _b), className) }, rest, { ref: ref }), children));
 });
 CFooter.propTypes = {
     children: PropTypes.node,
@@ -5854,7 +5427,7 @@ CFooter.displayName = 'CFooter';
 
 var CForm = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, validated = _a.validated, rest = __rest(_a, ["children", "className", "validated"]);
-    return (React__default.createElement("form", __assign({ className: classNames({ 'was-validated': validated }, className) || undefined }, rest, { ref: ref }), children));
+    return (React.createElement("form", __assign({ className: classNames({ 'was-validated': validated }, className) || undefined }, rest, { ref: ref }), children));
 });
 CForm.propTypes = {
     children: PropTypes.node,
@@ -5866,7 +5439,7 @@ CForm.displayName = 'CForm';
 var CFormFeedback = forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, _c = _a.component, Component = _c === void 0 ? 'div' : _c, invalid = _a.invalid, tooltip = _a.tooltip, valid = _a.valid, rest = __rest(_a, ["children", "className", "component", "invalid", "tooltip", "valid"]);
-    return (React__default.createElement(Component, __assign({ className: classNames((_b = {},
+    return (React.createElement(Component, __assign({ className: classNames((_b = {},
             _b["invalid-".concat(tooltip ? 'tooltip' : 'feedback')] = invalid,
             _b["valid-".concat(tooltip ? 'tooltip' : 'feedback')] = valid,
             _b), className) }, rest, { ref: ref }), children));
@@ -5883,10 +5456,10 @@ CFormFeedback.displayName = 'CFormFeedback';
 
 var CFormControlValidation = function (_a) {
     var describedby = _a.describedby, feedback = _a.feedback, feedbackInvalid = _a.feedbackInvalid, feedbackValid = _a.feedbackValid, invalid = _a.invalid, tooltipFeedback = _a.tooltipFeedback, valid = _a.valid;
-    return (React__default.createElement(React__default.Fragment, null,
-        feedback && (valid || invalid) && (React__default.createElement(CFormFeedback, __assign({}, (invalid && { id: describedby }), { invalid: invalid, tooltip: tooltipFeedback, valid: valid }), feedback)),
-        feedbackInvalid && (React__default.createElement(CFormFeedback, { id: describedby, invalid: true, tooltip: tooltipFeedback }, feedbackInvalid)),
-        feedbackValid && (React__default.createElement(CFormFeedback, { valid: true, tooltip: tooltipFeedback }, feedbackValid))));
+    return (React.createElement(React.Fragment, null,
+        feedback && (valid || invalid) && (React.createElement(CFormFeedback, __assign({}, (invalid && { id: describedby }), { invalid: invalid, tooltip: tooltipFeedback, valid: valid }), feedback)),
+        feedbackInvalid && (React.createElement(CFormFeedback, { id: describedby, invalid: true, tooltip: tooltipFeedback }, feedbackInvalid)),
+        feedbackValid && (React.createElement(CFormFeedback, { valid: true, tooltip: tooltipFeedback }, feedbackValid))));
 };
 CFormControlValidation.propTypes = {
     describedby: PropTypes.string,
@@ -5901,7 +5474,7 @@ CFormControlValidation.displayName = 'CFormControlValidation';
 
 var CFormLabel = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, customClassName = _a.customClassName, rest = __rest(_a, ["children", "className", "customClassName"]);
-    return (React__default.createElement("label", __assign({ className: customClassName !== null && customClassName !== void 0 ? customClassName : classNames('form-label', className) }, rest, { ref: ref }), children));
+    return (React.createElement("label", __assign({ className: customClassName !== null && customClassName !== void 0 ? customClassName : classNames('form-label', className) }, rest, { ref: ref }), children));
 });
 CFormLabel.propTypes = {
     children: PropTypes.node,
@@ -5919,15 +5492,15 @@ var CFormCheck = forwardRef(function (_a, ref) {
             inputRef.current.indeterminate = indeterminate;
         }
     }, [indeterminate, inputRef.current]);
-    var FormControl = function () { return (React__default.createElement("input", __assign({ type: type, className: classNames(button ? 'btn-check' : 'form-check-input', {
+    var FormControl = function () { return (React.createElement("input", __assign({ type: type, className: classNames(button ? 'btn-check' : 'form-check-input', {
             'is-invalid': invalid,
             'is-valid': valid,
             'me-2': hitArea,
         }), id: id }, rest, { ref: forkedRef }))); };
-    var FormValidation = function () { return (React__default.createElement(CFormControlValidation, { describedby: rest['aria-describedby'], feedback: feedback, feedbackInvalid: feedbackInvalid, feedbackValid: feedbackValid, floatingLabel: floatingLabel, invalid: invalid, tooltipFeedback: tooltipFeedback, valid: valid })); };
+    var FormValidation = function () { return (React.createElement(CFormControlValidation, { describedby: rest['aria-describedby'], feedback: feedback, feedbackInvalid: feedbackInvalid, feedbackValid: feedbackValid, floatingLabel: floatingLabel, invalid: invalid, tooltipFeedback: tooltipFeedback, valid: valid })); };
     var FormLabel = function () {
         var _a;
-        return (React__default.createElement(CFormLabel, __assign({ customClassName: classNames(button
+        return (React.createElement(CFormLabel, __assign({ customClassName: classNames(button
                 ? classNames('btn', button.variant ? "btn-".concat(button.variant, "-").concat(button.color) : "btn-".concat(button.color), (_a = {},
                     _a["btn-".concat(button.size)] = button.size,
                     _a), "".concat(button.shape))
@@ -5935,35 +5508,35 @@ var CFormCheck = forwardRef(function (_a, ref) {
     };
     var FormCheck = function () {
         if (button) {
-            return (React__default.createElement(React__default.Fragment, null,
-                React__default.createElement(FormControl, null),
-                label && React__default.createElement(FormLabel, null),
-                React__default.createElement(FormValidation, null)));
+            return (React.createElement(React.Fragment, null,
+                React.createElement(FormControl, null),
+                label && React.createElement(FormLabel, null),
+                React.createElement(FormValidation, null)));
         }
         if (label) {
-            return hitArea ? (React__default.createElement(React__default.Fragment, null,
-                React__default.createElement(FormControl, null),
-                React__default.createElement(CFormLabel, __assign({ customClassName: classNames('form-check-label stretched-link', className) }, (id && { htmlFor: id })), label),
-                React__default.createElement(FormValidation, null))) : (React__default.createElement("div", { className: classNames('form-check', {
+            return hitArea ? (React.createElement(React.Fragment, null,
+                React.createElement(FormControl, null),
+                React.createElement(CFormLabel, __assign({ customClassName: classNames('form-check-label stretched-link', className) }, (id && { htmlFor: id })), label),
+                React.createElement(FormValidation, null))) : (React.createElement("div", { className: classNames('form-check', {
                     'form-check-inline': inline,
                     'form-check-reverse': reverse,
                     'is-invalid': invalid,
                     'is-valid': valid,
                 }, className) },
-                React__default.createElement(FormControl, null),
-                React__default.createElement(FormLabel, null),
-                React__default.createElement(FormValidation, null)));
+                React.createElement(FormControl, null),
+                React.createElement(FormLabel, null),
+                React.createElement(FormValidation, null)));
         }
-        return React__default.createElement(FormControl, null);
+        return React.createElement(FormControl, null);
     };
-    return React__default.createElement(FormCheck, null);
+    return React.createElement(FormCheck, null);
 });
 CFormCheck.propTypes = __assign({ 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.displayName = 'CFormCheck';
 
 var CFormFloating = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
-    return (React__default.createElement("div", __assign({ className: classNames('form-floating', className) }, rest, { ref: ref }), children));
+    return (React.createElement("div", __assign({ className: classNames('form-floating', className) }, rest, { ref: ref }), children));
 });
 CFormFloating.propTypes = {
     children: PropTypes.node,
@@ -5973,7 +5546,7 @@ CFormFloating.displayName = 'CFormFloating';
 
 var CFormText = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, _b = _a.component, Component = _b === void 0 ? 'div' : _b, rest = __rest(_a, ["children", "className", "component"]);
-    return (React__default.createElement(Component, __assign({ className: classNames('form-text', className) }, rest, { ref: ref }), children));
+    return (React.createElement(Component, __assign({ className: classNames('form-text', className) }, rest, { ref: ref }), children));
 });
 CFormText.propTypes = {
     children: PropTypes.node,
@@ -5984,16 +5557,16 @@ CFormText.displayName = 'CFormText';
 
 var CFormControlWrapper = function (_a) {
     var children = _a.children, describedby = _a.describedby, feedback = _a.feedback, feedbackInvalid = _a.feedbackInvalid, feedbackValid = _a.feedbackValid, floatingClassName = _a.floatingClassName, floatingLabel = _a.floatingLabel, id = _a.id, invalid = _a.invalid, label = _a.label, text = _a.text, tooltipFeedback = _a.tooltipFeedback, valid = _a.valid;
-    var FormControlValidation = function () { return (React__default.createElement(CFormControlValidation, { describedby: describedby, feedback: feedback, feedbackInvalid: feedbackInvalid, feedbackValid: feedbackValid, floatingLabel: floatingLabel, invalid: invalid, tooltipFeedback: tooltipFeedback, valid: valid })); };
-    return floatingLabel ? (React__default.createElement(CFormFloating, { className: floatingClassName },
+    var FormControlValidation = function () { return (React.createElement(CFormControlValidation, { describedby: describedby, feedback: feedback, feedbackInvalid: feedbackInvalid, feedbackValid: feedbackValid, floatingLabel: floatingLabel, invalid: invalid, tooltipFeedback: tooltipFeedback, valid: valid })); };
+    return floatingLabel ? (React.createElement(CFormFloating, { className: floatingClassName },
         children,
-        React__default.createElement(CFormLabel, { htmlFor: id }, label || floatingLabel),
-        text && React__default.createElement(CFormText, { id: describedby }, text),
-        React__default.createElement(FormControlValidation, null))) : (React__default.createElement(React__default.Fragment, null,
-        label && React__default.createElement(CFormLabel, { htmlFor: id }, label),
+        React.createElement(CFormLabel, { htmlFor: id }, label || floatingLabel),
+        text && React.createElement(CFormText, { id: describedby }, text),
+        React.createElement(FormControlValidation, null))) : (React.createElement(React.Fragment, null,
+        label && React.createElement(CFormLabel, { htmlFor: id }, label),
         children,
-        text && React__default.createElement(CFormText, { id: describedby }, text),
-        React__default.createElement(FormControlValidation, null)));
+        text && React.createElement(CFormText, { id: describedby }, text),
+        React.createElement(FormControlValidation, null)));
 };
 CFormControlWrapper.propTypes = __assign({ 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.displayName = 'CFormControlWrapper';
@@ -6006,8 +5579,8 @@ var CFormInput = forwardRef(function (_a, ref) {
         var timeOutId = setTimeout(function () { return value && onChange && onChange(value); }, typeof delay === 'number' ? delay : 500);
         return function () { return clearTimeout(timeOutId); };
     }, [value]);
-    return (React__default.createElement(CFormControlWrapper, { describedby: rest['aria-describedby'], feedback: feedback, feedbackInvalid: feedbackInvalid, feedbackValid: feedbackValid, floatingClassName: floatingClassName, floatingLabel: floatingLabel, id: id, invalid: invalid, label: label, text: text, tooltipFeedback: tooltipFeedback, valid: valid },
-        React__default.createElement("input", __assign({ className: classNames(plainText ? 'form-control-plaintext' : 'form-control', (_b = {},
+    return (React.createElement(CFormControlWrapper, { describedby: rest['aria-describedby'], feedback: feedback, feedbackInvalid: feedbackInvalid, feedbackValid: feedbackValid, floatingClassName: floatingClassName, floatingLabel: floatingLabel, id: id, invalid: invalid, label: label, text: text, tooltipFeedback: tooltipFeedback, valid: valid },
+        React.createElement("input", __assign({ className: classNames(plainText ? 'form-control-plaintext' : 'form-control', (_b = {},
                 _b["form-control-".concat(size)] = size,
                 _b['form-control-color'] = type === 'color',
                 _b['is-invalid'] = invalid,
@@ -6019,9 +5592,9 @@ CFormInput.displayName = 'CFormInput';
 
 var CFormRange = forwardRef(function (_a, ref) {
     var className = _a.className, label = _a.label, rest = __rest(_a, ["className", "label"]);
-    return (React__default.createElement(React__default.Fragment, null,
-        label && React__default.createElement(CFormLabel, { htmlFor: rest.id }, label),
-        React__default.createElement("input", __assign({ type: "range", className: classNames('form-range', className) }, rest, { ref: ref }))));
+    return (React.createElement(React.Fragment, null,
+        label && React.createElement(CFormLabel, { htmlFor: rest.id }, label),
+        React.createElement("input", __assign({ type: "range", className: classNames('form-range', className) }, rest, { ref: ref }))));
 });
 CFormRange.propTypes = {
     className: PropTypes.string,
@@ -6032,14 +5605,14 @@ CFormRange.displayName = 'CFormRange';
 var CFormSelect = forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, feedback = _a.feedback, feedbackInvalid = _a.feedbackInvalid, feedbackValid = _a.feedbackValid, floatingClassName = _a.floatingClassName, floatingLabel = _a.floatingLabel, htmlSize = _a.htmlSize, id = _a.id, invalid = _a.invalid, label = _a.label, options = _a.options, size = _a.size, text = _a.text, tooltipFeedback = _a.tooltipFeedback, valid = _a.valid, rest = __rest(_a, ["children", "className", "feedback", "feedbackInvalid", "feedbackValid", "floatingClassName", "floatingLabel", "htmlSize", "id", "invalid", "label", "options", "size", "text", "tooltipFeedback", "valid"]);
-    return (React__default.createElement(CFormControlWrapper, { describedby: rest['aria-describedby'], feedback: feedback, feedbackInvalid: feedbackInvalid, feedbackValid: feedbackValid, floatingClassName: floatingClassName, floatingLabel: floatingLabel, id: id, invalid: invalid, label: label, text: text, tooltipFeedback: tooltipFeedback, valid: valid },
-        React__default.createElement("select", __assign({ id: id, className: classNames('form-select', (_b = {},
+    return (React.createElement(CFormControlWrapper, { describedby: rest['aria-describedby'], feedback: feedback, feedbackInvalid: feedbackInvalid, feedbackValid: feedbackValid, floatingClassName: floatingClassName, floatingLabel: floatingLabel, id: id, invalid: invalid, label: label, text: text, tooltipFeedback: tooltipFeedback, valid: valid },
+        React.createElement("select", __assign({ id: id, className: classNames('form-select', (_b = {},
                 _b["form-select-".concat(size)] = size,
                 _b['is-invalid'] = invalid,
                 _b['is-valid'] = valid,
                 _b), className), size: htmlSize }, rest, { ref: ref }), options
             ? options.map(function (option, index) {
-                return (React__default.createElement("option", __assign({}, (typeof option === 'object' &&
+                return (React.createElement("option", __assign({}, (typeof option === 'object' &&
                     option.disabled && { disabled: option.disabled }), (typeof option === 'object' &&
                     option.value !== undefined && { value: option.value }), { key: index }), typeof option === 'string' ? option : option.label));
             })
@@ -6051,18 +5624,18 @@ CFormSelect.displayName = 'CFormSelect';
 var CFormSwitch = forwardRef(function (_a, ref) {
     var _b;
     var className = _a.className, id = _a.id, invalid = _a.invalid, label = _a.label, reverse = _a.reverse, size = _a.size, _c = _a.type, type = _c === void 0 ? 'checkbox' : _c, valid = _a.valid, rest = __rest(_a, ["className", "id", "invalid", "label", "reverse", "size", "type", "valid"]);
-    return (React__default.createElement("div", { className: classNames('form-check form-switch', (_b = {
+    return (React.createElement("div", { className: classNames('form-check form-switch', (_b = {
                 'form-check-reverse': reverse
             },
             _b["form-switch-".concat(size)] = size,
             _b['is-invalid'] = invalid,
             _b['is-valid'] = valid,
             _b), className) },
-        React__default.createElement("input", __assign({ type: type, className: classNames('form-check-input', {
+        React.createElement("input", __assign({ type: type, className: classNames('form-check-input', {
                 'is-invalid': invalid,
                 'is-valid': valid,
             }), id: id }, rest, { ref: ref })),
-        label && (React__default.createElement(CFormLabel, __assign({ customClassName: "form-check-label" }, (id && { htmlFor: id })), label))));
+        label && (React.createElement(CFormLabel, __assign({ customClassName: "form-check-label" }, (id && { htmlFor: id })), label))));
 });
 CFormSwitch.propTypes = {
     className: PropTypes.string,
@@ -6078,8 +5651,8 @@ CFormSwitch.displayName = 'CFormSwitch';
 
 var CFormTextarea = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, feedback = _a.feedback, feedbackInvalid = _a.feedbackInvalid, feedbackValid = _a.feedbackValid, floatingClassName = _a.floatingClassName, floatingLabel = _a.floatingLabel, id = _a.id, invalid = _a.invalid, label = _a.label, plainText = _a.plainText, text = _a.text, tooltipFeedback = _a.tooltipFeedback, valid = _a.valid, rest = __rest(_a, ["children", "className", "feedback", "feedbackInvalid", "feedbackValid", "floatingClassName", "floatingLabel", "id", "invalid", "label", "plainText", "text", "tooltipFeedback", "valid"]);
-    return (React__default.createElement(CFormControlWrapper, { describedby: rest['aria-describedby'], feedback: feedback, feedbackInvalid: feedbackInvalid, feedbackValid: feedbackValid, floatingClassName: floatingClassName, floatingLabel: floatingLabel, id: id, invalid: invalid, label: label, text: text, tooltipFeedback: tooltipFeedback, valid: valid },
-        React__default.createElement("textarea", __assign({ className: classNames(plainText ? 'form-control-plaintext' : 'form-control', {
+    return (React.createElement(CFormControlWrapper, { describedby: rest['aria-describedby'], feedback: feedback, feedbackInvalid: feedbackInvalid, feedbackValid: feedbackValid, floatingClassName: floatingClassName, floatingLabel: floatingLabel, id: id, invalid: invalid, label: label, text: text, tooltipFeedback: tooltipFeedback, valid: valid },
+        React.createElement("textarea", __assign({ className: classNames(plainText ? 'form-control-plaintext' : 'form-control', {
                 'is-invalid': invalid,
                 'is-valid': valid,
             }, className), id: id }, rest, { ref: ref }), children)));
@@ -6090,7 +5663,7 @@ CFormTextarea.displayName = 'CFormTextarea';
 var CInputGroup = forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, size = _a.size, rest = __rest(_a, ["children", "className", "size"]);
-    return (React__default.createElement("div", __assign({ className: classNames('input-group', (_b = {},
+    return (React.createElement("div", __assign({ className: classNames('input-group', (_b = {},
             _b["input-group-".concat(size)] = size,
             _b), className) }, rest, { ref: ref }), children));
 });
@@ -6103,7 +5676,7 @@ CInputGroup.displayName = 'CInputGroup';
 
 var CInputGroupText = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, _b = _a.component, Component = _b === void 0 ? 'span' : _b, rest = __rest(_a, ["children", "className", "component"]);
-    return (React__default.createElement(Component, __assign({ className: classNames('input-group-text', className) }, rest, { ref: ref }), children));
+    return (React.createElement(Component, __assign({ className: classNames('input-group-text', className) }, rest, { ref: ref }), children));
 });
 CInputGroupText.propTypes = {
     children: PropTypes.node,
@@ -6148,7 +5721,7 @@ var CCol = forwardRef(function (_a, ref) {
             }
         }
     });
-    return (React__default.createElement("div", __assign({ className: classNames(repsonsiveClassNames.length > 0 ? repsonsiveClassNames : 'col', className) }, rest, { ref: ref }), children));
+    return (React.createElement("div", __assign({ className: classNames(repsonsiveClassNames.length > 0 ? repsonsiveClassNames : 'col', className) }, rest, { ref: ref }), children));
 });
 var span = PropTypes.oneOfType([
     PropTypes.bool,
@@ -6196,7 +5769,7 @@ var CContainer = forwardRef(function (_a, ref) {
         delete rest[bp];
         breakpoint && repsonsiveClassNames.push("container-".concat(bp));
     });
-    return (React__default.createElement("div", __assign({ className: classNames(repsonsiveClassNames.length > 0 ? repsonsiveClassNames : 'container', className) }, rest, { ref: ref }), children));
+    return (React.createElement("div", __assign({ className: classNames(repsonsiveClassNames.length > 0 ? repsonsiveClassNames : 'container', className) }, rest, { ref: ref }), children));
 });
 CContainer.propTypes = {
     children: PropTypes.node,
@@ -6240,7 +5813,7 @@ var CRow = forwardRef(function (_a, ref) {
             }
         }
     });
-    return (React__default.createElement("div", { className: classNames('row', repsonsiveClassNames, className), ref: ref }, children));
+    return (React.createElement("div", { className: classNames('row', repsonsiveClassNames, className), ref: ref }, children));
 });
 var bp = PropTypes.shape({
     cols: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.string]),
@@ -6263,7 +5836,7 @@ CRow.displayName = 'CRow';
 var CHeader = forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, container = _a.container, position = _a.position, rest = __rest(_a, ["children", "className", "container", "position"]);
-    return (React__default.createElement("div", __assign({ className: classNames('header', (_b = {}, _b["header-".concat(position)] = position, _b), className) }, rest, { ref: ref }), container ? (React__default.createElement("div", { className: typeof container === 'string' ? "container-".concat(container) : 'container' }, children)) : (React__default.createElement(React__default.Fragment, null, children))));
+    return (React.createElement("div", __assign({ className: classNames('header', (_b = {}, _b["header-".concat(position)] = position, _b), className) }, rest, { ref: ref }), container ? (React.createElement("div", { className: typeof container === 'string' ? "container-".concat(container) : 'container' }, children)) : (React.createElement(React.Fragment, null, children))));
 });
 CHeader.propTypes = {
     children: PropTypes.node,
@@ -6285,7 +5858,7 @@ CHeader.displayName = 'CHeader';
 
 var CHeaderBrand = forwardRef(function (_a, ref) {
     var children = _a.children, _b = _a.component, Component = _b === void 0 ? 'a' : _b, className = _a.className, rest = __rest(_a, ["children", "component", "className"]);
-    return (React__default.createElement(Component, __assign({ className: classNames('header-brand', className) }, rest, { ref: ref }), children));
+    return (React.createElement(Component, __assign({ className: classNames('header-brand', className) }, rest, { ref: ref }), children));
 });
 CHeaderBrand.propTypes = {
     children: PropTypes.node,
@@ -6296,7 +5869,7 @@ CHeaderBrand.displayName = 'CHeaderBrand';
 
 var CHeaderDivider = forwardRef(function (_a, ref) {
     var className = _a.className, rest = __rest(_a, ["className"]);
-    return React__default.createElement("div", __assign({ className: classNames('header-divider', className) }, rest, { ref: ref }));
+    return React.createElement("div", __assign({ className: classNames('header-divider', className) }, rest, { ref: ref }));
 });
 CHeaderDivider.propTypes = {
     className: PropTypes.string,
@@ -6305,7 +5878,7 @@ CHeaderDivider.displayName = 'CHeaderDivider';
 
 var CHeaderNav = forwardRef(function (_a, ref) {
     var children = _a.children, _b = _a.component, Component = _b === void 0 ? 'ul' : _b, className = _a.className, rest = __rest(_a, ["children", "component", "className"]);
-    return (React__default.createElement(Component, __assign({ className: classNames('header-nav', className), role: "navigation" }, rest, { ref: ref }), children));
+    return (React.createElement(Component, __assign({ className: classNames('header-nav', className), role: "navigation" }, rest, { ref: ref }), children));
 });
 CHeaderNav.propTypes = {
     children: PropTypes.node,
@@ -6316,7 +5889,7 @@ CHeaderNav.displayName = 'CHeaderNav';
 
 var CHeaderText = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
-    return (React__default.createElement("span", __assign({ className: classNames('header-text', className) }, rest, { ref: ref }), children));
+    return (React.createElement("span", __assign({ className: classNames('header-text', className) }, rest, { ref: ref }), children));
 });
 CHeaderText.propTypes = {
     children: PropTypes.node,
@@ -6326,7 +5899,7 @@ CHeaderText.displayName = 'CHeaderText';
 
 var CHeaderToggler = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
-    return (React__default.createElement("button", __assign({ type: "button", className: classNames('header-toggler', className) }, rest, { ref: ref }), children !== null && children !== void 0 ? children : React__default.createElement("span", { className: "header-toggler-icon" })));
+    return (React.createElement("button", __assign({ type: "button", className: classNames('header-toggler', className) }, rest, { ref: ref }), children !== null && children !== void 0 ? children : React.createElement("span", { className: "header-toggler-icon" })));
 });
 CHeaderToggler.propTypes = {
     children: PropTypes.node,
@@ -6337,7 +5910,7 @@ CHeaderToggler.displayName = 'CHeaderToggler';
 var CImage = forwardRef(function (_a, ref) {
     var _b;
     var align = _a.align, className = _a.className, fluid = _a.fluid, rounded = _a.rounded, thumbnail = _a.thumbnail, rest = __rest(_a, ["align", "className", "fluid", "rounded", "thumbnail"]);
-    return (React__default.createElement("img", __assign({ className: classNames((_b = {},
+    return (React.createElement("img", __assign({ className: classNames((_b = {},
             _b["float-".concat(align)] = align && (align === 'start' || align === 'end'),
             _b['d-block mx-auto'] = align && align === 'center',
             _b['img-fluid'] = fluid,
@@ -6357,7 +5930,7 @@ CImage.displayName = 'CImage';
 var CListGroup = forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, _c = _a.component, Component = _c === void 0 ? 'ul' : _c, flush = _a.flush, layout = _a.layout;
-    return (React__default.createElement(Component, { className: classNames('list-group', (_b = {
+    return (React.createElement(Component, { className: classNames('list-group', (_b = {
                 'list-group-flush': flush
             },
             _b["list-group-".concat(layout)] = layout,
@@ -6389,7 +5962,7 @@ var CListGroupItem = forwardRef(function (_a, ref) {
         component: component,
         ref: ref,
     })), (active && { 'aria-current': true })), (disabled && { 'aria-disabled': true })), rest);
-    return (React__default.createElement(Component, __assign({ className: classNames('list-group-item', (_b = {},
+    return (React.createElement(Component, __assign({ className: classNames('list-group-item', (_b = {},
             _b["list-group-item-".concat(color)] = color,
             _b['list-group-item-action'] = component === 'a' || component === 'button',
             _b.active = active,
@@ -6408,7 +5981,7 @@ CListGroupItem.displayName = 'CListGroupItem';
 
 var CModalContent = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
-    return (React__default.createElement("div", __assign({ className: classNames('modal-content', className) }, rest, { ref: ref }), children));
+    return (React.createElement("div", __assign({ className: classNames('modal-content', className) }, rest, { ref: ref }), children));
 });
 CModalContent.propTypes = {
     children: PropTypes.node,
@@ -6419,7 +5992,7 @@ CModalContent.displayName = 'CModalContent';
 var CModalDialog = forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, alignment = _a.alignment, className = _a.className, fullscreen = _a.fullscreen, scrollable = _a.scrollable, size = _a.size, rest = __rest(_a, ["children", "alignment", "className", "fullscreen", "scrollable", "size"]);
-    return (React__default.createElement("div", __assign({ className: classNames('modal-dialog', (_b = {
+    return (React.createElement("div", __assign({ className: classNames('modal-dialog', (_b = {
                 'modal-dialog-centered': alignment === 'center'
             },
             _b[typeof fullscreen === 'boolean'
@@ -6515,18 +6088,18 @@ var CModal = forwardRef(function (_a, ref) {
             handleDismiss();
         }
     };
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(Transition$1, { in: _visible, mountOnEnter: true, nodeRef: modalRef, onEnter: onShow, onExit: onClose, unmountOnExit: unmountOnClose, timeout: transition ? duration : 0 }, function (state) { return (React__default.createElement(CConditionalPortal, { portal: portal },
-            React__default.createElement(CModalContext.Provider, { value: contextValues },
-                React__default.createElement("div", { className: classNames('modal', {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Transition$1, { in: _visible, mountOnEnter: true, nodeRef: modalRef, onEnter: onShow, onExit: onClose, unmountOnExit: unmountOnClose, timeout: transition ? duration : 0 }, function (state) { return (React.createElement(CConditionalPortal, { portal: portal },
+            React.createElement(CModalContext.Provider, { value: contextValues },
+                React.createElement("div", { className: classNames('modal', {
                         'modal-static': staticBackdrop,
                         fade: transition,
                         show: state === 'entered',
                     }, className), tabIndex: -1, role: "dialog", style: __assign({}, (state !== 'exited' && { display: 'block' })), ref: forkedRef },
-                    React__default.createElement(CModalDialog, { alignment: alignment, fullscreen: fullscreen, scrollable: scrollable, size: size },
-                        React__default.createElement(CModalContent, __assign({}, rest, { ref: modalContentRef }), children)))))); }),
-        backdrop && (React__default.createElement(CConditionalPortal, { portal: portal },
-            React__default.createElement(CBackdrop, { visible: _visible })))));
+                    React.createElement(CModalDialog, { alignment: alignment, fullscreen: fullscreen, scrollable: scrollable, size: size },
+                        React.createElement(CModalContent, __assign({}, rest, { ref: modalContentRef }), children)))))); }),
+        backdrop && (React.createElement(CConditionalPortal, { portal: portal },
+            React.createElement(CBackdrop, { visible: _visible })))));
 });
 CModal.propTypes = {
     alignment: PropTypes.oneOf(['top', 'center']),
@@ -6553,7 +6126,7 @@ CModal.displayName = 'CModal';
 
 var CModalBody = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
-    return (React__default.createElement("div", __assign({ className: classNames('modal-body', className) }, rest, { ref: ref }), children));
+    return (React.createElement("div", __assign({ className: classNames('modal-body', className) }, rest, { ref: ref }), children));
 });
 CModalBody.propTypes = {
     children: PropTypes.node,
@@ -6563,7 +6136,7 @@ CModalBody.displayName = 'CModalBody';
 
 var CModalFooter = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
-    return (React__default.createElement("div", __assign({ className: classNames('modal-footer', className) }, rest, { ref: ref }), children));
+    return (React.createElement("div", __assign({ className: classNames('modal-footer', className) }, rest, { ref: ref }), children));
 });
 CModalFooter.propTypes = {
     children: PropTypes.node,
@@ -6574,9 +6147,9 @@ CModalFooter.displayName = 'CModalFooter';
 var CModalHeader = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, _b = _a.closeButton, closeButton = _b === void 0 ? true : _b, rest = __rest(_a, ["children", "className", "closeButton"]);
     var setVisible = useContext(CModalContext).setVisible;
-    return (React__default.createElement("div", __assign({ className: classNames('modal-header', className) }, rest, { ref: ref }),
+    return (React.createElement("div", __assign({ className: classNames('modal-header', className) }, rest, { ref: ref }),
         children,
-        closeButton && React__default.createElement(CCloseButton, { onClick: function () { return setVisible(false); } })));
+        closeButton && React.createElement(CCloseButton, { onClick: function () { return setVisible(false); } })));
 });
 CModalHeader.propTypes = {
     children: PropTypes.node,
@@ -6587,7 +6160,7 @@ CModalHeader.displayName = 'CModalHeader';
 
 var CModalTitle = forwardRef(function (_a, ref) {
     var children = _a.children, _b = _a.component, Component = _b === void 0 ? 'h5' : _b, className = _a.className, rest = __rest(_a, ["children", "component", "className"]);
-    return (React__default.createElement(Component, __assign({ className: classNames('modal-title', className) }, rest, { ref: ref }), children));
+    return (React.createElement(Component, __assign({ className: classNames('modal-title', className) }, rest, { ref: ref }), children));
 });
 CModalTitle.propTypes = {
     children: PropTypes.node,
@@ -6599,7 +6172,7 @@ CModalTitle.displayName = 'CModalTitle';
 var CNav = forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, _c = _a.component, Component = _c === void 0 ? 'ul' : _c, layout = _a.layout, variant = _a.variant, rest = __rest(_a, ["children", "className", "component", "layout", "variant"]);
-    return (React__default.createElement(Component, __assign({ className: classNames('nav', (_b = {},
+    return (React.createElement(Component, __assign({ className: classNames('nav', (_b = {},
             _b["nav-".concat(layout)] = layout,
             _b["nav-".concat(variant)] = variant,
             _b), className), role: "navigation" }, rest, { ref: ref }), children));
@@ -6615,7 +6188,7 @@ CNav.displayName = 'CNav';
 
 var CNavGroupItems = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
-    return (React__default.createElement("ul", __assign({ className: classNames('nav-group-items', className) }, rest, { ref: ref }), children));
+    return (React.createElement("ul", __assign({ className: classNames('nav-group-items', className) }, rest, { ref: ref }), children));
 });
 CNavGroupItems.propTypes = {
     children: PropTypes.node,
@@ -6631,10 +6204,10 @@ var CSidebarNav = forwardRef(function (_a, ref) {
         visibleGroup: visibleGroup,
         setVisibleGroup: setVisibleGroup,
     };
-    return (React__default.createElement("ul", __assign({ className: classNames('sidebar-nav', className), ref: ref }, rest),
-        React__default.createElement(CNavContext.Provider, { value: CNavContextValues }, React__default.Children.map(children, function (child, index) {
-            if (React__default.isValidElement(child)) {
-                return React__default.cloneElement(child, {
+    return (React.createElement("ul", __assign({ className: classNames('sidebar-nav', className), ref: ref }, rest),
+        React.createElement(CNavContext.Provider, { value: CNavContextValues }, React.Children.map(children, function (child, index) {
+            if (React.isValidElement(child)) {
+                return React.cloneElement(child, {
                     key: index,
                     idx: "".concat(index),
                 });
@@ -6690,13 +6263,13 @@ var CNavGroup = forwardRef(function (_a, ref) {
         exiting: { display: 'block', height: height },
         exited: { height: height },
     };
-    return (React__default.createElement("li", __assign({ className: classNames('nav-group', { show: _visible }, className) }, rest, { ref: ref }),
-        toggler && (React__default.createElement("a", { className: "nav-link nav-group-toggle", onClick: function (event) { return handleTogglerOnCLick(event); } }, toggler)),
-        React__default.createElement(Transition$1, { in: _visible, nodeRef: navItemsRef, onEntering: onEntering, onEntered: onEntered, onExit: onExit, onExiting: onExiting, onExited: onExited, timeout: 300 }, function (state) { return (React__default.createElement("ul", { className: classNames('nav-group-items', {
+    return (React.createElement("li", __assign({ className: classNames('nav-group', { show: _visible }, className) }, rest, { ref: ref }),
+        toggler && (React.createElement("a", { className: "nav-link nav-group-toggle", onClick: function (event) { return handleTogglerOnCLick(event); } }, toggler)),
+        React.createElement(Transition$1, { in: _visible, nodeRef: navItemsRef, onEntering: onEntering, onEntered: onEntered, onExit: onExit, onExiting: onExiting, onExited: onExited, timeout: 300 }, function (state) { return (React.createElement("ul", { className: classNames('nav-group-items', {
                 compact: compact,
-            }), style: __assign(__assign({}, style), transitionStyles[state]), ref: navItemsRef }, React__default.Children.map(children, function (child, index) {
-            if (React__default.isValidElement(child)) {
-                return React__default.cloneElement(child, {
+            }), style: __assign(__assign({}, style), transitionStyles[state]), ref: navItemsRef }, React.Children.map(children, function (child, index) {
+            if (React.isValidElement(child)) {
+                return React.cloneElement(child, {
                     key: index,
                     idx: "".concat(idx, ".").concat(index),
                 });
@@ -6724,7 +6297,7 @@ var CNavLink = forwardRef(function (_a, ref) {
         rest.active = (_a = navLinkRef.current) === null || _a === void 0 ? void 0 : _a.classList.contains('active');
         idx && rest.active && setVisibleGroup(idx);
     }, [rest.active, className]);
-    return (React__default.createElement(CLink, __assign({ className: classNames('nav-link', className) }, rest, { ref: forkedRef }), children));
+    return (React.createElement(CLink, __assign({ className: classNames('nav-link', className) }, rest, { ref: forkedRef }), children));
 });
 CNavLink.propTypes = {
     children: PropTypes.node,
@@ -6735,7 +6308,7 @@ CNavLink.displayName = 'CNavLink';
 
 var CNavItem = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
-    return (React__default.createElement("li", { className: classNames('nav-item', className), ref: ref }, rest.href || rest.to ? (React__default.createElement(CNavLink, __assign({ className: className }, rest), children)) : (children)));
+    return (React.createElement("li", { className: classNames('nav-item', className), ref: ref }, rest.href || rest.to ? (React.createElement(CNavLink, __assign({ className: className }, rest), children)) : (children)));
 });
 CNavItem.propTypes = {
     children: PropTypes.node,
@@ -6745,7 +6318,7 @@ CNavItem.displayName = 'CNavItem';
 
 var CNavTitle = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
-    return (React__default.createElement("li", __assign({ className: classNames('nav-title', className) }, rest, { ref: ref }), children));
+    return (React.createElement("li", __assign({ className: classNames('nav-title', className) }, rest, { ref: ref }), children));
 });
 CNavTitle.propTypes = {
     children: PropTypes.node,
@@ -6756,11 +6329,11 @@ CNavTitle.displayName = 'CNavTitle';
 var CNavbar = forwardRef(function (_a, ref) {
     var _b;
     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(_a, ["children", "className", "color", "colorScheme", "component", "container", "expand", "placement"]);
-    return (React__default.createElement(Component, __assign({ className: classNames('navbar', (_b = {},
+    return (React.createElement(Component, __assign({ className: classNames('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__default.createElement("div", { className: typeof container === 'string' ? "container-".concat(container) : 'container' }, children)) : (React__default.createElement(React__default.Fragment, null, children))));
+            _b), placement, className) }, rest, { ref: ref }), container ? (React.createElement("div", { className: typeof container === 'string' ? "container-".concat(container) : 'container' }, children)) : (React.createElement(React.Fragment, null, children))));
 });
 CNavbar.propTypes = {
     children: PropTypes.node,
@@ -6790,7 +6363,7 @@ CNavbar.displayName = 'CNavbar';
 var CNavbarBrand = forwardRef(function (_a, ref) {
     var children = _a.children, component = _a.component, className = _a.className, rest = __rest(_a, ["children", "component", "className"]);
     var Component = component !== null && component !== void 0 ? component : (rest.href ? 'a' : 'span');
-    return (React__default.createElement(Component, __assign({ className: classNames('navbar-brand', className) }, rest, { ref: ref }), children));
+    return (React.createElement(Component, __assign({ className: classNames('navbar-brand', className) }, rest, { ref: ref }), children));
 });
 CNavbarBrand.propTypes = {
     children: PropTypes.node,
@@ -6801,7 +6374,7 @@ CNavbarBrand.displayName = 'CNavbarBrand';
 
 var CNavbarNav = forwardRef(function (_a, ref) {
     var children = _a.children, _b = _a.component, Component = _b === void 0 ? 'ul' : _b, className = _a.className, rest = __rest(_a, ["children", "component", "className"]);
-    return (React__default.createElement(Component, __assign({ className: classNames('navbar-nav', className), role: "navigation" }, rest, { ref: ref }), children));
+    return (React.createElement(Component, __assign({ className: classNames('navbar-nav', className), role: "navigation" }, rest, { ref: ref }), children));
 });
 CNavbarNav.propTypes = {
     children: PropTypes.node,
@@ -6812,7 +6385,7 @@ CNavbarNav.displayName = 'CNavbarNav';
 
 var CNavbarText = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
-    return (React__default.createElement("span", __assign({ className: classNames('navbar-text', className) }, rest, { ref: ref }), children));
+    return (React.createElement("span", __assign({ className: classNames('navbar-text', className) }, rest, { ref: ref }), children));
 });
 CNavbarText.propTypes = {
     children: PropTypes.node,
@@ -6822,7 +6395,7 @@ CNavbarText.displayName = 'CNavbarText';
 
 var CNavbarToggler = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
-    return (React__default.createElement("button", __assign({ type: "button", className: classNames('navbar-toggler', className) }, rest, { ref: ref }), children !== null && children !== void 0 ? children : React__default.createElement("span", { className: "navbar-toggler-icon" })));
+    return (React.createElement("button", __assign({ type: "button", className: classNames('navbar-toggler', className) }, rest, { ref: ref }), children !== null && children !== void 0 ? children : React.createElement("span", { className: "navbar-toggler-icon" })));
 });
 CNavbarToggler.propTypes = {
     children: PropTypes.node,
@@ -6862,11 +6435,11 @@ var COffcanvas = forwardRef(function (_a, ref) {
             return handleDismiss();
         }
     };
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(Transition$1, { in: _visible, nodeRef: offcanvasRef, onEnter: onShow, onEntered: function () { var _a; return (_a = offcanvasRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, onExit: onHide, timeout: 300 }, function (state) {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Transition$1, { in: _visible, nodeRef: offcanvasRef, onEnter: onShow, onEntered: function () { var _a; return (_a = offcanvasRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, onExit: onHide, timeout: 300 }, function (state) {
             var _a;
-            return (React__default.createElement(CConditionalPortal, { portal: portal },
-                React__default.createElement("div", __assign({ className: classNames((_a = {},
+            return (React.createElement(CConditionalPortal, { portal: portal },
+                React.createElement("div", __assign({ className: classNames((_a = {},
                         _a["offcanvas".concat(typeof responsive === 'string' ? '-' + responsive : '')] = responsive,
                         _a["offcanvas-".concat(placement)] = placement,
                         _a.showing = state === 'entering',
@@ -6874,8 +6447,8 @@ var COffcanvas = forwardRef(function (_a, ref) {
                         _a['show hiding'] = state === 'exiting',
                         _a), className), role: "dialog", tabIndex: -1, onKeyDown: handleKeyDown }, rest, { ref: forkedRef }), children)));
         }),
-        backdrop && (React__default.createElement(CConditionalPortal, { portal: portal },
-            React__default.createElement(CBackdrop, { className: "offcanvas-backdrop", onClick: handleBackdropDismiss, visible: _visible })))));
+        backdrop && (React.createElement(CConditionalPortal, { portal: portal },
+            React.createElement(CBackdrop, { className: "offcanvas-backdrop", onClick: handleBackdropDismiss, visible: _visible })))));
 });
 COffcanvas.propTypes = {
     backdrop: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['static'])]),
@@ -6898,7 +6471,7 @@ COffcanvas.displayName = 'COffcanvas';
 
 var COffcanvasBody = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
-    return (React__default.createElement("div", __assign({ className: classNames('offcanvas-body', className) }, rest, { ref: ref }), children));
+    return (React.createElement("div", __assign({ className: classNames('offcanvas-body', className) }, rest, { ref: ref }), children));
 });
 COffcanvasBody.propTypes = {
     children: PropTypes.node,
@@ -6908,7 +6481,7 @@ COffcanvasBody.displayName = 'COffcanvasBody';
 
 var COffcanvasHeader = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
-    return (React__default.createElement("div", __assign({ className: classNames('offcanvas-header', className) }, rest, { ref: ref }), children));
+    return (React.createElement("div", __assign({ className: classNames('offcanvas-header', className) }, rest, { ref: ref }), children));
 });
 COffcanvasHeader.propTypes = {
     children: PropTypes.node,
@@ -6918,7 +6491,7 @@ COffcanvasHeader.displayName = 'COffcanvasHeader';
 
 var COffcanvasTitle = forwardRef(function (_a, ref) {
     var children = _a.children, _b = _a.component, Component = _b === void 0 ? 'h5' : _b, className = _a.className, rest = __rest(_a, ["children", "component", "className"]);
-    return (React__default.createElement(Component, __assign({ className: classNames('offcanvas-title', className) }, rest, { ref: ref }), children));
+    return (React.createElement(Component, __assign({ className: classNames('offcanvas-title', className) }, rest, { ref: ref }), children));
 });
 COffcanvasTitle.propTypes = {
     children: PropTypes.node,
@@ -6930,8 +6503,8 @@ COffcanvasTitle.displayName = 'COffcanvasTitle';
 var CPagination = forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, align = _a.align, className = _a.className, size = _a.size, rest = __rest(_a, ["children", "align", "className", "size"]);
-    return (React__default.createElement("nav", __assign({ ref: ref }, rest),
-        React__default.createElement("ul", { className: classNames('pagination', (_b = {},
+    return (React.createElement("nav", __assign({ ref: ref }, rest),
+        React.createElement("ul", { className: classNames('pagination', (_b = {},
                 _b["justify-content-".concat(align)] = align,
                 _b["pagination-".concat(size)] = size,
                 _b), className) }, children)));
@@ -6947,10 +6520,10 @@ CPagination.displayName = 'CPagination';
 var CPaginationItem = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, component = _a.component, rest = __rest(_a, ["children", "className", "component"]);
     var Component = component !== null && component !== void 0 ? component : (rest.active ? 'span' : 'a');
-    return (React__default.createElement("li", __assign({ className: classNames('page-item', {
+    return (React.createElement("li", __assign({ className: classNames('page-item', {
             active: rest.active,
             disabled: rest.disabled,
-        }, className) }, (rest.active && { 'aria-current': 'page' })), Component === 'a' ? (React__default.createElement(CLink, __assign({ className: "page-link", component: Component }, rest, { ref: ref }), children)) : (React__default.createElement(Component, { className: "page-link", ref: ref }, children))));
+        }, className) }, (rest.active && { 'aria-current': 'page' })), Component === 'a' ? (React.createElement(CLink, __assign({ className: "page-link", component: Component }, rest, { ref: ref }), children)) : (React.createElement(Component, { className: "page-link", ref: ref }, children))));
 });
 CPaginationItem.propTypes = {
     children: PropTypes.node,
@@ -6982,7 +6555,7 @@ var CPlaceholder = forwardRef(function (_a, ref) {
             repsonsiveClassNames.push("col".concat(infix));
         }
     });
-    return (React__default.createElement(Component, __assign({ className: classNames(animation ? "placeholder-".concat(animation) : 'placeholder', (_b = {},
+    return (React.createElement(Component, __assign({ className: classNames(animation ? "placeholder-".concat(animation) : 'placeholder', (_b = {},
             _b["bg-".concat(color)] = color,
             _b["placeholder-".concat(size)] = size,
             _b), repsonsiveClassNames, className) }, rest, { ref: ref }), children));
@@ -6997,14 +6570,29 @@ CPlaceholder.propTypes = {
 };
 CPlaceholder.displayName = 'CPlaceholder';
 
+var CProgressStackedContext = createContext({});
+var CProgressStacked = forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
+    return (React.createElement("div", __assign({ className: classNames('progress-stacked', className), ref: ref }, rest),
+        React.createElement(CProgressStackedContext.Provider, { value: {
+                stacked: true,
+            } }, children)));
+});
+CProgressStacked.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+};
+CProgressStacked.displayName = 'CProgressStacked';
+
 var CProgressBar = forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, animated = _a.animated, className = _a.className, color = _a.color, _c = _a.value, value = _c === void 0 ? 0 : _c, variant = _a.variant, rest = __rest(_a, ["children", "animated", "className", "color", "value", "variant"]);
-    return (React__default.createElement("div", __assign({ className: classNames('progress-bar', (_b = {},
+    var stacked = useContext(CProgressStackedContext).stacked;
+    return (React.createElement("div", __assign({ className: classNames('progress-bar', (_b = {},
             _b["bg-".concat(color)] = color,
             _b["progress-bar-".concat(variant)] = variant,
             _b['progress-bar-animated'] = animated,
-            _b), className), role: "progressbar", style: { width: "".concat(value, "%") }, "aria-valuenow": value, "aria-valuemin": 0, "aria-valuemax": 100 }, rest, { ref: ref }), children));
+            _b), className) }, (!stacked && { style: { width: "".concat(value, "%") } }), rest, { ref: ref }), children));
 });
 CProgressBar.propTypes = {
     animated: PropTypes.bool,
@@ -7016,102 +6604,121 @@ CProgressBar.propTypes = {
 };
 CProgressBar.displayName = 'CProgressBar';
 
-// TODO: update markup and add '.progress-stacked' in v5
 var CProgress = forwardRef(function (_a, ref) {
-    var children = _a.children, className = _a.className, height = _a.height, thin = _a.thin, _b = _a.value, value = _b === void 0 ? 0 : _b, white = _a.white, rest = __rest(_a, ["children", "className", "height", "thin", "value", "white"]);
-    return (React__default.createElement("div", { className: classNames('progress', {
+    var children = _a.children, className = _a.className, height = _a.height, progressBarClassName = _a.progressBarClassName, thin = _a.thin, value = _a.value, white = _a.white, rest = __rest(_a, ["children", "className", "height", "progressBarClassName", "thin", "value", "white"]);
+    var stacked = useContext(CProgressStackedContext).stacked;
+    return (React.createElement("div", __assign({ className: classNames('progress', {
             'progress-thin': thin,
             'progress-white': white,
-        }, className), style: height ? { height: "".concat(height, "px") } : {}, ref: ref }, value ? (React__default.createElement(CProgressBar, __assign({ value: value }, rest), children)) : (children)));
+        }, className) }, (value !== undefined && {
+        role: 'progressbar',
+        'aria-valuenow': value,
+        'aria-valuemin': 0,
+        'aria-valuemax': 100,
+    }), { style: __assign(__assign({}, (height ? { height: "".concat(height, "px") } : {})), (stacked ? { width: "".concat(value, "%") } : {})), ref: ref }), React.Children.toArray(children).some(
+    // @ts-expect-error displayName is set in the CProgressBar component
+    function (child) { return child.type && child.type.displayName === 'CProgressBar'; }) ? (React.Children.map(children, function (child) {
+        // @ts-expect-error displayName is set in the CProgressBar component
+        if (React.isValidElement(child) && child.type.displayName === 'CProgressBar') {
+            return React.cloneElement(child, __assign(__assign({}, (value && { value: value })), rest));
+        }
+        return;
+    })) : (React.createElement(CProgressBar, __assign({}, (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,
 };
 CProgress.displayName = 'CProgress';
 
-var getPlacement$1 = function (placement, element) {
-    switch (placement) {
-        case 'right': {
-            return isRTL(element) ? 'left' : 'right';
-        }
-        case 'left': {
-            return isRTL(element) ? 'right' : 'left';
-        }
-        default: {
-            return placement;
-        }
-    }
-};
 var CPopover = function (_a) {
-    var children = _a.children, className = _a.className, content = _a.content, _b = _a.offset, offset = _b === void 0 ? [0, 8] : _b, onHide = _a.onHide, onShow = _a.onShow, _c = _a.placement, placement = _c === void 0 ? 'top' : _c, title = _a.title, _d = _a.trigger, trigger = _d === void 0 ? 'click' : _d, visible = _a.visible, rest = __rest(_a, ["children", "className", "content", "offset", "onHide", "onShow", "placement", "title", "trigger", "visible"]);
+    var children = _a.children, _b = _a.animation, animation = _b === void 0 ? true : _b, className = _a.className, content = _a.content, _c = _a.delay, delay = _c === void 0 ? 0 : _c, _d = _a.fallbackPlacements, fallbackPlacements = _d === void 0 ? ['top', 'right', 'bottom', 'left'] : _d, _e = _a.offset, offset = _e === void 0 ? [0, 8] : _e, onHide = _a.onHide, onShow = _a.onShow, _f = _a.placement, placement = _f === void 0 ? 'top' : _f, title = _a.title, _g = _a.trigger, trigger = _g === void 0 ? 'click' : _g, visible = _a.visible, rest = __rest(_a, ["children", "animation", "className", "content", "delay", "fallbackPlacements", "offset", "onHide", "onShow", "placement", "title", "trigger", "visible"]);
     var popoverRef = useRef(null);
     var togglerRef = useRef(null);
-    var popper = useRef();
-    var _e = useState(visible), _visible = _e[0], setVisible = _e[1];
+    var _h = usePopper(), initPopper = _h.initPopper, destroyPopper = _h.destroyPopper;
+    var _j = useState(visible), _visible = _j[0], setVisible = _j[1];
+    var _delay = typeof delay === 'number' ? { show: delay, hide: delay } : delay;
+    var popperConfig = {
+        modifiers: [
+            {
+                name: 'arrow',
+                options: {
+                    element: '.popover-arrow',
+                },
+            },
+            {
+                name: 'flip',
+                options: {
+                    fallbackPlacements: fallbackPlacements,
+                },
+            },
+            {
+                name: 'offset',
+                options: {
+                    offset: offset,
+                },
+            },
+        ],
+        placement: getRTLPlacement(placement, togglerRef.current),
+    };
     useEffect(function () {
         setVisible(visible);
     }, [visible]);
     useEffect(function () {
-        if (_visible) {
-            initPopper();
+        if (_visible && togglerRef.current && popoverRef.current) {
+            initPopper(togglerRef.current, popoverRef.current, popperConfig);
         }
         return function () {
             destroyPopper();
         };
     }, [_visible]);
-    var initPopper = function () {
-        if (togglerRef.current && popoverRef.current) {
-            popper.current = createPopper(togglerRef.current, popoverRef.current, {
-                modifiers: [
-                    {
-                        name: 'offset',
-                        options: {
-                            offset: offset,
-                        },
-                    },
-                ],
-                placement: getPlacement$1(placement, togglerRef.current),
-            });
-        }
-    };
-    var destroyPopper = function () {
-        if (popper.current) {
-            popper.current.destroy();
+    var toggleVisible = function (visible) {
+        if (visible) {
+            setTimeout(function () { return setVisible(true); }, _delay.show);
+            return;
         }
-        popper.current = undefined;
+        setTimeout(function () { return setVisible(false); }, _delay.hide);
     };
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.cloneElement(children, __assign(__assign(__assign({ ref: togglerRef }, ((trigger === 'click' || trigger.includes('click')) && {
-            onClick: function () { return setVisible(!_visible); },
+    return (React.createElement(React.Fragment, null,
+        React.cloneElement(children, __assign(__assign(__assign({ ref: togglerRef }, ((trigger === 'click' || trigger.includes('click')) && {
+            onClick: function () { return toggleVisible(!_visible); },
         })), ((trigger === 'focus' || trigger.includes('focus')) && {
-            onFocus: function () { return setVisible(true); },
-            onBlur: function () { return setVisible(false); },
+            onFocus: function () { return toggleVisible(true); },
+            onBlur: function () { return toggleVisible(false); },
         })), ((trigger === 'hover' || trigger.includes('hover')) && {
-            onMouseEnter: function () { return setVisible(true); },
-            onMouseLeave: function () { return setVisible(false); },
+            onMouseEnter: function () { return toggleVisible(true); },
+            onMouseLeave: function () { return toggleVisible(false); },
         }))),
         typeof window !== 'undefined' &&
-            createPortal(React__default.createElement(Transition$1, { in: _visible, mountOnEnter: true, nodeRef: popoverRef, onEnter: onShow, onExit: onHide, timeout: {
+            createPortal(React.createElement(Transition$1, { in: _visible, mountOnEnter: true, nodeRef: popoverRef, onEnter: onShow, onExit: onHide, timeout: {
                     enter: 0,
                     exit: 200,
-                }, unmountOnExit: true }, function (state) { return (React__default.createElement("div", __assign({ className: classNames('popover', "bs-popover-".concat(getPlacement$1(placement, togglerRef.current)
-                    .replace('left', 'start')
-                    .replace('right', 'end')), 'fade', {
+                }, unmountOnExit: true }, function (state) { return (React.createElement("div", __assign({ className: classNames('popover', 'bs-popover-auto', {
+                    fade: animation,
                     show: state === 'entered',
                 }, className), ref: popoverRef, role: "tooltip" }, rest),
-                React__default.createElement("div", { "data-popper-arrow": true, className: "popover-arrow" }),
-                React__default.createElement("div", { className: "popover-header" }, title),
-                React__default.createElement("div", { className: "popover-body" }, content))); }), document.body)));
+                React.createElement("div", { className: "popover-arrow" }),
+                React.createElement("div", { className: "popover-header" }, title),
+                React.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,
+        }),
+    ]),
+    fallbackPlacements: fallbackPlacementsPropType,
     offset: PropTypes.any,
     onHide: PropTypes.func,
     onShow: PropTypes.func,
@@ -7196,8 +6803,8 @@ var CSidebar = forwardRef(function (_a, ref) {
             mobile &&
             handleHide();
     };
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement("div", __assign({ className: classNames('sidebar', (_b = {
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", __assign({ className: classNames('sidebar', (_b = {
                     'sidebar-narrow': narrow,
                     'sidebar-overlaid': overlaid
                 },
@@ -7209,7 +6816,7 @@ var CSidebar = forwardRef(function (_a, ref) {
                 _b), className) }, rest, { ref: forkedRef }), children),
         typeof window !== 'undefined' &&
             mobile &&
-            createPortal(React__default.createElement(CBackdrop, { className: "sidebar-backdrop", visible: _visible }), document.body)));
+            createPortal(React.createElement(CBackdrop, { className: "sidebar-backdrop", visible: _visible }), document.body)));
 });
 CSidebar.propTypes = {
     children: PropTypes.node,
@@ -7228,7 +6835,7 @@ CSidebar.displayName = 'CSidebar';
 
 var CSidebarBrand = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
-    return (React__default.createElement("div", __assign({ className: classNames('sidebar-brand', className), ref: ref }, rest), children));
+    return (React.createElement("div", __assign({ className: classNames('sidebar-brand', className), ref: ref }, rest), children));
 });
 CSidebarBrand.propTypes = {
     children: PropTypes.node,
@@ -7238,7 +6845,7 @@ CSidebarBrand.displayName = 'CSidebarBrand';
 
 var CSidebarFooter = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
-    return (React__default.createElement("div", __assign({ className: classNames('sidebar-footer', className), ref: ref }, rest), children));
+    return (React.createElement("div", __assign({ className: classNames('sidebar-footer', className), ref: ref }, rest), children));
 });
 CSidebarFooter.propTypes = {
     children: PropTypes.node,
@@ -7248,7 +6855,7 @@ CSidebarFooter.displayName = 'CSidebarFooter';
 
 var CSidebarToggler = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
-    return (React__default.createElement("button", __assign({ className: classNames('sidebar-toggler', className), ref: ref }, rest), children));
+    return (React.createElement("button", __assign({ className: classNames('sidebar-toggler', className), ref: ref }, rest), children));
 });
 CSidebarToggler.propTypes = {
     children: PropTypes.node,
@@ -7258,7 +6865,7 @@ CSidebarToggler.displayName = 'CSidebarToggler';
 
 var CSidebarHeader = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
-    return (React__default.createElement("div", __assign({ className: classNames('sidebar-header', className), ref: ref }, rest), children));
+    return (React.createElement("div", __assign({ className: classNames('sidebar-header', className), ref: ref }, rest), children));
 });
 CSidebarHeader.propTypes = {
     children: PropTypes.node,
@@ -7269,11 +6876,11 @@ CSidebarHeader.displayName = 'CSidebarHeader';
 var CSpinner = forwardRef(function (_a, ref) {
     var _b;
     var className = _a.className, color = _a.color, _c = _a.component, Component = _c === void 0 ? 'div' : _c, size = _a.size, _d = _a.variant, variant = _d === void 0 ? 'border' : _d, _e = _a.visuallyHiddenLabel, visuallyHiddenLabel = _e === void 0 ? 'Loading...' : _e, rest = __rest(_a, ["className", "color", "component", "size", "variant", "visuallyHiddenLabel"]);
-    return (React__default.createElement(Component, __assign({ className: classNames("spinner-".concat(variant), (_b = {},
+    return (React.createElement(Component, __assign({ className: classNames("spinner-".concat(variant), (_b = {},
             _b["spinner-".concat(variant, "-").concat(size)] = size,
             _b["text-".concat(color)] = color,
             _b), className), role: "status" }, rest, { ref: ref }),
-        React__default.createElement("span", { className: "visually-hidden" }, visuallyHiddenLabel)));
+        React.createElement("span", { className: "visually-hidden" }, visuallyHiddenLabel)));
 });
 CSpinner.propTypes = {
     className: PropTypes.string,
@@ -7288,7 +6895,7 @@ CSpinner.displayName = 'CSpinner';
 var CTableHead = forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, color = _a.color, rest = __rest(_a, ["children", "className", "color"]);
-    return (React__default.createElement("thead", __assign({ className: classNames((_b = {},
+    return (React.createElement("thead", __assign({ className: classNames((_b = {},
             _b["table-".concat(color)] = color,
             _b), className) || undefined }, rest, { ref: ref }), children));
 });
@@ -7302,7 +6909,7 @@ CTableHead.displayName = 'CTableHead';
 var CTableHeaderCell = forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, color = _a.color, rest = __rest(_a, ["children", "className", "color"]);
-    return (React__default.createElement("th", __assign({ className: classNames((_b = {},
+    return (React.createElement("th", __assign({ className: classNames((_b = {},
             _b["table-".concat(color)] = color,
             _b), className) || undefined }, rest, { ref: ref }), children));
 });
@@ -7316,7 +6923,7 @@ CTableHeaderCell.displayName = 'CTableHeaderCell';
 var CTableBody = forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, color = _a.color, rest = __rest(_a, ["children", "className", "color"]);
-    return (React__default.createElement("tbody", __assign({ className: classNames((_b = {},
+    return (React.createElement("tbody", __assign({ className: classNames((_b = {},
             _b["table-".concat(color)] = color,
             _b), className) || undefined }, rest, { ref: ref }), children));
 });
@@ -7331,7 +6938,7 @@ var CTableDataCell = forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, active = _a.active, align = _a.align, className = _a.className, color = _a.color, rest = __rest(_a, ["children", "active", "align", "className", "color"]);
     var Component = rest.scope ? 'th' : 'td';
-    return (React__default.createElement(Component, __assign({ className: classNames((_b = {},
+    return (React.createElement(Component, __assign({ className: classNames((_b = {},
             _b["align-".concat(align)] = align,
             _b['table-active'] = active,
             _b["table-".concat(color)] = color,
@@ -7349,7 +6956,7 @@ CTableDataCell.displayName = 'CTableDataCell';
 var CTableRow = forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, active = _a.active, align = _a.align, className = _a.className, color = _a.color, rest = __rest(_a, ["children", "active", "align", "className", "color"]);
-    return (React__default.createElement("tr", __assign({ className: classNames((_b = {},
+    return (React.createElement("tr", __assign({ className: classNames((_b = {},
             _b["align-".concat(align)] = align,
             _b['table-active'] = active,
             _b["table-".concat(color)] = color,
@@ -7367,7 +6974,7 @@ CTableRow.displayName = 'CTableRow';
 var CTableFoot = forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, color = _a.color, rest = __rest(_a, ["children", "className", "color"]);
-    return (React__default.createElement("tfoot", __assign({ className: classNames((_b = {},
+    return (React.createElement("tfoot", __assign({ className: classNames((_b = {},
             _b["table-".concat(color)] = color,
             _b), className) || undefined }, rest, { ref: ref }), children));
 });
@@ -7380,7 +6987,7 @@ CTableFoot.displayName = 'CTableFoot';
 
 var CTableCaption = forwardRef(function (_a, ref) {
     var children = _a.children, props = __rest(_a, ["children"]);
-    return (React__default.createElement("caption", __assign({}, props, { ref: ref }), children));
+    return (React.createElement("caption", __assign({}, props, { ref: ref }), children));
 });
 CTableCaption.propTypes = {
     children: PropTypes.node,
@@ -7389,7 +6996,7 @@ CTableCaption.displayName = 'CTableCaption';
 
 var CTableResponsiveWrapper = function (_a) {
     var children = _a.children, responsive = _a.responsive, rest = __rest(_a, ["children", "responsive"]);
-    return responsive ? (React__default.createElement("div", __assign({ className: typeof responsive === 'boolean' ? 'table-responsive' : "table-responsive-".concat(responsive) }, rest), children)) : (React__default.createElement(React__default.Fragment, null, children));
+    return responsive ? (React.createElement("div", __assign({ className: typeof responsive === 'boolean' ? 'table-responsive' : "table-responsive-".concat(responsive) }, rest), children)) : (React.createElement(React.Fragment, null, children));
 };
 CTableResponsiveWrapper.propTypes = {
     children: PropTypes.node,
@@ -7425,8 +7032,8 @@ var CTable = forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, align = _a.align, borderColor = _a.borderColor, bordered = _a.bordered, borderless = _a.borderless, caption = _a.caption, captionTop = _a.captionTop, className = _a.className, color = _a.color, columns = _a.columns, footer = _a.footer, hover = _a.hover, items = _a.items, responsive = _a.responsive, small = _a.small, striped = _a.striped, stripedColumns = _a.stripedColumns, tableFootProps = _a.tableFootProps, tableHeadProps = _a.tableHeadProps, rest = __rest(_a, ["children", "align", "borderColor", "bordered", "borderless", "caption", "captionTop", "className", "color", "columns", "footer", "hover", "items", "responsive", "small", "striped", "stripedColumns", "tableFootProps", "tableHeadProps"]);
     var columnNames = useMemo(function () { return getColumnNames(columns, items); }, [columns, items]);
-    return (React__default.createElement(CTableResponsiveWrapper, { responsive: responsive },
-        React__default.createElement("table", __assign({ className: classNames('table', (_b = {},
+    return (React.createElement(CTableResponsiveWrapper, { responsive: responsive },
+        React.createElement("table", __assign({ className: classNames('table', (_b = {},
                 _b["align-".concat(align)] = align,
                 _b["border-".concat(borderColor)] = borderColor,
                 _b["caption-top"] = captionTop || caption === 'top',
@@ -7438,17 +7045,17 @@ var CTable = forwardRef(function (_a, ref) {
                 _b['table-striped'] = striped,
                 _b['table-striped-columns'] = stripedColumns,
                 _b), className) }, rest, { ref: ref }),
-            ((caption && caption !== 'top') || captionTop) && (React__default.createElement(CTableCaption, null, caption || captionTop)),
-            columns && (React__default.createElement(CTableHead, __assign({}, tableHeadProps),
-                React__default.createElement(CTableRow, null, columns.map(function (column, index) { return (React__default.createElement(CTableHeaderCell, __assign({}, (column._props && __assign({}, column._props)), (column._style && { style: __assign({}, column._style) }), { key: index }), getColumnLabel(column))); })))),
-            items && (React__default.createElement(CTableBody, null, items.map(function (item, index) { return (React__default.createElement(CTableRow, __assign({}, (item._props && __assign({}, item._props)), { key: index }), columnNames &&
+            ((caption && caption !== 'top') || captionTop) && (React.createElement(CTableCaption, null, caption || captionTop)),
+            columns && (React.createElement(CTableHead, __assign({}, tableHeadProps),
+                React.createElement(CTableRow, null, columns.map(function (column, index) { return (React.createElement(CTableHeaderCell, __assign({}, (column._props && __assign({}, column._props)), (column._style && { style: __assign({}, column._style) }), { key: index }), getColumnLabel(column))); })))),
+            items && (React.createElement(CTableBody, null, items.map(function (item, index) { return (React.createElement(CTableRow, __assign({}, (item._props && __assign({}, item._props)), { key: index }), columnNames &&
                 columnNames.map(function (colName, index) {
                     // eslint-disable-next-line unicorn/no-negated-condition
-                    return item[colName] !== undefined ? (React__default.createElement(CTableDataCell, __assign({}, (item._cellProps && __assign(__assign({}, (item._cellProps['all'] && __assign({}, item._cellProps['all']))), (item._cellProps[colName] && __assign({}, item._cellProps[colName])))), { key: index }), item[colName])) : null;
+                    return item[colName] !== undefined ? (React.createElement(CTableDataCell, __assign({}, (item._cellProps && __assign(__assign({}, (item._cellProps['all'] && __assign({}, item._cellProps['all']))), (item._cellProps[colName] && __assign({}, item._cellProps[colName])))), { key: index }), item[colName])) : null;
                 }))); }))),
             children,
-            footer && (React__default.createElement(CTableFoot, __assign({}, tableFootProps),
-                React__default.createElement(CTableRow, null, footer.map(function (item, index) { return (React__default.createElement(CTableDataCell, __assign({}, (typeof item === 'object' && item._props && __assign({}, item._props)), { key: index }), typeof item === 'object' ? item.label : item)); })))))));
+            footer && (React.createElement(CTableFoot, __assign({}, tableFootProps),
+                React.createElement(CTableRow, null, footer.map(function (item, index) { return (React.createElement(CTableDataCell, __assign({}, (typeof item === 'object' && item._props && __assign({}, item._props)), { key: index }), typeof item === 'object' ? item.label : item)); })))))));
 });
 CTable.propTypes = {
     align: PropTypes.oneOf(['bottom', 'middle', 'top']),
@@ -7478,7 +7085,7 @@ CTable.displayName = 'CTable';
 
 var CTabContent = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
-    return (React__default.createElement("div", __assign({ className: classNames('tab-content', className) }, rest, { ref: ref }), children));
+    return (React.createElement("div", __assign({ className: classNames('tab-content', className) }, rest, { ref: ref }), children));
 });
 CTabContent.propTypes = {
     children: PropTypes.node,
@@ -7490,7 +7097,7 @@ var CTabPane = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, onHide = _a.onHide, onShow = _a.onShow, visible = _a.visible, rest = __rest(_a, ["children", "className", "onHide", "onShow", "visible"]);
     var tabPaneRef = useRef();
     var forkedRef = useForkedRef(ref, tabPaneRef);
-    return (React__default.createElement(Transition$1, { in: visible, nodeRef: tabPaneRef, onEnter: onShow, onExit: onHide, timeout: 150 }, function (state) { return (React__default.createElement("div", __assign({ className: classNames('tab-pane', 'fade', {
+    return (React.createElement(Transition$1, { in: visible, nodeRef: tabPaneRef, onEnter: onShow, onExit: onHide, timeout: 150 }, function (state) { return (React.createElement("div", __assign({ className: classNames('tab-pane', 'fade', {
             active: visible,
             show: state === 'entered',
         }, className) }, rest, { ref: forkedRef }), children)); }));
@@ -7531,10 +7138,10 @@ var CToast = forwardRef(function (_a, ref) {
             }, delay);
         }
     };
-    return (React__default.createElement(Transition$1, { in: _visible, nodeRef: toastRef, onEnter: function () { return onShow && onShow(index !== null && index !== void 0 ? index : null); }, onExited: function () { return onClose && onClose(index !== null && index !== void 0 ? index : null); }, timeout: 250, unmountOnExit: true }, function (state) {
+    return (React.createElement(Transition$1, { in: _visible, nodeRef: toastRef, onEnter: function () { return onShow && onShow(index !== null && index !== void 0 ? index : null); }, onExited: function () { return onClose && onClose(index !== null && index !== void 0 ? index : null); }, timeout: 250, unmountOnExit: true }, function (state) {
         var _a;
-        return (React__default.createElement(CToastContext.Provider, { value: contextValues },
-            React__default.createElement("div", __assign({ className: classNames('toast', (_a = {
+        return (React.createElement(CToastContext.Provider, { value: contextValues },
+            React.createElement("div", __assign({ className: classNames('toast', (_a = {
                         fade: animation
                     },
                     _a["bg-".concat(color)] = color,
@@ -7561,7 +7168,7 @@ CToast.displayName = 'CToast';
 
 var CToastBody = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
-    return (React__default.createElement("div", __assign({ className: classNames('toast-body', className) }, rest, { ref: ref }), children));
+    return (React.createElement("div", __assign({ className: classNames('toast-body', className) }, rest, { ref: ref }), children));
 });
 CToastBody.propTypes = {
     children: PropTypes.node,
@@ -7572,16 +7179,16 @@ CToastBody.displayName = 'CToastBody';
 var CToastClose = forwardRef(function (_a, ref) {
     var children = _a.children, Component = _a.component, rest = __rest(_a, ["children", "component"]);
     var setVisible = useContext(CToastContext).setVisible;
-    return Component ? (React__default.createElement(Component, __assign({ onClick: function () { return setVisible(false); } }, rest, { ref: ref }), children)) : (React__default.createElement(CCloseButton, __assign({ onClick: function () { return setVisible(false); } }, rest, { ref: ref })));
+    return Component ? (React.createElement(Component, __assign({ onClick: function () { return setVisible(false); } }, rest, { ref: ref }), children)) : (React.createElement(CCloseButton, __assign({ onClick: function () { return setVisible(false); } }, rest, { ref: ref })));
 });
 CToastClose.propTypes = __assign(__assign({}, CCloseButton.propTypes), { component: PropTypes.elementType });
 CToastClose.displayName = 'CToastClose';
 
 var CToastHeader = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, closeButton = _a.closeButton, rest = __rest(_a, ["children", "className", "closeButton"]);
-    return (React__default.createElement("div", __assign({ className: classNames('toast-header', className) }, rest, { ref: ref }),
+    return (React.createElement("div", __assign({ className: classNames('toast-header', className) }, rest, { ref: ref }),
         children,
-        closeButton && React__default.createElement(CToastClose, null)));
+        closeButton && React.createElement(CToastClose, null)));
 });
 CToastHeader.propTypes = {
     children: PropTypes.node,
@@ -7600,7 +7207,7 @@ var CToaster = forwardRef(function (_a, ref) {
     }, [push]);
     var addToast = function (push) {
         setToasts(function (state) { return __spreadArray(__spreadArray([], state, true), [
-            React__default.cloneElement(push, {
+            React.cloneElement(push, {
                 index: index.current,
                 key: index.current,
                 onClose: function (index) {
@@ -7609,7 +7216,7 @@ var CToaster = forwardRef(function (_a, ref) {
             }),
         ], false); });
     };
-    return (React__default.createElement(CConditionalPortal, { portal: typeof placement === 'string' }, toasts.length > 0 || children ? (React__default.createElement("div", __assign({ className: classNames('toaster toast-container p-3', {
+    return (React.createElement(CConditionalPortal, { portal: typeof placement === 'string' }, toasts.length > 0 || children ? (React.createElement("div", __assign({ className: classNames('toaster toast-container p-3', {
             'position-fixed': placement,
             'top-0': placement && placement.includes('top'),
             'top-50 translate-middle-y': placement && placement.includes('middle'),
@@ -7619,7 +7226,7 @@ var CToaster = forwardRef(function (_a, ref) {
             'end-0': placement && placement.includes('end'),
         }, className) }, rest, { ref: ref }),
         children,
-        toasts.map(function (toast) { return React__default.cloneElement(toast, { visible: true }); }))) : null));
+        toasts.map(function (toast) { return React.cloneElement(toast, { visible: true }); }))) : null));
 });
 CToaster.propTypes = {
     children: PropTypes.node,
@@ -7642,82 +7249,87 @@ CToaster.propTypes = {
 };
 CToaster.displayName = 'CToaster';
 
-var getPlacement = function (placement, element) {
-    switch (placement) {
-        case 'right': {
-            return isRTL(element) ? 'left' : 'right';
-        }
-        case 'left': {
-            return isRTL(element) ? 'right' : 'left';
-        }
-        default: {
-            return placement;
-        }
-    }
-};
 var CTooltip = function (_a) {
-    var children = _a.children, className = _a.className, content = _a.content, _b = _a.offset, offset = _b === void 0 ? [0, 6] : _b, onHide = _a.onHide, onShow = _a.onShow, _c = _a.placement, placement = _c === void 0 ? 'top' : _c, _d = _a.trigger, trigger = _d === void 0 ? 'hover' : _d, visible = _a.visible, rest = __rest(_a, ["children", "className", "content", "offset", "onHide", "onShow", "placement", "trigger", "visible"]);
+    var children = _a.children, _b = _a.animation, animation = _b === void 0 ? true : _b, className = _a.className, content = _a.content, _c = _a.delay, delay = _c === void 0 ? 0 : _c, _d = _a.fallbackPlacements, fallbackPlacements = _d === void 0 ? ['top', 'right', 'bottom', 'left'] : _d, _e = _a.offset, offset = _e === void 0 ? [0, 6] : _e, onHide = _a.onHide, onShow = _a.onShow, _f = _a.placement, placement = _f === void 0 ? 'top' : _f, _g = _a.trigger, trigger = _g === void 0 ? ['hover', 'focus'] : _g, visible = _a.visible, rest = __rest(_a, ["children", "animation", "className", "content", "delay", "fallbackPlacements", "offset", "onHide", "onShow", "placement", "trigger", "visible"]);
     var tooltipRef = useRef(null);
     var togglerRef = useRef(null);
-    var popper = useRef();
-    var _e = useState(visible), _visible = _e[0], setVisible = _e[1];
+    var _h = usePopper(), initPopper = _h.initPopper, destroyPopper = _h.destroyPopper;
+    var _j = useState(visible), _visible = _j[0], setVisible = _j[1];
+    var _delay = typeof delay === 'number' ? { show: delay, hide: delay } : delay;
+    var popperConfig = {
+        modifiers: [
+            {
+                name: 'arrow',
+                options: {
+                    element: '.tooltip-arrow',
+                },
+            },
+            {
+                name: 'flip',
+                options: {
+                    fallbackPlacements: fallbackPlacements,
+                },
+            },
+            {
+                name: 'offset',
+                options: {
+                    offset: offset,
+                },
+            },
+        ],
+        placement: getRTLPlacement(placement, togglerRef.current),
+    };
     useEffect(function () {
         setVisible(visible);
     }, [visible]);
     useEffect(function () {
-        if (_visible) {
-            initPopper();
+        if (_visible && togglerRef.current && tooltipRef.current) {
+            initPopper(togglerRef.current, tooltipRef.current, popperConfig);
         }
         return function () {
             destroyPopper();
         };
     }, [_visible]);
-    var initPopper = function () {
-        if (togglerRef.current && tooltipRef.current) {
-            popper.current = createPopper(togglerRef.current, tooltipRef.current, {
-                modifiers: [
-                    {
-                        name: 'offset',
-                        options: {
-                            offset: offset,
-                        },
-                    },
-                ],
-                placement: getPlacement(placement, togglerRef.current),
-            });
-        }
-    };
-    var destroyPopper = function () {
-        if (popper.current) {
-            popper.current.destroy();
+    var toggleVisible = function (visible) {
+        if (visible) {
+            setTimeout(function () { return setVisible(true); }, _delay.show);
+            return;
         }
-        popper.current = undefined;
+        setTimeout(function () { return setVisible(false); }, _delay.hide);
     };
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.cloneElement(children, __assign(__assign(__assign({ ref: togglerRef }, ((trigger === 'click' || trigger.includes('click')) && {
-            onClick: function () { return setVisible(!_visible); },
+    return (React.createElement(React.Fragment, null,
+        React.cloneElement(children, __assign(__assign(__assign({ ref: togglerRef }, ((trigger === 'click' || trigger.includes('click')) && {
+            onClick: function () { return toggleVisible(!_visible); },
         })), ((trigger === 'focus' || trigger.includes('focus')) && {
-            onFocus: function () { return setVisible(true); },
-            onBlur: function () { return setVisible(false); },
+            onFocus: function () { return toggleVisible(true); },
+            onBlur: function () { return toggleVisible(false); },
         })), ((trigger === 'hover' || trigger.includes('hover')) && {
-            onMouseEnter: function () { return setVisible(true); },
-            onMouseLeave: function () { return setVisible(false); },
+            onMouseEnter: function () { return toggleVisible(true); },
+            onMouseLeave: function () { return toggleVisible(false); },
         }))),
         typeof window !== 'undefined' &&
-            createPortal(React__default.createElement(Transition$1, { in: _visible, mountOnEnter: true, onEnter: onShow, onExit: onHide, timeout: {
+            createPortal(React.createElement(Transition$1, { in: _visible, mountOnEnter: true, onEnter: onShow, onExit: onHide, timeout: {
                     enter: 0,
                     exit: 200,
-                }, unmountOnExit: true }, function (state) { return (React__default.createElement("div", __assign({ className: classNames('tooltip', "bs-tooltip-".concat(getPlacement(placement, togglerRef.current)
-                    .replace('left', 'start')
-                    .replace('right', 'end')), 'fade', {
+                }, unmountOnExit: true }, function (state) { return (React.createElement("div", __assign({ className: classNames('tooltip', 'bs-tooltip-auto', {
+                    fade: animation,
                     show: state === 'entered',
                 }, className), ref: tooltipRef, role: "tooltip" }, rest),
-                React__default.createElement("div", { "data-popper-arrow": true, className: "tooltip-arrow" }),
-                React__default.createElement("div", { className: "tooltip-inner" }, content))); }), document.body)));
+                React.createElement("div", { className: "tooltip-arrow" }),
+                React.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,
+        }),
+    ]),
+    fallbackPlacements: fallbackPlacementsPropType,
     offset: PropTypes.any,
     onHide: PropTypes.func,
     onShow: PropTypes.func,
@@ -7730,11 +7342,11 @@ CTooltip.displayName = 'CTooltip';
 var CWidgetStatsA = 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(_a, ["action", "chart", "className", "color", "title", "value"]);
-    return (React__default.createElement(CCard, __assign({ className: classNames((_b = {}, _b["bg-".concat(color)] = color, _b['text-high-emphasis-inverse'] = color, _b), className) }, rest, { ref: ref }),
-        React__default.createElement(CCardBody, { className: "pb-0 d-flex justify-content-between align-items-start" },
-            React__default.createElement("div", null,
-                value && React__default.createElement("div", { className: "fs-4 fw-semibold" }, value),
-                title && React__default.createElement("div", null, title)),
+    return (React.createElement(CCard, __assign({ className: classNames((_b = {}, _b["bg-".concat(color)] = color, _b['text-high-emphasis-inverse'] = color, _b), className) }, rest, { ref: ref }),
+        React.createElement(CCardBody, { className: "pb-0 d-flex justify-content-between align-items-start" },
+            React.createElement("div", null,
+                value && React.createElement("div", { className: "fs-4 fw-semibold" }, value),
+                title && React.createElement("div", null, title)),
             action),
         chart));
 });
@@ -7750,12 +7362,12 @@ CWidgetStatsA.displayName = 'CWidgetStatsA';
 
 var CWidgetStatsB = 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(_a, ["className", "color", "inverse", "progress", "text", "title", "value"]);
-    return (React__default.createElement(CCard, __assign({ className: className, color: color }, (inverse && { textColor: 'high-emphasis-inverse' }), rest, { ref: ref }),
-        React__default.createElement(CCardBody, null,
-            value && React__default.createElement("div", { className: "fs-4 fw-semibold" }, value),
-            title && React__default.createElement("div", null, title),
-            React__default.createElement(CProgress, __assign({ className: "my-2", height: 4 }, (inverse && { white: true }), progress)),
-            text && (React__default.createElement("small", { className: inverse ? 'text-medium-emphasis-inverse' : 'text-medium-emphasis' }, text)))));
+    return (React.createElement(CCard, __assign({ className: className, color: color }, (inverse && { textColor: 'high-emphasis-inverse' }), rest, { ref: ref }),
+        React.createElement(CCardBody, null,
+            value && React.createElement("div", { className: "fs-4 fw-semibold" }, value),
+            title && React.createElement("div", null, title),
+            React.createElement(CProgress, __assign({ className: "my-2", height: 4 }, (inverse && { white: true }), progress)),
+            text && (React.createElement("small", { className: inverse ? 'text-medium-emphasis-inverse' : 'text-medium-emphasis' }, text)))));
 });
 CWidgetStatsB.propTypes = {
     className: PropTypes.string,
@@ -7770,12 +7382,12 @@ CWidgetStatsB.displayName = 'CWidgetCWidgetStatsB';
 
 var CWidgetStatsC = 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(_a, ["className", "color", "icon", "inverse", "progress", "title", "value"]);
-    return (React__default.createElement(CCard, __assign({ className: className, color: color }, (inverse && { textColor: 'high-emphasis-inverse' }), rest, { ref: ref }),
-        React__default.createElement(CCardBody, null,
-            icon && (React__default.createElement("div", { className: "text-medium-emphasis".concat(inverse ? '-inverse' : '', " text-end mb-4") }, icon)),
-            value && (React__default.createElement("div", { className: "text-high-emphasis".concat(inverse ? '-inverse' : '', " fs-4 fw-semibold") }, value)),
-            title && (React__default.createElement("div", { className: inverse ? 'text-medium-emphasis-inverse' : 'text-medium-emphasis' }, title)),
-            React__default.createElement(CProgress, __assign({ className: "mt-3 mb-0", height: 4 }, (inverse && { white: true }), progress)))));
+    return (React.createElement(CCard, __assign({ className: className, color: color }, (inverse && { textColor: 'high-emphasis-inverse' }), rest, { ref: ref }),
+        React.createElement(CCardBody, null,
+            icon && (React.createElement("div", { className: "text-medium-emphasis".concat(inverse ? '-inverse' : '', " text-end mb-4") }, icon)),
+            value && (React.createElement("div", { className: "text-high-emphasis".concat(inverse ? '-inverse' : '', " fs-4 fw-semibold") }, value)),
+            title && (React.createElement("div", { className: inverse ? 'text-medium-emphasis-inverse' : 'text-medium-emphasis' }, title)),
+            React.createElement(CProgress, __assign({ className: "mt-3 mb-0", height: 4 }, (inverse && { white: true }), progress)))));
 });
 CWidgetStatsC.propTypes = {
     className: PropTypes.string,
@@ -7791,19 +7403,19 @@ CWidgetStatsC.displayName = 'CWidgetStatsCWidgetStatsC';
 var CWidgetStatsD = forwardRef(function (_a, ref) {
     var _b;
     var className = _a.className, chart = _a.chart, color = _a.color, icon = _a.icon, values = _a.values, rest = __rest(_a, ["className", "chart", "color", "icon", "values"]);
-    return (React__default.createElement(CCard, __assign({ className: className }, rest, { ref: ref }),
-        React__default.createElement(CCardHeader, { className: classNames('position-relative d-flex justify-content-center align-items-center', (_b = {},
+    return (React.createElement(CCard, __assign({ className: className }, rest, { ref: ref }),
+        React.createElement(CCardHeader, { className: classNames('position-relative d-flex justify-content-center align-items-center', (_b = {},
                 _b["bg-".concat(color)] = color,
                 _b)) },
             icon,
             chart),
-        React__default.createElement(CCardBody, { className: "row text-center" }, values &&
+        React.createElement(CCardBody, { className: "row text-center" }, values &&
             values.map(function (value, index) {
-                return (React__default.createElement(React__default.Fragment, { key: index },
-                    index % 2 !== 0 && React__default.createElement("div", { className: "vr" }),
-                    React__default.createElement(CCol, null,
-                        React__default.createElement("div", { className: "fs-5 fw-semibold" }, value.value),
-                        React__default.createElement("div", { className: "text-uppercase text-medium-emphasis small" }, value.title))));
+                return (React.createElement(React.Fragment, { key: index },
+                    index % 2 !== 0 && React.createElement("div", { className: "vr" }),
+                    React.createElement(CCol, null,
+                        React.createElement("div", { className: "fs-5 fw-semibold" }, value.value),
+                        React.createElement("div", { className: "text-uppercase text-medium-emphasis small" }, value.title))));
             }))));
 });
 CWidgetStatsD.propTypes = {
@@ -7817,10 +7429,10 @@ CWidgetStatsD.displayName = 'CWidgetStatsD';
 
 var CWidgetStatsE = forwardRef(function (_a, ref) {
     var chart = _a.chart, className = _a.className, title = _a.title, value = _a.value, rest = __rest(_a, ["chart", "className", "title", "value"]);
-    return (React__default.createElement(CCard, __assign({ className: classNames(className) }, rest, { ref: ref }),
-        React__default.createElement(CCardBody, { className: "text-center" },
-            title && (React__default.createElement("div", { className: "text-medium-emphasis small text-uppercase fw-semibold" }, title)),
-            value && React__default.createElement("div", { className: "fs-6 fw-semibold py-3" }, value),
+    return (React.createElement(CCard, __assign({ className: classNames(className) }, rest, { ref: ref }),
+        React.createElement(CCardBody, { className: "text-center" },
+            title && (React.createElement("div", { className: "text-medium-emphasis small text-uppercase fw-semibold" }, title)),
+            value && React.createElement("div", { className: "fs-6 fw-semibold py-3" }, value),
             chart)));
 });
 CWidgetStatsE.propTypes = {
@@ -7834,13 +7446,13 @@ CWidgetStatsE.displayName = 'CWidgetStatsE';
 
 var CWidgetStatsF = forwardRef(function (_a, ref) {
     var className = _a.className, color = _a.color, footer = _a.footer, icon = _a.icon, _b = _a.padding, padding = _b === void 0 ? true : _b, title = _a.title, value = _a.value, rest = __rest(_a, ["className", "color", "footer", "icon", "padding", "title", "value"]);
-    return (React__default.createElement(CCard, __assign({ className: className }, rest, { ref: ref }),
-        React__default.createElement(CCardBody, { className: "d-flex align-items-center ".concat(padding === false && 'p-0') },
-            React__default.createElement("div", { className: "me-3 text-white bg-".concat(color, " ").concat(padding ? 'p-3' : 'p-4') }, icon),
-            React__default.createElement("div", null,
-                React__default.createElement("div", { className: "fs-6 fw-semibold text-".concat(color) }, value),
-                React__default.createElement("div", { className: "text-medium-emphasis text-uppercase fw-semibold small" }, title))),
-        footer && React__default.createElement(CCardFooter, null, footer)));
+    return (React.createElement(CCard, __assign({ className: className }, rest, { ref: ref }),
+        React.createElement(CCardBody, { className: "d-flex align-items-center ".concat(padding === false && 'p-0') },
+            React.createElement("div", { className: "me-3 text-white bg-".concat(color, " ").concat(padding ? 'p-3' : 'p-4') }, icon),
+            React.createElement("div", null,
+                React.createElement("div", { className: "fs-6 fw-semibold text-".concat(color) }, value),
+                React.createElement("div", { className: "text-medium-emphasis text-uppercase fw-semibold small" }, title))),
+        footer && React.createElement(CCardFooter, null, footer)));
 });
 CWidgetStatsF.propTypes = {
     className: PropTypes.string,
@@ -7853,5 +7465,5 @@ CWidgetStatsF.propTypes = {
 };
 CWidgetStatsF.displayName = 'CWidgetStatsF';
 
-export { CAccordion, CAccordionBody, CAccordionButton, CAccordionHeader, CAccordionItem, CAlert, CAlertHeading, CAlertLink, CAvatar, CBackdrop, CBadge, CBreadcrumb, CBreadcrumbItem, CButton, CButtonGroup, CButtonToolbar, CCallout, CCard, CCardBody, CCardFooter, CCardGroup, CCardHeader, CCardImage, CCardImageOverlay, CCardLink, CCardSubtitle, CCardText, CCardTitle, CCarousel, CCarouselCaption, CCarouselItem, CCloseButton, CCol, CCollapse, CConditionalPortal, CContainer, CDropdown, CDropdownDivider, CDropdownHeader, CDropdownItem, CDropdownItemPlain, CDropdownMenu, CDropdownToggle, CFooter, CForm, CFormCheck, CFormControlValidation, CFormControlWrapper, CFormFeedback, CFormFloating, CFormInput, CFormLabel, CFormRange, CFormSelect, CFormSwitch, CFormText, CFormTextarea, CHeader, CHeaderBrand, CHeaderDivider, CHeaderNav, CHeaderText, CHeaderToggler, CImage, CInputGroup, CInputGroupText, CLink, CListGroup, CListGroupItem, CModal, CModalBody, CModalContent, CModalDialog, CModalFooter, CModalHeader, CModalTitle, CNav, CNavGroup, CNavGroupItems, CNavItem, CNavLink, CNavTitle, CNavbar, CNavbarBrand, CNavbarNav, CNavbarText, CNavbarToggler, COffcanvas, COffcanvasBody, COffcanvasHeader, COffcanvasTitle, CPagination, CPaginationItem, CPlaceholder, CPopover, CProgress, CProgressBar, CRow, CSidebar, CSidebarBrand, CSidebarFooter, CSidebarHeader, CSidebarNav, CSidebarToggler, CSpinner, CTabContent, CTabPane, CTable, CTableBody, CTableCaption, CTableDataCell, CTableFoot, CTableHead, CTableHeaderCell, CTableRow, CToast, CToastBody, CToastClose, CToastHeader, CToaster, CTooltip, CWidgetStatsA, CWidgetStatsB, CWidgetStatsC, CWidgetStatsD, CWidgetStatsE, CWidgetStatsF, useColorModes, useForkedRef };
+export { CAccordion, CAccordionBody, CAccordionButton, CAccordionHeader, CAccordionItem, CAlert, CAlertHeading, CAlertLink, CAvatar, CBackdrop, CBadge, CBreadcrumb, CBreadcrumbItem, CButton, CButtonGroup, CButtonToolbar, CCallout, CCard, CCardBody, CCardFooter, CCardGroup, CCardHeader, CCardImage, CCardImageOverlay, CCardLink, CCardSubtitle, CCardText, CCardTitle, CCarousel, CCarouselCaption, CCarouselItem, CCloseButton, CCol, CCollapse, CConditionalPortal, CContainer, CDropdown, CDropdownDivider, CDropdownHeader, CDropdownItem, CDropdownItemPlain, CDropdownMenu, CDropdownToggle, CFooter, CForm, CFormCheck, CFormControlValidation, CFormControlWrapper, CFormFeedback, CFormFloating, CFormInput, CFormLabel, CFormRange, CFormSelect, CFormSwitch, CFormText, CFormTextarea, CHeader, CHeaderBrand, CHeaderDivider, CHeaderNav, CHeaderText, CHeaderToggler, CImage, CInputGroup, CInputGroupText, CLink, CListGroup, CListGroupItem, CModal, CModalBody, CModalContent, CModalDialog, CModalFooter, CModalHeader, CModalTitle, CNav, CNavGroup, CNavGroupItems, CNavItem, CNavLink, CNavTitle, CNavbar, CNavbarBrand, CNavbarNav, CNavbarText, CNavbarToggler, COffcanvas, COffcanvasBody, COffcanvasHeader, COffcanvasTitle, CPagination, CPaginationItem, CPlaceholder, CPopover, CProgress, CProgressBar, CProgressStacked, CRow, CSidebar, CSidebarBrand, CSidebarFooter, CSidebarHeader, CSidebarNav, CSidebarToggler, CSpinner, CTabContent, CTabPane, CTable, CTableBody, CTableCaption, CTableDataCell, CTableFoot, CTableHead, CTableHeaderCell, CTableRow, CToast, CToastBody, CToastClose, CToastHeader, CToaster, CTooltip, CWidgetStatsA, CWidgetStatsB, CWidgetStatsC, CWidgetStatsD, CWidgetStatsE, CWidgetStatsF, useColorModes, useForkedRef, usePopper };
 //# sourceMappingURL=index.es.js.map