bootstrap-rn 0.2.2 → 0.2.4

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.
@@ -5510,21 +5510,21 @@
5510
5510
  }, function (t) {
5511
5511
  return calculate(t['input-padding-y'], '*', 0.5);
5512
5512
  }), add(function (t) {
5513
- return calculate(t['input-line-height'], '*', 1);
5513
+ return calculate(t['input-line-height'], '*', t['input-font-size']);
5514
5514
  }, // 1em
5515
5515
  add(function (t) {
5516
5516
  return calculate(t['input-padding-y'], '*', 2);
5517
5517
  }, function (t) {
5518
5518
  return t['input-height-border'];
5519
5519
  })), add(function (t) {
5520
- return calculate(t['input-line-height'], '*', 1);
5520
+ return calculate(t['input-line-height'], '*', t['input-font-size-sm']);
5521
5521
  }, // 1em
5522
5522
  add(function (t) {
5523
5523
  return calculate(t['input-padding-y-sm'], '*', 2);
5524
5524
  }, function (t) {
5525
5525
  return t['input-height-border'];
5526
5526
  })), add(function (t) {
5527
- return calculate(t['input-line-height'], '*', 1);
5527
+ return calculate(t['input-line-height'], '*', t['input-font-size-lg']);
5528
5528
  }, // 1em
5529
5529
  add(function (t) {
5530
5530
  return calculate(t['input-padding-y-lg'], '*', 2);
@@ -7505,7 +7505,7 @@
7505
7505
 
7506
7506
  var _excluded$1l = ["children", "color", "size", "outline", "active", "disabled", "style", "activeStyle", "textStyle", "activeTextStyle"];
7507
7507
 
7508
- 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;
7508
+ 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;
7509
7509
  var propTypes$1p = {
7510
7510
  children: PropTypes.node.isRequired,
7511
7511
  color: PropTypes.oneOf([].concat(_toConsumableArray(Object.keys(THEME_COLORS)), ['link'])),
@@ -7545,7 +7545,7 @@
7545
7545
  return t['btn-active-bg-shade-amount'];
7546
7546
  }, value), shadeColor(function (t) {
7547
7547
  return t['btn-active-border-shade-amount'];
7548
- }, 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;
7548
+ }, 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;
7549
7549
  })), {}, {
7550
7550
  '.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 "]))),
7551
7551
  '.btn-link.disabled --text': css(_templateObject15$3 || (_templateObject15$3 = _taggedTemplateLiteral(["\n color: $btn-link-disabled-color;\n "]))),
@@ -8567,7 +8567,7 @@
8567
8567
 
8568
8568
  var _excluded$19 = ["type", "value", "onFocus", "onBlur", "disabled", "valid", "invalid", "useNativeComponent", "style"];
8569
8569
 
8570
- 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;
8570
+ 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;
8571
8571
  /* eslint-disable react/no-unused-prop-types */
8572
8572
 
8573
8573
  var propTypes$1c = {
@@ -8598,17 +8598,17 @@
8598
8598
  '.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) {
8599
8599
  return escapeSvg(t['form-check-radio-checked-bg-image']);
8600
8600
  }),
8601
- '.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 "])))
8601
+ '.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 "])))
8602
8602
  }, each(FORM_VALIDATION_STATES, function (state, data) {
8603
8603
  var _ref;
8604
8604
 
8605
- 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) {
8605
+ 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) {
8606
8606
  return data(t).color;
8607
8607
  }, function (t) {
8608
8608
  return data(t).color;
8609
8609
  }, function (t) {
8610
8610
  return data(t).color;
8611
- })), _defineProperty(_ref, ".form-check-input:".concat(state, ":checked"), css(_templateObject11$5 || (_templateObject11$5 = _taggedTemplateLiteral(["\n background-color: ", ";\n "])), function (t) {
8611
+ })), _defineProperty(_ref, ".form-check-input:".concat(state, ":checked"), css(_templateObject11$6 || (_templateObject11$6 = _taggedTemplateLiteral(["\n background-color: ", ";\n "])), function (t) {
8612
8612
  return data(t).color;
8613
8613
  })), _ref;
8614
8614
  })), {}, {
@@ -8877,7 +8877,7 @@
8877
8877
  });
8878
8878
  var initialState = {
8879
8879
  waitingForMouseUp: false,
8880
- isDialogClick: false
8880
+ ignoreBackdropClick: false
8881
8881
  };
8882
8882
 
8883
8883
  var BackdropHandler = function BackdropHandler(props) {
@@ -8904,24 +8904,25 @@
8904
8904
 
8905
8905
 
8906
8906
  var handleDialogMouseUp = function handleDialogMouseUp() {
8907
- state.isDialogClick = true;
8907
+ state.ignoreBackdropClick = true;
8908
8908
  };
8909
8909
 
8910
8910
  var handleDocumentClick = function handleDocumentClick(_ref) {
8911
8911
  var target = _ref.target;
8912
+ var isDialogClick = state.ignoreBackdropClick || dialog.contains(target);
8912
8913
 
8913
8914
  if (backdrop === 'static' || autoClose === false) {
8914
8915
  return;
8915
8916
  } // Click outside -> return if autoClose is inside.
8916
8917
 
8917
8918
 
8918
- if (!state.isDialogClick && autoClose === 'inside') {
8919
+ if (!isDialogClick && autoClose === 'inside') {
8919
8920
  return;
8920
8921
  } // Click inside / on dialog -> return if autoClose is outside.
8921
8922
 
8922
8923
 
8923
- if (state.isDialogClick) {
8924
- state.isDialogClick = false;
8924
+ if (isDialogClick) {
8925
+ state.ignoreBackdropClick = false;
8925
8926
 
8926
8927
  if (autoClose === 'outside') {
8927
8928
  return;
@@ -8938,7 +8939,7 @@
8938
8939
 
8939
8940
  var handleDocumentMouseUp = function handleDocumentMouseUp() {
8940
8941
  if (state.waitingForMouseUp) {
8941
- state.isDialogClick = true;
8942
+ state.ignoreBackdropClick = true;
8942
8943
  }
8943
8944
 
8944
8945
  state.waitingForMouseUp = false;
@@ -8978,7 +8979,7 @@
8978
8979
 
8979
8980
  var _excluded$15 = ["children", "start", "right", "end", "style", "textStyle"];
8980
8981
 
8981
- var _templateObject$U, _templateObject2$F, _templateObject3$k, _templateObject4$h, _templateObject5$e, _templateObject6$d, _templateObject7$8, _templateObject8$8, _templateObject9$7, _templateObject10$7;
8982
+ var _templateObject$U, _templateObject2$F, _templateObject3$k, _templateObject4$h, _templateObject5$e, _templateObject6$d, _templateObject7$8, _templateObject8$8, _templateObject9$8, _templateObject10$8;
8982
8983
  var ALIGNMENT_BREAKPOINTS = [true, 'sm', 'md', 'lg', 'xl', 'xxl'];
8983
8984
  var propTypes$16 = {
8984
8985
  children: PropTypes.node.isRequired,
@@ -9003,9 +9004,9 @@
9003
9004
  '.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 "]))),
9004
9005
  '.navbar-nav .dropdown-menu': css(_templateObject8$8 || (_templateObject8$8 = _taggedTemplateLiteral(["\n position: relative; // static;\n "])))
9005
9006
  }, each(GRID_BREAKPOINTS, function (breakpoint) {
9006
- 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)));
9007
+ 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)));
9007
9008
  })), {}, {
9008
- '.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 "])))
9009
+ '.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 "])))
9009
9010
  }));
9010
9011
 
9011
9012
  var getAlignment = function getAlignment(media, start, end) {
@@ -9671,7 +9672,7 @@
9671
9672
 
9672
9673
  var _excluded$R = ["size", "placeholderTextColor", "multiline", "disabled", "valid", "invalid", "editable", "selectTextOnFocus", "style"];
9673
9674
 
9674
- var _templateObject$H, _templateObject2$w, _templateObject3$g, _templateObject4$e, _templateObject5$c, _templateObject6$b, _templateObject7$7, _templateObject8$7;
9675
+ var _templateObject$H, _templateObject2$w, _templateObject3$g, _templateObject4$e, _templateObject5$c, _templateObject6$b, _templateObject7$7, _templateObject8$7, _templateObject9$7, _templateObject10$7, _templateObject11$5;
9675
9676
  var propTypes$T = {
9676
9677
  size: PropTypes.oneOf(['sm', 'lg']),
9677
9678
  placeholderTextColor: PropTypes.string,
@@ -9683,17 +9684,36 @@
9683
9684
  selectTextOnFocus: PropTypes.bool,
9684
9685
  // eslint-disable-next-line react/forbid-prop-types
9685
9686
  style: PropTypes.any
9686
- };
9687
+ }; // Known issues:
9688
+ //
9689
+ // line-height (iOS)
9690
+ // If a line height is defined on iOS the text will be displayed on the bottom
9691
+ // of the line. As a workaround the line height is only defined for multi line
9692
+ // inputs.
9693
+ //
9694
+ // multi line height (iOS)
9695
+ // A multi line input on iOS has only the height of a single line input. As a
9696
+ // workaround we added a height of $input-height-sm + 8rem for multi line
9697
+ // inputs on iOS.
9698
+ //
9699
+ // single line height (Android)
9700
+ // If no height is defined, Android sets a text line height of 28px auto-
9701
+ // matically, which leads to a larger height than min height for the default
9702
+ // and sm size. As a workaround we set a height for single line inputs.
9703
+
9687
9704
  var styles$G = StyleSheet.create(_objectSpread2({
9688
- '.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 "]))),
9705
+ '.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 "]))),
9689
9706
  '.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 "]))),
9690
- '.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 "]))),
9691
- '.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 "]))),
9692
- '.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 "]))),
9693
- '.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 "]))),
9694
- '.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 "])))
9707
+ '.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 "]))),
9708
+ '.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 "]))),
9709
+ '.form-control:not(textarea)': css(_templateObject5$c || (_templateObject5$c = _taggedTemplateLiteral(["\n @include platform(android) {\n height: $input-height; // added for bootstrap-rn\n }\n "]))),
9710
+ '.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 "]))),
9711
+ '.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 "]))),
9712
+ '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 "]))),
9713
+ '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 "]))),
9714
+ '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 "])))
9695
9715
  }, each(FORM_VALIDATION_STATES, function (state, data) {
9696
- 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) {
9716
+ 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) {
9697
9717
  return data(t).color;
9698
9718
  }, function (t) {
9699
9719
  return data(t).color;
@@ -9725,7 +9745,7 @@
9725
9745
  style = modifierProps.style,
9726
9746
  elementProps = _objectWithoutProperties(modifierProps, _excluded$R);
9727
9747
 
9728
- 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']);
9748
+ 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']);
9729
9749
  return /*#__PURE__*/React__default["default"].createElement(TextInput, _extends$1({}, elementProps, {
9730
9750
  ref: modifierRef,
9731
9751
  placeholderTextColor: placeholderTextColor,
@@ -10830,7 +10850,7 @@
10830
10850
  ModalTitle.displayName = 'ModalTitle';
10831
10851
  ModalTitle.propTypes = propTypes$B;
10832
10852
 
10833
- var _excluded$y = ["children", "style", "contentContainerStyle"];
10853
+ var _excluded$y = ["children", "style", "innerStyle"];
10834
10854
 
10835
10855
  var _templateObject$t;
10836
10856
  var propTypes$A = {
@@ -10838,7 +10858,7 @@
10838
10858
  // eslint-disable-next-line react/forbid-prop-types
10839
10859
  style: PropTypes.any,
10840
10860
  // eslint-disable-next-line react/forbid-prop-types
10841
- contentContainerStyle: PropTypes.any
10861
+ innerStyle: PropTypes.any
10842
10862
  };
10843
10863
  var styles$t = StyleSheet.create({
10844
10864
  '.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 "])))
@@ -10846,7 +10866,7 @@
10846
10866
  var ModalBody = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
10847
10867
  var children = props.children,
10848
10868
  style = props.style,
10849
- contentContainerStyle = props.contentContainerStyle,
10869
+ innerStyle = props.innerStyle,
10850
10870
  elementProps = _objectWithoutProperties(props, _excluded$y);
10851
10871
 
10852
10872
  var _useForcedContext = useForcedContext(ModalContext),
@@ -10857,7 +10877,7 @@
10857
10877
  return /*#__PURE__*/React__default["default"].createElement(FlexView, _extends$1({}, elementProps, {
10858
10878
  ref: ref,
10859
10879
  style: scrollable ? style : [classes, style],
10860
- contentContainerStyle: scrollable ? [classes, contentContainerStyle] : undefined
10880
+ contentContainerStyle: scrollable ? [classes, innerStyle] : undefined
10861
10881
  }), children);
10862
10882
  });
10863
10883
  ModalBody.displayName = 'ModalBody';
@@ -10888,7 +10908,7 @@
10888
10908
  ModalFooter.displayName = 'ModalFooter';
10889
10909
  ModalFooter.propTypes = propTypes$z;
10890
10910
 
10891
- var _excluded$w = ["children", "visible", "size", "backdrop", "scrollable", "centered", "onToggle", "style", "textStyle"];
10911
+ var _excluded$w = ["children", "visible", "size", "backdrop", "scrollable", "centered", "onToggle", "style", "innerStyle", "dialogStyle", "contentStyle", "textStyle", "dialogTextStyle", "contentTextStyle"];
10892
10912
 
10893
10913
  var _templateObject$r, _templateObject2$l, _templateObject3$a, _templateObject4$8, _templateObject5$6, _templateObject6$5, _templateObject7$3, _templateObject8$3, _templateObject9$3, _templateObject10$3, _templateObject11$2;
10894
10914
  var MODAL_SIZES = ['sm', 'lg', 'xl'];
@@ -10903,7 +10923,17 @@
10903
10923
  // eslint-disable-next-line react/forbid-prop-types
10904
10924
  style: PropTypes.any,
10905
10925
  // eslint-disable-next-line react/forbid-prop-types
10906
- textStyle: PropTypes.any
10926
+ innerStyle: PropTypes.any,
10927
+ // eslint-disable-next-line react/forbid-prop-types
10928
+ dialogStyle: PropTypes.any,
10929
+ // eslint-disable-next-line react/forbid-prop-types
10930
+ contentStyle: PropTypes.any,
10931
+ // eslint-disable-next-line react/forbid-prop-types
10932
+ textStyle: PropTypes.any,
10933
+ // eslint-disable-next-line react/forbid-prop-types
10934
+ dialogTextStyle: PropTypes.any,
10935
+ // eslint-disable-next-line react/forbid-prop-types
10936
+ contentTextStyle: PropTypes.any
10907
10937
  };
10908
10938
  var styles$r = StyleSheet.create({
10909
10939
  '.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 "]))),
@@ -10915,8 +10945,8 @@
10915
10945
  '.modal-content --text': css(_templateObject7$3 || (_templateObject7$3 = _taggedTemplateLiteral(["\n color: $modal-content-color;\n "]))),
10916
10946
  '.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 "]))),
10917
10947
  '.modal-sm': css(_templateObject9$3 || (_templateObject9$3 = _taggedTemplateLiteral(["\n @include media-breakpoint-up(sm) {\n max-width: $modal-sm;\n }\n "]))),
10918
- '.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 "]))),
10919
- '.modal-xl': css(_templateObject11$2 || (_templateObject11$2 = _taggedTemplateLiteral(["\n @include media-breakpoint-up(xl) {\n max-width: $modal-xl;\n }\n "])))
10948
+ '.modal-lg': css(_templateObject10$3 || (_templateObject10$3 = _taggedTemplateLiteral(["\n @include media-breakpoint-up(lg) {\n max-width: $modal-lg;\n }\n "]))),
10949
+ '.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 "])))
10920
10950
  });
10921
10951
  var Modal = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
10922
10952
  var children = props.children,
@@ -10930,7 +10960,12 @@
10930
10960
  centered = _props$centered === void 0 ? false : _props$centered,
10931
10961
  handleToggle = props.onToggle,
10932
10962
  style = props.style,
10963
+ innerStyle = props.innerStyle,
10964
+ dialogStyle = props.dialogStyle,
10965
+ contentStyle = props.contentStyle,
10933
10966
  textStyle = props.textStyle,
10967
+ dialogTextStyle = props.dialogTextStyle,
10968
+ contentTextStyle = props.contentTextStyle,
10934
10969
  elementProps = _objectWithoutProperties(props, _excluded$w);
10935
10970
 
10936
10971
  var dialogRef = React.useRef();
@@ -10953,10 +10988,11 @@
10953
10988
  }, backdrop && /*#__PURE__*/React__default["default"].createElement(View, {
10954
10989
  style: backdropClasses
10955
10990
  }), /*#__PURE__*/React__default["default"].createElement(FlexView, {
10956
- style: classes,
10957
- contentContainerStyle: scrollable ? undefined : {
10991
+ style: [classes, style],
10992
+ textStyle: textStyle,
10993
+ contentContainerStyle: [scrollable ? undefined : {
10958
10994
  flexGrow: 1
10959
- }
10995
+ }, innerStyle]
10960
10996
  }, /*#__PURE__*/React__default["default"].createElement(BackdropHandler, {
10961
10997
  dialogRef: dialogRef,
10962
10998
  onClose: handleToggle,
@@ -10967,11 +11003,12 @@
10967
11003
  }
10968
11004
  }, /*#__PURE__*/React__default["default"].createElement(View, {
10969
11005
  ref: dialogRef,
10970
- style: dialogClasses
11006
+ style: [dialogClasses, dialogStyle],
11007
+ textStyle: dialogTextStyle
10971
11008
  }, /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
10972
11009
  ref: ref,
10973
- style: [contentClasses, style],
10974
- textStyle: [contentTextClasses, textStyle]
11010
+ style: [contentClasses, contentStyle],
11011
+ textStyle: [contentTextClasses, contentTextStyle]
10975
11012
  }), /*#__PURE__*/React__default["default"].createElement(ModalContext.Provider, {
10976
11013
  value: modal
10977
11014
  }, /*#__PURE__*/React__default["default"].createElement(OverlayProvider, null, children)))))));
@@ -11494,7 +11531,7 @@
11494
11531
  OffcanvasBody.displayName = 'OffcanvasBody';
11495
11532
  OffcanvasBody.propTypes = propTypes$o;
11496
11533
 
11497
- var _excluded$j = ["children", "visible", "placement", "backdrop", "scroll", "onToggle", "style", "textStyle"];
11534
+ var _excluded$j = ["children", "visible", "placement", "backdrop", "scroll", "onToggle", "style", "dialogStyle", "textStyle", "dialogTextStyle"];
11498
11535
 
11499
11536
  var _templateObject$g, _templateObject2$b, _templateObject3$4, _templateObject4$3, _templateObject5$3, _templateObject6$2, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
11500
11537
  var PLACEMENTS = ['top', 'bottom', 'start', 'end']; // , 'auto'
@@ -11510,7 +11547,11 @@
11510
11547
  // eslint-disable-next-line react/forbid-prop-types
11511
11548
  style: PropTypes.any,
11512
11549
  // eslint-disable-next-line react/forbid-prop-types
11513
- textStyle: PropTypes.any
11550
+ dialogStyle: PropTypes.any,
11551
+ // eslint-disable-next-line react/forbid-prop-types
11552
+ textStyle: PropTypes.any,
11553
+ // eslint-disable-next-line react/forbid-prop-types
11554
+ dialogTextStyle: PropTypes.any
11514
11555
  };
11515
11556
  var styles$g = StyleSheet.create(_objectSpread2({
11516
11557
  '.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 "]))),
@@ -11542,7 +11583,9 @@
11542
11583
  scroll = _props$scroll === void 0 ? false : _props$scroll,
11543
11584
  handleToggle = props.onToggle,
11544
11585
  style = props.style,
11586
+ dialogStyle = props.dialogStyle,
11545
11587
  textStyle = props.textStyle,
11588
+ dialogTextStyle = props.dialogTextStyle,
11546
11589
  elementProps = _objectWithoutProperties(props, _excluded$j);
11547
11590
 
11548
11591
  var media = useMedia();
@@ -11585,7 +11628,8 @@
11585
11628
  flexShrink: 1
11586
11629
  }
11587
11630
  }, /*#__PURE__*/React__default["default"].createElement(View, {
11588
- style: dialogClasses
11631
+ style: [dialogClasses, dialogStyle],
11632
+ textStyle: dialogTextStyle
11589
11633
  }, /*#__PURE__*/React__default["default"].createElement(OffcanvasContext.Provider, {
11590
11634
  value: offcanvas
11591
11635
  }, /*#__PURE__*/React__default["default"].createElement(OverlayProvider, null, children))))));
@@ -11666,11 +11710,11 @@
11666
11710
  var PickerNativeContext = /*#__PURE__*/React__default["default"].createContext();
11667
11711
  PickerNativeContext.displayName = 'PickerNativeContext';
11668
11712
 
11669
- var _excluded$h = ["children", "selectedValue", "onValueChange", "onFocus", "onBlur", "placeholder", "placeholderTextColor", "disabled", "renderText", "renderMenu", "style"];
11713
+ var _excluded$h = ["children", "selectedValue", "onValueChange", "onFocus", "onBlur", "placeholder", "placeholderTextColor", "disabled", "MenuComponent", "style"];
11670
11714
 
11671
11715
  var _templateObject$f;
11672
11716
  var propTypes$l = {
11673
- children: PropTypes.node,
11717
+ children: PropTypes.node.isRequired,
11674
11718
  selectedValue: PropTypes.oneOfType([PropTypes.bool, PropTypes.number, PropTypes.string, PropTypes.object]),
11675
11719
  onValueChange: PropTypes.func,
11676
11720
  onFocus: PropTypes.func,
@@ -11678,8 +11722,7 @@
11678
11722
  placeholder: PropTypes.string,
11679
11723
  placeholderTextColor: PropTypes.string,
11680
11724
  disabled: PropTypes.bool,
11681
- renderText: PropTypes.func,
11682
- renderMenu: PropTypes.func,
11725
+ MenuComponent: PropTypes.elementType,
11683
11726
  // eslint-disable-next-line react/forbid-prop-types
11684
11727
  style: PropTypes.any
11685
11728
  };
@@ -11703,7 +11746,7 @@
11703
11746
  return textStyles;
11704
11747
  };
11705
11748
 
11706
- var renderTextDefault = function renderTextDefault(_ref3) {
11749
+ var getText = function getText(_ref3) {
11707
11750
  var children = _ref3.children,
11708
11751
  selectedValue = _ref3.selectedValue;
11709
11752
  var items = React__default["default"].Children.map(children, function (child) {
@@ -11717,12 +11760,14 @@
11717
11760
  });
11718
11761
  return selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.label;
11719
11762
  };
11763
+ /* eslint-disable react/prop-types */
11720
11764
 
11721
- var renderMenuDefault = function renderMenuDefault(_ref4) {
11765
+
11766
+ var DefaultMenuComponent = function DefaultMenuComponent(_ref4) {
11722
11767
  var children = _ref4.children,
11723
11768
  selectedValue = _ref4.selectedValue,
11724
- handleValueChange = _ref4.handleValueChange,
11725
- handleClose = _ref4.handleClose;
11769
+ handleValueChange = _ref4.onValueChange,
11770
+ handleClose = _ref4.onClose;
11726
11771
  return /*#__PURE__*/React__default["default"].createElement(Offcanvas, {
11727
11772
  placement: "bottom",
11728
11773
  visible: true,
@@ -11736,6 +11781,8 @@
11736
11781
  }
11737
11782
  }, children)));
11738
11783
  };
11784
+ /* eslint-enable */
11785
+
11739
11786
 
11740
11787
  var PickerNative = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
11741
11788
  var children = props.children,
@@ -11747,14 +11794,11 @@
11747
11794
  _props$onBlur = props.onBlur,
11748
11795
  onBlur = _props$onBlur === void 0 ? function () {} : _props$onBlur,
11749
11796
  placeholder = props.placeholder,
11750
- _props$placeholderTex = props.placeholderTextColor,
11751
- placeholderTextColor = _props$placeholderTex === void 0 ? StyleSheet.value('input-placeholder-color') : _props$placeholderTex,
11797
+ placeholderTextColor = props.placeholderTextColor,
11752
11798
  _props$disabled = props.disabled,
11753
11799
  disabled = _props$disabled === void 0 ? false : _props$disabled,
11754
- _props$renderText = props.renderText,
11755
- renderText = _props$renderText === void 0 ? renderTextDefault : _props$renderText,
11756
- _props$renderMenu = props.renderMenu,
11757
- renderMenu = _props$renderMenu === void 0 ? renderMenuDefault : _props$renderMenu,
11800
+ _props$MenuComponent = props.MenuComponent,
11801
+ MenuComponent = _props$MenuComponent === void 0 ? DefaultMenuComponent : _props$MenuComponent,
11758
11802
  style = props.style,
11759
11803
  elementProps = _objectWithoutProperties(props, _excluded$h);
11760
11804
 
@@ -11780,10 +11824,6 @@
11780
11824
  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Pressable, _extends$1({}, elementProps, {
11781
11825
  ref: ref,
11782
11826
  accessibilityRole: "combobox",
11783
- accessibilityDisabled: disabled,
11784
- accessible: true,
11785
- focusable: !disabled,
11786
- selectable: false,
11787
11827
  onPress: function onPress() {
11788
11828
  setVisible(true);
11789
11829
  },
@@ -11796,15 +11836,14 @@
11796
11836
  style: [textStyle, showPlaceholder && {
11797
11837
  color: placeholderTextColor
11798
11838
  }]
11799
- }, showPlaceholder ? placeholder : renderText({
11839
+ }, showPlaceholder ? placeholder : getText({
11800
11840
  children: children,
11801
11841
  selectedValue: selectedValue
11802
- }))), visible && renderMenu({
11803
- children: children,
11842
+ }))), visible && /*#__PURE__*/React__default["default"].createElement(MenuComponent, {
11804
11843
  selectedValue: selectedValue,
11805
- handleValueChange: handleValueChange,
11806
- handleClose: handleClose
11807
- }));
11844
+ onValueChange: handleValueChange,
11845
+ onClose: handleClose
11846
+ }, children));
11808
11847
  });
11809
11848
  PickerNative.propTypes = propTypes$l;
11810
11849
 
@@ -11908,7 +11947,7 @@
11908
11947
  /* eslint-disable react/no-unused-prop-types */
11909
11948
 
11910
11949
  var propTypes$h = {
11911
- children: PropTypes.node,
11950
+ children: PropTypes.node.isRequired,
11912
11951
  onFocus: PropTypes.func,
11913
11952
  onBlur: PropTypes.func,
11914
11953
  placeholderTextColor: PropTypes.string,