bootstrap-rn 0.1.4 → 0.1.5

package/dist/bootstrap-rn.umd.js

@@ -10,24 +10,6 @@
   var _reactNative__default = /*#__PURE__*/_interopDefaultLegacy(_reactNative);
   var require$$12__default = /*#__PURE__*/_interopDefaultLegacy(require$$12);
 
-  function _extends$2() {
-    _extends$2 = Object.assign || function (target) {
-      for (var i = 1; i < arguments.length; i++) {
-        var source = arguments[i];
-
-        for (var key in source) {
-          if (Object.prototype.hasOwnProperty.call(source, key)) {
-            target[key] = source[key];
-          }
-        }
-      }
-
-      return target;
-    };
-
-    return _extends$2.apply(this, arguments);
-  }
-
   const isRTL = () => {
     // To support previous RN versions. Newer versions use below getConstants()
     if (_reactNative.I18nManager.isRTL !== undefined) {
@@ -354,7 +336,7 @@
     return PARSED_PLACEMENT_CACHE[input];
   }
 
-  function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
+  function _extends$2() { _extends$2 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
   const PortalContext = /*#__PURE__*/React__default["default"].createContext(null);
   let globalOverlayCounter = 0;
   function PortalProvider(props) {
@@ -404,7 +386,7 @@
   }
 
   function OverlayView(props) {
-    return /*#__PURE__*/React__default["default"].createElement(_reactNative.View, _extends$1({
+    return /*#__PURE__*/React__default["default"].createElement(_reactNative.View, _extends$2({
       pointerEvents: "box-none",
       style: _reactNative.StyleSheet.absoluteFill,
       collapsable: false
@@ -520,8 +502,8 @@
     return obj;
   }
 
-  function _extends() {
-    _extends = Object.assign || function (target) {
+  function _extends$1() {
+    _extends$1 = Object.assign || function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
 
@@ -535,7 +517,7 @@
       return target;
     };
 
-    return _extends.apply(this, arguments);
+    return _extends$1.apply(this, arguments);
   }
 
   function _setPrototypeOf$1(o, p) {
@@ -2974,6 +2956,23 @@
     });
   }
 
+  function _extends() {
+    _extends = Object.assign ? Object.assign.bind() : function (target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i];
+
+        for (var key in source) {
+          if (Object.prototype.hasOwnProperty.call(source, key)) {
+            target[key] = source[key];
+          }
+        }
+      }
+
+      return target;
+    };
+    return _extends.apply(this, arguments);
+  }
+
   function _assertThisInitialized(self) {
     if (self === void 0) {
       throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
@@ -2983,11 +2982,10 @@
   }
 
   function _setPrototypeOf(o, p) {
-    _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+    _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
       o.__proto__ = p;
       return o;
     };
-
     return _setPrototypeOf(o, p);
   }
 
@@ -2998,7 +2996,7 @@
   }
 
   function _getPrototypeOf(o) {
-    _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+    _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) {
       return o.__proto__ || Object.getPrototypeOf(o);
     };
     return _getPrototypeOf(o);
@@ -3023,7 +3021,7 @@
 
   function _construct(Parent, args, Class) {
     if (_isNativeReflectConstruct()) {
-      _construct = Reflect.construct;
+      _construct = Reflect.construct.bind();
     } else {
       _construct = function _construct(Parent, args, Class) {
         var a = [null];
@@ -3426,10 +3424,10 @@
   var hexRgbaRegex = /^#[a-fA-F0-9]{8}$/;
   var reducedHexRegex = /^#[a-fA-F0-9]{3}$/;
   var reducedRgbaHexRegex = /^#[a-fA-F0-9]{4}$/;
-  var rgbRegex = /^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/i;
-  var rgbaRegex = /^rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*([-+]?[0-9]*[.]?[0-9]+)\s*\)$/i;
-  var hslRegex = /^hsl\(\s*(\d{0,3}[.]?[0-9]+)\s*,\s*(\d{1,3}[.]?[0-9]?)%\s*,\s*(\d{1,3}[.]?[0-9]?)%\s*\)$/i;
-  var hslaRegex = /^hsla\(\s*(\d{0,3}[.]?[0-9]+)\s*,\s*(\d{1,3}[.]?[0-9]?)%\s*,\s*(\d{1,3}[.]?[0-9]?)%\s*,\s*([-+]?[0-9]*[.]?[0-9]+)\s*\)$/i;
+  var rgbRegex = /^rgb\(\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*\)$/i;
+  var rgbaRegex = /^rgb(?:a)?\(\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,|\/)\s*([-+]?\d*[.]?\d+[%]?)\s*\)$/i;
+  var hslRegex = /^hsl\(\s*(\d{0,3}[.]?[0-9]+(?:deg)?)\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*\)$/i;
+  var hslaRegex = /^hsl(?:a)?\(\s*(\d{0,3}[.]?[0-9]+(?:deg)?)\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,|\/)\s*([-+]?\d*[.]?\d+[%]?)\s*\)$/i;
   /**
    * Returns an RgbColor or RgbaColor object. This utility function is only useful
    * if want to extract a color component. With the color util `toColorString` you
@@ -3503,7 +3501,7 @@
         red: parseInt("" + rgbaMatched[1], 10),
         green: parseInt("" + rgbaMatched[2], 10),
         blue: parseInt("" + rgbaMatched[3], 10),
-        alpha: parseFloat("" + rgbaMatched[4])
+        alpha: parseFloat("" + rgbaMatched[4]) > 1 ? parseFloat("" + rgbaMatched[4]) / 100 : parseFloat("" + rgbaMatched[4])
       };
     }
 
@@ -3548,7 +3546,7 @@
         red: parseInt("" + _hslRgbMatched[1], 10),
         green: parseInt("" + _hslRgbMatched[2], 10),
         blue: parseInt("" + _hslRgbMatched[3], 10),
-        alpha: parseFloat("" + hslaMatched[4])
+        alpha: parseFloat("" + hslaMatched[4]) > 1 ? parseFloat("" + hslaMatched[4]) / 100 : parseFloat("" + hslaMatched[4])
       };
     }
 
@@ -3705,13 +3703,13 @@
     if (weight === 0) return otherColor;
     var parsedColor1 = parseToRgb(color);
 
-    var color1 = _extends$2({}, parsedColor1, {
+    var color1 = _extends({}, parsedColor1, {
       alpha: typeof parsedColor1.alpha === 'number' ? parsedColor1.alpha : 1
     });
 
     var parsedColor2 = parseToRgb(otherColor);
 
-    var color2 = _extends$2({}, parsedColor2, {
+    var color2 = _extends({}, parsedColor2, {
       alpha: typeof parsedColor2.alpha === 'number' ? parsedColor2.alpha : 1
     }); // The formula is copied from the original Sass implementation:
     // http://sass-lang.com/documentation/Sass/Script/Functions.html#mix-instance_method
@@ -3800,6 +3798,13 @@
                 order: value
               });
             }
+          } else if (child.name === 'margin-horizontal' && value === 'auto') {
+            // Workaround for react-native issue #350
+            // https://github.com/facebook/react-native/issues/350#issuecomment-375238958
+            Object.assign(definitions[0].declarations, {
+              marginLeft: value,
+              marginRight: value
+            });
           } else if (child.name === 'border-color' && value.split(' ').length === 1) {
             // Workaround for react-native issue #19981
             // https://github.com/facebook/react-native/issues/19981
@@ -38492,9 +38497,9 @@
       });
     }, []);
     React.useEffect(function () {
-      _reactNative.Dimensions.addEventListener('change', handleChange);
+      var subscription = _reactNative.Dimensions.addEventListener('change', handleChange);
       return function () {
-        _reactNative.Dimensions.removeEventListener('change', handleChange);
+        subscription.remove();
       };
     }, [viewport]);
     return viewport;
@@ -38639,7 +38644,7 @@
     var resolveStyle = useStyle(style, styleName);
     var resolveTextStyle = useStyle([context && context.style, textStyle]);
     var hasTextStyle = context && context.style || textStyle;
-    return /*#__PURE__*/React__default["default"].createElement(_reactNative.View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(_reactNative.View, _extends$1({}, elementProps, {
       ref: ref,
       style: resolveStyle({
         media: media
@@ -38696,7 +38701,7 @@
 
     var classes = getStyles(styles$18, ['.alert', ".alert-".concat(color), dismissible && '.alert-dismissible']);
     var textClasses = getStyles(styles$18, [".alert-".concat(color, "-text")]);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       accessibilityRole: "alert",
       style: [classes, style],
@@ -38708,7 +38713,7 @@
 
   var _excluded$1p = ["color", "bold", "italic", "mark", "small", "style", "styleName"];
 
-  var _templateObject$18, _templateObject2$K, _templateObject3$p, _templateObject4$l, _templateObject5$j;
+  var _templateObject$18, _templateObject2$K, _templateObject3$p, _templateObject4$m, _templateObject5$k;
   var propTypes$1n = {
     color: PropTypes.oneOf([].concat(_toConsumableArray(Object.keys(THEME_COLORS)), ['muted', 'black-50', 'white-50'])),
     small: PropTypes.bool,
@@ -38724,8 +38729,8 @@
     text: css$1(_templateObject$18 || (_templateObject$18 = _taggedTemplateLiteral(["\n    font-family: $font-family-base;\n    font-size: $font-size-base;\n    font-weight: $font-weight-base;\n    line-height: $font-size-base * $line-height-base;\n  "]))),
     strong: css$1(_templateObject2$K || (_templateObject2$K = _taggedTemplateLiteral(["\n    font-weight: $font-weight-bolder;\n  "]))),
     italic: css$1(_templateObject3$p || (_templateObject3$p = _taggedTemplateLiteral(["\n    font-style: italic;\n  "]))),
-    small: css$1(_templateObject4$l || (_templateObject4$l = _taggedTemplateLiteral(["\n    font-size: $small-font-size;\n    line-height: $small-font-size * $line-height-base;\n  "]))),
-    mark: css$1(_templateObject5$j || (_templateObject5$j = _taggedTemplateLiteral(["\n    padding: $mark-padding;\n    background-color: $mark-bg;\n  "])))
+    small: css$1(_templateObject4$m || (_templateObject4$m = _taggedTemplateLiteral(["\n    font-size: $small-font-size;\n    line-height: $small-font-size * $line-height-base;\n  "]))),
+    mark: css$1(_templateObject5$k || (_templateObject5$k = _taggedTemplateLiteral(["\n    padding: $mark-padding;\n    background-color: $mark-bg;\n  "])))
   });
 
   var getStyleName = function getStyleName(styleName, color) {
@@ -38756,7 +38761,7 @@
     var resolveStyle = useStyle([// eslint-disable-next-line react/destructuring-assignment
     (!context || !context.hasTextAncestor) && styles$17.text, // eslint-disable-next-line react/destructuring-assignment
     context && context.style, classes, style], getStyleName(styleName, color));
-    var element = /*#__PURE__*/React__default["default"].createElement(_reactNative.Text, _extends({}, elementProps, {
+    var element = /*#__PURE__*/React__default["default"].createElement(_reactNative.Text, _extends$1({}, elementProps, {
       ref: ref,
       style: resolveStyle({
         media: media
@@ -38798,7 +38803,7 @@
         elementProps = _objectWithoutProperties(props, _excluded$1o);
 
     var classes = getStyles(styles$16, ['.badge', '.badge-text']);
-    return /*#__PURE__*/React__default["default"].createElement(Text, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(Text, _extends$1({}, elementProps, {
       ref: ref,
       style: [classes, style]
     }), children);
@@ -38832,7 +38837,7 @@
 
     var classes = getStyles(styles$15, ['.breadcrumb-item', active && '.breadcrumb-item-active']);
     var textClasses = getStyles(styles$15, ['.breadcrumb-text', active && '.breadcrumb-item-active']);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       style: [classes, style],
       textStyle: [textClasses, textStyle]
@@ -38871,7 +38876,7 @@
         elementProps = _objectWithoutProperties(props, _excluded$1m);
 
     var classes = getStyles(styles$14, ['.breadcrumb']);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       style: [classes, style]
     }), makeListChildren(children));
@@ -38917,7 +38922,7 @@
     var classes = getStyles(styles$13, ['.btn-group']); // Accessiblity role tabpanel is only supported on web.
 
     var role = _reactNative.Platform.OS === 'web' ? 'group' : null;
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       accessibilityRole: role,
       style: [classes, style]
@@ -38947,7 +38952,7 @@
         elementProps = _objectWithoutProperties(props, _excluded$1k);
 
     var classes = getStyles(styles$12, ['.btn-toolbar']);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       accessibilityRole: "toolbar",
       style: [classes, style]
@@ -39087,7 +39092,7 @@
     var resolveTextStyle = useStyle([context && context.style, textStyle]);
     var resolveActiveTextStyle = useStyle(active && activeTextStyle);
     var hasTextStyle = context && context.style || textStyle;
-    return /*#__PURE__*/React__default["default"].createElement(_reactNative.Pressable, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(_reactNative.Pressable, _extends$1({}, elementProps, {
       ref: actionRef,
       accessibilityRole: getRole$1(actionProps),
       style: function style(interaction) {
@@ -39142,7 +39147,7 @@
 
   var _excluded$1f = ["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 _templateObject$12, _templateObject2$H, _templateObject3$n, _templateObject4$l, _templateObject5$j, _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$1g = {
     children: PropTypes.node.isRequired,
     color: PropTypes.oneOf([].concat(_toConsumableArray(Object.keys(THEME_COLORS)), ['link'])),
@@ -39168,7 +39173,7 @@
   }, each(THEME_COLORS, function (color, value) {
     var _ref;
 
-    return _ref = {}, _defineProperty(_ref, ".btn-".concat(color), css$1(_templateObject4$k || (_templateObject4$k = _taggedTemplateLiteral(["\n      background-color: ", ";\n      border-color: ", ";\n      // @include box-shadow($btn-box-shadow);\n\n      &:hover {\n        background-color: ", ";\n        border-color: ", ";\n      }\n\n      &:focus {\n        background-color: ", ";\n        border-color: ", ";\n        /* @if $enable-shadows {\n          @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));\n        } @else {\n          // Avoid using mixin so we can pass custom focus shadow properly\n          box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);\n        } */\n      }\n\n      &:active {\n        background-color: ", ";\n        // Remove CSS gradients if they're enabled\n        // background-image: if($enable-gradients, none, null);\n        border-color: ", ";\n      }\n    "])), value, value, shadeColor(function (t) {
+    return _ref = {}, _defineProperty(_ref, ".btn-".concat(color), css$1(_templateObject4$l || (_templateObject4$l = _taggedTemplateLiteral(["\n      background-color: ", ";\n      border-color: ", ";\n      // @include box-shadow($btn-box-shadow);\n\n      &:hover {\n        background-color: ", ";\n        border-color: ", ";\n      }\n\n      &:focus {\n        background-color: ", ";\n        border-color: ", ";\n        /* @if $enable-shadows {\n          @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));\n        } @else {\n          // Avoid using mixin so we can pass custom focus shadow properly\n          box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);\n        } */\n      }\n\n      &:active {\n        background-color: ", ";\n        // Remove CSS gradients if they're enabled\n        // background-image: if($enable-gradients, none, null);\n        border-color: ", ";\n      }\n    "])), value, value, shadeColor(function (t) {
       return t['btn-hover-bg-shade-amount'];
     }, value), shadeColor(function (t) {
       return t['btn-hover-border-shade-amount'];
@@ -39180,11 +39185,11 @@
       return t['btn-active-bg-shade-amount'];
     }, value), shadeColor(function (t) {
       return t['btn-active-border-shade-amount'];
-    }, value))), _defineProperty(_ref, ".btn-".concat(color, "-text"), css$1(_templateObject5$i || (_templateObject5$i = _taggedTemplateLiteral(["\n      color: ", ";\n\n      &:hover {\n        color: ", ";\n      }\n\n      &:focus {\n        color: ", ";\n      }\n\n      &:active {\n        color: ", ";\n      }\n    "])), colorContrast(value), colorContrast(value), colorContrast(value), colorContrast(value))), _defineProperty(_ref, ".btn-".concat(color, "-active"), css$1(_templateObject6$g || (_templateObject6$g = _taggedTemplateLiteral(["\n      background-color: ", ";\n      // Remove CSS gradients if they're enabled\n      // background-image: if($enable-gradients, none, null);\n      border-color: ", ";\n    "])), shadeColor(function (t) {
+    }, value))), _defineProperty(_ref, ".btn-".concat(color, "-text"), css$1(_templateObject5$j || (_templateObject5$j = _taggedTemplateLiteral(["\n      color: ", ";\n\n      &:hover {\n        color: ", ";\n      }\n\n      &:focus {\n        color: ", ";\n      }\n\n      &:active {\n        color: ", ";\n      }\n    "])), colorContrast(value), colorContrast(value), colorContrast(value), colorContrast(value))), _defineProperty(_ref, ".btn-".concat(color, "-active"), css$1(_templateObject6$g || (_templateObject6$g = _taggedTemplateLiteral(["\n      background-color: ", ";\n      // Remove CSS gradients if they're enabled\n      // background-image: if($enable-gradients, none, null);\n      border-color: ", ";\n    "])), shadeColor(function (t) {
       return t['btn-active-bg-shade-amount'];
     }, value), shadeColor(function (t) {
       return t['btn-active-border-shade-amount'];
-    }, value))), _defineProperty(_ref, ".btn-".concat(color, "-active-text"), css$1(_templateObject7$c || (_templateObject7$c = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), colorContrast(value))), _defineProperty(_ref, ".btn-".concat(color, "-disabled"), css$1(_templateObject8$b || (_templateObject8$b = _taggedTemplateLiteral(["\n      $disabled-background: ", ";\n      $disabled-border: ", ";\n\n      background-color: $disabled-background;\n      // Remove CSS gradients if they're enabled\n      // background-image: if($enable-gradients, none, null);\n      border-color: $disabled-border;\n    "])), value, value)), _defineProperty(_ref, ".btn-".concat(color, "-disabled-text"), css$1(_templateObject9$7 || (_templateObject9$7 = _taggedTemplateLiteral(["\n      $disabled-color: ", ";\n\n      color: $disabled-color;\n    "])), colorContrast(value))), _defineProperty(_ref, ".btn-outline-".concat(color), css$1(_templateObject10$7 || (_templateObject10$7 = _taggedTemplateLiteral(["\n      border-color: ", ";\n\n      &:hover {\n        background-color: ", ";\n        border-color: ", ";\n      }\n\n      &:focus {\n        // box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);\n      }\n\n      &:active {\n        background-color: ", ";\n        border-color: ", ";\n\n        /* &:focus {\n          @if $enable-shadows {\n            @include box-shadow(\n              $btn-active-box-shadow,\n              0 0 0 $btn-focus-width rgba($color, 0.5)\n            );\n          } @else {\n            // Avoid using mixin so we can pass custom focus shadow properly\n            box-shadow: 0 0 0 $btn-focus-width rgba($color, 0.5);\n          }\n        } */\n      }\n    "])), value, value, value, value, value)), _defineProperty(_ref, ".btn-outline-".concat(color, "-text"), css$1(_templateObject11$5 || (_templateObject11$5 = _taggedTemplateLiteral(["\n      color: ", ";\n\n      &:hover {\n        color: ", ";\n      }\n\n      &:active {\n        color: ", ";\n      }\n    "])), value, colorContrast(value), colorContrast(value))), _defineProperty(_ref, ".btn-outline-".concat(color, "-disabled"), css$1(_templateObject12$4 || (_templateObject12$4 = _taggedTemplateLiteral(["\n      background-color: transparent;\n    "])))), _defineProperty(_ref, ".btn-outline-".concat(color, "-disabled-text"), css$1(_templateObject13$4 || (_templateObject13$4 = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), value)), _ref;
+    }, value))), _defineProperty(_ref, ".btn-".concat(color, "-active-text"), css$1(_templateObject7$c || (_templateObject7$c = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), colorContrast(value))), _defineProperty(_ref, ".btn-".concat(color, "-disabled"), css$1(_templateObject8$b || (_templateObject8$b = _taggedTemplateLiteral(["\n      $disabled-background: ", ";\n      $disabled-border: ", ";\n\n      background-color: $disabled-background;\n      // Remove CSS gradients if they're enabled\n      // background-image: if($enable-gradients, none, null);\n      border-color: $disabled-border;\n    "])), value, value)), _defineProperty(_ref, ".btn-".concat(color, "-disabled-text"), css$1(_templateObject9$8 || (_templateObject9$8 = _taggedTemplateLiteral(["\n      $disabled-color: ", ";\n\n      color: $disabled-color;\n    "])), colorContrast(value))), _defineProperty(_ref, ".btn-outline-".concat(color), css$1(_templateObject10$8 || (_templateObject10$8 = _taggedTemplateLiteral(["\n      border-color: ", ";\n\n      &:hover {\n        background-color: ", ";\n        border-color: ", ";\n      }\n\n      &:focus {\n        // box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);\n      }\n\n      &:active {\n        background-color: ", ";\n        border-color: ", ";\n\n        /* &:focus {\n          @if $enable-shadows {\n            @include box-shadow(\n              $btn-active-box-shadow,\n              0 0 0 $btn-focus-width rgba($color, 0.5)\n            );\n          } @else {\n            // Avoid using mixin so we can pass custom focus shadow properly\n            box-shadow: 0 0 0 $btn-focus-width rgba($color, 0.5);\n          }\n        } */\n      }\n    "])), value, value, value, value, value)), _defineProperty(_ref, ".btn-outline-".concat(color, "-text"), css$1(_templateObject11$6 || (_templateObject11$6 = _taggedTemplateLiteral(["\n      color: ", ";\n\n      &:hover {\n        color: ", ";\n      }\n\n      &:active {\n        color: ", ";\n      }\n    "])), value, colorContrast(value), colorContrast(value))), _defineProperty(_ref, ".btn-outline-".concat(color, "-disabled"), css$1(_templateObject12$5 || (_templateObject12$5 = _taggedTemplateLiteral(["\n      background-color: transparent;\n    "])))), _defineProperty(_ref, ".btn-outline-".concat(color, "-disabled-text"), css$1(_templateObject13$5 || (_templateObject13$5 = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), value)), _ref;
   })), {}, {
     '.btn-link-text': css$1(_templateObject14$3 || (_templateObject14$3 = _taggedTemplateLiteral(["\n    font-weight: $font-weight-normal;\n    color: $btn-link-color;\n    text-decoration-color: $btn-link-color; // added for bootstrap-rn\n    text-decoration-line: $link-decoration;\n\n    &:hover {\n      color: $btn-link-hover-color;\n      text-decoration-color: $btn-link-hover-color; // added for bootstrap-rn\n      text-decoration-line: $link-hover-decoration;\n    }\n\n    &:focus {\n      text-decoration-line: $link-hover-decoration;\n    }\n\n    // No need for an active state here\n  "]))),
     '.btn-link-text-disabled': css$1(_templateObject15$2 || (_templateObject15$2 = _taggedTemplateLiteral(["\n    color: $btn-link-disabled-color;\n  "]))),
@@ -39192,7 +39197,7 @@
     '.btn-lg-text': css$1(_templateObject17$1 || (_templateObject17$1 = _taggedTemplateLiteral(["\n    line-height: $btn-font-size-lg * $btn-line-height;\n    font-size: $btn-font-size-lg;\n  "]))),
     '.btn-sm': css$1(_templateObject18$1 || (_templateObject18$1 = _taggedTemplateLiteral(["\n    padding: $btn-padding-y-sm $btn-padding-x-sm;\n    // Manually declare to provide an override to the browser default\n    border-radius: $btn-border-radius-sm;\n  "]))),
     '.btn-sm-text': css$1(_templateObject19$1 || (_templateObject19$1 = _taggedTemplateLiteral(["\n    line-height: $btn-font-size-sm * $btn-line-height;\n    font-size: $btn-font-size-sm;\n  "]))),
-    '.btn-group > .btn': css$1(_templateObject20$1 || (_templateObject20$1 = _taggedTemplateLiteral(["\n    position: relative;\n    flex: 1 1 auto;\n\n    &:hover {\n      z-index: 1;\n    }\n    &:focus {\n      z-index: 1;\n    }\n    &:active {\n      z-index: 1;\n    }\n  "]))),
+    '.btn-group > .btn': css$1(_templateObject20$1 || (_templateObject20$1 = _taggedTemplateLiteral(["\n    position: relative;\n    // flex: 1 1 auto;\n\n    &:hover {\n      z-index: 1;\n    }\n    &:focus {\n      z-index: 1;\n    }\n    &:active {\n      z-index: 1;\n    }\n  "]))),
     '.btn-group > .btn-active': css$1(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n    z-index: 2; // 1;\n  "]))),
     '.btn-group > .btn-not-first': css$1(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n    margin-left: -$btn-border-width;\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n  "]))),
     '.btn-group > .btn-not-last': css$1(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n  "])))
@@ -39245,7 +39250,7 @@
     var activeClasses = getStyles(styles$11, ["".concat(getVariant(color, outline), "-active")]);
     var textClasses = getStyles(styles$11, ['.btn-text', "".concat(getVariant(color, outline), "-text"), color === 'link' && '.btn-link-text', disabled && "".concat(getVariant(color, outline), "-text-disabled"), disabled && color === 'link' && '.btn-link-text-disabled', hasSize(size, group, 'lg') && '.btn-lg-text', hasSize(size, group, 'sm') && '.btn-sm-text']);
     var activeTextClasses = getStyles(styles$11, ["".concat(getVariant(color, outline), "-active-text")]);
-    return /*#__PURE__*/React__default["default"].createElement(Pressable, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(Pressable, _extends$1({}, elementProps, {
       ref: ref,
       active: active,
       disabled: disabled,
@@ -39283,7 +39288,7 @@
     var textClasses = getStyles(styles$10, ['blockquote-text']); // Accessiblity role blockquote is only supported on web.
 
     var role = _reactNative.Platform.OS === 'web' ? 'blockquote' : null;
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       accessibilityRole: role,
       style: [classes, style],
@@ -39304,7 +39309,7 @@
     textStyle: PropTypes.any
   };
   var styles$$ = StyleSheet.create({
-    body: css$1(_templateObject$10 || (_templateObject$10 = _taggedTemplateLiteral(["\n    background-color: $body-bg;\n  "]))),
+    body: css$1(_templateObject$10 || (_templateObject$10 = _taggedTemplateLiteral(["\n    background-color: $body-bg;\n    height: 100%; // added for bootstrap-rn\n  "]))),
     'body-text': css$1(_templateObject2$F || (_templateObject2$F = _taggedTemplateLiteral(["\n    color: $body-color;\n    text-align: $body-text-align;\n  "])))
   });
   var Body = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
@@ -39315,7 +39320,7 @@
 
     var classes = getStyles(styles$$, ['body']);
     var textClasses = getStyles(styles$$, ['body-text']);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       style: [classes, style],
       textStyle: [textClasses, textStyle]
@@ -39346,7 +39351,7 @@
 
     var classes = getStyles(styles$_, ['.card-body']);
     var textClasses = getStyles(styles$_, [".card-body-text"]);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       style: [classes, style],
       textStyle: [textClasses, textStyle]
@@ -39377,7 +39382,7 @@
 
     var classes = getStyles(styles$Z, ['.card-header']);
     var textClasses = getStyles(styles$Z, ['.card-header-text']);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       style: [classes, style],
       textStyle: [textClasses, textStyle]
@@ -39408,7 +39413,7 @@
 
     var classes = getStyles(styles$Y, ['.card-footer']);
     var textClasses = getStyles(styles$Y, ['.card-footer-text']);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       style: [classes, style],
       textStyle: [textClasses, textStyle]
@@ -39434,7 +39439,7 @@
         elementProps = _objectWithoutProperties(props, _excluded$19);
 
     var classes = getStyles(styles$X, ['.card']);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       style: [classes, style]
     }), children);
@@ -39445,9 +39450,15 @@
   Card.Body = CardBody;
   Card.Footer = CardFooter;
 
+  var ModalContext = /*#__PURE__*/React__default["default"].createContext();
+  ModalContext.displayName = 'ModalContext';
+
+  var OffcanvasContext = /*#__PURE__*/React__default["default"].createContext();
+  OffcanvasContext.displayName = 'OffcanvasContext';
+
   var _excluded$18 = ["children", "disabled", "style", "textStyle"];
 
-  var _templateObject$X, _templateObject2$B, _templateObject3$m;
+  var _templateObject$X, _templateObject2$B, _templateObject3$m, _templateObject4$k, _templateObject5$i;
   var propTypes$19 = {
     children: PropTypes.node,
     disabled: PropTypes.bool,
@@ -39459,7 +39470,11 @@
   var styles$W = StyleSheet.create({
     '.btn-close': css$1(_templateObject$X || (_templateObject$X = _taggedTemplateLiteral(["\n    // Workaround for missing box-sizing in react native.\n    $additional-width: $btn-close-padding-x * 2;\n    $additional-height: $btn-close-padding-y * 2;\n\n    // box-sizing: content-box;\n    width: $btn-close-width + $additional-width;\n    height: $btn-close-height + $additional-height;\n    padding: $btn-close-padding-y $btn-close-padding-x;\n    background: transparent;\n    border-width: 0; // for button elements\n    // @include border-radius();\n    opacity: $btn-close-opacity;\n\n    &:hover {\n      opacity: $btn-close-hover-opacity;\n    }\n\n    &:focus {\n      // outline: 0;\n      // box-shadow: $btn-close-focus-shadow;\n      opacity: $btn-close-focus-opacity;\n    }\n  "]))),
     '.btn-close-text': css$1(_templateObject2$B || (_templateObject2$B = _taggedTemplateLiteral(["\n    color: $btn-close-color;\n\n    // Override <a>'s hover style\n    &:hover {\n      color: $btn-close-color;\n      text-decoration: none;\n    }\n  "]))),
-    '.btn-close-disabled': css$1(_templateObject3$m || (_templateObject3$m = _taggedTemplateLiteral(["\n    // pointer-events: none;\n    // user-select: none;\n    opacity: $btn-close-disabled-opacity;\n  "])))
+    '.btn-close-disabled': css$1(_templateObject3$m || (_templateObject3$m = _taggedTemplateLiteral(["\n    // pointer-events: none;\n    // user-select: none;\n    opacity: $btn-close-disabled-opacity;\n  "]))),
+    // Modal styles
+    '.modal-header .btn-close': css$1(_templateObject4$k || (_templateObject4$k = _taggedTemplateLiteral(["\n    padding: $modal-header-padding-y * 0.5 $modal-header-padding-x * 0.5;\n    margin: -0.5 * $modal-header-padding-y -0.5 * $modal-header-padding-x -0.5 *\n      $modal-header-padding-y auto;\n\n    // Workaround for missing box-sizing in react native.\n    width: $btn-close-width + $modal-header-padding-x;\n    height: $btn-close-height + $modal-header-padding-y;\n  "]))),
+    // Offcanvas styles
+    '.offcanvas-header .btn-close': css$1(_templateObject5$i || (_templateObject5$i = _taggedTemplateLiteral(["\n    padding: $offcanvas-padding-y * 0.5 $offcanvas-padding-x * 0.5;\n    margin-top: -0.5 * $offcanvas-padding-y;\n    margin-right: -0.5 * $offcanvas-padding-x;\n    margin-bottom: -0.5 * $offcanvas-padding-y;\n\n    // Workaround for missing box-sizing in react native.\n    width: $btn-close-width + $offcanvas-padding-x;\n    height: $btn-close-height + $offcanvas-padding-y;\n  "])))
   });
   var CloseButton = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
     props.children;
@@ -39469,9 +39484,13 @@
         textStyle = props.textStyle,
         elementProps = _objectWithoutProperties(props, _excluded$18);
 
-    var classes = getStyles(styles$W, ['.btn-close', disabled && '.btn-close-disabled']);
+    var modal = React.useContext(ModalContext);
+    var offcanvas = React.useContext(OffcanvasContext);
+    var classes = getStyles(styles$W, ['.btn-close', disabled && '.btn-close-disabled', // Modal styles
+    modal && '.modal-header .btn-close', // Offcanvas styles
+    offcanvas && '.offcanvas-header .btn-close']);
     var textClasses = getStyles(styles$W, ['.btn-close-text']);
-    return /*#__PURE__*/React__default["default"].createElement(Pressable, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(Pressable, _extends$1({}, elementProps, {
       ref: ref,
       disabled: disabled,
       style: [classes, style],
@@ -39595,7 +39614,7 @@
       return null;
     }
 
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       nativeID: identifier
     }), children);
@@ -39687,7 +39706,7 @@
     var classes = getStyles(styles$V, ['.container', // Hint: Bootstrap's .container class is identical with .container-sm.
     fluid !== true && ".container-".concat(fluid), // Navbar styles
     navbar && '.navbar .container', navbar && navbar.expand && ".navbar-expand".concat(navbar.expand === true ? '' : "-".concat(navbar.expand), " .container")]);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       style: [classes, style]
     }));
@@ -39695,9 +39714,9 @@
   Container.displayName = 'Container';
   Container.propTypes = propTypes$16;
 
-  var _excluded$14 = ["children", "type", "value", "onChange", "onPress", "label", "disabled", "valid", "invalid", "style", "inputStyle", "labelStyle"];
+  var _excluded$14 = ["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 _templateObject$V, _templateObject2$z, _templateObject3$k, _templateObject4$i, _templateObject5$g, _templateObject6$e, _templateObject7$a, _templateObject8$9, _templateObject9$7, _templateObject10$7, _templateObject11$5, _templateObject12$4, _templateObject13$4;
   var propTypes$15 = {
     children: PropTypes.node,
     type: PropTypes.oneOf(['checkbox', 'radio', 'switch']).isRequired,
@@ -39713,7 +39732,9 @@
     // eslint-disable-next-line react/forbid-prop-types
     inputStyle: PropTypes.any,
     // eslint-disable-next-line react/forbid-prop-types
-    labelStyle: PropTypes.any
+    labelStyle: PropTypes.any,
+    // eslint-disable-next-line react/forbid-prop-types
+    labelTextStyle: PropTypes.any
   };
   var styles$U = StyleSheet.create(_objectSpread2({
     '.form-check': css$1(_templateObject$V || (_templateObject$V = _taggedTemplateLiteral(["\n    // display: block;\n    flex-direction: row; // added for bootstrap-rn\n    min-height: $form-check-min-height;\n    padding-left: $form-check-padding-start;\n    margin-bottom: $form-check-margin-bottom;\n  "]))),
@@ -39724,16 +39745,16 @@
     '.form-check-input-checked': css$1(_templateObject6$e || (_templateObject6$e = _taggedTemplateLiteral(["\n    background-color: $form-check-input-checked-bg-color;\n    border-color: $form-check-input-checked-border-color;\n  "]))),
     '.form-check-label': css$1(_templateObject7$a || (_templateObject7$a = _taggedTemplateLiteral(["\n    color: $form-check-label-color;\n    @include platform(web) {\n      cursor: $form-check-label-cursor;\n    }\n  "]))),
     '.form-switch': css$1(_templateObject8$9 || (_templateObject8$9 = _taggedTemplateLiteral(["\n    padding-left: $form-switch-padding-start;\n  "]))),
-    '.form-check-input-switch': css$1(_templateObject9$6 || (_templateObject9$6 = _taggedTemplateLiteral(["\n    width: $form-switch-width;\n    margin-left: $form-switch-padding-start * -1;\n    margin-right: $form-switch-padding-start - $form-switch-width; // added for bootstrap-rn\n    border-radius: $form-switch-border-radius;\n    // @include transition($form-switch-transition);\n    align-items: flex-start; // added for bootstrap-rn\n    justify-content: center; // added for bootstrap-rn\n  "]))),
-    '.form-check-input-switch-checked': css$1(_templateObject10$6 || (_templateObject10$6 = _taggedTemplateLiteral(["\n    align-items: flex-end; // added for bootstrap-rn\n    justify-content: center; // added for bootstrap-rn\n  "])))
+    '.form-check-input-switch': css$1(_templateObject9$7 || (_templateObject9$7 = _taggedTemplateLiteral(["\n    width: $form-switch-width;\n    margin-left: $form-switch-padding-start * -1;\n    margin-right: $form-switch-padding-start - $form-switch-width; // added for bootstrap-rn\n    border-radius: $form-switch-border-radius;\n    // @include transition($form-switch-transition);\n    align-items: flex-start; // added for bootstrap-rn\n    justify-content: center; // added for bootstrap-rn\n  "]))),
+    '.form-check-input-switch-checked': css$1(_templateObject10$7 || (_templateObject10$7 = _taggedTemplateLiteral(["\n    align-items: flex-end; // added for bootstrap-rn\n    justify-content: center; // added for bootstrap-rn\n  "])))
   }, each(FORM_VALIDATION_STATES, function (state, data) {
     var _ref;
 
-    return _ref = {}, _defineProperty(_ref, ".form-check-input.is-".concat(state), css$1(_templateObject11$4 || (_templateObject11$4 = _taggedTemplateLiteral(["\n      border: ", ";\n\n      &:focus {\n        // box-shadow: $focus-box-shadow;\n      }\n    "])), function (t) {
+    return _ref = {}, _defineProperty(_ref, ".form-check-input.is-".concat(state), css$1(_templateObject11$5 || (_templateObject11$5 = _taggedTemplateLiteral(["\n      border: ", ";\n\n      &:focus {\n        // box-shadow: $focus-box-shadow;\n      }\n    "])), function (t) {
       return data(t).color;
-    })), _defineProperty(_ref, ".form-check-input-checked.is-".concat(state), css$1(_templateObject12$3 || (_templateObject12$3 = _taggedTemplateLiteral(["\n      background-color: ", ";\n    "])), function (t) {
+    })), _defineProperty(_ref, ".form-check-input-checked.is-".concat(state), css$1(_templateObject12$4 || (_templateObject12$4 = _taggedTemplateLiteral(["\n      background-color: ", ";\n    "])), function (t) {
       return data(t).color;
-    })), _defineProperty(_ref, ".form-check-label.is-".concat(state), css$1(_templateObject13$3 || (_templateObject13$3 = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), function (t) {
+    })), _defineProperty(_ref, ".form-check-label.is-".concat(state), css$1(_templateObject13$4 || (_templateObject13$4 = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), function (t) {
       return data(t).color;
     })), _ref;
   })));
@@ -39775,6 +39796,7 @@
         style = modifierProps.style,
         inputStyle = modifierProps.inputStyle,
         labelStyle = modifierProps.labelStyle,
+        labelTextStyle = modifierProps.labelTextStyle,
         elementProps = _objectWithoutProperties(modifierProps, _excluded$14);
 
     if (!children && !label) {
@@ -39784,9 +39806,9 @@
 
     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 labelTextClasses = getStyles(styles$U, ['.form-check-label', valid && '.form-check-label.is-valid', invalid && '.form-check-label.is-invalid']); // TODO &:focus, &:active
 
-    return /*#__PURE__*/React__default["default"].createElement(Pressable, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(Pressable, _extends$1({}, elementProps, {
       ref: modifierRef,
       accessibilityRole: type,
       accessibilityChecked: value,
@@ -39798,17 +39820,18 @@
       style: [classes, style]
     }), /*#__PURE__*/React__default["default"].createElement(View, {
       style: [inputClasses, inputStyle]
-    }, getSvg(type, value)), children && /*#__PURE__*/React__default["default"].createElement(Text, {
-      style: [labelClasses, labelStyle]
+    }, getSvg(type, value)), children && /*#__PURE__*/React__default["default"].createElement(View, {
+      style: labelStyle,
+      textStyle: [labelTextClasses, labelTextStyle]
     }, children));
   });
   CheckInput.displayName = 'CheckInput';
   CheckInput.propTypes = propTypes$15;
 
   var Checkbox = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
-    var elementProps = _extends({}, props);
+    var elementProps = _extends$1({}, props);
 
-    return /*#__PURE__*/React__default["default"].createElement(CheckInput, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(CheckInput, _extends$1({}, elementProps, {
       ref: ref,
       type: "checkbox"
     }));
@@ -39853,7 +39876,7 @@
         elementProps = _objectWithoutProperties(props, _excluded$13);
 
     var classes = getStyles(styles$T, ['*', ".col-".concat(size.toString()), sizeSm && ".col-sm-".concat(sizeSm.toString()), sizeMd && ".col-md-".concat(sizeMd.toString()), sizeLg && ".col-lg-".concat(sizeLg.toString()), sizeXl && ".col-xl-".concat(sizeXl.toString())]);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       style: [classes, style]
     }), children);
@@ -39880,7 +39903,7 @@
     var classes = getStyles(styles$S, ['code']); // Accessiblity role code is only supported on web.
 
     var role = _reactNative.Platform.OS === 'web' ? 'code' : null;
-    return /*#__PURE__*/React__default["default"].createElement(Text, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(Text, _extends$1({}, elementProps, {
       ref: ref,
       accessibilityRole: role,
       style: [classes, style]
@@ -40079,7 +40102,7 @@
 
   var _excluded$10 = ["children", "start", "end", "style", "textStyle"];
 
-  var _templateObject$R, _templateObject2$x, _templateObject3$i, _templateObject4$g, _templateObject5$e, _templateObject6$d, _templateObject7$9, _templateObject8$8, _templateObject9$5, _templateObject10$5;
+  var _templateObject$R, _templateObject2$x, _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,
@@ -40103,9 +40126,9 @@
     '.dropstart .dropdown-menu[data-bs-popper]': css$1(_templateObject7$9 || (_templateObject7$9 = _taggedTemplateLiteral(["\n    top: 0;\n    right: 100%;\n    left: auto;\n    margin-top: 0;\n    margin-right: $dropdown-spacer;\n  "]))),
     '.navbar-nav .dropdown-menu': css$1(_templateObject8$8 || (_templateObject8$8 = _taggedTemplateLiteral(["\n    position: relative; // static;\n  "])))
   }, each(GRID_BREAKPOINTS, function (breakpoint) {
-    return _defineProperty({}, ".navbar-expand".concat(infix(next(breakpoint)), " .navbar-nav .dropdown-menu"), css$1(_templateObject9$5 || (_templateObject9$5 = _taggedTemplateLiteral(["\n      @include media-breakpoint-up(", ") {\n        position: absolute;\n      }\n    "])), next(breakpoint)));
+    return _defineProperty({}, ".navbar-expand".concat(infix(next(breakpoint)), " .navbar-nav .dropdown-menu"), css$1(_templateObject9$6 || (_templateObject9$6 = _taggedTemplateLiteral(["\n      @include media-breakpoint-up(", ") {\n        position: absolute;\n      }\n    "])), next(breakpoint)));
   })), {}, {
-    '.dropdown-menu-text': css$1(_templateObject10$5 || (_templateObject10$5 = _taggedTemplateLiteral(["\n    font-size: $dropdown-font-size;\n    color: $dropdown-color;\n    text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)\n  "])))
+    '.dropdown-menu-text': css$1(_templateObject10$6 || (_templateObject10$6 = _taggedTemplateLiteral(["\n    font-size: $dropdown-font-size;\n    color: $dropdown-color;\n    text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)\n  "])))
   }));
 
   var getAlignment = function getAlignment(media, start, end) {
@@ -40175,7 +40198,7 @@
           setVisible(false);
         },
         autoClose: autoClose
-      }), /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+      }), /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
         ref: concatRefs(dialogRef, ref),
         accessibilityLabelledBy: identifier,
         style: [classes, style],
@@ -40196,7 +40219,7 @@
           setVisible(false);
         },
         autoClose: autoClose
-      }), /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+      }), /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
         ref: concatRefs(overlayRef, ref),
         accessibilityLabelledBy: identifier,
         style: [classes, overlay.overlayProps.style, {
@@ -40235,7 +40258,7 @@
         elementProps = _objectWithoutProperties(props, _excluded$$);
 
     var classes = getStyles(styles$P, ['heading', ".h".concat(size)]);
-    return /*#__PURE__*/React__default["default"].createElement(Text, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(Text, _extends$1({}, elementProps, {
       ref: ref,
       accessibilityRole: "header",
       accessibilityLevel: size,
@@ -40262,7 +40285,7 @@
         elementProps = _objectWithoutProperties(props, _excluded$_);
 
     var classes = getStyles(styles$O, ['.dropdown-header']);
-    return /*#__PURE__*/React__default["default"].createElement(Heading$1, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(Heading$1, _extends$1({}, elementProps, {
       ref: ref,
       size: 6,
       style: [classes, style]
@@ -40307,7 +40330,7 @@
     var dropdown = useForcedContext(DropdownContext);
     var classes = getStyles(styles$N, ['.dropdown-item', active && '.dropdown-item-active', disabled && '.dropdown-item-disabled']);
     var textClasses = getStyles(styles$N, ['.dropdown-item-text', active && '.dropdown-item-active-text', disabled && '.dropdown-item-disabled-text']);
-    return /*#__PURE__*/React__default["default"].createElement(Pressable, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(Pressable, _extends$1({}, elementProps, {
       onPress: concatFns(function () {
         dropdown.setVisible(false);
       }, handlePress),
@@ -40331,19 +40354,19 @@
   var styles$M = StyleSheet.create({
     '.dropdown-item-text': css$1(_templateObject$N || (_templateObject$N = _taggedTemplateLiteral(["\n    // display: block;\n    padding: $dropdown-item-padding-y $dropdown-item-padding-x;\n    color: $dropdown-link-color;\n  "])))
   });
-  var DropdownTextItem = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
+  var DropdownItemText = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
     var children = props.children,
         style = props.style,
         elementProps = _objectWithoutProperties(props, _excluded$Y);
 
     var classes = getStyles(styles$M, ['.dropdown-item-text']);
-    return /*#__PURE__*/React__default["default"].createElement(Text, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(Text, _extends$1({}, elementProps, {
       ref: ref,
       style: [classes, style]
     }), children);
   });
-  DropdownTextItem.displayName = 'DropdownTextItem';
-  DropdownTextItem.propTypes = propTypes$X;
+  DropdownItemText.displayName = 'DropdownItemText';
+  DropdownItemText.propTypes = propTypes$X;
 
   var _excluded$X = ["style"];
 
@@ -40360,7 +40383,7 @@
         elementProps = _objectWithoutProperties(props, _excluded$X);
 
     var classes = getStyles(styles$L, ['.dropdown-divider']);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       style: [classes, style]
     }));
@@ -40400,7 +40423,7 @@
     return _objectSpread2(_objectSpread2({}, restProps), {}, {
       onPress: function onPress(event) {
         if (handlePress) handlePress(event);
-        context.setExpanded(false);
+        context.setVisible(false);
       }
     });
   }
@@ -40440,7 +40463,7 @@
 
     var dropdown = useDropdown(defaultVisible, visible, onToggle, direction, display, autoClose);
     var classes = getStyles(styles$K, ['.dropdown']);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       style: [classes, style]
     }), /*#__PURE__*/React__default["default"].createElement(DropdownContext.Provider, {
@@ -40454,7 +40477,7 @@
   Dropdown.Menu = DropdownMenu;
   Dropdown.Header = DropdownHeader;
   Dropdown.Item = DropdownItem;
-  Dropdown.TextItem = DropdownTextItem;
+  Dropdown.ItemText = DropdownItemText;
   Dropdown.Divider = DropdownDivider;
   Dropdown.useDismiss = useDismissDropdown;
   Dropdown.useToggle = useToggleDropdown;
@@ -40480,7 +40503,7 @@
         elementProps = _objectWithoutProperties(props, _excluded$U);
 
     var classes = getStyles(styles$J, [".display-".concat(size)]);
-    return /*#__PURE__*/React__default["default"].createElement(Heading$1, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(Heading$1, _extends$1({}, elementProps, {
       ref: ref,
       size: 1,
       style: [classes, style]
@@ -40510,7 +40533,7 @@
         elementProps = _objectWithoutProperties(props, _excluded$T);
 
     var classes = getStyles(styles$I, [".".concat(type, "-feedback")]);
-    return /*#__PURE__*/React__default["default"].createElement(Text, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(Text, _extends$1({}, elementProps, {
       ref: ref,
       style: [classes, style]
     }), children);
@@ -40535,7 +40558,7 @@
         elementProps = _objectWithoutProperties(props, _excluded$S);
 
     var classes = getStyles(styles$H, ['.form-text']);
-    return /*#__PURE__*/React__default["default"].createElement(Text, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(Text, _extends$1({}, elementProps, {
       ref: ref,
       style: [classes, style]
     }), children);
@@ -40568,7 +40591,7 @@
 
     var media = useMedia();
     var resolveStyle = useStyle(style, styleName);
-    return /*#__PURE__*/React__default["default"].createElement(_reactNative.TextInput, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(_reactNative.TextInput, _extends$1({}, elementProps, {
       ref: ref,
       onFocus: function onFocus() {
         setFocused(true);
@@ -40605,13 +40628,13 @@
     style: PropTypes.any
   };
   var styles$G = StyleSheet.create(_objectSpread2({
-    '.form-control': css$1(_templateObject$H || (_templateObject$H = _taggedTemplateLiteral(["\n    // display: block;\n    width: 100%;\n    padding: $input-padding-y $input-padding-x;\n    font-family: $input-font-family;\n    font-size: $input-font-size;\n    font-weight: $input-font-weight;\n    line-height: $input-font-size * $input-line-height;\n    color: $input-color;\n    text-align-vertical: top; // added for bootstrap-rn\n    background-color: $input-bg;\n    // background-clip: padding-box;\n    border: $input-border-width solid $input-border-color;\n    @include platform(web) {\n      appearance: none; // Fix appearance for date inputs in Safari\n    }\n\n    // Note: This has no effect on <select>s in some browsers, due to the limited stylability of \"<select>\"s in CSS.\n    border-radius: $input-border-radius;\n\n    // @include box-shadow($input-box-shadow);\n    // @include transition($input-transition);\n\n    // Customize the \":focus\" state to imitate native WebKit styles.\n    &:focus {\n      color: $input-focus-color;\n      background-color: $input-focus-bg;\n      border-color: $input-focus-border-color;\n      @include platform(web) {\n        outline-width: 0; // outline: 0;\n      }\n      /* @if $enable-shadows {\n        @include box-shadow($input-box-shadow, $input-focus-box-shadow);\n      } @else {\n        // Avoid using mixin so we can pass custom focus shadow properly\n        box-shadow: $input-focus-box-shadow;\n      } */\n    }\n  "]))),
+    '.form-control': css$1(_templateObject$H || (_templateObject$H = _taggedTemplateLiteral(["\n    // display: block;\n    width: 100%;\n    padding: $input-padding-y $input-padding-x;\n    font-family: $input-font-family;\n    font-size: $input-font-size;\n    font-weight: $input-font-weight;\n    line-height: $input-font-size * $input-line-height;\n    color: $input-color;\n    background-color: $input-bg;\n    // background-clip: padding-box;\n    border: $input-border-width solid $input-border-color;\n    @include platform(web) {\n      appearance: none; // Fix appearance for date inputs in Safari\n    }\n\n    // Note: This has no effect on <select>s in some browsers, due to the limited stylability of \"<select>\"s in CSS.\n    border-radius: $input-border-radius;\n\n    // @include box-shadow($input-box-shadow);\n    // @include transition($input-transition);\n\n    // Customize the \":focus\" state to imitate native WebKit styles.\n    &:focus {\n      color: $input-focus-color;\n      background-color: $input-focus-bg;\n      border-color: $input-focus-border-color;\n      @include platform(web) {\n        outline-width: 0; // outline: 0;\n      }\n      /* @if $enable-shadows {\n        @include box-shadow($input-box-shadow, $input-focus-box-shadow);\n      } @else {\n        // Avoid using mixin so we can pass custom focus shadow properly\n        box-shadow: $input-focus-box-shadow;\n      } */\n    }\n  "]))),
     '.form-control-disabled': css$1(_templateObject2$u || (_templateObject2$u = _taggedTemplateLiteral(["\n    background-color: $input-disabled-bg;\n    border-color: $input-disabled-border-color;\n    // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.\n    opacity: 1;\n  "]))),
     '.form-control-sm': css$1(_templateObject3$g || (_templateObject3$g = _taggedTemplateLiteral(["\n    min-height: $input-height-sm;\n    padding: $input-padding-y-sm $input-padding-x-sm;\n    font-size: $input-font-size-sm;\n    border-radius: $input-border-radius-sm;\n  "]))),
     '.form-control-lg': css$1(_templateObject4$e || (_templateObject4$e = _taggedTemplateLiteral(["\n    min-height: $input-height-lg;\n    padding: $input-padding-y-lg $input-padding-x-lg;\n    font-size: $input-font-size-lg;\n    border-radius: $input-border-radius-lg;\n  "]))),
-    '.form-control-multiline': css$1(_templateObject5$c || (_templateObject5$c = _taggedTemplateLiteral(["\n    min-height: $input-height;\n  "]))),
-    '.form-control-multiline-sm': css$1(_templateObject6$b || (_templateObject6$b = _taggedTemplateLiteral(["\n    min-height: $input-height-sm;\n  "]))),
-    '.form-control-multiline-lg': css$1(_templateObject7$8 || (_templateObject7$8 = _taggedTemplateLiteral(["\n    min-height: $input-height-lg;\n  "])))
+    '.form-control-multiline': css$1(_templateObject5$c || (_templateObject5$c = _taggedTemplateLiteral(["\n    text-align-vertical: top; // added for bootstrap-rn\n    min-height: $input-height;\n\n    @include platform(ios) {\n      min-height: $input-height-sm + 8rem; // added for bootstrap-rn\n    }\n  "]))),
+    '.form-control-multiline-sm': css$1(_templateObject6$b || (_templateObject6$b = _taggedTemplateLiteral(["\n    min-height: $input-height-sm;\n\n    @include platform(ios) {\n      // TODO: Adjust ios height to sm size\n      min-height: $input-height-sm + 8rem; // added for bootstrap-rn\n    }\n  "]))),
+    '.form-control-multiline-lg': css$1(_templateObject7$8 || (_templateObject7$8 = _taggedTemplateLiteral(["\n    min-height: $input-height-lg;\n\n    @include platform(ios) {\n      // TODO: Adjust ios height to lg size\n      min-height: $input-height-sm + 8rem; // added for bootstrap-rn\n    }\n  "])))
   }, each(FORM_VALIDATION_STATES, function (state, data) {
     return _defineProperty({}, ".form-control.is-".concat(state), css$1(_templateObject8$7 || (_templateObject8$7 = _taggedTemplateLiteral(["\n      border-color: ", ";\n\n      &:focus {\n        border-color: ", ";\n        // box-shadow: $focus-box-shadow;\n      }\n    "])), function (t) {
       return data(t).color;
@@ -40639,11 +40662,13 @@
         elementProps = _objectWithoutProperties(modifierProps, _excluded$Q);
 
     var classes = getStyles(styles$G, ['.form-control', disabled && '.form-control-disabled', size === 'sm' && '.form-control-sm', size === 'lg' && '.form-control-lg', multiline && '.form-control-multiline', multiline && size === 'sm' && '.form-control-multiline-sm', multiline && size === 'lg' && '.form-control-multiline-lg', valid && '.form-control.is-valid', invalid && '.form-control.is-invalid']);
-    return /*#__PURE__*/React__default["default"].createElement(TextInput, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(TextInput, _extends$1({}, elementProps, {
       ref: modifierRef,
       placeholderTextColor: placeholderTextColor || StyleSheet.value('input-placeholder-color'),
       multiline: multiline,
       disabled: disabled,
+      editable: !disabled,
+      selectTextOnFocus: !disabled,
       style: [classes, style]
     }));
   });
@@ -40775,7 +40800,7 @@
 
   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$t, _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
@@ -40797,15 +40822,15 @@
       return t['popover-border-width'];
     })),
     '.bs-popover-end .popover-arrow::before': css$1(_templateObject8$6 || (_templateObject8$6 = _taggedTemplateLiteral(["\n    left: 0;\n    border-top-width: $popover-arrow-width * 0.5;\n    border-right-width: $popover-arrow-height;\n    border-left-width: 0;\n    border-bottom-width: $popover-arrow-width * 0.5;\n    border-right-color: $popover-arrow-outer-color;\n  "]))),
-    '.bs-popover-end .popover-arrow::after': css$1(_templateObject9$4 || (_templateObject9$4 = _taggedTemplateLiteral(["\n    left: $popover-border-width;\n    border-top-width: $popover-arrow-width * 0.5;\n    border-right-width: $popover-arrow-height;\n    border-left-width: 0;\n    border-bottom-width: $popover-arrow-width * 0.5;\n    border-right-color: $popover-arrow-color;\n  "]))),
-    '.bs-popover-bottom .popover-arrow': css$1(_templateObject10$4 || (_templateObject10$4 = _taggedTemplateLiteral(["\n    top: ", ";\n  "])), subtract(function (t) {
+    '.bs-popover-end .popover-arrow::after': css$1(_templateObject9$5 || (_templateObject9$5 = _taggedTemplateLiteral(["\n    left: $popover-border-width;\n    border-top-width: $popover-arrow-width * 0.5;\n    border-right-width: $popover-arrow-height;\n    border-left-width: 0;\n    border-bottom-width: $popover-arrow-width * 0.5;\n    border-right-color: $popover-arrow-color;\n  "]))),
+    '.bs-popover-bottom .popover-arrow': css$1(_templateObject10$5 || (_templateObject10$5 = _taggedTemplateLiteral(["\n    top: ", ";\n  "])), subtract(function (t) {
       return "-".concat(t['popover-arrow-height']);
     }, function (t) {
       return t['popover-border-width'];
     })),
-    '.bs-popover-bottom .popover-arrow::before': css$1(_templateObject11$3 || (_templateObject11$3 = _taggedTemplateLiteral(["\n    top: 0;\n    border-top-width: 0;\n    border-right-width: $popover-arrow-width * 0.5;\n    border-left-width: $popover-arrow-width * 0.5;\n    border-bottom-width: $popover-arrow-height;\n    border-bottom-color: $popover-arrow-outer-color;\n  "]))),
-    '.bs-popover-bottom .popover-arrow::after': css$1(_templateObject12$2 || (_templateObject12$2 = _taggedTemplateLiteral(["\n    top: $popover-border-width;\n    border-top-width: 0;\n    border-right-width: $popover-arrow-width * 0.5;\n    border-left-width: $popover-arrow-width * 0.5;\n    border-bottom-width: $popover-arrow-height;\n    border-bottom-color: $popover-arrow-color;\n  "]))),
-    '.bs-popover-start .popover-arrow': css$1(_templateObject13$2 || (_templateObject13$2 = _taggedTemplateLiteral(["\n    right: ", ";\n    width: $popover-arrow-height;\n    height: $popover-arrow-width;\n  "])), subtract(function (t) {
+    '.bs-popover-bottom .popover-arrow::before': css$1(_templateObject11$4 || (_templateObject11$4 = _taggedTemplateLiteral(["\n    top: 0;\n    border-top-width: 0;\n    border-right-width: $popover-arrow-width * 0.5;\n    border-left-width: $popover-arrow-width * 0.5;\n    border-bottom-width: $popover-arrow-height;\n    border-bottom-color: $popover-arrow-outer-color;\n  "]))),
+    '.bs-popover-bottom .popover-arrow::after': css$1(_templateObject12$3 || (_templateObject12$3 = _taggedTemplateLiteral(["\n    top: $popover-border-width;\n    border-top-width: 0;\n    border-right-width: $popover-arrow-width * 0.5;\n    border-left-width: $popover-arrow-width * 0.5;\n    border-bottom-width: $popover-arrow-height;\n    border-bottom-color: $popover-arrow-color;\n  "]))),
+    '.bs-popover-start .popover-arrow': css$1(_templateObject13$3 || (_templateObject13$3 = _taggedTemplateLiteral(["\n    right: ", ";\n    width: $popover-arrow-height;\n    height: $popover-arrow-width;\n  "])), subtract(function (t) {
       return "-".concat(t['popover-arrow-height']);
     }, function (t) {
       return t['popover-border-width'];
@@ -40825,7 +40850,7 @@
     var classes = getStyles(styles$F, ['.popover-arrow', popper && ".bs-popover-".concat(placement, " .popover-arrow")]);
     var beforeClasses = getStyles(styles$F, ['.popover-arrow::before', popper && ".bs-popover-".concat(placement, " .popover-arrow::before")]);
     var afterClasses = getStyles(styles$F, ['.popover-arrow::after', popper && ".bs-popover-".concat(placement, " .popover-arrow::after")]);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       style: [classes, arrowStyle, style]
     }), /*#__PURE__*/React__default["default"].createElement(View, {
@@ -40854,7 +40879,7 @@
         elementProps = _objectWithoutProperties(props, _excluded$O);
 
     var classes = getStyles(styles$E, ['.popover-header']);
-    return /*#__PURE__*/React__default["default"].createElement(Heading$1, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(Heading$1, _extends$1({}, elementProps, {
       ref: ref,
       size: 3,
       style: [classes, style]
@@ -40885,7 +40910,7 @@
 
     var classes = getStyles(styles$D, ['.popover-body']);
     var textClasses = getStyles(styles$D, ['.popover-body-text']);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       style: [classes, style],
       textStyle: [textClasses, textStyle]
@@ -40931,7 +40956,7 @@
     var textClasses = getStyles(styles$C, ['.popover-text']); // Accessiblity role tooltip is only supported on web.
 
     var role = _reactNative.Platform.OS === 'web' ? 'tooltip' : null;
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       accessibilityRole: role,
       style: [classes, style],
@@ -40976,14 +41001,14 @@
           templateProps = _useTrigger.templateProps;
 
       var offset = convertToNumber(StyleSheet.value('popover-arrow-height'));
-      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Target, _extends({}, elementProps, targetProps)), visible && /*#__PURE__*/React__default["default"].createElement(OverlayContainer, null, /*#__PURE__*/React__default["default"].createElement(Overlay, {
+      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Target, _extends$1({}, elementProps, targetProps)), visible && /*#__PURE__*/React__default["default"].createElement(OverlayContainer, null, /*#__PURE__*/React__default["default"].createElement(Overlay, {
         placement: placement,
         offset: offset,
         arrowOffset: offset,
         targetRef: targetRef,
         visible: visible
       }, function (overlay, overlayRef) {
-        return /*#__PURE__*/React__default["default"].createElement(Popover, _extends({}, templateProps, {
+        return /*#__PURE__*/React__default["default"].createElement(Popover, _extends$1({}, templateProps, {
           ref: overlayRef,
           placement: overlay.placement,
           popper: overlay.rendered,
@@ -41005,7 +41030,7 @@
 
   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$q, _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
@@ -41019,8 +41044,8 @@
     '.bs-tooltip-end .tooltip-arrow::before': css$1(_templateObject6$9 || (_templateObject6$9 = _taggedTemplateLiteral(["\n    right: -1px;\n    border-top-width: $tooltip-arrow-width * 0.5;\n    border-right-width: $tooltip-arrow-height;\n    border-left-width: 0;\n    border-bottom-width: $tooltip-arrow-width * 0.5;\n    border-right-color: $tooltip-arrow-color;\n  "]))),
     '.bs-tooltip-bottom .tooltip-arrow': css$1(_templateObject7$6 || (_templateObject7$6 = _taggedTemplateLiteral(["\n    top: 0;\n  "]))),
     '.bs-tooltip-bottom .tooltip-arrow::before': css$1(_templateObject8$5 || (_templateObject8$5 = _taggedTemplateLiteral(["\n    bottom: -1px;\n    border-top-width: 0;\n    border-right-width: $tooltip-arrow-width * 0.5;\n    border-left-width: $tooltip-arrow-width * 0.5;\n    border-bottom-width: $tooltip-arrow-height;\n    border-bottom-color: $tooltip-arrow-color;\n  "]))),
-    '.bs-tooltip-start .tooltip-arrow': css$1(_templateObject9$3 || (_templateObject9$3 = _taggedTemplateLiteral(["\n    right: 0;\n    width: $tooltip-arrow-height;\n    height: $tooltip-arrow-width;\n  "]))),
-    '.bs-tooltip-start .tooltip-arrow::before': css$1(_templateObject10$3 || (_templateObject10$3 = _taggedTemplateLiteral(["\n    left: -1px;\n    border-top-width: $tooltip-arrow-width * 0.5;\n    border-right-width: 0;\n    border-left-width: $tooltip-arrow-height;\n    border-bottom-width: $tooltip-arrow-width * 0.5;\n    border-left-color: $tooltip-arrow-color;\n  "])))
+    '.bs-tooltip-start .tooltip-arrow': css$1(_templateObject9$4 || (_templateObject9$4 = _taggedTemplateLiteral(["\n    right: 0;\n    width: $tooltip-arrow-height;\n    height: $tooltip-arrow-width;\n  "]))),
+    '.bs-tooltip-start .tooltip-arrow::before': css$1(_templateObject10$4 || (_templateObject10$4 = _taggedTemplateLiteral(["\n    left: -1px;\n    border-top-width: $tooltip-arrow-width * 0.5;\n    border-right-width: 0;\n    border-left-width: $tooltip-arrow-height;\n    border-bottom-width: $tooltip-arrow-width * 0.5;\n    border-left-color: $tooltip-arrow-color;\n  "])))
   });
   var TooltipArrow = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
     var style = props.style,
@@ -41033,7 +41058,7 @@
 
     var classes = getStyles(styles$B, ['.tooltip-arrow', popper && ".bs-tooltip-".concat(placement, " .tooltip-arrow")]);
     var beforeClasses = getStyles(styles$B, ['.tooltip-arrow::before', popper && ".bs-tooltip-".concat(placement, " .tooltip-arrow::before")]);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       style: [classes, arrowStyle, style]
     }), /*#__PURE__*/React__default["default"].createElement(View, {
@@ -41060,7 +41085,7 @@
         elementProps = _objectWithoutProperties(props, _excluded$J);
 
     var classes = getStyles(styles$A, ['.tooltip-inner']);
-    return /*#__PURE__*/React__default["default"].createElement(Text, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(Text, _extends$1({}, elementProps, {
       ref: ref,
       style: [classes, style]
     }), children);
@@ -41110,7 +41135,7 @@
     var textClasses = getStyles(styles$z, ['.tooltip-text']); // Accessiblity role tooltip is only supported on web.
 
     var role = _reactNative.Platform.OS === 'web' ? 'tooltip' : null;
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       accessibilityRole: role,
       style: [classes, style],
@@ -41152,13 +41177,13 @@
           templateProps = _useTrigger.templateProps;
 
       var offset = convertToNumber(StyleSheet.value('tooltip-arrow-height'));
-      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Target, _extends({}, elementProps, targetProps)), visible && /*#__PURE__*/React__default["default"].createElement(OverlayContainer, null, /*#__PURE__*/React__default["default"].createElement(Overlay, {
+      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Target, _extends$1({}, elementProps, targetProps)), visible && /*#__PURE__*/React__default["default"].createElement(OverlayContainer, null, /*#__PURE__*/React__default["default"].createElement(Overlay, {
         placement: placement,
         targetRef: targetRef,
         arrowOffset: offset,
         visible: visible
       }, function (overlay, overlayRef) {
-        return /*#__PURE__*/React__default["default"].createElement(Tooltip, _extends({}, templateProps, {
+        return /*#__PURE__*/React__default["default"].createElement(Tooltip, _extends$1({}, templateProps, {
           ref: overlayRef,
           placement: overlay.placement,
           popper: overlay.rendered,
@@ -41189,7 +41214,7 @@
 
     var media = useMedia();
     var resolveStyle = useStyle(style, styleName);
-    return /*#__PURE__*/React__default["default"].createElement(_reactNative.Image, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(_reactNative.Image, _extends$1({}, elementProps, {
       ref: ref,
       style: resolveStyle({
         media: media
@@ -41213,7 +41238,7 @@
 
     var media = useMedia();
     var resolveStyle = useStyle(style, styleName);
-    return /*#__PURE__*/React__default["default"].createElement(_reactNative.ImageBackground, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(_reactNative.ImageBackground, _extends$1({}, elementProps, {
       ref: ref,
       style: resolveStyle({
         media: media
@@ -41240,7 +41265,7 @@
         elementProps = _objectWithoutProperties(props, _excluded$E);
 
     var classes = getStyles(styles$y, ['.form-label']);
-    return /*#__PURE__*/React__default["default"].createElement(Text, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(Text, _extends$1({}, elementProps, {
       ref: ref,
       style: [classes, style]
     }), children);
@@ -41253,7 +41278,7 @@
 
   var _excluded$D = ["children", "color", "active", "first", "last", "disabled", "style", "textStyle"];
 
-  var _templateObject$y, _templateObject2$o, _templateObject3$c, _templateObject4$a, _templateObject5$8, _templateObject6$7, _templateObject7$5, _templateObject8$4, _templateObject9$2, _templateObject10$2, _templateObject11$2, _templateObject12$1, _templateObject13$1, _templateObject14$1;
+  var _templateObject$y, _templateObject2$o, _templateObject3$c, _templateObject4$a, _templateObject5$8, _templateObject6$7, _templateObject7$5, _templateObject8$4, _templateObject9$3, _templateObject10$3, _templateObject11$3, _templateObject12$2, _templateObject13$2, _templateObject14$1;
   var propTypes$D = {
     children: PropTypes.node.isRequired,
     color: PropTypes.oneOf(Object.keys(THEME_COLORS)),
@@ -41275,14 +41300,14 @@
     '.list-group-item-disabled-text': css$1(_templateObject6$7 || (_templateObject6$7 = _taggedTemplateLiteral(["\n    color: $list-group-disabled-color;\n  "]))),
     '.list-group-item-active': css$1(_templateObject7$5 || (_templateObject7$5 = _taggedTemplateLiteral(["\n    z-index: 2; // Place active items above their siblings for proper border styling\n    background-color: $list-group-active-bg;\n    border-color: $list-group-active-border-color;\n  "]))),
     '.list-group-item-active-text': css$1(_templateObject8$4 || (_templateObject8$4 = _taggedTemplateLiteral(["\n    color: $list-group-active-color;\n  "]))),
-    '.list-group-item-not-first': css$1(_templateObject9$2 || (_templateObject9$2 = _taggedTemplateLiteral(["\n    border-top-width: 0;\n  "]))),
-    '.list-group-item-not-first-active': css$1(_templateObject10$2 || (_templateObject10$2 = _taggedTemplateLiteral(["\n    margin-top: -$list-group-border-width;\n    border-top-width: $list-group-border-width;\n  "]))),
-    '.list-group-item-flush': css$1(_templateObject11$2 || (_templateObject11$2 = _taggedTemplateLiteral(["\n    border-top-left-radius: 0; // added for bootstrap-rn\n    border-top-right-radius: 0; // added for bootstrap-rn\n    border-bottom-left-radius: 0; // added for bootstrap-rn\n    border-bottom-right-radius: 0; // added for bootstrap-rn\n    border-top-width: 0;\n    border-right-width: 0;\n    border-bottom-width: $list-group-border-width;\n    border-left-width: 0;\n  "]))),
-    '.list-group-item-flush-last': css$1(_templateObject12$1 || (_templateObject12$1 = _taggedTemplateLiteral(["\n    border-bottom-width: 0;\n  "])))
+    '.list-group-item-not-first': css$1(_templateObject9$3 || (_templateObject9$3 = _taggedTemplateLiteral(["\n    border-top-width: 0;\n  "]))),
+    '.list-group-item-not-first-active': css$1(_templateObject10$3 || (_templateObject10$3 = _taggedTemplateLiteral(["\n    margin-top: -$list-group-border-width;\n    border-top-width: $list-group-border-width;\n  "]))),
+    '.list-group-item-flush': css$1(_templateObject11$3 || (_templateObject11$3 = _taggedTemplateLiteral(["\n    border-top-left-radius: 0; // added for bootstrap-rn\n    border-top-right-radius: 0; // added for bootstrap-rn\n    border-bottom-left-radius: 0; // added for bootstrap-rn\n    border-bottom-right-radius: 0; // added for bootstrap-rn\n    border-top-width: 0;\n    border-right-width: 0;\n    border-bottom-width: $list-group-border-width;\n    border-left-width: 0;\n  "]))),
+    '.list-group-item-flush-last': css$1(_templateObject12$2 || (_templateObject12$2 = _taggedTemplateLiteral(["\n    border-bottom-width: 0;\n  "])))
   }, each(THEME_COLORS, function (state, value) {
     var _ref;
 
-    return _ref = {}, _defineProperty(_ref, ".list-group-item-".concat(state), css$1(_templateObject13$1 || (_templateObject13$1 = _taggedTemplateLiteral(["\n      background-color: ", ";\n    "])), shiftColor(function (t) {
+    return _ref = {}, _defineProperty(_ref, ".list-group-item-".concat(state), css$1(_templateObject13$2 || (_templateObject13$2 = _taggedTemplateLiteral(["\n      background-color: ", ";\n    "])), shiftColor(function (t) {
       return t['list-group-item-bg-scale'];
     }, value))), _defineProperty(_ref, ".list-group-item-".concat(state, "-text"), css$1(_templateObject14$1 || (_templateObject14$1 = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), shiftColor(function (t) {
       return t['list-group-item-color-scale'];
@@ -41308,7 +41333,7 @@
 
     var classes = getStyles(styles$x, ['.list-group-item', first && '.list-group-item-first', last && '.list-group-item-last', active && '.list-group-item-active', disabled && '.list-group-item-disabled', !first && '.list-group-item-not-first', !first && active && '.list-group-item-not-first-active', flush && '.list-group-item-flush', flush && last && '.list-group-item-flush-last', color && ".list-group-item-".concat(color)]);
     var textClasses = getStyles(styles$x, ['.list-group-item-text', active && '.list-group-item-active-text', disabled && '.list-group-item-disabled-text', color && ".list-group-item-".concat(color, "-text")]);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       style: [classes, style],
       textStyle: [textClasses, textStyle]
@@ -41387,7 +41412,7 @@
     var activeClasses = getStyles(styles, ['.list-group-item-active', color && ".list-group-item-".concat(color, "-action-active")]);
     var textClasses = getStyles(styles, ['.list-group-item-text', '.list-group-item-action-text', disabled && '.list-group-item-disabled-text', color && ".list-group-item-".concat(color, "-text"), color && ".list-group-item-".concat(color, "-action-text")]);
     var activeTextClasses = getStyles(styles, ['.list-group-item-active-text', color && ".list-group-item-".concat(color, "-action-active-text")]);
-    return /*#__PURE__*/React__default["default"].createElement(Pressable, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(Pressable, _extends$1({}, elementProps, {
       ref: modifierRef,
       active: active,
       disabled: disabled,
@@ -41420,7 +41445,7 @@
         elementProps = _objectWithoutProperties(props, _excluded$B);
 
     var classes = getStyles(styles$w, ['.list-group', flush && '.list-group-flush']); // TODO: Implement TabContext
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       accessibilityRole: null,
       style: [classes, style]
@@ -41497,7 +41522,7 @@
     var media = useMedia();
     var classes = getStyles(styles$v, ['link', hovered]);
     var resolveStyle = useStyle([classes, style]);
-    return /*#__PURE__*/React__default["default"].createElement(Text, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(Text, _extends$1({}, elementProps, {
       ref: actionRef,
       accessibilityRole: getRole$1(actionProps),
       accessible: true,
@@ -41570,7 +41595,7 @@
     var resolveStyle = useStyle(style, styleName);
     var resolveTextStyle = useStyle([context && context.style, textStyle]);
     var hasTextStyle = context && context.style || textStyle;
-    return /*#__PURE__*/React__default["default"].createElement(_reactNative.ScrollView, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(_reactNative.ScrollView, _extends$1({}, elementProps, {
       ref: ref,
       contentContainerStyle: resolveContentContainerStyle({
         media: media
@@ -41596,9 +41621,7 @@
   };
 
   function useScrollbarEffects(_ref) {
-    var ref = _ref.ref,
-        keepBodyScroll = _ref.keepBodyScroll,
-        centered = _ref.centered,
+    var keepBodyScroll = _ref.keepBodyScroll,
         visible = _ref.visible;
 
     if (_reactNative.Platform.OS !== 'web' || keepBodyScroll) {
@@ -41613,9 +41636,9 @@
 
       if (!scrollbarWidth.current) {
         scrollbarWidth.current = computeScrollbarWidth();
-      }
+      } // const element = findNodeHandle(ref.current);
+
 
-      var element = _reactNative.findNodeHandle(ref.current);
       var rect = document.body.getBoundingClientRect();
       var isBodyOverflowing = rect.left + rect.right < window.innerWidth; // Set body and fixed elements padding adjustments.
 
@@ -41630,21 +41653,6 @@
           // eslint-disable-next-line no-param-reassign
           el.style.width = "calc(100% - ".concat(scrollbarWidth.current, "px)");
         });
-      }
-
-      var isModalOverflowing = element.scrollHeight > document.documentElement.clientHeight;
-
-      if (centered) {
-        // Set dialog padding adjustments.
-        if (!isBodyOverflowing && isModalOverflowing) {
-          // eslint-disable-next-line no-param-reassign
-          element.style.paddingLeft = "".concat(scrollbarWidth.current, "px");
-        }
-
-        if (isBodyOverflowing && !isModalOverflowing) {
-          // eslint-disable-next-line no-param-reassign
-          element.style.paddingRight = "".concat(scrollbarWidth.current, "px");
-        }
       } // Add "overflow: hidden" to body element.
 
 
@@ -41669,9 +41677,6 @@
     }, [scrollable]);
   }
 
-  var ModalContext = /*#__PURE__*/React__default["default"].createContext();
-  ModalContext.displayName = 'ModalContext';
-
   var _excluded$y = ["children", "style"];
 
   var _templateObject$u;
@@ -41689,7 +41694,7 @@
         elementProps = _objectWithoutProperties(props, _excluded$y);
 
     var classes = getStyles(styles$u, ['.modal-header']);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       style: [classes, style]
     }), children);
@@ -41714,7 +41719,7 @@
         elementProps = _objectWithoutProperties(props, _excluded$x);
 
     var classes = getStyles(styles$t, ['.modal-title']);
-    return /*#__PURE__*/React__default["default"].createElement(Heading$1, _extends({
+    return /*#__PURE__*/React__default["default"].createElement(Heading$1, _extends$1({
       size: 5
     }, elementProps, {
       ref: ref,
@@ -41724,13 +41729,15 @@
   ModalTitle.displayName = 'ModalTitle';
   ModalTitle.propTypes = propTypes$x;
 
-  var _excluded$w = ["children", "style"];
+  var _excluded$w = ["children", "style", "contentContainerStyle"];
 
   var _templateObject$s;
   var propTypes$w = {
     children: PropTypes.node.isRequired,
     // eslint-disable-next-line react/forbid-prop-types
-    style: PropTypes.any
+    style: PropTypes.any,
+    // eslint-disable-next-line react/forbid-prop-types
+    contentContainerStyle: PropTypes.any
   };
   var styles$s = StyleSheet.create({
     '.modal-body': css$1(_templateObject$s || (_templateObject$s = _taggedTemplateLiteral(["\n    position: relative;\n    // Enable \"flex-grow: 1\" so that the body take up as much space as possible\n    // when there should be a fixed height on \".modal-dialog\".\n    // Note from bootstrap-rn: Centered modals do not work with this style, but\n    // everything just works fine without this style.\n    // flex: 1 1 auto;\n    padding: $modal-inner-padding;\n  "])))
@@ -41738,6 +41745,7 @@
   var ModalBody = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
     var children = props.children,
         style = props.style,
+        contentContainerStyle = props.contentContainerStyle,
         elementProps = _objectWithoutProperties(props, _excluded$w);
 
     var _useForcedContext = useForcedContext(ModalContext),
@@ -41745,10 +41753,10 @@
 
     var classes = getStyles(styles$s, ['.modal-body']);
     var FlexView = scrollable ? ScrollView : View;
-    return /*#__PURE__*/React__default["default"].createElement(FlexView, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(FlexView, _extends$1({}, elementProps, {
       ref: ref,
-      style: scrollable ? undefined : [classes, style],
-      contentContainerStyle: scrollable ? [classes, style] : undefined
+      style: scrollable ? style : [classes, style],
+      contentContainerStyle: scrollable ? [classes, contentContainerStyle] : undefined
     }), children);
   });
   ModalBody.displayName = 'ModalBody';
@@ -41771,7 +41779,7 @@
         elementProps = _objectWithoutProperties(props, _excluded$v);
 
     var classes = getStyles(styles$r, ['.modal-footer']);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       style: [classes, style]
     }), children);
@@ -41781,7 +41789,7 @@
 
   var _excluded$u = ["children", "visible", "size", "backdrop", "scrollable", "centered", "onToggle", "style", "textStyle"];
 
-  var _templateObject$q, _templateObject2$l, _templateObject3$a, _templateObject4$8, _templateObject5$6, _templateObject6$5, _templateObject7$4, _templateObject8$3, _templateObject9$1, _templateObject10$1, _templateObject11$1;
+  var _templateObject$q, _templateObject2$l, _templateObject3$a, _templateObject4$8, _templateObject5$6, _templateObject6$5, _templateObject7$4, _templateObject8$3, _templateObject9$2, _templateObject10$2, _templateObject11$2;
   var MODAL_SIZES = ['sm', 'lg', 'xl'];
   var propTypes$u = {
     children: PropTypes.node.isRequired,
@@ -41798,16 +41806,16 @@
   };
   var styles$q = StyleSheet.create({
     '.modal': css$1(_templateObject$q || (_templateObject$q = _taggedTemplateLiteral(["\n    position: absolute; // fixed;\n    top: 0;\n    left: 0;\n    z-index: $zindex-modal;\n    // display: none;\n    width: 100%;\n    height: 100%;\n    // overflow-x: hidden;\n    // overflow-y: auto;\n    // Prevent Chrome on Windows from adding a focus outline. For details, see\n    // https://github.com/twbs/bootstrap/pull/10951.\n    @include platform(web) {\n      outline-width: 0; // outline: 0;\n    }\n    // We deliberately don't use \"-webkit-overflow-scrolling: touch;\" due to a\n    // gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342\n    // See also https://github.com/twbs/bootstrap/issues/17695\n  "]))),
-    '.modal-dialog': css$1(_templateObject2$l || (_templateObject2$l = _taggedTemplateLiteral(["\n    position: relative;\n    width: auto;\n    margin: $modal-dialog-margin;\n    // allow clicks to pass through for custom click handling to close modal\n    // pointer-events: none;\n    align-self: center; // added for bootstrap-rn\n\n    @include media-breakpoint-up(sm) {\n      max-width: $modal-md;\n      margin: $modal-dialog-margin-y-sm-up;\n    }\n  "]))),
+    '.modal-dialog': css$1(_templateObject2$l || (_templateObject2$l = _taggedTemplateLiteral(["\n    position: relative;\n    width: auto;\n    margin: $modal-dialog-margin;\n    // allow clicks to pass through for custom click handling to close modal\n    // pointer-events: none;\n\n    @include media-breakpoint-up(sm) {\n      width: 100%; // added for bootstrap-rn\n      max-width: $modal-md;\n      margin-right: auto;\n      margin-left: auto;\n    }\n  "]))),
     '.modal-dialog-scrollable': css$1(_templateObject3$a || (_templateObject3$a = _taggedTemplateLiteral(["\n    flex-shrink: 1; // added for bootstrap-rn\n    // height: calc(100% - var(--#{$prefix}modal-margin) * 2);\n  "]))),
     '.modal-dialog-scrollable .modal-content': css$1(_templateObject4$8 || (_templateObject4$8 = _taggedTemplateLiteral(["\n    max-height: 100%;\n    overflow: hidden;\n  "]))),
     '.modal-dialog-centered': css$1(_templateObject5$6 || (_templateObject5$6 = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: row; // added for bootstrap-rn\n    flex-grow: 1; // added for bootstrap-rn\n    align-items: center;\n    // min-height: calc(100% - var(--#{$prefix}modal-margin) * 2);\n  "]))),
     '.modal-content': css$1(_templateObject6$5 || (_templateObject6$5 = _taggedTemplateLiteral(["\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    width: 100%; // Ensure \".modal-content\" extends the full width of the parent \".modal-dialog\"\n    // counteract the pointer-events: none; in the .modal-dialog\n    // pointer-events: auto;\n    background-color: $modal-content-bg;\n    // background-clip: padding-box;\n    border: $modal-content-border-width solid $modal-content-border-color;\n    border-radius: $modal-content-border-radius;\n    // @include box-shadow($modal-content-box-shadow-xs);\n    // Remove focus outline from opened modal\n    // outline: 0;\n\n    @include media-breakpoint-up(sm) {\n      // @include box-shadow($modal-content-box-shadow-sm-up);\n    }\n  "]))),
     '.modal-content-text': css$1(_templateObject7$4 || (_templateObject7$4 = _taggedTemplateLiteral(["\n    color: $modal-content-color;\n  "]))),
     '.modal-backdrop': css$1(_templateObject8$3 || (_templateObject8$3 = _taggedTemplateLiteral(["\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: $zindex-modal-backdrop;\n    width: 100%;\n    height: 100%;\n    background-color: $modal-backdrop-bg;\n    opacity: $modal-backdrop-opacity;\n  "]))),
-    '.modal-sm': css$1(_templateObject9$1 || (_templateObject9$1 = _taggedTemplateLiteral(["\n    @include media-breakpoint-up(sm) {\n      max-width: $modal-sm;\n    }\n  "]))),
-    '.modal-lg': css$1(_templateObject10$1 || (_templateObject10$1 = _taggedTemplateLiteral(["\n    @include media-breakpoint-up(lg) {\n      max-width: $modal-lg;\n    }\n  "]))),
-    '.modal-xl': css$1(_templateObject11$1 || (_templateObject11$1 = _taggedTemplateLiteral(["\n    @include media-breakpoint-up(lg) {\n      max-width: $modal-lg;\n    }\n    @include media-breakpoint-up(xl) {\n      max-width: $modal-xl;\n    }\n  "])))
+    '.modal-sm': css$1(_templateObject9$2 || (_templateObject9$2 = _taggedTemplateLiteral(["\n    @include media-breakpoint-up(sm) {\n      max-width: $modal-sm;\n    }\n  "]))),
+    '.modal-lg': css$1(_templateObject10$2 || (_templateObject10$2 = _taggedTemplateLiteral(["\n    @include media-breakpoint-up(lg) {\n      max-width: $modal-lg;\n    }\n    @include media-breakpoint-up(xl) {\n      max-width: $modal-xl;\n    }\n  "]))),
+    '.modal-xl': css$1(_templateObject11$2 || (_templateObject11$2 = _taggedTemplateLiteral(["\n    @include media-breakpoint-up(xl) {\n      max-width: $modal-xl;\n    }\n  "])))
   });
   var Modal = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
     var children = props.children,
@@ -41824,13 +41832,10 @@
         textStyle = props.textStyle,
         elementProps = _objectWithoutProperties(props, _excluded$u);
 
-    var modalRef = React.useRef();
     var dialogRef = React.useRef();
     var modal = useModal(scrollable);
     useScrollbarEffects({
-      ref: modalRef,
       keepBodyScroll: false,
-      centered: true,
       visible: visible
     });
     var backdropClasses = getStyles(styles$q, ['.modal-backdrop']);
@@ -41847,7 +41852,6 @@
     }, backdrop && /*#__PURE__*/React__default["default"].createElement(View, {
       style: backdropClasses
     }), /*#__PURE__*/React__default["default"].createElement(FlexView, {
-      ref: modalRef,
       style: classes,
       contentContainerStyle: scrollable ? undefined : {
         flexGrow: 1
@@ -41856,16 +41860,20 @@
       dialogRef: dialogRef,
       onClose: handleToggle,
       backdrop: backdrop
-    }), /*#__PURE__*/React__default["default"].createElement(OverlayProvider, null, /*#__PURE__*/React__default["default"].createElement(View, {
+    }), /*#__PURE__*/React__default["default"].createElement(_reactNative.SafeAreaView, {
+      style: {
+        flexShrink: 1
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(View, {
       ref: dialogRef,
       style: dialogClasses
-    }, /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    }, /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       style: [contentClasses, style],
       textStyle: [contentTextClasses, textStyle]
     }), /*#__PURE__*/React__default["default"].createElement(ModalContext.Provider, {
       value: modal
-    }, children))))));
+    }, /*#__PURE__*/React__default["default"].createElement(OverlayProvider, null, children)))))));
   });
   Modal.displayName = 'Modal';
   Modal.propTypes = propTypes$u;
@@ -41880,7 +41888,7 @@
 
   var _excluded$t = ["children", "active", "disabled", "style", "activeStyle", "textStyle", "activeTextStyle"];
 
-  var _templateObject$p, _templateObject2$k, _templateObject3$9, _templateObject4$7, _templateObject5$5, _templateObject6$4, _templateObject7$3, _templateObject8$2, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20;
+  var _templateObject$p, _templateObject2$k, _templateObject3$9, _templateObject4$7, _templateObject5$5, _templateObject6$4, _templateObject7$3, _templateObject8$2, _templateObject9$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20;
   var propTypes$t = {
     children: PropTypes.node.isRequired,
     active: PropTypes.bool,
@@ -41903,12 +41911,12 @@
     '.nav-tabs .nav-link-disabled': css$1(_templateObject6$4 || (_templateObject6$4 = _taggedTemplateLiteral(["\n    background-color: transparent;\n    border-color: transparent;\n  "]))),
     '.nav-tabs .nav-link-disabled-text': css$1(_templateObject7$3 || (_templateObject7$3 = _taggedTemplateLiteral(["\n    color: $nav-link-disabled-color;\n  "]))),
     '.nav-tabs .nav-link-active': css$1(_templateObject8$2 || (_templateObject8$2 = _taggedTemplateLiteral(["\n    background-color: $nav-tabs-link-active-bg;\n    border-color: $nav-tabs-link-active-border-color;\n\n    &:hover {\n      background-color: $nav-tabs-link-active-bg; // added for bootstrap-rn\n      border-color: $nav-tabs-link-active-border-color; // added for bootstrap-rn\n    }\n    &:focus {\n      background-color: $nav-tabs-link-active-bg; // added for bootstrap-rn\n      border-color: $nav-tabs-link-active-border-color; // added for bootstrap-rn\n    }\n  "]))),
-    '.nav-tabs .nav-link-active-text': css$1(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    color: $nav-tabs-link-active-color;\n\n    &:hover {\n      color: $nav-tabs-link-active-color; // added for bootstrap-rn\n    }\n    &:focus {\n      color: $nav-tabs-link-active-color; // added for bootstrap-rn\n    }\n  "]))),
-    '.nav-pills .nav-link': css$1(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    background: transparent; // none;\n    border: 0;\n    border-radius: $nav-pills-border-radius;\n  "]))),
-    '.nav-pills .nav-link-active': css$1(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    // @include gradient-bg($nav-pills-link-active-bg);\n    background-color: $nav-pills-link-active-bg; // added for bootstrap-rn\n\n    &:hover {\n      background-color: $nav-pills-link-active-bg; // added for bootstrap-rn\n    }\n    &:focus {\n      background-color: $nav-pills-link-active-bg; // added for bootstrap-rn\n    }\n  "]))),
-    '.nav-pills .nav-link-active-text': css$1(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    color: $nav-pills-link-active-color;\n\n    &:hover {\n      color: $nav-pills-link-active-color; // added for bootstrap-rn\n    }\n    &:focus {\n      color: $nav-pills-link-active-color; // added for bootstyl\n    }\n  "]))),
+    '.nav-tabs .nav-link-active-text': css$1(_templateObject9$1 || (_templateObject9$1 = _taggedTemplateLiteral(["\n    color: $nav-tabs-link-active-color;\n\n    &:hover {\n      color: $nav-tabs-link-active-color; // added for bootstrap-rn\n    }\n    &:focus {\n      color: $nav-tabs-link-active-color; // added for bootstrap-rn\n    }\n  "]))),
+    '.nav-pills .nav-link': css$1(_templateObject10$1 || (_templateObject10$1 = _taggedTemplateLiteral(["\n    background: transparent; // none;\n    border: 0;\n    border-radius: $nav-pills-border-radius;\n  "]))),
+    '.nav-pills .nav-link-active': css$1(_templateObject11$1 || (_templateObject11$1 = _taggedTemplateLiteral(["\n    // @include gradient-bg($nav-pills-link-active-bg);\n    background-color: $nav-pills-link-active-bg; // added for bootstrap-rn\n\n    &:hover {\n      background-color: $nav-pills-link-active-bg; // added for bootstrap-rn\n    }\n    &:focus {\n      background-color: $nav-pills-link-active-bg; // added for bootstrap-rn\n    }\n  "]))),
+    '.nav-pills .nav-link-active-text': css$1(_templateObject12$1 || (_templateObject12$1 = _taggedTemplateLiteral(["\n    color: $nav-pills-link-active-color;\n\n    &:hover {\n      color: $nav-pills-link-active-color; // added for bootstrap-rn\n    }\n    &:focus {\n      color: $nav-pills-link-active-color; // added for bootstyl\n    }\n  "]))),
     // Navbar styles
-    '.navbar-nav .nav-link': css$1(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n    padding-right: 0;\n    padding-left: 0;\n  "])))
+    '.navbar-nav .nav-link': css$1(_templateObject13$1 || (_templateObject13$1 = _taggedTemplateLiteral(["\n    padding-right: 0;\n    padding-left: 0;\n  "])))
   }, each(GRID_BREAKPOINTS, function (breakpoint) {
     return _defineProperty({}, ".navbar-expand".concat(infix(next(breakpoint)), " .navbar-nav .nav-link"), css$1(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n      @include media-breakpoint-up(", ") {\n        padding-right: $navbar-nav-link-padding-x;\n        padding-left: $navbar-nav-link-padding-x;\n      }\n    "])), next(breakpoint)));
   })), {}, {
@@ -41946,7 +41954,7 @@
     navbar && '.navbar-nav .nav-link-text', navbar && navbar.expand && ".navbar-expand".concat(infix(navbar.expand), " .navbar-nav .nav-link-text"), navbar && ".navbar-".concat(navbar.variant, " .navbar-nav .nav-link-text"), navbar && disabled && ".navbar-".concat(navbar.variant, " .navbar-nav .nav-link-disabled-text")]);
     var activeTextClasses = getStyles(styles$p, [variant && ".nav-".concat(variant, " .nav-link-active-text"), // Navbar styles
     navbar && ".navbar-".concat(navbar.variant, " .navbar-nav .nav-link-active-text")]);
-    return /*#__PURE__*/React__default["default"].createElement(Pressable, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(Pressable, _extends$1({}, elementProps, {
       ref: modifierRef,
       active: active,
       disabled: disabled,
@@ -42002,7 +42010,7 @@
     var tabbable = React.useContext(TabContext);
     var classes = getStyles(styles$o, [!navbar && '.nav', variant === 'tabs' && '.nav-tabs', // Navbar styles
     navbar && '.navbar-nav', navbar && navbar.expand && ".navbar-expand".concat(navbar.expand === true ? '' : "-".concat(navbar.expand), " .navbar-nav")]);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       accessibilityRole: getRole(tabbable, navbar),
       style: [classes, style]
@@ -42039,7 +42047,7 @@
         variant = _useForcedContext.variant;
 
     var classes = getStyles(styles$n, ['.navbar-text', ".navbar-".concat(variant, " .navbar-text")]);
-    return /*#__PURE__*/React__default["default"].createElement(Text, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(Text, _extends$1({}, elementProps, {
       ref: ref,
       style: [classes, style]
     }), children);
@@ -42074,7 +42082,7 @@
 
     var classes = getStyles(styles$m, ['.navbar-brand']);
     var textClasses = getStyles(styles$m, ['.navbar-brand-text', ".navbar-".concat(variant, " .navbar-brand-text")]);
-    return /*#__PURE__*/React__default["default"].createElement(Pressable, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(Pressable, _extends$1({}, elementProps, {
       ref: ref,
       style: [classes, style],
       textStyle: [textClasses, textStyle]
@@ -42113,7 +42121,7 @@
       return null;
     }
 
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       style: [classes, style]
     }), children);
@@ -42178,7 +42186,7 @@
     var classes = getStyles(styles$k, ['.navbar-toggler', ".navbar-".concat(variant, " .navbar-toggler"), expand && ".navbar-expand".concat(expand === true ? '' : "-".concat(expand), " .navbar-toggler")]);
     var textClasses = getStyles(styles$k, ['.navbar-toggler-text', ".navbar-".concat(variant, " .navbar-toggler-text")]);
     var iconClasses = getStyles(styles$k, ['.navbar-toggler-icon']);
-    return /*#__PURE__*/React__default["default"].createElement(Pressable, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(Pressable, _extends$1({}, elementProps, {
       ref: ref,
       toggle: useToggleNavbar,
       style: [classes, style],
@@ -42257,7 +42265,7 @@
 
     var navbar = useNavbar(variant, defaultExpanded, expanded, onToggle, expand);
     var classes = getStyles(styles$j, ['.navbar', expand && ".navbar-expand".concat(expand === true ? '' : "-".concat(expand))]);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       style: [classes, style]
     }), /*#__PURE__*/React__default["default"].createElement(NavbarContext.Provider, {
@@ -42273,6 +42281,12 @@
   Navbar.useDismiss = useDismissNavbar;
   Navbar.useToggle = useToggleNavbar;
 
+  function useOffcanvas() {
+    return React.useMemo(function () {
+      return {};
+    }, []);
+  }
+
   var _excluded$k = ["children", "style"];
 
   var _templateObject$i, _templateObject2$d;
@@ -42293,7 +42307,7 @@
 
     var navbar = React.useContext(NavbarContext);
     var classes = getStyles(styles$i, ['.offcanvas-header', navbar && navbar.expand && ".navbar-expand".concat(navbar.expand === true ? '' : "-".concat(navbar.expand), " .offcanvas-header")]);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       style: [classes, style]
     }), children);
@@ -42318,7 +42332,7 @@
         elementProps = _objectWithoutProperties(props, _excluded$j);
 
     var classes = getStyles(styles$h, ['.offcanvas-title']);
-    return /*#__PURE__*/React__default["default"].createElement(Heading$1, _extends({
+    return /*#__PURE__*/React__default["default"].createElement(Heading$1, _extends$1({
       size: 5
     }, elementProps, {
       ref: ref,
@@ -42328,29 +42342,33 @@
   OffcanvasTitle.displayName = 'OffcanvasTitle';
   OffcanvasTitle.propTypes = propTypes$l;
 
-  var _excluded$i = ["children", "style"];
+  var _excluded$i = ["children", "style", "contentContainerStyle"];
 
   var _templateObject$g, _templateObject2$c;
   var propTypes$k = {
     children: PropTypes.node.isRequired,
     // eslint-disable-next-line react/forbid-prop-types
-    style: PropTypes.any
+    style: PropTypes.any,
+    // eslint-disable-next-line react/forbid-prop-types
+    contentContainerStyle: PropTypes.any
   };
   var styles$g = StyleSheet.create(_objectSpread2({
-    '.offcanvas-body': css$1(_templateObject$g || (_templateObject$g = _taggedTemplateLiteral(["\n    flex-grow: 1;\n    padding: $offcanvas-padding-y $offcanvas-padding-x;\n    // overflow-y: auto;\n  "])))
+    '.offcanvas-body': css$1(_templateObject$g || (_templateObject$g = _taggedTemplateLiteral(["\n    // flex-grow: 1;\n    padding: $offcanvas-padding-y $offcanvas-padding-x;\n    // overflow-y: auto;\n  "])))
   }, each(GRID_BREAKPOINTS, function (breakpoint) {
     return _defineProperty({}, ".navbar-expand".concat(infix(next(breakpoint)), " .offcanvas-body"), css$1(_templateObject2$c || (_templateObject2$c = _taggedTemplateLiteral(["\n      @include media-breakpoint-up(", ") {\n        display: flex;\n        flex-grow: 0;\n        padding: 0;\n        // overflow-y: visible;\n      }\n    "])), next(breakpoint)));
   })));
   var OffcanvasBody = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
     var children = props.children,
         style = props.style,
+        contentContainerStyle = props.contentContainerStyle,
         elementProps = _objectWithoutProperties(props, _excluded$i);
 
     var navbar = React.useContext(NavbarContext);
-    var classes = getStyles(styles$g, ['.offcanvas-body', navbar && navbar.expand && ".navbar-expand".concat(navbar.expand === true ? '' : "-".concat(navbar.expand), " .offcanvas-body")]);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    var contentContainerClasses = getStyles(styles$g, ['.offcanvas-body', navbar && navbar.expand && ".navbar-expand".concat(navbar.expand === true ? '' : "-".concat(navbar.expand), " .offcanvas-body")]);
+    return /*#__PURE__*/React__default["default"].createElement(ScrollView, _extends$1({}, elementProps, {
       ref: ref,
-      style: [classes, style]
+      style: style,
+      contentContainerStyle: [contentContainerClasses, contentContainerStyle]
     }), children);
   });
   OffcanvasBody.displayName = 'OffcanvasBody';
@@ -42358,7 +42376,7 @@
 
   var _excluded$h = ["children", "visible", "placement", "backdrop", "scroll", "onToggle", "style", "textStyle"];
 
-  var _templateObject$f, _templateObject2$b, _templateObject3$4, _templateObject4$3, _templateObject5$3, _templateObject6$2, _templateObject7$1, _templateObject8;
+  var _templateObject$f, _templateObject2$b, _templateObject3$4, _templateObject4$3, _templateObject5$3, _templateObject6$2, _templateObject7$1, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
   var PLACEMENTS = ['top', 'bottom', 'start', 'end']; // , 'auto'
 
   var propTypes$j = {
@@ -42375,15 +42393,23 @@
     textStyle: PropTypes.any
   };
   var styles$f = StyleSheet.create(_objectSpread2({
-    '.offcanvas': css$1(_templateObject$f || (_templateObject$f = _taggedTemplateLiteral(["\n    position: absolute; // fixed;\n    bottom: 0;\n    z-index: $zindex-offcanvas;\n    display: flex;\n    flex-direction: column;\n    max-width: 100%;\n    // visibility: hidden;\n    background-color: $offcanvas-bg-color;\n    // background-clip: padding-box;\n    @include platform(web) {\n      outline-width: 0; // outline: 0;\n    }\n    // @include box-shadow($offcanvas-box-shadow);\n    // @include transition(transform $offcanvas-transition-duration ease-in-out);\n  "]))),
+    '.offcanvas': css$1(_templateObject$f || (_templateObject$f = _taggedTemplateLiteral(["\n    position: absolute; // fixed;\n    // bottom: 0;\n    z-index: $zindex-offcanvas;\n    display: flex;\n    flex-direction: column;\n    max-width: 100%;\n    // visibility: hidden;\n    background-color: $offcanvas-bg-color;\n    // background-clip: padding-box;\n    @include platform(web) {\n      outline-width: 0; // outline: 0;\n    }\n    // @include box-shadow($offcanvas-box-shadow);\n    // @include transition(transform $offcanvas-transition-duration ease-in-out);\n  "]))),
     '.offcanvas-text': css$1(_templateObject2$b || (_templateObject2$b = _taggedTemplateLiteral(["\n    color: $offcanvas-color;\n  "]))),
     '.offcanvas-backdrop': css$1(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral(["\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: $zindex-offcanvas-backdrop;\n    width: 100%;\n    height: 100%;\n    background-color: $offcanvas-backdrop-bg;\n    opacity: $offcanvas-backdrop-opacity;\n  "]))),
-    '.offcanvas-start': css$1(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteral(["\n    top: 0;\n    left: 0;\n    width: $offcanvas-horizontal-width;\n    border-right-width: $offcanvas-border-width;\n    border-style: solid;\n    border-color: $offcanvas-border-color;\n    // transform: translateX(-100%);\n  "]))),
-    '.offcanvas-end': css$1(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteral(["\n    top: 0;\n    right: 0;\n    width: $offcanvas-horizontal-width;\n    border-left-width: $offcanvas-border-width;\n    border-style: solid;\n    border-color: $offcanvas-border-color;\n    // transform: translateX(100%);\n  "]))),
-    '.offcanvas-top': css$1(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteral(["\n    top: 0;\n    right: 0;\n    left: 0;\n    height: $offcanvas-vertical-height;\n    max-height: 100%;\n    border-bottom-width: $offcanvas-border-width;\n    border-style: solid;\n    border-color: $offcanvas-border-color;\n    // transform: translateY(-100%);\n  "]))),
-    '.offcanvas-bottom': css$1(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteral(["\n    right: 0;\n    left: 0;\n    height: $offcanvas-vertical-height;\n    max-height: 100%;\n    width: 100%;\n    border-top-width: $offcanvas-border-width;\n    border-style: solid;\n    border-color: $offcanvas-border-color;\n    // transform: translateY(100%);\n  "])))
+    '.offcanvas-start': css$1(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteral(["\n    top: 0;\n    bottom: 0; // added for bootstrap-rn\n    left: 0;\n    // width: $offcanvas-horizontal-width;\n    border-right-width: $offcanvas-border-width;\n    border-style: solid;\n    border-color: $offcanvas-border-color;\n    // transform: translateX(-100%);\n  "]))),
+    '.offcanvas-end': css$1(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteral(["\n    top: 0;\n    bottom: 0; // added for bootstrap-rn\n    right: 0;\n    // width: $offcanvas-horizontal-width;\n    border-left-width: $offcanvas-border-width;\n    border-style: solid;\n    border-color: $offcanvas-border-color;\n    // transform: translateX(100%);\n  "]))),
+    '.offcanvas-top': css$1(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteral(["\n    top: 0;\n    right: 0;\n    left: 0;\n    // height: $offcanvas-vertical-height;\n    max-height: 100%;\n    border-bottom-width: $offcanvas-border-width;\n    border-style: solid;\n    border-color: $offcanvas-border-color;\n    // transform: translateY(-100%);\n  "]))),
+    '.offcanvas-bottom': css$1(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteral(["\n    bottom: 0; // added for bootstrap-rn\n    right: 0;\n    left: 0;\n    // height: $offcanvas-vertical-height;\n    max-height: 100%;\n    width: 100%;\n    border-top-width: $offcanvas-border-width;\n    border-style: solid;\n    border-color: $offcanvas-border-color;\n    // transform: translateY(100%);\n  "]))),
+    // The following .offcanvas-dialog classes are added for bootstrap-rn,
+    // because otherwise the text would exceed a width of 100% on native
+    // and also additional width by SafeAreaView would not be applied.
+    '.offcanvas-dialog': css$1(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    max-width: 100%;\n    max-height: 100%;\n  "]))),
+    '.offcanvas-dialog-start': css$1(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    width: $offcanvas-horizontal-width;\n  "]))),
+    '.offcanvas-dialog-end': css$1(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    width: $offcanvas-horizontal-width;\n  "]))),
+    '.offcanvas-dialog-top': css$1(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    height: $offcanvas-vertical-height;\n  "]))),
+    '.offcanvas-dialog-bottom': css$1(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    height: $offcanvas-vertical-height;\n  "])))
   }, each(GRID_BREAKPOINTS, function (breakpoint) {
-    return _defineProperty({}, ".navbar-expand".concat(infix(next(breakpoint)), " .offcanvas"), css$1(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      @include media-breakpoint-up(", ") {\n        position: relative; // inherit;\n        bottom: 0;\n        // z-index: auto;\n        flex-grow: 1;\n        // visibility: visible !important; // stylelint-disable-line declaration-no-important\n        background-color: transparent;\n        border-right-width: 0;\n        border-left-width: 0;\n        // @include box-shadow(none);\n        // @include transition(none);\n        // transform: none;\n      }\n    "])), next(breakpoint)));
+    return _defineProperty({}, ".navbar-expand".concat(infix(next(breakpoint)), " .offcanvas"), css$1(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n      @include media-breakpoint-up(", ") {\n        position: relative; // inherit;\n        bottom: 0;\n        // z-index: auto;\n        flex-grow: 1;\n        // visibility: visible !important; // stylelint-disable-line declaration-no-important\n        background-color: transparent;\n        border-right-width: 0;\n        border-left-width: 0;\n        // @include box-shadow(none);\n        // @include transition(none);\n        // transform: none;\n      }\n    "])), next(breakpoint)));
   })));
   var Offcanvas = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
     var children = props.children,
@@ -42402,18 +42428,18 @@
     var media = useMedia();
     var navbar = React.useContext(NavbarContext);
     var offcanvasRef = React.useRef();
+    var offcanvas = useOffcanvas();
     useScrollbarEffects({
-      ref: offcanvasRef,
       keepBodyScroll: scroll,
-      centered: false,
       visible: visible
     });
     var backdropClasses = getStyles(styles$f, ['.offcanvas-backdrop']);
     var classes = getStyles(styles$f, ['.offcanvas', ".offcanvas-".concat(placement), navbar && navbar.expand && ".navbar-expand".concat(navbar.expand === true ? '' : "-".concat(navbar.expand), " .offcanvas")]);
+    var dialogClasses = getStyles(styles$f, ['.offcanvas-dialog', ".offcanvas-dialog-".concat(placement)]);
     var textClasses = getStyles(styles$f, ['.offcanvas-content-text']); // Render children without modal for navbar.
 
     if (navbar && navbar.expand && (navbar.expand === true || media.up(navbar.expand))) {
-      return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+      return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
         ref: ref,
         style: [classes, style],
         textStyle: [textClasses, textStyle]
@@ -42430,14 +42456,23 @@
       dialogRef: offcanvasRef,
       onClose: handleToggle,
       backdrop: backdrop
-    })), /*#__PURE__*/React__default["default"].createElement(ScrollView, _extends({}, elementProps, {
+    })), /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: concatRefs(offcanvasRef, ref),
       style: [classes, style],
       textStyle: [textClasses, textStyle]
-    }), /*#__PURE__*/React__default["default"].createElement(OverlayProvider, null, children)));
+    }), /*#__PURE__*/React__default["default"].createElement(_reactNative.SafeAreaView, {
+      style: {
+        flexShrink: 1
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(View, {
+      style: dialogClasses
+    }, /*#__PURE__*/React__default["default"].createElement(OffcanvasContext.Provider, {
+      value: offcanvas
+    }, /*#__PURE__*/React__default["default"].createElement(OverlayProvider, null, children))))));
   });
   Offcanvas.displayName = 'Offcanvas';
   Offcanvas.propTypes = propTypes$j;
+  Offcanvas.Context = OffcanvasContext;
   Offcanvas.Header = OffcanvasHeader;
   Offcanvas.Title = OffcanvasTitle;
   Offcanvas.Body = OffcanvasBody;
@@ -42468,7 +42503,7 @@
     };
 
     if (provideWebComponent) {
-      return /*#__PURE__*/React__default["default"].createElement(_reactNative.Picker.Item, _extends({}, commonProps, {
+      return /*#__PURE__*/React__default["default"].createElement(_reactNative.Picker.Item, _extends$1({}, commonProps, {
         ref: ref,
         label: label,
         value: value
@@ -42478,7 +42513,7 @@
     var classes = getStyles(styles$e, ['.form-select-item', disabled && '.form-select-item-disabled']);
     var resolveStyle = useStyle(classes);
     var selected = value === context.value;
-    return /*#__PURE__*/React__default["default"].createElement(Pressable, _extends({}, commonProps, {
+    return /*#__PURE__*/React__default["default"].createElement(Pressable, _extends$1({}, commonProps, {
       ref: ref,
       onPress: function onPress() {
         context.onChange(value);
@@ -42594,7 +42629,7 @@
     };
 
     if (provideWebComponent) {
-      return /*#__PURE__*/React__default["default"].createElement(_reactNative.Picker, _extends({}, elementProps, commonProps, {
+      return /*#__PURE__*/React__default["default"].createElement(_reactNative.Picker, _extends$1({}, elementProps, commonProps, {
         ref: modifierRef,
         selectedValue: value,
         onValueChange: _onChange
@@ -42626,7 +42661,7 @@
         },
         useNativeComponent: true
       }
-    }, /*#__PURE__*/React__default["default"].createElement(Text, _extends({}, elementProps, commonProps, {
+    }, /*#__PURE__*/React__default["default"].createElement(Text, _extends$1({}, elementProps, commonProps, {
       ref: modifierRef // role "listbox" is not supported in react-native :(
       ,
       accessibilityRole: "button",
@@ -42670,7 +42705,7 @@
         elementProps = _objectWithoutProperties(props, _excluded$f);
 
     var classes = getStyles(styles$c, ['.placeholders']);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       style: [classes, style]
     }), children);
@@ -42720,7 +42755,7 @@
 
     var classes = getStyles(styles$b, ['.progress-bar']);
     var textClasses = getStyles(styles$b, ['.progress-bar-text']);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       accessibilityRole: "progressbar",
       accessibilityValueNow: value,
@@ -42773,7 +42808,7 @@
     var progress = useProgress(min, max);
     var classes = getStyles(styles$a, ['.progress']);
     var textClasses = getStyles(styles$a, ['.progress-text']);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       style: [classes, style],
       textStyle: [textClasses, textStyle]
@@ -42807,7 +42842,7 @@
     var classes = getStyles(styles$9, ['paragraph', lead && '.lead']); // Accessiblity role paragraph is only supported on web.
 
     var role = _reactNative.Platform.OS === 'web' ? 'paragraph' : null;
-    return /*#__PURE__*/React__default["default"].createElement(Text, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(Text, _extends$1({}, elementProps, {
       ref: ref,
       accessibilityRole: role,
       style: [classes, style]
@@ -42853,7 +42888,7 @@
 
     var classes = getStyles(styles$8, ['.pagination-item', first && '.pagination-item-first', last && '.pagination-item-last', active && '.pagination-item-active', disabled && '.pagination-item-disabled']);
     var textClasses = getStyles(styles$8, [active && '.pagination-item-active', disabled && '.pagination-item-disabled']);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       style: [classes, style],
       textStyle: [textClasses, textStyle]
@@ -42917,7 +42952,7 @@
         elementProps = _objectWithoutProperties(props, _excluded$a);
 
     var classes = getStyles(styles$7, ['.pagination']);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       style: [classes, style]
     }), makeListChildren(children));
@@ -42945,7 +42980,7 @@
         disabled = _props$disabled === void 0 ? false : _props$disabled,
         elementProps = _objectWithoutProperties(props, _excluded$9);
 
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       accessibilityRole: "radiogroup"
     }), /*#__PURE__*/React__default["default"].createElement(RadioContext.Provider, {
@@ -42968,7 +43003,7 @@
         elementProps = _objectWithoutProperties(props, _excluded$8);
 
     var context = useForcedContext(RadioContext);
-    return /*#__PURE__*/React__default["default"].createElement(CheckInput, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(CheckInput, _extends$1({}, elementProps, {
       ref: ref,
       type: "radio",
       value: value === context.value,
@@ -43000,7 +43035,7 @@
         elementProps = _objectWithoutProperties(props, _excluded$7);
 
     var classes = getStyles(styles$6, ['.row']);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       style: [classes, style]
     }), children);
@@ -43009,9 +43044,9 @@
   Row.propTypes = propTypes$8;
 
   var Switch = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
-    var elementProps = _extends({}, props);
+    var elementProps = _extends$1({}, props);
 
-    return /*#__PURE__*/React__default["default"].createElement(CheckInput, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(CheckInput, _extends$1({}, elementProps, {
       ref: ref,
       type: "switch"
     }));
@@ -43095,7 +43130,7 @@
         useNativeDriver: _reactNative.Platform.OS !== 'web'
       })).start();
     }, []);
-    return /*#__PURE__*/React__default["default"].createElement(AnimatedView, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(AnimatedView, _extends$1({}, elementProps, {
       ref: ref,
       accessibilityRole: role,
       accessibilityHidden: true,
@@ -43147,9 +43182,9 @@
     children: PropTypes.node.isRequired
   };
   var TabContent = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
-    var elementProps = _extends({}, props);
+    var elementProps = _extends$1({}, props);
 
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref
     }));
   });
@@ -43179,7 +43214,7 @@
     var id = getElementId(tabbable.identifier, target); // Accessiblity role tabpanel is only supported on web.
 
     var role = _reactNative.Platform.OS === 'web' ? 'tabpanel' : null;
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       nativeID: id,
       accessibilityRole: role,
@@ -43252,7 +43287,7 @@
 
     var classes = getStyles(styles$3, ['.toast-header']);
     var textClasses = getStyles(styles$3, ['.toast-header-text']);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       style: [classes, style],
       textStyle: [textClasses, textStyle]
@@ -43283,7 +43318,7 @@
 
     var classes = getStyles(styles$2, ['.toast-body']);
     var textClasses = getStyles(styles$2, [".toast-body-text"]);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       style: [classes, style],
       textStyle: [textClasses, textStyle]
@@ -43322,7 +43357,7 @@
     var container = React.useContext(ToastContainerContext);
     var classes = getStyles(styles$1, ['.toast', container && !last && '.toast-container .toast']);
     var textClasses = getStyles(styles$1, [".toast-text"]);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       accessibilityRole: "alert",
       accessibilityLive: "assertive",
@@ -43353,7 +43388,7 @@
         elementProps = _objectWithoutProperties(props, _excluded);
 
     var classes = getStyles(styles, ['.toast-container']);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       style: [classes, style]
     }), /*#__PURE__*/React__default["default"].createElement(ToastContainerContext.Provider, {