@coreui/react 4.6.0 → 4.7.0

package/dist/index.js

@@ -1328,10 +1328,9 @@ var classNames = classnamesExports;
 
 var CAccordionContext = React.createContext({});
 var CAccordion = React.forwardRef(function (_a, ref) {
-    var children = _a.children, _b = _a.activeItemKey, activeItemKey = _b === void 0 ? undefined : _b, _c = _a.alwaysOpen, alwaysOpen = _c === void 0 ? false : _c, className = _a.className, flush = _a.flush, rest = __rest(_a, ["children", "activeItemKey", "alwaysOpen", "className", "flush"]);
-    var _d = React.useState(activeItemKey), _activeItemKey = _d[0], setActiveKey = _d[1];
-    var _className = classNames('accordion', { 'accordion-flush': flush }, className);
-    return (React.createElement("div", __assign({ className: _className }, rest, { ref: ref }),
+    var children = _a.children, activeItemKey = _a.activeItemKey, _b = _a.alwaysOpen, alwaysOpen = _b === void 0 ? false : _b, className = _a.className, flush = _a.flush, rest = __rest(_a, ["children", "activeItemKey", "alwaysOpen", "className", "flush"]);
+    var _c = React.useState(activeItemKey), _activeItemKey = _c[0], setActiveKey = _c[1];
+    return (React.createElement("div", __assign({ className: classNames('accordion', { 'accordion-flush': flush }, className) }, rest, { ref: ref }),
         React.createElement(CAccordionContext.Provider, { value: { _activeItemKey: _activeItemKey, alwaysOpen: alwaysOpen, setActiveKey: setActiveKey } }, children)));
 });
 CAccordion.propTypes = {
@@ -1346,7 +1345,7 @@ CAccordion.displayName = 'CAccordion';
 var CAccordionItemContext = React.createContext({});
 var CAccordionItem = React.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, itemKey = _a.itemKey, rest = __rest(_a, ["children", "className", "itemKey"]);
-    var _itemKey = React.useRef(itemKey ? itemKey : Math.random().toString(36).substr(2, 9));
+    var _itemKey = React.useRef(itemKey !== null && itemKey !== void 0 ? itemKey : Math.random().toString(36).slice(2, 11));
     var _b = React.useContext(CAccordionContext), _activeItemKey = _b._activeItemKey, alwaysOpen = _b.alwaysOpen, setActiveKey = _b.setActiveKey;
     var _c = React.useState(Boolean(_activeItemKey === _itemKey.current)), visible = _c[0], setVisible = _c[1];
     React.useEffect(function () {
@@ -1355,8 +1354,7 @@ var CAccordionItem = React.forwardRef(function (_a, ref) {
     React.useEffect(function () {
         setVisible(Boolean(_activeItemKey === _itemKey.current));
     }, [_activeItemKey]);
-    var _className = classNames('accordion-item', className);
-    return (React.createElement("div", __assign({ className: _className }, rest, { ref: ref }),
+    return (React.createElement("div", __assign({ className: classNames('accordion-item', className) }, rest, { ref: ref }),
         React.createElement(CAccordionItemContext.Provider, { value: { setVisible: setVisible, visible: visible } }, children)));
 });
 CAccordionItem.propTypes = {
@@ -2542,19 +2540,10 @@ function isFunction(value) {
 
 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 _b = React.useState(), height = _b[0], setHeight = _b[1];
-    var _c = React.useState(), width = _c[0], setWidth = _c[1];
     var collapseRef = React.useRef(null);
     var forkedRef = useForkedRef(ref, collapseRef);
-    var getTransitionClass = function (state) {
-        return state === 'entering'
-            ? 'collapsing'
-            : state === 'entered'
-                ? 'collapse show'
-                : state === 'exiting'
-                    ? 'collapsing'
-                    : 'collapse';
-    };
+    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) {
@@ -2592,14 +2581,15 @@ var CCollapse = React.forwardRef(function (_a, ref) {
         }
         setHeight(0);
     };
-    var _className = classNames({
-        'collapse-horizontal': horizontal,
-    }, className);
     return (React.createElement(CSSTransition$1, { in: visible, nodeRef: collapseRef, onEntering: onEntering, onEntered: onEntered, onExit: onExit, onExiting: onExiting, onExited: onExited, timeout: 350 }, function (state) {
-        var transitionClass = getTransitionClass(state);
         var currentHeight = height === 0 ? null : { height: height };
         var currentWidth = width === 0 ? null : { width: width };
-        return (React.createElement("div", __assign({ className: classNames(_className, transitionClass), style: __assign(__assign({}, currentHeight), currentWidth) }, rest, { ref: forkedRef }), children));
+        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 = {
@@ -2615,9 +2605,8 @@ 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;
-    var _className = classNames('accordion-body', className);
     return (React.createElement(CCollapse, { className: "accordion-collapse", visible: visible },
-        React.createElement("div", __assign({ className: _className }, rest, { ref: ref }), children)));
+        React.createElement("div", __assign({ className: classNames('accordion-body', className) }, rest, { ref: ref }), children)));
 });
 CAccordionBody.propTypes = {
     children: propTypesExports.node,
@@ -2628,8 +2617,7 @@ 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;
-    var _className = classNames('accordion-button', { collapsed: !visible }, className);
-    return (React.createElement("button", __assign({ type: "button", className: _className, "aria-expanded": !visible, onClick: function () { return setVisible(!visible); } }, rest, { ref: ref }), children));
+    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: propTypesExports.node,
@@ -2648,8 +2636,7 @@ CAccordionCollapse.displayName = 'CAccordionCollapse';
 
 var CAccordionHeader = React.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
-    var _className = classNames('accordion-header', className);
-    return (React.createElement("div", __assign({ className: _className }, rest, { ref: ref }),
+    return (React.createElement("div", __assign({ className: classNames('accordion-header', className) }, rest, { ref: ref }),
         React.createElement(CAccordionButton, null, children)));
 });
 CAccordionHeader.propTypes = {
@@ -2658,6 +2645,19 @@ CAccordionHeader.propTypes = {
 };
 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: propTypesExports.string,
+    disabled: propTypesExports.bool,
+    white: propTypesExports.bool,
+};
+CCloseButton.displayName = 'CCloseButton';
+
 var colorPropType = propTypesExports.oneOfType([
     propTypesExports.oneOf([
         'primary',
@@ -2711,20 +2711,6 @@ var textColorsPropType = propTypesExports.oneOfType([
 ]);
 var triggerPropType = propTypesExports.oneOf(['hover', 'focus', 'click']);
 
-var CCloseButton = React.forwardRef(function (_a, ref) {
-    var className = _a.className, disabled = _a.disabled, white = _a.white, rest = __rest(_a, ["className", "disabled", "white"]);
-    var _className = classNames('btn', 'btn-close', {
-        'btn-close-white': white,
-    }, disabled, className);
-    return (React.createElement("button", __assign({ type: "button", className: _className, "aria-label": "Close", disabled: disabled }, rest, { ref: ref })));
-});
-CCloseButton.propTypes = {
-    className: propTypesExports.string,
-    disabled: propTypesExports.bool,
-    white: propTypesExports.bool,
-};
-CCloseButton.displayName = 'CCloseButton';
-
 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);
@@ -2733,18 +2719,12 @@ var CAlert = React.forwardRef(function (_a, ref) {
     React.useEffect(function () {
         setVisible(visible);
     }, [visible]);
-    var _className = classNames('alert', variant === 'solid' ? "bg-".concat(color, " text-white") : "alert-".concat(color), {
-        'alert-dismissible fade': dismissible,
-    }, className);
-    var getTransitionClass = function (state) {
-        return state === 'entered' && 'show';
-    };
-    return (React.createElement(Transition$1, { in: _visible, mountOnEnter: true, nodeRef: alertRef, onExit: onClose, timeout: 150, unmountOnExit: true }, function (state) {
-        var transitionClass = getTransitionClass(state);
-        return (React.createElement("div", __assign({ className: classNames(_className, transitionClass), role: "alert" }, rest, { ref: forkedRef }),
-            children,
-            dismissible && React.createElement(CCloseButton, { onClick: function () { return setVisible(false); } })));
-    }));
+    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: propTypesExports.node,
@@ -2759,8 +2739,7 @@ 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"]);
-    var _className = classNames('alert-heading', className);
-    return (React.createElement(Component, __assign({ className: _className }, rest, { ref: ref }), children));
+    return (React.createElement(Component, __assign({ className: classNames('alert-heading', className) }, rest, { ref: ref }), children));
 });
 CAlertHeading.propTypes = {
     children: propTypesExports.node,
@@ -2771,9 +2750,11 @@ 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>`
-    var _className = classNames(className, { active: active, disabled: disabled });
-    return (React.createElement(Component, __assign({ className: _className }, (active && { 'aria-current': 'page' }), (Component === 'a' && disabled && { 'aria-disabled': true, tabIndex: -1 }), ((Component === 'a' || Component === 'button') && {
+    , __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);
@@ -2791,8 +2772,7 @@ CLink.displayName = 'CLink';
 
 var CAlertLink = React.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
-    var _className = classNames('alert-link', className);
-    return (React.createElement(CLink, __assign({ className: _className }, rest, { ref: ref }), children));
+    return (React.createElement(CLink, __assign({ className: classNames('alert-link', className) }, rest, { ref: ref }), children));
 });
 CAlertLink.propTypes = {
     children: propTypesExports.node,
@@ -2803,13 +2783,12 @@ 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 _className = classNames('avatar', (_b = {},
-        _b["bg-".concat(color)] = color,
-        _b["avatar-".concat(size)] = size,
-        _b["text-".concat(textColor)] = textColor,
-        _b), shape, className);
     var statusClassName = status && classNames('avatar-status', "bg-".concat(status));
-    return (React.createElement("div", __assign({ className: _className }, rest, { ref: ref }),
+    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 })));
 });
@@ -2829,14 +2808,9 @@ 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);
-    var _className = classNames(className, 'fade');
-    var getTransitionClass = function (state) {
-        return state === 'entered' && 'show';
-    };
-    return (React.createElement(Transition$1, { in: visible, mountOnEnter: true, nodeRef: backdropRef, timeout: 150, unmountOnExit: true }, function (state) {
-        var transitionClass = getTransitionClass(state);
-        return (React.createElement("div", __assign({ className: classNames(_className, transitionClass) }, rest, { ref: forkedRef })));
-    }));
+    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: propTypesExports.string,
@@ -2847,17 +2821,16 @@ 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"]);
-    var _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);
-    return (React.createElement(Component, __assign({ className: _className }, rest, { ref: ref }), children));
+    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: propTypesExports.node,
@@ -2873,9 +2846,8 @@ CBadge.displayName = 'CBadge';
 
 var CBreadcrumb = React.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
-    var _className = classNames('breadcrumb', className);
     return (React.createElement("nav", { "aria-label": "breadcrumb" },
-        React.createElement("ol", __assign({ className: _className }, rest, { ref: ref }), children)));
+        React.createElement("ol", __assign({ className: classNames('breadcrumb', className) }, rest, { ref: ref }), children)));
 });
 CBreadcrumb.propTypes = {
     children: propTypesExports.node,
@@ -2885,10 +2857,9 @@ CBreadcrumb.displayName = 'CBreadcrumb';
 
 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"]);
-    var _className = classNames('breadcrumb-item', {
-        active: active,
-    }, className);
-    return (React.createElement("li", __assign({ className: _className }, (active && { 'aria-current': 'page' }), rest, { ref: ref }), href ? React.createElement(CLink, { href: href }, children) : children));
+    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: propTypesExports.bool,
@@ -2901,8 +2872,7 @@ CBreadcrumbItem.displayName = 'CBreadcrumbItem';
 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"]);
-    var _className = classNames('btn', variant ? "btn-".concat(variant, "-").concat(color) : "btn-".concat(color), (_b = {}, _b["btn-".concat(size)] = size, _b), shape, className);
-    return (React.createElement(CLink, __assign({ component: rest.href ? 'a' : component, type: type, className: _className }, rest, { ref: ref }), children));
+    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: propTypesExports.node,
@@ -2918,8 +2888,7 @@ CButton.displayName = 'CButton';
 
 var CButtonToolbar = React.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
-    var _className = classNames('btn-toolbar', className);
-    return (React.createElement("div", __assign({ className: _className }, rest, { ref: ref }), children));
+    return (React.createElement("div", __assign({ className: classNames('btn-toolbar', className) }, rest, { ref: ref }), children));
 });
 CButtonToolbar.propTypes = {
     children: propTypesExports.node,
@@ -2930,8 +2899,7 @@ CButtonToolbar.displayName = 'CButtonToolbar';
 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"]);
-    var _className = classNames(vertical ? 'btn-group-vertical' : 'btn-group', (_b = {}, _b["btn-group-".concat(size)] = size, _b), className);
-    return (React.createElement("div", __assign({ className: _className }, rest, { ref: ref }), children));
+    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: propTypesExports.node,
@@ -2944,10 +2912,9 @@ CButtonGroup.displayName = 'CButtonGroup';
 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"]);
-    var _className = classNames('callout', (_b = {},
-        _b["callout-".concat(color)] = color,
-        _b), className);
-    return (React.createElement("div", __assign({ className: _className }, rest, { ref: ref }), children));
+    return (React.createElement("div", __assign({ className: classNames('callout', (_b = {},
+            _b["callout-".concat(color)] = color,
+            _b), className) }, rest, { ref: ref }), children));
 });
 CCallout.propTypes = {
     children: propTypesExports.node,
@@ -2959,11 +2926,10 @@ CCallout.displayName = 'CCallout';
 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"]);
-    var _className = classNames('card', (_b = {},
-        _b["bg-".concat(color)] = color,
-        _b["text-".concat(textColor)] = textColor,
-        _b), className);
-    return (React.createElement("div", __assign({ className: _className }, rest, { ref: ref }), children));
+    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: propTypesExports.node,
@@ -2975,8 +2941,7 @@ CCard.displayName = 'CCard';
 
 var CCardBody = React.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
-    var _className = classNames('card-body', className);
-    return (React.createElement("div", __assign({ className: _className }, rest, { ref: ref }), children));
+    return (React.createElement("div", __assign({ className: classNames('card-body', className) }, rest, { ref: ref }), children));
 });
 CCardBody.propTypes = {
     children: propTypesExports.node,
@@ -2986,8 +2951,7 @@ CCardBody.displayName = 'CCardBody';
 
 var CCardFooter = React.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
-    var _className = classNames('card-footer', className);
-    return (React.createElement("div", __assign({ className: _className }, rest, { ref: ref }), children));
+    return (React.createElement("div", __assign({ className: classNames('card-footer', className) }, rest, { ref: ref }), children));
 });
 CCardFooter.propTypes = {
     children: propTypesExports.node,
@@ -2997,8 +2961,7 @@ CCardFooter.displayName = 'CCardFooter';
 
 var CCardGroup = React.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
-    var _className = classNames('card-group', className);
-    return (React.createElement("div", __assign({ className: _className }, rest, { ref: ref }), children));
+    return (React.createElement("div", __assign({ className: classNames('card-group', className) }, rest, { ref: ref }), children));
 });
 CCardGroup.propTypes = {
     children: propTypesExports.node,
@@ -3008,8 +2971,7 @@ CCardGroup.displayName = 'CCardGroup';
 
 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"]);
-    var _className = classNames('card-header', className);
-    return (React.createElement(Component, __assign({ className: _className }, rest, { ref: ref }), children));
+    return (React.createElement(Component, __assign({ className: classNames('card-header', className) }, rest, { ref: ref }), children));
 });
 CCardHeader.propTypes = {
     children: propTypesExports.node,
@@ -3020,8 +2982,7 @@ CCardHeader.displayName = 'CCardHeader';
 
 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"]);
-    var _className = classNames(orientation ? "card-img-".concat(orientation) : 'card-img', className);
-    return (React.createElement(Component, __assign({ className: _className }, rest, { ref: ref }), children));
+    return (React.createElement(Component, __assign({ className: classNames(orientation ? "card-img-".concat(orientation) : 'card-img', className) }, rest, { ref: ref }), children));
 });
 CCardImage.propTypes = {
     children: propTypesExports.node,
@@ -3033,8 +2994,7 @@ CCardImage.displayName = 'CCardImage';
 
 var CCardImageOverlay = React.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
-    var _className = classNames('card-img-overlay', className);
-    return (React.createElement("div", __assign({ className: _className }, rest, { ref: ref }), children));
+    return (React.createElement("div", __assign({ className: classNames('card-img-overlay', className) }, rest, { ref: ref }), children));
 });
 CCardImageOverlay.propTypes = {
     children: propTypesExports.node,
@@ -3044,8 +3004,7 @@ CCardImageOverlay.displayName = 'CCardImageOverlay';
 
 var CCardLink = React.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
-    var _className = classNames('card-link', className);
-    return (React.createElement(CLink, __assign({ className: _className }, rest, { ref: ref }), children));
+    return (React.createElement(CLink, __assign({ className: classNames('card-link', className) }, rest, { ref: ref }), children));
 });
 CCardLink.propTypes = {
     children: propTypesExports.node,
@@ -3055,8 +3014,7 @@ CCardLink.displayName = 'CCardLink';
 
 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"]);
-    var _className = classNames('card-subtitle', className);
-    return (React.createElement(Component, __assign({ className: _className }, rest, { ref: ref }), children));
+    return (React.createElement(Component, __assign({ className: classNames('card-subtitle', className) }, rest, { ref: ref }), children));
 });
 CCardSubtitle.propTypes = {
     children: propTypesExports.node,
@@ -3067,8 +3025,7 @@ CCardSubtitle.displayName = 'CCardSubtitle';
 
 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"]);
-    var _className = classNames('card-text', className);
-    return (React.createElement(Component, __assign({ className: _className }, rest, { ref: ref }), children));
+    return (React.createElement(Component, __assign({ className: classNames('card-text', className) }, rest, { ref: ref }), children));
 });
 CCardText.propTypes = {
     children: propTypesExports.node,
@@ -3079,8 +3036,7 @@ CCardText.displayName = 'CCardText';
 
 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"]);
-    var _className = classNames('card-title', className);
-    return (React.createElement(Component, __assign({ className: _className }, rest, { ref: ref }), children));
+    return (React.createElement(Component, __assign({ className: classNames('card-title', className) }, rest, { ref: ref }), children));
 });
 CCardTitle.propTypes = {
     children: propTypesExports.node,
@@ -3127,7 +3083,6 @@ var CCarousel = React.forwardRef(function (_a, ref) {
             window.removeEventListener('scroll', handleScroll);
         };
     });
-    var _className = classNames('carousel slide', transition === 'crossfade' && 'carousel-fade', dark && 'carousel-dark', className);
     var cycle = function () {
         _pause();
         if (!wrap && active === itemsNumber - 1) {
@@ -3201,7 +3156,10 @@ var CCarousel = React.forwardRef(function (_a, ref) {
         var touchDown = e.touches[0].clientX;
         setTouchPosition(touchDown);
     };
-    return (React.createElement("div", __assign({ className: _className, onMouseEnter: _pause, onMouseLeave: cycle }, (touch && { onTouchStart: handleTouchStart, onTouchMove: handleTouchMove }), rest, { ref: forkedRef }),
+    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,
@@ -3246,8 +3204,7 @@ CCarousel.displayName = 'CCarousel';
 
 var CCarouselCaption = React.forwardRef(function (_a, ref) {
     var className = _a.className, rest = __rest(_a, ["className"]);
-    var _className = classNames('carousel-caption', className);
-    return React.createElement("div", __assign({ className: _className }, rest, { ref: ref }));
+    return React.createElement("div", __assign({ className: classNames('carousel-caption', className) }, rest, { ref: ref }));
 });
 CCarouselCaption.propTypes = {
     className: propTypesExports.string,
@@ -3322,8 +3279,7 @@ var CCarouselItem = React.forwardRef(function (_a, ref) {
             });
         };
     });
-    var _className = classNames('carousel-item', activeClassName, directionClassName, orderClassName, className);
-    return (React.createElement("div", __assign({ className: _className, ref: forkedRef }, rest), children));
+    return (React.createElement("div", __assign({ className: classNames('carousel-item', activeClassName, directionClassName, orderClassName, className), ref: forkedRef }, rest), children));
 });
 CCarouselItem.propTypes = {
     active: propTypesExports.bool,
@@ -3334,6 +3290,16 @@ CCarouselItem.propTypes = {
 };
 CCarouselItem.displayName = 'CCarouselItem';
 
+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: propTypesExports.node,
+    portal: propTypesExports.bool.isRequired,
+};
+CConditionalPortal.displayName = 'CConditionalPortal';
+
 var ManagerReferenceNodeContext = React__namespace.createContext();
 var ManagerReferenceNodeSetterContext = React__namespace.createContext();
 function Manager(_ref) {
@@ -5397,7 +5363,7 @@ var hasArrayBuffer = typeof ArrayBuffer === 'function' && !!ArrayBuffer.isView;
 // Note: We **don't** need `envHasBigInt64Array` in fde es6/index.js
 
 function equal(a, b) {
-  // START: fast-deep-equal es6/index.js 3.1.1
+  // START: fast-deep-equal es6/index.js 3.1.3
   if (a === b) return true;
 
   if (a && b && typeof a == 'object' && typeof b == 'object') {
@@ -5462,8 +5428,13 @@ function equal(a, b) {
     }
 
     if (a.constructor === RegExp) return a.source === b.source && a.flags === b.flags;
-    if (a.valueOf !== Object.prototype.valueOf) return a.valueOf() === b.valueOf();
-    if (a.toString !== Object.prototype.toString) return a.toString() === b.toString();
+    // 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;
@@ -5779,10 +5750,10 @@ function Reference(_ref) {
 var CDropdownContext = React.createContext({});
 var CDropdown = React.forwardRef(function (_a, ref) {
     var children = _a.children, alignment = _a.alignment, _b = _a.autoClose, autoClose = _b === void 0 ? true : _b, className = _a.className, dark = _a.dark, direction = _a.direction, onHide = _a.onHide, onShow = _a.onShow, _c = _a.placement, placement = _c === void 0 ? 'bottom-start' : _c, _d = _a.popper, popper = _d === void 0 ? true : _d, _e = _a.variant, variant = _e === void 0 ? 'btn-group' : _e, _f = _a.component, component = _f === void 0 ? 'div' : _f, _g = _a.visible, visible = _g === void 0 ? false : _g, rest = __rest(_a, ["children", "alignment", "autoClose", "className", "dark", "direction", "onHide", "onShow", "placement", "popper", "variant", "component", "visible"]);
-    var _h = React.useState(visible), _visible = _h[0], setVisible = _h[1];
     var dropdownRef = React.useRef(null);
     var dropdownToggleRef = React.useRef(null);
     var forkedRef = useForkedRef(ref, dropdownRef);
+    var _h = React.useState(visible), _visible = _h[0], setVisible = _h[1];
     var Component = variant === 'nav-item' ? 'li' : component;
     // Disable popper if responsive aligment is set.
     if (typeof alignment === 'object') {
@@ -5800,13 +5771,6 @@ var CDropdown = React.forwardRef(function (_a, ref) {
         visible: _visible,
         setVisible: setVisible,
     };
-    var _className = classNames(variant === 'nav-item' ? 'nav-item dropdown' : variant, {
-        show: _visible,
-    }, direction === 'center'
-        ? 'dropdown-center'
-        : direction === 'dropup-center'
-            ? 'dropup dropup-center'
-            : direction, className);
     React.useEffect(function () {
         setVisible(visible);
     }, [visible]);
@@ -5814,11 +5778,16 @@ var CDropdown = React.forwardRef(function (_a, ref) {
         _visible && onShow && onShow();
         !_visible && onHide && onHide();
     }, [_visible]);
-    var dropdownContent = function () {
-        return variant === 'input-group' ? (React.createElement(React.Fragment, null, children)) : (React.createElement(Component, __assign({ className: _className }, rest, { ref: forkedRef }), children));
+    var DropdownContent = function () {
+        return variant === 'input-group' ? (React.createElement(React.Fragment, null, children)) : (React.createElement(Component, __assign({ className: classNames(variant === 'nav-item' ? 'nav-item dropdown' : variant, {
+                'dropdown-center': direction === 'center',
+                'dropup dropup-center': direction === 'dropup-center',
+                direction: direction && direction !== 'center' && direction !== 'dropup-center',
+                show: _visible,
+            }, className) }, rest, { ref: forkedRef }), children));
     };
-    return popper ? (React.createElement(CDropdownContext.Provider, { value: contextValues },
-        React.createElement(Manager, null, dropdownContent()))) : (React.createElement(CDropdownContext.Provider, { value: contextValues }, dropdownContent()));
+    return (React.createElement(CDropdownContext.Provider, { value: contextValues }, popper ? (React.createElement(Manager, null,
+        React.createElement(DropdownContent, null))) : (React.createElement(DropdownContent, null))));
 });
 var alignmentDirection = propTypesExports.oneOf(['start', 'end']);
 CDropdown.propTypes = {
@@ -5852,8 +5821,7 @@ CDropdown.displayName = 'CDropdown';
 
 var CDropdownDivider = React.forwardRef(function (_a, ref) {
     var className = _a.className, rest = __rest(_a, ["className"]);
-    var _className = classNames('dropdown-divider', className);
-    return React.createElement("hr", __assign({ className: _className }, rest, { ref: ref }));
+    return React.createElement("hr", __assign({ className: classNames('dropdown-divider', className) }, rest, { ref: ref }));
 });
 CDropdownDivider.propTypes = {
     className: propTypesExports.string,
@@ -5862,8 +5830,7 @@ CDropdownDivider.displayName = 'CDropdownDivider';
 
 var CDropdownHeader = React.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, _b = _a.component, Component = _b === void 0 ? 'h6' : _b, rest = __rest(_a, ["children", "className", "component"]);
-    var _className = classNames('dropdown-header', className);
-    return (React.createElement(Component, __assign({ className: _className }, rest, { ref: ref }), children));
+    return (React.createElement(Component, __assign({ className: classNames('dropdown-header', className) }, rest, { ref: ref }), children));
 });
 CDropdownHeader.propTypes = {
     children: propTypesExports.node,
@@ -5874,8 +5841,7 @@ CDropdownHeader.displayName = 'CDropdownHeader';
 
 var CDropdownItem = React.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, _b = _a.component, component = _b === void 0 ? 'a' : _b, rest = __rest(_a, ["children", "className", "component"]);
-    var _className = classNames('dropdown-item', className);
-    return (React.createElement(CLink, __assign({ className: _className, component: component }, rest, { ref: ref }), children));
+    return (React.createElement(CLink, __assign({ className: classNames('dropdown-item', className), component: component }, rest, { ref: ref }), children));
 });
 CDropdownItem.propTypes = {
     children: propTypesExports.node,
@@ -5886,8 +5852,7 @@ CDropdownItem.displayName = 'CDropdownItem';
 
 var CDropdownItemPlain = React.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, _b = _a.component, Component = _b === void 0 ? 'span' : _b, rest = __rest(_a, ["children", "className", "component"]);
-    var _className = classNames('dropdown-item-text', className);
-    return (React.createElement(Component, __assign({ className: _className }, rest, { ref: ref }), children));
+    return (React.createElement(Component, __assign({ className: classNames('dropdown-item-text', className) }, rest, { ref: ref }), children));
 });
 CDropdownItemPlain.propTypes = {
     children: propTypesExports.node,
@@ -5959,20 +5924,17 @@ var CDropdownMenu = function (_a) {
         }
         return classNames;
     };
-    var _className = classNames('dropdown-menu', {
-        'dropdown-menu-dark': dark,
-        show: visible,
-    }, alignment && alignmentClassNames(alignment), className);
-    var dropdownMenuComponent = function (style, ref) {
-        return (React.createElement(Component, __assign({ className: _className, ref: ref, style: style, 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));
-    };
+    var dropdownMenuComponent = function (style, ref) { return (React.createElement(Component, __assign({ className: classNames('dropdown-menu', {
+            'dropdown-menu-dark': dark,
+            show: visible,
+        }, alignment && alignmentClassNames(alignment), className), ref: ref, style: style, role: "menu", "aria-hidden": !visible }, (!popper && { 'data-coreui-popper': 'static' }), rest), Component === 'ul'
+        ? React.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);
@@ -5988,11 +5950,6 @@ 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 _className = classNames({
-        'dropdown-toggle': caret,
-        'dropdown-toggle-split': split,
-        'nav-link': variant === 'nav-item',
-    }, className);
     var triggers = __assign(__assign({}, ((trigger === 'click' || trigger.includes('click')) && {
         onClick: function (event) {
             event.preventDefault();
@@ -6002,11 +5959,21 @@ var CDropdownToggle = function (_a) {
         onFocus: function () { return setVisible(true); },
         onBlur: function () { return setVisible(false); },
     }));
-    var togglerProps = __assign(__assign({ className: _className, 'aria-expanded': visible }, (!rest.disabled && __assign({}, triggers))), triggers);
+    var togglerProps = __assign({ className: classNames({
+            'dropdown-toggle': caret,
+            'dropdown-toggle-split': split,
+            '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) {
-        return custom && React.isValidElement(children) ? (React.createElement(React.Fragment, null, React.cloneElement(children, __assign(__assign({ 'aria-expanded': visible }, (!rest.disabled && __assign({}, triggers))), { ref: useForkedRef(ref, dropdownToggleRef) })))) : variant === 'nav-item' ? (React.createElement("a", __assign({ href: "#" }, togglerProps, { ref: useForkedRef(ref, dropdownToggleRef) }), children)) : (React.createElement(CButton, __assign({ type: "button" }, togglerProps, { tabIndex: 0 }, rest, { ref: useForkedRef(ref, dropdownToggleRef) }),
+        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) }))));
+        }
+        if (variant === 'nav-item') {
+            return (React.createElement("a", __assign({ href: "#" }, togglerProps, { ref: useForkedRef(ref, dropdownToggleRef) }), children));
+        }
+        return (React.createElement(CButton, __assign({ type: "button" }, togglerProps, { tabIndex: 0 }, rest, { ref: useForkedRef(ref, dropdownToggleRef) }),
             children,
             split && React.createElement("span", { className: "visually-hidden" }, "Toggle Dropdown")));
     };
@@ -6028,8 +5995,7 @@ CDropdownToggle.displayName = 'CDropdownToggle';
 var CFooter = React.forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, position = _a.position, rest = __rest(_a, ["children", "className", "position"]);
-    var _className = classNames('footer', (_b = {}, _b["footer-".concat(position)] = position, _b), className);
-    return (React.createElement("div", __assign({ className: _className }, rest, { ref: ref }), children));
+    return (React.createElement("div", __assign({ className: classNames('footer', (_b = {}, _b["footer-".concat(position)] = position, _b), className) }, rest, { ref: ref }), children));
 });
 CFooter.propTypes = {
     children: propTypesExports.node,
@@ -6040,8 +6006,7 @@ CFooter.displayName = 'CFooter';
 
 var CForm = React.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, validated = _a.validated, rest = __rest(_a, ["children", "className", "validated"]);
-    var _className = classNames({ 'was-validated': validated }, className);
-    return (React.createElement("form", __assign({ className: _className }, rest, { ref: ref }), children));
+    return (React.createElement("form", __assign({ className: classNames({ 'was-validated': validated }, className) || undefined }, rest, { ref: ref }), children));
 });
 CForm.propTypes = {
     children: propTypesExports.node,
@@ -6053,11 +6018,10 @@ CForm.displayName = 'CForm';
 var CFormFeedback = React.forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, _c = _a.component, Component = _c === void 0 ? 'div' : _c, invalid = _a.invalid, tooltip = _a.tooltip, valid = _a.valid, rest = __rest(_a, ["children", "className", "component", "invalid", "tooltip", "valid"]);
-    var _className = classNames((_b = {},
-        _b["invalid-".concat(tooltip ? 'tooltip' : 'feedback')] = invalid,
-        _b["valid-".concat(tooltip ? 'tooltip' : 'feedback')] = valid,
-        _b), className);
-    return (React.createElement(Component, __assign({ className: _className }, rest, { ref: ref }), children));
+    return (React.createElement(Component, __assign({ className: classNames((_b = {},
+            _b["invalid-".concat(tooltip ? 'tooltip' : 'feedback')] = invalid,
+            _b["valid-".concat(tooltip ? 'tooltip' : 'feedback')] = valid,
+            _b), className) }, rest, { ref: ref }), children));
 });
 CFormFeedback.propTypes = {
     children: propTypesExports.node,
@@ -6089,8 +6053,7 @@ CFormControlValidation.displayName = 'CFormControlValidation';
 
 var CFormLabel = React.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, customClassName = _a.customClassName, rest = __rest(_a, ["children", "className", "customClassName"]);
-    var _className = customClassName ? customClassName : classNames('form-label', className);
-    return (React.createElement("label", __assign({ className: _className }, rest, { ref: ref }), children));
+    return (React.createElement("label", __assign({ className: customClassName !== null && customClassName !== void 0 ? customClassName : classNames('form-label', className) }, rest, { ref: ref }), children));
 });
 CFormLabel.propTypes = {
     children: propTypesExports.node,
@@ -6100,8 +6063,7 @@ CFormLabel.propTypes = {
 CFormLabel.displayName = 'CFormLabel';
 
 var CFormCheck = React.forwardRef(function (_a, ref) {
-    var _b;
-    var className = _a.className, button = _a.button, feedback = _a.feedback, feedbackInvalid = _a.feedbackInvalid, feedbackValid = _a.feedbackValid, floatingLabel = _a.floatingLabel, tooltipFeedback = _a.tooltipFeedback, hitArea = _a.hitArea, id = _a.id, indeterminate = _a.indeterminate, inline = _a.inline, invalid = _a.invalid, label = _a.label, _c = _a.type, type = _c === void 0 ? 'checkbox' : _c, valid = _a.valid, rest = __rest(_a, ["className", "button", "feedback", "feedbackInvalid", "feedbackValid", "floatingLabel", "tooltipFeedback", "hitArea", "id", "indeterminate", "inline", "invalid", "label", "type", "valid"]);
+    var className = _a.className, button = _a.button, feedback = _a.feedback, feedbackInvalid = _a.feedbackInvalid, feedbackValid = _a.feedbackValid, floatingLabel = _a.floatingLabel, tooltipFeedback = _a.tooltipFeedback, hitArea = _a.hitArea, id = _a.id, indeterminate = _a.indeterminate, inline = _a.inline, invalid = _a.invalid, label = _a.label, reverse = _a.reverse, _b = _a.type, type = _b === void 0 ? 'checkbox' : _b, valid = _a.valid, rest = __rest(_a, ["className", "button", "feedback", "feedbackInvalid", "feedbackValid", "floatingLabel", "tooltipFeedback", "hitArea", "id", "indeterminate", "inline", "invalid", "label", "reverse", "type", "valid"]);
     var inputRef = React.useRef(null);
     var forkedRef = useForkedRef(ref, inputRef);
     React.useEffect(function () {
@@ -6109,47 +6071,51 @@ var CFormCheck = React.forwardRef(function (_a, ref) {
             inputRef.current.indeterminate = indeterminate;
         }
     }, [indeterminate]);
-    var _className = classNames('form-check', {
-        'form-check-inline': inline,
-        'is-invalid': invalid,
-        'is-valid': valid,
-    }, className);
-    var inputClassName = classNames(button ? 'btn-check' : 'form-check-input', {
-        'is-invalid': invalid,
-        'is-valid': valid,
-        'me-2': hitArea,
-    });
-    var labelClassName = classNames(button
-        ? classNames('btn', button.variant ? "btn-".concat(button.variant, "-").concat(button.color) : "btn-".concat(button.color), (_b = {},
-            _b["btn-".concat(button.size)] = button.size,
-            _b), "".concat(button.shape))
-        : 'form-check-label');
-    var formControl = function () {
-        return React.createElement("input", __assign({ type: type, className: inputClassName, id: id }, rest, { ref: forkedRef }));
+    var FormControl = function () { return (React.createElement("input", __assign({ type: type, className: classNames(button ? 'btn-check' : 'form-check-input', {
+            'is-invalid': invalid,
+            'is-valid': valid,
+            'me-2': hitArea,
+        }), id: id }, rest, { ref: forkedRef }))); };
+    var FormValidation = function () { return (React.createElement(CFormControlValidation, { describedby: rest['aria-describedby'], feedback: feedback, feedbackInvalid: feedbackInvalid, feedbackValid: feedbackValid, floatingLabel: floatingLabel, invalid: invalid, tooltipFeedback: tooltipFeedback, valid: valid })); };
+    var FormLabel = function () {
+        var _a;
+        return (React.createElement(CFormLabel, __assign({ customClassName: classNames(button
+                ? classNames('btn', button.variant ? "btn-".concat(button.variant, "-").concat(button.color) : "btn-".concat(button.color), (_a = {},
+                    _a["btn-".concat(button.size)] = button.size,
+                    _a), "".concat(button.shape))
+                : 'form-check-label') }, (id && { htmlFor: id })), label));
     };
-    var formValidation = function () { return (React.createElement(CFormControlValidation, { describedby: rest['aria-describedby'], feedback: feedback, feedbackInvalid: feedbackInvalid, feedbackValid: feedbackValid, floatingLabel: floatingLabel, invalid: invalid, tooltipFeedback: tooltipFeedback, valid: valid })); };
-    var formLabel = function () {
-        return (React.createElement(CFormLabel, __assign({ customClassName: labelClassName }, (id && { htmlFor: id })), label));
+    var FormCheck = function () {
+        if (button) {
+            return (React.createElement(React.Fragment, null,
+                React.createElement(FormControl, null),
+                label && React.createElement(FormLabel, null),
+                React.createElement(FormValidation, null)));
+        }
+        if (label) {
+            return hitArea ? (React.createElement(React.Fragment, null,
+                React.createElement(FormControl, null),
+                React.createElement(CFormLabel, __assign({ customClassName: classNames('form-check-label stretched-link', className) }, (id && { htmlFor: id })), label),
+                React.createElement(FormValidation, null))) : (React.createElement("div", { className: classNames('form-check', {
+                    'form-check-inline': inline,
+                    'form-check-reverse': reverse,
+                    'is-invalid': invalid,
+                    'is-valid': valid,
+                }, className) },
+                React.createElement(FormControl, null),
+                React.createElement(FormLabel, null),
+                React.createElement(FormValidation, null)));
+        }
+        return React.createElement(FormControl, null);
     };
-    return button ? (React.createElement(React.Fragment, null,
-        formControl(),
-        label && formLabel(),
-        formValidation())) : label ? (hitArea ? (React.createElement(React.Fragment, null,
-        React.createElement(CFormLabel, __assign({ customClassName: className }, (id && { htmlFor: id })),
-            formControl(),
-            label),
-        formValidation())) : (React.createElement("div", { className: _className },
-        formControl(),
-        formLabel(),
-        formValidation()))) : (formControl());
+    return React.createElement(FormCheck, null);
 });
-CFormCheck.propTypes = __assign({ button: propTypesExports.object, className: propTypesExports.string, hitArea: propTypesExports.oneOf(['full']), id: propTypesExports.string, indeterminate: propTypesExports.bool, inline: propTypesExports.bool, label: propTypesExports.oneOfType([propTypesExports.string, propTypesExports.node]), type: propTypesExports.oneOf(['checkbox', 'radio']) }, CFormControlValidation.propTypes);
+CFormCheck.propTypes = __assign({ button: propTypesExports.object, className: propTypesExports.string, hitArea: propTypesExports.oneOf(['full']), id: propTypesExports.string, indeterminate: propTypesExports.bool, inline: propTypesExports.bool, label: propTypesExports.oneOfType([propTypesExports.string, propTypesExports.node]), reverse: propTypesExports.bool, type: propTypesExports.oneOf(['checkbox', 'radio']) }, CFormControlValidation.propTypes);
 CFormCheck.displayName = 'CFormCheck';
 
 var CFormFloating = React.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
-    var _className = classNames('form-floating', className);
-    return (React.createElement("div", __assign({ className: _className }, rest, { ref: ref }), children));
+    return (React.createElement("div", __assign({ className: classNames('form-floating', className) }, rest, { ref: ref }), children));
 });
 CFormFloating.propTypes = {
     children: propTypesExports.node,
@@ -6159,8 +6125,7 @@ CFormFloating.displayName = 'CFormFloating';
 
 var CFormText = React.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, _b = _a.component, Component = _b === void 0 ? 'div' : _b, rest = __rest(_a, ["children", "className", "component"]);
-    var _className = classNames('form-text', className);
-    return (React.createElement(Component, __assign({ className: _className }, rest, { ref: ref }), children));
+    return (React.createElement(Component, __assign({ className: classNames('form-text', className) }, rest, { ref: ref }), children));
 });
 CFormText.propTypes = {
     children: propTypesExports.node,
@@ -6171,16 +6136,16 @@ CFormText.displayName = 'CFormText';
 
 var CFormControlWrapper = function (_a) {
     var children = _a.children, describedby = _a.describedby, feedback = _a.feedback, feedbackInvalid = _a.feedbackInvalid, feedbackValid = _a.feedbackValid, floatingClassName = _a.floatingClassName, floatingLabel = _a.floatingLabel, id = _a.id, invalid = _a.invalid, label = _a.label, text = _a.text, tooltipFeedback = _a.tooltipFeedback, valid = _a.valid;
-    var formControlValidation = function () { return (React.createElement(CFormControlValidation, { describedby: describedby, feedback: feedback, feedbackInvalid: feedbackInvalid, feedbackValid: feedbackValid, floatingLabel: floatingLabel, invalid: invalid, tooltipFeedback: tooltipFeedback, valid: valid })); };
+    var FormControlValidation = function () { return (React.createElement(CFormControlValidation, { describedby: describedby, feedback: feedback, feedbackInvalid: feedbackInvalid, feedbackValid: feedbackValid, floatingLabel: floatingLabel, invalid: invalid, tooltipFeedback: tooltipFeedback, valid: valid })); };
     return floatingLabel ? (React.createElement(CFormFloating, { className: floatingClassName },
         children,
         React.createElement(CFormLabel, { htmlFor: id }, label || floatingLabel),
         text && React.createElement(CFormText, { id: describedby }, text),
-        formControlValidation())) : (React.createElement(React.Fragment, null,
+        React.createElement(FormControlValidation, null))) : (React.createElement(React.Fragment, null,
         label && React.createElement(CFormLabel, { htmlFor: id }, label),
         children,
         text && React.createElement(CFormText, { id: describedby }, text),
-        formControlValidation()));
+        React.createElement(FormControlValidation, null)));
 };
 CFormControlWrapper.propTypes = __assign({ children: propTypesExports.node, floatingClassName: propTypesExports.string, floatingLabel: propTypesExports.oneOfType([propTypesExports.node, propTypesExports.string]), label: propTypesExports.oneOfType([propTypesExports.node, propTypesExports.string]), text: propTypesExports.oneOfType([propTypesExports.node, propTypesExports.string]) }, CFormControlValidation.propTypes);
 CFormControlWrapper.displayName = 'CFormControlWrapper';
@@ -6193,24 +6158,22 @@ var CFormInput = React.forwardRef(function (_a, ref) {
         var timeOutId = setTimeout(function () { return value && onChange && onChange(value); }, typeof delay === 'number' ? delay : 500);
         return function () { return clearTimeout(timeOutId); };
     }, [value]);
-    var _className = classNames(plainText ? 'form-control-plaintext' : 'form-control', (_b = {},
-        _b["form-control-".concat(size)] = size,
-        _b['form-control-color'] = type === 'color',
-        _b['is-invalid'] = invalid,
-        _b['is-valid'] = valid,
-        _b), className);
     return (React.createElement(CFormControlWrapper, { describedby: rest['aria-describedby'], feedback: feedback, feedbackInvalid: feedbackInvalid, feedbackValid: feedbackValid, floatingClassName: floatingClassName, floatingLabel: floatingLabel, id: id, invalid: invalid, label: label, text: text, tooltipFeedback: tooltipFeedback, valid: valid },
-        React.createElement("input", __assign({ className: _className, id: id, type: type, onChange: function (event) { return (delay ? setValue(event) : onChange && onChange(event)); } }, rest, { ref: ref }), children)));
+        React.createElement("input", __assign({ className: classNames(plainText ? 'form-control-plaintext' : 'form-control', (_b = {},
+                _b["form-control-".concat(size)] = size,
+                _b['form-control-color'] = type === 'color',
+                _b['is-invalid'] = invalid,
+                _b['is-valid'] = valid,
+                _b), className), id: id, type: type, onChange: function (event) { return (delay ? setValue(event) : onChange && onChange(event)); } }, rest, { ref: ref }), children)));
 });
 CFormInput.propTypes = __assign({ className: propTypesExports.string, id: propTypesExports.string, delay: propTypesExports.oneOfType([propTypesExports.bool, propTypesExports.number]), plainText: propTypesExports.bool, size: propTypesExports.oneOf(['sm', 'lg']), type: propTypesExports.oneOfType([propTypesExports.oneOf(['color', 'file', 'text']), propTypesExports.string]) }, CFormControlWrapper.propTypes);
 CFormInput.displayName = 'CFormInput';
 
 var CFormRange = React.forwardRef(function (_a, ref) {
     var className = _a.className, label = _a.label, rest = __rest(_a, ["className", "label"]);
-    var _className = classNames('form-range', className);
     return (React.createElement(React.Fragment, null,
         label && React.createElement(CFormLabel, { htmlFor: rest.id }, label),
-        React.createElement("input", __assign({ type: "range", className: _className }, rest, { ref: ref }))));
+        React.createElement("input", __assign({ type: "range", className: classNames('form-range', className) }, rest, { ref: ref }))));
 });
 CFormRange.propTypes = {
     className: propTypesExports.string,
@@ -6221,13 +6184,12 @@ CFormRange.displayName = 'CFormRange';
 var CFormSelect = React.forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, feedback = _a.feedback, feedbackInvalid = _a.feedbackInvalid, feedbackValid = _a.feedbackValid, floatingClassName = _a.floatingClassName, floatingLabel = _a.floatingLabel, htmlSize = _a.htmlSize, id = _a.id, invalid = _a.invalid, label = _a.label, options = _a.options, size = _a.size, text = _a.text, tooltipFeedback = _a.tooltipFeedback, valid = _a.valid, rest = __rest(_a, ["children", "className", "feedback", "feedbackInvalid", "feedbackValid", "floatingClassName", "floatingLabel", "htmlSize", "id", "invalid", "label", "options", "size", "text", "tooltipFeedback", "valid"]);
-    var _className = classNames('form-select', (_b = {},
-        _b["form-select-".concat(size)] = size,
-        _b['is-invalid'] = invalid,
-        _b['is-valid'] = valid,
-        _b), className);
     return (React.createElement(CFormControlWrapper, { describedby: rest['aria-describedby'], feedback: feedback, feedbackInvalid: feedbackInvalid, feedbackValid: feedbackValid, floatingClassName: floatingClassName, floatingLabel: floatingLabel, id: id, invalid: invalid, label: label, text: text, tooltipFeedback: tooltipFeedback, valid: valid },
-        React.createElement("select", __assign({ id: id, className: _className, size: htmlSize }, rest, { ref: ref }), options
+        React.createElement("select", __assign({ id: id, className: classNames('form-select', (_b = {},
+                _b["form-select-".concat(size)] = size,
+                _b['is-invalid'] = invalid,
+                _b['is-valid'] = valid,
+                _b), className), size: htmlSize }, rest, { ref: ref }), options
             ? options.map(function (option, index) {
                 return (React.createElement("option", __assign({}, (typeof option === 'object' &&
                     option.disabled && { disabled: option.disabled }), (typeof option === 'object' && option.value && { value: option.value }), { key: index }), typeof option === 'string' ? option : option.label));
@@ -6239,26 +6201,26 @@ CFormSelect.displayName = 'CFormSelect';
 
 var CFormSwitch = React.forwardRef(function (_a, ref) {
     var _b;
-    var className = _a.className, id = _a.id, invalid = _a.invalid, label = _a.label, size = _a.size, _c = _a.type, type = _c === void 0 ? 'checkbox' : _c, valid = _a.valid, rest = __rest(_a, ["className", "id", "invalid", "label", "size", "type", "valid"]);
-    var _className = classNames('form-check form-switch', (_b = {},
-        _b["form-switch-".concat(size)] = size,
-        _b['is-invalid'] = invalid,
-        _b['is-valid'] = valid,
-        _b), className);
-    var inputClassName = classNames('form-check-input', {
-        'is-invalid': invalid,
-        'is-valid': valid,
-    });
-    var labelClassName = classNames('form-check-label');
-    return (React.createElement("div", { className: _className },
-        React.createElement("input", __assign({ type: type, className: inputClassName, id: id }, rest, { ref: ref })),
-        label && (React.createElement(CFormLabel, __assign({ customClassName: labelClassName }, (id && { htmlFor: id })), label))));
+    var className = _a.className, id = _a.id, invalid = _a.invalid, label = _a.label, reverse = _a.reverse, size = _a.size, _c = _a.type, type = _c === void 0 ? 'checkbox' : _c, valid = _a.valid, rest = __rest(_a, ["className", "id", "invalid", "label", "reverse", "size", "type", "valid"]);
+    return (React.createElement("div", { className: classNames('form-check form-switch', (_b = {
+                'form-check-reverse': reverse
+            },
+            _b["form-switch-".concat(size)] = size,
+            _b['is-invalid'] = invalid,
+            _b['is-valid'] = valid,
+            _b), className) },
+        React.createElement("input", __assign({ type: type, className: classNames('form-check-input', {
+                'is-invalid': invalid,
+                'is-valid': valid,
+            }), id: id }, rest, { ref: ref })),
+        label && (React.createElement(CFormLabel, __assign({ customClassName: "form-check-label" }, (id && { htmlFor: id })), label))));
 });
 CFormSwitch.propTypes = {
     className: propTypesExports.string,
     id: propTypesExports.string,
     invalid: propTypesExports.bool,
     label: propTypesExports.oneOfType([propTypesExports.string, propTypesExports.node]),
+    reverse: propTypesExports.bool,
     size: propTypesExports.oneOf(['lg', 'xl']),
     type: propTypesExports.oneOf(['checkbox', 'radio']),
     valid: propTypesExports.bool,
@@ -6267,12 +6229,11 @@ CFormSwitch.displayName = 'CFormSwitch';
 
 var CFormTextarea = React.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, feedback = _a.feedback, feedbackInvalid = _a.feedbackInvalid, feedbackValid = _a.feedbackValid, floatingClassName = _a.floatingClassName, floatingLabel = _a.floatingLabel, id = _a.id, invalid = _a.invalid, label = _a.label, plainText = _a.plainText, text = _a.text, tooltipFeedback = _a.tooltipFeedback, valid = _a.valid, rest = __rest(_a, ["children", "className", "feedback", "feedbackInvalid", "feedbackValid", "floatingClassName", "floatingLabel", "id", "invalid", "label", "plainText", "text", "tooltipFeedback", "valid"]);
-    var _className = classNames(plainText ? 'form-control-plaintext' : 'form-control', {
-        'is-invalid': invalid,
-        'is-valid': valid,
-    }, className);
     return (React.createElement(CFormControlWrapper, { describedby: rest['aria-describedby'], feedback: feedback, feedbackInvalid: feedbackInvalid, feedbackValid: feedbackValid, floatingClassName: floatingClassName, floatingLabel: floatingLabel, id: id, invalid: invalid, label: label, text: text, tooltipFeedback: tooltipFeedback, valid: valid },
-        React.createElement("textarea", __assign({ className: _className, id: id }, rest, { ref: ref }), children)));
+        React.createElement("textarea", __assign({ className: classNames(plainText ? 'form-control-plaintext' : 'form-control', {
+                'is-invalid': invalid,
+                'is-valid': valid,
+            }, className), id: id }, rest, { ref: ref }), children)));
 });
 CFormTextarea.propTypes = __assign({ className: propTypesExports.string, id: propTypesExports.string, plainText: propTypesExports.bool }, CFormControlWrapper.propTypes);
 CFormTextarea.displayName = 'CFormTextarea';
@@ -6280,10 +6241,9 @@ CFormTextarea.displayName = 'CFormTextarea';
 var CInputGroup = React.forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, size = _a.size, rest = __rest(_a, ["children", "className", "size"]);
-    var _className = classNames('input-group', (_b = {},
-        _b["input-group-".concat(size)] = size,
-        _b), className);
-    return (React.createElement("div", __assign({ className: _className }, rest, { ref: ref }), children));
+    return (React.createElement("div", __assign({ className: classNames('input-group', (_b = {},
+            _b["input-group-".concat(size)] = size,
+            _b), className) }, rest, { ref: ref }), children));
 });
 CInputGroup.propTypes = {
     children: propTypesExports.node,
@@ -6294,8 +6254,7 @@ CInputGroup.displayName = 'CInputGroup';
 
 var CInputGroupText = React.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, _b = _a.component, Component = _b === void 0 ? 'span' : _b, rest = __rest(_a, ["children", "className", "component"]);
-    var _className = classNames('input-group-text', className);
-    return (React.createElement(Component, __assign({ className: _className }, rest, { ref: ref }), children));
+    return (React.createElement(Component, __assign({ className: classNames('input-group-text', className) }, rest, { ref: ref }), children));
 });
 CInputGroupText.propTypes = {
     children: propTypesExports.node,
@@ -6340,8 +6299,7 @@ var CCol = React.forwardRef(function (_a, ref) {
             }
         }
     });
-    var _className = classNames(repsonsiveClassNames.length ? repsonsiveClassNames : 'col', className);
-    return (React.createElement("div", __assign({ className: _className }, rest, { ref: ref }), children));
+    return (React.createElement("div", __assign({ className: classNames(repsonsiveClassNames.length > 0 ? repsonsiveClassNames : 'col', className) }, rest, { ref: ref }), children));
 });
 var span = propTypesExports.oneOfType([
     propTypesExports.bool,
@@ -6389,8 +6347,7 @@ var CContainer = React.forwardRef(function (_a, ref) {
         delete rest[bp];
         breakpoint && repsonsiveClassNames.push("container-".concat(bp));
     });
-    var _className = classNames(repsonsiveClassNames.length ? repsonsiveClassNames : 'container', className);
-    return (React.createElement("div", __assign({ className: _className }, rest, { ref: ref }), children));
+    return (React.createElement("div", __assign({ className: classNames(repsonsiveClassNames.length > 0 ? repsonsiveClassNames : 'container', className) }, rest, { ref: ref }), children));
 });
 CContainer.propTypes = {
     children: propTypesExports.node,
@@ -6434,8 +6391,7 @@ var CRow = React.forwardRef(function (_a, ref) {
             }
         }
     });
-    var _className = classNames('row', repsonsiveClassNames, className);
-    return (React.createElement("div", { className: _className, ref: ref }, children));
+    return (React.createElement("div", { className: classNames('row', repsonsiveClassNames, className), ref: ref }, children));
 });
 var bp = propTypesExports.shape({
     cols: propTypesExports.oneOfType([propTypesExports.oneOf(['auto']), propTypesExports.number, propTypesExports.string]),
@@ -6458,15 +6414,7 @@ CRow.displayName = 'CRow';
 var CHeader = React.forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, container = _a.container, position = _a.position, rest = __rest(_a, ["children", "className", "container", "position"]);
-    var _className = classNames('header', (_b = {}, _b["header-".concat(position)] = position, _b), className);
-    var content;
-    if (container) {
-        content = (React.createElement("div", { className: "container".concat(container !== true ? '-' + container : '') }, children));
-    }
-    else {
-        content = children;
-    }
-    return (React.createElement("div", __assign({ className: _className }, rest, { ref: ref }), content));
+    return (React.createElement("div", __assign({ className: classNames('header', (_b = {}, _b["header-".concat(position)] = position, _b), className) }, rest, { ref: ref }), container ? (React.createElement("div", { className: typeof container === 'string' ? "container-".concat(container) : 'container' }, children)) : (React.createElement(React.Fragment, null, children))));
 });
 CHeader.propTypes = {
     children: propTypesExports.node,
@@ -6488,8 +6436,7 @@ CHeader.displayName = 'CHeader';
 
 var CHeaderBrand = React.forwardRef(function (_a, ref) {
     var children = _a.children, _b = _a.component, Component = _b === void 0 ? 'a' : _b, className = _a.className, rest = __rest(_a, ["children", "component", "className"]);
-    var _className = classNames('header-brand', className);
-    return (React.createElement(Component, __assign({ className: _className }, rest, { ref: ref }), children));
+    return (React.createElement(Component, __assign({ className: classNames('header-brand', className) }, rest, { ref: ref }), children));
 });
 CHeaderBrand.propTypes = {
     children: propTypesExports.node,
@@ -6500,8 +6447,7 @@ CHeaderBrand.displayName = 'CHeaderBrand';
 
 var CHeaderDivider = React.forwardRef(function (_a, ref) {
     var className = _a.className, rest = __rest(_a, ["className"]);
-    var _className = classNames('header-divider', className);
-    return React.createElement("div", __assign({ className: _className }, rest, { ref: ref }));
+    return React.createElement("div", __assign({ className: classNames('header-divider', className) }, rest, { ref: ref }));
 });
 CHeaderDivider.propTypes = {
     className: propTypesExports.string,
@@ -6510,8 +6456,7 @@ CHeaderDivider.displayName = 'CHeaderDivider';
 
 var CHeaderNav = React.forwardRef(function (_a, ref) {
     var children = _a.children, _b = _a.component, Component = _b === void 0 ? 'ul' : _b, className = _a.className, rest = __rest(_a, ["children", "component", "className"]);
-    var _className = classNames('header-nav', className);
-    return (React.createElement(Component, __assign({ className: _className, role: "navigation" }, rest, { ref: ref }), children));
+    return (React.createElement(Component, __assign({ className: classNames('header-nav', className), role: "navigation" }, rest, { ref: ref }), children));
 });
 CHeaderNav.propTypes = {
     children: propTypesExports.node,
@@ -6522,8 +6467,7 @@ CHeaderNav.displayName = 'CHeaderNav';
 
 var CHeaderText = React.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
-    var _className = classNames('header-text', className);
-    return (React.createElement("span", __assign({ className: _className }, rest, { ref: ref }), children));
+    return (React.createElement("span", __assign({ className: classNames('header-text', className) }, rest, { ref: ref }), children));
 });
 CHeaderText.propTypes = {
     children: propTypesExports.node,
@@ -6533,8 +6477,7 @@ CHeaderText.displayName = 'CHeaderText';
 
 var CHeaderToggler = React.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
-    var _className = classNames('header-toggler', className);
-    return (React.createElement("button", __assign({ type: "button", className: _className }, rest, { ref: ref }), children ? children : React.createElement("span", { className: "header-toggler-icon" })));
+    return (React.createElement("button", __assign({ type: "button", className: classNames('header-toggler', className) }, rest, { ref: ref }), children !== null && children !== void 0 ? children : React.createElement("span", { className: "header-toggler-icon" })));
 });
 CHeaderToggler.propTypes = {
     children: propTypesExports.node,
@@ -6545,14 +6488,13 @@ CHeaderToggler.displayName = 'CHeaderToggler';
 var CImage = React.forwardRef(function (_a, ref) {
     var _b;
     var align = _a.align, className = _a.className, fluid = _a.fluid, rounded = _a.rounded, thumbnail = _a.thumbnail, rest = __rest(_a, ["align", "className", "fluid", "rounded", "thumbnail"]);
-    var _className = classNames((_b = {},
-        _b["float-".concat(align)] = align && (align === 'start' || align === 'end'),
-        _b['d-block mx-auto'] = align && align === 'center',
-        _b['img-fluid'] = fluid,
-        _b.rounded = rounded,
-        _b['img-thumbnail'] = thumbnail,
-        _b), className);
-    return React.createElement("img", __assign({ className: _className }, rest, { ref: ref }));
+    return (React.createElement("img", __assign({ className: classNames((_b = {},
+            _b["float-".concat(align)] = align && (align === 'start' || align === 'end'),
+            _b['d-block mx-auto'] = align && align === 'center',
+            _b['img-fluid'] = fluid,
+            _b.rounded = rounded,
+            _b['img-thumbnail'] = thumbnail,
+            _b), className) || undefined }, rest, { ref: ref })));
 });
 CImage.propTypes = {
     align: propTypesExports.oneOf(['start', 'center', 'end']),
@@ -6566,12 +6508,11 @@ CImage.displayName = 'CImage';
 var CListGroup = React.forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, _c = _a.component, Component = _c === void 0 ? 'ul' : _c, flush = _a.flush, layout = _a.layout;
-    var _className = classNames('list-group', (_b = {
-            'list-group-flush': flush
-        },
-        _b["list-group-".concat(layout)] = layout,
-        _b), className);
-    return (React.createElement(Component, { className: _className, ref: ref }, children));
+    return (React.createElement(Component, { className: classNames('list-group', (_b = {
+                'list-group-flush': flush
+            },
+            _b["list-group-".concat(layout)] = layout,
+            _b), className), ref: ref }, children));
 });
 CListGroup.propTypes = {
     children: propTypesExports.node,
@@ -6592,12 +6533,6 @@ CListGroup.displayName = 'CListGroup';
 var CListGroupItem = React.forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, active = _a.active, className = _a.className, disabled = _a.disabled, color = _a.color, _c = _a.component, component = _c === void 0 ? 'li' : _c, rest = __rest(_a, ["children", "active", "className", "disabled", "color", "component"]);
-    var _className = classNames('list-group-item', (_b = {},
-        _b["list-group-item-".concat(color)] = color,
-        _b['list-group-item-action'] = component === 'a' || component === 'button',
-        _b.active = active,
-        _b.disabled = disabled,
-        _b), className);
     var Component = component === 'a' || component === 'button' ? CLink : component;
     rest = __assign(__assign(__assign(__assign({}, ((component === 'a' || component === 'button') && {
         active: active,
@@ -6605,7 +6540,12 @@ var CListGroupItem = React.forwardRef(function (_a, ref) {
         component: component,
         ref: ref,
     })), (active && { 'aria-current': true })), (disabled && { 'aria-disabled': true })), rest);
-    return (React.createElement(Component, __assign({ className: _className }, rest), children));
+    return (React.createElement(Component, __assign({ className: classNames('list-group-item', (_b = {},
+            _b["list-group-item-".concat(color)] = color,
+            _b['list-group-item-action'] = component === 'a' || component === 'button',
+            _b.active = active,
+            _b.disabled = disabled,
+            _b), className) }, rest), children));
 });
 CListGroupItem.propTypes = {
     active: propTypesExports.bool,
@@ -6619,8 +6559,7 @@ CListGroupItem.displayName = 'CListGroupItem';
 
 var CModalContent = React.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
-    var _className = classNames('modal-content', className);
-    return (React.createElement("div", __assign({ className: _className }, rest, { ref: ref }), children));
+    return (React.createElement("div", __assign({ className: classNames('modal-content', className) }, rest, { ref: ref }), children));
 });
 CModalContent.propTypes = {
     children: propTypesExports.node,
@@ -6631,16 +6570,15 @@ CModalContent.displayName = 'CModalContent';
 var CModalDialog = React.forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, alignment = _a.alignment, className = _a.className, fullscreen = _a.fullscreen, scrollable = _a.scrollable, size = _a.size, rest = __rest(_a, ["children", "alignment", "className", "fullscreen", "scrollable", "size"]);
-    var _className = classNames('modal-dialog', (_b = {
-            'modal-dialog-centered': alignment === 'center'
-        },
-        _b[typeof fullscreen === 'boolean'
-            ? 'modal-fullscreen'
-            : "modal-fullscreen-".concat(fullscreen, "-down")] = fullscreen,
-        _b['modal-dialog-scrollable'] = scrollable,
-        _b["modal-".concat(size)] = size,
-        _b), className);
-    return (React.createElement("div", __assign({ className: _className }, rest, { ref: ref }), children));
+    return (React.createElement("div", __assign({ className: classNames('modal-dialog', (_b = {
+                'modal-dialog-centered': alignment === 'center'
+            },
+            _b[typeof fullscreen === 'boolean'
+                ? 'modal-fullscreen'
+                : "modal-fullscreen-".concat(fullscreen, "-down")] = fullscreen,
+            _b['modal-dialog-scrollable'] = scrollable,
+            _b["modal-".concat(size)] = size,
+            _b), className) }, rest, { ref: ref }), children));
 });
 CModalDialog.propTypes = {
     alignment: propTypesExports.oneOf(['top', 'center']),
@@ -6663,19 +6601,19 @@ var CModal = React.forwardRef(function (_a, ref) {
     var forkedRef = useForkedRef(ref, modalRef);
     var _h = React.useState(visible), _visible = _h[0], setVisible = _h[1];
     var _j = React.useState(false), staticBackdrop = _j[0], setStaticBackdrop = _j[1];
-    React.useEffect(function () {
-        setVisible(visible);
-    }, [visible]);
     var contextValues = {
         visible: _visible,
         setVisible: setVisible,
     };
     React.useEffect(function () {
-        modalRef.current && modalRef.current.addEventListener('click', handleClickOutside);
-        modalRef.current && modalRef.current.addEventListener('keyup', handleKeyDown);
+        setVisible(visible);
+    }, [visible]);
+    React.useEffect(function () {
+        document.addEventListener('click', handleClickOutside);
+        document.addEventListener('keydown', handleKeyDown);
         return function () {
-            modalRef.current && modalRef.current.removeEventListener('click', handleClickOutside);
-            modalRef.current && modalRef.current.removeEventListener('keyup', handleKeyDown);
+            document.removeEventListener('click', handleClickOutside);
+            document.removeEventListener('keydown', handleKeyDown);
         };
     }, [_visible]);
     var handleDismiss = function () {
@@ -6688,19 +6626,6 @@ var CModal = React.forwardRef(function (_a, ref) {
         onClosePrevented && onClosePrevented();
         setTimeout(function () { return setStaticBackdrop(false); }, duration);
     }, [staticBackdrop]);
-    var getTransitionClass = function (state) {
-        return state === 'entering'
-            ? 'd-block'
-            : state === 'entered'
-                ? 'show d-block'
-                : state === 'exiting'
-                    ? 'd-block'
-                    : '';
-    };
-    var _className = classNames('modal', {
-        'modal-static': staticBackdrop,
-        fade: transition,
-    }, className);
     // Set focus to modal after open
     React.useLayoutEffect(function () {
         if (_visible) {
@@ -6712,7 +6637,7 @@ var CModal = React.forwardRef(function (_a, ref) {
             setTimeout(function () {
                 var _a;
                 (_a = modalRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-            }, !transition ? 0 : duration);
+            }, transition ? duration : 0);
         }
         else {
             document.body.classList.remove('modal-open');
@@ -6735,27 +6660,23 @@ var CModal = React.forwardRef(function (_a, ref) {
             handleDismiss();
         }
     };
-    var handleKeyDown = React.useCallback(function (event) {
+    var handleKeyDown = function (event) {
         if (event.key === 'Escape' && keyboard) {
-            return handleDismiss();
+            handleDismiss();
         }
-    }, [modalRef, handleDismiss]);
-    var modal = function (ref, transitionClass) {
-        return (React.createElement(CModalContext.Provider, { value: contextValues },
-            React.createElement("div", { className: classNames(_className, transitionClass), tabIndex: -1, role: "dialog", ref: ref },
-                React.createElement(CModalDialog, { alignment: alignment, fullscreen: fullscreen, scrollable: scrollable, size: size },
-                    React.createElement(CModalContent, __assign({}, rest, { ref: modalContentRef }), children)))));
     };
     return (React.createElement(React.Fragment, null,
-        React.createElement(Transition$1, { in: _visible, mountOnEnter: true, nodeRef: modalRef, onEnter: onShow, onExit: onClose, unmountOnExit: unmountOnClose, timeout: !transition ? 0 : duration }, function (state) {
-            var transitionClass = getTransitionClass(state);
-            return typeof window !== 'undefined' && portal
-                ? ReactDOM.createPortal(modal(forkedRef, transitionClass), document.body)
-                : modal(forkedRef, transitionClass);
-        }),
-        typeof window !== 'undefined' && portal
-            ? backdrop && ReactDOM.createPortal(React.createElement(CBackdrop, { visible: _visible }), document.body)
-            : backdrop && React.createElement(CBackdrop, { visible: _visible })));
+        React.createElement(Transition$1, { in: _visible, mountOnEnter: true, nodeRef: modalRef, onEnter: onShow, onExit: onClose, unmountOnExit: unmountOnClose, timeout: transition ? duration : 0 }, function (state) { return (React.createElement(CConditionalPortal, { portal: portal },
+            React.createElement(CModalContext.Provider, { value: contextValues },
+                React.createElement("div", { className: classNames('modal', {
+                        'modal-static': staticBackdrop,
+                        fade: transition,
+                        show: state === 'entered',
+                    }, className), tabIndex: -1, role: "dialog", style: __assign({}, (state !== 'exited' && { display: 'block' })), ref: forkedRef },
+                    React.createElement(CModalDialog, { alignment: alignment, fullscreen: fullscreen, scrollable: scrollable, size: size },
+                        React.createElement(CModalContent, __assign({}, rest, { ref: modalContentRef }), children)))))); }),
+        backdrop && (React.createElement(CConditionalPortal, { portal: portal },
+            React.createElement(CBackdrop, { visible: _visible })))));
 });
 CModal.propTypes = {
     alignment: propTypesExports.oneOf(['top', 'center']),
@@ -6782,8 +6703,7 @@ CModal.displayName = 'CModal';
 
 var CModalBody = React.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
-    var _className = classNames('modal-body', className);
-    return (React.createElement("div", __assign({ className: _className }, rest, { ref: ref }), children));
+    return (React.createElement("div", __assign({ className: classNames('modal-body', className) }, rest, { ref: ref }), children));
 });
 CModalBody.propTypes = {
     children: propTypesExports.node,
@@ -6793,8 +6713,7 @@ CModalBody.displayName = 'CModalBody';
 
 var CModalFooter = React.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
-    var _className = classNames('modal-footer', className);
-    return (React.createElement("div", __assign({ className: _className }, rest, { ref: ref }), children));
+    return (React.createElement("div", __assign({ className: classNames('modal-footer', className) }, rest, { ref: ref }), children));
 });
 CModalFooter.propTypes = {
     children: propTypesExports.node,
@@ -6805,8 +6724,7 @@ CModalFooter.displayName = 'CModalFooter';
 var CModalHeader = React.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, _b = _a.closeButton, closeButton = _b === void 0 ? true : _b, rest = __rest(_a, ["children", "className", "closeButton"]);
     var setVisible = React.useContext(CModalContext).setVisible;
-    var _className = classNames('modal-header', className);
-    return (React.createElement("div", __assign({ className: _className }, rest, { ref: ref }),
+    return (React.createElement("div", __assign({ className: classNames('modal-header', className) }, rest, { ref: ref }),
         children,
         closeButton && React.createElement(CCloseButton, { onClick: function () { return setVisible(false); } })));
 });
@@ -6819,8 +6737,7 @@ CModalHeader.displayName = 'CModalHeader';
 
 var CModalTitle = 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"]);
-    var _className = classNames('modal-title', className);
-    return (React.createElement(Component, __assign({ className: _className }, rest, { ref: ref }), children));
+    return (React.createElement(Component, __assign({ className: classNames('modal-title', className) }, rest, { ref: ref }), children));
 });
 CModalTitle.propTypes = {
     children: propTypesExports.node,
@@ -6832,11 +6749,10 @@ CModalTitle.displayName = 'CModalTitle';
 var CNav = React.forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, _c = _a.component, Component = _c === void 0 ? 'ul' : _c, layout = _a.layout, variant = _a.variant, rest = __rest(_a, ["children", "className", "component", "layout", "variant"]);
-    var _className = classNames('nav', (_b = {},
-        _b["nav-".concat(layout)] = layout,
-        _b["nav-".concat(variant)] = variant,
-        _b), className);
-    return (React.createElement(Component, __assign({ className: _className, role: "navigation" }, rest, { ref: ref }), children));
+    return (React.createElement(Component, __assign({ className: classNames('nav', (_b = {},
+            _b["nav-".concat(layout)] = layout,
+            _b["nav-".concat(variant)] = variant,
+            _b), className), role: "navigation" }, rest, { ref: ref }), children));
 });
 CNav.propTypes = {
     children: propTypesExports.node,
@@ -6849,8 +6765,7 @@ CNav.displayName = 'CNav';
 
 var CNavGroupItems = React.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
-    var _className = classNames('nav-group-items', className);
-    return (React.createElement("ul", __assign({ className: _className }, rest, { ref: ref }), children));
+    return (React.createElement("ul", __assign({ className: classNames('nav-group-items', className) }, rest, { ref: ref }), children));
 });
 CNavGroupItems.propTypes = {
     children: propTypesExports.node,
@@ -6866,8 +6781,7 @@ var CSidebarNav = React.forwardRef(function (_a, ref) {
         visibleGroup: visibleGroup,
         setVisibleGroup: setVisibleGroup,
     };
-    var classes = classNames('sidebar-nav', className);
-    return (React.createElement("ul", __assign({ className: classes, ref: ref }, rest),
+    return (React.createElement("ul", __assign({ className: classNames('sidebar-nav', className), ref: ref }, rest),
         React.createElement(CNavContext.Provider, { value: CNavContextValues }, React.Children.map(children, function (child, index) {
             if (React.isValidElement(child)) {
                 return React.cloneElement(child, {
@@ -6926,8 +6840,7 @@ var CNavGroup = React.forwardRef(function (_a, ref) {
         exiting: { display: 'block', height: height },
         exited: { height: height },
     };
-    var _className = classNames('nav-group', { show: _visible }, className);
-    return (React.createElement("li", __assign({ className: _className }, rest, { ref: ref }),
+    return (React.createElement("li", __assign({ className: classNames('nav-group', { show: _visible }, className) }, rest, { ref: ref }),
         toggler && (React.createElement("a", { className: "nav-link nav-group-toggle", onClick: function (event) { return handleTogglerOnCLick(event); } }, toggler)),
         React.createElement(Transition$1, { in: _visible, nodeRef: navItemsRef, onEntering: onEntering, onEntered: onEntered, onExit: onExit, onExiting: onExiting, onExited: onExited, timeout: 300 }, function (state) { return (React.createElement("ul", { className: classNames('nav-group-items', {
                 compact: compact,
@@ -6956,13 +6869,12 @@ var CNavLink = React.forwardRef(function (_a, ref) {
     var navLinkRef = React.useRef(null);
     var forkedRef = useForkedRef(ref, navLinkRef);
     var setVisibleGroup = React.useContext(CNavContext).setVisibleGroup;
-    var _className = classNames('nav-link', className);
     React.useEffect(function () {
         var _a;
         rest.active = (_a = navLinkRef.current) === null || _a === void 0 ? void 0 : _a.classList.contains('active');
         idx && rest.active && setVisibleGroup(idx);
     }, [rest.active, className]);
-    return (React.createElement(CLink, __assign({ className: _className }, rest, { ref: forkedRef }), children));
+    return (React.createElement(CLink, __assign({ className: classNames('nav-link', className) }, rest, { ref: forkedRef }), children));
 });
 CNavLink.propTypes = {
     children: propTypesExports.node,
@@ -6973,11 +6885,7 @@ CNavLink.displayName = 'CNavLink';
 
 var CNavItem = React.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
-    var _className = classNames('nav-item', className);
-    if (rest.href || rest.to) {
-        children = (React.createElement(CNavLink, __assign({ className: className }, rest), children));
-    }
-    return (React.createElement("li", { className: _className, ref: ref }, children));
+    return (React.createElement("li", { className: classNames('nav-item', className), ref: ref }, rest.href || rest.to ? (React.createElement(CNavLink, __assign({ className: className }, rest), children)) : (children)));
 });
 CNavItem.propTypes = {
     children: propTypesExports.node,
@@ -6987,8 +6895,7 @@ CNavItem.displayName = 'CNavItem';
 
 var CNavTitle = React.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
-    var _className = classNames('nav-title', className);
-    return (React.createElement("li", __assign({ className: _className }, rest, { ref: ref }), children));
+    return (React.createElement("li", __assign({ className: classNames('nav-title', className) }, rest, { ref: ref }), children));
 });
 CNavTitle.propTypes = {
     children: propTypesExports.node,
@@ -6999,19 +6906,11 @@ CNavTitle.displayName = 'CNavTitle';
 var CNavbar = React.forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, color = _a.color, colorScheme = _a.colorScheme, _c = _a.component, Component = _c === void 0 ? 'nav' : _c, container = _a.container, expand = _a.expand, placement = _a.placement, rest = __rest(_a, ["children", "className", "color", "colorScheme", "component", "container", "expand", "placement"]);
-    var _className = classNames('navbar', (_b = {},
-        _b["bg-".concat(color)] = color,
-        _b["navbar-".concat(colorScheme)] = colorScheme,
-        _b[typeof expand === 'boolean' ? 'navbar-expand' : "navbar-expand-".concat(expand)] = expand,
-        _b), placement, className);
-    var content;
-    if (container) {
-        content = (React.createElement("div", { className: "container".concat(container !== true ? '-' + container : '') }, children));
-    }
-    else {
-        content = children;
-    }
-    return (React.createElement(Component, __assign({ className: _className }, rest, { ref: ref }), content));
+    return (React.createElement(Component, __assign({ className: classNames('navbar', (_b = {},
+            _b["bg-".concat(color)] = color,
+            _b["navbar-".concat(colorScheme)] = colorScheme,
+            _b[typeof expand === 'boolean' ? 'navbar-expand' : "navbar-expand-".concat(expand)] = expand,
+            _b), placement, className) }, rest, { ref: ref }), container ? (React.createElement("div", { className: typeof container === 'string' ? "container-".concat(container) : 'container' }, children)) : (React.createElement(React.Fragment, null, children))));
 });
 CNavbar.propTypes = {
     children: propTypesExports.node,
@@ -7040,9 +6939,8 @@ CNavbar.displayName = 'CNavbar';
 
 var CNavbarBrand = React.forwardRef(function (_a, ref) {
     var children = _a.children, component = _a.component, className = _a.className, rest = __rest(_a, ["children", "component", "className"]);
-    var Component = component ? component : rest.href ? 'a' : 'span';
-    var _className = classNames('navbar-brand', className);
-    return (React.createElement(Component, __assign({ className: _className }, rest, { ref: ref }), children));
+    var Component = component !== null && component !== void 0 ? component : (rest.href ? 'a' : 'span');
+    return (React.createElement(Component, __assign({ className: classNames('navbar-brand', className) }, rest, { ref: ref }), children));
 });
 CNavbarBrand.propTypes = {
     children: propTypesExports.node,
@@ -7053,8 +6951,7 @@ CNavbarBrand.displayName = 'CNavbarBrand';
 
 var CNavbarNav = React.forwardRef(function (_a, ref) {
     var children = _a.children, _b = _a.component, Component = _b === void 0 ? 'ul' : _b, className = _a.className, rest = __rest(_a, ["children", "component", "className"]);
-    var _className = classNames('navbar-nav', className);
-    return (React.createElement(Component, __assign({ className: _className, role: "navigation" }, rest, { ref: ref }), children));
+    return (React.createElement(Component, __assign({ className: classNames('navbar-nav', className), role: "navigation" }, rest, { ref: ref }), children));
 });
 CNavbarNav.propTypes = {
     children: propTypesExports.node,
@@ -7065,8 +6962,7 @@ CNavbarNav.displayName = 'CNavbarNav';
 
 var CNavbarText = React.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
-    var _className = classNames('navbar-text', className);
-    return (React.createElement("span", __assign({ className: _className }, rest, { ref: ref }), children));
+    return (React.createElement("span", __assign({ className: classNames('navbar-text', className) }, rest, { ref: ref }), children));
 });
 CNavbarText.propTypes = {
     children: propTypesExports.node,
@@ -7076,8 +6972,7 @@ CNavbarText.displayName = 'CNavbarText';
 
 var CNavbarToggler = React.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
-    var _className = classNames('navbar-toggler', className);
-    return (React.createElement("button", __assign({ type: "button", className: _className }, rest, { ref: ref }), children ? children : React.createElement("span", { className: "navbar-toggler-icon" })));
+    return (React.createElement("button", __assign({ type: "button", className: classNames('navbar-toggler', className) }, rest, { ref: ref }), children !== null && children !== void 0 ? children : React.createElement("span", { className: "navbar-toggler-icon" })));
 });
 CNavbarToggler.propTypes = {
     children: propTypesExports.node,
@@ -7086,9 +6981,8 @@ CNavbarToggler.propTypes = {
 CNavbarToggler.displayName = 'CNavbarToggler';
 
 var COffcanvas = React.forwardRef(function (_a, ref) {
-    var _b;
-    var children = _a.children, _c = _a.backdrop, backdrop = _c === void 0 ? true : _c, className = _a.className, _d = _a.keyboard, keyboard = _d === void 0 ? true : _d, onHide = _a.onHide, onShow = _a.onShow, placement = _a.placement, _e = _a.portal, portal = _e === void 0 ? false : _e, _f = _a.responsive, responsive = _f === void 0 ? true : _f, _g = _a.scroll, scroll = _g === void 0 ? false : _g, _h = _a.visible, visible = _h === void 0 ? false : _h, rest = __rest(_a, ["children", "backdrop", "className", "keyboard", "onHide", "onShow", "placement", "portal", "responsive", "scroll", "visible"]);
-    var _j = React.useState(visible), _visible = _j[0], setVisible = _j[1];
+    var children = _a.children, _b = _a.backdrop, backdrop = _b === void 0 ? true : _b, className = _a.className, _c = _a.keyboard, keyboard = _c === void 0 ? true : _c, onHide = _a.onHide, onShow = _a.onShow, placement = _a.placement, _d = _a.portal, portal = _d === void 0 ? false : _d, _e = _a.responsive, responsive = _e === void 0 ? true : _e, _f = _a.scroll, scroll = _f === void 0 ? false : _f, _g = _a.visible, visible = _g === void 0 ? false : _g, rest = __rest(_a, ["children", "backdrop", "className", "keyboard", "onHide", "onShow", "placement", "portal", "responsive", "scroll", "visible"]);
+    var _h = React.useState(visible), _visible = _h[0], setVisible = _h[1];
     var offcanvasRef = React.useRef(null);
     var forkedRef = useForkedRef(ref, offcanvasRef);
     React.useEffect(function () {
@@ -7107,19 +7001,6 @@ var COffcanvas = React.forwardRef(function (_a, ref) {
             document.body.style.removeProperty('padding-right');
         }
     }, [_visible]);
-    var getTransitionClass = function (state) {
-        return state === 'entering'
-            ? 'showing'
-            : state === 'entered'
-                ? 'show'
-                : state === 'exiting'
-                    ? 'show hiding'
-                    : '';
-    };
-    var _className = classNames((_b = {},
-        _b["offcanvas".concat(typeof responsive !== 'boolean' ? '-' + responsive : '')] = responsive,
-        _b["offcanvas-".concat(placement)] = placement,
-        _b), className);
     var handleDismiss = function () {
         setVisible(false);
     };
@@ -7128,25 +7009,25 @@ var COffcanvas = React.forwardRef(function (_a, ref) {
             setVisible(false);
         }
     };
-    var handleKeyDown = React.useCallback(function (event) {
+    var handleKeyDown = function (event) {
         if (event.key === 'Escape' && keyboard) {
             return handleDismiss();
         }
-    }, [ref, handleDismiss]);
-    var offcanvas = function (ref, state) {
-        return (React.createElement(React.Fragment, null,
-            React.createElement("div", __assign({ className: classNames(_className, getTransitionClass(state)), role: "dialog", tabIndex: -1, onKeyDown: handleKeyDown }, rest, { ref: ref }), children)));
     };
     return (React.createElement(React.Fragment, null,
         React.createElement(Transition$1, { in: _visible, nodeRef: offcanvasRef, onEnter: onShow, onEntered: function () { var _a; return (_a = offcanvasRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, onExit: onHide, timeout: 300 }, function (state) {
-            return typeof window !== 'undefined' && portal
-                ? ReactDOM.createPortal(offcanvas(forkedRef, state), document.body)
-                : offcanvas(forkedRef, state);
+            var _a;
+            return (React.createElement(CConditionalPortal, { portal: portal },
+                React.createElement("div", __assign({ className: classNames((_a = {},
+                        _a["offcanvas".concat(typeof responsive === 'string' ? '-' + responsive : '')] = responsive,
+                        _a["offcanvas-".concat(placement)] = placement,
+                        _a.showing = state === 'entering',
+                        _a.show = state === 'entered',
+                        _a['show hiding'] = state === 'exiting',
+                        _a), className), role: "dialog", tabIndex: -1, onKeyDown: handleKeyDown }, rest, { ref: forkedRef }), children)));
         }),
-        typeof window !== 'undefined' && portal
-            ? backdrop &&
-                ReactDOM.createPortal(React.createElement(CBackdrop, { className: "offcanvas-backdrop", onClick: handleBackdropDismiss, visible: _visible }), document.body)
-            : backdrop && (React.createElement(CBackdrop, { className: "offcanvas-backdrop", onClick: handleBackdropDismiss, visible: _visible }))));
+        backdrop && (React.createElement(CConditionalPortal, { portal: portal },
+            React.createElement(CBackdrop, { className: "offcanvas-backdrop", onClick: handleBackdropDismiss, visible: _visible })))));
 });
 COffcanvas.propTypes = {
     backdrop: propTypesExports.oneOfType([propTypesExports.bool, propTypesExports.oneOf(['static'])]),
@@ -7169,8 +7050,7 @@ COffcanvas.displayName = 'COffcanvas';
 
 var COffcanvasBody = React.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
-    var _className = classNames('offcanvas-body', className);
-    return (React.createElement("div", __assign({ className: _className }, rest, { ref: ref }), children));
+    return (React.createElement("div", __assign({ className: classNames('offcanvas-body', className) }, rest, { ref: ref }), children));
 });
 COffcanvasBody.propTypes = {
     children: propTypesExports.node,
@@ -7180,8 +7060,7 @@ COffcanvasBody.displayName = 'COffcanvasBody';
 
 var COffcanvasHeader = React.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
-    var _className = classNames('offcanvas-header', className);
-    return (React.createElement("div", __assign({ className: _className }, rest, { ref: ref }), children));
+    return (React.createElement("div", __assign({ className: classNames('offcanvas-header', className) }, rest, { ref: ref }), children));
 });
 COffcanvasHeader.propTypes = {
     children: propTypesExports.node,
@@ -7191,8 +7070,7 @@ COffcanvasHeader.displayName = 'COffcanvasHeader';
 
 var COffcanvasTitle = 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"]);
-    var _className = classNames('offcanvas-title', className);
-    return (React.createElement(Component, __assign({ className: _className }, rest, { ref: ref }), children));
+    return (React.createElement(Component, __assign({ className: classNames('offcanvas-title', className) }, rest, { ref: ref }), children));
 });
 COffcanvasTitle.propTypes = {
     children: propTypesExports.node,
@@ -7204,12 +7082,11 @@ COffcanvasTitle.displayName = 'COffcanvasTitle';
 var CPagination = React.forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, align = _a.align, className = _a.className, size = _a.size, rest = __rest(_a, ["children", "align", "className", "size"]);
-    var _className = classNames('pagination', (_b = {},
-        _b["justify-content-".concat(align)] = align,
-        _b["pagination-".concat(size)] = size,
-        _b), className);
     return (React.createElement("nav", __assign({ ref: ref }, rest),
-        React.createElement("ul", { className: _className }, children)));
+        React.createElement("ul", { className: classNames('pagination', (_b = {},
+                _b["justify-content-".concat(align)] = align,
+                _b["pagination-".concat(size)] = size,
+                _b), className) }, children)));
 });
 CPagination.propTypes = {
     align: propTypesExports.oneOf(['start', 'center', 'end']),
@@ -7221,12 +7098,11 @@ CPagination.displayName = 'CPagination';
 
 var CPaginationItem = React.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, component = _a.component, rest = __rest(_a, ["children", "className", "component"]);
-    var _className = classNames('page-item', {
-        active: rest.active,
-        disabled: rest.disabled,
-    }, className);
-    var Component = component ? component : rest.active ? 'span' : 'a';
-    return (React.createElement("li", __assign({ className: _className }, (rest.active && { 'aria-current': 'page' })), Component === 'a' ? (React.createElement(CLink, __assign({ className: "page-link", component: Component }, rest, { ref: ref }), children)) : (React.createElement(Component, { className: "page-link", ref: ref }, children))));
+    var Component = component !== null && component !== void 0 ? component : (rest.active ? 'span' : 'a');
+    return (React.createElement("li", __assign({ className: classNames('page-item', {
+            active: rest.active,
+            disabled: rest.disabled,
+        }, className) }, (rest.active && { 'aria-current': 'page' })), Component === 'a' ? (React.createElement(CLink, __assign({ className: "page-link", component: Component }, rest, { ref: ref }), children)) : (React.createElement(Component, { className: "page-link", ref: ref }, children))));
 });
 CPaginationItem.propTypes = {
     children: propTypesExports.node,
@@ -7258,11 +7134,10 @@ var CPlaceholder = React.forwardRef(function (_a, ref) {
             repsonsiveClassNames.push("col".concat(infix));
         }
     });
-    var _className = classNames(animation ? "placeholder-".concat(animation) : 'placeholder', (_b = {},
-        _b["bg-".concat(color)] = color,
-        _b["placeholder-".concat(size)] = size,
-        _b), repsonsiveClassNames, className);
-    return (React.createElement(Component, __assign({ className: _className }, rest, { ref: ref }), children));
+    return (React.createElement(Component, __assign({ className: classNames(animation ? "placeholder-".concat(animation) : 'placeholder', (_b = {},
+            _b["bg-".concat(color)] = color,
+            _b["placeholder-".concat(size)] = size,
+            _b), repsonsiveClassNames, className) }, rest, { ref: ref }), children));
 });
 CPlaceholder.propTypes = {
     animation: propTypesExports.oneOf(['glow', 'wave']),
@@ -7277,12 +7152,11 @@ CPlaceholder.displayName = 'CPlaceholder';
 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 _className = classNames('progress-bar', (_b = {},
-        _b["bg-".concat(color)] = color,
-        _b["progress-bar-".concat(variant)] = variant,
-        _b['progress-bar-animated'] = animated,
-        _b), className);
-    return (React.createElement("div", __assign({ className: _className, role: "progressbar", style: { width: "".concat(value, "%") }, "aria-valuenow": value, "aria-valuemin": 0, "aria-valuemax": 100 }, rest, { ref: ref }), children));
+    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));
 });
 CProgressBar.propTypes = {
     animated: propTypesExports.bool,
@@ -7296,11 +7170,10 @@ CProgressBar.displayName = 'CProgressBar';
 
 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"]);
-    var _className = classNames('progress', {
-        'progress-thin': thin,
-        'progress-white': white,
-    }, className);
-    return (React.createElement("div", { className: _className, style: height ? { height: "".concat(height, "px") } : {}, ref: ref }, value ? (React.createElement(CProgressBar, __assign({ value: value }, rest), children)) : (children)));
+    return (React.createElement("div", { 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)));
 });
 CProgress.propTypes = {
     children: propTypesExports.node,
@@ -7334,15 +7207,6 @@ var CPopover = function (_a) {
     React.useEffect(function () {
         setVisible(visible);
     }, [visible]);
-    var getTransitionClass = function (state) {
-        return state === 'entering'
-            ? 'fade'
-            : state === 'entered'
-                ? 'fade show'
-                : state === 'exiting'
-                    ? 'fade'
-                    : 'fade';
-    };
     return (React.createElement(React.Fragment, null,
         React.cloneElement(children, __assign(__assign(__assign({ ref: setReferenceElement }, ((trigger === 'click' || trigger.includes('click')) && {
             onClick: function () { return setVisible(!_visible); },
@@ -7357,13 +7221,12 @@ var CPopover = function (_a) {
             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) {
-                var transitionClass = getTransitionClass(state);
-                return (React.createElement("div", __assign({ className: classNames("popover bs-popover-".concat(placement === 'left' ? 'start' : placement === 'right' ? 'end' : placement), className, transitionClass), ref: setPopperElement, role: "tooltip", style: styles.popper }, attributes.popper, rest),
-                    React.createElement("div", { className: "popover-arrow", style: styles.arrow, ref: setArrowElement }),
-                    React.createElement("div", { className: "popover-header" }, title),
-                    React.createElement("div", { className: "popover-body" }, content)));
-            }), document.body)));
+                }, unmountOnExit: true }, function (state) { return (React.createElement("div", __assign({ className: classNames('popover', "bs-popover-".concat(placement.replace('left', 'start').replace('right', 'end')), 'fade', {
+                    show: state === 'entered',
+                }, className), ref: setPopperElement, role: "tooltip", style: styles.popper }, attributes.popper, rest),
+                React.createElement("div", { className: "popover-arrow", style: styles.arrow, ref: setArrowElement }),
+                React.createElement("div", { className: "popover-header" }, title),
+                React.createElement("div", { className: "popover-body" }, content))); }), document.body)));
 };
 CPopover.propTypes = {
     children: propTypesExports.node,
@@ -7395,7 +7258,7 @@ var CSidebar = React.forwardRef(function (_a, ref) {
         setVisible(visible);
     }, [visible]);
     React.useEffect(function () {
-        typeof inViewport !== 'undefined' && onVisibleChange && onVisibleChange(inViewport);
+        inViewport !== undefined && onVisibleChange && onVisibleChange(inViewport);
         !inViewport && onHide && onHide();
         inViewport && onShow && onShow();
     }, [inViewport]);
@@ -7453,18 +7316,17 @@ var CSidebar = React.forwardRef(function (_a, ref) {
             mobile &&
             handleHide();
     };
-    var _className = classNames('sidebar', (_b = {
-            'sidebar-narrow': narrow,
-            'sidebar-overlaid': overlaid
-        },
-        _b["sidebar-".concat(position)] = position,
-        _b["sidebar-".concat(size)] = size,
-        _b['sidebar-narrow-unfoldable'] = unfoldable,
-        _b.show = _visible === true && mobile,
-        _b.hide = _visible === false && !mobile,
-        _b), className);
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", __assign({ className: _className }, rest, { ref: forkedRef }), children),
+        React.createElement("div", __assign({ className: classNames('sidebar', (_b = {
+                    'sidebar-narrow': narrow,
+                    'sidebar-overlaid': overlaid
+                },
+                _b["sidebar-".concat(position)] = position,
+                _b["sidebar-".concat(size)] = size,
+                _b['sidebar-narrow-unfoldable'] = unfoldable,
+                _b.show = _visible === true && mobile,
+                _b.hide = _visible === false && !mobile,
+                _b), className) }, rest, { ref: forkedRef }), children),
         typeof window !== 'undefined' &&
             mobile &&
             ReactDOM.createPortal(React.createElement(CBackdrop, { className: "sidebar-backdrop", visible: _visible }), document.body)));
@@ -7486,8 +7348,7 @@ CSidebar.displayName = 'CSidebar';
 
 var CSidebarBrand = React.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
-    var _className = classNames('sidebar-brand', className);
-    return (React.createElement("div", __assign({ className: _className, ref: ref }, rest), children));
+    return (React.createElement("div", __assign({ className: classNames('sidebar-brand', className), ref: ref }, rest), children));
 });
 CSidebarBrand.propTypes = {
     children: propTypesExports.node,
@@ -7497,8 +7358,7 @@ CSidebarBrand.displayName = 'CSidebarBrand';
 
 var CSidebarFooter = React.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
-    var _className = classNames('sidebar-footer', className);
-    return (React.createElement("div", __assign({ className: _className, ref: ref }, rest), children));
+    return (React.createElement("div", __assign({ className: classNames('sidebar-footer', className), ref: ref }, rest), children));
 });
 CSidebarFooter.propTypes = {
     children: propTypesExports.node,
@@ -7508,8 +7368,7 @@ CSidebarFooter.displayName = 'CSidebarFooter';
 
 var CSidebarToggler = React.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
-    var _className = classNames('sidebar-toggler', className);
-    return (React.createElement("button", __assign({ className: _className, ref: ref }, rest), children));
+    return (React.createElement("button", __assign({ className: classNames('sidebar-toggler', className), ref: ref }, rest), children));
 });
 CSidebarToggler.propTypes = {
     children: propTypesExports.node,
@@ -7519,8 +7378,7 @@ CSidebarToggler.displayName = 'CSidebarToggler';
 
 var CSidebarHeader = React.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
-    var _className = classNames('sidebar-header', className);
-    return (React.createElement("div", __assign({ className: _className, ref: ref }, rest), children));
+    return (React.createElement("div", __assign({ className: classNames('sidebar-header', className), ref: ref }, rest), children));
 });
 CSidebarHeader.propTypes = {
     children: propTypesExports.node,
@@ -7530,8 +7388,7 @@ CSidebarHeader.displayName = 'CSidebarHeader';
 
 var CSpinner = React.forwardRef(function (_a, ref) {
     var className = _a.className, color = _a.color, _b = _a.component, Component = _b === void 0 ? 'div' : _b, size = _a.size, _c = _a.variant, variant = _c === void 0 ? 'border' : _c, _d = _a.visuallyHiddenLabel, visuallyHiddenLabel = _d === void 0 ? 'Loading...' : _d, rest = __rest(_a, ["className", "color", "component", "size", "variant", "visuallyHiddenLabel"]);
-    var _className = classNames("spinner-".concat(variant), "text-".concat(color), size && "spinner-".concat(variant, "-").concat(size), className);
-    return (React.createElement(Component, __assign({ className: _className, role: "status" }, rest, { ref: ref }),
+    return (React.createElement(Component, __assign({ className: classNames("spinner-".concat(variant), "text-".concat(color), size && "spinner-".concat(variant, "-").concat(size), className), role: "status" }, rest, { ref: ref }),
         React.createElement("span", { className: "visually-hidden" }, visuallyHiddenLabel)));
 });
 CSpinner.propTypes = {
@@ -7547,10 +7404,9 @@ CSpinner.displayName = 'CSpinner';
 var CTableHead = React.forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, color = _a.color, rest = __rest(_a, ["children", "className", "color"]);
-    var _className = classNames((_b = {},
-        _b["table-".concat(color)] = color,
-        _b), className);
-    return (React.createElement("thead", __assign({ className: _className ? _className : undefined }, rest, { ref: ref }), children));
+    return (React.createElement("thead", __assign({ className: classNames((_b = {},
+            _b["table-".concat(color)] = color,
+            _b), className) || undefined }, rest, { ref: ref }), children));
 });
 CTableHead.propTypes = {
     children: propTypesExports.node,
@@ -7562,10 +7418,9 @@ CTableHead.displayName = 'CTableHead';
 var CTableHeaderCell = React.forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, color = _a.color, rest = __rest(_a, ["children", "className", "color"]);
-    var _className = classNames((_b = {},
-        _b["table-".concat(color)] = color,
-        _b), className);
-    return (React.createElement("th", __assign({ className: _className ? _className : undefined }, rest, { ref: ref }), children));
+    return (React.createElement("th", __assign({ className: classNames((_b = {},
+            _b["table-".concat(color)] = color,
+            _b), className) || undefined }, rest, { ref: ref }), children));
 });
 CTableHeaderCell.propTypes = {
     children: propTypesExports.node,
@@ -7577,10 +7432,9 @@ CTableHeaderCell.displayName = 'CTableHeaderCell';
 var CTableBody = React.forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, color = _a.color, rest = __rest(_a, ["children", "className", "color"]);
-    var _className = classNames((_b = {},
-        _b["table-".concat(color)] = color,
-        _b), className);
-    return (React.createElement("tbody", __assign({ className: _className ? _className : undefined }, rest, { ref: ref }), children));
+    return (React.createElement("tbody", __assign({ className: classNames((_b = {},
+            _b["table-".concat(color)] = color,
+            _b), className) || undefined }, rest, { ref: ref }), children));
 });
 CTableBody.propTypes = {
     children: propTypesExports.node,
@@ -7592,13 +7446,12 @@ CTableBody.displayName = 'CTableBody';
 var CTableDataCell = React.forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, active = _a.active, align = _a.align, className = _a.className, color = _a.color, rest = __rest(_a, ["children", "active", "align", "className", "color"]);
-    var _className = classNames((_b = {},
-        _b["align-".concat(align)] = align,
-        _b['table-active'] = active,
-        _b["table-".concat(color)] = color,
-        _b), className);
     var Component = rest.scope ? 'th' : 'td';
-    return (React.createElement(Component, __assign({ className: _className ? _className : undefined }, rest, { ref: ref }), children));
+    return (React.createElement(Component, __assign({ className: classNames((_b = {},
+            _b["align-".concat(align)] = align,
+            _b['table-active'] = active,
+            _b["table-".concat(color)] = color,
+            _b), className) || undefined }, rest, { ref: ref }), children));
 });
 CTableDataCell.propTypes = {
     active: propTypesExports.bool,
@@ -7612,12 +7465,11 @@ CTableDataCell.displayName = 'CTableDataCell';
 var CTableRow = React.forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, active = _a.active, align = _a.align, className = _a.className, color = _a.color, rest = __rest(_a, ["children", "active", "align", "className", "color"]);
-    var _className = classNames((_b = {},
-        _b["align-".concat(align)] = align,
-        _b['table-active'] = active,
-        _b["table-".concat(color)] = color,
-        _b), className);
-    return (React.createElement("tr", __assign({ className: _className ? _className : undefined }, rest, { ref: ref }), children));
+    return (React.createElement("tr", __assign({ className: classNames((_b = {},
+            _b["align-".concat(align)] = align,
+            _b['table-active'] = active,
+            _b["table-".concat(color)] = color,
+            _b), className) || undefined }, rest, { ref: ref }), children));
 });
 CTableRow.propTypes = {
     active: propTypesExports.bool,
@@ -7631,10 +7483,9 @@ CTableRow.displayName = 'CTableRow';
 var CTableFoot = React.forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, color = _a.color, rest = __rest(_a, ["children", "className", "color"]);
-    var _className = classNames((_b = {},
-        _b["table-".concat(color)] = color,
-        _b), className);
-    return (React.createElement("tfoot", __assign({ className: _className ? _className : undefined }, rest, { ref: ref }), children));
+    return (React.createElement("tfoot", __assign({ className: classNames((_b = {},
+            _b["table-".concat(color)] = color,
+            _b), className) || undefined }, rest, { ref: ref }), children));
 });
 CTableFoot.propTypes = {
     children: propTypesExports.node,
@@ -7654,10 +7505,10 @@ CTableCaption.displayName = 'CTableCaption';
 
 var CTableResponsiveWrapper = function (_a) {
     var children = _a.children, responsive = _a.responsive, rest = __rest(_a, ["children", "responsive"]);
-    return responsive ? (React.createElement("div", __assign({ className: typeof responsive === 'boolean' ? 'table-responsive' : "table-responsive-".concat(responsive) }, rest), children)) : (children);
+    return responsive ? (React.createElement("div", __assign({ className: typeof responsive === 'boolean' ? 'table-responsive' : "table-responsive-".concat(responsive) }, rest), children)) : (React.createElement(React.Fragment, null, children));
 };
 CTableResponsiveWrapper.propTypes = {
-    children: propTypesExports.any,
+    children: propTypesExports.node,
     responsive: propTypesExports.oneOfType([
         propTypesExports.bool,
         propTypesExports.oneOf(['sm', 'md', 'lg', 'xl', 'xxl']),
@@ -7665,53 +7516,51 @@ CTableResponsiveWrapper.propTypes = {
 };
 CTableResponsiveWrapper.displayName = 'CTableResponsiveWrapper';
 
+var pretifyName = function (name) {
+    return name
+        .replace(/[-_.]/g, ' ')
+        .replace(/ +/g, ' ')
+        .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+        .split(' ')
+        .map(function (word) { return word.charAt(0).toUpperCase() + word.slice(1); })
+        .join(' ');
+};
+var getColumnLabel = function (column) { var _a; return typeof column === 'object' ? (_a = column.label) !== null && _a !== void 0 ? _a : pretifyName(column.key) : pretifyName(column); };
+var getColumnNames = function (columns, items) {
+    return columns
+        ? columns.map(function (column) {
+            return typeof column === 'object' ? column.key : column;
+        })
+        : items && getColumnNamesFromItems(items);
+};
+var getColumnNamesFromItems = function (items) {
+    return Object.keys(items[0] || {}).filter(function (el) { return el.charAt(0) !== '_'; });
+};
+
 var CTable = React.forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, align = _a.align, borderColor = _a.borderColor, bordered = _a.bordered, borderless = _a.borderless, caption = _a.caption, captionTop = _a.captionTop, className = _a.className, color = _a.color, columns = _a.columns, footer = _a.footer, hover = _a.hover, items = _a.items, responsive = _a.responsive, small = _a.small, striped = _a.striped, stripedColumns = _a.stripedColumns, tableFootProps = _a.tableFootProps, tableHeadProps = _a.tableHeadProps, rest = __rest(_a, ["children", "align", "borderColor", "bordered", "borderless", "caption", "captionTop", "className", "color", "columns", "footer", "hover", "items", "responsive", "small", "striped", "stripedColumns", "tableFootProps", "tableHeadProps"]);
-    var _className = classNames('table', (_b = {},
-        _b["align-".concat(align)] = align,
-        _b["border-".concat(borderColor)] = borderColor,
-        _b["caption-top"] = captionTop || caption === 'top',
-        _b['table-bordered'] = bordered,
-        _b['table-borderless'] = borderless,
-        _b["table-".concat(color)] = color,
-        _b['table-hover'] = hover,
-        _b['table-sm'] = small,
-        _b['table-striped'] = striped,
-        _b['table-striped-columns'] = stripedColumns,
-        _b), className);
-    var rawColumnNames = columns
-        ? columns.map(function (column) {
-            if (typeof column === 'object')
-                return column.key;
-            else
-                return column;
-        })
-        : Object.keys((items && items[0]) || {}).filter(function (el) { return el.charAt(0) !== '_'; });
-    var pretifyName = function (name) {
-        return name
-            .replace(/[-_.]/g, ' ')
-            .replace(/ +/g, ' ')
-            .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
-            .split(' ')
-            .map(function (word) { return word.charAt(0).toUpperCase() + word.slice(1); })
-            .join(' ');
-    };
-    var label = function (column) {
-        return typeof column === 'object'
-            ? column.label !== undefined
-                ? column.label
-                : pretifyName(column.key)
-            : pretifyName(column);
-    };
+    var columnNames = React.useMemo(function () { return getColumnNames(columns, items); }, [columns, items]);
     return (React.createElement(CTableResponsiveWrapper, { responsive: responsive },
-        React.createElement("table", __assign({ className: _className }, rest, { ref: ref }),
+        React.createElement("table", __assign({ className: classNames('table', (_b = {},
+                _b["align-".concat(align)] = align,
+                _b["border-".concat(borderColor)] = borderColor,
+                _b["caption-top"] = captionTop || caption === 'top',
+                _b['table-bordered'] = bordered,
+                _b['table-borderless'] = borderless,
+                _b["table-".concat(color)] = color,
+                _b['table-hover'] = hover,
+                _b['table-sm'] = small,
+                _b['table-striped'] = striped,
+                _b['table-striped-columns'] = stripedColumns,
+                _b), className) }, rest, { ref: ref }),
             ((caption && caption !== 'top') || captionTop) && (React.createElement(CTableCaption, null, caption || captionTop)),
             columns && (React.createElement(CTableHead, __assign({}, tableHeadProps),
-                React.createElement(CTableRow, null, columns.map(function (column, index) { return (React.createElement(CTableHeaderCell, __assign({}, (column._props && __assign({}, column._props)), (column._style && { style: __assign({}, column._style) }), { key: index }), label(column))); })))),
-            items && (React.createElement(CTableBody, null, items.map(function (item, index) { return (React.createElement(CTableRow, __assign({}, (item._props && __assign({}, item._props)), { key: index }), rawColumnNames.map(function (colName, index) {
-                return item[colName] ? (React.createElement(CTableDataCell, __assign({}, (item._cellProps && __assign(__assign({}, (item._cellProps['all'] && __assign({}, item._cellProps['all']))), (item._cellProps[colName] && __assign({}, item._cellProps[colName])))), { key: index }), item[colName])) : null;
-            }))); }))),
+                React.createElement(CTableRow, null, columns.map(function (column, index) { return (React.createElement(CTableHeaderCell, __assign({}, (column._props && __assign({}, column._props)), (column._style && { style: __assign({}, column._style) }), { key: index }), getColumnLabel(column))); })))),
+            items && (React.createElement(CTableBody, null, items.map(function (item, index) { return (React.createElement(CTableRow, __assign({}, (item._props && __assign({}, item._props)), { key: index }), columnNames &&
+                columnNames.map(function (colName, index) {
+                    return item[colName] ? (React.createElement(CTableDataCell, __assign({}, (item._cellProps && __assign(__assign({}, (item._cellProps['all'] && __assign({}, item._cellProps['all']))), (item._cellProps[colName] && __assign({}, item._cellProps[colName])))), { key: index }), item[colName])) : null;
+                }))); }))),
             children,
             footer && (React.createElement(CTableFoot, __assign({}, tableFootProps),
                 React.createElement(CTableRow, null, footer.map(function (item, index) { return (React.createElement(CTableDataCell, __assign({}, (typeof item === 'object' && item._props && __assign({}, item._props)), { key: index }), typeof item === 'object' ? item.label : item)); })))))));
@@ -7744,8 +7593,7 @@ CTable.displayName = 'CTable';
 
 var CTabContent = React.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
-    var _className = classNames('tab-content', className);
-    return (React.createElement("div", __assign({ className: _className }, rest, { ref: ref }), children));
+    return (React.createElement("div", __assign({ className: classNames('tab-content', className) }, rest, { ref: ref }), children));
 });
 CTabContent.propTypes = {
     children: propTypesExports.node,
@@ -7757,16 +7605,10 @@ var CTabPane = React.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, onHide = _a.onHide, onShow = _a.onShow, visible = _a.visible, rest = __rest(_a, ["children", "className", "onHide", "onShow", "visible"]);
     var tabPaneRef = React.useRef();
     var forkedRef = useForkedRef(ref, tabPaneRef);
-    var getTransitionClass = function (state) {
-        return state === 'entered' && 'show';
-    };
-    var _className = classNames('tab-pane', 'fade', {
-        active: visible,
-    }, className);
-    return (React.createElement(Transition$1, { in: visible, nodeRef: tabPaneRef, onEnter: onShow, onExit: onHide, timeout: 150 }, function (state) {
-        var transitionClass = getTransitionClass(state);
-        return (React.createElement("div", __assign({ className: classNames(_className, transitionClass) }, rest, { ref: forkedRef }), children));
-    }));
+    return (React.createElement(Transition$1, { in: visible, nodeRef: tabPaneRef, onEnter: onShow, onExit: onHide, timeout: 150 }, function (state) { return (React.createElement("div", __assign({ className: classNames('tab-pane', 'fade', {
+            active: visible,
+            show: state === 'entered',
+        }, className) }, rest, { ref: forkedRef }), children)); }));
 });
 CTabPane.propTypes = {
     children: propTypesExports.node,
@@ -7779,11 +7621,10 @@ CTabPane.displayName = 'CTabPane';
 
 var CToastContext = React.createContext({});
 var CToast = React.forwardRef(function (_a, ref) {
-    var _b;
-    var children = _a.children, _c = _a.animation, animation = _c === void 0 ? true : _c, _d = _a.autohide, autohide = _d === void 0 ? true : _d, className = _a.className, color = _a.color, _e = _a.delay, delay = _e === void 0 ? 5000 : _e, index = _a.index, key = _a.key, _f = _a.visible, visible = _f === void 0 ? false : _f, onClose = _a.onClose, onShow = _a.onShow, rest = __rest(_a, ["children", "animation", "autohide", "className", "color", "delay", "index", "key", "visible", "onClose", "onShow"]);
+    var children = _a.children, _b = _a.animation, animation = _b === void 0 ? true : _b, _c = _a.autohide, autohide = _c === void 0 ? true : _c, className = _a.className, color = _a.color, _d = _a.delay, delay = _d === void 0 ? 5000 : _d, index = _a.index, key = _a.key, _e = _a.visible, visible = _e === void 0 ? false : _e, onClose = _a.onClose, onShow = _a.onShow, rest = __rest(_a, ["children", "animation", "autohide", "className", "color", "delay", "index", "key", "visible", "onClose", "onShow"]);
     var toastRef = React.useRef();
     var forkedRef = useForkedRef(ref, toastRef);
-    var _g = React.useState(false), _visible = _g[0], setVisible = _g[1];
+    var _f = React.useState(false), _visible = _f[0], setVisible = _f[1];
     var timeout = React.useRef();
     React.useEffect(function () {
         setVisible(visible);
@@ -7805,25 +7646,17 @@ var CToast = React.forwardRef(function (_a, ref) {
             }, delay);
         }
     };
-    var _className = classNames('toast', (_b = {
-            fade: animation
-        },
-        _b["bg-".concat(color)] = color,
-        _b['border-0'] = color,
-        _b), className);
-    var getTransitionClass = function (state) {
-        return state === 'entering'
-            ? 'showing'
-            : state === 'entered'
-                ? 'show'
-                : state === 'exiting'
-                    ? 'showing'
-                    : 'fade';
-    };
-    return (React.createElement(Transition$1, { in: _visible, nodeRef: toastRef, onEnter: function () { return onShow && onShow(index ? index : null); }, onExited: function () { return onClose && onClose(index ? index : null); }, timeout: 250, unmountOnExit: true }, function (state) {
-        var transitionClass = getTransitionClass(state);
+    return (React.createElement(Transition$1, { in: _visible, nodeRef: toastRef, onEnter: function () { return onShow && onShow(index !== null && index !== void 0 ? index : null); }, onExited: function () { return onClose && onClose(index !== null && index !== void 0 ? index : null); }, timeout: 250, unmountOnExit: true }, function (state) {
+        var _a;
         return (React.createElement(CToastContext.Provider, { value: contextValues },
-            React.createElement("div", __assign({ className: classNames(_className, transitionClass), "aria-live": "assertive", "aria-atomic": "true", role: "alert", onMouseEnter: function () { return clearTimeout(timeout.current); }, onMouseLeave: function () { return _autohide(); } }, rest, { key: key, ref: forkedRef }), children)));
+            React.createElement("div", __assign({ className: classNames('toast', (_a = {
+                        fade: animation
+                    },
+                    _a["bg-".concat(color)] = color,
+                    _a['border-0'] = color,
+                    _a['show showing'] = state === 'entering' || state === 'exiting',
+                    _a.show = state === 'entered',
+                    _a), className), "aria-live": "assertive", "aria-atomic": "true", role: "alert", onMouseEnter: function () { return clearTimeout(timeout.current); }, onMouseLeave: function () { return _autohide(); } }, rest, { key: key, ref: forkedRef }), children)));
     }));
 });
 CToast.propTypes = {
@@ -7843,8 +7676,7 @@ CToast.displayName = 'CToast';
 
 var CToastBody = React.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
-    var _className = classNames('toast-body', className);
-    return (React.createElement("div", __assign({ className: _className }, rest, { ref: ref }), children));
+    return (React.createElement("div", __assign({ className: classNames('toast-body', className) }, rest, { ref: ref }), children));
 });
 CToastBody.propTypes = {
     children: propTypesExports.node,
@@ -7862,8 +7694,7 @@ CToastClose.displayName = 'CToastClose';
 
 var CToastHeader = React.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, closeButton = _a.closeButton, rest = __rest(_a, ["children", "className", "closeButton"]);
-    var _className = classNames('toast-header', className);
-    return (React.createElement("div", __assign({ className: _className }, rest, { ref: ref }),
+    return (React.createElement("div", __assign({ className: classNames('toast-header', className) }, rest, { ref: ref }),
         children,
         closeButton && React.createElement(CToastClose, null)));
 });
@@ -7893,23 +7724,17 @@ var CToaster = React.forwardRef(function (_a, ref) {
             }),
         ], false); });
     };
-    var _className = classNames('toaster toast-container p-3', {
-        'position-fixed': placement,
-        'top-0': placement && placement.includes('top'),
-        'top-50 translate-middle-y': placement && placement.includes('middle'),
-        'bottom-0': placement && placement.includes('bottom'),
-        'start-0': placement && placement.includes('start'),
-        'start-50 translate-middle-x': placement && placement.includes('center'),
-        'end-0': placement && placement.includes('end'),
-    }, className);
-    var toaster = function (ref) {
-        return toasts.length > 0 || children ? (React.createElement("div", __assign({ className: _className }, rest, { ref: ref }),
-            children,
-            toasts.map(function (toast) { return React.cloneElement(toast, { visible: true }); }))) : null;
-    };
-    return typeof window !== 'undefined' && placement
-        ? ReactDOM.createPortal(toaster(ref), document.body)
-        : toaster(ref);
+    return (React.createElement(CConditionalPortal, { portal: typeof placement === 'string' }, toasts.length > 0 || children ? (React.createElement("div", __assign({ className: classNames('toaster toast-container p-3', {
+            'position-fixed': placement,
+            'top-0': placement && placement.includes('top'),
+            'top-50 translate-middle-y': placement && placement.includes('middle'),
+            'bottom-0': placement && placement.includes('bottom'),
+            'start-0': placement && placement.includes('start'),
+            'start-50 translate-middle-x': placement && placement.includes('center'),
+            'end-0': placement && placement.includes('end'),
+        }, className) }, rest, { ref: ref }),
+        children,
+        toasts.map(function (toast) { return React.cloneElement(toast, { visible: true }); }))) : null));
 });
 CToaster.propTypes = {
     children: propTypesExports.node,
@@ -7954,15 +7779,6 @@ var CTooltip = function (_a) {
     React.useEffect(function () {
         setVisible(visible);
     }, [visible]);
-    var getTransitionClass = function (state) {
-        return state === 'entering'
-            ? 'fade'
-            : state === 'entered'
-                ? 'fade show'
-                : state === 'exiting'
-                    ? 'fade'
-                    : 'fade';
-    };
     return (React.createElement(React.Fragment, null,
         React.cloneElement(children, __assign(__assign(__assign({ ref: setReferenceElement }, ((trigger === 'click' || trigger.includes('click')) && {
             onClick: function () { return setVisible(!_visible); },
@@ -7977,12 +7793,11 @@ var CTooltip = function (_a) {
             ReactDOM.createPortal(React.createElement(Transition$1, { in: _visible, mountOnEnter: true, nodeRef: tooltipRef, onEnter: onShow, onExit: onHide, timeout: {
                     enter: 0,
                     exit: 200,
-                }, unmountOnExit: true }, function (state) {
-                var transitionClass = getTransitionClass(state);
-                return (React.createElement("div", __assign({ className: classNames("tooltip bs-tooltip-".concat(placement === 'left' ? 'start' : placement === 'right' ? 'end' : placement), className, transitionClass), ref: setPopperElement, role: "tooltip", style: styles.popper }, attributes.popper, rest),
-                    React.createElement("div", { className: "tooltip-arrow", style: styles.arrow, ref: setArrowElement }),
-                    React.createElement("div", { className: "tooltip-inner" }, content)));
-            }), document.body)));
+                }, unmountOnExit: true }, function (state) { return (React.createElement("div", __assign({ className: classNames('tooltip', "bs-popover-".concat(placement.replace('left', 'start').replace('right', 'end')), 'fade', {
+                    show: state === 'entered',
+                }, className), ref: setPopperElement, role: "tooltip", style: styles.popper }, attributes.popper, rest),
+                React.createElement("div", { className: "tooltip-arrow", style: styles.arrow, ref: setArrowElement }),
+                React.createElement("div", { className: "tooltip-inner" }, content))); }), document.body)));
 };
 CTooltip.propTypes = {
     children: propTypesExports.node,
@@ -7999,8 +7814,7 @@ CTooltip.displayName = 'CTooltip';
 var CWidgetStatsA = React.forwardRef(function (_a, ref) {
     var _b;
     var action = _a.action, chart = _a.chart, className = _a.className, color = _a.color, title = _a.title, value = _a.value, rest = __rest(_a, ["action", "chart", "className", "color", "title", "value"]);
-    var _className = classNames((_b = {}, _b["bg-".concat(color)] = color, _b['text-high-emphasis-inverse'] = color, _b), className);
-    return (React.createElement(CCard, __assign({ className: _className }, rest, { ref: ref }),
+    return (React.createElement(CCard, __assign({ className: classNames((_b = {}, _b["bg-".concat(color)] = color, _b['text-high-emphasis-inverse'] = color, _b), className) }, rest, { ref: ref }),
         React.createElement(CCardBody, { className: "pb-0 d-flex justify-content-between align-items-start" },
             React.createElement("div", null,
                 value && React.createElement("div", { className: "fs-4 fw-semibold" }, value),
@@ -8061,12 +7875,10 @@ CWidgetStatsC.displayName = 'CWidgetStatsCWidgetStatsC';
 var CWidgetStatsD = React.forwardRef(function (_a, ref) {
     var _b;
     var className = _a.className, chart = _a.chart, color = _a.color, icon = _a.icon, values = _a.values, rest = __rest(_a, ["className", "chart", "color", "icon", "values"]);
-    var _className = classNames(className);
-    var classNameHeader = classNames('position-relative d-flex justify-content-center align-items-center', (_b = {},
-        _b["bg-".concat(color)] = color,
-        _b));
-    return (React.createElement(CCard, __assign({ className: _className }, rest, { ref: ref }),
-        React.createElement(CCardHeader, { className: classNameHeader },
+    return (React.createElement(CCard, __assign({ className: className }, rest, { ref: ref }),
+        React.createElement(CCardHeader, { className: classNames('position-relative d-flex justify-content-center align-items-center', (_b = {},
+                _b["bg-".concat(color)] = color,
+                _b)) },
             icon,
             chart),
         React.createElement(CCardBody, { className: "row text-center" }, values &&
@@ -8089,8 +7901,7 @@ CWidgetStatsD.displayName = 'CWidgetStatsD';
 
 var CWidgetStatsE = React.forwardRef(function (_a, ref) {
     var chart = _a.chart, className = _a.className, title = _a.title, value = _a.value, rest = __rest(_a, ["chart", "className", "title", "value"]);
-    var _className = classNames(className);
-    return (React.createElement(CCard, __assign({ className: _className }, rest, { ref: ref }),
+    return (React.createElement(CCard, __assign({ className: classNames(className) }, rest, { ref: ref }),
         React.createElement(CCardBody, { className: "text-center" },
             title && (React.createElement("div", { className: "text-medium-emphasis small text-uppercase fw-semibold" }, title)),
             value && React.createElement("div", { className: "fs-6 fw-semibold py-3" }, value),
@@ -8107,8 +7918,7 @@ CWidgetStatsE.displayName = 'CWidgetStatsE';
 
 var CWidgetStatsF = React.forwardRef(function (_a, ref) {
     var className = _a.className, color = _a.color, footer = _a.footer, icon = _a.icon, _b = _a.padding, padding = _b === void 0 ? true : _b, title = _a.title, value = _a.value, rest = __rest(_a, ["className", "color", "footer", "icon", "padding", "title", "value"]);
-    var _className = classNames(className);
-    return (React.createElement(CCard, __assign({ className: _className }, rest, { ref: ref }),
+    return (React.createElement(CCard, __assign({ className: className }, rest, { ref: ref }),
         React.createElement(CCardBody, { className: "d-flex align-items-center ".concat(padding === false && 'p-0') },
             React.createElement("div", { className: "me-3 text-white bg-".concat(color, " ").concat(padding ? 'p-3' : 'p-4') }, icon),
             React.createElement("div", null,
@@ -8162,6 +7972,7 @@ exports.CCarouselItem = CCarouselItem;
 exports.CCloseButton = CCloseButton;
 exports.CCol = CCol;
 exports.CCollapse = CCollapse;
+exports.CConditionalPortal = CConditionalPortal;
 exports.CContainer = CContainer;
 exports.CDropdown = CDropdown;
 exports.CDropdownDivider = CDropdownDivider;