@coreui/react 4.1.0 → 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
@@ -358,6 +358,8 @@ var ReactPropTypesSecret$3 = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';
 
 var ReactPropTypesSecret_1 = ReactPropTypesSecret$3;
 
+var has$2 = Function.call.bind(Object.prototype.hasOwnProperty);
+
 /**
  * Copyright (c) 2013-present, Facebook, Inc.
  *
@@ -370,7 +372,7 @@ var printWarning$2 = function() {};
 if (process.env.NODE_ENV !== 'production') {
   var ReactPropTypesSecret$2 = ReactPropTypesSecret_1;
   var loggedTypeFailures = {};
-  var has$1 = Function.call.bind(Object.prototype.hasOwnProperty);
+  var has$1 = has$2;
 
   printWarning$2 = function(text) {
     var message = 'Warning: ' + text;
@@ -382,7 +384,7 @@ if (process.env.NODE_ENV !== 'production') {
       // This error was thrown as a convenience so that you can use this stack
       // to find the callsite that caused this warning to fire.
       throw new Error(message);
-    } catch (x) {}
+    } catch (x) { /**/ }
   };
 }
 
@@ -411,7 +413,8 @@ function checkPropTypes$1(typeSpecs, values, location, componentName, getStack)
           if (typeof typeSpecs[typeSpecName] !== 'function') {
             var err = Error(
               (componentName || 'React class') + ': ' + location + ' type `' + typeSpecName + '` is invalid; ' +
-              'it must be a function, usually from the `prop-types` package, but received `' + typeof typeSpecs[typeSpecName] + '`.'
+              'it must be a function, usually from the `prop-types` package, but received `' + typeof typeSpecs[typeSpecName] + '`.' +
+              'This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.'
             );
             err.name = 'Invariant Violation';
             throw err;
@@ -470,9 +473,9 @@ var ReactIs$1 = reactIs.exports;
 var assign = objectAssign;
 
 var ReactPropTypesSecret$1 = ReactPropTypesSecret_1;
+var has = has$2;
 var checkPropTypes = checkPropTypes_1;
 
-var has = Function.call.bind(Object.prototype.hasOwnProperty);
 var printWarning$1 = function() {};
 
 if (process.env.NODE_ENV !== 'production') {
@@ -573,6 +576,7 @@ var factoryWithTypeCheckers = function(isValidElement, throwOnDirectAccess) {
   // Keep this list in sync with production version in `./factoryWithThrowingShims.js`.
   var ReactPropTypes = {
     array: createPrimitiveTypeChecker('array'),
+    bigint: createPrimitiveTypeChecker('bigint'),
     bool: createPrimitiveTypeChecker('boolean'),
     func: createPrimitiveTypeChecker('function'),
     number: createPrimitiveTypeChecker('number'),
@@ -618,8 +622,9 @@ var factoryWithTypeCheckers = function(isValidElement, throwOnDirectAccess) {
    * is prohibitively expensive if they are created too often, such as what
    * happens in oneOfType() for any type before the one that matched.
    */
-  function PropTypeError(message) {
+  function PropTypeError(message, data) {
     this.message = message;
+    this.data = data && typeof data === 'object' ? data: {};
     this.stack = '';
   }
   // Make `instanceof Error` still work for returned errors.
@@ -654,7 +659,7 @@ var factoryWithTypeCheckers = function(isValidElement, throwOnDirectAccess) {
           ) {
             printWarning$1(
               'You are manually calling a React.PropTypes validation ' +
-              'function for the `' + propFullName + '` prop on `' + componentName  + '`. This is deprecated ' +
+              'function for the `' + propFullName + '` prop on `' + componentName + '`. This is deprecated ' +
               'and will throw in the standalone `prop-types` package. ' +
               'You may be seeing this warning due to a third-party PropTypes ' +
               'library. See https://fb.me/react-warning-dont-call-proptypes ' + 'for details.'
@@ -693,7 +698,10 @@ var factoryWithTypeCheckers = function(isValidElement, throwOnDirectAccess) {
         // 'of type `object`'.
         var preciseType = getPreciseType(propValue);
 
-        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + preciseType + '` supplied to `' + componentName + '`, expected ') + ('`' + expectedType + '`.'));
+        return new PropTypeError(
+          'Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + preciseType + '` supplied to `' + componentName + '`, expected ') + ('`' + expectedType + '`.'),
+          {expectedType: expectedType}
+        );
       }
       return null;
     }
@@ -837,14 +845,19 @@ var factoryWithTypeCheckers = function(isValidElement, throwOnDirectAccess) {
     }
 
     function validate(props, propName, componentName, location, propFullName) {
+      var expectedTypes = [];
       for (var i = 0; i < arrayOfTypeCheckers.length; i++) {
         var checker = arrayOfTypeCheckers[i];
-        if (checker(props, propName, componentName, location, propFullName, ReactPropTypesSecret$1) == null) {
+        var checkerResult = checker(props, propName, componentName, location, propFullName, ReactPropTypesSecret$1);
+        if (checkerResult == null) {
           return null;
         }
+        if (checkerResult.data && has(checkerResult.data, 'expectedType')) {
+          expectedTypes.push(checkerResult.data.expectedType);
+        }
       }
-
-      return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` supplied to ' + ('`' + componentName + '`.'));
+      var expectedTypesMessage = (expectedTypes.length > 0) ? ', expected one of type [' + expectedTypes.join(', ') + ']': '';
+      return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` supplied to ' + ('`' + componentName + '`' + expectedTypesMessage + '.'));
     }
     return createChainableTypeChecker(validate);
   }
@@ -859,6 +872,13 @@ var factoryWithTypeCheckers = function(isValidElement, throwOnDirectAccess) {
     return createChainableTypeChecker(validate);
   }
 
+  function invalidValidatorError(componentName, location, propFullName, key, type) {
+    return new PropTypeError(
+      (componentName || 'React class') + ': ' + location + ' type `' + propFullName + '.' + key + '` is invalid; ' +
+      'it must be a function, usually from the `prop-types` package, but received `' + type + '`.'
+    );
+  }
+
   function createShapeTypeChecker(shapeTypes) {
     function validate(props, propName, componentName, location, propFullName) {
       var propValue = props[propName];
@@ -868,8 +888,8 @@ var factoryWithTypeCheckers = function(isValidElement, throwOnDirectAccess) {
       }
       for (var key in shapeTypes) {
         var checker = shapeTypes[key];
-        if (!checker) {
-          continue;
+        if (typeof checker !== 'function') {
+          return invalidValidatorError(componentName, location, propFullName, key, getPreciseType(checker));
         }
         var error = checker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret$1);
         if (error) {
@@ -888,16 +908,18 @@ var factoryWithTypeCheckers = function(isValidElement, throwOnDirectAccess) {
       if (propType !== 'object') {
         return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type `' + propType + '` ' + ('supplied to `' + componentName + '`, expected `object`.'));
       }
-      // We need to check all keys in case some are required but missing from
-      // props.
+      // We need to check all keys in case some are required but missing from props.
       var allKeys = assign({}, props[propName], shapeTypes);
       for (var key in allKeys) {
         var checker = shapeTypes[key];
+        if (has(shapeTypes, key) && typeof checker !== 'function') {
+          return invalidValidatorError(componentName, location, propFullName, key, getPreciseType(checker));
+        }
         if (!checker) {
           return new PropTypeError(
             'Invalid ' + location + ' `' + propFullName + '` key `' + key + '` supplied to `' + componentName + '`.' +
             '\nBad object: ' + JSON.stringify(props[propName], null, '  ') +
-            '\nValid keys: ' +  JSON.stringify(Object.keys(shapeTypes), null, '  ')
+            '\nValid keys: ' + JSON.stringify(Object.keys(shapeTypes), null, '  ')
           );
         }
         var error = checker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret$1);
@@ -1082,6 +1104,7 @@ var factoryWithThrowingShims = function() {
   // Keep this list in sync with production version in `./factoryWithTypeCheckers.js`.
   var ReactPropTypes = {
     array: shim,
+    bigint: shim,
     bool: shim,
     func: shim,
     number: shim,
@@ -2360,6 +2383,7 @@ CSSTransition.propTypes = process.env.NODE_ENV !== "production" ? _extends({}, T
 var CSSTransition$1 = CSSTransition;
 
 // code borrowed from https://github.com/reach/reach-ui
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function useForkedRef() {
     var refs = [];
     for (var _i = 0; _i < arguments.length; _i++) {
@@ -2369,6 +2393,7 @@ function useForkedRef() {
         if (refs.every(function (ref) { return ref == null; })) {
             return null;
         }
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         return function (node) {
             refs.forEach(function (ref) {
                 assignRef(ref, node);
@@ -2376,7 +2401,10 @@ function useForkedRef() {
         };
     }, refs);
 }
-function assignRef(ref, value) {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function assignRef(ref, 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+value) {
     if (ref == null)
         return;
     if (isFunction(ref)) {
@@ -2391,6 +2419,7 @@ function assignRef(ref, value) {
         }
     }
 }
+// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
 function isFunction(value) {
     return !!(value && {}.toString.call(value) == '[object Function]');
 }
@@ -2450,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 };
@@ -2484,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,
@@ -2582,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);
@@ -2592,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); } })));
     }));
@@ -2678,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"]);
@@ -2705,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);
@@ -2767,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"]);
@@ -2781,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"]);
@@ -3542,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.
@@ -3734,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;
@@ -3766,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;
@@ -3774,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;
@@ -3785,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;
 
@@ -3794,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,
@@ -4095,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
@@ -5570,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.
@@ -5581,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,
@@ -5592,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]);
@@ -5610,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));
     };
@@ -5640,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,
@@ -5679,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,
@@ -5702,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';
@@ -5742,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());
@@ -5755,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,
@@ -5771,199 +5840,90 @@ 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);
+var CFooter = forwardRef(function (_a, ref) {
+    var _b;
+    var children = _a.children, className = _a.className, position = _a.position, rest = __rest(_a, ["children", "className", "position"]);
+    var _className = classNames('footer', (_b = {}, _b["footer-".concat(position)] = position, _b), className);
     return (React__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 = {
+CFooter.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
-    xs: col,
-    sm: col,
+    position: PropTypes.oneOf(['fixed', 'sticky']),
 };
-CCol.displayName = 'CCol';
+CFooter.displayName = 'CFooter';
 
-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));
+var CForm = forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, validated = _a.validated, rest = __rest(_a, ["children", "className", "validated"]);
+    var _className = classNames({ 'was-validated': validated }, className);
+    return (React__default.createElement("form", __assign({ className: _className }, rest, { ref: ref }), children));
 });
-CContainer.propTypes = {
+CForm.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,
+    validated: PropTypes.bool,
 };
-CContainer.displayName = 'CContainer';
+CForm.displayName = 'CForm';
 
-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 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));
 });
-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"]);
-    var _className = classNames('footer', (_b = {}, _b["footer-".concat(position)] = position, _b), className);
-    return (React__default.createElement("div", __assign({ className: _className }, rest, { ref: ref }), children));
-});
-CFooter.propTypes = {
+CFormFeedback.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
-    position: PropTypes.oneOf(['fixed', 'sticky']),
+    component: PropTypes.elementType,
+    invalid: PropTypes.bool,
+    tooltip: PropTypes.bool,
+    valid: PropTypes.bool,
 };
-CFooter.displayName = 'CFooter';
+CFormFeedback.displayName = 'CFormFeedback';
 
-var CForm = forwardRef(function (_a, ref) {
-    var children = _a.children, className = _a.className, validated = _a.validated, rest = __rest(_a, ["children", "className", "validated"]);
-    var _className = classNames({ 'was-validated': validated }, className);
-    return (React__default.createElement("form", __assign({ className: _className }, rest, { ref: ref }), children));
-});
-CForm.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    validated: PropTypes.bool,
+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,
 };
-CForm.displayName = 'CForm';
+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"]);
@@ -5979,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 () {
@@ -6005,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 })),
-        formControl(),
-        label)) : (React__default.createElement("div", { className: _className },
+        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(),
-        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);
@@ -6060,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) {
@@ -6146,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) {
@@ -6202,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"]);
@@ -6404,11 +6488,12 @@ CModalDialog.displayName = 'CModalDialog';
 
 var CModalContext = createContext({});
 var CModal = forwardRef(function (_a, ref) {
-    var children = _a.children, alignment = _a.alignment, _b = _a.backdrop, backdrop = _b === void 0 ? true : _b, className = _a.className, _c = _a.duration, duration = _c === void 0 ? 150 : _c, fullscreen = _a.fullscreen, _d = _a.keyboard, keyboard = _d === void 0 ? true : _d, onClose = _a.onClose, onClosePrevented = _a.onClosePrevented, onShow = _a.onShow, _e = _a.portal, portal = _e === void 0 ? true : _e, scrollable = _a.scrollable, size = _a.size, _f = _a.transition, transition = _f === void 0 ? true : _f, visible = _a.visible;
+    var children = _a.children, alignment = _a.alignment, _b = _a.backdrop, backdrop = _b === void 0 ? true : _b, className = _a.className, _c = _a.duration, duration = _c === void 0 ? 150 : _c, fullscreen = _a.fullscreen, _d = _a.keyboard, keyboard = _d === void 0 ? true : _d, onClose = _a.onClose, onClosePrevented = _a.onClosePrevented, onShow = _a.onShow, _e = _a.portal, portal = _e === void 0 ? true : _e, scrollable = _a.scrollable, size = _a.size, _f = _a.transition, transition = _f === void 0 ? true : _f, _g = _a.unmountOnClose, unmountOnClose = _g === void 0 ? true : _g, visible = _a.visible;
     var modalRef = useRef(null);
+    var modalContentRef = useRef(null);
     var forkedRef = useForkedRef(ref, modalRef);
-    var _g = useState(visible), _visible = _g[0], setVisible = _g[1];
-    var _h = useState(false), staticBackdrop = _h[0], setStaticBackdrop = _h[1];
+    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]);
@@ -6416,6 +6501,14 @@ var CModal = forwardRef(function (_a, ref) {
         visible: _visible,
         setVisible: setVisible,
     };
+    useEffect(function () {
+        modalRef.current && modalRef.current.addEventListener('click', handleClickOutside);
+        modalRef.current && modalRef.current.addEventListener('keyup', handleKeyDown);
+        return function () {
+            modalRef.current && modalRef.current.removeEventListener('click', handleClickOutside);
+            modalRef.current && modalRef.current.removeEventListener('keyup', handleKeyDown);
+        };
+    }, [_visible]);
     var handleDismiss = function () {
         if (backdrop === 'static') {
             return setStaticBackdrop(true);
@@ -6453,6 +6546,12 @@ var CModal = forwardRef(function (_a, ref) {
         }
         return function () { return document.body.classList.remove('modal-open'); };
     }, [_visible]);
+    var handleClickOutside = function (event) {
+        if (modalContentRef.current &&
+            !modalContentRef.current.contains(event.target)) {
+            handleDismiss();
+        }
+    };
     var handleKeyDown = useCallback(function (event) {
         if (event.key === 'Escape' && keyboard) {
             return handleDismiss();
@@ -6461,17 +6560,16 @@ var CModal = forwardRef(function (_a, ref) {
     var modal = function (ref, transitionClass) {
         return (React__default.createElement(CModalContext.Provider, { value: contextValues },
             React__default.createElement("div", { className: classNames(_className, transitionClass), tabIndex: -1, role: "dialog", ref: ref },
-                React__default.createElement(CModalDialog, { alignment: alignment, fullscreen: fullscreen, scrollable: scrollable, size: size, onClick: function (event) { return event.stopPropagation(); } },
-                    React__default.createElement(CModalContent, null, children)))));
+                React__default.createElement(CModalDialog, { alignment: alignment, fullscreen: fullscreen, scrollable: scrollable, size: size },
+                    React__default.createElement(CModalContent, { ref: modalContentRef }, children)))));
     };
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement("div", { onClick: handleDismiss, onKeyDown: handleKeyDown },
-            React__default.createElement(Transition$1, { in: _visible, mountOnEnter: true, onEnter: onShow, onExit: onClose, unmountOnExit: true, timeout: !transition ? 0 : duration }, function (state) {
-                var transitionClass = getTransitionClass(state);
-                return typeof window !== 'undefined' && portal
-                    ? createPortal(modal(forkedRef, transitionClass), document.body)
-                    : modal(forkedRef, transitionClass);
-            })),
+        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)
+                : modal(forkedRef, transitionClass);
+        }),
         typeof window !== 'undefined' && portal
             ? backdrop && createPortal(React__default.createElement(CBackdrop, { visible: _visible }), document.body)
             : backdrop && React__default.createElement(CBackdrop, { visible: _visible })));
@@ -6494,6 +6592,7 @@ CModal.propTypes = {
     scrollable: PropTypes.bool,
     size: PropTypes.oneOf(['sm', 'lg', 'xl']),
     transition: PropTypes.bool,
+    unmountOnClose: PropTypes.bool,
     visible: PropTypes.bool,
 };
 CModal.displayName = 'CModal';
@@ -6644,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)) {
@@ -6756,46 +6855,150 @@ var CNavbarBrand = forwardRef(function (_a, ref) {
     var _className = classNames('navbar-brand', className);
     return (React__default.createElement(Component, __assign({ className: _className }, rest, { ref: ref }), children));
 });
-CNavbarBrand.propTypes = {
+CNavbarBrand.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    component: PropTypes.elementType,
+};
+CNavbarBrand.displayName = 'CNavbarBrand';
+
+var CNavbarNav = forwardRef(function (_a, ref) {
+    var children = _a.children, _b = _a.component, Component = _b === void 0 ? 'ul' : _b, className = _a.className, rest = __rest(_a, ["children", "component", "className"]);
+    var _className = classNames('navbar-nav', className);
+    return (React__default.createElement(Component, __assign({ className: _className, role: "navigation" }, rest, { ref: ref }), children));
+});
+CNavbarNav.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    component: PropTypes.elementType,
+};
+CNavbarNav.displayName = 'CNavbarNav';
+
+var CNavbarText = forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
+    var _className = classNames('navbar-text', className);
+    return (React__default.createElement("span", __assign({ className: _className }, rest, { ref: ref }), children));
+});
+CNavbarText.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+};
+CNavbarText.displayName = 'CNavbarText';
+
+var CNavbarToggler = forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
+    var _className = classNames('navbar-toggler', className);
+    return (React__default.createElement("button", __assign({ type: "button", className: _className }, rest, { ref: ref }), children ? children : React__default.createElement("span", { className: "navbar-toggler-icon" })));
+});
+CNavbarToggler.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+};
+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 ? 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,
-    component: PropTypes.elementType,
+    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,
 };
-CNavbarBrand.displayName = 'CNavbarBrand';
+COffcanvas.displayName = 'COffcanvas';
 
-var CNavbarNav = forwardRef(function (_a, ref) {
-    var children = _a.children, _b = _a.component, Component = _b === void 0 ? 'ul' : _b, className = _a.className, rest = __rest(_a, ["children", "component", "className"]);
-    var _className = classNames('navbar-nav', className);
-    return (React__default.createElement(Component, __assign({ className: _className, role: "navigation" }, rest, { ref: ref }), children));
+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));
 });
-CNavbarNav.propTypes = {
+COffcanvasBody.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
-    component: PropTypes.elementType,
 };
-CNavbarNav.displayName = 'CNavbarNav';
+COffcanvasBody.displayName = 'COffcanvasBody';
 
-var CNavbarText = forwardRef(function (_a, ref) {
+var COffcanvasHeader = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
-    var _className = classNames('navbar-text', className);
-    return (React__default.createElement("span", __assign({ className: _className }, rest, { ref: ref }), children));
+    var _className = classNames('offcanvas-header', className);
+    return (React__default.createElement("div", __assign({ className: _className }, rest, { ref: ref }), children));
 });
-CNavbarText.propTypes = {
+COffcanvasHeader.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
 };
-CNavbarText.displayName = 'CNavbarText';
+COffcanvasHeader.displayName = 'COffcanvasHeader';
 
-var CNavbarToggler = forwardRef(function (_a, ref) {
-    var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
-    var _className = classNames('navbar-toggler', className);
-    return (React__default.createElement("button", __assign({ type: "button", className: _className }, rest, { ref: ref }), children ? children : React__default.createElement("span", { className: "navbar-toggler-icon" })));
+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));
 });
-CNavbarToggler.propTypes = {
+COffcanvasTitle.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
+    component: PropTypes.elementType,
 };
-CNavbarToggler.displayName = 'CNavbarToggler';
+COffcanvasTitle.displayName = 'COffcanvasTitle';
 
 var CPagination = forwardRef(function (_a, ref) {
     var _b;
@@ -6870,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.node,
-    placement: PropTypes.oneOf(['auto', 'top', 'right', 'bottom', 'left']),
-    offset: PropTypes.any,
-    onHide: PropTypes.func,
-    onShow: PropTypes.func,
-    title: PropTypes.string,
-    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"]);
@@ -6968,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'));
 };
@@ -7080,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);
@@ -7400,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 = {
@@ -7424,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 () {
@@ -7461,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 = {
@@ -7574,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'
@@ -7585,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.node,
-    placement: PropTypes.oneOf(['auto', 'top', 'right', 'bottom', 'left']),
+    content: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+    offset: PropTypes.any,
     onHide: PropTypes.func,
     onShow: PropTypes.func,
+    placement: PropTypes.oneOf(['auto', 'top', 'right', 'bottom', 'left']),
     trigger: triggerPropType,
     visible: PropTypes.bool,
 };