bootstrap-rn 0.1.4 → 0.1.6

package/dist/bootstrap-rn.esm.js

@@ -1,6 +1,6 @@
 import { OverlayProvider, useOverlayPosition, OverlayContainer } from '@react-native-aria/overlays';
 export { PortalProvider } from '@react-native-aria/overlays';
-import { Platform, PixelRatio, StyleSheet as StyleSheet$1, I18nManager, Dimensions, View as View$1, Text as Text$1, Pressable as Pressable$1, findNodeHandle, TextInput as TextInput$1, Image as Image$1, ImageBackground as ImageBackground$1, ScrollView as ScrollView$1, Modal as Modal$1, Picker as Picker$1, Animated, Easing } from 'react-native';
+import { Platform, PixelRatio, StyleSheet as StyleSheet$1, I18nManager, Dimensions, View as View$1, Pressable as Pressable$1, Text as Text$1, StatusBar, findNodeHandle, TextInput as TextInput$1, Image as Image$1, ImageBackground as ImageBackground$1, ScrollView as ScrollView$1, Modal as Modal$1, SafeAreaView, Picker as Picker$1, Animated, Easing } from 'react-native';
 import { getStylesForProperty, getPropertyName } from 'css-to-react-native';
 import { rgba as rgba$1, mix, parseToRgb } from 'polished';
 import React, { useState, useEffect, useRef, useContext, useMemo, createContext } from 'react';
@@ -830,6 +830,13 @@ function transform(children, theme) {
               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
@@ -1956,7 +1963,7 @@ var utilities = {
 
 };
 
-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;
@@ -1973,7 +1980,7 @@ function makeUtility(options) {
         return null;
       }
 
-      return _defineProperty({}, "".concat(name, "-").concat(breakpoint).concat(suffix), css(_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(_templateObject2$S || (_templateObject2$S = _taggedTemplateLiteral(["\n            @include media-breakpoint-up(", ") {\n              ", ": ", ";\n            }\n          "])), breakpoint, options.property, value));
     }));
   });
 }
@@ -2785,9 +2792,9 @@ function useViewport(initialViewport) {
     });
   }, []);
   useEffect(function () {
-    Dimensions.addEventListener('change', handleChange);
+    var subscription = Dimensions.addEventListener('change', handleChange);
     return function () {
-      Dimensions.removeEventListener('change', handleChange);
+      subscription.remove();
     };
   }, [viewport]);
   return viewport;
@@ -2951,7 +2958,7 @@ View.propTypes = propTypes$1p;
 
 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)),
@@ -2966,7 +2973,7 @@ var styles$18 = StyleSheet.create(_objectSpread2(_objectSpread2({
 }, each(THEME_COLORS, function (state, value) {
   var _ref;
 
-  return _ref = {}, _defineProperty(_ref, ".alert-".concat(state), css(_templateObject2$L || (_templateObject2$L = _taggedTemplateLiteral(["\n      background-color: ", ";\n      border-color: ", ";\n    "])), shiftColor(function (t) {
+  return _ref = {}, _defineProperty(_ref, ".alert-".concat(state), css(_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'];
@@ -2999,110 +3006,41 @@ var Alert = /*#__PURE__*/React.forwardRef(function (props, ref) {
 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(_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(_templateObject2$K || (_templateObject2$K = _taggedTemplateLiteral(["\n    font-weight: $font-weight-bolder;\n  "]))),
-  italic: css(_templateObject3$p || (_templateObject3$p = _taggedTemplateLiteral(["\n    font-style: italic;\n  "]))),
-  small: css(_templateObject4$l || (_templateObject4$l = _taggedTemplateLiteral(["\n    font-size: $small-font-size;\n    line-height: $small-font-size * $line-height-base;\n  "]))),
-  mark: css(_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.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 = 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.createElement(Text$1, _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.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(_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(_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(_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(_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.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.createElement(Text, _extends({}, elementProps, {
+  var classes = getStyles(styles$17, ['.badge']);
+  var textClasses = getStyles(styles$17, ['.badge-text']);
+  return /*#__PURE__*/React.createElement(View, _extends({}, 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
@@ -3110,10 +3048,10 @@ var propTypes$1l = {
   // eslint-disable-next-line react/forbid-prop-types
   textStyle: PropTypes.any
 };
-var styles$15 = StyleSheet.create({
-  '.breadcrumb-item': css(_templateObject$16 || (_templateObject$16 = _taggedTemplateLiteral(["\n    padding-left: $breadcrumb-item-padding-x;\n    padding-right: $breadcrumb-item-padding-x;\n  "]))),
-  '.breadcrumb-text': css(_templateObject2$I || (_templateObject2$I = _taggedTemplateLiteral(["\n    color: $primary;\n  "]))),
-  '.breadcrumb-item-active': css(_templateObject3$o || (_templateObject3$o = _taggedTemplateLiteral(["\n    color: $breadcrumb-active-color;\n  "])))
+var styles$16 = StyleSheet.create({
+  '.breadcrumb-item': css(_templateObject$17 || (_templateObject$17 = _taggedTemplateLiteral(["\n    padding-left: $breadcrumb-item-padding-x;\n    padding-right: $breadcrumb-item-padding-x;\n  "]))),
+  '.breadcrumb-text': css(_templateObject2$P || (_templateObject2$P = _taggedTemplateLiteral(["\n    color: $primary;\n  "]))),
+  '.breadcrumb-item-active': css(_templateObject3$p || (_templateObject3$p = _taggedTemplateLiteral(["\n    color: $breadcrumb-active-color;\n  "])))
 });
 var BreadcrumbItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
@@ -3121,10 +3059,10 @@ var BreadcrumbItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
       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']);
+  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.createElement(View, _extends({}, elementProps, {
     ref: ref,
     style: [classes, style],
@@ -3132,7 +3070,7 @@ var BreadcrumbItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }), children);
 });
 BreadcrumbItem.displayName = 'BreadcrumbItem';
-BreadcrumbItem.propTypes = propTypes$1l;
+BreadcrumbItem.propTypes = propTypes$1m;
 /*
 $breadcrumb-font-size:              null;
 $breadcrumb-padding-y:              0;
@@ -3147,30 +3085,30 @@ $breadcrumb-divider-flipped:        $breadcrumb-divider;
 $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(_templateObject$15 || (_templateObject$15 = _taggedTemplateLiteral(["\n    flex-direction: row;\n  "])))
+var styles$15 = StyleSheet.create({
+  '.breadcrumb': css(_templateObject$16 || (_templateObject$16 = _taggedTemplateLiteral(["\n    flex-direction: row;\n  "])))
 });
 var Breadcrumb = /*#__PURE__*/React.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']);
+  var classes = getStyles(styles$15, ['.breadcrumb']);
   return /*#__PURE__*/React.createElement(View, _extends({}, 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;
@@ -3189,25 +3127,25 @@ $breadcrumb-border-radius:          null;
 var ButtonGroupContext = /*#__PURE__*/React.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(_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(_templateObject$15 || (_templateObject$15 = _taggedTemplateLiteral(["\n    flex-direction: row; // added for bootstrap-rn\n    border-radius: $btn-border-radius;\n  "])))
 });
 var ButtonGroup = /*#__PURE__*/React.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 = Platform.OS === 'web' ? 'group' : null;
   return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
@@ -3221,25 +3159,25 @@ var ButtonGroup = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, 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(_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(_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.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']);
+  var classes = getStyles(styles$13, ['.btn-toolbar']);
   return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
     ref: ref,
     accessibilityRole: "toolbar",
@@ -3247,7 +3185,7 @@ var ButtonToolbar = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }), children);
 });
 ButtonToolbar.displayName = 'ButtonToolbar';
-ButtonToolbar.propTypes = propTypes$1i;
+ButtonToolbar.propTypes = propTypes$1j;
 
 function useForcedContext(Context) {
   var context = useContext(Context);
@@ -3255,7 +3193,7 @@ function useForcedContext(Context) {
   return context;
 }
 
-var _excluded$1j = ["ref"];
+var _excluded$1k = ["ref"];
 function useModifier(name, props, ref) {
   var context = useForcedContext(Context);
   var useModifierHook = context.modifiers[name];
@@ -3266,12 +3204,12 @@ function useModifier(name, props, ref) {
 
   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) {
@@ -3289,7 +3227,7 @@ var getActionHook = function getActionHook(toggle, dismiss) {
 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);
 
@@ -3308,8 +3246,8 @@ function useAction(props, ref) {
   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
@@ -3361,7 +3299,7 @@ var Pressable = /*#__PURE__*/React.forwardRef(function (props, ref) {
       textStyle = actionProps.textStyle,
       activeTextStyle = actionProps.activeTextStyle,
       styleName = actionProps.styleName,
-      elementProps = _objectWithoutProperties(actionProps, _excluded$1h);
+      elementProps = _objectWithoutProperties(actionProps, _excluded$1i);
 
   var media = useMedia();
   var context = useContext(TextStyleContext);
@@ -3398,13 +3336,13 @@ var Pressable = /*#__PURE__*/React.forwardRef(function (props, ref) {
   } : 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 = useState(active),
       _useState2 = _slicedToArray(_useState, 2),
@@ -3423,10 +3361,10 @@ function useToggleButton(props) {
   });
 }
 
-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']),
@@ -3444,14 +3382,14 @@ var propTypes$1g = {
   // eslint-disable-next-line react/forbid-prop-types
   activeTextStyle: PropTypes.any
 };
-var styles$11 = StyleSheet.create(_objectSpread2(_objectSpread2({
-  '.btn': css(_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(_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(_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(_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(_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(_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(_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(_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'];
@@ -3463,11 +3401,11 @@ var styles$11 = StyleSheet.create(_objectSpread2(_objectSpread2({
     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(_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(_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(_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(_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(_templateObject7$c || (_templateObject7$c = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), colorContrast(value))), _defineProperty(_ref, ".btn-".concat(color, "-disabled"), css(_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(_templateObject9$7 || (_templateObject9$7 = _taggedTemplateLiteral(["\n      $disabled-color: ", ";\n\n      color: $disabled-color;\n    "])), colorContrast(value))), _defineProperty(_ref, ".btn-outline-".concat(color), css(_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(_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(_templateObject12$4 || (_templateObject12$4 = _taggedTemplateLiteral(["\n      background-color: transparent;\n    "])))), _defineProperty(_ref, ".btn-outline-".concat(color, "-disabled-text"), css(_templateObject13$4 || (_templateObject13$4 = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), value)), _ref;
+  }, value))), _defineProperty(_ref, ".btn-".concat(color, "-active-text"), css(_templateObject7$c || (_templateObject7$c = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), colorContrast(value))), _defineProperty(_ref, ".btn-".concat(color, "-disabled"), css(_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(_templateObject9$8 || (_templateObject9$8 = _taggedTemplateLiteral(["\n      $disabled-color: ", ";\n\n      color: $disabled-color;\n    "])), colorContrast(value))), _defineProperty(_ref, ".btn-outline-".concat(color), css(_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(_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(_templateObject12$5 || (_templateObject12$5 = _taggedTemplateLiteral(["\n      background-color: transparent;\n    "])))), _defineProperty(_ref, ".btn-outline-".concat(color, "-disabled-text"), css(_templateObject13$5 || (_templateObject13$5 = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), value)), _ref;
 })), {}, {
   '.btn-link-text': css(_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(_templateObject15$2 || (_templateObject15$2 = _taggedTemplateLiteral(["\n    color: $btn-link-disabled-color;\n  "]))),
@@ -3475,7 +3413,7 @@ var styles$11 = StyleSheet.create(_objectSpread2(_objectSpread2({
   '.btn-lg-text': css(_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(_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(_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(_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(_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(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n    z-index: 2; // 1;\n  "]))),
   '.btn-group > .btn-not-first': css(_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(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n  "])))
@@ -3520,14 +3458,14 @@ var Button = /*#__PURE__*/React.forwardRef(function (props, ref) {
       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 = 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")]);
+  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.createElement(Pressable, _extends({}, elementProps, {
     ref: ref,
     active: active,
@@ -3539,31 +3477,31 @@ var Button = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }), 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(_templateObject$11 || (_templateObject$11 = _taggedTemplateLiteral(["\n    margin-bottom: $blockquote-margin-y;\n  "]))),
-  'blockquote-text': css(_templateObject2$G || (_templateObject2$G = _taggedTemplateLiteral(["\n    font-size: $blockquote-font-size;\n  "])))
+var styles$11 = StyleSheet.create({
+  blockquote: css(_templateObject$12 || (_templateObject$12 = _taggedTemplateLiteral(["\n    margin-bottom: $blockquote-margin-y;\n  "]))),
+  'blockquote-text': css(_templateObject2$N || (_templateObject2$N = _taggedTemplateLiteral(["\n    font-size: $blockquote-font-size;\n  "])))
 });
 var Blockquote = /*#__PURE__*/React.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 = Platform.OS === 'web' ? 'blockquote' : null;
   return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
@@ -3574,30 +3512,30 @@ var Blockquote = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }), 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(_templateObject$10 || (_templateObject$10 = _taggedTemplateLiteral(["\n    background-color: $body-bg;\n  "]))),
-  'body-text': css(_templateObject2$F || (_templateObject2$F = _taggedTemplateLiteral(["\n    color: $body-color;\n    text-align: $body-text-align;\n  "])))
+var styles$10 = StyleSheet.create({
+  body: css(_templateObject$11 || (_templateObject$11 = _taggedTemplateLiteral(["\n    background-color: $body-bg;\n    height: 100%; // added for bootstrap-rn\n  "]))),
+  'body-text': css(_templateObject2$M || (_templateObject2$M = _taggedTemplateLiteral(["\n    color: $body-color;\n    text-align: $body-text-align;\n  "])))
 });
 var Body = /*#__PURE__*/React.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']);
+  var classes = getStyles(styles$10, ['body']);
+  var textClasses = getStyles(styles$10, ['body-text']);
   return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
     ref: ref,
     style: [classes, style],
@@ -3605,30 +3543,30 @@ var Body = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }), 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(_templateObject$$ || (_templateObject$$ = _taggedTemplateLiteral(["\n    // flex: 1 1 auto;\n    padding: $card-spacer-y $card-spacer-x;\n  "]))),
-  '.card-body-text': css(_templateObject2$E || (_templateObject2$E = _taggedTemplateLiteral(["\n    color: $card-color;\n  "])))
+var styles$$ = StyleSheet.create({
+  '.card-body': css(_templateObject$10 || (_templateObject$10 = _taggedTemplateLiteral(["\n    // flex: 1 1 auto;\n    padding: $card-spacer-y $card-spacer-x;\n  "]))),
+  '.card-body-text': css(_templateObject2$L || (_templateObject2$L = _taggedTemplateLiteral(["\n    color: $card-color;\n  "])))
 });
 var CardBody = /*#__PURE__*/React.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"]);
+  var classes = getStyles(styles$$, ['.card-body']);
+  var textClasses = getStyles(styles$$, [".card-body-text"]);
   return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
     ref: ref,
     style: [classes, style],
@@ -3636,30 +3574,30 @@ var CardBody = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }), 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(_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(_templateObject2$D || (_templateObject2$D = _taggedTemplateLiteral(["\n    color: $card-cap-color;\n  "])))
+var styles$_ = StyleSheet.create({
+  '.card-header': css(_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(_templateObject2$K || (_templateObject2$K = _taggedTemplateLiteral(["\n    color: $card-cap-color;\n  "])))
 });
 var CardHeader = /*#__PURE__*/React.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']);
+  var classes = getStyles(styles$_, ['.card-header']);
+  var textClasses = getStyles(styles$_, ['.card-header-text']);
   return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
     ref: ref,
     style: [classes, style],
@@ -3667,30 +3605,30 @@ var CardHeader = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }), 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(_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(_templateObject2$C || (_templateObject2$C = _taggedTemplateLiteral(["\n    color: $card-cap-color;\n  "])))
+var styles$Z = StyleSheet.create({
+  '.card-footer': css(_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(_templateObject2$J || (_templateObject2$J = _taggedTemplateLiteral(["\n    color: $card-cap-color;\n  "])))
 });
 var CardFooter = /*#__PURE__*/React.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']);
+  var classes = getStyles(styles$Z, ['.card-footer']);
+  var textClasses = getStyles(styles$Z, ['.card-footer-text']);
   return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
     ref: ref,
     style: [classes, style],
@@ -3698,40 +3636,46 @@ var CardFooter = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }), 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(_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(_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.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']);
+  var classes = getStyles(styles$Y, ['.card']);
   return /*#__PURE__*/React.createElement(View, _extends({}, 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.createContext();
+ModalContext.displayName = 'ModalContext';
 
-var _templateObject$X, _templateObject2$B, _templateObject3$m;
-var propTypes$19 = {
+var OffcanvasContext = /*#__PURE__*/React.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
@@ -3739,10 +3683,14 @@ var propTypes$19 = {
   // eslint-disable-next-line react/forbid-prop-types
   textStyle: PropTypes.any
 };
-var styles$W = StyleSheet.create({
-  '.btn-close': css(_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(_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(_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(_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(_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(_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(_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(_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.forwardRef(function (props, ref) {
   props.children;
@@ -3750,10 +3698,14 @@ var CloseButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
       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']);
+  var modal = useContext(ModalContext);
+  var offcanvas = 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.createElement(Pressable, _extends({}, elementProps, {
     ref: ref,
     disabled: disabled,
@@ -3762,7 +3714,7 @@ var CloseButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }), StyleSheet.value('btn-close-bg'));
 });
 CloseButton.displayName = 'CloseButton';
-CloseButton.propTypes = propTypes$19;
+CloseButton.propTypes = propTypes$1a;
 
 var CollapseContext = /*#__PURE__*/React.createContext();
 CollapseContext.displayName = 'CollapseContext';
@@ -3821,7 +3773,7 @@ function useCollapse(defaultVisible, controlledVisible, onToggle) {
   }, [visible]);
 }
 
-var propTypes$18 = {
+var propTypes$19 = {
   children: PropTypes.node.isRequired,
   defaultVisible: PropTypes.bool,
   visible: PropTypes.bool,
@@ -3841,14 +3793,14 @@ var CollapseProvider = function CollapseProvider(props) {
 };
 
 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) {
@@ -3862,13 +3814,13 @@ function useToggleCollapse(props) {
   });
 }
 
-var _excluded$16 = ["children"];
-var propTypes$17 = {
+var _excluded$17 = ["children"];
+var propTypes$18 = {
   children: PropTypes.node
 };
 var Collapse = /*#__PURE__*/React.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,
@@ -3884,7 +3836,7 @@ var Collapse = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }), children);
 });
 Collapse.displayName = 'Collapse';
-Collapse.propTypes = propTypes$17;
+Collapse.propTypes = propTypes$18;
 Collapse.Provider = CollapseProvider;
 Collapse.useToggle = useToggleCollapse;
 
@@ -3909,18 +3861,18 @@ function infix(breakpoint) {
 var NavbarContext = /*#__PURE__*/React.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(_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(_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(_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(_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;
@@ -3931,7 +3883,7 @@ var styles$V = StyleSheet.create(_objectSpread2({
   }, function (t) {
     return t['container-max-widths'].xxl;
   }),
-  '.container-md': css(_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(_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;
@@ -3940,14 +3892,14 @@ var styles$V = StyleSheet.create(_objectSpread2({
   }, function (t) {
     return t['container-max-widths'].xxl;
   }),
-  '.container-lg': css(_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(_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(_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(_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;
@@ -3964,10 +3916,10 @@ var Container = /*#__PURE__*/React.forwardRef(function (props, ref) {
   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 = 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.createElement(View, _extends({}, elementProps, {
@@ -3976,12 +3928,12 @@ var Container = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }));
 });
 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,
@@ -3996,27 +3948,29 @@ var propTypes$15 = {
   // 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(_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(_templateObject2$z || (_templateObject2$z = _taggedTemplateLiteral(["\n    opacity: $form-check-label-disabled-opacity;\n  "]))),
-  '.form-check-input': css(_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(_templateObject4$i || (_templateObject4$i = _taggedTemplateLiteral(["\n    border-radius: $form-check-input-border-radius;\n  "]))),
-  '.form-check-input-radio': css(_templateObject5$g || (_templateObject5$g = _taggedTemplateLiteral(["\n    border-radius: $form-check-radio-border-radius;\n  "]))),
+var styles$V = StyleSheet.create(_objectSpread2({
+  '.form-check': css(_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(_templateObject2$G || (_templateObject2$G = _taggedTemplateLiteral(["\n    opacity: $form-check-label-disabled-opacity;\n  "]))),
+  '.form-check-input': css(_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(_templateObject4$j || (_templateObject4$j = _taggedTemplateLiteral(["\n    border-radius: $form-check-input-border-radius;\n  "]))),
+  '.form-check-input-radio': css(_templateObject5$h || (_templateObject5$h = _taggedTemplateLiteral(["\n    border-radius: $form-check-radio-border-radius;\n  "]))),
   '.form-check-input-checked': css(_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(_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(_templateObject8$9 || (_templateObject8$9 = _taggedTemplateLiteral(["\n    padding-left: $form-switch-padding-start;\n  "]))),
-  '.form-check-input-switch': css(_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(_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(_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(_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(_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(_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(_templateObject12$3 || (_templateObject12$3 = _taggedTemplateLiteral(["\n      background-color: ", ";\n    "])), function (t) {
+  })), _defineProperty(_ref, ".form-check-input-checked.is-".concat(state), css(_templateObject12$4 || (_templateObject12$4 = _taggedTemplateLiteral(["\n      background-color: ", ";\n    "])), function (t) {
     return data(t).color;
-  })), _defineProperty(_ref, ".form-check-label.is-".concat(state), css(_templateObject13$3 || (_templateObject13$3 = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), function (t) {
+  })), _defineProperty(_ref, ".form-check-label.is-".concat(state), css(_templateObject13$4 || (_templateObject13$4 = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), function (t) {
     return data(t).color;
   })), _ref;
 })));
@@ -4058,16 +4012,17 @@ var CheckInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
       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.createElement(Pressable, _extends({}, elementProps, {
     ref: modifierRef,
@@ -4081,12 +4036,13 @@ var CheckInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
     style: [classes, style]
   }), /*#__PURE__*/React.createElement(View, {
     style: [inputClasses, inputStyle]
-  }, getSvg(type, value)), children && /*#__PURE__*/React.createElement(Text, {
-    style: [labelClasses, labelStyle]
+  }, getSvg(type, value)), children && /*#__PURE__*/React.createElement(View, {
+    style: labelStyle,
+    textStyle: [labelTextClasses, labelTextStyle]
   }, children));
 });
 CheckInput.displayName = 'CheckInput';
-CheckInput.propTypes = propTypes$15;
+CheckInput.propTypes = propTypes$16;
 
 var Checkbox = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var elementProps = _extends({}, props);
@@ -4098,13 +4054,13 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (props, ref) {
 });
 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))),
@@ -4114,15 +4070,15 @@ var propTypes$14 = {
   // eslint-disable-next-line react/forbid-prop-types
   style: PropTypes.any
 };
-var styles$T = StyleSheet.create(_objectSpread2({
-  '*': css(_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(_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(_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(_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(_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(_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(_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(_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(_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(_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.forwardRef(function (props, ref) {
@@ -4133,16 +4089,90 @@ var Col = /*#__PURE__*/React.forwardRef(function (props, ref) {
       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())]);
+  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.createElement(View, _extends({}, 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(_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(_templateObject2$E || (_templateObject2$E = _taggedTemplateLiteral(["\n    font-weight: $font-weight-bolder;\n  "]))),
+  italic: css(_templateObject3$j || (_templateObject3$j = _taggedTemplateLiteral(["\n    font-style: italic;\n  "]))),
+  small: css(_templateObject4$h || (_templateObject4$h = _taggedTemplateLiteral(["\n    font-size: $small-font-size;\n    line-height: $small-font-size * $line-height-base;\n  "]))),
+  mark: css(_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.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 = 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.createElement(Text$1, _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.createElement(TextStyleContext.Provider, {
+    value: {
+      style: null,
+      hasTextAncestor: true
+    }
+  }, element);
+});
+Text.displayName = 'Text';
+Text.propTypes = propTypes$14;
 
 var _excluded$12 = ["children", "style"];
 
@@ -4248,6 +4278,11 @@ var Overlay = function Overlay(props) {
     if (overlay.arrowProps.style.left) {
       overlay.arrowProps.style.left -= arrowOffset;
     }
+  } // Adjust bottom value by status bar height on Android
+
+
+  if (Platform.OS === 'android' && overlay.overlayProps.style.bottom !== undefined && StatusBar.currentHeight) {
+    overlay.overlayProps.style.bottom -= StatusBar.currentHeight;
   }
 
   return children(overlay, overlayRef);
@@ -4362,7 +4397,7 @@ BackdropHandler.propTypes = propTypes$10;
 
 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,
@@ -4375,7 +4410,7 @@ var propTypes$$ = {
 };
 var styles$Q = StyleSheet.create(_objectSpread2(_objectSpread2(_objectSpread2({
   '.dropdown-menu': css(_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(_templateObject2$x || (_templateObject2$x = _taggedTemplateLiteral(["\n    top: 100%;\n    left: 0;\n    margin-top: $dropdown-spacer;\n  "])))
+  '.dropdown-menu[data-bs-popper]': css(_templateObject2$D || (_templateObject2$D = _taggedTemplateLiteral(["\n    top: 100%;\n    left: 0;\n    margin-top: $dropdown-spacer;\n  "])))
 }, each(GRID_BREAKPOINTS, function (breakpoint) {
   var _ref;
 
@@ -4386,9 +4421,9 @@ var styles$Q = StyleSheet.create(_objectSpread2(_objectSpread2(_objectSpread2({
   '.dropstart .dropdown-menu[data-bs-popper]': css(_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(_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(_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(_templateObject9$6 || (_templateObject9$6 = _taggedTemplateLiteral(["\n      @include media-breakpoint-up(", ") {\n        position: absolute;\n      }\n    "])), next(breakpoint)));
 })), {}, {
-  '.dropdown-menu-text': css(_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(_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) {
@@ -4497,7 +4532,7 @@ DropdownMenu.propTypes = propTypes$$;
 
 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) {
@@ -4509,7 +4544,7 @@ var propTypes$_ = {
 var styles$P = StyleSheet.create(_objectSpread2({
   heading: css(_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(_templateObject2$w || (_templateObject2$w = _taggedTemplateLiteral(["\n      font-size: ", ";\n      line-height: ", " * $headings-line-height;\n    "])), value, value));
+  return _defineProperty({}, ".h".concat(size), css(_templateObject2$C || (_templateObject2$C = _taggedTemplateLiteral(["\n      font-size: ", ";\n      line-height: ", " * $headings-line-height;\n    "])), value, value));
 })));
 var Heading$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
@@ -4528,35 +4563,43 @@ var Heading$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
 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(_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(_templateObject$P || (_templateObject$P = _taggedTemplateLiteral(["\n    // display: block;\n    padding: $dropdown-header-padding;\n  "]))),
+  '.dropdown-header-text': css(_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.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.createElement(Heading$1, _extends({}, elementProps, {
+  var textClasses = getStyles(styles$O, ['.dropdown-header-text']); // composite component
+
+  return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
     ref: ref,
     size: 6,
     style: [classes, style]
-  }), children);
+  }), /*#__PURE__*/React.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,
@@ -4569,7 +4612,7 @@ var propTypes$Y = {
 };
 var styles$N = StyleSheet.create({
   '.dropdown-item': css(_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(_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(_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(_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(_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(_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  "]))),
@@ -4603,30 +4646,38 @@ var DropdownItem = function DropdownItem(props) {
 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(_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(_templateObject$N || (_templateObject$N = _taggedTemplateLiteral(["\n    // display: block;\n    padding: $dropdown-item-padding-y $dropdown-item-padding-x;\n  "]))),
+  '.dropdown-item-text-text': css(_templateObject2$z || (_templateObject2$z = _taggedTemplateLiteral(["\n    color: $dropdown-link-color;\n  "])))
 });
-var DropdownTextItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
+var DropdownItemText = /*#__PURE__*/React.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.createElement(Text, _extends({}, elementProps, {
+  var textClasses = getStyles(styles$M, ['.dropdown-item-text-text']); // composite component
+
+  return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
     ref: ref,
     style: [classes, style]
-  }), children);
+  }), /*#__PURE__*/React.createElement(Text, {
+    style: [textClasses, textStyle]
+  }, children));
 });
-DropdownTextItem.displayName = 'DropdownTextItem';
-DropdownTextItem.propTypes = propTypes$X;
+DropdownItemText.displayName = 'DropdownItemText';
+DropdownItemText.propTypes = propTypes$X;
 
 var _excluded$X = ["style"];
 
@@ -4683,7 +4734,7 @@ function useDismissDropdown(props) {
   return _objectSpread2(_objectSpread2({}, restProps), {}, {
     onPress: function onPress(event) {
       if (handlePress) handlePress(event);
-      context.setExpanded(false);
+      context.setVisible(false);
     }
   });
 }
@@ -4737,7 +4788,7 @@ Dropdown.Toggle = DropdownToggle;
 Dropdown.Menu = DropdownMenu;
 Dropdown.Header = DropdownHeader;
 Dropdown.Item = DropdownItem;
-Dropdown.TextItem = DropdownTextItem;
+Dropdown.ItemText = DropdownItemText;
 Dropdown.Divider = DropdownDivider;
 Dropdown.useDismiss = useDismissDropdown;
 Dropdown.useToggle = useToggleDropdown;
@@ -4801,27 +4852,35 @@ var Feedback = /*#__PURE__*/React.forwardRef(function (props, ref) {
 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(_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(_templateObject$I || (_templateObject$I = _taggedTemplateLiteral(["\n    margin-top: $form-text-margin-top;\n  "]))),
+  '.form-text-text': css(_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.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.createElement(Text, _extends({}, elementProps, {
+  var textClasses = getStyles(styles$H, ['.form-text-text']); // composite component
+
+  return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
     ref: ref,
     style: [classes, style]
-  }), children);
+  }), /*#__PURE__*/React.createElement(Text, {
+    style: [textClasses, textStyle]
+  }, children));
 });
 FormText.displayName = 'FormText';
 FormText.propTypes = propTypes$S;
@@ -4876,7 +4935,7 @@ TextInput.propTypes = propTypes$R;
 
 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,
@@ -4888,13 +4947,13 @@ var propTypes$Q = {
   style: PropTypes.any
 };
 var styles$G = StyleSheet.create(_objectSpread2({
-  '.form-control': css(_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(_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(_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(_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(_templateObject5$c || (_templateObject5$c = _taggedTemplateLiteral(["\n    min-height: $input-height;\n  "]))),
-  '.form-control-multiline-sm': css(_templateObject6$b || (_templateObject6$b = _taggedTemplateLiteral(["\n    min-height: $input-height-sm;\n  "]))),
-  '.form-control-multiline-lg': css(_templateObject7$8 || (_templateObject7$8 = _taggedTemplateLiteral(["\n    min-height: $input-height-lg;\n  "])))
+  '.form-control': css(_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(_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(_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(_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(_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(_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(_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(_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;
@@ -4927,6 +4986,8 @@ var Input = /*#__PURE__*/React.forwardRef(function (props, ref) {
     placeholderTextColor: placeholderTextColor || StyleSheet.value('input-placeholder-color'),
     multiline: multiline,
     disabled: disabled,
+    editable: !disabled,
+    selectTextOnFocus: !disabled,
     style: [classes, style]
   }));
 });
@@ -4934,7 +4995,7 @@ Input.displayName = 'Input';
 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),
@@ -4981,7 +5042,9 @@ function useTrigger(rawTrigger, props, elementProps, ref) {
       accessibilityDescribedBy: identifier
     })), {}, {
       onPress: function onPress(event) {
-        if (trigger.includes('click')) {
+        var handleHoverAsPress = (Platform.OS === 'android' || Platform.OS === 'ios') && trigger.includes('hover');
+
+        if (trigger.includes('press') || handleHoverAsPress) {
           setVisible(function (value) {
             return !value;
           });
@@ -5058,14 +5121,14 @@ PopoverContext.displayName = 'PopoverContext';
 
 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(_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(_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(_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(_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(_templateObject4$d || (_templateObject4$d = _taggedTemplateLiteral(["\n    bottom: ", ";\n  "])), subtract(function (t) {
     return "-".concat(t['popover-arrow-height']);
@@ -5080,15 +5143,15 @@ var styles$F = StyleSheet.create({
     return t['popover-border-width'];
   })),
   '.bs-popover-end .popover-arrow::before': css(_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(_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(_templateObject10$4 || (_templateObject10$4 = _taggedTemplateLiteral(["\n    top: ", ";\n  "])), subtract(function (t) {
+  '.bs-popover-end .popover-arrow::after': css(_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(_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(_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(_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(_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(_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(_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(_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'];
@@ -5120,35 +5183,43 @@ var PopoverArrow = /*#__PURE__*/React.forwardRef(function (props, ref) {
 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(_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(_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(_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.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.createElement(Heading$1, _extends({}, elementProps, {
+  var textClasses = getStyles(styles$E, ['.popover-header-text']); // composite component
+
+  return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
     ref: ref,
-    size: 3,
     style: [classes, style]
-  }), children);
+  }), /*#__PURE__*/React.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
@@ -5158,7 +5229,7 @@ var propTypes$N = {
 };
 var styles$D = StyleSheet.create({
   '.popover-body': css(_templateObject$E || (_templateObject$E = _taggedTemplateLiteral(["\n    padding: $popover-body-padding-y $popover-body-padding-x;\n  "]))),
-  '.popover-body-text': css(_templateObject2$s || (_templateObject2$s = _taggedTemplateLiteral(["\n    color: $popover-body-color;\n  "])))
+  '.popover-body-text': css(_templateObject2$u || (_templateObject2$u = _taggedTemplateLiteral(["\n    color: $popover-body-color;\n  "])))
 });
 var PopoverBody = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
@@ -5179,7 +5250,7 @@ PopoverBody.propTypes = propTypes$N;
 
 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,
@@ -5193,7 +5264,7 @@ var propTypes$M = {
 };
 var styles$C = StyleSheet.create({
   '.popover': css(_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(_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(_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.forwardRef(function (props, ref) {
   var children = props.children,
@@ -5229,12 +5300,13 @@ Popover.Arrow = PopoverArrow;
 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) {
@@ -5243,8 +5315,10 @@ function injectPopover(Target) {
     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),
@@ -5254,6 +5328,7 @@ function injectPopover(Target) {
 
     var _useTrigger = useTrigger(trigger, tooltipProps, elementProps, ref),
         visible = _useTrigger.visible,
+        setVisible = _useTrigger.setVisible,
         targetProps = _useTrigger.targetProps,
         targetRef = _useTrigger.targetRef,
         templateProps = _useTrigger.templateProps;
@@ -5266,7 +5341,14 @@ function injectPopover(Target) {
       targetRef: targetRef,
       visible: visible
     }, function (overlay, overlayRef) {
-      return /*#__PURE__*/React.createElement(Popover, _extends({}, templateProps, {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BackdropHandler, {
+        toggleRef: targetRef,
+        dialogRef: overlayRef,
+        onClose: function onClose() {
+          setVisible(false);
+        },
+        autoClose: autoClose
+      }), /*#__PURE__*/React.createElement(Popover, _extends({}, templateProps, {
         ref: overlayRef,
         placement: overlay.placement,
         popper: overlay.rendered,
@@ -5275,7 +5357,7 @@ function injectPopover(Target) {
           opacity: overlay.rendered ? 1 : 0
         }],
         arrowStyle: overlay.arrowProps.style
-      }), /*#__PURE__*/React.createElement(Popover.Arrow, null), title && /*#__PURE__*/React.createElement(Popover.Header, null, title), /*#__PURE__*/React.createElement(Popover.Body, null, content));
+      }), /*#__PURE__*/React.createElement(Popover.Arrow, null), title && /*#__PURE__*/React.createElement(Popover.Header, null, title), /*#__PURE__*/React.createElement(Popover.Body, null, content)));
     })));
   });
   OverlayPopover.displayName = 'Overlay(Popover)';
@@ -5288,22 +5370,22 @@ TooltipContext.displayName = 'TooltipContext';
 
 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(_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(_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(_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(_templateObject3$e || (_templateObject3$e = _taggedTemplateLiteral(["\n    bottom: 0;\n  "]))),
   '.bs-tooltip-top .tooltip-arrow::before': css(_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(_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(_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(_templateObject7$6 || (_templateObject7$6 = _taggedTemplateLiteral(["\n    top: 0;\n  "]))),
   '.bs-tooltip-bottom .tooltip-arrow::before': css(_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(_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(_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(_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(_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.forwardRef(function (props, ref) {
   var style = props.style,
@@ -5326,34 +5408,42 @@ var TooltipArrow = /*#__PURE__*/React.forwardRef(function (props, ref) {
 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(_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(_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(_templateObject2$r || (_templateObject2$r = _taggedTemplateLiteral(["\n    color: $tooltip-color;\n    text-align: center;\n  "])))
 });
 var TooltipInner = /*#__PURE__*/React.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.createElement(Text, _extends({}, elementProps, {
+  var textClasses = getStyles(styles$A, ['.tooltip-inner-text']); // composite component
+
+  return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
     ref: ref,
     style: [classes, style]
-  }), children);
+  }), /*#__PURE__*/React.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,
@@ -5367,7 +5457,7 @@ var propTypes$I = {
 };
 var styles$z = StyleSheet.create({
   '.tooltip': css(_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(_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(_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(_templateObject3$d || (_templateObject3$d = _taggedTemplateLiteral(["\n    padding: $tooltip-arrow-height 0;\n  "]))),
   '.bs-tooltip-end': css(_templateObject4$b || (_templateObject4$b = _taggedTemplateLiteral(["\n    padding: 0 $tooltip-arrow-height;\n  "]))),
   '.bs-tooltip-bottom': css(_templateObject5$9 || (_templateObject5$9 = _taggedTemplateLiteral(["\n    padding: $tooltip-arrow-height 0;\n  "]))),
@@ -5407,11 +5497,12 @@ Tooltip.propTypes = propTypes$I;
 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) {
@@ -5419,6 +5510,8 @@ function injectTooltip(Target) {
     /* 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,
@@ -5430,6 +5523,7 @@ function injectTooltip(Target) {
 
     var _useTrigger = useTrigger(trigger, tooltipProps, elementProps, ref),
         visible = _useTrigger.visible,
+        setVisible = _useTrigger.setVisible,
         targetProps = _useTrigger.targetProps,
         targetRef = _useTrigger.targetRef,
         templateProps = _useTrigger.templateProps;
@@ -5441,7 +5535,14 @@ function injectTooltip(Target) {
       arrowOffset: offset,
       visible: visible
     }, function (overlay, overlayRef) {
-      return /*#__PURE__*/React.createElement(Tooltip, _extends({}, templateProps, {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BackdropHandler, {
+        toggleRef: targetRef,
+        dialogRef: overlayRef,
+        onClose: function onClose() {
+          setVisible(false);
+        },
+        autoClose: autoClose
+      }), /*#__PURE__*/React.createElement(Tooltip, _extends({}, templateProps, {
         ref: overlayRef,
         placement: overlay.placement,
         popper: overlay.rendered,
@@ -5450,7 +5551,7 @@ function injectTooltip(Target) {
           opacity: overlay.rendered ? 1 : 0
         }],
         arrowStyle: overlay.arrowProps.style
-      }), /*#__PURE__*/React.createElement(Tooltip.Arrow, null), /*#__PURE__*/React.createElement(Tooltip.Inner, null, title));
+      }), /*#__PURE__*/React.createElement(Tooltip.Arrow, null), /*#__PURE__*/React.createElement(Tooltip.Inner, null, title)));
     })));
   });
   OverlayTooltip.displayName = 'Overlay(Tooltip)';
@@ -5506,27 +5607,35 @@ var ImageBackground = /*#__PURE__*/React.forwardRef(function (props, ref) {
 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(_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(_templateObject$z || (_templateObject$z = _taggedTemplateLiteral(["\n    margin-bottom: $form-label-margin-bottom;\n  "]))),
+  '.form-label-text': css(_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.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.createElement(Text, _extends({}, elementProps, {
+  var textClasses = getStyles(styles$y, ['.form-label-text']); // composite component
+
+  return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
     ref: ref,
     style: [classes, style]
-  }), children);
+  }), /*#__PURE__*/React.createElement(Text, {
+    style: [textClasses, textStyle]
+  }, children));
 });
 Label.displayName = 'Label';
 Label.propTypes = propTypes$E;
@@ -5536,7 +5645,7 @@ ListGroupContext.displayName = 'ListGroupContext';
 
 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)),
@@ -5558,14 +5667,14 @@ var styles$x = StyleSheet.create(_objectSpread2({
   '.list-group-item-disabled-text': css(_templateObject6$7 || (_templateObject6$7 = _taggedTemplateLiteral(["\n    color: $list-group-disabled-color;\n  "]))),
   '.list-group-item-active': css(_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(_templateObject8$4 || (_templateObject8$4 = _taggedTemplateLiteral(["\n    color: $list-group-active-color;\n  "]))),
-  '.list-group-item-not-first': css(_templateObject9$2 || (_templateObject9$2 = _taggedTemplateLiteral(["\n    border-top-width: 0;\n  "]))),
-  '.list-group-item-not-first-active': css(_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(_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(_templateObject12$1 || (_templateObject12$1 = _taggedTemplateLiteral(["\n    border-bottom-width: 0;\n  "])))
+  '.list-group-item-not-first': css(_templateObject9$3 || (_templateObject9$3 = _taggedTemplateLiteral(["\n    border-top-width: 0;\n  "]))),
+  '.list-group-item-not-first-active': css(_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(_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(_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(_templateObject13$1 || (_templateObject13$1 = _taggedTemplateLiteral(["\n      background-color: ", ";\n    "])), shiftColor(function (t) {
+  return _ref = {}, _defineProperty(_ref, ".list-group-item-".concat(state), css(_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(_templateObject14$1 || (_templateObject14$1 = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), shiftColor(function (t) {
     return t['list-group-item-color-scale'];
@@ -5879,9 +5988,7 @@ var computeScrollbarWidth = function computeScrollbarWidth() {
 };
 
 function useScrollbarEffects(_ref) {
-  var ref = _ref.ref,
-      keepBodyScroll = _ref.keepBodyScroll,
-      centered = _ref.centered,
+  var keepBodyScroll = _ref.keepBodyScroll,
       visible = _ref.visible;
 
   if (Platform.OS !== 'web' || keepBodyScroll) {
@@ -5896,9 +6003,9 @@ function useScrollbarEffects(_ref) {
 
     if (!scrollbarWidth.current) {
       scrollbarWidth.current = computeScrollbarWidth();
-    }
+    } // const element = findNodeHandle(ref.current);
+
 
-    var element = findNodeHandle(ref.current);
     var rect = document.body.getBoundingClientRect();
     var isBodyOverflowing = rect.left + rect.right < window.innerWidth; // Set body and fixed elements padding adjustments.
 
@@ -5913,21 +6020,6 @@ function useScrollbarEffects(_ref) {
         // 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.
 
 
@@ -5952,9 +6044,6 @@ function useModal(scrollable) {
   }, [scrollable]);
 }
 
-var ModalContext = /*#__PURE__*/React.createContext();
-ModalContext.displayName = 'ModalContext';
-
 var _excluded$y = ["children", "style"];
 
 var _templateObject$u;
@@ -6007,13 +6096,15 @@ var ModalTitle = /*#__PURE__*/React.forwardRef(function (props, ref) {
 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(_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  "])))
@@ -6021,6 +6112,7 @@ var styles$s = StyleSheet.create({
 var ModalBody = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
       style = props.style,
+      contentContainerStyle = props.contentContainerStyle,
       elementProps = _objectWithoutProperties(props, _excluded$w);
 
   var _useForcedContext = useForcedContext(ModalContext),
@@ -6030,8 +6122,8 @@ var ModalBody = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var FlexView = scrollable ? ScrollView : View;
   return /*#__PURE__*/React.createElement(FlexView, _extends({}, 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';
@@ -6064,7 +6156,7 @@ ModalFooter.propTypes = propTypes$v;
 
 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,
@@ -6081,16 +6173,16 @@ var propTypes$u = {
 };
 var styles$q = StyleSheet.create({
   '.modal': css(_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(_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(_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(_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(_templateObject4$8 || (_templateObject4$8 = _taggedTemplateLiteral(["\n    max-height: 100%;\n    overflow: hidden;\n  "]))),
   '.modal-dialog-centered': css(_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(_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(_templateObject7$4 || (_templateObject7$4 = _taggedTemplateLiteral(["\n    color: $modal-content-color;\n  "]))),
   '.modal-backdrop': css(_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(_templateObject9$1 || (_templateObject9$1 = _taggedTemplateLiteral(["\n    @include media-breakpoint-up(sm) {\n      max-width: $modal-sm;\n    }\n  "]))),
-  '.modal-lg': css(_templateObject10$1 || (_templateObject10$1 = _taggedTemplateLiteral(["\n    @include media-breakpoint-up(lg) {\n      max-width: $modal-lg;\n    }\n  "]))),
-  '.modal-xl': css(_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(_templateObject9$2 || (_templateObject9$2 = _taggedTemplateLiteral(["\n    @include media-breakpoint-up(sm) {\n      max-width: $modal-sm;\n    }\n  "]))),
+  '.modal-lg': css(_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(_templateObject11$2 || (_templateObject11$2 = _taggedTemplateLiteral(["\n    @include media-breakpoint-up(xl) {\n      max-width: $modal-xl;\n    }\n  "])))
 });
 var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
@@ -6107,13 +6199,10 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
       textStyle = props.textStyle,
       elementProps = _objectWithoutProperties(props, _excluded$u);
 
-  var modalRef = useRef();
   var dialogRef = useRef();
   var modal = useModal(scrollable);
   useScrollbarEffects({
-    ref: modalRef,
     keepBodyScroll: false,
-    centered: true,
     visible: visible
   });
   var backdropClasses = getStyles(styles$q, ['.modal-backdrop']);
@@ -6130,7 +6219,6 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, backdrop && /*#__PURE__*/React.createElement(View, {
     style: backdropClasses
   }), /*#__PURE__*/React.createElement(FlexView, {
-    ref: modalRef,
     style: classes,
     contentContainerStyle: scrollable ? undefined : {
       flexGrow: 1
@@ -6139,7 +6227,11 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
     dialogRef: dialogRef,
     onClose: handleToggle,
     backdrop: backdrop
-  }), /*#__PURE__*/React.createElement(OverlayProvider, null, /*#__PURE__*/React.createElement(View, {
+  }), /*#__PURE__*/React.createElement(SafeAreaView, {
+    style: {
+      flexShrink: 1
+    }
+  }, /*#__PURE__*/React.createElement(View, {
     ref: dialogRef,
     style: dialogClasses
   }, /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
@@ -6148,7 +6240,7 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
     textStyle: [contentTextClasses, textStyle]
   }), /*#__PURE__*/React.createElement(ModalContext.Provider, {
     value: modal
-  }, children))))));
+  }, /*#__PURE__*/React.createElement(OverlayProvider, null, children)))))));
 });
 Modal.displayName = 'Modal';
 Modal.propTypes = propTypes$u;
@@ -6163,7 +6255,7 @@ NavContext.displayName = 'NavContext';
 
 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,
@@ -6186,12 +6278,12 @@ var styles$p = StyleSheet.create(_objectSpread2(_objectSpread2({
   '.nav-tabs .nav-link-disabled': css(_templateObject6$4 || (_templateObject6$4 = _taggedTemplateLiteral(["\n    background-color: transparent;\n    border-color: transparent;\n  "]))),
   '.nav-tabs .nav-link-disabled-text': css(_templateObject7$3 || (_templateObject7$3 = _taggedTemplateLiteral(["\n    color: $nav-link-disabled-color;\n  "]))),
   '.nav-tabs .nav-link-active': css(_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(_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(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    background: transparent; // none;\n    border: 0;\n    border-radius: $nav-pills-border-radius;\n  "]))),
-  '.nav-pills .nav-link-active': css(_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(_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(_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(_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(_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(_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(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n    padding-right: 0;\n    padding-left: 0;\n  "])))
+  '.navbar-nav .nav-link': css(_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(_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)));
 })), {}, {
@@ -6300,32 +6392,39 @@ Nav.propTypes = propTypes$s;
 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(_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(_templateObject2$i || (_templateObject2$i = _taggedTemplateLiteral(["\n    color: $navbar-light-color;\n  "]))),
-  '.navbar-dark .navbar-text': css(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteral(["\n    color: $navbar-dark-color;\n  "])))
+  '.navbar-light .navbar-text-text': css(_templateObject2$i || (_templateObject2$i = _taggedTemplateLiteral(["\n    color: $navbar-light-color;\n  "]))),
+  '.navbar-dark .navbar-text-text': css(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteral(["\n    color: $navbar-dark-color;\n  "])))
 });
 var NavbarText = /*#__PURE__*/React.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.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.createElement(View, _extends({}, elementProps, {
     ref: ref,
     style: [classes, style]
-  }), children);
+  }), /*#__PURE__*/React.createElement(Text, {
+    style: [textClasses, textStyle]
+  }, children));
 });
 NavbarText.displayName = 'NavbarText';
 NavbarText.propTypes = propTypes$r;
@@ -6556,6 +6655,12 @@ Navbar.Toggler = NavbarToggler;
 Navbar.useDismiss = useDismissNavbar;
 Navbar.useToggle = useToggleNavbar;
 
+function useOffcanvas() {
+  return useMemo(function () {
+    return {};
+  }, []);
+}
+
 var _excluded$k = ["children", "style"];
 
 var _templateObject$i, _templateObject2$d;
@@ -6611,29 +6716,33 @@ var OffcanvasTitle = /*#__PURE__*/React.forwardRef(function (props, ref) {
 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(_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(_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(_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.forwardRef(function (props, ref) {
   var children = props.children,
       style = props.style,
+      contentContainerStyle = props.contentContainerStyle,
       elementProps = _objectWithoutProperties(props, _excluded$i);
 
   var navbar = 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.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.createElement(ScrollView, _extends({}, elementProps, {
     ref: ref,
-    style: [classes, style]
+    style: style,
+    contentContainerStyle: [contentContainerClasses, contentContainerStyle]
   }), children);
 });
 OffcanvasBody.displayName = 'OffcanvasBody';
@@ -6641,7 +6750,7 @@ OffcanvasBody.propTypes = propTypes$k;
 
 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 = {
@@ -6658,15 +6767,23 @@ var propTypes$j = {
   textStyle: PropTypes.any
 };
 var styles$f = StyleSheet.create(_objectSpread2({
-  '.offcanvas': css(_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(_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(_templateObject2$b || (_templateObject2$b = _taggedTemplateLiteral(["\n    color: $offcanvas-color;\n  "]))),
   '.offcanvas-backdrop': css(_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(_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(_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(_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(_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(_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(_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(_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(_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(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    max-width: 100%;\n    max-height: 100%;\n  "]))),
+  '.offcanvas-dialog-start': css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    width: $offcanvas-horizontal-width;\n  "]))),
+  '.offcanvas-dialog-end': css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    width: $offcanvas-horizontal-width;\n  "]))),
+  '.offcanvas-dialog-top': css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    height: $offcanvas-vertical-height;\n  "]))),
+  '.offcanvas-dialog-bottom': css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    height: $offcanvas-vertical-height;\n  "])))
 }, each(GRID_BREAKPOINTS, function (breakpoint) {
-  return _defineProperty({}, ".navbar-expand".concat(infix(next(breakpoint)), " .offcanvas"), css(_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(_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.forwardRef(function (props, ref) {
   var children = props.children,
@@ -6685,14 +6802,14 @@ var Offcanvas = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var media = useMedia();
   var navbar = useContext(NavbarContext);
   var offcanvasRef = 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))) {
@@ -6713,14 +6830,23 @@ var Offcanvas = /*#__PURE__*/React.forwardRef(function (props, ref) {
     dialogRef: offcanvasRef,
     onClose: handleToggle,
     backdrop: backdrop
-  })), /*#__PURE__*/React.createElement(ScrollView, _extends({}, elementProps, {
+  })), /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
     ref: concatRefs(offcanvasRef, ref),
     style: [classes, style],
     textStyle: [textClasses, textStyle]
-  }), /*#__PURE__*/React.createElement(OverlayProvider, null, children)));
+  }), /*#__PURE__*/React.createElement(SafeAreaView, {
+    style: {
+      flexShrink: 1
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    style: dialogClasses
+  }, /*#__PURE__*/React.createElement(OffcanvasContext.Provider, {
+    value: offcanvas
+  }, /*#__PURE__*/React.createElement(OverlayProvider, null, children))))));
 });
 Offcanvas.displayName = 'Offcanvas';
 Offcanvas.propTypes = propTypes$j;
+Offcanvas.Context = OffcanvasContext;
 Offcanvas.Header = OffcanvasHeader;
 Offcanvas.Title = OffcanvasTitle;
 Offcanvas.Body = OffcanvasBody;
@@ -7002,7 +7128,8 @@ var ProgressBar = /*#__PURE__*/React.forwardRef(function (props, ref) {
       max = _useForcedContext.max;
 
   var classes = getStyles(styles$b, ['.progress-bar']);
-  var textClasses = getStyles(styles$b, ['.progress-bar-text']);
+  var textClasses = getStyles(styles$b, ['.progress-bar-text']); // composite component
+
   return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
     ref: ref,
     accessibilityRole: "progressbar",
@@ -7011,9 +7138,10 @@ var ProgressBar = /*#__PURE__*/React.forwardRef(function (props, ref) {
     accessibilityValueMax: max,
     style: [classes, style, {
       width: "".concat(getPercentage(value, min, max), "%")
-    }],
-    textStyle: [textClasses, textStyle]
-  }), /*#__PURE__*/React.createElement(Text, null, children || ' '));
+    }]
+  }), children && /*#__PURE__*/React.createElement(Text, {
+    style: [textClasses, textStyle]
+  }, children));
 });
 ProgressBar.displayName = 'ProgressBar';
 ProgressBar.propTypes = propTypes$f;