bootstrap-rn 0.2.2 → 0.2.4

package/dist/bootstrap-rn.esm.js

@@ -2546,21 +2546,21 @@ var variables = css(_templateObject$1d || (_templateObject$1d = _taggedTemplateL
 }, function (t) {
   return calculate(t['input-padding-y'], '*', 0.5);
 }), add(function (t) {
-  return calculate(t['input-line-height'], '*', 1);
+  return calculate(t['input-line-height'], '*', t['input-font-size']);
 }, // 1em
 add(function (t) {
   return calculate(t['input-padding-y'], '*', 2);
 }, function (t) {
   return t['input-height-border'];
 })), add(function (t) {
-  return calculate(t['input-line-height'], '*', 1);
+  return calculate(t['input-line-height'], '*', t['input-font-size-sm']);
 }, // 1em
 add(function (t) {
   return calculate(t['input-padding-y-sm'], '*', 2);
 }, function (t) {
   return t['input-height-border'];
 })), add(function (t) {
-  return calculate(t['input-line-height'], '*', 1);
+  return calculate(t['input-line-height'], '*', t['input-font-size-lg']);
 }, // 1em
 add(function (t) {
   return calculate(t['input-padding-y-lg'], '*', 2);
@@ -3501,7 +3501,7 @@ function useToggleButton(props) {
 
 var _excluded$1l = ["children", "color", "size", "outline", "active", "disabled", "style", "activeStyle", "textStyle", "activeTextStyle"];
 
-var _templateObject$15, _templateObject2$P, _templateObject3$p, _templateObject4$m, _templateObject5$j, _templateObject6$g, _templateObject7$b, _templateObject8$b, _templateObject9$9, _templateObject10$9, _templateObject11$6, _templateObject12$5, _templateObject13$5, _templateObject14$4, _templateObject15$3, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20$1, _templateObject21, _templateObject22, _templateObject23;
+var _templateObject$15, _templateObject2$P, _templateObject3$p, _templateObject4$m, _templateObject5$j, _templateObject6$g, _templateObject7$b, _templateObject8$b, _templateObject9$a, _templateObject10$a, _templateObject11$7, _templateObject12$5, _templateObject13$5, _templateObject14$4, _templateObject15$3, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20$1, _templateObject21, _templateObject22, _templateObject23;
 var propTypes$1p = {
   children: PropTypes.node.isRequired,
   color: PropTypes.oneOf([].concat(_toConsumableArray(Object.keys(THEME_COLORS)), ['link'])),
@@ -3541,7 +3541,7 @@ var styles$17 = 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, ".active --text"), css(_templateObject7$b || (_templateObject7$b = _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$9 || (_templateObject9$9 = _taggedTemplateLiteral(["\n      $disabled-color: ", ";\n\n      color: $disabled-color;\n    "])), colorContrast(value))), _defineProperty(_ref, ".btn-outline-".concat(color), css(_templateObject10$9 || (_templateObject10$9 = _taggedTemplateLiteral(["\n      border-color: ", ";\n\n      &:hover {\n        background-color: ", ";\n        border-color: ", ";\n      }\n\n      &:focus {\n        // box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);\n      }\n\n      &:active {\n        background-color: ", ";\n        border-color: ", ";\n\n        /* &:focus {\n          @if $enable-shadows {\n            @include box-shadow(\n              $btn-active-box-shadow,\n              0 0 0 $btn-focus-width rgba($color, 0.5)\n            );\n          } @else {\n            // Avoid using mixin so we can pass custom focus shadow properly\n            box-shadow: 0 0 0 $btn-focus-width rgba($color, 0.5);\n          }\n        } */\n      }\n    "])), value, value, value, value, value)), _defineProperty(_ref, ".btn-outline-".concat(color, " --text"), css(_templateObject11$6 || (_templateObject11$6 = _taggedTemplateLiteral(["\n      color: ", ";\n\n      &:hover {\n        color: ", ";\n      }\n\n      &:active {\n        color: ", ";\n      }\n    "])), value, colorContrast(value), colorContrast(value))), _defineProperty(_ref, ".btn-outline-".concat(color, ".disabled"), css(_templateObject12$5 || (_templateObject12$5 = _taggedTemplateLiteral(["\n      background-color: transparent;\n    "])))), _defineProperty(_ref, ".btn-outline-".concat(color, ".disabled --text"), css(_templateObject13$5 || (_templateObject13$5 = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), value)), _ref;
+  }, 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$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$a || (_templateObject9$a = _taggedTemplateLiteral(["\n      $disabled-color: ", ";\n\n      color: $disabled-color;\n    "])), colorContrast(value))), _defineProperty(_ref, ".btn-outline-".concat(color), css(_templateObject10$a || (_templateObject10$a = _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$7 || (_templateObject11$7 = _taggedTemplateLiteral(["\n      color: ", ";\n\n      &:hover {\n        color: ", ";\n      }\n\n      &:active {\n        color: ", ";\n      }\n    "])), value, colorContrast(value), colorContrast(value))), _defineProperty(_ref, ".btn-outline-".concat(color, ".disabled"), css(_templateObject12$5 || (_templateObject12$5 = _taggedTemplateLiteral(["\n      background-color: transparent;\n    "])))), _defineProperty(_ref, ".btn-outline-".concat(color, ".disabled --text"), css(_templateObject13$5 || (_templateObject13$5 = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), value)), _ref;
 })), {}, {
   '.btn-link --text': css(_templateObject14$4 || (_templateObject14$4 = _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.disabled --text': css(_templateObject15$3 || (_templateObject15$3 = _taggedTemplateLiteral(["\n    color: $btn-link-disabled-color;\n  "]))),
@@ -4563,7 +4563,7 @@ FormCheckInputNative.propTypes = propTypes$1d;
 
 var _excluded$19 = ["type", "value", "onFocus", "onBlur", "disabled", "valid", "invalid", "useNativeComponent", "style"];
 
-var _templateObject$Y, _templateObject2$H, _templateObject3$m, _templateObject4$j, _templateObject5$g, _templateObject6$e, _templateObject7$9, _templateObject8$9, _templateObject9$8, _templateObject10$8, _templateObject11$5, _templateObject12$4, _templateObject13$4, _templateObject14$3, _templateObject15$2;
+var _templateObject$Y, _templateObject2$H, _templateObject3$m, _templateObject4$j, _templateObject5$g, _templateObject6$e, _templateObject7$9, _templateObject8$9, _templateObject9$9, _templateObject10$9, _templateObject11$6, _templateObject12$4, _templateObject13$4, _templateObject14$3, _templateObject15$2;
 /* eslint-disable react/no-unused-prop-types */
 
 var propTypes$1c = {
@@ -4594,17 +4594,17 @@ var styles$X = StyleSheet.create(_objectSpread2(_objectSpread2({
   '.form-check-input[type="radio"]:checked': css(_templateObject8$9 || (_templateObject8$9 = _taggedTemplateLiteral(["\n    // @if $enable-gradients {\n    //   background-image: escape-svg($form-check-radio-checked-bg-image), var(--#{$variable-prefix}gradient);\n    // } @else {\n    background-image: ", ";\n    // }\n  "])), function (t) {
     return escapeSvg(t['form-check-radio-checked-bg-image']);
   }),
-  '.form-check-input:disabled': css(_templateObject9$8 || (_templateObject9$8 = _taggedTemplateLiteral(["\n    @include platform(web) {\n      pointer-events: none;\n      filter: none;\n    }\n    opacity: $form-check-label-disabled-opacity;\n  "])))
+  '.form-check-input:disabled': css(_templateObject9$9 || (_templateObject9$9 = _taggedTemplateLiteral(["\n    @include platform(web) {\n      pointer-events: none;\n      filter: none;\n    }\n    opacity: $form-check-label-disabled-opacity;\n  "])))
 }, each(FORM_VALIDATION_STATES, function (state, data) {
   var _ref;
 
-  return _ref = {}, _defineProperty(_ref, ".form-check-input:".concat(state), css(_templateObject10$8 || (_templateObject10$8 = _taggedTemplateLiteral(["\n      border-color: ", ";\n\n      &:focus {\n        border-color: ", "; // added for bootstrap-rn\n        @include platform(web) {\n          box-shadow: 0 0 $input-btn-focus-blur $input-focus-width\n            rgba(", ", $input-btn-focus-color-opacity);\n        }\n      }\n    "])), function (t) {
+  return _ref = {}, _defineProperty(_ref, ".form-check-input:".concat(state), css(_templateObject10$9 || (_templateObject10$9 = _taggedTemplateLiteral(["\n      border-color: ", ";\n\n      &:focus {\n        border-color: ", "; // added for bootstrap-rn\n        @include platform(web) {\n          box-shadow: 0 0 $input-btn-focus-blur $input-focus-width\n            rgba(", ", $input-btn-focus-color-opacity);\n        }\n      }\n    "])), function (t) {
     return data(t).color;
   }, function (t) {
     return data(t).color;
   }, function (t) {
     return data(t).color;
-  })), _defineProperty(_ref, ".form-check-input:".concat(state, ":checked"), css(_templateObject11$5 || (_templateObject11$5 = _taggedTemplateLiteral(["\n      background-color: ", ";\n    "])), function (t) {
+  })), _defineProperty(_ref, ".form-check-input:".concat(state, ":checked"), css(_templateObject11$6 || (_templateObject11$6 = _taggedTemplateLiteral(["\n      background-color: ", ";\n    "])), function (t) {
     return data(t).color;
   })), _ref;
 })), {}, {
@@ -4873,7 +4873,7 @@ var styles$U = StyleSheet.create({
 });
 var initialState = {
   waitingForMouseUp: false,
-  isDialogClick: false
+  ignoreBackdropClick: false
 };
 
 var BackdropHandler = function BackdropHandler(props) {
@@ -4900,24 +4900,25 @@ var BackdropHandler = function BackdropHandler(props) {
 
 
       var handleDialogMouseUp = function handleDialogMouseUp() {
-        state.isDialogClick = true;
+        state.ignoreBackdropClick = true;
       };
 
       var handleDocumentClick = function handleDocumentClick(_ref) {
         var target = _ref.target;
+        var isDialogClick = state.ignoreBackdropClick || dialog.contains(target);
 
         if (backdrop === 'static' || autoClose === false) {
           return;
         } // Click outside -> return if autoClose is inside.
 
 
-        if (!state.isDialogClick && autoClose === 'inside') {
+        if (!isDialogClick && autoClose === 'inside') {
           return;
         } // Click inside / on dialog -> return if autoClose is outside.
 
 
-        if (state.isDialogClick) {
-          state.isDialogClick = false;
+        if (isDialogClick) {
+          state.ignoreBackdropClick = false;
 
           if (autoClose === 'outside') {
             return;
@@ -4934,7 +4935,7 @@ var BackdropHandler = function BackdropHandler(props) {
 
       var handleDocumentMouseUp = function handleDocumentMouseUp() {
         if (state.waitingForMouseUp) {
-          state.isDialogClick = true;
+          state.ignoreBackdropClick = true;
         }
 
         state.waitingForMouseUp = false;
@@ -4974,7 +4975,7 @@ BackdropHandler.propTypes = propTypes$17;
 
 var _excluded$15 = ["children", "start", "right", "end", "style", "textStyle"];
 
-var _templateObject$U, _templateObject2$F, _templateObject3$k, _templateObject4$h, _templateObject5$e, _templateObject6$d, _templateObject7$8, _templateObject8$8, _templateObject9$7, _templateObject10$7;
+var _templateObject$U, _templateObject2$F, _templateObject3$k, _templateObject4$h, _templateObject5$e, _templateObject6$d, _templateObject7$8, _templateObject8$8, _templateObject9$8, _templateObject10$8;
 var ALIGNMENT_BREAKPOINTS = [true, 'sm', 'md', 'lg', 'xl', 'xxl'];
 var propTypes$16 = {
   children: PropTypes.node.isRequired,
@@ -4999,9 +5000,9 @@ var styles$T = StyleSheet.create(_objectSpread2(_objectSpread2(_objectSpread2({
   '.dropstart .dropdown-menu[data-bs-popper]': css(_templateObject7$8 || (_templateObject7$8 = _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$7 || (_templateObject9$7 = _taggedTemplateLiteral(["\n      @include media-breakpoint-up(", ") {\n        position: absolute;\n      }\n    "])), next(breakpoint)));
+  return _defineProperty({}, ".navbar-expand".concat(infix(next(breakpoint)), " .navbar-nav .dropdown-menu"), css(_templateObject9$8 || (_templateObject9$8 = _taggedTemplateLiteral(["\n      @include media-breakpoint-up(", ") {\n        position: absolute;\n      }\n    "])), next(breakpoint)));
 })), {}, {
-  '.dropdown-menu --text': css(_templateObject10$7 || (_templateObject10$7 = _taggedTemplateLiteral(["\n    font-size: $dropdown-font-size;\n    color: $dropdown-color;\n    text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)\n  "])))
+  '.dropdown-menu --text': css(_templateObject10$8 || (_templateObject10$8 = _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) {
@@ -5667,7 +5668,7 @@ TextInput.propTypes = propTypes$U;
 
 var _excluded$R = ["size", "placeholderTextColor", "multiline", "disabled", "valid", "invalid", "editable", "selectTextOnFocus", "style"];
 
-var _templateObject$H, _templateObject2$w, _templateObject3$g, _templateObject4$e, _templateObject5$c, _templateObject6$b, _templateObject7$7, _templateObject8$7;
+var _templateObject$H, _templateObject2$w, _templateObject3$g, _templateObject4$e, _templateObject5$c, _templateObject6$b, _templateObject7$7, _templateObject8$7, _templateObject9$7, _templateObject10$7, _templateObject11$5;
 var propTypes$T = {
   size: PropTypes.oneOf(['sm', 'lg']),
   placeholderTextColor: PropTypes.string,
@@ -5679,17 +5680,36 @@ var propTypes$T = {
   selectTextOnFocus: PropTypes.bool,
   // eslint-disable-next-line react/forbid-prop-types
   style: PropTypes.any
-};
+}; // Known issues:
+//
+// line-height (iOS)
+// If a line height is defined on iOS the text will be displayed on the bottom
+// of the line. As a workaround the line height is only defined for multi line
+// inputs.
+//
+// multi line height (iOS)
+// A multi line input on iOS has only the height of a single line input. As a
+// workaround we added a height of $input-height-sm + 8rem for multi line
+// inputs on iOS.
+//
+// single line height (Android)
+// If no height is defined, Android sets a text line height of 28px auto-
+// matically, which leads to a larger height than min height for the default
+// and sm size. As a workaround we set a height for single line inputs.
+
 var styles$G = StyleSheet.create(_objectSpread2({
-  '.form-control': css(_templateObject$H || (_templateObject$H = _taggedTemplateLiteral(["\n    // display: block;\n    width: 100%;\n    padding: $input-padding-y $input-padding-x;\n    font-family: $input-font-family;\n    font-size: $input-font-size;\n    font-weight: $input-font-weight;\n    line-height: $input-font-size * $input-line-height;\n    color: $input-color;\n    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        // @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    }\n  "]))),
+  '.form-control': css(_templateObject$H || (_templateObject$H = _taggedTemplateLiteral(["\n    // display: block;\n    width: 100%;\n    min-height: $input-height; // added for bootstrap-rn\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    @include platform(web) {\n      line-height: $input-font-size * $input-line-height;\n    }\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        // @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    }\n  "]))),
   '.form-control.disabled': css(_templateObject2$w || (_templateObject2$w = _taggedTemplateLiteral(["\n    background-color: $input-disabled-bg;\n    border-color: $input-disabled-border-color;\n    // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.\n    opacity: 1;\n  "]))),
-  '.form-control-sm': css(_templateObject3$g || (_templateObject3$g = _taggedTemplateLiteral(["\n    min-height: $input-height-sm;\n    padding: $input-padding-y-sm $input-padding-x-sm;\n    font-size: $input-font-size-sm;\n    line-height: $input-font-size-sm * $line-height-base; // added for bootstrap-rn\n    border-radius: $input-border-radius-sm;\n  "]))),
-  '.form-control-lg': css(_templateObject4$e || (_templateObject4$e = _taggedTemplateLiteral(["\n    min-height: $input-height-lg;\n    padding: $input-padding-y-lg $input-padding-x-lg;\n    font-size: $input-font-size-lg;\n    line-height: $input-font-size-lg * $line-height-base; // added for bootstrap-rn\n    border-radius: $input-border-radius-lg;\n  "]))),
-  '.form-control-multiline': css(_templateObject5$c || (_templateObject5$c = _taggedTemplateLiteral(["\n    text-align-vertical: top; // added for bootstrap-rn\n    min-height: $input-height;\n\n    @include platform(ios) {\n      min-height: $input-height-sm + 8rem; // added for bootstrap-rn\n    }\n  "]))),
-  '.form-control-multiline-sm': css(_templateObject6$b || (_templateObject6$b = _taggedTemplateLiteral(["\n    min-height: $input-height-sm;\n\n    @include platform(ios) {\n      // TODO: Adjust ios height to sm size\n      min-height: $input-height-sm + 8rem; // added for bootstrap-rn\n    }\n  "]))),
-  '.form-control-multiline-lg': css(_templateObject7$7 || (_templateObject7$7 = _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  "])))
+  '.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    @include platform(web) {\n      line-height: $input-font-size-sm * $line-height-base; // added for bootstrap-rn\n    }\n    border-radius: $input-border-radius-sm;\n  "]))),
+  '.form-control-lg': css(_templateObject4$e || (_templateObject4$e = _taggedTemplateLiteral(["\n    min-height: $input-height-lg;\n    padding: $input-padding-y-lg $input-padding-x-lg;\n    font-size: $input-font-size-lg;\n    @include platform(web) {\n      line-height: $input-font-size-lg * $line-height-base; // added for bootstrap-rn\n    }\n    border-radius: $input-border-radius-lg;\n  "]))),
+  '.form-control:not(textarea)': css(_templateObject5$c || (_templateObject5$c = _taggedTemplateLiteral(["\n    @include platform(android) {\n      height: $input-height; // added for bootstrap-rn\n    }\n  "]))),
+  '.form-control-sm:not(textarea)': css(_templateObject6$b || (_templateObject6$b = _taggedTemplateLiteral(["\n    @include platform(android) {\n      height: $input-height-sm; // added for bootstrap-rn\n    }\n  "]))),
+  '.form-control-lg:not(textarea)': css(_templateObject7$7 || (_templateObject7$7 = _taggedTemplateLiteral(["\n    @include platform(android) {\n      height: $input-height-lg; // added for bootstrap-rn\n    }\n  "]))),
+  'textarea.form-control': css(_templateObject8$7 || (_templateObject8$7 = _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    @include platform(native) {\n      line-height: $input-font-size * $input-line-height; // added for bootstrap-rn\n    }\n  "]))),
+  'textarea.form-control-sm': css(_templateObject9$7 || (_templateObject9$7 = _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    @include platform(native) {\n      line-height: $input-font-size-sm * $line-height-base; // added for bootstrap-rn\n    }\n  "]))),
+  'textarea.form-control-lg': css(_templateObject10$7 || (_templateObject10$7 = _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    @include platform(native) {\n      line-height: $input-font-size-sm * $line-height-base; // added for bootstrap-rn\n    }\n  "])))
 }, each(FORM_VALIDATION_STATES, function (state, data) {
-  return _defineProperty({}, ".form-control:".concat(state), css(_templateObject8$7 || (_templateObject8$7 = _taggedTemplateLiteral(["\n      border-color: ", ";\n\n      &:focus {\n        border-color: ", ";\n        @include platform(web) {\n          box-shadow: 0 0 $input-btn-focus-blur $input-focus-width\n            rgba(", ", $input-btn-focus-color-opacity);\n        }\n      }\n    "])), function (t) {
+  return _defineProperty({}, ".form-control:".concat(state), css(_templateObject11$5 || (_templateObject11$5 = _taggedTemplateLiteral(["\n      border-color: ", ";\n\n      &:focus {\n        border-color: ", ";\n        @include platform(web) {\n          box-shadow: 0 0 $input-btn-focus-blur $input-focus-width\n            rgba(", ", $input-btn-focus-color-opacity);\n        }\n      }\n    "])), function (t) {
     return data(t).color;
   }, function (t) {
     return data(t).color;
@@ -5721,7 +5741,7 @@ var Input = /*#__PURE__*/React.forwardRef(function (props, ref) {
       style = modifierProps.style,
       elementProps = _objectWithoutProperties(modifierProps, _excluded$R);
 
-  var classes = getStyles(styles$G, ['.form-control', disabled && '.form-control.disabled', size === 'sm' && '.form-control-sm', size === 'lg' && '.form-control-lg', multiline && '.form-control-multiline', multiline && size === 'sm' && '.form-control-multiline-sm', multiline && size === 'lg' && '.form-control-multiline-lg', valid && '.form-control:valid', invalid && '.form-control:invalid']);
+  var classes = getStyles(styles$G, ['.form-control', disabled && '.form-control.disabled', size === 'sm' && '.form-control-sm', size === 'lg' && '.form-control-lg', !multiline && '.form-control:not(textarea)', !multiline && size === 'sm' && '.form-control-sm:not(textarea)', !multiline && size === 'lg' && '.form-control-lg:not(textarea)', multiline && 'textarea.form-control', multiline && size === 'sm' && 'textarea.form-control-sm', multiline && size === 'lg' && 'textarea.form-control-lg', valid && '.form-control:valid', invalid && '.form-control:invalid']);
   return /*#__PURE__*/React.createElement(TextInput, _extends({}, elementProps, {
     ref: modifierRef,
     placeholderTextColor: placeholderTextColor,
@@ -6826,7 +6846,7 @@ var ModalTitle = /*#__PURE__*/React.forwardRef(function (props, ref) {
 ModalTitle.displayName = 'ModalTitle';
 ModalTitle.propTypes = propTypes$B;
 
-var _excluded$y = ["children", "style", "contentContainerStyle"];
+var _excluded$y = ["children", "style", "innerStyle"];
 
 var _templateObject$t;
 var propTypes$A = {
@@ -6834,7 +6854,7 @@ var propTypes$A = {
   // eslint-disable-next-line react/forbid-prop-types
   style: PropTypes.any,
   // eslint-disable-next-line react/forbid-prop-types
-  contentContainerStyle: PropTypes.any
+  innerStyle: PropTypes.any
 };
 var styles$t = StyleSheet.create({
   '.modal-body': css(_templateObject$t || (_templateObject$t = _taggedTemplateLiteral(["\n    position: relative;\n    // Enable \"flex-grow: 1\" so that the body take up as much space as possible\n    // when there should be a fixed height on \".modal-dialog\".\n    // Note from bootstrap-rn: Centered modals do not work with this style, but\n    // everything just works fine without this style.\n    // flex: 1 1 auto;\n    padding: $modal-inner-padding;\n  "])))
@@ -6842,7 +6862,7 @@ var styles$t = StyleSheet.create({
 var ModalBody = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
       style = props.style,
-      contentContainerStyle = props.contentContainerStyle,
+      innerStyle = props.innerStyle,
       elementProps = _objectWithoutProperties(props, _excluded$y);
 
   var _useForcedContext = useForcedContext(ModalContext),
@@ -6853,7 +6873,7 @@ var ModalBody = /*#__PURE__*/React.forwardRef(function (props, ref) {
   return /*#__PURE__*/React.createElement(FlexView, _extends({}, elementProps, {
     ref: ref,
     style: scrollable ? style : [classes, style],
-    contentContainerStyle: scrollable ? [classes, contentContainerStyle] : undefined
+    contentContainerStyle: scrollable ? [classes, innerStyle] : undefined
   }), children);
 });
 ModalBody.displayName = 'ModalBody';
@@ -6884,7 +6904,7 @@ var ModalFooter = /*#__PURE__*/React.forwardRef(function (props, ref) {
 ModalFooter.displayName = 'ModalFooter';
 ModalFooter.propTypes = propTypes$z;
 
-var _excluded$w = ["children", "visible", "size", "backdrop", "scrollable", "centered", "onToggle", "style", "textStyle"];
+var _excluded$w = ["children", "visible", "size", "backdrop", "scrollable", "centered", "onToggle", "style", "innerStyle", "dialogStyle", "contentStyle", "textStyle", "dialogTextStyle", "contentTextStyle"];
 
 var _templateObject$r, _templateObject2$l, _templateObject3$a, _templateObject4$8, _templateObject5$6, _templateObject6$5, _templateObject7$3, _templateObject8$3, _templateObject9$3, _templateObject10$3, _templateObject11$2;
 var MODAL_SIZES = ['sm', 'lg', 'xl'];
@@ -6899,7 +6919,17 @@ var propTypes$y = {
   // eslint-disable-next-line react/forbid-prop-types
   style: PropTypes.any,
   // eslint-disable-next-line react/forbid-prop-types
-  textStyle: PropTypes.any
+  innerStyle: PropTypes.any,
+  // eslint-disable-next-line react/forbid-prop-types
+  dialogStyle: PropTypes.any,
+  // eslint-disable-next-line react/forbid-prop-types
+  contentStyle: PropTypes.any,
+  // eslint-disable-next-line react/forbid-prop-types
+  textStyle: PropTypes.any,
+  // eslint-disable-next-line react/forbid-prop-types
+  dialogTextStyle: PropTypes.any,
+  // eslint-disable-next-line react/forbid-prop-types
+  contentTextStyle: PropTypes.any
 };
 var styles$r = StyleSheet.create({
   '.modal': css(_templateObject$r || (_templateObject$r = _taggedTemplateLiteral(["\n    position: absolute; // fixed;\n    top: 0;\n    left: 0;\n    z-index: $zindex-modal;\n    // display: none;\n    width: 100%;\n    height: 100%;\n    // overflow-x: hidden;\n    // overflow-y: auto;\n    // Prevent Chrome on Windows from adding a focus outline. For details, see\n    // https://github.com/twbs/bootstrap/pull/10951.\n    @include platform(web) {\n      outline-width: 0; // outline: 0;\n    }\n    // We deliberately don't use \"-webkit-overflow-scrolling: touch;\" due to a\n    // gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342\n    // See also https://github.com/twbs/bootstrap/issues/17695\n  "]))),
@@ -6911,8 +6941,8 @@ var styles$r = StyleSheet.create({
   '.modal-content --text': css(_templateObject7$3 || (_templateObject7$3 = _taggedTemplateLiteral(["\n    color: $modal-content-color;\n  "]))),
   '.modal-backdrop': css(_templateObject8$3 || (_templateObject8$3 = _taggedTemplateLiteral(["\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: $zindex-modal-backdrop;\n    width: 100%;\n    height: 100%;\n    background-color: $modal-backdrop-bg;\n    opacity: $modal-backdrop-opacity;\n  "]))),
   '.modal-sm': css(_templateObject9$3 || (_templateObject9$3 = _taggedTemplateLiteral(["\n    @include media-breakpoint-up(sm) {\n      max-width: $modal-sm;\n    }\n  "]))),
-  '.modal-lg': css(_templateObject10$3 || (_templateObject10$3 = _taggedTemplateLiteral(["\n    @include media-breakpoint-up(lg) {\n      max-width: $modal-lg;\n    }\n    @include media-breakpoint-up(xl) {\n      max-width: $modal-xl;\n    }\n  "]))),
-  '.modal-xl': css(_templateObject11$2 || (_templateObject11$2 = _taggedTemplateLiteral(["\n    @include media-breakpoint-up(xl) {\n      max-width: $modal-xl;\n    }\n  "])))
+  '.modal-lg': css(_templateObject10$3 || (_templateObject10$3 = _taggedTemplateLiteral(["\n    @include media-breakpoint-up(lg) {\n      max-width: $modal-lg;\n    }\n  "]))),
+  '.modal-xl': css(_templateObject11$2 || (_templateObject11$2 = _taggedTemplateLiteral(["\n    @include media-breakpoint-up(lg) {\n      max-width: $modal-lg;\n    }\n    @include media-breakpoint-up(xl) {\n      max-width: $modal-xl;\n    }\n  "])))
 });
 var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
@@ -6926,7 +6956,12 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
       centered = _props$centered === void 0 ? false : _props$centered,
       handleToggle = props.onToggle,
       style = props.style,
+      innerStyle = props.innerStyle,
+      dialogStyle = props.dialogStyle,
+      contentStyle = props.contentStyle,
       textStyle = props.textStyle,
+      dialogTextStyle = props.dialogTextStyle,
+      contentTextStyle = props.contentTextStyle,
       elementProps = _objectWithoutProperties(props, _excluded$w);
 
   var dialogRef = useRef();
@@ -6949,10 +6984,11 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, backdrop && /*#__PURE__*/React.createElement(View, {
     style: backdropClasses
   }), /*#__PURE__*/React.createElement(FlexView, {
-    style: classes,
-    contentContainerStyle: scrollable ? undefined : {
+    style: [classes, style],
+    textStyle: textStyle,
+    contentContainerStyle: [scrollable ? undefined : {
       flexGrow: 1
-    }
+    }, innerStyle]
   }, /*#__PURE__*/React.createElement(BackdropHandler, {
     dialogRef: dialogRef,
     onClose: handleToggle,
@@ -6963,11 +6999,12 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
   }, /*#__PURE__*/React.createElement(View, {
     ref: dialogRef,
-    style: dialogClasses
+    style: [dialogClasses, dialogStyle],
+    textStyle: dialogTextStyle
   }, /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
     ref: ref,
-    style: [contentClasses, style],
-    textStyle: [contentTextClasses, textStyle]
+    style: [contentClasses, contentStyle],
+    textStyle: [contentTextClasses, contentTextStyle]
   }), /*#__PURE__*/React.createElement(ModalContext.Provider, {
     value: modal
   }, /*#__PURE__*/React.createElement(OverlayProvider, null, children)))))));
@@ -7490,7 +7527,7 @@ var OffcanvasBody = /*#__PURE__*/React.forwardRef(function (props, ref) {
 OffcanvasBody.displayName = 'OffcanvasBody';
 OffcanvasBody.propTypes = propTypes$o;
 
-var _excluded$j = ["children", "visible", "placement", "backdrop", "scroll", "onToggle", "style", "textStyle"];
+var _excluded$j = ["children", "visible", "placement", "backdrop", "scroll", "onToggle", "style", "dialogStyle", "textStyle", "dialogTextStyle"];
 
 var _templateObject$g, _templateObject2$b, _templateObject3$4, _templateObject4$3, _templateObject5$3, _templateObject6$2, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
 var PLACEMENTS = ['top', 'bottom', 'start', 'end']; // , 'auto'
@@ -7506,7 +7543,11 @@ var propTypes$n = {
   // eslint-disable-next-line react/forbid-prop-types
   style: PropTypes.any,
   // eslint-disable-next-line react/forbid-prop-types
-  textStyle: PropTypes.any
+  dialogStyle: PropTypes.any,
+  // eslint-disable-next-line react/forbid-prop-types
+  textStyle: PropTypes.any,
+  // eslint-disable-next-line react/forbid-prop-types
+  dialogTextStyle: PropTypes.any
 };
 var styles$g = StyleSheet.create(_objectSpread2({
   '.offcanvas': css(_templateObject$g || (_templateObject$g = _taggedTemplateLiteral(["\n    position: absolute; // fixed;\n    // bottom: 0;\n    z-index: $zindex-offcanvas;\n    display: flex;\n    flex-direction: column;\n    max-width: 100%;\n    // visibility: hidden;\n    background-color: $offcanvas-bg-color;\n    // background-clip: padding-box;\n    @include platform(web) {\n      outline-width: 0; // outline: 0;\n    }\n    // @include box-shadow($offcanvas-box-shadow);\n    // @include transition(transform $offcanvas-transition-duration ease-in-out);\n  "]))),
@@ -7538,7 +7579,9 @@ var Offcanvas = /*#__PURE__*/React.forwardRef(function (props, ref) {
       scroll = _props$scroll === void 0 ? false : _props$scroll,
       handleToggle = props.onToggle,
       style = props.style,
+      dialogStyle = props.dialogStyle,
       textStyle = props.textStyle,
+      dialogTextStyle = props.dialogTextStyle,
       elementProps = _objectWithoutProperties(props, _excluded$j);
 
   var media = useMedia();
@@ -7581,7 +7624,8 @@ var Offcanvas = /*#__PURE__*/React.forwardRef(function (props, ref) {
       flexShrink: 1
     }
   }, /*#__PURE__*/React.createElement(View, {
-    style: dialogClasses
+    style: [dialogClasses, dialogStyle],
+    textStyle: dialogTextStyle
   }, /*#__PURE__*/React.createElement(OffcanvasContext.Provider, {
     value: offcanvas
   }, /*#__PURE__*/React.createElement(OverlayProvider, null, children))))));
@@ -7662,11 +7706,11 @@ PickerWeb.propTypes = propTypes$m;
 var PickerNativeContext = /*#__PURE__*/React.createContext();
 PickerNativeContext.displayName = 'PickerNativeContext';
 
-var _excluded$h = ["children", "selectedValue", "onValueChange", "onFocus", "onBlur", "placeholder", "placeholderTextColor", "disabled", "renderText", "renderMenu", "style"];
+var _excluded$h = ["children", "selectedValue", "onValueChange", "onFocus", "onBlur", "placeholder", "placeholderTextColor", "disabled", "MenuComponent", "style"];
 
 var _templateObject$f;
 var propTypes$l = {
-  children: PropTypes.node,
+  children: PropTypes.node.isRequired,
   selectedValue: PropTypes.oneOfType([PropTypes.bool, PropTypes.number, PropTypes.string, PropTypes.object]),
   onValueChange: PropTypes.func,
   onFocus: PropTypes.func,
@@ -7674,8 +7718,7 @@ var propTypes$l = {
   placeholder: PropTypes.string,
   placeholderTextColor: PropTypes.string,
   disabled: PropTypes.bool,
-  renderText: PropTypes.func,
-  renderMenu: PropTypes.func,
+  MenuComponent: PropTypes.elementType,
   // eslint-disable-next-line react/forbid-prop-types
   style: PropTypes.any
 };
@@ -7699,7 +7742,7 @@ var extractTextStyles = function extractTextStyles(style) {
   return textStyles;
 };
 
-var renderTextDefault = function renderTextDefault(_ref3) {
+var getText = function getText(_ref3) {
   var children = _ref3.children,
       selectedValue = _ref3.selectedValue;
   var items = React.Children.map(children, function (child) {
@@ -7713,12 +7756,14 @@ var renderTextDefault = function renderTextDefault(_ref3) {
   });
   return selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.label;
 };
+/* eslint-disable react/prop-types */
 
-var renderMenuDefault = function renderMenuDefault(_ref4) {
+
+var DefaultMenuComponent = function DefaultMenuComponent(_ref4) {
   var children = _ref4.children,
       selectedValue = _ref4.selectedValue,
-      handleValueChange = _ref4.handleValueChange,
-      handleClose = _ref4.handleClose;
+      handleValueChange = _ref4.onValueChange,
+      handleClose = _ref4.onClose;
   return /*#__PURE__*/React.createElement(Offcanvas, {
     placement: "bottom",
     visible: true,
@@ -7732,6 +7777,8 @@ var renderMenuDefault = function renderMenuDefault(_ref4) {
     }
   }, children)));
 };
+/* eslint-enable */
+
 
 var PickerNative = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
@@ -7743,14 +7790,11 @@ var PickerNative = /*#__PURE__*/React.forwardRef(function (props, ref) {
       _props$onBlur = props.onBlur,
       onBlur = _props$onBlur === void 0 ? function () {} : _props$onBlur,
       placeholder = props.placeholder,
-      _props$placeholderTex = props.placeholderTextColor,
-      placeholderTextColor = _props$placeholderTex === void 0 ? StyleSheet.value('input-placeholder-color') : _props$placeholderTex,
+      placeholderTextColor = props.placeholderTextColor,
       _props$disabled = props.disabled,
       disabled = _props$disabled === void 0 ? false : _props$disabled,
-      _props$renderText = props.renderText,
-      renderText = _props$renderText === void 0 ? renderTextDefault : _props$renderText,
-      _props$renderMenu = props.renderMenu,
-      renderMenu = _props$renderMenu === void 0 ? renderMenuDefault : _props$renderMenu,
+      _props$MenuComponent = props.MenuComponent,
+      MenuComponent = _props$MenuComponent === void 0 ? DefaultMenuComponent : _props$MenuComponent,
       style = props.style,
       elementProps = _objectWithoutProperties(props, _excluded$h);
 
@@ -7776,10 +7820,6 @@ var PickerNative = /*#__PURE__*/React.forwardRef(function (props, ref) {
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Pressable, _extends({}, elementProps, {
     ref: ref,
     accessibilityRole: "combobox",
-    accessibilityDisabled: disabled,
-    accessible: true,
-    focusable: !disabled,
-    selectable: false,
     onPress: function onPress() {
       setVisible(true);
     },
@@ -7792,15 +7832,14 @@ var PickerNative = /*#__PURE__*/React.forwardRef(function (props, ref) {
     style: [textStyle, showPlaceholder && {
       color: placeholderTextColor
     }]
-  }, showPlaceholder ? placeholder : renderText({
+  }, showPlaceholder ? placeholder : getText({
     children: children,
     selectedValue: selectedValue
-  }))), visible && renderMenu({
-    children: children,
+  }))), visible && /*#__PURE__*/React.createElement(MenuComponent, {
     selectedValue: selectedValue,
-    handleValueChange: handleValueChange,
-    handleClose: handleClose
-  }));
+    onValueChange: handleValueChange,
+    onClose: handleClose
+  }, children));
 });
 PickerNative.propTypes = propTypes$l;
 
@@ -7904,7 +7943,7 @@ var _templateObject$d, _templateObject2$9, _templateObject3$3, _templateObject4$
 /* eslint-disable react/no-unused-prop-types */
 
 var propTypes$h = {
-  children: PropTypes.node,
+  children: PropTypes.node.isRequired,
   onFocus: PropTypes.func,
   onBlur: PropTypes.func,
   placeholderTextColor: PropTypes.string,