bootstrap-rn 0.1.3 → 0.1.4

package/dist/bootstrap-rn.esm.js

@@ -2793,7 +2793,7 @@ function useViewport(initialViewport) {
   return viewport;
 }
 
-var propTypes$1p = {
+var propTypes$1q = {
   children: PropTypes.node.isRequired,
   // eslint-disable-next-line react/forbid-prop-types,
   utilities: PropTypes.object,
@@ -2827,7 +2827,7 @@ function Provider(props) {
   }, /*#__PURE__*/React.createElement(OverlayProvider, null, children));
 }
 
-Provider.propTypes = propTypes$1p;
+Provider.propTypes = propTypes$1q;
 
 var TextStyleContext = /*#__PURE__*/React.createContext();
 TextStyleContext.displayName = 'TextStyleContext';
@@ -2911,7 +2911,7 @@ function useStyle(style, styleName) {
 }
 
 var _excluded$1r = ["children", "style", "textStyle", "styleName"];
-var propTypes$1o = {
+var propTypes$1p = {
   children: PropTypes.node,
   // eslint-disable-next-line react/forbid-prop-types
   style: PropTypes.any,
@@ -2947,12 +2947,12 @@ var View = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, children) : children);
 });
 View.displayName = 'View';
-View.propTypes = propTypes$1o;
+View.propTypes = propTypes$1p;
 
 var _excluded$1q = ["children", "color", "dismissible", "style", "textStyle"];
 
 var _templateObject$19, _templateObject2$L, _templateObject3$q;
-var propTypes$1n = {
+var propTypes$1o = {
   children: PropTypes.node.isRequired,
   color: PropTypes.oneOf(Object.keys(THEME_COLORS)),
   dismissible: PropTypes.bool,
@@ -2997,12 +2997,12 @@ var Alert = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }), children);
 });
 Alert.displayName = 'Alert';
-Alert.propTypes = propTypes$1n;
+Alert.propTypes = propTypes$1o;
 
 var _excluded$1p = ["color", "bold", "italic", "mark", "small", "style", "styleName"];
 
-var _templateObject$18, _templateObject2$K, _templateObject3$p, _templateObject4$k, _templateObject5$i;
-var propTypes$1m = {
+var _templateObject$18, _templateObject2$K, _templateObject3$p, _templateObject4$l, _templateObject5$j;
+var propTypes$1n = {
   color: PropTypes.oneOf([].concat(_toConsumableArray(Object.keys(THEME_COLORS)), ['muted', 'black-50', 'white-50'])),
   small: PropTypes.bool,
   mark: PropTypes.bool,
@@ -3017,8 +3017,8 @@ var styles$17 = StyleSheet.create({
   text: css(_templateObject$18 || (_templateObject$18 = _taggedTemplateLiteral(["\n    font-family: $font-family-base;\n    font-size: $font-size-base;\n    font-weight: $font-weight-base;\n    line-height: $font-size-base * $line-height-base;\n  "]))),
   strong: css(_templateObject2$K || (_templateObject2$K = _taggedTemplateLiteral(["\n    font-weight: $font-weight-bolder;\n  "]))),
   italic: css(_templateObject3$p || (_templateObject3$p = _taggedTemplateLiteral(["\n    font-style: italic;\n  "]))),
-  small: css(_templateObject4$k || (_templateObject4$k = _taggedTemplateLiteral(["\n    font-size: $small-font-size;\n    line-height: $small-font-size * $line-height-base;\n  "]))),
-  mark: css(_templateObject5$i || (_templateObject5$i = _taggedTemplateLiteral(["\n    padding: $mark-padding;\n    background-color: $mark-bg;\n  "])))
+  small: css(_templateObject4$l || (_templateObject4$l = _taggedTemplateLiteral(["\n    font-size: $small-font-size;\n    line-height: $small-font-size * $line-height-base;\n  "]))),
+  mark: css(_templateObject5$j || (_templateObject5$j = _taggedTemplateLiteral(["\n    padding: $mark-padding;\n    background-color: $mark-bg;\n  "])))
 });
 
 var getStyleName = function getStyleName(styleName, color) {
@@ -3071,12 +3071,12 @@ var Text = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, element);
 });
 Text.displayName = 'Text';
-Text.propTypes = propTypes$1m;
+Text.propTypes = propTypes$1n;
 
 var _excluded$1o = ["children", "style"];
 
 var _templateObject$17, _templateObject2$J;
-var propTypes$1l = {
+var propTypes$1m = {
   children: PropTypes.node.isRequired,
   // eslint-disable-next-line react/forbid-prop-types
   style: PropTypes.any
@@ -3097,12 +3097,12 @@ var Badge = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }), children);
 });
 Badge.displayName = 'Badge';
-Badge.propTypes = propTypes$1l;
+Badge.propTypes = propTypes$1m;
 
 var _excluded$1n = ["children", "active", "style", "textStyle"];
 
 var _templateObject$16, _templateObject2$I, _templateObject3$o;
-var propTypes$1k = {
+var propTypes$1l = {
   children: PropTypes.node.isRequired,
   active: PropTypes.bool,
   // eslint-disable-next-line react/forbid-prop-types
@@ -3132,7 +3132,7 @@ var BreadcrumbItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }), children);
 });
 BreadcrumbItem.displayName = 'BreadcrumbItem';
-BreadcrumbItem.propTypes = propTypes$1k;
+BreadcrumbItem.propTypes = propTypes$1l;
 /*
 $breadcrumb-font-size:              null;
 $breadcrumb-padding-y:              0;
@@ -3150,7 +3150,7 @@ $breadcrumb-border-radius:          null;
 var _excluded$1m = ["children", "style"];
 
 var _templateObject$15;
-var propTypes$1j = {
+var propTypes$1k = {
   children: PropTypes.node.isRequired,
   // eslint-disable-next-line react/forbid-prop-types
   style: PropTypes.any
@@ -3170,7 +3170,7 @@ var Breadcrumb = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }), makeListChildren(children));
 });
 Breadcrumb.displayName = 'Breadcrumb';
-Breadcrumb.propTypes = propTypes$1j;
+Breadcrumb.propTypes = propTypes$1k;
 Breadcrumb.Item = BreadcrumbItem;
 /*
 $breadcrumb-font-size:              null;
@@ -3192,7 +3192,7 @@ ButtonGroupContext.displayName = 'ButtonGroupContext';
 var _excluded$1l = ["children", "size", "style"];
 
 var _templateObject$14;
-var propTypes$1i = {
+var propTypes$1j = {
   children: PropTypes.node.isRequired,
   size: PropTypes.oneOf(['lg', 'sm']),
   // eslint-disable-next-line react/forbid-prop-types
@@ -3221,12 +3221,12 @@ var ButtonGroup = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, makeListChildren(children)));
 });
 ButtonGroup.displayName = 'ButtonGroup';
-ButtonGroup.propTypes = propTypes$1i;
+ButtonGroup.propTypes = propTypes$1j;
 
 var _excluded$1k = ["children", "style"];
 
 var _templateObject$13;
-var propTypes$1h = {
+var propTypes$1i = {
   children: PropTypes.node.isRequired,
   // eslint-disable-next-line react/forbid-prop-types
   style: PropTypes.any
@@ -3247,7 +3247,7 @@ var ButtonToolbar = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }), children);
 });
 ButtonToolbar.displayName = 'ButtonToolbar';
-ButtonToolbar.propTypes = propTypes$1h;
+ButtonToolbar.propTypes = propTypes$1i;
 
 function useForcedContext(Context) {
   var context = useContext(Context);
@@ -3309,7 +3309,7 @@ function useAction(props, ref) {
 }
 
 var _excluded$1h = ["children", "active", "style", "activeStyle", "textStyle", "activeTextStyle", "styleName"];
-var propTypes$1g = {
+var propTypes$1h = {
   children: PropTypes.node,
   active: PropTypes.bool,
   // eslint-disable-next-line react/forbid-prop-types
@@ -3398,7 +3398,7 @@ var Pressable = /*#__PURE__*/React.forwardRef(function (props, ref) {
   } : children);
 });
 Pressable.displayName = 'Pressable';
-Pressable.propTypes = propTypes$1g;
+Pressable.propTypes = propTypes$1h;
 
 var _excluded$1g = ["active", "handlePress"];
 function useToggleButton(props) {
@@ -3425,8 +3425,8 @@ function useToggleButton(props) {
 
 var _excluded$1f = ["children", "color", "size", "outline", "first", "last", "active", "disabled", "style", "activeStyle", "textStyle", "activeTextStyle"];
 
-var _templateObject$12, _templateObject2$H, _templateObject3$n, _templateObject4$j, _templateObject5$h, _templateObject6$f, _templateObject7$b, _templateObject8$a, _templateObject9$6, _templateObject10$6, _templateObject11$5, _templateObject12$4, _templateObject13$4, _templateObject14$3, _templateObject15$2, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20$1, _templateObject21, _templateObject22, _templateObject23;
-var propTypes$1f = {
+var _templateObject$12, _templateObject2$H, _templateObject3$n, _templateObject4$k, _templateObject5$i, _templateObject6$g, _templateObject7$c, _templateObject8$b, _templateObject9$7, _templateObject10$7, _templateObject11$5, _templateObject12$4, _templateObject13$4, _templateObject14$3, _templateObject15$2, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20$1, _templateObject21, _templateObject22, _templateObject23;
+var propTypes$1g = {
   children: PropTypes.node.isRequired,
   color: PropTypes.oneOf([].concat(_toConsumableArray(Object.keys(THEME_COLORS)), ['link'])),
   size: PropTypes.oneOf(['lg', 'sm']),
@@ -3451,7 +3451,7 @@ var styles$11 = StyleSheet.create(_objectSpread2(_objectSpread2({
 }, each(THEME_COLORS, function (color, value) {
   var _ref;
 
-  return _ref = {}, _defineProperty(_ref, ".btn-".concat(color), css(_templateObject4$j || (_templateObject4$j = _taggedTemplateLiteral(["\n      background-color: ", ";\n      border-color: ", ";\n      // @include box-shadow($btn-box-shadow);\n\n      &:hover {\n        background-color: ", ";\n        border-color: ", ";\n      }\n\n      &:focus {\n        background-color: ", ";\n        border-color: ", ";\n        /* @if $enable-shadows {\n          @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));\n        } @else {\n          // Avoid using mixin so we can pass custom focus shadow properly\n          box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);\n        } */\n      }\n\n      &:active {\n        background-color: ", ";\n        // Remove CSS gradients if they're enabled\n        // background-image: if($enable-gradients, none, null);\n        border-color: ", ";\n      }\n    "])), value, value, shadeColor(function (t) {
+  return _ref = {}, _defineProperty(_ref, ".btn-".concat(color), css(_templateObject4$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 t['btn-hover-bg-shade-amount'];
   }, value), shadeColor(function (t) {
     return t['btn-hover-border-shade-amount'];
@@ -3463,11 +3463,11 @@ var styles$11 = StyleSheet.create(_objectSpread2(_objectSpread2({
     return t['btn-active-bg-shade-amount'];
   }, value), shadeColor(function (t) {
     return t['btn-active-border-shade-amount'];
-  }, value))), _defineProperty(_ref, ".btn-".concat(color, "-text"), css(_templateObject5$h || (_templateObject5$h = _taggedTemplateLiteral(["\n      color: ", ";\n\n      &:hover {\n        color: ", ";\n      }\n\n      &:focus {\n        color: ", ";\n      }\n\n      &:active {\n        color: ", ";\n      }\n    "])), colorContrast(value), colorContrast(value), colorContrast(value), colorContrast(value))), _defineProperty(_ref, ".btn-".concat(color, "-active"), css(_templateObject6$f || (_templateObject6$f = _taggedTemplateLiteral(["\n      background-color: ", ";\n      // Remove CSS gradients if they're enabled\n      // background-image: if($enable-gradients, none, null);\n      border-color: ", ";\n    "])), shadeColor(function (t) {
+  }, value))), _defineProperty(_ref, ".btn-".concat(color, "-text"), css(_templateObject5$i || (_templateObject5$i = _taggedTemplateLiteral(["\n      color: ", ";\n\n      &:hover {\n        color: ", ";\n      }\n\n      &:focus {\n        color: ", ";\n      }\n\n      &:active {\n        color: ", ";\n      }\n    "])), colorContrast(value), colorContrast(value), colorContrast(value), colorContrast(value))), _defineProperty(_ref, ".btn-".concat(color, "-active"), css(_templateObject6$g || (_templateObject6$g = _taggedTemplateLiteral(["\n      background-color: ", ";\n      // Remove CSS gradients if they're enabled\n      // background-image: if($enable-gradients, none, null);\n      border-color: ", ";\n    "])), shadeColor(function (t) {
     return t['btn-active-bg-shade-amount'];
   }, value), shadeColor(function (t) {
     return t['btn-active-border-shade-amount'];
-  }, value))), _defineProperty(_ref, ".btn-".concat(color, "-active-text"), css(_templateObject7$b || (_templateObject7$b = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), colorContrast(value))), _defineProperty(_ref, ".btn-".concat(color, "-disabled"), css(_templateObject8$a || (_templateObject8$a = _taggedTemplateLiteral(["\n      $disabled-background: ", ";\n      $disabled-border: ", ";\n\n      background-color: $disabled-background;\n      // Remove CSS gradients if they're enabled\n      // background-image: if($enable-gradients, none, null);\n      border-color: $disabled-border;\n    "])), value, value)), _defineProperty(_ref, ".btn-".concat(color, "-disabled-text"), css(_templateObject9$6 || (_templateObject9$6 = _taggedTemplateLiteral(["\n      $disabled-color: ", ";\n\n      color: $disabled-color;\n    "])), colorContrast(value))), _defineProperty(_ref, ".btn-outline-".concat(color), css(_templateObject10$6 || (_templateObject10$6 = _taggedTemplateLiteral(["\n      border-color: ", ";\n\n      &:hover {\n        background-color: ", ";\n        border-color: ", ";\n      }\n\n      &:focus {\n        // box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);\n      }\n\n      &:active {\n        background-color: ", ";\n        border-color: ", ";\n\n        /* &:focus {\n          @if $enable-shadows {\n            @include box-shadow(\n              $btn-active-box-shadow,\n              0 0 0 $btn-focus-width rgba($color, 0.5)\n            );\n          } @else {\n            // Avoid using mixin so we can pass custom focus shadow properly\n            box-shadow: 0 0 0 $btn-focus-width rgba($color, 0.5);\n          }\n        } */\n      }\n    "])), value, value, value, value, value)), _defineProperty(_ref, ".btn-outline-".concat(color, "-text"), css(_templateObject11$5 || (_templateObject11$5 = _taggedTemplateLiteral(["\n      color: ", ";\n\n      &:hover {\n        color: ", ";\n      }\n\n      &:active {\n        color: ", ";\n      }\n    "])), value, colorContrast(value), colorContrast(value))), _defineProperty(_ref, ".btn-outline-".concat(color, "-disabled"), css(_templateObject12$4 || (_templateObject12$4 = _taggedTemplateLiteral(["\n      background-color: transparent;\n    "])))), _defineProperty(_ref, ".btn-outline-".concat(color, "-disabled-text"), css(_templateObject13$4 || (_templateObject13$4 = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), value)), _ref;
+  }, value))), _defineProperty(_ref, ".btn-".concat(color, "-active-text"), css(_templateObject7$c || (_templateObject7$c = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), colorContrast(value))), _defineProperty(_ref, ".btn-".concat(color, "-disabled"), css(_templateObject8$b || (_templateObject8$b = _taggedTemplateLiteral(["\n      $disabled-background: ", ";\n      $disabled-border: ", ";\n\n      background-color: $disabled-background;\n      // Remove CSS gradients if they're enabled\n      // background-image: if($enable-gradients, none, null);\n      border-color: $disabled-border;\n    "])), value, value)), _defineProperty(_ref, ".btn-".concat(color, "-disabled-text"), css(_templateObject9$7 || (_templateObject9$7 = _taggedTemplateLiteral(["\n      $disabled-color: ", ";\n\n      color: $disabled-color;\n    "])), colorContrast(value))), _defineProperty(_ref, ".btn-outline-".concat(color), css(_templateObject10$7 || (_templateObject10$7 = _taggedTemplateLiteral(["\n      border-color: ", ";\n\n      &:hover {\n        background-color: ", ";\n        border-color: ", ";\n      }\n\n      &:focus {\n        // box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);\n      }\n\n      &:active {\n        background-color: ", ";\n        border-color: ", ";\n\n        /* &:focus {\n          @if $enable-shadows {\n            @include box-shadow(\n              $btn-active-box-shadow,\n              0 0 0 $btn-focus-width rgba($color, 0.5)\n            );\n          } @else {\n            // Avoid using mixin so we can pass custom focus shadow properly\n            box-shadow: 0 0 0 $btn-focus-width rgba($color, 0.5);\n          }\n        } */\n      }\n    "])), value, value, value, value, value)), _defineProperty(_ref, ".btn-outline-".concat(color, "-text"), css(_templateObject11$5 || (_templateObject11$5 = _taggedTemplateLiteral(["\n      color: ", ";\n\n      &:hover {\n        color: ", ";\n      }\n\n      &:active {\n        color: ", ";\n      }\n    "])), value, colorContrast(value), colorContrast(value))), _defineProperty(_ref, ".btn-outline-".concat(color, "-disabled"), css(_templateObject12$4 || (_templateObject12$4 = _taggedTemplateLiteral(["\n      background-color: transparent;\n    "])))), _defineProperty(_ref, ".btn-outline-".concat(color, "-disabled-text"), css(_templateObject13$4 || (_templateObject13$4 = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), value)), _ref;
 })), {}, {
   '.btn-link-text': css(_templateObject14$3 || (_templateObject14$3 = _taggedTemplateLiteral(["\n    font-weight: $font-weight-normal;\n    color: $btn-link-color;\n    text-decoration-color: $btn-link-color; // added for bootstrap-rn\n    text-decoration-line: $link-decoration;\n\n    &:hover {\n      color: $btn-link-hover-color;\n      text-decoration-color: $btn-link-hover-color; // added for bootstrap-rn\n      text-decoration-line: $link-hover-decoration;\n    }\n\n    &:focus {\n      text-decoration-line: $link-hover-decoration;\n    }\n\n    // No need for an active state here\n  "]))),
   '.btn-link-text-disabled': css(_templateObject15$2 || (_templateObject15$2 = _taggedTemplateLiteral(["\n    color: $btn-link-disabled-color;\n  "]))),
@@ -3539,13 +3539,13 @@ var Button = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }), children);
 });
 Button.displayName = 'Button';
-Button.propTypes = propTypes$1f;
+Button.propTypes = propTypes$1g;
 Button.useToggle = useToggleButton;
 
 var _excluded$1e = ["children", "style", "textStyle"];
 
 var _templateObject$11, _templateObject2$G;
-var propTypes$1e = {
+var propTypes$1f = {
   children: PropTypes.node.isRequired,
   // eslint-disable-next-line react/forbid-prop-types
   style: PropTypes.any,
@@ -3574,12 +3574,12 @@ var Blockquote = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }), children);
 });
 Blockquote.displayName = 'Blockquote';
-Blockquote.propTypes = propTypes$1e;
+Blockquote.propTypes = propTypes$1f;
 
 var _excluded$1d = ["children", "style", "textStyle"];
 
 var _templateObject$10, _templateObject2$F;
-var propTypes$1d = {
+var propTypes$1e = {
   children: PropTypes.node.isRequired,
   // eslint-disable-next-line react/forbid-prop-types
   style: PropTypes.any,
@@ -3605,12 +3605,12 @@ var Body = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }), children);
 });
 Body.displayName = 'Body';
-Body.propTypes = propTypes$1d;
+Body.propTypes = propTypes$1e;
 
 var _excluded$1c = ["children", "style", "textStyle"];
 
 var _templateObject$$, _templateObject2$E;
-var propTypes$1c = {
+var propTypes$1d = {
   children: PropTypes.node.isRequired,
   // eslint-disable-next-line react/forbid-prop-types
   style: PropTypes.any,
@@ -3636,12 +3636,12 @@ var CardBody = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }), children);
 });
 CardBody.displayName = 'CardBody';
-CardBody.propTypes = propTypes$1c;
+CardBody.propTypes = propTypes$1d;
 
 var _excluded$1b = ["children", "style", "textStyle"];
 
 var _templateObject$_, _templateObject2$D;
-var propTypes$1b = {
+var propTypes$1c = {
   children: PropTypes.node.isRequired,
   // eslint-disable-next-line react/forbid-prop-types
   style: PropTypes.any,
@@ -3667,12 +3667,12 @@ var CardHeader = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }), children);
 });
 CardHeader.displayName = 'CardHeader';
-CardHeader.propTypes = propTypes$1b;
+CardHeader.propTypes = propTypes$1c;
 
 var _excluded$1a = ["children", "style", "textStyle"];
 
 var _templateObject$Z, _templateObject2$C;
-var propTypes$1a = {
+var propTypes$1b = {
   children: PropTypes.node.isRequired,
   // eslint-disable-next-line react/forbid-prop-types
   style: PropTypes.any,
@@ -3698,12 +3698,12 @@ var CardFooter = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }), children);
 });
 CardFooter.displayName = 'CardFooter';
-CardFooter.propTypes = propTypes$1a;
+CardFooter.propTypes = propTypes$1b;
 
 var _excluded$19 = ["children", "style"];
 
 var _templateObject$Y;
-var propTypes$19 = {
+var propTypes$1a = {
   children: PropTypes.node.isRequired,
   // eslint-disable-next-line react/forbid-prop-types
   style: PropTypes.any
@@ -3723,7 +3723,7 @@ var Card = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }), children);
 });
 Card.displayName = 'Card';
-Card.propTypes = propTypes$19;
+Card.propTypes = propTypes$1a;
 Card.Header = CardHeader;
 Card.Body = CardBody;
 Card.Footer = CardFooter;
@@ -3731,7 +3731,7 @@ Card.Footer = CardFooter;
 var _excluded$18 = ["children", "disabled", "style", "textStyle"];
 
 var _templateObject$X, _templateObject2$B, _templateObject3$m;
-var propTypes$18 = {
+var propTypes$19 = {
   children: PropTypes.node,
   disabled: PropTypes.bool,
   // eslint-disable-next-line react/forbid-prop-types
@@ -3762,7 +3762,7 @@ var CloseButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }), StyleSheet.value('btn-close-bg'));
 });
 CloseButton.displayName = 'CloseButton';
-CloseButton.propTypes = propTypes$18;
+CloseButton.propTypes = propTypes$19;
 
 var CollapseContext = /*#__PURE__*/React.createContext();
 CollapseContext.displayName = 'CollapseContext';
@@ -3821,7 +3821,7 @@ function useCollapse(defaultVisible, controlledVisible, onToggle) {
   }, [visible]);
 }
 
-var propTypes$17 = {
+var propTypes$18 = {
   children: PropTypes.node.isRequired,
   defaultVisible: PropTypes.bool,
   visible: PropTypes.bool,
@@ -3841,7 +3841,7 @@ var CollapseProvider = function CollapseProvider(props) {
 };
 
 CollapseProvider.displayName = 'CollapseProvider';
-CollapseProvider.propTypes = propTypes$17;
+CollapseProvider.propTypes = propTypes$18;
 
 var _excluded$17 = ["onPress"];
 function useToggleCollapse(props) {
@@ -3863,7 +3863,7 @@ function useToggleCollapse(props) {
 }
 
 var _excluded$16 = ["children"];
-var propTypes$16 = {
+var propTypes$17 = {
   children: PropTypes.node
 };
 var Collapse = /*#__PURE__*/React.forwardRef(function (props, ref) {
@@ -3884,7 +3884,7 @@ var Collapse = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }), children);
 });
 Collapse.displayName = 'Collapse';
-Collapse.propTypes = propTypes$16;
+Collapse.propTypes = propTypes$17;
 Collapse.Provider = CollapseProvider;
 Collapse.useToggle = useToggleCollapse;
 
@@ -3911,8 +3911,8 @@ NavbarContext.displayName = 'NavbarContext';
 
 var _excluded$15 = ["fluid", "style"];
 
-var _templateObject$W, _templateObject2$A, _templateObject3$l, _templateObject4$i, _templateObject5$g, _templateObject6$e, _templateObject7$a, _templateObject8$9;
-var propTypes$15 = {
+var _templateObject$W, _templateObject2$A, _templateObject3$l, _templateObject4$j, _templateObject5$h, _templateObject6$f, _templateObject7$b, _templateObject8$a;
+var propTypes$16 = {
   children: PropTypes.node.isRequired,
   fluid: PropTypes.oneOf([true].concat(_toConsumableArray(Object.keys(CONTAINER_MAX_WIDTHS)))),
   // eslint-disable-next-line react/forbid-prop-types
@@ -3940,25 +3940,25 @@ var styles$V = StyleSheet.create(_objectSpread2({
   }, function (t) {
     return t['container-max-widths'].xxl;
   }),
-  '.container-lg': css(_templateObject4$i || (_templateObject4$i = _taggedTemplateLiteral(["\n    @include media-breakpoint-up(lg) {\n      max-width: ", ";\n    }\n    @include media-breakpoint-up(xl) {\n      max-width: ", ";\n    }\n    @include media-breakpoint-up(xxl) {\n      max-width: ", ";\n    }\n  "])), function (t) {
+  '.container-lg': css(_templateObject4$j || (_templateObject4$j = _taggedTemplateLiteral(["\n    @include media-breakpoint-up(lg) {\n      max-width: ", ";\n    }\n    @include media-breakpoint-up(xl) {\n      max-width: ", ";\n    }\n    @include media-breakpoint-up(xxl) {\n      max-width: ", ";\n    }\n  "])), function (t) {
     return t['container-max-widths'].lg;
   }, function (t) {
     return t['container-max-widths'].xl;
   }, function (t) {
     return t['container-max-widths'].xxl;
   }),
-  '.container-xl': css(_templateObject5$g || (_templateObject5$g = _taggedTemplateLiteral(["\n    @include media-breakpoint-up(xl) {\n      max-width: ", ";\n    }\n    @include media-breakpoint-up(xxl) {\n      max-width: ", ";\n    }\n  "])), function (t) {
+  '.container-xl': css(_templateObject5$h || (_templateObject5$h = _taggedTemplateLiteral(["\n    @include media-breakpoint-up(xl) {\n      max-width: ", ";\n    }\n    @include media-breakpoint-up(xxl) {\n      max-width: ", ";\n    }\n  "])), function (t) {
     return t['container-max-widths'].xl;
   }, function (t) {
     return t['container-max-widths'].xxl;
   }),
-  '.container-xxl': css(_templateObject6$e || (_templateObject6$e = _taggedTemplateLiteral(["\n    @include media-breakpoint-up(xxl) {\n      max-width: ", ";\n    }\n  "])), function (t) {
+  '.container-xxl': css(_templateObject6$f || (_templateObject6$f = _taggedTemplateLiteral(["\n    @include media-breakpoint-up(xxl) {\n      max-width: ", ";\n    }\n  "])), function (t) {
     return t['container-max-widths'].xxl;
   }),
   // Navbar styles
-  '.navbar .container': css(_templateObject7$a || (_templateObject7$a = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: row; // added for bootstrap-rn\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: space-between;\n  "])))
+  '.navbar .container': css(_templateObject7$b || (_templateObject7$b = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: row; // added for bootstrap-rn\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: space-between;\n  "])))
 }, each(GRID_BREAKPOINTS, function (breakpoint) {
-  return _defineProperty({}, ".navbar-expand".concat(infix(next(breakpoint)), " .container"), css(_templateObject8$9 || (_templateObject8$9 = _taggedTemplateLiteral(["\n      @include media-breakpoint-up(", ") {\n        flex-wrap: nowrap;\n      }\n    "])), next(breakpoint)));
+  return _defineProperty({}, ".navbar-expand".concat(infix(next(breakpoint)), " .container"), css(_templateObject8$a || (_templateObject8$a = _taggedTemplateLiteral(["\n      @include media-breakpoint-up(", ") {\n        flex-wrap: nowrap;\n      }\n    "])), next(breakpoint)));
 })));
 var Container = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$fluid = props.fluid,
@@ -3976,12 +3976,12 @@ var Container = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }));
 });
 Container.displayName = 'Container';
-Container.propTypes = propTypes$15;
+Container.propTypes = propTypes$16;
 
 var _excluded$14 = ["children", "type", "value", "onChange", "onPress", "label", "disabled", "valid", "invalid", "style", "inputStyle", "labelStyle"];
 
-var _templateObject$V, _templateObject2$z, _templateObject3$k, _templateObject4$h, _templateObject5$f, _templateObject6$d, _templateObject7$9, _templateObject8$8, _templateObject9$5, _templateObject10$5, _templateObject11$4, _templateObject12$3, _templateObject13$3;
-var propTypes$14 = {
+var _templateObject$V, _templateObject2$z, _templateObject3$k, _templateObject4$i, _templateObject5$g, _templateObject6$e, _templateObject7$a, _templateObject8$9, _templateObject9$6, _templateObject10$6, _templateObject11$4, _templateObject12$3, _templateObject13$3;
+var propTypes$15 = {
   children: PropTypes.node,
   type: PropTypes.oneOf(['checkbox', 'radio', 'switch']).isRequired,
   value: PropTypes.bool.isRequired,
@@ -4002,13 +4002,13 @@ var styles$U = StyleSheet.create(_objectSpread2({
   '.form-check': css(_templateObject$V || (_templateObject$V = _taggedTemplateLiteral(["\n    // display: block;\n    flex-direction: row; // added for bootstrap-rn\n    min-height: $form-check-min-height;\n    padding-left: $form-check-padding-start;\n    margin-bottom: $form-check-margin-bottom;\n  "]))),
   '.form-check-disabled': css(_templateObject2$z || (_templateObject2$z = _taggedTemplateLiteral(["\n    opacity: $form-check-label-disabled-opacity;\n  "]))),
   '.form-check-input': css(_templateObject3$k || (_templateObject3$k = _taggedTemplateLiteral(["\n    // Use additional variables instead of brackets, because brackets not supported yet.\n    $lineHeight: $line-height-base * 1rem;\n    $rawMarginTop: $lineHeight - $form-check-input-width;\n\n    // float: left;\n    margin-left: $form-check-padding-start * -1;\n    margin-right: $form-check-padding-start - $form-check-input-width; // added for bootstrap-rn\n\n    width: $form-check-input-width;\n    height: $form-check-input-width;\n    margin-top: $rawMarginTop * 0.5; // line-height minus check height\n    // vertical-align: top;\n    background-color: $form-check-input-bg;\n    // background-repeat: no-repeat;\n    // background-position: center;\n    // background-size: contain;\n    border: $form-check-input-border;\n    @include platform(web) {\n      appearance: none;\n      user-select: none; // added for bootstrap-rn\n    }\n    // color-adjust: exact; // Keep themed appearance for print\n    // @include transition($form-check-transition);\n\n    &:active {\n      // filter: $form-check-input-active-filter;\n    }\n\n    &:focus {\n      border-color: $form-check-input-focus-border;\n      // outline: 0;\n      // box-shadow: $form-check-input-focus-box-shadow;\n    }\n  "]))),
-  '.form-check-input-checkbox': css(_templateObject4$h || (_templateObject4$h = _taggedTemplateLiteral(["\n    border-radius: $form-check-input-border-radius;\n  "]))),
-  '.form-check-input-radio': css(_templateObject5$f || (_templateObject5$f = _taggedTemplateLiteral(["\n    border-radius: $form-check-radio-border-radius;\n  "]))),
-  '.form-check-input-checked': css(_templateObject6$d || (_templateObject6$d = _taggedTemplateLiteral(["\n    background-color: $form-check-input-checked-bg-color;\n    border-color: $form-check-input-checked-border-color;\n  "]))),
-  '.form-check-label': css(_templateObject7$9 || (_templateObject7$9 = _taggedTemplateLiteral(["\n    color: $form-check-label-color;\n    @include platform(web) {\n      cursor: $form-check-label-cursor;\n    }\n  "]))),
-  '.form-switch': css(_templateObject8$8 || (_templateObject8$8 = _taggedTemplateLiteral(["\n    padding-left: $form-switch-padding-start;\n  "]))),
-  '.form-check-input-switch': css(_templateObject9$5 || (_templateObject9$5 = _taggedTemplateLiteral(["\n    width: $form-switch-width;\n    margin-left: $form-switch-padding-start * -1;\n    margin-right: $form-switch-padding-start - $form-switch-width; // added for bootstrap-rn\n    border-radius: $form-switch-border-radius;\n    // @include transition($form-switch-transition);\n    align-items: flex-start; // added for bootstrap-rn\n    justify-content: center; // added for bootstrap-rn\n  "]))),
-  '.form-check-input-switch-checked': css(_templateObject10$5 || (_templateObject10$5 = _taggedTemplateLiteral(["\n    align-items: flex-end; // added for bootstrap-rn\n    justify-content: center; // added for bootstrap-rn\n  "])))
+  '.form-check-input-checkbox': css(_templateObject4$i || (_templateObject4$i = _taggedTemplateLiteral(["\n    border-radius: $form-check-input-border-radius;\n  "]))),
+  '.form-check-input-radio': css(_templateObject5$g || (_templateObject5$g = _taggedTemplateLiteral(["\n    border-radius: $form-check-radio-border-radius;\n  "]))),
+  '.form-check-input-checked': css(_templateObject6$e || (_templateObject6$e = _taggedTemplateLiteral(["\n    background-color: $form-check-input-checked-bg-color;\n    border-color: $form-check-input-checked-border-color;\n  "]))),
+  '.form-check-label': css(_templateObject7$a || (_templateObject7$a = _taggedTemplateLiteral(["\n    color: $form-check-label-color;\n    @include platform(web) {\n      cursor: $form-check-label-cursor;\n    }\n  "]))),
+  '.form-switch': css(_templateObject8$9 || (_templateObject8$9 = _taggedTemplateLiteral(["\n    padding-left: $form-switch-padding-start;\n  "]))),
+  '.form-check-input-switch': css(_templateObject9$6 || (_templateObject9$6 = _taggedTemplateLiteral(["\n    width: $form-switch-width;\n    margin-left: $form-switch-padding-start * -1;\n    margin-right: $form-switch-padding-start - $form-switch-width; // added for bootstrap-rn\n    border-radius: $form-switch-border-radius;\n    // @include transition($form-switch-transition);\n    align-items: flex-start; // added for bootstrap-rn\n    justify-content: center; // added for bootstrap-rn\n  "]))),
+  '.form-check-input-switch-checked': css(_templateObject10$6 || (_templateObject10$6 = _taggedTemplateLiteral(["\n    align-items: flex-end; // added for bootstrap-rn\n    justify-content: center; // added for bootstrap-rn\n  "])))
 }, each(FORM_VALIDATION_STATES, function (state, data) {
   var _ref;
 
@@ -4086,7 +4086,7 @@ var CheckInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, children));
 });
 CheckInput.displayName = 'CheckInput';
-CheckInput.propTypes = propTypes$14;
+CheckInput.propTypes = propTypes$15;
 
 var Checkbox = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var elementProps = _extends({}, props);
@@ -4100,11 +4100,11 @@ Checkbox.displayName = 'Checkbox';
 
 var _excluded$13 = ["children", "size", "sizeSm", "sizeMd", "sizeLg", "sizeXl", "style"];
 
-var _templateObject$U, _templateObject2$y, _templateObject3$j, _templateObject4$g, _templateObject5$e;
+var _templateObject$U, _templateObject2$y, _templateObject3$j, _templateObject4$h, _templateObject5$f;
 var sizes = makeArray(GRID_COLUMNS).map(function (v) {
   return v + 1;
 });
-var propTypes$13 = {
+var propTypes$14 = {
   children: PropTypes.node.isRequired,
   size: PropTypes.oneOf(['auto'].concat(_toConsumableArray(sizes))),
   sizeSm: PropTypes.oneOf(['auto'].concat(_toConsumableArray(sizes))),
@@ -4115,14 +4115,14 @@ var propTypes$13 = {
   style: PropTypes.any
 };
 var styles$T = StyleSheet.create(_objectSpread2({
-  '*': css(_templateObject$U || (_templateObject$U = _taggedTemplateLiteral(["\n    // Add box sizing if only the grid is loaded\n    /* box-sizing: if(\n      variable-exists(include-column-box-sizing) and $include-column-box-sizing,\n      border-box,\n      null\n    ); */\n    // Prevent columns from becoming too narrow when at smaller grid tiers by\n    // always setting \"width: 100%;\". This works because we set the width\n    // later on to override this initial width.\n    flex-shrink: 0;\n    width: 100%;\n    max-width: 100%; // Prevent \".col-auto\", \".col\" (& responsive variants) from breaking out the grid\n    padding-right: $grid-gutter-width * 0.5;\n    padding-left: $grid-gutter-width * 0.5;\n    margin-top: 0;\n  "])))
+  '*': css(_templateObject$U || (_templateObject$U = _taggedTemplateLiteral(["\n    // Add box sizing if only the grid is loaded\n    /* box-sizing: if(\n      variable-exists(include-column-box-sizing) and $include-column-box-sizing,\n      border-box,\n      null\n    ); */\n    // Prevent columns from becoming too narrow when at smaller grid tiers by\n    // always setting \"width: 100%;\". This works because we set the width\n    // later on to override this initial width.\n    flex-shrink: 0;\n    width: 100%;\n    @include platform(web) {\n      max-width: 100%; // Prevent \".col-auto\", \".col\" (& responsive variants) from breaking out the grid\n    }\n    padding-right: $grid-gutter-width * 0.5;\n    padding-left: $grid-gutter-width * 0.5;\n    margin-top: 0;\n  "])))
 }, each(GRID_BREAKPOINTS, function (breakpoint) {
   var _objectSpread2$1;
 
   return _objectSpread2((_objectSpread2$1 = {}, _defineProperty(_objectSpread2$1, ".col".concat(infix(breakpoint)), css(_templateObject2$y || (_templateObject2$y = _taggedTemplateLiteral(["\n      @include media-breakpoint-up(", ") {\n        flex: 1 0 0%; // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4\n      }\n    "])), breakpoint)), _defineProperty(_objectSpread2$1, ".col".concat(infix(breakpoint), "-auto"), css(_templateObject3$j || (_templateObject3$j = _taggedTemplateLiteral(["\n      @include media-breakpoint-up(", ") {\n        flex: 0 0 auto;\n        width: auto;\n      }\n    "])), breakpoint)), _objectSpread2$1), normalize$1(makeArray(GRID_COLUMNS - 1, function (i) {
     var _ref;
 
-    return _ref = {}, _defineProperty(_ref, ".col".concat(infix(breakpoint), "-").concat(i + 1), css(_templateObject4$g || (_templateObject4$g = _taggedTemplateLiteral(["\n          @include media-breakpoint-up(", ") {\n            flex: 0 0 auto;\n            width: ", "%;\n          }\n        "])), breakpoint, (i + 1) / GRID_COLUMNS * 100)), _defineProperty(_ref, ".offset".concat(infix(breakpoint), "-").concat(i), css(_templateObject5$e || (_templateObject5$e = _taggedTemplateLiteral(["\n          @include media-breakpoint-up(", ") {\n            margin-left: ", "%;\n          }\n        "])), breakpoint, i / GRID_COLUMNS * 100)), _ref;
+    return _ref = {}, _defineProperty(_ref, ".col".concat(infix(breakpoint), "-").concat(i + 1), css(_templateObject4$h || (_templateObject4$h = _taggedTemplateLiteral(["\n          @include media-breakpoint-up(", ") {\n            flex: 0 0 auto;\n            width: ", "%;\n          }\n        "])), breakpoint, (i + 1) / GRID_COLUMNS * 100)), _defineProperty(_ref, ".offset".concat(infix(breakpoint), "-").concat(i), css(_templateObject5$f || (_templateObject5$f = _taggedTemplateLiteral(["\n          @include media-breakpoint-up(", ") {\n            margin-left: ", "%;\n          }\n        "])), breakpoint, i / GRID_COLUMNS * 100)), _ref;
   })));
 })));
 var Col = /*#__PURE__*/React.forwardRef(function (props, ref) {
@@ -4142,12 +4142,12 @@ var Col = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }), children);
 });
 Col.displayName = 'Col';
-Col.propTypes = propTypes$13;
+Col.propTypes = propTypes$14;
 
 var _excluded$12 = ["children", "style"];
 
 var _templateObject$T;
-var propTypes$12 = {
+var propTypes$13 = {
   children: PropTypes.node.isRequired,
   // eslint-disable-next-line react/forbid-prop-types
   style: PropTypes.any
@@ -4170,11 +4170,44 @@ var Code = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }), children);
 });
 Code.displayName = 'Code';
-Code.propTypes = propTypes$12;
+Code.propTypes = propTypes$13;
 
 var DropdownContext = /*#__PURE__*/React.createContext();
 DropdownContext.displayName = 'DropdownContext';
 
+var _excluded$11 = ["onPress"];
+function useToggleDropdown(props) {
+  var context = useForcedContext(DropdownContext);
+
+  var handlePress = props.onPress,
+      restProps = _objectWithoutProperties(props, _excluded$11);
+
+  return _objectSpread2(_objectSpread2({}, restProps), {}, {
+    nativeID: context.identifier,
+    ref: context.toggleRef,
+    onPress: function onPress(event) {
+      if (handlePress) handlePress(event);
+      context.setVisible(function (value) {
+        return !value;
+      });
+    },
+    accessibilityHasPopup: true,
+    accessibilityExpanded: context.visible
+  });
+}
+
+var propTypes$12 = {
+  children: PropTypes.func.isRequired
+};
+
+var DropdownToggle = function DropdownToggle(props) {
+  var children = props.children;
+  return children(useToggleDropdown({}));
+};
+
+DropdownToggle.displayName = 'DropdownToggle';
+DropdownToggle.propTypes = propTypes$12;
+
 var propTypes$11 = {
   children: PropTypes.func.isRequired,
   placement: PropTypes.string.isRequired,
@@ -4225,37 +4258,64 @@ Overlay.propTypes = propTypes$11;
 
 var _templateObject$S;
 var propTypes$10 = {
+  toggleRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   dialogRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   onClose: PropTypes.func,
+  autoClose: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['inside', 'outside'])]),
   backdrop: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['static'])])
 };
 var styles$R = StyleSheet.create({
   handler: css(_templateObject$S || (_templateObject$S = _taggedTemplateLiteral(["\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    position: absolute;\n    flex-grow: 1;\n  "])))
 });
+var initialState = {
+  waitingForMouseUp: false,
+  isDialogClick: false
+};
 
 var BackdropHandler = function BackdropHandler(props) {
-  var dialogRef = props.dialogRef,
+  var toggleRef = props.toggleRef,
+      dialogRef = props.dialogRef,
       handleClose = props.onClose,
       _props$backdrop = props.backdrop,
-      backdrop = _props$backdrop === void 0 ? true : _props$backdrop;
+      backdrop = _props$backdrop === void 0 ? true : _props$backdrop,
+      _props$autoClose = props.autoClose,
+      autoClose = _props$autoClose === void 0 ? 'outside' : _props$autoClose;
 
   if (Platform.OS === 'web') {
-    var waitingForMouseUp = useRef(false);
-    var ignoreBackdropClick = useRef(false);
+    var state = useMemo(function () {
+      return initialState;
+    }, []);
     useEffect(function () {
+      var toggle = toggleRef ? findNodeHandle(toggleRef.current) : undefined;
       var dialog = findNodeHandle(dialogRef.current);
 
       var handleDialogMouseDown = function handleDialogMouseDown() {
-        waitingForMouseUp.current = true;
+        state.waitingForMouseUp = true;
       };
 
-      var handleDocumentClick = function handleDocumentClick() {
-        if (backdrop === 'static') {
+      var handleDocumentClick = function handleDocumentClick(_ref) {
+        var target = _ref.target;
+
+        if (backdrop === 'static' || autoClose === false) {
           return;
-        }
+        } // Click outside -> return if autoClose is inside.
+
 
-        if (ignoreBackdropClick.current) {
-          ignoreBackdropClick.current = false;
+        if (!state.isDialogClick && autoClose === 'inside') {
+          return;
+        } // Click inside / on dialog -> return if autoClose is outside.
+
+
+        if (state.isDialogClick) {
+          state.isDialogClick = false;
+
+          if (autoClose === 'outside') {
+            return;
+          }
+        } // Click on toggle -> return always.
+
+
+        if (toggle && (target === toggle || toggle.contains(target))) {
           return;
         }
 
@@ -4263,22 +4323,23 @@ var BackdropHandler = function BackdropHandler(props) {
       };
 
       var handleDocumentMouseUp = function handleDocumentMouseUp() {
-        if (waitingForMouseUp.current) {
-          ignoreBackdropClick.current = true;
+        if (state.waitingForMouseUp) {
+          state.isDialogClick = true;
         }
 
-        waitingForMouseUp.current = false;
+        state.waitingForMouseUp = false;
       };
 
-      dialog.addEventListener('mousedown', handleDialogMouseDown);
-      document.addEventListener('click', handleDocumentClick);
-      document.addEventListener('mouseup', handleDocumentMouseUp);
+      dialog.addEventListener('mousedown', handleDialogMouseDown); // See https://github.com/necolas/react-native-web/issues/2115
+
+      document.addEventListener('click', handleDocumentClick, true);
+      document.addEventListener('mouseup', handleDocumentMouseUp, true);
       return function () {
         dialog.addEventListener('mousedown', handleDialogMouseDown);
-        document.removeEventListener('click', handleDocumentClick);
-        document.removeEventListener('mouseup', handleDocumentMouseUp);
+        document.removeEventListener('click', handleDocumentClick, true);
+        document.removeEventListener('mouseup', handleDocumentMouseUp, true);
       };
-    }, [backdrop]);
+    }, [backdrop, autoClose]);
     return null;
   }
 
@@ -4299,9 +4360,9 @@ var BackdropHandler = function BackdropHandler(props) {
 BackdropHandler.displayName = 'BackdropHandler';
 BackdropHandler.propTypes = propTypes$10;
 
-var _excluded$11 = ["children", "start", "end", "style", "textStyle"];
+var _excluded$10 = ["children", "start", "end", "style", "textStyle"];
 
-var _templateObject$R, _templateObject2$x, _templateObject3$i;
+var _templateObject$R, _templateObject2$x, _templateObject3$i, _templateObject4$g, _templateObject5$e, _templateObject6$d, _templateObject7$9, _templateObject8$8, _templateObject9$5, _templateObject10$5;
 var ALIGNMENT_BREAKPOINTS = [true, 'sm', 'md', 'lg', 'xl', 'xxl'];
 var propTypes$$ = {
   children: PropTypes.node.isRequired,
@@ -4312,11 +4373,23 @@ var propTypes$$ = {
   // eslint-disable-next-line react/forbid-prop-types
   textStyle: PropTypes.any
 };
-var styles$Q = StyleSheet.create({
+var styles$Q = StyleSheet.create(_objectSpread2(_objectSpread2(_objectSpread2({
   '.dropdown-menu': css(_templateObject$R || (_templateObject$R = _taggedTemplateLiteral(["\n    position: absolute;\n    z-index: $zindex-dropdown;\n    // display: none; // none by default, but block on \"open\" of the menu\n    min-width: $dropdown-min-width;\n    padding: $dropdown-padding-y $dropdown-padding-x;\n    margin: 0; // Override default margin of ul\n    // list-style: none;\n    background-color: $dropdown-bg;\n    // background-clip: padding-box;\n    border: $dropdown-border-width solid $dropdown-border-color;\n    border-radius: $dropdown-border-radius;\n    // @include box-shadow($dropdown-box-shadow);\n  "]))),
-  '.dropdown-menu-text': css(_templateObject2$x || (_templateObject2$x = _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  "]))),
-  backdrop: css(_templateObject3$i || (_templateObject3$i = _taggedTemplateLiteral(["\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    position: absolute;\n    flex-grow: 1;\n  "])))
-});
+  '.dropdown-menu[data-bs-popper]': css(_templateObject2$x || (_templateObject2$x = _taggedTemplateLiteral(["\n    top: 100%;\n    left: 0;\n    margin-top: $dropdown-spacer;\n  "])))
+}, each(GRID_BREAKPOINTS, function (breakpoint) {
+  var _ref;
+
+  return _ref = {}, _defineProperty(_ref, ".dropdown-menu".concat(infix(breakpoint), "-start[data-bs-popper]"), css(_templateObject3$i || (_templateObject3$i = _taggedTemplateLiteral(["\n      @include media-breakpoint-up(", ") {\n        right: auto;\n        left: 0;\n      }\n    "])), breakpoint)), _defineProperty(_ref, ".dropdown-menu".concat(infix(breakpoint), "-end[data-bs-popper]"), css(_templateObject4$g || (_templateObject4$g = _taggedTemplateLiteral(["\n      @include media-breakpoint-up(", ") {\n        right: 0;\n        left: auto;\n      }\n    "])), breakpoint)), _ref;
+})), {}, {
+  '.dropup .dropdown-menu[data-bs-popper]': css(_templateObject5$e || (_templateObject5$e = _taggedTemplateLiteral(["\n    top: auto;\n    bottom: 100%;\n    margin-top: 0;\n    margin-bottom: $dropdown-spacer;\n  "]))),
+  '.dropend .dropdown-menu[data-bs-popper]': css(_templateObject6$d || (_templateObject6$d = _taggedTemplateLiteral(["\n    top: 0;\n    right: auto;\n    left: 100%;\n    margin-top: 0;\n    margin-left: $dropdown-spacer;\n  "]))),
+  '.dropstart .dropdown-menu[data-bs-popper]': css(_templateObject7$9 || (_templateObject7$9 = _taggedTemplateLiteral(["\n    top: 0;\n    right: 100%;\n    left: auto;\n    margin-top: 0;\n    margin-right: $dropdown-spacer;\n  "]))),
+  '.navbar-nav .dropdown-menu': css(_templateObject8$8 || (_templateObject8$8 = _taggedTemplateLiteral(["\n    position: relative; // static;\n  "])))
+}, each(GRID_BREAKPOINTS, function (breakpoint) {
+  return _defineProperty({}, ".navbar-expand".concat(infix(next(breakpoint)), " .navbar-nav .dropdown-menu"), css(_templateObject9$5 || (_templateObject9$5 = _taggedTemplateLiteral(["\n      @include media-breakpoint-up(", ") {\n        position: absolute;\n      }\n    "])), next(breakpoint)));
+})), {}, {
+  '.dropdown-menu-text': css(_templateObject10$5 || (_templateObject10$5 = _taggedTemplateLiteral(["\n    font-size: $dropdown-font-size;\n    color: $dropdown-color;\n    text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)\n  "])))
+}));
 
 var getAlignment = function getAlignment(media, start, end) {
   var alignStart = typeof start === 'boolean' ? start : media.up(start);
@@ -4351,39 +4424,68 @@ var DropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
       end = _props$end === void 0 ? false : _props$end,
       style = props.style,
       textStyle = props.textStyle,
-      elementProps = _objectWithoutProperties(props, _excluded$11);
+      elementProps = _objectWithoutProperties(props, _excluded$10);
 
-  var dropdown = useForcedContext(DropdownContext);
+  var navbar = useContext(NavbarContext);
   var media = useMedia();
+  var dialogRef = useRef();
+  var dropdown = useForcedContext(DropdownContext);
   var identifier = dropdown.identifier,
-      direction = dropdown.direction,
-      triggerRef = dropdown.triggerRef,
+      toggleRef = dropdown.toggleRef,
       visible = dropdown.visible,
-      setVisible = dropdown.setVisible;
+      setVisible = dropdown.setVisible,
+      direction = dropdown.direction,
+      display = dropdown.display,
+      autoClose = dropdown.autoClose;
 
   if (!visible) {
     return null;
   }
 
-  var classes = getStyles(styles$Q, ['.dropdown-menu']);
+  var isStatic = Platform.OS === 'web' && display === 'static';
+  var isCollapsedNavbar = navbar && !(navbar.expand && (navbar.expand === true || media.up(navbar.expand)));
+  var hasStaticStyle = isStatic && !isCollapsedNavbar;
+  var classes = getStyles(styles$Q, ['.dropdown-menu', // Non-Popper styles
+  hasStaticStyle && '.dropdown-menu[data-bs-popper]', hasStaticStyle && start && ".dropdown-menu".concat(start === true ? '' : "-".concat(start), "-start[data-bs-popper]"), hasStaticStyle && end && ".dropdown-menu".concat(end === true ? '' : "-".concat(end), "-end[data-bs-popper]"), hasStaticStyle && direction === 'up' && '.dropup .dropdown-menu[data-bs-popper]', hasStaticStyle && direction === 'end' && '.dropend .dropdown-menu[data-bs-popper]', hasStaticStyle && direction === 'start' && '.dropstart .dropdown-menu[data-bs-popper]', // Navbar styles
+  navbar && '.navbar-nav .dropdown-menu', navbar && navbar.expand && ".navbar-expand".concat(navbar.expand === true ? '' : "-".concat(navbar.expand), " .navbar-nav .dropdown-menu")]);
   var textClasses = getStyles(styles$Q, ['.dropdown-menu-text']);
+
+  if (isStatic || isCollapsedNavbar) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, !isCollapsedNavbar && /*#__PURE__*/React.createElement(BackdropHandler, {
+      toggleRef: toggleRef,
+      dialogRef: dialogRef,
+      onClose: function onClose() {
+        setVisible(false);
+      },
+      autoClose: autoClose
+    }), /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
+      ref: concatRefs(dialogRef, ref),
+      accessibilityLabelledBy: identifier,
+      style: [classes, style],
+      textStyle: [textClasses, textStyle]
+    }), children));
+  }
+
   return /*#__PURE__*/React.createElement(OverlayContainer, null, /*#__PURE__*/React.createElement(Overlay, {
     placement: transformPlacement(media, direction, start, end),
-    targetRef: triggerRef,
+    targetRef: toggleRef,
     offset: convertToNumber(StyleSheet.value('dropdown-spacer')),
     visible: visible
   }, function (overlay, overlayRef) {
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BackdropHandler, {
+      toggleRef: toggleRef,
       dialogRef: overlayRef,
       onClose: function onClose() {
         setVisible(false);
-      }
+      },
+      autoClose: autoClose
     }), /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
       ref: concatRefs(overlayRef, ref),
       accessibilityLabelledBy: identifier,
-      style: [classes, {
+      style: [classes, overlay.overlayProps.style, {
+        maxHeight: 'auto',
         opacity: overlay.rendered ? 1 : 0
-      }, overlay.overlayProps.style, style],
+      }, style],
       textStyle: [textClasses, textStyle]
     }), /*#__PURE__*/React.createElement(DropdownContext.Provider, {
       value: dropdown
@@ -4393,10 +4495,69 @@ var DropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
 DropdownMenu.displayName = 'DropdownMenu';
 DropdownMenu.propTypes = propTypes$$;
 
-var _excluded$10 = ["children", "onPress", "active", "disabled", "style", "textStyle"];
+var _excluded$$ = ["children", "size", "style"];
 
-var _templateObject$Q, _templateObject2$w, _templateObject3$h, _templateObject4$f, _templateObject5$d, _templateObject6$c;
+var _templateObject$Q, _templateObject2$w;
 var propTypes$_ = {
+  children: PropTypes.node.isRequired,
+  size: PropTypes.oneOf(Object.keys(FONT_SIZES).map(function (k) {
+    return Number(k);
+  })).isRequired,
+  // eslint-disable-next-line react/forbid-prop-types
+  style: PropTypes.any
+};
+var styles$P = StyleSheet.create(_objectSpread2({
+  heading: css(_templateObject$Q || (_templateObject$Q = _taggedTemplateLiteral(["\n    margin-top: 0; // 1\n    margin-bottom: $headings-margin-bottom;\n    font-family: $headings-font-family;\n    font-style: $headings-font-style;\n    font-weight: $headings-font-weight;\n    color: $headings-color;\n  "])))
+}, each(FONT_SIZES, function (size, value) {
+  return _defineProperty({}, ".h".concat(size), css(_templateObject2$w || (_templateObject2$w = _taggedTemplateLiteral(["\n      font-size: ", ";\n      line-height: ", " * $headings-line-height;\n    "])), value, value));
+})));
+var Heading$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var children = props.children,
+      size = props.size,
+      style = props.style,
+      elementProps = _objectWithoutProperties(props, _excluded$$);
+
+  var classes = getStyles(styles$P, ['heading', ".h".concat(size)]);
+  return /*#__PURE__*/React.createElement(Text, _extends({}, elementProps, {
+    ref: ref,
+    accessibilityRole: "header",
+    accessibilityLevel: size,
+    style: [classes, style]
+  }), children);
+});
+Heading$1.displayName = 'Heading';
+Heading$1.propTypes = propTypes$_;
+
+var _excluded$_ = ["children", "style"];
+
+var _templateObject$P;
+var propTypes$Z = {
+  children: PropTypes.node.isRequired,
+  // eslint-disable-next-line react/forbid-prop-types
+  style: PropTypes.any
+};
+var styles$O = StyleSheet.create({
+  '.dropdown-header': css(_templateObject$P || (_templateObject$P = _taggedTemplateLiteral(["\n    // display: block;\n    padding: $dropdown-header-padding;\n    margin-bottom: 0; // for use with heading elements\n    font-size: $font-size-sm;\n    color: $dropdown-header-color;\n    // white-space: nowrap; // as with > li > a\n  "])))
+});
+var DropdownHeader = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var children = props.children,
+      style = props.style,
+      elementProps = _objectWithoutProperties(props, _excluded$_);
+
+  var classes = getStyles(styles$O, ['.dropdown-header']);
+  return /*#__PURE__*/React.createElement(Heading$1, _extends({}, elementProps, {
+    ref: ref,
+    size: 6,
+    style: [classes, style]
+  }), children);
+});
+DropdownHeader.displayName = 'DropdownHeader';
+DropdownHeader.propTypes = propTypes$Z;
+
+var _excluded$Z = ["children", "onPress", "active", "disabled", "style", "textStyle"];
+
+var _templateObject$O, _templateObject2$v, _templateObject3$h, _templateObject4$f, _templateObject5$d, _templateObject6$c;
+var propTypes$Y = {
   children: PropTypes.node.isRequired,
   onPress: PropTypes.func,
   active: PropTypes.bool,
@@ -4406,9 +4567,9 @@ var propTypes$_ = {
   // eslint-disable-next-line react/forbid-prop-types
   textStyle: PropTypes.any
 };
-var styles$P = StyleSheet.create({
-  '.dropdown-item': css(_templateObject$Q || (_templateObject$Q = _taggedTemplateLiteral(["\n    width: 100%;\n    padding: $dropdown-item-padding-y $dropdown-item-padding-x;\n    // clear: both;\n    background-color: transparent;\n    border: 0;\n\n    &:hover {\n      // @include gradient-bg($dropdown-link-hover-bg);\n      background-color: $dropdown-link-hover-bg;\n    }\n    &:focus {\n      // @include gradient-bg($dropdown-link-hover-bg);\n      background-color: $dropdown-link-hover-bg;\n    }\n  "]))),
-  '.dropdown-item-text': css(_templateObject2$w || (_templateObject2$w = _taggedTemplateLiteral(["\n    font-weight: $font-weight-normal;\n    color: $dropdown-link-color;\n    // text-align: inherit;\n    text-decoration: none; // if($link-decoration == none, null, none);\n    // white-space: nowrap;\n\n    &:hover {\n      color: $dropdown-link-hover-color;\n      text-decoration: none; // if($link-hover-decoration == underline, none, null);\n    }\n    &:focus {\n      color: $dropdown-link-hover-color;\n      text-decoration: none; // if($link-hover-decoration == underline, none, null);\n    }\n  "]))),
+var styles$N = StyleSheet.create({
+  '.dropdown-item': css(_templateObject$O || (_templateObject$O = _taggedTemplateLiteral(["\n    width: 100%;\n    padding: $dropdown-item-padding-y $dropdown-item-padding-x;\n    // clear: both;\n    background-color: transparent;\n    border: 0;\n\n    &:hover {\n      // @include gradient-bg($dropdown-link-hover-bg);\n      background-color: $dropdown-link-hover-bg;\n    }\n    &:focus {\n      // @include gradient-bg($dropdown-link-hover-bg);\n      background-color: $dropdown-link-hover-bg;\n    }\n  "]))),
+  '.dropdown-item-text': css(_templateObject2$v || (_templateObject2$v = _taggedTemplateLiteral(["\n    font-weight: $font-weight-normal;\n    color: $dropdown-link-color;\n    // text-align: inherit;\n    text-decoration: none; // if($link-decoration == none, null, none);\n    // white-space: nowrap;\n\n    &:hover {\n      color: $dropdown-link-hover-color;\n      text-decoration: none; // if($link-hover-decoration == underline, none, null);\n    }\n    &:focus {\n      color: $dropdown-link-hover-color;\n      text-decoration: none; // if($link-hover-decoration == underline, none, null);\n    }\n  "]))),
   '.dropdown-item-active': css(_templateObject3$h || (_templateObject3$h = _taggedTemplateLiteral(["\n    // @include gradient-bg($dropdown-link-active-bg);\n    background-color: $dropdown-link-active-bg;\n\n    &:hover {\n      background-color: $dropdown-link-active-bg;\n    }\n    &:focus {\n      background-color: $dropdown-link-active-bg;\n    }\n  "]))),
   '.dropdown-item-active-text': css(_templateObject4$f || (_templateObject4$f = _taggedTemplateLiteral(["\n    color: $dropdown-link-active-color;\n    text-decoration: none;\n\n    &:hover {\n      color: $dropdown-link-active-color;\n    }\n    &:focus {\n      color: $dropdown-link-active-color;\n    }\n  "]))),
   '.dropdown-item-disabled': css(_templateObject5$d || (_templateObject5$d = _taggedTemplateLiteral(["\n    // pointer-events: none;\n    background-color: transparent;\n    // Remove CSS gradients if they're enabled\n    // background-image: if($enable-gradients, none, null);\n\n    &:hover {\n      background-color: transparent;\n    }\n    &:focus {\n      background-color: transparent;\n    }\n  "]))),
@@ -4424,11 +4585,11 @@ var DropdownItem = function DropdownItem(props) {
       disabled = _props$disabled === void 0 ? false : _props$disabled,
       style = props.style,
       textStyle = props.textStyle,
-      elementProps = _objectWithoutProperties(props, _excluded$10);
+      elementProps = _objectWithoutProperties(props, _excluded$Z);
 
   var dropdown = useForcedContext(DropdownContext);
-  var classes = getStyles(styles$P, ['.dropdown-item', active && '.dropdown-item-active', disabled && '.dropdown-item-disabled']);
-  var textClasses = getStyles(styles$P, ['.dropdown-item-text', active && '.dropdown-item-active-text', disabled && '.dropdown-item-disabled-text']);
+  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.createElement(Pressable, _extends({}, elementProps, {
     onPress: concatFns(function () {
       dropdown.setVisible(false);
@@ -4440,67 +4601,9 @@ var DropdownItem = function DropdownItem(props) {
 };
 
 DropdownItem.displayName = 'DropdownItem';
-DropdownItem.propTypes = propTypes$_;
+DropdownItem.propTypes = propTypes$Y;
 
-var _excluded$$ = ["children", "style"];
-
-var _templateObject$P;
-var propTypes$Z = {
-  children: PropTypes.node.isRequired,
-  // eslint-disable-next-line react/forbid-prop-types
-  style: PropTypes.any
-};
-var styles$O = StyleSheet.create({
-  '.dropdown-item-text': css(_templateObject$P || (_templateObject$P = _taggedTemplateLiteral(["\n    // display: block;\n    padding: $dropdown-item-padding-y $dropdown-item-padding-x;\n    color: $dropdown-link-color;\n  "])))
-});
-var DropdownTextItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var children = props.children,
-      style = props.style,
-      elementProps = _objectWithoutProperties(props, _excluded$$);
-
-  var classes = getStyles(styles$O, ['.dropdown-item-text']);
-  return /*#__PURE__*/React.createElement(Text, _extends({}, elementProps, {
-    ref: ref,
-    style: [classes, style]
-  }), children);
-});
-DropdownTextItem.displayName = 'DropdownTextItem';
-DropdownTextItem.propTypes = propTypes$Z;
-
-var _excluded$_ = ["children", "size", "style"];
-
-var _templateObject$O, _templateObject2$v;
-var propTypes$Y = {
-  children: PropTypes.node.isRequired,
-  size: PropTypes.oneOf(Object.keys(FONT_SIZES).map(function (k) {
-    return Number(k);
-  })).isRequired,
-  // eslint-disable-next-line react/forbid-prop-types
-  style: PropTypes.any
-};
-var styles$N = StyleSheet.create(_objectSpread2({
-  heading: css(_templateObject$O || (_templateObject$O = _taggedTemplateLiteral(["\n    margin-top: 0; // 1\n    margin-bottom: $headings-margin-bottom;\n    font-family: $headings-font-family;\n    font-style: $headings-font-style;\n    font-weight: $headings-font-weight;\n    color: $headings-color;\n  "])))
-}, each(FONT_SIZES, function (size, value) {
-  return _defineProperty({}, ".h".concat(size), css(_templateObject2$v || (_templateObject2$v = _taggedTemplateLiteral(["\n      font-size: ", ";\n      line-height: ", " * $headings-line-height;\n    "])), value, value));
-})));
-var Heading$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var children = props.children,
-      size = props.size,
-      style = props.style,
-      elementProps = _objectWithoutProperties(props, _excluded$_);
-
-  var classes = getStyles(styles$N, ['heading', ".h".concat(size)]);
-  return /*#__PURE__*/React.createElement(Text, _extends({}, elementProps, {
-    ref: ref,
-    accessibilityRole: "header",
-    accessibilityLevel: size,
-    style: [classes, style]
-  }), children);
-});
-Heading$1.displayName = 'Heading';
-Heading$1.propTypes = propTypes$Y;
-
-var _excluded$Z = ["children", "style"];
+var _excluded$Y = ["children", "style"];
 
 var _templateObject$N;
 var propTypes$X = {
@@ -4509,24 +4612,23 @@ var propTypes$X = {
   style: PropTypes.any
 };
 var styles$M = StyleSheet.create({
-  '.dropdown-header': css(_templateObject$N || (_templateObject$N = _taggedTemplateLiteral(["\n    // display: block;\n    padding: $dropdown-header-padding;\n    margin-bottom: 0; // for use with heading elements\n    font-size: $font-size-sm;\n    color: $dropdown-header-color;\n    // white-space: nowrap; // as with > li > a\n  "])))
+  '.dropdown-item-text': css(_templateObject$N || (_templateObject$N = _taggedTemplateLiteral(["\n    // display: block;\n    padding: $dropdown-item-padding-y $dropdown-item-padding-x;\n    color: $dropdown-link-color;\n  "])))
 });
-var DropdownHeader = /*#__PURE__*/React.forwardRef(function (props, ref) {
+var DropdownTextItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
       style = props.style,
-      elementProps = _objectWithoutProperties(props, _excluded$Z);
+      elementProps = _objectWithoutProperties(props, _excluded$Y);
 
-  var classes = getStyles(styles$M, ['.dropdown-header']);
-  return /*#__PURE__*/React.createElement(Heading$1, _extends({}, elementProps, {
+  var classes = getStyles(styles$M, ['.dropdown-item-text']);
+  return /*#__PURE__*/React.createElement(Text, _extends({}, elementProps, {
     ref: ref,
-    size: 6,
     style: [classes, style]
   }), children);
 });
-DropdownHeader.displayName = 'DropdownHeader';
-DropdownHeader.propTypes = propTypes$X;
+DropdownTextItem.displayName = 'DropdownTextItem';
+DropdownTextItem.propTypes = propTypes$X;
 
-var _excluded$Y = ["style"];
+var _excluded$X = ["style"];
 
 var _templateObject$M;
 var propTypes$W = {
@@ -4538,7 +4640,7 @@ var styles$L = StyleSheet.create({
 });
 var DropdownDivider = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var style = props.style,
-      elementProps = _objectWithoutProperties(props, _excluded$Y);
+      elementProps = _objectWithoutProperties(props, _excluded$X);
 
   var classes = getStyles(styles$L, ['.dropdown-divider']);
   return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
@@ -4549,9 +4651,9 @@ var DropdownDivider = /*#__PURE__*/React.forwardRef(function (props, ref) {
 DropdownDivider.displayName = 'DropdownDivider';
 DropdownDivider.propTypes = propTypes$W;
 
-function useDropdown(defaultVisible, controlledVisible, onToggle, direction) {
+function useDropdown(defaultVisible, controlledVisible, onToggle, direction, display, autoClose) {
   var identifier = useIdentifier('dropdown');
-  var triggerRef = useRef();
+  var toggleRef = useRef();
 
   var _useControlledState = useControlledState(defaultVisible, controlledVisible, onToggle),
       _useControlledState2 = _slicedToArray(_useControlledState, 2),
@@ -4563,18 +4665,20 @@ function useDropdown(defaultVisible, controlledVisible, onToggle, direction) {
       identifier: identifier,
       visible: visible,
       setVisible: setVisible,
-      triggerRef: triggerRef,
-      direction: direction
+      toggleRef: toggleRef,
+      direction: direction,
+      display: display,
+      autoClose: autoClose
     };
   }, [visible]);
 }
 
-var _excluded$X = ["onPress"];
+var _excluded$W = ["onPress"];
 function useDismissDropdown(props) {
   var context = useForcedContext(DropdownContext);
 
   var handlePress = props.onPress,
-      restProps = _objectWithoutProperties(props, _excluded$X);
+      restProps = _objectWithoutProperties(props, _excluded$W);
 
   return _objectSpread2(_objectSpread2({}, restProps), {}, {
     onPress: function onPress(event) {
@@ -4584,28 +4688,7 @@ function useDismissDropdown(props) {
   });
 }
 
-var _excluded$W = ["onPress"];
-function useToggleDropdown(props) {
-  var context = useForcedContext(DropdownContext);
-
-  var handlePress = props.onPress,
-      restProps = _objectWithoutProperties(props, _excluded$W);
-
-  return _objectSpread2(_objectSpread2({}, restProps), {}, {
-    nativeID: context.identifier,
-    ref: context.triggerRef,
-    onPress: function onPress(event) {
-      if (handlePress) handlePress(event);
-      context.setVisible(function (value) {
-        return !value;
-      });
-    },
-    accessibilityHasPopup: true,
-    accessibilityExpanded: context.visible
-  });
-}
-
-var _excluded$V = ["children", "defaultVisible", "visible", "onToggle", "direction", "style"];
+var _excluded$V = ["children", "defaultVisible", "visible", "onToggle", "direction", "display", "autoClose", "style"];
 
 var _templateObject$L;
 var DIRECTIONS = ['top', 'bottom', 'start', 'end'];
@@ -4615,6 +4698,8 @@ var propTypes$V = {
   visible: PropTypes.bool,
   onToggle: PropTypes.func,
   direction: PropTypes.oneOf(DIRECTIONS),
+  display: PropTypes.oneOf(['dynamic', 'static']),
+  autoClose: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['inside', 'outside'])]),
   // eslint-disable-next-line react/forbid-prop-types
   style: PropTypes.any
 };
@@ -4629,10 +4714,14 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onToggle = props.onToggle,
       _props$direction = props.direction,
       direction = _props$direction === void 0 ? 'bottom' : _props$direction,
+      _props$display = props.display,
+      display = _props$display === void 0 ? 'dynamic' : _props$display,
+      _props$autoClose = props.autoClose,
+      autoClose = _props$autoClose === void 0 ? 'outside' : _props$autoClose,
       style = props.style,
       elementProps = _objectWithoutProperties(props, _excluded$V);
 
-  var dropdown = useDropdown(defaultVisible, visible, onToggle, direction);
+  var dropdown = useDropdown(defaultVisible, visible, onToggle, direction, display, autoClose);
   var classes = getStyles(styles$K, ['.dropdown']);
   return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
     ref: ref,
@@ -4644,10 +4733,11 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
 Dropdown.displayName = 'Dropdown';
 Dropdown.propTypes = propTypes$V;
 Dropdown.Context = DropdownContext;
-Dropdown.TextItem = DropdownTextItem;
-Dropdown.Header = DropdownHeader;
+Dropdown.Toggle = DropdownToggle;
 Dropdown.Menu = DropdownMenu;
+Dropdown.Header = DropdownHeader;
 Dropdown.Item = DropdownItem;
+Dropdown.TextItem = DropdownTextItem;
 Dropdown.Divider = DropdownDivider;
 Dropdown.useDismiss = useDismissDropdown;
 Dropdown.useToggle = useToggleDropdown;
@@ -5180,9 +5270,10 @@ function injectPopover(Target) {
         ref: overlayRef,
         placement: overlay.placement,
         popper: overlay.rendered,
-        style: [{
+        style: [overlay.overlayProps.style, {
+          maxHeight: 'auto',
           opacity: overlay.rendered ? 1 : 0
-        }, overlay.overlayProps.style],
+        }],
         arrowStyle: overlay.arrowProps.style
       }), /*#__PURE__*/React.createElement(Popover.Arrow, null), title && /*#__PURE__*/React.createElement(Popover.Header, null, title), /*#__PURE__*/React.createElement(Popover.Body, null, content));
     })));
@@ -5354,9 +5445,10 @@ function injectTooltip(Target) {
         ref: overlayRef,
         placement: overlay.placement,
         popper: overlay.rendered,
-        style: [{
+        style: [overlay.overlayProps.style, {
+          maxHeight: 'auto',
           opacity: overlay.rendered ? 1 : 0
-        }, overlay.overlayProps.style],
+        }],
         arrowStyle: overlay.arrowProps.style
       }), /*#__PURE__*/React.createElement(Tooltip.Arrow, null), /*#__PURE__*/React.createElement(Tooltip.Inner, null, title));
     })));
@@ -6047,7 +6139,7 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
     dialogRef: dialogRef,
     onClose: handleToggle,
     backdrop: backdrop
-  }), /*#__PURE__*/React.createElement(View, {
+  }), /*#__PURE__*/React.createElement(OverlayProvider, null, /*#__PURE__*/React.createElement(View, {
     ref: dialogRef,
     style: dialogClasses
   }, /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
@@ -6056,7 +6148,7 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
     textStyle: [contentTextClasses, textStyle]
   }), /*#__PURE__*/React.createElement(ModalContext.Provider, {
     value: modal
-  }, children)))));
+  }, children))))));
 });
 Modal.displayName = 'Modal';
 Modal.propTypes = propTypes$u;
@@ -6397,7 +6489,7 @@ function useNavbar(variant, defaultExpanded, controlledExpanded, onToggle, expan
       setExpanded: setExpanded,
       expand: expand
     };
-  }, [variant, expanded]);
+  }, [variant, expanded, expand]);
 }
 
 var _excluded$m = ["onPress"];
@@ -6625,7 +6717,7 @@ var Offcanvas = /*#__PURE__*/React.forwardRef(function (props, ref) {
     ref: concatRefs(offcanvasRef, ref),
     style: [classes, style],
     textStyle: [textClasses, textStyle]
-  }), children));
+  }), /*#__PURE__*/React.createElement(OverlayProvider, null, children)));
 });
 Offcanvas.displayName = 'Offcanvas';
 Offcanvas.propTypes = propTypes$j;