@coreui/react-pro 4.9.0-next.1 → 4.10.0

package/dist/index.es.js

@@ -1,5 +1,5 @@
 import * as React$1 from 'react';
-import React__default$1, { createContext, forwardRef, useState, useRef, useContext, useEffect, useMemo, Children, useLayoutEffect, useCallback, Fragment } from 'react';
+import React__default$1, { createContext, forwardRef, useState, useRef, useContext, useEffect, useMemo, Children, useLayoutEffect, Fragment } from 'react';
 import * as ReactDOM from 'react-dom';
 import ReactDOM__default, { createPortal } from 'react-dom';
 
@@ -1310,10 +1310,9 @@ var classNames$1 = classnamesExports;
 
 var CAccordionContext = createContext({});
 var CAccordion = 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$1(_a, ["children", "activeItemKey", "alwaysOpen", "className", "flush"]);
-    var _d = useState(activeItemKey), _activeItemKey = _d[0], setActiveKey = _d[1];
-    var _className = classNames$1('accordion', { 'accordion-flush': flush }, className);
-    return (React__default$1.createElement("div", __assign$1({ 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$1(_a, ["children", "activeItemKey", "alwaysOpen", "className", "flush"]);
+    var _c = useState(activeItemKey), _activeItemKey = _c[0], setActiveKey = _c[1];
+    return (React__default$1.createElement("div", __assign$1({ className: classNames$1('accordion', { 'accordion-flush': flush }, className) }, rest, { ref: ref }),
         React__default$1.createElement(CAccordionContext.Provider, { value: { _activeItemKey: _activeItemKey, alwaysOpen: alwaysOpen, setActiveKey: setActiveKey } }, children)));
 });
 CAccordion.propTypes = {
@@ -1328,7 +1327,7 @@ CAccordion.displayName = 'CAccordion';
 var CAccordionItemContext = createContext({});
 var CAccordionItem = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, itemKey = _a.itemKey, rest = __rest$1(_a, ["children", "className", "itemKey"]);
-    var _itemKey = useRef(itemKey ? itemKey : Math.random().toString(36).substr(2, 9));
+    var _itemKey = useRef(itemKey !== null && itemKey !== void 0 ? itemKey : Math.random().toString(36).slice(2, 11));
     var _b = useContext(CAccordionContext), _activeItemKey = _b._activeItemKey, alwaysOpen = _b.alwaysOpen, setActiveKey = _b.setActiveKey;
     var _c = useState(Boolean(_activeItemKey === _itemKey.current)), visible = _c[0], setVisible = _c[1];
     useEffect(function () {
@@ -1337,8 +1336,7 @@ var CAccordionItem = forwardRef(function (_a, ref) {
     useEffect(function () {
         setVisible(Boolean(_activeItemKey === _itemKey.current));
     }, [_activeItemKey]);
-    var _className = classNames$1('accordion-item', className);
-    return (React__default$1.createElement("div", __assign$1({ className: _className }, rest, { ref: ref }),
+    return (React__default$1.createElement("div", __assign$1({ className: classNames$1('accordion-item', className) }, rest, { ref: ref }),
         React__default$1.createElement(CAccordionItemContext.Provider, { value: { setVisible: setVisible, visible: visible } }, children)));
 });
 CAccordionItem.propTypes = {
@@ -2533,19 +2531,10 @@ var useStateWithCallback = function (initialState, handler, runHandler) {
 
 var CCollapse = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, horizontal = _a.horizontal, onHide = _a.onHide, onShow = _a.onShow, visible = _a.visible, rest = __rest$1(_a, ["children", "className", "horizontal", "onHide", "onShow", "visible"]);
-    var _b = useState(), height = _b[0], setHeight = _b[1];
-    var _c = useState(), width = _c[0], setWidth = _c[1];
     var collapseRef = 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 = useState(), height = _b[0], setHeight = _b[1];
+    var _c = useState(), width = _c[0], setWidth = _c[1];
     var onEntering = function () {
         onShow && onShow();
         if (horizontal) {
@@ -2583,14 +2572,15 @@ var CCollapse = forwardRef(function (_a, ref) {
         }
         setHeight(0);
     };
-    var _className = classNames$1({
-        'collapse-horizontal': horizontal,
-    }, className);
     return (React__default$1.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__default$1.createElement("div", __assign$1({ className: classNames$1(_className, transitionClass), style: __assign$1(__assign$1({}, currentHeight), currentWidth) }, rest, { ref: forkedRef }), children));
+        return (React__default$1.createElement("div", __assign$1({ className: classNames$1(className, {
+                'collapse-horizontal': horizontal,
+                collapsing: state === 'entering' || state === 'exiting',
+                'collapse show': state === 'entered',
+                collapse: state === 'exited',
+            }), style: __assign$1(__assign$1({}, currentHeight), currentWidth) }, rest, { ref: forkedRef }), children));
     }));
 });
 CCollapse.propTypes = {
@@ -2606,9 +2596,8 @@ CCollapse.displayName = 'CCollapse';
 var CAccordionBody = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest$1(_a, ["children", "className"]);
     var visible = useContext(CAccordionItemContext).visible;
-    var _className = classNames$1('accordion-body', className);
     return (React__default$1.createElement(CCollapse, { className: "accordion-collapse", visible: visible },
-        React__default$1.createElement("div", __assign$1({ className: _className }, rest, { ref: ref }), children)));
+        React__default$1.createElement("div", __assign$1({ className: classNames$1('accordion-body', className) }, rest, { ref: ref }), children)));
 });
 CAccordionBody.propTypes = {
     children: propTypesExports.node,
@@ -2619,8 +2608,7 @@ CAccordionBody.displayName = 'CAccordionBody';
 var CAccordionButton = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest$1(_a, ["children", "className"]);
     var _b = useContext(CAccordionItemContext), visible = _b.visible, setVisible = _b.setVisible;
-    var _className = classNames$1('accordion-button', { collapsed: !visible }, className);
-    return (React__default$1.createElement("button", __assign$1({ type: "button", className: _className, "aria-expanded": !visible, onClick: function () { return setVisible(!visible); } }, rest, { ref: ref }), children));
+    return (React__default$1.createElement("button", __assign$1({ type: "button", className: classNames$1('accordion-button', { collapsed: !visible }, className), "aria-expanded": !visible, onClick: function () { return setVisible(!visible); } }, rest, { ref: ref }), children));
 });
 CAccordionButton.propTypes = {
     children: propTypesExports.node,
@@ -2639,8 +2627,7 @@ CAccordionCollapse.displayName = 'CAccordionCollapse';
 
 var CAccordionHeader = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest$1(_a, ["children", "className"]);
-    var _className = classNames$1('accordion-header', className);
-    return (React__default$1.createElement("div", __assign$1({ className: _className }, rest, { ref: ref }),
+    return (React__default$1.createElement("div", __assign$1({ className: classNames$1('accordion-header', className) }, rest, { ref: ref }),
         React__default$1.createElement(CAccordionButton, null, children)));
 });
 CAccordionHeader.propTypes = {
@@ -2651,10 +2638,9 @@ CAccordionHeader.displayName = 'CAccordionHeader';
 
 var CCloseButton = forwardRef(function (_a, ref) {
     var className = _a.className, disabled = _a.disabled, white = _a.white, rest = __rest$1(_a, ["className", "disabled", "white"]);
-    var _className = classNames$1('btn', 'btn-close', {
-        'btn-close-white': white,
-    }, disabled, className);
-    return (React__default$1.createElement("button", __assign$1({ type: "button", className: _className, "aria-label": "Close", disabled: disabled }, rest, { ref: ref })));
+    return (React__default$1.createElement("button", __assign$1({ type: "button", className: classNames$1('btn', 'btn-close', {
+            'btn-close-white': white,
+        }, disabled, className), "aria-label": "Close", disabled: disabled }, rest, { ref: ref })));
 });
 CCloseButton.propTypes = {
     className: propTypesExports.string,
@@ -2734,18 +2720,12 @@ var CAlert = forwardRef(function (_a, ref) {
     useEffect(function () {
         setVisible(visible);
     }, [visible]);
-    var _className = classNames$1('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__default$1.createElement(Transition$1, { in: _visible, mountOnEnter: true, nodeRef: alertRef, onExit: onClose, timeout: 150, unmountOnExit: true }, function (state) {
-        var transitionClass = getTransitionClass(state);
-        return (React__default$1.createElement("div", __assign$1({ className: classNames$1(_className, transitionClass), role: "alert" }, rest, { ref: forkedRef }),
-            children,
-            dismissible && React__default$1.createElement(CCloseButton, { onClick: function () { return setVisible(false); } })));
-    }));
+    return (React__default$1.createElement(Transition$1, { in: _visible, mountOnEnter: true, nodeRef: alertRef, onExit: onClose, timeout: 150, unmountOnExit: true }, function (state) { return (React__default$1.createElement("div", __assign$1({ className: classNames$1('alert', variant === 'solid' ? "bg-".concat(color, " text-white") : "alert-".concat(color), {
+            'alert-dismissible fade': dismissible,
+            show: state === 'entered',
+        }, className), role: "alert" }, rest, { ref: forkedRef }),
+        children,
+        dismissible && React__default$1.createElement(CCloseButton, { onClick: function () { return setVisible(false); } }))); }));
 });
 CAlert.propTypes = {
     children: propTypesExports.node,
@@ -2760,8 +2740,7 @@ CAlert.displayName = 'CAlert';
 
 var CAlertHeading = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, _b = _a.component, Component = _b === void 0 ? 'h4' : _b, rest = __rest$1(_a, ["children", "className", "component"]);
-    var _className = classNames$1('alert-heading', className);
-    return (React__default$1.createElement(Component, __assign$1({ className: _className }, rest, { ref: ref }), children));
+    return (React__default$1.createElement(Component, __assign$1({ className: classNames$1('alert-heading', className) }, rest, { ref: ref }), children));
 });
 CAlertHeading.propTypes = {
     children: propTypesExports.node,
@@ -2772,9 +2751,11 @@ CAlertHeading.displayName = 'CAlertHeading';
 
 var CLink = forwardRef(function (_a, ref) {
     var children = _a.children, active = _a.active, className = _a.className, _b = _a.component, Component = _b === void 0 ? 'a' : _b, disabled = _a.disabled, rest = __rest$1(_a, ["children", "active", "className", "component", "disabled"]);
+    return (React__default$1.createElement(Component
     // TODO: remove duplicated classes ex. `active active` in `<CListGroupItem>`
-    var _className = classNames$1(className, { active: active, disabled: disabled });
-    return (React__default$1.createElement(Component, __assign$1({ className: _className }, (active && { 'aria-current': 'page' }), (Component === 'a' && disabled && { 'aria-disabled': true, tabIndex: -1 }), ((Component === 'a' || Component === 'button') && {
+    , __assign$1({ 
+        // TODO: remove duplicated classes ex. `active active` in `<CListGroupItem>`
+        className: classNames$1(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);
@@ -2792,8 +2773,7 @@ CLink.displayName = 'CLink';
 
 var CAlertLink = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest$1(_a, ["children", "className"]);
-    var _className = classNames$1('alert-link', className);
-    return (React__default$1.createElement(CLink, __assign$1({ className: _className }, rest, { ref: ref }), children));
+    return (React__default$1.createElement(CLink, __assign$1({ className: classNames$1('alert-link', className) }, rest, { ref: ref }), children));
 });
 CAlertLink.propTypes = {
     children: propTypesExports.node,
@@ -2804,13 +2784,12 @@ CAlertLink.displayName = 'CAlertLink';
 var CAvatar = forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, color = _a.color, shape = _a.shape, size = _a.size, src = _a.src, status = _a.status, textColor = _a.textColor, rest = __rest$1(_a, ["children", "className", "color", "shape", "size", "src", "status", "textColor"]);
-    var _className = classNames$1('avatar', (_b = {},
-        _b["bg-".concat(color)] = color,
-        _b["avatar-".concat(size)] = size,
-        _b["text-".concat(textColor)] = textColor,
-        _b), shape, className);
     var statusClassName = status && classNames$1('avatar-status', "bg-".concat(status));
-    return (React__default$1.createElement("div", __assign$1({ className: _className }, rest, { ref: ref }),
+    return (React__default$1.createElement("div", __assign$1({ className: classNames$1('avatar', (_b = {},
+            _b["bg-".concat(color)] = color,
+            _b["avatar-".concat(size)] = size,
+            _b["text-".concat(textColor)] = textColor,
+            _b), shape, className) }, rest, { ref: ref }),
         src ? React__default$1.createElement("img", { src: src, className: "avatar-img" }) : children,
         status && React__default$1.createElement("span", { className: statusClassName })));
 });
@@ -2830,14 +2809,9 @@ var CBackdrop = forwardRef(function (_a, ref) {
     var _b = _a.className, className = _b === void 0 ? 'modal-backdrop' : _b, visible = _a.visible, rest = __rest$1(_a, ["className", "visible"]);
     var backdropRef = useRef(null);
     var forkedRef = useForkedRef(ref, backdropRef);
-    var _className = classNames$1(className, 'fade');
-    var getTransitionClass = function (state) {
-        return state === 'entered' && 'show';
-    };
-    return (React__default$1.createElement(Transition$1, { in: visible, mountOnEnter: true, nodeRef: backdropRef, timeout: 150, unmountOnExit: true }, function (state) {
-        var transitionClass = getTransitionClass(state);
-        return (React__default$1.createElement("div", __assign$1({ className: classNames$1(_className, transitionClass) }, rest, { ref: forkedRef })));
-    }));
+    return (React__default$1.createElement(Transition$1, { in: visible, mountOnEnter: true, nodeRef: backdropRef, timeout: 150, unmountOnExit: true }, function (state) { return (React__default$1.createElement("div", __assign$1({ className: classNames$1(className, 'fade', {
+            show: state === 'entered',
+        }) }, rest, { ref: forkedRef }))); }));
 });
 CBackdrop.propTypes = {
     className: propTypesExports.string,
@@ -2848,17 +2822,16 @@ CBackdrop.displayName = 'CBackdrop';
 var CBadge = forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, color = _a.color, _c = _a.component, Component = _c === void 0 ? 'span' : _c, position = _a.position, shape = _a.shape, size = _a.size, textColor = _a.textColor, rest = __rest$1(_a, ["children", "className", "color", "component", "position", "shape", "size", "textColor"]);
-    var _className = classNames$1('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__default$1.createElement(Component, __assign$1({ className: _className }, rest, { ref: ref }), children));
+    return (React__default$1.createElement(Component, __assign$1({ className: classNames$1('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,
@@ -2874,9 +2847,8 @@ CBadge.displayName = 'CBadge';
 
 var CBreadcrumb = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest$1(_a, ["children", "className"]);
-    var _className = classNames$1('breadcrumb', className);
     return (React__default$1.createElement("nav", { "aria-label": "breadcrumb" },
-        React__default$1.createElement("ol", __assign$1({ className: _className }, rest, { ref: ref }), children)));
+        React__default$1.createElement("ol", __assign$1({ className: classNames$1('breadcrumb', className) }, rest, { ref: ref }), children)));
 });
 CBreadcrumb.propTypes = {
     children: propTypesExports.node,
@@ -2886,10 +2858,9 @@ CBreadcrumb.displayName = 'CBreadcrumb';
 
 var CBreadcrumbItem = forwardRef(function (_a, ref) {
     var children = _a.children, active = _a.active, className = _a.className, href = _a.href, rest = __rest$1(_a, ["children", "active", "className", "href"]);
-    var _className = classNames$1('breadcrumb-item', {
-        active: active,
-    }, className);
-    return (React__default$1.createElement("li", __assign$1({ className: _className }, (active && { 'aria-current': 'page' }), rest, { ref: ref }), href ? React__default$1.createElement(CLink, { href: href }, children) : children));
+    return (React__default$1.createElement("li", __assign$1({ className: classNames$1('breadcrumb-item', {
+            active: active,
+        }, className) }, (active && { 'aria-current': 'page' }), rest, { ref: ref }), href ? React__default$1.createElement(CLink, { href: href }, children) : children));
 });
 CBreadcrumbItem.propTypes = {
     active: propTypesExports.bool,
@@ -2902,8 +2873,7 @@ CBreadcrumbItem.displayName = 'CBreadcrumbItem';
 var CButton = forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, _c = _a.color, color = _c === void 0 ? 'primary' : _c, _d = _a.component, component = _d === void 0 ? 'button' : _d, shape = _a.shape, size = _a.size, _e = _a.type, type = _e === void 0 ? 'button' : _e, variant = _a.variant, rest = __rest$1(_a, ["children", "className", "color", "component", "shape", "size", "type", "variant"]);
-    var _className = classNames$1('btn', variant ? "btn-".concat(variant, "-").concat(color) : "btn-".concat(color), (_b = {}, _b["btn-".concat(size)] = size, _b), shape, className);
-    return (React__default$1.createElement(CLink, __assign$1({ component: rest.href ? 'a' : component, type: type, className: _className }, rest, { ref: ref }), children));
+    return (React__default$1.createElement(CLink, __assign$1({ component: rest.href ? 'a' : component, type: type, className: classNames$1('btn', variant ? "btn-".concat(variant, "-").concat(color) : "btn-".concat(color), (_b = {}, _b["btn-".concat(size)] = size, _b), shape, className) }, rest, { ref: ref }), children));
 });
 CButton.propTypes = {
     children: propTypesExports.node,
@@ -2919,8 +2889,7 @@ CButton.displayName = 'CButton';
 
 var CButtonToolbar = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest$1(_a, ["children", "className"]);
-    var _className = classNames$1('btn-toolbar', className);
-    return (React__default$1.createElement("div", __assign$1({ className: _className }, rest, { ref: ref }), children));
+    return (React__default$1.createElement("div", __assign$1({ className: classNames$1('btn-toolbar', className) }, rest, { ref: ref }), children));
 });
 CButtonToolbar.propTypes = {
     children: propTypesExports.node,
@@ -2931,8 +2900,7 @@ CButtonToolbar.displayName = 'CButtonToolbar';
 var CButtonGroup = forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, size = _a.size, vertical = _a.vertical, rest = __rest$1(_a, ["children", "className", "size", "vertical"]);
-    var _className = classNames$1(vertical ? 'btn-group-vertical' : 'btn-group', (_b = {}, _b["btn-group-".concat(size)] = size, _b), className);
-    return (React__default$1.createElement("div", __assign$1({ className: _className }, rest, { ref: ref }), children));
+    return (React__default$1.createElement("div", __assign$1({ className: classNames$1(vertical ? 'btn-group-vertical' : 'btn-group', (_b = {}, _b["btn-group-".concat(size)] = size, _b), className) }, rest, { ref: ref }), children));
 });
 CButtonGroup.propTypes = {
     children: propTypesExports.node,
@@ -2945,10 +2913,9 @@ CButtonGroup.displayName = 'CButtonGroup';
 var CCallout = forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, color = _a.color, rest = __rest$1(_a, ["children", "className", "color"]);
-    var _className = classNames$1('callout', (_b = {},
-        _b["callout-".concat(color)] = color,
-        _b), className);
-    return (React__default$1.createElement("div", __assign$1({ className: _className }, rest, { ref: ref }), children));
+    return (React__default$1.createElement("div", __assign$1({ className: classNames$1('callout', (_b = {},
+            _b["callout-".concat(color)] = color,
+            _b), className) }, rest, { ref: ref }), children));
 });
 CCallout.propTypes = {
     children: propTypesExports.node,
@@ -2960,11 +2927,10 @@ CCallout.displayName = 'CCallout';
 var CCard = forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, color = _a.color, textColor = _a.textColor, rest = __rest$1(_a, ["children", "className", "color", "textColor"]);
-    var _className = classNames$1('card', (_b = {},
-        _b["bg-".concat(color)] = color,
-        _b["text-".concat(textColor)] = textColor,
-        _b), className);
-    return (React__default$1.createElement("div", __assign$1({ className: _className }, rest, { ref: ref }), children));
+    return (React__default$1.createElement("div", __assign$1({ className: classNames$1('card', (_b = {},
+            _b["bg-".concat(color)] = color,
+            _b["text-".concat(textColor)] = textColor,
+            _b), className) }, rest, { ref: ref }), children));
 });
 CCard.propTypes = {
     children: propTypesExports.node,
@@ -2976,8 +2942,7 @@ CCard.displayName = 'CCard';
 
 var CCardBody = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest$1(_a, ["children", "className"]);
-    var _className = classNames$1('card-body', className);
-    return (React__default$1.createElement("div", __assign$1({ className: _className }, rest, { ref: ref }), children));
+    return (React__default$1.createElement("div", __assign$1({ className: classNames$1('card-body', className) }, rest, { ref: ref }), children));
 });
 CCardBody.propTypes = {
     children: propTypesExports.node,
@@ -2987,8 +2952,7 @@ CCardBody.displayName = 'CCardBody';
 
 var CCardFooter = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest$1(_a, ["children", "className"]);
-    var _className = classNames$1('card-footer', className);
-    return (React__default$1.createElement("div", __assign$1({ className: _className }, rest, { ref: ref }), children));
+    return (React__default$1.createElement("div", __assign$1({ className: classNames$1('card-footer', className) }, rest, { ref: ref }), children));
 });
 CCardFooter.propTypes = {
     children: propTypesExports.node,
@@ -2998,8 +2962,7 @@ CCardFooter.displayName = 'CCardFooter';
 
 var CCardGroup = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest$1(_a, ["children", "className"]);
-    var _className = classNames$1('card-group', className);
-    return (React__default$1.createElement("div", __assign$1({ className: _className }, rest, { ref: ref }), children));
+    return (React__default$1.createElement("div", __assign$1({ className: classNames$1('card-group', className) }, rest, { ref: ref }), children));
 });
 CCardGroup.propTypes = {
     children: propTypesExports.node,
@@ -3009,8 +2972,7 @@ CCardGroup.displayName = 'CCardGroup';
 
 var CCardHeader = forwardRef(function (_a, ref) {
     var children = _a.children, _b = _a.component, Component = _b === void 0 ? 'div' : _b, className = _a.className, rest = __rest$1(_a, ["children", "component", "className"]);
-    var _className = classNames$1('card-header', className);
-    return (React__default$1.createElement(Component, __assign$1({ className: _className }, rest, { ref: ref }), children));
+    return (React__default$1.createElement(Component, __assign$1({ className: classNames$1('card-header', className) }, rest, { ref: ref }), children));
 });
 CCardHeader.propTypes = {
     children: propTypesExports.node,
@@ -3021,8 +2983,7 @@ CCardHeader.displayName = 'CCardHeader';
 
 var CCardImage = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, _b = _a.component, Component = _b === void 0 ? 'img' : _b, orientation = _a.orientation, rest = __rest$1(_a, ["children", "className", "component", "orientation"]);
-    var _className = classNames$1(orientation ? "card-img-".concat(orientation) : 'card-img', className);
-    return (React__default$1.createElement(Component, __assign$1({ className: _className }, rest, { ref: ref }), children));
+    return (React__default$1.createElement(Component, __assign$1({ className: classNames$1(orientation ? "card-img-".concat(orientation) : 'card-img', className) }, rest, { ref: ref }), children));
 });
 CCardImage.propTypes = {
     children: propTypesExports.node,
@@ -3034,8 +2995,7 @@ CCardImage.displayName = 'CCardImage';
 
 var CCardImageOverlay = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest$1(_a, ["children", "className"]);
-    var _className = classNames$1('card-img-overlay', className);
-    return (React__default$1.createElement("div", __assign$1({ className: _className }, rest, { ref: ref }), children));
+    return (React__default$1.createElement("div", __assign$1({ className: classNames$1('card-img-overlay', className) }, rest, { ref: ref }), children));
 });
 CCardImageOverlay.propTypes = {
     children: propTypesExports.node,
@@ -3045,8 +3005,7 @@ CCardImageOverlay.displayName = 'CCardImageOverlay';
 
 var CCardLink = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest$1(_a, ["children", "className"]);
-    var _className = classNames$1('card-link', className);
-    return (React__default$1.createElement(CLink, __assign$1({ className: _className }, rest, { ref: ref }), children));
+    return (React__default$1.createElement(CLink, __assign$1({ className: classNames$1('card-link', className) }, rest, { ref: ref }), children));
 });
 CCardLink.propTypes = {
     children: propTypesExports.node,
@@ -3056,8 +3015,7 @@ CCardLink.displayName = 'CCardLink';
 
 var CCardSubtitle = forwardRef(function (_a, ref) {
     var children = _a.children, _b = _a.component, Component = _b === void 0 ? 'h6' : _b, className = _a.className, rest = __rest$1(_a, ["children", "component", "className"]);
-    var _className = classNames$1('card-subtitle', className);
-    return (React__default$1.createElement(Component, __assign$1({ className: _className }, rest, { ref: ref }), children));
+    return (React__default$1.createElement(Component, __assign$1({ className: classNames$1('card-subtitle', className) }, rest, { ref: ref }), children));
 });
 CCardSubtitle.propTypes = {
     children: propTypesExports.node,
@@ -3068,8 +3026,7 @@ CCardSubtitle.displayName = 'CCardSubtitle';
 
 var CCardText = forwardRef(function (_a, ref) {
     var children = _a.children, _b = _a.component, Component = _b === void 0 ? 'p' : _b, className = _a.className, rest = __rest$1(_a, ["children", "component", "className"]);
-    var _className = classNames$1('card-text', className);
-    return (React__default$1.createElement(Component, __assign$1({ className: _className }, rest, { ref: ref }), children));
+    return (React__default$1.createElement(Component, __assign$1({ className: classNames$1('card-text', className) }, rest, { ref: ref }), children));
 });
 CCardText.propTypes = {
     children: propTypesExports.node,
@@ -3080,8 +3037,7 @@ CCardText.displayName = 'CCardText';
 
 var CCardTitle = forwardRef(function (_a, ref) {
     var children = _a.children, _b = _a.component, Component = _b === void 0 ? 'h5' : _b, className = _a.className, rest = __rest$1(_a, ["children", "component", "className"]);
-    var _className = classNames$1('card-title', className);
-    return (React__default$1.createElement(Component, __assign$1({ className: _className }, rest, { ref: ref }), children));
+    return (React__default$1.createElement(Component, __assign$1({ className: classNames$1('card-title', className) }, rest, { ref: ref }), children));
 });
 CCardTitle.propTypes = {
     children: propTypesExports.node,
@@ -3142,7 +3098,6 @@ var CCarousel = forwardRef(function (_a, ref) {
             window.removeEventListener('scroll', handleScroll);
         };
     });
-    var _className = classNames$1('carousel slide', transition === 'crossfade' && 'carousel-fade', dark && 'carousel-dark', className);
     var cycle = function () {
         _pause();
         if (!wrap && active === itemsNumber - 1) {
@@ -3216,7 +3171,10 @@ var CCarousel = forwardRef(function (_a, ref) {
         var touchDown = e.touches[0].clientX;
         setTouchPosition(touchDown);
     };
-    return (React__default$1.createElement("div", __assign$1({ className: _className, onMouseEnter: _pause, onMouseLeave: cycle }, (touch && { onTouchStart: handleTouchStart, onTouchMove: handleTouchMove }), rest, { ref: forkedRef }),
+    return (React__default$1.createElement("div", __assign$1({ className: classNames$1('carousel slide', {
+            'carousel-dark': dark,
+            'carousel-fade': transition === 'crossfade',
+        }, className), onMouseEnter: _pause, onMouseLeave: cycle }, (touch && { onTouchStart: handleTouchStart, onTouchMove: handleTouchMove }), rest, { ref: forkedRef }),
         React__default$1.createElement(CCarouselContext.Provider, { value: {
                 setAnimating: setAnimating,
                 setCustomInterval: setCustomInterval,
@@ -3261,8 +3219,7 @@ CCarousel.displayName = 'CCarousel';
 
 var CCarouselCaption = forwardRef(function (_a, ref) {
     var className = _a.className, rest = __rest$1(_a, ["className"]);
-    var _className = classNames$1('carousel-caption', className);
-    return React__default$1.createElement("div", __assign$1({ className: _className }, rest, { ref: ref }));
+    return React__default$1.createElement("div", __assign$1({ className: classNames$1('carousel-caption', className) }, rest, { ref: ref }));
 });
 CCarouselCaption.propTypes = {
     className: propTypesExports.string,
@@ -3337,8 +3294,7 @@ var CCarouselItem = forwardRef(function (_a, ref) {
             });
         };
     });
-    var _className = classNames$1('carousel-item', activeClassName, directionClassName, orderClassName, className);
-    return (React__default$1.createElement("div", __assign$1({ className: _className, ref: forkedRef }, rest), children));
+    return (React__default$1.createElement("div", __assign$1({ className: classNames$1('carousel-item', activeClassName, directionClassName, orderClassName, className), ref: forkedRef }, rest), children));
 });
 CCarouselItem.propTypes = {
     active: propTypesExports.bool,
@@ -3349,6 +3305,16 @@ CCarouselItem.propTypes = {
 };
 CCarouselItem.displayName = 'CCarouselItem';
 
+var CConditionalPortal = function (_a) {
+    var children = _a.children, portal = _a.portal;
+    return typeof window !== 'undefined' && portal ? (createPortal(children, document.body)) : (React__default$1.createElement(React__default$1.Fragment, null, children));
+};
+CConditionalPortal.propTypes = {
+    children: propTypesExports.node,
+    portal: propTypesExports.bool.isRequired,
+};
+CConditionalPortal.displayName = 'CConditionalPortal';
+
 function toInteger(dirtyNumber) {
   if (dirtyNumber === null || dirtyNumber === true || dirtyNumber === false) {
     return NaN;
@@ -6806,7 +6772,7 @@ lib.withOrientationChange = withOrientationChange;
 
 var createGroupsInArray = function (arr, numberOfGroups) {
     var perGroup = Math.ceil(arr.length / numberOfGroups);
-    return new Array(numberOfGroups)
+    return Array.from({ length: numberOfGroups })
         .fill('')
         .map(function (_, i) { return arr.slice(i * perGroup, (i + 1) * perGroup); });
 };
@@ -6902,15 +6868,11 @@ var isDateDisabled = function (date, min, max, dates) {
     var disabled;
     if (dates) {
         dates.forEach(function (_date) {
-            if (Array.isArray(_date)) {
-                if (isDateInRange(date, _date[0], _date[1])) {
-                    disabled = true;
-                }
+            if (Array.isArray(_date) && isDateInRange(date, _date[0], _date[1])) {
+                disabled = true;
             }
-            if (_date instanceof Date) {
-                if (isSameDateAs(date, _date)) {
-                    disabled = true;
-                }
+            if (_date instanceof Date && isSameDateAs(date, _date)) {
+                disabled = true;
             }
         });
     }
@@ -7255,8 +7217,7 @@ CCalendar.displayName = 'CCalendar';
 
 var CForm = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, validated = _a.validated, rest = __rest$1(_a, ["children", "className", "validated"]);
-    var _className = classNames$1({ 'was-validated': validated }, className);
-    return (React__default$1.createElement("form", __assign$1({ className: _className }, rest, { ref: ref }), children));
+    return (React__default$1.createElement("form", __assign$1({ className: classNames$1({ 'was-validated': validated }, className) || undefined }, rest, { ref: ref }), children));
 });
 CForm.propTypes = {
     children: propTypesExports.node,
@@ -7268,11 +7229,10 @@ CForm.displayName = 'CForm';
 var CFormFeedback = forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, _c = _a.component, Component = _c === void 0 ? 'div' : _c, invalid = _a.invalid, tooltip = _a.tooltip, valid = _a.valid, rest = __rest$1(_a, ["children", "className", "component", "invalid", "tooltip", "valid"]);
-    var _className = classNames$1((_b = {},
-        _b["invalid-".concat(tooltip ? 'tooltip' : 'feedback')] = invalid,
-        _b["valid-".concat(tooltip ? 'tooltip' : 'feedback')] = valid,
-        _b), className);
-    return (React__default$1.createElement(Component, __assign$1({ className: _className }, rest, { ref: ref }), children));
+    return (React__default$1.createElement(Component, __assign$1({ className: classNames$1((_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,
@@ -7304,8 +7264,7 @@ CFormControlValidation.displayName = 'CFormControlValidation';
 
 var CFormLabel = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, customClassName = _a.customClassName, rest = __rest$1(_a, ["children", "className", "customClassName"]);
-    var _className = customClassName ? customClassName : classNames$1('form-label', className);
-    return (React__default$1.createElement("label", __assign$1({ className: _className }, rest, { ref: ref }), children));
+    return (React__default$1.createElement("label", __assign$1({ className: customClassName !== null && customClassName !== void 0 ? customClassName : classNames$1('form-label', className) }, rest, { ref: ref }), children));
 });
 CFormLabel.propTypes = {
     children: propTypesExports.node,
@@ -7315,8 +7274,7 @@ CFormLabel.propTypes = {
 CFormLabel.displayName = 'CFormLabel';
 
 var CFormCheck = 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$1(_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$1(_a, ["className", "button", "feedback", "feedbackInvalid", "feedbackValid", "floatingLabel", "tooltipFeedback", "hitArea", "id", "indeterminate", "inline", "invalid", "label", "reverse", "type", "valid"]);
     var inputRef = useRef(null);
     var forkedRef = useForkedRef(ref, inputRef);
     useEffect(function () {
@@ -7324,47 +7282,51 @@ var CFormCheck = forwardRef(function (_a, ref) {
             inputRef.current.indeterminate = indeterminate;
         }
     }, [indeterminate]);
-    var _className = classNames$1('form-check', {
-        'form-check-inline': inline,
-        'is-invalid': invalid,
-        'is-valid': valid,
-    }, className);
-    var inputClassName = classNames$1(button ? 'btn-check' : 'form-check-input', {
-        'is-invalid': invalid,
-        'is-valid': valid,
-        'me-2': hitArea,
-    });
-    var labelClassName = classNames$1(button
-        ? classNames$1('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__default$1.createElement("input", __assign$1({ type: type, className: inputClassName, id: id }, rest, { ref: forkedRef }));
+    var FormControl = function () { return (React__default$1.createElement("input", __assign$1({ type: type, className: classNames$1(button ? 'btn-check' : 'form-check-input', {
+            'is-invalid': invalid,
+            'is-valid': valid,
+            'me-2': hitArea,
+        }), id: id }, rest, { ref: forkedRef }))); };
+    var FormValidation = function () { return (React__default$1.createElement(CFormControlValidation, { describedby: rest['aria-describedby'], feedback: feedback, feedbackInvalid: feedbackInvalid, feedbackValid: feedbackValid, floatingLabel: floatingLabel, invalid: invalid, tooltipFeedback: tooltipFeedback, valid: valid })); };
+    var FormLabel = function () {
+        var _a;
+        return (React__default$1.createElement(CFormLabel, __assign$1({ customClassName: classNames$1(button
+                ? classNames$1('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__default$1.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__default$1.createElement(CFormLabel, __assign$1({ customClassName: labelClassName }, (id && { htmlFor: id })), label));
+    var FormCheck = function () {
+        if (button) {
+            return (React__default$1.createElement(React__default$1.Fragment, null,
+                React__default$1.createElement(FormControl, null),
+                label && React__default$1.createElement(FormLabel, null),
+                React__default$1.createElement(FormValidation, null)));
+        }
+        if (label) {
+            return hitArea ? (React__default$1.createElement(React__default$1.Fragment, null,
+                React__default$1.createElement(FormControl, null),
+                React__default$1.createElement(CFormLabel, __assign$1({ customClassName: classNames$1('form-check-label stretched-link', className) }, (id && { htmlFor: id })), label),
+                React__default$1.createElement(FormValidation, null))) : (React__default$1.createElement("div", { className: classNames$1('form-check', {
+                    'form-check-inline': inline,
+                    'form-check-reverse': reverse,
+                    'is-invalid': invalid,
+                    'is-valid': valid,
+                }, className) },
+                React__default$1.createElement(FormControl, null),
+                React__default$1.createElement(FormLabel, null),
+                React__default$1.createElement(FormValidation, null)));
+        }
+        return React__default$1.createElement(FormControl, null);
     };
-    return button ? (React__default$1.createElement(React__default$1.Fragment, null,
-        formControl(),
-        label && formLabel(),
-        formValidation())) : label ? (hitArea ? (React__default$1.createElement(React__default$1.Fragment, null,
-        React__default$1.createElement(CFormLabel, __assign$1({ customClassName: className }, (id && { htmlFor: id })),
-            formControl(),
-            label),
-        formValidation())) : (React__default$1.createElement("div", { className: _className },
-        formControl(),
-        formLabel(),
-        formValidation()))) : (formControl());
-});
-CFormCheck.propTypes = __assign$1({ 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);
+    return React__default$1.createElement(FormCheck, null);
+});
+CFormCheck.propTypes = __assign$1({ 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 = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest$1(_a, ["children", "className"]);
-    var _className = classNames$1('form-floating', className);
-    return (React__default$1.createElement("div", __assign$1({ className: _className }, rest, { ref: ref }), children));
+    return (React__default$1.createElement("div", __assign$1({ className: classNames$1('form-floating', className) }, rest, { ref: ref }), children));
 });
 CFormFloating.propTypes = {
     children: propTypesExports.node,
@@ -7374,8 +7336,7 @@ CFormFloating.displayName = 'CFormFloating';
 
 var CFormText = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, _b = _a.component, Component = _b === void 0 ? 'div' : _b, rest = __rest$1(_a, ["children", "className", "component"]);
-    var _className = classNames$1('form-text', className);
-    return (React__default$1.createElement(Component, __assign$1({ className: _className }, rest, { ref: ref }), children));
+    return (React__default$1.createElement(Component, __assign$1({ className: classNames$1('form-text', className) }, rest, { ref: ref }), children));
 });
 CFormText.propTypes = {
     children: propTypesExports.node,
@@ -7386,16 +7347,16 @@ CFormText.displayName = 'CFormText';
 
 var CFormControlWrapper = function (_a) {
     var children = _a.children, describedby = _a.describedby, feedback = _a.feedback, feedbackInvalid = _a.feedbackInvalid, feedbackValid = _a.feedbackValid, floatingClassName = _a.floatingClassName, floatingLabel = _a.floatingLabel, id = _a.id, invalid = _a.invalid, label = _a.label, text = _a.text, tooltipFeedback = _a.tooltipFeedback, valid = _a.valid;
-    var formControlValidation = function () { return (React__default$1.createElement(CFormControlValidation, { describedby: describedby, feedback: feedback, feedbackInvalid: feedbackInvalid, feedbackValid: feedbackValid, floatingLabel: floatingLabel, invalid: invalid, tooltipFeedback: tooltipFeedback, valid: valid })); };
+    var FormControlValidation = function () { return (React__default$1.createElement(CFormControlValidation, { describedby: describedby, feedback: feedback, feedbackInvalid: feedbackInvalid, feedbackValid: feedbackValid, floatingLabel: floatingLabel, invalid: invalid, tooltipFeedback: tooltipFeedback, valid: valid })); };
     return floatingLabel ? (React__default$1.createElement(CFormFloating, { className: floatingClassName },
         children,
         React__default$1.createElement(CFormLabel, { htmlFor: id }, label || floatingLabel),
         text && React__default$1.createElement(CFormText, { id: describedby }, text),
-        formControlValidation())) : (React__default$1.createElement(React__default$1.Fragment, null,
+        React__default$1.createElement(FormControlValidation, null))) : (React__default$1.createElement(React__default$1.Fragment, null,
         label && React__default$1.createElement(CFormLabel, { htmlFor: id }, label),
         children,
         text && React__default$1.createElement(CFormText, { id: describedby }, text),
-        formControlValidation()));
+        React__default$1.createElement(FormControlValidation, null)));
 };
 CFormControlWrapper.propTypes = __assign$1({ 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';
@@ -7408,24 +7369,22 @@ var CFormInput = forwardRef(function (_a, ref) {
         var timeOutId = setTimeout(function () { return value && onChange && onChange(value); }, typeof delay === 'number' ? delay : 500);
         return function () { return clearTimeout(timeOutId); };
     }, [value]);
-    var _className = classNames$1(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__default$1.createElement(CFormControlWrapper, { describedby: rest['aria-describedby'], feedback: feedback, feedbackInvalid: feedbackInvalid, feedbackValid: feedbackValid, floatingClassName: floatingClassName, floatingLabel: floatingLabel, id: id, invalid: invalid, label: label, text: text, tooltipFeedback: tooltipFeedback, valid: valid },
-        React__default$1.createElement("input", __assign$1({ className: _className, id: id, type: type, onChange: function (event) { return (delay ? setValue(event) : onChange && onChange(event)); } }, rest, { ref: ref }), children)));
+        React__default$1.createElement("input", __assign$1({ className: classNames$1(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$1({ 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 = forwardRef(function (_a, ref) {
     var className = _a.className, label = _a.label, rest = __rest$1(_a, ["className", "label"]);
-    var _className = classNames$1('form-range', className);
     return (React__default$1.createElement(React__default$1.Fragment, null,
         label && React__default$1.createElement(CFormLabel, { htmlFor: rest.id }, label),
-        React__default$1.createElement("input", __assign$1({ type: "range", className: _className }, rest, { ref: ref }))));
+        React__default$1.createElement("input", __assign$1({ type: "range", className: classNames$1('form-range', className) }, rest, { ref: ref }))));
 });
 CFormRange.propTypes = {
     className: propTypesExports.string,
@@ -7436,13 +7395,12 @@ CFormRange.displayName = 'CFormRange';
 var CFormSelect = forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, feedback = _a.feedback, feedbackInvalid = _a.feedbackInvalid, feedbackValid = _a.feedbackValid, floatingClassName = _a.floatingClassName, floatingLabel = _a.floatingLabel, htmlSize = _a.htmlSize, id = _a.id, invalid = _a.invalid, label = _a.label, options = _a.options, size = _a.size, text = _a.text, tooltipFeedback = _a.tooltipFeedback, valid = _a.valid, rest = __rest$1(_a, ["children", "className", "feedback", "feedbackInvalid", "feedbackValid", "floatingClassName", "floatingLabel", "htmlSize", "id", "invalid", "label", "options", "size", "text", "tooltipFeedback", "valid"]);
-    var _className = classNames$1('form-select', (_b = {},
-        _b["form-select-".concat(size)] = size,
-        _b['is-invalid'] = invalid,
-        _b['is-valid'] = valid,
-        _b), className);
     return (React__default$1.createElement(CFormControlWrapper, { describedby: rest['aria-describedby'], feedback: feedback, feedbackInvalid: feedbackInvalid, feedbackValid: feedbackValid, floatingClassName: floatingClassName, floatingLabel: floatingLabel, id: id, invalid: invalid, label: label, text: text, tooltipFeedback: tooltipFeedback, valid: valid },
-        React__default$1.createElement("select", __assign$1({ id: id, className: _className, size: htmlSize }, rest, { ref: ref }), options
+        React__default$1.createElement("select", __assign$1({ id: id, className: classNames$1('form-select', (_b = {},
+                _b["form-select-".concat(size)] = size,
+                _b['is-invalid'] = invalid,
+                _b['is-valid'] = valid,
+                _b), className), size: htmlSize }, rest, { ref: ref }), options
             ? options.map(function (option, index) {
                 return (React__default$1.createElement("option", __assign$1({}, (typeof option === 'object' &&
                     option.disabled && { disabled: option.disabled }), (typeof option === 'object' && option.value && { value: option.value }), { key: index }), typeof option === 'string' ? option : option.label));
@@ -7454,26 +7412,26 @@ CFormSelect.displayName = 'CFormSelect';
 
 var CFormSwitch = 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$1(_a, ["className", "id", "invalid", "label", "size", "type", "valid"]);
-    var _className = classNames$1('form-check form-switch', (_b = {},
-        _b["form-switch-".concat(size)] = size,
-        _b['is-invalid'] = invalid,
-        _b['is-valid'] = valid,
-        _b), className);
-    var inputClassName = classNames$1('form-check-input', {
-        'is-invalid': invalid,
-        'is-valid': valid,
-    });
-    var labelClassName = classNames$1('form-check-label');
-    return (React__default$1.createElement("div", { className: _className },
-        React__default$1.createElement("input", __assign$1({ type: type, className: inputClassName, id: id }, rest, { ref: ref })),
-        label && (React__default$1.createElement(CFormLabel, __assign$1({ 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$1(_a, ["className", "id", "invalid", "label", "reverse", "size", "type", "valid"]);
+    return (React__default$1.createElement("div", { className: classNames$1('form-check form-switch', (_b = {
+                'form-check-reverse': reverse
+            },
+            _b["form-switch-".concat(size)] = size,
+            _b['is-invalid'] = invalid,
+            _b['is-valid'] = valid,
+            _b), className) },
+        React__default$1.createElement("input", __assign$1({ type: type, className: classNames$1('form-check-input', {
+                'is-invalid': invalid,
+                'is-valid': valid,
+            }), id: id }, rest, { ref: ref })),
+        label && (React__default$1.createElement(CFormLabel, __assign$1({ 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,
@@ -7482,12 +7440,11 @@ CFormSwitch.displayName = 'CFormSwitch';
 
 var CFormTextarea = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, feedback = _a.feedback, feedbackInvalid = _a.feedbackInvalid, feedbackValid = _a.feedbackValid, floatingClassName = _a.floatingClassName, floatingLabel = _a.floatingLabel, id = _a.id, invalid = _a.invalid, label = _a.label, plainText = _a.plainText, text = _a.text, tooltipFeedback = _a.tooltipFeedback, valid = _a.valid, rest = __rest$1(_a, ["children", "className", "feedback", "feedbackInvalid", "feedbackValid", "floatingClassName", "floatingLabel", "id", "invalid", "label", "plainText", "text", "tooltipFeedback", "valid"]);
-    var _className = classNames$1(plainText ? 'form-control-plaintext' : 'form-control', {
-        'is-invalid': invalid,
-        'is-valid': valid,
-    }, className);
     return (React__default$1.createElement(CFormControlWrapper, { describedby: rest['aria-describedby'], feedback: feedback, feedbackInvalid: feedbackInvalid, feedbackValid: feedbackValid, floatingClassName: floatingClassName, floatingLabel: floatingLabel, id: id, invalid: invalid, label: label, text: text, tooltipFeedback: tooltipFeedback, valid: valid },
-        React__default$1.createElement("textarea", __assign$1({ className: _className, id: id }, rest, { ref: ref }), children)));
+        React__default$1.createElement("textarea", __assign$1({ className: classNames$1(plainText ? 'form-control-plaintext' : 'form-control', {
+                'is-invalid': invalid,
+                'is-valid': valid,
+            }, className), id: id }, rest, { ref: ref }), children)));
 });
 CFormTextarea.propTypes = __assign$1({ className: propTypesExports.string, id: propTypesExports.string, plainText: propTypesExports.bool }, CFormControlWrapper.propTypes);
 CFormTextarea.displayName = 'CFormTextarea';
@@ -7495,10 +7452,9 @@ CFormTextarea.displayName = 'CFormTextarea';
 var CInputGroup = forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, size = _a.size, rest = __rest$1(_a, ["children", "className", "size"]);
-    var _className = classNames$1('input-group', (_b = {},
-        _b["input-group-".concat(size)] = size,
-        _b), className);
-    return (React__default$1.createElement("div", __assign$1({ className: _className }, rest, { ref: ref }), children));
+    return (React__default$1.createElement("div", __assign$1({ className: classNames$1('input-group', (_b = {},
+            _b["input-group-".concat(size)] = size,
+            _b), className) }, rest, { ref: ref }), children));
 });
 CInputGroup.propTypes = {
     children: propTypesExports.node,
@@ -7509,8 +7465,7 @@ CInputGroup.displayName = 'CInputGroup';
 
 var CInputGroupText = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, _b = _a.component, Component = _b === void 0 ? 'span' : _b, rest = __rest$1(_a, ["children", "className", "component"]);
-    var _className = classNames$1('input-group-text', className);
-    return (React__default$1.createElement(Component, __assign$1({ className: _className }, rest, { ref: ref }), children));
+    return (React__default$1.createElement(Component, __assign$1({ className: classNames$1('input-group-text', className) }, rest, { ref: ref }), children));
 });
 CInputGroupText.propTypes = {
     children: propTypesExports.node,
@@ -9961,13 +9916,17 @@ function Reference(_ref) {
   });
 }
 
+var PopperManagerWrapper = function (_a) {
+    var children = _a.children, popper = _a.popper;
+    return popper ? React__default$1.createElement(Manager, null, children) : React__default$1.createElement(React__default$1.Fragment, null, children);
+};
 var CDropdownContext = createContext({});
 var CDropdown = 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$1(_a, ["children", "alignment", "autoClose", "className", "dark", "direction", "onHide", "onShow", "placement", "popper", "variant", "component", "visible"]);
-    var _h = useState(visible), _visible = _h[0], setVisible = _h[1];
     var dropdownRef = useRef(null);
     var dropdownToggleRef = useRef(null);
     var forkedRef = useForkedRef(ref, dropdownRef);
+    var _h = 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') {
@@ -9985,13 +9944,6 @@ var CDropdown = forwardRef(function (_a, ref) {
         visible: _visible,
         setVisible: setVisible,
     };
-    var _className = classNames$1(variant === 'nav-item' ? 'nav-item dropdown' : variant, {
-        show: _visible,
-    }, direction === 'center'
-        ? 'dropdown-center'
-        : direction === 'dropup-center'
-            ? 'dropup dropup-center'
-            : direction, className);
     useEffect(function () {
         setVisible(visible);
     }, [visible]);
@@ -9999,11 +9951,13 @@ var CDropdown = forwardRef(function (_a, ref) {
         _visible && onShow && onShow();
         !_visible && onHide && onHide();
     }, [_visible]);
-    var dropdownContent = function () {
-        return variant === 'input-group' ? (React__default$1.createElement(React__default$1.Fragment, null, children)) : (React__default$1.createElement(Component, __assign$1({ className: _className }, rest, { ref: forkedRef }), children));
-    };
-    return popper ? (React__default$1.createElement(CDropdownContext.Provider, { value: contextValues },
-        React__default$1.createElement(Manager, null, dropdownContent()))) : (React__default$1.createElement(CDropdownContext.Provider, { value: contextValues }, dropdownContent()));
+    return (React__default$1.createElement(CDropdownContext.Provider, { value: contextValues },
+        React__default$1.createElement(PopperManagerWrapper, { popper: popper }, variant === 'input-group' ? (React__default$1.createElement(React__default$1.Fragment, null, children)) : (React__default$1.createElement(Component, __assign$1({ className: classNames$1(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)))));
 });
 var alignmentDirection = propTypesExports.oneOf(['start', 'end']);
 CDropdown.propTypes = {
@@ -10098,20 +10052,17 @@ var CDropdownMenu = function (_a) {
         }
         return classNames;
     };
-    var _className = classNames$1('dropdown-menu', {
-        'dropdown-menu-dark': dark,
-        show: visible,
-    }, alignment && alignmentClassNames(alignment), className);
-    var dropdownMenuComponent = function (style, ref) {
-        return (React__default$1.createElement(Component, __assign$1({ className: _className, ref: ref, style: style, role: "menu", "aria-hidden": !visible }, (!popper && { 'data-coreui-popper': 'static' }), rest), Component === 'ul'
-            ? React__default$1.Children.map(children, function (child, index) {
-                if (React__default$1.isValidElement(child)) {
-                    return React__default$1.createElement("li", { key: index }, React__default$1.cloneElement(child));
-                }
-                return;
-            })
-            : children));
-    };
+    var dropdownMenuComponent = function (style, ref) { return (React__default$1.createElement(Component, __assign$1({ className: classNames$1('dropdown-menu', {
+            'dropdown-menu-dark': dark,
+            show: visible,
+        }, alignment && alignmentClassNames(alignment), className), ref: ref, style: style, role: "menu", "aria-hidden": !visible }, (!popper && { 'data-coreui-popper': 'static' }), rest), Component === 'ul'
+        ? React__default$1.Children.map(children, function (child, index) {
+            if (React__default$1.isValidElement(child)) {
+                return React__default$1.createElement("li", { key: index }, React__default$1.cloneElement(child));
+            }
+            return;
+        })
+        : children)); };
     return popper && visible ? (React__default$1.createElement(Popper, { innerRef: dropdownMenuRef, placement: _placement }, function (_a) {
         var ref = _a.ref, style = _a.style;
         return dropdownMenuComponent(style, ref);
@@ -10127,11 +10078,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$1(_a, ["children", "caret", "custom", "className", "split", "trigger"]);
     var _d = useContext(CDropdownContext), dropdownToggleRef = _d.dropdownToggleRef, popper = _d.popper, variant = _d.variant, visible = _d.visible, setVisible = _d.setVisible;
-    var _className = classNames$1({
-        'dropdown-toggle': caret,
-        'dropdown-toggle-split': split,
-        'nav-link': variant === 'nav-item',
-    }, className);
     var triggers = __assign$1(__assign$1({}, ((trigger === 'click' || trigger.includes('click')) && {
         onClick: function (event) {
             event.preventDefault();
@@ -10141,11 +10087,21 @@ var CDropdownToggle = function (_a) {
         onFocus: function () { return setVisible(true); },
         onBlur: function () { return setVisible(false); },
     }));
-    var togglerProps = __assign$1(__assign$1({ className: _className, 'aria-expanded': visible }, (!rest.disabled && __assign$1({}, triggers))), triggers);
+    var togglerProps = __assign$1({ className: classNames$1({
+            'dropdown-toggle': caret,
+            'dropdown-toggle-split': split,
+            'nav-link': variant === 'nav-item',
+        }, className), 'aria-expanded': visible }, (!rest.disabled && __assign$1({}, 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__default$1.isValidElement(children) ? (React__default$1.createElement(React__default$1.Fragment, null, React__default$1.cloneElement(children, __assign$1(__assign$1({ 'aria-expanded': visible }, (!rest.disabled && __assign$1({}, triggers))), { ref: useForkedRef(ref, dropdownToggleRef) })))) : variant === 'nav-item' ? (React__default$1.createElement("a", __assign$1({ href: "#" }, togglerProps, { ref: useForkedRef(ref, dropdownToggleRef) }), children)) : (React__default$1.createElement(CButton, __assign$1({ type: "button" }, togglerProps, { tabIndex: 0 }, rest, { ref: useForkedRef(ref, dropdownToggleRef) }),
+        if (custom && React__default$1.isValidElement(children)) {
+            return (React__default$1.createElement(React__default$1.Fragment, null, React__default$1.cloneElement(children, __assign$1(__assign$1({ 'aria-expanded': visible }, (!rest.disabled && __assign$1({}, triggers))), { ref: useForkedRef(ref, dropdownToggleRef) }))));
+        }
+        if (variant === 'nav-item') {
+            return (React__default$1.createElement("a", __assign$1({ href: "#" }, togglerProps, { ref: useForkedRef(ref, dropdownToggleRef) }), children));
+        }
+        return (React__default$1.createElement(CButton, __assign$1({ type: "button" }, togglerProps, { tabIndex: 0 }, rest, { ref: useForkedRef(ref, dropdownToggleRef) }),
             children,
             split && React__default$1.createElement("span", { className: "visually-hidden" }, "Toggle Dropdown")));
     };
@@ -10178,12 +10134,12 @@ var CPicker = forwardRef(function (_a, ref) {
                 onConfirm && onConfirm();
                 setVisible(false);
             } }, confirmButton)))); };
-    var _className = classNames$1('picker', className);
     switch (container) {
-        case 'inline':
-            return React__default$1.createElement("div", { className: _className }, children);
-        default:
-            return (React__default$1.createElement(CDropdown, __assign$1({ autoClose: "outside", className: _className, onHide: function () {
+        case 'inline': {
+            return React__default$1.createElement("div", { className: classNames$1('picker', className) }, children);
+        }
+        default: {
+            return (React__default$1.createElement(CDropdown, __assign$1({ autoClose: "outside", className: classNames$1('picker', className), onHide: function () {
                     setVisible(false);
                     onHide && onHide();
                 }, onShow: function () {
@@ -10194,6 +10150,7 @@ var CPicker = forwardRef(function (_a, ref) {
                 React__default$1.createElement(CDropdownMenu, { component: "div" },
                     children,
                     footer && (React__default$1.createElement("div", { className: "picker-footer" }, typeof footer === 'boolean' ? Footer() : footer)))));
+        }
     }
 });
 CPicker.displayName = 'CPicker';
@@ -10308,7 +10265,7 @@ var isValidTime = function (time) {
 
 var CTimePicker = forwardRef(function (_a, ref) {
     var _b;
-    var _c = _a.ampm, ampm = _c === void 0 ? 'auto' : _c, className = _a.className, _d = _a.cleaner, cleaner = _d === void 0 ? true : _d, _e = _a.container, container = _e === void 0 ? 'dropdown' : _e, disabled = _a.disabled, feedback = _a.feedback, feedbackInvalid = _a.feedbackInvalid, feedbackValid = _a.feedbackValid, _f = _a.footer, footer = _f === void 0 ? true : _f, id = _a.id, _g = _a.indicator, indicator = _g === void 0 ? true : _g, inputReadOnly = _a.inputReadOnly, invalid = _a.invalid, label = _a.label, _h = _a.locale, locale = _h === void 0 ? 'default' : _h, onTimeChange = _a.onTimeChange, onHide = _a.onHide, onShow = _a.onShow, _j = _a.placeholder, placeholder = _j === void 0 ? 'Select time' : _j, _k = _a.seconds, seconds = _k === void 0 ? true : _k, size = _a.size, text = _a.text, time = _a.time, tooltipFeedback = _a.tooltipFeedback, valid = _a.valid, _l = _a.variant, variant = _l === void 0 ? 'roll' : _l, visible = _a.visible, rest = __rest$1(_a, ["ampm", "className", "cleaner", "container", "disabled", "feedback", "feedbackInvalid", "feedbackValid", "footer", "id", "indicator", "inputReadOnly", "invalid", "label", "locale", "onTimeChange", "onHide", "onShow", "placeholder", "seconds", "size", "text", "time", "tooltipFeedback", "valid", "variant", "visible"]);
+    var _c = _a.ampm, ampm = _c === void 0 ? 'auto' : _c, className = _a.className, _d = _a.cleaner, cleaner = _d === void 0 ? true : _d, _e = _a.container, container = _e === void 0 ? 'dropdown' : _e, disabled = _a.disabled, feedback = _a.feedback, feedbackInvalid = _a.feedbackInvalid, feedbackValid = _a.feedbackValid, _f = _a.footer, footer = _f === void 0 ? true : _f, id = _a.id, _g = _a.indicator, indicator = _g === void 0 ? true : _g, inputReadOnly = _a.inputReadOnly, invalid = _a.invalid, label = _a.label, _h = _a.locale, locale = _h === void 0 ? 'default' : _h, onTimeChange = _a.onTimeChange, onHide = _a.onHide, onShow = _a.onShow, _j = _a.placeholder, placeholder = _j === void 0 ? 'Select time' : _j, required = _a.required, _k = _a.seconds, seconds = _k === void 0 ? true : _k, size = _a.size, text = _a.text, time = _a.time, tooltipFeedback = _a.tooltipFeedback, valid = _a.valid, _l = _a.variant, variant = _l === void 0 ? 'roll' : _l, visible = _a.visible, rest = __rest$1(_a, ["ampm", "className", "cleaner", "container", "disabled", "feedback", "feedbackInvalid", "feedbackValid", "footer", "id", "indicator", "inputReadOnly", "invalid", "label", "locale", "onTimeChange", "onHide", "onShow", "placeholder", "required", "seconds", "size", "text", "time", "tooltipFeedback", "valid", "variant", "visible"]);
     var inputRef = useRef(null);
     var _m = useState(convertTimeToDate(time)), date = _m[0], setDate = _m[1];
     var _o = useState(null), initialDate = _o[0], setInitialDate = _o[1];
@@ -10349,17 +10306,17 @@ var CTimePicker = forwardRef(function (_a, ref) {
         }
         if (set === 'hours') {
             if (localizedTimePartials && localizedTimePartials.hour12) {
-                _date.setHours(convert12hTo24h(_ampm, parseInt(value)));
+                _date.setHours(convert12hTo24h(_ampm, Number.parseInt(value)));
             }
             else {
-                _date.setHours(parseInt(value));
+                _date.setHours(Number.parseInt(value));
             }
         }
         if (set === 'minutes') {
-            _date.setMinutes(parseInt(value));
+            _date.setMinutes(Number.parseInt(value));
         }
         if (set === 'seconds') {
-            _date.setSeconds(parseInt(value));
+            _date.setSeconds(Number.parseInt(value));
         }
         setDate(new Date(_date));
         onTimeChange && onTimeChange(_date.toTimeString(), _date.toLocaleTimeString(), _date);
@@ -10367,7 +10324,7 @@ var CTimePicker = forwardRef(function (_a, ref) {
     var InputGroup = function () { return (React__default$1.createElement(CInputGroup, { className: "picker-input-group", size: size },
         React__default$1.createElement(CFormInput, { autoComplete: "off", delay: true, disabled: disabled, onChange: function (event) {
                 return isValidTime(event.target.value) && setDate(convertTimeToDate(event.target.value));
-            }, placeholder: placeholder, readOnly: inputReadOnly, ref: inputRef }),
+            }, placeholder: placeholder, readOnly: inputReadOnly, required: required, ref: inputRef }),
         (indicator || cleaner) && (React__default$1.createElement(CInputGroupText, null,
             indicator && (React__default$1.createElement("span", { className: "picker-input-group-indicator" }, typeof indicator === 'boolean' ? (React__default$1.createElement("span", { className: "picker-input-group-icon time-picker-input-icon" })) : (indicator))),
             cleaner && date && (React__default$1.createElement("span", { className: "picker-input-group-cleaner", role: "button", onClick: function (event) { return handleClear(event); } }, typeof cleaner === 'boolean' ? (React__default$1.createElement("span", { className: "picker-input-group-icon time-picker-cleaner-icon" })) : (cleaner))))))); };
@@ -10420,12 +10377,11 @@ var CTimePicker = forwardRef(function (_a, ref) {
                 { value: 'am', label: 'AM' },
                 { value: 'pm', label: 'PM' },
             ], onClick: function (value) { return handleTimeChange('toggle', value); }, selected: _ampm })))); };
-    var _className = classNames$1('time-picker', {
-        'is-invalid': invalid,
-        'is-valid': valid,
-    }, className);
     return (React__default$1.createElement(CFormControlWrapper, { describedby: rest['aria-describedby'], feedback: feedback, feedbackInvalid: feedbackInvalid, feedbackValid: feedbackValid, id: id, invalid: invalid, label: label, text: text, tooltipFeedback: tooltipFeedback, valid: valid },
-        React__default$1.createElement(CPicker, __assign$1({ className: _className, container: container, disabled: disabled, footer: footer, id: id, onCancel: function () {
+        React__default$1.createElement(CPicker, __assign$1({ className: classNames$1('time-picker', {
+                'is-invalid': invalid,
+                'is-valid': valid,
+            }, className), container: container, disabled: disabled, footer: footer, id: id, onCancel: function () {
                 initialDate && setDate(new Date(initialDate));
                 setVisible(false);
             }, onHide: function () {
@@ -10440,11 +10396,11 @@ var CTimePicker = forwardRef(function (_a, ref) {
                     _b['time-picker-roll'] = variant === 'roll',
                     _b)) }, variant === 'select' ? React__default$1.createElement(TimePickerSelect, null) : TimePickerRoll()))));
 });
-CTimePicker.propTypes = __assign$1(__assign$1(__assign$1({}, CFormControlWrapper.propTypes), CPicker.propTypes), { ampm: propTypesExports.oneOfType([propTypesExports.oneOf(['auto']), propTypesExports.bool]), className: propTypesExports.string, locale: propTypesExports.string, onTimeChange: propTypesExports.func, seconds: propTypesExports.bool, time: propTypesExports.oneOfType([propTypesExports.instanceOf(Date), propTypesExports.string]), variant: propTypesExports.oneOf(['roll', 'select']) });
+CTimePicker.propTypes = __assign$1(__assign$1(__assign$1({}, CFormControlWrapper.propTypes), CPicker.propTypes), { ampm: propTypesExports.oneOfType([propTypesExports.oneOf(['auto']), propTypesExports.bool]), className: propTypesExports.string, locale: propTypesExports.string, onTimeChange: propTypesExports.func, required: propTypesExports.bool, seconds: propTypesExports.bool, time: propTypesExports.oneOfType([propTypesExports.instanceOf(Date), propTypesExports.string]), variant: propTypesExports.oneOf(['roll', 'select']) });
 CTimePicker.displayName = 'CTimePicker';
 
 var getLocalDateFromString = function (string, locale, time) {
-    if (!isNaN(Date.parse(string))) {
+    if (!Number.isNaN(Date.parse(string))) {
         return new Date(Date.parse(string));
     }
     var date = new Date(2013, 11, 31, 17, 19, 22);
@@ -10461,7 +10417,7 @@ var getLocalDateFromString = function (string, locale, time) {
             .replace('22', '(?<second>[0-9]{1,2})')
             .replace('PM', '(?<ampm>[A-Z]{2})');
     }
-    var rgx = RegExp("".concat(regex));
+    var rgx = new RegExp("".concat(regex));
     var partials = string.match(rgx);
     if (partials === null)
         return;
@@ -10478,7 +10434,7 @@ var getLocalDateFromString = function (string, locale, time) {
 
 var _a, _b, _c, _d, _e, _f;
 var CDateRangePicker = forwardRef(function (_a, ref) {
-    var _b = _a.calendars, calendars = _b === void 0 ? 2 : _b, className = _a.className, _c = _a.cleaner, cleaner = _c === void 0 ? true : _c, calendarDate = _a.calendarDate, _d = _a.closeOnSelect, closeOnSelect = _d === void 0 ? true : _d, _e = _a.indicator, indicator = _e === void 0 ? true : _e, dayFormat = _a.dayFormat, disabled = _a.disabled, disabledDates = _a.disabledDates, endDate = _a.endDate, feedback = _a.feedback, feedbackInvalid = _a.feedbackInvalid, feedbackValid = _a.feedbackValid, firstDayOfWeek = _a.firstDayOfWeek, format = _a.format, footer = _a.footer, id = _a.id, inputReadOnly = _a.inputReadOnly, invalid = _a.invalid, label = _a.label, _f = _a.locale, locale = _f === void 0 ? 'default' : _f, maxDate = _a.maxDate, minDate = _a.minDate, navigation = _a.navigation, navYearFirst = _a.navYearFirst, onEndDateChange = _a.onEndDateChange, onHide = _a.onHide, onStartDateChange = _a.onStartDateChange, onShow = _a.onShow, _g = _a.placeholder, placeholder = _g === void 0 ? ['Start date', 'End date'] : _g, _h = _a.range, range = _h === void 0 ? true : _h, ranges = _a.ranges, _j = _a.rangesButtonsColor, rangesButtonsColor = _j === void 0 ? 'secondary' : _j, rangesButtonsSize = _a.rangesButtonsSize, _k = _a.rangesButtonsVariant, rangesButtonsVariant = _k === void 0 ? 'ghost' : _k, _l = _a.separator, separator = _l === void 0 ? true : _l, size = _a.size, startDate = _a.startDate, text = _a.text, timepicker = _a.timepicker, toggler = _a.toggler, _m = _a.todayButton, todayButton = _m === void 0 ? 'Today' : _m, _o = _a.todayButtonColor, todayButtonColor = _o === void 0 ? 'primary' : _o, _p = _a.todayButtonSize, todayButtonSize = _p === void 0 ? 'sm' : _p, todayButtonVariant = _a.todayButtonVariant, tooltipFeedback = _a.tooltipFeedback, valid = _a.valid, visible = _a.visible, weekdayFormat = _a.weekdayFormat, rest = __rest$1(_a, ["calendars", "className", "cleaner", "calendarDate", "closeOnSelect", "indicator", "dayFormat", "disabled", "disabledDates", "endDate", "feedback", "feedbackInvalid", "feedbackValid", "firstDayOfWeek", "format", "footer", "id", "inputReadOnly", "invalid", "label", "locale", "maxDate", "minDate", "navigation", "navYearFirst", "onEndDateChange", "onHide", "onStartDateChange", "onShow", "placeholder", "range", "ranges", "rangesButtonsColor", "rangesButtonsSize", "rangesButtonsVariant", "separator", "size", "startDate", "text", "timepicker", "toggler", "todayButton", "todayButtonColor", "todayButtonSize", "todayButtonVariant", "tooltipFeedback", "valid", "visible", "weekdayFormat"]);
+    var _b = _a.calendars, calendars = _b === void 0 ? 2 : _b, className = _a.className, _c = _a.cleaner, cleaner = _c === void 0 ? true : _c, calendarDate = _a.calendarDate, _d = _a.closeOnSelect, closeOnSelect = _d === void 0 ? true : _d, _e = _a.indicator, indicator = _e === void 0 ? true : _e, dayFormat = _a.dayFormat, disabled = _a.disabled, disabledDates = _a.disabledDates, endDate = _a.endDate, feedback = _a.feedback, feedbackInvalid = _a.feedbackInvalid, feedbackValid = _a.feedbackValid, firstDayOfWeek = _a.firstDayOfWeek, format = _a.format, footer = _a.footer, id = _a.id, inputReadOnly = _a.inputReadOnly, invalid = _a.invalid, label = _a.label, _f = _a.locale, locale = _f === void 0 ? 'default' : _f, maxDate = _a.maxDate, minDate = _a.minDate, navigation = _a.navigation, navYearFirst = _a.navYearFirst, onEndDateChange = _a.onEndDateChange, onHide = _a.onHide, onStartDateChange = _a.onStartDateChange, onShow = _a.onShow, _g = _a.placeholder, placeholder = _g === void 0 ? ['Start date', 'End date'] : _g, _h = _a.range, range = _h === void 0 ? true : _h, ranges = _a.ranges, _j = _a.rangesButtonsColor, rangesButtonsColor = _j === void 0 ? 'secondary' : _j, rangesButtonsSize = _a.rangesButtonsSize, _k = _a.rangesButtonsVariant, rangesButtonsVariant = _k === void 0 ? 'ghost' : _k, required = _a.required, _l = _a.separator, separator = _l === void 0 ? true : _l, size = _a.size, startDate = _a.startDate, text = _a.text, timepicker = _a.timepicker, toggler = _a.toggler, _m = _a.todayButton, todayButton = _m === void 0 ? 'Today' : _m, _o = _a.todayButtonColor, todayButtonColor = _o === void 0 ? 'primary' : _o, _p = _a.todayButtonSize, todayButtonSize = _p === void 0 ? 'sm' : _p, todayButtonVariant = _a.todayButtonVariant, tooltipFeedback = _a.tooltipFeedback, valid = _a.valid, visible = _a.visible, weekdayFormat = _a.weekdayFormat, rest = __rest$1(_a, ["calendars", "className", "cleaner", "calendarDate", "closeOnSelect", "indicator", "dayFormat", "disabled", "disabledDates", "endDate", "feedback", "feedbackInvalid", "feedbackValid", "firstDayOfWeek", "format", "footer", "id", "inputReadOnly", "invalid", "label", "locale", "maxDate", "minDate", "navigation", "navYearFirst", "onEndDateChange", "onHide", "onStartDateChange", "onShow", "placeholder", "range", "ranges", "rangesButtonsColor", "rangesButtonsSize", "rangesButtonsVariant", "required", "separator", "size", "startDate", "text", "timepicker", "toggler", "todayButton", "todayButtonColor", "todayButtonSize", "todayButtonVariant", "tooltipFeedback", "valid", "visible", "weekdayFormat"]);
     var _q = useState(visible), _visible = _q[0], setVisible = _q[1];
     var inputStartRef = useRef(null);
     var inputEndRef = useRef(null);
@@ -10576,14 +10532,10 @@ var CDateRangePicker = forwardRef(function (_a, ref) {
         setStartDate(null);
         setEndDate(null);
     };
-    var _className = classNames$1('date-picker', {
-        'is-invalid': invalid,
-        'is-valid': valid,
-    }, className);
     var InputGroup = function () { return (React__default$1.createElement(CInputGroup, { className: "picker-input-group", size: size },
         React__default$1.createElement(CFormInput, __assign$1({ autoComplete: "off", className: classNames$1({
                 hover: inputStartHoverValue,
-            }), delay: true, disabled: disabled }, (id && { name: range ? "".concat(id, "-start-date") : "".concat(id, "-date") }), { placeholder: Array.isArray(placeholder) ? placeholder[0] : placeholder, readOnly: inputReadOnly || typeof format === 'string', onChange: function (event) {
+            }), delay: true, disabled: disabled }, (id && { name: range ? "".concat(id, "-start-date") : "".concat(id, "-date") }), { placeholder: Array.isArray(placeholder) ? placeholder[0] : placeholder, readOnly: inputReadOnly || typeof format === 'string', required: required, onChange: function (event) {
                 var date = getLocalDateFromString(event.target.value, locale, timepicker);
                 if (date instanceof Date && date.getTime()) {
                     setCalendarDate(date);
@@ -10593,7 +10545,7 @@ var CDateRangePicker = forwardRef(function (_a, ref) {
         range && separator !== false && (React__default$1.createElement(CInputGroupText, null, typeof separator === 'boolean' ? (React__default$1.createElement("span", { className: "picker-input-group-icon date-picker-arrow-icon" })) : (separator))),
         range && (React__default$1.createElement(CFormInput, __assign$1({ autoComplete: "off", className: classNames$1({
                 hover: inputEndHoverValue,
-            }), delay: true, disabled: disabled }, (id && { name: "".concat(id, "-end-date") }), { placeholder: placeholder[1], readOnly: inputReadOnly || typeof format === 'string', onChange: function (event) {
+            }), delay: true, disabled: disabled }, (id && { name: "".concat(id, "-end-date") }), { placeholder: placeholder[1], readOnly: inputReadOnly || typeof format === 'string', required: required, onChange: function (event) {
                 var date = getLocalDateFromString(event.target.value, locale, timepicker);
                 if (date instanceof Date && date.getTime()) {
                     setCalendarDate(date);
@@ -10604,12 +10556,15 @@ var CDateRangePicker = forwardRef(function (_a, ref) {
             indicator && (React__default$1.createElement("span", { className: "picker-input-group-indicator" }, typeof indicator === 'boolean' ? (React__default$1.createElement("span", { className: "picker-input-group-icon date-picker-input-icon" })) : (indicator))),
             cleaner && _startDate && (React__default$1.createElement("span", { className: "picker-input-group-cleaner", role: "button", onClick: function (event) { return handleClear(event); } }, typeof cleaner === 'boolean' ? (React__default$1.createElement("span", { className: "picker-input-group-icon date-picker-cleaner-icon" })) : (cleaner))))))); };
     return (React__default$1.createElement(CFormControlWrapper, { describedby: rest['aria-describedby'], feedback: feedback, feedbackInvalid: feedbackInvalid, feedbackValid: feedbackValid, id: id, invalid: invalid, label: label, text: text, tooltipFeedback: tooltipFeedback, valid: valid },
-        React__default$1.createElement(CPicker, __assign$1({ className: _className, disabled: disabled, footer: footer || timepicker, footerContent: todayButton && (React__default$1.createElement(CButton, { className: "me-auto", color: todayButtonColor, size: todayButtonSize, variant: todayButtonVariant, onClick: function () {
+        React__default$1.createElement(CPicker, __assign$1({ className: classNames$1('date-picker', {
+                'is-invalid': invalid,
+                'is-valid': valid,
+            }, className), disabled: disabled, footer: footer || timepicker, footerContent: todayButton && (React__default$1.createElement(CButton, { className: "me-auto", color: todayButtonColor, size: todayButtonSize, variant: todayButtonVariant, onClick: function () {
                     var date = new Date();
                     handleStartDateChange(date);
                     handleEndDateChange(date);
                     setCalendarDate(date);
-                } }, todayButton)), id: id, toggler: toggler ? toggler : InputGroup(), onCancel: function () {
+                } }, todayButton)), id: id, toggler: toggler !== null && toggler !== void 0 ? toggler : InputGroup(), onCancel: function () {
                 handleStartDateChange(initialStartDate);
                 handleEndDateChange(initialEndDate);
                 setVisible(false);
@@ -10643,7 +10598,7 @@ var CDateRangePicker = forwardRef(function (_a, ref) {
                     }, time: index === 0 ? _startDate : _endDate, variant: "select" })); }))))))));
 });
 CDateRangePicker.displayName = 'CDateRangePicker';
-CDateRangePicker.propTypes = __assign$1(__assign$1(__assign$1(__assign$1({}, CCalendar.propTypes), CFormControlWrapper.propTypes), CPicker.propTypes), { calendars: propTypesExports.number, className: propTypesExports.string, cleaner: propTypesExports.bool, closeOnSelect: propTypesExports.bool, id: propTypesExports.string, indicator: propTypesExports.oneOfType([propTypesExports.bool, propTypesExports.node]), inputReadOnly: propTypesExports.bool, placeholder: propTypesExports.oneOfType([propTypesExports.string, propTypesExports.arrayOf(propTypesExports.any)]), range: propTypesExports.bool, ranges: propTypesExports.object, rangesButtonsColor: (_a = CButton.propTypes) === null || _a === void 0 ? void 0 : _a.color, rangesButtonsSize: (_b = CButton.propTypes) === null || _b === void 0 ? void 0 : _b.size, rangesButtonsVariant: (_c = CButton.propTypes) === null || _c === void 0 ? void 0 : _c.variant, separator: propTypesExports.oneOfType([propTypesExports.bool, propTypesExports.node]), size: propTypesExports.oneOf(['sm', 'lg']), timepicker: propTypesExports.bool, todayButton: propTypesExports.oneOfType([propTypesExports.bool, propTypesExports.node]), todayButtonColor: (_d = CButton.propTypes) === null || _d === void 0 ? void 0 : _d.color, todayButtonSize: (_e = CButton.propTypes) === null || _e === void 0 ? void 0 : _e.size, todayButtonVariant: (_f = CButton.propTypes) === null || _f === void 0 ? void 0 : _f.variant });
+CDateRangePicker.propTypes = __assign$1(__assign$1(__assign$1(__assign$1({}, CCalendar.propTypes), CFormControlWrapper.propTypes), CPicker.propTypes), { calendars: propTypesExports.number, className: propTypesExports.string, cleaner: propTypesExports.bool, closeOnSelect: propTypesExports.bool, id: propTypesExports.string, indicator: propTypesExports.oneOfType([propTypesExports.bool, propTypesExports.node]), inputReadOnly: propTypesExports.bool, placeholder: propTypesExports.oneOfType([propTypesExports.string, propTypesExports.arrayOf(propTypesExports.any)]), range: propTypesExports.bool, ranges: propTypesExports.object, rangesButtonsColor: (_a = CButton.propTypes) === null || _a === void 0 ? void 0 : _a.color, rangesButtonsSize: (_b = CButton.propTypes) === null || _b === void 0 ? void 0 : _b.size, rangesButtonsVariant: (_c = CButton.propTypes) === null || _c === void 0 ? void 0 : _c.variant, required: propTypesExports.bool, separator: propTypesExports.oneOfType([propTypesExports.bool, propTypesExports.node]), size: propTypesExports.oneOf(['sm', 'lg']), timepicker: propTypesExports.bool, todayButton: propTypesExports.oneOfType([propTypesExports.bool, propTypesExports.node]), todayButtonColor: (_d = CButton.propTypes) === null || _d === void 0 ? void 0 : _d.color, todayButtonSize: (_e = CButton.propTypes) === null || _e === void 0 ? void 0 : _e.size, todayButtonVariant: (_f = CButton.propTypes) === null || _f === void 0 ? void 0 : _f.variant });
 
 var CDatePicker = forwardRef(function (_a, ref) {
     var date = _a.date, id = _a.id, onDateChange = _a.onDateChange, _b = _a.placeholder, placeholder = _b === void 0 ? 'Select date' : _b, rest = __rest$1(_a, ["date", "id", "onDateChange", "placeholder"]);
@@ -10654,8 +10609,7 @@ CDatePicker.propTypes = __assign$1(__assign$1({}, CDateRangePicker.propTypes), {
 
 var CDropdownDivider = forwardRef(function (_a, ref) {
     var className = _a.className, rest = __rest$1(_a, ["className"]);
-    var _className = classNames$1('dropdown-divider', className);
-    return React__default$1.createElement("hr", __assign$1({ className: _className }, rest, { ref: ref }));
+    return React__default$1.createElement("hr", __assign$1({ className: classNames$1('dropdown-divider', className) }, rest, { ref: ref }));
 });
 CDropdownDivider.propTypes = {
     className: propTypesExports.string,
@@ -10664,8 +10618,7 @@ CDropdownDivider.displayName = 'CDropdownDivider';
 
 var CDropdownHeader = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, _b = _a.component, Component = _b === void 0 ? 'h6' : _b, rest = __rest$1(_a, ["children", "className", "component"]);
-    var _className = classNames$1('dropdown-header', className);
-    return (React__default$1.createElement(Component, __assign$1({ className: _className }, rest, { ref: ref }), children));
+    return (React__default$1.createElement(Component, __assign$1({ className: classNames$1('dropdown-header', className) }, rest, { ref: ref }), children));
 });
 CDropdownHeader.propTypes = {
     children: propTypesExports.node,
@@ -10676,8 +10629,7 @@ CDropdownHeader.displayName = 'CDropdownHeader';
 
 var CDropdownItem = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, _b = _a.component, component = _b === void 0 ? 'a' : _b, rest = __rest$1(_a, ["children", "className", "component"]);
-    var _className = classNames$1('dropdown-item', className);
-    return (React__default$1.createElement(CLink, __assign$1({ className: _className, component: component }, rest, { ref: ref }), children));
+    return (React__default$1.createElement(CLink, __assign$1({ className: classNames$1('dropdown-item', className), component: component }, rest, { ref: ref }), children));
 });
 CDropdownItem.propTypes = {
     children: propTypesExports.node,
@@ -10688,8 +10640,7 @@ CDropdownItem.displayName = 'CDropdownItem';
 
 var CDropdownItemPlain = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, _b = _a.component, Component = _b === void 0 ? 'span' : _b, rest = __rest$1(_a, ["children", "className", "component"]);
-    var _className = classNames$1('dropdown-item-text', className);
-    return (React__default$1.createElement(Component, __assign$1({ className: _className }, rest, { ref: ref }), children));
+    return (React__default$1.createElement(Component, __assign$1({ className: classNames$1('dropdown-item-text', className) }, rest, { ref: ref }), children));
 });
 CDropdownItemPlain.propTypes = {
     children: propTypesExports.node,
@@ -10700,8 +10651,7 @@ CDropdownItemPlain.displayName = 'CDropdownItemPlain';
 
 var CSpinner = forwardRef(function (_a, ref) {
     var className = _a.className, color = _a.color, _b = _a.component, Component = _b === void 0 ? 'div' : _b, size = _a.size, _c = _a.variant, variant = _c === void 0 ? 'border' : _c, _d = _a.visuallyHiddenLabel, visuallyHiddenLabel = _d === void 0 ? 'Loading...' : _d, rest = __rest$1(_a, ["className", "color", "component", "size", "variant", "visuallyHiddenLabel"]);
-    var _className = classNames$1("spinner-".concat(variant), "text-".concat(color), size && "spinner-".concat(variant, "-").concat(size), className);
-    return (React__default$1.createElement(Component, __assign$1({ className: _className, role: "status" }, rest, { ref: ref }),
+    return (React__default$1.createElement(Component, __assign$1({ className: classNames$1("spinner-".concat(variant), "text-".concat(color), size && "spinner-".concat(variant, "-").concat(size), className), role: "status" }, rest, { ref: ref }),
         React__default$1.createElement("span", { className: "visually-hidden" }, visuallyHiddenLabel)));
 });
 CSpinner.propTypes = {
@@ -10768,8 +10718,7 @@ CElementCover.displayName = 'CElementCover';
 var CFooter = forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, position = _a.position, rest = __rest$1(_a, ["children", "className", "position"]);
-    var _className = classNames$1('footer', (_b = {}, _b["footer-".concat(position)] = position, _b), className);
-    return (React__default$1.createElement("div", __assign$1({ className: _className }, rest, { ref: ref }), children));
+    return (React__default$1.createElement("div", __assign$1({ className: classNames$1('footer', (_b = {}, _b["footer-".concat(position)] = position, _b), className) }, rest, { ref: ref }), children));
 });
 CFooter.propTypes = {
     children: propTypesExports.node,
@@ -10814,8 +10763,7 @@ var CCol = forwardRef(function (_a, ref) {
             }
         }
     });
-    var _className = classNames$1(repsonsiveClassNames.length ? repsonsiveClassNames : 'col', className);
-    return (React__default$1.createElement("div", __assign$1({ className: _className }, rest, { ref: ref }), children));
+    return (React__default$1.createElement("div", __assign$1({ className: classNames$1(repsonsiveClassNames.length > 0 ? repsonsiveClassNames : 'col', className) }, rest, { ref: ref }), children));
 });
 var span = propTypesExports.oneOfType([
     propTypesExports.bool,
@@ -10863,8 +10811,7 @@ var CContainer = forwardRef(function (_a, ref) {
         delete rest[bp];
         breakpoint && repsonsiveClassNames.push("container-".concat(bp));
     });
-    var _className = classNames$1(repsonsiveClassNames.length ? repsonsiveClassNames : 'container', className);
-    return (React__default$1.createElement("div", __assign$1({ className: _className }, rest, { ref: ref }), children));
+    return (React__default$1.createElement("div", __assign$1({ className: classNames$1(repsonsiveClassNames.length > 0 ? repsonsiveClassNames : 'container', className) }, rest, { ref: ref }), children));
 });
 CContainer.propTypes = {
     children: propTypesExports.node,
@@ -10908,8 +10855,7 @@ var CRow = forwardRef(function (_a, ref) {
             }
         }
     });
-    var _className = classNames$1('row', repsonsiveClassNames, className);
-    return (React__default$1.createElement("div", { className: _className, ref: ref }, children));
+    return (React__default$1.createElement("div", { className: classNames$1('row', repsonsiveClassNames, className), ref: ref }, children));
 });
 var bp = propTypesExports.shape({
     cols: propTypesExports.oneOfType([propTypesExports.oneOf(['auto']), propTypesExports.number, propTypesExports.string]),
@@ -10932,15 +10878,7 @@ CRow.displayName = 'CRow';
 var CHeader = forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, container = _a.container, position = _a.position, rest = __rest$1(_a, ["children", "className", "container", "position"]);
-    var _className = classNames$1('header', (_b = {}, _b["header-".concat(position)] = position, _b), className);
-    var content;
-    if (container) {
-        content = (React__default$1.createElement("div", { className: "container".concat(container !== true ? '-' + container : '') }, children));
-    }
-    else {
-        content = children;
-    }
-    return (React__default$1.createElement("div", __assign$1({ className: _className }, rest, { ref: ref }), content));
+    return (React__default$1.createElement("div", __assign$1({ className: classNames$1('header', (_b = {}, _b["header-".concat(position)] = position, _b), className) }, rest, { ref: ref }), container ? (React__default$1.createElement("div", { className: typeof container === 'string' ? "container-".concat(container) : 'container' }, children)) : (React__default$1.createElement(React__default$1.Fragment, null, children))));
 });
 CHeader.propTypes = {
     children: propTypesExports.node,
@@ -10962,8 +10900,7 @@ CHeader.displayName = 'CHeader';
 
 var CHeaderBrand = forwardRef(function (_a, ref) {
     var children = _a.children, _b = _a.component, Component = _b === void 0 ? 'a' : _b, className = _a.className, rest = __rest$1(_a, ["children", "component", "className"]);
-    var _className = classNames$1('header-brand', className);
-    return (React__default$1.createElement(Component, __assign$1({ className: _className }, rest, { ref: ref }), children));
+    return (React__default$1.createElement(Component, __assign$1({ className: classNames$1('header-brand', className) }, rest, { ref: ref }), children));
 });
 CHeaderBrand.propTypes = {
     children: propTypesExports.node,
@@ -10974,8 +10911,7 @@ CHeaderBrand.displayName = 'CHeaderBrand';
 
 var CHeaderDivider = forwardRef(function (_a, ref) {
     var className = _a.className, rest = __rest$1(_a, ["className"]);
-    var _className = classNames$1('header-divider', className);
-    return React__default$1.createElement("div", __assign$1({ className: _className }, rest, { ref: ref }));
+    return React__default$1.createElement("div", __assign$1({ className: classNames$1('header-divider', className) }, rest, { ref: ref }));
 });
 CHeaderDivider.propTypes = {
     className: propTypesExports.string,
@@ -10984,8 +10920,7 @@ CHeaderDivider.displayName = 'CHeaderDivider';
 
 var CHeaderNav = forwardRef(function (_a, ref) {
     var children = _a.children, _b = _a.component, Component = _b === void 0 ? 'ul' : _b, className = _a.className, rest = __rest$1(_a, ["children", "component", "className"]);
-    var _className = classNames$1('header-nav', className);
-    return (React__default$1.createElement(Component, __assign$1({ className: _className, role: "navigation" }, rest, { ref: ref }), children));
+    return (React__default$1.createElement(Component, __assign$1({ className: classNames$1('header-nav', className), role: "navigation" }, rest, { ref: ref }), children));
 });
 CHeaderNav.propTypes = {
     children: propTypesExports.node,
@@ -10996,8 +10931,7 @@ CHeaderNav.displayName = 'CHeaderNav';
 
 var CHeaderText = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest$1(_a, ["children", "className"]);
-    var _className = classNames$1('header-text', className);
-    return (React__default$1.createElement("span", __assign$1({ className: _className }, rest, { ref: ref }), children));
+    return (React__default$1.createElement("span", __assign$1({ className: classNames$1('header-text', className) }, rest, { ref: ref }), children));
 });
 CHeaderText.propTypes = {
     children: propTypesExports.node,
@@ -11007,8 +10941,7 @@ CHeaderText.displayName = 'CHeaderText';
 
 var CHeaderToggler = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest$1(_a, ["children", "className"]);
-    var _className = classNames$1('header-toggler', className);
-    return (React__default$1.createElement("button", __assign$1({ type: "button", className: _className }, rest, { ref: ref }), children ? children : React__default$1.createElement("span", { className: "header-toggler-icon" })));
+    return (React__default$1.createElement("button", __assign$1({ type: "button", className: classNames$1('header-toggler', className) }, rest, { ref: ref }), children !== null && children !== void 0 ? children : React__default$1.createElement("span", { className: "header-toggler-icon" })));
 });
 CHeaderToggler.propTypes = {
     children: propTypesExports.node,
@@ -11019,14 +10952,13 @@ CHeaderToggler.displayName = 'CHeaderToggler';
 var CImage = forwardRef(function (_a, ref) {
     var _b;
     var align = _a.align, className = _a.className, fluid = _a.fluid, rounded = _a.rounded, thumbnail = _a.thumbnail, rest = __rest$1(_a, ["align", "className", "fluid", "rounded", "thumbnail"]);
-    var _className = classNames$1((_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__default$1.createElement("img", __assign$1({ className: _className }, rest, { ref: ref }));
+    return (React__default$1.createElement("img", __assign$1({ className: classNames$1((_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']),
@@ -11040,12 +10972,11 @@ CImage.displayName = 'CImage';
 var CListGroup = forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, _c = _a.component, Component = _c === void 0 ? 'ul' : _c, flush = _a.flush, layout = _a.layout;
-    var _className = classNames$1('list-group', (_b = {
-            'list-group-flush': flush
-        },
-        _b["list-group-".concat(layout)] = layout,
-        _b), className);
-    return (React__default$1.createElement(Component, { className: _className, ref: ref }, children));
+    return (React__default$1.createElement(Component, { className: classNames$1('list-group', (_b = {
+                'list-group-flush': flush
+            },
+            _b["list-group-".concat(layout)] = layout,
+            _b), className), ref: ref }, children));
 });
 CListGroup.propTypes = {
     children: propTypesExports.node,
@@ -11066,12 +10997,6 @@ CListGroup.displayName = 'CListGroup';
 var CListGroupItem = 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$1(_a, ["children", "active", "className", "disabled", "color", "component"]);
-    var _className = classNames$1('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$1(__assign$1(__assign$1(__assign$1({}, ((component === 'a' || component === 'button') && {
         active: active,
@@ -11079,7 +11004,12 @@ var CListGroupItem = forwardRef(function (_a, ref) {
         component: component,
         ref: ref,
     })), (active && { 'aria-current': true })), (disabled && { 'aria-disabled': true })), rest);
-    return (React__default$1.createElement(Component, __assign$1({ className: _className }, rest), children));
+    return (React__default$1.createElement(Component, __assign$1({ className: classNames$1('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,
@@ -11106,8 +11036,7 @@ var CLoadingButton = forwardRef(function (_a, ref) {
             }, timeout);
         }
     };
-    var _className = classNames$1('btn-loading', _loading && 'is-loading', className);
-    return (React__default$1.createElement(CButton, __assign$1({ className: _className }, (disabledOnLoading && _loading && { disabled: true }), { onClick: handleOnClick }, rest, { ref: ref }),
+    return (React__default$1.createElement(CButton, __assign$1({ className: classNames$1('btn-loading', _loading && 'is-loading', className) }, (disabledOnLoading && _loading && { disabled: true }), { onClick: handleOnClick }, rest, { ref: ref }),
         React__default$1.createElement(CSpinner, { className: "btn-loading-spinner", size: "sm", variant: spinnerType }),
         children));
 });
@@ -11124,8 +11053,7 @@ CLoadingButton.displayName = 'CLoadingButton';
 
 var CModalContent = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest$1(_a, ["children", "className"]);
-    var _className = classNames$1('modal-content', className);
-    return (React__default$1.createElement("div", __assign$1({ className: _className }, rest, { ref: ref }), children));
+    return (React__default$1.createElement("div", __assign$1({ className: classNames$1('modal-content', className) }, rest, { ref: ref }), children));
 });
 CModalContent.propTypes = {
     children: propTypesExports.node,
@@ -11136,16 +11064,15 @@ CModalContent.displayName = 'CModalContent';
 var CModalDialog = forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, alignment = _a.alignment, className = _a.className, fullscreen = _a.fullscreen, scrollable = _a.scrollable, size = _a.size, rest = __rest$1(_a, ["children", "alignment", "className", "fullscreen", "scrollable", "size"]);
-    var _className = classNames$1('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__default$1.createElement("div", __assign$1({ className: _className }, rest, { ref: ref }), children));
+    return (React__default$1.createElement("div", __assign$1({ className: classNames$1('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']),
@@ -11168,19 +11095,19 @@ var CModal = forwardRef(function (_a, ref) {
     var forkedRef = useForkedRef(ref, modalRef);
     var _h = useState(visible), _visible = _h[0], setVisible = _h[1];
     var _j = useState(false), staticBackdrop = _j[0], setStaticBackdrop = _j[1];
-    useEffect(function () {
-        setVisible(visible);
-    }, [visible]);
     var contextValues = {
         visible: _visible,
         setVisible: setVisible,
     };
     useEffect(function () {
-        modalRef.current && modalRef.current.addEventListener('click', handleClickOutside);
-        modalRef.current && modalRef.current.addEventListener('keyup', handleKeyDown);
+        setVisible(visible);
+    }, [visible]);
+    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 () {
@@ -11193,19 +11120,6 @@ var CModal = 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$1('modal', {
-        'modal-static': staticBackdrop,
-        fade: transition,
-    }, className);
     // Set focus to modal after open
     useLayoutEffect(function () {
         if (_visible) {
@@ -11217,7 +11131,7 @@ var CModal = 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');
@@ -11240,27 +11154,23 @@ var CModal = forwardRef(function (_a, ref) {
             handleDismiss();
         }
     };
-    var handleKeyDown = useCallback(function (event) {
+    var handleKeyDown = function (event) {
         if (event.key === 'Escape' && keyboard) {
-            return handleDismiss();
+            handleDismiss();
         }
-    }, [modalRef, handleDismiss]);
-    var modal = function (ref, transitionClass) {
-        return (React__default$1.createElement(CModalContext.Provider, { value: contextValues },
-            React__default$1.createElement("div", { className: classNames$1(_className, transitionClass), tabIndex: -1, role: "dialog", ref: ref },
-                React__default$1.createElement(CModalDialog, { alignment: alignment, fullscreen: fullscreen, scrollable: scrollable, size: size },
-                    React__default$1.createElement(CModalContent, __assign$1({}, rest, { ref: modalContentRef }), children)))));
     };
     return (React__default$1.createElement(React__default$1.Fragment, null,
-        React__default$1.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
-                ? createPortal(modal(forkedRef, transitionClass), document.body)
-                : modal(forkedRef, transitionClass);
-        }),
-        typeof window !== 'undefined' && portal
-            ? backdrop && createPortal(React__default$1.createElement(CBackdrop, { visible: _visible }), document.body)
-            : backdrop && React__default$1.createElement(CBackdrop, { visible: _visible })));
+        React__default$1.createElement(Transition$1, { in: _visible, mountOnEnter: true, nodeRef: modalRef, onEnter: onShow, onExit: onClose, unmountOnExit: unmountOnClose, timeout: transition ? duration : 0 }, function (state) { return (React__default$1.createElement(CConditionalPortal, { portal: portal },
+            React__default$1.createElement(CModalContext.Provider, { value: contextValues },
+                React__default$1.createElement("div", { className: classNames$1('modal', {
+                        'modal-static': staticBackdrop,
+                        fade: transition,
+                        show: state === 'entered',
+                    }, className), tabIndex: -1, role: "dialog", style: __assign$1({}, (state !== 'exited' && { display: 'block' })), ref: forkedRef },
+                    React__default$1.createElement(CModalDialog, { alignment: alignment, fullscreen: fullscreen, scrollable: scrollable, size: size },
+                        React__default$1.createElement(CModalContent, __assign$1({}, rest, { ref: modalContentRef }), children)))))); }),
+        backdrop && (React__default$1.createElement(CConditionalPortal, { portal: portal },
+            React__default$1.createElement(CBackdrop, { visible: _visible })))));
 });
 CModal.propTypes = {
     alignment: propTypesExports.oneOf(['top', 'center']),
@@ -11287,8 +11197,7 @@ CModal.displayName = 'CModal';
 
 var CModalBody = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest$1(_a, ["children", "className"]);
-    var _className = classNames$1('modal-body', className);
-    return (React__default$1.createElement("div", __assign$1({ className: _className }, rest, { ref: ref }), children));
+    return (React__default$1.createElement("div", __assign$1({ className: classNames$1('modal-body', className) }, rest, { ref: ref }), children));
 });
 CModalBody.propTypes = {
     children: propTypesExports.node,
@@ -11298,8 +11207,7 @@ CModalBody.displayName = 'CModalBody';
 
 var CModalFooter = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest$1(_a, ["children", "className"]);
-    var _className = classNames$1('modal-footer', className);
-    return (React__default$1.createElement("div", __assign$1({ className: _className }, rest, { ref: ref }), children));
+    return (React__default$1.createElement("div", __assign$1({ className: classNames$1('modal-footer', className) }, rest, { ref: ref }), children));
 });
 CModalFooter.propTypes = {
     children: propTypesExports.node,
@@ -11310,8 +11218,7 @@ CModalFooter.displayName = 'CModalFooter';
 var CModalHeader = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, _b = _a.closeButton, closeButton = _b === void 0 ? true : _b, rest = __rest$1(_a, ["children", "className", "closeButton"]);
     var setVisible = useContext(CModalContext).setVisible;
-    var _className = classNames$1('modal-header', className);
-    return (React__default$1.createElement("div", __assign$1({ className: _className }, rest, { ref: ref }),
+    return (React__default$1.createElement("div", __assign$1({ className: classNames$1('modal-header', className) }, rest, { ref: ref }),
         children,
         closeButton && React__default$1.createElement(CCloseButton, { onClick: function () { return setVisible(false); } })));
 });
@@ -11324,8 +11231,7 @@ CModalHeader.displayName = 'CModalHeader';
 
 var CModalTitle = forwardRef(function (_a, ref) {
     var children = _a.children, _b = _a.component, Component = _b === void 0 ? 'h5' : _b, className = _a.className, rest = __rest$1(_a, ["children", "component", "className"]);
-    var _className = classNames$1('modal-title', className);
-    return (React__default$1.createElement(Component, __assign$1({ className: _className }, rest, { ref: ref }), children));
+    return (React__default$1.createElement(Component, __assign$1({ className: classNames$1('modal-title', className) }, rest, { ref: ref }), children));
 });
 CModalTitle.propTypes = {
     children: propTypesExports.node,
@@ -11365,7 +11271,7 @@ var CVirtualScroller = forwardRef(function (_a, ref) {
     useEffect(function () {
         virtualScrollRef.current && virtualScrollRef.current.scrollTop;
         virtualScrollRef.current &&
-            setViewportPadding(parseFloat(getComputedStyle(virtualScrollRef.current).paddingTop));
+            setViewportPadding(Number.parseFloat(getComputedStyle(virtualScrollRef.current).paddingTop));
     });
     useEffect(function () {
         setItemsNumber(itemsNumber || React__default$1.Children.count(children));
@@ -11385,8 +11291,7 @@ var CVirtualScroller = forwardRef(function (_a, ref) {
         setCurrentItemIndex(_currentItemIndex);
         onScroll && onScroll(_currentItemIndex);
     };
-    var _className = classNames$1('virtual-scroller', className);
-    return (React__default$1.createElement("div", { className: _className, onScroll: function (event) {
+    return (React__default$1.createElement("div", { className: classNames$1('virtual-scroller', className), onScroll: function (event) {
             return handleScroll(event.target.scrollTop);
         }, ref: forkedRef, style: {
             height: maxHeight > viewportHeight ? viewportHeight : maxHeight,
@@ -11410,8 +11315,8 @@ var CVirtualScroller = forwardRef(function (_a, ref) {
                         return node &&
                             node.offsetHeight &&
                             setItemHeight(node.offsetHeight +
-                                parseFloat(getComputedStyle(node).marginTop) +
-                                parseFloat(getComputedStyle(node).marginBottom));
+                                Number.parseFloat(getComputedStyle(node).marginTop) +
+                                Number.parseFloat(getComputedStyle(node).marginBottom));
                     },
                 });
             }
@@ -11425,7 +11330,7 @@ CVirtualScroller.propTypes = {
 CVirtualScroller.displayName = 'CVirtualScroller';
 
 var filterOptionsList = function (search, _options) {
-    return search.length
+    return search.length > 0
         ? _options &&
             _options.reduce(function (acc, val) {
                 var options = val.options &&
@@ -11433,8 +11338,8 @@ var filterOptionsList = function (search, _options) {
                         return element.text && element.text.toLowerCase().includes(search.toLowerCase());
                     });
                 if ((val.text && val.text.toLowerCase().includes(search.toLowerCase())) ||
-                    (options && options.length)) {
-                    acc.push(Object.assign({}, val, options && options.length && { options: options }));
+                    (options && options.length > 0)) {
+                    acc.push(Object.assign({}, val, options && options.length > 0 && { options: options }));
                 }
                 return acc;
             }, [])
@@ -11606,16 +11511,6 @@ var CMultiSelect = forwardRef(function (_a, ref) {
             nativeSelectRef.current &&
             nativeSelectRef.current.dispatchEvent(new Event('change', { bubbles: true }));
     }, [JSON.stringify(selected)]);
-    var _className = classNames$1('form-multi-select', (_b = {
-            'form-multi-select-with-cleaner': cleaner
-        },
-        _b["form-multi-select-".concat(size)] = size,
-        _b.show = _visible,
-        _b['form-multi-select-selection-tags'] = multiple && selectionType === 'tags',
-        _b.disabled = disabled,
-        _b['is-invalid'] = invalid,
-        _b['is-valid'] = valid,
-        _b), className);
     useEffect(function () {
         isInitialMount.current = false;
     }, []);
@@ -11627,8 +11522,9 @@ var CMultiSelect = forwardRef(function (_a, ref) {
         onFilterChange && onFilterChange(target.value);
     };
     var handleSearchKeyDown = function (event) {
-        if (_search.length)
+        if (_search.length > 0) {
             return;
+        }
         if (event.key === 'Backspace' || event.key === 'Delete') {
             var last_1 = selected.filter(function (option) { return !option.disabled; }).pop();
             last_1 && setSelected(selected.filter(function (option) { return option.value !== last_1.value; }));
@@ -11661,18 +11557,27 @@ var CMultiSelect = forwardRef(function (_a, ref) {
         React__default$1.createElement(CMultiSelectNativeSelect, { multiple: multiple, options: selected, value: multiple
                 ? selected.map(function (option) { return option.value.toString(); })
                 : selected.map(function (option) { return option.value; })[0], onChange: function () { return onChange && onChange(selected); }, ref: nativeSelectRef }),
-        React__default$1.createElement(CPicker, { className: _className, disabled: disabled, id: id, onHide: function () { return setVisible(false); }, onShow: function () {
+        React__default$1.createElement(CPicker, { className: classNames$1('form-multi-select', (_b = {
+                    'form-multi-select-with-cleaner': cleaner
+                },
+                _b["form-multi-select-".concat(size)] = size,
+                _b.show = _visible,
+                _b['form-multi-select-selection-tags'] = multiple && selectionType === 'tags',
+                _b.disabled = disabled,
+                _b['is-invalid'] = invalid,
+                _b['is-valid'] = valid,
+                _b), className), disabled: disabled, id: id, onHide: function () { return setVisible(false); }, onShow: function () {
                 searchRef.current && searchRef.current.focus();
                 setVisible(true);
             }, toggler: React__default$1.createElement("div", null,
                 React__default$1.createElement(CMultiSelectSelection, { multiple: multiple, onRemove: function (option) { return !disabled && handleOptionOnClick(option); }, search: search, selected: selected, selectionType: selectionType, selectionTypeCounterText: selectionTypeCounterText }),
                 multiple && cleaner && selected.length > 0 && (React__default$1.createElement("button", { type: "button", className: "form-multi-select-selection-cleaner", onClick: function () { return handleDeselectAll(); } })),
-                search && (React__default$1.createElement("input", __assign$1({ type: "text", className: "form-multi-select-search", disabled: disabled, onChange: function (event) { return handleSearchChange(event); }, onKeyDown: function (event) { return handleSearchKeyDown(event); } }, (selected.length === 0 && { placeholder: placeholder }), (selected.length &&
+                search && (React__default$1.createElement("input", __assign$1({ type: "text", className: "form-multi-select-search", disabled: disabled, onChange: function (event) { return handleSearchChange(event); }, onKeyDown: function (event) { return handleSearchKeyDown(event); } }, (selected.length === 0 && { placeholder: placeholder }), (selected.length > 0 &&
                     selectionType === 'counter' && {
                     placeholder: "".concat(selected.length, " ").concat(selectionTypeCounterText),
-                }), (selected.length &&
+                }), (selected.length > 0 &&
                     !multiple && { placeholder: selected.map(function (option) { return option.text; })[0] }), (multiple &&
-                    selected.length &&
+                    selected.length > 0 &&
                     selectionType !== 'counter' && { size: _search.length + 2 }), { ref: searchRef })))), visible: _visible, ref: ref },
             React__default$1.createElement(React__default$1.Fragment, null,
                 multiple && selectAll && (React__default$1.createElement("button", { type: "button", className: "form-multi-select-all", onClick: function () { return handleSelectAll(); } }, selectAllLabel)),
@@ -11684,11 +11589,10 @@ CMultiSelect.displayName = 'CMultiSelect';
 var CNav = forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, _c = _a.component, Component = _c === void 0 ? 'ul' : _c, layout = _a.layout, variant = _a.variant, rest = __rest$1(_a, ["children", "className", "component", "layout", "variant"]);
-    var _className = classNames$1('nav', (_b = {},
-        _b["nav-".concat(layout)] = layout,
-        _b["nav-".concat(variant)] = variant,
-        _b), className);
-    return (React__default$1.createElement(Component, __assign$1({ className: _className, role: "navigation" }, rest, { ref: ref }), children));
+    return (React__default$1.createElement(Component, __assign$1({ className: classNames$1('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,
@@ -11701,8 +11605,7 @@ CNav.displayName = 'CNav';
 
 var CNavGroupItems = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest$1(_a, ["children", "className"]);
-    var _className = classNames$1('nav-group-items', className);
-    return (React__default$1.createElement("ul", __assign$1({ className: _className }, rest, { ref: ref }), children));
+    return (React__default$1.createElement("ul", __assign$1({ className: classNames$1('nav-group-items', className) }, rest, { ref: ref }), children));
 });
 CNavGroupItems.propTypes = {
     children: propTypesExports.node,
@@ -11718,8 +11621,7 @@ var CSidebarNav = forwardRef(function (_a, ref) {
         visibleGroup: visibleGroup,
         setVisibleGroup: setVisibleGroup,
     };
-    var classes = classNames$1('sidebar-nav', className);
-    return (React__default$1.createElement("ul", __assign$1({ className: classes, ref: ref }, rest),
+    return (React__default$1.createElement("ul", __assign$1({ className: classNames$1('sidebar-nav', className), ref: ref }, rest),
         React__default$1.createElement(CNavContext.Provider, { value: CNavContextValues }, React__default$1.Children.map(children, function (child, index) {
             if (React__default$1.isValidElement(child)) {
                 return React__default$1.cloneElement(child, {
@@ -11778,8 +11680,7 @@ var CNavGroup = forwardRef(function (_a, ref) {
         exiting: { display: 'block', height: height },
         exited: { height: height },
     };
-    var _className = classNames$1('nav-group', { show: _visible }, className);
-    return (React__default$1.createElement("li", __assign$1({ className: _className }, rest, { ref: ref }),
+    return (React__default$1.createElement("li", __assign$1({ className: classNames$1('nav-group', { show: _visible }, className) }, rest, { ref: ref }),
         toggler && (React__default$1.createElement("a", { className: "nav-link nav-group-toggle", onClick: function (event) { return handleTogglerOnCLick(event); } }, toggler)),
         React__default$1.createElement(Transition$1, { in: _visible, nodeRef: navItemsRef, onEntering: onEntering, onEntered: onEntered, onExit: onExit, onExiting: onExiting, onExited: onExited, timeout: 300 }, function (state) { return (React__default$1.createElement("ul", { className: classNames$1('nav-group-items', {
                 compact: compact,
@@ -11808,13 +11709,12 @@ var CNavLink = forwardRef(function (_a, ref) {
     var navLinkRef = useRef(null);
     var forkedRef = useForkedRef(ref, navLinkRef);
     var setVisibleGroup = useContext(CNavContext).setVisibleGroup;
-    var _className = classNames$1('nav-link', className);
     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__default$1.createElement(CLink, __assign$1({ className: _className }, rest, { ref: forkedRef }), children));
+    return (React__default$1.createElement(CLink, __assign$1({ className: classNames$1('nav-link', className) }, rest, { ref: forkedRef }), children));
 });
 CNavLink.propTypes = {
     children: propTypesExports.node,
@@ -11825,11 +11725,7 @@ CNavLink.displayName = 'CNavLink';
 
 var CNavItem = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest$1(_a, ["children", "className"]);
-    var _className = classNames$1('nav-item', className);
-    if (rest.href || rest.to) {
-        children = (React__default$1.createElement(CNavLink, __assign$1({ className: className }, rest), children));
-    }
-    return (React__default$1.createElement("li", { className: _className, ref: ref }, children));
+    return (React__default$1.createElement("li", { className: classNames$1('nav-item', className), ref: ref }, rest.href || rest.to ? (React__default$1.createElement(CNavLink, __assign$1({ className: className }, rest), children)) : (children)));
 });
 CNavItem.propTypes = {
     children: propTypesExports.node,
@@ -11839,8 +11735,7 @@ CNavItem.displayName = 'CNavItem';
 
 var CNavTitle = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest$1(_a, ["children", "className"]);
-    var _className = classNames$1('nav-title', className);
-    return (React__default$1.createElement("li", __assign$1({ className: _className }, rest, { ref: ref }), children));
+    return (React__default$1.createElement("li", __assign$1({ className: classNames$1('nav-title', className) }, rest, { ref: ref }), children));
 });
 CNavTitle.propTypes = {
     children: propTypesExports.node,
@@ -11851,19 +11746,11 @@ CNavTitle.displayName = 'CNavTitle';
 var CNavbar = forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, color = _a.color, colorScheme = _a.colorScheme, _c = _a.component, Component = _c === void 0 ? 'nav' : _c, container = _a.container, expand = _a.expand, placement = _a.placement, rest = __rest$1(_a, ["children", "className", "color", "colorScheme", "component", "container", "expand", "placement"]);
-    var _className = classNames$1('navbar', (_b = {},
-        _b["bg-".concat(color)] = color,
-        _b["navbar-".concat(colorScheme)] = colorScheme,
-        _b[typeof expand === 'boolean' ? 'navbar-expand' : "navbar-expand-".concat(expand)] = expand,
-        _b), placement, className);
-    var content;
-    if (container) {
-        content = (React__default$1.createElement("div", { className: "container".concat(container !== true ? '-' + container : '') }, children));
-    }
-    else {
-        content = children;
-    }
-    return (React__default$1.createElement(Component, __assign$1({ className: _className }, rest, { ref: ref }), content));
+    return (React__default$1.createElement(Component, __assign$1({ className: classNames$1('navbar', (_b = {},
+            _b["bg-".concat(color)] = color,
+            _b["navbar-".concat(colorScheme)] = colorScheme,
+            _b[typeof expand === 'boolean' ? 'navbar-expand' : "navbar-expand-".concat(expand)] = expand,
+            _b), placement, className) }, rest, { ref: ref }), container ? (React__default$1.createElement("div", { className: typeof container === 'string' ? "container-".concat(container) : 'container' }, children)) : (React__default$1.createElement(React__default$1.Fragment, null, children))));
 });
 CNavbar.propTypes = {
     children: propTypesExports.node,
@@ -11892,9 +11779,8 @@ CNavbar.displayName = 'CNavbar';
 
 var CNavbarBrand = forwardRef(function (_a, ref) {
     var children = _a.children, component = _a.component, className = _a.className, rest = __rest$1(_a, ["children", "component", "className"]);
-    var Component = component ? component : rest.href ? 'a' : 'span';
-    var _className = classNames$1('navbar-brand', className);
-    return (React__default$1.createElement(Component, __assign$1({ className: _className }, rest, { ref: ref }), children));
+    var Component = component !== null && component !== void 0 ? component : (rest.href ? 'a' : 'span');
+    return (React__default$1.createElement(Component, __assign$1({ className: classNames$1('navbar-brand', className) }, rest, { ref: ref }), children));
 });
 CNavbarBrand.propTypes = {
     children: propTypesExports.node,
@@ -11905,8 +11791,7 @@ CNavbarBrand.displayName = 'CNavbarBrand';
 
 var CNavbarNav = forwardRef(function (_a, ref) {
     var children = _a.children, _b = _a.component, Component = _b === void 0 ? 'ul' : _b, className = _a.className, rest = __rest$1(_a, ["children", "component", "className"]);
-    var _className = classNames$1('navbar-nav', className);
-    return (React__default$1.createElement(Component, __assign$1({ className: _className, role: "navigation" }, rest, { ref: ref }), children));
+    return (React__default$1.createElement(Component, __assign$1({ className: classNames$1('navbar-nav', className), role: "navigation" }, rest, { ref: ref }), children));
 });
 CNavbarNav.propTypes = {
     children: propTypesExports.node,
@@ -11917,8 +11802,7 @@ CNavbarNav.displayName = 'CNavbarNav';
 
 var CNavbarText = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest$1(_a, ["children", "className"]);
-    var _className = classNames$1('navbar-text', className);
-    return (React__default$1.createElement("span", __assign$1({ className: _className }, rest, { ref: ref }), children));
+    return (React__default$1.createElement("span", __assign$1({ className: classNames$1('navbar-text', className) }, rest, { ref: ref }), children));
 });
 CNavbarText.propTypes = {
     children: propTypesExports.node,
@@ -11928,8 +11812,7 @@ CNavbarText.displayName = 'CNavbarText';
 
 var CNavbarToggler = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest$1(_a, ["children", "className"]);
-    var _className = classNames$1('navbar-toggler', className);
-    return (React__default$1.createElement("button", __assign$1({ type: "button", className: _className }, rest, { ref: ref }), children ? children : React__default$1.createElement("span", { className: "navbar-toggler-icon" })));
+    return (React__default$1.createElement("button", __assign$1({ type: "button", className: classNames$1('navbar-toggler', className) }, rest, { ref: ref }), children !== null && children !== void 0 ? children : React__default$1.createElement("span", { className: "navbar-toggler-icon" })));
 });
 CNavbarToggler.propTypes = {
     children: propTypesExports.node,
@@ -11938,9 +11821,8 @@ CNavbarToggler.propTypes = {
 CNavbarToggler.displayName = 'CNavbarToggler';
 
 var COffcanvas = 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$1(_a, ["children", "backdrop", "className", "keyboard", "onHide", "onShow", "placement", "portal", "responsive", "scroll", "visible"]);
-    var _j = 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$1(_a, ["children", "backdrop", "className", "keyboard", "onHide", "onShow", "placement", "portal", "responsive", "scroll", "visible"]);
+    var _h = useState(visible), _visible = _h[0], setVisible = _h[1];
     var offcanvasRef = useRef(null);
     var forkedRef = useForkedRef(ref, offcanvasRef);
     useEffect(function () {
@@ -11959,19 +11841,6 @@ var COffcanvas = 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$1((_b = {},
-        _b["offcanvas".concat(typeof responsive !== 'boolean' ? '-' + responsive : '')] = responsive,
-        _b["offcanvas-".concat(placement)] = placement,
-        _b), className);
     var handleDismiss = function () {
         setVisible(false);
     };
@@ -11980,25 +11849,25 @@ var COffcanvas = forwardRef(function (_a, ref) {
             setVisible(false);
         }
     };
-    var handleKeyDown = useCallback(function (event) {
+    var handleKeyDown = function (event) {
         if (event.key === 'Escape' && keyboard) {
             return handleDismiss();
         }
-    }, [ref, handleDismiss]);
-    var offcanvas = function (ref, state) {
-        return (React__default$1.createElement(React__default$1.Fragment, null,
-            React__default$1.createElement("div", __assign$1({ className: classNames$1(_className, getTransitionClass(state)), role: "dialog", tabIndex: -1, onKeyDown: handleKeyDown }, rest, { ref: ref }), children)));
     };
     return (React__default$1.createElement(React__default$1.Fragment, null,
         React__default$1.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
-                ? createPortal(offcanvas(forkedRef, state), document.body)
-                : offcanvas(forkedRef, state);
+            var _a;
+            return (React__default$1.createElement(CConditionalPortal, { portal: portal },
+                React__default$1.createElement("div", __assign$1({ className: classNames$1((_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 &&
-                createPortal(React__default$1.createElement(CBackdrop, { className: "offcanvas-backdrop", onClick: handleBackdropDismiss, visible: _visible }), document.body)
-            : backdrop && (React__default$1.createElement(CBackdrop, { className: "offcanvas-backdrop", onClick: handleBackdropDismiss, visible: _visible }))));
+        backdrop && (React__default$1.createElement(CConditionalPortal, { portal: portal },
+            React__default$1.createElement(CBackdrop, { className: "offcanvas-backdrop", onClick: handleBackdropDismiss, visible: _visible })))));
 });
 COffcanvas.propTypes = {
     backdrop: propTypesExports.oneOfType([propTypesExports.bool, propTypesExports.oneOf(['static'])]),
@@ -12021,8 +11890,7 @@ COffcanvas.displayName = 'COffcanvas';
 
 var COffcanvasBody = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest$1(_a, ["children", "className"]);
-    var _className = classNames$1('offcanvas-body', className);
-    return (React__default$1.createElement("div", __assign$1({ className: _className }, rest, { ref: ref }), children));
+    return (React__default$1.createElement("div", __assign$1({ className: classNames$1('offcanvas-body', className) }, rest, { ref: ref }), children));
 });
 COffcanvasBody.propTypes = {
     children: propTypesExports.node,
@@ -12032,8 +11900,7 @@ COffcanvasBody.displayName = 'COffcanvasBody';
 
 var COffcanvasHeader = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest$1(_a, ["children", "className"]);
-    var _className = classNames$1('offcanvas-header', className);
-    return (React__default$1.createElement("div", __assign$1({ className: _className }, rest, { ref: ref }), children));
+    return (React__default$1.createElement("div", __assign$1({ className: classNames$1('offcanvas-header', className) }, rest, { ref: ref }), children));
 });
 COffcanvasHeader.propTypes = {
     children: propTypesExports.node,
@@ -12043,8 +11910,7 @@ COffcanvasHeader.displayName = 'COffcanvasHeader';
 
 var COffcanvasTitle = forwardRef(function (_a, ref) {
     var children = _a.children, _b = _a.component, Component = _b === void 0 ? 'h5' : _b, className = _a.className, rest = __rest$1(_a, ["children", "component", "className"]);
-    var _className = classNames$1('offcanvas-title', className);
-    return (React__default$1.createElement(Component, __assign$1({ className: _className }, rest, { ref: ref }), children));
+    return (React__default$1.createElement(Component, __assign$1({ className: classNames$1('offcanvas-title', className) }, rest, { ref: ref }), children));
 });
 COffcanvasTitle.propTypes = {
     children: propTypesExports.node,
@@ -12056,12 +11922,11 @@ COffcanvasTitle.displayName = 'COffcanvasTitle';
 var CPagination = forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, align = _a.align, className = _a.className, size = _a.size, rest = __rest$1(_a, ["children", "align", "className", "size"]);
-    var _className = classNames$1('pagination', (_b = {},
-        _b["justify-content-".concat(align)] = align,
-        _b["pagination-".concat(size)] = size,
-        _b), className);
     return (React__default$1.createElement("nav", __assign$1({ ref: ref }, rest),
-        React__default$1.createElement("ul", { className: _className }, children)));
+        React__default$1.createElement("ul", { className: classNames$1('pagination', (_b = {},
+                _b["justify-content-".concat(align)] = align,
+                _b["pagination-".concat(size)] = size,
+                _b), className) }, children)));
 });
 CPagination.propTypes = {
     align: propTypesExports.oneOf(['start', 'center', 'end']),
@@ -12073,12 +11938,11 @@ CPagination.displayName = 'CPagination';
 
 var CPaginationItem = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, component = _a.component, rest = __rest$1(_a, ["children", "className", "component"]);
-    var _className = classNames$1('page-item', {
-        active: rest.active,
-        disabled: rest.disabled,
-    }, className);
-    var Component = component ? component : rest.active ? 'span' : 'a';
-    return (React__default$1.createElement("li", __assign$1({ className: _className }, (rest.active && { 'aria-current': 'page' })), Component === 'a' ? (React__default$1.createElement(CLink, __assign$1({ className: "page-link", component: Component }, rest, { ref: ref }), children)) : (React__default$1.createElement(Component, { className: "page-link", ref: ref }, children))));
+    var Component = component !== null && component !== void 0 ? component : (rest.active ? 'span' : 'a');
+    return (React__default$1.createElement("li", __assign$1({ className: classNames$1('page-item', {
+            active: rest.active,
+            disabled: rest.disabled,
+        }, className) }, (rest.active && { 'aria-current': 'page' })), Component === 'a' ? (React__default$1.createElement(CLink, __assign$1({ className: "page-link", component: Component }, rest, { ref: ref }), children)) : (React__default$1.createElement(Component, { className: "page-link", ref: ref }, children))));
 });
 CPaginationItem.propTypes = {
     children: propTypesExports.node,
@@ -12110,11 +11974,10 @@ var CPlaceholder = forwardRef(function (_a, ref) {
             repsonsiveClassNames.push("col".concat(infix));
         }
     });
-    var _className = classNames$1(animation ? "placeholder-".concat(animation) : 'placeholder', (_b = {},
-        _b["bg-".concat(color)] = color,
-        _b["placeholder-".concat(size)] = size,
-        _b), repsonsiveClassNames, className);
-    return (React__default$1.createElement(Component, __assign$1({ className: _className }, rest, { ref: ref }), children));
+    return (React__default$1.createElement(Component, __assign$1({ className: classNames$1(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']),
@@ -12129,12 +11992,11 @@ CPlaceholder.displayName = 'CPlaceholder';
 var CProgressBar = forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, animated = _a.animated, className = _a.className, color = _a.color, _c = _a.value, value = _c === void 0 ? 0 : _c, variant = _a.variant, rest = __rest$1(_a, ["children", "animated", "className", "color", "value", "variant"]);
-    var _className = classNames$1('progress-bar', (_b = {},
-        _b["bg-".concat(color)] = color,
-        _b["progress-bar-".concat(variant)] = variant,
-        _b['progress-bar-animated'] = animated,
-        _b), className);
-    return (React__default$1.createElement("div", __assign$1({ className: _className, role: "progressbar", style: { width: "".concat(value, "%") }, "aria-valuenow": value, "aria-valuemin": 0, "aria-valuemax": 100 }, rest, { ref: ref }), children));
+    return (React__default$1.createElement("div", __assign$1({ className: classNames$1('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,
@@ -12148,11 +12010,10 @@ CProgressBar.displayName = 'CProgressBar';
 
 var CProgress = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, height = _a.height, thin = _a.thin, _b = _a.value, value = _b === void 0 ? 0 : _b, white = _a.white, rest = __rest$1(_a, ["children", "className", "height", "thin", "value", "white"]);
-    var _className = classNames$1('progress', {
-        'progress-thin': thin,
-        'progress-white': white,
-    }, className);
-    return (React__default$1.createElement("div", { className: _className, style: height ? { height: "".concat(height, "px") } : {}, ref: ref }, value ? (React__default$1.createElement(CProgressBar, __assign$1({ value: value }, rest), children)) : (children)));
+    return (React__default$1.createElement("div", { className: classNames$1('progress', {
+            'progress-thin': thin,
+            'progress-white': white,
+        }, className), style: height ? { height: "".concat(height, "px") } : {}, ref: ref }, value ? (React__default$1.createElement(CProgressBar, __assign$1({ value: value }, rest), children)) : (children)));
 });
 CProgress.propTypes = {
     children: propTypesExports.node,
@@ -12186,15 +12047,6 @@ var CPopover = function (_a) {
     useEffect(function () {
         setVisible(visible);
     }, [visible]);
-    var getTransitionClass = function (state) {
-        return state === 'entering'
-            ? 'fade'
-            : state === 'entered'
-                ? 'fade show'
-                : state === 'exiting'
-                    ? 'fade'
-                    : 'fade';
-    };
     return (React__default$1.createElement(React__default$1.Fragment, null,
         React__default$1.cloneElement(children, __assign$1(__assign$1(__assign$1({ ref: setReferenceElement }, ((trigger === 'click' || trigger.includes('click')) && {
             onClick: function () { return setVisible(!_visible); },
@@ -12209,13 +12061,12 @@ var CPopover = function (_a) {
             createPortal(React__default$1.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__default$1.createElement("div", __assign$1({ className: classNames$1("popover bs-popover-".concat(placement === 'left' ? 'start' : placement === 'right' ? 'end' : placement), className, transitionClass), ref: setPopperElement, role: "tooltip", style: styles.popper }, attributes.popper, rest),
-                    React__default$1.createElement("div", { className: "popover-arrow", style: styles.arrow, ref: setArrowElement }),
-                    React__default$1.createElement("div", { className: "popover-header" }, title),
-                    React__default$1.createElement("div", { className: "popover-body" }, content)));
-            }), document.body)));
+                }, unmountOnExit: true }, function (state) { return (React__default$1.createElement("div", __assign$1({ className: classNames$1('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__default$1.createElement("div", { className: "popover-arrow", style: styles.arrow, ref: setArrowElement }),
+                React__default$1.createElement("div", { className: "popover-header" }, title),
+                React__default$1.createElement("div", { className: "popover-body" }, content))); }), document.body)));
 };
 CPopover.propTypes = {
     children: propTypesExports.node,
@@ -13605,7 +13456,6 @@ CIcon.displayName = 'CIcon';
 
 var CSmartPagination = forwardRef(function (_a, ref) {
     var className = _a.className, _b = _a.activePage, activePage = _b === void 0 ? 1 : _b, _c = _a.align, align = _c === void 0 ? 'start' : _c, _d = _a.arrows, arrows = _d === void 0 ? true : _d, _e = _a.dots, dots = _e === void 0 ? true : _e, _f = _a.doubleArrows, doubleArrows = _f === void 0 ? true : _f, _g = _a.firstButton, firstButton = _g === void 0 ? React__default$1.createElement(React__default$1.Fragment, null, "\u00AB") : _g, _h = _a.lastButton, lastButton = _h === void 0 ? React__default$1.createElement(React__default$1.Fragment, null, "\u00BB") : _h, _j = _a.limit, limit = _j === void 0 ? 5 : _j, _k = _a.nextButton, nextButton = _k === void 0 ? React__default$1.createElement(React__default$1.Fragment, null, "\u203A") : _k, onActivePageChange = _a.onActivePageChange, pages = _a.pages, _l = _a.previousButton, previousButton = _l === void 0 ? React__default$1.createElement(React__default$1.Fragment, null, "\u2039") : _l, size = _a.size, rest = __rest$1(_a, ["className", "activePage", "align", "arrows", "dots", "doubleArrows", "firstButton", "lastButton", "limit", "nextButton", "onActivePageChange", "pages", "previousButton", "size"]);
-    var _classNames = classNames$1("justify-content-".concat(align), className);
     var showDots = (function () {
         return dots && limit > 4 && limit < pages;
     })();
@@ -13634,25 +13484,22 @@ var CSmartPagination = forwardRef(function (_a, ref) {
         return pages < computedLimit ? pages : computedLimit;
     })();
     var items = (function () {
-        if (activePage - maxPrevItems <= 1) {
-            return Array.from({
+        return activePage - maxPrevItems <= 1
+            ? Array.from({
                 length: itemsAmount,
-            }, function (_v, i) { return i + 1; });
-        }
-        else {
-            return Array.from({
+            }, function (_v, i) { return i + 1; })
+            : Array.from({
                 length: itemsAmount,
             }, function (_v, i) {
                 return lastItem - i;
             }).reverse();
-        }
     })();
     var setPage = function (number) {
         if (number !== activePage) {
             onActivePageChange && onActivePageChange(number);
         }
     };
-    return (React__default$1.createElement(CPagination, __assign$1({ className: _classNames, "aria-label": "pagination", size: size }, rest, { ref: ref }),
+    return (React__default$1.createElement(CPagination, __assign$1({ className: classNames$1("justify-content-".concat(align), className), "aria-label": "pagination", size: size }, rest, { ref: ref }),
         doubleArrows && (React__default$1.createElement(CPaginationItem, { onClick: function () { return setPage(1); }, "aria-label": "Go to first page", "aria-disabled": activePage === 1, disabled: activePage === 1 }, firstButton)),
         arrows && (React__default$1.createElement(CPaginationItem, { onClick: function () { return setPage(activePage - 1); }, "aria-label": "Go to previous page", "aria-disabled": activePage === 1, disabled: activePage === 1 }, previousButton)),
         beforeDots && (React__default$1.createElement(CPaginationItem, { role: "separator", disabled: true }, "\u2026")),
@@ -13684,10 +13531,9 @@ CSmartPagination.displayName = 'CSmartPagination';
 var CTableHead = forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, color = _a.color, rest = __rest$1(_a, ["children", "className", "color"]);
-    var _className = classNames$1((_b = {},
-        _b["table-".concat(color)] = color,
-        _b), className);
-    return (React__default$1.createElement("thead", __assign$1({ className: _className ? _className : undefined }, rest, { ref: ref }), children));
+    return (React__default$1.createElement("thead", __assign$1({ className: classNames$1((_b = {},
+            _b["table-".concat(color)] = color,
+            _b), className) || undefined }, rest, { ref: ref }), children));
 });
 CTableHead.propTypes = {
     children: propTypesExports.node,
@@ -13699,10 +13545,9 @@ CTableHead.displayName = 'CTableHead';
 var CTableHeaderCell = forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, color = _a.color, rest = __rest$1(_a, ["children", "className", "color"]);
-    var _className = classNames$1((_b = {},
-        _b["table-".concat(color)] = color,
-        _b), className);
-    return (React__default$1.createElement("th", __assign$1({ className: _className ? _className : undefined }, rest, { ref: ref }), children));
+    return (React__default$1.createElement("th", __assign$1({ className: classNames$1((_b = {},
+            _b["table-".concat(color)] = color,
+            _b), className) || undefined }, rest, { ref: ref }), children));
 });
 CTableHeaderCell.propTypes = {
     children: propTypesExports.node,
@@ -13714,10 +13559,9 @@ CTableHeaderCell.displayName = 'CTableHeaderCell';
 var CTableBody = forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, color = _a.color, rest = __rest$1(_a, ["children", "className", "color"]);
-    var _className = classNames$1((_b = {},
-        _b["table-".concat(color)] = color,
-        _b), className);
-    return (React__default$1.createElement("tbody", __assign$1({ className: _className ? _className : undefined }, rest, { ref: ref }), children));
+    return (React__default$1.createElement("tbody", __assign$1({ className: classNames$1((_b = {},
+            _b["table-".concat(color)] = color,
+            _b), className) || undefined }, rest, { ref: ref }), children));
 });
 CTableBody.propTypes = {
     children: propTypesExports.node,
@@ -13729,13 +13573,12 @@ CTableBody.displayName = 'CTableBody';
 var CTableDataCell = forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, active = _a.active, align = _a.align, className = _a.className, color = _a.color, rest = __rest$1(_a, ["children", "active", "align", "className", "color"]);
-    var _className = classNames$1((_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__default$1.createElement(Component, __assign$1({ className: _className ? _className : undefined }, rest, { ref: ref }), children));
+    return (React__default$1.createElement(Component, __assign$1({ className: classNames$1((_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,
@@ -13749,12 +13592,11 @@ CTableDataCell.displayName = 'CTableDataCell';
 var CTableRow = forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, active = _a.active, align = _a.align, className = _a.className, color = _a.color, rest = __rest$1(_a, ["children", "active", "align", "className", "color"]);
-    var _className = classNames$1((_b = {},
-        _b["align-".concat(align)] = align,
-        _b['table-active'] = active,
-        _b["table-".concat(color)] = color,
-        _b), className);
-    return (React__default$1.createElement("tr", __assign$1({ className: _className ? _className : undefined }, rest, { ref: ref }), children));
+    return (React__default$1.createElement("tr", __assign$1({ className: classNames$1((_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,
@@ -13768,10 +13610,9 @@ CTableRow.displayName = 'CTableRow';
 var CTableFoot = forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, color = _a.color, rest = __rest$1(_a, ["children", "className", "color"]);
-    var _className = classNames$1((_b = {},
-        _b["table-".concat(color)] = color,
-        _b), className);
-    return (React__default$1.createElement("tfoot", __assign$1({ className: _className ? _className : undefined }, rest, { ref: ref }), children));
+    return (React__default$1.createElement("tfoot", __assign$1({ className: classNames$1((_b = {},
+            _b["table-".concat(color)] = color,
+            _b), className) || undefined }, rest, { ref: ref }), children));
 });
 CTableFoot.propTypes = {
     children: propTypesExports.node,
@@ -13791,10 +13632,10 @@ CTableCaption.displayName = 'CTableCaption';
 
 var CTableResponsiveWrapper = function (_a) {
     var children = _a.children, responsive = _a.responsive, rest = __rest$1(_a, ["children", "responsive"]);
-    return responsive ? (React__default$1.createElement("div", __assign$1({ className: typeof responsive === 'boolean' ? 'table-responsive' : "table-responsive-".concat(responsive) }, rest), children)) : (children);
+    return responsive ? (React__default$1.createElement("div", __assign$1({ className: typeof responsive === 'boolean' ? 'table-responsive' : "table-responsive-".concat(responsive) }, rest), children)) : (React__default$1.createElement(React__default$1.Fragment, null, children));
 };
 CTableResponsiveWrapper.propTypes = {
-    children: propTypesExports.any,
+    children: propTypesExports.node,
     responsive: propTypesExports.oneOfType([
         propTypesExports.bool,
         propTypesExports.oneOf(['sm', 'md', 'lg', 'xl', 'xxl']),
@@ -13811,20 +13652,11 @@ var pretifyName$1 = function (name) {
         .map(function (word) { return word.charAt(0).toUpperCase() + word.slice(1); })
         .join(' ');
 };
-var getColumnLabel$1 = function (column) {
-    return typeof column === 'object'
-        ? column.label !== undefined
-            ? column.label
-            : pretifyName$1(column.key)
-        : pretifyName$1(column);
-};
+var getColumnLabel$1 = function (column) { var _a; return typeof column === 'object' ? (_a = column.label) !== null && _a !== void 0 ? _a : pretifyName$1(column.key) : pretifyName$1(column); };
 var getColumnNames$1 = function (columns, items) {
     return columns
         ? columns.map(function (column) {
-            if (typeof column === 'object')
-                return column.key;
-            else
-                return column;
+            return typeof column === 'object' ? column.key : column;
         })
         : items && getColumnNamesFromItems$1(items);
 };
@@ -13835,21 +13667,20 @@ var getColumnNamesFromItems$1 = function (items) {
 var CTable = forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, align = _a.align, borderColor = _a.borderColor, bordered = _a.bordered, borderless = _a.borderless, caption = _a.caption, captionTop = _a.captionTop, className = _a.className, color = _a.color, columns = _a.columns, footer = _a.footer, hover = _a.hover, items = _a.items, responsive = _a.responsive, small = _a.small, striped = _a.striped, stripedColumns = _a.stripedColumns, tableFootProps = _a.tableFootProps, tableHeadProps = _a.tableHeadProps, rest = __rest$1(_a, ["children", "align", "borderColor", "bordered", "borderless", "caption", "captionTop", "className", "color", "columns", "footer", "hover", "items", "responsive", "small", "striped", "stripedColumns", "tableFootProps", "tableHeadProps"]);
-    var _className = classNames$1('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 columnNames = useMemo(function () { return getColumnNames$1(columns, items); }, [columns, items]);
     return (React__default$1.createElement(CTableResponsiveWrapper, { responsive: responsive },
-        React__default$1.createElement("table", __assign$1({ className: _className }, rest, { ref: ref }),
+        React__default$1.createElement("table", __assign$1({ className: classNames$1('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__default$1.createElement(CTableCaption, null, caption || captionTop)),
             columns && (React__default$1.createElement(CTableHead, __assign$1({}, tableHeadProps),
                 React__default$1.createElement(CTableRow, null, columns.map(function (column, index) { return (React__default$1.createElement(CTableHeaderCell, __assign$1({}, (column._props && __assign$1({}, column._props)), (column._style && { style: __assign$1({}, column._style) }), { key: index }), getColumnLabel$1(column))); })))),
@@ -13937,10 +13768,7 @@ var getColumnLabel = function (column) {
 var getColumnNames = function (columns, items) {
     return columns
         ? columns.map(function (column) {
-            if (typeof column === 'object')
-                return column.key;
-            else
-                return column;
+            return typeof column === 'object' ? column.key : column;
         })
         : getColumnNamesFromItems(items);
 };
@@ -13973,7 +13801,7 @@ var getTableHeaderCellStyles = function (column, columnSorter) {
     var style = {};
     if (columnSorter &&
         (typeof column !== 'object' ||
-            (typeof column === 'object' && (typeof column.sorter === 'undefined' || column.sorter)))) {
+            (typeof column === 'object' && (column.sorter === undefined || column.sorter)))) {
         style['cursor'] = 'pointer';
     }
     if (typeof column === 'object' && column._style) {
@@ -13989,7 +13817,7 @@ var isSortable = function (i, columns, columnSorter, itemsDataColumns, columnNam
     return (columnSorter &&
         (!columns ||
             typeof column !== 'object' ||
-            (typeof column === 'object' && (typeof column.sorter === 'undefined' || column.sorter))) &&
+            (typeof column === 'object' && (column.sorter === undefined || column.sorter))) &&
         isDataColumn);
 };
 var pretifyName = function (name) {
@@ -14329,7 +14157,7 @@ var CSmartTable = forwardRef(function (_a, ref) {
             return;
         }
         //if column changed or sort was descending change asc to true
-        var state = sorterState ? sorterState : { column: '', state: '' };
+        var state = sorterState !== null && sorterState !== void 0 ? sorterState : { column: '', state: '' };
         if (state.column === column) {
             if (state.state === 0) {
                 state.state = 'asc';
@@ -14338,12 +14166,7 @@ var CSmartTable = forwardRef(function (_a, ref) {
                 state.state = 'desc';
             }
             else {
-                if (typeof columnSorter === 'object' && !columnSorter.resetable) {
-                    state.state = 'asc';
-                }
-                else {
-                    state.state = 0;
-                }
+                state.state = typeof columnSorter === 'object' && !columnSorter.resetable ? 'asc' : 0;
             }
         }
         else {
@@ -14381,13 +14204,13 @@ var CSmartTable = forwardRef(function (_a, ref) {
                 } })))))))),
         React__default$1.createElement("div", { className: "position-relative" },
             React__default$1.createElement(CTable, __assign$1({}, tableProps),
-                header && (React__default$1.createElement(CSmartTableHead, __assign$1({}, tableHeadProps, { columnFilter: columnFilter, columnFilterState: columnFilterState, columns: columns ? columns : columnNames, columnSorter: columnSorter, items: _items, selectable: selectable, selectAll: selectAll, selectedAll: selectedAll, sorterState: sorterState, sortingIcon: sortingIcon, sortingIconAscending: sortingIconAscending, sortingIconDescending: sortingIconDescending, handleFilterOnChange: function (key, event) {
+                header && (React__default$1.createElement(CSmartTableHead, __assign$1({}, tableHeadProps, { columnFilter: columnFilter, columnFilterState: columnFilterState, columns: columns !== null && columns !== void 0 ? columns : columnNames, columnSorter: columnSorter, items: _items, selectable: selectable, selectAll: selectAll, selectedAll: selectedAll, sorterState: sorterState, sortingIcon: sortingIcon, sortingIconAscending: sortingIconAscending, sortingIconDescending: sortingIconDescending, handleFilterOnChange: function (key, event) {
                         return handleColumnFilterChange(key, event, 'change');
                     }, handleFilterOnInput: function (key, event) { return handleColumnFilterChange(key, event, 'input'); }, handleOnCustomFilterChange: function (key, event) { return handleColumnFilterChange(key, event); }, handleSelectAllChecked: function () { return handleSelectAllChecked(); }, handleSort: function (key, index) { return handleSorterChange(key, index); } }))),
                 React__default$1.createElement(CSmartTableBody, __assign$1({ clickableRows: clickableRows, currentItems: currentItems, firstItemOnActivePageIndex: firstItemOnActivePageIndex, noItemsLabel: noItemsLabel, onRowClick: function (item, index, columnName, event) {
                         return clickableRows && onRowClick && onRowClick(item, index, columnName, event);
                     }, onRowChecked: function (item, value) { return handleRowChecked(item, value); }, columnNames: columnNames, scopedColumns: scopedColumns, selectable: selectable, selected: _selected }, tableBodyProps)),
-                typeof footer === 'boolean' && footer && (React__default$1.createElement(CSmartTableHead, __assign$1({ component: CTableFoot }, tableFootProps, { columnFilter: false, columnSorter: false, columns: columns ? columns : columnNames, items: _items, handleSelectAllChecked: function () { return handleSelectAllChecked(); }, selectable: selectable, selectAll: selectAll, selectedAll: selectedAll }))),
+                typeof footer === 'boolean' && footer && (React__default$1.createElement(CSmartTableHead, __assign$1({ component: CTableFoot }, tableFootProps, { columnFilter: false, columnSorter: false, columns: columns !== null && columns !== void 0 ? columns : columnNames, items: _items, handleSelectAllChecked: function () { return handleSelectAllChecked(); }, selectable: selectable, selectAll: selectAll, selectedAll: selectedAll }))),
                 Array.isArray(footer) && (React__default$1.createElement(CTableFoot, __assign$1({}, tableFootProps),
                     React__default$1.createElement(CTableRow, null, footer.map(function (item, index) { return (React__default$1.createElement(CTableDataCell, __assign$1({}, (typeof item === 'object' && item._props && __assign$1({}, item._props)), { key: index }), typeof item === 'object' ? item.label : item)); }))))),
             loading && (React__default$1.createElement(CElementCover, { boundaries: [
@@ -14475,7 +14298,7 @@ var CSidebar = forwardRef(function (_a, ref) {
         setVisible(visible);
     }, [visible]);
     useEffect(function () {
-        typeof inViewport !== 'undefined' && onVisibleChange && onVisibleChange(inViewport);
+        inViewport !== undefined && onVisibleChange && onVisibleChange(inViewport);
         !inViewport && onHide && onHide();
         inViewport && onShow && onShow();
     }, [inViewport]);
@@ -14533,19 +14356,18 @@ var CSidebar = forwardRef(function (_a, ref) {
             mobile &&
             handleHide();
     };
-    var _className = classNames$1('sidebar', (_b = {},
-        _b["sidebar-".concat(colorScheme)] = colorScheme,
-        _b['sidebar-narrow'] = narrow,
-        _b['sidebar-overlaid'] = overlaid,
-        _b["sidebar-".concat(placement)] = placement,
-        _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__default$1.createElement(React__default$1.Fragment, null,
-        React__default$1.createElement("div", __assign$1({ className: _className }, rest, { ref: forkedRef }), children),
+        React__default$1.createElement("div", __assign$1({ className: classNames$1('sidebar', (_b = {},
+                _b["sidebar-".concat(colorScheme)] = colorScheme,
+                _b['sidebar-narrow'] = narrow,
+                _b['sidebar-overlaid'] = overlaid,
+                _b["sidebar-".concat(placement)] = placement,
+                _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 &&
             createPortal(React__default$1.createElement(CBackdrop, { className: "sidebar-backdrop", visible: _visible }), document.body)));
@@ -14569,8 +14391,7 @@ CSidebar.displayName = 'CSidebar';
 
 var CSidebarBrand = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest$1(_a, ["children", "className"]);
-    var _className = classNames$1('sidebar-brand', className);
-    return (React__default$1.createElement("div", __assign$1({ className: _className, ref: ref }, rest), children));
+    return (React__default$1.createElement("div", __assign$1({ className: classNames$1('sidebar-brand', className), ref: ref }, rest), children));
 });
 CSidebarBrand.propTypes = {
     children: propTypesExports.node,
@@ -14580,8 +14401,7 @@ CSidebarBrand.displayName = 'CSidebarBrand';
 
 var CSidebarFooter = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest$1(_a, ["children", "className"]);
-    var _className = classNames$1('sidebar-footer', className);
-    return (React__default$1.createElement("div", __assign$1({ className: _className, ref: ref }, rest), children));
+    return (React__default$1.createElement("div", __assign$1({ className: classNames$1('sidebar-footer', className), ref: ref }, rest), children));
 });
 CSidebarFooter.propTypes = {
     children: propTypesExports.node,
@@ -14591,8 +14411,7 @@ CSidebarFooter.displayName = 'CSidebarFooter';
 
 var CSidebarToggler = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest$1(_a, ["children", "className"]);
-    var _className = classNames$1('sidebar-toggler', className);
-    return (React__default$1.createElement("button", __assign$1({ className: _className, ref: ref }, rest), children));
+    return (React__default$1.createElement("button", __assign$1({ className: classNames$1('sidebar-toggler', className), ref: ref }, rest), children));
 });
 CSidebarToggler.propTypes = {
     children: propTypesExports.node,
@@ -14602,8 +14421,7 @@ CSidebarToggler.displayName = 'CSidebarToggler';
 
 var CSidebarHeader = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest$1(_a, ["children", "className"]);
-    var _className = classNames$1('sidebar-header', className);
-    return (React__default$1.createElement("div", __assign$1({ className: _className, ref: ref }, rest), children));
+    return (React__default$1.createElement("div", __assign$1({ className: classNames$1('sidebar-header', className), ref: ref }, rest), children));
 });
 CSidebarHeader.propTypes = {
     children: propTypesExports.node,
@@ -14613,8 +14431,7 @@ CSidebarHeader.displayName = 'CSidebarHeader';
 
 var CTabContent = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest$1(_a, ["children", "className"]);
-    var _className = classNames$1('tab-content', className);
-    return (React__default$1.createElement("div", __assign$1({ className: _className }, rest, { ref: ref }), children));
+    return (React__default$1.createElement("div", __assign$1({ className: classNames$1('tab-content', className) }, rest, { ref: ref }), children));
 });
 CTabContent.propTypes = {
     children: propTypesExports.node,
@@ -14626,16 +14443,10 @@ var CTabPane = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, onHide = _a.onHide, onShow = _a.onShow, visible = _a.visible, rest = __rest$1(_a, ["children", "className", "onHide", "onShow", "visible"]);
     var tabPaneRef = useRef();
     var forkedRef = useForkedRef(ref, tabPaneRef);
-    var getTransitionClass = function (state) {
-        return state === 'entered' && 'show';
-    };
-    var _className = classNames$1('tab-pane', 'fade', {
-        active: visible,
-    }, className);
-    return (React__default$1.createElement(Transition$1, { in: visible, nodeRef: tabPaneRef, onEnter: onShow, onExit: onHide, timeout: 150 }, function (state) {
-        var transitionClass = getTransitionClass(state);
-        return (React__default$1.createElement("div", __assign$1({ className: classNames$1(_className, transitionClass) }, rest, { ref: forkedRef }), children));
-    }));
+    return (React__default$1.createElement(Transition$1, { in: visible, nodeRef: tabPaneRef, onEnter: onShow, onExit: onHide, timeout: 150 }, function (state) { return (React__default$1.createElement("div", __assign$1({ className: classNames$1('tab-pane', 'fade', {
+            active: visible,
+            show: state === 'entered',
+        }, className) }, rest, { ref: forkedRef }), children)); }));
 });
 CTabPane.propTypes = {
     children: propTypesExports.node,
@@ -14648,11 +14459,10 @@ CTabPane.displayName = 'CTabPane';
 
 var CToastContext = createContext({});
 var CToast = 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$1(_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$1(_a, ["children", "animation", "autohide", "className", "color", "delay", "index", "key", "visible", "onClose", "onShow"]);
     var toastRef = useRef();
     var forkedRef = useForkedRef(ref, toastRef);
-    var _g = useState(false), _visible = _g[0], setVisible = _g[1];
+    var _f = useState(false), _visible = _f[0], setVisible = _f[1];
     var timeout = useRef();
     useEffect(function () {
         setVisible(visible);
@@ -14674,25 +14484,17 @@ var CToast = forwardRef(function (_a, ref) {
             }, delay);
         }
     };
-    var _className = classNames$1('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__default$1.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__default$1.createElement(Transition$1, { in: _visible, nodeRef: toastRef, onEnter: function () { return onShow && onShow(index !== null && index !== void 0 ? index : null); }, onExited: function () { return onClose && onClose(index !== null && index !== void 0 ? index : null); }, timeout: 250, unmountOnExit: true }, function (state) {
+        var _a;
         return (React__default$1.createElement(CToastContext.Provider, { value: contextValues },
-            React__default$1.createElement("div", __assign$1({ className: classNames$1(_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__default$1.createElement("div", __assign$1({ className: classNames$1('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 = {
@@ -14712,8 +14514,7 @@ CToast.displayName = 'CToast';
 
 var CToastBody = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest$1(_a, ["children", "className"]);
-    var _className = classNames$1('toast-body', className);
-    return (React__default$1.createElement("div", __assign$1({ className: _className }, rest, { ref: ref }), children));
+    return (React__default$1.createElement("div", __assign$1({ className: classNames$1('toast-body', className) }, rest, { ref: ref }), children));
 });
 CToastBody.propTypes = {
     children: propTypesExports.node,
@@ -14731,8 +14532,7 @@ CToastClose.displayName = 'CToastClose';
 
 var CToastHeader = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, closeButton = _a.closeButton, rest = __rest$1(_a, ["children", "className", "closeButton"]);
-    var _className = classNames$1('toast-header', className);
-    return (React__default$1.createElement("div", __assign$1({ className: _className }, rest, { ref: ref }),
+    return (React__default$1.createElement("div", __assign$1({ className: classNames$1('toast-header', className) }, rest, { ref: ref }),
         children,
         closeButton && React__default$1.createElement(CToastClose, null)));
 });
@@ -14762,23 +14562,17 @@ var CToaster = forwardRef(function (_a, ref) {
             }),
         ], false); });
     };
-    var _className = classNames$1('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__default$1.createElement("div", __assign$1({ className: _className }, rest, { ref: ref }),
-            children,
-            toasts.map(function (toast) { return React__default$1.cloneElement(toast, { visible: true }); }))) : null;
-    };
-    return typeof window !== 'undefined' && placement
-        ? createPortal(toaster(ref), document.body)
-        : toaster(ref);
+    return (React__default$1.createElement(CConditionalPortal, { portal: typeof placement === 'string' }, toasts.length > 0 || children ? (React__default$1.createElement("div", __assign$1({ className: classNames$1('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__default$1.cloneElement(toast, { visible: true }); }))) : null));
 });
 CToaster.propTypes = {
     children: propTypesExports.node,
@@ -14823,15 +14617,6 @@ var CTooltip = function (_a) {
     useEffect(function () {
         setVisible(visible);
     }, [visible]);
-    var getTransitionClass = function (state) {
-        return state === 'entering'
-            ? 'fade'
-            : state === 'entered'
-                ? 'fade show'
-                : state === 'exiting'
-                    ? 'fade'
-                    : 'fade';
-    };
     return (React__default$1.createElement(React__default$1.Fragment, null,
         React__default$1.cloneElement(children, __assign$1(__assign$1(__assign$1({ ref: setReferenceElement }, ((trigger === 'click' || trigger.includes('click')) && {
             onClick: function () { return setVisible(!_visible); },
@@ -14846,12 +14631,11 @@ var CTooltip = function (_a) {
             createPortal(React__default$1.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__default$1.createElement("div", __assign$1({ className: classNames$1("tooltip bs-tooltip-".concat(placement === 'left' ? 'start' : placement === 'right' ? 'end' : placement), className, transitionClass), ref: setPopperElement, role: "tooltip", style: styles.popper }, attributes.popper, rest),
-                    React__default$1.createElement("div", { className: "tooltip-arrow", style: styles.arrow, ref: setArrowElement }),
-                    React__default$1.createElement("div", { className: "tooltip-inner" }, content)));
-            }), document.body)));
+                }, unmountOnExit: true }, function (state) { return (React__default$1.createElement("div", __assign$1({ className: classNames$1('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__default$1.createElement("div", { className: "tooltip-arrow", style: styles.arrow, ref: setArrowElement }),
+                React__default$1.createElement("div", { className: "tooltip-inner" }, content))); }), document.body)));
 };
 CTooltip.propTypes = {
     children: propTypesExports.node,
@@ -14868,8 +14652,7 @@ CTooltip.displayName = 'CTooltip';
 var CWidgetStatsA = forwardRef(function (_a, ref) {
     var _b;
     var action = _a.action, chart = _a.chart, className = _a.className, color = _a.color, title = _a.title, value = _a.value, rest = __rest$1(_a, ["action", "chart", "className", "color", "title", "value"]);
-    var _className = classNames$1((_b = {}, _b["bg-".concat(color)] = color, _b['text-high-emphasis-inverse'] = color, _b), className);
-    return (React__default$1.createElement(CCard, __assign$1({ className: _className }, rest, { ref: ref }),
+    return (React__default$1.createElement(CCard, __assign$1({ className: classNames$1((_b = {}, _b["bg-".concat(color)] = color, _b['text-high-emphasis-inverse'] = color, _b), className) }, rest, { ref: ref }),
         React__default$1.createElement(CCardBody, { className: "pb-0 d-flex justify-content-between align-items-start" },
             React__default$1.createElement("div", null,
                 value && React__default$1.createElement("div", { className: "fs-4 fw-semibold" }, value),
@@ -14930,12 +14713,10 @@ CWidgetStatsC.displayName = 'CWidgetStatsCWidgetStatsC';
 var CWidgetStatsD = forwardRef(function (_a, ref) {
     var _b;
     var className = _a.className, chart = _a.chart, color = _a.color, icon = _a.icon, values = _a.values, rest = __rest$1(_a, ["className", "chart", "color", "icon", "values"]);
-    var _className = classNames$1(className);
-    var classNameHeader = classNames$1('position-relative d-flex justify-content-center align-items-center', (_b = {},
-        _b["bg-".concat(color)] = color,
-        _b));
-    return (React__default$1.createElement(CCard, __assign$1({ className: _className }, rest, { ref: ref }),
-        React__default$1.createElement(CCardHeader, { className: classNameHeader },
+    return (React__default$1.createElement(CCard, __assign$1({ className: className }, rest, { ref: ref }),
+        React__default$1.createElement(CCardHeader, { className: classNames$1('position-relative d-flex justify-content-center align-items-center', (_b = {},
+                _b["bg-".concat(color)] = color,
+                _b)) },
             icon,
             chart),
         React__default$1.createElement(CCardBody, { className: "row text-center" }, values &&
@@ -14958,8 +14739,7 @@ CWidgetStatsD.displayName = 'CWidgetStatsD';
 
 var CWidgetStatsE = forwardRef(function (_a, ref) {
     var chart = _a.chart, className = _a.className, title = _a.title, value = _a.value, rest = __rest$1(_a, ["chart", "className", "title", "value"]);
-    var _className = classNames$1(className);
-    return (React__default$1.createElement(CCard, __assign$1({ className: _className }, rest, { ref: ref }),
+    return (React__default$1.createElement(CCard, __assign$1({ className: classNames$1(className) }, rest, { ref: ref }),
         React__default$1.createElement(CCardBody, { className: "text-center" },
             title && (React__default$1.createElement("div", { className: "text-medium-emphasis small text-uppercase fw-semibold" }, title)),
             value && React__default$1.createElement("div", { className: "fs-6 fw-semibold py-3" }, value),
@@ -14976,8 +14756,7 @@ CWidgetStatsE.displayName = 'CWidgetStatsE';
 
 var CWidgetStatsF = forwardRef(function (_a, ref) {
     var className = _a.className, color = _a.color, footer = _a.footer, icon = _a.icon, _b = _a.padding, padding = _b === void 0 ? true : _b, title = _a.title, value = _a.value, rest = __rest$1(_a, ["className", "color", "footer", "icon", "padding", "title", "value"]);
-    var _className = classNames$1(className);
-    return (React__default$1.createElement(CCard, __assign$1({ className: _className }, rest, { ref: ref }),
+    return (React__default$1.createElement(CCard, __assign$1({ className: className }, rest, { ref: ref }),
         React__default$1.createElement(CCardBody, { className: "d-flex align-items-center ".concat(padding === false && 'p-0') },
             React__default$1.createElement("div", { className: "me-3 text-white bg-".concat(color, " ").concat(padding ? 'p-3' : 'p-4') }, icon),
             React__default$1.createElement("div", null,
@@ -14996,5 +14775,5 @@ CWidgetStatsF.propTypes = {
 };
 CWidgetStatsF.displayName = 'CWidgetStatsF';
 
-export { CAccordion, CAccordionBody, CAccordionButton, CAccordionCollapse, CAccordionHeader, CAccordionItem, CAlert, CAlertHeading, CAlertLink, CAvatar, CBackdrop, CBadge, CBreadcrumb, CBreadcrumbItem, CButton, CButtonGroup, CButtonToolbar, CCallout, CCard, CCardBody, CCardFooter, CCardGroup, CCardHeader, CCardImage, CCardImageOverlay, CCardLink, CCardSubtitle, CCardText, CCardTitle, CCarousel, CCarouselCaption, CCarouselItem, CCloseButton, CCol, CCollapse, CContainer, CDatePicker, CDateRangePicker, CDropdown, CDropdownDivider, CDropdownHeader, CDropdownItem, CDropdownItemPlain, CDropdownMenu, CDropdownToggle, CElementCover, CFooter, CForm, CFormCheck, CFormControlValidation, CFormControlWrapper, CFormFeedback, CFormFloating, CFormInput, CFormLabel, CFormRange, CFormSelect, CFormSwitch, CFormText, CFormTextarea, CHeader, CHeaderBrand, CHeaderDivider, CHeaderNav, CHeaderText, CHeaderToggler, CImage, CInputGroup, CInputGroupText, CLink, CListGroup, CListGroupItem, CLoadingButton, CModal, CModalBody, CModalContent, CModalDialog, CModalFooter, CModalHeader, CModalTitle, CMultiSelect, CNav, CNavGroup, CNavGroupItems, CNavItem, CNavLink, CNavTitle, CNavbar, CNavbarBrand, CNavbarNav, CNavbarText, CNavbarToggler, COffcanvas, COffcanvasBody, COffcanvasHeader, COffcanvasTitle, CPagination, CPaginationItem, CPlaceholder, CPopover, CProgress, CProgressBar, CRow, CSidebar, CSidebarBrand, CSidebarFooter, CSidebarHeader, CSidebarNav, CSidebarToggler, CSmartPagination, CSmartTable, CSpinner, CTabContent, CTabPane, CTable, CTableBody, CTableCaption, CTableDataCell, CTableFoot, CTableHead, CTableHeaderCell, CTableRow, CTimePicker, CToast, CToastBody, CToastClose, CToastHeader, CToaster, CTooltip, CVirtualScroller, CWidgetStatsA, CWidgetStatsB, CWidgetStatsC, CWidgetStatsD, CWidgetStatsE, CWidgetStatsF };
+export { CAccordion, CAccordionBody, CAccordionButton, CAccordionCollapse, CAccordionHeader, CAccordionItem, CAlert, CAlertHeading, CAlertLink, CAvatar, CBackdrop, CBadge, CBreadcrumb, CBreadcrumbItem, CButton, CButtonGroup, CButtonToolbar, CCallout, CCard, CCardBody, CCardFooter, CCardGroup, CCardHeader, CCardImage, CCardImageOverlay, CCardLink, CCardSubtitle, CCardText, CCardTitle, CCarousel, CCarouselCaption, CCarouselItem, CCloseButton, CCol, CCollapse, CConditionalPortal, CContainer, CDatePicker, CDateRangePicker, CDropdown, CDropdownDivider, CDropdownHeader, CDropdownItem, CDropdownItemPlain, CDropdownMenu, CDropdownToggle, CElementCover, CFooter, CForm, CFormCheck, CFormControlValidation, CFormControlWrapper, CFormFeedback, CFormFloating, CFormInput, CFormLabel, CFormRange, CFormSelect, CFormSwitch, CFormText, CFormTextarea, CHeader, CHeaderBrand, CHeaderDivider, CHeaderNav, CHeaderText, CHeaderToggler, CImage, CInputGroup, CInputGroupText, CLink, CListGroup, CListGroupItem, CLoadingButton, CModal, CModalBody, CModalContent, CModalDialog, CModalFooter, CModalHeader, CModalTitle, CMultiSelect, CNav, CNavGroup, CNavGroupItems, CNavItem, CNavLink, CNavTitle, CNavbar, CNavbarBrand, CNavbarNav, CNavbarText, CNavbarToggler, COffcanvas, COffcanvasBody, COffcanvasHeader, COffcanvasTitle, CPagination, CPaginationItem, CPlaceholder, CPopover, CProgress, CProgressBar, CRow, CSidebar, CSidebarBrand, CSidebarFooter, CSidebarHeader, CSidebarNav, CSidebarToggler, CSmartPagination, CSmartTable, CSpinner, CTabContent, CTabPane, CTable, CTableBody, CTableCaption, CTableDataCell, CTableFoot, CTableHead, CTableHeaderCell, CTableRow, CTimePicker, CToast, CToastBody, CToastClose, CToastHeader, CToaster, CTooltip, CVirtualScroller, CWidgetStatsA, CWidgetStatsB, CWidgetStatsC, CWidgetStatsD, CWidgetStatsE, CWidgetStatsF };
 //# sourceMappingURL=index.es.js.map