bootstrap-rn 0.2.5 → 0.2.7

package/dist/bootstrap-rn.esm.js

@@ -1,6 +1,6 @@
 import { OverlayProvider, useOverlayPosition, OverlayContainer } from '@react-native-aria/overlays';
 export { PortalProvider } from '@react-native-aria/overlays';
-import { Platform, PixelRatio, StyleSheet as StyleSheet$1, I18nManager, Dimensions, View as View$1, Text as Text$1, Pressable as Pressable$1, SafeAreaView, unstable_createElement, StatusBar, findNodeHandle, TextInput as TextInput$1, Image as Image$1, ImageBackground as ImageBackground$1, ScrollView as ScrollView$1, Modal as Modal$1, Picker as Picker$1, Animated, Easing } from 'react-native';
+import { Platform, PixelRatio, StyleSheet as StyleSheet$1, I18nManager, Dimensions, View as View$1, Text as Text$1, Pressable as Pressable$1, SafeAreaView, unstable_createElement, findNodeHandle, TextInput as TextInput$1, Image as Image$1, ImageBackground as ImageBackground$1, ScrollView as ScrollView$1, Modal as Modal$1, Picker as Picker$1, Animated, Easing } from 'react-native';
 import { transformRawValue, getStylesForProperty, getPropertyName } from 'css-to-react-native';
 import { rgba as rgba$1, mix, parseToRgb } from 'polished';
 import React, { useState, useEffect, useMemo, useRef, useContext, createContext } from 'react';
@@ -1208,19 +1208,6 @@ function concatRefs() {
     });
   };
 }
-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;
 }
@@ -2076,13 +2063,13 @@ var utilities = {
 
 };
 
-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;
@@ -2093,7 +2080,7 @@ function makeUtility(options) {
         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));
     }));
   });
 }
@@ -2283,7 +2270,7 @@ var divide = fn(function (_ref17) {
 });
 /* eslint-enable */
 
-var _templateObject$1d;
+var _templateObject$1e;
 
 var url = function url(val) {
   return function (t) {
@@ -2293,7 +2280,7 @@ var url = function url(val) {
   };
 };
 
-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'],
@@ -2508,7 +2495,7 @@ var variables = css(_templateObject$1d || (_templateObject$1d = _taggedTemplateL
 }, function () {
   return Platform.select({
     android: 'monospace',
-    ios: 'Courier',
+    ios: 'Courier New',
     default: "\"SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace\""
   });
 }, function (t) {
@@ -2794,7 +2781,7 @@ function useViewport(initialViewport) {
   return viewport;
 }
 
-var propTypes$1z = {
+var propTypes$1A = {
   children: PropTypes.node.isRequired,
   // eslint-disable-next-line react/forbid-prop-types,
   utilities: PropTypes.object,
@@ -2843,7 +2830,7 @@ function Provider(props) {
   }, /*#__PURE__*/React.createElement(OverlayProvider, null, children));
 }
 
-Provider.propTypes = propTypes$1z;
+Provider.propTypes = propTypes$1A;
 
 var TextStyleContext = /*#__PURE__*/React.createContext();
 TextStyleContext.displayName = 'TextStyleContext';
@@ -2928,8 +2915,8 @@ function useStyle(style, styleName) {
   };
 }
 
-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,
@@ -2943,7 +2930,7 @@ var View = /*#__PURE__*/React.forwardRef(function (props, ref) {
       style = props.style,
       textStyle = props.textStyle,
       styleName = props.styleName,
-      elementProps = _objectWithoutProperties(props, _excluded$1x);
+      elementProps = _objectWithoutProperties(props, _excluded$1y);
 
   var media = useMedia();
   var context = useContext(TextStyleContext);
@@ -2965,12 +2952,12 @@ var View = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, 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,
@@ -2979,16 +2966,16 @@ var propTypes$1x = {
   // 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;
 })), {}, {
@@ -3003,10 +2990,10 @@ var Alert = /*#__PURE__*/React.forwardRef(function (props, ref) {
       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.createElement(View, _extends({}, elementProps, {
     ref: ref,
     accessibilityRole: "alert",
@@ -3015,12 +3002,12 @@ var Alert = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }), 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,
@@ -3031,12 +3018,12 @@ var propTypes$1w = {
   // 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) {
@@ -3059,13 +3046,13 @@ var Text = /*#__PURE__*/React.forwardRef(function (props, ref) {
       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 = 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.createElement(Text$1, _extends({}, elementProps, {
     ref: ref,
@@ -3089,30 +3076,30 @@ var Text = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, 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.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.createElement(View, _extends({}, elementProps, {
     ref: ref,
@@ -3122,7 +3109,7 @@ var Badge = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, children));
 });
 Badge.displayName = 'Badge';
-Badge.propTypes = propTypes$1v;
+Badge.propTypes = propTypes$1w;
 
 var ListContext = /*#__PURE__*/React.createContext();
 ListContext.displayName = 'ListContext';
@@ -3182,10 +3169,10 @@ function useForcedContext(Context) {
   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
@@ -3195,10 +3182,10 @@ var propTypes$1u = {
   // 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.forwardRef(function (props, ref) {
   var children = props.children,
@@ -3207,14 +3194,14 @@ var BreadcrumbItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
       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 = Platform.OS === 'web' ? 'listitem' : null;
   return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
     ref: ref,
@@ -3230,31 +3217,31 @@ var BreadcrumbItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, 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.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 = Platform.OS === 'web' ? 'list' : null;
   return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
     ref: ref,
@@ -3264,32 +3251,32 @@ var Breadcrumb = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }), list);
 });
 Breadcrumb.displayName = 'Breadcrumb';
-Breadcrumb.propTypes = propTypes$1t;
+Breadcrumb.propTypes = propTypes$1u;
 Breadcrumb.Item = BreadcrumbItem;
 
 var ButtonGroupContext = /*#__PURE__*/React.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.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 = Platform.OS === 'web' ? 'group' : null;
   return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
@@ -3303,25 +3290,25 @@ var ButtonGroup = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, 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.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.createElement(View, _extends({}, elementProps, {
     ref: ref,
     accessibilityRole: "toolbar",
@@ -3329,9 +3316,9 @@ var ButtonToolbar = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }), 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];
@@ -3342,12 +3329,12 @@ function useModifier(name, props, ref) {
 
   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) {
@@ -3365,7 +3352,7 @@ var getActionHook = function getActionHook(toggle, dismiss) {
 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);
 
@@ -3384,9 +3371,92 @@ function useAction(props, ref) {
   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 = StyleSheet$1.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 I18nManager.isRTL ? {
+        borderRightColor: color
+      } : {
+        borderLeftColor: color
+      };
+
+    case 'start':
+      return 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.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 = useContext(TextStyleContext);
+  var classes = getStyles(styles$18, ['caret', "caret-".concat(direction)]);
+  return /*#__PURE__*/React.createElement(View, _extends({}, 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,
@@ -3418,6 +3488,27 @@ var getRole$2 = function getRole(props) {
 
   return 'button';
 };
+
+var applyCaret = function applyCaret(children, caret) {
+  if (!caret) {
+    return children;
+  }
+
+  var options = caret === true ? {} : caret;
+  var element = /*#__PURE__*/React.createElement(Caret, {
+    color: options.color,
+    direction: options.direction
+  });
+  var space = /*#__PURE__*/React.createElement(Text$1, null, " ");
+  var isLeftCaret = options.direction === (I18nManager.isRTL ? 'end' : 'start');
+
+  if (isLeftCaret) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, element, space, children);
+  }
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, children, space, element);
+};
+
 var Pressable = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _useModifier = useModifier('useActionable', props, ref),
       _useModifier2 = _slicedToArray(_useModifier, 2),
@@ -3430,6 +3521,8 @@ var Pressable = /*#__PURE__*/React.forwardRef(function (props, ref) {
       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,
@@ -3446,6 +3539,7 @@ var Pressable = /*#__PURE__*/React.forwardRef(function (props, ref) {
   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.createElement(Pressable$1, _extends({}, elementProps, {
     ref: actionRef,
     accessibilityRole: getRole$2(actionProps),
@@ -3470,8 +3564,8 @@ var Pressable = /*#__PURE__*/React.forwardRef(function (props, ref) {
         })],
         hasAncestor: context && context.hasTextAncestor
       }
-    }, children);
-  } : children);
+    }, wrappedChildren);
+  } : wrappedChildren);
 });
 Pressable.displayName = 'Pressable';
 Pressable.propTypes = propTypes$1q;
@@ -3491,9 +3585,12 @@ function useToggleButton(props) {
     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
   });
@@ -4329,9 +4426,12 @@ function useToggleCollapse(props) {
   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
@@ -4775,11 +4875,12 @@ Code.propTypes = propTypes$1a;
 var DropdownContext = /*#__PURE__*/React.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), {}, {
@@ -4787,12 +4888,18 @@ function useToggleDropdown(props) {
     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 === undefined ? {
+      direction: context.direction
+    } : caret
   });
 }
 
@@ -4848,11 +4955,6 @@ var Overlay = function Overlay(props) {
     if (overlay.arrowProps.style.left) {
       overlay.arrowProps.style.left -= arrowOffset;
     }
-  } // Adjust bottom value by status bar height on Android
-
-
-  if (Platform.OS === 'android' && overlay.overlayProps.style.bottom !== undefined && StatusBar.currentHeight) {
-    overlay.overlayProps.style.bottom -= StatusBar.currentHeight;
   }
 
   return children(overlay, overlayRef);
@@ -5006,7 +5108,11 @@ var styles$T = StyleSheet.create(_objectSpread2(_objectSpread2(_objectSpread2({
   '.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);
 
@@ -5023,12 +5129,16 @@ var getAlignment = function getAlignment(media, start, end) {
   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));
   }
 
-  return "".concat(direction, " ").concat(getAlignment(media, start, end));
+  if (direction === 'down') {
+    return "bottom ".concat(getAlignment(media, center, start, end));
+  }
+
+  return "".concat(direction, " top");
 };
 
 var DropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
@@ -5056,6 +5166,7 @@ var DropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
       visible = dropdown.visible,
       setVisible = dropdown.setVisible,
       direction = dropdown.direction,
+      center = dropdown.center,
       display = dropdown.display,
       autoClose = dropdown.autoClose;
 
@@ -5088,7 +5199,7 @@ var DropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }
 
   return /*#__PURE__*/React.createElement(OverlayContainer, null, /*#__PURE__*/React.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
@@ -5220,9 +5331,13 @@ var DropdownItem = function DropdownItem(props) {
   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.createElement(Pressable, _extends({}, 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]
@@ -5288,7 +5403,7 @@ var DropdownDivider = /*#__PURE__*/React.forwardRef(function (props, ref) {
 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 = useRef();
 
@@ -5304,10 +5419,11 @@ function useDropdown(defaultVisible, controlledVisible, onToggle, direction, dis
       setVisible: setVisible,
       toggleRef: toggleRef,
       direction: direction,
+      center: center,
       display: display,
       autoClose: autoClose
     };
-  }, [visible]);
+  }, [visible, direction, center, display, autoClose]);
 }
 
 var _excluded$$ = ["onPress"];
@@ -5320,21 +5436,25 @@ function useDismissDropdown(props) {
   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
@@ -5350,7 +5470,9 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
       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,
@@ -5358,7 +5480,7 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
       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.createElement(View, _extends({}, elementProps, {
     ref: ref,
@@ -6847,7 +6969,7 @@ var ModalTitle = /*#__PURE__*/React.forwardRef(function (props, ref) {
 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 = {
@@ -6855,7 +6977,7 @@ var propTypes$A = {
   // 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  "])))
@@ -6863,7 +6985,7 @@ var styles$t = StyleSheet.create({
 var ModalBody = /*#__PURE__*/React.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),
@@ -6874,7 +6996,7 @@ var ModalBody = /*#__PURE__*/React.forwardRef(function (props, ref) {
   return /*#__PURE__*/React.createElement(FlexView, _extends({}, elementProps, {
     ref: ref,
     style: scrollable ? style : [classes, style],
-    contentContainerStyle: scrollable ? [classes, innerStyle] : undefined
+    contentContainerStyle: scrollable ? [classes, contentContainerStyle] : undefined
   }), children);
 });
 ModalBody.displayName = 'ModalBody';
@@ -6905,7 +7027,7 @@ var ModalFooter = /*#__PURE__*/React.forwardRef(function (props, ref) {
 ModalFooter.displayName = 'ModalFooter';
 ModalFooter.propTypes = propTypes$z;
 
-var _excluded$w = ["children", "visible", "size", "backdrop", "scrollable", "centered", "onToggle", "style", "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'];
@@ -6920,7 +7042,7 @@ var propTypes$y = {
   // 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
@@ -6957,7 +7079,7 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
       centered = _props$centered === void 0 ? false : _props$centered,
       handleToggle = props.onToggle,
       style = props.style,
-      innerStyle = props.innerStyle,
+      contentContainerStyle = props.contentContainerStyle,
       dialogStyle = props.dialogStyle,
       contentStyle = props.contentStyle,
       textStyle = props.textStyle,
@@ -6984,13 +7106,14 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onRequestClose: handleToggle
   }, backdrop && /*#__PURE__*/React.createElement(View, {
     style: backdropClasses
-  }), /*#__PURE__*/React.createElement(FlexView, {
+  }), /*#__PURE__*/React.createElement(FlexView, _extends({}, elementProps, {
+    ref: ref,
     style: [classes, style],
     textStyle: textStyle,
-    contentContainerStyle: [scrollable ? undefined : {
+    contentContainerStyle: scrollable ? undefined : [{
       flexGrow: 1
-    }, innerStyle]
-  }, /*#__PURE__*/React.createElement(BackdropHandler, {
+    }, contentContainerStyle]
+  }), /*#__PURE__*/React.createElement(BackdropHandler, {
     dialogRef: dialogRef,
     onClose: handleToggle,
     backdrop: backdrop
@@ -7002,11 +7125,10 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
     ref: dialogRef,
     style: [dialogClasses, dialogStyle],
     textStyle: dialogTextStyle
-  }, /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
-    ref: ref,
+  }, /*#__PURE__*/React.createElement(View, {
     style: [contentClasses, contentStyle],
     textStyle: [contentTextClasses, contentTextStyle]
-  }), /*#__PURE__*/React.createElement(ModalContext.Provider, {
+  }, /*#__PURE__*/React.createElement(ModalContext.Provider, {
     value: modal
   }, /*#__PURE__*/React.createElement(OverlayProvider, null, children)))))));
 });
@@ -7282,9 +7404,12 @@ function useToggleNavbar(props) {
     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,
@@ -7381,7 +7506,10 @@ function useDismissNavbar(props) {
   return _objectSpread2(_objectSpread2({}, restProps), {}, {
     onPress: function onPress(event) {
       if (handlePress) handlePress(event);
-      context.setExpanded(false);
+
+      if (!event.defaultPrevented) {
+        context.setExpanded(false);
+      }
     },
     accessibilityLabel: 'Close'
   });
@@ -8331,7 +8459,7 @@ RadioContext.displayName = 'RadioContext';
 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
 };
@@ -8432,7 +8560,7 @@ var propTypes$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));
 })), {}, {
@@ -8608,8 +8736,11 @@ function useToggleTab(props) {
     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',
@@ -8777,4 +8908,4 @@ function useFixedElement() {
   return ref;
 }
 
-export { Alert, Badge, Blockquote, Body, Breadcrumb, Button, ButtonGroup, ButtonToolbar, Card, Checkbox, CloseButton, Code, Col, Collapse, Container, Context, DisplayHeading, Dropdown, Feedback, FormCheck, FormLabel, FormText, Heading$1 as Heading, Image, ImageBackground, Input, Label, Link, ListGroup, Modal, Nav, Navbar, Offcanvas, Pagination, Heading as Paragraph, Picker, Placeholders, Popover, Pressable, Progress, Provider, Radio, Row, ScrollView, Spinner, StyleSheet, Switch, Tab, Text, TextInput, Toast, ToastContainer, Tooltip, View, add, colorContrast, css, divide, escapeSvg, fn, injectPopover, injectTooltip, makeTheme, makeUtilities, shadeColor, shiftColor, subtract, tintColor, useFixedElement, useMedia, useStyle };
+export { Alert, Badge, Blockquote, Body, Breadcrumb, Button, ButtonGroup, ButtonToolbar, Card, Caret, Checkbox, CloseButton, Code, Col, Collapse, Container, Context, DisplayHeading, Dropdown, Feedback, FormCheck, FormLabel, FormText, Heading$1 as Heading, Image, ImageBackground, Input, Label, Link, ListGroup, Modal, Nav, Navbar, Offcanvas, Pagination, Heading as Paragraph, Picker, Placeholders, Popover, Pressable, Progress, Provider, Radio, Row, ScrollView, Spinner, StyleSheet, Switch, Tab, Text, TextInput, Toast, ToastContainer, Tooltip, View, add, colorContrast, css, divide, escapeSvg, fn, injectPopover, injectTooltip, makeTheme, makeUtilities, shadeColor, shiftColor, subtract, tintColor, useFixedElement, useMedia, useStyle };