@coreui/react 4.0.2 → 4.1.0

package/dist/index.js

@@ -2414,7 +2414,7 @@ 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, "\""));
         }
     }
 }
@@ -2423,8 +2423,9 @@ function isFunction(value) {
 }
 
 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 +2439,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 +2613,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 +2684,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 +2709,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 +2779,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 +2797,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 +2823,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 +2838,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 +2898,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 +3064,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 +3124,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 +3136,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 +3425,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 +3605,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 +3743,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 +3759,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 +3792,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 +3846,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 +4105,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 +4122,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 +4622,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 +4639,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 +4667,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 +4737,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 +4750,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 +4769,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 +5747,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 +5820,7 @@ CDropdownToggle.propTypes = {
 };
 CDropdownToggle.displayName = 'CDropdownToggle';
 
-var BREAKPOINTS$2 = [
+var BREAKPOINTS$3 = [
     'xxl',
     'xl',
     'lg',
@@ -5779,33 +5830,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 +5885,7 @@ CCol.propTypes = {
 };
 CCol.displayName = 'CCol';
 
-var BREAKPOINTS$1 = [
+var BREAKPOINTS$2 = [
     'xxl',
     'xl',
     'lg',
@@ -5844,13 +5895,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 +5916,7 @@ CContainer.propTypes = {
 };
 CContainer.displayName = 'CContainer';
 
-var BREAKPOINTS = [
+var BREAKPOINTS$1 = [
     'xxl',
     'xl',
     'lg',
@@ -5875,27 +5926,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 +5970,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 +6025,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 +6061,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 +6091,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 +6123,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 +6149,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 +6206,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 +6232,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 +6320,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 +6343,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 +6367,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 +6410,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));
 });
@@ -6527,8 +6578,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 +6615,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 +6675,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 +6739,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 +6828,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 +6858,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 +6937,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)));
@@ -6871,11 +6961,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 +6983,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 +7080,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 +7130,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 +7159,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 +7257,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 +7275,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 +7311,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 +7335,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 +7354,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 +7369,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 +7384,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 +7399,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 +7476,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 +7633,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)));
                 }));
@@ -7563,7 +7653,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 +7696,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 +7717,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 +7763,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 +7872,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;