@coreui/react 4.0.1 → 4.1.2

package/dist/index.js

@@ -385,6 +385,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.
  *
@@ -397,7 +399,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;
@@ -409,7 +411,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) { /**/ }
   };
 }
 
@@ -438,7 +440,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;
@@ -497,9 +500,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') {
@@ -600,6 +603,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'),
@@ -645,8 +649,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.
@@ -681,7 +686,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.'
@@ -720,7 +725,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;
     }
@@ -864,14 +872,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.hasOwnProperty('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);
   }
@@ -886,6 +899,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];
@@ -895,8 +915,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) {
@@ -915,16 +935,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);
@@ -1109,6 +1131,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,
@@ -2387,6 +2410,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++) {
@@ -2396,6 +2420,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);
@@ -2403,7 +2428,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)) {
@@ -2414,17 +2442,19 @@ function assignRef(ref, value) {
             ref.current = value;
         }
         catch (error) {
-            throw new Error("Cannot assign value \"" + value + "\" to ref \"" + ref + "\"");
+            throw new Error("Cannot assign value \"".concat(value, "\" to ref \"").concat(ref, "\""));
         }
     }
 }
+// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
 function isFunction(value) {
     return !!(value && {}.toString.call(value) == '[object Function]');
 }
 
 var CCollapse = React.forwardRef(function (_a, ref) {
-    var children = _a.children, className = _a.className, onHide = _a.onHide, onShow = _a.onShow, visible = _a.visible, rest = __rest(_a, ["children", "className", "onHide", "onShow", "visible"]);
+    var children = _a.children, className = _a.className, horizontal = _a.horizontal, onHide = _a.onHide, onShow = _a.onShow, visible = _a.visible, rest = __rest(_a, ["children", "className", "horizontal", "onHide", "onShow", "visible"]);
     var _b = React.useState(), height = _b[0], setHeight = _b[1];
+    var _c = React.useState(), width = _c[0], setWidth = _c[1];
     var collapseRef = React.useRef(null);
     var forkedRef = useForkedRef(ref, collapseRef);
     var getTransitionClass = function (state) {
@@ -2438,31 +2468,55 @@ var CCollapse = React.forwardRef(function (_a, ref) {
     };
     var onEntering = function () {
         onShow && onShow();
+        if (horizontal) {
+            collapseRef.current && setWidth(collapseRef.current.scrollWidth);
+            return;
+        }
         collapseRef.current && setHeight(collapseRef.current.scrollHeight);
     };
     var onEntered = function () {
+        if (horizontal) {
+            setWidth(0);
+            return;
+        }
         setHeight(0);
     };
     var onExit = function () {
+        if (horizontal) {
+            collapseRef.current && setWidth(collapseRef.current.scrollWidth);
+            return;
+        }
         collapseRef.current && setHeight(collapseRef.current.scrollHeight);
     };
     var onExiting = function () {
         onHide && onHide();
+        if (horizontal) {
+            setWidth(0);
+            return;
+        }
         setHeight(0);
     };
     var onExited = function () {
+        if (horizontal) {
+            setWidth(0);
+            return;
+        }
         setHeight(0);
     };
-    var _className = classNames(className);
+    var _className = classNames({
+        'collapse-horizontal': horizontal,
+    }, className);
     return (React__default["default"].createElement(CSSTransition$1, { in: visible, 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 };
-        return (React__default["default"].createElement("div", __assign({ className: classNames(_className, transitionClass), style: __assign({}, currentHeight) }, rest, { ref: forkedRef }), children));
+        var currentWidth = width === 0 ? null : { width: width };
+        return (React__default["default"].createElement("div", __assign({ className: classNames(_className, transitionClass), style: __assign(__assign({}, currentHeight), currentWidth) }, rest, { ref: forkedRef }), children));
     }));
 });
 CCollapse.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
+    horizontal: PropTypes.bool,
     onHide: PropTypes.func,
     onShow: PropTypes.func,
     visible: PropTypes.bool,
@@ -2588,7 +2642,7 @@ var CAlert = React.forwardRef(function (_a, ref) {
     React.useEffect(function () {
         setVisible(visible);
     }, [visible]);
-    var _className = classNames('alert', variant === 'solid' ? "bg-" + color + " text-white" : "alert-" + color, {
+    var _className = classNames('alert', variant === 'solid' ? "bg-".concat(color, " text-white") : "alert-".concat(color), {
         'alert-dismissible fade': dismissible,
     }, className);
     var getTransitionClass = function (state) {
@@ -2659,11 +2713,11 @@ var CAvatar = React.forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, color = _a.color, shape = _a.shape, size = _a.size, src = _a.src, status = _a.status, textColor = _a.textColor, rest = __rest(_a, ["children", "className", "color", "shape", "size", "src", "status", "textColor"]);
     var _className = classNames('avatar', (_b = {},
-        _b["bg-" + color] = color,
-        _b["avatar-" + size] = size,
-        _b["text-" + textColor] = textColor,
+        _b["bg-".concat(color)] = color,
+        _b["avatar-".concat(size)] = size,
+        _b["text-".concat(textColor)] = textColor,
         _b), shape, className);
-    var statusClassName = status && classNames('avatar-status', "bg-" + status);
+    var statusClassName = status && classNames('avatar-status', "bg-".concat(status));
     return (React__default["default"].createElement("div", __assign({ className: _className }, rest, { ref: ref }),
         src ? React__default["default"].createElement("img", { src: src, className: "avatar-img" }) : children,
         status && React__default["default"].createElement("span", { className: statusClassName })));
@@ -2684,14 +2738,14 @@ var CBadge = React.forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, color = _a.color, _c = _a.component, Component = _c === void 0 ? 'span' : _c, position = _a.position, shape = _a.shape, size = _a.size, textColor = _a.textColor, rest = __rest(_a, ["children", "className", "color", "component", "position", "shape", "size", "textColor"]);
     var _className = classNames('badge', (_b = {},
-        _b["bg-" + color] = color,
+        _b["bg-".concat(color)] = color,
         _b['position-absolute translate-middle'] = position,
         _b['top-0'] = position === null || position === void 0 ? void 0 : position.includes('top'),
         _b['top-100'] = position === null || position === void 0 ? void 0 : position.includes('bottom'),
         _b['start-100'] = position === null || position === void 0 ? void 0 : position.includes('end'),
         _b['start-0'] = position === null || position === void 0 ? void 0 : position.includes('start'),
-        _b["badge-" + size] = size,
-        _b["text-" + textColor] = textColor,
+        _b["badge-".concat(size)] = size,
+        _b["text-".concat(textColor)] = textColor,
         _b), shape, className);
     return (React__default["default"].createElement(Component, __assign({ className: _className }, rest, { ref: ref }), children));
 });
@@ -2754,7 +2808,7 @@ CBreadcrumbItem.displayName = 'CBreadcrumbItem';
 var CButton = React.forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, _c = _a.color, color = _c === void 0 ? 'primary' : _c, _d = _a.component, component = _d === void 0 ? 'button' : _d, shape = _a.shape, size = _a.size, _e = _a.type, type = _e === void 0 ? 'button' : _e, variant = _a.variant, rest = __rest(_a, ["children", "className", "color", "component", "shape", "size", "type", "variant"]);
-    var _className = classNames('btn', variant ? "btn-" + variant + "-" + color : "btn-" + color, (_b = {}, _b["btn-" + size] = size, _b), shape, className);
+    var _className = classNames('btn', variant ? "btn-".concat(variant, "-").concat(color) : "btn-".concat(color), (_b = {}, _b["btn-".concat(size)] = size, _b), shape, className);
     return (React__default["default"].createElement(CLink, __assign({ component: rest.href ? 'a' : component, type: type, className: _className }, rest, { ref: ref }), children));
 });
 CButton.propTypes = {
@@ -2772,7 +2826,7 @@ CButton.displayName = 'CButton';
 var CButtonGroup = React.forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, size = _a.size, vertical = _a.vertical, rest = __rest(_a, ["children", "className", "size", "vertical"]);
-    var _className = classNames(vertical ? 'btn-group-vertical' : 'btn-group', (_b = {}, _b["btn-group-" + size] = size, _b), className);
+    var _className = classNames(vertical ? 'btn-group-vertical' : 'btn-group', (_b = {}, _b["btn-group-".concat(size)] = size, _b), className);
     return (React__default["default"].createElement("div", __assign({ className: _className }, rest, { ref: ref }), children));
 });
 CButtonGroup.propTypes = {
@@ -2798,7 +2852,7 @@ var CCallout = React.forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, color = _a.color, rest = __rest(_a, ["children", "className", "color"]);
     var _className = classNames('callout', (_b = {},
-        _b["callout-" + color] = color,
+        _b["callout-".concat(color)] = color,
         _b), className);
     return (React__default["default"].createElement("div", __assign({ className: _className }, rest, { ref: ref }), children));
 });
@@ -2813,8 +2867,8 @@ var CCard = React.forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, color = _a.color, textColor = _a.textColor, rest = __rest(_a, ["children", "className", "color", "textColor"]);
     var _className = classNames('card', (_b = {},
-        _b["bg-" + color] = color,
-        _b["text-" + textColor] = textColor,
+        _b["bg-".concat(color)] = color,
+        _b["text-".concat(textColor)] = textColor,
         _b), className);
     return (React__default["default"].createElement("div", __assign({ className: _className }, rest, { ref: ref }), children));
 });
@@ -2873,7 +2927,7 @@ CCardHeader.displayName = 'CCardHeader';
 
 var CCardImage = React.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, _b = _a.component, Component = _b === void 0 ? 'img' : _b, orientation = _a.orientation, rest = __rest(_a, ["children", "className", "component", "orientation"]);
-    var _className = classNames(orientation ? "card-img-" + orientation : 'card-img', className);
+    var _className = classNames(orientation ? "card-img-".concat(orientation) : 'card-img', className);
     return (React__default["default"].createElement(Component, __assign({ className: _className }, rest, { ref: ref }), children));
 });
 CCardImage.propTypes = {
@@ -3039,7 +3093,7 @@ var CCarousel = React.forwardRef(function (_a, ref) {
                 setCustomInterval: setCustomInterval,
             } },
             indicators && (React__default["default"].createElement("ol", { className: "carousel-indicators" }, Array.from({ length: itemsNumber }, function (_, i) { return i; }).map(function (index) {
-                return (React__default["default"].createElement("li", { key: "indicator" + index, onClick: function () {
+                return (React__default["default"].createElement("li", { key: "indicator".concat(index), onClick: function () {
                         !animating && handleIndicatorClick(index);
                     }, className: active === index ? 'active' : '', "data-coreui-target": "" }));
             }))),
@@ -3099,7 +3153,7 @@ var CCarouselItem = React.forwardRef(function (_a, ref) {
         if (active) {
             setCustomInterval(interval);
             if (count !== 0)
-                setOrderClassName("carousel-item-" + direction);
+                setOrderClassName("carousel-item-".concat(direction));
         }
         if (prevActive.current && !active) {
             setActiveClassName('active');
@@ -3111,7 +3165,7 @@ var CCarouselItem = React.forwardRef(function (_a, ref) {
                     // @ts-expect-error reflow is necessary to proper transition
                     // eslint-disable-next-line @typescript-eslint/no-unused-vars
                     (_a = carouselItemRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight;
-                    setDirectionClassName("carousel-item-" + (direction === 'next' ? 'start' : 'end'));
+                    setDirectionClassName("carousel-item-".concat(direction === 'next' ? 'start' : 'end'));
                 }
             }, 0);
         }
@@ -3400,29 +3454,32 @@ function getBasePlacement(placement) {
   return placement.split('-')[0];
 }
 
-// import { isHTMLElement } from './instanceOf';
-function getBoundingClientRect(element, // eslint-disable-next-line unused-imports/no-unused-vars
-includeScale) {
+var max = Math.max;
+var min = Math.min;
+var round = Math.round;
+
+function getBoundingClientRect(element, includeScale) {
+  if (includeScale === void 0) {
+    includeScale = false;
+  }
 
   var rect = element.getBoundingClientRect();
   var scaleX = 1;
-  var scaleY = 1; // FIXME:
-  // `offsetWidth` returns an integer while `getBoundingClientRect`
-  // returns a float. This results in `scaleX` or `scaleY` being
-  // non-1 when it should be for elements that aren't a full pixel in
-  // width or height.
-  // if (isHTMLElement(element) && includeScale) {
-  //   const offsetHeight = element.offsetHeight;
-  //   const offsetWidth = element.offsetWidth;
-  //   // Do not attempt to divide by 0, otherwise we get `Infinity` as scale
-  //   // Fallback to 1 in case both values are `0`
-  //   if (offsetWidth > 0) {
-  //     scaleX = rect.width / offsetWidth || 1;
-  //   }
-  //   if (offsetHeight > 0) {
-  //     scaleY = rect.height / offsetHeight || 1;
-  //   }
-  // }
+  var scaleY = 1;
+
+  if (isHTMLElement(element) && includeScale) {
+    var offsetHeight = element.offsetHeight;
+    var offsetWidth = element.offsetWidth; // Do not attempt to divide by 0, otherwise we get `Infinity` as scale
+    // Fallback to 1 in case both values are `0`
+
+    if (offsetWidth > 0) {
+      scaleX = round(rect.width) / offsetWidth || 1;
+    }
+
+    if (offsetHeight > 0) {
+      scaleY = round(rect.height) / offsetHeight || 1;
+    }
+  }
 
   return {
     width: rect.width / scaleX,
@@ -3577,13 +3634,13 @@ function getMainAxisFromPlacement(placement) {
   return ['top', 'bottom'].indexOf(placement) >= 0 ? 'x' : 'y';
 }
 
-var max = Math.max;
-var min = Math.min;
-var round = Math.round;
-
 function within(min$1, value, max$1) {
   return max(min$1, min(value, max$1));
 }
+function withinMaxClamp(min, value, max) {
+  var v = within(min, value, max);
+  return v > max ? max : v;
+}
 
 function getFreshSideObject() {
   return {
@@ -3715,8 +3772,8 @@ function roundOffsetsByDPR(_ref) {
   var win = window;
   var dpr = win.devicePixelRatio || 1;
   return {
-    x: round(round(x * dpr) / dpr) || 0,
-    y: round(round(y * dpr) / dpr) || 0
+    x: round(x * dpr) / dpr || 0,
+    y: round(y * dpr) / dpr || 0
   };
 }
 
@@ -3731,7 +3788,8 @@ function mapToStyles(_ref2) {
       position = _ref2.position,
       gpuAcceleration = _ref2.gpuAcceleration,
       adaptive = _ref2.adaptive,
-      roundOffsets = _ref2.roundOffsets;
+      roundOffsets = _ref2.roundOffsets,
+      isFixed = _ref2.isFixed;
 
   var _ref3 = roundOffsets === true ? roundOffsetsByDPR(offsets) : typeof roundOffsets === 'function' ? roundOffsets(offsets) : offsets,
       _ref3$x = _ref3.x,
@@ -3763,16 +3821,18 @@ function mapToStyles(_ref2) {
     offsetParent = offsetParent;
 
     if (placement === top || (placement === left || placement === right) && variation === end) {
-      sideY = bottom; // $FlowFixMe[prop-missing]
-
-      y -= offsetParent[heightProp] - popperRect.height;
+      sideY = bottom;
+      var offsetY = isFixed && win.visualViewport ? win.visualViewport.height : // $FlowFixMe[prop-missing]
+      offsetParent[heightProp];
+      y -= offsetY - popperRect.height;
       y *= gpuAcceleration ? 1 : -1;
     }
 
     if (placement === left || (placement === top || placement === bottom) && variation === end) {
-      sideX = right; // $FlowFixMe[prop-missing]
-
-      x -= offsetParent[widthProp] - popperRect.width;
+      sideX = right;
+      var offsetX = isFixed && win.visualViewport ? win.visualViewport.width : // $FlowFixMe[prop-missing]
+      offsetParent[widthProp];
+      x -= offsetX - popperRect.width;
       x *= gpuAcceleration ? 1 : -1;
     }
   }
@@ -3815,7 +3875,8 @@ function computeStyles(_ref4) {
     variation: getVariation(state.placement),
     popper: state.elements.popper,
     popperRect: state.rects.popper,
-    gpuAcceleration: gpuAcceleration
+    gpuAcceleration: gpuAcceleration,
+    isFixed: state.options.strategy === 'fixed'
   };
 
   if (state.modifiersData.popperOffsets != null) {
@@ -4073,7 +4134,7 @@ function getInnerBoundingClientRect(element) {
 }
 
 function getClientRectFromMixedType(element, clippingParent) {
-  return clippingParent === viewport ? rectToClientRect(getViewportRect(element)) : isHTMLElement(clippingParent) ? getInnerBoundingClientRect(clippingParent) : rectToClientRect(getDocumentRect(getDocumentElement(element)));
+  return clippingParent === viewport ? rectToClientRect(getViewportRect(element)) : isElement(clippingParent) ? getInnerBoundingClientRect(clippingParent) : rectToClientRect(getDocumentRect(getDocumentElement(element)));
 } // A "clipping parent" is an overflowable container with the characteristic of
 // clipping (or hiding) overflowing elements with a position different from
 // `initial`
@@ -4090,7 +4151,7 @@ function getClippingParents(element) {
 
 
   return clippingParents.filter(function (clippingParent) {
-    return isElement(clippingParent) && contains(clippingParent, clipperElement) && getNodeName(clippingParent) !== 'body';
+    return isElement(clippingParent) && contains(clippingParent, clipperElement) && getNodeName(clippingParent) !== 'body' && (canEscapeClipping ? getComputedStyle$1(clippingParent).position !== 'static' : true);
   });
 } // Gets the maximum area that the element is visible in due to any number of
 // clipping parents
@@ -4590,6 +4651,14 @@ function preventOverflow(_ref) {
   var tetherOffsetValue = typeof tetherOffset === 'function' ? tetherOffset(Object.assign({}, state.rects, {
     placement: state.placement
   })) : tetherOffset;
+  var normalizedTetherOffsetValue = typeof tetherOffsetValue === 'number' ? {
+    mainAxis: tetherOffsetValue,
+    altAxis: tetherOffsetValue
+  } : Object.assign({
+    mainAxis: 0,
+    altAxis: 0
+  }, tetherOffsetValue);
+  var offsetModifierState = state.modifiersData.offset ? state.modifiersData.offset[state.placement] : null;
   var data = {
     x: 0,
     y: 0
@@ -4599,13 +4668,15 @@ function preventOverflow(_ref) {
     return;
   }
 
-  if (checkMainAxis || checkAltAxis) {
+  if (checkMainAxis) {
+    var _offsetModifierState$;
+
     var mainSide = mainAxis === 'y' ? top : left;
     var altSide = mainAxis === 'y' ? bottom : right;
     var len = mainAxis === 'y' ? 'height' : 'width';
     var offset = popperOffsets[mainAxis];
-    var min$1 = popperOffsets[mainAxis] + overflow[mainSide];
-    var max$1 = popperOffsets[mainAxis] - overflow[altSide];
+    var min$1 = offset + overflow[mainSide];
+    var max$1 = offset - overflow[altSide];
     var additive = tether ? -popperRect[len] / 2 : 0;
     var minLen = variation === start ? referenceRect[len] : popperRect[len];
     var maxLen = variation === start ? -popperRect[len] : -referenceRect[len]; // We need to include the arrow in the calculation so the arrow doesn't go
@@ -4625,36 +4696,45 @@ function preventOverflow(_ref) {
     // width or height)
 
     var arrowLen = within(0, referenceRect[len], arrowRect[len]);
-    var minOffset = isBasePlacement ? referenceRect[len] / 2 - additive - arrowLen - arrowPaddingMin - tetherOffsetValue : minLen - arrowLen - arrowPaddingMin - tetherOffsetValue;
-    var maxOffset = isBasePlacement ? -referenceRect[len] / 2 + additive + arrowLen + arrowPaddingMax + tetherOffsetValue : maxLen + arrowLen + arrowPaddingMax + tetherOffsetValue;
+    var minOffset = isBasePlacement ? referenceRect[len] / 2 - additive - arrowLen - arrowPaddingMin - normalizedTetherOffsetValue.mainAxis : minLen - arrowLen - arrowPaddingMin - normalizedTetherOffsetValue.mainAxis;
+    var maxOffset = isBasePlacement ? -referenceRect[len] / 2 + additive + arrowLen + arrowPaddingMax + normalizedTetherOffsetValue.mainAxis : maxLen + arrowLen + arrowPaddingMax + normalizedTetherOffsetValue.mainAxis;
     var arrowOffsetParent = state.elements.arrow && getOffsetParent(state.elements.arrow);
     var clientOffset = arrowOffsetParent ? mainAxis === 'y' ? arrowOffsetParent.clientTop || 0 : arrowOffsetParent.clientLeft || 0 : 0;
-    var offsetModifierValue = state.modifiersData.offset ? state.modifiersData.offset[state.placement][mainAxis] : 0;
-    var tetherMin = popperOffsets[mainAxis] + minOffset - offsetModifierValue - clientOffset;
-    var tetherMax = popperOffsets[mainAxis] + maxOffset - offsetModifierValue;
+    var offsetModifierValue = (_offsetModifierState$ = offsetModifierState == null ? void 0 : offsetModifierState[mainAxis]) != null ? _offsetModifierState$ : 0;
+    var tetherMin = offset + minOffset - offsetModifierValue - clientOffset;
+    var tetherMax = offset + maxOffset - offsetModifierValue;
+    var preventedOffset = within(tether ? min(min$1, tetherMin) : min$1, offset, tether ? max(max$1, tetherMax) : max$1);
+    popperOffsets[mainAxis] = preventedOffset;
+    data[mainAxis] = preventedOffset - offset;
+  }
 
-    if (checkMainAxis) {
-      var preventedOffset = within(tether ? min(min$1, tetherMin) : min$1, offset, tether ? max(max$1, tetherMax) : max$1);
-      popperOffsets[mainAxis] = preventedOffset;
-      data[mainAxis] = preventedOffset - offset;
-    }
+  if (checkAltAxis) {
+    var _offsetModifierState$2;
 
-    if (checkAltAxis) {
-      var _mainSide = mainAxis === 'x' ? top : left;
+    var _mainSide = mainAxis === 'x' ? top : left;
 
-      var _altSide = mainAxis === 'x' ? bottom : right;
+    var _altSide = mainAxis === 'x' ? bottom : right;
 
-      var _offset = popperOffsets[altAxis];
+    var _offset = popperOffsets[altAxis];
 
-      var _min = _offset + overflow[_mainSide];
+    var _len = altAxis === 'y' ? 'height' : 'width';
 
-      var _max = _offset - overflow[_altSide];
+    var _min = _offset + overflow[_mainSide];
 
-      var _preventedOffset = within(tether ? min(_min, tetherMin) : _min, _offset, tether ? max(_max, tetherMax) : _max);
+    var _max = _offset - overflow[_altSide];
 
-      popperOffsets[altAxis] = _preventedOffset;
-      data[altAxis] = _preventedOffset - _offset;
-    }
+    var isOriginSide = [top, left].indexOf(basePlacement) !== -1;
+
+    var _offsetModifierValue = (_offsetModifierState$2 = offsetModifierState == null ? void 0 : offsetModifierState[altAxis]) != null ? _offsetModifierState$2 : 0;
+
+    var _tetherMin = isOriginSide ? _min : _offset - referenceRect[_len] - popperRect[_len] - _offsetModifierValue + normalizedTetherOffsetValue.altAxis;
+
+    var _tetherMax = isOriginSide ? _offset + referenceRect[_len] + popperRect[_len] - _offsetModifierValue - normalizedTetherOffsetValue.altAxis : _max;
+
+    var _preventedOffset = tether && isOriginSide ? withinMaxClamp(_tetherMin, _offset, _tetherMax) : within(tether ? _tetherMin : _min, _offset, tether ? _tetherMax : _max);
+
+    popperOffsets[altAxis] = _preventedOffset;
+    data[altAxis] = _preventedOffset - _offset;
   }
 
   state.modifiersData[name] = data;
@@ -4686,8 +4766,8 @@ function getNodeScroll(node) {
 
 function isElementScaled(element) {
   var rect = element.getBoundingClientRect();
-  var scaleX = rect.width / element.offsetWidth || 1;
-  var scaleY = rect.height / element.offsetHeight || 1;
+  var scaleX = round(rect.width) / element.offsetWidth || 1;
+  var scaleY = round(rect.height) / element.offsetHeight || 1;
   return scaleX !== 1 || scaleY !== 1;
 } // Returns the composite rect of an element relative to its offsetParent.
 // Composite means it takes into account transforms as well as layout.
@@ -4699,9 +4779,9 @@ function getCompositeRect(elementOrVirtualElement, offsetParent, isFixed) {
   }
 
   var isOffsetParentAnElement = isHTMLElement(offsetParent);
-  isHTMLElement(offsetParent) && isElementScaled(offsetParent);
+  var offsetParentIsScaled = isHTMLElement(offsetParent) && isElementScaled(offsetParent);
   var documentElement = getDocumentElement(offsetParent);
-  var rect = getBoundingClientRect(elementOrVirtualElement);
+  var rect = getBoundingClientRect(elementOrVirtualElement, offsetParentIsScaled);
   var scroll = {
     scrollLeft: 0,
     scrollTop: 0
@@ -4718,7 +4798,7 @@ function getCompositeRect(elementOrVirtualElement, offsetParent, isFixed) {
     }
 
     if (isHTMLElement(offsetParent)) {
-      offsets = getBoundingClientRect(offsetParent);
+      offsets = getBoundingClientRect(offsetParent, true);
       offsets.x += offsetParent.clientLeft;
       offsets.y += offsetParent.clientTop;
     } else if (documentElement) {
@@ -5696,11 +5776,11 @@ var CDropdownMenu = function (_a) {
         var classNames = [];
         if (typeof alignment === 'object') {
             Object.keys(alignment).map(function (key) {
-                classNames.push("dropdown-menu" + (key === 'xs' ? '' : "-" + key) + "-" + alignment[key]);
+                classNames.push("dropdown-menu".concat(key === 'xs' ? '' : "-".concat(key), "-").concat(alignment[key]));
             });
         }
         if (typeof alignment === 'string') {
-            classNames.push("dropdown-menu-" + alignment);
+            classNames.push("dropdown-menu-".concat(alignment));
         }
         return classNames;
     };
@@ -5769,7 +5849,7 @@ CDropdownToggle.propTypes = {
 };
 CDropdownToggle.displayName = 'CDropdownToggle';
 
-var BREAKPOINTS$2 = [
+var BREAKPOINTS$3 = [
     'xxl',
     'xl',
     'lg',
@@ -5779,33 +5859,33 @@ var BREAKPOINTS$2 = [
 ];
 var CCol = React.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
-    var repsonsiveCLassNames = [];
-    BREAKPOINTS$2.forEach(function (bp) {
+    var repsonsiveClassNames = [];
+    BREAKPOINTS$3.forEach(function (bp) {
         var breakpoint = rest[bp];
         delete rest[bp];
-        var infix = bp === 'xs' ? '' : "-" + bp;
+        var infix = bp === 'xs' ? '' : "-".concat(bp);
         if (typeof breakpoint === 'number' || typeof breakpoint === 'string') {
-            repsonsiveCLassNames.push("col" + infix + "-" + breakpoint);
+            repsonsiveClassNames.push("col".concat(infix, "-").concat(breakpoint));
         }
         if (typeof breakpoint === 'boolean') {
-            repsonsiveCLassNames.push("col" + infix);
+            repsonsiveClassNames.push("col".concat(infix));
         }
         if (breakpoint && typeof breakpoint === 'object') {
             if (typeof breakpoint.span === 'number' || typeof breakpoint.span === 'string') {
-                repsonsiveCLassNames.push("col" + infix + "-" + breakpoint.span);
+                repsonsiveClassNames.push("col".concat(infix, "-").concat(breakpoint.span));
             }
             if (typeof breakpoint.span === 'boolean') {
-                repsonsiveCLassNames.push("col" + infix);
+                repsonsiveClassNames.push("col".concat(infix));
             }
             if (typeof breakpoint.order === 'number' || typeof breakpoint.order === 'string') {
-                repsonsiveCLassNames.push("order" + infix + "-" + breakpoint.order);
+                repsonsiveClassNames.push("order".concat(infix, "-").concat(breakpoint.order));
             }
             if (typeof breakpoint.offset === 'number') {
-                repsonsiveCLassNames.push("offset" + infix + "-" + breakpoint.offset);
+                repsonsiveClassNames.push("offset".concat(infix, "-").concat(breakpoint.offset));
             }
         }
     });
-    var _className = classNames(repsonsiveCLassNames.length ? repsonsiveCLassNames : 'col', className);
+    var _className = classNames(repsonsiveClassNames.length ? repsonsiveClassNames : 'col', className);
     return (React__default["default"].createElement("div", __assign({ className: _className }, rest, { ref: ref }), children));
 });
 var span = PropTypes.oneOfType([
@@ -5834,7 +5914,7 @@ CCol.propTypes = {
 };
 CCol.displayName = 'CCol';
 
-var BREAKPOINTS$1 = [
+var BREAKPOINTS$2 = [
     'xxl',
     'xl',
     'lg',
@@ -5844,13 +5924,13 @@ var BREAKPOINTS$1 = [
 ];
 var CContainer = React.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
-    var repsonsiveCLassNames = [];
-    BREAKPOINTS$1.forEach(function (bp) {
+    var repsonsiveClassNames = [];
+    BREAKPOINTS$2.forEach(function (bp) {
         var breakpoint = rest[bp];
         delete rest[bp];
-        breakpoint && repsonsiveCLassNames.push("container-" + bp);
+        breakpoint && repsonsiveClassNames.push("container-".concat(bp));
     });
-    var _className = classNames(repsonsiveCLassNames.length ? repsonsiveCLassNames : 'container', className);
+    var _className = classNames(repsonsiveClassNames.length ? repsonsiveClassNames : 'container', className);
     return (React__default["default"].createElement("div", __assign({ className: _className }, rest, { ref: ref }), children));
 });
 CContainer.propTypes = {
@@ -5865,7 +5945,7 @@ CContainer.propTypes = {
 };
 CContainer.displayName = 'CContainer';
 
-var BREAKPOINTS = [
+var BREAKPOINTS$1 = [
     'xxl',
     'xl',
     'lg',
@@ -5875,27 +5955,27 @@ var BREAKPOINTS = [
 ];
 var CRow = React.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
-    var repsonsiveCLassNames = [];
-    BREAKPOINTS.forEach(function (bp) {
+    var repsonsiveClassNames = [];
+    BREAKPOINTS$1.forEach(function (bp) {
         var breakpoint = rest[bp];
         delete rest[bp];
-        var infix = bp === 'xs' ? '' : "-" + bp;
+        var infix = bp === 'xs' ? '' : "-".concat(bp);
         if (typeof breakpoint === 'object') {
             if (breakpoint.cols) {
-                repsonsiveCLassNames.push("row-cols" + infix + "-" + breakpoint.cols);
+                repsonsiveClassNames.push("row-cols".concat(infix, "-").concat(breakpoint.cols));
             }
             if (typeof breakpoint.gutter === 'number') {
-                repsonsiveCLassNames.push("g" + infix + "-" + breakpoint.gutter);
+                repsonsiveClassNames.push("g".concat(infix, "-").concat(breakpoint.gutter));
             }
             if (typeof breakpoint.gutterX === 'number') {
-                repsonsiveCLassNames.push("gx" + infix + "-" + breakpoint.gutterX);
+                repsonsiveClassNames.push("gx".concat(infix, "-").concat(breakpoint.gutterX));
             }
             if (typeof breakpoint.gutterY === 'number') {
-                repsonsiveCLassNames.push("gy" + infix + "-" + breakpoint.gutterY);
+                repsonsiveClassNames.push("gy".concat(infix, "-").concat(breakpoint.gutterY));
             }
         }
     });
-    var _className = classNames('row', repsonsiveCLassNames, className);
+    var _className = classNames('row', repsonsiveClassNames, className);
     return (React__default["default"].createElement("div", { className: _className, ref: ref }, children));
 });
 var bp = PropTypes.shape({
@@ -5919,7 +5999,7 @@ CRow.displayName = 'CRow';
 var CFooter = React.forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, position = _a.position, rest = __rest(_a, ["children", "className", "position"]);
-    var _className = classNames('footer', (_b = {}, _b["footer-" + position] = position, _b), className);
+    var _className = classNames('footer', (_b = {}, _b["footer-".concat(position)] = position, _b), className);
     return (React__default["default"].createElement("div", __assign({ className: _className }, rest, { ref: ref }), children));
 });
 CFooter.propTypes = {
@@ -5974,9 +6054,9 @@ var CFormCheck = React.forwardRef(function (_a, ref) {
         'me-2': hitArea,
     });
     var labelClassName = classNames(button
-        ? classNames('btn', button.variant ? "btn-" + button.variant + "-" + button.color : "btn-" + button.color, (_b = {},
-            _b["btn-" + button.size] = button.size,
-            _b), "" + button.shape)
+        ? classNames('btn', button.variant ? "btn-".concat(button.variant, "-").concat(button.color) : "btn-".concat(button.color), (_b = {},
+            _b["btn-".concat(button.size)] = button.size,
+            _b), "".concat(button.shape))
         : 'form-check-label');
     var formControl = function () {
         return React__default["default"].createElement("input", __assign({ type: type, className: inputClassName, id: id }, rest, { ref: forkedRef }));
@@ -6010,8 +6090,8 @@ var CFormFeedback = React.forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, _c = _a.component, Component = _c === void 0 ? 'div' : _c, invalid = _a.invalid, tooltip = _a.tooltip, valid = _a.valid, rest = __rest(_a, ["children", "className", "component", "invalid", "tooltip", "valid"]);
     var _className = classNames((_b = {},
-        _b["invalid-" + (tooltip ? 'tooltip' : 'feedback')] = invalid,
-        _b["valid-" + (tooltip ? 'tooltip' : 'feedback')] = valid,
+        _b["invalid-".concat(tooltip ? 'tooltip' : 'feedback')] = invalid,
+        _b["valid-".concat(tooltip ? 'tooltip' : 'feedback')] = valid,
         _b), className);
     return (React__default["default"].createElement(Component, __assign({ className: _className }, rest, { ref: ref }), children));
 });
@@ -6040,7 +6120,7 @@ var CFormInput = React.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 _className = classNames(plainText ? 'form-control-plaintext' : 'form-control', (_b = {},
-        _b["form-control-" + size] = size,
+        _b["form-control-".concat(size)] = size,
         _b['form-control-color'] = type === 'color',
         _b['is-invalid'] = invalid,
         _b['is-valid'] = valid,
@@ -6072,7 +6152,7 @@ var CFormSelect = React.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 _className = classNames('form-select', (_b = {},
-        _b["form-select-" + size] = size,
+        _b["form-select-".concat(size)] = size,
         _b['is-invalid'] = invalid,
         _b['is-valid'] = valid,
         _b), className);
@@ -6098,7 +6178,7 @@ var CFormSwitch = React.forwardRef(function (_a, ref) {
     var _b;
     var className = _a.className, id = _a.id, invalid = _a.invalid, label = _a.label, size = _a.size, _c = _a.type, type = _c === void 0 ? 'checkbox' : _c, valid = _a.valid, rest = __rest(_a, ["className", "id", "invalid", "label", "size", "type", "valid"]);
     var _className = classNames('form-check form-switch', (_b = {},
-        _b["form-switch-" + size] = size,
+        _b["form-switch-".concat(size)] = size,
         _b['is-invalid'] = invalid,
         _b['is-valid'] = valid,
         _b), className);
@@ -6155,7 +6235,7 @@ var CInputGroup = React.forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, size = _a.size, rest = __rest(_a, ["children", "className", "size"]);
     var _className = classNames('input-group', (_b = {},
-        _b["input-group-" + size] = size,
+        _b["input-group-".concat(size)] = size,
         _b), className);
     return (React__default["default"].createElement("div", __assign({ className: _className }, rest, { ref: ref }), children));
 });
@@ -6181,10 +6261,10 @@ CInputGroupText.displayName = 'CInputGroupText';
 var CHeader = React.forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, container = _a.container, position = _a.position, rest = __rest(_a, ["children", "className", "container", "position"]);
-    var _className = classNames('header', (_b = {}, _b["header-" + position] = position, _b), className);
+    var _className = classNames('header', (_b = {}, _b["header-".concat(position)] = position, _b), className);
     var content;
     if (container) {
-        content = (React__default["default"].createElement("div", { className: "container" + (container !== true ? '-' + container : '') }, children));
+        content = (React__default["default"].createElement("div", { className: "container".concat(container !== true ? '-' + container : '') }, children));
     }
     else {
         content = children;
@@ -6269,7 +6349,7 @@ var CImage = React.forwardRef(function (_a, ref) {
     var _b;
     var align = _a.align, className = _a.className, fluid = _a.fluid, rounded = _a.rounded, thumbnail = _a.thumbnail, rest = __rest(_a, ["align", "className", "fluid", "rounded", "thumbnail"]);
     var _className = classNames((_b = {},
-        _b["float-" + align] = align && (align === 'start' || align === 'end'),
+        _b["float-".concat(align)] = align && (align === 'start' || align === 'end'),
         _b['d-block mx-auto'] = align && align === 'center',
         _b['img-fluid'] = fluid,
         _b.rounded = rounded,
@@ -6292,7 +6372,7 @@ var CListGroup = React.forwardRef(function (_a, ref) {
     var _className = classNames('list-group', (_b = {
             'list-group-flush': flush
         },
-        _b["list-group-" + layout] = layout,
+        _b["list-group-".concat(layout)] = layout,
         _b), className);
     return (React__default["default"].createElement(Component, { className: _className, ref: ref }, children));
 });
@@ -6316,7 +6396,7 @@ var CListGroupItem = React.forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, active = _a.active, className = _a.className, disabled = _a.disabled, color = _a.color, _c = _a.component, component = _c === void 0 ? 'li' : _c, rest = __rest(_a, ["children", "active", "className", "disabled", "color", "component"]);
     var _className = classNames('list-group-item', (_b = {},
-        _b["list-group-item-" + color] = color,
+        _b["list-group-item-".concat(color)] = color,
         _b['list-group-item-action'] = component === 'a' || component === 'button',
         _b.active = active,
         _b.disabled = disabled,
@@ -6359,9 +6439,9 @@ var CModalDialog = React.forwardRef(function (_a, ref) {
         },
         _b[typeof fullscreen === 'boolean'
             ? 'modal-fullscreen'
-            : "modal-fullscreen-" + fullscreen + "-down"] = fullscreen,
+            : "modal-fullscreen-".concat(fullscreen, "-down")] = fullscreen,
         _b['modal-dialog-scrollable'] = scrollable,
-        _b["modal-" + size] = size,
+        _b["modal-".concat(size)] = size,
         _b), className);
     return (React__default["default"].createElement("div", __assign({ className: _className }, rest, { ref: ref }), children));
 });
@@ -6380,11 +6460,12 @@ CModalDialog.displayName = 'CModalDialog';
 
 var CModalContext = React.createContext({});
 var CModal = React.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 = React.useRef(null);
+    var modalContentRef = React.useRef(null);
     var forkedRef = useForkedRef(ref, modalRef);
-    var _g = React.useState(visible), _visible = _g[0], setVisible = _g[1];
-    var _h = React.useState(false), staticBackdrop = _h[0], setStaticBackdrop = _h[1];
+    var _h = React.useState(visible), _visible = _h[0], setVisible = _h[1];
+    var _j = React.useState(false), staticBackdrop = _j[0], setStaticBackdrop = _j[1];
     React.useEffect(function () {
         setVisible(visible);
     }, [visible]);
@@ -6392,6 +6473,14 @@ var CModal = React.forwardRef(function (_a, ref) {
         visible: _visible,
         setVisible: setVisible,
     };
+    React.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);
@@ -6429,6 +6518,12 @@ var CModal = React.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 = React.useCallback(function (event) {
         if (event.key === 'Escape' && keyboard) {
             return handleDismiss();
@@ -6437,17 +6532,16 @@ var CModal = React.forwardRef(function (_a, ref) {
     var modal = function (ref, transitionClass) {
         return (React__default["default"].createElement(CModalContext.Provider, { value: contextValues },
             React__default["default"].createElement("div", { className: classNames(_className, transitionClass), tabIndex: -1, role: "dialog", ref: ref },
-                React__default["default"].createElement(CModalDialog, { alignment: alignment, fullscreen: fullscreen, scrollable: scrollable, size: size, onClick: function (event) { return event.stopPropagation(); } },
-                    React__default["default"].createElement(CModalContent, null, children)))));
+                React__default["default"].createElement(CModalDialog, { alignment: alignment, fullscreen: fullscreen, scrollable: scrollable, size: size },
+                    React__default["default"].createElement(CModalContent, { ref: modalContentRef }, children)))));
     };
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement("div", { onClick: handleDismiss, onKeyDown: handleKeyDown },
-            React__default["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
-                    ? ReactDOM.createPortal(modal(forkedRef, transitionClass), document.body)
-                    : modal(forkedRef, transitionClass);
-            })),
+        React__default["default"].createElement(Transition$1, { in: _visible, mountOnEnter: true, onEnter: onShow, onExit: onClose, unmountOnExit: unmountOnClose, timeout: !transition ? 0 : duration }, function (state) {
+            var transitionClass = getTransitionClass(state);
+            return typeof window !== 'undefined' && portal
+                ? ReactDOM.createPortal(modal(forkedRef, transitionClass), document.body)
+                : modal(forkedRef, transitionClass);
+        }),
         typeof window !== 'undefined' && portal
             ? backdrop && ReactDOM.createPortal(React__default["default"].createElement(CBackdrop, { visible: _visible }), document.body)
             : backdrop && React__default["default"].createElement(CBackdrop, { visible: _visible })));
@@ -6470,6 +6564,7 @@ CModal.propTypes = {
     scrollable: PropTypes.bool,
     size: PropTypes.oneOf(['sm', 'lg', 'xl']),
     transition: PropTypes.bool,
+    unmountOnClose: PropTypes.bool,
     visible: PropTypes.bool,
 };
 CModal.displayName = 'CModal';
@@ -6527,8 +6622,8 @@ var CNav = React.forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, _c = _a.component, Component = _c === void 0 ? 'ul' : _c, layout = _a.layout, variant = _a.variant, rest = __rest(_a, ["children", "className", "component", "layout", "variant"]);
     var _className = classNames('nav', (_b = {},
-        _b["nav-" + layout] = layout,
-        _b["nav-" + variant] = variant,
+        _b["nav-".concat(layout)] = layout,
+        _b["nav-".concat(variant)] = variant,
         _b), className);
     return (React__default["default"].createElement(Component, __assign({ className: _className, role: "navigation" }, rest, { ref: ref }), children));
 });
@@ -6564,7 +6659,7 @@ var CSidebarNav = React.forwardRef(function (_a, ref) {
     return (React__default["default"].createElement("ul", __assign({ className: classes, ref: ref }, rest),
         React__default["default"].createElement(CNavContext.Provider, { value: CNavContextValues }, React__default["default"].Children.map(children, function (child, index) {
             if (React__default["default"].isValidElement(child)) {
-                return React__default["default"].cloneElement(child, { key: index, idx: "" + index });
+                return React__default["default"].cloneElement(child, { key: index, idx: "".concat(index) });
             }
             return;
         }))));
@@ -6624,7 +6719,7 @@ var CNavGroup = React.forwardRef(function (_a, ref) {
                 compact: compact,
             }), style: __assign(__assign({}, style), transitionStyles[state]), ref: navItemsRef }, React__default["default"].Children.map(children, function (child, index) {
             if (React__default["default"].isValidElement(child)) {
-                return React__default["default"].cloneElement(child, { key: index, idx: idx + "." + index });
+                return React__default["default"].cloneElement(child, { key: index, idx: "".concat(idx, ".").concat(index) });
             }
             return;
         }))); })));
@@ -6688,13 +6783,13 @@ var CNavbar = React.forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, color = _a.color, colorScheme = _a.colorScheme, _c = _a.component, Component = _c === void 0 ? 'nav' : _c, container = _a.container, expand = _a.expand, placement = _a.placement, rest = __rest(_a, ["children", "className", "color", "colorScheme", "component", "container", "expand", "placement"]);
     var _className = classNames('navbar', (_b = {},
-        _b["bg-" + color] = color,
-        _b["navbar-" + colorScheme] = colorScheme,
-        _b[typeof expand === 'boolean' ? 'navbar-expand' : "navbar-expand-" + expand] = expand,
+        _b["bg-".concat(color)] = color,
+        _b["navbar-".concat(colorScheme)] = colorScheme,
+        _b[typeof expand === 'boolean' ? 'navbar-expand' : "navbar-expand-".concat(expand)] = expand,
         _b), placement, className);
     var content;
     if (container) {
-        content = (React__default["default"].createElement("div", { className: "container" + (container !== true ? '-' + container : '') }, children));
+        content = (React__default["default"].createElement("div", { className: "container".concat(container !== true ? '-' + container : '') }, children));
     }
     else {
         content = children;
@@ -6777,8 +6872,8 @@ var CPagination = React.forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, align = _a.align, className = _a.className, size = _a.size, rest = __rest(_a, ["children", "align", "className", "size"]);
     var _className = classNames('pagination', (_b = {},
-        _b["justify-content-" + align] = align,
-        _b["pagination-" + size] = size,
+        _b["justify-content-".concat(align)] = align,
+        _b["pagination-".concat(size)] = size,
         _b), className);
     return (React__default["default"].createElement("nav", __assign({ ref: ref }, rest),
         React__default["default"].createElement("ul", { className: _className }, children)));
@@ -6807,6 +6902,45 @@ CPaginationItem.propTypes = {
 };
 CPaginationItem.displayName = 'CPaginationItem';
 
+var BREAKPOINTS = [
+    'xxl',
+    'xl',
+    'lg',
+    'md',
+    'sm',
+    'xs',
+];
+var CPlaceholder = React.forwardRef(function (_a, ref) {
+    var _b;
+    var children = _a.children, animation = _a.animation, className = _a.className, color = _a.color, _c = _a.component, Component = _c === void 0 ? 'span' : _c, size = _a.size, rest = __rest(_a, ["children", "animation", "className", "color", "component", "size"]);
+    var repsonsiveClassNames = [];
+    BREAKPOINTS.forEach(function (bp) {
+        var breakpoint = rest[bp];
+        delete rest[bp];
+        var infix = bp === 'xs' ? '' : "-".concat(bp);
+        if (typeof breakpoint === 'number') {
+            repsonsiveClassNames.push("col".concat(infix, "-").concat(breakpoint));
+        }
+        if (typeof breakpoint === 'boolean') {
+            repsonsiveClassNames.push("col".concat(infix));
+        }
+    });
+    var _className = classNames(animation ? "placeholder-".concat(animation) : 'placeholder', (_b = {},
+        _b["bg-".concat(color)] = color,
+        _b["placeholder-".concat(size)] = size,
+        _b), repsonsiveClassNames, className);
+    return (React__default["default"].createElement(Component, __assign({ className: _className }, rest, { ref: ref }), children));
+});
+CPlaceholder.propTypes = {
+    animation: PropTypes.oneOf(['glow', 'wave']),
+    children: PropTypes.node,
+    className: PropTypes.string,
+    color: colorPropType,
+    component: PropTypes.elementType,
+    size: PropTypes.oneOf(['xs', 'sm', 'lg']),
+};
+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 = React.useState(visible), _visible = _e[0], setVisible = _e[1];
@@ -6847,7 +6981,7 @@ var CPopover = function (_a) {
                         },
                     ] }, function (_a) {
                     var arrowProps = _a.arrowProps, style = _a.style, ref = _a.ref;
-                    return (React__default["default"].createElement("div", __assign({ className: classNames("popover bs-popover-" + (placement === 'left' ? 'start' : placement === 'right' ? 'end' : placement), transitionClass), ref: ref, role: "tooltip", style: style }, rest),
+                    return (React__default["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["default"].createElement("div", __assign({ className: "popover-arrow" }, arrowProps)),
                         React__default["default"].createElement("div", { className: "popover-header" }, title),
                         React__default["default"].createElement("div", { className: "popover-body" }, content)));
@@ -6856,12 +6990,12 @@ var CPopover = function (_a) {
 };
 CPopover.propTypes = {
     children: PropTypes.any,
-    content: PropTypes.node,
+    content: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
     placement: PropTypes.oneOf(['auto', 'top', 'right', 'bottom', 'left']),
     offset: PropTypes.any,
     onHide: PropTypes.func,
     onShow: PropTypes.func,
-    title: PropTypes.string,
+    title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
     trigger: triggerPropType,
     visible: PropTypes.bool,
 };
@@ -6871,11 +7005,11 @@ var CProgressBar = React.forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, animated = _a.animated, className = _a.className, color = _a.color, _c = _a.value, value = _c === void 0 ? 0 : _c, variant = _a.variant, rest = __rest(_a, ["children", "animated", "className", "color", "value", "variant"]);
     var _className = classNames('progress-bar', (_b = {},
-        _b["bg-" + color] = color,
-        _b["progress-bar-" + variant] = variant,
+        _b["bg-".concat(color)] = color,
+        _b["progress-bar-".concat(variant)] = variant,
         _b['progress-bar-animated'] = animated,
         _b), className);
-    return (React__default["default"].createElement("div", __assign({ className: _className, role: "progressbar", style: { width: value + "%" }, "aria-valuenow": value, "aria-valuemin": 0, "aria-valuemax": 100 }, rest, { ref: ref }), children));
+    return (React__default["default"].createElement("div", __assign({ className: _className, role: "progressbar", style: { width: "".concat(value, "%") }, "aria-valuenow": value, "aria-valuemin": 0, "aria-valuemax": 100 }, rest, { ref: ref }), children));
 });
 CProgressBar.propTypes = {
     animated: PropTypes.bool,
@@ -6893,7 +7027,7 @@ var CProgress = React.forwardRef(function (_a, ref) {
         'progress-thin': thin,
         'progress-white': white,
     }, className);
-    return (React__default["default"].createElement("div", { className: _className, style: height ? { height: height + "px" } : {}, ref: ref }, value ? (React__default["default"].createElement(CProgressBar, __assign({ value: value }, rest), children)) : (children)));
+    return (React__default["default"].createElement("div", { className: _className, style: height ? { height: "".concat(height, "px") } : {}, ref: ref }, value ? (React__default["default"].createElement(CProgressBar, __assign({ value: value }, rest), children)) : (children)));
 });
 CProgress.propTypes = {
     children: PropTypes.node,
@@ -6990,8 +7124,8 @@ var CSidebar = React.forwardRef(function (_a, ref) {
             'sidebar-narrow': narrow,
             'sidebar-overlaid': overlaid
         },
-        _b["sidebar-" + position] = position,
-        _b["sidebar-" + size] = size,
+        _b["sidebar-".concat(position)] = position,
+        _b["sidebar-".concat(size)] = size,
         _b['sidebar-narrow-unfoldable'] = unfoldable,
         _b.show = _visible === true && mobile,
         _b.hide = _visible === false && !mobile,
@@ -7040,7 +7174,7 @@ var COffcanvas = React.forwardRef(function (_a, ref) {
         }
     }, [_visible]);
     var _className = classNames('offcanvas', (_b = {},
-        _b["offcanvas-" + placement] = placement,
+        _b["offcanvas-".concat(placement)] = placement,
         _b.show = _visible,
         _b), className);
     var transitionStyles = {
@@ -7069,8 +7203,8 @@ var COffcanvas = React.forwardRef(function (_a, ref) {
         }),
         typeof window !== 'undefined' && portal
             ? backdrop &&
-                ReactDOM.createPortal(React__default["default"].createElement(CBackdrop, { visible: _visible, onClick: handleDismiss }), document.body)
-            : backdrop && React__default["default"].createElement(CBackdrop, { visible: _visible, onClick: handleDismiss })));
+                ReactDOM.createPortal(React__default["default"].createElement(CBackdrop, { className: "offcanvas-backdrop", onClick: handleDismiss, visible: _visible }), document.body)
+            : backdrop && (React__default["default"].createElement(CBackdrop, { className: "offcanvas-backdrop", onClick: handleDismiss, visible: _visible }))));
 });
 COffcanvas.propTypes = {
     backdrop: PropTypes.bool,
@@ -7167,7 +7301,7 @@ CSidebarHeader.displayName = 'CSidebarHeader';
 
 var CSpinner = React.forwardRef(function (_a, ref) {
     var className = _a.className, color = _a.color, _b = _a.component, Component = _b === void 0 ? 'div' : _b, size = _a.size, _c = _a.variant, variant = _c === void 0 ? 'border' : _c, _d = _a.visuallyHiddenLabel, visuallyHiddenLabel = _d === void 0 ? 'Loading...' : _d, rest = __rest(_a, ["className", "color", "component", "size", "variant", "visuallyHiddenLabel"]);
-    var _className = classNames("spinner-" + variant, "text-" + color, size && "spinner-" + variant + "-" + size, className);
+    var _className = classNames("spinner-".concat(variant), "text-".concat(color), size && "spinner-".concat(variant, "-").concat(size), className);
     return (React__default["default"].createElement(Component, __assign({ className: _className, role: "status" }, rest, { ref: ref }),
         React__default["default"].createElement("span", { className: "visually-hidden" }, visuallyHiddenLabel)));
 });
@@ -7185,17 +7319,17 @@ var CTable = React.forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, align = _a.align, borderColor = _a.borderColor, bordered = _a.bordered, borderless = _a.borderless, caption = _a.caption, className = _a.className, color = _a.color, hover = _a.hover, responsive = _a.responsive, small = _a.small, striped = _a.striped, rest = __rest(_a, ["children", "align", "borderColor", "bordered", "borderless", "caption", "className", "color", "hover", "responsive", "small", "striped"]);
     var _className = classNames('table', (_b = {},
-        _b["align-" + align] = align,
-        _b["caption-" + caption] = caption,
-        _b["border-" + borderColor] = borderColor,
+        _b["align-".concat(align)] = align,
+        _b["caption-".concat(caption)] = caption,
+        _b["border-".concat(borderColor)] = borderColor,
         _b['table-bordered'] = bordered,
         _b['table-borderless'] = borderless,
-        _b["table-" + color] = color,
+        _b["table-".concat(color)] = color,
         _b['table-hover'] = hover,
         _b['table-sm'] = small,
         _b['table-striped'] = striped,
         _b), className);
-    return responsive ? (React__default["default"].createElement("div", { className: typeof responsive === 'boolean' ? 'table-responsive' : "table-responsive-" + responsive },
+    return responsive ? (React__default["default"].createElement("div", { className: typeof responsive === 'boolean' ? 'table-responsive' : "table-responsive-".concat(responsive) },
         React__default["default"].createElement("table", __assign({ className: _className ? _className : undefined }, rest, { ref: ref }), children))) : (React__default["default"].createElement("table", __assign({ className: _className ? _className : undefined }, rest, { ref: ref }), children));
 });
 CTable.propTypes = {
@@ -7221,7 +7355,7 @@ var CTableBody = React.forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, color = _a.color, rest = __rest(_a, ["children", "className", "color"]);
     var _className = classNames((_b = {},
-        _b["table-" + color] = color,
+        _b["table-".concat(color)] = color,
         _b), className);
     return (React__default["default"].createElement("tbody", __assign({ className: _className ? _className : undefined }, rest, { ref: ref }), children));
 });
@@ -7245,9 +7379,9 @@ var CTableDataCell = React.forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, active = _a.active, align = _a.align, className = _a.className, color = _a.color, rest = __rest(_a, ["children", "active", "align", "className", "color"]);
     var _className = classNames((_b = {},
-        _b["align-" + align] = align,
+        _b["align-".concat(align)] = align,
         _b['table-active'] = active,
-        _b["table-" + color] = color,
+        _b["table-".concat(color)] = color,
         _b), className);
     return (React__default["default"].createElement("td", __assign({ className: _className ? _className : undefined }, rest, { ref: ref }), children));
 });
@@ -7264,7 +7398,7 @@ var CTableFoot = React.forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, color = _a.color, rest = __rest(_a, ["children", "className", "color"]);
     var _className = classNames((_b = {},
-        _b["table-" + color] = color,
+        _b["table-".concat(color)] = color,
         _b), className);
     return (React__default["default"].createElement("tfoot", __assign({ className: _className ? _className : undefined }, rest, { ref: ref }), children));
 });
@@ -7279,7 +7413,7 @@ var CTableHead = React.forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, color = _a.color, rest = __rest(_a, ["children", "className", "color"]);
     var _className = classNames((_b = {},
-        _b["table-" + color] = color,
+        _b["table-".concat(color)] = color,
         _b), className);
     return (React__default["default"].createElement("thead", __assign({ className: _className ? _className : undefined }, rest, { ref: ref }), children));
 });
@@ -7294,7 +7428,7 @@ var CTableHeaderCell = React.forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, color = _a.color, rest = __rest(_a, ["children", "className", "color"]);
     var _className = classNames((_b = {},
-        _b["table-" + color] = color,
+        _b["table-".concat(color)] = color,
         _b), className);
     return (React__default["default"].createElement("th", __assign({ className: _className ? _className : undefined }, rest, { ref: ref }), children));
 });
@@ -7309,9 +7443,9 @@ var CTableRow = React.forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, active = _a.active, align = _a.align, className = _a.className, color = _a.color, rest = __rest(_a, ["children", "active", "align", "className", "color"]);
     var _className = classNames((_b = {},
-        _b["align-" + align] = align,
+        _b["align-".concat(align)] = align,
         _b['table-active'] = active,
-        _b["table-" + color] = color,
+        _b["table-".concat(color)] = color,
         _b), className);
     return (React__default["default"].createElement("tr", __assign({ className: _className ? _className : undefined }, rest, { ref: ref }), children));
 });
@@ -7386,7 +7520,7 @@ var CToast = React.forwardRef(function (_a, ref) {
     var _className = classNames('toast', (_b = {
             fade: animation
         },
-        _b["bg-" + color] = color,
+        _b["bg-".concat(color)] = color,
         _b['border-0'] = color,
         _b), className);
     var getTransitionClass = function (state) {
@@ -7543,7 +7677,7 @@ var CTooltip = function (_a) {
                 var transitionClass = getTransitionClass(state);
                 return (React__default["default"].createElement(Popper, { placement: placement }, function (_a) {
                     var arrowProps = _a.arrowProps, style = _a.style, ref = _a.ref;
-                    return (React__default["default"].createElement("div", __assign({ className: classNames("tooltip bs-tooltip-" + (placement === 'left' ? 'start' : placement === 'right' ? 'end' : placement), transitionClass), ref: ref, role: "tooltip", style: style }, rest),
+                    return (React__default["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["default"].createElement("div", __assign({ className: "tooltip-arrow" }, arrowProps)),
                         React__default["default"].createElement("div", { className: "tooltip-inner" }, content)));
                 }));
@@ -7551,7 +7685,7 @@ var CTooltip = function (_a) {
 };
 CTooltip.propTypes = {
     children: PropTypes.any,
-    content: PropTypes.node,
+    content: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
     placement: PropTypes.oneOf(['auto', 'top', 'right', 'bottom', 'left']),
     onHide: PropTypes.func,
     onShow: PropTypes.func,
@@ -7563,7 +7697,7 @@ CTooltip.displayName = 'CTooltip';
 var CWidgetStatsA = React.forwardRef(function (_a, ref) {
     var _b;
     var action = _a.action, chart = _a.chart, className = _a.className, color = _a.color, title = _a.title, value = _a.value, rest = __rest(_a, ["action", "chart", "className", "color", "title", "value"]);
-    var _className = classNames((_b = {}, _b["bg-" + color] = color, _b['text-high-emphasis-inverse'] = color, _b), className);
+    var _className = classNames((_b = {}, _b["bg-".concat(color)] = color, _b['text-high-emphasis-inverse'] = color, _b), className);
     return (React__default["default"].createElement(CCard, __assign({ className: _className }, rest, { ref: ref }),
         React__default["default"].createElement(CCardBody, { className: "pb-0 d-flex justify-content-between align-items-start" },
             React__default["default"].createElement("div", null,
@@ -7606,8 +7740,8 @@ var CWidgetStatsC = React.forwardRef(function (_a, ref) {
     var className = _a.className, color = _a.color, icon = _a.icon, inverse = _a.inverse, progress = _a.progress, title = _a.title, value = _a.value, rest = __rest(_a, ["className", "color", "icon", "inverse", "progress", "title", "value"]);
     return (React__default["default"].createElement(CCard, __assign({ className: className, color: color }, (inverse && { textColor: 'high-emphasis-inverse' }), rest, { ref: ref }),
         React__default["default"].createElement(CCardBody, null,
-            icon && (React__default["default"].createElement("div", { className: "text-medium-emphasis" + (inverse ? '-inverse' : '') + " text-end mb-4" }, icon)),
-            value && (React__default["default"].createElement("div", { className: "text-high-emphasis" + (inverse ? '-inverse' : '') + " fs-4 fw-semibold" }, value)),
+            icon && (React__default["default"].createElement("div", { className: "text-medium-emphasis".concat(inverse ? '-inverse' : '', " text-end mb-4") }, icon)),
+            value && (React__default["default"].createElement("div", { className: "text-high-emphasis".concat(inverse ? '-inverse' : '', " fs-4 fw-semibold") }, value)),
             title && (React__default["default"].createElement("div", { className: inverse ? 'text-medium-emphasis-inverse' : 'text-medium-emphasis' }, title)),
             React__default["default"].createElement(CProgress, __assign({ className: "mt-3 mb-0", height: 4 }, (inverse && { white: true }), progress)))));
 });
@@ -7627,7 +7761,7 @@ var CWidgetStatsD = React.forwardRef(function (_a, ref) {
     var className = _a.className, chart = _a.chart, color = _a.color, icon = _a.icon, values = _a.values, rest = __rest(_a, ["className", "chart", "color", "icon", "values"]);
     var _className = classNames(className);
     var classNameHeader = classNames('position-relative d-flex justify-content-center align-items-center', (_b = {},
-        _b["bg-" + color] = color,
+        _b["bg-".concat(color)] = color,
         _b));
     return (React__default["default"].createElement(CCard, __assign({ className: _className }, rest, { ref: ref }),
         React__default["default"].createElement(CCardHeader, { className: classNameHeader },
@@ -7673,10 +7807,10 @@ var CWidgetStatsF = React.forwardRef(function (_a, ref) {
     var className = _a.className, color = _a.color, footer = _a.footer, icon = _a.icon, _b = _a.padding, padding = _b === void 0 ? true : _b, title = _a.title, value = _a.value, rest = __rest(_a, ["className", "color", "footer", "icon", "padding", "title", "value"]);
     var _className = classNames(className);
     return (React__default["default"].createElement(CCard, __assign({ className: _className }, rest, { ref: ref }),
-        React__default["default"].createElement(CCardBody, { className: "d-flex align-items-center " + (padding === false && 'p-0') },
-            React__default["default"].createElement("div", { className: "me-3 text-white bg-" + color + " " + (padding ? 'p-3' : 'p-4') }, icon),
+        React__default["default"].createElement(CCardBody, { className: "d-flex align-items-center ".concat(padding === false && 'p-0') },
+            React__default["default"].createElement("div", { className: "me-3 text-white bg-".concat(color, " ").concat(padding ? 'p-3' : 'p-4') }, icon),
             React__default["default"].createElement("div", null,
-                React__default["default"].createElement("div", { className: "fs-6 fw-semibold text-" + color }, value),
+                React__default["default"].createElement("div", { className: "fs-6 fw-semibold text-".concat(color) }, value),
                 React__default["default"].createElement("div", { className: "text-medium-emphasis text-uppercase fw-semibold small" }, title))),
         footer && React__default["default"].createElement(CCardFooter, null, footer)));
 });
@@ -7782,6 +7916,7 @@ exports.COffcanvasHeader = COffcanvasHeader;
 exports.COffcanvasTitle = COffcanvasTitle;
 exports.CPagination = CPagination;
 exports.CPaginationItem = CPaginationItem;
+exports.CPlaceholder = CPlaceholder;
 exports.CPopover = CPopover;
 exports.CProgress = CProgress;
 exports.CProgressBar = CProgressBar;