bootstrap-rn 0.1.4 → 0.1.6

package/dist/bootstrap-rn.umd.js

@@ -10,24 +10,6 @@
   var _reactNative__default = /*#__PURE__*/_interopDefaultLegacy(_reactNative);
   var require$$12__default = /*#__PURE__*/_interopDefaultLegacy(require$$12);
 
-  function _extends$2() {
-    _extends$2 = Object.assign || function (target) {
-      for (var i = 1; i < arguments.length; i++) {
-        var source = arguments[i];
-
-        for (var key in source) {
-          if (Object.prototype.hasOwnProperty.call(source, key)) {
-            target[key] = source[key];
-          }
-        }
-      }
-
-      return target;
-    };
-
-    return _extends$2.apply(this, arguments);
-  }
-
   const isRTL = () => {
     // To support previous RN versions. Newer versions use below getConstants()
     if (_reactNative.I18nManager.isRTL !== undefined) {
@@ -354,7 +336,7 @@
     return PARSED_PLACEMENT_CACHE[input];
   }
 
-  function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
+  function _extends$2() { _extends$2 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
   const PortalContext = /*#__PURE__*/React__default["default"].createContext(null);
   let globalOverlayCounter = 0;
   function PortalProvider(props) {
@@ -404,7 +386,7 @@
   }
 
   function OverlayView(props) {
-    return /*#__PURE__*/React__default["default"].createElement(_reactNative.View, _extends$1({
+    return /*#__PURE__*/React__default["default"].createElement(_reactNative.View, _extends$2({
       pointerEvents: "box-none",
       style: _reactNative.StyleSheet.absoluteFill,
       collapsable: false
@@ -520,8 +502,8 @@
     return obj;
   }
 
-  function _extends() {
-    _extends = Object.assign || function (target) {
+  function _extends$1() {
+    _extends$1 = Object.assign || function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
 
@@ -535,7 +517,7 @@
       return target;
     };
 
-    return _extends.apply(this, arguments);
+    return _extends$1.apply(this, arguments);
   }
 
   function _setPrototypeOf$1(o, p) {
@@ -2974,6 +2956,23 @@
     });
   }
 
+  function _extends() {
+    _extends = Object.assign ? Object.assign.bind() : function (target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i];
+
+        for (var key in source) {
+          if (Object.prototype.hasOwnProperty.call(source, key)) {
+            target[key] = source[key];
+          }
+        }
+      }
+
+      return target;
+    };
+    return _extends.apply(this, arguments);
+  }
+
   function _assertThisInitialized(self) {
     if (self === void 0) {
       throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
@@ -2983,11 +2982,10 @@
   }
 
   function _setPrototypeOf(o, p) {
-    _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+    _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
       o.__proto__ = p;
       return o;
     };
-
     return _setPrototypeOf(o, p);
   }
 
@@ -2998,7 +2996,7 @@
   }
 
   function _getPrototypeOf(o) {
-    _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+    _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) {
       return o.__proto__ || Object.getPrototypeOf(o);
     };
     return _getPrototypeOf(o);
@@ -3023,7 +3021,7 @@
 
   function _construct(Parent, args, Class) {
     if (_isNativeReflectConstruct()) {
-      _construct = Reflect.construct;
+      _construct = Reflect.construct.bind();
     } else {
       _construct = function _construct(Parent, args, Class) {
         var a = [null];
@@ -3426,10 +3424,10 @@
   var hexRgbaRegex = /^#[a-fA-F0-9]{8}$/;
   var reducedHexRegex = /^#[a-fA-F0-9]{3}$/;
   var reducedRgbaHexRegex = /^#[a-fA-F0-9]{4}$/;
-  var rgbRegex = /^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/i;
-  var rgbaRegex = /^rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*([-+]?[0-9]*[.]?[0-9]+)\s*\)$/i;
-  var hslRegex = /^hsl\(\s*(\d{0,3}[.]?[0-9]+)\s*,\s*(\d{1,3}[.]?[0-9]?)%\s*,\s*(\d{1,3}[.]?[0-9]?)%\s*\)$/i;
-  var hslaRegex = /^hsla\(\s*(\d{0,3}[.]?[0-9]+)\s*,\s*(\d{1,3}[.]?[0-9]?)%\s*,\s*(\d{1,3}[.]?[0-9]?)%\s*,\s*([-+]?[0-9]*[.]?[0-9]+)\s*\)$/i;
+  var rgbRegex = /^rgb\(\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*\)$/i;
+  var rgbaRegex = /^rgb(?:a)?\(\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,|\/)\s*([-+]?\d*[.]?\d+[%]?)\s*\)$/i;
+  var hslRegex = /^hsl\(\s*(\d{0,3}[.]?[0-9]+(?:deg)?)\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*\)$/i;
+  var hslaRegex = /^hsl(?:a)?\(\s*(\d{0,3}[.]?[0-9]+(?:deg)?)\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,|\/)\s*([-+]?\d*[.]?\d+[%]?)\s*\)$/i;
   /**
    * Returns an RgbColor or RgbaColor object. This utility function is only useful
    * if want to extract a color component. With the color util `toColorString` you
@@ -3503,7 +3501,7 @@
         red: parseInt("" + rgbaMatched[1], 10),
         green: parseInt("" + rgbaMatched[2], 10),
         blue: parseInt("" + rgbaMatched[3], 10),
-        alpha: parseFloat("" + rgbaMatched[4])
+        alpha: parseFloat("" + rgbaMatched[4]) > 1 ? parseFloat("" + rgbaMatched[4]) / 100 : parseFloat("" + rgbaMatched[4])
       };
     }
 
@@ -3548,7 +3546,7 @@
         red: parseInt("" + _hslRgbMatched[1], 10),
         green: parseInt("" + _hslRgbMatched[2], 10),
         blue: parseInt("" + _hslRgbMatched[3], 10),
-        alpha: parseFloat("" + hslaMatched[4])
+        alpha: parseFloat("" + hslaMatched[4]) > 1 ? parseFloat("" + hslaMatched[4]) / 100 : parseFloat("" + hslaMatched[4])
       };
     }
 
@@ -3705,13 +3703,13 @@
     if (weight === 0) return otherColor;
     var parsedColor1 = parseToRgb(color);
 
-    var color1 = _extends$2({}, parsedColor1, {
+    var color1 = _extends({}, parsedColor1, {
       alpha: typeof parsedColor1.alpha === 'number' ? parsedColor1.alpha : 1
     });
 
     var parsedColor2 = parseToRgb(otherColor);
 
-    var color2 = _extends$2({}, parsedColor2, {
+    var color2 = _extends({}, parsedColor2, {
       alpha: typeof parsedColor2.alpha === 'number' ? parsedColor2.alpha : 1
     }); // The formula is copied from the original Sass implementation:
     // http://sass-lang.com/documentation/Sass/Script/Functions.html#mix-instance_method
@@ -3800,6 +3798,13 @@
                 order: value
               });
             }
+          } else if (child.name === 'margin-horizontal' && value === 'auto') {
+            // Workaround for react-native issue #350
+            // https://github.com/facebook/react-native/issues/350#issuecomment-375238958
+            Object.assign(definitions[0].declarations, {
+              marginLeft: value,
+              marginRight: value
+            });
           } else if (child.name === 'border-color' && value.split(' ').length === 1) {
             // Workaround for react-native issue #19981
             // https://github.com/facebook/react-native/issues/19981
@@ -4926,7 +4931,7 @@
 
   };
 
-  var _templateObject$1b, _templateObject2$M;
+  var _templateObject$1b, _templateObject2$S;
   function makeUtility(options) {
     return each(options.values, function (key, value) {
       var name = options.class || options.property;
@@ -4943,7 +4948,7 @@
           return null;
         }
 
-        return _defineProperty({}, "".concat(name, "-").concat(breakpoint).concat(suffix), css$1(_templateObject2$M || (_templateObject2$M = _taggedTemplateLiteral(["\n            @include media-breakpoint-up(", ") {\n              ", ": ", ";\n            }\n          "])), breakpoint, options.property, value));
+        return _defineProperty({}, "".concat(name, "-").concat(breakpoint).concat(suffix), css$1(_templateObject2$S || (_templateObject2$S = _taggedTemplateLiteral(["\n            @include media-breakpoint-up(", ") {\n              ", ": ", ";\n            }\n          "])), breakpoint, options.property, value));
       }));
     });
   }
@@ -38492,9 +38497,9 @@
       });
     }, []);
     React.useEffect(function () {
-      _reactNative.Dimensions.addEventListener('change', handleChange);
+      var subscription = _reactNative.Dimensions.addEventListener('change', handleChange);
       return function () {
-        _reactNative.Dimensions.removeEventListener('change', handleChange);
+        subscription.remove();
       };
     }, [viewport]);
     return viewport;
@@ -38639,7 +38644,7 @@
     var resolveStyle = useStyle(style, styleName);
     var resolveTextStyle = useStyle([context && context.style, textStyle]);
     var hasTextStyle = context && context.style || textStyle;
-    return /*#__PURE__*/React__default["default"].createElement(_reactNative.View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(_reactNative.View, _extends$1({}, elementProps, {
       ref: ref,
       style: resolveStyle({
         media: media
@@ -38658,7 +38663,7 @@
 
   var _excluded$1q = ["children", "color", "dismissible", "style", "textStyle"];
 
-  var _templateObject$19, _templateObject2$L, _templateObject3$q;
+  var _templateObject$19, _templateObject2$R, _templateObject3$q;
   var propTypes$1o = {
     children: PropTypes.node.isRequired,
     color: PropTypes.oneOf(Object.keys(THEME_COLORS)),
@@ -38673,7 +38678,7 @@
   }, each(THEME_COLORS, function (state, value) {
     var _ref;
 
-    return _ref = {}, _defineProperty(_ref, ".alert-".concat(state), css$1(_templateObject2$L || (_templateObject2$L = _taggedTemplateLiteral(["\n      background-color: ", ";\n      border-color: ", ";\n    "])), shiftColor(function (t) {
+    return _ref = {}, _defineProperty(_ref, ".alert-".concat(state), css$1(_templateObject2$R || (_templateObject2$R = _taggedTemplateLiteral(["\n      background-color: ", ";\n      border-color: ", ";\n    "])), shiftColor(function (t) {
       return t['alert-bg-scale'];
     }, value), shiftColor(function (t) {
       return t['alert-border-scale'];
@@ -38696,7 +38701,7 @@
 
     var classes = getStyles(styles$18, ['.alert', ".alert-".concat(color), dismissible && '.alert-dismissible']);
     var textClasses = getStyles(styles$18, [".alert-".concat(color, "-text")]);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       accessibilityRole: "alert",
       style: [classes, style],
@@ -38706,110 +38711,41 @@
   Alert.displayName = 'Alert';
   Alert.propTypes = propTypes$1o;
 
-  var _excluded$1p = ["color", "bold", "italic", "mark", "small", "style", "styleName"];
+  var _excluded$1p = ["children", "style", "textStyle"];
 
-  var _templateObject$18, _templateObject2$K, _templateObject3$p, _templateObject4$l, _templateObject5$j;
+  var _templateObject$18, _templateObject2$Q;
   var propTypes$1n = {
-    color: PropTypes.oneOf([].concat(_toConsumableArray(Object.keys(THEME_COLORS)), ['muted', 'black-50', 'white-50'])),
-    small: PropTypes.bool,
-    mark: PropTypes.bool,
-    bold: PropTypes.bool,
-    italic: PropTypes.bool,
+    children: PropTypes.node.isRequired,
     // eslint-disable-next-line react/forbid-prop-types
     style: PropTypes.any,
     // eslint-disable-next-line react/forbid-prop-types
-    styleName: PropTypes.any
+    textStyle: PropTypes.any
   };
   var styles$17 = StyleSheet.create({
-    text: css$1(_templateObject$18 || (_templateObject$18 = _taggedTemplateLiteral(["\n    font-family: $font-family-base;\n    font-size: $font-size-base;\n    font-weight: $font-weight-base;\n    line-height: $font-size-base * $line-height-base;\n  "]))),
-    strong: css$1(_templateObject2$K || (_templateObject2$K = _taggedTemplateLiteral(["\n    font-weight: $font-weight-bolder;\n  "]))),
-    italic: css$1(_templateObject3$p || (_templateObject3$p = _taggedTemplateLiteral(["\n    font-style: italic;\n  "]))),
-    small: css$1(_templateObject4$l || (_templateObject4$l = _taggedTemplateLiteral(["\n    font-size: $small-font-size;\n    line-height: $small-font-size * $line-height-base;\n  "]))),
-    mark: css$1(_templateObject5$j || (_templateObject5$j = _taggedTemplateLiteral(["\n    padding: $mark-padding;\n    background-color: $mark-bg;\n  "])))
-  });
-
-  var getStyleName = function getStyleName(styleName, color) {
-    if (!color) {
-      return styleName;
-    }
-
-    return styleName ? "text-".concat(color, " ").concat(styleName) : "text-".concat(color);
-  };
-
-  var Text = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
-    var color = props.color,
-        _props$bold = props.bold,
-        bold = _props$bold === void 0 ? false : _props$bold,
-        _props$italic = props.italic,
-        italic = _props$italic === void 0 ? false : _props$italic,
-        _props$mark = props.mark,
-        mark = _props$mark === void 0 ? false : _props$mark,
-        _props$small = props.small,
-        small = _props$small === void 0 ? false : _props$small,
-        style = props.style,
-        styleName = props.styleName,
-        elementProps = _objectWithoutProperties(props, _excluded$1p);
-
-    var media = useMedia();
-    var context = React.useContext(TextStyleContext);
-    var classes = getStyles(styles$17, [bold && 'strong', italic && 'italic', small && 'small', mark && 'mark']);
-    var resolveStyle = useStyle([// eslint-disable-next-line react/destructuring-assignment
-    (!context || !context.hasTextAncestor) && styles$17.text, // eslint-disable-next-line react/destructuring-assignment
-    context && context.style, classes, style], getStyleName(styleName, color));
-    var element = /*#__PURE__*/React__default["default"].createElement(_reactNative.Text, _extends({}, elementProps, {
-      ref: ref,
-      style: resolveStyle({
-        media: media
-      })
-    })); // eslint-disable-next-line react/destructuring-assignment
-
-    if (context && context.hasTextAncestor && !context.style) {
-      return element;
-    } // If we are not in an ancestor context yet, we need to set hasTextAncestor
-    // to true for nested text components. Furthermore we need to reset the
-    // context style, because we only need to apply the style once.
-
-
-    return /*#__PURE__*/React__default["default"].createElement(TextStyleContext.Provider, {
-      value: {
-        style: null,
-        hasTextAncestor: true
-      }
-    }, element);
-  });
-  Text.displayName = 'Text';
-  Text.propTypes = propTypes$1n;
-
-  var _excluded$1o = ["children", "style"];
-
-  var _templateObject$17, _templateObject2$J;
-  var propTypes$1m = {
-    children: PropTypes.node.isRequired,
-    // eslint-disable-next-line react/forbid-prop-types
-    style: PropTypes.any
-  };
-  var styles$16 = StyleSheet.create({
-    '.badge': css$1(_templateObject$17 || (_templateObject$17 = _taggedTemplateLiteral(["\n    // display: inline-block;\n    padding: $badge-padding-y $badge-padding-x;\n    border-radius: $badge-border-radius;\n    // @include gradient-bg();\n  "]))),
-    '.badge-text': css$1(_templateObject2$J || (_templateObject2$J = _taggedTemplateLiteral(["\n    font-size: $badge-font-size;\n    font-weight: $badge-font-weight;\n    line-height: $badge-font-size * 1;\n    color: $badge-color;\n    text-align: center;\n    // white-space: nowrap;\n    // vertical-align: baseline;\n  "])))
+    '.badge': css$1(_templateObject$18 || (_templateObject$18 = _taggedTemplateLiteral(["\n    // display: inline-block;\n    padding: $badge-padding-y $badge-padding-x;\n    border-radius: $badge-border-radius;\n    // @include gradient-bg();\n  "]))),
+    '.badge-text': css$1(_templateObject2$Q || (_templateObject2$Q = _taggedTemplateLiteral(["\n    font-size: $badge-font-size;\n    font-weight: $badge-font-weight;\n    line-height: $badge-font-size * 1;\n    color: $badge-color;\n    text-align: center;\n    // white-space: nowrap;\n    // vertical-align: baseline;\n  "])))
   });
   var Badge = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
     var children = props.children,
         style = props.style,
-        elementProps = _objectWithoutProperties(props, _excluded$1o);
+        textStyle = props.textStyle,
+        elementProps = _objectWithoutProperties(props, _excluded$1p);
 
-    var classes = getStyles(styles$16, ['.badge', '.badge-text']);
-    return /*#__PURE__*/React__default["default"].createElement(Text, _extends({}, elementProps, {
+    var classes = getStyles(styles$17, ['.badge']);
+    var textClasses = getStyles(styles$17, ['.badge-text']);
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
-      style: [classes, style]
+      style: [classes, style],
+      textStyle: [textClasses, textStyle]
     }), children);
   });
   Badge.displayName = 'Badge';
-  Badge.propTypes = propTypes$1m;
+  Badge.propTypes = propTypes$1n;
 
-  var _excluded$1n = ["children", "active", "style", "textStyle"];
+  var _excluded$1o = ["children", "active", "style", "textStyle"];
 
-  var _templateObject$16, _templateObject2$I, _templateObject3$o;
-  var propTypes$1l = {
+  var _templateObject$17, _templateObject2$P, _templateObject3$p;
+  var propTypes$1m = {
     children: PropTypes.node.isRequired,
     active: PropTypes.bool,
     // eslint-disable-next-line react/forbid-prop-types
@@ -38817,10 +38753,10 @@
     // eslint-disable-next-line react/forbid-prop-types
     textStyle: PropTypes.any
   };
-  var styles$15 = StyleSheet.create({
-    '.breadcrumb-item': css$1(_templateObject$16 || (_templateObject$16 = _taggedTemplateLiteral(["\n    padding-left: $breadcrumb-item-padding-x;\n    padding-right: $breadcrumb-item-padding-x;\n  "]))),
-    '.breadcrumb-text': css$1(_templateObject2$I || (_templateObject2$I = _taggedTemplateLiteral(["\n    color: $primary;\n  "]))),
-    '.breadcrumb-item-active': css$1(_templateObject3$o || (_templateObject3$o = _taggedTemplateLiteral(["\n    color: $breadcrumb-active-color;\n  "])))
+  var styles$16 = StyleSheet.create({
+    '.breadcrumb-item': css$1(_templateObject$17 || (_templateObject$17 = _taggedTemplateLiteral(["\n    padding-left: $breadcrumb-item-padding-x;\n    padding-right: $breadcrumb-item-padding-x;\n  "]))),
+    '.breadcrumb-text': css$1(_templateObject2$P || (_templateObject2$P = _taggedTemplateLiteral(["\n    color: $primary;\n  "]))),
+    '.breadcrumb-item-active': css$1(_templateObject3$p || (_templateObject3$p = _taggedTemplateLiteral(["\n    color: $breadcrumb-active-color;\n  "])))
   });
   var BreadcrumbItem = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
     var children = props.children,
@@ -38828,18 +38764,18 @@
         active = _props$active === void 0 ? false : _props$active,
         style = props.style,
         textStyle = props.textStyle,
-        elementProps = _objectWithoutProperties(props, _excluded$1n);
+        elementProps = _objectWithoutProperties(props, _excluded$1o);
 
-    var classes = getStyles(styles$15, ['.breadcrumb-item', active && '.breadcrumb-item-active']);
-    var textClasses = getStyles(styles$15, ['.breadcrumb-text', active && '.breadcrumb-item-active']);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    var classes = getStyles(styles$16, ['.breadcrumb-item', active && '.breadcrumb-item-active']);
+    var textClasses = getStyles(styles$16, ['.breadcrumb-text', active && '.breadcrumb-item-active']);
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       style: [classes, style],
       textStyle: [textClasses, textStyle]
     }), children);
   });
   BreadcrumbItem.displayName = 'BreadcrumbItem';
-  BreadcrumbItem.propTypes = propTypes$1l;
+  BreadcrumbItem.propTypes = propTypes$1m;
   /*
   $breadcrumb-font-size:              null;
   $breadcrumb-padding-y:              0;
@@ -38854,30 +38790,30 @@
   $breadcrumb-border-radius:          null;
   */
 
-  var _excluded$1m = ["children", "style"];
+  var _excluded$1n = ["children", "style"];
 
-  var _templateObject$15;
-  var propTypes$1k = {
+  var _templateObject$16;
+  var propTypes$1l = {
     children: PropTypes.node.isRequired,
     // eslint-disable-next-line react/forbid-prop-types
     style: PropTypes.any
   };
-  var styles$14 = StyleSheet.create({
-    '.breadcrumb': css$1(_templateObject$15 || (_templateObject$15 = _taggedTemplateLiteral(["\n    flex-direction: row;\n  "])))
+  var styles$15 = StyleSheet.create({
+    '.breadcrumb': css$1(_templateObject$16 || (_templateObject$16 = _taggedTemplateLiteral(["\n    flex-direction: row;\n  "])))
   });
   var Breadcrumb = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
     var children = props.children,
         style = props.style,
-        elementProps = _objectWithoutProperties(props, _excluded$1m);
+        elementProps = _objectWithoutProperties(props, _excluded$1n);
 
-    var classes = getStyles(styles$14, ['.breadcrumb']);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    var classes = getStyles(styles$15, ['.breadcrumb']);
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       style: [classes, style]
     }), makeListChildren(children));
   });
   Breadcrumb.displayName = 'Breadcrumb';
-  Breadcrumb.propTypes = propTypes$1k;
+  Breadcrumb.propTypes = propTypes$1l;
   Breadcrumb.Item = BreadcrumbItem;
   /*
   $breadcrumb-font-size:              null;
@@ -38896,28 +38832,28 @@
   var ButtonGroupContext = /*#__PURE__*/React__default["default"].createContext();
   ButtonGroupContext.displayName = 'ButtonGroupContext';
 
-  var _excluded$1l = ["children", "size", "style"];
+  var _excluded$1m = ["children", "size", "style"];
 
-  var _templateObject$14;
-  var propTypes$1j = {
+  var _templateObject$15;
+  var propTypes$1k = {
     children: PropTypes.node.isRequired,
     size: PropTypes.oneOf(['lg', 'sm']),
     // eslint-disable-next-line react/forbid-prop-types
     style: PropTypes.any
   };
-  var styles$13 = StyleSheet.create({
-    '.btn-group': css$1(_templateObject$14 || (_templateObject$14 = _taggedTemplateLiteral(["\n    flex-direction: row; // added for bootstrap-rn\n    border-radius: $btn-border-radius;\n  "])))
+  var styles$14 = StyleSheet.create({
+    '.btn-group': css$1(_templateObject$15 || (_templateObject$15 = _taggedTemplateLiteral(["\n    flex-direction: row; // added for bootstrap-rn\n    border-radius: $btn-border-radius;\n  "])))
   });
   var ButtonGroup = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
     var children = props.children,
         size = props.size,
         style = props.style,
-        elementProps = _objectWithoutProperties(props, _excluded$1l);
+        elementProps = _objectWithoutProperties(props, _excluded$1m);
 
-    var classes = getStyles(styles$13, ['.btn-group']); // Accessiblity role tabpanel is only supported on web.
+    var classes = getStyles(styles$14, ['.btn-group']); // Accessiblity role tabpanel is only supported on web.
 
     var role = _reactNative.Platform.OS === 'web' ? 'group' : null;
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       accessibilityRole: role,
       style: [classes, style]
@@ -38928,33 +38864,33 @@
     }, makeListChildren(children)));
   });
   ButtonGroup.displayName = 'ButtonGroup';
-  ButtonGroup.propTypes = propTypes$1j;
+  ButtonGroup.propTypes = propTypes$1k;
 
-  var _excluded$1k = ["children", "style"];
+  var _excluded$1l = ["children", "style"];
 
-  var _templateObject$13;
-  var propTypes$1i = {
+  var _templateObject$14;
+  var propTypes$1j = {
     children: PropTypes.node.isRequired,
     // eslint-disable-next-line react/forbid-prop-types
     style: PropTypes.any
   };
-  var styles$12 = StyleSheet.create({
-    '.btn-toolbar': css$1(_templateObject$13 || (_templateObject$13 = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: row; // added for bootstrap-rn\n    flex-wrap: wrap;\n    justify-content: flex-start;\n  "])))
+  var styles$13 = StyleSheet.create({
+    '.btn-toolbar': css$1(_templateObject$14 || (_templateObject$14 = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: row; // added for bootstrap-rn\n    flex-wrap: wrap;\n    justify-content: flex-start;\n  "])))
   });
   var ButtonToolbar = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
     var children = props.children,
         style = props.style,
-        elementProps = _objectWithoutProperties(props, _excluded$1k);
+        elementProps = _objectWithoutProperties(props, _excluded$1l);
 
-    var classes = getStyles(styles$12, ['.btn-toolbar']);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    var classes = getStyles(styles$13, ['.btn-toolbar']);
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       accessibilityRole: "toolbar",
       style: [classes, style]
     }), children);
   });
   ButtonToolbar.displayName = 'ButtonToolbar';
-  ButtonToolbar.propTypes = propTypes$1i;
+  ButtonToolbar.propTypes = propTypes$1j;
 
   var prefix = 'Invariant failed';
   function invariant(condition, message) {
@@ -38972,7 +38908,7 @@
     return context;
   }
 
-  var _excluded$1j = ["ref"];
+  var _excluded$1k = ["ref"];
   function useModifier(name, props, ref) {
     var context = useForcedContext(Context);
     var useModifierHook = context.modifiers[name];
@@ -38983,12 +38919,12 @@
 
     var _useModifierHook = useModifierHook(props),
         modifierRef = _useModifierHook.ref,
-        modifierProps = _objectWithoutProperties(_useModifierHook, _excluded$1j);
+        modifierProps = _objectWithoutProperties(_useModifierHook, _excluded$1k);
 
     return [modifierProps, concatRefs(modifierRef, ref)];
   }
 
-  var _excluded$1i = ["toggle", "dismiss"],
+  var _excluded$1j = ["toggle", "dismiss"],
       _excluded2$2 = ["ref"];
 
   var getActionHook = function getActionHook(toggle, dismiss) {
@@ -39006,7 +38942,7 @@
   function useAction(props, ref) {
     var toggle = props.toggle,
         dismiss = props.dismiss,
-        restProps = _objectWithoutProperties(props, _excluded$1i);
+        restProps = _objectWithoutProperties(props, _excluded$1j);
 
     var useActionHook = getActionHook(toggle, dismiss);
 
@@ -39025,8 +38961,8 @@
     return [actionProps, concatRefs(actionRef, ref)];
   }
 
-  var _excluded$1h = ["children", "active", "style", "activeStyle", "textStyle", "activeTextStyle", "styleName"];
-  var propTypes$1h = {
+  var _excluded$1i = ["children", "active", "style", "activeStyle", "textStyle", "activeTextStyle", "styleName"];
+  var propTypes$1i = {
     children: PropTypes.node,
     active: PropTypes.bool,
     // eslint-disable-next-line react/forbid-prop-types
@@ -39078,7 +39014,7 @@
         textStyle = actionProps.textStyle,
         activeTextStyle = actionProps.activeTextStyle,
         styleName = actionProps.styleName,
-        elementProps = _objectWithoutProperties(actionProps, _excluded$1h);
+        elementProps = _objectWithoutProperties(actionProps, _excluded$1i);
 
     var media = useMedia();
     var context = React.useContext(TextStyleContext);
@@ -39087,7 +39023,7 @@
     var resolveTextStyle = useStyle([context && context.style, textStyle]);
     var resolveActiveTextStyle = useStyle(active && activeTextStyle);
     var hasTextStyle = context && context.style || textStyle;
-    return /*#__PURE__*/React__default["default"].createElement(_reactNative.Pressable, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(_reactNative.Pressable, _extends$1({}, elementProps, {
       ref: actionRef,
       accessibilityRole: getRole$1(actionProps),
       style: function style(interaction) {
@@ -39115,13 +39051,13 @@
     } : children);
   });
   Pressable.displayName = 'Pressable';
-  Pressable.propTypes = propTypes$1h;
+  Pressable.propTypes = propTypes$1i;
 
-  var _excluded$1g = ["active", "handlePress"];
+  var _excluded$1h = ["active", "handlePress"];
   function useToggleButton(props) {
     var active = props.active,
         handlePress = props.handlePress,
-        restProps = _objectWithoutProperties(props, _excluded$1g);
+        restProps = _objectWithoutProperties(props, _excluded$1h);
 
     var _useState = React.useState(active),
         _useState2 = _slicedToArray(_useState, 2),
@@ -39140,10 +39076,10 @@
     });
   }
 
-  var _excluded$1f = ["children", "color", "size", "outline", "first", "last", "active", "disabled", "style", "activeStyle", "textStyle", "activeTextStyle"];
+  var _excluded$1g = ["children", "color", "size", "outline", "first", "last", "active", "disabled", "style", "activeStyle", "textStyle", "activeTextStyle"];
 
-  var _templateObject$12, _templateObject2$H, _templateObject3$n, _templateObject4$k, _templateObject5$i, _templateObject6$g, _templateObject7$c, _templateObject8$b, _templateObject9$7, _templateObject10$7, _templateObject11$5, _templateObject12$4, _templateObject13$4, _templateObject14$3, _templateObject15$2, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20$1, _templateObject21, _templateObject22, _templateObject23;
-  var propTypes$1g = {
+  var _templateObject$13, _templateObject2$O, _templateObject3$o, _templateObject4$m, _templateObject5$k, _templateObject6$g, _templateObject7$c, _templateObject8$b, _templateObject9$8, _templateObject10$8, _templateObject11$6, _templateObject12$5, _templateObject13$5, _templateObject14$3, _templateObject15$2, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20$1, _templateObject21, _templateObject22, _templateObject23;
+  var propTypes$1h = {
     children: PropTypes.node.isRequired,
     color: PropTypes.oneOf([].concat(_toConsumableArray(Object.keys(THEME_COLORS)), ['link'])),
     size: PropTypes.oneOf(['lg', 'sm']),
@@ -39161,14 +39097,14 @@
     // eslint-disable-next-line react/forbid-prop-types
     activeTextStyle: PropTypes.any
   };
-  var styles$11 = StyleSheet.create(_objectSpread2(_objectSpread2({
-    '.btn': css$1(_templateObject$12 || (_templateObject$12 = _taggedTemplateLiteral(["\n    flex-direction: row; // added for bootstrap-rn\n    justify-content: center; // added for bootstrap-rn\n    // display: inline-block;\n    @include platform(web) {\n      // cursor: if($enable-button-pointers, pointer, null);\n      user-select: none;\n    }\n    background-color: transparent;\n    border: $btn-border-width solid transparent;\n    padding: $btn-padding-y $btn-padding-x;\n    // Manually declare to provide an override to the browser default\n    border-radius: $btn-border-radius;\n    // @include transition($btn-transition);\n\n    &:focus {\n      // outline: 0;\n      // box-shadow: $btn-focus-box-shadow;\n    }\n\n    &:active {\n      // @include box-shadow($btn-active-box-shadow);\n\n      &:focus {\n        // @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);\n      }\n    }\n  "]))),
-    '.btn-text': css$1(_templateObject2$H || (_templateObject2$H = _taggedTemplateLiteral(["\n    font-family: $btn-font-family;\n    font-weight: $btn-font-weight;\n    line-height: $btn-font-size * $btn-line-height;\n    color: $body-color;\n    text-align: center;\n    text-decoration: none; // if($link-decoration == none, null, none);\n    white-space: $btn-white-space;\n    // vertical-align: middle;\n    font-size: $btn-font-size;\n\n    &:hover {\n      color: $body-color;\n      text-decoration: none; // if($link-decoration == none, null, none);\n    }\n  "]))),
-    '.btn-disabled': css$1(_templateObject3$n || (_templateObject3$n = _taggedTemplateLiteral(["\n    // pointer-events: none;\n    opacity: $btn-disabled-opacity;\n    // @include box-shadow(none);\n  "])))
+  var styles$12 = StyleSheet.create(_objectSpread2(_objectSpread2({
+    '.btn': css$1(_templateObject$13 || (_templateObject$13 = _taggedTemplateLiteral(["\n    flex-direction: row; // added for bootstrap-rn\n    justify-content: center; // added for bootstrap-rn\n    // display: inline-block;\n    @include platform(web) {\n      // cursor: if($enable-button-pointers, pointer, null);\n      user-select: none;\n    }\n    background-color: transparent;\n    border: $btn-border-width solid transparent;\n    padding: $btn-padding-y $btn-padding-x;\n    // Manually declare to provide an override to the browser default\n    border-radius: $btn-border-radius;\n    // @include transition($btn-transition);\n\n    &:focus {\n      // outline: 0;\n      // box-shadow: $btn-focus-box-shadow;\n    }\n\n    &:active {\n      // @include box-shadow($btn-active-box-shadow);\n\n      &:focus {\n        // @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);\n      }\n    }\n  "]))),
+    '.btn-text': css$1(_templateObject2$O || (_templateObject2$O = _taggedTemplateLiteral(["\n    font-family: $btn-font-family;\n    font-weight: $btn-font-weight;\n    line-height: $btn-font-size * $btn-line-height;\n    color: $body-color;\n    text-align: center;\n    text-decoration: none; // if($link-decoration == none, null, none);\n    white-space: $btn-white-space;\n    // vertical-align: middle;\n    font-size: $btn-font-size;\n\n    &:hover {\n      color: $body-color;\n      text-decoration: none; // if($link-decoration == none, null, none);\n    }\n  "]))),
+    '.btn-disabled': css$1(_templateObject3$o || (_templateObject3$o = _taggedTemplateLiteral(["\n    // pointer-events: none;\n    opacity: $btn-disabled-opacity;\n    // @include box-shadow(none);\n  "])))
   }, each(THEME_COLORS, function (color, value) {
     var _ref;
 
-    return _ref = {}, _defineProperty(_ref, ".btn-".concat(color), css$1(_templateObject4$k || (_templateObject4$k = _taggedTemplateLiteral(["\n      background-color: ", ";\n      border-color: ", ";\n      // @include box-shadow($btn-box-shadow);\n\n      &:hover {\n        background-color: ", ";\n        border-color: ", ";\n      }\n\n      &:focus {\n        background-color: ", ";\n        border-color: ", ";\n        /* @if $enable-shadows {\n          @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));\n        } @else {\n          // Avoid using mixin so we can pass custom focus shadow properly\n          box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);\n        } */\n      }\n\n      &:active {\n        background-color: ", ";\n        // Remove CSS gradients if they're enabled\n        // background-image: if($enable-gradients, none, null);\n        border-color: ", ";\n      }\n    "])), value, value, shadeColor(function (t) {
+    return _ref = {}, _defineProperty(_ref, ".btn-".concat(color), css$1(_templateObject4$m || (_templateObject4$m = _taggedTemplateLiteral(["\n      background-color: ", ";\n      border-color: ", ";\n      // @include box-shadow($btn-box-shadow);\n\n      &:hover {\n        background-color: ", ";\n        border-color: ", ";\n      }\n\n      &:focus {\n        background-color: ", ";\n        border-color: ", ";\n        /* @if $enable-shadows {\n          @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));\n        } @else {\n          // Avoid using mixin so we can pass custom focus shadow properly\n          box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);\n        } */\n      }\n\n      &:active {\n        background-color: ", ";\n        // Remove CSS gradients if they're enabled\n        // background-image: if($enable-gradients, none, null);\n        border-color: ", ";\n      }\n    "])), value, value, shadeColor(function (t) {
       return t['btn-hover-bg-shade-amount'];
     }, value), shadeColor(function (t) {
       return t['btn-hover-border-shade-amount'];
@@ -39180,11 +39116,11 @@
       return t['btn-active-bg-shade-amount'];
     }, value), shadeColor(function (t) {
       return t['btn-active-border-shade-amount'];
-    }, value))), _defineProperty(_ref, ".btn-".concat(color, "-text"), css$1(_templateObject5$i || (_templateObject5$i = _taggedTemplateLiteral(["\n      color: ", ";\n\n      &:hover {\n        color: ", ";\n      }\n\n      &:focus {\n        color: ", ";\n      }\n\n      &:active {\n        color: ", ";\n      }\n    "])), colorContrast(value), colorContrast(value), colorContrast(value), colorContrast(value))), _defineProperty(_ref, ".btn-".concat(color, "-active"), css$1(_templateObject6$g || (_templateObject6$g = _taggedTemplateLiteral(["\n      background-color: ", ";\n      // Remove CSS gradients if they're enabled\n      // background-image: if($enable-gradients, none, null);\n      border-color: ", ";\n    "])), shadeColor(function (t) {
+    }, value))), _defineProperty(_ref, ".btn-".concat(color, "-text"), css$1(_templateObject5$k || (_templateObject5$k = _taggedTemplateLiteral(["\n      color: ", ";\n\n      &:hover {\n        color: ", ";\n      }\n\n      &:focus {\n        color: ", ";\n      }\n\n      &:active {\n        color: ", ";\n      }\n    "])), colorContrast(value), colorContrast(value), colorContrast(value), colorContrast(value))), _defineProperty(_ref, ".btn-".concat(color, "-active"), css$1(_templateObject6$g || (_templateObject6$g = _taggedTemplateLiteral(["\n      background-color: ", ";\n      // Remove CSS gradients if they're enabled\n      // background-image: if($enable-gradients, none, null);\n      border-color: ", ";\n    "])), shadeColor(function (t) {
       return t['btn-active-bg-shade-amount'];
     }, value), shadeColor(function (t) {
       return t['btn-active-border-shade-amount'];
-    }, value))), _defineProperty(_ref, ".btn-".concat(color, "-active-text"), css$1(_templateObject7$c || (_templateObject7$c = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), colorContrast(value))), _defineProperty(_ref, ".btn-".concat(color, "-disabled"), css$1(_templateObject8$b || (_templateObject8$b = _taggedTemplateLiteral(["\n      $disabled-background: ", ";\n      $disabled-border: ", ";\n\n      background-color: $disabled-background;\n      // Remove CSS gradients if they're enabled\n      // background-image: if($enable-gradients, none, null);\n      border-color: $disabled-border;\n    "])), value, value)), _defineProperty(_ref, ".btn-".concat(color, "-disabled-text"), css$1(_templateObject9$7 || (_templateObject9$7 = _taggedTemplateLiteral(["\n      $disabled-color: ", ";\n\n      color: $disabled-color;\n    "])), colorContrast(value))), _defineProperty(_ref, ".btn-outline-".concat(color), css$1(_templateObject10$7 || (_templateObject10$7 = _taggedTemplateLiteral(["\n      border-color: ", ";\n\n      &:hover {\n        background-color: ", ";\n        border-color: ", ";\n      }\n\n      &:focus {\n        // box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);\n      }\n\n      &:active {\n        background-color: ", ";\n        border-color: ", ";\n\n        /* &:focus {\n          @if $enable-shadows {\n            @include box-shadow(\n              $btn-active-box-shadow,\n              0 0 0 $btn-focus-width rgba($color, 0.5)\n            );\n          } @else {\n            // Avoid using mixin so we can pass custom focus shadow properly\n            box-shadow: 0 0 0 $btn-focus-width rgba($color, 0.5);\n          }\n        } */\n      }\n    "])), value, value, value, value, value)), _defineProperty(_ref, ".btn-outline-".concat(color, "-text"), css$1(_templateObject11$5 || (_templateObject11$5 = _taggedTemplateLiteral(["\n      color: ", ";\n\n      &:hover {\n        color: ", ";\n      }\n\n      &:active {\n        color: ", ";\n      }\n    "])), value, colorContrast(value), colorContrast(value))), _defineProperty(_ref, ".btn-outline-".concat(color, "-disabled"), css$1(_templateObject12$4 || (_templateObject12$4 = _taggedTemplateLiteral(["\n      background-color: transparent;\n    "])))), _defineProperty(_ref, ".btn-outline-".concat(color, "-disabled-text"), css$1(_templateObject13$4 || (_templateObject13$4 = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), value)), _ref;
+    }, value))), _defineProperty(_ref, ".btn-".concat(color, "-active-text"), css$1(_templateObject7$c || (_templateObject7$c = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), colorContrast(value))), _defineProperty(_ref, ".btn-".concat(color, "-disabled"), css$1(_templateObject8$b || (_templateObject8$b = _taggedTemplateLiteral(["\n      $disabled-background: ", ";\n      $disabled-border: ", ";\n\n      background-color: $disabled-background;\n      // Remove CSS gradients if they're enabled\n      // background-image: if($enable-gradients, none, null);\n      border-color: $disabled-border;\n    "])), value, value)), _defineProperty(_ref, ".btn-".concat(color, "-disabled-text"), css$1(_templateObject9$8 || (_templateObject9$8 = _taggedTemplateLiteral(["\n      $disabled-color: ", ";\n\n      color: $disabled-color;\n    "])), colorContrast(value))), _defineProperty(_ref, ".btn-outline-".concat(color), css$1(_templateObject10$8 || (_templateObject10$8 = _taggedTemplateLiteral(["\n      border-color: ", ";\n\n      &:hover {\n        background-color: ", ";\n        border-color: ", ";\n      }\n\n      &:focus {\n        // box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);\n      }\n\n      &:active {\n        background-color: ", ";\n        border-color: ", ";\n\n        /* &:focus {\n          @if $enable-shadows {\n            @include box-shadow(\n              $btn-active-box-shadow,\n              0 0 0 $btn-focus-width rgba($color, 0.5)\n            );\n          } @else {\n            // Avoid using mixin so we can pass custom focus shadow properly\n            box-shadow: 0 0 0 $btn-focus-width rgba($color, 0.5);\n          }\n        } */\n      }\n    "])), value, value, value, value, value)), _defineProperty(_ref, ".btn-outline-".concat(color, "-text"), css$1(_templateObject11$6 || (_templateObject11$6 = _taggedTemplateLiteral(["\n      color: ", ";\n\n      &:hover {\n        color: ", ";\n      }\n\n      &:active {\n        color: ", ";\n      }\n    "])), value, colorContrast(value), colorContrast(value))), _defineProperty(_ref, ".btn-outline-".concat(color, "-disabled"), css$1(_templateObject12$5 || (_templateObject12$5 = _taggedTemplateLiteral(["\n      background-color: transparent;\n    "])))), _defineProperty(_ref, ".btn-outline-".concat(color, "-disabled-text"), css$1(_templateObject13$5 || (_templateObject13$5 = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), value)), _ref;
   })), {}, {
     '.btn-link-text': css$1(_templateObject14$3 || (_templateObject14$3 = _taggedTemplateLiteral(["\n    font-weight: $font-weight-normal;\n    color: $btn-link-color;\n    text-decoration-color: $btn-link-color; // added for bootstrap-rn\n    text-decoration-line: $link-decoration;\n\n    &:hover {\n      color: $btn-link-hover-color;\n      text-decoration-color: $btn-link-hover-color; // added for bootstrap-rn\n      text-decoration-line: $link-hover-decoration;\n    }\n\n    &:focus {\n      text-decoration-line: $link-hover-decoration;\n    }\n\n    // No need for an active state here\n  "]))),
     '.btn-link-text-disabled': css$1(_templateObject15$2 || (_templateObject15$2 = _taggedTemplateLiteral(["\n    color: $btn-link-disabled-color;\n  "]))),
@@ -39192,7 +39128,7 @@
     '.btn-lg-text': css$1(_templateObject17$1 || (_templateObject17$1 = _taggedTemplateLiteral(["\n    line-height: $btn-font-size-lg * $btn-line-height;\n    font-size: $btn-font-size-lg;\n  "]))),
     '.btn-sm': css$1(_templateObject18$1 || (_templateObject18$1 = _taggedTemplateLiteral(["\n    padding: $btn-padding-y-sm $btn-padding-x-sm;\n    // Manually declare to provide an override to the browser default\n    border-radius: $btn-border-radius-sm;\n  "]))),
     '.btn-sm-text': css$1(_templateObject19$1 || (_templateObject19$1 = _taggedTemplateLiteral(["\n    line-height: $btn-font-size-sm * $btn-line-height;\n    font-size: $btn-font-size-sm;\n  "]))),
-    '.btn-group > .btn': css$1(_templateObject20$1 || (_templateObject20$1 = _taggedTemplateLiteral(["\n    position: relative;\n    flex: 1 1 auto;\n\n    &:hover {\n      z-index: 1;\n    }\n    &:focus {\n      z-index: 1;\n    }\n    &:active {\n      z-index: 1;\n    }\n  "]))),
+    '.btn-group > .btn': css$1(_templateObject20$1 || (_templateObject20$1 = _taggedTemplateLiteral(["\n    position: relative;\n    // flex: 1 1 auto;\n\n    &:hover {\n      z-index: 1;\n    }\n    &:focus {\n      z-index: 1;\n    }\n    &:active {\n      z-index: 1;\n    }\n  "]))),
     '.btn-group > .btn-active': css$1(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n    z-index: 2; // 1;\n  "]))),
     '.btn-group > .btn-not-first': css$1(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n    margin-left: -$btn-border-width;\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n  "]))),
     '.btn-group > .btn-not-last': css$1(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n  "])))
@@ -39237,15 +39173,15 @@
         activeStyle = props.activeStyle,
         textStyle = props.textStyle,
         activeTextStyle = props.activeTextStyle,
-        elementProps = _objectWithoutProperties(props, _excluded$1f);
+        elementProps = _objectWithoutProperties(props, _excluded$1g);
 
     invariant(color !== 'link' || !outline, 'Button link variant is only available as non outline style.');
     var group = React.useContext(ButtonGroupContext);
-    var classes = getStyles(styles$11, ['.btn', getVariant(color, outline), disabled && '.btn-disabled', disabled && "".concat(getVariant(color, outline), "-disabled"), hasSize(size, group, 'lg') && '.btn-lg', hasSize(size, group, 'sm') && '.btn-sm', group && '.btn-group > .btn', group && active && '.btn-group > .btn-active', group && !first && '.btn-group > .btn-not-first', group && !last && '.btn-group > .btn-not-last']);
-    var activeClasses = getStyles(styles$11, ["".concat(getVariant(color, outline), "-active")]);
-    var textClasses = getStyles(styles$11, ['.btn-text', "".concat(getVariant(color, outline), "-text"), color === 'link' && '.btn-link-text', disabled && "".concat(getVariant(color, outline), "-text-disabled"), disabled && color === 'link' && '.btn-link-text-disabled', hasSize(size, group, 'lg') && '.btn-lg-text', hasSize(size, group, 'sm') && '.btn-sm-text']);
-    var activeTextClasses = getStyles(styles$11, ["".concat(getVariant(color, outline), "-active-text")]);
-    return /*#__PURE__*/React__default["default"].createElement(Pressable, _extends({}, elementProps, {
+    var classes = getStyles(styles$12, ['.btn', getVariant(color, outline), disabled && '.btn-disabled', disabled && "".concat(getVariant(color, outline), "-disabled"), hasSize(size, group, 'lg') && '.btn-lg', hasSize(size, group, 'sm') && '.btn-sm', group && '.btn-group > .btn', group && active && '.btn-group > .btn-active', group && !first && '.btn-group > .btn-not-first', group && !last && '.btn-group > .btn-not-last']);
+    var activeClasses = getStyles(styles$12, ["".concat(getVariant(color, outline), "-active")]);
+    var textClasses = getStyles(styles$12, ['.btn-text', "".concat(getVariant(color, outline), "-text"), color === 'link' && '.btn-link-text', disabled && "".concat(getVariant(color, outline), "-text-disabled"), disabled && color === 'link' && '.btn-link-text-disabled', hasSize(size, group, 'lg') && '.btn-lg-text', hasSize(size, group, 'sm') && '.btn-sm-text']);
+    var activeTextClasses = getStyles(styles$12, ["".concat(getVariant(color, outline), "-active-text")]);
+    return /*#__PURE__*/React__default["default"].createElement(Pressable, _extends$1({}, elementProps, {
       ref: ref,
       active: active,
       disabled: disabled,
@@ -39256,34 +39192,34 @@
     }), children);
   });
   Button.displayName = 'Button';
-  Button.propTypes = propTypes$1g;
+  Button.propTypes = propTypes$1h;
   Button.useToggle = useToggleButton;
 
-  var _excluded$1e = ["children", "style", "textStyle"];
+  var _excluded$1f = ["children", "style", "textStyle"];
 
-  var _templateObject$11, _templateObject2$G;
-  var propTypes$1f = {
+  var _templateObject$12, _templateObject2$N;
+  var propTypes$1g = {
     children: PropTypes.node.isRequired,
     // eslint-disable-next-line react/forbid-prop-types
     style: PropTypes.any,
     // eslint-disable-next-line react/forbid-prop-types
     textStyle: PropTypes.any
   };
-  var styles$10 = StyleSheet.create({
-    blockquote: css$1(_templateObject$11 || (_templateObject$11 = _taggedTemplateLiteral(["\n    margin-bottom: $blockquote-margin-y;\n  "]))),
-    'blockquote-text': css$1(_templateObject2$G || (_templateObject2$G = _taggedTemplateLiteral(["\n    font-size: $blockquote-font-size;\n  "])))
+  var styles$11 = StyleSheet.create({
+    blockquote: css$1(_templateObject$12 || (_templateObject$12 = _taggedTemplateLiteral(["\n    margin-bottom: $blockquote-margin-y;\n  "]))),
+    'blockquote-text': css$1(_templateObject2$N || (_templateObject2$N = _taggedTemplateLiteral(["\n    font-size: $blockquote-font-size;\n  "])))
   });
   var Blockquote = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
     var children = props.children,
         style = props.style,
         textStyle = props.textStyle,
-        elementProps = _objectWithoutProperties(props, _excluded$1e);
+        elementProps = _objectWithoutProperties(props, _excluded$1f);
 
-    var classes = getStyles(styles$10, ['blockquote']);
-    var textClasses = getStyles(styles$10, ['blockquote-text']); // Accessiblity role blockquote is only supported on web.
+    var classes = getStyles(styles$11, ['blockquote']);
+    var textClasses = getStyles(styles$11, ['blockquote-text']); // Accessiblity role blockquote is only supported on web.
 
     var role = _reactNative.Platform.OS === 'web' ? 'blockquote' : null;
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       accessibilityRole: role,
       style: [classes, style],
@@ -39291,164 +39227,170 @@
     }), children);
   });
   Blockquote.displayName = 'Blockquote';
-  Blockquote.propTypes = propTypes$1f;
+  Blockquote.propTypes = propTypes$1g;
 
-  var _excluded$1d = ["children", "style", "textStyle"];
+  var _excluded$1e = ["children", "style", "textStyle"];
 
-  var _templateObject$10, _templateObject2$F;
-  var propTypes$1e = {
+  var _templateObject$11, _templateObject2$M;
+  var propTypes$1f = {
     children: PropTypes.node.isRequired,
     // eslint-disable-next-line react/forbid-prop-types
     style: PropTypes.any,
     // eslint-disable-next-line react/forbid-prop-types
     textStyle: PropTypes.any
   };
-  var styles$$ = StyleSheet.create({
-    body: css$1(_templateObject$10 || (_templateObject$10 = _taggedTemplateLiteral(["\n    background-color: $body-bg;\n  "]))),
-    'body-text': css$1(_templateObject2$F || (_templateObject2$F = _taggedTemplateLiteral(["\n    color: $body-color;\n    text-align: $body-text-align;\n  "])))
+  var styles$10 = StyleSheet.create({
+    body: css$1(_templateObject$11 || (_templateObject$11 = _taggedTemplateLiteral(["\n    background-color: $body-bg;\n    height: 100%; // added for bootstrap-rn\n  "]))),
+    'body-text': css$1(_templateObject2$M || (_templateObject2$M = _taggedTemplateLiteral(["\n    color: $body-color;\n    text-align: $body-text-align;\n  "])))
   });
   var Body = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
     var children = props.children,
         style = props.style,
         textStyle = props.textStyle,
-        elementProps = _objectWithoutProperties(props, _excluded$1d);
+        elementProps = _objectWithoutProperties(props, _excluded$1e);
 
-    var classes = getStyles(styles$$, ['body']);
-    var textClasses = getStyles(styles$$, ['body-text']);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    var classes = getStyles(styles$10, ['body']);
+    var textClasses = getStyles(styles$10, ['body-text']);
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       style: [classes, style],
       textStyle: [textClasses, textStyle]
     }), children);
   });
   Body.displayName = 'Body';
-  Body.propTypes = propTypes$1e;
+  Body.propTypes = propTypes$1f;
 
-  var _excluded$1c = ["children", "style", "textStyle"];
+  var _excluded$1d = ["children", "style", "textStyle"];
 
-  var _templateObject$$, _templateObject2$E;
-  var propTypes$1d = {
+  var _templateObject$10, _templateObject2$L;
+  var propTypes$1e = {
     children: PropTypes.node.isRequired,
     // eslint-disable-next-line react/forbid-prop-types
     style: PropTypes.any,
     // eslint-disable-next-line react/forbid-prop-types
     textStyle: PropTypes.any
   };
-  var styles$_ = StyleSheet.create({
-    '.card-body': css$1(_templateObject$$ || (_templateObject$$ = _taggedTemplateLiteral(["\n    // flex: 1 1 auto;\n    padding: $card-spacer-y $card-spacer-x;\n  "]))),
-    '.card-body-text': css$1(_templateObject2$E || (_templateObject2$E = _taggedTemplateLiteral(["\n    color: $card-color;\n  "])))
+  var styles$$ = StyleSheet.create({
+    '.card-body': css$1(_templateObject$10 || (_templateObject$10 = _taggedTemplateLiteral(["\n    // flex: 1 1 auto;\n    padding: $card-spacer-y $card-spacer-x;\n  "]))),
+    '.card-body-text': css$1(_templateObject2$L || (_templateObject2$L = _taggedTemplateLiteral(["\n    color: $card-color;\n  "])))
   });
   var CardBody = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
     var children = props.children,
         style = props.style,
         textStyle = props.textStyle,
-        elementProps = _objectWithoutProperties(props, _excluded$1c);
+        elementProps = _objectWithoutProperties(props, _excluded$1d);
 
-    var classes = getStyles(styles$_, ['.card-body']);
-    var textClasses = getStyles(styles$_, [".card-body-text"]);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    var classes = getStyles(styles$$, ['.card-body']);
+    var textClasses = getStyles(styles$$, [".card-body-text"]);
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       style: [classes, style],
       textStyle: [textClasses, textStyle]
     }), children);
   });
   CardBody.displayName = 'CardBody';
-  CardBody.propTypes = propTypes$1d;
+  CardBody.propTypes = propTypes$1e;
 
-  var _excluded$1b = ["children", "style", "textStyle"];
+  var _excluded$1c = ["children", "style", "textStyle"];
 
-  var _templateObject$_, _templateObject2$D;
-  var propTypes$1c = {
+  var _templateObject$$, _templateObject2$K;
+  var propTypes$1d = {
     children: PropTypes.node.isRequired,
     // eslint-disable-next-line react/forbid-prop-types
     style: PropTypes.any,
     // eslint-disable-next-line react/forbid-prop-types
     textStyle: PropTypes.any
   };
-  var styles$Z = StyleSheet.create({
-    '.card-header': css$1(_templateObject$_ || (_templateObject$_ = _taggedTemplateLiteral(["\n    padding: $card-cap-padding-y $card-cap-padding-x;\n    margin-bottom: 0; // Removes the default margin-bottom of <hN>\n    background-color: $card-cap-bg;\n    border-bottom-width: $card-border-width;\n    border-style: solid;\n    border-color: $card-border-color;\n    border-radius: $card-inner-border-radius $card-inner-border-radius 0 0;\n  "]))),
-    '.card-header-text': css$1(_templateObject2$D || (_templateObject2$D = _taggedTemplateLiteral(["\n    color: $card-cap-color;\n  "])))
+  var styles$_ = StyleSheet.create({
+    '.card-header': css$1(_templateObject$$ || (_templateObject$$ = _taggedTemplateLiteral(["\n    padding: $card-cap-padding-y $card-cap-padding-x;\n    margin-bottom: 0; // Removes the default margin-bottom of <hN>\n    background-color: $card-cap-bg;\n    border-bottom-width: $card-border-width;\n    border-style: solid;\n    border-color: $card-border-color;\n    border-radius: $card-inner-border-radius $card-inner-border-radius 0 0;\n  "]))),
+    '.card-header-text': css$1(_templateObject2$K || (_templateObject2$K = _taggedTemplateLiteral(["\n    color: $card-cap-color;\n  "])))
   });
   var CardHeader = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
     var children = props.children,
         style = props.style,
         textStyle = props.textStyle,
-        elementProps = _objectWithoutProperties(props, _excluded$1b);
+        elementProps = _objectWithoutProperties(props, _excluded$1c);
 
-    var classes = getStyles(styles$Z, ['.card-header']);
-    var textClasses = getStyles(styles$Z, ['.card-header-text']);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    var classes = getStyles(styles$_, ['.card-header']);
+    var textClasses = getStyles(styles$_, ['.card-header-text']);
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       style: [classes, style],
       textStyle: [textClasses, textStyle]
     }), children);
   });
   CardHeader.displayName = 'CardHeader';
-  CardHeader.propTypes = propTypes$1c;
+  CardHeader.propTypes = propTypes$1d;
 
-  var _excluded$1a = ["children", "style", "textStyle"];
+  var _excluded$1b = ["children", "style", "textStyle"];
 
-  var _templateObject$Z, _templateObject2$C;
-  var propTypes$1b = {
+  var _templateObject$_, _templateObject2$J;
+  var propTypes$1c = {
     children: PropTypes.node.isRequired,
     // eslint-disable-next-line react/forbid-prop-types
     style: PropTypes.any,
     // eslint-disable-next-line react/forbid-prop-types
     textStyle: PropTypes.any
   };
-  var styles$Y = StyleSheet.create({
-    '.card-footer': css$1(_templateObject$Z || (_templateObject$Z = _taggedTemplateLiteral(["\n    padding: $card-cap-padding-y $card-cap-padding-x;\n    background-color: $card-cap-bg;\n    border-top-width: $card-border-width;\n    border-style: solid;\n    border-color: $card-border-color;\n    border-radius: 0 0 $card-inner-border-radius $card-inner-border-radius;\n  "]))),
-    '.card-footer-text': css$1(_templateObject2$C || (_templateObject2$C = _taggedTemplateLiteral(["\n    color: $card-cap-color;\n  "])))
+  var styles$Z = StyleSheet.create({
+    '.card-footer': css$1(_templateObject$_ || (_templateObject$_ = _taggedTemplateLiteral(["\n    padding: $card-cap-padding-y $card-cap-padding-x;\n    background-color: $card-cap-bg;\n    border-top-width: $card-border-width;\n    border-style: solid;\n    border-color: $card-border-color;\n    border-radius: 0 0 $card-inner-border-radius $card-inner-border-radius;\n  "]))),
+    '.card-footer-text': css$1(_templateObject2$J || (_templateObject2$J = _taggedTemplateLiteral(["\n    color: $card-cap-color;\n  "])))
   });
   var CardFooter = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
     var children = props.children,
         style = props.style,
         textStyle = props.textStyle,
-        elementProps = _objectWithoutProperties(props, _excluded$1a);
+        elementProps = _objectWithoutProperties(props, _excluded$1b);
 
-    var classes = getStyles(styles$Y, ['.card-footer']);
-    var textClasses = getStyles(styles$Y, ['.card-footer-text']);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    var classes = getStyles(styles$Z, ['.card-footer']);
+    var textClasses = getStyles(styles$Z, ['.card-footer-text']);
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       style: [classes, style],
       textStyle: [textClasses, textStyle]
     }), children);
   });
   CardFooter.displayName = 'CardFooter';
-  CardFooter.propTypes = propTypes$1b;
+  CardFooter.propTypes = propTypes$1c;
 
-  var _excluded$19 = ["children", "style"];
+  var _excluded$1a = ["children", "style"];
 
-  var _templateObject$Y;
-  var propTypes$1a = {
+  var _templateObject$Z;
+  var propTypes$1b = {
     children: PropTypes.node.isRequired,
     // eslint-disable-next-line react/forbid-prop-types
     style: PropTypes.any
   };
-  var styles$X = StyleSheet.create({
-    '.card': css$1(_templateObject$Y || (_templateObject$Y = _taggedTemplateLiteral(["\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n    height: $card-height;\n    // word-wrap: break-word;\n    background-color: $card-bg;\n    // background-clip: border-box;\n    border: $card-border-width solid $card-border-color;\n    border-radius: $card-border-radius;\n    // @include box-shadow($card-box-shadow);\n  "])))
+  var styles$Y = StyleSheet.create({
+    '.card': css$1(_templateObject$Z || (_templateObject$Z = _taggedTemplateLiteral(["\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n    height: $card-height;\n    // word-wrap: break-word;\n    background-color: $card-bg;\n    // background-clip: border-box;\n    border: $card-border-width solid $card-border-color;\n    border-radius: $card-border-radius;\n    // @include box-shadow($card-box-shadow);\n  "])))
   });
   var Card = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
     var children = props.children,
         style = props.style,
-        elementProps = _objectWithoutProperties(props, _excluded$19);
+        elementProps = _objectWithoutProperties(props, _excluded$1a);
 
-    var classes = getStyles(styles$X, ['.card']);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    var classes = getStyles(styles$Y, ['.card']);
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       style: [classes, style]
     }), children);
   });
   Card.displayName = 'Card';
-  Card.propTypes = propTypes$1a;
+  Card.propTypes = propTypes$1b;
   Card.Header = CardHeader;
   Card.Body = CardBody;
   Card.Footer = CardFooter;
 
-  var _excluded$18 = ["children", "disabled", "style", "textStyle"];
+  var ModalContext = /*#__PURE__*/React__default["default"].createContext();
+  ModalContext.displayName = 'ModalContext';
 
-  var _templateObject$X, _templateObject2$B, _templateObject3$m;
-  var propTypes$19 = {
+  var OffcanvasContext = /*#__PURE__*/React__default["default"].createContext();
+  OffcanvasContext.displayName = 'OffcanvasContext';
+
+  var _excluded$19 = ["children", "disabled", "style", "textStyle"];
+
+  var _templateObject$Y, _templateObject2$I, _templateObject3$n, _templateObject4$l, _templateObject5$j;
+  var propTypes$1a = {
     children: PropTypes.node,
     disabled: PropTypes.bool,
     // eslint-disable-next-line react/forbid-prop-types
@@ -39456,10 +39398,14 @@
     // eslint-disable-next-line react/forbid-prop-types
     textStyle: PropTypes.any
   };
-  var styles$W = StyleSheet.create({
-    '.btn-close': css$1(_templateObject$X || (_templateObject$X = _taggedTemplateLiteral(["\n    // Workaround for missing box-sizing in react native.\n    $additional-width: $btn-close-padding-x * 2;\n    $additional-height: $btn-close-padding-y * 2;\n\n    // box-sizing: content-box;\n    width: $btn-close-width + $additional-width;\n    height: $btn-close-height + $additional-height;\n    padding: $btn-close-padding-y $btn-close-padding-x;\n    background: transparent;\n    border-width: 0; // for button elements\n    // @include border-radius();\n    opacity: $btn-close-opacity;\n\n    &:hover {\n      opacity: $btn-close-hover-opacity;\n    }\n\n    &:focus {\n      // outline: 0;\n      // box-shadow: $btn-close-focus-shadow;\n      opacity: $btn-close-focus-opacity;\n    }\n  "]))),
-    '.btn-close-text': css$1(_templateObject2$B || (_templateObject2$B = _taggedTemplateLiteral(["\n    color: $btn-close-color;\n\n    // Override <a>'s hover style\n    &:hover {\n      color: $btn-close-color;\n      text-decoration: none;\n    }\n  "]))),
-    '.btn-close-disabled': css$1(_templateObject3$m || (_templateObject3$m = _taggedTemplateLiteral(["\n    // pointer-events: none;\n    // user-select: none;\n    opacity: $btn-close-disabled-opacity;\n  "])))
+  var styles$X = StyleSheet.create({
+    '.btn-close': css$1(_templateObject$Y || (_templateObject$Y = _taggedTemplateLiteral(["\n    // Workaround for missing box-sizing in react native.\n    $additional-width: $btn-close-padding-x * 2;\n    $additional-height: $btn-close-padding-y * 2;\n\n    // box-sizing: content-box;\n    width: $btn-close-width + $additional-width;\n    height: $btn-close-height + $additional-height;\n    padding: $btn-close-padding-y $btn-close-padding-x;\n    background: transparent;\n    border-width: 0; // for button elements\n    // @include border-radius();\n    opacity: $btn-close-opacity;\n\n    &:hover {\n      opacity: $btn-close-hover-opacity;\n    }\n\n    &:focus {\n      // outline: 0;\n      // box-shadow: $btn-close-focus-shadow;\n      opacity: $btn-close-focus-opacity;\n    }\n  "]))),
+    '.btn-close-text': css$1(_templateObject2$I || (_templateObject2$I = _taggedTemplateLiteral(["\n    color: $btn-close-color;\n\n    // Override <a>'s hover style\n    &:hover {\n      color: $btn-close-color;\n      text-decoration: none;\n    }\n  "]))),
+    '.btn-close-disabled': css$1(_templateObject3$n || (_templateObject3$n = _taggedTemplateLiteral(["\n    // pointer-events: none;\n    // user-select: none;\n    opacity: $btn-close-disabled-opacity;\n  "]))),
+    // Modal styles
+    '.modal-header .btn-close': css$1(_templateObject4$l || (_templateObject4$l = _taggedTemplateLiteral(["\n    padding: $modal-header-padding-y * 0.5 $modal-header-padding-x * 0.5;\n    margin: -0.5 * $modal-header-padding-y -0.5 * $modal-header-padding-x -0.5 *\n      $modal-header-padding-y auto;\n\n    // Workaround for missing box-sizing in react native.\n    width: $btn-close-width + $modal-header-padding-x;\n    height: $btn-close-height + $modal-header-padding-y;\n  "]))),
+    // Offcanvas styles
+    '.offcanvas-header .btn-close': css$1(_templateObject5$j || (_templateObject5$j = _taggedTemplateLiteral(["\n    padding: $offcanvas-padding-y * 0.5 $offcanvas-padding-x * 0.5;\n    margin-top: -0.5 * $offcanvas-padding-y;\n    margin-right: -0.5 * $offcanvas-padding-x;\n    margin-bottom: -0.5 * $offcanvas-padding-y;\n\n    // Workaround for missing box-sizing in react native.\n    width: $btn-close-width + $offcanvas-padding-x;\n    height: $btn-close-height + $offcanvas-padding-y;\n  "])))
   });
   var CloseButton = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
     props.children;
@@ -39467,11 +39413,15 @@
         disabled = _props$disabled === void 0 ? false : _props$disabled,
         style = props.style,
         textStyle = props.textStyle,
-        elementProps = _objectWithoutProperties(props, _excluded$18);
+        elementProps = _objectWithoutProperties(props, _excluded$19);
 
-    var classes = getStyles(styles$W, ['.btn-close', disabled && '.btn-close-disabled']);
-    var textClasses = getStyles(styles$W, ['.btn-close-text']);
-    return /*#__PURE__*/React__default["default"].createElement(Pressable, _extends({}, elementProps, {
+    var modal = React.useContext(ModalContext);
+    var offcanvas = React.useContext(OffcanvasContext);
+    var classes = getStyles(styles$X, ['.btn-close', disabled && '.btn-close-disabled', // Modal styles
+    modal && '.modal-header .btn-close', // Offcanvas styles
+    offcanvas && '.offcanvas-header .btn-close']);
+    var textClasses = getStyles(styles$X, ['.btn-close-text']);
+    return /*#__PURE__*/React__default["default"].createElement(Pressable, _extends$1({}, elementProps, {
       ref: ref,
       disabled: disabled,
       style: [classes, style],
@@ -39479,7 +39429,7 @@
     }), StyleSheet.value('btn-close-bg'));
   });
   CloseButton.displayName = 'CloseButton';
-  CloseButton.propTypes = propTypes$19;
+  CloseButton.propTypes = propTypes$1a;
 
   var CollapseContext = /*#__PURE__*/React__default["default"].createContext();
   CollapseContext.displayName = 'CollapseContext';
@@ -39538,7 +39488,7 @@
     }, [visible]);
   }
 
-  var propTypes$18 = {
+  var propTypes$19 = {
     children: PropTypes.node.isRequired,
     defaultVisible: PropTypes.bool,
     visible: PropTypes.bool,
@@ -39558,14 +39508,14 @@
   };
 
   CollapseProvider.displayName = 'CollapseProvider';
-  CollapseProvider.propTypes = propTypes$18;
+  CollapseProvider.propTypes = propTypes$19;
 
-  var _excluded$17 = ["onPress"];
+  var _excluded$18 = ["onPress"];
   function useToggleCollapse(props) {
     var context = useForcedContext(CollapseContext);
 
     var handlePress = props.onPress,
-        restProps = _objectWithoutProperties(props, _excluded$17);
+        restProps = _objectWithoutProperties(props, _excluded$18);
 
     return _objectSpread2(_objectSpread2({}, restProps), {}, {
       onPress: function onPress(event) {
@@ -39579,13 +39529,13 @@
     });
   }
 
-  var _excluded$16 = ["children"];
-  var propTypes$17 = {
+  var _excluded$17 = ["children"];
+  var propTypes$18 = {
     children: PropTypes.node
   };
   var Collapse = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
     var children = props.children,
-        elementProps = _objectWithoutProperties(props, _excluded$16);
+        elementProps = _objectWithoutProperties(props, _excluded$17);
 
     var _useForcedContext = useForcedContext(CollapseContext),
         identifier = _useForcedContext.identifier,
@@ -39595,13 +39545,13 @@
       return null;
     }
 
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       nativeID: identifier
     }), children);
   });
   Collapse.displayName = 'Collapse';
-  Collapse.propTypes = propTypes$17;
+  Collapse.propTypes = propTypes$18;
   Collapse.Provider = CollapseProvider;
   Collapse.useToggle = useToggleCollapse;
 
@@ -39626,18 +39576,18 @@
   var NavbarContext = /*#__PURE__*/React__default["default"].createContext();
   NavbarContext.displayName = 'NavbarContext';
 
-  var _excluded$15 = ["fluid", "style"];
+  var _excluded$16 = ["fluid", "style"];
 
-  var _templateObject$W, _templateObject2$A, _templateObject3$l, _templateObject4$j, _templateObject5$h, _templateObject6$f, _templateObject7$b, _templateObject8$a;
-  var propTypes$16 = {
+  var _templateObject$X, _templateObject2$H, _templateObject3$m, _templateObject4$k, _templateObject5$i, _templateObject6$f, _templateObject7$b, _templateObject8$a;
+  var propTypes$17 = {
     children: PropTypes.node.isRequired,
     fluid: PropTypes.oneOf([true].concat(_toConsumableArray(Object.keys(CONTAINER_MAX_WIDTHS)))),
     // eslint-disable-next-line react/forbid-prop-types
     style: PropTypes.any
   };
-  var styles$V = StyleSheet.create(_objectSpread2({
-    '.container': css$1(_templateObject$W || (_templateObject$W = _taggedTemplateLiteral(["\n    width: 100%;\n    padding-right: $container-padding-x;\n    padding-left: $container-padding-x;\n    margin-right: auto;\n    margin-left: auto;\n  "]))),
-    '.container-sm': css$1(_templateObject2$A || (_templateObject2$A = _taggedTemplateLiteral(["\n    @include media-breakpoint-up(sm) {\n      max-width: ", ";\n    }\n    @include media-breakpoint-up(md) {\n      max-width: ", ";\n    }\n    @include media-breakpoint-up(lg) {\n      max-width: ", ";\n    }\n    @include media-breakpoint-up(xl) {\n      max-width: ", ";\n    }\n    @include media-breakpoint-up(xxl) {\n      max-width: ", ";\n    }\n  "])), function (t) {
+  var styles$W = StyleSheet.create(_objectSpread2({
+    '.container': css$1(_templateObject$X || (_templateObject$X = _taggedTemplateLiteral(["\n    width: 100%;\n    padding-right: $container-padding-x;\n    padding-left: $container-padding-x;\n    margin-right: auto;\n    margin-left: auto;\n  "]))),
+    '.container-sm': css$1(_templateObject2$H || (_templateObject2$H = _taggedTemplateLiteral(["\n    @include media-breakpoint-up(sm) {\n      max-width: ", ";\n    }\n    @include media-breakpoint-up(md) {\n      max-width: ", ";\n    }\n    @include media-breakpoint-up(lg) {\n      max-width: ", ";\n    }\n    @include media-breakpoint-up(xl) {\n      max-width: ", ";\n    }\n    @include media-breakpoint-up(xxl) {\n      max-width: ", ";\n    }\n  "])), function (t) {
       return t['container-max-widths'].sm;
     }, function (t) {
       return t['container-max-widths'].md;
@@ -39648,7 +39598,7 @@
     }, function (t) {
       return t['container-max-widths'].xxl;
     }),
-    '.container-md': css$1(_templateObject3$l || (_templateObject3$l = _taggedTemplateLiteral(["\n    @include media-breakpoint-up(md) {\n      max-width: ", ";\n    }\n    @include media-breakpoint-up(lg) {\n      max-width: ", ";\n    }\n    @include media-breakpoint-up(xl) {\n      max-width: ", ";\n    }\n    @include media-breakpoint-up(xxl) {\n      max-width: ", ";\n    }\n  "])), function (t) {
+    '.container-md': css$1(_templateObject3$m || (_templateObject3$m = _taggedTemplateLiteral(["\n    @include media-breakpoint-up(md) {\n      max-width: ", ";\n    }\n    @include media-breakpoint-up(lg) {\n      max-width: ", ";\n    }\n    @include media-breakpoint-up(xl) {\n      max-width: ", ";\n    }\n    @include media-breakpoint-up(xxl) {\n      max-width: ", ";\n    }\n  "])), function (t) {
       return t['container-max-widths'].md;
     }, function (t) {
       return t['container-max-widths'].lg;
@@ -39657,14 +39607,14 @@
     }, function (t) {
       return t['container-max-widths'].xxl;
     }),
-    '.container-lg': css$1(_templateObject4$j || (_templateObject4$j = _taggedTemplateLiteral(["\n    @include media-breakpoint-up(lg) {\n      max-width: ", ";\n    }\n    @include media-breakpoint-up(xl) {\n      max-width: ", ";\n    }\n    @include media-breakpoint-up(xxl) {\n      max-width: ", ";\n    }\n  "])), function (t) {
+    '.container-lg': css$1(_templateObject4$k || (_templateObject4$k = _taggedTemplateLiteral(["\n    @include media-breakpoint-up(lg) {\n      max-width: ", ";\n    }\n    @include media-breakpoint-up(xl) {\n      max-width: ", ";\n    }\n    @include media-breakpoint-up(xxl) {\n      max-width: ", ";\n    }\n  "])), function (t) {
       return t['container-max-widths'].lg;
     }, function (t) {
       return t['container-max-widths'].xl;
     }, function (t) {
       return t['container-max-widths'].xxl;
     }),
-    '.container-xl': css$1(_templateObject5$h || (_templateObject5$h = _taggedTemplateLiteral(["\n    @include media-breakpoint-up(xl) {\n      max-width: ", ";\n    }\n    @include media-breakpoint-up(xxl) {\n      max-width: ", ";\n    }\n  "])), function (t) {
+    '.container-xl': css$1(_templateObject5$i || (_templateObject5$i = _taggedTemplateLiteral(["\n    @include media-breakpoint-up(xl) {\n      max-width: ", ";\n    }\n    @include media-breakpoint-up(xxl) {\n      max-width: ", ";\n    }\n  "])), function (t) {
       return t['container-max-widths'].xl;
     }, function (t) {
       return t['container-max-widths'].xxl;
@@ -39681,24 +39631,24 @@
     var _props$fluid = props.fluid,
         fluid = _props$fluid === void 0 ? 'sm' : _props$fluid,
         style = props.style,
-        elementProps = _objectWithoutProperties(props, _excluded$15);
+        elementProps = _objectWithoutProperties(props, _excluded$16);
 
     var navbar = React.useContext(NavbarContext);
-    var classes = getStyles(styles$V, ['.container', // Hint: Bootstrap's .container class is identical with .container-sm.
+    var classes = getStyles(styles$W, ['.container', // Hint: Bootstrap's .container class is identical with .container-sm.
     fluid !== true && ".container-".concat(fluid), // Navbar styles
     navbar && '.navbar .container', navbar && navbar.expand && ".navbar-expand".concat(navbar.expand === true ? '' : "-".concat(navbar.expand), " .container")]);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       style: [classes, style]
     }));
   });
   Container.displayName = 'Container';
-  Container.propTypes = propTypes$16;
+  Container.propTypes = propTypes$17;
 
-  var _excluded$14 = ["children", "type", "value", "onChange", "onPress", "label", "disabled", "valid", "invalid", "style", "inputStyle", "labelStyle"];
+  var _excluded$15 = ["children", "type", "value", "onChange", "onPress", "label", "disabled", "valid", "invalid", "style", "inputStyle", "labelStyle", "labelTextStyle"];
 
-  var _templateObject$V, _templateObject2$z, _templateObject3$k, _templateObject4$i, _templateObject5$g, _templateObject6$e, _templateObject7$a, _templateObject8$9, _templateObject9$6, _templateObject10$6, _templateObject11$4, _templateObject12$3, _templateObject13$3;
-  var propTypes$15 = {
+  var _templateObject$W, _templateObject2$G, _templateObject3$l, _templateObject4$j, _templateObject5$h, _templateObject6$e, _templateObject7$a, _templateObject8$9, _templateObject9$7, _templateObject10$7, _templateObject11$5, _templateObject12$4, _templateObject13$4;
+  var propTypes$16 = {
     children: PropTypes.node,
     type: PropTypes.oneOf(['checkbox', 'radio', 'switch']).isRequired,
     value: PropTypes.bool.isRequired,
@@ -39713,27 +39663,29 @@
     // eslint-disable-next-line react/forbid-prop-types
     inputStyle: PropTypes.any,
     // eslint-disable-next-line react/forbid-prop-types
-    labelStyle: PropTypes.any
+    labelStyle: PropTypes.any,
+    // eslint-disable-next-line react/forbid-prop-types
+    labelTextStyle: PropTypes.any
   };
-  var styles$U = StyleSheet.create(_objectSpread2({
-    '.form-check': css$1(_templateObject$V || (_templateObject$V = _taggedTemplateLiteral(["\n    // display: block;\n    flex-direction: row; // added for bootstrap-rn\n    min-height: $form-check-min-height;\n    padding-left: $form-check-padding-start;\n    margin-bottom: $form-check-margin-bottom;\n  "]))),
-    '.form-check-disabled': css$1(_templateObject2$z || (_templateObject2$z = _taggedTemplateLiteral(["\n    opacity: $form-check-label-disabled-opacity;\n  "]))),
-    '.form-check-input': css$1(_templateObject3$k || (_templateObject3$k = _taggedTemplateLiteral(["\n    // Use additional variables instead of brackets, because brackets not supported yet.\n    $lineHeight: $line-height-base * 1rem;\n    $rawMarginTop: $lineHeight - $form-check-input-width;\n\n    // float: left;\n    margin-left: $form-check-padding-start * -1;\n    margin-right: $form-check-padding-start - $form-check-input-width; // added for bootstrap-rn\n\n    width: $form-check-input-width;\n    height: $form-check-input-width;\n    margin-top: $rawMarginTop * 0.5; // line-height minus check height\n    // vertical-align: top;\n    background-color: $form-check-input-bg;\n    // background-repeat: no-repeat;\n    // background-position: center;\n    // background-size: contain;\n    border: $form-check-input-border;\n    @include platform(web) {\n      appearance: none;\n      user-select: none; // added for bootstrap-rn\n    }\n    // color-adjust: exact; // Keep themed appearance for print\n    // @include transition($form-check-transition);\n\n    &:active {\n      // filter: $form-check-input-active-filter;\n    }\n\n    &:focus {\n      border-color: $form-check-input-focus-border;\n      // outline: 0;\n      // box-shadow: $form-check-input-focus-box-shadow;\n    }\n  "]))),
-    '.form-check-input-checkbox': css$1(_templateObject4$i || (_templateObject4$i = _taggedTemplateLiteral(["\n    border-radius: $form-check-input-border-radius;\n  "]))),
-    '.form-check-input-radio': css$1(_templateObject5$g || (_templateObject5$g = _taggedTemplateLiteral(["\n    border-radius: $form-check-radio-border-radius;\n  "]))),
+  var styles$V = StyleSheet.create(_objectSpread2({
+    '.form-check': css$1(_templateObject$W || (_templateObject$W = _taggedTemplateLiteral(["\n    // display: block;\n    flex-direction: row; // added for bootstrap-rn\n    min-height: $form-check-min-height;\n    padding-left: $form-check-padding-start;\n    margin-bottom: $form-check-margin-bottom;\n  "]))),
+    '.form-check-disabled': css$1(_templateObject2$G || (_templateObject2$G = _taggedTemplateLiteral(["\n    opacity: $form-check-label-disabled-opacity;\n  "]))),
+    '.form-check-input': css$1(_templateObject3$l || (_templateObject3$l = _taggedTemplateLiteral(["\n    // Use additional variables instead of brackets, because brackets not supported yet.\n    $lineHeight: $line-height-base * 1rem;\n    $rawMarginTop: $lineHeight - $form-check-input-width;\n\n    // float: left;\n    margin-left: $form-check-padding-start * -1;\n    margin-right: $form-check-padding-start - $form-check-input-width; // added for bootstrap-rn\n\n    width: $form-check-input-width;\n    height: $form-check-input-width;\n    margin-top: $rawMarginTop * 0.5; // line-height minus check height\n    // vertical-align: top;\n    background-color: $form-check-input-bg;\n    // background-repeat: no-repeat;\n    // background-position: center;\n    // background-size: contain;\n    border: $form-check-input-border;\n    @include platform(web) {\n      appearance: none;\n      user-select: none; // added for bootstrap-rn\n    }\n    // color-adjust: exact; // Keep themed appearance for print\n    // @include transition($form-check-transition);\n\n    &:active {\n      // filter: $form-check-input-active-filter;\n    }\n\n    &:focus {\n      border-color: $form-check-input-focus-border;\n      // outline: 0;\n      // box-shadow: $form-check-input-focus-box-shadow;\n    }\n  "]))),
+    '.form-check-input-checkbox': css$1(_templateObject4$j || (_templateObject4$j = _taggedTemplateLiteral(["\n    border-radius: $form-check-input-border-radius;\n  "]))),
+    '.form-check-input-radio': css$1(_templateObject5$h || (_templateObject5$h = _taggedTemplateLiteral(["\n    border-radius: $form-check-radio-border-radius;\n  "]))),
     '.form-check-input-checked': css$1(_templateObject6$e || (_templateObject6$e = _taggedTemplateLiteral(["\n    background-color: $form-check-input-checked-bg-color;\n    border-color: $form-check-input-checked-border-color;\n  "]))),
     '.form-check-label': css$1(_templateObject7$a || (_templateObject7$a = _taggedTemplateLiteral(["\n    color: $form-check-label-color;\n    @include platform(web) {\n      cursor: $form-check-label-cursor;\n    }\n  "]))),
     '.form-switch': css$1(_templateObject8$9 || (_templateObject8$9 = _taggedTemplateLiteral(["\n    padding-left: $form-switch-padding-start;\n  "]))),
-    '.form-check-input-switch': css$1(_templateObject9$6 || (_templateObject9$6 = _taggedTemplateLiteral(["\n    width: $form-switch-width;\n    margin-left: $form-switch-padding-start * -1;\n    margin-right: $form-switch-padding-start - $form-switch-width; // added for bootstrap-rn\n    border-radius: $form-switch-border-radius;\n    // @include transition($form-switch-transition);\n    align-items: flex-start; // added for bootstrap-rn\n    justify-content: center; // added for bootstrap-rn\n  "]))),
-    '.form-check-input-switch-checked': css$1(_templateObject10$6 || (_templateObject10$6 = _taggedTemplateLiteral(["\n    align-items: flex-end; // added for bootstrap-rn\n    justify-content: center; // added for bootstrap-rn\n  "])))
+    '.form-check-input-switch': css$1(_templateObject9$7 || (_templateObject9$7 = _taggedTemplateLiteral(["\n    width: $form-switch-width;\n    margin-left: $form-switch-padding-start * -1;\n    margin-right: $form-switch-padding-start - $form-switch-width; // added for bootstrap-rn\n    border-radius: $form-switch-border-radius;\n    // @include transition($form-switch-transition);\n    align-items: flex-start; // added for bootstrap-rn\n    justify-content: center; // added for bootstrap-rn\n  "]))),
+    '.form-check-input-switch-checked': css$1(_templateObject10$7 || (_templateObject10$7 = _taggedTemplateLiteral(["\n    align-items: flex-end; // added for bootstrap-rn\n    justify-content: center; // added for bootstrap-rn\n  "])))
   }, each(FORM_VALIDATION_STATES, function (state, data) {
     var _ref;
 
-    return _ref = {}, _defineProperty(_ref, ".form-check-input.is-".concat(state), css$1(_templateObject11$4 || (_templateObject11$4 = _taggedTemplateLiteral(["\n      border: ", ";\n\n      &:focus {\n        // box-shadow: $focus-box-shadow;\n      }\n    "])), function (t) {
+    return _ref = {}, _defineProperty(_ref, ".form-check-input.is-".concat(state), css$1(_templateObject11$5 || (_templateObject11$5 = _taggedTemplateLiteral(["\n      border: ", ";\n\n      &:focus {\n        // box-shadow: $focus-box-shadow;\n      }\n    "])), function (t) {
       return data(t).color;
-    })), _defineProperty(_ref, ".form-check-input-checked.is-".concat(state), css$1(_templateObject12$3 || (_templateObject12$3 = _taggedTemplateLiteral(["\n      background-color: ", ";\n    "])), function (t) {
+    })), _defineProperty(_ref, ".form-check-input-checked.is-".concat(state), css$1(_templateObject12$4 || (_templateObject12$4 = _taggedTemplateLiteral(["\n      background-color: ", ";\n    "])), function (t) {
       return data(t).color;
-    })), _defineProperty(_ref, ".form-check-label.is-".concat(state), css$1(_templateObject13$3 || (_templateObject13$3 = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), function (t) {
+    })), _defineProperty(_ref, ".form-check-label.is-".concat(state), css$1(_templateObject13$4 || (_templateObject13$4 = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), function (t) {
       return data(t).color;
     })), _ref;
   })));
@@ -39775,18 +39727,19 @@
         style = modifierProps.style,
         inputStyle = modifierProps.inputStyle,
         labelStyle = modifierProps.labelStyle,
-        elementProps = _objectWithoutProperties(modifierProps, _excluded$14);
+        labelTextStyle = modifierProps.labelTextStyle,
+        elementProps = _objectWithoutProperties(modifierProps, _excluded$15);
 
     if (!children && !label) {
       // eslint-disable-next-line no-console
       console.warn('You need to provide either children or a label for accessibility.');
     }
 
-    var classes = getStyles(styles$U, ['.form-check', type === 'switch' && '.form-switch', disabled && '.form-check-disabled']);
-    var inputClasses = getStyles(styles$U, ['.form-check-input', type === 'checkbox' && '.form-check-input-checkbox', type === 'radio' && '.form-check-input-radio', type === 'switch' && '.form-check-input-switch', value && '.form-check-input-checked', type === 'switch' && value && '.form-check-input-switch-checked', valid && '.form-check-input.is-valid', valid && value && '.form-check-input-checked.is-valid', invalid && '.form-check-input.is-invalid', invalid && value && '.form-check-input-checked.is-invalid']);
-    var labelClasses = getStyles(styles$U, ['.form-check-label', valid && '.form-check-label.is-valid', invalid && '.form-check-label.is-invalid']); // TODO &:focus, &:active
+    var classes = getStyles(styles$V, ['.form-check', type === 'switch' && '.form-switch', disabled && '.form-check-disabled']);
+    var inputClasses = getStyles(styles$V, ['.form-check-input', type === 'checkbox' && '.form-check-input-checkbox', type === 'radio' && '.form-check-input-radio', type === 'switch' && '.form-check-input-switch', value && '.form-check-input-checked', type === 'switch' && value && '.form-check-input-switch-checked', valid && '.form-check-input.is-valid', valid && value && '.form-check-input-checked.is-valid', invalid && '.form-check-input.is-invalid', invalid && value && '.form-check-input-checked.is-invalid']);
+    var labelTextClasses = getStyles(styles$V, ['.form-check-label', valid && '.form-check-label.is-valid', invalid && '.form-check-label.is-invalid']); // TODO &:focus, &:active
 
-    return /*#__PURE__*/React__default["default"].createElement(Pressable, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(Pressable, _extends$1({}, elementProps, {
       ref: modifierRef,
       accessibilityRole: type,
       accessibilityChecked: value,
@@ -39798,30 +39751,31 @@
       style: [classes, style]
     }), /*#__PURE__*/React__default["default"].createElement(View, {
       style: [inputClasses, inputStyle]
-    }, getSvg(type, value)), children && /*#__PURE__*/React__default["default"].createElement(Text, {
-      style: [labelClasses, labelStyle]
+    }, getSvg(type, value)), children && /*#__PURE__*/React__default["default"].createElement(View, {
+      style: labelStyle,
+      textStyle: [labelTextClasses, labelTextStyle]
     }, children));
   });
   CheckInput.displayName = 'CheckInput';
-  CheckInput.propTypes = propTypes$15;
+  CheckInput.propTypes = propTypes$16;
 
   var Checkbox = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
-    var elementProps = _extends({}, props);
+    var elementProps = _extends$1({}, props);
 
-    return /*#__PURE__*/React__default["default"].createElement(CheckInput, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(CheckInput, _extends$1({}, elementProps, {
       ref: ref,
       type: "checkbox"
     }));
   });
   Checkbox.displayName = 'Checkbox';
 
-  var _excluded$13 = ["children", "size", "sizeSm", "sizeMd", "sizeLg", "sizeXl", "style"];
+  var _excluded$14 = ["children", "size", "sizeSm", "sizeMd", "sizeLg", "sizeXl", "style"];
 
-  var _templateObject$U, _templateObject2$y, _templateObject3$j, _templateObject4$h, _templateObject5$f;
+  var _templateObject$V, _templateObject2$F, _templateObject3$k, _templateObject4$i, _templateObject5$g;
   var sizes = makeArray(GRID_COLUMNS).map(function (v) {
     return v + 1;
   });
-  var propTypes$14 = {
+  var propTypes$15 = {
     children: PropTypes.node.isRequired,
     size: PropTypes.oneOf(['auto'].concat(_toConsumableArray(sizes))),
     sizeSm: PropTypes.oneOf(['auto'].concat(_toConsumableArray(sizes))),
@@ -39831,15 +39785,15 @@
     // eslint-disable-next-line react/forbid-prop-types
     style: PropTypes.any
   };
-  var styles$T = StyleSheet.create(_objectSpread2({
-    '*': css$1(_templateObject$U || (_templateObject$U = _taggedTemplateLiteral(["\n    // Add box sizing if only the grid is loaded\n    /* box-sizing: if(\n      variable-exists(include-column-box-sizing) and $include-column-box-sizing,\n      border-box,\n      null\n    ); */\n    // Prevent columns from becoming too narrow when at smaller grid tiers by\n    // always setting \"width: 100%;\". This works because we set the width\n    // later on to override this initial width.\n    flex-shrink: 0;\n    width: 100%;\n    @include platform(web) {\n      max-width: 100%; // Prevent \".col-auto\", \".col\" (& responsive variants) from breaking out the grid\n    }\n    padding-right: $grid-gutter-width * 0.5;\n    padding-left: $grid-gutter-width * 0.5;\n    margin-top: 0;\n  "])))
+  var styles$U = StyleSheet.create(_objectSpread2({
+    '*': css$1(_templateObject$V || (_templateObject$V = _taggedTemplateLiteral(["\n    // Add box sizing if only the grid is loaded\n    /* box-sizing: if(\n      variable-exists(include-column-box-sizing) and $include-column-box-sizing,\n      border-box,\n      null\n    ); */\n    // Prevent columns from becoming too narrow when at smaller grid tiers by\n    // always setting \"width: 100%;\". This works because we set the width\n    // later on to override this initial width.\n    flex-shrink: 0;\n    width: 100%;\n    @include platform(web) {\n      max-width: 100%; // Prevent \".col-auto\", \".col\" (& responsive variants) from breaking out the grid\n    }\n    padding-right: $grid-gutter-width * 0.5;\n    padding-left: $grid-gutter-width * 0.5;\n    margin-top: 0;\n  "])))
   }, each(GRID_BREAKPOINTS, function (breakpoint) {
     var _objectSpread2$1;
 
-    return _objectSpread2((_objectSpread2$1 = {}, _defineProperty(_objectSpread2$1, ".col".concat(infix(breakpoint)), css$1(_templateObject2$y || (_templateObject2$y = _taggedTemplateLiteral(["\n      @include media-breakpoint-up(", ") {\n        flex: 1 0 0%; // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4\n      }\n    "])), breakpoint)), _defineProperty(_objectSpread2$1, ".col".concat(infix(breakpoint), "-auto"), css$1(_templateObject3$j || (_templateObject3$j = _taggedTemplateLiteral(["\n      @include media-breakpoint-up(", ") {\n        flex: 0 0 auto;\n        width: auto;\n      }\n    "])), breakpoint)), _objectSpread2$1), normalize$1(makeArray(GRID_COLUMNS - 1, function (i) {
+    return _objectSpread2((_objectSpread2$1 = {}, _defineProperty(_objectSpread2$1, ".col".concat(infix(breakpoint)), css$1(_templateObject2$F || (_templateObject2$F = _taggedTemplateLiteral(["\n      @include media-breakpoint-up(", ") {\n        flex: 1 0 0%; // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4\n      }\n    "])), breakpoint)), _defineProperty(_objectSpread2$1, ".col".concat(infix(breakpoint), "-auto"), css$1(_templateObject3$k || (_templateObject3$k = _taggedTemplateLiteral(["\n      @include media-breakpoint-up(", ") {\n        flex: 0 0 auto;\n        width: auto;\n      }\n    "])), breakpoint)), _objectSpread2$1), normalize$1(makeArray(GRID_COLUMNS - 1, function (i) {
       var _ref;
 
-      return _ref = {}, _defineProperty(_ref, ".col".concat(infix(breakpoint), "-").concat(i + 1), css$1(_templateObject4$h || (_templateObject4$h = _taggedTemplateLiteral(["\n          @include media-breakpoint-up(", ") {\n            flex: 0 0 auto;\n            width: ", "%;\n          }\n        "])), breakpoint, (i + 1) / GRID_COLUMNS * 100)), _defineProperty(_ref, ".offset".concat(infix(breakpoint), "-").concat(i), css$1(_templateObject5$f || (_templateObject5$f = _taggedTemplateLiteral(["\n          @include media-breakpoint-up(", ") {\n            margin-left: ", "%;\n          }\n        "])), breakpoint, i / GRID_COLUMNS * 100)), _ref;
+      return _ref = {}, _defineProperty(_ref, ".col".concat(infix(breakpoint), "-").concat(i + 1), css$1(_templateObject4$i || (_templateObject4$i = _taggedTemplateLiteral(["\n          @include media-breakpoint-up(", ") {\n            flex: 0 0 auto;\n            width: ", "%;\n          }\n        "])), breakpoint, (i + 1) / GRID_COLUMNS * 100)), _defineProperty(_ref, ".offset".concat(infix(breakpoint), "-").concat(i), css$1(_templateObject5$g || (_templateObject5$g = _taggedTemplateLiteral(["\n          @include media-breakpoint-up(", ") {\n            margin-left: ", "%;\n          }\n        "])), breakpoint, i / GRID_COLUMNS * 100)), _ref;
     })));
   })));
   var Col = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
@@ -39850,16 +39804,90 @@
         sizeLg = props.sizeLg,
         sizeXl = props.sizeXl,
         style = props.style,
-        elementProps = _objectWithoutProperties(props, _excluded$13);
+        elementProps = _objectWithoutProperties(props, _excluded$14);
 
-    var classes = getStyles(styles$T, ['*', ".col-".concat(size.toString()), sizeSm && ".col-sm-".concat(sizeSm.toString()), sizeMd && ".col-md-".concat(sizeMd.toString()), sizeLg && ".col-lg-".concat(sizeLg.toString()), sizeXl && ".col-xl-".concat(sizeXl.toString())]);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    var classes = getStyles(styles$U, ['*', ".col-".concat(size.toString()), sizeSm && ".col-sm-".concat(sizeSm.toString()), sizeMd && ".col-md-".concat(sizeMd.toString()), sizeLg && ".col-lg-".concat(sizeLg.toString()), sizeXl && ".col-xl-".concat(sizeXl.toString())]);
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       style: [classes, style]
     }), children);
   });
   Col.displayName = 'Col';
-  Col.propTypes = propTypes$14;
+  Col.propTypes = propTypes$15;
+
+  var _excluded$13 = ["color", "bold", "italic", "mark", "small", "style", "styleName"];
+
+  var _templateObject$U, _templateObject2$E, _templateObject3$j, _templateObject4$h, _templateObject5$f;
+  var propTypes$14 = {
+    color: PropTypes.oneOf([].concat(_toConsumableArray(Object.keys(THEME_COLORS)), ['muted', 'black-50', 'white-50'])),
+    small: PropTypes.bool,
+    mark: PropTypes.bool,
+    bold: PropTypes.bool,
+    italic: PropTypes.bool,
+    // eslint-disable-next-line react/forbid-prop-types
+    style: PropTypes.any,
+    // eslint-disable-next-line react/forbid-prop-types
+    styleName: PropTypes.any
+  };
+  var styles$T = StyleSheet.create({
+    text: css$1(_templateObject$U || (_templateObject$U = _taggedTemplateLiteral(["\n    font-family: $font-family-base;\n    font-size: $font-size-base;\n    font-weight: $font-weight-base;\n    line-height: $font-size-base * $line-height-base;\n  "]))),
+    strong: css$1(_templateObject2$E || (_templateObject2$E = _taggedTemplateLiteral(["\n    font-weight: $font-weight-bolder;\n  "]))),
+    italic: css$1(_templateObject3$j || (_templateObject3$j = _taggedTemplateLiteral(["\n    font-style: italic;\n  "]))),
+    small: css$1(_templateObject4$h || (_templateObject4$h = _taggedTemplateLiteral(["\n    font-size: $small-font-size;\n    line-height: $small-font-size * $line-height-base;\n  "]))),
+    mark: css$1(_templateObject5$f || (_templateObject5$f = _taggedTemplateLiteral(["\n    padding: $mark-padding;\n    background-color: $mark-bg;\n  "])))
+  });
+
+  var getStyleName = function getStyleName(styleName, color) {
+    if (!color) {
+      return styleName;
+    }
+
+    return styleName ? "text-".concat(color, " ").concat(styleName) : "text-".concat(color);
+  };
+
+  var Text = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
+    var color = props.color,
+        _props$bold = props.bold,
+        bold = _props$bold === void 0 ? false : _props$bold,
+        _props$italic = props.italic,
+        italic = _props$italic === void 0 ? false : _props$italic,
+        _props$mark = props.mark,
+        mark = _props$mark === void 0 ? false : _props$mark,
+        _props$small = props.small,
+        small = _props$small === void 0 ? false : _props$small,
+        style = props.style,
+        styleName = props.styleName,
+        elementProps = _objectWithoutProperties(props, _excluded$13);
+
+    var media = useMedia();
+    var context = React.useContext(TextStyleContext);
+    var classes = getStyles(styles$T, [bold && 'strong', italic && 'italic', small && 'small', mark && 'mark']);
+    var resolveStyle = useStyle([// eslint-disable-next-line react/destructuring-assignment
+    (!context || !context.hasTextAncestor) && styles$T.text, // eslint-disable-next-line react/destructuring-assignment
+    context && context.style, classes, style], getStyleName(styleName, color));
+    var element = /*#__PURE__*/React__default["default"].createElement(_reactNative.Text, _extends$1({}, elementProps, {
+      ref: ref,
+      style: resolveStyle({
+        media: media
+      })
+    })); // eslint-disable-next-line react/destructuring-assignment
+
+    if (context && context.hasTextAncestor && !context.style) {
+      return element;
+    } // If we are not in an ancestor context yet, we need to set hasTextAncestor
+    // to true for nested text components. Furthermore we need to reset the
+    // context style, because we only need to apply the style once.
+
+
+    return /*#__PURE__*/React__default["default"].createElement(TextStyleContext.Provider, {
+      value: {
+        style: null,
+        hasTextAncestor: true
+      }
+    }, element);
+  });
+  Text.displayName = 'Text';
+  Text.propTypes = propTypes$14;
 
   var _excluded$12 = ["children", "style"];
 
@@ -39880,7 +39908,7 @@
     var classes = getStyles(styles$S, ['code']); // Accessiblity role code is only supported on web.
 
     var role = _reactNative.Platform.OS === 'web' ? 'code' : null;
-    return /*#__PURE__*/React__default["default"].createElement(Text, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(Text, _extends$1({}, elementProps, {
       ref: ref,
       accessibilityRole: role,
       style: [classes, style]
@@ -39965,6 +39993,11 @@
       if (overlay.arrowProps.style.left) {
         overlay.arrowProps.style.left -= arrowOffset;
       }
+    } // Adjust bottom value by status bar height on Android
+
+
+    if (_reactNative.Platform.OS === 'android' && overlay.overlayProps.style.bottom !== undefined && _reactNative.StatusBar.currentHeight) {
+      overlay.overlayProps.style.bottom -= _reactNative.StatusBar.currentHeight;
     }
 
     return children(overlay, overlayRef);
@@ -40079,7 +40112,7 @@
 
   var _excluded$10 = ["children", "start", "end", "style", "textStyle"];
 
-  var _templateObject$R, _templateObject2$x, _templateObject3$i, _templateObject4$g, _templateObject5$e, _templateObject6$d, _templateObject7$9, _templateObject8$8, _templateObject9$5, _templateObject10$5;
+  var _templateObject$R, _templateObject2$D, _templateObject3$i, _templateObject4$g, _templateObject5$e, _templateObject6$d, _templateObject7$9, _templateObject8$8, _templateObject9$6, _templateObject10$6;
   var ALIGNMENT_BREAKPOINTS = [true, 'sm', 'md', 'lg', 'xl', 'xxl'];
   var propTypes$$ = {
     children: PropTypes.node.isRequired,
@@ -40092,7 +40125,7 @@
   };
   var styles$Q = StyleSheet.create(_objectSpread2(_objectSpread2(_objectSpread2({
     '.dropdown-menu': css$1(_templateObject$R || (_templateObject$R = _taggedTemplateLiteral(["\n    position: absolute;\n    z-index: $zindex-dropdown;\n    // display: none; // none by default, but block on \"open\" of the menu\n    min-width: $dropdown-min-width;\n    padding: $dropdown-padding-y $dropdown-padding-x;\n    margin: 0; // Override default margin of ul\n    // list-style: none;\n    background-color: $dropdown-bg;\n    // background-clip: padding-box;\n    border: $dropdown-border-width solid $dropdown-border-color;\n    border-radius: $dropdown-border-radius;\n    // @include box-shadow($dropdown-box-shadow);\n  "]))),
-    '.dropdown-menu[data-bs-popper]': css$1(_templateObject2$x || (_templateObject2$x = _taggedTemplateLiteral(["\n    top: 100%;\n    left: 0;\n    margin-top: $dropdown-spacer;\n  "])))
+    '.dropdown-menu[data-bs-popper]': css$1(_templateObject2$D || (_templateObject2$D = _taggedTemplateLiteral(["\n    top: 100%;\n    left: 0;\n    margin-top: $dropdown-spacer;\n  "])))
   }, each(GRID_BREAKPOINTS, function (breakpoint) {
     var _ref;
 
@@ -40103,9 +40136,9 @@
     '.dropstart .dropdown-menu[data-bs-popper]': css$1(_templateObject7$9 || (_templateObject7$9 = _taggedTemplateLiteral(["\n    top: 0;\n    right: 100%;\n    left: auto;\n    margin-top: 0;\n    margin-right: $dropdown-spacer;\n  "]))),
     '.navbar-nav .dropdown-menu': css$1(_templateObject8$8 || (_templateObject8$8 = _taggedTemplateLiteral(["\n    position: relative; // static;\n  "])))
   }, each(GRID_BREAKPOINTS, function (breakpoint) {
-    return _defineProperty({}, ".navbar-expand".concat(infix(next(breakpoint)), " .navbar-nav .dropdown-menu"), css$1(_templateObject9$5 || (_templateObject9$5 = _taggedTemplateLiteral(["\n      @include media-breakpoint-up(", ") {\n        position: absolute;\n      }\n    "])), next(breakpoint)));
+    return _defineProperty({}, ".navbar-expand".concat(infix(next(breakpoint)), " .navbar-nav .dropdown-menu"), css$1(_templateObject9$6 || (_templateObject9$6 = _taggedTemplateLiteral(["\n      @include media-breakpoint-up(", ") {\n        position: absolute;\n      }\n    "])), next(breakpoint)));
   })), {}, {
-    '.dropdown-menu-text': css$1(_templateObject10$5 || (_templateObject10$5 = _taggedTemplateLiteral(["\n    font-size: $dropdown-font-size;\n    color: $dropdown-color;\n    text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)\n  "])))
+    '.dropdown-menu-text': css$1(_templateObject10$6 || (_templateObject10$6 = _taggedTemplateLiteral(["\n    font-size: $dropdown-font-size;\n    color: $dropdown-color;\n    text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)\n  "])))
   }));
 
   var getAlignment = function getAlignment(media, start, end) {
@@ -40175,7 +40208,7 @@
           setVisible(false);
         },
         autoClose: autoClose
-      }), /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+      }), /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
         ref: concatRefs(dialogRef, ref),
         accessibilityLabelledBy: identifier,
         style: [classes, style],
@@ -40196,7 +40229,7 @@
           setVisible(false);
         },
         autoClose: autoClose
-      }), /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+      }), /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
         ref: concatRefs(overlayRef, ref),
         accessibilityLabelledBy: identifier,
         style: [classes, overlay.overlayProps.style, {
@@ -40214,7 +40247,7 @@
 
   var _excluded$$ = ["children", "size", "style"];
 
-  var _templateObject$Q, _templateObject2$w;
+  var _templateObject$Q, _templateObject2$C;
   var propTypes$_ = {
     children: PropTypes.node.isRequired,
     size: PropTypes.oneOf(Object.keys(FONT_SIZES).map(function (k) {
@@ -40226,7 +40259,7 @@
   var styles$P = StyleSheet.create(_objectSpread2({
     heading: css$1(_templateObject$Q || (_templateObject$Q = _taggedTemplateLiteral(["\n    margin-top: 0; // 1\n    margin-bottom: $headings-margin-bottom;\n    font-family: $headings-font-family;\n    font-style: $headings-font-style;\n    font-weight: $headings-font-weight;\n    color: $headings-color;\n  "])))
   }, each(FONT_SIZES, function (size, value) {
-    return _defineProperty({}, ".h".concat(size), css$1(_templateObject2$w || (_templateObject2$w = _taggedTemplateLiteral(["\n      font-size: ", ";\n      line-height: ", " * $headings-line-height;\n    "])), value, value));
+    return _defineProperty({}, ".h".concat(size), css$1(_templateObject2$C || (_templateObject2$C = _taggedTemplateLiteral(["\n      font-size: ", ";\n      line-height: ", " * $headings-line-height;\n    "])), value, value));
   })));
   var Heading$1 = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
     var children = props.children,
@@ -40235,7 +40268,7 @@
         elementProps = _objectWithoutProperties(props, _excluded$$);
 
     var classes = getStyles(styles$P, ['heading', ".h".concat(size)]);
-    return /*#__PURE__*/React__default["default"].createElement(Text, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(Text, _extends$1({}, elementProps, {
       ref: ref,
       accessibilityRole: "header",
       accessibilityLevel: size,
@@ -40245,35 +40278,43 @@
   Heading$1.displayName = 'Heading';
   Heading$1.propTypes = propTypes$_;
 
-  var _excluded$_ = ["children", "style"];
+  var _excluded$_ = ["children", "style", "textStyle"];
 
-  var _templateObject$P;
+  var _templateObject$P, _templateObject2$B;
   var propTypes$Z = {
     children: PropTypes.node.isRequired,
     // eslint-disable-next-line react/forbid-prop-types
-    style: PropTypes.any
+    style: PropTypes.any,
+    // eslint-disable-next-line react/forbid-prop-types
+    textStyle: PropTypes.any
   };
   var styles$O = StyleSheet.create({
-    '.dropdown-header': css$1(_templateObject$P || (_templateObject$P = _taggedTemplateLiteral(["\n    // display: block;\n    padding: $dropdown-header-padding;\n    margin-bottom: 0; // for use with heading elements\n    font-size: $font-size-sm;\n    color: $dropdown-header-color;\n    // white-space: nowrap; // as with > li > a\n  "])))
+    '.dropdown-header': css$1(_templateObject$P || (_templateObject$P = _taggedTemplateLiteral(["\n    // display: block;\n    padding: $dropdown-header-padding;\n  "]))),
+    '.dropdown-header-text': css$1(_templateObject2$B || (_templateObject2$B = _taggedTemplateLiteral(["\n    margin-bottom: 0; // for use with heading elements\n    font-size: $font-size-sm;\n    color: $dropdown-header-color;\n    // white-space: nowrap; // as with > li > a\n  "])))
   });
   var DropdownHeader = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
     var children = props.children,
         style = props.style,
+        textStyle = props.textStyle,
         elementProps = _objectWithoutProperties(props, _excluded$_);
 
     var classes = getStyles(styles$O, ['.dropdown-header']);
-    return /*#__PURE__*/React__default["default"].createElement(Heading$1, _extends({}, elementProps, {
+    var textClasses = getStyles(styles$O, ['.dropdown-header-text']); // composite component
+
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       size: 6,
       style: [classes, style]
-    }), children);
+    }), /*#__PURE__*/React__default["default"].createElement(Heading$1, {
+      style: [textClasses, textStyle]
+    }, children));
   });
   DropdownHeader.displayName = 'DropdownHeader';
   DropdownHeader.propTypes = propTypes$Z;
 
   var _excluded$Z = ["children", "onPress", "active", "disabled", "style", "textStyle"];
 
-  var _templateObject$O, _templateObject2$v, _templateObject3$h, _templateObject4$f, _templateObject5$d, _templateObject6$c;
+  var _templateObject$O, _templateObject2$A, _templateObject3$h, _templateObject4$f, _templateObject5$d, _templateObject6$c;
   var propTypes$Y = {
     children: PropTypes.node.isRequired,
     onPress: PropTypes.func,
@@ -40286,7 +40327,7 @@
   };
   var styles$N = StyleSheet.create({
     '.dropdown-item': css$1(_templateObject$O || (_templateObject$O = _taggedTemplateLiteral(["\n    width: 100%;\n    padding: $dropdown-item-padding-y $dropdown-item-padding-x;\n    // clear: both;\n    background-color: transparent;\n    border: 0;\n\n    &:hover {\n      // @include gradient-bg($dropdown-link-hover-bg);\n      background-color: $dropdown-link-hover-bg;\n    }\n    &:focus {\n      // @include gradient-bg($dropdown-link-hover-bg);\n      background-color: $dropdown-link-hover-bg;\n    }\n  "]))),
-    '.dropdown-item-text': css$1(_templateObject2$v || (_templateObject2$v = _taggedTemplateLiteral(["\n    font-weight: $font-weight-normal;\n    color: $dropdown-link-color;\n    // text-align: inherit;\n    text-decoration: none; // if($link-decoration == none, null, none);\n    // white-space: nowrap;\n\n    &:hover {\n      color: $dropdown-link-hover-color;\n      text-decoration: none; // if($link-hover-decoration == underline, none, null);\n    }\n    &:focus {\n      color: $dropdown-link-hover-color;\n      text-decoration: none; // if($link-hover-decoration == underline, none, null);\n    }\n  "]))),
+    '.dropdown-item-text': css$1(_templateObject2$A || (_templateObject2$A = _taggedTemplateLiteral(["\n    font-weight: $font-weight-normal;\n    color: $dropdown-link-color;\n    // text-align: inherit;\n    text-decoration: none; // if($link-decoration == none, null, none);\n    // white-space: nowrap;\n\n    &:hover {\n      color: $dropdown-link-hover-color;\n      text-decoration: none; // if($link-hover-decoration == underline, none, null);\n    }\n    &:focus {\n      color: $dropdown-link-hover-color;\n      text-decoration: none; // if($link-hover-decoration == underline, none, null);\n    }\n  "]))),
     '.dropdown-item-active': css$1(_templateObject3$h || (_templateObject3$h = _taggedTemplateLiteral(["\n    // @include gradient-bg($dropdown-link-active-bg);\n    background-color: $dropdown-link-active-bg;\n\n    &:hover {\n      background-color: $dropdown-link-active-bg;\n    }\n    &:focus {\n      background-color: $dropdown-link-active-bg;\n    }\n  "]))),
     '.dropdown-item-active-text': css$1(_templateObject4$f || (_templateObject4$f = _taggedTemplateLiteral(["\n    color: $dropdown-link-active-color;\n    text-decoration: none;\n\n    &:hover {\n      color: $dropdown-link-active-color;\n    }\n    &:focus {\n      color: $dropdown-link-active-color;\n    }\n  "]))),
     '.dropdown-item-disabled': css$1(_templateObject5$d || (_templateObject5$d = _taggedTemplateLiteral(["\n    // pointer-events: none;\n    background-color: transparent;\n    // Remove CSS gradients if they're enabled\n    // background-image: if($enable-gradients, none, null);\n\n    &:hover {\n      background-color: transparent;\n    }\n    &:focus {\n      background-color: transparent;\n    }\n  "]))),
@@ -40307,7 +40348,7 @@
     var dropdown = useForcedContext(DropdownContext);
     var classes = getStyles(styles$N, ['.dropdown-item', active && '.dropdown-item-active', disabled && '.dropdown-item-disabled']);
     var textClasses = getStyles(styles$N, ['.dropdown-item-text', active && '.dropdown-item-active-text', disabled && '.dropdown-item-disabled-text']);
-    return /*#__PURE__*/React__default["default"].createElement(Pressable, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(Pressable, _extends$1({}, elementProps, {
       onPress: concatFns(function () {
         dropdown.setVisible(false);
       }, handlePress),
@@ -40320,30 +40361,38 @@
   DropdownItem.displayName = 'DropdownItem';
   DropdownItem.propTypes = propTypes$Y;
 
-  var _excluded$Y = ["children", "style"];
+  var _excluded$Y = ["children", "style", "textStyle"];
 
-  var _templateObject$N;
+  var _templateObject$N, _templateObject2$z;
   var propTypes$X = {
     children: PropTypes.node.isRequired,
     // eslint-disable-next-line react/forbid-prop-types
-    style: PropTypes.any
+    style: PropTypes.any,
+    // eslint-disable-next-line react/forbid-prop-types
+    textStyle: PropTypes.any
   };
   var styles$M = StyleSheet.create({
-    '.dropdown-item-text': css$1(_templateObject$N || (_templateObject$N = _taggedTemplateLiteral(["\n    // display: block;\n    padding: $dropdown-item-padding-y $dropdown-item-padding-x;\n    color: $dropdown-link-color;\n  "])))
+    '.dropdown-item-text': css$1(_templateObject$N || (_templateObject$N = _taggedTemplateLiteral(["\n    // display: block;\n    padding: $dropdown-item-padding-y $dropdown-item-padding-x;\n  "]))),
+    '.dropdown-item-text-text': css$1(_templateObject2$z || (_templateObject2$z = _taggedTemplateLiteral(["\n    color: $dropdown-link-color;\n  "])))
   });
-  var DropdownTextItem = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
+  var DropdownItemText = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
     var children = props.children,
         style = props.style,
+        textStyle = props.textStyle,
         elementProps = _objectWithoutProperties(props, _excluded$Y);
 
     var classes = getStyles(styles$M, ['.dropdown-item-text']);
-    return /*#__PURE__*/React__default["default"].createElement(Text, _extends({}, elementProps, {
+    var textClasses = getStyles(styles$M, ['.dropdown-item-text-text']); // composite component
+
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       style: [classes, style]
-    }), children);
+    }), /*#__PURE__*/React__default["default"].createElement(Text, {
+      style: [textClasses, textStyle]
+    }, children));
   });
-  DropdownTextItem.displayName = 'DropdownTextItem';
-  DropdownTextItem.propTypes = propTypes$X;
+  DropdownItemText.displayName = 'DropdownItemText';
+  DropdownItemText.propTypes = propTypes$X;
 
   var _excluded$X = ["style"];
 
@@ -40360,7 +40409,7 @@
         elementProps = _objectWithoutProperties(props, _excluded$X);
 
     var classes = getStyles(styles$L, ['.dropdown-divider']);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       style: [classes, style]
     }));
@@ -40400,7 +40449,7 @@
     return _objectSpread2(_objectSpread2({}, restProps), {}, {
       onPress: function onPress(event) {
         if (handlePress) handlePress(event);
-        context.setExpanded(false);
+        context.setVisible(false);
       }
     });
   }
@@ -40440,7 +40489,7 @@
 
     var dropdown = useDropdown(defaultVisible, visible, onToggle, direction, display, autoClose);
     var classes = getStyles(styles$K, ['.dropdown']);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       style: [classes, style]
     }), /*#__PURE__*/React__default["default"].createElement(DropdownContext.Provider, {
@@ -40454,7 +40503,7 @@
   Dropdown.Menu = DropdownMenu;
   Dropdown.Header = DropdownHeader;
   Dropdown.Item = DropdownItem;
-  Dropdown.TextItem = DropdownTextItem;
+  Dropdown.ItemText = DropdownItemText;
   Dropdown.Divider = DropdownDivider;
   Dropdown.useDismiss = useDismissDropdown;
   Dropdown.useToggle = useToggleDropdown;
@@ -40480,7 +40529,7 @@
         elementProps = _objectWithoutProperties(props, _excluded$U);
 
     var classes = getStyles(styles$J, [".display-".concat(size)]);
-    return /*#__PURE__*/React__default["default"].createElement(Heading$1, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(Heading$1, _extends$1({}, elementProps, {
       ref: ref,
       size: 1,
       style: [classes, style]
@@ -40510,7 +40559,7 @@
         elementProps = _objectWithoutProperties(props, _excluded$T);
 
     var classes = getStyles(styles$I, [".".concat(type, "-feedback")]);
-    return /*#__PURE__*/React__default["default"].createElement(Text, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(Text, _extends$1({}, elementProps, {
       ref: ref,
       style: [classes, style]
     }), children);
@@ -40518,27 +40567,35 @@
   Feedback.displayName = 'Feedback';
   Feedback.propTypes = propTypes$T;
 
-  var _excluded$S = ["children", "style"];
+  var _excluded$S = ["children", "style", "textStyle"];
 
-  var _templateObject$I;
+  var _templateObject$I, _templateObject2$y;
   var propTypes$S = {
     children: PropTypes.node.isRequired,
     // eslint-disable-next-line react/forbid-prop-types
-    style: PropTypes.any
+    style: PropTypes.any,
+    // eslint-disable-next-line react/forbid-prop-types
+    textStyle: PropTypes.any
   };
   var styles$H = StyleSheet.create({
-    '.form-text': css$1(_templateObject$I || (_templateObject$I = _taggedTemplateLiteral(["\n    margin-top: $form-text-margin-top;\n    font-size: $form-text-font-size;\n    font-style: $form-text-font-style;\n    font-weight: $form-text-font-weight;\n    color: $form-text-color;\n  "])))
+    '.form-text': css$1(_templateObject$I || (_templateObject$I = _taggedTemplateLiteral(["\n    margin-top: $form-text-margin-top;\n  "]))),
+    '.form-text-text': css$1(_templateObject2$y || (_templateObject2$y = _taggedTemplateLiteral(["\n    font-size: $form-text-font-size;\n    font-style: $form-text-font-style;\n    font-weight: $form-text-font-weight;\n    color: $form-text-color;\n  "])))
   });
   var FormText = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
     var children = props.children,
         style = props.style,
+        textStyle = props.textStyle,
         elementProps = _objectWithoutProperties(props, _excluded$S);
 
     var classes = getStyles(styles$H, ['.form-text']);
-    return /*#__PURE__*/React__default["default"].createElement(Text, _extends({}, elementProps, {
+    var textClasses = getStyles(styles$H, ['.form-text-text']); // composite component
+
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       style: [classes, style]
-    }), children);
+    }), /*#__PURE__*/React__default["default"].createElement(Text, {
+      style: [textClasses, textStyle]
+    }, children));
   });
   FormText.displayName = 'FormText';
   FormText.propTypes = propTypes$S;
@@ -40568,7 +40625,7 @@
 
     var media = useMedia();
     var resolveStyle = useStyle(style, styleName);
-    return /*#__PURE__*/React__default["default"].createElement(_reactNative.TextInput, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(_reactNative.TextInput, _extends$1({}, elementProps, {
       ref: ref,
       onFocus: function onFocus() {
         setFocused(true);
@@ -40593,7 +40650,7 @@
 
   var _excluded$Q = ["size", "placeholderTextColor", "multiline", "disabled", "valid", "invalid", "style"];
 
-  var _templateObject$H, _templateObject2$u, _templateObject3$g, _templateObject4$e, _templateObject5$c, _templateObject6$b, _templateObject7$8, _templateObject8$7;
+  var _templateObject$H, _templateObject2$x, _templateObject3$g, _templateObject4$e, _templateObject5$c, _templateObject6$b, _templateObject7$8, _templateObject8$7;
   var propTypes$Q = {
     size: PropTypes.oneOf(['sm', 'lg']),
     placeholderTextColor: PropTypes.string,
@@ -40605,13 +40662,13 @@
     style: PropTypes.any
   };
   var styles$G = StyleSheet.create(_objectSpread2({
-    '.form-control': css$1(_templateObject$H || (_templateObject$H = _taggedTemplateLiteral(["\n    // display: block;\n    width: 100%;\n    padding: $input-padding-y $input-padding-x;\n    font-family: $input-font-family;\n    font-size: $input-font-size;\n    font-weight: $input-font-weight;\n    line-height: $input-font-size * $input-line-height;\n    color: $input-color;\n    text-align-vertical: top; // added for bootstrap-rn\n    background-color: $input-bg;\n    // background-clip: padding-box;\n    border: $input-border-width solid $input-border-color;\n    @include platform(web) {\n      appearance: none; // Fix appearance for date inputs in Safari\n    }\n\n    // Note: This has no effect on <select>s in some browsers, due to the limited stylability of \"<select>\"s in CSS.\n    border-radius: $input-border-radius;\n\n    // @include box-shadow($input-box-shadow);\n    // @include transition($input-transition);\n\n    // Customize the \":focus\" state to imitate native WebKit styles.\n    &:focus {\n      color: $input-focus-color;\n      background-color: $input-focus-bg;\n      border-color: $input-focus-border-color;\n      @include platform(web) {\n        outline-width: 0; // outline: 0;\n      }\n      /* @if $enable-shadows {\n        @include box-shadow($input-box-shadow, $input-focus-box-shadow);\n      } @else {\n        // Avoid using mixin so we can pass custom focus shadow properly\n        box-shadow: $input-focus-box-shadow;\n      } */\n    }\n  "]))),
-    '.form-control-disabled': css$1(_templateObject2$u || (_templateObject2$u = _taggedTemplateLiteral(["\n    background-color: $input-disabled-bg;\n    border-color: $input-disabled-border-color;\n    // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.\n    opacity: 1;\n  "]))),
-    '.form-control-sm': css$1(_templateObject3$g || (_templateObject3$g = _taggedTemplateLiteral(["\n    min-height: $input-height-sm;\n    padding: $input-padding-y-sm $input-padding-x-sm;\n    font-size: $input-font-size-sm;\n    border-radius: $input-border-radius-sm;\n  "]))),
-    '.form-control-lg': css$1(_templateObject4$e || (_templateObject4$e = _taggedTemplateLiteral(["\n    min-height: $input-height-lg;\n    padding: $input-padding-y-lg $input-padding-x-lg;\n    font-size: $input-font-size-lg;\n    border-radius: $input-border-radius-lg;\n  "]))),
-    '.form-control-multiline': css$1(_templateObject5$c || (_templateObject5$c = _taggedTemplateLiteral(["\n    min-height: $input-height;\n  "]))),
-    '.form-control-multiline-sm': css$1(_templateObject6$b || (_templateObject6$b = _taggedTemplateLiteral(["\n    min-height: $input-height-sm;\n  "]))),
-    '.form-control-multiline-lg': css$1(_templateObject7$8 || (_templateObject7$8 = _taggedTemplateLiteral(["\n    min-height: $input-height-lg;\n  "])))
+    '.form-control': css$1(_templateObject$H || (_templateObject$H = _taggedTemplateLiteral(["\n    // display: block;\n    width: 100%;\n    padding: $input-padding-y $input-padding-x;\n    font-family: $input-font-family;\n    font-size: $input-font-size;\n    font-weight: $input-font-weight;\n    line-height: $input-font-size * $input-line-height;\n    color: $input-color;\n    background-color: $input-bg;\n    // background-clip: padding-box;\n    border: $input-border-width solid $input-border-color;\n    @include platform(web) {\n      appearance: none; // Fix appearance for date inputs in Safari\n    }\n\n    // Note: This has no effect on <select>s in some browsers, due to the limited stylability of \"<select>\"s in CSS.\n    border-radius: $input-border-radius;\n\n    // @include box-shadow($input-box-shadow);\n    // @include transition($input-transition);\n\n    // Customize the \":focus\" state to imitate native WebKit styles.\n    &:focus {\n      color: $input-focus-color;\n      background-color: $input-focus-bg;\n      border-color: $input-focus-border-color;\n      @include platform(web) {\n        outline-width: 0; // outline: 0;\n      }\n      /* @if $enable-shadows {\n        @include box-shadow($input-box-shadow, $input-focus-box-shadow);\n      } @else {\n        // Avoid using mixin so we can pass custom focus shadow properly\n        box-shadow: $input-focus-box-shadow;\n      } */\n    }\n  "]))),
+    '.form-control-disabled': css$1(_templateObject2$x || (_templateObject2$x = _taggedTemplateLiteral(["\n    background-color: $input-disabled-bg;\n    border-color: $input-disabled-border-color;\n    // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.\n    opacity: 1;\n  "]))),
+    '.form-control-sm': css$1(_templateObject3$g || (_templateObject3$g = _taggedTemplateLiteral(["\n    min-height: $input-height-sm;\n    padding: $input-padding-y-sm $input-padding-x-sm;\n    font-size: $input-font-size-sm;\n    line-height: $input-font-size-sm * $line-height-base; // added for bootstrap-rn\n    border-radius: $input-border-radius-sm;\n  "]))),
+    '.form-control-lg': css$1(_templateObject4$e || (_templateObject4$e = _taggedTemplateLiteral(["\n    min-height: $input-height-lg;\n    padding: $input-padding-y-lg $input-padding-x-lg;\n    font-size: $input-font-size-lg;\n    line-height: $input-font-size-lg * $line-height-base; // added for bootstrap-rn\n    border-radius: $input-border-radius-lg;\n  "]))),
+    '.form-control-multiline': css$1(_templateObject5$c || (_templateObject5$c = _taggedTemplateLiteral(["\n    text-align-vertical: top; // added for bootstrap-rn\n    min-height: $input-height;\n\n    @include platform(ios) {\n      min-height: $input-height-sm + 8rem; // added for bootstrap-rn\n    }\n  "]))),
+    '.form-control-multiline-sm': css$1(_templateObject6$b || (_templateObject6$b = _taggedTemplateLiteral(["\n    min-height: $input-height-sm;\n\n    @include platform(ios) {\n      // TODO: Adjust ios height to sm size\n      min-height: $input-height-sm + 8rem; // added for bootstrap-rn\n    }\n  "]))),
+    '.form-control-multiline-lg': css$1(_templateObject7$8 || (_templateObject7$8 = _taggedTemplateLiteral(["\n    min-height: $input-height-lg;\n\n    @include platform(ios) {\n      // TODO: Adjust ios height to lg size\n      min-height: $input-height-sm + 8rem; // added for bootstrap-rn\n    }\n  "])))
   }, each(FORM_VALIDATION_STATES, function (state, data) {
     return _defineProperty({}, ".form-control.is-".concat(state), css$1(_templateObject8$7 || (_templateObject8$7 = _taggedTemplateLiteral(["\n      border-color: ", ";\n\n      &:focus {\n        border-color: ", ";\n        // box-shadow: $focus-box-shadow;\n      }\n    "])), function (t) {
       return data(t).color;
@@ -40639,11 +40696,13 @@
         elementProps = _objectWithoutProperties(modifierProps, _excluded$Q);
 
     var classes = getStyles(styles$G, ['.form-control', disabled && '.form-control-disabled', size === 'sm' && '.form-control-sm', size === 'lg' && '.form-control-lg', multiline && '.form-control-multiline', multiline && size === 'sm' && '.form-control-multiline-sm', multiline && size === 'lg' && '.form-control-multiline-lg', valid && '.form-control.is-valid', invalid && '.form-control.is-invalid']);
-    return /*#__PURE__*/React__default["default"].createElement(TextInput, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(TextInput, _extends$1({}, elementProps, {
       ref: modifierRef,
       placeholderTextColor: placeholderTextColor || StyleSheet.value('input-placeholder-color'),
       multiline: multiline,
       disabled: disabled,
+      editable: !disabled,
+      selectTextOnFocus: !disabled,
       style: [classes, style]
     }));
   });
@@ -40651,7 +40710,7 @@
   Input.propTypes = propTypes$Q;
 
   var PLACEMENTS$1 = ['top', 'bottom', 'left', 'right'];
-  var TRIGGERS = ['click', 'hover', 'focus', 'manual', 'click hover', 'hover click', 'hover focus', 'focus hover', 'click focus', 'focus click'];
+  var TRIGGERS = ['press', 'hover', 'focus', 'manual', 'press hover', 'hover press', 'hover focus', 'focus hover', 'press focus', 'focus press'];
   var TriggerPropTypes = {
     trigger: PropTypes.oneOf(TRIGGERS),
     placement: PropTypes.oneOf(PLACEMENTS$1),
@@ -40698,7 +40757,9 @@
         accessibilityDescribedBy: identifier
       })), {}, {
         onPress: function onPress(event) {
-          if (trigger.includes('click')) {
+          var handleHoverAsPress = (_reactNative.Platform.OS === 'android' || _reactNative.Platform.OS === 'ios') && trigger.includes('hover');
+
+          if (trigger.includes('press') || handleHoverAsPress) {
             setVisible(function (value) {
               return !value;
             });
@@ -40775,14 +40836,14 @@
 
   var _excluded$P = ["style"];
 
-  var _templateObject$G, _templateObject2$t, _templateObject3$f, _templateObject4$d, _templateObject5$b, _templateObject6$a, _templateObject7$7, _templateObject8$6, _templateObject9$4, _templateObject10$4, _templateObject11$3, _templateObject12$2, _templateObject13$2, _templateObject14$2, _templateObject15$1;
+  var _templateObject$G, _templateObject2$w, _templateObject3$f, _templateObject4$d, _templateObject5$b, _templateObject6$a, _templateObject7$7, _templateObject8$6, _templateObject9$5, _templateObject10$5, _templateObject11$4, _templateObject12$3, _templateObject13$3, _templateObject14$2, _templateObject15$1;
   var propTypes$P = {
     // eslint-disable-next-line react/forbid-prop-types
     style: PropTypes.any
   };
   var styles$F = StyleSheet.create({
     '.popover-arrow': css$1(_templateObject$G || (_templateObject$G = _taggedTemplateLiteral(["\n    position: absolute;\n    // display: block;\n    width: $popover-arrow-width;\n    height: $popover-arrow-height;\n  "]))),
-    '.popover-arrow::before': css$1(_templateObject2$t || (_templateObject2$t = _taggedTemplateLiteral(["\n    position: absolute;\n    // display: block;\n    // content: \"\";\n    border-top-color: transparent;\n    border-right-color: transparent;\n    border-left-color: transparent;\n    border-bottom-color: transparent;\n    border-style: solid;\n  "]))),
+    '.popover-arrow::before': css$1(_templateObject2$w || (_templateObject2$w = _taggedTemplateLiteral(["\n    position: absolute;\n    // display: block;\n    // content: \"\";\n    border-top-color: transparent;\n    border-right-color: transparent;\n    border-left-color: transparent;\n    border-bottom-color: transparent;\n    border-style: solid;\n  "]))),
     '.popover-arrow::after': css$1(_templateObject3$f || (_templateObject3$f = _taggedTemplateLiteral(["\n    position: absolute;\n    // display: block;\n    // content: \"\";\n    border-top-color: transparent;\n    border-right-color: transparent;\n    border-left-color: transparent;\n    border-bottom-color: transparent;\n    border-style: solid;\n  "]))),
     '.bs-popover-top .popover-arrow': css$1(_templateObject4$d || (_templateObject4$d = _taggedTemplateLiteral(["\n    bottom: ", ";\n  "])), subtract(function (t) {
       return "-".concat(t['popover-arrow-height']);
@@ -40797,15 +40858,15 @@
       return t['popover-border-width'];
     })),
     '.bs-popover-end .popover-arrow::before': css$1(_templateObject8$6 || (_templateObject8$6 = _taggedTemplateLiteral(["\n    left: 0;\n    border-top-width: $popover-arrow-width * 0.5;\n    border-right-width: $popover-arrow-height;\n    border-left-width: 0;\n    border-bottom-width: $popover-arrow-width * 0.5;\n    border-right-color: $popover-arrow-outer-color;\n  "]))),
-    '.bs-popover-end .popover-arrow::after': css$1(_templateObject9$4 || (_templateObject9$4 = _taggedTemplateLiteral(["\n    left: $popover-border-width;\n    border-top-width: $popover-arrow-width * 0.5;\n    border-right-width: $popover-arrow-height;\n    border-left-width: 0;\n    border-bottom-width: $popover-arrow-width * 0.5;\n    border-right-color: $popover-arrow-color;\n  "]))),
-    '.bs-popover-bottom .popover-arrow': css$1(_templateObject10$4 || (_templateObject10$4 = _taggedTemplateLiteral(["\n    top: ", ";\n  "])), subtract(function (t) {
+    '.bs-popover-end .popover-arrow::after': css$1(_templateObject9$5 || (_templateObject9$5 = _taggedTemplateLiteral(["\n    left: $popover-border-width;\n    border-top-width: $popover-arrow-width * 0.5;\n    border-right-width: $popover-arrow-height;\n    border-left-width: 0;\n    border-bottom-width: $popover-arrow-width * 0.5;\n    border-right-color: $popover-arrow-color;\n  "]))),
+    '.bs-popover-bottom .popover-arrow': css$1(_templateObject10$5 || (_templateObject10$5 = _taggedTemplateLiteral(["\n    top: ", ";\n  "])), subtract(function (t) {
       return "-".concat(t['popover-arrow-height']);
     }, function (t) {
       return t['popover-border-width'];
     })),
-    '.bs-popover-bottom .popover-arrow::before': css$1(_templateObject11$3 || (_templateObject11$3 = _taggedTemplateLiteral(["\n    top: 0;\n    border-top-width: 0;\n    border-right-width: $popover-arrow-width * 0.5;\n    border-left-width: $popover-arrow-width * 0.5;\n    border-bottom-width: $popover-arrow-height;\n    border-bottom-color: $popover-arrow-outer-color;\n  "]))),
-    '.bs-popover-bottom .popover-arrow::after': css$1(_templateObject12$2 || (_templateObject12$2 = _taggedTemplateLiteral(["\n    top: $popover-border-width;\n    border-top-width: 0;\n    border-right-width: $popover-arrow-width * 0.5;\n    border-left-width: $popover-arrow-width * 0.5;\n    border-bottom-width: $popover-arrow-height;\n    border-bottom-color: $popover-arrow-color;\n  "]))),
-    '.bs-popover-start .popover-arrow': css$1(_templateObject13$2 || (_templateObject13$2 = _taggedTemplateLiteral(["\n    right: ", ";\n    width: $popover-arrow-height;\n    height: $popover-arrow-width;\n  "])), subtract(function (t) {
+    '.bs-popover-bottom .popover-arrow::before': css$1(_templateObject11$4 || (_templateObject11$4 = _taggedTemplateLiteral(["\n    top: 0;\n    border-top-width: 0;\n    border-right-width: $popover-arrow-width * 0.5;\n    border-left-width: $popover-arrow-width * 0.5;\n    border-bottom-width: $popover-arrow-height;\n    border-bottom-color: $popover-arrow-outer-color;\n  "]))),
+    '.bs-popover-bottom .popover-arrow::after': css$1(_templateObject12$3 || (_templateObject12$3 = _taggedTemplateLiteral(["\n    top: $popover-border-width;\n    border-top-width: 0;\n    border-right-width: $popover-arrow-width * 0.5;\n    border-left-width: $popover-arrow-width * 0.5;\n    border-bottom-width: $popover-arrow-height;\n    border-bottom-color: $popover-arrow-color;\n  "]))),
+    '.bs-popover-start .popover-arrow': css$1(_templateObject13$3 || (_templateObject13$3 = _taggedTemplateLiteral(["\n    right: ", ";\n    width: $popover-arrow-height;\n    height: $popover-arrow-width;\n  "])), subtract(function (t) {
       return "-".concat(t['popover-arrow-height']);
     }, function (t) {
       return t['popover-border-width'];
@@ -40825,7 +40886,7 @@
     var classes = getStyles(styles$F, ['.popover-arrow', popper && ".bs-popover-".concat(placement, " .popover-arrow")]);
     var beforeClasses = getStyles(styles$F, ['.popover-arrow::before', popper && ".bs-popover-".concat(placement, " .popover-arrow::before")]);
     var afterClasses = getStyles(styles$F, ['.popover-arrow::after', popper && ".bs-popover-".concat(placement, " .popover-arrow::after")]);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       style: [classes, arrowStyle, style]
     }), /*#__PURE__*/React__default["default"].createElement(View, {
@@ -40837,35 +40898,43 @@
   PopoverArrow.displayName = 'PopoverArrow';
   PopoverArrow.propTypes = propTypes$P;
 
-  var _excluded$O = ["children", "style"];
+  var _excluded$O = ["children", "style", "textStyle"];
 
-  var _templateObject$F;
+  var _templateObject$F, _templateObject2$v;
   var propTypes$O = {
     children: PropTypes.node.isRequired,
     // eslint-disable-next-line react/forbid-prop-types
-    style: PropTypes.any
+    style: PropTypes.any,
+    // eslint-disable-next-line react/forbid-prop-types
+    textStyle: PropTypes.any
   };
   var styles$E = StyleSheet.create({
-    '.popover-header': css$1(_templateObject$F || (_templateObject$F = _taggedTemplateLiteral(["\n    padding: $popover-header-padding-y $popover-header-padding-x;\n    margin-bottom: 0; // Reset the default from Reboot\n    font-size: $font-size-base;\n    line-height: $font-size-base * $headings-line-height; // added for bootstrap-rn\n    color: $popover-header-color;\n    background-color: $popover-header-bg;\n    border-bottom-width: $popover-border-width;\n    border-style: solid;\n    border-color: $popover-border-color;\n    border-top-left-radius: $popover-border-radius;\n    border-top-right-radius: $popover-border-radius;\n  "])))
+    '.popover-header': css$1(_templateObject$F || (_templateObject$F = _taggedTemplateLiteral(["\n    padding: $popover-header-padding-y $popover-header-padding-x;\n    background-color: $popover-header-bg;\n    border-bottom-width: $popover-border-width;\n    border-style: solid;\n    border-color: $popover-border-color;\n    border-top-left-radius: $popover-border-radius;\n    border-top-right-radius: $popover-border-radius;\n  "]))),
+    '.popover-header-text': css$1(_templateObject2$v || (_templateObject2$v = _taggedTemplateLiteral(["\n    margin-bottom: 0; // Reset the default from Reboot\n    font-size: $font-size-base;\n    line-height: $font-size-base * $headings-line-height; // added for bootstrap-rn\n    color: $popover-header-color;\n  "])))
   });
   var PopoverHeader = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
     var children = props.children,
         style = props.style,
+        textStyle = props.textStyle,
         elementProps = _objectWithoutProperties(props, _excluded$O);
 
     var classes = getStyles(styles$E, ['.popover-header']);
-    return /*#__PURE__*/React__default["default"].createElement(Heading$1, _extends({}, elementProps, {
+    var textClasses = getStyles(styles$E, ['.popover-header-text']); // composite component
+
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
-      size: 3,
       style: [classes, style]
-    }), children);
+    }), /*#__PURE__*/React__default["default"].createElement(Heading$1, {
+      size: 3,
+      style: [textClasses, textStyle]
+    }, children));
   });
   PopoverHeader.displayName = 'PopoverHeader';
   PopoverHeader.propTypes = propTypes$O;
 
   var _excluded$N = ["children", "style", "textStyle"];
 
-  var _templateObject$E, _templateObject2$s;
+  var _templateObject$E, _templateObject2$u;
   var propTypes$N = {
     children: PropTypes.node.isRequired,
     // eslint-disable-next-line react/forbid-prop-types
@@ -40875,7 +40944,7 @@
   };
   var styles$D = StyleSheet.create({
     '.popover-body': css$1(_templateObject$E || (_templateObject$E = _taggedTemplateLiteral(["\n    padding: $popover-body-padding-y $popover-body-padding-x;\n  "]))),
-    '.popover-body-text': css$1(_templateObject2$s || (_templateObject2$s = _taggedTemplateLiteral(["\n    color: $popover-body-color;\n  "])))
+    '.popover-body-text': css$1(_templateObject2$u || (_templateObject2$u = _taggedTemplateLiteral(["\n    color: $popover-body-color;\n  "])))
   });
   var PopoverBody = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
     var children = props.children,
@@ -40885,7 +40954,7 @@
 
     var classes = getStyles(styles$D, ['.popover-body']);
     var textClasses = getStyles(styles$D, ['.popover-body-text']);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       style: [classes, style],
       textStyle: [textClasses, textStyle]
@@ -40896,7 +40965,7 @@
 
   var _excluded$M = ["children", "placement", "popper", "style", "textStyle", "arrowStyle"];
 
-  var _templateObject$D, _templateObject2$r;
+  var _templateObject$D, _templateObject2$t;
   var propTypes$M = {
     children: PropTypes.node.isRequired,
     placement: PropTypes.string,
@@ -40910,7 +40979,7 @@
   };
   var styles$C = StyleSheet.create({
     '.popover': css$1(_templateObject$D || (_templateObject$D = _taggedTemplateLiteral(["\n    position: absolute;\n    // top: 0;\n    // left: 0 #{\"/* rtl:ignore */\"};\n    z-index: $zindex-popover;\n    // display: block;\n    max-width: $popover-max-width;\n    background-color: $popover-bg;\n    // background-clip: padding-box;\n    border: $popover-border-width solid $popover-border-color;\n    border-radius: $popover-border-radius;\n    // @include box-shadow($popover-box-shadow);\n  "]))),
-    '.popover-text': css$1(_templateObject2$r || (_templateObject2$r = _taggedTemplateLiteral(["\n    // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.\n    // So reset our font and text properties to avoid inheriting weird values.\n    // @include reset-text();\n    font-size: $popover-font-size;\n    // Allow breaking very long words so they don't overflow the popover's bounds\n    // word-wrap: break-word;\n  "])))
+    '.popover-text': css$1(_templateObject2$t || (_templateObject2$t = _taggedTemplateLiteral(["\n    // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.\n    // So reset our font and text properties to avoid inheriting weird values.\n    // @include reset-text();\n    font-size: $popover-font-size;\n    // Allow breaking very long words so they don't overflow the popover's bounds\n    // word-wrap: break-word;\n  "])))
   });
   var Popover = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
     var children = props.children,
@@ -40931,7 +41000,7 @@
     var textClasses = getStyles(styles$C, ['.popover-text']); // Accessiblity role tooltip is only supported on web.
 
     var role = _reactNative.Platform.OS === 'web' ? 'tooltip' : null;
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       accessibilityRole: role,
       style: [classes, style],
@@ -40946,12 +41015,13 @@
   Popover.Header = PopoverHeader;
   Popover.Body = PopoverBody;
 
-  var _excluded$L = ["title", "content", "trigger", "placement"],
+  var _excluded$L = ["title", "content", "autoClose", "trigger", "placement"],
       _excluded2$1 = ["popover"];
   var propTypes$L = {
     popover: PropTypes.shape(_objectSpread2({
       title: PropTypes.node,
-      content: PropTypes.node.isRequired
+      content: PropTypes.node.isRequired,
+      autoClose: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['inside', 'outside'])])
     }, TriggerPropTypes))
   };
   function injectPopover(Target) {
@@ -40960,8 +41030,10 @@
       var _props$popover = props.popover,
           title = _props$popover.title,
           content = _props$popover.content,
+          _props$popover$autoCl = _props$popover.autoClose,
+          autoClose = _props$popover$autoCl === void 0 ? 'outside' : _props$popover$autoCl,
           _props$popover$trigge = _props$popover.trigger,
-          trigger = _props$popover$trigge === void 0 ? 'click' : _props$popover$trigge,
+          trigger = _props$popover$trigge === void 0 ? 'press' : _props$popover$trigge,
           _props$popover$placem = _props$popover.placement,
           placement = _props$popover$placem === void 0 ? 'right' : _props$popover$placem,
           tooltipProps = _objectWithoutProperties(_props$popover, _excluded$L),
@@ -40971,19 +41043,27 @@
 
       var _useTrigger = useTrigger(trigger, tooltipProps, elementProps, ref),
           visible = _useTrigger.visible,
+          setVisible = _useTrigger.setVisible,
           targetProps = _useTrigger.targetProps,
           targetRef = _useTrigger.targetRef,
           templateProps = _useTrigger.templateProps;
 
       var offset = convertToNumber(StyleSheet.value('popover-arrow-height'));
-      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Target, _extends({}, elementProps, targetProps)), visible && /*#__PURE__*/React__default["default"].createElement(OverlayContainer, null, /*#__PURE__*/React__default["default"].createElement(Overlay, {
+      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Target, _extends$1({}, elementProps, targetProps)), visible && /*#__PURE__*/React__default["default"].createElement(OverlayContainer, null, /*#__PURE__*/React__default["default"].createElement(Overlay, {
         placement: placement,
         offset: offset,
         arrowOffset: offset,
         targetRef: targetRef,
         visible: visible
       }, function (overlay, overlayRef) {
-        return /*#__PURE__*/React__default["default"].createElement(Popover, _extends({}, templateProps, {
+        return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(BackdropHandler, {
+          toggleRef: targetRef,
+          dialogRef: overlayRef,
+          onClose: function onClose() {
+            setVisible(false);
+          },
+          autoClose: autoClose
+        }), /*#__PURE__*/React__default["default"].createElement(Popover, _extends$1({}, templateProps, {
           ref: overlayRef,
           placement: overlay.placement,
           popper: overlay.rendered,
@@ -40992,7 +41072,7 @@
             opacity: overlay.rendered ? 1 : 0
           }],
           arrowStyle: overlay.arrowProps.style
-        }), /*#__PURE__*/React__default["default"].createElement(Popover.Arrow, null), title && /*#__PURE__*/React__default["default"].createElement(Popover.Header, null, title), /*#__PURE__*/React__default["default"].createElement(Popover.Body, null, content));
+        }), /*#__PURE__*/React__default["default"].createElement(Popover.Arrow, null), title && /*#__PURE__*/React__default["default"].createElement(Popover.Header, null, title), /*#__PURE__*/React__default["default"].createElement(Popover.Body, null, content)));
       })));
     });
     OverlayPopover.displayName = 'Overlay(Popover)';
@@ -41005,22 +41085,22 @@
 
   var _excluded$K = ["style"];
 
-  var _templateObject$C, _templateObject2$q, _templateObject3$e, _templateObject4$c, _templateObject5$a, _templateObject6$9, _templateObject7$6, _templateObject8$5, _templateObject9$3, _templateObject10$3;
+  var _templateObject$C, _templateObject2$s, _templateObject3$e, _templateObject4$c, _templateObject5$a, _templateObject6$9, _templateObject7$6, _templateObject8$5, _templateObject9$4, _templateObject10$4;
   var propTypes$K = {
     // eslint-disable-next-line react/forbid-prop-types
     style: PropTypes.any
   };
   var styles$B = StyleSheet.create({
     '.tooltip-arrow': css$1(_templateObject$C || (_templateObject$C = _taggedTemplateLiteral(["\n    position: absolute;\n    // display: block;\n    width: $tooltip-arrow-width;\n    height: $tooltip-arrow-height;\n  "]))),
-    '.tooltip-arrow::before': css$1(_templateObject2$q || (_templateObject2$q = _taggedTemplateLiteral(["\n    position: absolute;\n    // content: \"\";\n    border-top-color: transparent;\n    border-right-color: transparent;\n    border-left-color: transparent;\n    border-bottom-color: transparent;\n    border-style: solid;\n  "]))),
+    '.tooltip-arrow::before': css$1(_templateObject2$s || (_templateObject2$s = _taggedTemplateLiteral(["\n    position: absolute;\n    // content: \"\";\n    border-top-color: transparent;\n    border-right-color: transparent;\n    border-left-color: transparent;\n    border-bottom-color: transparent;\n    border-style: solid;\n  "]))),
     '.bs-tooltip-top .tooltip-arrow': css$1(_templateObject3$e || (_templateObject3$e = _taggedTemplateLiteral(["\n    bottom: 0;\n  "]))),
     '.bs-tooltip-top .tooltip-arrow::before': css$1(_templateObject4$c || (_templateObject4$c = _taggedTemplateLiteral(["\n    top: -1px;\n    border-top-width: $tooltip-arrow-height;\n    border-right-width: $tooltip-arrow-width * 0.5;\n    border-left-width: $tooltip-arrow-width * 0.5;\n    border-bottom-width: 0;\n    border-top-color: $tooltip-arrow-color;\n  "]))),
     '.bs-tooltip-end .tooltip-arrow': css$1(_templateObject5$a || (_templateObject5$a = _taggedTemplateLiteral(["\n    left: 0;\n    width: $tooltip-arrow-height;\n    height: $tooltip-arrow-width;\n  "]))),
     '.bs-tooltip-end .tooltip-arrow::before': css$1(_templateObject6$9 || (_templateObject6$9 = _taggedTemplateLiteral(["\n    right: -1px;\n    border-top-width: $tooltip-arrow-width * 0.5;\n    border-right-width: $tooltip-arrow-height;\n    border-left-width: 0;\n    border-bottom-width: $tooltip-arrow-width * 0.5;\n    border-right-color: $tooltip-arrow-color;\n  "]))),
     '.bs-tooltip-bottom .tooltip-arrow': css$1(_templateObject7$6 || (_templateObject7$6 = _taggedTemplateLiteral(["\n    top: 0;\n  "]))),
     '.bs-tooltip-bottom .tooltip-arrow::before': css$1(_templateObject8$5 || (_templateObject8$5 = _taggedTemplateLiteral(["\n    bottom: -1px;\n    border-top-width: 0;\n    border-right-width: $tooltip-arrow-width * 0.5;\n    border-left-width: $tooltip-arrow-width * 0.5;\n    border-bottom-width: $tooltip-arrow-height;\n    border-bottom-color: $tooltip-arrow-color;\n  "]))),
-    '.bs-tooltip-start .tooltip-arrow': css$1(_templateObject9$3 || (_templateObject9$3 = _taggedTemplateLiteral(["\n    right: 0;\n    width: $tooltip-arrow-height;\n    height: $tooltip-arrow-width;\n  "]))),
-    '.bs-tooltip-start .tooltip-arrow::before': css$1(_templateObject10$3 || (_templateObject10$3 = _taggedTemplateLiteral(["\n    left: -1px;\n    border-top-width: $tooltip-arrow-width * 0.5;\n    border-right-width: 0;\n    border-left-width: $tooltip-arrow-height;\n    border-bottom-width: $tooltip-arrow-width * 0.5;\n    border-left-color: $tooltip-arrow-color;\n  "])))
+    '.bs-tooltip-start .tooltip-arrow': css$1(_templateObject9$4 || (_templateObject9$4 = _taggedTemplateLiteral(["\n    right: 0;\n    width: $tooltip-arrow-height;\n    height: $tooltip-arrow-width;\n  "]))),
+    '.bs-tooltip-start .tooltip-arrow::before': css$1(_templateObject10$4 || (_templateObject10$4 = _taggedTemplateLiteral(["\n    left: -1px;\n    border-top-width: $tooltip-arrow-width * 0.5;\n    border-right-width: 0;\n    border-left-width: $tooltip-arrow-height;\n    border-bottom-width: $tooltip-arrow-width * 0.5;\n    border-left-color: $tooltip-arrow-color;\n  "])))
   });
   var TooltipArrow = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
     var style = props.style,
@@ -41033,7 +41113,7 @@
 
     var classes = getStyles(styles$B, ['.tooltip-arrow', popper && ".bs-tooltip-".concat(placement, " .tooltip-arrow")]);
     var beforeClasses = getStyles(styles$B, ['.tooltip-arrow::before', popper && ".bs-tooltip-".concat(placement, " .tooltip-arrow::before")]);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       style: [classes, arrowStyle, style]
     }), /*#__PURE__*/React__default["default"].createElement(View, {
@@ -41043,34 +41123,42 @@
   TooltipArrow.displayName = 'TooltipArrow';
   TooltipArrow.propTypes = propTypes$K;
 
-  var _excluded$J = ["children", "style"];
+  var _excluded$J = ["children", "style", "textStyle"];
 
-  var _templateObject$B;
+  var _templateObject$B, _templateObject2$r;
   var propTypes$J = {
     children: PropTypes.node.isRequired,
     // eslint-disable-next-line react/forbid-prop-types
-    style: PropTypes.any
+    style: PropTypes.any,
+    // eslint-disable-next-line react/forbid-prop-types
+    textStyle: PropTypes.any
   };
   var styles$A = StyleSheet.create({
-    '.tooltip-inner': css$1(_templateObject$B || (_templateObject$B = _taggedTemplateLiteral(["\n    max-width: $tooltip-max-width;\n    padding: $tooltip-padding-y $tooltip-padding-x;\n    color: $tooltip-color;\n    text-align: center;\n    background-color: $tooltip-bg;\n    border-radius: $tooltip-border-radius;\n  "])))
+    '.tooltip-inner': css$1(_templateObject$B || (_templateObject$B = _taggedTemplateLiteral(["\n    max-width: $tooltip-max-width;\n    padding: $tooltip-padding-y $tooltip-padding-x;\n    background-color: $tooltip-bg;\n    border-radius: $tooltip-border-radius;\n  "]))),
+    '.tooltip-inner-text': css$1(_templateObject2$r || (_templateObject2$r = _taggedTemplateLiteral(["\n    color: $tooltip-color;\n    text-align: center;\n  "])))
   });
   var TooltipInner = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
     var children = props.children,
         style = props.style,
+        textStyle = props.textStyle,
         elementProps = _objectWithoutProperties(props, _excluded$J);
 
     var classes = getStyles(styles$A, ['.tooltip-inner']);
-    return /*#__PURE__*/React__default["default"].createElement(Text, _extends({}, elementProps, {
+    var textClasses = getStyles(styles$A, ['.tooltip-inner-text']); // composite component
+
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       style: [classes, style]
-    }), children);
+    }), /*#__PURE__*/React__default["default"].createElement(Text, {
+      style: [textClasses, textStyle]
+    }, children));
   });
   TooltipInner.displayName = 'TooltipInner';
   TooltipInner.propTypes = propTypes$J;
 
   var _excluded$I = ["children", "placement", "popper", "style", "textStyle", "arrowStyle"];
 
-  var _templateObject$A, _templateObject2$p, _templateObject3$d, _templateObject4$b, _templateObject5$9, _templateObject6$8;
+  var _templateObject$A, _templateObject2$q, _templateObject3$d, _templateObject4$b, _templateObject5$9, _templateObject6$8;
   var propTypes$I = {
     children: PropTypes.node.isRequired,
     placement: PropTypes.string,
@@ -41084,7 +41172,7 @@
   };
   var styles$z = StyleSheet.create({
     '.tooltip': css$1(_templateObject$A || (_templateObject$A = _taggedTemplateLiteral(["\n    position: absolute;\n    z-index: $zindex-tooltip;\n    // display: block;\n    margin: $tooltip-margin;\n    // opacity: 0;\n  "]))),
-    '.tooltip-text': css$1(_templateObject2$p || (_templateObject2$p = _taggedTemplateLiteral(["\n    // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.\n    // So reset our font and text properties to avoid inheriting weird values.\n    // @include reset-text();\n    font-size: $tooltip-font-size;\n    // Allow breaking very long words so they don't overflow the tooltip's bounds\n    // word-wrap: break-word;\n  "]))),
+    '.tooltip-text': css$1(_templateObject2$q || (_templateObject2$q = _taggedTemplateLiteral(["\n    // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.\n    // So reset our font and text properties to avoid inheriting weird values.\n    // @include reset-text();\n    font-size: $tooltip-font-size;\n    // Allow breaking very long words so they don't overflow the tooltip's bounds\n    // word-wrap: break-word;\n  "]))),
     '.bs-tooltip-top': css$1(_templateObject3$d || (_templateObject3$d = _taggedTemplateLiteral(["\n    padding: $tooltip-arrow-height 0;\n  "]))),
     '.bs-tooltip-end': css$1(_templateObject4$b || (_templateObject4$b = _taggedTemplateLiteral(["\n    padding: 0 $tooltip-arrow-height;\n  "]))),
     '.bs-tooltip-bottom': css$1(_templateObject5$9 || (_templateObject5$9 = _taggedTemplateLiteral(["\n    padding: $tooltip-arrow-height 0;\n  "]))),
@@ -41110,7 +41198,7 @@
     var textClasses = getStyles(styles$z, ['.tooltip-text']); // Accessiblity role tooltip is only supported on web.
 
     var role = _reactNative.Platform.OS === 'web' ? 'tooltip' : null;
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       accessibilityRole: role,
       style: [classes, style],
@@ -41124,11 +41212,12 @@
   Tooltip.Arrow = TooltipArrow;
   Tooltip.Inner = TooltipInner;
 
-  var _excluded$H = ["title", "trigger", "placement"],
+  var _excluded$H = ["title", "autoClose", "trigger", "placement"],
       _excluded2 = ["tooltip"];
   var propTypes$H = {
     tooltip: PropTypes.shape(_objectSpread2({
-      title: PropTypes.node.isRequired
+      title: PropTypes.node.isRequired,
+      autoClose: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['inside', 'outside'])])
     }, TriggerPropTypes))
   };
   function injectTooltip(Target) {
@@ -41136,6 +41225,8 @@
       /* eslint-disable react/prop-types */
       var _props$tooltip = props.tooltip,
           title = _props$tooltip.title,
+          _props$tooltip$autoCl = _props$tooltip.autoClose,
+          autoClose = _props$tooltip$autoCl === void 0 ? 'outside' : _props$tooltip$autoCl,
           _props$tooltip$trigge = _props$tooltip.trigger,
           trigger = _props$tooltip$trigge === void 0 ? 'hover focus' : _props$tooltip$trigge,
           _props$tooltip$placem = _props$tooltip.placement,
@@ -41147,18 +41238,26 @@
 
       var _useTrigger = useTrigger(trigger, tooltipProps, elementProps, ref),
           visible = _useTrigger.visible,
+          setVisible = _useTrigger.setVisible,
           targetProps = _useTrigger.targetProps,
           targetRef = _useTrigger.targetRef,
           templateProps = _useTrigger.templateProps;
 
       var offset = convertToNumber(StyleSheet.value('tooltip-arrow-height'));
-      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Target, _extends({}, elementProps, targetProps)), visible && /*#__PURE__*/React__default["default"].createElement(OverlayContainer, null, /*#__PURE__*/React__default["default"].createElement(Overlay, {
+      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Target, _extends$1({}, elementProps, targetProps)), visible && /*#__PURE__*/React__default["default"].createElement(OverlayContainer, null, /*#__PURE__*/React__default["default"].createElement(Overlay, {
         placement: placement,
         targetRef: targetRef,
         arrowOffset: offset,
         visible: visible
       }, function (overlay, overlayRef) {
-        return /*#__PURE__*/React__default["default"].createElement(Tooltip, _extends({}, templateProps, {
+        return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(BackdropHandler, {
+          toggleRef: targetRef,
+          dialogRef: overlayRef,
+          onClose: function onClose() {
+            setVisible(false);
+          },
+          autoClose: autoClose
+        }), /*#__PURE__*/React__default["default"].createElement(Tooltip, _extends$1({}, templateProps, {
           ref: overlayRef,
           placement: overlay.placement,
           popper: overlay.rendered,
@@ -41167,7 +41266,7 @@
             opacity: overlay.rendered ? 1 : 0
           }],
           arrowStyle: overlay.arrowProps.style
-        }), /*#__PURE__*/React__default["default"].createElement(Tooltip.Arrow, null), /*#__PURE__*/React__default["default"].createElement(Tooltip.Inner, null, title));
+        }), /*#__PURE__*/React__default["default"].createElement(Tooltip.Arrow, null), /*#__PURE__*/React__default["default"].createElement(Tooltip.Inner, null, title)));
       })));
     });
     OverlayTooltip.displayName = 'Overlay(Tooltip)';
@@ -41189,7 +41288,7 @@
 
     var media = useMedia();
     var resolveStyle = useStyle(style, styleName);
-    return /*#__PURE__*/React__default["default"].createElement(_reactNative.Image, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(_reactNative.Image, _extends$1({}, elementProps, {
       ref: ref,
       style: resolveStyle({
         media: media
@@ -41213,7 +41312,7 @@
 
     var media = useMedia();
     var resolveStyle = useStyle(style, styleName);
-    return /*#__PURE__*/React__default["default"].createElement(_reactNative.ImageBackground, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(_reactNative.ImageBackground, _extends$1({}, elementProps, {
       ref: ref,
       style: resolveStyle({
         media: media
@@ -41223,27 +41322,35 @@
   ImageBackground.displayName = 'ImageBackground';
   ImageBackground.propTypes = propTypes$F;
 
-  var _excluded$E = ["children", "style"];
+  var _excluded$E = ["children", "style", "textStyle"];
 
-  var _templateObject$z;
+  var _templateObject$z, _templateObject2$p;
   var propTypes$E = {
     children: PropTypes.node.isRequired,
     // eslint-disable-next-line react/forbid-prop-types
-    style: PropTypes.any
+    style: PropTypes.any,
+    // eslint-disable-next-line react/forbid-prop-types
+    textStyle: PropTypes.any
   };
   var styles$y = StyleSheet.create({
-    '.form-label': css$1(_templateObject$z || (_templateObject$z = _taggedTemplateLiteral(["\n    margin-bottom: $form-label-margin-bottom;\n    font-size: $form-label-font-size;\n    font-style: $form-label-font-style;\n    font-weight: $form-label-font-weight;\n    color: $form-label-color;\n  "])))
+    '.form-label': css$1(_templateObject$z || (_templateObject$z = _taggedTemplateLiteral(["\n    margin-bottom: $form-label-margin-bottom;\n  "]))),
+    '.form-label-text': css$1(_templateObject2$p || (_templateObject2$p = _taggedTemplateLiteral(["\n    font-size: $form-label-font-size;\n    font-style: $form-label-font-style;\n    font-weight: $form-label-font-weight;\n    color: $form-label-color;\n  "])))
   });
   var Label = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
     var children = props.children,
         style = props.style,
+        textStyle = props.textStyle,
         elementProps = _objectWithoutProperties(props, _excluded$E);
 
     var classes = getStyles(styles$y, ['.form-label']);
-    return /*#__PURE__*/React__default["default"].createElement(Text, _extends({}, elementProps, {
+    var textClasses = getStyles(styles$y, ['.form-label-text']); // composite component
+
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       style: [classes, style]
-    }), children);
+    }), /*#__PURE__*/React__default["default"].createElement(Text, {
+      style: [textClasses, textStyle]
+    }, children));
   });
   Label.displayName = 'Label';
   Label.propTypes = propTypes$E;
@@ -41253,7 +41360,7 @@
 
   var _excluded$D = ["children", "color", "active", "first", "last", "disabled", "style", "textStyle"];
 
-  var _templateObject$y, _templateObject2$o, _templateObject3$c, _templateObject4$a, _templateObject5$8, _templateObject6$7, _templateObject7$5, _templateObject8$4, _templateObject9$2, _templateObject10$2, _templateObject11$2, _templateObject12$1, _templateObject13$1, _templateObject14$1;
+  var _templateObject$y, _templateObject2$o, _templateObject3$c, _templateObject4$a, _templateObject5$8, _templateObject6$7, _templateObject7$5, _templateObject8$4, _templateObject9$3, _templateObject10$3, _templateObject11$3, _templateObject12$2, _templateObject13$2, _templateObject14$1;
   var propTypes$D = {
     children: PropTypes.node.isRequired,
     color: PropTypes.oneOf(Object.keys(THEME_COLORS)),
@@ -41275,14 +41382,14 @@
     '.list-group-item-disabled-text': css$1(_templateObject6$7 || (_templateObject6$7 = _taggedTemplateLiteral(["\n    color: $list-group-disabled-color;\n  "]))),
     '.list-group-item-active': css$1(_templateObject7$5 || (_templateObject7$5 = _taggedTemplateLiteral(["\n    z-index: 2; // Place active items above their siblings for proper border styling\n    background-color: $list-group-active-bg;\n    border-color: $list-group-active-border-color;\n  "]))),
     '.list-group-item-active-text': css$1(_templateObject8$4 || (_templateObject8$4 = _taggedTemplateLiteral(["\n    color: $list-group-active-color;\n  "]))),
-    '.list-group-item-not-first': css$1(_templateObject9$2 || (_templateObject9$2 = _taggedTemplateLiteral(["\n    border-top-width: 0;\n  "]))),
-    '.list-group-item-not-first-active': css$1(_templateObject10$2 || (_templateObject10$2 = _taggedTemplateLiteral(["\n    margin-top: -$list-group-border-width;\n    border-top-width: $list-group-border-width;\n  "]))),
-    '.list-group-item-flush': css$1(_templateObject11$2 || (_templateObject11$2 = _taggedTemplateLiteral(["\n    border-top-left-radius: 0; // added for bootstrap-rn\n    border-top-right-radius: 0; // added for bootstrap-rn\n    border-bottom-left-radius: 0; // added for bootstrap-rn\n    border-bottom-right-radius: 0; // added for bootstrap-rn\n    border-top-width: 0;\n    border-right-width: 0;\n    border-bottom-width: $list-group-border-width;\n    border-left-width: 0;\n  "]))),
-    '.list-group-item-flush-last': css$1(_templateObject12$1 || (_templateObject12$1 = _taggedTemplateLiteral(["\n    border-bottom-width: 0;\n  "])))
+    '.list-group-item-not-first': css$1(_templateObject9$3 || (_templateObject9$3 = _taggedTemplateLiteral(["\n    border-top-width: 0;\n  "]))),
+    '.list-group-item-not-first-active': css$1(_templateObject10$3 || (_templateObject10$3 = _taggedTemplateLiteral(["\n    margin-top: -$list-group-border-width;\n    border-top-width: $list-group-border-width;\n  "]))),
+    '.list-group-item-flush': css$1(_templateObject11$3 || (_templateObject11$3 = _taggedTemplateLiteral(["\n    border-top-left-radius: 0; // added for bootstrap-rn\n    border-top-right-radius: 0; // added for bootstrap-rn\n    border-bottom-left-radius: 0; // added for bootstrap-rn\n    border-bottom-right-radius: 0; // added for bootstrap-rn\n    border-top-width: 0;\n    border-right-width: 0;\n    border-bottom-width: $list-group-border-width;\n    border-left-width: 0;\n  "]))),
+    '.list-group-item-flush-last': css$1(_templateObject12$2 || (_templateObject12$2 = _taggedTemplateLiteral(["\n    border-bottom-width: 0;\n  "])))
   }, each(THEME_COLORS, function (state, value) {
     var _ref;
 
-    return _ref = {}, _defineProperty(_ref, ".list-group-item-".concat(state), css$1(_templateObject13$1 || (_templateObject13$1 = _taggedTemplateLiteral(["\n      background-color: ", ";\n    "])), shiftColor(function (t) {
+    return _ref = {}, _defineProperty(_ref, ".list-group-item-".concat(state), css$1(_templateObject13$2 || (_templateObject13$2 = _taggedTemplateLiteral(["\n      background-color: ", ";\n    "])), shiftColor(function (t) {
       return t['list-group-item-bg-scale'];
     }, value))), _defineProperty(_ref, ".list-group-item-".concat(state, "-text"), css$1(_templateObject14$1 || (_templateObject14$1 = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), shiftColor(function (t) {
       return t['list-group-item-color-scale'];
@@ -41308,7 +41415,7 @@
 
     var classes = getStyles(styles$x, ['.list-group-item', first && '.list-group-item-first', last && '.list-group-item-last', active && '.list-group-item-active', disabled && '.list-group-item-disabled', !first && '.list-group-item-not-first', !first && active && '.list-group-item-not-first-active', flush && '.list-group-item-flush', flush && last && '.list-group-item-flush-last', color && ".list-group-item-".concat(color)]);
     var textClasses = getStyles(styles$x, ['.list-group-item-text', active && '.list-group-item-active-text', disabled && '.list-group-item-disabled-text', color && ".list-group-item-".concat(color, "-text")]);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       style: [classes, style],
       textStyle: [textClasses, textStyle]
@@ -41387,7 +41494,7 @@
     var activeClasses = getStyles(styles, ['.list-group-item-active', color && ".list-group-item-".concat(color, "-action-active")]);
     var textClasses = getStyles(styles, ['.list-group-item-text', '.list-group-item-action-text', disabled && '.list-group-item-disabled-text', color && ".list-group-item-".concat(color, "-text"), color && ".list-group-item-".concat(color, "-action-text")]);
     var activeTextClasses = getStyles(styles, ['.list-group-item-active-text', color && ".list-group-item-".concat(color, "-action-active-text")]);
-    return /*#__PURE__*/React__default["default"].createElement(Pressable, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(Pressable, _extends$1({}, elementProps, {
       ref: modifierRef,
       active: active,
       disabled: disabled,
@@ -41420,7 +41527,7 @@
         elementProps = _objectWithoutProperties(props, _excluded$B);
 
     var classes = getStyles(styles$w, ['.list-group', flush && '.list-group-flush']); // TODO: Implement TabContext
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       accessibilityRole: null,
       style: [classes, style]
@@ -41497,7 +41604,7 @@
     var media = useMedia();
     var classes = getStyles(styles$v, ['link', hovered]);
     var resolveStyle = useStyle([classes, style]);
-    return /*#__PURE__*/React__default["default"].createElement(Text, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(Text, _extends$1({}, elementProps, {
       ref: actionRef,
       accessibilityRole: getRole$1(actionProps),
       accessible: true,
@@ -41570,7 +41677,7 @@
     var resolveStyle = useStyle(style, styleName);
     var resolveTextStyle = useStyle([context && context.style, textStyle]);
     var hasTextStyle = context && context.style || textStyle;
-    return /*#__PURE__*/React__default["default"].createElement(_reactNative.ScrollView, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(_reactNative.ScrollView, _extends$1({}, elementProps, {
       ref: ref,
       contentContainerStyle: resolveContentContainerStyle({
         media: media
@@ -41596,9 +41703,7 @@
   };
 
   function useScrollbarEffects(_ref) {
-    var ref = _ref.ref,
-        keepBodyScroll = _ref.keepBodyScroll,
-        centered = _ref.centered,
+    var keepBodyScroll = _ref.keepBodyScroll,
         visible = _ref.visible;
 
     if (_reactNative.Platform.OS !== 'web' || keepBodyScroll) {
@@ -41613,9 +41718,9 @@
 
       if (!scrollbarWidth.current) {
         scrollbarWidth.current = computeScrollbarWidth();
-      }
+      } // const element = findNodeHandle(ref.current);
+
 
-      var element = _reactNative.findNodeHandle(ref.current);
       var rect = document.body.getBoundingClientRect();
       var isBodyOverflowing = rect.left + rect.right < window.innerWidth; // Set body and fixed elements padding adjustments.
 
@@ -41630,21 +41735,6 @@
           // eslint-disable-next-line no-param-reassign
           el.style.width = "calc(100% - ".concat(scrollbarWidth.current, "px)");
         });
-      }
-
-      var isModalOverflowing = element.scrollHeight > document.documentElement.clientHeight;
-
-      if (centered) {
-        // Set dialog padding adjustments.
-        if (!isBodyOverflowing && isModalOverflowing) {
-          // eslint-disable-next-line no-param-reassign
-          element.style.paddingLeft = "".concat(scrollbarWidth.current, "px");
-        }
-
-        if (isBodyOverflowing && !isModalOverflowing) {
-          // eslint-disable-next-line no-param-reassign
-          element.style.paddingRight = "".concat(scrollbarWidth.current, "px");
-        }
       } // Add "overflow: hidden" to body element.
 
 
@@ -41669,9 +41759,6 @@
     }, [scrollable]);
   }
 
-  var ModalContext = /*#__PURE__*/React__default["default"].createContext();
-  ModalContext.displayName = 'ModalContext';
-
   var _excluded$y = ["children", "style"];
 
   var _templateObject$u;
@@ -41689,7 +41776,7 @@
         elementProps = _objectWithoutProperties(props, _excluded$y);
 
     var classes = getStyles(styles$u, ['.modal-header']);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       style: [classes, style]
     }), children);
@@ -41714,7 +41801,7 @@
         elementProps = _objectWithoutProperties(props, _excluded$x);
 
     var classes = getStyles(styles$t, ['.modal-title']);
-    return /*#__PURE__*/React__default["default"].createElement(Heading$1, _extends({
+    return /*#__PURE__*/React__default["default"].createElement(Heading$1, _extends$1({
       size: 5
     }, elementProps, {
       ref: ref,
@@ -41724,13 +41811,15 @@
   ModalTitle.displayName = 'ModalTitle';
   ModalTitle.propTypes = propTypes$x;
 
-  var _excluded$w = ["children", "style"];
+  var _excluded$w = ["children", "style", "contentContainerStyle"];
 
   var _templateObject$s;
   var propTypes$w = {
     children: PropTypes.node.isRequired,
     // eslint-disable-next-line react/forbid-prop-types
-    style: PropTypes.any
+    style: PropTypes.any,
+    // eslint-disable-next-line react/forbid-prop-types
+    contentContainerStyle: PropTypes.any
   };
   var styles$s = StyleSheet.create({
     '.modal-body': css$1(_templateObject$s || (_templateObject$s = _taggedTemplateLiteral(["\n    position: relative;\n    // Enable \"flex-grow: 1\" so that the body take up as much space as possible\n    // when there should be a fixed height on \".modal-dialog\".\n    // Note from bootstrap-rn: Centered modals do not work with this style, but\n    // everything just works fine without this style.\n    // flex: 1 1 auto;\n    padding: $modal-inner-padding;\n  "])))
@@ -41738,6 +41827,7 @@
   var ModalBody = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
     var children = props.children,
         style = props.style,
+        contentContainerStyle = props.contentContainerStyle,
         elementProps = _objectWithoutProperties(props, _excluded$w);
 
     var _useForcedContext = useForcedContext(ModalContext),
@@ -41745,10 +41835,10 @@
 
     var classes = getStyles(styles$s, ['.modal-body']);
     var FlexView = scrollable ? ScrollView : View;
-    return /*#__PURE__*/React__default["default"].createElement(FlexView, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(FlexView, _extends$1({}, elementProps, {
       ref: ref,
-      style: scrollable ? undefined : [classes, style],
-      contentContainerStyle: scrollable ? [classes, style] : undefined
+      style: scrollable ? style : [classes, style],
+      contentContainerStyle: scrollable ? [classes, contentContainerStyle] : undefined
     }), children);
   });
   ModalBody.displayName = 'ModalBody';
@@ -41771,7 +41861,7 @@
         elementProps = _objectWithoutProperties(props, _excluded$v);
 
     var classes = getStyles(styles$r, ['.modal-footer']);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       style: [classes, style]
     }), children);
@@ -41781,7 +41871,7 @@
 
   var _excluded$u = ["children", "visible", "size", "backdrop", "scrollable", "centered", "onToggle", "style", "textStyle"];
 
-  var _templateObject$q, _templateObject2$l, _templateObject3$a, _templateObject4$8, _templateObject5$6, _templateObject6$5, _templateObject7$4, _templateObject8$3, _templateObject9$1, _templateObject10$1, _templateObject11$1;
+  var _templateObject$q, _templateObject2$l, _templateObject3$a, _templateObject4$8, _templateObject5$6, _templateObject6$5, _templateObject7$4, _templateObject8$3, _templateObject9$2, _templateObject10$2, _templateObject11$2;
   var MODAL_SIZES = ['sm', 'lg', 'xl'];
   var propTypes$u = {
     children: PropTypes.node.isRequired,
@@ -41798,16 +41888,16 @@
   };
   var styles$q = StyleSheet.create({
     '.modal': css$1(_templateObject$q || (_templateObject$q = _taggedTemplateLiteral(["\n    position: absolute; // fixed;\n    top: 0;\n    left: 0;\n    z-index: $zindex-modal;\n    // display: none;\n    width: 100%;\n    height: 100%;\n    // overflow-x: hidden;\n    // overflow-y: auto;\n    // Prevent Chrome on Windows from adding a focus outline. For details, see\n    // https://github.com/twbs/bootstrap/pull/10951.\n    @include platform(web) {\n      outline-width: 0; // outline: 0;\n    }\n    // We deliberately don't use \"-webkit-overflow-scrolling: touch;\" due to a\n    // gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342\n    // See also https://github.com/twbs/bootstrap/issues/17695\n  "]))),
-    '.modal-dialog': css$1(_templateObject2$l || (_templateObject2$l = _taggedTemplateLiteral(["\n    position: relative;\n    width: auto;\n    margin: $modal-dialog-margin;\n    // allow clicks to pass through for custom click handling to close modal\n    // pointer-events: none;\n    align-self: center; // added for bootstrap-rn\n\n    @include media-breakpoint-up(sm) {\n      max-width: $modal-md;\n      margin: $modal-dialog-margin-y-sm-up;\n    }\n  "]))),
+    '.modal-dialog': css$1(_templateObject2$l || (_templateObject2$l = _taggedTemplateLiteral(["\n    position: relative;\n    width: auto;\n    margin: $modal-dialog-margin;\n    // allow clicks to pass through for custom click handling to close modal\n    // pointer-events: none;\n\n    @include media-breakpoint-up(sm) {\n      width: 100%; // added for bootstrap-rn\n      max-width: $modal-md;\n      margin-right: auto;\n      margin-left: auto;\n    }\n  "]))),
     '.modal-dialog-scrollable': css$1(_templateObject3$a || (_templateObject3$a = _taggedTemplateLiteral(["\n    flex-shrink: 1; // added for bootstrap-rn\n    // height: calc(100% - var(--#{$prefix}modal-margin) * 2);\n  "]))),
     '.modal-dialog-scrollable .modal-content': css$1(_templateObject4$8 || (_templateObject4$8 = _taggedTemplateLiteral(["\n    max-height: 100%;\n    overflow: hidden;\n  "]))),
     '.modal-dialog-centered': css$1(_templateObject5$6 || (_templateObject5$6 = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: row; // added for bootstrap-rn\n    flex-grow: 1; // added for bootstrap-rn\n    align-items: center;\n    // min-height: calc(100% - var(--#{$prefix}modal-margin) * 2);\n  "]))),
     '.modal-content': css$1(_templateObject6$5 || (_templateObject6$5 = _taggedTemplateLiteral(["\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    width: 100%; // Ensure \".modal-content\" extends the full width of the parent \".modal-dialog\"\n    // counteract the pointer-events: none; in the .modal-dialog\n    // pointer-events: auto;\n    background-color: $modal-content-bg;\n    // background-clip: padding-box;\n    border: $modal-content-border-width solid $modal-content-border-color;\n    border-radius: $modal-content-border-radius;\n    // @include box-shadow($modal-content-box-shadow-xs);\n    // Remove focus outline from opened modal\n    // outline: 0;\n\n    @include media-breakpoint-up(sm) {\n      // @include box-shadow($modal-content-box-shadow-sm-up);\n    }\n  "]))),
     '.modal-content-text': css$1(_templateObject7$4 || (_templateObject7$4 = _taggedTemplateLiteral(["\n    color: $modal-content-color;\n  "]))),
     '.modal-backdrop': css$1(_templateObject8$3 || (_templateObject8$3 = _taggedTemplateLiteral(["\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: $zindex-modal-backdrop;\n    width: 100%;\n    height: 100%;\n    background-color: $modal-backdrop-bg;\n    opacity: $modal-backdrop-opacity;\n  "]))),
-    '.modal-sm': css$1(_templateObject9$1 || (_templateObject9$1 = _taggedTemplateLiteral(["\n    @include media-breakpoint-up(sm) {\n      max-width: $modal-sm;\n    }\n  "]))),
-    '.modal-lg': css$1(_templateObject10$1 || (_templateObject10$1 = _taggedTemplateLiteral(["\n    @include media-breakpoint-up(lg) {\n      max-width: $modal-lg;\n    }\n  "]))),
-    '.modal-xl': css$1(_templateObject11$1 || (_templateObject11$1 = _taggedTemplateLiteral(["\n    @include media-breakpoint-up(lg) {\n      max-width: $modal-lg;\n    }\n    @include media-breakpoint-up(xl) {\n      max-width: $modal-xl;\n    }\n  "])))
+    '.modal-sm': css$1(_templateObject9$2 || (_templateObject9$2 = _taggedTemplateLiteral(["\n    @include media-breakpoint-up(sm) {\n      max-width: $modal-sm;\n    }\n  "]))),
+    '.modal-lg': css$1(_templateObject10$2 || (_templateObject10$2 = _taggedTemplateLiteral(["\n    @include media-breakpoint-up(lg) {\n      max-width: $modal-lg;\n    }\n    @include media-breakpoint-up(xl) {\n      max-width: $modal-xl;\n    }\n  "]))),
+    '.modal-xl': css$1(_templateObject11$2 || (_templateObject11$2 = _taggedTemplateLiteral(["\n    @include media-breakpoint-up(xl) {\n      max-width: $modal-xl;\n    }\n  "])))
   });
   var Modal = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
     var children = props.children,
@@ -41824,13 +41914,10 @@
         textStyle = props.textStyle,
         elementProps = _objectWithoutProperties(props, _excluded$u);
 
-    var modalRef = React.useRef();
     var dialogRef = React.useRef();
     var modal = useModal(scrollable);
     useScrollbarEffects({
-      ref: modalRef,
       keepBodyScroll: false,
-      centered: true,
       visible: visible
     });
     var backdropClasses = getStyles(styles$q, ['.modal-backdrop']);
@@ -41847,7 +41934,6 @@
     }, backdrop && /*#__PURE__*/React__default["default"].createElement(View, {
       style: backdropClasses
     }), /*#__PURE__*/React__default["default"].createElement(FlexView, {
-      ref: modalRef,
       style: classes,
       contentContainerStyle: scrollable ? undefined : {
         flexGrow: 1
@@ -41856,16 +41942,20 @@
       dialogRef: dialogRef,
       onClose: handleToggle,
       backdrop: backdrop
-    }), /*#__PURE__*/React__default["default"].createElement(OverlayProvider, null, /*#__PURE__*/React__default["default"].createElement(View, {
+    }), /*#__PURE__*/React__default["default"].createElement(_reactNative.SafeAreaView, {
+      style: {
+        flexShrink: 1
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(View, {
       ref: dialogRef,
       style: dialogClasses
-    }, /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    }, /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       style: [contentClasses, style],
       textStyle: [contentTextClasses, textStyle]
     }), /*#__PURE__*/React__default["default"].createElement(ModalContext.Provider, {
       value: modal
-    }, children))))));
+    }, /*#__PURE__*/React__default["default"].createElement(OverlayProvider, null, children)))))));
   });
   Modal.displayName = 'Modal';
   Modal.propTypes = propTypes$u;
@@ -41880,7 +41970,7 @@
 
   var _excluded$t = ["children", "active", "disabled", "style", "activeStyle", "textStyle", "activeTextStyle"];
 
-  var _templateObject$p, _templateObject2$k, _templateObject3$9, _templateObject4$7, _templateObject5$5, _templateObject6$4, _templateObject7$3, _templateObject8$2, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20;
+  var _templateObject$p, _templateObject2$k, _templateObject3$9, _templateObject4$7, _templateObject5$5, _templateObject6$4, _templateObject7$3, _templateObject8$2, _templateObject9$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20;
   var propTypes$t = {
     children: PropTypes.node.isRequired,
     active: PropTypes.bool,
@@ -41903,12 +41993,12 @@
     '.nav-tabs .nav-link-disabled': css$1(_templateObject6$4 || (_templateObject6$4 = _taggedTemplateLiteral(["\n    background-color: transparent;\n    border-color: transparent;\n  "]))),
     '.nav-tabs .nav-link-disabled-text': css$1(_templateObject7$3 || (_templateObject7$3 = _taggedTemplateLiteral(["\n    color: $nav-link-disabled-color;\n  "]))),
     '.nav-tabs .nav-link-active': css$1(_templateObject8$2 || (_templateObject8$2 = _taggedTemplateLiteral(["\n    background-color: $nav-tabs-link-active-bg;\n    border-color: $nav-tabs-link-active-border-color;\n\n    &:hover {\n      background-color: $nav-tabs-link-active-bg; // added for bootstrap-rn\n      border-color: $nav-tabs-link-active-border-color; // added for bootstrap-rn\n    }\n    &:focus {\n      background-color: $nav-tabs-link-active-bg; // added for bootstrap-rn\n      border-color: $nav-tabs-link-active-border-color; // added for bootstrap-rn\n    }\n  "]))),
-    '.nav-tabs .nav-link-active-text': css$1(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    color: $nav-tabs-link-active-color;\n\n    &:hover {\n      color: $nav-tabs-link-active-color; // added for bootstrap-rn\n    }\n    &:focus {\n      color: $nav-tabs-link-active-color; // added for bootstrap-rn\n    }\n  "]))),
-    '.nav-pills .nav-link': css$1(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    background: transparent; // none;\n    border: 0;\n    border-radius: $nav-pills-border-radius;\n  "]))),
-    '.nav-pills .nav-link-active': css$1(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    // @include gradient-bg($nav-pills-link-active-bg);\n    background-color: $nav-pills-link-active-bg; // added for bootstrap-rn\n\n    &:hover {\n      background-color: $nav-pills-link-active-bg; // added for bootstrap-rn\n    }\n    &:focus {\n      background-color: $nav-pills-link-active-bg; // added for bootstrap-rn\n    }\n  "]))),
-    '.nav-pills .nav-link-active-text': css$1(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    color: $nav-pills-link-active-color;\n\n    &:hover {\n      color: $nav-pills-link-active-color; // added for bootstrap-rn\n    }\n    &:focus {\n      color: $nav-pills-link-active-color; // added for bootstyl\n    }\n  "]))),
+    '.nav-tabs .nav-link-active-text': css$1(_templateObject9$1 || (_templateObject9$1 = _taggedTemplateLiteral(["\n    color: $nav-tabs-link-active-color;\n\n    &:hover {\n      color: $nav-tabs-link-active-color; // added for bootstrap-rn\n    }\n    &:focus {\n      color: $nav-tabs-link-active-color; // added for bootstrap-rn\n    }\n  "]))),
+    '.nav-pills .nav-link': css$1(_templateObject10$1 || (_templateObject10$1 = _taggedTemplateLiteral(["\n    background: transparent; // none;\n    border: 0;\n    border-radius: $nav-pills-border-radius;\n  "]))),
+    '.nav-pills .nav-link-active': css$1(_templateObject11$1 || (_templateObject11$1 = _taggedTemplateLiteral(["\n    // @include gradient-bg($nav-pills-link-active-bg);\n    background-color: $nav-pills-link-active-bg; // added for bootstrap-rn\n\n    &:hover {\n      background-color: $nav-pills-link-active-bg; // added for bootstrap-rn\n    }\n    &:focus {\n      background-color: $nav-pills-link-active-bg; // added for bootstrap-rn\n    }\n  "]))),
+    '.nav-pills .nav-link-active-text': css$1(_templateObject12$1 || (_templateObject12$1 = _taggedTemplateLiteral(["\n    color: $nav-pills-link-active-color;\n\n    &:hover {\n      color: $nav-pills-link-active-color; // added for bootstrap-rn\n    }\n    &:focus {\n      color: $nav-pills-link-active-color; // added for bootstyl\n    }\n  "]))),
     // Navbar styles
-    '.navbar-nav .nav-link': css$1(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n    padding-right: 0;\n    padding-left: 0;\n  "])))
+    '.navbar-nav .nav-link': css$1(_templateObject13$1 || (_templateObject13$1 = _taggedTemplateLiteral(["\n    padding-right: 0;\n    padding-left: 0;\n  "])))
   }, each(GRID_BREAKPOINTS, function (breakpoint) {
     return _defineProperty({}, ".navbar-expand".concat(infix(next(breakpoint)), " .navbar-nav .nav-link"), css$1(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n      @include media-breakpoint-up(", ") {\n        padding-right: $navbar-nav-link-padding-x;\n        padding-left: $navbar-nav-link-padding-x;\n      }\n    "])), next(breakpoint)));
   })), {}, {
@@ -41946,7 +42036,7 @@
     navbar && '.navbar-nav .nav-link-text', navbar && navbar.expand && ".navbar-expand".concat(infix(navbar.expand), " .navbar-nav .nav-link-text"), navbar && ".navbar-".concat(navbar.variant, " .navbar-nav .nav-link-text"), navbar && disabled && ".navbar-".concat(navbar.variant, " .navbar-nav .nav-link-disabled-text")]);
     var activeTextClasses = getStyles(styles$p, [variant && ".nav-".concat(variant, " .nav-link-active-text"), // Navbar styles
     navbar && ".navbar-".concat(navbar.variant, " .navbar-nav .nav-link-active-text")]);
-    return /*#__PURE__*/React__default["default"].createElement(Pressable, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(Pressable, _extends$1({}, elementProps, {
       ref: modifierRef,
       active: active,
       disabled: disabled,
@@ -42002,7 +42092,7 @@
     var tabbable = React.useContext(TabContext);
     var classes = getStyles(styles$o, [!navbar && '.nav', variant === 'tabs' && '.nav-tabs', // Navbar styles
     navbar && '.navbar-nav', navbar && navbar.expand && ".navbar-expand".concat(navbar.expand === true ? '' : "-".concat(navbar.expand), " .navbar-nav")]);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       accessibilityRole: getRole(tabbable, navbar),
       style: [classes, style]
@@ -42017,32 +42107,39 @@
   Nav.Context = NavContext;
   Nav.Link = NavLink;
 
-  var _excluded$r = ["children", "style"];
+  var _excluded$r = ["children", "style", "textStyle"];
 
   var _templateObject$n, _templateObject2$i, _templateObject3$7;
   var propTypes$r = {
     children: PropTypes.node.isRequired,
     // eslint-disable-next-line react/forbid-prop-types
-    style: PropTypes.any
+    style: PropTypes.any,
+    // eslint-disable-next-line react/forbid-prop-types
+    textStyle: PropTypes.any
   };
   var styles$n = StyleSheet.create({
     '.navbar-text': css$1(_templateObject$n || (_templateObject$n = _taggedTemplateLiteral(["\n    padding-top: $nav-link-padding-y;\n    padding-bottom: $nav-link-padding-y;\n  "]))),
-    '.navbar-light .navbar-text': css$1(_templateObject2$i || (_templateObject2$i = _taggedTemplateLiteral(["\n    color: $navbar-light-color;\n  "]))),
-    '.navbar-dark .navbar-text': css$1(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteral(["\n    color: $navbar-dark-color;\n  "])))
+    '.navbar-light .navbar-text-text': css$1(_templateObject2$i || (_templateObject2$i = _taggedTemplateLiteral(["\n    color: $navbar-light-color;\n  "]))),
+    '.navbar-dark .navbar-text-text': css$1(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteral(["\n    color: $navbar-dark-color;\n  "])))
   });
   var NavbarText = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
     var children = props.children,
         style = props.style,
+        textStyle = props.textStyle,
         elementProps = _objectWithoutProperties(props, _excluded$r);
 
     var _useForcedContext = useForcedContext(NavbarContext),
         variant = _useForcedContext.variant;
 
-    var classes = getStyles(styles$n, ['.navbar-text', ".navbar-".concat(variant, " .navbar-text")]);
-    return /*#__PURE__*/React__default["default"].createElement(Text, _extends({}, elementProps, {
+    var classes = getStyles(styles$n, ['.navbar-text']);
+    var textClasses = getStyles(styles$n, [".navbar-".concat(variant, " .navbar-text-text")]); // composite component
+
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       style: [classes, style]
-    }), children);
+    }), /*#__PURE__*/React__default["default"].createElement(Text, {
+      style: [textClasses, textStyle]
+    }, children));
   });
   NavbarText.displayName = 'NavbarText';
   NavbarText.propTypes = propTypes$r;
@@ -42074,7 +42171,7 @@
 
     var classes = getStyles(styles$m, ['.navbar-brand']);
     var textClasses = getStyles(styles$m, ['.navbar-brand-text', ".navbar-".concat(variant, " .navbar-brand-text")]);
-    return /*#__PURE__*/React__default["default"].createElement(Pressable, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(Pressable, _extends$1({}, elementProps, {
       ref: ref,
       style: [classes, style],
       textStyle: [textClasses, textStyle]
@@ -42113,7 +42210,7 @@
       return null;
     }
 
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       style: [classes, style]
     }), children);
@@ -42178,7 +42275,7 @@
     var classes = getStyles(styles$k, ['.navbar-toggler', ".navbar-".concat(variant, " .navbar-toggler"), expand && ".navbar-expand".concat(expand === true ? '' : "-".concat(expand), " .navbar-toggler")]);
     var textClasses = getStyles(styles$k, ['.navbar-toggler-text', ".navbar-".concat(variant, " .navbar-toggler-text")]);
     var iconClasses = getStyles(styles$k, ['.navbar-toggler-icon']);
-    return /*#__PURE__*/React__default["default"].createElement(Pressable, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(Pressable, _extends$1({}, elementProps, {
       ref: ref,
       toggle: useToggleNavbar,
       style: [classes, style],
@@ -42257,7 +42354,7 @@
 
     var navbar = useNavbar(variant, defaultExpanded, expanded, onToggle, expand);
     var classes = getStyles(styles$j, ['.navbar', expand && ".navbar-expand".concat(expand === true ? '' : "-".concat(expand))]);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       style: [classes, style]
     }), /*#__PURE__*/React__default["default"].createElement(NavbarContext.Provider, {
@@ -42273,6 +42370,12 @@
   Navbar.useDismiss = useDismissNavbar;
   Navbar.useToggle = useToggleNavbar;
 
+  function useOffcanvas() {
+    return React.useMemo(function () {
+      return {};
+    }, []);
+  }
+
   var _excluded$k = ["children", "style"];
 
   var _templateObject$i, _templateObject2$d;
@@ -42293,7 +42396,7 @@
 
     var navbar = React.useContext(NavbarContext);
     var classes = getStyles(styles$i, ['.offcanvas-header', navbar && navbar.expand && ".navbar-expand".concat(navbar.expand === true ? '' : "-".concat(navbar.expand), " .offcanvas-header")]);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       style: [classes, style]
     }), children);
@@ -42318,7 +42421,7 @@
         elementProps = _objectWithoutProperties(props, _excluded$j);
 
     var classes = getStyles(styles$h, ['.offcanvas-title']);
-    return /*#__PURE__*/React__default["default"].createElement(Heading$1, _extends({
+    return /*#__PURE__*/React__default["default"].createElement(Heading$1, _extends$1({
       size: 5
     }, elementProps, {
       ref: ref,
@@ -42328,29 +42431,33 @@
   OffcanvasTitle.displayName = 'OffcanvasTitle';
   OffcanvasTitle.propTypes = propTypes$l;
 
-  var _excluded$i = ["children", "style"];
+  var _excluded$i = ["children", "style", "contentContainerStyle"];
 
   var _templateObject$g, _templateObject2$c;
   var propTypes$k = {
     children: PropTypes.node.isRequired,
     // eslint-disable-next-line react/forbid-prop-types
-    style: PropTypes.any
+    style: PropTypes.any,
+    // eslint-disable-next-line react/forbid-prop-types
+    contentContainerStyle: PropTypes.any
   };
   var styles$g = StyleSheet.create(_objectSpread2({
-    '.offcanvas-body': css$1(_templateObject$g || (_templateObject$g = _taggedTemplateLiteral(["\n    flex-grow: 1;\n    padding: $offcanvas-padding-y $offcanvas-padding-x;\n    // overflow-y: auto;\n  "])))
+    '.offcanvas-body': css$1(_templateObject$g || (_templateObject$g = _taggedTemplateLiteral(["\n    // flex-grow: 1;\n    padding: $offcanvas-padding-y $offcanvas-padding-x;\n    // overflow-y: auto;\n  "])))
   }, each(GRID_BREAKPOINTS, function (breakpoint) {
     return _defineProperty({}, ".navbar-expand".concat(infix(next(breakpoint)), " .offcanvas-body"), css$1(_templateObject2$c || (_templateObject2$c = _taggedTemplateLiteral(["\n      @include media-breakpoint-up(", ") {\n        display: flex;\n        flex-grow: 0;\n        padding: 0;\n        // overflow-y: visible;\n      }\n    "])), next(breakpoint)));
   })));
   var OffcanvasBody = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
     var children = props.children,
         style = props.style,
+        contentContainerStyle = props.contentContainerStyle,
         elementProps = _objectWithoutProperties(props, _excluded$i);
 
     var navbar = React.useContext(NavbarContext);
-    var classes = getStyles(styles$g, ['.offcanvas-body', navbar && navbar.expand && ".navbar-expand".concat(navbar.expand === true ? '' : "-".concat(navbar.expand), " .offcanvas-body")]);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    var contentContainerClasses = getStyles(styles$g, ['.offcanvas-body', navbar && navbar.expand && ".navbar-expand".concat(navbar.expand === true ? '' : "-".concat(navbar.expand), " .offcanvas-body")]);
+    return /*#__PURE__*/React__default["default"].createElement(ScrollView, _extends$1({}, elementProps, {
       ref: ref,
-      style: [classes, style]
+      style: style,
+      contentContainerStyle: [contentContainerClasses, contentContainerStyle]
     }), children);
   });
   OffcanvasBody.displayName = 'OffcanvasBody';
@@ -42358,7 +42465,7 @@
 
   var _excluded$h = ["children", "visible", "placement", "backdrop", "scroll", "onToggle", "style", "textStyle"];
 
-  var _templateObject$f, _templateObject2$b, _templateObject3$4, _templateObject4$3, _templateObject5$3, _templateObject6$2, _templateObject7$1, _templateObject8;
+  var _templateObject$f, _templateObject2$b, _templateObject3$4, _templateObject4$3, _templateObject5$3, _templateObject6$2, _templateObject7$1, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
   var PLACEMENTS = ['top', 'bottom', 'start', 'end']; // , 'auto'
 
   var propTypes$j = {
@@ -42375,15 +42482,23 @@
     textStyle: PropTypes.any
   };
   var styles$f = StyleSheet.create(_objectSpread2({
-    '.offcanvas': css$1(_templateObject$f || (_templateObject$f = _taggedTemplateLiteral(["\n    position: absolute; // fixed;\n    bottom: 0;\n    z-index: $zindex-offcanvas;\n    display: flex;\n    flex-direction: column;\n    max-width: 100%;\n    // visibility: hidden;\n    background-color: $offcanvas-bg-color;\n    // background-clip: padding-box;\n    @include platform(web) {\n      outline-width: 0; // outline: 0;\n    }\n    // @include box-shadow($offcanvas-box-shadow);\n    // @include transition(transform $offcanvas-transition-duration ease-in-out);\n  "]))),
+    '.offcanvas': css$1(_templateObject$f || (_templateObject$f = _taggedTemplateLiteral(["\n    position: absolute; // fixed;\n    // bottom: 0;\n    z-index: $zindex-offcanvas;\n    display: flex;\n    flex-direction: column;\n    max-width: 100%;\n    // visibility: hidden;\n    background-color: $offcanvas-bg-color;\n    // background-clip: padding-box;\n    @include platform(web) {\n      outline-width: 0; // outline: 0;\n    }\n    // @include box-shadow($offcanvas-box-shadow);\n    // @include transition(transform $offcanvas-transition-duration ease-in-out);\n  "]))),
     '.offcanvas-text': css$1(_templateObject2$b || (_templateObject2$b = _taggedTemplateLiteral(["\n    color: $offcanvas-color;\n  "]))),
     '.offcanvas-backdrop': css$1(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral(["\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: $zindex-offcanvas-backdrop;\n    width: 100%;\n    height: 100%;\n    background-color: $offcanvas-backdrop-bg;\n    opacity: $offcanvas-backdrop-opacity;\n  "]))),
-    '.offcanvas-start': css$1(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteral(["\n    top: 0;\n    left: 0;\n    width: $offcanvas-horizontal-width;\n    border-right-width: $offcanvas-border-width;\n    border-style: solid;\n    border-color: $offcanvas-border-color;\n    // transform: translateX(-100%);\n  "]))),
-    '.offcanvas-end': css$1(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteral(["\n    top: 0;\n    right: 0;\n    width: $offcanvas-horizontal-width;\n    border-left-width: $offcanvas-border-width;\n    border-style: solid;\n    border-color: $offcanvas-border-color;\n    // transform: translateX(100%);\n  "]))),
-    '.offcanvas-top': css$1(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteral(["\n    top: 0;\n    right: 0;\n    left: 0;\n    height: $offcanvas-vertical-height;\n    max-height: 100%;\n    border-bottom-width: $offcanvas-border-width;\n    border-style: solid;\n    border-color: $offcanvas-border-color;\n    // transform: translateY(-100%);\n  "]))),
-    '.offcanvas-bottom': css$1(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteral(["\n    right: 0;\n    left: 0;\n    height: $offcanvas-vertical-height;\n    max-height: 100%;\n    width: 100%;\n    border-top-width: $offcanvas-border-width;\n    border-style: solid;\n    border-color: $offcanvas-border-color;\n    // transform: translateY(100%);\n  "])))
+    '.offcanvas-start': css$1(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteral(["\n    top: 0;\n    bottom: 0; // added for bootstrap-rn\n    left: 0;\n    // width: $offcanvas-horizontal-width;\n    border-right-width: $offcanvas-border-width;\n    border-style: solid;\n    border-color: $offcanvas-border-color;\n    // transform: translateX(-100%);\n  "]))),
+    '.offcanvas-end': css$1(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteral(["\n    top: 0;\n    bottom: 0; // added for bootstrap-rn\n    right: 0;\n    // width: $offcanvas-horizontal-width;\n    border-left-width: $offcanvas-border-width;\n    border-style: solid;\n    border-color: $offcanvas-border-color;\n    // transform: translateX(100%);\n  "]))),
+    '.offcanvas-top': css$1(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteral(["\n    top: 0;\n    right: 0;\n    left: 0;\n    // height: $offcanvas-vertical-height;\n    max-height: 100%;\n    border-bottom-width: $offcanvas-border-width;\n    border-style: solid;\n    border-color: $offcanvas-border-color;\n    // transform: translateY(-100%);\n  "]))),
+    '.offcanvas-bottom': css$1(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteral(["\n    bottom: 0; // added for bootstrap-rn\n    right: 0;\n    left: 0;\n    // height: $offcanvas-vertical-height;\n    max-height: 100%;\n    width: 100%;\n    border-top-width: $offcanvas-border-width;\n    border-style: solid;\n    border-color: $offcanvas-border-color;\n    // transform: translateY(100%);\n  "]))),
+    // The following .offcanvas-dialog classes are added for bootstrap-rn,
+    // because otherwise the text would exceed a width of 100% on native
+    // and also additional width by SafeAreaView would not be applied.
+    '.offcanvas-dialog': css$1(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    max-width: 100%;\n    max-height: 100%;\n  "]))),
+    '.offcanvas-dialog-start': css$1(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    width: $offcanvas-horizontal-width;\n  "]))),
+    '.offcanvas-dialog-end': css$1(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    width: $offcanvas-horizontal-width;\n  "]))),
+    '.offcanvas-dialog-top': css$1(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    height: $offcanvas-vertical-height;\n  "]))),
+    '.offcanvas-dialog-bottom': css$1(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    height: $offcanvas-vertical-height;\n  "])))
   }, each(GRID_BREAKPOINTS, function (breakpoint) {
-    return _defineProperty({}, ".navbar-expand".concat(infix(next(breakpoint)), " .offcanvas"), css$1(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      @include media-breakpoint-up(", ") {\n        position: relative; // inherit;\n        bottom: 0;\n        // z-index: auto;\n        flex-grow: 1;\n        // visibility: visible !important; // stylelint-disable-line declaration-no-important\n        background-color: transparent;\n        border-right-width: 0;\n        border-left-width: 0;\n        // @include box-shadow(none);\n        // @include transition(none);\n        // transform: none;\n      }\n    "])), next(breakpoint)));
+    return _defineProperty({}, ".navbar-expand".concat(infix(next(breakpoint)), " .offcanvas"), css$1(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n      @include media-breakpoint-up(", ") {\n        position: relative; // inherit;\n        bottom: 0;\n        // z-index: auto;\n        flex-grow: 1;\n        // visibility: visible !important; // stylelint-disable-line declaration-no-important\n        background-color: transparent;\n        border-right-width: 0;\n        border-left-width: 0;\n        // @include box-shadow(none);\n        // @include transition(none);\n        // transform: none;\n      }\n    "])), next(breakpoint)));
   })));
   var Offcanvas = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
     var children = props.children,
@@ -42402,18 +42517,18 @@
     var media = useMedia();
     var navbar = React.useContext(NavbarContext);
     var offcanvasRef = React.useRef();
+    var offcanvas = useOffcanvas();
     useScrollbarEffects({
-      ref: offcanvasRef,
       keepBodyScroll: scroll,
-      centered: false,
       visible: visible
     });
     var backdropClasses = getStyles(styles$f, ['.offcanvas-backdrop']);
     var classes = getStyles(styles$f, ['.offcanvas', ".offcanvas-".concat(placement), navbar && navbar.expand && ".navbar-expand".concat(navbar.expand === true ? '' : "-".concat(navbar.expand), " .offcanvas")]);
+    var dialogClasses = getStyles(styles$f, ['.offcanvas-dialog', ".offcanvas-dialog-".concat(placement)]);
     var textClasses = getStyles(styles$f, ['.offcanvas-content-text']); // Render children without modal for navbar.
 
     if (navbar && navbar.expand && (navbar.expand === true || media.up(navbar.expand))) {
-      return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+      return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
         ref: ref,
         style: [classes, style],
         textStyle: [textClasses, textStyle]
@@ -42430,14 +42545,23 @@
       dialogRef: offcanvasRef,
       onClose: handleToggle,
       backdrop: backdrop
-    })), /*#__PURE__*/React__default["default"].createElement(ScrollView, _extends({}, elementProps, {
+    })), /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: concatRefs(offcanvasRef, ref),
       style: [classes, style],
       textStyle: [textClasses, textStyle]
-    }), /*#__PURE__*/React__default["default"].createElement(OverlayProvider, null, children)));
+    }), /*#__PURE__*/React__default["default"].createElement(_reactNative.SafeAreaView, {
+      style: {
+        flexShrink: 1
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(View, {
+      style: dialogClasses
+    }, /*#__PURE__*/React__default["default"].createElement(OffcanvasContext.Provider, {
+      value: offcanvas
+    }, /*#__PURE__*/React__default["default"].createElement(OverlayProvider, null, children))))));
   });
   Offcanvas.displayName = 'Offcanvas';
   Offcanvas.propTypes = propTypes$j;
+  Offcanvas.Context = OffcanvasContext;
   Offcanvas.Header = OffcanvasHeader;
   Offcanvas.Title = OffcanvasTitle;
   Offcanvas.Body = OffcanvasBody;
@@ -42468,7 +42592,7 @@
     };
 
     if (provideWebComponent) {
-      return /*#__PURE__*/React__default["default"].createElement(_reactNative.Picker.Item, _extends({}, commonProps, {
+      return /*#__PURE__*/React__default["default"].createElement(_reactNative.Picker.Item, _extends$1({}, commonProps, {
         ref: ref,
         label: label,
         value: value
@@ -42478,7 +42602,7 @@
     var classes = getStyles(styles$e, ['.form-select-item', disabled && '.form-select-item-disabled']);
     var resolveStyle = useStyle(classes);
     var selected = value === context.value;
-    return /*#__PURE__*/React__default["default"].createElement(Pressable, _extends({}, commonProps, {
+    return /*#__PURE__*/React__default["default"].createElement(Pressable, _extends$1({}, commonProps, {
       ref: ref,
       onPress: function onPress() {
         context.onChange(value);
@@ -42594,7 +42718,7 @@
     };
 
     if (provideWebComponent) {
-      return /*#__PURE__*/React__default["default"].createElement(_reactNative.Picker, _extends({}, elementProps, commonProps, {
+      return /*#__PURE__*/React__default["default"].createElement(_reactNative.Picker, _extends$1({}, elementProps, commonProps, {
         ref: modifierRef,
         selectedValue: value,
         onValueChange: _onChange
@@ -42626,7 +42750,7 @@
         },
         useNativeComponent: true
       }
-    }, /*#__PURE__*/React__default["default"].createElement(Text, _extends({}, elementProps, commonProps, {
+    }, /*#__PURE__*/React__default["default"].createElement(Text, _extends$1({}, elementProps, commonProps, {
       ref: modifierRef // role "listbox" is not supported in react-native :(
       ,
       accessibilityRole: "button",
@@ -42670,7 +42794,7 @@
         elementProps = _objectWithoutProperties(props, _excluded$f);
 
     var classes = getStyles(styles$c, ['.placeholders']);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       style: [classes, style]
     }), children);
@@ -42719,8 +42843,9 @@
         max = _useForcedContext.max;
 
     var classes = getStyles(styles$b, ['.progress-bar']);
-    var textClasses = getStyles(styles$b, ['.progress-bar-text']);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    var textClasses = getStyles(styles$b, ['.progress-bar-text']); // composite component
+
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       accessibilityRole: "progressbar",
       accessibilityValueNow: value,
@@ -42728,9 +42853,10 @@
       accessibilityValueMax: max,
       style: [classes, style, {
         width: "".concat(getPercentage(value, min, max), "%")
-      }],
-      textStyle: [textClasses, textStyle]
-    }), /*#__PURE__*/React__default["default"].createElement(Text, null, children || ' '));
+      }]
+    }), children && /*#__PURE__*/React__default["default"].createElement(Text, {
+      style: [textClasses, textStyle]
+    }, children));
   });
   ProgressBar.displayName = 'ProgressBar';
   ProgressBar.propTypes = propTypes$f;
@@ -42773,7 +42899,7 @@
     var progress = useProgress(min, max);
     var classes = getStyles(styles$a, ['.progress']);
     var textClasses = getStyles(styles$a, ['.progress-text']);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       style: [classes, style],
       textStyle: [textClasses, textStyle]
@@ -42807,7 +42933,7 @@
     var classes = getStyles(styles$9, ['paragraph', lead && '.lead']); // Accessiblity role paragraph is only supported on web.
 
     var role = _reactNative.Platform.OS === 'web' ? 'paragraph' : null;
-    return /*#__PURE__*/React__default["default"].createElement(Text, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(Text, _extends$1({}, elementProps, {
       ref: ref,
       accessibilityRole: role,
       style: [classes, style]
@@ -42853,7 +42979,7 @@
 
     var classes = getStyles(styles$8, ['.pagination-item', first && '.pagination-item-first', last && '.pagination-item-last', active && '.pagination-item-active', disabled && '.pagination-item-disabled']);
     var textClasses = getStyles(styles$8, [active && '.pagination-item-active', disabled && '.pagination-item-disabled']);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       style: [classes, style],
       textStyle: [textClasses, textStyle]
@@ -42917,7 +43043,7 @@
         elementProps = _objectWithoutProperties(props, _excluded$a);
 
     var classes = getStyles(styles$7, ['.pagination']);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       style: [classes, style]
     }), makeListChildren(children));
@@ -42945,7 +43071,7 @@
         disabled = _props$disabled === void 0 ? false : _props$disabled,
         elementProps = _objectWithoutProperties(props, _excluded$9);
 
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       accessibilityRole: "radiogroup"
     }), /*#__PURE__*/React__default["default"].createElement(RadioContext.Provider, {
@@ -42968,7 +43094,7 @@
         elementProps = _objectWithoutProperties(props, _excluded$8);
 
     var context = useForcedContext(RadioContext);
-    return /*#__PURE__*/React__default["default"].createElement(CheckInput, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(CheckInput, _extends$1({}, elementProps, {
       ref: ref,
       type: "radio",
       value: value === context.value,
@@ -43000,7 +43126,7 @@
         elementProps = _objectWithoutProperties(props, _excluded$7);
 
     var classes = getStyles(styles$6, ['.row']);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       style: [classes, style]
     }), children);
@@ -43009,9 +43135,9 @@
   Row.propTypes = propTypes$8;
 
   var Switch = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
-    var elementProps = _extends({}, props);
+    var elementProps = _extends$1({}, props);
 
-    return /*#__PURE__*/React__default["default"].createElement(CheckInput, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(CheckInput, _extends$1({}, elementProps, {
       ref: ref,
       type: "switch"
     }));
@@ -43095,7 +43221,7 @@
         useNativeDriver: _reactNative.Platform.OS !== 'web'
       })).start();
     }, []);
-    return /*#__PURE__*/React__default["default"].createElement(AnimatedView, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(AnimatedView, _extends$1({}, elementProps, {
       ref: ref,
       accessibilityRole: role,
       accessibilityHidden: true,
@@ -43147,9 +43273,9 @@
     children: PropTypes.node.isRequired
   };
   var TabContent = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
-    var elementProps = _extends({}, props);
+    var elementProps = _extends$1({}, props);
 
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref
     }));
   });
@@ -43179,7 +43305,7 @@
     var id = getElementId(tabbable.identifier, target); // Accessiblity role tabpanel is only supported on web.
 
     var role = _reactNative.Platform.OS === 'web' ? 'tabpanel' : null;
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       nativeID: id,
       accessibilityRole: role,
@@ -43252,7 +43378,7 @@
 
     var classes = getStyles(styles$3, ['.toast-header']);
     var textClasses = getStyles(styles$3, ['.toast-header-text']);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       style: [classes, style],
       textStyle: [textClasses, textStyle]
@@ -43283,7 +43409,7 @@
 
     var classes = getStyles(styles$2, ['.toast-body']);
     var textClasses = getStyles(styles$2, [".toast-body-text"]);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       style: [classes, style],
       textStyle: [textClasses, textStyle]
@@ -43322,7 +43448,7 @@
     var container = React.useContext(ToastContainerContext);
     var classes = getStyles(styles$1, ['.toast', container && !last && '.toast-container .toast']);
     var textClasses = getStyles(styles$1, [".toast-text"]);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       accessibilityRole: "alert",
       accessibilityLive: "assertive",
@@ -43353,7 +43479,7 @@
         elementProps = _objectWithoutProperties(props, _excluded);
 
     var classes = getStyles(styles, ['.toast-container']);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       style: [classes, style]
     }), /*#__PURE__*/React__default["default"].createElement(ToastContainerContext.Provider, {