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

package/dist/index.js

@@ -3,26 +3,6 @@
 var React = require('react');
 var ReactDOM = require('react-dom');
 
-function _interopNamespaceDefault(e) {
-    var n = Object.create(null);
-    if (e) {
-        Object.keys(e).forEach(function (k) {
-            if (k !== 'default') {
-                var d = Object.getOwnPropertyDescriptor(e, k);
-                Object.defineProperty(n, k, d.get ? d : {
-                    enumerable: true,
-                    get: function () { return e[k]; }
-                });
-            }
-        });
-    }
-    n.default = e;
-    return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
-var ReactDOM__namespace = /*#__PURE__*/_interopNamespaceDefault(ReactDOM);
-
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -37,7 +17,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() {
@@ -71,7 +51,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;
@@ -2492,11 +2477,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;
@@ -2515,21 +2505,23 @@ var useColorModes = function (localStorageItemName) {
     if (localStorageItemName === void 0) { localStorageItemName = 'coreui-react-color-scheme'; }
     var _a = React.useState(getPreferredColorScheme(localStorageItemName)), colorMode = _a[0], setColorMode = _a[1];
     React.useEffect(function () {
-        setStoredTheme(localStorageItemName, colorMode);
-        setTheme(colorMode);
+        if (colorMode) {
+            setStoredTheme(localStorageItemName, colorMode);
+            setTheme(colorMode);
+        }
     }, [colorMode]);
     React.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; },
+        colorMode: colorMode,
         isColorModeSet: function () { return Boolean(getStoredTheme(localStorageItemName)); },
-        setColorMode: function (mode) { return setColorMode(mode); },
+        setColorMode: setColorMode,
     };
 };
 
@@ -2576,1115 +2568,270 @@ function isFunction(value) {
     return !!(value && {}.toString.call(value) == '[object Function]');
 }
 
-var CCollapse = React.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 = React.useRef(null);
-    var forkedRef = useForkedRef(ref, collapseRef);
-    var _b = React.useState(), height = _b[0], setHeight = _b[1];
-    var _c = React.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 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 CAccordionBody = React.forwardRef(function (_a, ref) {
-    var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
-    var visible = React.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 beforeRead = 'beforeRead';
+var read = 'read';
+var afterRead = 'afterRead'; // pure-logic modifiers
 
-var CAccordionButton = React.forwardRef(function (_a, ref) {
-    var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
-    var _b = React.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 beforeMain = 'beforeMain';
+var main = 'main';
+var afterMain = 'afterMain'; // modifier with the purpose to write to the DOM (or write into a framework state)
 
-var CAccordionHeader = React.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';
+var beforeWrite = 'beforeWrite';
+var write = 'write';
+var afterWrite = 'afterWrite';
+var modifierPhases = [beforeRead, read, afterRead, beforeMain, main, afterMain, beforeWrite, write, afterWrite];
 
-var CCloseButton = React.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';
+function getNodeName(element) {
+  return element ? (element.nodeName || '').toLowerCase() : null;
+}
 
-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 getWindow(node) {
+  if (node == null) {
+    return window;
+  }
 
-var CAlert = React.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 = React.useRef(null);
-    var forkedRef = useForkedRef(ref, alertRef);
-    var _d = React.useState(visible), _visible = _d[0], setVisible = _d[1];
-    React.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';
+  if (node.toString() !== '[object Window]') {
+    var ownerDocument = node.ownerDocument;
+    return ownerDocument ? ownerDocument.defaultView || window : window;
+  }
 
-var CAlertHeading = React.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';
+  return node;
+}
 
-var CLink = React.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';
+function isElement(node) {
+  var OwnElement = getWindow(node).Element;
+  return node instanceof OwnElement || node instanceof Element;
+}
 
-var CAlertLink = React.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';
+function isHTMLElement(node) {
+  var OwnElement = getWindow(node).HTMLElement;
+  return node instanceof OwnElement || node instanceof HTMLElement;
+}
 
-var CAvatar = React.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';
+function isShadowRoot(node) {
+  // IE 11 has no ShadowRoot
+  if (typeof ShadowRoot === 'undefined') {
+    return false;
+  }
 
-var CBackdrop = React.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 = React.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 OwnElement = getWindow(node).ShadowRoot;
+  return node instanceof OwnElement || node instanceof ShadowRoot;
+}
 
-var CBadge = React.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';
+// and applies them to the HTMLElements such as popper and arrow
 
-var CBreadcrumb = React.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';
+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 CBreadcrumbItem = React.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';
+    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 CButton = React.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';
 
-var CButtonToolbar = React.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';
+    Object.assign(element.style, style);
+    Object.keys(attributes).forEach(function (name) {
+      var value = attributes[name];
 
-var CButtonGroup = React.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';
+      if (value === false) {
+        element.removeAttribute(name);
+      } else {
+        element.setAttribute(name, value === true ? '' : value);
+      }
+    });
+  });
+}
 
-var CCallout = React.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';
+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 CCard = React.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';
+  if (state.elements.arrow) {
+    Object.assign(state.elements.arrow.style, initialStyles.arrow);
+  }
 
-var CCardBody = React.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 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 CCardFooter = React.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 style = styleProperties.reduce(function (style, property) {
+        style[property] = '';
+        return style;
+      }, {}); // arrow is optional + virtual elements
 
-var CCardGroup = React.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';
+      if (!isHTMLElement(element) || !getNodeName(element)) {
+        return;
+      }
 
-var CCardHeader = React.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';
+      Object.assign(element.style, style);
+      Object.keys(attributes).forEach(function (attribute) {
+        element.removeAttribute(attribute);
+      });
+    });
+  };
+} // eslint-disable-next-line import/no-unused-modules
 
-var CCardImage = React.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';
 
-var CCardImageOverlay = React.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,
+var applyStyles$1 = {
+  name: 'applyStyles',
+  enabled: true,
+  phase: 'write',
+  fn: applyStyles,
+  effect: effect$2,
+  requires: ['computeStyles']
 };
-CCardImageOverlay.displayName = 'CCardImageOverlay';
 
-var CCardLink = React.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';
+function getBasePlacement(placement) {
+  return placement.split('-')[0];
+}
 
-var CCardSubtitle = React.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 max = Math.max;
+var min = Math.min;
+var round = Math.round;
 
-var CCardText = React.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';
+function getUAString() {
+  var uaData = navigator.userAgentData;
 
-var CCardTitle = React.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 (uaData != null && uaData.brands && Array.isArray(uaData.brands)) {
+    return uaData.brands.map(function (item) {
+      return item.brand + "/" + item.version;
+    }).join(' ');
+  }
 
-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));
-};
+  return navigator.userAgent;
+}
 
-var isRTL = function (element) {
-    if (typeof document !== 'undefined' && document.documentElement.dir === 'rtl') {
-        return true;
-    }
-    if (element) {
-        return element.closest('[dir="rtl"]') !== null;
-    }
-    return false;
-};
+function isLayoutViewport() {
+  return !/^((?!chrome|android).)*safari/i.test(getUAString());
+}
 
-var CCarouselContext = React.createContext({});
-var CCarousel = React.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 = React.useRef(null);
-    var forkedRef = useForkedRef(ref, carouselRef);
-    var data = React.useRef({}).current;
-    var _g = React.useState(activeIndex), active = _g[0], setActive = _g[1];
-    var _h = React.useState(false), animating = _h[0], setAnimating = _h[1];
-    var _j = React.useState(), customInterval = _j[0], setCustomInterval = _j[1];
-    var _k = React.useState('next'), direction = _k[0], setDirection = _k[1];
-    var _l = React.useState(0), itemsNumber = _l[0], setItemsNumber = _l[1];
-    var _m = React.useState(null), touchPosition = _m[0], setTouchPosition = _m[1];
-    var _o = React.useState(), visible = _o[0], setVisible = _o[1];
-    React.useEffect(function () {
-        setItemsNumber(React.Children.toArray(children).length);
-    });
-    React.useEffect(function () {
-        visible && cycle();
-    }, [visible]);
-    React.useEffect(function () {
-        !animating && cycle();
-        !animating && onSlid && onSlid(active, direction);
-        animating && onSlide && onSlide(active, direction);
-    }, [animating]);
-    React.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" }, React.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 CCarouselCaption = React.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';
+function getBoundingClientRect(element, includeScale, isFixedStrategy) {
+  if (includeScale === void 0) {
+    includeScale = false;
+  }
 
-var CCarouselItem = React.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 = React.useContext(CCarouselContext), setAnimating = _c.setAnimating, setCustomInterval = _c.setCustomInterval;
-    var carouselItemRef = React.useRef(null);
-    var forkedRef = useForkedRef(ref, carouselItemRef);
-    var prevActive = React.useRef();
-    var _d = React.useState(), directionClassName = _d[0], setDirectionClassName = _d[1];
-    var _e = React.useState(), orderClassName = _e[0], setOrderClassName = _e[1];
-    var _f = React.useState(active && 'active'), activeClassName = _f[0], setActiveClassName = _f[1];
-    var _g = React.useState(0), count = _g[0], setCount = _g[1];
-    React.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]);
-    React.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.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';
+  if (isFixedStrategy === void 0) {
+    isFixedStrategy = false;
+  }
 
-var CConditionalPortal = function (_a) {
-    var children = _a.children, portal = _a.portal;
-    return typeof window !== 'undefined' && portal ? (ReactDOM.createPortal(children, document.body)) : (React.createElement(React.Fragment, null, children));
-};
-CConditionalPortal.propTypes = {
-    children: PropTypes.node,
-    portal: PropTypes.bool.isRequired,
-};
-CConditionalPortal.displayName = 'CConditionalPortal';
+  var clientRect = element.getBoundingClientRect();
+  var scaleX = 1;
+  var scaleY = 1;
 
-var ManagerReferenceNodeContext = React__namespace.createContext();
-var ManagerReferenceNodeSetterContext = React__namespace.createContext();
-function Manager(_ref) {
-  var children = _ref.children;
+  if (includeScale && isHTMLElement(element)) {
+    scaleX = element.offsetWidth > 0 ? round(clientRect.width) / element.offsetWidth || 1 : 1;
+    scaleY = element.offsetHeight > 0 ? round(clientRect.height) / element.offsetHeight || 1 : 1;
+  }
 
-  var _React$useState = React__namespace.useState(null),
-      referenceNode = _React$useState[0],
-      setReferenceNode = _React$useState[1];
+  var _ref = isElement(element) ? getWindow(element) : window,
+      visualViewport = _ref.visualViewport;
 
-  var hasUnmounted = React__namespace.useRef(false);
-  React__namespace.useEffect(function () {
-    return function () {
-      hasUnmounted.current = true;
-    };
-  }, []);
-  var handleSetReferenceNode = React__namespace.useCallback(function (node) {
-    if (!hasUnmounted.current) {
-      setReferenceNode(node);
-    }
-  }, []);
-  return /*#__PURE__*/React__namespace.createElement(ManagerReferenceNodeContext.Provider, {
-    value: referenceNode
-  }, /*#__PURE__*/React__namespace.createElement(ManagerReferenceNodeSetterContext.Provider, {
-    value: handleSetReferenceNode
-  }, children));
+  var addVisualOffsets = !isLayoutViewport() && isFixedStrategy;
+  var x = (clientRect.left + (addVisualOffsets && visualViewport ? visualViewport.offsetLeft : 0)) / scaleX;
+  var y = (clientRect.top + (addVisualOffsets && visualViewport ? visualViewport.offsetTop : 0)) / scaleY;
+  var width = clientRect.width / scaleX;
+  var height = clientRect.height / scaleY;
+  return {
+    width: width,
+    height: height,
+    top: y,
+    right: x + width,
+    bottom: y + height,
+    left: x,
+    x: x,
+    y: y
+  };
 }
 
-/**
- * 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];
-    }
+// means it doesn't take into account transforms.
 
-    return fn.apply(void 0, args);
-  }
-};
-/**
- * Sets a ref using either a ref callback or a ref object
- */
+function getLayoutRect(element) {
+  var clientRect = getBoundingClientRect(element); // Use the clientRect sizes if it's not been transformed.
+  // Fixes https://github.com/popperjs/popper-core/issues/1223
 
-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 width = element.offsetWidth;
+  var height = element.offsetHeight;
 
-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
- */
+  if (Math.abs(clientRect.width - width) <= 1) {
+    width = clientRect.width;
+  }
 
-var useIsomorphicLayoutEffect = typeof window !== 'undefined' && window.document && window.document.createElement ? React__namespace.useLayoutEffect : React__namespace.useEffect;
+  if (Math.abs(clientRect.height - height) <= 1) {
+    height = clientRect.height;
+  }
 
-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
+  return {
+    x: element.offsetLeft,
+    y: element.offsetTop,
+    width: width,
+    height: height
+  };
+}
 
-var beforeRead = 'beforeRead';
-var read = 'read';
-var afterRead = 'afterRead'; // pure-logic modifiers
+function contains(parent, child) {
+  var rootNode = child.getRootNode && child.getRootNode(); // First, attempt with faster native method
 
-var beforeMain = 'beforeMain';
-var main = 'main';
-var afterMain = 'afterMain'; // modifier with the purpose to write to the DOM (or write into a framework state)
+  if (parent.contains(child)) {
+    return true;
+  } // then fallback to custom implementation with Shadow DOM support
+  else if (rootNode && isShadowRoot(rootNode)) {
+      var next = child;
 
-var beforeWrite = 'beforeWrite';
-var write = 'write';
-var afterWrite = 'afterWrite';
-var modifierPhases = [beforeRead, read, afterRead, beforeMain, main, afterMain, beforeWrite, write, afterWrite];
+      do {
+        if (next && parent.isSameNode(next)) {
+          return true;
+        } // $FlowFixMe[prop-missing]: need a better way to handle this...
 
-function getNodeName(element) {
-  return element ? (element.nodeName || '').toLowerCase() : null;
-}
 
-function getWindow(node) {
-  if (node == null) {
-    return window;
-  }
+        next = next.parentNode || next.host;
+      } while (next);
+    } // Give up, the result is false
 
-  if (node.toString() !== '[object Window]') {
-    var ownerDocument = node.ownerDocument;
-    return ownerDocument ? ownerDocument.defaultView || window : window;
-  }
 
-  return node;
+  return false;
 }
 
-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;
-      }
-
-      Object.assign(element.style, style);
-      Object.keys(attributes).forEach(function (attribute) {
-        element.removeAttribute(attribute);
-      });
-    });
-  };
-} // eslint-disable-next-line import/no-unused-modules
-
-
-var applyStyles$1 = {
-  name: 'applyStyles',
-  enabled: true,
-  phase: 'write',
-  fn: applyStyles,
-  effect: effect$2,
-  requires: ['computeStyles']
-};
-
-function getBasePlacement(placement) {
-  return placement.split('-')[0];
-}
-
-var max = Math.max;
-var min = Math.min;
-var round = Math.round;
-
-function getUAString() {
-  var uaData = navigator.userAgentData;
-
-  if (uaData != null && uaData.brands && Array.isArray(uaData.brands)) {
-    return uaData.brands.map(function (item) {
-      return item.brand + "/" + item.version;
-    }).join(' ');
-  }
-
-  return navigator.userAgent;
-}
-
-function isLayoutViewport() {
-  return !/^((?!chrome|android).)*safari/i.test(getUAString());
-}
-
-function getBoundingClientRect(element, includeScale, isFixedStrategy) {
-  if (includeScale === void 0) {
-    includeScale = false;
-  }
-
-  if (isFixedStrategy === void 0) {
-    isFixedStrategy = false;
-  }
-
-  var clientRect = element.getBoundingClientRect();
-  var scaleX = 1;
-  var scaleY = 1;
-
-  if (includeScale && isHTMLElement(element)) {
-    scaleX = element.offsetWidth > 0 ? round(clientRect.width) / element.offsetWidth || 1 : 1;
-    scaleY = element.offsetHeight > 0 ? round(clientRect.height) / element.offsetHeight || 1 : 1;
-  }
-
-  var _ref = isElement(element) ? getWindow(element) : window,
-      visualViewport = _ref.visualViewport;
-
-  var addVisualOffsets = !isLayoutViewport() && isFixedStrategy;
-  var x = (clientRect.left + (addVisualOffsets && visualViewport ? visualViewport.offsetLeft : 0)) / scaleX;
-  var y = (clientRect.top + (addVisualOffsets && visualViewport ? visualViewport.offsetTop : 0)) / scaleY;
-  var width = clientRect.width / scaleX;
-  var height = clientRect.height / scaleY;
-  return {
-    width: width,
-    height: height,
-    top: y,
-    right: x + width,
-    bottom: y + height,
-    left: x,
-    x: x,
-    y: y
-  };
-}
-
-// means it doesn't take into account transforms.
-
-function getLayoutRect(element) {
-  var clientRect = getBoundingClientRect(element); // Use the clientRect sizes if it's not been transformed.
-  // Fixes https://github.com/popperjs/popper-core/issues/1223
-
-  var width = element.offsetWidth;
-  var height = element.offsetHeight;
-
-  if (Math.abs(clientRect.width - width) <= 1) {
-    width = clientRect.width;
-  }
-
-  if (Math.abs(clientRect.height - height) <= 1) {
-    height = clientRect.height;
-  }
-
-  return {
-    x: element.offsetLeft,
-    y: element.offsetTop,
-    width: width,
-    height: height
-  };
-}
-
-function contains(parent, child) {
-  var rootNode = child.getRootNode && child.getRootNode(); // First, attempt with faster native method
-
-  if (parent.contains(child)) {
-    return true;
-  } // then fallback to custom implementation with Shadow DOM support
-  else if (rootNode && isShadowRoot(rootNode)) {
-      var next = child;
-
-      do {
-        if (next && parent.isSameNode(next)) {
-          return true;
-        } // $FlowFixMe[prop-missing]: need a better way to handle this...
-
-
-        next = next.parentNode || next.host;
-      } while (next);
-    } // Give up, the result is false
-
-
-  return false;
-}
-
-function getComputedStyle$1(element) {
-  return getWindow(element).getComputedStyle(element);
+function getComputedStyle$1(element) {
+  return getWindow(element).getComputedStyle(element);
 }
 
 function isTableElement(element) {
@@ -5130,498 +4277,920 @@ function popperGenerator(generatorOptions) {
             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;
+          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 = React.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 = React.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 = React.useRef(null);
+    var forkedRef = useForkedRef(ref, collapseRef);
+    var _b = React.useState(), height = _b[0], setHeight = _b[1];
+    var _c = React.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 = React.forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
+    var visible = React.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 CAccordionButton = React.forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
+    var _b = React.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 CAccordionHeader = React.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';
+
+var CCloseButton = React.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 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']),
+]);
+
+var CAlert = React.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 = React.useRef(null);
+    var forkedRef = useForkedRef(ref, alertRef);
+    var _d = React.useState(visible), _visible = _d[0], setVisible = _d[1];
+    React.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 = React.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';
+
+var CLink = React.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';
+
+var CAlertLink = React.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';
+
+var CAvatar = React.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';
+
+var CBackdrop = React.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 = React.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 CBadge = React.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 = React.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 = React.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 = React.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 = React.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 = React.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 = React.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 = React.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 = React.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 = React.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 = React.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 = React.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 = React.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 = React.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 = React.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 = React.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 = React.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 = React.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__namespace.useRef(null);
-  var optionsWithDefaults = {
-    onFirstUpdate: options.onFirstUpdate,
-    placement: options.placement || 'bottom',
-    strategy: options.strategy || 'absolute',
-    modifiers: options.modifiers || EMPTY_MODIFIERS$1
-  };
+var CCarouselContext = React.createContext({});
+var CCarousel = React.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 = React.useRef(null);
+    var forkedRef = useForkedRef(ref, carouselRef);
+    var data = React.useRef({}).current;
+    var _g = React.useState(activeIndex), active = _g[0], setActive = _g[1];
+    var _h = React.useState(false), animating = _h[0], setAnimating = _h[1];
+    var _j = React.useState(), customInterval = _j[0], setCustomInterval = _j[1];
+    var _k = React.useState('next'), direction = _k[0], setDirection = _k[1];
+    var _l = React.useState(0), itemsNumber = _l[0], setItemsNumber = _l[1];
+    var _m = React.useState(null), touchPosition = _m[0], setTouchPosition = _m[1];
+    var _o = React.useState(), visible = _o[0], setVisible = _o[1];
+    React.useEffect(function () {
+        setItemsNumber(React.Children.toArray(children).length);
+    });
+    React.useEffect(function () {
+        visible && cycle();
+    }, [visible]);
+    React.useEffect(function () {
+        !animating && cycle();
+        !animating && onSlid && onSlid(active, direction);
+        animating && onSlide && onSlide(active, direction);
+    }, [animating]);
+    React.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" }, React.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__namespace.useState({
-    styles: {
-      popper: {
-        position: optionsWithDefaults.strategy,
-        left: '0',
-        top: '0'
-      },
-      arrow: {
-        position: 'absolute'
-      }
-    },
-    attributes: {}
-  }),
-      state = _React$useState[0],
-      setState = _React$useState[1];
+var CCarouselCaption = React.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__namespace.useMemo(function () {
-    return {
-      name: 'updateState',
-      enabled: true,
-      phase: 'write',
-      fn: function fn(_ref) {
-        var state = _ref.state;
-        var elements = Object.keys(state.elements);
-        ReactDOM__namespace.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 = React.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 = React.useContext(CCarouselContext), setAnimating = _c.setAnimating, setCustomInterval = _c.setCustomInterval;
+    var carouselItemRef = React.useRef(null);
+    var forkedRef = useForkedRef(ref, carouselItemRef);
+    var prevActive = React.useRef();
+    var _d = React.useState(), directionClassName = _d[0], setDirectionClassName = _d[1];
+    var _e = React.useState(), orderClassName = _e[0], setOrderClassName = _e[1];
+    var _f = React.useState(active && 'active'), activeClassName = _f[0], setActiveClassName = _f[1];
+    var _g = React.useState(0), count = _g[0], setCount = _g[1];
+    React.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]);
+    React.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__namespace.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__namespace.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 ? (ReactDOM.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__namespace.useContext(ManagerReferenceNodeContext);
-
-  var _React$useState = React__namespace.useState(null),
-      popperElement = _React$useState[0],
-      setPopperElement = _React$useState[1];
-
-  var _React$useState2 = React__namespace.useState(null),
-      arrowElement = _React$useState2[0],
-      setArrowElement = _React$useState2[1];
-
-  React__namespace.useEffect(function () {
-    setRef(innerRef, popperElement);
-  }, [innerRef, popperElement]);
-  var options = React__namespace.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__namespace.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__namespace.useContext(ManagerReferenceNodeSetterContext);
-  var refHandler = React__namespace.useCallback(function (node) {
-    setRef(innerRef, node);
-    safeInvoke(setReferenceNode, node);
-  }, [innerRef, setReferenceNode]); // ran on unmount
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  React__namespace.useEffect(function () {
-    return function () {
-      return setRef(innerRef, null);
-    };
-  }, []);
-  React__namespace.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.createElement(Manager, null, children) : React.createElement(React.Fragment, null, children);
+    return _placement;
 };
 var CDropdownContext = React.createContext({});
 var CDropdown = React.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 = React.useRef(null);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     var dropdownToggleRef = React.useRef(null);
+    var dropdownMenuRef = React.useRef(null);
     var forkedRef = useForkedRef(ref, dropdownRef);
-    var _k = React.useState(visible), _visible = _k[0], setVisible = _k[1];
+    var _l = React.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') {
@@ -5629,44 +5198,83 @@ var CDropdown = React.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)),
+    };
     React.useEffect(function () {
         setVisible(visible);
     }, [visible]);
     React.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.createElement(CDropdownContext.Provider, { value: contextValues },
-        React.createElement(PopperManagerWrapper, { popper: popper }, 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 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,
@@ -5677,6 +5285,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,
@@ -5741,74 +5350,23 @@ var alignmentClassNames = function (alignment) {
     }
     return classNames;
 };
-var CDropdownMenu = function (_a) {
+var CDropdownMenu = React.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 = React.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 = React.useRef(null);
-    React.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.createElement(CConditionalPortal, { portal: portal !== null && portal !== void 0 ? portal : false },
+    var _c = React.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'
+            }, 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.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,
@@ -5818,7 +5376,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 = React.useContext(CDropdownContext), dropdownToggleRef = _d.dropdownToggleRef, popper = _d.popper, variant = _d.variant, visible = _d.visible, setVisible = _d.setVisible;
+    var _d = React.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();
@@ -5834,22 +5392,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) {
+    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: useForkedRef(ref, dropdownToggleRef) }))));
+            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.createElement("a", __assign({ href: "#" }, togglerProps, { ref: useForkedRef(ref, dropdownToggleRef) }), children));
+            return (React.createElement("a", __assign({ href: "#" }, togglerProps, { ref: dropdownToggleRef }), children));
         }
-        return (React.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.createElement("span", { className: "visually-hidden" }, "Toggle Dropdown")));
     };
-    return popper ? React.createElement(Reference, null, function (_a) {
-        var ref = _a.ref;
-        return Toggler(ref);
-    }) : Toggler(dropdownToggleRef);
+    return React.createElement(Toggler, null);
 };
 CDropdownToggle.propTypes = {
     caret: PropTypes.bool,
@@ -7018,14 +6572,29 @@ CPlaceholder.propTypes = {
 };
 CPlaceholder.displayName = 'CPlaceholder';
 
+var CProgressStackedContext = React.createContext({});
+var CProgressStacked = React.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 = React.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"]);
+    var stacked = React.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,
@@ -7037,102 +6606,121 @@ CProgressBar.propTypes = {
 };
 CProgressBar.displayName = 'CProgressBar';
 
-// TODO: update markup and add '.progress-stacked' in v5
 var CProgress = React.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.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 = React.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.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 = React.useRef(null);
     var togglerRef = React.useRef(null);
-    var popper = React.useRef();
-    var _e = React.useState(visible), _visible = _e[0], setVisible = _e[1];
+    var _h = usePopper(), initPopper = _h.initPopper, destroyPopper = _h.destroyPopper;
+    var _j = React.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),
+    };
     React.useEffect(function () {
         setVisible(visible);
     }, [visible]);
     React.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.createElement(React.Fragment, null,
         React.cloneElement(children, __assign(__assign(__assign({ ref: togglerRef }, ((trigger === 'click' || trigger.includes('click')) && {
-            onClick: function () { return setVisible(!_visible); },
+            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' &&
             ReactDOM.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.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.createElement("div", { "data-popper-arrow": true, className: "popover-arrow" }),
+                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,
@@ -7663,82 +7251,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 = React.useRef(null);
     var togglerRef = React.useRef(null);
-    var popper = React.useRef();
-    var _e = React.useState(visible), _visible = _e[0], setVisible = _e[1];
+    var _h = usePopper(), initPopper = _h.initPopper, destroyPopper = _h.destroyPopper;
+    var _j = React.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),
+    };
     React.useEffect(function () {
         setVisible(visible);
     }, [visible]);
     React.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.createElement(React.Fragment, null,
         React.cloneElement(children, __assign(__assign(__assign({ ref: togglerRef }, ((trigger === 'click' || trigger.includes('click')) && {
-            onClick: function () { return setVisible(!_visible); },
+            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' &&
             ReactDOM.createPortal(React.createElement(Transition$1, { in: _visible, mountOnEnter: true, onEnter: onShow, onExit: onHide, timeout: {
                     enter: 0,
                     exit: 200,
-                }, unmountOnExit: true }, function (state) { return (React.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.createElement("div", { "data-popper-arrow": true, className: "tooltip-arrow" }),
+                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,
@@ -7971,6 +7564,7 @@ exports.CPlaceholder = CPlaceholder;
 exports.CPopover = CPopover;
 exports.CProgress = CProgress;
 exports.CProgressBar = CProgressBar;
+exports.CProgressStacked = CProgressStacked;
 exports.CRow = CRow;
 exports.CSidebar = CSidebar;
 exports.CSidebarBrand = CSidebarBrand;
@@ -8003,4 +7597,5 @@ exports.CWidgetStatsE = CWidgetStatsE;
 exports.CWidgetStatsF = CWidgetStatsF;
 exports.useColorModes = useColorModes;
 exports.useForkedRef = useForkedRef;
+exports.usePopper = usePopper;
 //# sourceMappingURL=index.js.map