bootstrap-rn 0.2.5 → 0.2.6

package/dist/bootstrap-rn.umd.js

@@ -340,11 +340,11 @@
   function PortalProvider(props) {
     const [items, setItems] = React__default["default"].useState([]);
 
-    const setOverlayItem = item => {
+    const setOverlayItem = element => {
       const overlayId = ++globalOverlayCounter;
       setItems(prev => prev.concat([{
         id: overlayId,
-        node: item
+        node: element
       }]));
       return overlayId;
     };
@@ -374,7 +374,8 @@
         items,
         setOverlayItem,
         removeOverlayItem,
-        updateOverlayItem
+        updateOverlayItem,
+        isSSR: props === null || props === void 0 ? void 0 : props.isSSR
       }
     }, props.children, items.map(item => {
       return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
@@ -383,10 +384,13 @@
     }));
   }
 
-  function OverlayView(props) {
+  function OverlayView({
+    style,
+    ...props
+  }) {
     return /*#__PURE__*/React__default["default"].createElement(reactNative.View, _extends$2({
       pointerEvents: "box-none",
-      style: reactNative.StyleSheet.absoluteFill,
+      style: [reactNative.StyleSheet.absoluteFill, style],
       collapsable: false
     }, props));
   }
@@ -395,15 +399,15 @@
   function OverlayContainer(props) {
     const context = usePortalProvider();
     const overlayId = React__default["default"].useRef(undefined);
-    let contents = /*#__PURE__*/React__default["default"].createElement(OverlayView, props);
+    const element = /*#__PURE__*/React__default["default"].createElement(OverlayView, props);
     React.useEffect(() => {
       // Mount
       if (overlayId.current === undefined) {
-        overlayId.current = context === null || context === void 0 ? void 0 : context.setOverlayItem(contents);
+        overlayId.current = context === null || context === void 0 ? void 0 : context.setOverlayItem(element);
       } // Update
       else {
           if (overlayId.current) {
-            context === null || context === void 0 ? void 0 : context.updateOverlayItem(overlayId.current, contents);
+            context === null || context === void 0 ? void 0 : context.updateOverlayItem(overlayId.current, element);
           }
         }
     }, // To re-render the child
@@ -415,7 +419,16 @@
           context === null || context === void 0 ? void 0 : context.removeOverlayItem(overlayId.current);
         }
       };
-    }, []);
+    }, []); // Rendering elements for SSR
+
+    if (context !== null && context !== void 0 && context.isSSR && !overlayId.current) {
+      return /*#__PURE__*/React__default["default"].createElement(reactNative.View, {
+        style: {
+          display: 'none'
+        }
+      }, element);
+    }
+
     return null;
   }
 
@@ -2385,6 +2398,19 @@
     return out;
   };
 
+  var fontVariant = function fontVariant(tokenStream) {
+    var values = [tokenStream.expect(IDENT)];
+
+    while (tokenStream.hasTokens()) {
+      tokenStream.expect(SPACE);
+      values.push(tokenStream.expect(IDENT));
+    }
+
+    return {
+      fontVariant: values
+    };
+  };
+
   var ALIGN_CONTENT = regExpToken(/(flex-(?:start|end)|center|stretch|space-(?:between|around))/);
   var JUSTIFY_CONTENT = regExpToken(/(flex-(?:start|end)|center|space-(?:between|around|evenly))/);
 
@@ -2590,12 +2616,6 @@
     prefix: 'padding'
   });
 
-  var fontVariant = function fontVariant(tokenStream) {
-    return {
-      fontVariant: [tokenStream.expect(IDENT)]
-    };
-  };
-
   var fontWeight = function fontWeight(tokenStream) {
     return {
       fontWeight: tokenStream.expect(WORD) // Also match numbers as strings
@@ -4172,19 +4192,6 @@
       });
     };
   }
-  function concatFns() {
-    for (var _len2 = arguments.length, fns = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-      fns[_key2] = arguments[_key2];
-    }
-
-    return function (event) {
-      fns.forEach(function (fn) {
-        if (fn) {
-          fn(event);
-        }
-      });
-    };
-  }
   function optional(condition, value) {
     return condition ? value : undefined;
   }
@@ -5040,13 +5047,13 @@
 
   };
 
-  var _templateObject$1e, _templateObject2$V;
+  var _templateObject$1f, _templateObject2$W;
   function makeUtility(options) {
     return each(options.values, function (key, value) {
       var name = options.class || options.property;
       var suffix = key === 'null' ? '' : "-".concat(key);
 
-      var styles = _defineProperty({}, "".concat(name).concat(suffix), css(_templateObject$1e || (_templateObject$1e = _taggedTemplateLiteral(["\n        ", ": ", ";\n      "])), options.property, value));
+      var styles = _defineProperty({}, "".concat(name).concat(suffix), css(_templateObject$1f || (_templateObject$1f = _taggedTemplateLiteral(["\n        ", ": ", ";\n      "])), options.property, value));
 
       if (!options.responsive) {
         return styles;
@@ -5057,7 +5064,7 @@
           return null;
         }
 
-        return _defineProperty({}, "".concat(name, "-").concat(breakpoint).concat(suffix), css(_templateObject2$V || (_templateObject2$V = _taggedTemplateLiteral(["\n            @include media-breakpoint-up(", ") {\n              ", ": ", ";\n            }\n          "])), breakpoint, options.property, value));
+        return _defineProperty({}, "".concat(name, "-").concat(breakpoint).concat(suffix), css(_templateObject2$W || (_templateObject2$W = _taggedTemplateLiteral(["\n            @include media-breakpoint-up(", ") {\n              ", ": ", ";\n            }\n          "])), breakpoint, options.property, value));
       }));
     });
   }
@@ -5247,7 +5254,7 @@
   });
   /* eslint-enable */
 
-  var _templateObject$1d;
+  var _templateObject$1e;
 
   var url = function url(val) {
     return function (t) {
@@ -5257,7 +5264,7 @@
     };
   };
 
-  var variables = css(_templateObject$1d || (_templateObject$1d = _taggedTemplateLiteral(["\n  // Color system\n\n  $white: #fff;\n  $gray-100: #f8f9fa;\n  $gray-200: #e9ecef;\n  $gray-300: #dee2e6;\n  $gray-400: #ced4da;\n  $gray-500: #adb5bd;\n  $gray-600: #6c757d;\n  $gray-700: #495057;\n  $gray-800: #343a40;\n  $gray-900: #212529;\n  $black: #000;\n\n  $grays: ", ";\n\n  $blue: #0d6efd;\n  $indigo: #6610f2;\n  $purple: #6f42c1;\n  $pink: #d63384;\n  $red: #dc3545;\n  $orange: #fd7e14;\n  $yellow: #ffc107;\n  $green: #198754;\n  $teal: #20c997;\n  $cyan: #0dcaf0;\n\n  $colors: ", ";\n\n  $primary: $blue;\n  $secondary: $gray-600;\n  $success: $green;\n  $info: $cyan;\n  $warning: $yellow;\n  $danger: $red;\n  $light: $gray-100;\n  $dark: $gray-900;\n\n  $theme-colors: ", ";\n\n  // The contrast ratio to reach against white, to determine if color changes from \"light\" to \"dark\". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.\n  // See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast\n  $min-contrast-ratio: 4.5;\n\n  // Customize the light and dark text colors for use in our color contrast function.\n  $color-contrast-dark: $black;\n  $color-contrast-light: $white;\n\n  $blue-100: tint-color($blue, 80%);\n  $blue-200: tint-color($blue, 60%);\n  $blue-300: tint-color($blue, 40%);\n  $blue-400: tint-color($blue, 20%);\n  $blue-500: $blue;\n  $blue-600: shade-color($blue, 20%);\n  $blue-700: shade-color($blue, 40%);\n  $blue-800: shade-color($blue, 60%);\n  $blue-900: shade-color($blue, 80%);\n\n  $indigo-100: tint-color($indigo, 80%);\n  $indigo-200: tint-color($indigo, 60%);\n  $indigo-300: tint-color($indigo, 40%);\n  $indigo-400: tint-color($indigo, 20%);\n  $indigo-500: $indigo;\n  $indigo-600: shade-color($indigo, 20%);\n  $indigo-700: shade-color($indigo, 40%);\n  $indigo-800: shade-color($indigo, 60%);\n  $indigo-900: shade-color($indigo, 80%);\n\n  $purple-100: tint-color($purple, 80%);\n  $purple-200: tint-color($purple, 60%);\n  $purple-300: tint-color($purple, 40%);\n  $purple-400: tint-color($purple, 20%);\n  $purple-500: $purple;\n  $purple-600: shade-color($purple, 20%);\n  $purple-700: shade-color($purple, 40%);\n  $purple-800: shade-color($purple, 60%);\n  $purple-900: shade-color($purple, 80%);\n\n  $pink-100: tint-color($pink, 80%);\n  $pink-200: tint-color($pink, 60%);\n  $pink-300: tint-color($pink, 40%);\n  $pink-400: tint-color($pink, 20%);\n  $pink-500: $pink;\n  $pink-600: shade-color($pink, 20%);\n  $pink-700: shade-color($pink, 40%);\n  $pink-800: shade-color($pink, 60%);\n  $pink-900: shade-color($pink, 80%);\n\n  $red-100: tint-color($red, 80%);\n  $red-200: tint-color($red, 60%);\n  $red-300: tint-color($red, 40%);\n  $red-400: tint-color($red, 20%);\n  $red-500: $red;\n  $red-600: shade-color($red, 20%);\n  $red-700: shade-color($red, 40%);\n  $red-800: shade-color($red, 60%);\n  $red-900: shade-color($red, 80%);\n\n  $orange-100: tint-color($orange, 80%);\n  $orange-200: tint-color($orange, 60%);\n  $orange-300: tint-color($orange, 40%);\n  $orange-400: tint-color($orange, 20%);\n  $orange-500: $orange;\n  $orange-600: shade-color($orange, 20%);\n  $orange-700: shade-color($orange, 40%);\n  $orange-800: shade-color($orange, 60%);\n  $orange-900: shade-color($orange, 80%);\n\n  $yellow-100: tint-color($yellow, 80%);\n  $yellow-200: tint-color($yellow, 60%);\n  $yellow-300: tint-color($yellow, 40%);\n  $yellow-400: tint-color($yellow, 20%);\n  $yellow-500: $yellow;\n  $yellow-600: shade-color($yellow, 20%);\n  $yellow-700: shade-color($yellow, 40%);\n  $yellow-800: shade-color($yellow, 60%);\n  $yellow-900: shade-color($yellow, 80%);\n\n  $green-100: tint-color($green, 80%);\n  $green-200: tint-color($green, 60%);\n  $green-300: tint-color($green, 40%);\n  $green-400: tint-color($green, 20%);\n  $green-500: $green;\n  $green-600: shade-color($green, 20%);\n  $green-700: shade-color($green, 40%);\n  $green-800: shade-color($green, 60%);\n  $green-900: shade-color($green, 80%);\n\n  $teal-100: tint-color($teal, 80%);\n  $teal-200: tint-color($teal, 60%);\n  $teal-300: tint-color($teal, 40%);\n  $teal-400: tint-color($teal, 20%);\n  $teal-500: $teal;\n  $teal-600: shade-color($teal, 20%);\n  $teal-700: shade-color($teal, 40%);\n  $teal-800: shade-color($teal, 60%);\n  $teal-900: shade-color($teal, 80%);\n\n  $cyan-100: tint-color($cyan, 80%);\n  $cyan-200: tint-color($cyan, 60%);\n  $cyan-300: tint-color($cyan, 40%);\n  $cyan-400: tint-color($cyan, 20%);\n  $cyan-500: $cyan;\n  $cyan-600: shade-color($cyan, 20%);\n  $cyan-700: shade-color($cyan, 40%);\n  $cyan-800: shade-color($cyan, 60%);\n  $cyan-900: shade-color($cyan, 80%);\n\n  $blues: ", ";\n\n  $indigos: ", ";\n\n  $purples: ", ";\n\n  $pinks: ", ";\n\n  $reds: ", ";\n\n  $oranges: ", ";\n\n  $yellows: ", ";\n\n  $greens: ", ";\n\n  $teals: ", ";\n\n  $cyans: ", ";\n\n  // Characters which are escaped by the escape-svg function\n  // $escaped characters\n\n  // Options\n  //\n  // Quickly modify global styling by enabling or disabling optional features.\n\n  // NOTE: Handled by JavaScript.\n\n  // Gradient\n  //\n  // The gradient which is added to components if \"$enable-gradients\" is \"true\"\n  // This gradient is also added to elements with \".bg-gradient\"\n  $gradient: linear-gradient(180deg, rgba($white, 0.15), rgba($white, 0));\n\n  // Spacing\n  //\n  // Control the default styling of most Bootstrap elements by modifying these\n  // variables. Mostly focused on spacing.\n  // You can add more entries to the $spacers map, should you need more variation.\n\n  $spacer: 1rem;\n  $spacers: ", ";\n\n  // Position\n  //\n  // Define the edge positioning anchors of the position utilities.\n\n  $position-values: ", ";\n\n  // Placeholder\n\n  $placeholder-opacity-max: 0.5;\n  $placeholder-opacity-min: 0.2;\n\n  // Body\n  //\n  // Settings for the \"<body>\" element.\n\n  $body-bg: $white;\n  $body-color: $gray-900;\n  $body-text-align: null;\n\n  // Links\n  //\n  // Style anchor elements.\n\n  $link-color: $primary;\n  $link-decoration: underline;\n  $link-shade-percentage: 0.2; // 20%;\n  $link-hover-color: ", ";\n  $link-hover-decoration: null;\n\n  $stretched-link-pseudo-element: after;\n  $stretched-link-z-index: 1;\n\n  // Paragraphs\n  //\n  // Style p element.\n\n  $paragraph-margin-bottom: 1rem;\n\n  // Grid breakpoints\n  //\n  // Define the minimum dimensions at which your layout will change,\n  // adapting to different screen sizes, for use in media queries.\n\n  $grid-breakpoints: ", ";\n\n  // Grid containers\n  //\n  // Define the maximum width of \".container\" for different screen sizes.\n\n  $container-max-widths: ", ";\n\n  // Grid columns\n  //\n  // Set the number of columns and specify the width of the gutters.\n\n  // $grid-columns: 12;\n  $grid-gutter-width: 1.5rem;\n  // $grid-row-columns: 6;\n\n  // Container padding\n\n  $container-padding-x: $grid-gutter-width * 0.5;\n\n  // Components\n  //\n  // Define common padding and border radius sizes and more.\n\n  $border-width: 1px;\n  $border-widths: ", ";\n\n  $border-color: $gray-300;\n\n  $border-radius: 0.25rem;\n  $border-radius-sm: 0.2rem;\n  $border-radius-lg: 0.3rem;\n  $border-radius-pill: 50rem;\n\n  $box-shadow: 0 0.5rem 1rem rgba($black, 0.15);\n  $box-shadow-sm: 0 0.125rem 0.25rem rgba($black, 0.075);\n  $box-shadow-lg: 0 1rem 3rem rgba($black, 0.175);\n  $box-shadow-inset: inset 0 1px 2px rgba($black, 0.075);\n\n  $component-active-color: $white;\n  $component-active-bg: $primary;\n\n  $caret-width: 0.3em;\n  $caret-vertical-align: $caret-width * 0.85;\n  $caret-spacing: $caret-width * 0.85;\n\n  $transition-base: all 0.2s ease-in-out;\n  $transition-fade: opacity 0.15s linear;\n  $transition-collapse: height 0.35s ease;\n  $transition-collapse-width: width 0.35s ease;\n\n  $aspect-ratios: ", ";\n\n  // Typography\n  //\n  // Font, line-height, and color for body text, headings, and more.\n\n  $font-family-sans-serif: ", ";\n  $font-family-monospace: ", ";\n  $font-family-base: $font-family-sans-serif;\n  $font-family-code: $font-family-monospace;\n\n  // $font-size-root affects the value of \"rem\", which is used for as well font sizes, paddings, and margins\n  // $font-size-base affects the font size of the body text\n  $font-size-root: null;\n  $font-size-base: 1rem; // Assumes the browser default, typically \"16px\"\n  $font-size-sm: $font-size-base * 0.875;\n  $font-size-lg: $font-size-base * 1.25;\n\n  $font-weight-lighter: 300; // lighter;\n  $font-weight-light: 300;\n  $font-weight-normal: 400;\n  $font-weight-bold: 700;\n  $font-weight-bolder: 500; // bolder;\n\n  $font-weight-base: $font-weight-normal;\n\n  $line-height-base: 1.5;\n  $line-height-sm: 1.25;\n  $line-height-lg: 2;\n\n  $h1-font-size: $font-size-base * 2.5;\n  $h2-font-size: $font-size-base * 2;\n  $h3-font-size: $font-size-base * 1.75;\n  $h4-font-size: $font-size-base * 1.5;\n  $h5-font-size: $font-size-base * 1.25;\n  $h6-font-size: $font-size-base;\n\n  $font-sizes: ", ";\n\n  $headings-margin-bottom: $spacer * 0.5;\n  $headings-font-family: null;\n  $headings-font-style: null;\n  $headings-font-weight: 500;\n  $headings-line-height: 1.2;\n  $headings-color: null;\n\n  $display-font-sizes: ", ";\n\n  $display-font-weight: 300;\n  $display-line-height: $headings-line-height;\n\n  $lead-font-size: $font-size-base * 1.25;\n  $lead-font-weight: 300;\n\n  $small-font-size: $font-size-base * 0.875; // 0.875em;\n\n  $sub-sup-font-size: $font-size-base * 0.75; // 0.75em;\n\n  $text-muted: $gray-600;\n\n  $initialism-font-size: $small-font-size;\n\n  $blockquote-margin-y: $spacer;\n  $blockquote-font-size: $font-size-base * 1.25;\n  $blockquote-footer-color: $gray-600;\n  $blockquote-footer-font-size: $small-font-size;\n\n  $hr-margin-y: $spacer;\n  $hr-color: inherit;\n  $hr-bg-color: currentColor;\n  $hr-border-width: 0;\n  $hr-height: $border-width;\n  $hr-opacity: 0.25;\n\n  $legend-margin-bottom: 0.5rem;\n  $legend-font-size: 1.5rem;\n  $legend-font-weight: null;\n\n  $mark-padding: $font-size-base * 0.2; // 0.2em;\n\n  $dt-font-weight: $font-weight-bold;\n\n  $nested-kbd-font-weight: $font-weight-bold;\n\n  $list-inline-padding: 0.5rem;\n\n  $mark-bg: #fcf8e3;\n\n  // ...\n\n  // Buttons + Forms\n  //\n  // Shared variables that are reassigned to \"$input-\" and \"$btn-\" specific variables.\n\n  $input-btn-padding-y: 0.375rem;\n  $input-btn-padding-x: 0.75rem;\n  $input-btn-font-family: null;\n  $input-btn-font-size: $font-size-base;\n  $input-btn-line-height: $line-height-base;\n\n  $input-btn-focus-width: 0.25rem;\n  $input-btn-focus-color-opacity: 0.25;\n  $input-btn-focus-color: rgba(\n    $component-active-bg,\n    $input-btn-focus-color-opacity\n  );\n  $input-btn-focus-blur: 0;\n  $input-btn-focus-box-shadow: 0 0 $input-btn-focus-blur $input-btn-focus-width\n    $input-btn-focus-color;\n\n  $input-btn-padding-y-sm: 0.25rem;\n  $input-btn-padding-x-sm: 0.5rem;\n  $input-btn-font-size-sm: $font-size-sm;\n\n  $input-btn-padding-y-lg: 0.5rem;\n  $input-btn-padding-x-lg: 1rem;\n  $input-btn-font-size-lg: $font-size-lg;\n\n  $input-btn-border-width: $border-width;\n\n  // Buttons\n  //\n  // For each of Bootstrap's buttons, define text, background, and border color.\n\n  $btn-padding-y: $input-btn-padding-y;\n  $btn-padding-x: $input-btn-padding-x;\n  $btn-font-family: $input-btn-font-family;\n  $btn-font-size: $input-btn-font-size;\n  $btn-line-height: $input-btn-line-height;\n  $btn-white-space: null; // Set to \"nowrap\" to prevent text wrapping\n\n  $btn-padding-y-sm: $input-btn-padding-y-sm;\n  $btn-padding-x-sm: $input-btn-padding-x-sm;\n  $btn-font-size-sm: $input-btn-font-size-sm;\n\n  $btn-padding-y-lg: $input-btn-padding-y-lg;\n  $btn-padding-x-lg: $input-btn-padding-x-lg;\n  $btn-font-size-lg: $input-btn-font-size-lg;\n\n  $btn-border-width: $input-btn-border-width;\n\n  $btn-font-weight: $font-weight-normal;\n  $btn-box-shadow: inset 0 1px 0 rgba($white, 0.15),\n    0 1px 1px rgba($black, 0.075);\n  $btn-focus-width: $input-btn-focus-width;\n  $btn-focus-box-shadow: $input-btn-focus-box-shadow;\n  $btn-disabled-opacity: 0.65;\n  $btn-active-box-shadow: inset 0 3px 5px rgba($black, 0.125);\n\n  $btn-link-color: $link-color;\n  $btn-link-hover-color: $link-hover-color;\n  $btn-link-disabled-color: $gray-600;\n\n  // Allows for customizing button radius independently from global border radius\n  $btn-border-radius: $border-radius;\n  $btn-border-radius-sm: $border-radius-sm;\n  $btn-border-radius-lg: $border-radius-lg;\n\n  $btn-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,\n    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n\n  $btn-hover-bg-shade-amount: 0.15; // 15%;\n  $btn-hover-bg-tint-amount: 0.15; // 15%;\n  $btn-hover-border-shade-amount: 0.2; // 20%;\n  $btn-hover-border-tint-amount: 0.1; // 10%;\n  $btn-active-bg-shade-amount: 0.2; // 20%;\n  $btn-active-bg-tint-amount: 0.2; // 20%;\n  $btn-active-border-shade-amount: 0.25; // 25%;\n  $btn-active-border-tint-amount: 0.1; // 10%;\n\n  // Breadcrumb\n\n  $breadcrumb-font-size: $font-size-base; // null;\n  $breadcrumb-padding-y: 0;\n  $breadcrumb-padding-x: 0;\n  $breadcrumb-item-padding-x: 0.5rem;\n  $breadcrumb-margin-bottom: 1rem;\n  $breadcrumb-bg: null;\n  $breadcrumb-divider-color: $gray-600;\n  $breadcrumb-active-color: $gray-600;\n  $breadcrumb-divider: ", "; // quote('/');\n  $breadcrumb-divider-flipped: $breadcrumb-divider;\n  $breadcrumb-border-radius: null;\n\n  // Forms\n\n  $form-text-margin-top: 0.25rem;\n  $form-text-font-size: $small-font-size;\n  $form-text-font-style: null;\n  $form-text-font-weight: null;\n  $form-text-color: $text-muted;\n\n  $form-label-margin-bottom: 0.5rem;\n  $form-label-font-size: $font-size-base; // null;\n  $form-label-font-style: null;\n  $form-label-font-weight: null;\n  $form-label-color: null;\n\n  $input-padding-y: $input-btn-padding-y;\n  $input-padding-x: $input-btn-padding-x;\n  $input-font-family: $input-btn-font-family;\n  $input-font-size: $input-btn-font-size;\n  $input-font-weight: $font-weight-base;\n  $input-line-height: $input-btn-line-height;\n\n  $input-padding-y-sm: $input-btn-padding-y-sm;\n  $input-padding-x-sm: $input-btn-padding-x-sm;\n  $input-font-size-sm: $input-btn-font-size-sm;\n\n  $input-padding-y-lg: $input-btn-padding-y-lg;\n  $input-padding-x-lg: $input-btn-padding-x-lg;\n  $input-font-size-lg: $input-btn-font-size-lg;\n\n  $input-bg: $body-bg;\n  $input-disabled-bg: $gray-200;\n  $input-disabled-border-color: null;\n\n  $input-color: $body-color;\n  $input-border-color: $gray-400;\n  $input-border-width: $input-btn-border-width;\n  $input-box-shadow: $box-shadow-inset;\n\n  $input-border-radius: $border-radius;\n  $input-border-radius-sm: $border-radius-sm;\n  $input-border-radius-lg: $border-radius-lg;\n\n  $input-focus-bg: $input-bg;\n  $input-focus-border-color: ", ";\n  $input-focus-color: $input-color;\n  $input-focus-width: $input-btn-focus-width;\n  $input-focus-box-shadow: $input-btn-focus-box-shadow;\n\n  $input-placeholder-color: $gray-600;\n  $input-plaintext-color: $body-color;\n\n  $input-height-border: $input-border-width * 2;\n\n  $input-height-inner: ", ";\n  $input-height-inner-half: ", ";\n  $input-height-inner-quarter: ", ";\n\n  $input-height: ", ";\n  $input-height-sm: ", ";\n  $input-height-lg: ", ";\n\n  $input-transition: border-color 0.15s ease-in-out,\n    box-shadow 0.15s ease-in-out;\n\n  $form-color-width: 3rem;\n\n  $form-check-input-width: $font-size-base * 1; // 1em;\n  $form-check-min-height: $font-size-base * $line-height-base;\n  $form-check-padding-start: $form-check-input-width + 0.5rem; // 0.5em;\n  $form-check-margin-bottom: 0.125rem;\n  $form-check-label-color: null;\n  $form-check-label-cursor: null;\n  $form-check-transition: null;\n\n  $form-check-input-active-filter: brightness(90%);\n\n  $form-check-input-bg: $input-bg;\n  $form-check-input-border: 1px solid rgba($black, 0.25);\n  $form-check-input-border-radius: $font-size-base * 0.25; // 0.25em;\n  $form-check-radio-border-radius: 50px; // 50%;\n  $form-check-input-focus-border: $input-focus-border-color;\n  $form-check-input-focus-box-shadow: $input-btn-focus-box-shadow;\n\n  $form-check-input-checked-color: $component-active-color;\n  $form-check-input-checked-bg-color: $component-active-bg;\n  $form-check-input-checked-border-color: $form-check-input-checked-bg-color;\n  $form-check-input-checked-bg-image: ", ";\n  $form-check-radio-checked-bg-image: ", ";\n\n  $form-check-input-indeterminate-color: $component-active-color;\n  $form-check-input-indeterminate-bg-color: $component-active-bg;\n  $form-check-input-indeterminate-border-color: $form-check-input-indeterminate-bg-color;\n  $form-check-input-indeterminate-bg-image: ", ";\n\n  $form-check-input-disabled-opacity: 0.5;\n  $form-check-label-disabled-opacity: $form-check-input-disabled-opacity;\n  $form-check-btn-check-disabled-opacity: $btn-disabled-opacity;\n\n  $form-check-inline-margin-end: 1rem;\n\n  $form-switch-color: rgba($black, 0.25);\n  $form-switch-width: 2rem;\n  $form-switch-padding-start: $form-switch-width + 0.5rem;\n  $form-switch-bg-image: ", ";\n  $form-switch-border-radius: $form-switch-width;\n  $form-switch-transition: background-position 0.15s ease-in-out;\n\n  $form-switch-focus-color: $input-focus-border-color;\n  $form-switch-focus-bg-image: ", ";\n\n  $form-switch-checked-color: $component-active-color;\n  $form-switch-checked-bg-image: ", ";\n  $form-switch-checked-bg-position: right center;\n\n  $input-group-addon-padding-y: $input-padding-y;\n  $input-group-addon-padding-x: $input-padding-x;\n  $input-group-addon-font-weight: $input-font-weight;\n  $input-group-addon-color: $input-color;\n  $input-group-addon-bg: $gray-200;\n  $input-group-addon-border-color: $input-border-color;\n\n  $form-select-padding-y: $input-padding-y;\n  $form-select-padding-x: $input-padding-x;\n  $form-select-font-family: $input-font-family;\n  $form-select-font-size: $input-font-size;\n  $form-select-indicator-padding: $form-select-padding-x * 3; // Extra padding for background-image\n  $form-select-font-weight: $input-font-weight;\n  $form-select-line-height: $input-line-height;\n  $form-select-color: $input-color;\n  $form-select-bg: $input-bg;\n  $form-select-disabled-color: null;\n  $form-select-disabled-bg: $gray-200;\n  $form-select-disabled-border-color: $input-disabled-border-color;\n  $form-select-bg-position: right $form-select-padding-x center;\n  $form-select-bg-size: 16px 12px; // In pixels because image dimensions\n  $form-select-indicator-color: $gray-800;\n  $form-select-indicator: ", ";\n\n  $form-select-feedback-icon-padding-end: $form-select-padding-x * 2.5 +\n    $form-select-indicator-padding;\n  $form-select-feedback-icon-position: center right\n    $form-select-indicator-padding;\n  $form-select-feedback-icon-size: $input-height-inner-half\n    $input-height-inner-half;\n\n  $form-select-border-width: $input-border-width;\n  $form-select-border-color: $input-border-color;\n  $form-select-border-radius: $input-border-radius;\n  $form-select-box-shadow: $box-shadow-inset;\n\n  $form-select-focus-border-color: $input-focus-border-color;\n  $form-select-focus-width: $input-focus-width;\n  $form-select-focus-box-shadow: 0 0 0 $form-select-focus-width\n    $input-btn-focus-color;\n\n  $form-select-padding-y-sm: $input-padding-y-sm;\n  $form-select-padding-x-sm: $input-padding-x-sm;\n  $form-select-font-size-sm: $input-font-size-sm;\n  $form-select-border-radius-sm: $input-border-radius-sm;\n\n  $form-select-padding-y-lg: $input-padding-y-lg;\n  $form-select-padding-x-lg: $input-padding-x-lg;\n  $form-select-font-size-lg: $input-font-size-lg;\n  $form-select-border-radius-lg: $input-border-radius-lg;\n\n  $form-select-transition: $input-transition;\n\n  $form-range-track-width: 100%;\n  $form-range-track-height: 0.5rem;\n  $form-range-track-cursor: pointer;\n  $form-range-track-bg: $gray-300;\n  $form-range-track-border-radius: 1rem;\n  $form-range-track-box-shadow: $box-shadow-inset;\n\n  $form-range-thumb-width: 1rem;\n  $form-range-thumb-height: $form-range-thumb-width;\n  $form-range-thumb-bg: $component-active-bg;\n  $form-range-thumb-border: 0;\n  $form-range-thumb-border-radius: 1rem;\n  $form-range-thumb-box-shadow: 0 0.1rem 0.25rem rgba($black, 0.1);\n  $form-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg,\n    $input-focus-box-shadow;\n  $form-range-thumb-focus-box-shadow-width: $input-focus-width; // For focus box shadow issue in Edge\n  $form-range-thumb-active-bg: tint-color($component-active-bg, 70%);\n  $form-range-thumb-disabled-bg: $gray-500;\n  $form-range-thumb-transition: background-color 0.15s ease-in-out,\n    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n\n  $form-file-button-color: $input-color;\n  $form-file-button-bg: $input-group-addon-bg;\n  $form-file-button-hover-bg: shade-color($form-file-button-bg, 5%);\n\n  $form-floating-height: ", ";\n  $form-floating-line-height: 1.25;\n  $form-floating-padding-x: $input-padding-x;\n  $form-floating-padding-y: 1rem;\n  $form-floating-input-padding-t: 1.625rem;\n  $form-floating-input-padding-b: 0.625rem;\n  $form-floating-label-opacity: 0.65;\n  $form-floating-label-transform: scale(0.85) translateY(-0.5rem)\n    translateX(0.15rem);\n  $form-floating-transition: opacity 0.1s ease-in-out,\n    transform 0.1s ease-in-out;\n\n  // Form validation\n\n  $form-feedback-margin-top: $form-text-margin-top;\n  $form-feedback-font-size: $form-text-font-size;\n  $form-feedback-font-style: $form-text-font-style;\n  $form-feedback-valid-color: $success;\n  $form-feedback-invalid-color: $danger;\n\n  $form-feedback-icon-valid-color: $form-feedback-valid-color;\n  $form-feedback-icon-valid: ", ";\n  $form-feedback-icon-invalid-color: $form-feedback-invalid-color;\n  $form-feedback-icon-invalid: ", ";\n\n  $form-validation-states: ", ";\n\n  // Z-index master list\n  //\n  // Warning: Avoid customizing these values. They're used for a bird's eye view\n  // of components dependent on the z-axis and are designed to all work together.\n\n  $zindex-dropdown: 1000;\n  $zindex-sticky: 1020;\n  $zindex-fixed: 1030;\n  $zindex-offcanvas-backdrop: 1040;\n  $zindex-offcanvas: 1045;\n  $zindex-modal-backdrop: 1050;\n  $zindex-modal: 1055;\n  $zindex-popover: 1070;\n  $zindex-tooltip: 1080;\n\n  // Navs\n\n  $nav-link-padding-y: 0.5rem;\n  $nav-link-padding-x: 1rem;\n  $nav-link-font-size: null;\n  $nav-link-font-weight: null;\n  $nav-link-color: $link-color;\n  $nav-link-hover-color: $link-hover-color;\n  $nav-link-transition: color 0.15s ease-in-out,\n    background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;\n  $nav-link-disabled-color: $gray-600;\n\n  $nav-tabs-border-color: $gray-300;\n  $nav-tabs-border-width: $border-width;\n  $nav-tabs-border-radius: $border-radius;\n  $nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color;\n  $nav-tabs-link-active-color: $gray-700;\n  $nav-tabs-link-active-bg: $body-bg;\n  $nav-tabs-link-active-border-color: $gray-300 $gray-300\n    $nav-tabs-link-active-bg;\n\n  $nav-pills-border-radius: $border-radius;\n  $nav-pills-link-active-color: $component-active-color;\n  $nav-pills-link-active-bg: $component-active-bg;\n\n  // Navbar\n\n  $navbar-padding-y: $spacer * 0.5;\n  $navbar-padding-x: null;\n\n  $navbar-nav-link-padding-x: 0.5rem;\n\n  $navbar-brand-font-size: $font-size-lg;\n\n  $nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y *\n    2;\n  $navbar-brand-height: $navbar-brand-font-size * $line-height-base;\n  $navbar-brand-padding-y-intermediate-result: $nav-link-height -\n    $navbar-brand-height;\n  $navbar-brand-padding-y: $navbar-brand-padding-y-intermediate-result * 0.5;\n  $navbar-brand-margin-end: 1rem;\n\n  $navbar-toggler-padding-y: 0.25rem;\n  $navbar-toggler-padding-x: 0.75rem;\n  $navbar-toggler-font-size: $font-size-lg;\n  $navbar-toggler-border-radius: $btn-border-radius;\n  $navbar-toggler-focus-width: $btn-focus-width;\n  $navbar-toggler-transition: box-shadow 0.15s ease-in-out;\n\n  $navbar-dark-color: rgba($white, 0.55);\n  $navbar-dark-hover-color: rgba($white, 0.75);\n  $navbar-dark-active-color: $white;\n  $navbar-dark-disabled-color: rgba($white, 0.25);\n  $navbar-dark-toggler-icon-bg: ", ";\n  $navbar-dark-toggler-border-color: rgba($white, 0.1);\n\n  $navbar-light-color: rgba($black, 0.55);\n  $navbar-light-hover-color: rgba($black, 0.7);\n  $navbar-light-active-color: rgba($black, 0.9);\n  $navbar-light-disabled-color: rgba($black, 0.3);\n  $navbar-light-toggler-icon-bg: ", ";\n  $navbar-light-toggler-border-color: rgba($black, 0.1);\n\n  $navbar-light-brand-color: $navbar-light-active-color;\n  $navbar-light-brand-hover-color: $navbar-light-active-color;\n  $navbar-dark-brand-color: $navbar-dark-active-color;\n  $navbar-dark-brand-hover-color: $navbar-dark-active-color;\n\n  // Dropdowns\n  //\n  // Dropdown menu container and contents.\n\n  $dropdown-min-width: 10rem;\n  $dropdown-padding-x: 0;\n  $dropdown-padding-y: 0.5rem;\n  $dropdown-spacer: 0.125rem;\n  $dropdown-font-size: $font-size-base;\n  $dropdown-color: $body-color;\n  $dropdown-bg: $white;\n  $dropdown-border-color: rgba($black, 0.15);\n  $dropdown-border-radius: $border-radius;\n  $dropdown-border-width: $border-width;\n  $dropdown-inner-border-radius: ", ";\n  $dropdown-divider-bg: $dropdown-border-color;\n  $dropdown-divider-margin-y: $spacer * 0.5;\n  $dropdown-box-shadow: $box-shadow;\n\n  $dropdown-link-color: $gray-900;\n\n  $dropdown-link-hover-color: ", ";\n  $dropdown-link-hover-bg: $gray-200;\n\n  $dropdown-link-active-color: $component-active-color;\n  $dropdown-link-active-bg: $component-active-bg;\n\n  $dropdown-link-disabled-color: $gray-500;\n\n  $dropdown-item-padding-y: $spacer * 0.25;\n  $dropdown-item-padding-x: $spacer;\n\n  $dropdown-header-color: $gray-600;\n  $dropdown-header-padding: $dropdown-padding-y $dropdown-item-padding-x;\n\n  $dropdown-dark-color: $gray-300;\n  $dropdown-dark-bg: $gray-800;\n  $dropdown-dark-border-color: $dropdown-border-color;\n  $dropdown-dark-divider-bg: $dropdown-divider-bg;\n  $dropdown-dark-box-shadow: null;\n  $dropdown-dark-link-color: $dropdown-dark-color;\n  $dropdown-dark-link-hover-color: $white;\n  $dropdown-dark-link-hover-bg: rgba($white, 0.15);\n  $dropdown-dark-link-active-color: $dropdown-link-active-color;\n  $dropdown-dark-link-active-bg: $dropdown-link-active-bg;\n  $dropdown-dark-link-disabled-color: $gray-500;\n  $dropdown-dark-header-color: $gray-500;\n\n  // ...\n\n  // Cards\n\n  $card-spacer-y: $spacer;\n  $card-spacer-x: $spacer;\n  $card-title-spacer-y: $spacer * 0.5;\n  $card-border-width: $border-width;\n  $card-border-color: rgba($black, 0.125);\n  $card-border-radius: $border-radius;\n  $card-box-shadow: null;\n  $card-inner-border-radius: ", ";\n  $card-cap-padding-y: $card-spacer-y * 0.5;\n  $card-cap-padding-x: $card-spacer-x;\n  $card-cap-bg: rgba($black, 0.03);\n  $card-cap-color: null;\n  $card-height: null;\n  $card-color: null;\n  $card-bg: $white;\n  $card-img-overlay-padding: $spacer;\n  $card-group-margin: $grid-gutter-width * 0.5;\n\n  // ...\n\n  // Tooltips\n\n  $tooltip-font-size: $font-size-sm;\n  $tooltip-max-width: 200px;\n  $tooltip-color: $white;\n  $tooltip-bg: $black;\n  $tooltip-border-radius: $border-radius;\n  $tooltip-opacity: 0.9;\n  $tooltip-padding-y: $spacer * 0.25;\n  $tooltip-padding-x: $spacer * 0.5;\n  $tooltip-margin: 0;\n\n  $tooltip-arrow-width: 0.8rem;\n  $tooltip-arrow-height: 0.4rem;\n  $tooltip-arrow-color: $tooltip-bg;\n\n  // Popovers\n\n  $popover-font-size: $font-size-sm;\n  $popover-bg: $white;\n  $popover-max-width: 276px;\n  $popover-border-width: $border-width;\n  $popover-border-color: rgba($black, 0.2);\n  $popover-border-radius: $border-radius-lg;\n  $popover-inner-border-radius: ", ";\n  $popover-box-shadow: $box-shadow;\n\n  $popover-header-bg: ", ";\n  $popover-header-color: $headings-color;\n  $popover-header-padding-y: 0.5rem;\n  $popover-header-padding-x: $spacer;\n\n  $popover-body-color: $body-color;\n  $popover-body-padding-y: $spacer;\n  $popover-body-padding-x: $spacer;\n\n  $popover-arrow-width: 1rem;\n  $popover-arrow-height: 0.5rem;\n  $popover-arrow-color: $popover-bg;\n\n  $popover-arrow-outer-color: $popover-border-color;\n\n  // Toasts\n\n  $toast-max-width: 350px;\n  $toast-padding-x: 0.75rem;\n  $toast-padding-y: 0.5rem;\n  $toast-font-size: 0.875rem;\n  $toast-color: null;\n  $toast-background-color: rgba($white, 0.85);\n  $toast-border-width: 1px;\n  $toast-border-color: rgba($black, 0.1);\n  $toast-border-radius: $border-radius;\n  $toast-box-shadow: $box-shadow;\n  $toast-spacing: $container-padding-x;\n\n  $toast-header-color: $gray-600;\n  $toast-header-background-color: rgba($white, 0.85);\n  $toast-header-border-color: rgba($black, 0.05);\n\n  // Badges\n\n  $badge-font-size: $font-size-base * 0.75; // 0.75em;\n  $badge-font-weight: $font-weight-bold;\n  $badge-color: $white;\n  $badge-padding-y: $badge-font-size * 0.35; // 0.35em;\n  $badge-padding-x: $badge-font-size * 0.65; // 0.65em;\n  $badge-border-radius: $border-radius;\n\n  // Modals\n\n  $modal-inner-padding: $spacer;\n\n  $modal-footer-margin-between: 0.5rem;\n\n  $modal-dialog-margin: 0.5rem;\n  $modal-dialog-margin-y-sm-up: 1.75rem;\n\n  $modal-title-line-height: $line-height-base;\n\n  $modal-content-color: null;\n  $modal-content-bg: $white;\n  $modal-content-border-color: rgba($black, 0.65); // rgba($black, 0.2);\n  $modal-content-border-width: $border-width;\n  $modal-content-border-radius: $border-radius-lg;\n  $modal-content-inner-border-radius: ", ";\n  $modal-content-box-shadow-xs: $box-shadow-sm;\n  $modal-content-box-shadow-sm-up: $box-shadow;\n\n  $modal-backdrop-bg: $black;\n  $modal-backdrop-opacity: 0.5;\n  $modal-header-border-color: $border-color;\n  $modal-footer-border-color: $modal-header-border-color;\n  $modal-header-border-width: $modal-content-border-width;\n  $modal-footer-border-width: $modal-header-border-width;\n  $modal-header-padding-y: $modal-inner-padding;\n  $modal-header-padding-x: $modal-inner-padding;\n  $modal-header-padding: $modal-header-padding-y $modal-header-padding-x; // Keep this for backwards compatibility\n\n  $modal-sm: 300px;\n  $modal-md: 500px;\n  $modal-lg: 800px;\n  $modal-xl: 1140px;\n\n  $modal-fade-transform: translate(0, -50px);\n  $modal-show-transform: none;\n  $modal-transition: transform 0.3s ease-out;\n  $modal-scale-transform: scale(1.02);\n\n  // ...\n\n  // Alerts\n  //\n  // Define alert colors, border radius, and padding.\n\n  $alert-padding-y: $spacer;\n  $alert-padding-x: $spacer;\n  $alert-margin-bottom: 1rem;\n  $alert-border-radius: $border-radius;\n  $alert-link-font-weight: $font-weight-bold;\n  $alert-border-width: $border-width;\n  $alert-bg-scale: -0.8; // 80%;\n  $alert-border-scale: -0.7; // 70%;\n  $alert-color-scale: 0.4; // 40%;\n  $alert-dismissible-padding-r: $alert-padding-x * 3; // 3x covers width of x plus default padding on either side\n\n  // Pagination\n\n  $pagination-padding-y: 0.375rem;\n  $pagination-padding-x: 0.75rem;\n  $pagination-padding-y-sm: 0.25rem;\n  $pagination-padding-x-sm: 0.5rem;\n  $pagination-padding-y-lg: 0.75rem;\n  $pagination-padding-x-lg: 1.5rem;\n\n  $pagination-color: $link-color;\n  $pagination-bg: $white;\n  $pagination-border-width: $border-width;\n  $pagination-border-radius: $border-radius;\n  $pagination-margin-start: -$pagination-border-width;\n  $pagination-border-color: $gray-300;\n\n  $pagination-focus-color: $link-hover-color;\n  $pagination-focus-bg: $gray-200;\n  $pagination-focus-box-shadow: $input-btn-focus-box-shadow;\n  $pagination-focus-outline: 0;\n\n  $pagination-hover-color: $link-hover-color;\n  $pagination-hover-bg: $gray-200;\n  $pagination-hover-border-color: $gray-300;\n\n  $pagination-active-color: $component-active-color;\n  $pagination-active-bg: $component-active-bg;\n  $pagination-active-border-color: $pagination-active-bg;\n\n  $pagination-disabled-color: $gray-600;\n  $pagination-disabled-bg: $white;\n  $pagination-disabled-border-color: $gray-300;\n\n  $pagination-transition: color 0.15s ease-in-out,\n    background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,\n    box-shadow 0.15s ease-in-out;\n\n  $pagination-border-radius-sm: $border-radius-sm;\n  $pagination-border-radius-lg: $border-radius-lg;\n\n  // Progress bars\n\n  $progress-height: 1rem;\n  $progress-font-size: $font-size-base * 0.75;\n  $progress-bg: $gray-200;\n  $progress-border-radius: $border-radius;\n  $progress-box-shadow: $box-shadow-inset;\n  $progress-bar-color: $white;\n  $progress-bar-bg: $primary;\n  $progress-bar-animation-timing: 1s linear infinite;\n  $progress-bar-transition: width 0.6s ease;\n\n  // List group\n\n  $list-group-color: $gray-900;\n  $list-group-bg: $white;\n  $list-group-border-color: rgba($black, 0.125);\n  $list-group-border-width: $border-width;\n  $list-group-border-radius: $border-radius;\n\n  $list-group-item-padding-y: $spacer * 0.5;\n  $list-group-item-padding-x: $spacer;\n  $list-group-item-bg-scale: -0.8; // 80%;\n  $list-group-item-color-scale: 0.4; // 40%;\n\n  $list-group-hover-bg: $gray-100;\n  $list-group-active-color: $component-active-color;\n  $list-group-active-bg: $component-active-bg;\n  $list-group-active-border-color: $list-group-active-bg;\n\n  $list-group-disabled-color: $gray-600;\n  $list-group-disabled-bg: $list-group-bg;\n\n  $list-group-action-color: $gray-700;\n  $list-group-action-hover-color: $list-group-action-color;\n\n  $list-group-action-active-color: $body-color;\n  $list-group-action-active-bg: $gray-200;\n\n  // ...\n\n  // Spinners\n\n  $spinner-width: 2rem;\n  $spinner-height: $spinner-width;\n  $spinner-vertical-align: $font-size-base * -0.125; // -.125em;\n  $spinner-border-width: $font-size-base * 0.25; // .25em;\n  $spinner-animation-speed: 0.75s;\n\n  $spinner-width-sm: 1rem;\n  $spinner-height-sm: $spinner-width-sm;\n  $spinner-border-width-sm: $font-size-base * 0.2; // .2em;\n\n  // Close\n\n  $btn-close-width: $font-size-base * 1; // 1em;\n  $btn-close-height: $btn-close-width;\n  $btn-close-padding-x: $font-size-base * 0.25; // .25em;\n  $btn-close-padding-y: $btn-close-padding-x;\n  $btn-close-color: $black;\n  $btn-close-bg: ", ";\n  $btn-close-focus-shadow: $input-btn-focus-box-shadow;\n  $btn-close-opacity: 0.5;\n  $btn-close-hover-opacity: 0.75;\n  $btn-close-focus-opacity: 1;\n  $btn-close-disabled-opacity: 0.25;\n  // $btn-close-white-filter: invert(1) grayscale(100%) brightness(200%);\n\n  // Offcanvas\n\n  $offcanvas-padding-y: $modal-inner-padding;\n  $offcanvas-padding-x: $modal-inner-padding;\n  $offcanvas-horizontal-width: 400px;\n  $offcanvas-vertical-height: 200px; // 30vh;\n  $offcanvas-transition-duration: 0.3s;\n  $offcanvas-border-color: $modal-content-border-color;\n  $offcanvas-border-width: $modal-content-border-width;\n  $offcanvas-title-line-height: $modal-title-line-height;\n  $offcanvas-bg-color: $modal-content-bg;\n  $offcanvas-color: $modal-content-color;\n  $offcanvas-box-shadow: $modal-content-box-shadow-xs;\n  $offcanvas-backdrop-bg: $modal-backdrop-bg;\n  $offcanvas-backdrop-opacity: $modal-backdrop-opacity;\n\n  // Code\n\n  $code-font-size: $small-font-size;\n  $code-color: $pink;\n\n  $kbd-padding-y: 0.2rem;\n  $kbd-padding-x: 0.4rem;\n  $kbd-font-size: $code-font-size;\n  $kbd-color: $white;\n  $kbd-bg: $gray-900;\n\n  $pre-color: null;\n"])), function (t) {
+  var variables = css(_templateObject$1e || (_templateObject$1e = _taggedTemplateLiteral(["\n  // Color system\n\n  $white: #fff;\n  $gray-100: #f8f9fa;\n  $gray-200: #e9ecef;\n  $gray-300: #dee2e6;\n  $gray-400: #ced4da;\n  $gray-500: #adb5bd;\n  $gray-600: #6c757d;\n  $gray-700: #495057;\n  $gray-800: #343a40;\n  $gray-900: #212529;\n  $black: #000;\n\n  $grays: ", ";\n\n  $blue: #0d6efd;\n  $indigo: #6610f2;\n  $purple: #6f42c1;\n  $pink: #d63384;\n  $red: #dc3545;\n  $orange: #fd7e14;\n  $yellow: #ffc107;\n  $green: #198754;\n  $teal: #20c997;\n  $cyan: #0dcaf0;\n\n  $colors: ", ";\n\n  $primary: $blue;\n  $secondary: $gray-600;\n  $success: $green;\n  $info: $cyan;\n  $warning: $yellow;\n  $danger: $red;\n  $light: $gray-100;\n  $dark: $gray-900;\n\n  $theme-colors: ", ";\n\n  // The contrast ratio to reach against white, to determine if color changes from \"light\" to \"dark\". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.\n  // See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast\n  $min-contrast-ratio: 4.5;\n\n  // Customize the light and dark text colors for use in our color contrast function.\n  $color-contrast-dark: $black;\n  $color-contrast-light: $white;\n\n  $blue-100: tint-color($blue, 80%);\n  $blue-200: tint-color($blue, 60%);\n  $blue-300: tint-color($blue, 40%);\n  $blue-400: tint-color($blue, 20%);\n  $blue-500: $blue;\n  $blue-600: shade-color($blue, 20%);\n  $blue-700: shade-color($blue, 40%);\n  $blue-800: shade-color($blue, 60%);\n  $blue-900: shade-color($blue, 80%);\n\n  $indigo-100: tint-color($indigo, 80%);\n  $indigo-200: tint-color($indigo, 60%);\n  $indigo-300: tint-color($indigo, 40%);\n  $indigo-400: tint-color($indigo, 20%);\n  $indigo-500: $indigo;\n  $indigo-600: shade-color($indigo, 20%);\n  $indigo-700: shade-color($indigo, 40%);\n  $indigo-800: shade-color($indigo, 60%);\n  $indigo-900: shade-color($indigo, 80%);\n\n  $purple-100: tint-color($purple, 80%);\n  $purple-200: tint-color($purple, 60%);\n  $purple-300: tint-color($purple, 40%);\n  $purple-400: tint-color($purple, 20%);\n  $purple-500: $purple;\n  $purple-600: shade-color($purple, 20%);\n  $purple-700: shade-color($purple, 40%);\n  $purple-800: shade-color($purple, 60%);\n  $purple-900: shade-color($purple, 80%);\n\n  $pink-100: tint-color($pink, 80%);\n  $pink-200: tint-color($pink, 60%);\n  $pink-300: tint-color($pink, 40%);\n  $pink-400: tint-color($pink, 20%);\n  $pink-500: $pink;\n  $pink-600: shade-color($pink, 20%);\n  $pink-700: shade-color($pink, 40%);\n  $pink-800: shade-color($pink, 60%);\n  $pink-900: shade-color($pink, 80%);\n\n  $red-100: tint-color($red, 80%);\n  $red-200: tint-color($red, 60%);\n  $red-300: tint-color($red, 40%);\n  $red-400: tint-color($red, 20%);\n  $red-500: $red;\n  $red-600: shade-color($red, 20%);\n  $red-700: shade-color($red, 40%);\n  $red-800: shade-color($red, 60%);\n  $red-900: shade-color($red, 80%);\n\n  $orange-100: tint-color($orange, 80%);\n  $orange-200: tint-color($orange, 60%);\n  $orange-300: tint-color($orange, 40%);\n  $orange-400: tint-color($orange, 20%);\n  $orange-500: $orange;\n  $orange-600: shade-color($orange, 20%);\n  $orange-700: shade-color($orange, 40%);\n  $orange-800: shade-color($orange, 60%);\n  $orange-900: shade-color($orange, 80%);\n\n  $yellow-100: tint-color($yellow, 80%);\n  $yellow-200: tint-color($yellow, 60%);\n  $yellow-300: tint-color($yellow, 40%);\n  $yellow-400: tint-color($yellow, 20%);\n  $yellow-500: $yellow;\n  $yellow-600: shade-color($yellow, 20%);\n  $yellow-700: shade-color($yellow, 40%);\n  $yellow-800: shade-color($yellow, 60%);\n  $yellow-900: shade-color($yellow, 80%);\n\n  $green-100: tint-color($green, 80%);\n  $green-200: tint-color($green, 60%);\n  $green-300: tint-color($green, 40%);\n  $green-400: tint-color($green, 20%);\n  $green-500: $green;\n  $green-600: shade-color($green, 20%);\n  $green-700: shade-color($green, 40%);\n  $green-800: shade-color($green, 60%);\n  $green-900: shade-color($green, 80%);\n\n  $teal-100: tint-color($teal, 80%);\n  $teal-200: tint-color($teal, 60%);\n  $teal-300: tint-color($teal, 40%);\n  $teal-400: tint-color($teal, 20%);\n  $teal-500: $teal;\n  $teal-600: shade-color($teal, 20%);\n  $teal-700: shade-color($teal, 40%);\n  $teal-800: shade-color($teal, 60%);\n  $teal-900: shade-color($teal, 80%);\n\n  $cyan-100: tint-color($cyan, 80%);\n  $cyan-200: tint-color($cyan, 60%);\n  $cyan-300: tint-color($cyan, 40%);\n  $cyan-400: tint-color($cyan, 20%);\n  $cyan-500: $cyan;\n  $cyan-600: shade-color($cyan, 20%);\n  $cyan-700: shade-color($cyan, 40%);\n  $cyan-800: shade-color($cyan, 60%);\n  $cyan-900: shade-color($cyan, 80%);\n\n  $blues: ", ";\n\n  $indigos: ", ";\n\n  $purples: ", ";\n\n  $pinks: ", ";\n\n  $reds: ", ";\n\n  $oranges: ", ";\n\n  $yellows: ", ";\n\n  $greens: ", ";\n\n  $teals: ", ";\n\n  $cyans: ", ";\n\n  // Characters which are escaped by the escape-svg function\n  // $escaped characters\n\n  // Options\n  //\n  // Quickly modify global styling by enabling or disabling optional features.\n\n  // NOTE: Handled by JavaScript.\n\n  // Gradient\n  //\n  // The gradient which is added to components if \"$enable-gradients\" is \"true\"\n  // This gradient is also added to elements with \".bg-gradient\"\n  $gradient: linear-gradient(180deg, rgba($white, 0.15), rgba($white, 0));\n\n  // Spacing\n  //\n  // Control the default styling of most Bootstrap elements by modifying these\n  // variables. Mostly focused on spacing.\n  // You can add more entries to the $spacers map, should you need more variation.\n\n  $spacer: 1rem;\n  $spacers: ", ";\n\n  // Position\n  //\n  // Define the edge positioning anchors of the position utilities.\n\n  $position-values: ", ";\n\n  // Placeholder\n\n  $placeholder-opacity-max: 0.5;\n  $placeholder-opacity-min: 0.2;\n\n  // Body\n  //\n  // Settings for the \"<body>\" element.\n\n  $body-bg: $white;\n  $body-color: $gray-900;\n  $body-text-align: null;\n\n  // Links\n  //\n  // Style anchor elements.\n\n  $link-color: $primary;\n  $link-decoration: underline;\n  $link-shade-percentage: 0.2; // 20%;\n  $link-hover-color: ", ";\n  $link-hover-decoration: null;\n\n  $stretched-link-pseudo-element: after;\n  $stretched-link-z-index: 1;\n\n  // Paragraphs\n  //\n  // Style p element.\n\n  $paragraph-margin-bottom: 1rem;\n\n  // Grid breakpoints\n  //\n  // Define the minimum dimensions at which your layout will change,\n  // adapting to different screen sizes, for use in media queries.\n\n  $grid-breakpoints: ", ";\n\n  // Grid containers\n  //\n  // Define the maximum width of \".container\" for different screen sizes.\n\n  $container-max-widths: ", ";\n\n  // Grid columns\n  //\n  // Set the number of columns and specify the width of the gutters.\n\n  // $grid-columns: 12;\n  $grid-gutter-width: 1.5rem;\n  // $grid-row-columns: 6;\n\n  // Container padding\n\n  $container-padding-x: $grid-gutter-width * 0.5;\n\n  // Components\n  //\n  // Define common padding and border radius sizes and more.\n\n  $border-width: 1px;\n  $border-widths: ", ";\n\n  $border-color: $gray-300;\n\n  $border-radius: 0.25rem;\n  $border-radius-sm: 0.2rem;\n  $border-radius-lg: 0.3rem;\n  $border-radius-pill: 50rem;\n\n  $box-shadow: 0 0.5rem 1rem rgba($black, 0.15);\n  $box-shadow-sm: 0 0.125rem 0.25rem rgba($black, 0.075);\n  $box-shadow-lg: 0 1rem 3rem rgba($black, 0.175);\n  $box-shadow-inset: inset 0 1px 2px rgba($black, 0.075);\n\n  $component-active-color: $white;\n  $component-active-bg: $primary;\n\n  $caret-width: 1rem * 0.3; // 0.3em;\n  $caret-vertical-align: $caret-width * 0.85;\n  $caret-spacing: $caret-width * 0.85;\n\n  $transition-base: all 0.2s ease-in-out;\n  $transition-fade: opacity 0.15s linear;\n  $transition-collapse: height 0.35s ease;\n  $transition-collapse-width: width 0.35s ease;\n\n  $aspect-ratios: ", ";\n\n  // Typography\n  //\n  // Font, line-height, and color for body text, headings, and more.\n\n  $font-family-sans-serif: ", ";\n  $font-family-monospace: ", ";\n  $font-family-base: $font-family-sans-serif;\n  $font-family-code: $font-family-monospace;\n\n  // $font-size-root affects the value of \"rem\", which is used for as well font sizes, paddings, and margins\n  // $font-size-base affects the font size of the body text\n  $font-size-root: null;\n  $font-size-base: 1rem; // Assumes the browser default, typically \"16px\"\n  $font-size-sm: $font-size-base * 0.875;\n  $font-size-lg: $font-size-base * 1.25;\n\n  $font-weight-lighter: 300; // lighter;\n  $font-weight-light: 300;\n  $font-weight-normal: 400;\n  $font-weight-bold: 700;\n  $font-weight-bolder: 500; // bolder;\n\n  $font-weight-base: $font-weight-normal;\n\n  $line-height-base: 1.5;\n  $line-height-sm: 1.25;\n  $line-height-lg: 2;\n\n  $h1-font-size: $font-size-base * 2.5;\n  $h2-font-size: $font-size-base * 2;\n  $h3-font-size: $font-size-base * 1.75;\n  $h4-font-size: $font-size-base * 1.5;\n  $h5-font-size: $font-size-base * 1.25;\n  $h6-font-size: $font-size-base;\n\n  $font-sizes: ", ";\n\n  $headings-margin-bottom: $spacer * 0.5;\n  $headings-font-family: null;\n  $headings-font-style: null;\n  $headings-font-weight: 500;\n  $headings-line-height: 1.2;\n  $headings-color: null;\n\n  $display-font-sizes: ", ";\n\n  $display-font-weight: 300;\n  $display-line-height: $headings-line-height;\n\n  $lead-font-size: $font-size-base * 1.25;\n  $lead-font-weight: 300;\n\n  $small-font-size: $font-size-base * 0.875; // 0.875em;\n\n  $sub-sup-font-size: $font-size-base * 0.75; // 0.75em;\n\n  $text-muted: $gray-600;\n\n  $initialism-font-size: $small-font-size;\n\n  $blockquote-margin-y: $spacer;\n  $blockquote-font-size: $font-size-base * 1.25;\n  $blockquote-footer-color: $gray-600;\n  $blockquote-footer-font-size: $small-font-size;\n\n  $hr-margin-y: $spacer;\n  $hr-color: inherit;\n  $hr-bg-color: currentColor;\n  $hr-border-width: 0;\n  $hr-height: $border-width;\n  $hr-opacity: 0.25;\n\n  $legend-margin-bottom: 0.5rem;\n  $legend-font-size: 1.5rem;\n  $legend-font-weight: null;\n\n  $mark-padding: $font-size-base * 0.2; // 0.2em;\n\n  $dt-font-weight: $font-weight-bold;\n\n  $nested-kbd-font-weight: $font-weight-bold;\n\n  $list-inline-padding: 0.5rem;\n\n  $mark-bg: #fcf8e3;\n\n  // ...\n\n  // Buttons + Forms\n  //\n  // Shared variables that are reassigned to \"$input-\" and \"$btn-\" specific variables.\n\n  $input-btn-padding-y: 0.375rem;\n  $input-btn-padding-x: 0.75rem;\n  $input-btn-font-family: null;\n  $input-btn-font-size: $font-size-base;\n  $input-btn-line-height: $line-height-base;\n\n  $input-btn-focus-width: 0.25rem;\n  $input-btn-focus-color-opacity: 0.25;\n  $input-btn-focus-color: rgba(\n    $component-active-bg,\n    $input-btn-focus-color-opacity\n  );\n  $input-btn-focus-blur: 0;\n  $input-btn-focus-box-shadow: 0 0 $input-btn-focus-blur $input-btn-focus-width\n    $input-btn-focus-color;\n\n  $input-btn-padding-y-sm: 0.25rem;\n  $input-btn-padding-x-sm: 0.5rem;\n  $input-btn-font-size-sm: $font-size-sm;\n\n  $input-btn-padding-y-lg: 0.5rem;\n  $input-btn-padding-x-lg: 1rem;\n  $input-btn-font-size-lg: $font-size-lg;\n\n  $input-btn-border-width: $border-width;\n\n  // Buttons\n  //\n  // For each of Bootstrap's buttons, define text, background, and border color.\n\n  $btn-padding-y: $input-btn-padding-y;\n  $btn-padding-x: $input-btn-padding-x;\n  $btn-font-family: $input-btn-font-family;\n  $btn-font-size: $input-btn-font-size;\n  $btn-line-height: $input-btn-line-height;\n  $btn-white-space: null; // Set to \"nowrap\" to prevent text wrapping\n\n  $btn-padding-y-sm: $input-btn-padding-y-sm;\n  $btn-padding-x-sm: $input-btn-padding-x-sm;\n  $btn-font-size-sm: $input-btn-font-size-sm;\n\n  $btn-padding-y-lg: $input-btn-padding-y-lg;\n  $btn-padding-x-lg: $input-btn-padding-x-lg;\n  $btn-font-size-lg: $input-btn-font-size-lg;\n\n  $btn-border-width: $input-btn-border-width;\n\n  $btn-font-weight: $font-weight-normal;\n  $btn-box-shadow: inset 0 1px 0 rgba($white, 0.15),\n    0 1px 1px rgba($black, 0.075);\n  $btn-focus-width: $input-btn-focus-width;\n  $btn-focus-box-shadow: $input-btn-focus-box-shadow;\n  $btn-disabled-opacity: 0.65;\n  $btn-active-box-shadow: inset 0 3px 5px rgba($black, 0.125);\n\n  $btn-link-color: $link-color;\n  $btn-link-hover-color: $link-hover-color;\n  $btn-link-disabled-color: $gray-600;\n\n  // Allows for customizing button radius independently from global border radius\n  $btn-border-radius: $border-radius;\n  $btn-border-radius-sm: $border-radius-sm;\n  $btn-border-radius-lg: $border-radius-lg;\n\n  $btn-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,\n    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n\n  $btn-hover-bg-shade-amount: 0.15; // 15%;\n  $btn-hover-bg-tint-amount: 0.15; // 15%;\n  $btn-hover-border-shade-amount: 0.2; // 20%;\n  $btn-hover-border-tint-amount: 0.1; // 10%;\n  $btn-active-bg-shade-amount: 0.2; // 20%;\n  $btn-active-bg-tint-amount: 0.2; // 20%;\n  $btn-active-border-shade-amount: 0.25; // 25%;\n  $btn-active-border-tint-amount: 0.1; // 10%;\n\n  // Breadcrumb\n\n  $breadcrumb-font-size: $font-size-base; // null;\n  $breadcrumb-padding-y: 0;\n  $breadcrumb-padding-x: 0;\n  $breadcrumb-item-padding-x: 0.5rem;\n  $breadcrumb-margin-bottom: 1rem;\n  $breadcrumb-bg: null;\n  $breadcrumb-divider-color: $gray-600;\n  $breadcrumb-active-color: $gray-600;\n  $breadcrumb-divider: ", "; // quote('/');\n  $breadcrumb-divider-flipped: $breadcrumb-divider;\n  $breadcrumb-border-radius: null;\n\n  // Forms\n\n  $form-text-margin-top: 0.25rem;\n  $form-text-font-size: $small-font-size;\n  $form-text-font-style: null;\n  $form-text-font-weight: null;\n  $form-text-color: $text-muted;\n\n  $form-label-margin-bottom: 0.5rem;\n  $form-label-font-size: $font-size-base; // null;\n  $form-label-font-style: null;\n  $form-label-font-weight: null;\n  $form-label-color: null;\n\n  $input-padding-y: $input-btn-padding-y;\n  $input-padding-x: $input-btn-padding-x;\n  $input-font-family: $input-btn-font-family;\n  $input-font-size: $input-btn-font-size;\n  $input-font-weight: $font-weight-base;\n  $input-line-height: $input-btn-line-height;\n\n  $input-padding-y-sm: $input-btn-padding-y-sm;\n  $input-padding-x-sm: $input-btn-padding-x-sm;\n  $input-font-size-sm: $input-btn-font-size-sm;\n\n  $input-padding-y-lg: $input-btn-padding-y-lg;\n  $input-padding-x-lg: $input-btn-padding-x-lg;\n  $input-font-size-lg: $input-btn-font-size-lg;\n\n  $input-bg: $body-bg;\n  $input-disabled-bg: $gray-200;\n  $input-disabled-border-color: null;\n\n  $input-color: $body-color;\n  $input-border-color: $gray-400;\n  $input-border-width: $input-btn-border-width;\n  $input-box-shadow: $box-shadow-inset;\n\n  $input-border-radius: $border-radius;\n  $input-border-radius-sm: $border-radius-sm;\n  $input-border-radius-lg: $border-radius-lg;\n\n  $input-focus-bg: $input-bg;\n  $input-focus-border-color: ", ";\n  $input-focus-color: $input-color;\n  $input-focus-width: $input-btn-focus-width;\n  $input-focus-box-shadow: $input-btn-focus-box-shadow;\n\n  $input-placeholder-color: $gray-600;\n  $input-plaintext-color: $body-color;\n\n  $input-height-border: $input-border-width * 2;\n\n  $input-height-inner: ", ";\n  $input-height-inner-half: ", ";\n  $input-height-inner-quarter: ", ";\n\n  $input-height: ", ";\n  $input-height-sm: ", ";\n  $input-height-lg: ", ";\n\n  $input-transition: border-color 0.15s ease-in-out,\n    box-shadow 0.15s ease-in-out;\n\n  $form-color-width: 3rem;\n\n  $form-check-input-width: $font-size-base * 1; // 1em;\n  $form-check-min-height: $font-size-base * $line-height-base;\n  $form-check-padding-start: $form-check-input-width + 0.5rem; // 0.5em;\n  $form-check-margin-bottom: 0.125rem;\n  $form-check-label-color: null;\n  $form-check-label-cursor: null;\n  $form-check-transition: null;\n\n  $form-check-input-active-filter: brightness(90%);\n\n  $form-check-input-bg: $input-bg;\n  $form-check-input-border: 1px solid rgba($black, 0.25);\n  $form-check-input-border-radius: $font-size-base * 0.25; // 0.25em;\n  $form-check-radio-border-radius: 50px; // 50%;\n  $form-check-input-focus-border: $input-focus-border-color;\n  $form-check-input-focus-box-shadow: $input-btn-focus-box-shadow;\n\n  $form-check-input-checked-color: $component-active-color;\n  $form-check-input-checked-bg-color: $component-active-bg;\n  $form-check-input-checked-border-color: $form-check-input-checked-bg-color;\n  $form-check-input-checked-bg-image: ", ";\n  $form-check-radio-checked-bg-image: ", ";\n\n  $form-check-input-indeterminate-color: $component-active-color;\n  $form-check-input-indeterminate-bg-color: $component-active-bg;\n  $form-check-input-indeterminate-border-color: $form-check-input-indeterminate-bg-color;\n  $form-check-input-indeterminate-bg-image: ", ";\n\n  $form-check-input-disabled-opacity: 0.5;\n  $form-check-label-disabled-opacity: $form-check-input-disabled-opacity;\n  $form-check-btn-check-disabled-opacity: $btn-disabled-opacity;\n\n  $form-check-inline-margin-end: 1rem;\n\n  $form-switch-color: rgba($black, 0.25);\n  $form-switch-width: 2rem;\n  $form-switch-padding-start: $form-switch-width + 0.5rem;\n  $form-switch-bg-image: ", ";\n  $form-switch-border-radius: $form-switch-width;\n  $form-switch-transition: background-position 0.15s ease-in-out;\n\n  $form-switch-focus-color: $input-focus-border-color;\n  $form-switch-focus-bg-image: ", ";\n\n  $form-switch-checked-color: $component-active-color;\n  $form-switch-checked-bg-image: ", ";\n  $form-switch-checked-bg-position: right center;\n\n  $input-group-addon-padding-y: $input-padding-y;\n  $input-group-addon-padding-x: $input-padding-x;\n  $input-group-addon-font-weight: $input-font-weight;\n  $input-group-addon-color: $input-color;\n  $input-group-addon-bg: $gray-200;\n  $input-group-addon-border-color: $input-border-color;\n\n  $form-select-padding-y: $input-padding-y;\n  $form-select-padding-x: $input-padding-x;\n  $form-select-font-family: $input-font-family;\n  $form-select-font-size: $input-font-size;\n  $form-select-indicator-padding: $form-select-padding-x * 3; // Extra padding for background-image\n  $form-select-font-weight: $input-font-weight;\n  $form-select-line-height: $input-line-height;\n  $form-select-color: $input-color;\n  $form-select-bg: $input-bg;\n  $form-select-disabled-color: null;\n  $form-select-disabled-bg: $gray-200;\n  $form-select-disabled-border-color: $input-disabled-border-color;\n  $form-select-bg-position: right $form-select-padding-x center;\n  $form-select-bg-size: 16px 12px; // In pixels because image dimensions\n  $form-select-indicator-color: $gray-800;\n  $form-select-indicator: ", ";\n\n  $form-select-feedback-icon-padding-end: $form-select-padding-x * 2.5 +\n    $form-select-indicator-padding;\n  $form-select-feedback-icon-position: center right\n    $form-select-indicator-padding;\n  $form-select-feedback-icon-size: $input-height-inner-half\n    $input-height-inner-half;\n\n  $form-select-border-width: $input-border-width;\n  $form-select-border-color: $input-border-color;\n  $form-select-border-radius: $input-border-radius;\n  $form-select-box-shadow: $box-shadow-inset;\n\n  $form-select-focus-border-color: $input-focus-border-color;\n  $form-select-focus-width: $input-focus-width;\n  $form-select-focus-box-shadow: 0 0 0 $form-select-focus-width\n    $input-btn-focus-color;\n\n  $form-select-padding-y-sm: $input-padding-y-sm;\n  $form-select-padding-x-sm: $input-padding-x-sm;\n  $form-select-font-size-sm: $input-font-size-sm;\n  $form-select-border-radius-sm: $input-border-radius-sm;\n\n  $form-select-padding-y-lg: $input-padding-y-lg;\n  $form-select-padding-x-lg: $input-padding-x-lg;\n  $form-select-font-size-lg: $input-font-size-lg;\n  $form-select-border-radius-lg: $input-border-radius-lg;\n\n  $form-select-transition: $input-transition;\n\n  $form-range-track-width: 100%;\n  $form-range-track-height: 0.5rem;\n  $form-range-track-cursor: pointer;\n  $form-range-track-bg: $gray-300;\n  $form-range-track-border-radius: 1rem;\n  $form-range-track-box-shadow: $box-shadow-inset;\n\n  $form-range-thumb-width: 1rem;\n  $form-range-thumb-height: $form-range-thumb-width;\n  $form-range-thumb-bg: $component-active-bg;\n  $form-range-thumb-border: 0;\n  $form-range-thumb-border-radius: 1rem;\n  $form-range-thumb-box-shadow: 0 0.1rem 0.25rem rgba($black, 0.1);\n  $form-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg,\n    $input-focus-box-shadow;\n  $form-range-thumb-focus-box-shadow-width: $input-focus-width; // For focus box shadow issue in Edge\n  $form-range-thumb-active-bg: tint-color($component-active-bg, 70%);\n  $form-range-thumb-disabled-bg: $gray-500;\n  $form-range-thumb-transition: background-color 0.15s ease-in-out,\n    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n\n  $form-file-button-color: $input-color;\n  $form-file-button-bg: $input-group-addon-bg;\n  $form-file-button-hover-bg: shade-color($form-file-button-bg, 5%);\n\n  $form-floating-height: ", ";\n  $form-floating-line-height: 1.25;\n  $form-floating-padding-x: $input-padding-x;\n  $form-floating-padding-y: 1rem;\n  $form-floating-input-padding-t: 1.625rem;\n  $form-floating-input-padding-b: 0.625rem;\n  $form-floating-label-opacity: 0.65;\n  $form-floating-label-transform: scale(0.85) translateY(-0.5rem)\n    translateX(0.15rem);\n  $form-floating-transition: opacity 0.1s ease-in-out,\n    transform 0.1s ease-in-out;\n\n  // Form validation\n\n  $form-feedback-margin-top: $form-text-margin-top;\n  $form-feedback-font-size: $form-text-font-size;\n  $form-feedback-font-style: $form-text-font-style;\n  $form-feedback-valid-color: $success;\n  $form-feedback-invalid-color: $danger;\n\n  $form-feedback-icon-valid-color: $form-feedback-valid-color;\n  $form-feedback-icon-valid: ", ";\n  $form-feedback-icon-invalid-color: $form-feedback-invalid-color;\n  $form-feedback-icon-invalid: ", ";\n\n  $form-validation-states: ", ";\n\n  // Z-index master list\n  //\n  // Warning: Avoid customizing these values. They're used for a bird's eye view\n  // of components dependent on the z-axis and are designed to all work together.\n\n  $zindex-dropdown: 1000;\n  $zindex-sticky: 1020;\n  $zindex-fixed: 1030;\n  $zindex-offcanvas-backdrop: 1040;\n  $zindex-offcanvas: 1045;\n  $zindex-modal-backdrop: 1050;\n  $zindex-modal: 1055;\n  $zindex-popover: 1070;\n  $zindex-tooltip: 1080;\n\n  // Navs\n\n  $nav-link-padding-y: 0.5rem;\n  $nav-link-padding-x: 1rem;\n  $nav-link-font-size: null;\n  $nav-link-font-weight: null;\n  $nav-link-color: $link-color;\n  $nav-link-hover-color: $link-hover-color;\n  $nav-link-transition: color 0.15s ease-in-out,\n    background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;\n  $nav-link-disabled-color: $gray-600;\n\n  $nav-tabs-border-color: $gray-300;\n  $nav-tabs-border-width: $border-width;\n  $nav-tabs-border-radius: $border-radius;\n  $nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color;\n  $nav-tabs-link-active-color: $gray-700;\n  $nav-tabs-link-active-bg: $body-bg;\n  $nav-tabs-link-active-border-color: $gray-300 $gray-300\n    $nav-tabs-link-active-bg;\n\n  $nav-pills-border-radius: $border-radius;\n  $nav-pills-link-active-color: $component-active-color;\n  $nav-pills-link-active-bg: $component-active-bg;\n\n  // Navbar\n\n  $navbar-padding-y: $spacer * 0.5;\n  $navbar-padding-x: null;\n\n  $navbar-nav-link-padding-x: 0.5rem;\n\n  $navbar-brand-font-size: $font-size-lg;\n\n  $nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y *\n    2;\n  $navbar-brand-height: $navbar-brand-font-size * $line-height-base;\n  $navbar-brand-padding-y-intermediate-result: $nav-link-height -\n    $navbar-brand-height;\n  $navbar-brand-padding-y: $navbar-brand-padding-y-intermediate-result * 0.5;\n  $navbar-brand-margin-end: 1rem;\n\n  $navbar-toggler-padding-y: 0.25rem;\n  $navbar-toggler-padding-x: 0.75rem;\n  $navbar-toggler-font-size: $font-size-lg;\n  $navbar-toggler-border-radius: $btn-border-radius;\n  $navbar-toggler-focus-width: $btn-focus-width;\n  $navbar-toggler-transition: box-shadow 0.15s ease-in-out;\n\n  $navbar-dark-color: rgba($white, 0.55);\n  $navbar-dark-hover-color: rgba($white, 0.75);\n  $navbar-dark-active-color: $white;\n  $navbar-dark-disabled-color: rgba($white, 0.25);\n  $navbar-dark-toggler-icon-bg: ", ";\n  $navbar-dark-toggler-border-color: rgba($white, 0.1);\n\n  $navbar-light-color: rgba($black, 0.55);\n  $navbar-light-hover-color: rgba($black, 0.7);\n  $navbar-light-active-color: rgba($black, 0.9);\n  $navbar-light-disabled-color: rgba($black, 0.3);\n  $navbar-light-toggler-icon-bg: ", ";\n  $navbar-light-toggler-border-color: rgba($black, 0.1);\n\n  $navbar-light-brand-color: $navbar-light-active-color;\n  $navbar-light-brand-hover-color: $navbar-light-active-color;\n  $navbar-dark-brand-color: $navbar-dark-active-color;\n  $navbar-dark-brand-hover-color: $navbar-dark-active-color;\n\n  // Dropdowns\n  //\n  // Dropdown menu container and contents.\n\n  $dropdown-min-width: 10rem;\n  $dropdown-padding-x: 0;\n  $dropdown-padding-y: 0.5rem;\n  $dropdown-spacer: 0.125rem;\n  $dropdown-font-size: $font-size-base;\n  $dropdown-color: $body-color;\n  $dropdown-bg: $white;\n  $dropdown-border-color: rgba($black, 0.15);\n  $dropdown-border-radius: $border-radius;\n  $dropdown-border-width: $border-width;\n  $dropdown-inner-border-radius: ", ";\n  $dropdown-divider-bg: $dropdown-border-color;\n  $dropdown-divider-margin-y: $spacer * 0.5;\n  $dropdown-box-shadow: $box-shadow;\n\n  $dropdown-link-color: $gray-900;\n\n  $dropdown-link-hover-color: ", ";\n  $dropdown-link-hover-bg: $gray-200;\n\n  $dropdown-link-active-color: $component-active-color;\n  $dropdown-link-active-bg: $component-active-bg;\n\n  $dropdown-link-disabled-color: $gray-500;\n\n  $dropdown-item-padding-y: $spacer * 0.25;\n  $dropdown-item-padding-x: $spacer;\n\n  $dropdown-header-color: $gray-600;\n  $dropdown-header-padding: $dropdown-padding-y $dropdown-item-padding-x;\n\n  $dropdown-dark-color: $gray-300;\n  $dropdown-dark-bg: $gray-800;\n  $dropdown-dark-border-color: $dropdown-border-color;\n  $dropdown-dark-divider-bg: $dropdown-divider-bg;\n  $dropdown-dark-box-shadow: null;\n  $dropdown-dark-link-color: $dropdown-dark-color;\n  $dropdown-dark-link-hover-color: $white;\n  $dropdown-dark-link-hover-bg: rgba($white, 0.15);\n  $dropdown-dark-link-active-color: $dropdown-link-active-color;\n  $dropdown-dark-link-active-bg: $dropdown-link-active-bg;\n  $dropdown-dark-link-disabled-color: $gray-500;\n  $dropdown-dark-header-color: $gray-500;\n\n  // ...\n\n  // Cards\n\n  $card-spacer-y: $spacer;\n  $card-spacer-x: $spacer;\n  $card-title-spacer-y: $spacer * 0.5;\n  $card-border-width: $border-width;\n  $card-border-color: rgba($black, 0.125);\n  $card-border-radius: $border-radius;\n  $card-box-shadow: null;\n  $card-inner-border-radius: ", ";\n  $card-cap-padding-y: $card-spacer-y * 0.5;\n  $card-cap-padding-x: $card-spacer-x;\n  $card-cap-bg: rgba($black, 0.03);\n  $card-cap-color: null;\n  $card-height: null;\n  $card-color: null;\n  $card-bg: $white;\n  $card-img-overlay-padding: $spacer;\n  $card-group-margin: $grid-gutter-width * 0.5;\n\n  // ...\n\n  // Tooltips\n\n  $tooltip-font-size: $font-size-sm;\n  $tooltip-max-width: 200px;\n  $tooltip-color: $white;\n  $tooltip-bg: $black;\n  $tooltip-border-radius: $border-radius;\n  $tooltip-opacity: 0.9;\n  $tooltip-padding-y: $spacer * 0.25;\n  $tooltip-padding-x: $spacer * 0.5;\n  $tooltip-margin: 0;\n\n  $tooltip-arrow-width: 0.8rem;\n  $tooltip-arrow-height: 0.4rem;\n  $tooltip-arrow-color: $tooltip-bg;\n\n  // Popovers\n\n  $popover-font-size: $font-size-sm;\n  $popover-bg: $white;\n  $popover-max-width: 276px;\n  $popover-border-width: $border-width;\n  $popover-border-color: rgba($black, 0.2);\n  $popover-border-radius: $border-radius-lg;\n  $popover-inner-border-radius: ", ";\n  $popover-box-shadow: $box-shadow;\n\n  $popover-header-bg: ", ";\n  $popover-header-color: $headings-color;\n  $popover-header-padding-y: 0.5rem;\n  $popover-header-padding-x: $spacer;\n\n  $popover-body-color: $body-color;\n  $popover-body-padding-y: $spacer;\n  $popover-body-padding-x: $spacer;\n\n  $popover-arrow-width: 1rem;\n  $popover-arrow-height: 0.5rem;\n  $popover-arrow-color: $popover-bg;\n\n  $popover-arrow-outer-color: $popover-border-color;\n\n  // Toasts\n\n  $toast-max-width: 350px;\n  $toast-padding-x: 0.75rem;\n  $toast-padding-y: 0.5rem;\n  $toast-font-size: 0.875rem;\n  $toast-color: null;\n  $toast-background-color: rgba($white, 0.85);\n  $toast-border-width: 1px;\n  $toast-border-color: rgba($black, 0.1);\n  $toast-border-radius: $border-radius;\n  $toast-box-shadow: $box-shadow;\n  $toast-spacing: $container-padding-x;\n\n  $toast-header-color: $gray-600;\n  $toast-header-background-color: rgba($white, 0.85);\n  $toast-header-border-color: rgba($black, 0.05);\n\n  // Badges\n\n  $badge-font-size: $font-size-base * 0.75; // 0.75em;\n  $badge-font-weight: $font-weight-bold;\n  $badge-color: $white;\n  $badge-padding-y: $badge-font-size * 0.35; // 0.35em;\n  $badge-padding-x: $badge-font-size * 0.65; // 0.65em;\n  $badge-border-radius: $border-radius;\n\n  // Modals\n\n  $modal-inner-padding: $spacer;\n\n  $modal-footer-margin-between: 0.5rem;\n\n  $modal-dialog-margin: 0.5rem;\n  $modal-dialog-margin-y-sm-up: 1.75rem;\n\n  $modal-title-line-height: $line-height-base;\n\n  $modal-content-color: null;\n  $modal-content-bg: $white;\n  $modal-content-border-color: rgba($black, 0.65); // rgba($black, 0.2);\n  $modal-content-border-width: $border-width;\n  $modal-content-border-radius: $border-radius-lg;\n  $modal-content-inner-border-radius: ", ";\n  $modal-content-box-shadow-xs: $box-shadow-sm;\n  $modal-content-box-shadow-sm-up: $box-shadow;\n\n  $modal-backdrop-bg: $black;\n  $modal-backdrop-opacity: 0.5;\n  $modal-header-border-color: $border-color;\n  $modal-footer-border-color: $modal-header-border-color;\n  $modal-header-border-width: $modal-content-border-width;\n  $modal-footer-border-width: $modal-header-border-width;\n  $modal-header-padding-y: $modal-inner-padding;\n  $modal-header-padding-x: $modal-inner-padding;\n  $modal-header-padding: $modal-header-padding-y $modal-header-padding-x; // Keep this for backwards compatibility\n\n  $modal-sm: 300px;\n  $modal-md: 500px;\n  $modal-lg: 800px;\n  $modal-xl: 1140px;\n\n  $modal-fade-transform: translate(0, -50px);\n  $modal-show-transform: none;\n  $modal-transition: transform 0.3s ease-out;\n  $modal-scale-transform: scale(1.02);\n\n  // ...\n\n  // Alerts\n  //\n  // Define alert colors, border radius, and padding.\n\n  $alert-padding-y: $spacer;\n  $alert-padding-x: $spacer;\n  $alert-margin-bottom: 1rem;\n  $alert-border-radius: $border-radius;\n  $alert-link-font-weight: $font-weight-bold;\n  $alert-border-width: $border-width;\n  $alert-bg-scale: -0.8; // 80%;\n  $alert-border-scale: -0.7; // 70%;\n  $alert-color-scale: 0.4; // 40%;\n  $alert-dismissible-padding-r: $alert-padding-x * 3; // 3x covers width of x plus default padding on either side\n\n  // Pagination\n\n  $pagination-padding-y: 0.375rem;\n  $pagination-padding-x: 0.75rem;\n  $pagination-padding-y-sm: 0.25rem;\n  $pagination-padding-x-sm: 0.5rem;\n  $pagination-padding-y-lg: 0.75rem;\n  $pagination-padding-x-lg: 1.5rem;\n\n  $pagination-color: $link-color;\n  $pagination-bg: $white;\n  $pagination-border-width: $border-width;\n  $pagination-border-radius: $border-radius;\n  $pagination-margin-start: -$pagination-border-width;\n  $pagination-border-color: $gray-300;\n\n  $pagination-focus-color: $link-hover-color;\n  $pagination-focus-bg: $gray-200;\n  $pagination-focus-box-shadow: $input-btn-focus-box-shadow;\n  $pagination-focus-outline: 0;\n\n  $pagination-hover-color: $link-hover-color;\n  $pagination-hover-bg: $gray-200;\n  $pagination-hover-border-color: $gray-300;\n\n  $pagination-active-color: $component-active-color;\n  $pagination-active-bg: $component-active-bg;\n  $pagination-active-border-color: $pagination-active-bg;\n\n  $pagination-disabled-color: $gray-600;\n  $pagination-disabled-bg: $white;\n  $pagination-disabled-border-color: $gray-300;\n\n  $pagination-transition: color 0.15s ease-in-out,\n    background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,\n    box-shadow 0.15s ease-in-out;\n\n  $pagination-border-radius-sm: $border-radius-sm;\n  $pagination-border-radius-lg: $border-radius-lg;\n\n  // Progress bars\n\n  $progress-height: 1rem;\n  $progress-font-size: $font-size-base * 0.75;\n  $progress-bg: $gray-200;\n  $progress-border-radius: $border-radius;\n  $progress-box-shadow: $box-shadow-inset;\n  $progress-bar-color: $white;\n  $progress-bar-bg: $primary;\n  $progress-bar-animation-timing: 1s linear infinite;\n  $progress-bar-transition: width 0.6s ease;\n\n  // List group\n\n  $list-group-color: $gray-900;\n  $list-group-bg: $white;\n  $list-group-border-color: rgba($black, 0.125);\n  $list-group-border-width: $border-width;\n  $list-group-border-radius: $border-radius;\n\n  $list-group-item-padding-y: $spacer * 0.5;\n  $list-group-item-padding-x: $spacer;\n  $list-group-item-bg-scale: -0.8; // 80%;\n  $list-group-item-color-scale: 0.4; // 40%;\n\n  $list-group-hover-bg: $gray-100;\n  $list-group-active-color: $component-active-color;\n  $list-group-active-bg: $component-active-bg;\n  $list-group-active-border-color: $list-group-active-bg;\n\n  $list-group-disabled-color: $gray-600;\n  $list-group-disabled-bg: $list-group-bg;\n\n  $list-group-action-color: $gray-700;\n  $list-group-action-hover-color: $list-group-action-color;\n\n  $list-group-action-active-color: $body-color;\n  $list-group-action-active-bg: $gray-200;\n\n  // ...\n\n  // Spinners\n\n  $spinner-width: 2rem;\n  $spinner-height: $spinner-width;\n  $spinner-vertical-align: $font-size-base * -0.125; // -.125em;\n  $spinner-border-width: $font-size-base * 0.25; // .25em;\n  $spinner-animation-speed: 0.75s;\n\n  $spinner-width-sm: 1rem;\n  $spinner-height-sm: $spinner-width-sm;\n  $spinner-border-width-sm: $font-size-base * 0.2; // .2em;\n\n  // Close\n\n  $btn-close-width: $font-size-base * 1; // 1em;\n  $btn-close-height: $btn-close-width;\n  $btn-close-padding-x: $font-size-base * 0.25; // .25em;\n  $btn-close-padding-y: $btn-close-padding-x;\n  $btn-close-color: $black;\n  $btn-close-bg: ", ";\n  $btn-close-focus-shadow: $input-btn-focus-box-shadow;\n  $btn-close-opacity: 0.5;\n  $btn-close-hover-opacity: 0.75;\n  $btn-close-focus-opacity: 1;\n  $btn-close-disabled-opacity: 0.25;\n  // $btn-close-white-filter: invert(1) grayscale(100%) brightness(200%);\n\n  // Offcanvas\n\n  $offcanvas-padding-y: $modal-inner-padding;\n  $offcanvas-padding-x: $modal-inner-padding;\n  $offcanvas-horizontal-width: 400px;\n  $offcanvas-vertical-height: 200px; // 30vh;\n  $offcanvas-transition-duration: 0.3s;\n  $offcanvas-border-color: $modal-content-border-color;\n  $offcanvas-border-width: $modal-content-border-width;\n  $offcanvas-title-line-height: $modal-title-line-height;\n  $offcanvas-bg-color: $modal-content-bg;\n  $offcanvas-color: $modal-content-color;\n  $offcanvas-box-shadow: $modal-content-box-shadow-xs;\n  $offcanvas-backdrop-bg: $modal-backdrop-bg;\n  $offcanvas-backdrop-opacity: $modal-backdrop-opacity;\n\n  // Code\n\n  $code-font-size: $small-font-size;\n  $code-color: $pink;\n\n  $kbd-padding-y: 0.2rem;\n  $kbd-padding-x: 0.4rem;\n  $kbd-font-size: $code-font-size;\n  $kbd-color: $white;\n  $kbd-bg: $gray-900;\n\n  $pre-color: null;\n"])), function (t) {
     return {
       100: t['gray-100'],
       200: t['gray-200'],
@@ -5472,7 +5479,7 @@
   }, function () {
     return reactNative.Platform.select({
       android: 'monospace',
-      ios: 'Courier',
+      ios: 'Courier New',
       default: "\"SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace\""
     });
   }, function (t) {
@@ -6724,7 +6731,7 @@
    * LICENSE file in the root directory of this source tree.
    */
 
-  var propTypes$1A = createCommonjsModule(function (module) {
+  var propTypes$1B = createCommonjsModule(function (module) {
   {
     var ReactIs = reactIs;
 
@@ -6735,7 +6742,7 @@
   }
   });
 
-  var PropTypes = propTypes$1A;
+  var PropTypes = propTypes$1B;
 
   function useViewport(initialViewport) {
     var _useState = React.useState(initialViewport),
@@ -6788,7 +6795,7 @@
     return viewport;
   }
 
-  var propTypes$1z = {
+  var propTypes$1A = {
     children: PropTypes.node.isRequired,
     // eslint-disable-next-line react/forbid-prop-types,
     utilities: PropTypes.object,
@@ -6837,7 +6844,7 @@
     }, /*#__PURE__*/React__default["default"].createElement(OverlayProvider, null, children));
   }
 
-  Provider.propTypes = propTypes$1z;
+  Provider.propTypes = propTypes$1A;
 
   var TextStyleContext = /*#__PURE__*/React__default["default"].createContext();
   TextStyleContext.displayName = 'TextStyleContext';
@@ -6922,8 +6929,8 @@
     };
   }
 
-  var _excluded$1x = ["children", "style", "textStyle", "styleName"];
-  var propTypes$1y = {
+  var _excluded$1y = ["children", "style", "textStyle", "styleName"];
+  var propTypes$1z = {
     children: PropTypes.node,
     // eslint-disable-next-line react/forbid-prop-types
     style: PropTypes.any,
@@ -6937,7 +6944,7 @@
         style = props.style,
         textStyle = props.textStyle,
         styleName = props.styleName,
-        elementProps = _objectWithoutProperties(props, _excluded$1x);
+        elementProps = _objectWithoutProperties(props, _excluded$1y);
 
     var media = useMedia();
     var context = React.useContext(TextStyleContext);
@@ -6959,12 +6966,12 @@
     }, children) : children);
   });
   View.displayName = 'View';
-  View.propTypes = propTypes$1y;
+  View.propTypes = propTypes$1z;
 
-  var _excluded$1w = ["children", "color", "dismissible", "style", "textStyle"];
+  var _excluded$1x = ["children", "color", "dismissible", "style", "textStyle"];
 
-  var _templateObject$1c, _templateObject2$U, _templateObject3$s;
-  var propTypes$1x = {
+  var _templateObject$1d, _templateObject2$V, _templateObject3$t;
+  var propTypes$1y = {
     children: PropTypes.node.isRequired,
     color: PropTypes.oneOf(Object.keys(THEME_COLORS)),
     dismissible: PropTypes.bool,
@@ -6973,16 +6980,16 @@
     // eslint-disable-next-line react/forbid-prop-types
     textStyle: PropTypes.any
   };
-  var styles$1e = StyleSheet.create(_objectSpread2(_objectSpread2({
-    '.alert': css(_templateObject$1c || (_templateObject$1c = _taggedTemplateLiteral(["\n    position: relative;\n    padding: $alert-padding-y $alert-padding-x;\n    margin-bottom: $alert-margin-bottom;\n    background-color: transparent;\n    border: $alert-border-width solid transparent;\n    border-radius: $alert-border-radius;\n  "])))
+  var styles$1f = StyleSheet.create(_objectSpread2(_objectSpread2({
+    '.alert': css(_templateObject$1d || (_templateObject$1d = _taggedTemplateLiteral(["\n    position: relative;\n    padding: $alert-padding-y $alert-padding-x;\n    margin-bottom: $alert-margin-bottom;\n    background-color: transparent;\n    border: $alert-border-width solid transparent;\n    border-radius: $alert-border-radius;\n  "])))
   }, each(THEME_COLORS, function (state, value) {
     var _ref;
 
-    return _ref = {}, _defineProperty(_ref, ".alert-".concat(state), css(_templateObject2$U || (_templateObject2$U = _taggedTemplateLiteral(["\n      background-color: ", ";\n      border-color: ", ";\n    "])), shiftColor(function (t) {
+    return _ref = {}, _defineProperty(_ref, ".alert-".concat(state), css(_templateObject2$V || (_templateObject2$V = _taggedTemplateLiteral(["\n      background-color: ", ";\n      border-color: ", ";\n    "])), shiftColor(function (t) {
       return t['alert-bg-scale'];
     }, value), shiftColor(function (t) {
       return t['alert-border-scale'];
-    }, value))), _defineProperty(_ref, ".alert-".concat(state, " --text"), css(_templateObject3$s || (_templateObject3$s = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), shiftColor(function (t) {
+    }, value))), _defineProperty(_ref, ".alert-".concat(state, " --text"), css(_templateObject3$t || (_templateObject3$t = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), shiftColor(function (t) {
       return t['alert-color-scale'];
     }, value))), _ref;
   })), {}, {
@@ -6997,10 +7004,10 @@
         dismissible = _props$dismissible === void 0 ? false : _props$dismissible,
         style = props.style,
         textStyle = props.textStyle,
-        elementProps = _objectWithoutProperties(props, _excluded$1w);
+        elementProps = _objectWithoutProperties(props, _excluded$1x);
 
-    var classes = getStyles(styles$1e, ['.alert', ".alert-".concat(color), dismissible && '.alert-dismissible']);
-    var textClasses = getStyles(styles$1e, [".alert-".concat(color, " --text")]);
+    var classes = getStyles(styles$1f, ['.alert', ".alert-".concat(color), dismissible && '.alert-dismissible']);
+    var textClasses = getStyles(styles$1f, [".alert-".concat(color, " --text")]);
     return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       accessibilityRole: "alert",
@@ -7009,12 +7016,12 @@
     }), children);
   });
   Alert.displayName = 'Alert';
-  Alert.propTypes = propTypes$1x;
+  Alert.propTypes = propTypes$1y;
 
-  var _excluded$1v = ["color", "bold", "italic", "mark", "small", "style", "styleName"];
+  var _excluded$1w = ["color", "bold", "italic", "mark", "small", "style", "styleName"];
 
-  var _templateObject$1b, _templateObject2$T, _templateObject3$r, _templateObject4$n, _templateObject5$k;
-  var propTypes$1w = {
+  var _templateObject$1c, _templateObject2$U, _templateObject3$s, _templateObject4$o, _templateObject5$l;
+  var propTypes$1x = {
     color: PropTypes.oneOf([].concat(_toConsumableArray(Object.keys(THEME_COLORS)), ['muted', 'black-50', 'white-50'])),
     small: PropTypes.bool,
     mark: PropTypes.bool,
@@ -7025,12 +7032,12 @@
     // eslint-disable-next-line react/forbid-prop-types
     styleName: PropTypes.any
   };
-  var styles$1d = StyleSheet.create({
-    text: css(_templateObject$1b || (_templateObject$1b = _taggedTemplateLiteral(["\n    font-family: $font-family-base;\n    font-size: $font-size-base;\n    font-weight: $font-weight-base;\n    line-height: $font-size-base * $line-height-base;\n  "]))),
-    strong: css(_templateObject2$T || (_templateObject2$T = _taggedTemplateLiteral(["\n    font-weight: $font-weight-bolder;\n  "]))),
-    italic: css(_templateObject3$r || (_templateObject3$r = _taggedTemplateLiteral(["\n    font-style: italic;\n  "]))),
-    small: css(_templateObject4$n || (_templateObject4$n = _taggedTemplateLiteral(["\n    font-size: $small-font-size;\n    line-height: $small-font-size * $line-height-base;\n  "]))),
-    mark: css(_templateObject5$k || (_templateObject5$k = _taggedTemplateLiteral(["\n    padding: $mark-padding;\n    background-color: $mark-bg;\n  "])))
+  var styles$1e = StyleSheet.create({
+    text: css(_templateObject$1c || (_templateObject$1c = _taggedTemplateLiteral(["\n    font-family: $font-family-base;\n    font-size: $font-size-base;\n    font-weight: $font-weight-base;\n    line-height: $font-size-base * $line-height-base;\n  "]))),
+    strong: css(_templateObject2$U || (_templateObject2$U = _taggedTemplateLiteral(["\n    font-weight: $font-weight-bolder;\n  "]))),
+    italic: css(_templateObject3$s || (_templateObject3$s = _taggedTemplateLiteral(["\n    font-style: italic;\n  "]))),
+    small: css(_templateObject4$o || (_templateObject4$o = _taggedTemplateLiteral(["\n    font-size: $small-font-size;\n    line-height: $small-font-size * $line-height-base;\n  "]))),
+    mark: css(_templateObject5$l || (_templateObject5$l = _taggedTemplateLiteral(["\n    padding: $mark-padding;\n    background-color: $mark-bg;\n  "])))
   });
 
   var getStyleName = function getStyleName(styleName, color) {
@@ -7053,13 +7060,13 @@
         small = _props$small === void 0 ? false : _props$small,
         style = props.style,
         styleName = props.styleName,
-        elementProps = _objectWithoutProperties(props, _excluded$1v);
+        elementProps = _objectWithoutProperties(props, _excluded$1w);
 
     var media = useMedia();
     var context = React.useContext(TextStyleContext);
-    var classes = getStyles(styles$1d, [bold && 'strong', italic && 'italic', small && 'small', mark && 'mark']);
+    var classes = getStyles(styles$1e, [bold && 'strong', italic && 'italic', small && 'small', mark && 'mark']);
     var resolveStyle = useStyle([// eslint-disable-next-line react/destructuring-assignment
-    (!context || !context.hasTextAncestor) && styles$1d.text, // eslint-disable-next-line react/destructuring-assignment
+    (!context || !context.hasTextAncestor) && styles$1e.text, // eslint-disable-next-line react/destructuring-assignment
     context && context.style, classes, style], getStyleName(styleName, color));
     var element = /*#__PURE__*/React__default["default"].createElement(reactNative.Text, _extends$1({}, elementProps, {
       ref: ref,
@@ -7083,30 +7090,30 @@
     }, element);
   });
   Text.displayName = 'Text';
-  Text.propTypes = propTypes$1w;
+  Text.propTypes = propTypes$1x;
 
-  var _excluded$1u = ["children", "style", "textStyle"];
+  var _excluded$1v = ["children", "style", "textStyle"];
 
-  var _templateObject$1a, _templateObject2$S;
-  var propTypes$1v = {
+  var _templateObject$1b, _templateObject2$T;
+  var propTypes$1w = {
     children: PropTypes.node.isRequired,
     // eslint-disable-next-line react/forbid-prop-types
     style: PropTypes.any,
     // eslint-disable-next-line react/forbid-prop-types
     textStyle: PropTypes.any
   };
-  var styles$1c = StyleSheet.create({
-    '.badge': css(_templateObject$1a || (_templateObject$1a = _taggedTemplateLiteral(["\n    // display: inline-block;\n    padding: $badge-padding-y $badge-padding-x;\n    border-radius: $badge-border-radius;\n    // @include gradient-bg();\n  "]))),
-    '.badge --text': css(_templateObject2$S || (_templateObject2$S = _taggedTemplateLiteral(["\n    font-size: $badge-font-size;\n    font-weight: $badge-font-weight;\n    line-height: $badge-font-size * 1;\n    color: $badge-color;\n    text-align: center;\n    // white-space: nowrap;\n    // vertical-align: baseline;\n  "])))
+  var styles$1d = StyleSheet.create({
+    '.badge': css(_templateObject$1b || (_templateObject$1b = _taggedTemplateLiteral(["\n    // display: inline-block;\n    padding: $badge-padding-y $badge-padding-x;\n    border-radius: $badge-border-radius;\n    // @include gradient-bg();\n  "]))),
+    '.badge --text': css(_templateObject2$T || (_templateObject2$T = _taggedTemplateLiteral(["\n    font-size: $badge-font-size;\n    font-weight: $badge-font-weight;\n    line-height: $badge-font-size * 1;\n    color: $badge-color;\n    text-align: center;\n    // white-space: nowrap;\n    // vertical-align: baseline;\n  "])))
   });
   var Badge = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
     var children = props.children,
         style = props.style,
         textStyle = props.textStyle,
-        elementProps = _objectWithoutProperties(props, _excluded$1u);
+        elementProps = _objectWithoutProperties(props, _excluded$1v);
 
-    var classes = getStyles(styles$1c, ['.badge']);
-    var textClasses = getStyles(styles$1c, ['.badge --text']); // composite component
+    var classes = getStyles(styles$1d, ['.badge']);
+    var textClasses = getStyles(styles$1d, ['.badge --text']); // composite component
 
     return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
@@ -7116,7 +7123,7 @@
     }, children));
   });
   Badge.displayName = 'Badge';
-  Badge.propTypes = propTypes$1v;
+  Badge.propTypes = propTypes$1w;
 
   var ListContext = /*#__PURE__*/React__default["default"].createContext();
   ListContext.displayName = 'ListContext';
@@ -7186,10 +7193,10 @@
     return context;
   }
 
-  var _excluded$1t = ["children", "active", "style", "dividerStyle", "textStyle"];
+  var _excluded$1u = ["children", "active", "style", "dividerStyle", "textStyle"];
 
-  var _templateObject$19, _templateObject2$R, _templateObject3$q;
-  var propTypes$1u = {
+  var _templateObject$1a, _templateObject2$S, _templateObject3$r;
+  var propTypes$1v = {
     children: PropTypes.node.isRequired,
     active: PropTypes.bool,
     // eslint-disable-next-line react/forbid-prop-types
@@ -7199,10 +7206,10 @@
     // eslint-disable-next-line react/forbid-prop-types
     textStyle: PropTypes.any
   };
-  var styles$1b = StyleSheet.create({
-    '.breadcrumb-item + .breadcrumb-item': css(_templateObject$19 || (_templateObject$19 = _taggedTemplateLiteral(["\n    flex-direction: row; // added for bootstrap-rn\n    padding-left: $breadcrumb-item-padding-x;\n  "]))),
-    '.breadcrumb-item + .breadcrumb-item::before': css(_templateObject2$R || (_templateObject2$R = _taggedTemplateLiteral(["\n    // float: left; // Suppress inline spacings and underlining of the separator\n    padding-right: $breadcrumb-item-padding-x;\n    color: $breadcrumb-divider-color;\n  "]))),
-    '.breadcrumb-item.active --text': css(_templateObject3$q || (_templateObject3$q = _taggedTemplateLiteral(["\n    color: $breadcrumb-active-color;\n  "])))
+  var styles$1c = StyleSheet.create({
+    '.breadcrumb-item + .breadcrumb-item': css(_templateObject$1a || (_templateObject$1a = _taggedTemplateLiteral(["\n    flex-direction: row; // added for bootstrap-rn\n    padding-left: $breadcrumb-item-padding-x;\n  "]))),
+    '.breadcrumb-item + .breadcrumb-item::before': css(_templateObject2$S || (_templateObject2$S = _taggedTemplateLiteral(["\n    // float: left; // Suppress inline spacings and underlining of the separator\n    padding-right: $breadcrumb-item-padding-x;\n    color: $breadcrumb-divider-color;\n  "]))),
+    '.breadcrumb-item.active --text': css(_templateObject3$r || (_templateObject3$r = _taggedTemplateLiteral(["\n    color: $breadcrumb-active-color;\n  "])))
   });
   var BreadcrumbItem = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
     var children = props.children,
@@ -7211,14 +7218,14 @@
         style = props.style,
         dividerStyle = props.dividerStyle,
         textStyle = props.textStyle,
-        elementProps = _objectWithoutProperties(props, _excluded$1t);
+        elementProps = _objectWithoutProperties(props, _excluded$1u);
 
     var _useForcedContext = useForcedContext(ListContext),
         first = _useForcedContext.first;
 
-    var classes = getStyles(styles$1b, [!first && '.breadcrumb-item + .breadcrumb-item']);
-    var textClasses = getStyles(styles$1b, [active && '.breadcrumb-item.active --text']);
-    var dividerClasses = getStyles(styles$1b, ['.breadcrumb-item + .breadcrumb-item::before']);
+    var classes = getStyles(styles$1c, [!first && '.breadcrumb-item + .breadcrumb-item']);
+    var textClasses = getStyles(styles$1c, [active && '.breadcrumb-item.active --text']);
+    var dividerClasses = getStyles(styles$1c, ['.breadcrumb-item + .breadcrumb-item::before']);
     var role = reactNative.Platform.OS === 'web' ? 'listitem' : null;
     return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
@@ -7234,31 +7241,31 @@
     }, reactNative.I18nManager.isRTL ? StyleSheet.value('breadcrumb-divider-flipped') : StyleSheet.value('breadcrumb-divider')), children);
   });
   BreadcrumbItem.displayName = 'BreadcrumbItem';
-  BreadcrumbItem.propTypes = propTypes$1u;
+  BreadcrumbItem.propTypes = propTypes$1v;
 
-  var _excluded$1s = ["children", "style", "textStyle"];
+  var _excluded$1t = ["children", "style", "textStyle"];
 
-  var _templateObject$18, _templateObject2$Q;
-  var propTypes$1t = {
+  var _templateObject$19, _templateObject2$R;
+  var propTypes$1u = {
     children: PropTypes.node.isRequired,
     // eslint-disable-next-line react/forbid-prop-types
     style: PropTypes.any,
     // eslint-disable-next-line react/forbid-prop-types
     textStyle: PropTypes.any
   };
-  var styles$1a = StyleSheet.create({
-    '.breadcrumb': css(_templateObject$18 || (_templateObject$18 = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: row; // added for bootstrap-rn\n    flex-wrap: wrap;\n    padding: $breadcrumb-padding-y $breadcrumb-padding-x;\n    margin-bottom: $breadcrumb-margin-bottom;\n    // list-style: none;\n    background-color: $breadcrumb-bg;\n    border-radius: $breadcrumb-border-radius;\n  "]))),
-    '.breadcrumb --text': css(_templateObject2$Q || (_templateObject2$Q = _taggedTemplateLiteral(["\n    font-size: $breadcrumb-font-size;\n    line-height: $breadcrumb-font-size * $line-height-base; // added for bootstrap-rn\n  "])))
+  var styles$1b = StyleSheet.create({
+    '.breadcrumb': css(_templateObject$19 || (_templateObject$19 = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: row; // added for bootstrap-rn\n    flex-wrap: wrap;\n    padding: $breadcrumb-padding-y $breadcrumb-padding-x;\n    margin-bottom: $breadcrumb-margin-bottom;\n    // list-style: none;\n    background-color: $breadcrumb-bg;\n    border-radius: $breadcrumb-border-radius;\n  "]))),
+    '.breadcrumb --text': css(_templateObject2$R || (_templateObject2$R = _taggedTemplateLiteral(["\n    font-size: $breadcrumb-font-size;\n    line-height: $breadcrumb-font-size * $line-height-base; // added for bootstrap-rn\n  "])))
   });
   var Breadcrumb = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
     var children = props.children,
         style = props.style,
         textStyle = props.textStyle,
-        elementProps = _objectWithoutProperties(props, _excluded$1s);
+        elementProps = _objectWithoutProperties(props, _excluded$1t);
 
     var list = useList(children);
-    var classes = getStyles(styles$1a, ['.breadcrumb']);
-    var textClasses = getStyles(styles$1a, ['.breadcrumb --text']);
+    var classes = getStyles(styles$1b, ['.breadcrumb']);
+    var textClasses = getStyles(styles$1b, ['.breadcrumb --text']);
     var role = reactNative.Platform.OS === 'web' ? 'list' : null;
     return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
@@ -7268,32 +7275,32 @@
     }), list);
   });
   Breadcrumb.displayName = 'Breadcrumb';
-  Breadcrumb.propTypes = propTypes$1t;
+  Breadcrumb.propTypes = propTypes$1u;
   Breadcrumb.Item = BreadcrumbItem;
 
   var ButtonGroupContext = /*#__PURE__*/React__default["default"].createContext();
   ButtonGroupContext.displayName = 'ButtonGroupContext';
 
-  var _excluded$1r = ["children", "size", "style"];
+  var _excluded$1s = ["children", "size", "style"];
 
-  var _templateObject$17;
-  var propTypes$1s = {
+  var _templateObject$18;
+  var propTypes$1t = {
     children: PropTypes.node.isRequired,
     size: PropTypes.oneOf(['lg', 'sm']),
     // eslint-disable-next-line react/forbid-prop-types
     style: PropTypes.any
   };
-  var styles$19 = StyleSheet.create({
-    '.btn-group': css(_templateObject$17 || (_templateObject$17 = _taggedTemplateLiteral(["\n    flex-direction: row; // added for bootstrap-rn\n    border-radius: $btn-border-radius;\n  "])))
+  var styles$1a = StyleSheet.create({
+    '.btn-group': css(_templateObject$18 || (_templateObject$18 = _taggedTemplateLiteral(["\n    flex-direction: row; // added for bootstrap-rn\n    border-radius: $btn-border-radius;\n  "])))
   });
   var ButtonGroup = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
     var children = props.children,
         size = props.size,
         style = props.style,
-        elementProps = _objectWithoutProperties(props, _excluded$1r);
+        elementProps = _objectWithoutProperties(props, _excluded$1s);
 
     var list = useList(children);
-    var classes = getStyles(styles$19, ['.btn-group']); // Accessiblity role tabpanel is only supported on web.
+    var classes = getStyles(styles$1a, ['.btn-group']); // Accessiblity role tabpanel is only supported on web.
 
     var role = reactNative.Platform.OS === 'web' ? 'group' : null;
     return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
@@ -7307,25 +7314,25 @@
     }, list));
   });
   ButtonGroup.displayName = 'ButtonGroup';
-  ButtonGroup.propTypes = propTypes$1s;
+  ButtonGroup.propTypes = propTypes$1t;
 
-  var _excluded$1q = ["children", "style"];
+  var _excluded$1r = ["children", "style"];
 
-  var _templateObject$16;
-  var propTypes$1r = {
+  var _templateObject$17;
+  var propTypes$1s = {
     children: PropTypes.node.isRequired,
     // eslint-disable-next-line react/forbid-prop-types
     style: PropTypes.any
   };
-  var styles$18 = StyleSheet.create({
-    '.btn-toolbar': css(_templateObject$16 || (_templateObject$16 = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: row; // added for bootstrap-rn\n    flex-wrap: wrap;\n    justify-content: flex-start;\n  "])))
+  var styles$19 = StyleSheet.create({
+    '.btn-toolbar': css(_templateObject$17 || (_templateObject$17 = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: row; // added for bootstrap-rn\n    flex-wrap: wrap;\n    justify-content: flex-start;\n  "])))
   });
   var ButtonToolbar = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
     var children = props.children,
         style = props.style,
-        elementProps = _objectWithoutProperties(props, _excluded$1q);
+        elementProps = _objectWithoutProperties(props, _excluded$1r);
 
-    var classes = getStyles(styles$18, ['.btn-toolbar']);
+    var classes = getStyles(styles$19, ['.btn-toolbar']);
     return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
       accessibilityRole: "toolbar",
@@ -7333,9 +7340,9 @@
     }), children);
   });
   ButtonToolbar.displayName = 'ButtonToolbar';
-  ButtonToolbar.propTypes = propTypes$1r;
+  ButtonToolbar.propTypes = propTypes$1s;
 
-  var _excluded$1p = ["ref"];
+  var _excluded$1q = ["ref"];
   function useModifier(name, props, ref) {
     var context = useForcedContext(Context);
     var useModifierHook = context.modifiers[name];
@@ -7346,12 +7353,12 @@
 
     var _useModifierHook = useModifierHook(props),
         modifierRef = _useModifierHook.ref,
-        modifierProps = _objectWithoutProperties(_useModifierHook, _excluded$1p);
+        modifierProps = _objectWithoutProperties(_useModifierHook, _excluded$1q);
 
     return [modifierProps, concatRefs(modifierRef, ref)];
   }
 
-  var _excluded$1o = ["toggle", "dismiss"],
+  var _excluded$1p = ["toggle", "dismiss"],
       _excluded2$2 = ["ref"];
 
   var getActionHook = function getActionHook(toggle, dismiss) {
@@ -7369,7 +7376,7 @@
   function useAction(props, ref) {
     var toggle = props.toggle,
         dismiss = props.dismiss,
-        restProps = _objectWithoutProperties(props, _excluded$1o);
+        restProps = _objectWithoutProperties(props, _excluded$1p);
 
     var useActionHook = getActionHook(toggle, dismiss);
 
@@ -7388,9 +7395,92 @@
     return [actionProps, concatRefs(actionRef, ref)];
   }
 
-  var _excluded$1n = ["children", "active", "style", "activeStyle", "textStyle", "activeTextStyle", "styleName"];
+  var _excluded$1o = ["color", "direction", "style"];
+
+  var _templateObject$16, _templateObject2$Q, _templateObject3$q, _templateObject4$n, _templateObject5$k;
+  var DIRECTIONS$2 = ['up', 'down', 'start', 'end'];
+  var propTypes$1r = {
+    color: PropTypes.string,
+    direction: PropTypes.oneOf(DIRECTIONS$2),
+    // eslint-disable-next-line react/forbid-prop-types
+    style: PropTypes.any
+  };
+
+  var getColor = function getColor(context) {
+    if (context && context.style) {
+      var flattenedStyle = reactNative.StyleSheet.flatten(context.style);
+
+      if (flattenedStyle.color) {
+        return flattenedStyle.color;
+      }
+    }
+
+    return StyleSheet.value('body-color');
+  };
+
+  var getBorderColorStyle = function getBorderColorStyle(color, direction) {
+    switch (direction) {
+      case 'down':
+        return {
+          borderTopColor: color
+        };
+
+      case 'up':
+        return {
+          borderBottomColor: color
+        };
+
+      case 'end':
+        return reactNative.I18nManager.isRTL ? {
+          borderRightColor: color
+        } : {
+          borderLeftColor: color
+        };
+
+      case 'start':
+        return reactNative.I18nManager.isRTL ? {
+          borderLeftColor: color
+        } : {
+          borderRightColor: color
+        };
+
+      default:
+        throw new Error('Unknown direction.');
+    }
+  };
+
+  var styles$18 = StyleSheet.create({
+    caret: css(_templateObject$16 || (_templateObject$16 = _taggedTemplateLiteral(["\n    // &::after styles\n    // display: inline-block;\n    margin-left: $caret-spacing;\n    // vertical-align: $caret-vertical-align;\n    align-self: center; // added for bootstrap-rn\n    // content: \"\";\n  "]))),
+    'caret-down': css(_templateObject2$Q || (_templateObject2$Q = _taggedTemplateLiteral(["\n    // &::after styles\n    border-top-width: $caret-width;\n    border-right-width: $caret-width;\n    border-right-color: transparent;\n    border-bottom-width: 0;\n    border-left-width: $caret-width;\n    border-left-color: transparent;\n  "]))),
+    'caret-up': css(_templateObject3$q || (_templateObject3$q = _taggedTemplateLiteral(["\n    // &::after styles\n    border-top: 0;\n    border-right-width: $caret-width;\n    border-right-color: transparent;\n    border-bottom-width: $caret-width;\n    border-left-width: $caret-width;\n    border-left-color: transparent;\n  "]))),
+    'caret-end': css(_templateObject4$n || (_templateObject4$n = _taggedTemplateLiteral(["\n    // &::after styles\n    border-top-width: $caret-width;\n    border-top-color: transparent;\n    border-right: 0;\n    border-bottom-width: $caret-width;\n    border-bottom-color: transparent;\n    border-left-width: $caret-width;\n  "]))),
+    'caret-start': css(_templateObject5$k || (_templateObject5$k = _taggedTemplateLiteral(["\n    // &::after styles\n    // display: none;\n\n    // &::before styles\n    // display: inline-block;\n    margin-left: 0; // added for bootstrap-rn\n    margin-right: $caret-spacing;\n    // vertical-align: $vertical-align;\n    // content: \"\";\n    border-top-width: $caret-width;\n    border-top-color: transparent;\n    border-right-width: $caret-width;\n    border-bottom-width: $caret-width;\n    border-bottom-color: transparent;\n  "])))
+  });
+  var Caret = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
+    var color = props.color,
+        _props$direction = props.direction,
+        direction = _props$direction === void 0 ? 'down' : _props$direction,
+        style = props.style,
+        elementProps = _objectWithoutProperties(props, _excluded$1o);
+
+    var context = React.useContext(TextStyleContext);
+    var classes = getStyles(styles$18, ['caret', "caret-".concat(direction)]);
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
+      ref: ref,
+      style: [classes, getBorderColorStyle(color || getColor(context), direction), style]
+    }));
+  });
+  Caret.displayName = 'Caret';
+  Caret.propTypes = propTypes$1r;
+
+  var _excluded$1n = ["children", "caret", "active", "style", "activeStyle", "textStyle", "activeTextStyle", "styleName"];
+  var DIRECTIONS$1 = ['up', 'down', 'start', 'end'];
   var propTypes$1q = {
     children: PropTypes.node,
+    caret: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape({
+      direction: PropTypes.oneOf(DIRECTIONS$1),
+      color: PropTypes.string
+    })]),
     active: PropTypes.bool,
     // eslint-disable-next-line react/forbid-prop-types
     style: PropTypes.any,
@@ -7422,6 +7512,27 @@
 
     return 'button';
   };
+
+  var applyCaret = function applyCaret(children, caret) {
+    if (!caret) {
+      return children;
+    }
+
+    var options = caret === true ? {} : caret;
+    var element = /*#__PURE__*/React__default["default"].createElement(Caret, {
+      color: options.color,
+      direction: options.direction
+    });
+    var space = /*#__PURE__*/React__default["default"].createElement(reactNative.Text, null, " ");
+    var isLeftCaret = options.direction === (reactNative.I18nManager.isRTL ? 'end' : 'start');
+
+    if (isLeftCaret) {
+      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, element, space, children);
+    }
+
+    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, children, space, element);
+  };
+
   var Pressable = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
     var _useModifier = useModifier('useActionable', props, ref),
         _useModifier2 = _slicedToArray(_useModifier, 2),
@@ -7434,6 +7545,8 @@
         actionRef = _useAction2[1];
 
     var children = actionProps.children,
+        _actionProps$caret = actionProps.caret,
+        caret = _actionProps$caret === void 0 ? false : _actionProps$caret,
         _actionProps$active = actionProps.active,
         active = _actionProps$active === void 0 ? false : _actionProps$active,
         style = actionProps.style,
@@ -7450,6 +7563,7 @@
     var resolveTextStyle = useStyle([context && context.style, textStyle]);
     var resolveActiveTextStyle = useStyle(active && activeTextStyle);
     var hasTextStyle = context && context.style || textStyle;
+    var wrappedChildren = applyCaret(children, caret);
     return /*#__PURE__*/React__default["default"].createElement(reactNative.Pressable, _extends$1({}, elementProps, {
       ref: actionRef,
       accessibilityRole: getRole$2(actionProps),
@@ -7474,8 +7588,8 @@
           })],
           hasAncestor: context && context.hasTextAncestor
         }
-      }, children);
-    } : children);
+      }, wrappedChildren);
+    } : wrappedChildren);
   });
   Pressable.displayName = 'Pressable';
   Pressable.propTypes = propTypes$1q;
@@ -7495,9 +7609,12 @@
       active: pressed,
       onPress: function onPress(event) {
         if (handlePress) handlePress(event);
-        setPressed(function (value) {
-          return !value;
-        });
+
+        if (!event.defaultPrevented) {
+          setPressed(function (value) {
+            return !value;
+          });
+        }
       },
       accessibilityPressed: pressed
     });
@@ -8333,9 +8450,12 @@
     return _objectSpread2(_objectSpread2({}, restProps), {}, {
       onPress: function onPress(event) {
         if (handlePress) handlePress(event);
-        context.setVisible(function (value) {
-          return !value;
-        });
+
+        if (!event.defaultPrevented) {
+          context.setVisible(function (value) {
+            return !value;
+          });
+        }
       },
       accessibilityExpanded: context.visible,
       accessibilityControls: context.identifier
@@ -8779,11 +8899,12 @@
   var DropdownContext = /*#__PURE__*/React__default["default"].createContext();
   DropdownContext.displayName = 'DropdownContext';
 
-  var _excluded$16 = ["onPress"];
+  var _excluded$16 = ["onPress", "caret"];
   function useToggleDropdown(props) {
     var context = useForcedContext(DropdownContext);
 
     var handlePress = props.onPress,
+        caret = props.caret,
         restProps = _objectWithoutProperties(props, _excluded$16);
 
     return _objectSpread2(_objectSpread2({}, restProps), {}, {
@@ -8791,12 +8912,18 @@
       ref: context.toggleRef,
       onPress: function onPress(event) {
         if (handlePress) handlePress(event);
-        context.setVisible(function (value) {
-          return !value;
-        });
+
+        if (!event.defaultPrevented) {
+          context.setVisible(function (value) {
+            return !value;
+          });
+        }
       },
       accessibilityHasPopup: true,
-      accessibilityExpanded: context.visible
+      accessibilityExpanded: context.visible,
+      caret: caret || {
+        direction: context.direction
+      }
     });
   }
 
@@ -8852,11 +8979,6 @@
       if (overlay.arrowProps.style.left) {
         overlay.arrowProps.style.left -= arrowOffset;
       }
-    } // Adjust bottom value by status bar height on Android
-
-
-    if (reactNative.Platform.OS === 'android' && overlay.overlayProps.style.bottom !== undefined && reactNative.StatusBar.currentHeight) {
-      overlay.overlayProps.style.bottom -= reactNative.StatusBar.currentHeight;
     }
 
     return children(overlay, overlayRef);
@@ -9010,7 +9132,11 @@
     '.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) {
+  var getAlignment = function getAlignment(media, center, start, end) {
+    if (center) {
+      return 'center';
+    }
+
     var alignStart = typeof start === 'boolean' ? start : media.up(start);
     var alignEnd = typeof end === 'boolean' ? end : media.up(end);
 
@@ -9027,12 +9153,16 @@
     return startIndex > endIndex ? 'start' : 'end';
   };
 
-  var transformPlacement = function transformPlacement(media, direction, start, end) {
-    if (direction === 'start' || direction === 'end') {
-      return "".concat(direction, " top");
+  var transformPlacement = function transformPlacement(media, direction, center, start, end) {
+    if (direction === 'up') {
+      return "top ".concat(getAlignment(media, center, start, end));
+    }
+
+    if (direction === 'down') {
+      return "bottom ".concat(getAlignment(media, center, start, end));
     }
 
-    return "".concat(direction, " ").concat(getAlignment(media, start, end));
+    return "".concat(direction, " top");
   };
 
   var DropdownMenu = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
@@ -9060,6 +9190,7 @@
         visible = dropdown.visible,
         setVisible = dropdown.setVisible,
         direction = dropdown.direction,
+        center = dropdown.center,
         display = dropdown.display,
         autoClose = dropdown.autoClose;
 
@@ -9092,7 +9223,7 @@
     }
 
     return /*#__PURE__*/React__default["default"].createElement(OverlayContainer, null, /*#__PURE__*/React__default["default"].createElement(Overlay, {
-      placement: transformPlacement(media, direction, start, end),
+      placement: transformPlacement(media, direction, center, start, end),
       targetRef: toggleRef,
       offset: convertToNumber(StyleSheet.value('dropdown-spacer')),
       visible: visible
@@ -9224,9 +9355,13 @@
     var classes = getStyles(styles$Q, ['.dropdown-item', active && '.dropdown-item.active', disabled && '.dropdown-item.disabled']);
     var textClasses = getStyles(styles$Q, ['.dropdown-item --text', active && '.dropdown-item.active --text', disabled && '.dropdown-item.disabled --text']);
     return /*#__PURE__*/React__default["default"].createElement(Pressable, _extends$1({}, elementProps, {
-      onPress: concatFns(function () {
-        dropdown.setVisible(false);
-      }, handlePress),
+      onPress: function onPress(event) {
+        if (handlePress) handlePress(event);
+
+        if (!event.defaultPrevented) {
+          dropdown.setVisible(false);
+        }
+      },
       disabled: disabled,
       style: [classes, style],
       textStyle: [textClasses, textStyle]
@@ -9292,7 +9427,7 @@
   DropdownDivider.displayName = 'DropdownDivider';
   DropdownDivider.propTypes = propTypes$11;
 
-  function useDropdown(defaultVisible, controlledVisible, onToggle, direction, display, autoClose) {
+  function useDropdown(defaultVisible, controlledVisible, onToggle, direction, center, display, autoClose) {
     var identifier = useIdentifier('dropdown');
     var toggleRef = React.useRef();
 
@@ -9308,10 +9443,11 @@
         setVisible: setVisible,
         toggleRef: toggleRef,
         direction: direction,
+        center: center,
         display: display,
         autoClose: autoClose
       };
-    }, [visible]);
+    }, [visible, direction, center, display, autoClose]);
   }
 
   var _excluded$$ = ["onPress"];
@@ -9324,21 +9460,25 @@
     return _objectSpread2(_objectSpread2({}, restProps), {}, {
       onPress: function onPress(event) {
         if (handlePress) handlePress(event);
-        context.setVisible(false);
+
+        if (!event.defaultPrevented) {
+          context.setVisible(false);
+        }
       }
     });
   }
 
-  var _excluded$_ = ["children", "defaultVisible", "visible", "onToggle", "direction", "display", "autoClose", "style"];
+  var _excluded$_ = ["children", "defaultVisible", "visible", "onToggle", "direction", "center", "display", "autoClose", "style"];
 
   var _templateObject$O;
-  var DIRECTIONS = ['top', 'bottom', 'start', 'end'];
+  var DIRECTIONS = ['up', 'down', 'start', 'end'];
   var propTypes$10 = {
     children: PropTypes.node,
     defaultVisible: PropTypes.bool,
     visible: PropTypes.bool,
     onToggle: PropTypes.func,
     direction: PropTypes.oneOf(DIRECTIONS),
+    center: PropTypes.bool,
     display: PropTypes.oneOf(['dynamic', 'static']),
     autoClose: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['inside', 'outside'])]),
     // eslint-disable-next-line react/forbid-prop-types
@@ -9354,7 +9494,9 @@
         visible = props.visible,
         onToggle = props.onToggle,
         _props$direction = props.direction,
-        direction = _props$direction === void 0 ? 'bottom' : _props$direction,
+        direction = _props$direction === void 0 ? 'down' : _props$direction,
+        _props$center = props.center,
+        center = _props$center === void 0 ? false : _props$center,
         _props$display = props.display,
         display = _props$display === void 0 ? 'dynamic' : _props$display,
         _props$autoClose = props.autoClose,
@@ -9362,7 +9504,7 @@
         style = props.style,
         elementProps = _objectWithoutProperties(props, _excluded$_);
 
-    var dropdown = useDropdown(defaultVisible, visible, onToggle, direction, display, autoClose);
+    var dropdown = useDropdown(defaultVisible, visible, onToggle, direction, center, display, autoClose);
     var classes = getStyles(styles$N, ['.dropdown']);
     return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
       ref: ref,
@@ -10851,7 +10993,7 @@
   ModalTitle.displayName = 'ModalTitle';
   ModalTitle.propTypes = propTypes$B;
 
-  var _excluded$y = ["children", "style", "innerStyle"];
+  var _excluded$y = ["children", "style", "contentContainerStyle"];
 
   var _templateObject$t;
   var propTypes$A = {
@@ -10859,7 +11001,7 @@
     // eslint-disable-next-line react/forbid-prop-types
     style: PropTypes.any,
     // eslint-disable-next-line react/forbid-prop-types
-    innerStyle: PropTypes.any
+    contentContainerStyle: 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  "])))
@@ -10867,7 +11009,7 @@
   var ModalBody = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
     var children = props.children,
         style = props.style,
-        innerStyle = props.innerStyle,
+        contentContainerStyle = props.contentContainerStyle,
         elementProps = _objectWithoutProperties(props, _excluded$y);
 
     var _useForcedContext = useForcedContext(ModalContext),
@@ -10878,7 +11020,7 @@
     return /*#__PURE__*/React__default["default"].createElement(FlexView, _extends$1({}, elementProps, {
       ref: ref,
       style: scrollable ? style : [classes, style],
-      contentContainerStyle: scrollable ? [classes, innerStyle] : undefined
+      contentContainerStyle: scrollable ? [classes, contentContainerStyle] : undefined
     }), children);
   });
   ModalBody.displayName = 'ModalBody';
@@ -10909,7 +11051,7 @@
   ModalFooter.displayName = 'ModalFooter';
   ModalFooter.propTypes = propTypes$z;
 
-  var _excluded$w = ["children", "visible", "size", "backdrop", "scrollable", "centered", "onToggle", "style", "innerStyle", "dialogStyle", "contentStyle", "textStyle", "dialogTextStyle", "contentTextStyle"];
+  var _excluded$w = ["children", "visible", "size", "backdrop", "scrollable", "centered", "onToggle", "style", "contentContainerStyle", "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'];
@@ -10924,7 +11066,7 @@
     // eslint-disable-next-line react/forbid-prop-types
     style: PropTypes.any,
     // eslint-disable-next-line react/forbid-prop-types
-    innerStyle: PropTypes.any,
+    contentContainerStyle: PropTypes.any,
     // eslint-disable-next-line react/forbid-prop-types
     dialogStyle: PropTypes.any,
     // eslint-disable-next-line react/forbid-prop-types
@@ -10961,7 +11103,7 @@
         centered = _props$centered === void 0 ? false : _props$centered,
         handleToggle = props.onToggle,
         style = props.style,
-        innerStyle = props.innerStyle,
+        contentContainerStyle = props.contentContainerStyle,
         dialogStyle = props.dialogStyle,
         contentStyle = props.contentStyle,
         textStyle = props.textStyle,
@@ -10988,13 +11130,14 @@
       onRequestClose: handleToggle
     }, backdrop && /*#__PURE__*/React__default["default"].createElement(View, {
       style: backdropClasses
-    }), /*#__PURE__*/React__default["default"].createElement(FlexView, {
+    }), /*#__PURE__*/React__default["default"].createElement(FlexView, _extends$1({}, elementProps, {
+      ref: ref,
       style: [classes, style],
       textStyle: textStyle,
-      contentContainerStyle: [scrollable ? undefined : {
+      contentContainerStyle: scrollable ? undefined : [{
         flexGrow: 1
-      }, innerStyle]
-    }, /*#__PURE__*/React__default["default"].createElement(BackdropHandler, {
+      }, contentContainerStyle]
+    }), /*#__PURE__*/React__default["default"].createElement(BackdropHandler, {
       dialogRef: dialogRef,
       onClose: handleToggle,
       backdrop: backdrop
@@ -11006,11 +11149,10 @@
       ref: dialogRef,
       style: [dialogClasses, dialogStyle],
       textStyle: dialogTextStyle
-    }, /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
-      ref: ref,
+    }, /*#__PURE__*/React__default["default"].createElement(View, {
       style: [contentClasses, contentStyle],
       textStyle: [contentTextClasses, contentTextStyle]
-    }), /*#__PURE__*/React__default["default"].createElement(ModalContext.Provider, {
+    }, /*#__PURE__*/React__default["default"].createElement(ModalContext.Provider, {
       value: modal
     }, /*#__PURE__*/React__default["default"].createElement(OverlayProvider, null, children)))))));
   });
@@ -11286,9 +11428,12 @@
       nativeID: context.identifier,
       onPress: function onPress(event) {
         if (handlePress) handlePress(event);
-        context.setExpanded(function (value) {
-          return !value;
-        });
+
+        if (!event.defaultPrevented) {
+          context.setExpanded(function (value) {
+            return !value;
+          });
+        }
       },
       accessibilitControls: context.identifier,
       accessibilityExpanded: context.expanded,
@@ -11385,7 +11530,10 @@
     return _objectSpread2(_objectSpread2({}, restProps), {}, {
       onPress: function onPress(event) {
         if (handlePress) handlePress(event);
-        context.setExpanded(false);
+
+        if (!event.defaultPrevented) {
+          context.setExpanded(false);
+        }
       },
       accessibilityLabel: 'Close'
     });
@@ -12335,7 +12483,7 @@
   var _excluded$9 = ["children", "selectedValue", "onValueChange", "disabled"];
   var propTypes$a = {
     children: PropTypes.node.isRequired,
-    selectedValue: PropTypes.oneOfType([PropTypes.bool, PropTypes.number, PropTypes.string]),
+    selectedValue: PropTypes.oneOfType([PropTypes.bool, PropTypes.number, PropTypes.string, PropTypes.object]),
     onValueChange: PropTypes.func,
     disabled: PropTypes.bool
   };
@@ -12436,7 +12584,7 @@
     style: PropTypes.any
   };
   var styles$5 = StyleSheet.create(_objectSpread2(_objectSpread2(_objectSpread2({
-    '.spinner-border': css(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteral(["\n    // display: inline-block;\n    width: $spinner-width;\n    height: $spinner-height;\n    // vertical-align: $spinner-vertical-align;\n    border-width: $spinner-border-width;\n    border-style: solid;\n    border-top-color: $body-color;\n    border-bottom-color: $body-color;\n    border-left-color: $body-color;\n    border-right-color: transparent;\n    border-radius: $spinner-width * 0.5; // 50%;\n    // animation: $spinner-animation-speed linear infinite spinner-border;\n  "])))
+    '.spinner-border': css(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteral(["\n    // display: inline-block;\n    width: $spinner-width;\n    height: $spinner-height;\n    // vertical-align: $spinner-vertical-align;\n    border-width: $spinner-border-width;\n    border-style: solid;\n    border-top-color: $body-color;\n    border-bottom-color: $body-color;\n    border-left-color: $body-color;\n    // workaround for issue https://github.com/facebook/react-native/issues/34722\n    border-right-color: rgba(0, 0, 0, 0.01); // transparent;\n    border-radius: $spinner-width * 0.5; // 50%;\n    // animation: $spinner-animation-speed linear infinite spinner-border;\n  "])))
   }, each(THEME_COLORS, function (color, value) {
     return _defineProperty({}, ".spinner-border-".concat(color), css(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteral(["\n      border-top-color: ", ";\n      border-bottom-color: ", ";\n      border-left-color: ", ";\n    "])), value, value, value));
   })), {}, {
@@ -12612,8 +12760,11 @@
       nativeID: "".concat(id, "-tab"),
       onPress: function onPress(event) {
         if (handlePress) handlePress(event);
-        event.preventDefault();
-        context.setActiveTarget(target);
+
+        if (!event.defaultPrevented) {
+          event.preventDefault();
+          context.setActiveTarget(target);
+        }
       },
       active: active,
       accessibilityRole: 'tab',
@@ -12790,6 +12941,7 @@
   exports.ButtonGroup = ButtonGroup;
   exports.ButtonToolbar = ButtonToolbar;
   exports.Card = Card;
+  exports.Caret = Caret;
   exports.Checkbox = Checkbox;
   exports.CloseButton = CloseButton;
   exports.Code = Code;