bootstrap-rn 0.2.14 → 0.3.0

package/dist/bootstrap-rn.esm.js

@@ -6,7 +6,6 @@ import React, { useState, useEffect, useMemo, useRef, useContext, createContext
 import PropTypes from 'prop-types';
 import invariant from 'tiny-invariant';
 import { useFocusRing } from '@react-native-aria/focus';
-import { SvgXml } from 'react-native-svg';
 
 const checkFunction = (char, silent) => {
   if (typeof char !== 'function') {
@@ -1260,27 +1259,26 @@ const NEGATIVE_SPACERS = each(SPACERS, (key, value) => {
 
 const utilities = {
   align: {
-    property: 'text-align-vertical',
+    property: 'vertical-align',
     class: 'align',
     values: {
       // baseline: 'baseline',
       top: 'top',
-      center: 'center',
-      // 'middle',
+      middle: 'middle',
       bottom: 'bottom'
       // 'text-bottom': 'text-bottom',
       // 'text-top': 'text-top',
     }
   },
 
-  /* float: {
-    responsive: true,
-    property: 'float',
-    values: {
-      start: 'left',
-      end: 'right',
-      none: 'none',
-    },
+  /* float: {
+    responsive: true,
+    property: 'float',
+    values: {
+      start: 'left',
+      end: 'right',
+      none: 'none',
+    },
   }, */
   // Opacity utilities
   opacity: {
@@ -1359,14 +1357,14 @@ const utilities = {
     class: 'end',
     values: POSITION_VALUES
   },
-  /* translateMiddle: {
-    property: 'transform',
-    class: 'translate-middle',
-    values: {
-      null: translate(-50%, -50%),
-      x: translateX(-50%),
-      y: translateY(-50%),
-    },
+  /* translateMiddle: {
+    property: 'transform',
+    class: 'translate-middle',
+    values: {
+      null: translate(-50%, -50%),
+      x: translateX(-50%),
+      y: translateY(-50%),
+    },
   }, */
   border: {
     property: 'border',
@@ -1376,35 +1374,35 @@ const utilities = {
     }
   },
   // TODO: Find a way to write border-top as border-top-width, ...
-  /* borderTop: {
-    property: 'border-top',
-    values: {
-      null: (t) => `${t['border-width']} solid ${t['border-color']}`,
-      0: '0',
-    },
+  /* borderTop: {
+    property: 'border-top',
+    values: {
+      null: (t) => `${t['border-width']} solid ${t['border-color']}`,
+      0: '0',
+    },
   }, */
-  /* borderRight: {
-    property: 'border-right',
-    class: 'border-end',
-    values: {
-      null: (t) => `${t['border-width']} solid ${t['border-color']}`,
-      0: '0',
-    },
+  /* borderRight: {
+    property: 'border-right',
+    class: 'border-end',
+    values: {
+      null: (t) => `${t['border-width']} solid ${t['border-color']}`,
+      0: '0',
+    },
   }, */
-  /* borderBottom: {
-    property: 'border-bottom',
-    values: {
-      null: (t) => `${t['border-width']} solid ${t['border-color']}`,
-      0: '0',
-    },
+  /* borderBottom: {
+    property: 'border-bottom',
+    values: {
+      null: (t) => `${t['border-width']} solid ${t['border-color']}`,
+      0: '0',
+    },
   }, */
-  /* borderLeft: {
-    property: 'border-left',
-    class: 'border-start',
-    values: {
-      null: (t) => `${t['border-width']} solid ${t['border-color']}`,
-      0: '0',
-    },
+  /* borderLeft: {
+    property: 'border-left',
+    class: 'border-start',
+    values: {
+      null: (t) => `${t['border-width']} solid ${t['border-color']}`,
+      0: '0',
+    },
   }, */
   borderColor: {
     property: 'border-color',
@@ -1533,11 +1531,11 @@ const utilities = {
       'wrap-reverse': 'wrap-reverse'
     }
   },
-  /* gap: {
-    responsive: true,
-    property: 'gap',
-    class: 'gap',
-    values: SPACERS,
+  /* gap: {
+    responsive: true,
+    property: 'gap',
+    class: 'gap',
+    values: SPACERS,
   }, */
   justifyContent: {
     responsive: true,
@@ -1587,19 +1585,19 @@ const utilities = {
       stretch: 'stretch'
     }
   },
-  /* order: {
-    responsive: true,
-    property: 'order',
-    values: {
-      first: '-1',
-      0: '0',
-      1: '1',
-      2: '2',
-      3: '3',
-      4: '4',
-      5: '5',
-      last: '6',
-    },
+  /* order: {
+    responsive: true,
+    property: 'order',
+    values: {
+      first: '-1',
+      0: '0',
+      1: '1',
+      2: '2',
+      3: '3',
+      4: '4',
+      5: '5',
+      last: '6',
+    },
   }, */
   // Margin utilities
   margin: {
@@ -1817,21 +1815,21 @@ const utilities = {
       capitalize: 'capitalize'
     }
   },
-  /* whiteSpace: {
-    property: 'white-space',
-    class: 'text',
-    values: {
-      wrap: 'normal',
-      nowrap: 'nowrap',
-    },
+  /* whiteSpace: {
+    property: 'white-space',
+    class: 'text',
+    values: {
+      wrap: 'normal',
+      nowrap: 'nowrap',
+    },
   }, */
-  /* wordWrap: {
-    property: ['word-wrap', 'word-break'],
-    class: 'text',
-    values: {
-      break: 'break-word',
-    },
-    rtl: false,
+  /* wordWrap: {
+    property: ['word-wrap', 'word-break'],
+    class: 'text',
+    values: {
+      break: 'break-word',
+    },
+    rtl: false,
   }, */
   color: {
     property: 'color',
@@ -1874,28 +1872,28 @@ const utilities = {
       100: '1'
     }
   },
-  /* gradient: {
-    property: 'background-image',
-    class: 'bg',
-    values: {
-      gradient: 'var(--#{$variable-prefix}gradient))',
-    },
+  /* gradient: {
+    property: 'background-image',
+    class: 'bg',
+    values: {
+      gradient: 'var(--#{$variable-prefix}gradient))',
+    },
   }, */
-  /* userSelect: {
-    property: 'user-select',
-    values: {
-      all: 'all',
-      auto: 'auto',
-      none: 'none',
-    },
+  /* userSelect: {
+    property: 'user-select',
+    values: {
+      all: 'all',
+      auto: 'auto',
+      none: 'none',
+    },
   }, */
-  /* pointerEvents: {
-    property: 'pointer-events',
-    class: 'pe',
-    values: {
-      none: 'none',
-      auto: 'auto',
-    },
+  /* pointerEvents: {
+    property: 'pointer-events',
+    class: 'pe',
+    values: {
+      none: 'none',
+      auto: 'auto',
+    },
   }, */
   rounded: {
     property: 'border-radius',
@@ -1912,41 +1910,41 @@ const utilities = {
     }
   }
   // TODO: Support multiple properties for rounded-* utilities.
-  /* roundedTop: {
-    property: ['border-top-left-radius', 'border-top-right-radius'],
-    class: 'rounded-top',
-    values: {
-      null: (t) => t['border-radius'],
-    },
+  /* roundedTop: {
+    property: ['border-top-left-radius', 'border-top-right-radius'],
+    class: 'rounded-top',
+    values: {
+      null: (t) => t['border-radius'],
+    },
   }, */
-  /* roundedEnd: {
-    property: ['border-top-right-radius', 'border-bottom-right-radius'],
-    class: 'rounded-end',
-    values: {
-      null: (t) => t['border-radius'],
-    },
+  /* roundedEnd: {
+    property: ['border-top-right-radius', 'border-bottom-right-radius'],
+    class: 'rounded-end',
+    values: {
+      null: (t) => t['border-radius'],
+    },
   }, */
-  /* roundedBottom: {
-    property: ['border-bottom-right-radius', 'border-bottom-left-radius'],
-    class: 'rounded-bottom',
-    values: {
-      null: (t) => t['border-radius'],
-    },
+  /* roundedBottom: {
+    property: ['border-bottom-right-radius', 'border-bottom-left-radius'],
+    class: 'rounded-bottom',
+    values: {
+      null: (t) => t['border-radius'],
+    },
   }, */
-  /* roundedStart: {
-    property: ['border-bottom-left-radius', 'border-top-left-radius'],
-    class: 'rounded-start',
-    values: {
-      null: (t) => t['border-radius'],
-    },
+  /* roundedStart: {
+    property: ['border-bottom-left-radius', 'border-top-left-radius'],
+    class: 'rounded-start',
+    values: {
+      null: (t) => t['border-radius'],
+    },
   }, */
-  /* visibility: {
-    property: 'visibility',
-    class: 'null',
-    values: {
-      visible: 'visible',
-      invisible: 'hidden',
-    },
+  /* visibility: {
+    property: 'visibility',
+    class: 'null',
+    values: {
+      visible: 'visible',
+      invisible: 'hidden',
+    },
   }, */
 };
 
@@ -2119,7 +2117,7 @@ const divide = fn(_ref8 => {
 
 var _templateObject$1e;
 const url = val => t => "url(\"".concat(val.replace(/#{\$(.*?)}/g, (_, key) => t[key]), "\")");
-const 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: 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: 15%;\n  $btn-hover-bg-tint-amount: 15%;\n  $btn-hover-border-shade-amount: 20%;\n  $btn-hover-border-tint-amount: 10%;\n  $btn-active-bg-shade-amount: 20%;\n  $btn-active-bg-tint-amount: 20%;\n  $btn-active-border-shade-amount: 25%;\n  $btn-active-border-tint-amount: 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: 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: -80%;\n  $alert-border-scale: -70%;\n  $alert-color-scale: 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: -80%;\n  $list-group-item-color-scale: 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"])), t => ({
+const 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: 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: 15%;\n  $btn-hover-bg-tint-amount: 15%;\n  $btn-hover-border-shade-amount: 20%;\n  $btn-hover-border-tint-amount: 10%;\n  $btn-active-bg-shade-amount: 20%;\n  $btn-active-bg-tint-amount: 20%;\n  $btn-active-border-shade-amount: 25%;\n  $btn-active-border-tint-amount: 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: $form-check-input-width * 0.5; // 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: -80%;\n  $alert-border-scale: -70%;\n  $alert-color-scale: 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: -80%;\n  $list-group-item-color-scale: 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"])), t => ({
   100: t['gray-100'],
   200: t['gray-200'],
   300: t['gray-300'],
@@ -2487,9 +2485,8 @@ function useViewport(initialViewport) {
     const nextViewport = calculateViewport(breakpoints, width);
     setViewport(nextViewport);
   };
-
-  // Initially determine viewport after mounting.
   useEffect(() => {
+    // Initially determine viewport after mounting.
     handleChange({
       window: Dimensions.get('window')
     });
@@ -2669,7 +2666,7 @@ const propTypes$1y = {
   // eslint-disable-next-line react/forbid-prop-types
   textStyle: PropTypes.any
 };
-const styles$1f = StyleSheet.create(_objectSpread2(_objectSpread2({
+const styles$1e = 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, (state, value) => ({
   [".alert-".concat(state)]: css(_templateObject2$V || (_templateObject2$V = _taggedTemplateLiteral(["\n      background-color: ", ";\n      border-color: ", ";\n    "])), shiftColor(value, t => t['alert-bg-scale']), shiftColor(value, t => t['alert-border-scale'])),
@@ -2688,11 +2685,11 @@ const Alert = /*#__PURE__*/React.forwardRef((props, ref) => {
       textStyle
     } = props,
     elementProps = _objectWithoutProperties(props, _excluded$1x);
-  const classes = getStyles(styles$1f, ['.alert', ".alert-".concat(color), dismissible && '.alert-dismissible']);
-  const textClasses = getStyles(styles$1f, [".alert-".concat(color, " --text")]);
+  const classes = getStyles(styles$1e, ['.alert', ".alert-".concat(color), dismissible && '.alert-dismissible']);
+  const textClasses = getStyles(styles$1e, [".alert-".concat(color, " --text")]);
   return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
     ref: ref,
-    accessibilityRole: "alert",
+    role: "alert",
     style: [classes, style],
     textStyle: [textClasses, textStyle]
   }), children);
@@ -2713,7 +2710,7 @@ const propTypes$1x = {
   // eslint-disable-next-line react/forbid-prop-types
   styleName: PropTypes.any
 };
-const styles$1e = StyleSheet.create({
+const styles$1d = 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  "]))),
@@ -2740,10 +2737,10 @@ const Text = /*#__PURE__*/React.forwardRef((props, ref) => {
     elementProps = _objectWithoutProperties(props, _excluded$1w);
   const media = useMedia();
   const context = useContext(TextStyleContext);
-  const classes = getStyles(styles$1e, [bold && 'strong', italic && 'italic', small && 'small', mark && 'mark']);
+  const classes = getStyles(styles$1d, [bold && 'strong', italic && 'italic', small && 'small', mark && 'mark']);
   const resolveStyle = useStyle([
   // eslint-disable-next-line react/destructuring-assignment
-  (!context || !context.hasTextAncestor) && styles$1e.text,
+  (!context || !context.hasTextAncestor) && styles$1d.text,
   // eslint-disable-next-line react/destructuring-assignment
   context && context.style, classes, style], getStyleName(styleName, color));
   const element = /*#__PURE__*/React.createElement(Text$1, _extends({}, elementProps, {
@@ -2780,7 +2777,7 @@ const propTypes$1w = {
   // eslint-disable-next-line react/forbid-prop-types
   textStyle: PropTypes.any
 };
-const styles$1d = StyleSheet.create({
+const styles$1c = 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  "])))
 });
@@ -2791,8 +2788,8 @@ const Badge = /*#__PURE__*/React.forwardRef((props, ref) => {
       textStyle
     } = props,
     elementProps = _objectWithoutProperties(props, _excluded$1v);
-  const classes = getStyles(styles$1d, ['.badge']);
-  const textClasses = getStyles(styles$1d, ['.badge --text']);
+  const classes = getStyles(styles$1c, ['.badge']);
+  const textClasses = getStyles(styles$1c, ['.badge --text']);
 
   // composite component
   return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
@@ -2865,7 +2862,7 @@ const propTypes$1v = {
   // eslint-disable-next-line react/forbid-prop-types
   textStyle: PropTypes.any
 };
-const styles$1c = StyleSheet.create({
+const styles$1b = 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  "])))
@@ -2882,20 +2879,19 @@ const BreadcrumbItem = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     first
   } = useForcedContext(ListContext);
-  const classes = getStyles(styles$1c, [!first && '.breadcrumb-item + .breadcrumb-item']);
-  const textClasses = getStyles(styles$1c, [active && '.breadcrumb-item.active --text']);
-  const dividerClasses = getStyles(styles$1c, ['.breadcrumb-item + .breadcrumb-item::before']);
+  const classes = getStyles(styles$1b, [!first && '.breadcrumb-item + .breadcrumb-item']);
+  const textClasses = getStyles(styles$1b, [active && '.breadcrumb-item.active --text']);
+  const dividerClasses = getStyles(styles$1b, ['.breadcrumb-item + .breadcrumb-item::before']);
   const role = Platform.OS === 'web' ? 'listitem' : null;
   return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
     ref: ref,
-    accessibilityRole: role
+    role: role
   }, optional(active, {
-    accessibilityCurrent: 'page'
+    'aria-current': 'page'
   }), {
     style: [classes, style],
     textStyle: [textClasses, textStyle]
   }), !first && /*#__PURE__*/React.createElement(Text, {
-    selectable: false,
     style: [dividerClasses, dividerStyle]
   }, I18nManager.isRTL ? StyleSheet.value('breadcrumb-divider-flipped') : StyleSheet.value('breadcrumb-divider')), children);
 });
@@ -2911,7 +2907,7 @@ const propTypes$1u = {
   // eslint-disable-next-line react/forbid-prop-types
   textStyle: PropTypes.any
 };
-const styles$1b = StyleSheet.create({
+const styles$1a = 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  "])))
 });
@@ -2923,12 +2919,12 @@ const Breadcrumb = /*#__PURE__*/React.forwardRef((props, ref) => {
     } = props,
     elementProps = _objectWithoutProperties(props, _excluded$1t);
   const list = useList(children);
-  const classes = getStyles(styles$1b, ['.breadcrumb']);
-  const textClasses = getStyles(styles$1b, ['.breadcrumb --text']);
+  const classes = getStyles(styles$1a, ['.breadcrumb']);
+  const textClasses = getStyles(styles$1a, ['.breadcrumb --text']);
   const role = Platform.OS === 'web' ? 'list' : null;
   return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
     ref: ref,
-    accessibilityRole: role,
+    role: role,
     style: [classes, style],
     textStyle: [textClasses, textStyle]
   }), list);
@@ -2948,7 +2944,7 @@ const propTypes$1t = {
   // eslint-disable-next-line react/forbid-prop-types
   style: PropTypes.any
 };
-const styles$1a = StyleSheet.create({
+const styles$19 = 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  "])))
 });
 const ButtonGroup = /*#__PURE__*/React.forwardRef((props, ref) => {
@@ -2959,13 +2955,13 @@ const ButtonGroup = /*#__PURE__*/React.forwardRef((props, ref) => {
     } = props,
     elementProps = _objectWithoutProperties(props, _excluded$1s);
   const list = useList(children);
-  const classes = getStyles(styles$1a, ['.btn-group']);
+  const classes = getStyles(styles$19, ['.btn-group']);
 
   // Accessiblity role tabpanel is only supported on web.
   const role = Platform.OS === 'web' ? 'group' : null;
   return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
     ref: ref,
-    accessibilityRole: role,
+    role: role,
     style: [classes, style]
   }), /*#__PURE__*/React.createElement(ButtonGroupContext.Provider, {
     value: {
@@ -2983,7 +2979,7 @@ const propTypes$1s = {
   // eslint-disable-next-line react/forbid-prop-types
   style: PropTypes.any
 };
-const styles$19 = StyleSheet.create({
+const styles$18 = 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  "])))
 });
 const ButtonToolbar = /*#__PURE__*/React.forwardRef((props, ref) => {
@@ -2992,10 +2988,10 @@ const ButtonToolbar = /*#__PURE__*/React.forwardRef((props, ref) => {
       style
     } = props,
     elementProps = _objectWithoutProperties(props, _excluded$1r);
-  const classes = getStyles(styles$19, ['.btn-toolbar']);
+  const classes = getStyles(styles$18, ['.btn-toolbar']);
   return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
     ref: ref,
-    accessibilityRole: "toolbar",
+    role: "toolbar",
     style: [classes, style]
   }), children);
 });
@@ -3150,7 +3146,7 @@ const getBorderColorStyle = (color, direction) => {
       throw new Error('Unknown direction.');
   }
 };
-const styles$18 = StyleSheet.create({
+const styles$17 = 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-width: 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  "]))),
@@ -3165,7 +3161,7 @@ const Caret = /*#__PURE__*/React.forwardRef((props, ref) => {
     } = props,
     elementProps = _objectWithoutProperties(props, _excluded$1o);
   const context = useContext(TextStyleContext);
-  const classes = getStyles(styles$18, ['caret', "caret-".concat(direction)]);
+  const classes = getStyles(styles$17, ['caret', "caret-".concat(direction)]);
   return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
     ref: ref,
     style: [classes, getBorderColorStyle(color || getColor(context), direction), style]
@@ -3196,19 +3192,18 @@ const propTypes$1q = {
 };
 
 // One of the following should be set for aria support:
-// 1) accessibilityRole
-// 2) accessibilityLabel + accessibilityHint
+// 1) role
+// 2) aria-label + aria-hint
 // 3) accessibilityActions + onAccessibilityAction
 const getRole$2 = props => {
   const {
-    accessibilityRole,
-    accessibilityLabel,
+    role,
     accessibilityActions
   } = props;
-  if (accessibilityRole) {
-    return accessibilityRole;
+  if (role) {
+    return role;
   }
-  if (accessibilityLabel || accessibilityActions) {
+  if (props['aria-label'] || accessibilityActions) {
     return null;
   }
   return 'button';
@@ -3257,7 +3252,7 @@ const Pressable = /*#__PURE__*/React.forwardRef((props, ref) => {
   const wrappedChildren = applyCaret(children, caret);
   return /*#__PURE__*/React.createElement(Pressable$1, _extends({}, elementProps, interactionProps, {
     ref: actionRef,
-    accessibilityRole: getRole$2(actionProps),
+    role: getRole$2(actionProps),
     style: [resolveStyle({
       media,
       interaction
@@ -3295,7 +3290,7 @@ function useToggleButton(props) {
       if (handlePress) handlePress(event);
       setPressed(value => !value);
     },
-    accessibilityPressed: pressed
+    'aria-pressed': pressed
   });
 }
 
@@ -3317,7 +3312,7 @@ const propTypes$1p = {
   // eslint-disable-next-line react/forbid-prop-types
   activeTextStyle: PropTypes.any
 };
-const styles$17 = StyleSheet.create(_objectSpread2(_objectSpread2({
+const styles$16 = StyleSheet.create(_objectSpread2(_objectSpread2({
   '.btn': css(_templateObject$15 || (_templateObject$15 = _taggedTemplateLiteral(["\n    flex-direction: row; // added for bootstrap-rn\n    justify-content: center; // added for bootstrap-rn\n    // display: inline-block;\n    @include platform(web) {\n      // cursor: if($enable-button-pointers, pointer, null);\n      user-select: none;\n    }\n    background-color: transparent;\n    border: $btn-border-width solid transparent;\n    padding: $btn-padding-y $btn-padding-x;\n    // Manually declare to provide an override to the browser default\n    border-radius: $btn-border-radius;\n    // @include transition($btn-transition);\n\n    &:focus-visible {\n      // outline: 0;\n      // box-shadow: $btn-focus-box-shadow;\n    }\n\n    &:active {\n      // @include box-shadow($btn-active-box-shadow);\n\n      &:focus-visible {\n        // @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);\n      }\n    }\n  "]))),
   '.btn --text': css(_templateObject2$P || (_templateObject2$P = _taggedTemplateLiteral(["\n    font-family: $btn-font-family;\n    font-weight: $btn-font-weight;\n    line-height: $btn-font-size * $btn-line-height;\n    color: $body-color;\n    text-align: center;\n    text-decoration: none; // if($link-decoration == none, null, none);\n    white-space: $btn-white-space;\n    // vertical-align: middle;\n    font-size: $btn-font-size;\n\n    &:hover {\n      color: $body-color;\n      text-decoration: none; // if($link-decoration == none, null, none);\n    }\n  "]))),
   '.btn.disabled': css(_templateObject3$p || (_templateObject3$p = _taggedTemplateLiteral(["\n    // pointer-events: none;\n    opacity: $btn-disabled-opacity;\n    // @include box-shadow(none);\n  "])))
@@ -3376,10 +3371,10 @@ const Button = /*#__PURE__*/React.forwardRef((props, ref) => {
   invariant(color !== 'link' || !outline, 'Button link variant is only available as non outline style.');
   const listItem = useContext(ListContext);
   const group = useContext(ButtonGroupContext);
-  const classes = getStyles(styles$17, ['.btn', getVariant(color, outline), disabled && '.btn.disabled', disabled && "".concat(getVariant(color, outline), ".disabled"), hasSize(size, group, 'lg') && '.btn-lg', hasSize(size, group, 'sm') && '.btn-sm', group && '.btn-group > .btn', group && active && '.btn-group > .btn.active', group && !listItem.first && '.btn-group > .btn:not(:first-child)', group && !listItem.last && '.btn-group > .btn:not(:last-child)']);
-  const activeClasses = getStyles(styles$17, ["".concat(getVariant(color, outline), ".active")]);
-  const textClasses = getStyles(styles$17, ['.btn --text', "".concat(getVariant(color, outline), " --text"), color === 'link' && '.btn-link --text', disabled && "".concat(getVariant(color, outline), ".disabled --text"), disabled && color === 'link' && '.btn-link.disabled --text', hasSize(size, group, 'lg') && '.btn-lg --text', hasSize(size, group, 'sm') && '.btn-sm --text']);
-  const activeTextClasses = getStyles(styles$17, ["".concat(getVariant(color, outline), ".active --text")]);
+  const classes = getStyles(styles$16, ['.btn', getVariant(color, outline), disabled && '.btn.disabled', disabled && "".concat(getVariant(color, outline), ".disabled"), hasSize(size, group, 'lg') && '.btn-lg', hasSize(size, group, 'sm') && '.btn-sm', group && '.btn-group > .btn', group && active && '.btn-group > .btn.active', group && !listItem.first && '.btn-group > .btn:not(:first-child)', group && !listItem.last && '.btn-group > .btn:not(:last-child)']);
+  const activeClasses = getStyles(styles$16, ["".concat(getVariant(color, outline), ".active")]);
+  const textClasses = getStyles(styles$16, ['.btn --text', "".concat(getVariant(color, outline), " --text"), color === 'link' && '.btn-link --text', disabled && "".concat(getVariant(color, outline), ".disabled --text"), disabled && color === 'link' && '.btn-link.disabled --text', hasSize(size, group, 'lg') && '.btn-lg --text', hasSize(size, group, 'sm') && '.btn-sm --text']);
+  const activeTextClasses = getStyles(styles$16, ["".concat(getVariant(color, outline), ".active --text")]);
   return /*#__PURE__*/React.createElement(Pressable, _extends({}, elementProps, {
     ref: ref,
     active: active,
@@ -3403,7 +3398,7 @@ const propTypes$1o = {
   // eslint-disable-next-line react/forbid-prop-types
   textStyle: PropTypes.any
 };
-const styles$16 = StyleSheet.create({
+const styles$15 = StyleSheet.create({
   blockquote: css(_templateObject$14 || (_templateObject$14 = _taggedTemplateLiteral(["\n    margin-bottom: $blockquote-margin-y;\n  "]))),
   'blockquote --text': css(_templateObject2$O || (_templateObject2$O = _taggedTemplateLiteral(["\n    font-size: $blockquote-font-size;\n  "])))
 });
@@ -3414,14 +3409,14 @@ const Blockquote = /*#__PURE__*/React.forwardRef((props, ref) => {
       textStyle
     } = props,
     elementProps = _objectWithoutProperties(props, _excluded$1k);
-  const classes = getStyles(styles$16, ['blockquote']);
-  const textClasses = getStyles(styles$16, ['blockquote --text']);
+  const classes = getStyles(styles$15, ['blockquote']);
+  const textClasses = getStyles(styles$15, ['blockquote --text']);
 
   // Accessiblity role blockquote is only supported on web.
   const role = Platform.OS === 'web' ? 'blockquote' : null;
   return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
     ref: ref,
-    accessibilityRole: role,
+    role: role,
     style: [classes, style],
     textStyle: [textClasses, textStyle]
   }), children);
@@ -3440,7 +3435,7 @@ const propTypes$1n = {
   // eslint-disable-next-line react/forbid-prop-types
   styleName: PropTypes.any
 };
-const styles$15 = StyleSheet.create({
+const styles$14 = StyleSheet.create({
   body: css(_templateObject$13 || (_templateObject$13 = _taggedTemplateLiteral(["\n    background-color: $body-bg;\n    flex-grow: 1; // added for bootstrap-rn\n    flex-shrink: 1; // added for bootstrap-rn\n  "]))),
   'body --text': css(_templateObject2$N || (_templateObject2$N = _taggedTemplateLiteral(["\n    color: $body-color;\n    text-align: $body-text-align;\n  "])))
 });
@@ -3452,8 +3447,8 @@ const Body = /*#__PURE__*/React.forwardRef((props, ref) => {
       styleName
     } = props,
     elementProps = _objectWithoutProperties(props, _excluded$1j);
-  const classes = getStyles(styles$15, ['body']);
-  const textClasses = getStyles(styles$15, ['body --text']);
+  const classes = getStyles(styles$14, ['body']);
+  const textClasses = getStyles(styles$14, ['body --text']);
   const media = useMedia();
   const resolveStyle = useStyle([classes, style], styleName);
   const resolveTextStyle = useStyle([textClasses, textStyle]);
@@ -3482,7 +3477,7 @@ const propTypes$1m = {
   // eslint-disable-next-line react/forbid-prop-types
   textStyle: PropTypes.any
 };
-const styles$14 = StyleSheet.create({
+const styles$13 = StyleSheet.create({
   '.card-body': css(_templateObject$12 || (_templateObject$12 = _taggedTemplateLiteral(["\n    // flex: 1 1 auto;\n    padding: $card-spacer-y $card-spacer-x;\n  "]))),
   '.card-body --text': css(_templateObject2$M || (_templateObject2$M = _taggedTemplateLiteral(["\n    color: $card-color;\n  "])))
 });
@@ -3493,8 +3488,8 @@ const CardBody = /*#__PURE__*/React.forwardRef((props, ref) => {
       textStyle
     } = props,
     elementProps = _objectWithoutProperties(props, _excluded$1i);
-  const classes = getStyles(styles$14, ['.card-body']);
-  const textClasses = getStyles(styles$14, [".card-body --text"]);
+  const classes = getStyles(styles$13, ['.card-body']);
+  const textClasses = getStyles(styles$13, [".card-body --text"]);
   return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
     ref: ref,
     style: [classes, style],
@@ -3513,7 +3508,7 @@ const propTypes$1l = {
   // eslint-disable-next-line react/forbid-prop-types
   textStyle: PropTypes.any
 };
-const styles$13 = StyleSheet.create({
+const styles$12 = StyleSheet.create({
   '.card-header': css(_templateObject$11 || (_templateObject$11 = _taggedTemplateLiteral(["\n    padding: $card-cap-padding-y $card-cap-padding-x;\n    background-color: $card-cap-bg;\n    border-bottom-width: $card-border-width;\n    border-style: solid;\n    border-color: $card-border-color;\n    border-radius: $card-inner-border-radius $card-inner-border-radius 0 0;\n  "]))),
   '.card-header --text': css(_templateObject2$L || (_templateObject2$L = _taggedTemplateLiteral(["\n    margin-bottom: 0; // Removes the default margin-bottom of <hN>\n    color: $card-cap-color;\n  "])))
 });
@@ -3524,8 +3519,8 @@ const CardHeader = /*#__PURE__*/React.forwardRef((props, ref) => {
       textStyle
     } = props,
     elementProps = _objectWithoutProperties(props, _excluded$1h);
-  const classes = getStyles(styles$13, ['.card-header']);
-  const textClasses = getStyles(styles$13, ['.card-header --text']);
+  const classes = getStyles(styles$12, ['.card-header']);
+  const textClasses = getStyles(styles$12, ['.card-header --text']);
   return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
     ref: ref,
     style: [classes, style],
@@ -3544,7 +3539,7 @@ const propTypes$1k = {
   // eslint-disable-next-line react/forbid-prop-types
   textStyle: PropTypes.any
 };
-const styles$12 = StyleSheet.create({
+const styles$11 = StyleSheet.create({
   '.card-footer': css(_templateObject$10 || (_templateObject$10 = _taggedTemplateLiteral(["\n    padding: $card-cap-padding-y $card-cap-padding-x;\n    background-color: $card-cap-bg;\n    border-top-width: $card-border-width;\n    border-style: solid;\n    border-color: $card-border-color;\n    border-radius: 0 0 $card-inner-border-radius $card-inner-border-radius;\n  "]))),
   '.card-footer --text': css(_templateObject2$K || (_templateObject2$K = _taggedTemplateLiteral(["\n    color: $card-cap-color;\n  "])))
 });
@@ -3555,8 +3550,8 @@ const CardFooter = /*#__PURE__*/React.forwardRef((props, ref) => {
       textStyle
     } = props,
     elementProps = _objectWithoutProperties(props, _excluded$1g);
-  const classes = getStyles(styles$12, ['.card-footer']);
-  const textClasses = getStyles(styles$12, ['.card-footer --text']);
+  const classes = getStyles(styles$11, ['.card-footer']);
+  const textClasses = getStyles(styles$11, ['.card-footer --text']);
   return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
     ref: ref,
     style: [classes, style],
@@ -3573,7 +3568,7 @@ const propTypes$1j = {
   // eslint-disable-next-line react/forbid-prop-types
   style: PropTypes.any
 };
-const styles$11 = StyleSheet.create({
+const styles$10 = StyleSheet.create({
   '.card': css(_templateObject$$ || (_templateObject$$ = _taggedTemplateLiteral(["\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n    height: $card-height;\n    // word-wrap: break-word;\n    background-color: $card-bg;\n    // background-clip: border-box;\n    border: $card-border-width solid $card-border-color;\n    border-radius: $card-border-radius;\n    // @include box-shadow($card-box-shadow);\n  "])))
 });
 const Card = /*#__PURE__*/React.forwardRef((props, ref) => {
@@ -3582,7 +3577,7 @@ const Card = /*#__PURE__*/React.forwardRef((props, ref) => {
       style
     } = props,
     elementProps = _objectWithoutProperties(props, _excluded$1f);
-  const classes = getStyles(styles$11, ['.card']);
+  const classes = getStyles(styles$10, ['.card']);
   return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
     ref: ref,
     style: [classes, style]
@@ -3600,7 +3595,25 @@ ModalContext.displayName = 'ModalContext';
 const OffcanvasContext = /*#__PURE__*/React.createContext();
 OffcanvasContext.displayName = 'OffcanvasContext';
 
-const styles$10 = StyleSheet$1.create({
+// The assumed background styles are typed as followed:
+//
+// type Position = 'center' | 'left' | 'right' | 'top' | 'bottom';
+// type PositionX = 'center' | 'left' | 'right';
+// type PositionY = 'center' | 'top' | 'bottom';
+//
+// type BackgroundStyles = {
+//   backgroundImage: string,
+//   backgroundSize: 'contain' | 'cover' | string | number,
+//   backgroundPosition: Position,
+//   backgroundPositionX:
+//     | PositionX
+//     | { position: PositionX, offset: string | number },
+//   backgroundPositionY:
+//     | PositionY
+//     | { position: PositionY, offset: string | number },
+// };
+
+const styles$$ = StyleSheet$1.create({
   reset: {
     // Background repeat is not supported on native yet.
     backgroundRepeat: 'no-repeat'
@@ -3662,7 +3675,7 @@ const resolveBackgroundPosition = style => {
 function useBackgroundWeb(style) {
   const flattenedStyle = StyleSheet$1.flatten(style);
   return {
-    style: [flattenedStyle, styles$10.reset, {
+    style: [flattenedStyle, styles$$.reset, {
       // Transform background size
       backgroundSize: resolveBackgroundSize(flattenedStyle),
       // Workaround, because some browsers do not support two-value syntax:
@@ -3675,198 +3688,6 @@ function useBackgroundWeb(style) {
   };
 }
 
-const styles$$ = StyleSheet$1.create({
-  container: {
-    overflow: 'hidden'
-  },
-  object: {
-    aspectRatio: 1
-  }
-});
-const horizontalPositions = {
-  left: function () {
-    let offset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-    return {
-      alignItems: I18nManager.isRTL ? 'flex-end' : 'flex-start',
-      paddingLeft: offset
-    };
-  },
-  right: function () {
-    let offset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-    return {
-      alignItems: I18nManager.isRTL ? 'flex-start' : 'flex-end',
-      paddingRight: offset
-    };
-  },
-  center: offset => {
-    if (offset !== undefined) {
-      return null;
-    }
-    return {
-      alignItems: 'center'
-    };
-  }
-};
-const verticalPositions = {
-  top: function () {
-    let offset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-    return {
-      justifyContent: 'flex-start',
-      paddingTop: offset
-    };
-  },
-  bottom: function () {
-    let offset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-    return {
-      justifyContent: 'flex-end',
-      paddingBottom: offset
-    };
-  },
-  center: offset => {
-    if (offset !== undefined) {
-      return null;
-    }
-    return {
-      justifyContent: 'center'
-    };
-  }
-};
-const getXml = value => {
-  const match = value.match(/^url\("data:image\/svg\+xml,(.*?)"\)$/);
-  if (!match) {
-    return null;
-  }
-  return decodeURIComponent(match[1]);
-};
-const transforms = {
-  backgroundSize(value) {
-    if (value === 'cover') {
-      return {
-        width: '100%'
-        // TODO: Support cover for views with height > width.
-        // height: '100%',
-      };
-    }
-
-    if (value === 'contain') {
-      return {
-        width: '100%',
-        height: '100%'
-      };
-    }
-    const {
-      width,
-      height = width
-    } = value;
-    return {
-      width,
-      height
-    };
-  },
-  backgroundPosition(value) {
-    if (value === 'center') {
-      return {
-        alignItems: 'center',
-        justifyContent: 'center'
-      };
-    }
-    if (horizontalPositions[value]) {
-      return _objectSpread2(_objectSpread2({}, horizontalPositions[value]()), {}, {
-        justifyContent: 'center'
-      });
-    }
-    if (verticalPositions[value]) {
-      return _objectSpread2({
-        alignItems: 'center'
-      }, verticalPositions[value]());
-    }
-    return null;
-  },
-  backgroundPositionX(value) {
-    const {
-      position = 'left',
-      offset
-    } = typeof value === 'object' ? value : {
-      position: value
-    };
-    if (!horizontalPositions[position]) {
-      return null;
-    }
-    return horizontalPositions[position](offset);
-  },
-  backgroundPositionY(value) {
-    const {
-      position = 'top',
-      offset
-    } = typeof value === 'object' ? value : {
-      position: value
-    };
-    if (!verticalPositions[position]) {
-      return null;
-    }
-    return verticalPositions[position](offset);
-  }
-};
-function useBackgroundNative(style) {
-  const flattenedStyle = StyleSheet$1.flatten(style);
-  const background = {
-    containerStyle: {},
-    objectStyle: {},
-    xml: null
-  };
-  Object.entries(flattenedStyle).forEach(_ref => {
-    let [key, value] = _ref;
-    if (!value) {
-      return;
-    }
-    if (key === 'backgroundImage') {
-      background.xml = getXml(value);
-    } else if (key === 'backgroundSize') {
-      Object.assign(background.objectStyle, transforms[key](value));
-    } else if (key === 'backgroundPosition' || key === 'backgroundPositionX' || key === 'backgroundPositionY') {
-      Object.assign(background.containerStyle, transforms[key](value));
-    }
-  });
-  return {
-    style: flattenedStyle,
-    element: /*#__PURE__*/React.createElement(View$1, {
-      style: [StyleSheet$1.absoluteFill, styles$$.container, background.containerStyle]
-    }, /*#__PURE__*/React.createElement(View$1, {
-      style: [styles$$.object, background.objectStyle]
-    }, background.xml && /*#__PURE__*/React.createElement(SvgXml, {
-      xml: background.xml
-    })))
-  };
-}
-
-// The assumed background styles are typed as followed:
-//
-// type Position = 'center' | 'left' | 'right' | 'top' | 'bottom';
-// type PositionX = 'center' | 'left' | 'right';
-// type PositionY = 'center' | 'top' | 'bottom';
-//
-// type BackgroundStyles = {
-//   backgroundImage: string,
-//   backgroundSize: 'contain' | 'cover' | string | number,
-//   backgroundPosition: Position,
-//   backgroundPositionX:
-//     | PositionX
-//     | { position: PositionX, offset: string | number },
-//   backgroundPositionY:
-//     | PositionY
-//     | { position: PositionY, offset: string | number },
-// };
-
-function useBackground(style, styleName) {
-  // TODO: Use *.web.js / *.native.js file endings to select platforms, but
-  // before we need to make sure that the published bundles are all functional.
-  const useBackgroundForPlatform = Platform.select({
-    web: useBackgroundWeb,
-    default: useBackgroundNative
-  });
-  return useBackgroundForPlatform(style, styleName);
-}
-
 const _excluded$1e = ["children", "disabled", "style", "textStyle", "styleName"];
 var _templateObject$_, _templateObject2$J, _templateObject3$o, _templateObject4$l, _templateObject5$i;
 const propTypes$1i = {
@@ -3911,7 +3732,7 @@ const CloseButton = /*#__PURE__*/React.forwardRef((props, ref) => {
     interaction,
     interactionProps
   } = useInteractionState(elementProps);
-  const background = useBackground(resolveStyle({
+  const background = useBackgroundWeb(resolveStyle({
     media,
     interaction
   }));
@@ -3999,8 +3820,8 @@ function useToggleCollapse(props) {
       if (handlePress) handlePress(event);
       context.setVisible(value => !value);
     },
-    accessibilityExpanded: context.visible,
-    accessibilityControls: context.identifier
+    'aria-expanded': context.visible,
+    'aria-controls': context.identifier
   });
 }
 
@@ -4022,7 +3843,7 @@ const Collapse = /*#__PURE__*/React.forwardRef((props, ref) => {
   }
   return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
     ref: ref,
-    nativeID: identifier
+    id: identifier
   }), children);
 });
 Collapse.displayName = 'Collapse';
@@ -4102,7 +3923,7 @@ const propTypes$1e = {
   // eslint-disable-next-line react/forbid-prop-types
   style: PropTypes.any,
   // eslint-disable-next-line react/forbid-prop-types
-  nativeID: PropTypes.any
+  id: PropTypes.any
 };
 const styles$Y = StyleSheet$1.create({
   reboot: {
@@ -4131,9 +3952,9 @@ const FormCheckInputWeb = /*#__PURE__*/React.forwardRef((props, ref) => {
     onBlur = () => {},
     disabled = false,
     style,
-    nativeID
+    id
   } = props;
-  const inputBackground = useBackground(style);
+  const inputBackground = useBackgroundWeb(style);
   return /*#__PURE__*/React.createElement(Input$1, {
     ref: ref,
     type: type === 'switch' ? 'checkbox' : type,
@@ -4145,7 +3966,7 @@ const FormCheckInputWeb = /*#__PURE__*/React.forwardRef((props, ref) => {
     onBlur: onBlur,
     disabled: disabled,
     style: inputBackground.style,
-    nativeID: nativeID
+    id: id
   });
 });
 FormCheckInputWeb.displayName = 'FormCheckInputWeb';
@@ -4162,7 +3983,7 @@ const propTypes$1d = {
   // eslint-disable-next-line react/forbid-prop-types
   style: PropTypes.any,
   // eslint-disable-next-line react/forbid-prop-types
-  nativeID: PropTypes.any
+  id: PropTypes.any
 };
 const FormCheckInputNative = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
@@ -4174,13 +3995,13 @@ const FormCheckInputNative = /*#__PURE__*/React.forwardRef((props, ref) => {
     hitSlop = 8,
     disabled = false,
     style,
-    nativeID
+    id
   } = props;
-  const inputBackground = useBackground(style);
+  const inputBackground = useBackgroundWeb(style);
   return /*#__PURE__*/React.createElement(Pressable, {
     ref: ref,
-    accessibilityRole: type,
-    accessibilityChecked: value,
+    role: type,
+    "aria-checked": value,
     onPress: () => {
       handleValueChange(!value);
     },
@@ -4189,7 +4010,7 @@ const FormCheckInputNative = /*#__PURE__*/React.forwardRef((props, ref) => {
     hitSlop: hitSlop,
     disabled: disabled,
     style: inputBackground.style,
-    nativeID: nativeID
+    id: id
   }, inputBackground.element);
 });
 FormCheckInputNative.displayName = 'FormCheckInputNative';
@@ -4215,7 +4036,7 @@ const propTypes$1c = {
 /* eslint-enable */
 
 const styles$X = StyleSheet.create(_objectSpread2(_objectSpread2({
-  '.form-check .form-check-input': css(_templateObject$Y || (_templateObject$Y = _taggedTemplateLiteral(["\n    $margin-top-double: $line-height-base - $form-check-input-width;\n\n    // float: left;\n    // margin-left: $form-check-padding-start * -1;\n    margin-top: $margin-top-double * 0.5; // added for bootstrap-rn\n    margin-right: $form-check-padding-start - $form-check-input-width; // added for bootstrap-rn\n  "]))),
+  '.form-check .form-check-input': css(_templateObject$Y || (_templateObject$Y = _taggedTemplateLiteral(["\n    $height: $line-height-base * 1rem;\n    $margin-top-double: $height - $form-check-input-width;\n\n    // float: left;\n    // margin-left: $form-check-padding-start * -1;\n    margin-top: $margin-top-double * 0.5; // added for bootstrap-rn\n    margin-right: $form-check-padding-start - $form-check-input-width; // added for bootstrap-rn\n  "]))),
   '.form-check-reverse .form-check-input': css(_templateObject2$H || (_templateObject2$H = _taggedTemplateLiteral(["\n    // float: right;\n    // margin-right: $form-check-padding-start * -1;\n    margin-right: 0; // added for bootstrap-rn\n    // margin-left: 0;\n    margin-left: $form-check-padding-start - $form-check-input-width; // added for bootstrap-rn\n  "]))),
   '.form-check-input': css(_templateObject3$m || (_templateObject3$m = _taggedTemplateLiteral(["\n    width: $form-check-input-width;\n    height: $form-check-input-width;\n    // margin-top: ($line-height-base - $form-check-input-width) * 0.5; // line-height minus check height\n    // vertical-align: top;\n    background-color: $form-check-input-bg;\n    background-repeat: no-repeat;\n    background-position: center;\n    background-size: contain;\n    border: $form-check-input-border;\n    @include platform(web) {\n      appearance: none;\n      user-select: none; // added for bootstrap-rn\n      color-adjust: exact; // Keep themed appearance for print\n    }\n    // @include transition($form-check-transition);\n\n    &:active {\n      // filter: $form-check-input-active-filter;\n    }\n\n    &:focus {\n      border-color: $form-check-input-focus-border;\n      @include platform(web) {\n        outline-width: 0; // outline: 0;\n        box-shadow: $form-check-input-focus-box-shadow;\n      }\n    }\n  "]))),
   '.form-check-input[type="checkbox"]': css(_templateObject4$j || (_templateObject4$j = _taggedTemplateLiteral(["\n    border-radius: $form-check-input-border-radius;\n  "]))),
@@ -4357,7 +4178,7 @@ const Code = /*#__PURE__*/React.forwardRef((props, ref) => {
   const role = Platform.OS === 'web' ? 'code' : null;
   return /*#__PURE__*/React.createElement(Text, _extends({}, elementProps, {
     ref: ref,
-    accessibilityRole: role,
+    role: role,
     style: [classes, style]
   }), children);
 });
@@ -4376,14 +4197,14 @@ function useToggleDropdown(props) {
     } = props,
     restProps = _objectWithoutProperties(props, _excluded$16);
   return _objectSpread2(_objectSpread2({}, restProps), {}, {
-    nativeID: context.identifier,
+    id: context.identifier,
     ref: context.toggleRef,
     onPress: event => {
       if (handlePress) handlePress(event);
       context.setVisible(value => !value);
     },
-    accessibilityHasPopup: true,
-    accessibilityExpanded: context.visible,
+    'aria-haspopup': true,
+    'aria-expanded': context.visible,
     caret: caret === undefined ? {
       direction: context.direction
     } : caret
@@ -4660,7 +4481,7 @@ const DropdownMenu = /*#__PURE__*/React.forwardRef((props, ref) => {
       autoClose: autoClose
     }), /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
       ref: concatRefs(dialogRef, ref),
-      accessibilityLabelledBy: identifier,
+      "aria-labelledby": identifier,
       style: [classes, style],
       textStyle: [textClasses, textStyle]
     }), children));
@@ -4679,7 +4500,7 @@ const DropdownMenu = /*#__PURE__*/React.forwardRef((props, ref) => {
     autoClose: autoClose
   }), /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
     ref: concatRefs(overlayRef, ref),
-    accessibilityLabelledBy: identifier,
+    "aria-labelledby": identifier,
     style: [classes, overlay.overlayProps.style, {
       maxHeight: 'auto',
       opacity: overlay.rendered ? 1 : 0
@@ -4715,8 +4536,8 @@ const Heading$1 = /*#__PURE__*/React.forwardRef((props, ref) => {
   const classes = getStyles(styles$S, ['heading', ".h".concat(size)]);
   return /*#__PURE__*/React.createElement(Text, _extends({}, elementProps, {
     ref: ref,
-    accessibilityRole: "header",
-    accessibilityLevel: size,
+    role: "heading",
+    "aria-level": size,
     style: [classes, style]
   }), children);
 });
@@ -5024,7 +4845,7 @@ const Label = /*#__PURE__*/React.forwardRef((props, ref) => {
   const role = Platform.OS === 'web' ? 'label' : null;
   return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
     ref: concatRefs(forRef, ref),
-    accessibilityRole: role
+    role: role
   }), children);
 });
 Label.displayName = 'Label';
@@ -5225,7 +5046,7 @@ const TextInput = /*#__PURE__*/React.forwardRef((props, ref) => {
 TextInput.displayName = 'TextInput';
 TextInput.propTypes = propTypes$U;
 
-const _excluded$R = ["size", "placeholderTextColor", "multiline", "disabled", "valid", "invalid", "editable", "selectTextOnFocus", "style"];
+const _excluded$R = ["size", "placeholderTextColor", "multiline", "disabled", "valid", "invalid", "readOnly", "selectTextOnFocus", "style"];
 var _templateObject$H, _templateObject2$w, _templateObject3$g, _templateObject4$e, _templateObject5$c, _templateObject6$b, _templateObject7$7, _templateObject8$7, _templateObject9$7, _templateObject10$7, _templateObject11$5;
 const propTypes$T = {
   size: PropTypes.oneOf(['sm', 'lg']),
@@ -5234,7 +5055,7 @@ const propTypes$T = {
   disabled: PropTypes.bool,
   valid: PropTypes.bool,
   invalid: PropTypes.bool,
-  editable: PropTypes.bool,
+  readOnly: PropTypes.bool,
   selectTextOnFocus: PropTypes.bool,
   // eslint-disable-next-line react/forbid-prop-types
   style: PropTypes.any
@@ -5264,7 +5085,7 @@ const styles$G = StyleSheet.create(_objectSpread2({
   '.form-control:not(textarea)': css(_templateObject5$c || (_templateObject5$c = _taggedTemplateLiteral(["\n    @include platform(android) {\n      height: $input-height; // added for bootstrap-rn\n    }\n  "]))),
   '.form-control-sm:not(textarea)': css(_templateObject6$b || (_templateObject6$b = _taggedTemplateLiteral(["\n    @include platform(android) {\n      height: $input-height-sm; // added for bootstrap-rn\n    }\n  "]))),
   '.form-control-lg:not(textarea)': css(_templateObject7$7 || (_templateObject7$7 = _taggedTemplateLiteral(["\n    @include platform(android) {\n      height: $input-height-lg; // added for bootstrap-rn\n    }\n  "]))),
-  'textarea.form-control': css(_templateObject8$7 || (_templateObject8$7 = _taggedTemplateLiteral(["\n    text-align-vertical: top; // added for bootstrap-rn\n    min-height: $input-height;\n\n    @include platform(ios) {\n      min-height: $input-height-sm + 8rem; // added for bootstrap-rn\n    }\n    @include platform(native) {\n      line-height: $input-font-size * $input-line-height; // added for bootstrap-rn\n    }\n  "]))),
+  'textarea.form-control': css(_templateObject8$7 || (_templateObject8$7 = _taggedTemplateLiteral(["\n    vertical-align: top; // added for bootstrap-rn\n    min-height: $input-height;\n\n    @include platform(ios) {\n      min-height: $input-height-sm + 8rem; // added for bootstrap-rn\n    }\n    @include platform(native) {\n      line-height: $input-font-size * $input-line-height; // added for bootstrap-rn\n    }\n  "]))),
   'textarea.form-control-sm': css(_templateObject9$7 || (_templateObject9$7 = _taggedTemplateLiteral(["\n    min-height: $input-height-sm;\n\n    @include platform(ios) {\n      // TODO: Adjust ios height to sm size\n      min-height: $input-height-sm + 8rem; // added for bootstrap-rn\n    }\n    @include platform(native) {\n      line-height: $input-font-size-sm * $line-height-base; // added for bootstrap-rn\n    }\n  "]))),
   'textarea.form-control-lg': css(_templateObject10$7 || (_templateObject10$7 = _taggedTemplateLiteral(["\n    min-height: $input-height-lg;\n\n    @include platform(ios) {\n      // TODO: Adjust ios height to lg size\n      min-height: $input-height-sm + 8rem; // added for bootstrap-rn\n    }\n    @include platform(native) {\n      line-height: $input-font-size-sm * $line-height-base; // added for bootstrap-rn\n    }\n  "])))
 }, each(FORM_VALIDATION_STATES, (state, data) => ({
@@ -5279,7 +5100,7 @@ const Input = /*#__PURE__*/React.forwardRef((props, ref) => {
       disabled = false,
       valid = false,
       invalid = false,
-      editable = true,
+      readOnly = false,
       selectTextOnFocus = false,
       style
     } = modifierProps,
@@ -5290,7 +5111,7 @@ const Input = /*#__PURE__*/React.forwardRef((props, ref) => {
     placeholderTextColor: placeholderTextColor,
     multiline: multiline,
     disabled: disabled,
-    editable: disabled ? false : editable,
+    readOnly: disabled ? true : readOnly,
     selectTextOnFocus: disabled ? false : selectTextOnFocus,
     style: [classes, style]
   }));
@@ -5333,7 +5154,7 @@ function useTrigger(rawTrigger, props, elementProps, ref) {
     targetProps: _objectSpread2(_objectSpread2({
       ref: concatRefs(targetRef, ref)
     }, optional(visible, {
-      accessibilityDescribedBy: identifier
+      'aria-describedby': identifier
     })), {}, {
       onPress: event => {
         const handleHoverAsPress = (Platform.OS === 'android' || Platform.OS === 'ios') && trigger.includes('hover');
@@ -5393,7 +5214,7 @@ function useTrigger(rawTrigger, props, elementProps, ref) {
     }),
     targetRef,
     templateProps: {
-      nativeID: identifier
+      id: identifier
     }
   };
 }
@@ -5554,7 +5375,7 @@ const Popover = /*#__PURE__*/React.forwardRef((props, ref) => {
   const role = Platform.OS === 'web' ? 'tooltip' : null;
   return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
     ref: ref,
-    accessibilityRole: role,
+    role: role,
     style: [classes, style],
     textStyle: [textClasses, textStyle]
   }), /*#__PURE__*/React.createElement(PopoverContext.Provider, {
@@ -5751,7 +5572,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef((props, ref) => {
   const role = Platform.OS === 'web' ? 'tooltip' : null;
   return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
     ref: ref,
-    accessibilityRole: role,
+    role: role,
     style: [classes, style],
     textStyle: [textClasses, textStyle]
   }), /*#__PURE__*/React.createElement(TooltipContext.Provider, {
@@ -5927,7 +5748,7 @@ const ListGroupItem = /*#__PURE__*/React.forwardRef((props, ref) => {
   const role = Platform.OS === 'web' ? 'listitem' : null;
   return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
     ref: ref,
-    accessibilityRole: role,
+    role: role,
     style: [classes, style],
     textStyle: [textClasses, textStyle]
   }), children);
@@ -5988,7 +5809,7 @@ const ListGroupItemAction = /*#__PURE__*/React.forwardRef((props, ref) => {
   const role = Platform.OS === 'web' ? 'listitem' : null;
   return /*#__PURE__*/React.createElement(Pressable, _extends({}, elementProps, {
     ref: modifierRef,
-    accessibilityRole: role,
+    role: role,
     active: active,
     disabled: disabled,
     style: [...classes, style],
@@ -6035,7 +5856,7 @@ const ListGroup = /*#__PURE__*/React.forwardRef((props, ref) => {
   const tabbable = false;
   return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
     ref: ref,
-    accessibilityRole: getRole$1(tabbable),
+    role: getRole$1(tabbable),
     style: [classes, style]
   }), /*#__PURE__*/React.createElement(ListGroupContext.Provider, {
     value: {
@@ -6097,7 +5918,7 @@ const Link = /*#__PURE__*/React.forwardRef((props, ref) => {
       handleMouseLeaveInteraction(event);
     },
     ref: actionRef,
-    accessibilityRole: getRole$2(actionProps),
+    role: getRole$2(actionProps),
     accessible: true,
     style: resolveStyle({
       media,
@@ -6562,7 +6383,7 @@ const Nav = /*#__PURE__*/React.forwardRef((props, ref) => {
   navbar && '.navbar-nav', navbar && navbar.expand && ".navbar-expand".concat(navbar.expand === true ? '' : "-".concat(navbar.expand), " .navbar-nav")]);
   return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
     ref: ref,
-    accessibilityRole: getRole(tabbable, navbar),
+    role: getRole(tabbable, navbar),
     style: [classes, style]
   }), /*#__PURE__*/React.createElement(NavContext.Provider, {
     value: {
@@ -6693,14 +6514,14 @@ function useToggleNavbar(props) {
     } = props,
     restProps = _objectWithoutProperties(props, _excluded$q);
   return _objectSpread2(_objectSpread2({}, restProps), {}, {
-    nativeID: context.identifier,
+    id: context.identifier,
     onPress: event => {
       if (handlePress) handlePress(event);
       context.setExpanded(value => !value);
     },
     accessibilitControls: context.identifier,
-    accessibilityExpanded: context.expanded,
-    accessibilityLabel: 'Toggle navigation'
+    'aria-expanded': context.expanded,
+    'aria-label': 'Toggle navigation'
   });
 }
 
@@ -6744,7 +6565,7 @@ const NavbarToggler = /*#__PURE__*/React.forwardRef((props, ref) => {
   const textClasses = getStyles(styles$l, ['.navbar-toggler --text', ".navbar-".concat(variant, " .navbar-toggler --text")]);
   const iconClasses = getStyles(styles$l, ['.navbar-toggler-icon', ".navbar-".concat(variant, " .navbar-toggler-icon")]);
   const resolveIconStyle = useStyle([iconClasses, iconStyle]);
-  const background = useBackground(resolveIconStyle({
+  const background = useBackgroundWeb(resolveIconStyle({
     media
   }));
   return /*#__PURE__*/React.createElement(Pressable, _extends({}, elementProps, {
@@ -6783,7 +6604,7 @@ function useDismissNavbar(props) {
       if (handlePress) handlePress(event);
       context.setExpanded(false);
     },
-    accessibilityLabel: 'Close'
+    'aria-label': 'Close'
   });
 }
 
@@ -7072,7 +6893,7 @@ const PickerWeb = /*#__PURE__*/React.forwardRef((props, ref) => {
       style
     } = props,
     elementProps = _objectWithoutProperties(props, _excluded$i);
-  const background = useBackground(style);
+  const background = useBackgroundWeb(style);
   const showPlaceholder = selectedValue === undefined || selectedValue === null;
   return /*#__PURE__*/React.createElement(Picker$1, _extends({}, elementProps, {
     ref: ref,
@@ -7180,7 +7001,7 @@ const PickerNative = /*#__PURE__*/React.forwardRef((props, ref) => {
       style
     } = props,
     elementProps = _objectWithoutProperties(props, _excluded$h);
-  const background = useBackground(style);
+  const background = useBackgroundWeb(style);
   const [visible, setVisible] = useState(false);
   const textStyle = extractTextStyles(background.style);
   const showPlaceholder = selectedValue === undefined || selectedValue === null;
@@ -7193,7 +7014,7 @@ const PickerNative = /*#__PURE__*/React.forwardRef((props, ref) => {
   };
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Pressable, _extends({}, elementProps, {
     ref: ref,
-    accessibilityRole: "combobox",
+    role: "combobox",
     onPress: () => {
       setVisible(true);
     },
@@ -7274,7 +7095,7 @@ const PickerNativeItem = /*#__PURE__*/React.forwardRef((props, ref) => {
     onPress: () => {
       handleValueChange(value);
     },
-    accessibilitySelected: selected,
+    "aria-selected": selected,
     disabled: disabled,
     style: resolveStyle({
       media
@@ -7466,10 +7287,10 @@ const ProgressBar = /*#__PURE__*/React.forwardRef((props, ref) => {
   // composite component
   return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
     ref: ref,
-    accessibilityRole: "progressbar",
-    accessibilityValueNow: value,
-    accessibilityValueMin: min,
-    accessibilityValueMax: max,
+    role: "progressbar",
+    "aria-valuenow": value,
+    "aria-valuemin": min,
+    "aria-valuemax": max,
     style: [classes, style, {
       width: "".concat(getPercentage(value, min, max), "%")
     }]
@@ -7551,7 +7372,7 @@ const Heading = /*#__PURE__*/React.forwardRef((props, ref) => {
   const role = Platform.OS === 'web' ? 'paragraph' : null;
   return /*#__PURE__*/React.createElement(Text, _extends({}, elementProps, {
     ref: ref,
-    accessibilityRole: role,
+    role: role,
     style: [classes, style]
   }), children);
 });
@@ -7594,7 +7415,7 @@ const PaginationItem = /*#__PURE__*/React.forwardRef((props, ref) => {
   const role = Platform.OS === 'web' ? 'listitem' : null;
   return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
     ref: ref,
-    accessibilityRole: role,
+    role: role,
     style: [classes, style],
     textStyle: [textClasses, textStyle]
   }), children);
@@ -7602,43 +7423,43 @@ const PaginationItem = /*#__PURE__*/React.forwardRef((props, ref) => {
 PaginationItem.displayName = 'PaginationItem';
 PaginationItem.propTypes = propTypes$c;
 
-/*
-$pagination-padding-y:              .375rem;
-$pagination-padding-x:              .75rem;
-$pagination-padding-y-sm:           .25rem;
-$pagination-padding-x-sm:           .5rem;
-$pagination-padding-y-lg:           .75rem;
-$pagination-padding-x-lg:           1.5rem;
-
-$pagination-color:                  $link-color;
-$pagination-bg:                     $white;
-$pagination-border-width:           $border-width;
-$pagination-border-radius:          $border-radius;
-$pagination-margin-start:           -$pagination-border-width;
-$pagination-border-color:           $gray-300;
-
-$pagination-focus-color:            $link-hover-color;
-$pagination-focus-bg:               $gray-200;
-$pagination-focus-box-shadow:       $input-btn-focus-box-shadow;
-$pagination-focus-outline:          0;
-
-$pagination-hover-color:            $link-hover-color;
-$pagination-hover-bg:               $gray-200;
-$pagination-hover-border-color:     $gray-300;
-
-$pagination-active-color:           $component-active-color;
-$pagination-active-bg:              $component-active-bg;
-$pagination-active-border-color:    $pagination-active-bg;
-
-$pagination-disabled-color:         $gray-600;
-$pagination-disabled-bg:            $white;
-$pagination-disabled-border-color:  $gray-300;
-
-$pagination-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
-
-$pagination-border-radius-sm:       $border-radius-sm;
-$pagination-border-radius-lg:       $border-radius-lg;
-
+/*
+$pagination-padding-y:              .375rem;
+$pagination-padding-x:              .75rem;
+$pagination-padding-y-sm:           .25rem;
+$pagination-padding-x-sm:           .5rem;
+$pagination-padding-y-lg:           .75rem;
+$pagination-padding-x-lg:           1.5rem;
+
+$pagination-color:                  $link-color;
+$pagination-bg:                     $white;
+$pagination-border-width:           $border-width;
+$pagination-border-radius:          $border-radius;
+$pagination-margin-start:           -$pagination-border-width;
+$pagination-border-color:           $gray-300;
+
+$pagination-focus-color:            $link-hover-color;
+$pagination-focus-bg:               $gray-200;
+$pagination-focus-box-shadow:       $input-btn-focus-box-shadow;
+$pagination-focus-outline:          0;
+
+$pagination-hover-color:            $link-hover-color;
+$pagination-hover-bg:               $gray-200;
+$pagination-hover-border-color:     $gray-300;
+
+$pagination-active-color:           $component-active-color;
+$pagination-active-bg:              $component-active-bg;
+$pagination-active-border-color:    $pagination-active-bg;
+
+$pagination-disabled-color:         $gray-600;
+$pagination-disabled-bg:            $white;
+$pagination-disabled-border-color:  $gray-300;
+
+$pagination-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+
+$pagination-border-radius-sm:       $border-radius-sm;
+$pagination-border-radius-lg:       $border-radius-lg;
+
 */
 
 const _excluded$a = ["children", "style"];
@@ -7662,7 +7483,7 @@ const Pagination = /*#__PURE__*/React.forwardRef((props, ref) => {
   const role = Platform.OS === 'web' ? 'list' : null;
   return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
     ref: ref,
-    accessibilityRole: role,
+    role: role,
     style: [classes, style]
   }), list);
 });
@@ -7690,7 +7511,7 @@ const RadioGroup = /*#__PURE__*/React.forwardRef((props, ref) => {
     elementProps = _objectWithoutProperties(props, _excluded$9);
   return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
     ref: ref,
-    accessibilityRole: "radiogroup"
+    role: "radiogroup"
   }), /*#__PURE__*/React.createElement(RadioContext.Provider, {
     value: {
       selectedValue,
@@ -7791,21 +7612,17 @@ const getAnimationStyle = (variant, animation) => {
   switch (variant) {
     case 'border':
       return {
-        transform: [{
-          rotate: animation.interpolate({
-            inputRange: [0, 1],
-            outputRange: ['0deg', '360deg']
-          })
-        }]
+        transform: animation.interpolate({
+          inputRange: [0, 1],
+          outputRange: ['rotate(0deg)', 'rotate(360deg)']
+        })
       };
     case 'grow':
       return {
-        transform: [{
-          scale: animation.interpolate({
-            inputRange: [0, 0.5, 1],
-            outputRange: [0, 1, 1]
-          })
-        }],
+        transform: animation.interpolate({
+          inputRange: [0, 0.5, 1],
+          outputRange: ['scale(0)', 'scale(1)', 'scale(1)']
+        }),
         opacity: animation.interpolate({
           inputRange: [0, 0.5, 1],
           outputRange: [0, 1, 0]
@@ -7837,8 +7654,8 @@ const Spinner = /*#__PURE__*/React.forwardRef((props, ref) => {
   }, []);
   return /*#__PURE__*/React.createElement(AnimatedView, _extends({}, elementProps, {
     ref: ref,
-    accessibilityRole: role,
-    accessibilityHidden: true,
+    role: role,
+    "aria-hidden": true,
     style: [classes, getAnimationStyle(variant, animation), style]
   }));
 });
@@ -7914,9 +7731,9 @@ const TabPane = /*#__PURE__*/React.forwardRef((props, ref) => {
   const role = Platform.OS === 'web' ? 'tabpanel' : null;
   return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
     ref: ref,
-    nativeID: id,
-    accessibilityRole: role,
-    accessibilityLabelledBy: "".concat(id, "-tab"),
+    id: id,
+    role: role,
+    "aria-labelledby": "".concat(id, "-tab"),
     style: [classes, style]
   }));
 });
@@ -7935,16 +7752,16 @@ function useToggleTab(props) {
   const id = getElementId(context.identifier, target);
   const active = context.activeTarget === target;
   return _objectSpread2(_objectSpread2({}, restProps), {}, {
-    nativeID: "".concat(id, "-tab"),
+    id: "".concat(id, "-tab"),
     onPress: event => {
       if (handlePress) handlePress(event);
       event.preventDefault();
       context.setActiveTarget(target);
     },
     active,
-    accessibilityRole: 'tab',
-    accessibilityControls: id,
-    accessibilitySelected: active
+    role: 'tab',
+    'aria-controls': id,
+    'aria-selected': active
   });
 }
 
@@ -8047,9 +7864,9 @@ const Toast = /*#__PURE__*/React.forwardRef((props, ref) => {
   const textClasses = getStyles(styles$1, ['.toast --text']);
   return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
     ref: ref,
-    accessibilityRole: "alert",
-    accessibilityLive: "assertive",
-    accessibilityAtomic: true,
+    role: "alert",
+    "aria-live": "assertive",
+    "aria-atomic": true,
     style: [classes, style],
     textStyle: [textClasses, textStyle]
   }), children);