@coreui/react 4.1.2 → 4.2.0

package/dist/index.es.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import React__default, { createContext, forwardRef, useState, useRef, useContext, useEffect, useMemo, Children, useLayoutEffect, useCallback } from 'react';
 import ReactDOM, { createPortal } from 'react-dom';
 
-/*! *****************************************************************************
+/******************************************************************************
 Copyright (c) Microsoft Corporation.
 
 Permission to use, copy, modify, and/or distribute this software for any
@@ -852,7 +852,7 @@ var factoryWithTypeCheckers = function(isValidElement, throwOnDirectAccess) {
         if (checkerResult == null) {
           return null;
         }
-        if (checkerResult.data.hasOwnProperty('expectedType')) {
+        if (checkerResult.data && has(checkerResult.data, 'expectedType')) {
           expectedTypes.push(checkerResult.data.expectedType);
         }
       }
@@ -2479,7 +2479,7 @@ var CCollapse = forwardRef(function (_a, ref) {
     var _className = classNames({
         'collapse-horizontal': horizontal,
     }, className);
-    return (React__default.createElement(CSSTransition$1, { in: visible, onEntering: onEntering, onEntered: onEntered, onExit: onExit, onExiting: onExiting, onExited: onExited, timeout: 350 }, function (state) {
+    return (React__default.createElement(CSSTransition$1, { in: visible, nodeRef: collapseRef, onEntering: onEntering, onEntered: onEntered, onExit: onExit, onExiting: onExiting, onExited: onExited, timeout: 350 }, function (state) {
         var transitionClass = getTransitionClass(state);
         var currentHeight = height === 0 ? null : { height: height };
         var currentWidth = width === 0 ? null : { width: width };
@@ -2513,7 +2513,7 @@ var CAccordionButton = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
     var _b = useContext(CAccordionItemContext), visible = _b.visible, setVisible = _b.setVisible;
     var _className = classNames('accordion-button', { collapsed: !visible }, className);
-    return (React__default.createElement("button", __assign({ className: _className }, rest, { "aria-expanded": !visible, onClick: function () { return setVisible(!visible); }, ref: ref }), children));
+    return (React__default.createElement("button", __assign({ type: "button", className: _className, "aria-expanded": !visible, onClick: function () { return setVisible(!visible); } }, rest, { ref: ref }), children));
 });
 CAccordionButton.propTypes = {
     children: PropTypes.node,
@@ -2611,6 +2611,8 @@ CCloseButton.displayName = 'CCloseButton';
 
 var CAlert = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, _b = _a.color, color = _b === void 0 ? 'primary' : _b, dismissible = _a.dismissible, variant = _a.variant, _c = _a.visible, visible = _c === void 0 ? true : _c, onClose = _a.onClose, rest = __rest(_a, ["children", "className", "color", "dismissible", "variant", "visible", "onClose"]);
+    var alertRef = useRef(null);
+    var forkedRef = useForkedRef(ref, alertRef);
     var _d = useState(visible), _visible = _d[0], setVisible = _d[1];
     useEffect(function () {
         setVisible(visible);
@@ -2621,9 +2623,9 @@ var CAlert = forwardRef(function (_a, ref) {
     var getTransitionClass = function (state) {
         return state === 'entered' && 'show';
     };
-    return (React__default.createElement(Transition$1, { in: _visible, mountOnEnter: true, onExit: onClose, timeout: 150, unmountOnExit: true }, function (state) {
+    return (React__default.createElement(Transition$1, { in: _visible, mountOnEnter: true, nodeRef: alertRef, onExit: onClose, timeout: 150, unmountOnExit: true }, function (state) {
         var transitionClass = getTransitionClass(state);
-        return (React__default.createElement("div", __assign({ className: classNames(_className, transitionClass), role: "alert" }, rest, { ref: ref }),
+        return (React__default.createElement("div", __assign({ className: classNames(_className, transitionClass), role: "alert" }, rest, { ref: forkedRef }),
             children,
             dismissible && React__default.createElement(CCloseButton, { onClick: function () { return setVisible(false); } })));
     }));
@@ -2707,6 +2709,25 @@ CAvatar.propTypes = {
 };
 CAvatar.displayName = 'CAvatar';
 
+var CBackdrop = forwardRef(function (_a, ref) {
+    var _b = _a.className, className = _b === void 0 ? 'modal-backdrop' : _b, visible = _a.visible, rest = __rest(_a, ["className", "visible"]);
+    var backdropRef = useRef(null);
+    var forkedRef = useForkedRef(ref, backdropRef);
+    var _className = classNames(className, 'fade');
+    var getTransitionClass = function (state) {
+        return state === 'entered' && 'show';
+    };
+    return (React__default.createElement(Transition$1, { in: visible, mountOnEnter: true, nodeRef: backdropRef, timeout: 150, unmountOnExit: true }, function (state) {
+        var transitionClass = getTransitionClass(state);
+        return (React__default.createElement("div", __assign({ className: classNames(_className, transitionClass) }, rest, { ref: forkedRef })));
+    }));
+});
+CBackdrop.propTypes = {
+    className: PropTypes.string,
+    visible: PropTypes.bool,
+};
+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(_a, ["children", "className", "color", "component", "position", "shape", "size", "textColor"]);
@@ -2734,23 +2755,6 @@ CBadge.propTypes = {
 };
 CBadge.displayName = 'CBadge';
 
-var CBackdrop = forwardRef(function (_a, ref) {
-    var _b = _a.className, className = _b === void 0 ? 'modal-backdrop' : _b, visible = _a.visible, rest = __rest(_a, ["className", "visible"]);
-    var _className = classNames(className, 'fade');
-    var getTransitionClass = function (state) {
-        return state === 'entered' && 'show';
-    };
-    return (React__default.createElement(Transition$1, { in: visible, mountOnEnter: true, timeout: 150, unmountOnExit: true }, function (state) {
-        var transitionClass = getTransitionClass(state);
-        return React__default.createElement("div", __assign({ className: classNames(_className, transitionClass) }, rest, { ref: ref }));
-    }));
-});
-CBackdrop.propTypes = {
-    className: PropTypes.string,
-    visible: PropTypes.bool,
-};
-CBackdrop.displayName = 'CBackdrop';
-
 var CBreadcrumb = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
     var _className = classNames('breadcrumb', className);
@@ -2796,6 +2800,17 @@ CButton.propTypes = {
 };
 CButton.displayName = 'CButton';
 
+var CButtonToolbar = forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
+    var _className = classNames('btn-toolbar', className);
+    return (React__default.createElement("div", __assign({ className: _className }, rest, { ref: ref }), children));
+});
+CButtonToolbar.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+};
+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(_a, ["children", "className", "size", "vertical"]);
@@ -2810,17 +2825,6 @@ CButtonGroup.propTypes = {
 };
 CButtonGroup.displayName = 'CButtonGroup';
 
-var CButtonToolbar = forwardRef(function (_a, ref) {
-    var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
-    var _className = classNames('btn-toolbar', className);
-    return (React__default.createElement("div", __assign({ className: _className }, rest, { ref: ref }), children));
-});
-CButtonToolbar.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-};
-CButtonToolbar.displayName = 'CButtonToolbar';
-
 var CCallout = forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, color = _a.color, rest = __rest(_a, ["children", "className", "color"]);
@@ -3571,6 +3575,10 @@ function getContainingBlock(element) {
 
   var currentNode = getParentNode(element);
 
+  if (isShadowRoot(currentNode)) {
+    currentNode = currentNode.host;
+  }
+
   while (isHTMLElement(currentNode) && ['html', 'body'].indexOf(getNodeName(currentNode)) < 0) {
     var css = getComputedStyle$1(currentNode); // This is non-exhaustive but covers the most common CSS properties that
     // create a containing block.
@@ -3763,13 +3771,21 @@ function mapToStyles(_ref2) {
       adaptive = _ref2.adaptive,
       roundOffsets = _ref2.roundOffsets,
       isFixed = _ref2.isFixed;
+  var _offsets$x = offsets.x,
+      x = _offsets$x === void 0 ? 0 : _offsets$x,
+      _offsets$y = offsets.y,
+      y = _offsets$y === void 0 ? 0 : _offsets$y;
 
-  var _ref3 = roundOffsets === true ? roundOffsetsByDPR(offsets) : typeof roundOffsets === 'function' ? roundOffsets(offsets) : offsets,
-      _ref3$x = _ref3.x,
-      x = _ref3$x === void 0 ? 0 : _ref3$x,
-      _ref3$y = _ref3.y,
-      y = _ref3$y === void 0 ? 0 : _ref3$y;
+  var _ref3 = typeof roundOffsets === 'function' ? roundOffsets({
+    x: x,
+    y: y
+  }) : {
+    x: x,
+    y: y
+  };
 
+  x = _ref3.x;
+  y = _ref3.y;
   var hasX = offsets.hasOwnProperty('x');
   var hasY = offsets.hasOwnProperty('y');
   var sideX = left;
@@ -3795,7 +3811,7 @@ function mapToStyles(_ref2) {
 
     if (placement === top || (placement === left || placement === right) && variation === end) {
       sideY = bottom;
-      var offsetY = isFixed && win.visualViewport ? win.visualViewport.height : // $FlowFixMe[prop-missing]
+      var offsetY = isFixed && offsetParent === win && win.visualViewport ? win.visualViewport.height : // $FlowFixMe[prop-missing]
       offsetParent[heightProp];
       y -= offsetY - popperRect.height;
       y *= gpuAcceleration ? 1 : -1;
@@ -3803,7 +3819,7 @@ function mapToStyles(_ref2) {
 
     if (placement === left || (placement === top || placement === bottom) && variation === end) {
       sideX = right;
-      var offsetX = isFixed && win.visualViewport ? win.visualViewport.width : // $FlowFixMe[prop-missing]
+      var offsetX = isFixed && offsetParent === win && win.visualViewport ? win.visualViewport.width : // $FlowFixMe[prop-missing]
       offsetParent[widthProp];
       x -= offsetX - popperRect.width;
       x *= gpuAcceleration ? 1 : -1;
@@ -3814,6 +3830,17 @@ function mapToStyles(_ref2) {
     position: position
   }, adaptive && unsetSides);
 
+  var _ref4 = roundOffsets === true ? roundOffsetsByDPR({
+    x: x,
+    y: y
+  }) : {
+    x: x,
+    y: y
+  };
+
+  x = _ref4.x;
+  y = _ref4.y;
+
   if (gpuAcceleration) {
     var _Object$assign;
 
@@ -3823,9 +3850,9 @@ function mapToStyles(_ref2) {
   return Object.assign({}, commonStyles, (_Object$assign2 = {}, _Object$assign2[sideY] = hasY ? y + "px" : '', _Object$assign2[sideX] = hasX ? x + "px" : '', _Object$assign2.transform = '', _Object$assign2));
 }
 
-function computeStyles(_ref4) {
-  var state = _ref4.state,
-      options = _ref4.options;
+function computeStyles(_ref5) {
+  var state = _ref5.state,
+      options = _ref5.options;
   var _options$gpuAccelerat = options.gpuAcceleration,
       gpuAcceleration = _options$gpuAccelerat === void 0 ? true : _options$gpuAccelerat,
       _options$adaptive = options.adaptive,
@@ -4124,7 +4151,7 @@ function getClippingParents(element) {
 
 
   return clippingParents.filter(function (clippingParent) {
-    return isElement(clippingParent) && contains(clippingParent, clipperElement) && getNodeName(clippingParent) !== 'body' && (canEscapeClipping ? getComputedStyle$1(clippingParent).position !== 'static' : true);
+    return isElement(clippingParent) && contains(clippingParent, clipperElement) && getNodeName(clippingParent) !== 'body';
   });
 } // Gets the maximum area that the element is visible in due to any number of
 // clipping parents
@@ -5599,9 +5626,10 @@ function Reference(_ref) {
 
 var CDropdownContext = createContext({});
 var CDropdown = forwardRef(function (_a, ref) {
-    var children = _a.children, alignment = _a.alignment, className = _a.className, dark = _a.dark, direction = _a.direction, onHide = _a.onHide, onShow = _a.onShow, _b = _a.placement, placement = _b === void 0 ? 'bottom-start' : _b, _c = _a.popper, popper = _c === void 0 ? true : _c, _d = _a.variant, variant = _d === void 0 ? 'btn-group' : _d, _e = _a.component, component = _e === void 0 ? 'div' : _e, _f = _a.visible, visible = _f === void 0 ? false : _f, rest = __rest(_a, ["children", "alignment", "className", "dark", "direction", "onHide", "onShow", "placement", "popper", "variant", "component", "visible"]);
-    var _g = useState(visible), _visible = _g[0], setVisible = _g[1];
+    var children = _a.children, alignment = _a.alignment, _b = _a.autoClose, autoClose = _b === void 0 ? true : _b, className = _a.className, dark = _a.dark, direction = _a.direction, onHide = _a.onHide, onShow = _a.onShow, _c = _a.placement, placement = _c === void 0 ? 'bottom-start' : _c, _d = _a.popper, popper = _d === void 0 ? true : _d, _e = _a.variant, variant = _e === void 0 ? 'btn-group' : _e, _f = _a.component, component = _f === void 0 ? 'div' : _f, _g = _a.visible, visible = _g === void 0 ? false : _g, rest = __rest(_a, ["children", "alignment", "autoClose", "className", "dark", "direction", "onHide", "onShow", "placement", "popper", "variant", "component", "visible"]);
+    var _h = useState(visible), _visible = _h[0], setVisible = _h[1];
     var dropdownRef = useRef(null);
+    var dropdownToggleRef = useRef(null);
     var forkedRef = useForkedRef(ref, dropdownRef);
     var Component = variant === 'nav-item' ? 'li' : component;
     // Disable popper if responsive aligment is set.
@@ -5610,8 +5638,10 @@ var CDropdown = forwardRef(function (_a, ref) {
     }
     var contextValues = {
         alignment: alignment,
+        autoClose: autoClose,
         dark: dark,
         direction: direction,
+        dropdownToggleRef: dropdownToggleRef,
         placement: placement,
         popper: popper,
         variant: variant,
@@ -5621,17 +5651,6 @@ var CDropdown = forwardRef(function (_a, ref) {
     var _className = classNames(variant === 'nav-item' ? 'nav-item dropdown' : variant, {
         show: _visible,
     }, direction, className);
-    useEffect(function () {
-        _visible &&
-            setTimeout(function () {
-                window.addEventListener('click', handleClickOutside);
-                window.addEventListener('keyup', handleKeyup);
-            });
-        return function () {
-            window.removeEventListener('click', handleClickOutside);
-            window.removeEventListener('keyup', handleKeyup);
-        };
-    }, [_visible]);
     useEffect(function () {
         setVisible(visible);
     }, [visible]);
@@ -5639,18 +5658,6 @@ var CDropdown = forwardRef(function (_a, ref) {
         _visible && onShow && onShow();
         !_visible && onHide && onHide();
     }, [_visible]);
-    var handleKeyup = function (event) {
-        var _a;
-        if (!((_a = dropdownRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
-            setVisible(false);
-        }
-    };
-    var handleClickOutside = function (event) {
-        var _a;
-        if (!((_a = dropdownRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
-            setVisible(false);
-        }
-    };
     var dropdownContent = function () {
         return variant === 'input-group' ? (React__default.createElement(React__default.Fragment, null, children)) : (React__default.createElement(Component, __assign({ className: _className }, rest, { ref: forkedRef }), children));
     };
@@ -5669,6 +5676,10 @@ CDropdown.propTypes = {
         PropTypes.shape({ xl: alignmentDirection }),
         PropTypes.shape({ xxl: alignmentDirection }),
     ]),
+    autoClose: PropTypes.oneOfType([
+        PropTypes.bool,
+        PropTypes.oneOf(['inside', 'outside']),
+    ]),
     children: PropTypes.node,
     className: PropTypes.string,
     component: PropTypes.elementType,
@@ -5708,7 +5719,7 @@ CDropdownHeader.displayName = 'CDropdownHeader';
 var CDropdownItem = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, _b = _a.component, component = _b === void 0 ? 'a' : _b, rest = __rest(_a, ["children", "className", "component"]);
     var _className = classNames('dropdown-item', className);
-    return (React__default.createElement(CLink, __assign({ component: component }, rest, { className: _className, ref: ref }), children));
+    return (React__default.createElement(CLink, __assign({ className: _className, component: component }, rest, { ref: ref }), children));
 });
 CDropdownItem.propTypes = {
     children: PropTypes.node,
@@ -5731,7 +5742,36 @@ CDropdownItemPlain.displayName = 'CDropdownItemPlain';
 
 var CDropdownMenu = function (_a) {
     var children = _a.children, className = _a.className, _b = _a.component, Component = _b === void 0 ? 'ul' : _b, rest = __rest(_a, ["children", "className", "component"]);
-    var _c = useContext(CDropdownContext), alignment = _c.alignment, dark = _c.dark, direction = _c.direction, placement = _c.placement, popper = _c.popper, visible = _c.visible;
+    var _c = useContext(CDropdownContext), alignment = _c.alignment, autoClose = _c.autoClose, dark = _c.dark, direction = _c.direction, dropdownToggleRef = _c.dropdownToggleRef, placement = _c.placement, popper = _c.popper, visible = _c.visible, setVisible = _c.setVisible;
+    var dropdownMenuRef = useRef(null);
+    useEffect(function () {
+        visible && window.addEventListener('mouseup', handleMouseUp);
+        visible && window.addEventListener('keyup', handleKeyup);
+        return function () {
+            window.removeEventListener('mouseup', handleMouseUp);
+            window.removeEventListener('keyup', handleKeyup);
+        };
+    }, [visible]);
+    var handleKeyup = function (event) {
+        if (autoClose === false) {
+            return;
+        }
+        if (event.key === 'Escape') {
+            setVisible(false);
+        }
+    };
+    var handleMouseUp = function (event) {
+        var _a, _b;
+        if (dropdownToggleRef && dropdownToggleRef.current.contains(event.target)) {
+            return;
+        }
+        if (autoClose === true ||
+            (autoClose === 'inside' && ((_a = dropdownMenuRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) ||
+            (autoClose === 'outside' && !((_b = dropdownMenuRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target)))) {
+            setTimeout(function () { return setVisible(false); }, 1);
+            return;
+        }
+    };
     var _placement = placement;
     if (direction === 'dropup') {
         _placement = 'top-start';
@@ -5771,7 +5811,7 @@ var CDropdownMenu = function (_a) {
             })
             : children));
     };
-    return popper && visible ? (React__default.createElement(Popper, { placement: _placement }, function (_a) {
+    return popper && visible ? (React__default.createElement(Popper, { innerRef: dropdownMenuRef, placement: _placement }, function (_a) {
         var ref = _a.ref, style = _a.style;
         return dropdownMenuComponent(style, ref);
     })) : (dropdownMenuComponent());
@@ -5784,8 +5824,8 @@ CDropdownMenu.propTypes = {
 CDropdownMenu.displayName = 'CDropdownMenu';
 
 var CDropdownToggle = function (_a) {
-    var children = _a.children, _b = _a.caret, caret = _b === void 0 ? true : _b, className = _a.className, split = _a.split, _c = _a.trigger, trigger = _c === void 0 ? 'click' : _c, rest = __rest(_a, ["children", "caret", "className", "split", "trigger"]);
-    var _d = useContext(CDropdownContext), popper = _d.popper, variant = _d.variant, visible = _d.visible, setVisible = _d.setVisible;
+    var children = _a.children, _b = _a.caret, caret = _b === void 0 ? true : _b, custom = _a.custom, className = _a.className, split = _a.split, _c = _a.trigger, trigger = _c === void 0 ? 'click' : _c, rest = __rest(_a, ["children", "caret", "custom", "className", "split", "trigger"]);
+    var _d = useContext(CDropdownContext), dropdownToggleRef = _d.dropdownToggleRef, popper = _d.popper, variant = _d.variant, visible = _d.visible, setVisible = _d.setVisible;
     var _className = classNames({
         'dropdown-toggle': caret,
         'dropdown-toggle-split': split,
@@ -5800,175 +5840,29 @@ var CDropdownToggle = function (_a) {
         onFocus: function () { return setVisible(true); },
         onBlur: function () { return setVisible(false); },
     }));
-    var togglerProps = __assign({ className: _className, 'aria-expanded': visible }, triggers);
+    var togglerProps = __assign(__assign({ className: _className, 'aria-expanded': visible }, (!rest.disabled && __assign({}, triggers))), 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 variant === 'nav-item' ? (React__default.createElement("a", __assign({ href: "#" }, togglerProps, { ref: ref }), children)) : (React__default.createElement(CButton, __assign({ type: "button" }, togglerProps, { tabIndex: 0 }, rest, { ref: ref }),
+        return custom && React__default.isValidElement(children) ? (React__default.createElement(React__default.Fragment, null, React__default.cloneElement(children, __assign(__assign({ 'aria-expanded': visible }, (!rest.disabled && __assign({}, triggers))), { ref: useForkedRef(ref, dropdownToggleRef) })))) : variant === 'nav-item' ? (React__default.createElement("a", __assign({ href: "#" }, togglerProps, { ref: useForkedRef(ref, dropdownToggleRef) }), children)) : (React__default.createElement(CButton, __assign({ type: "button" }, togglerProps, { tabIndex: 0 }, rest, { ref: useForkedRef(ref, dropdownToggleRef) }),
             children,
             split && React__default.createElement("span", { className: "visually-hidden" }, "Toggle Dropdown")));
     };
     return popper ? React__default.createElement(Reference, null, function (_a) {
         var ref = _a.ref;
         return Toggler(ref);
-    }) : Toggler();
+    }) : Toggler(dropdownToggleRef);
 };
 CDropdownToggle.propTypes = {
     caret: PropTypes.bool,
     children: PropTypes.node,
     className: PropTypes.string,
+    custom: PropTypes.bool,
     split: PropTypes.bool,
     trigger: triggerPropType,
 };
 CDropdownToggle.displayName = 'CDropdownToggle';
 
-var BREAKPOINTS$3 = [
-    'xxl',
-    'xl',
-    'lg',
-    'md',
-    'sm',
-    'xs',
-];
-var CCol = forwardRef(function (_a, ref) {
-    var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
-    var repsonsiveClassNames = [];
-    BREAKPOINTS$3.forEach(function (bp) {
-        var breakpoint = rest[bp];
-        delete rest[bp];
-        var infix = bp === 'xs' ? '' : "-".concat(bp);
-        if (typeof breakpoint === 'number' || typeof breakpoint === 'string') {
-            repsonsiveClassNames.push("col".concat(infix, "-").concat(breakpoint));
-        }
-        if (typeof breakpoint === 'boolean') {
-            repsonsiveClassNames.push("col".concat(infix));
-        }
-        if (breakpoint && typeof breakpoint === 'object') {
-            if (typeof breakpoint.span === 'number' || typeof breakpoint.span === 'string') {
-                repsonsiveClassNames.push("col".concat(infix, "-").concat(breakpoint.span));
-            }
-            if (typeof breakpoint.span === 'boolean') {
-                repsonsiveClassNames.push("col".concat(infix));
-            }
-            if (typeof breakpoint.order === 'number' || typeof breakpoint.order === 'string') {
-                repsonsiveClassNames.push("order".concat(infix, "-").concat(breakpoint.order));
-            }
-            if (typeof breakpoint.offset === 'number') {
-                repsonsiveClassNames.push("offset".concat(infix, "-").concat(breakpoint.offset));
-            }
-        }
-    });
-    var _className = classNames(repsonsiveClassNames.length ? repsonsiveClassNames : 'col', className);
-    return (React__default.createElement("div", __assign({ className: _className }, rest, { ref: ref }), children));
-});
-var span = PropTypes.oneOfType([
-    PropTypes.bool,
-    PropTypes.number,
-    PropTypes.string,
-    PropTypes.oneOf(['auto']),
-]);
-var col = PropTypes.oneOfType([
-    span,
-    PropTypes.shape({
-        span: span,
-        offset: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-        order: PropTypes.oneOfType([
-            PropTypes.oneOf(['first', 'last']),
-            PropTypes.number,
-            PropTypes.string,
-        ]),
-    }),
-]);
-CCol.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    xs: col,
-    sm: col,
-};
-CCol.displayName = 'CCol';
-
-var BREAKPOINTS$2 = [
-    'xxl',
-    'xl',
-    'lg',
-    'md',
-    'sm',
-    'fluid',
-];
-var CContainer = forwardRef(function (_a, ref) {
-    var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
-    var repsonsiveClassNames = [];
-    BREAKPOINTS$2.forEach(function (bp) {
-        var breakpoint = rest[bp];
-        delete rest[bp];
-        breakpoint && repsonsiveClassNames.push("container-".concat(bp));
-    });
-    var _className = classNames(repsonsiveClassNames.length ? repsonsiveClassNames : 'container', className);
-    return (React__default.createElement("div", __assign({ className: _className }, rest, { ref: ref }), children));
-});
-CContainer.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    sm: PropTypes.bool,
-    md: PropTypes.bool,
-    lg: PropTypes.bool,
-    xl: PropTypes.bool,
-    xxl: PropTypes.bool,
-    fluid: PropTypes.bool,
-};
-CContainer.displayName = 'CContainer';
-
-var BREAKPOINTS$1 = [
-    'xxl',
-    'xl',
-    'lg',
-    'md',
-    'sm',
-    'xs',
-];
-var CRow = forwardRef(function (_a, ref) {
-    var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
-    var repsonsiveClassNames = [];
-    BREAKPOINTS$1.forEach(function (bp) {
-        var breakpoint = rest[bp];
-        delete rest[bp];
-        var infix = bp === 'xs' ? '' : "-".concat(bp);
-        if (typeof breakpoint === 'object') {
-            if (breakpoint.cols) {
-                repsonsiveClassNames.push("row-cols".concat(infix, "-").concat(breakpoint.cols));
-            }
-            if (typeof breakpoint.gutter === 'number') {
-                repsonsiveClassNames.push("g".concat(infix, "-").concat(breakpoint.gutter));
-            }
-            if (typeof breakpoint.gutterX === 'number') {
-                repsonsiveClassNames.push("gx".concat(infix, "-").concat(breakpoint.gutterX));
-            }
-            if (typeof breakpoint.gutterY === 'number') {
-                repsonsiveClassNames.push("gy".concat(infix, "-").concat(breakpoint.gutterY));
-            }
-        }
-    });
-    var _className = classNames('row', repsonsiveClassNames, className);
-    return (React__default.createElement("div", { className: _className, ref: ref }, children));
-});
-var bp = PropTypes.shape({
-    cols: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.string]),
-    gutter: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    gutterX: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    gutterY: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-});
-CRow.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    xs: bp,
-    sm: bp,
-    md: bp,
-    lg: bp,
-    xl: bp,
-    xxl: bp,
-};
-CRow.displayName = 'CRow';
-
 var CFooter = forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, position = _a.position, rest = __rest(_a, ["children", "className", "position"]);
@@ -5994,12 +5888,49 @@ CForm.propTypes = {
 };
 CForm.displayName = 'CForm';
 
-var CFormLabel = forwardRef(function (_a, ref) {
-    var children = _a.children, className = _a.className, customClassName = _a.customClassName, rest = __rest(_a, ["children", "className", "customClassName"]);
-    var _className = customClassName ? customClassName : classNames('form-label', className);
-    return (React__default.createElement("label", __assign({ className: _className }, rest, { ref: ref }), children));
-});
-CFormLabel.propTypes = {
+var CFormFeedback = forwardRef(function (_a, ref) {
+    var _b;
+    var children = _a.children, className = _a.className, _c = _a.component, Component = _c === void 0 ? 'div' : _c, invalid = _a.invalid, tooltip = _a.tooltip, valid = _a.valid, rest = __rest(_a, ["children", "className", "component", "invalid", "tooltip", "valid"]);
+    var _className = classNames((_b = {},
+        _b["invalid-".concat(tooltip ? 'tooltip' : 'feedback')] = invalid,
+        _b["valid-".concat(tooltip ? 'tooltip' : 'feedback')] = valid,
+        _b), className);
+    return (React__default.createElement(Component, __assign({ className: _className }, rest, { ref: ref }), children));
+});
+CFormFeedback.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    component: PropTypes.elementType,
+    invalid: PropTypes.bool,
+    tooltip: PropTypes.bool,
+    valid: PropTypes.bool,
+};
+CFormFeedback.displayName = 'CFormFeedback';
+
+var CFormControlValidation = function (_a) {
+    var describedby = _a.describedby, feedback = _a.feedback, feedbackInvalid = _a.feedbackInvalid, feedbackValid = _a.feedbackValid, invalid = _a.invalid, tooltipFeedback = _a.tooltipFeedback, valid = _a.valid;
+    return (React__default.createElement(React__default.Fragment, null,
+        feedback && (valid || invalid) && (React__default.createElement(CFormFeedback, __assign({}, (invalid && { id: describedby }), { invalid: invalid, tooltip: tooltipFeedback, valid: valid }), feedback)),
+        feedbackInvalid && (React__default.createElement(CFormFeedback, { id: describedby, invalid: true, tooltip: tooltipFeedback }, feedbackInvalid)),
+        feedbackValid && (React__default.createElement(CFormFeedback, { valid: true, tooltip: tooltipFeedback }, feedbackValid))));
+};
+CFormControlValidation.propTypes = {
+    describedby: PropTypes.string,
+    feedback: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
+    feedbackValid: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
+    feedbackInvalid: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
+    invalid: PropTypes.bool,
+    tooltipFeedback: PropTypes.bool,
+    valid: PropTypes.bool,
+};
+CFormControlValidation.displayName = 'CFormControlValidation';
+
+var CFormLabel = forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, customClassName = _a.customClassName, rest = __rest(_a, ["children", "className", "customClassName"]);
+    var _className = customClassName ? customClassName : classNames('form-label', className);
+    return (React__default.createElement("label", __assign({ className: _className }, rest, { ref: ref }), children));
+});
+CFormLabel.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
     customClassName: PropTypes.string,
@@ -6008,7 +5939,7 @@ CFormLabel.displayName = 'CFormLabel';
 
 var CFormCheck = forwardRef(function (_a, ref) {
     var _b;
-    var className = _a.className, button = _a.button, hitArea = _a.hitArea, id = _a.id, indeterminate = _a.indeterminate, inline = _a.inline, invalid = _a.invalid, label = _a.label, _c = _a.type, type = _c === void 0 ? 'checkbox' : _c, valid = _a.valid, rest = __rest(_a, ["className", "button", "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, _c = _a.type, type = _c === void 0 ? 'checkbox' : _c, valid = _a.valid, rest = __rest(_a, ["className", "button", "feedback", "feedbackInvalid", "feedbackValid", "floatingLabel", "tooltipFeedback", "hitArea", "id", "indeterminate", "inline", "invalid", "label", "type", "valid"]);
     var inputRef = useRef(null);
     var forkedRef = useForkedRef(ref, inputRef);
     useEffect(function () {
@@ -6034,50 +5965,25 @@ var CFormCheck = forwardRef(function (_a, ref) {
     var formControl = function () {
         return React__default.createElement("input", __assign({ type: type, className: inputClassName, id: id }, rest, { ref: forkedRef }));
     };
+    var formValidation = function () { return (React__default.createElement(CFormControlValidation, { describedby: rest['aria-describedby'], feedback: feedback, feedbackInvalid: feedbackInvalid, feedbackValid: feedbackValid, floatingLabel: floatingLabel, invalid: invalid, tooltipFeedback: tooltipFeedback, valid: valid })); };
     var formLabel = function () {
         return (React__default.createElement(CFormLabel, __assign({ customClassName: labelClassName }, (id && { htmlFor: id })), label));
     };
     return button ? (React__default.createElement(React__default.Fragment, null,
         formControl(),
-        label && formLabel())) : label ? (hitArea ? (React__default.createElement(CFormLabel, __assign({ customClassName: className }, (id && { htmlFor: id })),
+        label && formLabel(),
+        formValidation())) : label ? (hitArea ? (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(CFormLabel, __assign({ customClassName: className }, (id && { htmlFor: id })),
+            formControl(),
+            label),
+        formValidation())) : (React__default.createElement("div", { className: _className },
         formControl(),
-        label)) : (React__default.createElement("div", { className: _className },
-        formControl(),
-        formLabel()))) : (formControl());
+        formLabel(),
+        formValidation()))) : (formControl());
 });
-CFormCheck.propTypes = {
-    button: PropTypes.object,
-    className: PropTypes.string,
-    hitArea: PropTypes.oneOf(['full']),
-    id: PropTypes.string,
-    indeterminate: PropTypes.bool,
-    inline: PropTypes.bool,
-    invalid: PropTypes.bool,
-    label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    type: PropTypes.oneOf(['checkbox', 'radio']),
-    valid: PropTypes.bool,
-};
+CFormCheck.propTypes = __assign({ button: PropTypes.object, className: PropTypes.string, hitArea: PropTypes.oneOf(['full']), id: PropTypes.string, indeterminate: PropTypes.bool, inline: PropTypes.bool, label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), type: PropTypes.oneOf(['checkbox', 'radio']) }, CFormControlValidation.propTypes);
 CFormCheck.displayName = 'CFormCheck';
 
-var CFormFeedback = forwardRef(function (_a, ref) {
-    var _b;
-    var children = _a.children, className = _a.className, _c = _a.component, Component = _c === void 0 ? 'div' : _c, invalid = _a.invalid, tooltip = _a.tooltip, valid = _a.valid, rest = __rest(_a, ["children", "className", "component", "invalid", "tooltip", "valid"]);
-    var _className = classNames((_b = {},
-        _b["invalid-".concat(tooltip ? 'tooltip' : 'feedback')] = invalid,
-        _b["valid-".concat(tooltip ? 'tooltip' : 'feedback')] = valid,
-        _b), className);
-    return (React__default.createElement(Component, __assign({ className: _className }, rest, { ref: ref }), children));
-});
-CFormFeedback.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    component: PropTypes.elementType,
-    invalid: PropTypes.bool,
-    tooltip: PropTypes.bool,
-    valid: PropTypes.bool,
-};
-CFormFeedback.displayName = 'CFormFeedback';
-
 var CFormFloating = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
     var _className = classNames('form-floating', className);
@@ -6089,62 +5995,81 @@ CFormFloating.propTypes = {
 };
 CFormFloating.displayName = 'CFormFloating';
 
+var CFormText = forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, _b = _a.component, Component = _b === void 0 ? 'div' : _b, rest = __rest(_a, ["children", "className", "component"]);
+    var _className = classNames('form-text', className);
+    return (React__default.createElement(Component, __assign({ className: _className }, rest, { ref: ref }), children));
+});
+CFormText.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    component: PropTypes.elementType,
+};
+CFormText.displayName = 'CFormText';
+
+var CFormControlWrapper = function (_a) {
+    var children = _a.children, describedby = _a.describedby, feedback = _a.feedback, feedbackInvalid = _a.feedbackInvalid, feedbackValid = _a.feedbackValid, floatingLabel = _a.floatingLabel, id = _a.id, invalid = _a.invalid, label = _a.label, text = _a.text, tooltipFeedback = _a.tooltipFeedback, valid = _a.valid;
+    return floatingLabel ? (React__default.createElement(CFormFloating, null,
+        children,
+        React__default.createElement(CFormLabel, { htmlFor: id }, label || floatingLabel))) : (React__default.createElement(React__default.Fragment, null,
+        label && React__default.createElement(CFormLabel, { htmlFor: id }, label),
+        children,
+        text && React__default.createElement(CFormText, { id: describedby }, text),
+        React__default.createElement(CFormControlValidation, { describedby: describedby, feedback: feedback, feedbackInvalid: feedbackInvalid, feedbackValid: feedbackValid, floatingLabel: floatingLabel, invalid: invalid, tooltipFeedback: tooltipFeedback, valid: valid })));
+};
+CFormControlWrapper.propTypes = __assign({ children: PropTypes.node, floatingLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.string]), label: PropTypes.oneOfType([PropTypes.node, PropTypes.string]), text: PropTypes.oneOfType([PropTypes.node, PropTypes.string]) }, CFormControlValidation.propTypes);
+CFormControlWrapper.displayName = 'CFormControlWrapper';
+
 var CFormInput = forwardRef(function (_a, ref) {
     var _b;
-    var children = _a.children, className = _a.className, invalid = _a.invalid, plainText = _a.plainText, size = _a.size, _c = _a.type, type = _c === void 0 ? 'text' : _c, valid = _a.valid, rest = __rest(_a, ["children", "className", "invalid", "plainText", "size", "type", "valid"]);
+    var children = _a.children, className = _a.className, _c = _a.delay, delay = _c === void 0 ? false : _c, feedback = _a.feedback, feedbackInvalid = _a.feedbackInvalid, feedbackValid = _a.feedbackValid, floatingLabel = _a.floatingLabel, id = _a.id, invalid = _a.invalid, label = _a.label, onChange = _a.onChange, plainText = _a.plainText, size = _a.size, text = _a.text, tooltipFeedback = _a.tooltipFeedback, _d = _a.type, type = _d === void 0 ? 'text' : _d, valid = _a.valid, rest = __rest(_a, ["children", "className", "delay", "feedback", "feedbackInvalid", "feedbackValid", "floatingLabel", "id", "invalid", "label", "onChange", "plainText", "size", "text", "tooltipFeedback", "type", "valid"]);
+    var _e = useState(), value = _e[0], setValue = _e[1];
+    useEffect(function () {
+        var timeOutId = setTimeout(function () { return value && onChange && onChange(value); }, typeof delay === 'number' ? delay : 500);
+        return function () { return clearTimeout(timeOutId); };
+    }, [value]);
     var _className = classNames(plainText ? 'form-control-plaintext' : 'form-control', (_b = {},
         _b["form-control-".concat(size)] = size,
         _b['form-control-color'] = type === 'color',
         _b['is-invalid'] = invalid,
         _b['is-valid'] = valid,
         _b), className);
-    return (React__default.createElement("input", __assign({ type: type, className: _className }, rest, { ref: ref }), children));
+    return (React__default.createElement(CFormControlWrapper, { describedby: rest['aria-describedby'], feedback: feedback, feedbackInvalid: feedbackInvalid, feedbackValid: feedbackValid, floatingLabel: floatingLabel, id: id, invalid: invalid, label: label, text: text, tooltipFeedback: tooltipFeedback, valid: valid },
+        React__default.createElement("input", __assign({ className: _className, id: id, type: type, onChange: function (event) { return (delay ? setValue(event) : onChange && onChange(event)); } }, rest, { ref: ref }), children)));
 });
-CFormInput.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    invalid: PropTypes.bool,
-    plainText: PropTypes.bool,
-    size: PropTypes.oneOf(['sm', 'lg']),
-    type: PropTypes.oneOfType([PropTypes.oneOf(['color', 'file', 'text']), PropTypes.string]),
-    valid: PropTypes.bool,
-};
+CFormInput.propTypes = __assign({ className: PropTypes.string, id: PropTypes.string, delay: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]), plainText: PropTypes.bool, size: PropTypes.oneOf(['sm', 'lg']), type: PropTypes.oneOfType([PropTypes.oneOf(['color', 'file', 'text']), PropTypes.string]) }, CFormControlWrapper.propTypes);
 CFormInput.displayName = 'CFormInput';
 
 var CFormRange = forwardRef(function (_a, ref) {
-    var className = _a.className, rest = __rest(_a, ["className"]);
+    var className = _a.className, label = _a.label, rest = __rest(_a, ["className", "label"]);
     var _className = classNames('form-range', className);
-    return React__default.createElement("input", __assign({ type: "range", className: _className }, rest, { ref: ref }));
+    return (React__default.createElement(React__default.Fragment, null,
+        label && React__default.createElement(CFormLabel, { htmlFor: rest.id }, label),
+        React__default.createElement("input", __assign({ type: "range", className: _className }, rest, { ref: ref }))));
 });
 CFormRange.propTypes = {
     className: PropTypes.string,
+    label: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
 };
 CFormRange.displayName = 'CFormRange';
 
 var CFormSelect = forwardRef(function (_a, ref) {
     var _b;
-    var children = _a.children, className = _a.className, htmlSize = _a.htmlSize, invalid = _a.invalid, options = _a.options, size = _a.size, valid = _a.valid, rest = __rest(_a, ["children", "className", "htmlSize", "invalid", "options", "size", "valid"]);
+    var children = _a.children, className = _a.className, feedback = _a.feedback, feedbackInvalid = _a.feedbackInvalid, feedbackValid = _a.feedbackValid, floatingLabel = _a.floatingLabel, htmlSize = _a.htmlSize, id = _a.id, invalid = _a.invalid, label = _a.label, options = _a.options, size = _a.size, text = _a.text, tooltipFeedback = _a.tooltipFeedback, valid = _a.valid, rest = __rest(_a, ["children", "className", "feedback", "feedbackInvalid", "feedbackValid", "floatingLabel", "htmlSize", "id", "invalid", "label", "options", "size", "text", "tooltipFeedback", "valid"]);
     var _className = classNames('form-select', (_b = {},
         _b["form-select-".concat(size)] = size,
         _b['is-invalid'] = invalid,
         _b['is-valid'] = valid,
         _b), className);
-    return (React__default.createElement("select", __assign({ className: _className, size: htmlSize }, rest, { ref: ref }), options
-        ? options.map(function (option, index) {
-            return (React__default.createElement("option", __assign({}, (typeof option === 'object' &&
-                option.disabled && { disabled: option.disabled }), (typeof option === 'object' && option.value && { value: option.value }), { key: index }), typeof option === 'string' ? option : option.label));
-        })
-        : children));
+    return (React__default.createElement(CFormControlWrapper, { describedby: rest['aria-describedby'], feedback: feedback, feedbackInvalid: feedbackInvalid, feedbackValid: feedbackValid, floatingLabel: floatingLabel, id: id, invalid: invalid, label: label, text: text, tooltipFeedback: tooltipFeedback, valid: valid },
+        React__default.createElement("select", __assign({ id: id, className: _className, size: htmlSize }, rest, { ref: ref }), options
+            ? options.map(function (option, index) {
+                return (React__default.createElement("option", __assign({}, (typeof option === 'object' &&
+                    option.disabled && { disabled: option.disabled }), (typeof option === 'object' && option.value && { value: option.value }), { key: index }), typeof option === 'string' ? option : option.label));
+            })
+            : children)));
 });
-CFormSelect.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    htmlSize: PropTypes.number,
-    invalid: PropTypes.bool,
-    options: PropTypes.array,
-    size: PropTypes.oneOf(['sm', 'lg']),
-    valid: PropTypes.bool,
-};
+CFormSelect.propTypes = __assign({ className: PropTypes.string, htmlSize: PropTypes.number, options: PropTypes.array }, CFormControlWrapper.propTypes);
 CFormSelect.displayName = 'CFormSelect';
 
 var CFormSwitch = forwardRef(function (_a, ref) {
@@ -6175,33 +6100,16 @@ CFormSwitch.propTypes = {
 };
 CFormSwitch.displayName = 'CFormSwitch';
 
-var CFormText = forwardRef(function (_a, ref) {
-    var children = _a.children, className = _a.className, _b = _a.component, Component = _b === void 0 ? 'div' : _b, rest = __rest(_a, ["children", "className", "component"]);
-    var _className = classNames('form-text', className);
-    return (React__default.createElement(Component, __assign({ className: _className }, rest, { ref: ref }), children));
-});
-CFormText.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    component: PropTypes.elementType,
-};
-CFormText.displayName = 'CFormText';
-
 var CFormTextarea = forwardRef(function (_a, ref) {
-    var children = _a.children, className = _a.className, invalid = _a.invalid, plainText = _a.plainText, valid = _a.valid, rest = __rest(_a, ["children", "className", "invalid", "plainText", "valid"]);
+    var children = _a.children, className = _a.className, feedback = _a.feedback, feedbackInvalid = _a.feedbackInvalid, feedbackValid = _a.feedbackValid, floatingLabel = _a.floatingLabel, id = _a.id, invalid = _a.invalid, label = _a.label, plainText = _a.plainText, text = _a.text, tooltipFeedback = _a.tooltipFeedback, valid = _a.valid, rest = __rest(_a, ["children", "className", "feedback", "feedbackInvalid", "feedbackValid", "floatingLabel", "id", "invalid", "label", "plainText", "text", "tooltipFeedback", "valid"]);
     var _className = classNames(plainText ? 'form-control-plaintext' : 'form-control', {
         'is-invalid': invalid,
         'is-valid': valid,
     }, className);
-    return (React__default.createElement("textarea", __assign({ className: _className }, rest, { ref: ref }), children));
+    return (React__default.createElement(CFormControlWrapper, { describedby: rest['aria-describedby'], feedback: feedback, feedbackInvalid: feedbackInvalid, feedbackValid: feedbackValid, floatingLabel: floatingLabel, id: id, invalid: invalid, label: label, text: text, tooltipFeedback: tooltipFeedback, valid: valid },
+        React__default.createElement("textarea", __assign({ className: _className }, rest, { ref: ref }), children)));
 });
-CFormTextarea.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    invalid: PropTypes.bool,
-    plainText: PropTypes.bool,
-    valid: PropTypes.bool,
-};
+CFormTextarea.propTypes = __assign({ className: PropTypes.string, id: PropTypes.string, plainText: PropTypes.bool }, CFormControlWrapper.propTypes);
 CFormTextarea.displayName = 'CFormTextarea';
 
 var CInputGroup = forwardRef(function (_a, ref) {
@@ -6231,6 +6139,153 @@ CInputGroupText.propTypes = {
 };
 CInputGroupText.displayName = 'CInputGroupText';
 
+var BREAKPOINTS$3 = [
+    'xxl',
+    'xl',
+    'lg',
+    'md',
+    'sm',
+    'xs',
+];
+var CCol = forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
+    var repsonsiveClassNames = [];
+    BREAKPOINTS$3.forEach(function (bp) {
+        var breakpoint = rest[bp];
+        delete rest[bp];
+        var infix = bp === 'xs' ? '' : "-".concat(bp);
+        if (typeof breakpoint === 'number' || typeof breakpoint === 'string') {
+            repsonsiveClassNames.push("col".concat(infix, "-").concat(breakpoint));
+        }
+        if (typeof breakpoint === 'boolean') {
+            repsonsiveClassNames.push("col".concat(infix));
+        }
+        if (breakpoint && typeof breakpoint === 'object') {
+            if (typeof breakpoint.span === 'number' || typeof breakpoint.span === 'string') {
+                repsonsiveClassNames.push("col".concat(infix, "-").concat(breakpoint.span));
+            }
+            if (typeof breakpoint.span === 'boolean') {
+                repsonsiveClassNames.push("col".concat(infix));
+            }
+            if (typeof breakpoint.order === 'number' || typeof breakpoint.order === 'string') {
+                repsonsiveClassNames.push("order".concat(infix, "-").concat(breakpoint.order));
+            }
+            if (typeof breakpoint.offset === 'number') {
+                repsonsiveClassNames.push("offset".concat(infix, "-").concat(breakpoint.offset));
+            }
+        }
+    });
+    var _className = classNames(repsonsiveClassNames.length ? repsonsiveClassNames : 'col', className);
+    return (React__default.createElement("div", __assign({ className: _className }, rest, { ref: ref }), children));
+});
+var span = PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.number,
+    PropTypes.string,
+    PropTypes.oneOf(['auto']),
+]);
+var col = PropTypes.oneOfType([
+    span,
+    PropTypes.shape({
+        span: span,
+        offset: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+        order: PropTypes.oneOfType([
+            PropTypes.oneOf(['first', 'last']),
+            PropTypes.number,
+            PropTypes.string,
+        ]),
+    }),
+]);
+CCol.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    xs: col,
+    sm: col,
+};
+CCol.displayName = 'CCol';
+
+var BREAKPOINTS$2 = [
+    'xxl',
+    'xl',
+    'lg',
+    'md',
+    'sm',
+    'fluid',
+];
+var CContainer = forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
+    var repsonsiveClassNames = [];
+    BREAKPOINTS$2.forEach(function (bp) {
+        var breakpoint = rest[bp];
+        delete rest[bp];
+        breakpoint && repsonsiveClassNames.push("container-".concat(bp));
+    });
+    var _className = classNames(repsonsiveClassNames.length ? repsonsiveClassNames : 'container', className);
+    return (React__default.createElement("div", __assign({ className: _className }, rest, { ref: ref }), children));
+});
+CContainer.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    sm: PropTypes.bool,
+    md: PropTypes.bool,
+    lg: PropTypes.bool,
+    xl: PropTypes.bool,
+    xxl: PropTypes.bool,
+    fluid: PropTypes.bool,
+};
+CContainer.displayName = 'CContainer';
+
+var BREAKPOINTS$1 = [
+    'xxl',
+    'xl',
+    'lg',
+    'md',
+    'sm',
+    'xs',
+];
+var CRow = forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
+    var repsonsiveClassNames = [];
+    BREAKPOINTS$1.forEach(function (bp) {
+        var breakpoint = rest[bp];
+        delete rest[bp];
+        var infix = bp === 'xs' ? '' : "-".concat(bp);
+        if (typeof breakpoint === 'object') {
+            if (breakpoint.cols) {
+                repsonsiveClassNames.push("row-cols".concat(infix, "-").concat(breakpoint.cols));
+            }
+            if (typeof breakpoint.gutter === 'number') {
+                repsonsiveClassNames.push("g".concat(infix, "-").concat(breakpoint.gutter));
+            }
+            if (typeof breakpoint.gutterX === 'number') {
+                repsonsiveClassNames.push("gx".concat(infix, "-").concat(breakpoint.gutterX));
+            }
+            if (typeof breakpoint.gutterY === 'number') {
+                repsonsiveClassNames.push("gy".concat(infix, "-").concat(breakpoint.gutterY));
+            }
+        }
+    });
+    var _className = classNames('row', repsonsiveClassNames, className);
+    return (React__default.createElement("div", { className: _className, ref: ref }, children));
+});
+var bp = PropTypes.shape({
+    cols: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.string]),
+    gutter: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    gutterX: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    gutterY: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+});
+CRow.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    xs: bp,
+    sm: bp,
+    md: bp,
+    lg: bp,
+    xl: bp,
+    xxl: bp,
+};
+CRow.displayName = 'CRow';
+
 var CHeader = forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, container = _a.container, position = _a.position, rest = __rest(_a, ["children", "className", "container", "position"]);
@@ -6509,7 +6564,7 @@ var CModal = forwardRef(function (_a, ref) {
                     React__default.createElement(CModalContent, { ref: modalContentRef }, children)))));
     };
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(Transition$1, { in: _visible, mountOnEnter: true, onEnter: onShow, onExit: onClose, unmountOnExit: unmountOnClose, timeout: !transition ? 0 : duration }, function (state) {
+        React__default.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)
@@ -6688,7 +6743,7 @@ var CNavGroup = forwardRef(function (_a, ref) {
     var _className = classNames('nav-group', { show: _visible }, className);
     return (React__default.createElement("li", __assign({ className: _className }, rest, { ref: ref }),
         toggler && (React__default.createElement("a", { className: "nav-link nav-group-toggle", onClick: function (event) { return handleTogglerOnCLick(event); } }, toggler)),
-        React__default.createElement(Transition$1, { in: _visible, onEntering: onEntering, onEntered: onEntered, onExit: onExit, onExiting: onExiting, onExited: onExited, timeout: 300 }, function (state) { return (React__default.createElement("ul", { className: classNames('nav-group-items', {
+        React__default.createElement(Transition$1, { in: _visible, nodeRef: navItemsRef, onEntering: onEntering, onEntered: onEntered, onExit: onExit, onExiting: onExiting, onExited: onExited, timeout: 300 }, function (state) { return (React__default.createElement("ul", { className: classNames('nav-group-items', {
                 compact: compact,
             }), style: __assign(__assign({}, style), transitionStyles[state]), ref: navItemsRef }, React__default.Children.map(children, function (child, index) {
             if (React__default.isValidElement(child)) {
@@ -6841,9 +6896,113 @@ CNavbarToggler.propTypes = {
 };
 CNavbarToggler.displayName = 'CNavbarToggler';
 
-var CPagination = forwardRef(function (_a, ref) {
+var COffcanvas = forwardRef(function (_a, ref) {
     var _b;
-    var children = _a.children, align = _a.align, className = _a.className, size = _a.size, rest = __rest(_a, ["children", "align", "className", "size"]);
+    var 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 ? true : _e, _f = _a.scroll, scroll = _f === void 0 ? false : _f, _g = _a.visible, visible = _g === void 0 ? false : _g, rest = __rest(_a, ["children", "backdrop", "className", "keyboard", "onHide", "onShow", "placement", "portal", "scroll", "visible"]);
+    var _h = useState(visible), _visible = _h[0], setVisible = _h[1];
+    var offcanvasRef = useRef(null);
+    var forkedRef = useForkedRef(ref, offcanvasRef);
+    useEffect(function () {
+        setVisible(visible);
+    }, [visible]);
+    useEffect(function () {
+        if (_visible) {
+            if (!scroll) {
+                document.body.style.overflow = 'hidden';
+                document.body.style.paddingRight = '0px';
+            }
+            return;
+        }
+        if (!scroll) {
+            document.body.style.removeProperty('overflow');
+            document.body.style.removeProperty('padding-right');
+        }
+    }, [_visible]);
+    var _className = classNames('offcanvas', (_b = {},
+        _b["offcanvas-".concat(placement)] = placement,
+        _b.show = _visible,
+        _b), className);
+    var transitionStyles = {
+        entering: { visibility: 'visible' },
+        entered: { visibility: 'visible' },
+        exiting: { visibility: 'visible' },
+        exited: { visibility: 'hidden' },
+    };
+    var handleDismiss = function () {
+        setVisible(false);
+    };
+    var handleKeyDown = useCallback(function (event) {
+        if (event.key === 'Escape' && keyboard) {
+            return handleDismiss();
+        }
+    }, [ref, handleDismiss]);
+    var offcanvas = function (ref, state) {
+        return (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement("div", __assign({ className: _className, role: "dialog", style: __assign({}, transitionStyles[state]), tabIndex: -1, onKeyDown: handleKeyDown }, rest, { ref: ref }), children)));
+    };
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Transition$1, { in: _visible, nodeRef: offcanvasRef, onEnter: onShow, onEntered: function () { var _a; return (_a = offcanvasRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, onExit: onHide, timeout: 300 }, function (state) {
+            return typeof window !== 'undefined' && portal
+                ? createPortal(offcanvas(forkedRef, state), document.body)
+                : offcanvas(forkedRef, state);
+        }),
+        typeof window !== 'undefined' && portal
+            ? backdrop &&
+                createPortal(React__default.createElement(CBackdrop, { className: "offcanvas-backdrop", onClick: handleDismiss, visible: _visible }), document.body)
+            : backdrop && (React__default.createElement(CBackdrop, { className: "offcanvas-backdrop", onClick: handleDismiss, visible: _visible }))));
+});
+COffcanvas.propTypes = {
+    backdrop: PropTypes.bool,
+    children: PropTypes.node,
+    className: PropTypes.string,
+    keyboard: PropTypes.bool,
+    onHide: PropTypes.func,
+    onShow: PropTypes.func,
+    placement: PropTypes.oneOf(['start', 'end', 'top', 'bottom'])
+        .isRequired,
+    portal: PropTypes.bool,
+    scroll: PropTypes.bool,
+    visible: PropTypes.bool,
+};
+COffcanvas.displayName = 'COffcanvas';
+
+var COffcanvasBody = forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
+    var _className = classNames('offcanvas-body', className);
+    return (React__default.createElement("div", __assign({ className: _className }, rest, { ref: ref }), children));
+});
+COffcanvasBody.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+};
+COffcanvasBody.displayName = 'COffcanvasBody';
+
+var COffcanvasHeader = forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
+    var _className = classNames('offcanvas-header', className);
+    return (React__default.createElement("div", __assign({ className: _className }, rest, { ref: ref }), children));
+});
+COffcanvasHeader.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+};
+COffcanvasHeader.displayName = 'COffcanvasHeader';
+
+var COffcanvasTitle = forwardRef(function (_a, ref) {
+    var children = _a.children, _b = _a.component, Component = _b === void 0 ? 'h5' : _b, className = _a.className, rest = __rest(_a, ["children", "component", "className"]);
+    var _className = classNames('offcanvas-title', className);
+    return (React__default.createElement(Component, __assign({ className: _className }, rest, { ref: ref }), children));
+});
+COffcanvasTitle.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    component: PropTypes.elementType,
+};
+COffcanvasTitle.displayName = 'COffcanvasTitle';
+
+var CPagination = forwardRef(function (_a, ref) {
+    var _b;
+    var children = _a.children, align = _a.align, className = _a.className, size = _a.size, rest = __rest(_a, ["children", "align", "className", "size"]);
     var _className = classNames('pagination', (_b = {},
         _b["justify-content-".concat(align)] = align,
         _b["pagination-".concat(size)] = size,
@@ -6914,66 +7073,6 @@ CPlaceholder.propTypes = {
 };
 CPlaceholder.displayName = 'CPlaceholder';
 
-var CPopover = function (_a) {
-    var children = _a.children, content = _a.content, _b = _a.placement, placement = _b === void 0 ? 'top' : _b, _c = _a.offset, offset = _c === void 0 ? [0, 8] : _c, onHide = _a.onHide, onShow = _a.onShow, title = _a.title, _d = _a.trigger, trigger = _d === void 0 ? 'click' : _d, visible = _a.visible, rest = __rest(_a, ["children", "content", "placement", "offset", "onHide", "onShow", "title", "trigger", "visible"]);
-    var _e = useState(visible), _visible = _e[0], setVisible = _e[1];
-    var getTransitionClass = function (state) {
-        return state === 'entering'
-            ? 'fade'
-            : state === 'entered'
-                ? 'fade show'
-                : state === 'exiting'
-                    ? 'fade'
-                    : 'fade';
-    };
-    return (React__default.createElement(Manager, null,
-        React__default.createElement(Reference, null, function (_a) {
-            var ref = _a.ref;
-            return React__default.cloneElement(children, __assign(__assign(__assign({ ref: ref }, ((trigger === 'click' || trigger.includes('click')) && {
-                onClick: function () { return setVisible(!_visible); },
-            })), ((trigger === 'focus' || trigger.includes('focus')) && {
-                onFocus: function () { return setVisible(true); },
-                onBlur: function () { return setVisible(false); },
-            })), ((trigger === 'hover' || trigger.includes('hover')) && {
-                onMouseEnter: function () { return setVisible(true); },
-                onMouseLeave: function () { return setVisible(false); },
-            })));
-        }),
-        typeof window !== 'undefined' &&
-            createPortal(React__default.createElement(Transition$1, { in: _visible, onEnter: onShow, onExit: onHide, mountOnEnter: true, timeout: {
-                    enter: 0,
-                    exit: 200,
-                }, unmountOnExit: true }, function (state) {
-                var transitionClass = getTransitionClass(state);
-                return (React__default.createElement(Popper, { placement: placement, modifiers: [
-                        {
-                            name: 'offset',
-                            options: {
-                                offset: offset,
-                            },
-                        },
-                    ] }, function (_a) {
-                    var arrowProps = _a.arrowProps, style = _a.style, ref = _a.ref;
-                    return (React__default.createElement("div", __assign({ className: classNames("popover bs-popover-".concat(placement === 'left' ? 'start' : placement === 'right' ? 'end' : placement), transitionClass), ref: ref, role: "tooltip", style: style }, rest),
-                        React__default.createElement("div", __assign({ className: "popover-arrow" }, arrowProps)),
-                        React__default.createElement("div", { className: "popover-header" }, title),
-                        React__default.createElement("div", { className: "popover-body" }, content)));
-                }));
-            }), document.body)));
-};
-CPopover.propTypes = {
-    children: PropTypes.any,
-    content: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    placement: PropTypes.oneOf(['auto', 'top', 'right', 'bottom', 'left']),
-    offset: PropTypes.any,
-    onHide: PropTypes.func,
-    onShow: PropTypes.func,
-    title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    trigger: triggerPropType,
-    visible: PropTypes.bool,
-};
-CPopover.displayName = 'CPopover';
-
 var CProgressBar = forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, animated = _a.animated, className = _a.className, color = _a.color, _c = _a.value, value = _c === void 0 ? 0 : _c, variant = _a.variant, rest = __rest(_a, ["children", "animated", "className", "color", "value", "variant"]);
@@ -7012,6 +7111,69 @@ CProgress.propTypes = {
 };
 CProgress.displayName = 'CProgress';
 
+var CPopover = function (_a) {
+    var children = _a.children, content = _a.content, _b = _a.offset, offset = _b === void 0 ? [0, 8] : _b, onHide = _a.onHide, onShow = _a.onShow, _c = _a.placement, placement = _c === void 0 ? 'top' : _c, title = _a.title, _d = _a.trigger, trigger = _d === void 0 ? 'click' : _d, visible = _a.visible, rest = __rest(_a, ["children", "content", "offset", "onHide", "onShow", "placement", "title", "trigger", "visible"]);
+    var _e = useState(visible), _visible = _e[0], setVisible = _e[1];
+    var popoverRef = useRef();
+    var _f = useState(null), referenceElement = _f[0], setReferenceElement = _f[1];
+    var _g = useState(null), popperElement = _g[0], setPopperElement = _g[1];
+    var _h = useState(null), arrowElement = _h[0], setArrowElement = _h[1];
+    var _j = usePopper(referenceElement, popperElement, {
+        modifiers: [
+            { name: 'arrow', options: { element: arrowElement } },
+            {
+                name: 'offset',
+                options: {
+                    offset: offset,
+                },
+            },
+        ],
+        placement: placement,
+    }), styles = _j.styles, attributes = _j.attributes;
+    var getTransitionClass = function (state) {
+        return state === 'entering'
+            ? 'fade'
+            : state === 'entered'
+                ? 'fade show'
+                : state === 'exiting'
+                    ? 'fade'
+                    : 'fade';
+    };
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.cloneElement(children, __assign(__assign(__assign({ ref: setReferenceElement }, ((trigger === 'click' || trigger.includes('click')) && {
+            onClick: function () { return setVisible(!_visible); },
+        })), ((trigger === 'focus' || trigger.includes('focus')) && {
+            onFocus: function () { return setVisible(true); },
+            onBlur: function () { return setVisible(false); },
+        })), ((trigger === 'hover' || trigger.includes('hover')) && {
+            onMouseEnter: function () { return setVisible(true); },
+            onMouseLeave: function () { return setVisible(false); },
+        }))),
+        typeof window !== 'undefined' &&
+            createPortal(React__default.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.createElement("div", __assign({ className: classNames("popover bs-popover-".concat(placement === 'left' ? 'start' : placement === 'right' ? 'end' : placement), transitionClass), ref: setPopperElement, role: "tooltip", style: styles.popper }, attributes.popper, rest),
+                    React__default.createElement("div", { className: "popover-arrow", style: styles.arrow, ref: setArrowElement }),
+                    React__default.createElement("div", { className: "popover-header" }, title),
+                    React__default.createElement("div", { className: "popover-body" }, content)));
+            }), document.body)));
+};
+CPopover.propTypes = {
+    children: PropTypes.any,
+    content: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+    offset: PropTypes.any,
+    onHide: PropTypes.func,
+    onShow: PropTypes.func,
+    placement: PropTypes.oneOf(['auto', 'top', 'right', 'bottom', 'left']),
+    title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+    trigger: triggerPropType,
+    visible: PropTypes.bool,
+};
+CPopover.displayName = 'CPopover';
+
 var isOnMobile = function (element) {
     return Boolean(getComputedStyle(element).getPropertyValue('--cui-is-mobile'));
 };
@@ -7124,110 +7286,6 @@ CSidebar.propTypes = {
 };
 CSidebar.displayName = 'CSidebar';
 
-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 ? true : _e, _f = _a.scroll, scroll = _f === void 0 ? false : _f, _g = _a.visible, visible = _g === void 0 ? false : _g, rest = __rest(_a, ["children", "backdrop", "className", "keyboard", "onHide", "onShow", "placement", "portal", "scroll", "visible"]);
-    var _h = useState(visible), _visible = _h[0], setVisible = _h[1];
-    var offcanvasRef = useRef(null);
-    var forkedRef = useForkedRef(ref, offcanvasRef);
-    useEffect(function () {
-        setVisible(visible);
-    }, [visible]);
-    useEffect(function () {
-        if (_visible) {
-            if (!scroll) {
-                document.body.style.overflow = 'hidden';
-                document.body.style.paddingRight = '0px';
-            }
-            return;
-        }
-        if (!scroll) {
-            document.body.style.removeProperty('overflow');
-            document.body.style.removeProperty('padding-right');
-        }
-    }, [_visible]);
-    var _className = classNames('offcanvas', (_b = {},
-        _b["offcanvas-".concat(placement)] = placement,
-        _b.show = _visible,
-        _b), className);
-    var transitionStyles = {
-        entering: { visibility: 'visible' },
-        entered: { visibility: 'visible' },
-        exiting: { visibility: 'visible' },
-        exited: { visibility: 'hidden' },
-    };
-    var handleDismiss = function () {
-        setVisible(false);
-    };
-    var handleKeyDown = useCallback(function (event) {
-        if (event.key === 'Escape' && keyboard) {
-            return handleDismiss();
-        }
-    }, [ref, handleDismiss]);
-    var offcanvas = function (ref, state) {
-        return (React__default.createElement(React__default.Fragment, null,
-            React__default.createElement("div", __assign({ className: _className, role: "dialog", style: __assign({}, transitionStyles[state]), tabIndex: -1, onKeyDown: handleKeyDown }, rest, { ref: ref }), children)));
-    };
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(Transition$1, { in: _visible, 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);
-        }),
-        typeof window !== 'undefined' && portal
-            ? backdrop &&
-                createPortal(React__default.createElement(CBackdrop, { className: "offcanvas-backdrop", onClick: handleDismiss, visible: _visible }), document.body)
-            : backdrop && (React__default.createElement(CBackdrop, { className: "offcanvas-backdrop", onClick: handleDismiss, visible: _visible }))));
-});
-COffcanvas.propTypes = {
-    backdrop: PropTypes.bool,
-    children: PropTypes.node,
-    className: PropTypes.string,
-    keyboard: PropTypes.bool,
-    onHide: PropTypes.func,
-    onShow: PropTypes.func,
-    placement: PropTypes.oneOf(['start', 'end', 'top', 'bottom'])
-        .isRequired,
-    portal: PropTypes.bool,
-    scroll: PropTypes.bool,
-    visible: PropTypes.bool,
-};
-COffcanvas.displayName = 'COffcanvas';
-
-var COffcanvasBody = forwardRef(function (_a, ref) {
-    var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
-    var _className = classNames('offcanvas-body', className);
-    return (React__default.createElement("div", __assign({ className: _className }, rest, { ref: ref }), children));
-});
-COffcanvasBody.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-};
-COffcanvasBody.displayName = 'COffcanvasBody';
-
-var COffcanvasHeader = forwardRef(function (_a, ref) {
-    var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
-    var _className = classNames('offcanvas-header', className);
-    return (React__default.createElement("div", __assign({ className: _className }, rest, { ref: ref }), children));
-});
-COffcanvasHeader.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-};
-COffcanvasHeader.displayName = 'COffcanvasHeader';
-
-var COffcanvasTitle = forwardRef(function (_a, ref) {
-    var children = _a.children, _b = _a.component, Component = _b === void 0 ? 'h5' : _b, className = _a.className, rest = __rest(_a, ["children", "component", "className"]);
-    var _className = classNames('offcanvas-title', className);
-    return (React__default.createElement(Component, __assign({ className: _className }, rest, { ref: ref }), children));
-});
-COffcanvasTitle.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    component: PropTypes.elementType,
-};
-COffcanvasTitle.displayName = 'COffcanvasTitle';
-
 var CSidebarBrand = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
     var _className = classNames('sidebar-brand', className);
@@ -7444,15 +7502,17 @@ CTabContent.displayName = 'CTabContent';
 
 var CTabPane = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, onHide = _a.onHide, onShow = _a.onShow, visible = _a.visible, rest = __rest(_a, ["children", "className", "onHide", "onShow", "visible"]);
+    var tabPaneRef = useRef();
+    var forkedRef = useForkedRef(ref, tabPaneRef);
     var getTransitionClass = function (state) {
         return state === 'entered' && 'show';
     };
     var _className = classNames('tab-pane', 'fade', {
         active: visible,
     }, className);
-    return (React__default.createElement(Transition$1, { in: visible, onEnter: onShow, onExit: onHide, timeout: 150 }, function (state) {
+    return (React__default.createElement(Transition$1, { in: visible, nodeRef: tabPaneRef, onEnter: onShow, onExit: onHide, timeout: 150 }, function (state) {
         var transitionClass = getTransitionClass(state);
-        return (React__default.createElement("div", __assign({ className: classNames(_className, transitionClass) }, rest, { ref: ref }), children));
+        return (React__default.createElement("div", __assign({ className: classNames(_className, transitionClass) }, rest, { ref: forkedRef }), children));
     }));
 });
 CTabPane.propTypes = {
@@ -7468,6 +7528,8 @@ 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(_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 timeout = useRef();
     useEffect(function () {
@@ -7505,10 +7567,10 @@ var CToast = forwardRef(function (_a, ref) {
                     ? 'showing'
                     : 'fade';
     };
-    return (React__default.createElement(Transition$1, { in: _visible, onEnter: function () { return onShow && onShow(index ? index : null); }, onExited: function () { return onClose && onClose(index ? index : null); }, timeout: 250, unmountOnExit: true }, function (state) {
+    return (React__default.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.createElement(CToastContext.Provider, { value: contextValues },
-            React__default.createElement("div", __assign({ className: classNames(_className, transitionClass), "aria-live": "assertive", "aria-atomic": "true", role: "alert", onMouseEnter: function () { return clearTimeout(timeout.current); }, onMouseLeave: function () { return _autohide; } }, rest, { key: key, ref: ref }), children)));
+            React__default.createElement("div", __assign({ className: classNames(_className, transitionClass), "aria-live": "assertive", "aria-atomic": "true", role: "alert", onMouseEnter: function () { return clearTimeout(timeout.current); }, onMouseLeave: function () { return _autohide; } }, rest, { key: key, ref: forkedRef }), children)));
     }));
 });
 CToast.propTypes = {
@@ -7618,8 +7680,24 @@ CToaster.propTypes = {
 CToaster.displayName = 'CToaster';
 
 var CTooltip = function (_a) {
-    var children = _a.children, content = _a.content, _b = _a.placement, placement = _b === void 0 ? 'top' : _b, onHide = _a.onHide, onShow = _a.onShow, _c = _a.trigger, trigger = _c === void 0 ? 'hover' : _c, visible = _a.visible, rest = __rest(_a, ["children", "content", "placement", "onHide", "onShow", "trigger", "visible"]);
-    var _d = useState(visible), _visible = _d[0], setVisible = _d[1];
+    var children = _a.children, content = _a.content, _b = _a.offset, offset = _b === void 0 ? [0, 0] : _b, onHide = _a.onHide, onShow = _a.onShow, _c = _a.placement, placement = _c === void 0 ? 'top' : _c, _d = _a.trigger, trigger = _d === void 0 ? 'hover' : _d, visible = _a.visible, rest = __rest(_a, ["children", "content", "offset", "onHide", "onShow", "placement", "trigger", "visible"]);
+    var tooltipRef = useRef();
+    var _e = useState(visible), _visible = _e[0], setVisible = _e[1];
+    var _f = useState(null), referenceElement = _f[0], setReferenceElement = _f[1];
+    var _g = useState(null), popperElement = _g[0], setPopperElement = _g[1];
+    var _h = useState(null), arrowElement = _h[0], setArrowElement = _h[1];
+    var _j = usePopper(referenceElement, popperElement, {
+        modifiers: [
+            { name: 'arrow', options: { element: arrowElement } },
+            {
+                name: 'offset',
+                options: {
+                    offset: offset,
+                },
+            },
+        ],
+        placement: placement,
+    }), styles = _j.styles, attributes = _j.attributes;
     var getTransitionClass = function (state) {
         return state === 'entering'
             ? 'fade'
@@ -7629,39 +7707,34 @@ var CTooltip = function (_a) {
                     ? 'fade'
                     : 'fade';
     };
-    return (React__default.createElement(Manager, null,
-        React__default.createElement(Reference, null, function (_a) {
-            var ref = _a.ref;
-            return React__default.cloneElement(children, __assign(__assign(__assign({ ref: ref }, ((trigger === 'click' || trigger.includes('click')) && {
-                onClick: function () { return setVisible(!_visible); },
-            })), ((trigger === 'focus' || trigger.includes('focus')) && {
-                onFocus: function () { return setVisible(true); },
-                onBlur: function () { return setVisible(false); },
-            })), ((trigger === 'hover' || trigger.includes('hover')) && {
-                onMouseEnter: function () { return setVisible(true); },
-                onMouseLeave: function () { return setVisible(false); },
-            })));
-        }),
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.cloneElement(children, __assign(__assign(__assign({ ref: setReferenceElement }, ((trigger === 'click' || trigger.includes('click')) && {
+            onClick: function () { return setVisible(!_visible); },
+        })), ((trigger === 'focus' || trigger.includes('focus')) && {
+            onFocus: function () { return setVisible(true); },
+            onBlur: function () { return setVisible(false); },
+        })), ((trigger === 'hover' || trigger.includes('hover')) && {
+            onMouseEnter: function () { return setVisible(true); },
+            onMouseLeave: function () { return setVisible(false); },
+        }))),
         typeof window !== 'undefined' &&
-            createPortal(React__default.createElement(Transition$1, { in: _visible, mountOnEnter: true, onEnter: onShow, onExit: onHide, timeout: {
+            createPortal(React__default.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.createElement(Popper, { placement: placement }, function (_a) {
-                    var arrowProps = _a.arrowProps, style = _a.style, ref = _a.ref;
-                    return (React__default.createElement("div", __assign({ className: classNames("tooltip bs-tooltip-".concat(placement === 'left' ? 'start' : placement === 'right' ? 'end' : placement), transitionClass), ref: ref, role: "tooltip", style: style }, rest),
-                        React__default.createElement("div", __assign({ className: "tooltip-arrow" }, arrowProps)),
-                        React__default.createElement("div", { className: "tooltip-inner" }, content)));
-                }));
+                return (React__default.createElement("div", __assign({ className: classNames("tooltip bs-tooltip-".concat(placement === 'left' ? 'start' : placement === 'right' ? 'end' : placement), transitionClass), ref: setPopperElement, role: "tooltip", style: styles.popper }, attributes.popper, rest),
+                    React__default.createElement("div", { className: "tooltip-arrow", style: styles.arrow, ref: setArrowElement }),
+                    React__default.createElement("div", { className: "tooltip-inner" }, content)));
             }), document.body)));
 };
 CTooltip.propTypes = {
     children: PropTypes.any,
     content: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    placement: PropTypes.oneOf(['auto', 'top', 'right', 'bottom', 'left']),
+    offset: PropTypes.any,
     onHide: PropTypes.func,
     onShow: PropTypes.func,
+    placement: PropTypes.oneOf(['auto', 'top', 'right', 'bottom', 'left']),
     trigger: triggerPropType,
     visible: PropTypes.bool,
 };