bootstrap-rn 0.2.1 → 0.2.3

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  "]))),
@@ -3660,7 +3660,7 @@ var propTypes$1n = {
   styleName: PropTypes.any
 };
 var styles$15 = StyleSheet.create({
-  body: css(_templateObject$13 || (_templateObject$13 = _taggedTemplateLiteral(["\n    background-color: $body-bg;\n    flex-grow: 1; // added for bootstrap-rn\n  "]))),
+  body: css(_templateObject$13 || (_templateObject$13 = _taggedTemplateLiteral(["\n    background-color: $body-bg;\n    height: 100%; // added for bootstrap-rn\n  "]))),
   'body --text': css(_templateObject2$N || (_templateObject2$N = _taggedTemplateLiteral(["\n    color: $body-color;\n    text-align: $body-text-align;\n  "])))
 });
 var Body = /*#__PURE__*/React.forwardRef(function (props, ref) {
@@ -4253,26 +4253,28 @@ function useIdentifier(prefix) {
 }
 
 function useControlledState(defaultValue, controlledValue) {
-  var onChange = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : function () {};
+  var handleChange = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : function () {};
 
   var _useState = useState(defaultValue),
       _useState2 = _slicedToArray(_useState, 2),
       stateValue = _useState2[0],
       setStateValue = _useState2[1];
 
-  var isControlled = typeof controlledValue === 'boolean';
+  var isControlled = controlledValue !== undefined && controlledValue !== null;
   var value = isControlled ? controlledValue : stateValue;
 
-  var setValue = function setValue(nextValue) {
+  var setValue = function setValue(next) {
+    var nextValue = typeof next === 'function' ? next(value) : next;
+
     if (value === nextValue) {
       return;
     }
 
     if (!isControlled) {
-      setStateValue(nextValue);
+      setStateValue(next);
     }
 
-    onChange(nextValue);
+    handleChange(nextValue);
   };
 
   return [value, setValue];
@@ -4561,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 = {
@@ -4592,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;
 })), {}, {
@@ -4972,7 +4974,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,
@@ -4997,9 +4999,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) {
@@ -5665,7 +5667,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,
@@ -5677,17 +5679,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;
@@ -5719,7 +5740,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,
@@ -6824,7 +6845,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 = {
@@ -6832,7 +6853,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  "])))
@@ -6840,7 +6861,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),
@@ -6851,7 +6872,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';
@@ -6882,7 +6903,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'];
@@ -6897,7 +6918,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  "]))),
@@ -6909,8 +6940,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,
@@ -6924,7 +6955,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();
@@ -6947,10 +6983,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,
@@ -6961,11 +6998,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)))))));
@@ -7488,7 +7526,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'
@@ -7504,7 +7542,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  "]))),
@@ -7536,7 +7578,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();
@@ -7579,7 +7623,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))))));
@@ -7660,7 +7705,7 @@ PickerWeb.propTypes = propTypes$m;
 var PickerNativeContext = /*#__PURE__*/React.createContext();
 PickerNativeContext.displayName = 'PickerNativeContext';
 
-var _excluded$h = ["children", "selectedValue", "onValueChange", "onFocus", "onBlur", "placeholder", "placeholderTextColor", "disabled", "style"];
+var _excluded$h = ["children", "selectedValue", "onValueChange", "onFocus", "onBlur", "placeholder", "placeholderTextColor", "disabled", "MenuComponent", "style"];
 
 var _templateObject$f;
 var propTypes$l = {
@@ -7672,6 +7717,7 @@ var propTypes$l = {
   placeholder: PropTypes.string,
   placeholderTextColor: PropTypes.string,
   disabled: PropTypes.bool,
+  MenuComponent: PropTypes.elementType,
   // eslint-disable-next-line react/forbid-prop-types
   style: PropTypes.any
 };
@@ -7695,20 +7741,59 @@ var extractTextStyles = function extractTextStyles(style) {
   return textStyles;
 };
 
+var getText = function getText(_ref3) {
+  var children = _ref3.children,
+      selectedValue = _ref3.selectedValue;
+  var items = React.Children.map(children, function (child) {
+    return {
+      label: child.props.label,
+      value: child.props.value
+    };
+  });
+  var selectedItem = items.find(function (item) {
+    return item.value === selectedValue;
+  });
+  return selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.label;
+};
+/* eslint-disable react/prop-types */
+
+
+var DefaultMenuComponent = function DefaultMenuComponent(_ref4) {
+  var children = _ref4.children,
+      selectedValue = _ref4.selectedValue,
+      handleValueChange = _ref4.onValueChange,
+      handleClose = _ref4.onClose;
+  return /*#__PURE__*/React.createElement(Offcanvas, {
+    placement: "bottom",
+    visible: true,
+    onToggle: handleClose
+  }, /*#__PURE__*/React.createElement(Offcanvas.Body, {
+    contentContainerStyle: styles$f.menu
+  }, /*#__PURE__*/React.createElement(PickerNativeContext.Provider, {
+    value: {
+      selectedValue: selectedValue,
+      handleValueChange: handleValueChange
+    }
+  }, children)));
+};
+/* eslint-enable */
+
+
 var PickerNative = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
       selectedValue = props.selectedValue,
       _props$onValueChange = props.onValueChange,
-      _onValueChange = _props$onValueChange === void 0 ? function () {} : _props$onValueChange,
+      onValueChange = _props$onValueChange === void 0 ? function () {} : _props$onValueChange,
       _props$onFocus = props.onFocus,
       onFocus = _props$onFocus === void 0 ? function () {} : _props$onFocus,
       _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$MenuComponent = props.MenuComponent,
+      MenuComponent = _props$MenuComponent === void 0 ? DefaultMenuComponent : _props$MenuComponent,
       style = props.style,
       elementProps = _objectWithoutProperties(props, _excluded$h);
 
@@ -7716,29 +7801,26 @@ var PickerNative = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
-      open = _useState2[0],
-      setOpen = _useState2[1];
+      visible = _useState2[0],
+      setVisible = _useState2[1];
 
-  var items = React.Children.map(children, function (child) {
-    return {
-      label: child.props.label,
-      value: child.props.value
-    };
-  });
-  var selectedItem = items.find(function (item) {
-    return item.value === selectedValue;
-  });
   var textStyle = extractTextStyles(background.style);
   var showPlaceholder = placeholder && (selectedValue === undefined || selectedValue === null);
+
+  var handleValueChange = function handleValueChange(nextValue) {
+    onValueChange(nextValue);
+    setVisible(false);
+  };
+
+  var handleClose = function handleClose() {
+    setVisible(false);
+  };
+
   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() {
-      setOpen(true);
+      setVisible(true);
     },
     onFocus: onFocus,
     onBlur: onBlur,
@@ -7749,24 +7831,14 @@ var PickerNative = /*#__PURE__*/React.forwardRef(function (props, ref) {
     style: [textStyle, showPlaceholder && {
       color: placeholderTextColor
     }]
-  }, selectedItem ? selectedItem.label : placeholder)), /*#__PURE__*/React.createElement(Offcanvas, {
-    placement: "bottom",
-    visible: open,
-    onToggle: function onToggle() {
-      setOpen(false);
-    }
-  }, /*#__PURE__*/React.createElement(Offcanvas.Body, {
-    contentContainerStyle: styles$f.menu
-  }, /*#__PURE__*/React.createElement(PickerNativeContext.Provider, {
-    value: {
-      selectedValue: selectedValue,
-      onValueChange: function onValueChange(nextValue) {
-        _onValueChange(nextValue);
-
-        setOpen(false);
-      }
-    }
-  }, children))));
+  }, showPlaceholder ? placeholder : getText({
+    children: children,
+    selectedValue: selectedValue
+  }))), visible && /*#__PURE__*/React.createElement(MenuComponent, {
+    selectedValue: selectedValue,
+    onValueChange: handleValueChange,
+    onClose: handleClose
+  }, children));
 });
 PickerNative.propTypes = propTypes$l;
 
@@ -7816,7 +7888,7 @@ var PickerNativeItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
   var _useForcedContext = useForcedContext(PickerNativeContext),
       selectedValue = _useForcedContext.selectedValue,
-      onValueChange = _useForcedContext.onValueChange;
+      handleValueChange = _useForcedContext.handleValueChange;
 
   var media = useMedia();
   var classes = getStyles(styles$e, ['item', disabled && 'itemDisabled']);
@@ -7825,7 +7897,7 @@ var PickerNativeItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
   return /*#__PURE__*/React.createElement(Pressable, {
     ref: ref,
     onPress: function onPress() {
-      onValueChange(value);
+      handleValueChange(value);
     },
     accessibilitySelected: selected,
     disabled: disabled,