bootstrap-rn 0.1.5 → 0.1.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/bootstrap-rn.cjs.js +207 -114
  2. package/dist/bootstrap-rn.esm.js +208 -115
  3. package/dist/bootstrap-rn.umd.js +207 -114
  4. package/dist/bootstrap-rn.umd.min.js +1 -1
  5. package/package.json +57 -57
package/dist/bootstrap-rn.esm.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { OverlayProvider, useOverlayPosition, OverlayContainer } from '@react-native-aria/overlays';
2
2
  export { PortalProvider } from '@react-native-aria/overlays';
3
- import { Platform, PixelRatio, StyleSheet as StyleSheet$1, I18nManager, Dimensions, View as View$1, Text as Text$1, Pressable as Pressable$1, findNodeHandle, TextInput as TextInput$1, Image as Image$1, ImageBackground as ImageBackground$1, ScrollView as ScrollView$1, Modal as Modal$1, SafeAreaView, Picker as Picker$1, Animated, Easing } from 'react-native';
3
+ import { Platform, PixelRatio, StyleSheet as StyleSheet$1, I18nManager, Dimensions, View as View$1, Text as Text$1, Pressable as Pressable$1, StatusBar, findNodeHandle, TextInput as TextInput$1, Image as Image$1, ImageBackground as ImageBackground$1, ScrollView as ScrollView$1, Modal as Modal$1, SafeAreaView, Picker as Picker$1, Animated, Easing } from 'react-native';
4
4
  import { getStylesForProperty, getPropertyName } from 'css-to-react-native';
5
5
  import { rgba as rgba$1, mix, parseToRgb } from 'polished';
6
6
  import React, { useState, useEffect, useRef, useContext, useMemo, createContext } from 'react';
@@ -1963,7 +1963,7 @@ var utilities = {
1963
1963
 
1964
1964
  };
1965
1965
 
1966
- var _templateObject$1b, _templateObject2$M;
1966
+ var _templateObject$1b, _templateObject2$S;
1967
1967
  function makeUtility(options) {
1968
1968
  return each(options.values, function (key, value) {
1969
1969
  var name = options.class || options.property;
@@ -1980,7 +1980,7 @@ function makeUtility(options) {
1980
1980
  return null;
1981
1981
  }
1982
1982
 
1983
- return _defineProperty({}, "".concat(name, "-").concat(breakpoint).concat(suffix), css(_templateObject2$M || (_templateObject2$M = _taggedTemplateLiteral(["\n @include media-breakpoint-up(", ") {\n ", ": ", ";\n }\n "])), breakpoint, options.property, value));
1983
+ return _defineProperty({}, "".concat(name, "-").concat(breakpoint).concat(suffix), css(_templateObject2$S || (_templateObject2$S = _taggedTemplateLiteral(["\n @include media-breakpoint-up(", ") {\n ", ": ", ";\n }\n "])), breakpoint, options.property, value));
1984
1984
  }));
1985
1985
  });
1986
1986
  }
@@ -2958,7 +2958,7 @@ View.propTypes = propTypes$1p;
2958
2958
 
2959
2959
  var _excluded$1q = ["children", "color", "dismissible", "style", "textStyle"];
2960
2960
 
2961
- var _templateObject$19, _templateObject2$L, _templateObject3$q;
2961
+ var _templateObject$19, _templateObject2$R, _templateObject3$q;
2962
2962
  var propTypes$1o = {
2963
2963
  children: PropTypes.node.isRequired,
2964
2964
  color: PropTypes.oneOf(Object.keys(THEME_COLORS)),
@@ -2973,7 +2973,7 @@ var styles$18 = StyleSheet.create(_objectSpread2(_objectSpread2({
2973
2973
  }, each(THEME_COLORS, function (state, value) {
2974
2974
  var _ref;
2975
2975
 
2976
- return _ref = {}, _defineProperty(_ref, ".alert-".concat(state), css(_templateObject2$L || (_templateObject2$L = _taggedTemplateLiteral(["\n background-color: ", ";\n border-color: ", ";\n "])), shiftColor(function (t) {
2976
+ return _ref = {}, _defineProperty(_ref, ".alert-".concat(state), css(_templateObject2$R || (_templateObject2$R = _taggedTemplateLiteral(["\n background-color: ", ";\n border-color: ", ";\n "])), shiftColor(function (t) {
2977
2977
  return t['alert-bg-scale'];
2978
2978
  }, value), shiftColor(function (t) {
2979
2979
  return t['alert-border-scale'];
@@ -3008,7 +3008,7 @@ Alert.propTypes = propTypes$1o;
3008
3008
 
3009
3009
  var _excluded$1p = ["color", "bold", "italic", "mark", "small", "style", "styleName"];
3010
3010
 
3011
- var _templateObject$18, _templateObject2$K, _templateObject3$p, _templateObject4$m, _templateObject5$k;
3011
+ var _templateObject$18, _templateObject2$Q, _templateObject3$p, _templateObject4$m, _templateObject5$k;
3012
3012
  var propTypes$1n = {
3013
3013
  color: PropTypes.oneOf([].concat(_toConsumableArray(Object.keys(THEME_COLORS)), ['muted', 'black-50', 'white-50'])),
3014
3014
  small: PropTypes.bool,
@@ -3022,7 +3022,7 @@ var propTypes$1n = {
3022
3022
  };
3023
3023
  var styles$17 = StyleSheet.create({
3024
3024
  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 "]))),
3025
- strong: css(_templateObject2$K || (_templateObject2$K = _taggedTemplateLiteral(["\n font-weight: $font-weight-bolder;\n "]))),
3025
+ strong: css(_templateObject2$Q || (_templateObject2$Q = _taggedTemplateLiteral(["\n font-weight: $font-weight-bolder;\n "]))),
3026
3026
  italic: css(_templateObject3$p || (_templateObject3$p = _taggedTemplateLiteral(["\n font-style: italic;\n "]))),
3027
3027
  small: css(_templateObject4$m || (_templateObject4$m = _taggedTemplateLiteral(["\n font-size: $small-font-size;\n line-height: $small-font-size * $line-height-base;\n "]))),
3028
3028
  mark: css(_templateObject5$k || (_templateObject5$k = _taggedTemplateLiteral(["\n padding: $mark-padding;\n background-color: $mark-bg;\n "])))
@@ -3080,35 +3080,42 @@ var Text = /*#__PURE__*/React.forwardRef(function (props, ref) {
3080
3080
  Text.displayName = 'Text';
3081
3081
  Text.propTypes = propTypes$1n;
3082
3082
 
3083
- var _excluded$1o = ["children", "style"];
3083
+ var _excluded$1o = ["children", "style", "textStyle"];
3084
3084
 
3085
- var _templateObject$17, _templateObject2$J;
3085
+ var _templateObject$17, _templateObject2$P;
3086
3086
  var propTypes$1m = {
3087
3087
  children: PropTypes.node.isRequired,
3088
3088
  // eslint-disable-next-line react/forbid-prop-types
3089
- style: PropTypes.any
3089
+ style: PropTypes.any,
3090
+ // eslint-disable-next-line react/forbid-prop-types
3091
+ textStyle: PropTypes.any
3090
3092
  };
3091
3093
  var styles$16 = StyleSheet.create({
3092
3094
  '.badge': css(_templateObject$17 || (_templateObject$17 = _taggedTemplateLiteral(["\n // display: inline-block;\n padding: $badge-padding-y $badge-padding-x;\n border-radius: $badge-border-radius;\n // @include gradient-bg();\n "]))),
3093
- '.badge-text': css(_templateObject2$J || (_templateObject2$J = _taggedTemplateLiteral(["\n font-size: $badge-font-size;\n font-weight: $badge-font-weight;\n line-height: $badge-font-size * 1;\n color: $badge-color;\n text-align: center;\n // white-space: nowrap;\n // vertical-align: baseline;\n "])))
3095
+ '.badge-text': css(_templateObject2$P || (_templateObject2$P = _taggedTemplateLiteral(["\n font-size: $badge-font-size;\n font-weight: $badge-font-weight;\n line-height: $badge-font-size * 1;\n color: $badge-color;\n text-align: center;\n // white-space: nowrap;\n // vertical-align: baseline;\n "])))
3094
3096
  });
3095
3097
  var Badge = /*#__PURE__*/React.forwardRef(function (props, ref) {
3096
3098
  var children = props.children,
3097
3099
  style = props.style,
3100
+ textStyle = props.textStyle,
3098
3101
  elementProps = _objectWithoutProperties(props, _excluded$1o);
3099
3102
 
3100
- var classes = getStyles(styles$16, ['.badge', '.badge-text']);
3101
- return /*#__PURE__*/React.createElement(Text, _extends({}, elementProps, {
3103
+ var classes = getStyles(styles$16, ['.badge']);
3104
+ var textClasses = getStyles(styles$16, ['.badge-text']); // composite component
3105
+
3106
+ return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
3102
3107
  ref: ref,
3103
3108
  style: [classes, style]
3104
- }), children);
3109
+ }), /*#__PURE__*/React.createElement(Text, {
3110
+ style: [textClasses, textStyle]
3111
+ }, children));
3105
3112
  });
3106
3113
  Badge.displayName = 'Badge';
3107
3114
  Badge.propTypes = propTypes$1m;
3108
3115
 
3109
3116
  var _excluded$1n = ["children", "active", "style", "textStyle"];
3110
3117
 
3111
- var _templateObject$16, _templateObject2$I, _templateObject3$o;
3118
+ var _templateObject$16, _templateObject2$O, _templateObject3$o;
3112
3119
  var propTypes$1l = {
3113
3120
  children: PropTypes.node.isRequired,
3114
3121
  active: PropTypes.bool,
@@ -3119,7 +3126,7 @@ var propTypes$1l = {
3119
3126
  };
3120
3127
  var styles$15 = StyleSheet.create({
3121
3128
  '.breadcrumb-item': css(_templateObject$16 || (_templateObject$16 = _taggedTemplateLiteral(["\n padding-left: $breadcrumb-item-padding-x;\n padding-right: $breadcrumb-item-padding-x;\n "]))),
3122
- '.breadcrumb-text': css(_templateObject2$I || (_templateObject2$I = _taggedTemplateLiteral(["\n color: $primary;\n "]))),
3129
+ '.breadcrumb-text': css(_templateObject2$O || (_templateObject2$O = _taggedTemplateLiteral(["\n color: $primary;\n "]))),
3123
3130
  '.breadcrumb-item-active': css(_templateObject3$o || (_templateObject3$o = _taggedTemplateLiteral(["\n color: $breadcrumb-active-color;\n "])))
3124
3131
  });
3125
3132
  var BreadcrumbItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
@@ -3432,7 +3439,7 @@ function useToggleButton(props) {
3432
3439
 
3433
3440
  var _excluded$1f = ["children", "color", "size", "outline", "first", "last", "active", "disabled", "style", "activeStyle", "textStyle", "activeTextStyle"];
3434
3441
 
3435
- 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;
3442
+ var _templateObject$12, _templateObject2$N, _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;
3436
3443
  var propTypes$1g = {
3437
3444
  children: PropTypes.node.isRequired,
3438
3445
  color: PropTypes.oneOf([].concat(_toConsumableArray(Object.keys(THEME_COLORS)), ['link'])),
@@ -3453,7 +3460,7 @@ var propTypes$1g = {
3453
3460
  };
3454
3461
  var styles$11 = StyleSheet.create(_objectSpread2(_objectSpread2({
3455
3462
  '.btn': css(_templateObject$12 || (_templateObject$12 = _taggedTemplateLiteral(["\n flex-direction: row; // added for bootstrap-rn\n justify-content: center; // added for bootstrap-rn\n // display: inline-block;\n @include platform(web) {\n // cursor: if($enable-button-pointers, pointer, null);\n user-select: none;\n }\n background-color: transparent;\n border: $btn-border-width solid transparent;\n padding: $btn-padding-y $btn-padding-x;\n // Manually declare to provide an override to the browser default\n border-radius: $btn-border-radius;\n // @include transition($btn-transition);\n\n &:focus {\n // outline: 0;\n // box-shadow: $btn-focus-box-shadow;\n }\n\n &:active {\n // @include box-shadow($btn-active-box-shadow);\n\n &:focus {\n // @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);\n }\n }\n "]))),
3456
- '.btn-text': css(_templateObject2$H || (_templateObject2$H = _taggedTemplateLiteral(["\n font-family: $btn-font-family;\n font-weight: $btn-font-weight;\n line-height: $btn-font-size * $btn-line-height;\n color: $body-color;\n text-align: center;\n text-decoration: none; // if($link-decoration == none, null, none);\n white-space: $btn-white-space;\n // vertical-align: middle;\n font-size: $btn-font-size;\n\n &:hover {\n color: $body-color;\n text-decoration: none; // if($link-decoration == none, null, none);\n }\n "]))),
3463
+ '.btn-text': css(_templateObject2$N || (_templateObject2$N = _taggedTemplateLiteral(["\n font-family: $btn-font-family;\n font-weight: $btn-font-weight;\n line-height: $btn-font-size * $btn-line-height;\n color: $body-color;\n text-align: center;\n text-decoration: none; // if($link-decoration == none, null, none);\n white-space: $btn-white-space;\n // vertical-align: middle;\n font-size: $btn-font-size;\n\n &:hover {\n color: $body-color;\n text-decoration: none; // if($link-decoration == none, null, none);\n }\n "]))),
3457
3464
  '.btn-disabled': css(_templateObject3$n || (_templateObject3$n = _taggedTemplateLiteral(["\n // pointer-events: none;\n opacity: $btn-disabled-opacity;\n // @include box-shadow(none);\n "])))
3458
3465
  }, each(THEME_COLORS, function (color, value) {
3459
3466
  var _ref;
@@ -3551,7 +3558,7 @@ Button.useToggle = useToggleButton;
3551
3558
 
3552
3559
  var _excluded$1e = ["children", "style", "textStyle"];
3553
3560
 
3554
- var _templateObject$11, _templateObject2$G;
3561
+ var _templateObject$11, _templateObject2$M;
3555
3562
  var propTypes$1f = {
3556
3563
  children: PropTypes.node.isRequired,
3557
3564
  // eslint-disable-next-line react/forbid-prop-types
@@ -3561,7 +3568,7 @@ var propTypes$1f = {
3561
3568
  };
3562
3569
  var styles$10 = StyleSheet.create({
3563
3570
  blockquote: css(_templateObject$11 || (_templateObject$11 = _taggedTemplateLiteral(["\n margin-bottom: $blockquote-margin-y;\n "]))),
3564
- 'blockquote-text': css(_templateObject2$G || (_templateObject2$G = _taggedTemplateLiteral(["\n font-size: $blockquote-font-size;\n "])))
3571
+ 'blockquote-text': css(_templateObject2$M || (_templateObject2$M = _taggedTemplateLiteral(["\n font-size: $blockquote-font-size;\n "])))
3565
3572
  });
3566
3573
  var Blockquote = /*#__PURE__*/React.forwardRef(function (props, ref) {
3567
3574
  var children = props.children,
@@ -3585,7 +3592,7 @@ Blockquote.propTypes = propTypes$1f;
3585
3592
 
3586
3593
  var _excluded$1d = ["children", "style", "textStyle"];
3587
3594
 
3588
- var _templateObject$10, _templateObject2$F;
3595
+ var _templateObject$10, _templateObject2$L;
3589
3596
  var propTypes$1e = {
3590
3597
  children: PropTypes.node.isRequired,
3591
3598
  // eslint-disable-next-line react/forbid-prop-types
@@ -3595,7 +3602,7 @@ var propTypes$1e = {
3595
3602
  };
3596
3603
  var styles$$ = StyleSheet.create({
3597
3604
  body: css(_templateObject$10 || (_templateObject$10 = _taggedTemplateLiteral(["\n background-color: $body-bg;\n height: 100%; // added for bootstrap-rn\n "]))),
3598
- 'body-text': css(_templateObject2$F || (_templateObject2$F = _taggedTemplateLiteral(["\n color: $body-color;\n text-align: $body-text-align;\n "])))
3605
+ 'body-text': css(_templateObject2$L || (_templateObject2$L = _taggedTemplateLiteral(["\n color: $body-color;\n text-align: $body-text-align;\n "])))
3599
3606
  });
3600
3607
  var Body = /*#__PURE__*/React.forwardRef(function (props, ref) {
3601
3608
  var children = props.children,
@@ -3616,7 +3623,7 @@ Body.propTypes = propTypes$1e;
3616
3623
 
3617
3624
  var _excluded$1c = ["children", "style", "textStyle"];
3618
3625
 
3619
- var _templateObject$$, _templateObject2$E;
3626
+ var _templateObject$$, _templateObject2$K;
3620
3627
  var propTypes$1d = {
3621
3628
  children: PropTypes.node.isRequired,
3622
3629
  // eslint-disable-next-line react/forbid-prop-types
@@ -3626,7 +3633,7 @@ var propTypes$1d = {
3626
3633
  };
3627
3634
  var styles$_ = StyleSheet.create({
3628
3635
  '.card-body': css(_templateObject$$ || (_templateObject$$ = _taggedTemplateLiteral(["\n // flex: 1 1 auto;\n padding: $card-spacer-y $card-spacer-x;\n "]))),
3629
- '.card-body-text': css(_templateObject2$E || (_templateObject2$E = _taggedTemplateLiteral(["\n color: $card-color;\n "])))
3636
+ '.card-body-text': css(_templateObject2$K || (_templateObject2$K = _taggedTemplateLiteral(["\n color: $card-color;\n "])))
3630
3637
  });
3631
3638
  var CardBody = /*#__PURE__*/React.forwardRef(function (props, ref) {
3632
3639
  var children = props.children,
@@ -3647,7 +3654,7 @@ CardBody.propTypes = propTypes$1d;
3647
3654
 
3648
3655
  var _excluded$1b = ["children", "style", "textStyle"];
3649
3656
 
3650
- var _templateObject$_, _templateObject2$D;
3657
+ var _templateObject$_, _templateObject2$J;
3651
3658
  var propTypes$1c = {
3652
3659
  children: PropTypes.node.isRequired,
3653
3660
  // eslint-disable-next-line react/forbid-prop-types
@@ -3657,7 +3664,7 @@ var propTypes$1c = {
3657
3664
  };
3658
3665
  var styles$Z = StyleSheet.create({
3659
3666
  '.card-header': css(_templateObject$_ || (_templateObject$_ = _taggedTemplateLiteral(["\n padding: $card-cap-padding-y $card-cap-padding-x;\n margin-bottom: 0; // Removes the default margin-bottom of <hN>\n background-color: $card-cap-bg;\n border-bottom-width: $card-border-width;\n border-style: solid;\n border-color: $card-border-color;\n border-radius: $card-inner-border-radius $card-inner-border-radius 0 0;\n "]))),
3660
- '.card-header-text': css(_templateObject2$D || (_templateObject2$D = _taggedTemplateLiteral(["\n color: $card-cap-color;\n "])))
3667
+ '.card-header-text': css(_templateObject2$J || (_templateObject2$J = _taggedTemplateLiteral(["\n color: $card-cap-color;\n "])))
3661
3668
  });
3662
3669
  var CardHeader = /*#__PURE__*/React.forwardRef(function (props, ref) {
3663
3670
  var children = props.children,
@@ -3678,7 +3685,7 @@ CardHeader.propTypes = propTypes$1c;
3678
3685
 
3679
3686
  var _excluded$1a = ["children", "style", "textStyle"];
3680
3687
 
3681
- var _templateObject$Z, _templateObject2$C;
3688
+ var _templateObject$Z, _templateObject2$I;
3682
3689
  var propTypes$1b = {
3683
3690
  children: PropTypes.node.isRequired,
3684
3691
  // eslint-disable-next-line react/forbid-prop-types
@@ -3688,7 +3695,7 @@ var propTypes$1b = {
3688
3695
  };
3689
3696
  var styles$Y = StyleSheet.create({
3690
3697
  '.card-footer': css(_templateObject$Z || (_templateObject$Z = _taggedTemplateLiteral(["\n padding: $card-cap-padding-y $card-cap-padding-x;\n background-color: $card-cap-bg;\n border-top-width: $card-border-width;\n border-style: solid;\n border-color: $card-border-color;\n border-radius: 0 0 $card-inner-border-radius $card-inner-border-radius;\n "]))),
3691
- '.card-footer-text': css(_templateObject2$C || (_templateObject2$C = _taggedTemplateLiteral(["\n color: $card-cap-color;\n "])))
3698
+ '.card-footer-text': css(_templateObject2$I || (_templateObject2$I = _taggedTemplateLiteral(["\n color: $card-cap-color;\n "])))
3692
3699
  });
3693
3700
  var CardFooter = /*#__PURE__*/React.forwardRef(function (props, ref) {
3694
3701
  var children = props.children,
@@ -3743,7 +3750,7 @@ OffcanvasContext.displayName = 'OffcanvasContext';
3743
3750
 
3744
3751
  var _excluded$18 = ["children", "disabled", "style", "textStyle"];
3745
3752
 
3746
- var _templateObject$X, _templateObject2$B, _templateObject3$m, _templateObject4$k, _templateObject5$i;
3753
+ var _templateObject$X, _templateObject2$H, _templateObject3$m, _templateObject4$k, _templateObject5$i;
3747
3754
  var propTypes$19 = {
3748
3755
  children: PropTypes.node,
3749
3756
  disabled: PropTypes.bool,
@@ -3754,7 +3761,7 @@ var propTypes$19 = {
3754
3761
  };
3755
3762
  var styles$W = StyleSheet.create({
3756
3763
  '.btn-close': css(_templateObject$X || (_templateObject$X = _taggedTemplateLiteral(["\n // Workaround for missing box-sizing in react native.\n $additional-width: $btn-close-padding-x * 2;\n $additional-height: $btn-close-padding-y * 2;\n\n // box-sizing: content-box;\n width: $btn-close-width + $additional-width;\n height: $btn-close-height + $additional-height;\n padding: $btn-close-padding-y $btn-close-padding-x;\n background: transparent;\n border-width: 0; // for button elements\n // @include border-radius();\n opacity: $btn-close-opacity;\n\n &:hover {\n opacity: $btn-close-hover-opacity;\n }\n\n &:focus {\n // outline: 0;\n // box-shadow: $btn-close-focus-shadow;\n opacity: $btn-close-focus-opacity;\n }\n "]))),
3757
- '.btn-close-text': css(_templateObject2$B || (_templateObject2$B = _taggedTemplateLiteral(["\n color: $btn-close-color;\n\n // Override <a>'s hover style\n &:hover {\n color: $btn-close-color;\n text-decoration: none;\n }\n "]))),
3764
+ '.btn-close-text': css(_templateObject2$H || (_templateObject2$H = _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 "]))),
3758
3765
  '.btn-close-disabled': css(_templateObject3$m || (_templateObject3$m = _taggedTemplateLiteral(["\n // pointer-events: none;\n // user-select: none;\n opacity: $btn-close-disabled-opacity;\n "]))),
3759
3766
  // Modal styles
3760
3767
  '.modal-header .btn-close': css(_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 "]))),
@@ -3932,7 +3939,7 @@ NavbarContext.displayName = 'NavbarContext';
3932
3939
 
3933
3940
  var _excluded$15 = ["fluid", "style"];
3934
3941
 
3935
- var _templateObject$W, _templateObject2$A, _templateObject3$l, _templateObject4$j, _templateObject5$h, _templateObject6$f, _templateObject7$b, _templateObject8$a;
3942
+ var _templateObject$W, _templateObject2$G, _templateObject3$l, _templateObject4$j, _templateObject5$h, _templateObject6$f, _templateObject7$b, _templateObject8$a;
3936
3943
  var propTypes$16 = {
3937
3944
  children: PropTypes.node.isRequired,
3938
3945
  fluid: PropTypes.oneOf([true].concat(_toConsumableArray(Object.keys(CONTAINER_MAX_WIDTHS)))),
@@ -3941,7 +3948,7 @@ var propTypes$16 = {
3941
3948
  };
3942
3949
  var styles$V = StyleSheet.create(_objectSpread2({
3943
3950
  '.container': css(_templateObject$W || (_templateObject$W = _taggedTemplateLiteral(["\n width: 100%;\n padding-right: $container-padding-x;\n padding-left: $container-padding-x;\n margin-right: auto;\n margin-left: auto;\n "]))),
3944
- '.container-sm': css(_templateObject2$A || (_templateObject2$A = _taggedTemplateLiteral(["\n @include media-breakpoint-up(sm) {\n max-width: ", ";\n }\n @include media-breakpoint-up(md) {\n max-width: ", ";\n }\n @include media-breakpoint-up(lg) {\n max-width: ", ";\n }\n @include media-breakpoint-up(xl) {\n max-width: ", ";\n }\n @include media-breakpoint-up(xxl) {\n max-width: ", ";\n }\n "])), function (t) {
3951
+ '.container-sm': css(_templateObject2$G || (_templateObject2$G = _taggedTemplateLiteral(["\n @include media-breakpoint-up(sm) {\n max-width: ", ";\n }\n @include media-breakpoint-up(md) {\n max-width: ", ";\n }\n @include media-breakpoint-up(lg) {\n max-width: ", ";\n }\n @include media-breakpoint-up(xl) {\n max-width: ", ";\n }\n @include media-breakpoint-up(xxl) {\n max-width: ", ";\n }\n "])), function (t) {
3945
3952
  return t['container-max-widths'].sm;
3946
3953
  }, function (t) {
3947
3954
  return t['container-max-widths'].md;
@@ -4001,7 +4008,7 @@ Container.propTypes = propTypes$16;
4001
4008
 
4002
4009
  var _excluded$14 = ["children", "type", "value", "onChange", "onPress", "label", "disabled", "valid", "invalid", "style", "inputStyle", "labelStyle", "labelTextStyle"];
4003
4010
 
4004
- 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;
4011
+ var _templateObject$V, _templateObject2$F, _templateObject3$k, _templateObject4$i, _templateObject5$g, _templateObject6$e, _templateObject7$a, _templateObject8$9, _templateObject9$7, _templateObject10$7, _templateObject11$5, _templateObject12$4, _templateObject13$4;
4005
4012
  var propTypes$15 = {
4006
4013
  children: PropTypes.node,
4007
4014
  type: PropTypes.oneOf(['checkbox', 'radio', 'switch']).isRequired,
@@ -4023,7 +4030,7 @@ var propTypes$15 = {
4023
4030
  };
4024
4031
  var styles$U = StyleSheet.create(_objectSpread2({
4025
4032
  '.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 "]))),
4026
- '.form-check-disabled': css(_templateObject2$z || (_templateObject2$z = _taggedTemplateLiteral(["\n opacity: $form-check-label-disabled-opacity;\n "]))),
4033
+ '.form-check-disabled': css(_templateObject2$F || (_templateObject2$F = _taggedTemplateLiteral(["\n opacity: $form-check-label-disabled-opacity;\n "]))),
4027
4034
  '.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 "]))),
4028
4035
  '.form-check-input-checkbox': css(_templateObject4$i || (_templateObject4$i = _taggedTemplateLiteral(["\n border-radius: $form-check-input-border-radius;\n "]))),
4029
4036
  '.form-check-input-radio': css(_templateObject5$g || (_templateObject5$g = _taggedTemplateLiteral(["\n border-radius: $form-check-radio-border-radius;\n "]))),
@@ -4125,7 +4132,7 @@ Checkbox.displayName = 'Checkbox';
4125
4132
 
4126
4133
  var _excluded$13 = ["children", "size", "sizeSm", "sizeMd", "sizeLg", "sizeXl", "style"];
4127
4134
 
4128
- var _templateObject$U, _templateObject2$y, _templateObject3$j, _templateObject4$h, _templateObject5$f;
4135
+ var _templateObject$U, _templateObject2$E, _templateObject3$j, _templateObject4$h, _templateObject5$f;
4129
4136
  var sizes = makeArray(GRID_COLUMNS).map(function (v) {
4130
4137
  return v + 1;
4131
4138
  });
@@ -4144,7 +4151,7 @@ var styles$T = StyleSheet.create(_objectSpread2({
4144
4151
  }, each(GRID_BREAKPOINTS, function (breakpoint) {
4145
4152
  var _objectSpread2$1;
4146
4153
 
4147
- 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) {
4154
+ return _objectSpread2((_objectSpread2$1 = {}, _defineProperty(_objectSpread2$1, ".col".concat(infix(breakpoint)), css(_templateObject2$E || (_templateObject2$E = _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) {
4148
4155
  var _ref;
4149
4156
 
4150
4157
  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;
@@ -4273,6 +4280,11 @@ var Overlay = function Overlay(props) {
4273
4280
  if (overlay.arrowProps.style.left) {
4274
4281
  overlay.arrowProps.style.left -= arrowOffset;
4275
4282
  }
4283
+ } // Adjust bottom value by status bar height on Android
4284
+
4285
+
4286
+ if (Platform.OS === 'android' && overlay.overlayProps.style.bottom !== undefined && StatusBar.currentHeight) {
4287
+ overlay.overlayProps.style.bottom -= StatusBar.currentHeight;
4276
4288
  }
4277
4289
 
4278
4290
  return children(overlay, overlayRef);
@@ -4387,7 +4399,7 @@ BackdropHandler.propTypes = propTypes$10;
4387
4399
 
4388
4400
  var _excluded$10 = ["children", "start", "end", "style", "textStyle"];
4389
4401
 
4390
- var _templateObject$R, _templateObject2$x, _templateObject3$i, _templateObject4$g, _templateObject5$e, _templateObject6$d, _templateObject7$9, _templateObject8$8, _templateObject9$6, _templateObject10$6;
4402
+ var _templateObject$R, _templateObject2$D, _templateObject3$i, _templateObject4$g, _templateObject5$e, _templateObject6$d, _templateObject7$9, _templateObject8$8, _templateObject9$6, _templateObject10$6;
4391
4403
  var ALIGNMENT_BREAKPOINTS = [true, 'sm', 'md', 'lg', 'xl', 'xxl'];
4392
4404
  var propTypes$$ = {
4393
4405
  children: PropTypes.node.isRequired,
@@ -4400,7 +4412,7 @@ var propTypes$$ = {
4400
4412
  };
4401
4413
  var styles$Q = StyleSheet.create(_objectSpread2(_objectSpread2(_objectSpread2({
4402
4414
  '.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 "]))),
4403
- '.dropdown-menu[data-bs-popper]': css(_templateObject2$x || (_templateObject2$x = _taggedTemplateLiteral(["\n top: 100%;\n left: 0;\n margin-top: $dropdown-spacer;\n "])))
4415
+ '.dropdown-menu[data-bs-popper]': css(_templateObject2$D || (_templateObject2$D = _taggedTemplateLiteral(["\n top: 100%;\n left: 0;\n margin-top: $dropdown-spacer;\n "])))
4404
4416
  }, each(GRID_BREAKPOINTS, function (breakpoint) {
4405
4417
  var _ref;
4406
4418
 
@@ -4522,7 +4534,7 @@ DropdownMenu.propTypes = propTypes$$;
4522
4534
 
4523
4535
  var _excluded$$ = ["children", "size", "style"];
4524
4536
 
4525
- var _templateObject$Q, _templateObject2$w;
4537
+ var _templateObject$Q, _templateObject2$C;
4526
4538
  var propTypes$_ = {
4527
4539
  children: PropTypes.node.isRequired,
4528
4540
  size: PropTypes.oneOf(Object.keys(FONT_SIZES).map(function (k) {
@@ -4534,7 +4546,7 @@ var propTypes$_ = {
4534
4546
  var styles$P = StyleSheet.create(_objectSpread2({
4535
4547
  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 "])))
4536
4548
  }, each(FONT_SIZES, function (size, value) {
4537
- return _defineProperty({}, ".h".concat(size), css(_templateObject2$w || (_templateObject2$w = _taggedTemplateLiteral(["\n font-size: ", ";\n line-height: ", " * $headings-line-height;\n "])), value, value));
4549
+ return _defineProperty({}, ".h".concat(size), css(_templateObject2$C || (_templateObject2$C = _taggedTemplateLiteral(["\n font-size: ", ";\n line-height: ", " * $headings-line-height;\n "])), value, value));
4538
4550
  })));
4539
4551
  var Heading$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
4540
4552
  var children = props.children,
@@ -4553,35 +4565,43 @@ var Heading$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
4553
4565
  Heading$1.displayName = 'Heading';
4554
4566
  Heading$1.propTypes = propTypes$_;
4555
4567
 
4556
- var _excluded$_ = ["children", "style"];
4568
+ var _excluded$_ = ["children", "style", "textStyle"];
4557
4569
 
4558
- var _templateObject$P;
4570
+ var _templateObject$P, _templateObject2$B;
4559
4571
  var propTypes$Z = {
4560
4572
  children: PropTypes.node.isRequired,
4561
4573
  // eslint-disable-next-line react/forbid-prop-types
4562
- style: PropTypes.any
4574
+ style: PropTypes.any,
4575
+ // eslint-disable-next-line react/forbid-prop-types
4576
+ textStyle: PropTypes.any
4563
4577
  };
4564
4578
  var styles$O = StyleSheet.create({
4565
- '.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 "])))
4579
+ '.dropdown-header': css(_templateObject$P || (_templateObject$P = _taggedTemplateLiteral(["\n // display: block;\n padding: $dropdown-header-padding;\n "]))),
4580
+ '.dropdown-header-text': css(_templateObject2$B || (_templateObject2$B = _taggedTemplateLiteral(["\n margin-bottom: 0; // for use with heading elements\n font-size: $font-size-sm;\n color: $dropdown-header-color;\n // white-space: nowrap; // as with > li > a\n "])))
4566
4581
  });
4567
4582
  var DropdownHeader = /*#__PURE__*/React.forwardRef(function (props, ref) {
4568
4583
  var children = props.children,
4569
4584
  style = props.style,
4585
+ textStyle = props.textStyle,
4570
4586
  elementProps = _objectWithoutProperties(props, _excluded$_);
4571
4587
 
4572
4588
  var classes = getStyles(styles$O, ['.dropdown-header']);
4573
- return /*#__PURE__*/React.createElement(Heading$1, _extends({}, elementProps, {
4589
+ var textClasses = getStyles(styles$O, ['.dropdown-header-text']); // composite component
4590
+
4591
+ return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
4574
4592
  ref: ref,
4575
4593
  size: 6,
4576
4594
  style: [classes, style]
4577
- }), children);
4595
+ }), /*#__PURE__*/React.createElement(Heading$1, {
4596
+ style: [textClasses, textStyle]
4597
+ }, children));
4578
4598
  });
4579
4599
  DropdownHeader.displayName = 'DropdownHeader';
4580
4600
  DropdownHeader.propTypes = propTypes$Z;
4581
4601
 
4582
4602
  var _excluded$Z = ["children", "onPress", "active", "disabled", "style", "textStyle"];
4583
4603
 
4584
- var _templateObject$O, _templateObject2$v, _templateObject3$h, _templateObject4$f, _templateObject5$d, _templateObject6$c;
4604
+ var _templateObject$O, _templateObject2$A, _templateObject3$h, _templateObject4$f, _templateObject5$d, _templateObject6$c;
4585
4605
  var propTypes$Y = {
4586
4606
  children: PropTypes.node.isRequired,
4587
4607
  onPress: PropTypes.func,
@@ -4594,7 +4614,7 @@ var propTypes$Y = {
4594
4614
  };
4595
4615
  var styles$N = StyleSheet.create({
4596
4616
  '.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 "]))),
4597
- '.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 "]))),
4617
+ '.dropdown-item-text': css(_templateObject2$A || (_templateObject2$A = _taggedTemplateLiteral(["\n font-weight: $font-weight-normal;\n color: $dropdown-link-color;\n // text-align: inherit;\n text-decoration: none; // if($link-decoration == none, null, none);\n // white-space: nowrap;\n\n &:hover {\n color: $dropdown-link-hover-color;\n text-decoration: none; // if($link-hover-decoration == underline, none, null);\n }\n &:focus {\n color: $dropdown-link-hover-color;\n text-decoration: none; // if($link-hover-decoration == underline, none, null);\n }\n "]))),
4598
4618
  '.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 "]))),
4599
4619
  '.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 "]))),
4600
4620
  '.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 "]))),
@@ -4628,27 +4648,35 @@ var DropdownItem = function DropdownItem(props) {
4628
4648
  DropdownItem.displayName = 'DropdownItem';
4629
4649
  DropdownItem.propTypes = propTypes$Y;
4630
4650
 
4631
- var _excluded$Y = ["children", "style"];
4651
+ var _excluded$Y = ["children", "style", "textStyle"];
4632
4652
 
4633
- var _templateObject$N;
4653
+ var _templateObject$N, _templateObject2$z;
4634
4654
  var propTypes$X = {
4635
4655
  children: PropTypes.node.isRequired,
4636
4656
  // eslint-disable-next-line react/forbid-prop-types
4637
- style: PropTypes.any
4657
+ style: PropTypes.any,
4658
+ // eslint-disable-next-line react/forbid-prop-types
4659
+ textStyle: PropTypes.any
4638
4660
  };
4639
4661
  var styles$M = StyleSheet.create({
4640
- '.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 "])))
4662
+ '.dropdown-item-text': css(_templateObject$N || (_templateObject$N = _taggedTemplateLiteral(["\n // display: block;\n padding: $dropdown-item-padding-y $dropdown-item-padding-x;\n "]))),
4663
+ '.dropdown-item-text-text': css(_templateObject2$z || (_templateObject2$z = _taggedTemplateLiteral(["\n color: $dropdown-link-color;\n "])))
4641
4664
  });
4642
4665
  var DropdownItemText = /*#__PURE__*/React.forwardRef(function (props, ref) {
4643
4666
  var children = props.children,
4644
4667
  style = props.style,
4668
+ textStyle = props.textStyle,
4645
4669
  elementProps = _objectWithoutProperties(props, _excluded$Y);
4646
4670
 
4647
4671
  var classes = getStyles(styles$M, ['.dropdown-item-text']);
4648
- return /*#__PURE__*/React.createElement(Text, _extends({}, elementProps, {
4672
+ var textClasses = getStyles(styles$M, ['.dropdown-item-text-text']); // composite component
4673
+
4674
+ return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
4649
4675
  ref: ref,
4650
4676
  style: [classes, style]
4651
- }), children);
4677
+ }), /*#__PURE__*/React.createElement(Text, {
4678
+ style: [textClasses, textStyle]
4679
+ }, children));
4652
4680
  });
4653
4681
  DropdownItemText.displayName = 'DropdownItemText';
4654
4682
  DropdownItemText.propTypes = propTypes$X;
@@ -4826,27 +4854,35 @@ var Feedback = /*#__PURE__*/React.forwardRef(function (props, ref) {
4826
4854
  Feedback.displayName = 'Feedback';
4827
4855
  Feedback.propTypes = propTypes$T;
4828
4856
 
4829
- var _excluded$S = ["children", "style"];
4857
+ var _excluded$S = ["children", "style", "textStyle"];
4830
4858
 
4831
- var _templateObject$I;
4859
+ var _templateObject$I, _templateObject2$y;
4832
4860
  var propTypes$S = {
4833
4861
  children: PropTypes.node.isRequired,
4834
4862
  // eslint-disable-next-line react/forbid-prop-types
4835
- style: PropTypes.any
4863
+ style: PropTypes.any,
4864
+ // eslint-disable-next-line react/forbid-prop-types
4865
+ textStyle: PropTypes.any
4836
4866
  };
4837
4867
  var styles$H = StyleSheet.create({
4838
- '.form-text': css(_templateObject$I || (_templateObject$I = _taggedTemplateLiteral(["\n margin-top: $form-text-margin-top;\n font-size: $form-text-font-size;\n font-style: $form-text-font-style;\n font-weight: $form-text-font-weight;\n color: $form-text-color;\n "])))
4868
+ '.form-text': css(_templateObject$I || (_templateObject$I = _taggedTemplateLiteral(["\n margin-top: $form-text-margin-top;\n "]))),
4869
+ '.form-text-text': css(_templateObject2$y || (_templateObject2$y = _taggedTemplateLiteral(["\n font-size: $form-text-font-size;\n font-style: $form-text-font-style;\n font-weight: $form-text-font-weight;\n color: $form-text-color;\n "])))
4839
4870
  });
4840
4871
  var FormText = /*#__PURE__*/React.forwardRef(function (props, ref) {
4841
4872
  var children = props.children,
4842
4873
  style = props.style,
4874
+ textStyle = props.textStyle,
4843
4875
  elementProps = _objectWithoutProperties(props, _excluded$S);
4844
4876
 
4845
4877
  var classes = getStyles(styles$H, ['.form-text']);
4846
- return /*#__PURE__*/React.createElement(Text, _extends({}, elementProps, {
4878
+ var textClasses = getStyles(styles$H, ['.form-text-text']); // composite component
4879
+
4880
+ return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
4847
4881
  ref: ref,
4848
4882
  style: [classes, style]
4849
- }), children);
4883
+ }), /*#__PURE__*/React.createElement(Text, {
4884
+ style: [textClasses, textStyle]
4885
+ }, children));
4850
4886
  });
4851
4887
  FormText.displayName = 'FormText';
4852
4888
  FormText.propTypes = propTypes$S;
@@ -4901,7 +4937,7 @@ TextInput.propTypes = propTypes$R;
4901
4937
 
4902
4938
  var _excluded$Q = ["size", "placeholderTextColor", "multiline", "disabled", "valid", "invalid", "style"];
4903
4939
 
4904
- var _templateObject$H, _templateObject2$u, _templateObject3$g, _templateObject4$e, _templateObject5$c, _templateObject6$b, _templateObject7$8, _templateObject8$7;
4940
+ var _templateObject$H, _templateObject2$x, _templateObject3$g, _templateObject4$e, _templateObject5$c, _templateObject6$b, _templateObject7$8, _templateObject8$7;
4905
4941
  var propTypes$Q = {
4906
4942
  size: PropTypes.oneOf(['sm', 'lg']),
4907
4943
  placeholderTextColor: PropTypes.string,
@@ -4914,9 +4950,9 @@ var propTypes$Q = {
4914
4950
  };
4915
4951
  var styles$G = StyleSheet.create(_objectSpread2({
4916
4952
  '.form-control': css(_templateObject$H || (_templateObject$H = _taggedTemplateLiteral(["\n // display: block;\n width: 100%;\n padding: $input-padding-y $input-padding-x;\n font-family: $input-font-family;\n font-size: $input-font-size;\n font-weight: $input-font-weight;\n line-height: $input-font-size * $input-line-height;\n color: $input-color;\n background-color: $input-bg;\n // background-clip: padding-box;\n border: $input-border-width solid $input-border-color;\n @include platform(web) {\n appearance: none; // Fix appearance for date inputs in Safari\n }\n\n // Note: This has no effect on <select>s in some browsers, due to the limited stylability of \"<select>\"s in CSS.\n border-radius: $input-border-radius;\n\n // @include box-shadow($input-box-shadow);\n // @include transition($input-transition);\n\n // Customize the \":focus\" state to imitate native WebKit styles.\n &:focus {\n color: $input-focus-color;\n background-color: $input-focus-bg;\n border-color: $input-focus-border-color;\n @include platform(web) {\n outline-width: 0; // outline: 0;\n }\n /* @if $enable-shadows {\n @include box-shadow($input-box-shadow, $input-focus-box-shadow);\n } @else {\n // Avoid using mixin so we can pass custom focus shadow properly\n box-shadow: $input-focus-box-shadow;\n } */\n }\n "]))),
4917
- '.form-control-disabled': css(_templateObject2$u || (_templateObject2$u = _taggedTemplateLiteral(["\n background-color: $input-disabled-bg;\n border-color: $input-disabled-border-color;\n // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.\n opacity: 1;\n "]))),
4918
- '.form-control-sm': css(_templateObject3$g || (_templateObject3$g = _taggedTemplateLiteral(["\n min-height: $input-height-sm;\n padding: $input-padding-y-sm $input-padding-x-sm;\n font-size: $input-font-size-sm;\n border-radius: $input-border-radius-sm;\n "]))),
4919
- '.form-control-lg': css(_templateObject4$e || (_templateObject4$e = _taggedTemplateLiteral(["\n min-height: $input-height-lg;\n padding: $input-padding-y-lg $input-padding-x-lg;\n font-size: $input-font-size-lg;\n border-radius: $input-border-radius-lg;\n "]))),
4953
+ '.form-control-disabled': css(_templateObject2$x || (_templateObject2$x = _taggedTemplateLiteral(["\n background-color: $input-disabled-bg;\n border-color: $input-disabled-border-color;\n // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.\n opacity: 1;\n "]))),
4954
+ '.form-control-sm': css(_templateObject3$g || (_templateObject3$g = _taggedTemplateLiteral(["\n min-height: $input-height-sm;\n padding: $input-padding-y-sm $input-padding-x-sm;\n font-size: $input-font-size-sm;\n line-height: $input-font-size-sm * $line-height-base; // added for bootstrap-rn\n border-radius: $input-border-radius-sm;\n "]))),
4955
+ '.form-control-lg': css(_templateObject4$e || (_templateObject4$e = _taggedTemplateLiteral(["\n min-height: $input-height-lg;\n padding: $input-padding-y-lg $input-padding-x-lg;\n font-size: $input-font-size-lg;\n line-height: $input-font-size-lg * $line-height-base; // added for bootstrap-rn\n border-radius: $input-border-radius-lg;\n "]))),
4920
4956
  '.form-control-multiline': css(_templateObject5$c || (_templateObject5$c = _taggedTemplateLiteral(["\n text-align-vertical: top; // added for bootstrap-rn\n min-height: $input-height;\n\n @include platform(ios) {\n min-height: $input-height-sm + 8rem; // added for bootstrap-rn\n }\n "]))),
4921
4957
  '.form-control-multiline-sm': css(_templateObject6$b || (_templateObject6$b = _taggedTemplateLiteral(["\n min-height: $input-height-sm;\n\n @include platform(ios) {\n // TODO: Adjust ios height to sm size\n min-height: $input-height-sm + 8rem; // added for bootstrap-rn\n }\n "]))),
4922
4958
  '.form-control-multiline-lg': css(_templateObject7$8 || (_templateObject7$8 = _taggedTemplateLiteral(["\n min-height: $input-height-lg;\n\n @include platform(ios) {\n // TODO: Adjust ios height to lg size\n min-height: $input-height-sm + 8rem; // added for bootstrap-rn\n }\n "])))
@@ -4961,7 +4997,7 @@ Input.displayName = 'Input';
4961
4997
  Input.propTypes = propTypes$Q;
4962
4998
 
4963
4999
  var PLACEMENTS$1 = ['top', 'bottom', 'left', 'right'];
4964
- var TRIGGERS = ['click', 'hover', 'focus', 'manual', 'click hover', 'hover click', 'hover focus', 'focus hover', 'click focus', 'focus click'];
5000
+ var TRIGGERS = ['press', 'hover', 'focus', 'manual', 'press hover', 'hover press', 'hover focus', 'focus hover', 'press focus', 'focus press'];
4965
5001
  var TriggerPropTypes = {
4966
5002
  trigger: PropTypes.oneOf(TRIGGERS),
4967
5003
  placement: PropTypes.oneOf(PLACEMENTS$1),
@@ -5008,7 +5044,9 @@ function useTrigger(rawTrigger, props, elementProps, ref) {
5008
5044
  accessibilityDescribedBy: identifier
5009
5045
  })), {}, {
5010
5046
  onPress: function onPress(event) {
5011
- if (trigger.includes('click')) {
5047
+ var handleHoverAsPress = (Platform.OS === 'android' || Platform.OS === 'ios') && trigger.includes('hover');
5048
+
5049
+ if (trigger.includes('press') || handleHoverAsPress) {
5012
5050
  setVisible(function (value) {
5013
5051
  return !value;
5014
5052
  });
@@ -5085,14 +5123,14 @@ PopoverContext.displayName = 'PopoverContext';
5085
5123
 
5086
5124
  var _excluded$P = ["style"];
5087
5125
 
5088
- 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;
5126
+ var _templateObject$G, _templateObject2$w, _templateObject3$f, _templateObject4$d, _templateObject5$b, _templateObject6$a, _templateObject7$7, _templateObject8$6, _templateObject9$5, _templateObject10$5, _templateObject11$4, _templateObject12$3, _templateObject13$3, _templateObject14$2, _templateObject15$1;
5089
5127
  var propTypes$P = {
5090
5128
  // eslint-disable-next-line react/forbid-prop-types
5091
5129
  style: PropTypes.any
5092
5130
  };
5093
5131
  var styles$F = StyleSheet.create({
5094
5132
  '.popover-arrow': css(_templateObject$G || (_templateObject$G = _taggedTemplateLiteral(["\n position: absolute;\n // display: block;\n width: $popover-arrow-width;\n height: $popover-arrow-height;\n "]))),
5095
- '.popover-arrow::before': css(_templateObject2$t || (_templateObject2$t = _taggedTemplateLiteral(["\n position: absolute;\n // display: block;\n // content: \"\";\n border-top-color: transparent;\n border-right-color: transparent;\n border-left-color: transparent;\n border-bottom-color: transparent;\n border-style: solid;\n "]))),
5133
+ '.popover-arrow::before': css(_templateObject2$w || (_templateObject2$w = _taggedTemplateLiteral(["\n position: absolute;\n // display: block;\n // content: \"\";\n border-top-color: transparent;\n border-right-color: transparent;\n border-left-color: transparent;\n border-bottom-color: transparent;\n border-style: solid;\n "]))),
5096
5134
  '.popover-arrow::after': css(_templateObject3$f || (_templateObject3$f = _taggedTemplateLiteral(["\n position: absolute;\n // display: block;\n // content: \"\";\n border-top-color: transparent;\n border-right-color: transparent;\n border-left-color: transparent;\n border-bottom-color: transparent;\n border-style: solid;\n "]))),
5097
5135
  '.bs-popover-top .popover-arrow': css(_templateObject4$d || (_templateObject4$d = _taggedTemplateLiteral(["\n bottom: ", ";\n "])), subtract(function (t) {
5098
5136
  return "-".concat(t['popover-arrow-height']);
@@ -5147,35 +5185,43 @@ var PopoverArrow = /*#__PURE__*/React.forwardRef(function (props, ref) {
5147
5185
  PopoverArrow.displayName = 'PopoverArrow';
5148
5186
  PopoverArrow.propTypes = propTypes$P;
5149
5187
 
5150
- var _excluded$O = ["children", "style"];
5188
+ var _excluded$O = ["children", "style", "textStyle"];
5151
5189
 
5152
- var _templateObject$F;
5190
+ var _templateObject$F, _templateObject2$v;
5153
5191
  var propTypes$O = {
5154
5192
  children: PropTypes.node.isRequired,
5155
5193
  // eslint-disable-next-line react/forbid-prop-types
5156
- style: PropTypes.any
5194
+ style: PropTypes.any,
5195
+ // eslint-disable-next-line react/forbid-prop-types
5196
+ textStyle: PropTypes.any
5157
5197
  };
5158
5198
  var styles$E = StyleSheet.create({
5159
- '.popover-header': css(_templateObject$F || (_templateObject$F = _taggedTemplateLiteral(["\n padding: $popover-header-padding-y $popover-header-padding-x;\n margin-bottom: 0; // Reset the default from Reboot\n font-size: $font-size-base;\n line-height: $font-size-base * $headings-line-height; // added for bootstrap-rn\n color: $popover-header-color;\n background-color: $popover-header-bg;\n border-bottom-width: $popover-border-width;\n border-style: solid;\n border-color: $popover-border-color;\n border-top-left-radius: $popover-border-radius;\n border-top-right-radius: $popover-border-radius;\n "])))
5199
+ '.popover-header': css(_templateObject$F || (_templateObject$F = _taggedTemplateLiteral(["\n padding: $popover-header-padding-y $popover-header-padding-x;\n background-color: $popover-header-bg;\n border-bottom-width: $popover-border-width;\n border-style: solid;\n border-color: $popover-border-color;\n border-top-left-radius: $popover-border-radius;\n border-top-right-radius: $popover-border-radius;\n "]))),
5200
+ '.popover-header-text': css(_templateObject2$v || (_templateObject2$v = _taggedTemplateLiteral(["\n margin-bottom: 0; // Reset the default from Reboot\n font-size: $font-size-base;\n line-height: $font-size-base * $headings-line-height; // added for bootstrap-rn\n color: $popover-header-color;\n "])))
5160
5201
  });
5161
5202
  var PopoverHeader = /*#__PURE__*/React.forwardRef(function (props, ref) {
5162
5203
  var children = props.children,
5163
5204
  style = props.style,
5205
+ textStyle = props.textStyle,
5164
5206
  elementProps = _objectWithoutProperties(props, _excluded$O);
5165
5207
 
5166
5208
  var classes = getStyles(styles$E, ['.popover-header']);
5167
- return /*#__PURE__*/React.createElement(Heading$1, _extends({}, elementProps, {
5209
+ var textClasses = getStyles(styles$E, ['.popover-header-text']); // composite component
5210
+
5211
+ return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
5168
5212
  ref: ref,
5169
- size: 3,
5170
5213
  style: [classes, style]
5171
- }), children);
5214
+ }), /*#__PURE__*/React.createElement(Heading$1, {
5215
+ size: 3,
5216
+ style: [textClasses, textStyle]
5217
+ }, children));
5172
5218
  });
5173
5219
  PopoverHeader.displayName = 'PopoverHeader';
5174
5220
  PopoverHeader.propTypes = propTypes$O;
5175
5221
 
5176
5222
  var _excluded$N = ["children", "style", "textStyle"];
5177
5223
 
5178
- var _templateObject$E, _templateObject2$s;
5224
+ var _templateObject$E, _templateObject2$u;
5179
5225
  var propTypes$N = {
5180
5226
  children: PropTypes.node.isRequired,
5181
5227
  // eslint-disable-next-line react/forbid-prop-types
@@ -5185,7 +5231,7 @@ var propTypes$N = {
5185
5231
  };
5186
5232
  var styles$D = StyleSheet.create({
5187
5233
  '.popover-body': css(_templateObject$E || (_templateObject$E = _taggedTemplateLiteral(["\n padding: $popover-body-padding-y $popover-body-padding-x;\n "]))),
5188
- '.popover-body-text': css(_templateObject2$s || (_templateObject2$s = _taggedTemplateLiteral(["\n color: $popover-body-color;\n "])))
5234
+ '.popover-body-text': css(_templateObject2$u || (_templateObject2$u = _taggedTemplateLiteral(["\n color: $popover-body-color;\n "])))
5189
5235
  });
5190
5236
  var PopoverBody = /*#__PURE__*/React.forwardRef(function (props, ref) {
5191
5237
  var children = props.children,
@@ -5206,7 +5252,7 @@ PopoverBody.propTypes = propTypes$N;
5206
5252
 
5207
5253
  var _excluded$M = ["children", "placement", "popper", "style", "textStyle", "arrowStyle"];
5208
5254
 
5209
- var _templateObject$D, _templateObject2$r;
5255
+ var _templateObject$D, _templateObject2$t;
5210
5256
  var propTypes$M = {
5211
5257
  children: PropTypes.node.isRequired,
5212
5258
  placement: PropTypes.string,
@@ -5220,7 +5266,7 @@ var propTypes$M = {
5220
5266
  };
5221
5267
  var styles$C = StyleSheet.create({
5222
5268
  '.popover': css(_templateObject$D || (_templateObject$D = _taggedTemplateLiteral(["\n position: absolute;\n // top: 0;\n // left: 0 #{\"/* rtl:ignore */\"};\n z-index: $zindex-popover;\n // display: block;\n max-width: $popover-max-width;\n background-color: $popover-bg;\n // background-clip: padding-box;\n border: $popover-border-width solid $popover-border-color;\n border-radius: $popover-border-radius;\n // @include box-shadow($popover-box-shadow);\n "]))),
5223
- '.popover-text': css(_templateObject2$r || (_templateObject2$r = _taggedTemplateLiteral(["\n // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.\n // So reset our font and text properties to avoid inheriting weird values.\n // @include reset-text();\n font-size: $popover-font-size;\n // Allow breaking very long words so they don't overflow the popover's bounds\n // word-wrap: break-word;\n "])))
5269
+ '.popover-text': css(_templateObject2$t || (_templateObject2$t = _taggedTemplateLiteral(["\n // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.\n // So reset our font and text properties to avoid inheriting weird values.\n // @include reset-text();\n font-size: $popover-font-size;\n // Allow breaking very long words so they don't overflow the popover's bounds\n // word-wrap: break-word;\n "])))
5224
5270
  });
5225
5271
  var Popover = /*#__PURE__*/React.forwardRef(function (props, ref) {
5226
5272
  var children = props.children,
@@ -5256,12 +5302,13 @@ Popover.Arrow = PopoverArrow;
5256
5302
  Popover.Header = PopoverHeader;
5257
5303
  Popover.Body = PopoverBody;
5258
5304
 
5259
- var _excluded$L = ["title", "content", "trigger", "placement"],
5305
+ var _excluded$L = ["title", "content", "autoClose", "trigger", "placement"],
5260
5306
  _excluded2$1 = ["popover"];
5261
5307
  var propTypes$L = {
5262
5308
  popover: PropTypes.shape(_objectSpread2({
5263
5309
  title: PropTypes.node,
5264
- content: PropTypes.node.isRequired
5310
+ content: PropTypes.node.isRequired,
5311
+ autoClose: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['inside', 'outside'])])
5265
5312
  }, TriggerPropTypes))
5266
5313
  };
5267
5314
  function injectPopover(Target) {
@@ -5270,8 +5317,10 @@ function injectPopover(Target) {
5270
5317
  var _props$popover = props.popover,
5271
5318
  title = _props$popover.title,
5272
5319
  content = _props$popover.content,
5320
+ _props$popover$autoCl = _props$popover.autoClose,
5321
+ autoClose = _props$popover$autoCl === void 0 ? 'outside' : _props$popover$autoCl,
5273
5322
  _props$popover$trigge = _props$popover.trigger,
5274
- trigger = _props$popover$trigge === void 0 ? 'click' : _props$popover$trigge,
5323
+ trigger = _props$popover$trigge === void 0 ? 'press' : _props$popover$trigge,
5275
5324
  _props$popover$placem = _props$popover.placement,
5276
5325
  placement = _props$popover$placem === void 0 ? 'right' : _props$popover$placem,
5277
5326
  tooltipProps = _objectWithoutProperties(_props$popover, _excluded$L),
@@ -5281,6 +5330,7 @@ function injectPopover(Target) {
5281
5330
 
5282
5331
  var _useTrigger = useTrigger(trigger, tooltipProps, elementProps, ref),
5283
5332
  visible = _useTrigger.visible,
5333
+ setVisible = _useTrigger.setVisible,
5284
5334
  targetProps = _useTrigger.targetProps,
5285
5335
  targetRef = _useTrigger.targetRef,
5286
5336
  templateProps = _useTrigger.templateProps;
@@ -5293,7 +5343,14 @@ function injectPopover(Target) {
5293
5343
  targetRef: targetRef,
5294
5344
  visible: visible
5295
5345
  }, function (overlay, overlayRef) {
5296
- return /*#__PURE__*/React.createElement(Popover, _extends({}, templateProps, {
5346
+ return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BackdropHandler, {
5347
+ toggleRef: targetRef,
5348
+ dialogRef: overlayRef,
5349
+ onClose: function onClose() {
5350
+ setVisible(false);
5351
+ },
5352
+ autoClose: autoClose
5353
+ }), /*#__PURE__*/React.createElement(Popover, _extends({}, templateProps, {
5297
5354
  ref: overlayRef,
5298
5355
  placement: overlay.placement,
5299
5356
  popper: overlay.rendered,
@@ -5302,7 +5359,7 @@ function injectPopover(Target) {
5302
5359
  opacity: overlay.rendered ? 1 : 0
5303
5360
  }],
5304
5361
  arrowStyle: overlay.arrowProps.style
5305
- }), /*#__PURE__*/React.createElement(Popover.Arrow, null), title && /*#__PURE__*/React.createElement(Popover.Header, null, title), /*#__PURE__*/React.createElement(Popover.Body, null, content));
5362
+ }), /*#__PURE__*/React.createElement(Popover.Arrow, null), title && /*#__PURE__*/React.createElement(Popover.Header, null, title), /*#__PURE__*/React.createElement(Popover.Body, null, content)));
5306
5363
  })));
5307
5364
  });
5308
5365
  OverlayPopover.displayName = 'Overlay(Popover)';
@@ -5315,14 +5372,14 @@ TooltipContext.displayName = 'TooltipContext';
5315
5372
 
5316
5373
  var _excluded$K = ["style"];
5317
5374
 
5318
- var _templateObject$C, _templateObject2$q, _templateObject3$e, _templateObject4$c, _templateObject5$a, _templateObject6$9, _templateObject7$6, _templateObject8$5, _templateObject9$4, _templateObject10$4;
5375
+ var _templateObject$C, _templateObject2$s, _templateObject3$e, _templateObject4$c, _templateObject5$a, _templateObject6$9, _templateObject7$6, _templateObject8$5, _templateObject9$4, _templateObject10$4;
5319
5376
  var propTypes$K = {
5320
5377
  // eslint-disable-next-line react/forbid-prop-types
5321
5378
  style: PropTypes.any
5322
5379
  };
5323
5380
  var styles$B = StyleSheet.create({
5324
5381
  '.tooltip-arrow': css(_templateObject$C || (_templateObject$C = _taggedTemplateLiteral(["\n position: absolute;\n // display: block;\n width: $tooltip-arrow-width;\n height: $tooltip-arrow-height;\n "]))),
5325
- '.tooltip-arrow::before': css(_templateObject2$q || (_templateObject2$q = _taggedTemplateLiteral(["\n position: absolute;\n // content: \"\";\n border-top-color: transparent;\n border-right-color: transparent;\n border-left-color: transparent;\n border-bottom-color: transparent;\n border-style: solid;\n "]))),
5382
+ '.tooltip-arrow::before': css(_templateObject2$s || (_templateObject2$s = _taggedTemplateLiteral(["\n position: absolute;\n // content: \"\";\n border-top-color: transparent;\n border-right-color: transparent;\n border-left-color: transparent;\n border-bottom-color: transparent;\n border-style: solid;\n "]))),
5326
5383
  '.bs-tooltip-top .tooltip-arrow': css(_templateObject3$e || (_templateObject3$e = _taggedTemplateLiteral(["\n bottom: 0;\n "]))),
5327
5384
  '.bs-tooltip-top .tooltip-arrow::before': css(_templateObject4$c || (_templateObject4$c = _taggedTemplateLiteral(["\n top: -1px;\n border-top-width: $tooltip-arrow-height;\n border-right-width: $tooltip-arrow-width * 0.5;\n border-left-width: $tooltip-arrow-width * 0.5;\n border-bottom-width: 0;\n border-top-color: $tooltip-arrow-color;\n "]))),
5328
5385
  '.bs-tooltip-end .tooltip-arrow': css(_templateObject5$a || (_templateObject5$a = _taggedTemplateLiteral(["\n left: 0;\n width: $tooltip-arrow-height;\n height: $tooltip-arrow-width;\n "]))),
@@ -5353,34 +5410,42 @@ var TooltipArrow = /*#__PURE__*/React.forwardRef(function (props, ref) {
5353
5410
  TooltipArrow.displayName = 'TooltipArrow';
5354
5411
  TooltipArrow.propTypes = propTypes$K;
5355
5412
 
5356
- var _excluded$J = ["children", "style"];
5413
+ var _excluded$J = ["children", "style", "textStyle"];
5357
5414
 
5358
- var _templateObject$B;
5415
+ var _templateObject$B, _templateObject2$r;
5359
5416
  var propTypes$J = {
5360
5417
  children: PropTypes.node.isRequired,
5361
5418
  // eslint-disable-next-line react/forbid-prop-types
5362
- style: PropTypes.any
5419
+ style: PropTypes.any,
5420
+ // eslint-disable-next-line react/forbid-prop-types
5421
+ textStyle: PropTypes.any
5363
5422
  };
5364
5423
  var styles$A = StyleSheet.create({
5365
- '.tooltip-inner': css(_templateObject$B || (_templateObject$B = _taggedTemplateLiteral(["\n max-width: $tooltip-max-width;\n padding: $tooltip-padding-y $tooltip-padding-x;\n color: $tooltip-color;\n text-align: center;\n background-color: $tooltip-bg;\n border-radius: $tooltip-border-radius;\n "])))
5424
+ '.tooltip-inner': css(_templateObject$B || (_templateObject$B = _taggedTemplateLiteral(["\n max-width: $tooltip-max-width;\n padding: $tooltip-padding-y $tooltip-padding-x;\n background-color: $tooltip-bg;\n border-radius: $tooltip-border-radius;\n "]))),
5425
+ '.tooltip-inner-text': css(_templateObject2$r || (_templateObject2$r = _taggedTemplateLiteral(["\n color: $tooltip-color;\n text-align: center;\n "])))
5366
5426
  });
5367
5427
  var TooltipInner = /*#__PURE__*/React.forwardRef(function (props, ref) {
5368
5428
  var children = props.children,
5369
5429
  style = props.style,
5430
+ textStyle = props.textStyle,
5370
5431
  elementProps = _objectWithoutProperties(props, _excluded$J);
5371
5432
 
5372
5433
  var classes = getStyles(styles$A, ['.tooltip-inner']);
5373
- return /*#__PURE__*/React.createElement(Text, _extends({}, elementProps, {
5434
+ var textClasses = getStyles(styles$A, ['.tooltip-inner-text']); // composite component
5435
+
5436
+ return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
5374
5437
  ref: ref,
5375
5438
  style: [classes, style]
5376
- }), children);
5439
+ }), /*#__PURE__*/React.createElement(Text, {
5440
+ style: [textClasses, textStyle]
5441
+ }, children));
5377
5442
  });
5378
5443
  TooltipInner.displayName = 'TooltipInner';
5379
5444
  TooltipInner.propTypes = propTypes$J;
5380
5445
 
5381
5446
  var _excluded$I = ["children", "placement", "popper", "style", "textStyle", "arrowStyle"];
5382
5447
 
5383
- var _templateObject$A, _templateObject2$p, _templateObject3$d, _templateObject4$b, _templateObject5$9, _templateObject6$8;
5448
+ var _templateObject$A, _templateObject2$q, _templateObject3$d, _templateObject4$b, _templateObject5$9, _templateObject6$8;
5384
5449
  var propTypes$I = {
5385
5450
  children: PropTypes.node.isRequired,
5386
5451
  placement: PropTypes.string,
@@ -5394,7 +5459,7 @@ var propTypes$I = {
5394
5459
  };
5395
5460
  var styles$z = StyleSheet.create({
5396
5461
  '.tooltip': css(_templateObject$A || (_templateObject$A = _taggedTemplateLiteral(["\n position: absolute;\n z-index: $zindex-tooltip;\n // display: block;\n margin: $tooltip-margin;\n // opacity: 0;\n "]))),
5397
- '.tooltip-text': css(_templateObject2$p || (_templateObject2$p = _taggedTemplateLiteral(["\n // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.\n // So reset our font and text properties to avoid inheriting weird values.\n // @include reset-text();\n font-size: $tooltip-font-size;\n // Allow breaking very long words so they don't overflow the tooltip's bounds\n // word-wrap: break-word;\n "]))),
5462
+ '.tooltip-text': css(_templateObject2$q || (_templateObject2$q = _taggedTemplateLiteral(["\n // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.\n // So reset our font and text properties to avoid inheriting weird values.\n // @include reset-text();\n font-size: $tooltip-font-size;\n // Allow breaking very long words so they don't overflow the tooltip's bounds\n // word-wrap: break-word;\n "]))),
5398
5463
  '.bs-tooltip-top': css(_templateObject3$d || (_templateObject3$d = _taggedTemplateLiteral(["\n padding: $tooltip-arrow-height 0;\n "]))),
5399
5464
  '.bs-tooltip-end': css(_templateObject4$b || (_templateObject4$b = _taggedTemplateLiteral(["\n padding: 0 $tooltip-arrow-height;\n "]))),
5400
5465
  '.bs-tooltip-bottom': css(_templateObject5$9 || (_templateObject5$9 = _taggedTemplateLiteral(["\n padding: $tooltip-arrow-height 0;\n "]))),
@@ -5434,11 +5499,12 @@ Tooltip.propTypes = propTypes$I;
5434
5499
  Tooltip.Arrow = TooltipArrow;
5435
5500
  Tooltip.Inner = TooltipInner;
5436
5501
 
5437
- var _excluded$H = ["title", "trigger", "placement"],
5502
+ var _excluded$H = ["title", "autoClose", "trigger", "placement"],
5438
5503
  _excluded2 = ["tooltip"];
5439
5504
  var propTypes$H = {
5440
5505
  tooltip: PropTypes.shape(_objectSpread2({
5441
- title: PropTypes.node.isRequired
5506
+ title: PropTypes.node.isRequired,
5507
+ autoClose: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['inside', 'outside'])])
5442
5508
  }, TriggerPropTypes))
5443
5509
  };
5444
5510
  function injectTooltip(Target) {
@@ -5446,6 +5512,8 @@ function injectTooltip(Target) {
5446
5512
  /* eslint-disable react/prop-types */
5447
5513
  var _props$tooltip = props.tooltip,
5448
5514
  title = _props$tooltip.title,
5515
+ _props$tooltip$autoCl = _props$tooltip.autoClose,
5516
+ autoClose = _props$tooltip$autoCl === void 0 ? 'outside' : _props$tooltip$autoCl,
5449
5517
  _props$tooltip$trigge = _props$tooltip.trigger,
5450
5518
  trigger = _props$tooltip$trigge === void 0 ? 'hover focus' : _props$tooltip$trigge,
5451
5519
  _props$tooltip$placem = _props$tooltip.placement,
@@ -5457,6 +5525,7 @@ function injectTooltip(Target) {
5457
5525
 
5458
5526
  var _useTrigger = useTrigger(trigger, tooltipProps, elementProps, ref),
5459
5527
  visible = _useTrigger.visible,
5528
+ setVisible = _useTrigger.setVisible,
5460
5529
  targetProps = _useTrigger.targetProps,
5461
5530
  targetRef = _useTrigger.targetRef,
5462
5531
  templateProps = _useTrigger.templateProps;
@@ -5468,7 +5537,14 @@ function injectTooltip(Target) {
5468
5537
  arrowOffset: offset,
5469
5538
  visible: visible
5470
5539
  }, function (overlay, overlayRef) {
5471
- return /*#__PURE__*/React.createElement(Tooltip, _extends({}, templateProps, {
5540
+ return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BackdropHandler, {
5541
+ toggleRef: targetRef,
5542
+ dialogRef: overlayRef,
5543
+ onClose: function onClose() {
5544
+ setVisible(false);
5545
+ },
5546
+ autoClose: autoClose
5547
+ }), /*#__PURE__*/React.createElement(Tooltip, _extends({}, templateProps, {
5472
5548
  ref: overlayRef,
5473
5549
  placement: overlay.placement,
5474
5550
  popper: overlay.rendered,
@@ -5477,7 +5553,7 @@ function injectTooltip(Target) {
5477
5553
  opacity: overlay.rendered ? 1 : 0
5478
5554
  }],
5479
5555
  arrowStyle: overlay.arrowProps.style
5480
- }), /*#__PURE__*/React.createElement(Tooltip.Arrow, null), /*#__PURE__*/React.createElement(Tooltip.Inner, null, title));
5556
+ }), /*#__PURE__*/React.createElement(Tooltip.Arrow, null), /*#__PURE__*/React.createElement(Tooltip.Inner, null, title)));
5481
5557
  })));
5482
5558
  });
5483
5559
  OverlayTooltip.displayName = 'Overlay(Tooltip)';
@@ -5533,27 +5609,35 @@ var ImageBackground = /*#__PURE__*/React.forwardRef(function (props, ref) {
5533
5609
  ImageBackground.displayName = 'ImageBackground';
5534
5610
  ImageBackground.propTypes = propTypes$F;
5535
5611
 
5536
- var _excluded$E = ["children", "style"];
5612
+ var _excluded$E = ["children", "style", "textStyle"];
5537
5613
 
5538
- var _templateObject$z;
5614
+ var _templateObject$z, _templateObject2$p;
5539
5615
  var propTypes$E = {
5540
5616
  children: PropTypes.node.isRequired,
5541
5617
  // eslint-disable-next-line react/forbid-prop-types
5542
- style: PropTypes.any
5618
+ style: PropTypes.any,
5619
+ // eslint-disable-next-line react/forbid-prop-types
5620
+ textStyle: PropTypes.any
5543
5621
  };
5544
5622
  var styles$y = StyleSheet.create({
5545
- '.form-label': css(_templateObject$z || (_templateObject$z = _taggedTemplateLiteral(["\n margin-bottom: $form-label-margin-bottom;\n font-size: $form-label-font-size;\n font-style: $form-label-font-style;\n font-weight: $form-label-font-weight;\n color: $form-label-color;\n "])))
5623
+ '.form-label': css(_templateObject$z || (_templateObject$z = _taggedTemplateLiteral(["\n margin-bottom: $form-label-margin-bottom;\n "]))),
5624
+ '.form-label-text': css(_templateObject2$p || (_templateObject2$p = _taggedTemplateLiteral(["\n font-size: $form-label-font-size;\n font-style: $form-label-font-style;\n font-weight: $form-label-font-weight;\n color: $form-label-color;\n "])))
5546
5625
  });
5547
5626
  var Label = /*#__PURE__*/React.forwardRef(function (props, ref) {
5548
5627
  var children = props.children,
5549
5628
  style = props.style,
5629
+ textStyle = props.textStyle,
5550
5630
  elementProps = _objectWithoutProperties(props, _excluded$E);
5551
5631
 
5552
5632
  var classes = getStyles(styles$y, ['.form-label']);
5553
- return /*#__PURE__*/React.createElement(Text, _extends({}, elementProps, {
5633
+ var textClasses = getStyles(styles$y, ['.form-label-text']); // composite component
5634
+
5635
+ return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
5554
5636
  ref: ref,
5555
5637
  style: [classes, style]
5556
- }), children);
5638
+ }), /*#__PURE__*/React.createElement(Text, {
5639
+ style: [textClasses, textStyle]
5640
+ }, children));
5557
5641
  });
5558
5642
  Label.displayName = 'Label';
5559
5643
  Label.propTypes = propTypes$E;
@@ -6310,32 +6394,39 @@ Nav.propTypes = propTypes$s;
6310
6394
  Nav.Context = NavContext;
6311
6395
  Nav.Link = NavLink;
6312
6396
 
6313
- var _excluded$r = ["children", "style"];
6397
+ var _excluded$r = ["children", "style", "textStyle"];
6314
6398
 
6315
6399
  var _templateObject$n, _templateObject2$i, _templateObject3$7;
6316
6400
  var propTypes$r = {
6317
6401
  children: PropTypes.node.isRequired,
6318
6402
  // eslint-disable-next-line react/forbid-prop-types
6319
- style: PropTypes.any
6403
+ style: PropTypes.any,
6404
+ // eslint-disable-next-line react/forbid-prop-types
6405
+ textStyle: PropTypes.any
6320
6406
  };
6321
6407
  var styles$n = StyleSheet.create({
6322
6408
  '.navbar-text': css(_templateObject$n || (_templateObject$n = _taggedTemplateLiteral(["\n padding-top: $nav-link-padding-y;\n padding-bottom: $nav-link-padding-y;\n "]))),
6323
- '.navbar-light .navbar-text': css(_templateObject2$i || (_templateObject2$i = _taggedTemplateLiteral(["\n color: $navbar-light-color;\n "]))),
6324
- '.navbar-dark .navbar-text': css(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteral(["\n color: $navbar-dark-color;\n "])))
6409
+ '.navbar-light .navbar-text-text': css(_templateObject2$i || (_templateObject2$i = _taggedTemplateLiteral(["\n color: $navbar-light-color;\n "]))),
6410
+ '.navbar-dark .navbar-text-text': css(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteral(["\n color: $navbar-dark-color;\n "])))
6325
6411
  });
6326
6412
  var NavbarText = /*#__PURE__*/React.forwardRef(function (props, ref) {
6327
6413
  var children = props.children,
6328
6414
  style = props.style,
6415
+ textStyle = props.textStyle,
6329
6416
  elementProps = _objectWithoutProperties(props, _excluded$r);
6330
6417
 
6331
6418
  var _useForcedContext = useForcedContext(NavbarContext),
6332
6419
  variant = _useForcedContext.variant;
6333
6420
 
6334
- var classes = getStyles(styles$n, ['.navbar-text', ".navbar-".concat(variant, " .navbar-text")]);
6335
- return /*#__PURE__*/React.createElement(Text, _extends({}, elementProps, {
6421
+ var classes = getStyles(styles$n, ['.navbar-text']);
6422
+ var textClasses = getStyles(styles$n, [".navbar-".concat(variant, " .navbar-text-text")]); // composite component
6423
+
6424
+ return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
6336
6425
  ref: ref,
6337
6426
  style: [classes, style]
6338
- }), children);
6427
+ }), /*#__PURE__*/React.createElement(Text, {
6428
+ style: [textClasses, textStyle]
6429
+ }, children));
6339
6430
  });
6340
6431
  NavbarText.displayName = 'NavbarText';
6341
6432
  NavbarText.propTypes = propTypes$r;
@@ -7039,7 +7130,8 @@ var ProgressBar = /*#__PURE__*/React.forwardRef(function (props, ref) {
7039
7130
  max = _useForcedContext.max;
7040
7131
 
7041
7132
  var classes = getStyles(styles$b, ['.progress-bar']);
7042
- var textClasses = getStyles(styles$b, ['.progress-bar-text']);
7133
+ var textClasses = getStyles(styles$b, ['.progress-bar-text']); // composite component
7134
+
7043
7135
  return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
7044
7136
  ref: ref,
7045
7137
  accessibilityRole: "progressbar",
@@ -7048,9 +7140,10 @@ var ProgressBar = /*#__PURE__*/React.forwardRef(function (props, ref) {
7048
7140
  accessibilityValueMax: max,
7049
7141
  style: [classes, style, {
7050
7142
  width: "".concat(getPercentage(value, min, max), "%")
7051
- }],
7052
- textStyle: [textClasses, textStyle]
7053
- }), /*#__PURE__*/React.createElement(Text, null, children || ' '));
7143
+ }]
7144
+ }), children && /*#__PURE__*/React.createElement(Text, {
7145
+ style: [textClasses, textStyle]
7146
+ }, children));
7054
7147
  });
7055
7148
  ProgressBar.displayName = 'ProgressBar';
7056
7149
  ProgressBar.propTypes = propTypes$f;