@coreui/react-pro 4.0.0 → 4.1.1

package/dist/index.js

@@ -385,6 +385,8 @@ var ReactPropTypesSecret$7 = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';
 
 var ReactPropTypesSecret_1$1 = ReactPropTypesSecret$7;
 
+var has$4 = Function.call.bind(Object.prototype.hasOwnProperty);
+
 /**
  * Copyright (c) 2013-present, Facebook, Inc.
  *
@@ -397,7 +399,7 @@ var printWarning$4 = function() {};
 if (process.env.NODE_ENV !== 'production') {
   var ReactPropTypesSecret$6 = ReactPropTypesSecret_1$1;
   var loggedTypeFailures$1 = {};
-  var has$3 = Function.call.bind(Object.prototype.hasOwnProperty);
+  var has$3 = has$4;
 
   printWarning$4 = 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$3(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$3 = reactIs$1.exports;
 var assign$1 = objectAssign$1;
 
 var ReactPropTypesSecret$5 = ReactPropTypesSecret_1$1;
+var has$2 = has$4;
 var checkPropTypes$2 = checkPropTypes_1$1;
 
-var has$2 = Function.call.bind(Object.prototype.hasOwnProperty);
 var printWarning$3 = function() {};
 
 if (process.env.NODE_ENV !== 'production') {
@@ -600,6 +603,7 @@ var factoryWithTypeCheckers$1 = 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$1 = 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$1 = function(isValidElement, throwOnDirectAccess) {
           ) {
             printWarning$3(
               '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$1 = 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$1 = 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$5) == null) {
+        var checkerResult = checker(props, propName, componentName, location, propFullName, ReactPropTypesSecret$5);
+        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$1 = 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$1 = 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$5);
         if (error) {
@@ -915,16 +935,18 @@ var factoryWithTypeCheckers$1 = 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$1({}, props[propName], shapeTypes);
       for (var key in allKeys) {
         var checker = shapeTypes[key];
+        if (has$2(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$5);
@@ -1109,6 +1131,7 @@ var factoryWithThrowingShims$1 = 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$1(_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$1(_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$1(className);
+    var _className = classNames$1({
+        '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$1({ className: classNames$1(_className, transitionClass), style: __assign$1({}, currentHeight) }, rest, { ref: forkedRef }), children));
+        var currentWidth = width === 0 ? null : { width: width };
+        return (React__default["default"].createElement("div", __assign$1({ className: classNames$1(_className, transitionClass), style: __assign$1(__assign$1({}, currentHeight), currentWidth) }, rest, { ref: forkedRef }), children));
     }));
 });
 CCollapse.propTypes = {
     children: PropTypes$1.node,
     className: PropTypes$1.string,
+    horizontal: PropTypes$1.bool,
     onHide: PropTypes$1.func,
     onShow: PropTypes$1.func,
     visible: PropTypes$1.bool,
@@ -2598,7 +2652,7 @@ var CAlert = React.forwardRef(function (_a, ref) {
     React.useEffect(function () {
         setVisible(visible);
     }, [visible]);
-    var _className = classNames$1('alert', variant === 'solid' ? "bg-" + color + " text-white" : "alert-" + color, {
+    var _className = classNames$1('alert', variant === 'solid' ? "bg-".concat(color, " text-white") : "alert-".concat(color), {
         'alert-dismissible fade': dismissible,
     }, className);
     var getTransitionClass = function (state) {
@@ -2669,11 +2723,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$1(_a, ["children", "className", "color", "shape", "size", "src", "status", "textColor"]);
     var _className = classNames$1('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$1('avatar-status', "bg-" + status);
+    var statusClassName = status && classNames$1('avatar-status', "bg-".concat(status));
     return (React__default["default"].createElement("div", __assign$1({ 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 })));
@@ -2694,14 +2748,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$1(_a, ["children", "className", "color", "component", "position", "shape", "size", "textColor"]);
     var _className = classNames$1('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$1({ className: _className }, rest, { ref: ref }), children));
 });
@@ -2764,7 +2818,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$1(_a, ["children", "className", "color", "component", "shape", "size", "type", "variant"]);
-    var _className = classNames$1('btn', variant ? "btn-" + variant + "-" + color : "btn-" + color, (_b = {}, _b["btn-" + size] = size, _b), shape, className);
+    var _className = classNames$1('btn', variant ? "btn-".concat(variant, "-").concat(color) : "btn-".concat(color), (_b = {}, _b["btn-".concat(size)] = size, _b), shape, className);
     return (React__default["default"].createElement(CLink, __assign$1({ component: rest.href ? 'a' : component, type: type, className: _className }, rest, { ref: ref }), children));
 });
 CButton.propTypes = {
@@ -2782,7 +2836,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$1(_a, ["children", "className", "size", "vertical"]);
-    var _className = classNames$1(vertical ? 'btn-group-vertical' : 'btn-group', (_b = {}, _b["btn-group-" + size] = size, _b), className);
+    var _className = classNames$1(vertical ? 'btn-group-vertical' : 'btn-group', (_b = {}, _b["btn-group-".concat(size)] = size, _b), className);
     return (React__default["default"].createElement("div", __assign$1({ className: _className }, rest, { ref: ref }), children));
 });
 CButtonGroup.propTypes = {
@@ -2808,7 +2862,7 @@ var CCallout = React.forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, color = _a.color, rest = __rest$1(_a, ["children", "className", "color"]);
     var _className = classNames$1('callout', (_b = {},
-        _b["callout-" + color] = color,
+        _b["callout-".concat(color)] = color,
         _b), className);
     return (React__default["default"].createElement("div", __assign$1({ className: _className }, rest, { ref: ref }), children));
 });
@@ -2823,8 +2877,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$1(_a, ["children", "className", "color", "textColor"]);
     var _className = classNames$1('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$1({ className: _className }, rest, { ref: ref }), children));
 });
@@ -2883,7 +2937,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$1(_a, ["children", "className", "component", "orientation"]);
-    var _className = classNames$1(orientation ? "card-img-" + orientation : 'card-img', className);
+    var _className = classNames$1(orientation ? "card-img-".concat(orientation) : 'card-img', className);
     return (React__default["default"].createElement(Component, __assign$1({ className: _className }, rest, { ref: ref }), children));
 });
 CCardImage.propTypes = {
@@ -3049,7 +3103,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": "" }));
             }))),
@@ -3109,7 +3163,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');
@@ -3121,7 +3175,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);
         }
@@ -3410,29 +3464,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,
@@ -3587,13 +3644,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 {
@@ -3725,8 +3782,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
   };
 }
 
@@ -3741,7 +3798,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,
@@ -3773,16 +3831,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;
     }
   }
@@ -3825,7 +3885,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) {
@@ -4083,7 +4144,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`
@@ -4100,7 +4161,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
@@ -4600,6 +4661,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
@@ -4609,13 +4678,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
@@ -4635,36 +4706,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;
@@ -4696,8 +4776,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.
@@ -4709,9 +4789,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
@@ -4728,7 +4808,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) {
@@ -5706,11 +5786,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;
     };
@@ -5779,7 +5859,7 @@ CDropdownToggle.propTypes = {
 };
 CDropdownToggle.displayName = 'CDropdownToggle';
 
-var BREAKPOINTS$2 = [
+var BREAKPOINTS$3 = [
     'xxl',
     'xl',
     'lg',
@@ -5789,33 +5869,33 @@ var BREAKPOINTS$2 = [
 ];
 var CCol = React.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest$1(_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$1(repsonsiveCLassNames.length ? repsonsiveCLassNames : 'col', className);
+    var _className = classNames$1(repsonsiveClassNames.length ? repsonsiveClassNames : 'col', className);
     return (React__default["default"].createElement("div", __assign$1({ className: _className }, rest, { ref: ref }), children));
 });
 var span = PropTypes$1.oneOfType([
@@ -5844,7 +5924,7 @@ CCol.propTypes = {
 };
 CCol.displayName = 'CCol';
 
-var BREAKPOINTS$1 = [
+var BREAKPOINTS$2 = [
     'xxl',
     'xl',
     'lg',
@@ -5854,13 +5934,13 @@ var BREAKPOINTS$1 = [
 ];
 var CContainer = React.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest$1(_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$1(repsonsiveCLassNames.length ? repsonsiveCLassNames : 'container', className);
+    var _className = classNames$1(repsonsiveClassNames.length ? repsonsiveClassNames : 'container', className);
     return (React__default["default"].createElement("div", __assign$1({ className: _className }, rest, { ref: ref }), children));
 });
 CContainer.propTypes = {
@@ -5875,7 +5955,7 @@ CContainer.propTypes = {
 };
 CContainer.displayName = 'CContainer';
 
-var BREAKPOINTS = [
+var BREAKPOINTS$1 = [
     'xxl',
     'xl',
     'lg',
@@ -5885,27 +5965,27 @@ var BREAKPOINTS = [
 ];
 var CRow = React.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest$1(_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$1('row', repsonsiveCLassNames, className);
+    var _className = classNames$1('row', repsonsiveClassNames, className);
     return (React__default["default"].createElement("div", { className: _className, ref: ref }, children));
 });
 var bp = PropTypes$1.shape({
@@ -5929,7 +6009,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$1(_a, ["children", "className", "position"]);
-    var _className = classNames$1('footer', (_b = {}, _b["footer-" + position] = position, _b), className);
+    var _className = classNames$1('footer', (_b = {}, _b["footer-".concat(position)] = position, _b), className);
     return (React__default["default"].createElement("div", __assign$1({ className: _className }, rest, { ref: ref }), children));
 });
 CFooter.propTypes = {
@@ -5965,7 +6045,14 @@ CFormLabel.displayName = 'CFormLabel';
 
 var CFormCheck = React.forwardRef(function (_a, ref) {
     var _b;
-    var className = _a.className, button = _a.button, hitArea = _a.hitArea, id = _a.id, inline = _a.inline, invalid = _a.invalid, label = _a.label, _c = _a.type, type = _c === void 0 ? 'checkbox' : _c, valid = _a.valid, rest = __rest$1(_a, ["className", "button", "hitArea", "id", "inline", "invalid", "label", "type", "valid"]);
+    var className = _a.className, button = _a.button, hitArea = _a.hitArea, id = _a.id, indeterminate = _a.indeterminate, inline = _a.inline, invalid = _a.invalid, label = _a.label, _c = _a.type, type = _c === void 0 ? 'checkbox' : _c, valid = _a.valid, rest = __rest$1(_a, ["className", "button", "hitArea", "id", "indeterminate", "inline", "invalid", "label", "type", "valid"]);
+    var inputRef = React.useRef(null);
+    var forkedRef = useForkedRef(ref, inputRef);
+    React.useEffect(function () {
+        if (inputRef.current && indeterminate) {
+            inputRef.current.indeterminate = indeterminate;
+        }
+    }, [indeterminate]);
     var _className = classNames$1('form-check', {
         'form-check-inline': inline,
         'is-invalid': invalid,
@@ -5977,12 +6064,12 @@ var CFormCheck = React.forwardRef(function (_a, ref) {
         'me-2': hitArea,
     });
     var labelClassName = classNames$1(button
-        ? classNames$1('btn', button.variant ? "btn-" + button.variant + "-" + button.color : "btn-" + button.color, (_b = {},
-            _b["btn-" + button.size] = button.size,
-            _b), "" + button.shape)
+        ? classNames$1('btn', button.variant ? "btn-".concat(button.variant, "-").concat(button.color) : "btn-".concat(button.color), (_b = {},
+            _b["btn-".concat(button.size)] = button.size,
+            _b), "".concat(button.shape))
         : 'form-check-label');
     var formControl = function () {
-        return React__default["default"].createElement("input", __assign$1({ type: type, className: inputClassName, id: id }, rest, { ref: ref }));
+        return React__default["default"].createElement("input", __assign$1({ type: type, className: inputClassName, id: id }, rest, { ref: forkedRef }));
     };
     var formLabel = function () {
         return (React__default["default"].createElement(CFormLabel, __assign$1({ customClassName: labelClassName }, (id && { htmlFor: id })), label));
@@ -6000,6 +6087,7 @@ CFormCheck.propTypes = {
     className: PropTypes$1.string,
     hitArea: PropTypes$1.oneOf(['full']),
     id: PropTypes$1.string,
+    indeterminate: PropTypes$1.bool,
     inline: PropTypes$1.bool,
     invalid: PropTypes$1.bool,
     label: PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.node]),
@@ -6012,8 +6100,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$1(_a, ["children", "className", "component", "invalid", "tooltip", "valid"]);
     var _className = classNames$1((_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$1({ className: _className }, rest, { ref: ref }), children));
 });
@@ -6042,7 +6130,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$1(_a, ["children", "className", "invalid", "plainText", "size", "type", "valid"]);
     var _className = classNames$1(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,19 +6160,25 @@ CFormRange.displayName = 'CFormRange';
 
 var CFormSelect = React.forwardRef(function (_a, ref) {
     var _b;
-    var children = _a.children, className = _a.className, htmlSize = _a.htmlSize, invalid = _a.invalid, size = _a.size, valid = _a.valid, rest = __rest$1(_a, ["children", "className", "htmlSize", "invalid", "size", "valid"]);
+    var children = _a.children, className = _a.className, htmlSize = _a.htmlSize, invalid = _a.invalid, options = _a.options, size = _a.size, valid = _a.valid, rest = __rest$1(_a, ["children", "className", "htmlSize", "invalid", "options", "size", "valid"]);
     var _className = classNames$1('form-select', (_b = {},
-        _b["form-select-" + size] = size,
+        _b["form-select-".concat(size)] = size,
         _b['is-invalid'] = invalid,
         _b['is-valid'] = valid,
         _b), className);
-    return (React__default["default"].createElement("select", __assign$1({ className: _className, size: htmlSize }, rest, { ref: ref }), children));
+    return (React__default["default"].createElement("select", __assign$1({ className: _className, size: htmlSize }, rest, { ref: ref }), options
+        ? options.map(function (option, index) {
+            return (React__default["default"].createElement("option", __assign$1({}, (typeof option === 'object' &&
+                option.disabled && { disabled: option.disabled }), (typeof option === 'object' && option.value && { value: option.value }), { key: index }), typeof option === 'string' ? option : option.label));
+        })
+        : children));
 });
 CFormSelect.propTypes = {
     children: PropTypes$1.node,
     className: PropTypes$1.string,
     htmlSize: PropTypes$1.number,
     invalid: PropTypes$1.bool,
+    options: PropTypes$1.array,
     size: PropTypes$1.oneOf(['sm', 'lg']),
     valid: PropTypes$1.bool,
 };
@@ -6094,7 +6188,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$1(_a, ["className", "id", "invalid", "label", "size", "type", "valid"]);
     var _className = classNames$1('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);
@@ -6151,7 +6245,7 @@ var CInputGroup = React.forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, size = _a.size, rest = __rest$1(_a, ["children", "className", "size"]);
     var _className = classNames$1('input-group', (_b = {},
-        _b["input-group-" + size] = size,
+        _b["input-group-".concat(size)] = size,
         _b), className);
     return (React__default["default"].createElement("div", __assign$1({ className: _className }, rest, { ref: ref }), children));
 });
@@ -6177,10 +6271,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$1(_a, ["children", "className", "container", "position"]);
-    var _className = classNames$1('header', (_b = {}, _b["header-" + position] = position, _b), className);
+    var _className = classNames$1('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;
@@ -6265,7 +6359,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$1(_a, ["align", "className", "fluid", "rounded", "thumbnail"]);
     var _className = classNames$1((_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,
@@ -6288,7 +6382,7 @@ var CListGroup = React.forwardRef(function (_a, ref) {
     var _className = classNames$1('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));
 });
@@ -6312,7 +6406,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$1(_a, ["children", "active", "className", "disabled", "color", "component"]);
     var _className = classNames$1('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,
@@ -6338,7 +6432,7 @@ CListGroupItem.displayName = 'CListGroupItem';
 
 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$1(_a, ["className", "color", "component", "size", "variant", "visuallyHiddenLabel"]);
-    var _className = classNames$1("spinner-" + variant, "text-" + color, size && "spinner-" + variant + "-" + size, className);
+    var _className = classNames$1("spinner-".concat(variant), "text-".concat(color), size && "spinner-".concat(variant, "-").concat(size), className);
     return (React__default["default"].createElement(Component, __assign$1({ className: _className, role: "status" }, rest, { ref: ref }),
         React__default["default"].createElement("span", { className: "visually-hidden" }, visuallyHiddenLabel)));
 });
@@ -6402,9 +6496,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$1({ className: _className }, rest, { ref: ref }), children));
 });
@@ -6640,7 +6734,7 @@ var CMultiSelectSelection = React.forwardRef(function (_a, ref) {
         multiple &&
             selectionType === 'counter' &&
             !search &&
-            selected.length + " " + selectionTypeCounterText,
+            "".concat(selected.length, " ").concat(selectionTypeCounterText),
         multiple &&
             selectionType === 'tags' &&
             selected.map(function (option, index) {
@@ -6815,7 +6909,7 @@ var CMultiSelect = React.forwardRef(function (_a, ref) {
             multiple && cleaner && selected.length > 0 && (React__default["default"].createElement(CMultiSelectCleaner, { onClick: function () { return handleDeselectAll(); } })),
             search && (React__default["default"].createElement(CMultiSelectSearchInput, __assign$1({}, (selected.length === 0 && { placeholder: placeholder }), (selected.length &&
                 selectionType === 'counter' && {
-                placeholder: selected.length + " " + selectionTypeCounterText,
+                placeholder: "".concat(selected.length, " ").concat(selectionTypeCounterText),
             }), (selected.length &&
                 !multiple && { placeholder: selected.map(function (option) { return option.text; })[0] }), { onChange: function (event) { return handleSearchChange(event); }, onKeyDown: function (event) { return handleSearchKeyDown(event); } }, (multiple &&
                 selected.length &&
@@ -6847,8 +6941,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$1(_a, ["children", "className", "component", "layout", "variant"]);
     var _className = classNames$1('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$1({ className: _className, role: "navigation" }, rest, { ref: ref }), children));
 });
@@ -6884,7 +6978,7 @@ var CSidebarNav = React.forwardRef(function (_a, ref) {
     return (React__default["default"].createElement("ul", __assign$1({ 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;
         }))));
@@ -6944,7 +7038,7 @@ var CNavGroup = React.forwardRef(function (_a, ref) {
                 compact: compact,
             }), style: __assign$1(__assign$1({}, 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;
         }))); })));
@@ -7008,13 +7102,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$1(_a, ["children", "className", "color", "colorScheme", "component", "container", "expand", "placement"]);
     var _className = classNames$1('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;
@@ -7097,8 +7191,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$1(_a, ["children", "align", "className", "size"]);
     var _className = classNames$1('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$1({ ref: ref }, rest),
         React__default["default"].createElement("ul", { className: _className }, children)));
@@ -7132,7 +7226,7 @@ var CSmartPagination = React.forwardRef(function (_a, ref) {
     React.useEffect(function () {
         pages < activePage && onActivePageChange(pages, true);
     }, [pages]);
-    var _classNames = classNames$1("justify-content-" + align, className);
+    var _classNames = classNames$1("justify-content-".concat(align), className);
     var showDots = (function () {
         return dots && limit > 4 && limit < pages;
     })();
@@ -7184,7 +7278,7 @@ var CSmartPagination = React.forwardRef(function (_a, ref) {
         arrows && (React__default["default"].createElement(CPaginationItem, { onClick: function () { return setPage(activePage - 1); }, "aria-label": "Go to previous page", "aria-disabled": activePage === 1, disabled: activePage === 1 }, previousButton)),
         beforeDots && (React__default["default"].createElement(CPaginationItem, { role: "separator", disabled: true }, "\u2026")),
         items.map(function (i) {
-            return (React__default["default"].createElement(CPaginationItem, { onClick: function () { return setPage(i); }, "aria-label": activePage === i ? "Current page " + i : "Go to page " + i, active: activePage === i, key: i }, i));
+            return (React__default["default"].createElement(CPaginationItem, { onClick: function () { return setPage(i); }, "aria-label": activePage === i ? "Current page ".concat(i) : "Go to page ".concat(i), active: activePage === i, key: i }, i));
         }),
         afterDots && (React__default["default"].createElement(CPaginationItem, { role: "separator", disabled: true }, "\u2026")),
         arrows && (React__default["default"].createElement(CPaginationItem, { onClick: function () { return setPage(activePage + 1); }, "aria-label": "Go to next page", "aria-disabled": activePage === pages, disabled: activePage === pages }, nextButton)),
@@ -7208,6 +7302,45 @@ CSmartPagination.propTypes = {
 };
 CSmartPagination.displayName = 'CSmartPagination';
 
+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$1(_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$1(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$1({ className: _className }, rest, { ref: ref }), children));
+});
+CPlaceholder.propTypes = {
+    animation: PropTypes$1.oneOf(['glow', 'wave']),
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
+    color: colorPropType,
+    component: PropTypes$1.elementType,
+    size: PropTypes$1.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$1(_a, ["children", "content", "placement", "offset", "onHide", "onShow", "title", "trigger", "visible"]);
     var _e = React.useState(visible), _visible = _e[0], setVisible = _e[1];
@@ -7248,7 +7381,7 @@ var CPopover = function (_a) {
                         },
                     ] }, function (_a) {
                     var arrowProps = _a.arrowProps, style = _a.style, ref = _a.ref;
-                    return (React__default["default"].createElement("div", __assign$1({ className: classNames$1("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$1({ className: classNames$1("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$1({ className: "popover-arrow" }, arrowProps)),
                         React__default["default"].createElement("div", { className: "popover-header" }, title),
                         React__default["default"].createElement("div", { className: "popover-body" }, content)));
@@ -7257,12 +7390,12 @@ var CPopover = function (_a) {
 };
 CPopover.propTypes = {
     children: PropTypes$1.any,
-    content: PropTypes$1.node,
+    content: PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.node]),
     placement: PropTypes$1.oneOf(['auto', 'top', 'right', 'bottom', 'left']),
     offset: PropTypes$1.any,
     onHide: PropTypes$1.func,
     onShow: PropTypes$1.func,
-    title: PropTypes$1.string,
+    title: PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.node]),
     trigger: triggerPropType,
     visible: PropTypes$1.bool,
 };
@@ -7272,11 +7405,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$1(_a, ["children", "animated", "className", "color", "value", "variant"]);
     var _className = classNames$1('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$1({ 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$1({ 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$1.bool,
@@ -7294,7 +7427,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$1({ 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$1({ value: value }, rest), children)) : (children)));
 });
 CProgress.propTypes = {
     children: PropTypes$1.node,
@@ -7388,12 +7521,12 @@ var CSidebar = React.forwardRef(function (_a, ref) {
             handleHide();
     };
     var _className = classNames$1('sidebar', (_b = {},
-        _b["sidebar-" + colorScheme] = colorScheme,
+        _b["sidebar-".concat(colorScheme)] = colorScheme,
         _b['sidebar-narrow'] = narrow,
         _b['sidebar-overlaid'] = overlaid,
-        _b["sidebar-" + placement] = placement,
-        _b["sidebar-" + position] = position,
-        _b["sidebar-" + size] = size,
+        _b["sidebar-".concat(placement)] = placement,
+        _b["sidebar-".concat(position)] = position,
+        _b["sidebar-".concat(size)] = size,
         _b['sidebar-narrow-unfoldable'] = unfoldable,
         _b.show = _visible === true && mobile,
         _b.hide = _visible === false && !mobile,
@@ -7444,7 +7577,7 @@ var COffcanvas = React.forwardRef(function (_a, ref) {
         }
     }, [_visible]);
     var _className = classNames$1('offcanvas', (_b = {},
-        _b["offcanvas-" + placement] = placement,
+        _b["offcanvas-".concat(placement)] = placement,
         _b.show = _visible,
         _b), className);
     var transitionStyles = {
@@ -7473,8 +7606,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$1.bool,
@@ -7593,7 +7726,7 @@ var CElementCover = React.forwardRef(function (_a, ref) {
             var coords = element.getBoundingClientRect();
             sides.forEach(function (side) {
                 var sideMargin = Math.abs(coords[side] - parentCoords[side]);
-                customBoundaries[side] = sideMargin + "px";
+                customBoundaries[side] = "".concat(sideMargin, "px");
             });
         });
         return customBoundaries;
@@ -7604,7 +7737,7 @@ var CElementCover = React.forwardRef(function (_a, ref) {
     //render
     var classes = classNames$1(className);
     var containerCoords = __assign$1({ top: 0, left: 0, right: 0, bottom: 0 }, customBoundaries);
-    var coverStyles = __assign$1(__assign$1({}, containerCoords), { position: 'absolute', backgroundColor: "rgb(255,255,255," + opacity + ")" });
+    var coverStyles = __assign$1(__assign$1({}, containerCoords), { position: 'absolute', backgroundColor: "rgb(255,255,255,".concat(opacity, ")") });
     return (React__default["default"].createElement("div", __assign$1({ className: classes, style: coverStyles }, rest, { ref: forkedRef }), children || (React__default["default"].createElement("div", { style: {
             position: 'absolute',
             top: '50%',
@@ -7625,17 +7758,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$1(_a, ["children", "align", "borderColor", "bordered", "borderless", "caption", "className", "color", "hover", "responsive", "small", "striped"]);
     var _className = classNames$1('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$1({ className: _className ? _className : undefined }, rest, { ref: ref }), children))) : (React__default["default"].createElement("table", __assign$1({ className: _className ? _className : undefined }, rest, { ref: ref }), children));
 });
 CTable.propTypes = {
@@ -7661,7 +7794,7 @@ var CTableFoot = React.forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, color = _a.color, rest = __rest$1(_a, ["children", "className", "color"]);
     var _className = classNames$1((_b = {},
-        _b["table-" + color] = color,
+        _b["table-".concat(color)] = color,
         _b), className);
     return (React__default["default"].createElement("tfoot", __assign$1({ className: _className ? _className : undefined }, rest, { ref: ref }), children));
 });
@@ -7676,7 +7809,7 @@ var CTableBody = React.forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, color = _a.color, rest = __rest$1(_a, ["children", "className", "color"]);
     var _className = classNames$1((_b = {},
-        _b["table-" + color] = color,
+        _b["table-".concat(color)] = color,
         _b), className);
     return (React__default["default"].createElement("tbody", __assign$1({ className: _className ? _className : undefined }, rest, { ref: ref }), children));
 });
@@ -7691,9 +7824,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$1(_a, ["children", "active", "align", "className", "color"]);
     var _className = classNames$1((_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$1({ className: _className ? _className : undefined }, rest, { ref: ref }), children));
 });
@@ -7710,9 +7843,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$1(_a, ["children", "active", "align", "className", "color"]);
     var _className = classNames$1((_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$1({ className: _className ? _className : undefined }, rest, { ref: ref }), children));
 });
@@ -7765,7 +7898,7 @@ var CSmartTableBody = React.forwardRef(function (_a, ref) {
                     React__default["default"].createElement(CTableRow, { onClick: function (event) {
                             return onRowClick &&
                                 onRowClick(item, trIndex + firstItemOnActivePageIndex, getColumnName(event), true);
-                        }, className: "p-0", key: "details" + trIndex },
+                        }, className: "p-0", key: "details".concat(trIndex) },
                         React__default["default"].createElement(CTableDataCell, { colSpan: colspan, className: "p-0", style: { border: 0 } }, scopedColumns.details(item, trIndex + firstItemOnActivePageIndex)))))));
         }),
         !currentItems.length && (React__default["default"].createElement(CTableRow, null,
@@ -8992,7 +9125,7 @@ var CIcon = React.forwardRef(function (_a, ref) {
     var iconName = React.useMemo(function () {
         return _icon && typeof _icon === 'string' && _icon.includes('-') ? toCamelCase(_icon) : _icon;
     }, [change]);
-    var titleCode = title ? "<title>" + title + "</title>" : '';
+    var titleCode = title ? "<title>".concat(title, "</title>") : '';
     var code = React.useMemo(function () {
         if (Array.isArray(_icon)) {
             return _icon;
@@ -9008,13 +9141,13 @@ var CIcon = React.forwardRef(function (_a, ref) {
         return Array.isArray(code) && code.length > 1 ? code[0] : '64 64';
     })();
     var viewBox = (function () {
-        return rest['viewBox'] || "0 0 " + scale;
+        return rest['viewBox'] || "0 0 ".concat(scale);
     })();
     // render
     var _className = customClassName
         ? classNames(customClassName)
         : classNames('icon', (_b = {},
-            _b["icon-" + size] = size,
+            _b["icon-".concat(size)] = size,
             _b["icon-custom-size"] = height || width,
             _b), className);
     return use ? (React__default["default"].createElement("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", className: _className }, (height && { height: height }), (width && { width: width }), { role: "img" }, rest, { ref: ref }),
@@ -9082,7 +9215,7 @@ var CTableHead = React.forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, color = _a.color, rest = __rest$1(_a, ["children", "className", "color"]);
     var _className = classNames$1((_b = {},
-        _b["table-" + color] = color,
+        _b["table-".concat(color)] = color,
         _b), className);
     return (React__default["default"].createElement("thead", __assign$1({ className: _className ? _className : undefined }, rest, { ref: ref }), children));
 });
@@ -9097,7 +9230,7 @@ var CTableHeaderCell = React.forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, color = _a.color, rest = __rest$1(_a, ["children", "className", "color"]);
     var _className = classNames$1((_b = {},
-        _b["table-" + color] = color,
+        _b["table-".concat(color)] = color,
         _b), className);
     return (React__default["default"].createElement("th", __assign$1({ className: _className ? _className : undefined }, rest, { ref: ref }), children));
 });
@@ -9109,7 +9242,7 @@ CTableHeaderCell.propTypes = {
 CTableHeaderCell.displayName = 'CTableHeaderCell';
 
 var CSmartTableHead = React.forwardRef(function (_a, ref) {
-    var columnFilter = _a.columnFilter, columnSorter = _a.columnSorter, _b = _a.component, Component = _b === void 0 ? CTableHead : _b, columns = _a.columns, handleFilterOnChange = _a.handleFilterOnChange, handleFilterOnInput = _a.handleFilterOnInput, handleSelectAllChecked = _a.handleSelectAllChecked, handleSort = _a.handleSort, selectable = _a.selectable, selectAll = _a.selectAll, sorterState = _a.sorterState, sortingIcon = _a.sortingIcon, sortingIconAscending = _a.sortingIconAscending, sortingIconDescending = _a.sortingIconDescending, rest = __rest$1(_a, ["columnFilter", "columnSorter", "component", "columns", "handleFilterOnChange", "handleFilterOnInput", "handleSelectAllChecked", "handleSort", "selectable", "selectAll", "sorterState", "sortingIcon", "sortingIconAscending", "sortingIconDescending"]);
+    var columnFilter = _a.columnFilter, columnFilterState = _a.columnFilterState, columnSorter = _a.columnSorter, _b = _a.component, Component = _b === void 0 ? CTableHead : _b, columns = _a.columns, handleFilterOnChange = _a.handleFilterOnChange, handleFilterOnInput = _a.handleFilterOnInput, handleSelectAllChecked = _a.handleSelectAllChecked, handleSort = _a.handleSort, selectable = _a.selectable, selectAll = _a.selectAll, sorterState = _a.sorterState, sortingIcon = _a.sortingIcon, sortingIconAscending = _a.sortingIconAscending, sortingIconDescending = _a.sortingIconDescending, rest = __rest$1(_a, ["columnFilter", "columnFilterState", "columnSorter", "component", "columns", "handleFilterOnChange", "handleFilterOnInput", "handleSelectAllChecked", "handleSort", "selectable", "selectAll", "sorterState", "sortingIcon", "sortingIconAscending", "sortingIconDescending"]);
     var tableHeaderCellProps = function (column) {
         if (typeof column === 'object' && column._props) {
             return column._props;
@@ -9205,12 +9338,15 @@ var CSmartTableHead = React.forwardRef(function (_a, ref) {
                     }, onChange: function (event) {
                         return handleFilterOnChange &&
                             handleFilterOnChange(key(column), event.target.value);
-                    }, "aria-label": "column name: '" + label(column) + "' filter input" }))));
+                    }, value: columnFilterState && columnFilterState[key(column)]
+                        ? columnFilterState[key(column)]
+                        : '', "aria-label": "column name: '".concat(label(column), "' filter input") }))));
             })))));
 });
 CSmartTableHead.propTypes = {
     columnFilter: PropTypes$1.oneOfType([PropTypes$1.bool, PropTypes$1.object]),
-    columnSorter: PropTypes$1.bool,
+    columnFilterState: PropTypes$1.object,
+    columnSorter: PropTypes$1.oneOfType([PropTypes$1.bool, PropTypes$1.object]),
     component: PropTypes$1.elementType,
     children: PropTypes$1.node,
     columns: PropTypes$1.arrayOf(PropTypes$1.oneOfType([PropTypes$1.any, PropTypes$1.string])).isRequired,
@@ -9260,15 +9396,25 @@ var CSmartTable = React.forwardRef(function (_a, ref) {
     // instance data
     var compData = React.useRef({ firstRun: true, columnFiltered: 0, changeItems: 0 }).current;
     var previousSorterValue = React.useRef();
+    var previousItemsValue = React.useRef();
+    var _o = React.useState(activePage), _activePage = _o[0], setActivePage = _o[1];
+    var _p = React.useState([]), _items = _p[0], setItems = _p[1];
+    var _q = React.useState(itemsPerPage), _itemsPerPage = _q[0], setItemsPerPage = _q[1];
+    var _r = React.useState(columnFilterValue ? columnFilterValue : {}), columnFilterState = _r[0], setColumnFilterState = _r[1];
+    var _s = React.useState(), selectedAll = _s[0], setSelectedAll = _s[1];
+    var _t = React.useState(previousSorterValue.current || {}), sorterState = _t[0], setSorterState = _t[1];
+    var _u = React.useState(tableFilterValue ? tableFilterValue : ''), tableFilterState = _u[0], setTableFilterState = _u[1];
     React.useMemo(function () {
         if (JSON.stringify(previousSorterValue.current) !== JSON.stringify(sorterValue)) {
             previousSorterValue.current = sorterValue;
+            setSorterState(__assign$1({}, sorterValue));
         }
     }, [sorterValue]);
-    var previousItemsValue = React.useRef();
-    var _o = React.useState([]), _items = _o[0], setItems = _o[1];
     React.useMemo(function () {
         if (JSON.stringify(previousItemsValue.current) !== JSON.stringify(items)) {
+            if (items && items.length < _itemsPerPage * _activePage - _itemsPerPage) {
+                setActivePage(1);
+            }
             previousItemsValue.current = items;
             Array.isArray(items) &&
                 setItems(items === null || items === void 0 ? void 0 : items.map(function (item, index) {
@@ -9276,12 +9422,6 @@ var CSmartTable = React.forwardRef(function (_a, ref) {
                 }));
         }
     }, [items]);
-    var _p = React.useState(itemsPerPage), _itemsPerPage = _p[0], setItemsPerPage = _p[1];
-    var _q = React.useState(activePage), _activePage = _q[0], setActivePage = _q[1];
-    var _r = React.useState(), selectedAll = _r[0], setSelectedAll = _r[1];
-    var _s = React.useState(previousSorterValue.current || {}), sorterState = _s[0], setSorterState = _s[1];
-    var _t = React.useState(tableFilterValue ? tableFilterValue : ''), tableFilterState = _t[0], setTableFilterState = _t[1];
-    var _u = React.useState(columnFilterValue ? columnFilterValue : {}), columnFilterState = _u[0], setColumnFilterState = _u[1];
     // functions
     var isSortable = function (i) {
         var isDataColumn = itemsDataColumns.includes(rawColumnNames[i]);
@@ -9309,7 +9449,12 @@ var CSmartTable = React.forwardRef(function (_a, ref) {
                 state.state = 'desc';
             }
             else {
-                state.state = 0;
+                if (typeof columnSorter === 'object' && !columnSorter.resetable) {
+                    state.state = 'asc';
+                }
+                else {
+                    state.state = 0;
+                }
             }
         }
         else {
@@ -9329,7 +9474,8 @@ var CSmartTable = React.forwardRef(function (_a, ref) {
         if ((isLazy && type === 'input') || (!isLazy && type === 'change')) {
             return;
         }
-        var newState = __assign$1(__assign$1({}, columnFilterState), (_a = {}, _a["" + colName] = value, _a));
+        var newState = __assign$1(__assign$1({}, columnFilterState), (_a = {}, _a["".concat(colName)] = value, _a));
+        setActivePage(1);
         setColumnFilterState(newState);
     };
     var tableFilterChange = function (value, type) {
@@ -9337,6 +9483,7 @@ var CSmartTable = React.forwardRef(function (_a, ref) {
         if ((isLazy && type === 'input') || (!isLazy && type === 'change')) {
             return;
         }
+        setActivePage(1);
         setTableFilterState(value);
     };
     var clean = function () {
@@ -9449,21 +9596,6 @@ var CSmartTable = React.forwardRef(function (_a, ref) {
             setSorterState(__assign$1({}, sorterValue));
     }, [sorterValue]);
     React.useMemo(function () { return setColumnFilterState(__assign$1({}, columnFilterValue)); }, [columnFilterValue]);
-    //items
-    // useMemo(() => {
-    //   if (
-    //     items &&
-    //     !compData.firstRun &&
-    //     (items.length !== _items.length || JSON.stringify(items) !== JSON.stringify(_items))
-    //   ) {
-    //     setItems(
-    //       items?.map((item: Item, index: number) => {
-    //         return { ...item, _id: index }
-    //       }),
-    //     )
-    //     compData.changeItems++
-    //   }
-    // }, [items])
     compData.firstRun = false;
     var handleRowChecked = function (id, value) {
         var newArr = __spreadArray([], _items, true);
@@ -9484,6 +9616,7 @@ var CSmartTable = React.forwardRef(function (_a, ref) {
     React.useEffect(function () {
         if (selectable) {
             var selected = _items.filter(function (item) { return item._selected === true; });
+            onSelectedItemsChange && onSelectedItemsChange(selected);
             if (selected.length === _items.length) {
                 setSelectedAll(true);
                 return;
@@ -9495,7 +9628,6 @@ var CSmartTable = React.forwardRef(function (_a, ref) {
             if (selected.length !== 0 && selected.length !== _items.length) {
                 setSelectedAll('indeterminate');
             }
-            onSelectedItemsChange && onSelectedItemsChange(selected);
         }
     }, [_items]);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
@@ -9511,7 +9643,7 @@ var CSmartTable = React.forwardRef(function (_a, ref) {
                 } })))))))),
         React__default["default"].createElement("div", { className: "position-relative" },
             React__default["default"].createElement(CTable, __assign$1({}, tableProps),
-                header && (React__default["default"].createElement(CSmartTableHead, __assign$1({}, tableHeadProps, { columnFilter: columnFilter, columns: columns ? columns : rawColumnNames, columnSorter: columnSorter, selectable: selectable, selectAll: selectedAll, sorterState: sorterState, sortingIcon: sortingIcon, sortingIconAscending: sortingIconAscending, sortingIconDescending: sortingIconDescending, handleSort: function (key, index) { return sorterChange(key, index); }, handleFilterOnChange: function (key, event) { return columnFilterChange(key, event, 'change'); }, handleFilterOnInput: function (key, event) { return columnFilterChange(key, event, 'input'); }, handleSelectAllChecked: function () { return handleSelectAllChecked(); } }))),
+                header && (React__default["default"].createElement(CSmartTableHead, __assign$1({}, tableHeadProps, { columnFilter: columnFilter, columnFilterState: columnFilterState, columns: columns ? columns : rawColumnNames, columnSorter: columnSorter, selectable: selectable, selectAll: selectedAll, sorterState: sorterState, sortingIcon: sortingIcon, sortingIconAscending: sortingIconAscending, sortingIconDescending: sortingIconDescending, handleSort: function (key, index) { return sorterChange(key, index); }, handleFilterOnChange: function (key, event) { return columnFilterChange(key, event, 'change'); }, handleFilterOnInput: function (key, event) { return columnFilterChange(key, event, 'input'); }, handleSelectAllChecked: function () { return handleSelectAllChecked(); } }))),
                 React__default["default"].createElement(CSmartTableBody, __assign$1({ currentItems: currentItems, firstItemOnActivePageIndex: firstItemOnActivePageIndex, noItemsLabel: noItemsLabel, onRowClick: function (item, index, columnName, event) {
                         return clickableRows && onRowClick && onRowClick(item, index, columnName, event);
                     }, onRowChecked: function (id, value) { return handleRowChecked(id, value); }, rawColumnNames: rawColumnNames, scopedColumns: scopedColumns, selectable: selectable }, tableBodyProps)),
@@ -9521,7 +9653,7 @@ var CSmartTable = React.forwardRef(function (_a, ref) {
                     { sides: ['bottom'], query: 'tbody' },
                 ] }))),
         (pagination || itemsPerPageSelect) && (React__default["default"].createElement("div", { className: "row" },
-            React__default["default"].createElement("div", { className: "col-auto" }, pagination && numberOfPages > 1 && (React__default["default"].createElement(CSmartPagination, __assign$1({}, paginationProps, { onActivePageChange: function (page) {
+            React__default["default"].createElement("div", { className: "col" }, pagination && numberOfPages > 1 && (React__default["default"].createElement(CSmartPagination, __assign$1({}, paginationProps, { onActivePageChange: function (page) {
                     setActivePage(page);
                 }, pages: numberOfPages, activePage: _activePage })))),
             React__default["default"].createElement("div", { className: "col-auto ms-auto" }, itemsPerPageSelect && (React__default["default"].createElement(CSmartTableItemsPerPageSelector, { itemsPerPage: _itemsPerPage, itemsPerPageLabel: itemsPerPageLabel, itemsPerPageOptions: itemsPerPageOptions, onChange: function (event) { return itemsPerPageChange(event); } })))))));
@@ -9641,7 +9773,7 @@ var CToast = React.forwardRef(function (_a, ref) {
     var _className = classNames$1('toast', (_b = {
             fade: animation
         },
-        _b["bg-" + color] = color,
+        _b["bg-".concat(color)] = color,
         _b['border-0'] = color,
         _b), className);
     var getTransitionClass = function (state) {
@@ -9798,7 +9930,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$1({ className: classNames$1("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$1({ className: classNames$1("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$1({ className: "tooltip-arrow" }, arrowProps)),
                         React__default["default"].createElement("div", { className: "tooltip-inner" }, content)));
                 }));
@@ -9806,7 +9938,7 @@ var CTooltip = function (_a) {
 };
 CTooltip.propTypes = {
     children: PropTypes$1.any,
-    content: PropTypes$1.node,
+    content: PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.node]),
     placement: PropTypes$1.oneOf(['auto', 'top', 'right', 'bottom', 'left']),
     onHide: PropTypes$1.func,
     onShow: PropTypes$1.func,
@@ -9818,7 +9950,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$1(_a, ["action", "chart", "className", "color", "title", "value"]);
-    var _className = classNames$1((_b = {}, _b["bg-" + color] = color, _b['text-high-emphasis-inverse'] = color, _b), className);
+    var _className = classNames$1((_b = {}, _b["bg-".concat(color)] = color, _b['text-high-emphasis-inverse'] = color, _b), className);
     return (React__default["default"].createElement(CCard, __assign$1({ 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,
@@ -9861,8 +9993,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$1(_a, ["className", "color", "icon", "inverse", "progress", "title", "value"]);
     return (React__default["default"].createElement(CCard, __assign$1({ 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$1({ className: "mt-3 mb-0", height: 4 }, (inverse && { white: true }), progress)))));
 });
@@ -9882,7 +10014,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$1(_a, ["className", "chart", "color", "icon", "values"]);
     var _className = classNames$1(className);
     var classNameHeader = classNames$1('position-relative d-flex justify-content-center align-items-center', (_b = {},
-        _b["bg-" + color] = color,
+        _b["bg-".concat(color)] = color,
         _b));
     return (React__default["default"].createElement(CCard, __assign$1({ className: _className }, rest, { ref: ref }),
         React__default["default"].createElement(CCardHeader, { className: classNameHeader },
@@ -9928,10 +10060,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$1(_a, ["className", "color", "footer", "icon", "padding", "title", "value"]);
     var _className = classNames$1(className);
     return (React__default["default"].createElement(CCard, __assign$1({ 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)));
 });
@@ -10039,6 +10171,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;