bootstrap-rn 0.2.14 → 0.3.0

package/dist/bootstrap-rn.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('react-native'), require('react-native-svg')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', 'react-native', 'react-native-svg'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["bootstrap-rn"] = {}, global.React, global.ReactNative, global.ReactNativeSvg));
-})(this, (function (exports, React, reactNative, reactNativeSvg) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('react-native')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'react-native'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["bootstrap-rn"] = {}, global.React, global.ReactNative));
+})(this, (function (exports, React, reactNative) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -3512,27 +3512,26 @@
 
   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: {
@@ -3611,14 +3610,14 @@
       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',
@@ -3628,35 +3627,35 @@
       }
     },
     // 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',
@@ -3785,11 +3784,11 @@
         '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,
@@ -3839,19 +3838,19 @@
         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: {
@@ -4069,21 +4068,21 @@
         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',
@@ -4126,28 +4125,28 @@
         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',
@@ -4164,41 +4163,41 @@
       }
     }
     // 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',
+      },
     }, */
   };
 
@@ -4371,7 +4370,7 @@
 
   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'],
@@ -5769,9 +5768,8 @@
       const nextViewport = calculateViewport(breakpoints, width);
       setViewport(nextViewport);
     };
-
-    // Initially determine viewport after mounting.
     React.useEffect(() => {
+      // Initially determine viewport after mounting.
       handleChange({
         window: reactNative.Dimensions.get('window')
       });
@@ -5951,7 +5949,7 @@
     // 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'])),
@@ -5970,11 +5968,11 @@
         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__default["default"].createElement(View, _extends({}, elementProps, {
       ref: ref,
-      accessibilityRole: "alert",
+      role: "alert",
       style: [classes, style],
       textStyle: [textClasses, textStyle]
     }), children);
@@ -5995,7 +5993,7 @@
     // 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  "]))),
@@ -6022,10 +6020,10 @@
       elementProps = _objectWithoutProperties(props, _excluded$1w);
     const media = useMedia();
     const context = React.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__default["default"].createElement(reactNative.Text, _extends({}, elementProps, {
@@ -6062,7 +6060,7 @@
     // 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  "])))
   });
@@ -6073,8 +6071,8 @@
         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__default["default"].createElement(View, _extends({}, elementProps, {
@@ -6157,7 +6155,7 @@
     // 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  "])))
@@ -6174,20 +6172,19 @@
     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 = reactNative.Platform.OS === 'web' ? 'listitem' : null;
     return /*#__PURE__*/React__default["default"].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__default["default"].createElement(Text, {
-      selectable: false,
       style: [dividerClasses, dividerStyle]
     }, reactNative.I18nManager.isRTL ? StyleSheet.value('breadcrumb-divider-flipped') : StyleSheet.value('breadcrumb-divider')), children);
   });
@@ -6203,7 +6200,7 @@
     // 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  "])))
   });
@@ -6215,12 +6212,12 @@
       } = 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 = reactNative.Platform.OS === 'web' ? 'list' : null;
     return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
       ref: ref,
-      accessibilityRole: role,
+      role: role,
       style: [classes, style],
       textStyle: [textClasses, textStyle]
     }), list);
@@ -6240,7 +6237,7 @@
     // 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__default["default"].forwardRef((props, ref) => {
@@ -6251,13 +6248,13 @@
       } = 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 = reactNative.Platform.OS === 'web' ? 'group' : null;
     return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
       ref: ref,
-      accessibilityRole: role,
+      role: role,
       style: [classes, style]
     }), /*#__PURE__*/React__default["default"].createElement(ButtonGroupContext.Provider, {
       value: {
@@ -6275,7 +6272,7 @@
     // 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__default["default"].forwardRef((props, ref) => {
@@ -6284,10 +6281,10 @@
         style
       } = props,
       elementProps = _objectWithoutProperties(props, _excluded$1r);
-    const classes = getStyles(styles$19, ['.btn-toolbar']);
+    const classes = getStyles(styles$18, ['.btn-toolbar']);
     return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
       ref: ref,
-      accessibilityRole: "toolbar",
+      role: "toolbar",
       style: [classes, style]
     }), children);
   });
@@ -6447,7 +6444,7 @@
         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  "]))),
@@ -6462,7 +6459,7 @@
       } = props,
       elementProps = _objectWithoutProperties(props, _excluded$1o);
     const context = React.useContext(TextStyleContext);
-    const classes = getStyles(styles$18, ['caret', "caret-".concat(direction)]);
+    const classes = getStyles(styles$17, ['caret', "caret-".concat(direction)]);
     return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
       ref: ref,
       style: [classes, getBorderColorStyle(color || getColor(context), direction), style]
@@ -6493,19 +6490,18 @@
   };
 
   // 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';
@@ -6554,7 +6550,7 @@
     const wrappedChildren = applyCaret(children, caret);
     return /*#__PURE__*/React__default["default"].createElement(reactNative.Pressable, _extends({}, elementProps, interactionProps, {
       ref: actionRef,
-      accessibilityRole: getRole$2(actionProps),
+      role: getRole$2(actionProps),
       style: [resolveStyle({
         media,
         interaction
@@ -6592,7 +6588,7 @@
         if (handlePress) handlePress(event);
         setPressed(value => !value);
       },
-      accessibilityPressed: pressed
+      'aria-pressed': pressed
     });
   }
 
@@ -6614,7 +6610,7 @@
     // 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  "])))
@@ -6673,10 +6669,10 @@
     invariant(color !== 'link' || !outline, 'Button link variant is only available as non outline style.');
     const listItem = React.useContext(ListContext);
     const group = React.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__default["default"].createElement(Pressable, _extends({}, elementProps, {
       ref: ref,
       active: active,
@@ -6700,7 +6696,7 @@
     // 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  "])))
   });
@@ -6711,14 +6707,14 @@
         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 = reactNative.Platform.OS === 'web' ? 'blockquote' : null;
     return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
       ref: ref,
-      accessibilityRole: role,
+      role: role,
       style: [classes, style],
       textStyle: [textClasses, textStyle]
     }), children);
@@ -6737,7 +6733,7 @@
     // 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  "])))
   });
@@ -6749,8 +6745,8 @@
         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]);
@@ -6779,7 +6775,7 @@
     // 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  "])))
   });
@@ -6790,8 +6786,8 @@
         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__default["default"].createElement(View, _extends({}, elementProps, {
       ref: ref,
       style: [classes, style],
@@ -6810,7 +6806,7 @@
     // 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  "])))
   });
@@ -6821,8 +6817,8 @@
         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__default["default"].createElement(View, _extends({}, elementProps, {
       ref: ref,
       style: [classes, style],
@@ -6841,7 +6837,7 @@
     // 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  "])))
   });
@@ -6852,8 +6848,8 @@
         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__default["default"].createElement(View, _extends({}, elementProps, {
       ref: ref,
       style: [classes, style],
@@ -6870,7 +6866,7 @@
     // 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__default["default"].forwardRef((props, ref) => {
@@ -6879,7 +6875,7 @@
         style
       } = props,
       elementProps = _objectWithoutProperties(props, _excluded$1f);
-    const classes = getStyles(styles$11, ['.card']);
+    const classes = getStyles(styles$10, ['.card']);
     return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
       ref: ref,
       style: [classes, style]
@@ -6897,7 +6893,25 @@
   const OffcanvasContext = /*#__PURE__*/React__default["default"].createContext();
   OffcanvasContext.displayName = 'OffcanvasContext';
 
-  const styles$10 = reactNative.StyleSheet.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$$ = reactNative.StyleSheet.create({
     reset: {
       // Background repeat is not supported on native yet.
       backgroundRepeat: 'no-repeat'
@@ -6959,7 +6973,7 @@
   function useBackgroundWeb(style) {
     const flattenedStyle = reactNative.StyleSheet.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:
@@ -6972,198 +6986,6 @@
     };
   }
 
-  const styles$$ = reactNative.StyleSheet.create({
-    container: {
-      overflow: 'hidden'
-    },
-    object: {
-      aspectRatio: 1
-    }
-  });
-  const horizontalPositions = {
-    left: function () {
-      let offset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-      return {
-        alignItems: reactNative.I18nManager.isRTL ? 'flex-end' : 'flex-start',
-        paddingLeft: offset
-      };
-    },
-    right: function () {
-      let offset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-      return {
-        alignItems: reactNative.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 = reactNative.StyleSheet.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__default["default"].createElement(reactNative.View, {
-        style: [reactNative.StyleSheet.absoluteFill, styles$$.container, background.containerStyle]
-      }, /*#__PURE__*/React__default["default"].createElement(reactNative.View, {
-        style: [styles$$.object, background.objectStyle]
-      }, background.xml && /*#__PURE__*/React__default["default"].createElement(reactNativeSvg.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 = reactNative.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 = {
@@ -7208,7 +7030,7 @@
       interaction,
       interactionProps
     } = useInteractionState(elementProps);
-    const background = useBackground(resolveStyle({
+    const background = useBackgroundWeb(resolveStyle({
       media,
       interaction
     }));
@@ -7296,8 +7118,8 @@
         if (handlePress) handlePress(event);
         context.setVisible(value => !value);
       },
-      accessibilityExpanded: context.visible,
-      accessibilityControls: context.identifier
+      'aria-expanded': context.visible,
+      'aria-controls': context.identifier
     });
   }
 
@@ -7319,7 +7141,7 @@
     }
     return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
       ref: ref,
-      nativeID: identifier
+      id: identifier
     }), children);
   });
   Collapse.displayName = 'Collapse';
@@ -7399,7 +7221,7 @@
     // 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 = reactNative.StyleSheet.create({
     reboot: {
@@ -7428,9 +7250,9 @@
       onBlur = () => {},
       disabled = false,
       style,
-      nativeID
+      id
     } = props;
-    const inputBackground = useBackground(style);
+    const inputBackground = useBackgroundWeb(style);
     return /*#__PURE__*/React__default["default"].createElement(Input$1, {
       ref: ref,
       type: type === 'switch' ? 'checkbox' : type,
@@ -7442,7 +7264,7 @@
       onBlur: onBlur,
       disabled: disabled,
       style: inputBackground.style,
-      nativeID: nativeID
+      id: id
     });
   });
   FormCheckInputWeb.displayName = 'FormCheckInputWeb';
@@ -7459,7 +7281,7 @@
     // 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__default["default"].forwardRef((props, ref) => {
     const {
@@ -7471,13 +7293,13 @@
       hitSlop = 8,
       disabled = false,
       style,
-      nativeID
+      id
     } = props;
-    const inputBackground = useBackground(style);
+    const inputBackground = useBackgroundWeb(style);
     return /*#__PURE__*/React__default["default"].createElement(Pressable, {
       ref: ref,
-      accessibilityRole: type,
-      accessibilityChecked: value,
+      role: type,
+      "aria-checked": value,
       onPress: () => {
         handleValueChange(!value);
       },
@@ -7486,7 +7308,7 @@
       hitSlop: hitSlop,
       disabled: disabled,
       style: inputBackground.style,
-      nativeID: nativeID
+      id: id
     }, inputBackground.element);
   });
   FormCheckInputNative.displayName = 'FormCheckInputNative';
@@ -7512,7 +7334,7 @@
   /* 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  "]))),
@@ -7654,7 +7476,7 @@
     const role = reactNative.Platform.OS === 'web' ? 'code' : null;
     return /*#__PURE__*/React__default["default"].createElement(Text, _extends({}, elementProps, {
       ref: ref,
-      accessibilityRole: role,
+      role: role,
       style: [classes, style]
     }), children);
   });
@@ -7673,14 +7495,14 @@
       } = 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
@@ -7957,7 +7779,7 @@
         autoClose: autoClose
       }), /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
         ref: concatRefs(dialogRef, ref),
-        accessibilityLabelledBy: identifier,
+        "aria-labelledby": identifier,
         style: [classes, style],
         textStyle: [textClasses, textStyle]
       }), children));
@@ -7976,7 +7798,7 @@
       autoClose: autoClose
     }), /*#__PURE__*/React__default["default"].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
@@ -8012,8 +7834,8 @@
     const classes = getStyles(styles$S, ['heading', ".h".concat(size)]);
     return /*#__PURE__*/React__default["default"].createElement(Text, _extends({}, elementProps, {
       ref: ref,
-      accessibilityRole: "header",
-      accessibilityLevel: size,
+      role: "heading",
+      "aria-level": size,
       style: [classes, style]
     }), children);
   });
@@ -8321,7 +8143,7 @@
     const role = reactNative.Platform.OS === 'web' ? 'label' : null;
     return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
       ref: concatRefs(forRef, ref),
-      accessibilityRole: role
+      role: role
     }), children);
   });
   Label.displayName = 'Label';
@@ -8522,7 +8344,7 @@
   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']),
@@ -8531,7 +8353,7 @@
     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
@@ -8561,7 +8383,7 @@
     '.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) => ({
@@ -8576,7 +8398,7 @@
         disabled = false,
         valid = false,
         invalid = false,
-        editable = true,
+        readOnly = false,
         selectTextOnFocus = false,
         style
       } = modifierProps,
@@ -8587,7 +8409,7 @@
       placeholderTextColor: placeholderTextColor,
       multiline: multiline,
       disabled: disabled,
-      editable: disabled ? false : editable,
+      readOnly: disabled ? true : readOnly,
       selectTextOnFocus: disabled ? false : selectTextOnFocus,
       style: [classes, style]
     }));
@@ -8630,7 +8452,7 @@
       targetProps: _objectSpread2(_objectSpread2({
         ref: concatRefs(targetRef, ref)
       }, optional(visible, {
-        accessibilityDescribedBy: identifier
+        'aria-describedby': identifier
       })), {}, {
         onPress: event => {
           const handleHoverAsPress = (reactNative.Platform.OS === 'android' || reactNative.Platform.OS === 'ios') && trigger.includes('hover');
@@ -8690,7 +8512,7 @@
       }),
       targetRef,
       templateProps: {
-        nativeID: identifier
+        id: identifier
       }
     };
   }
@@ -8851,7 +8673,7 @@
     const role = reactNative.Platform.OS === 'web' ? 'tooltip' : null;
     return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
       ref: ref,
-      accessibilityRole: role,
+      role: role,
       style: [classes, style],
       textStyle: [textClasses, textStyle]
     }), /*#__PURE__*/React__default["default"].createElement(PopoverContext.Provider, {
@@ -9048,7 +8870,7 @@
     const role = reactNative.Platform.OS === 'web' ? 'tooltip' : null;
     return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
       ref: ref,
-      accessibilityRole: role,
+      role: role,
       style: [classes, style],
       textStyle: [textClasses, textStyle]
     }), /*#__PURE__*/React__default["default"].createElement(TooltipContext.Provider, {
@@ -9224,7 +9046,7 @@
     const role = reactNative.Platform.OS === 'web' ? 'listitem' : null;
     return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
       ref: ref,
-      accessibilityRole: role,
+      role: role,
       style: [classes, style],
       textStyle: [textClasses, textStyle]
     }), children);
@@ -9285,7 +9107,7 @@
     const role = reactNative.Platform.OS === 'web' ? 'listitem' : null;
     return /*#__PURE__*/React__default["default"].createElement(Pressable, _extends({}, elementProps, {
       ref: modifierRef,
-      accessibilityRole: role,
+      role: role,
       active: active,
       disabled: disabled,
       style: [...classes, style],
@@ -9332,7 +9154,7 @@
     const tabbable = false;
     return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
       ref: ref,
-      accessibilityRole: getRole$1(tabbable),
+      role: getRole$1(tabbable),
       style: [classes, style]
     }), /*#__PURE__*/React__default["default"].createElement(ListGroupContext.Provider, {
       value: {
@@ -9394,7 +9216,7 @@
         handleMouseLeaveInteraction(event);
       },
       ref: actionRef,
-      accessibilityRole: getRole$2(actionProps),
+      role: getRole$2(actionProps),
       accessible: true,
       style: resolveStyle({
         media,
@@ -9859,7 +9681,7 @@
     navbar && '.navbar-nav', navbar && navbar.expand && ".navbar-expand".concat(navbar.expand === true ? '' : "-".concat(navbar.expand), " .navbar-nav")]);
     return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
       ref: ref,
-      accessibilityRole: getRole(tabbable, navbar),
+      role: getRole(tabbable, navbar),
       style: [classes, style]
     }), /*#__PURE__*/React__default["default"].createElement(NavContext.Provider, {
       value: {
@@ -9990,14 +9812,14 @@
       } = 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'
     });
   }
 
@@ -10041,7 +9863,7 @@
     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__default["default"].createElement(Pressable, _extends({}, elementProps, {
@@ -10080,7 +9902,7 @@
         if (handlePress) handlePress(event);
         context.setExpanded(false);
       },
-      accessibilityLabel: 'Close'
+      'aria-label': 'Close'
     });
   }
 
@@ -10369,7 +10191,7 @@
         style
       } = props,
       elementProps = _objectWithoutProperties(props, _excluded$i);
-    const background = useBackground(style);
+    const background = useBackgroundWeb(style);
     const showPlaceholder = selectedValue === undefined || selectedValue === null;
     return /*#__PURE__*/React__default["default"].createElement(reactNative.Picker, _extends({}, elementProps, {
       ref: ref,
@@ -10477,7 +10299,7 @@
         style
       } = props,
       elementProps = _objectWithoutProperties(props, _excluded$h);
-    const background = useBackground(style);
+    const background = useBackgroundWeb(style);
     const [visible, setVisible] = React.useState(false);
     const textStyle = extractTextStyles(background.style);
     const showPlaceholder = selectedValue === undefined || selectedValue === null;
@@ -10490,7 +10312,7 @@
     };
     return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Pressable, _extends({}, elementProps, {
       ref: ref,
-      accessibilityRole: "combobox",
+      role: "combobox",
       onPress: () => {
         setVisible(true);
       },
@@ -10571,7 +10393,7 @@
       onPress: () => {
         handleValueChange(value);
       },
-      accessibilitySelected: selected,
+      "aria-selected": selected,
       disabled: disabled,
       style: resolveStyle({
         media
@@ -10763,10 +10585,10 @@
     // composite component
     return /*#__PURE__*/React__default["default"].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), "%")
       }]
@@ -10848,7 +10670,7 @@
     const role = reactNative.Platform.OS === 'web' ? 'paragraph' : null;
     return /*#__PURE__*/React__default["default"].createElement(Text, _extends({}, elementProps, {
       ref: ref,
-      accessibilityRole: role,
+      role: role,
       style: [classes, style]
     }), children);
   });
@@ -10891,7 +10713,7 @@
     const role = reactNative.Platform.OS === 'web' ? 'listitem' : null;
     return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
       ref: ref,
-      accessibilityRole: role,
+      role: role,
       style: [classes, style],
       textStyle: [textClasses, textStyle]
     }), children);
@@ -10899,43 +10721,43 @@
   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"];
@@ -10959,7 +10781,7 @@
     const role = reactNative.Platform.OS === 'web' ? 'list' : null;
     return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
       ref: ref,
-      accessibilityRole: role,
+      role: role,
       style: [classes, style]
     }), list);
   });
@@ -10987,7 +10809,7 @@
       elementProps = _objectWithoutProperties(props, _excluded$9);
     return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
       ref: ref,
-      accessibilityRole: "radiogroup"
+      role: "radiogroup"
     }), /*#__PURE__*/React__default["default"].createElement(RadioContext.Provider, {
       value: {
         selectedValue,
@@ -11088,21 +10910,17 @@
     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]
@@ -11134,8 +10952,8 @@
     }, []);
     return /*#__PURE__*/React__default["default"].createElement(AnimatedView, _extends({}, elementProps, {
       ref: ref,
-      accessibilityRole: role,
-      accessibilityHidden: true,
+      role: role,
+      "aria-hidden": true,
       style: [classes, getAnimationStyle(variant, animation), style]
     }));
   });
@@ -11211,9 +11029,9 @@
     const role = reactNative.Platform.OS === 'web' ? 'tabpanel' : null;
     return /*#__PURE__*/React__default["default"].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]
     }));
   });
@@ -11232,16 +11050,16 @@
     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
     });
   }
 
@@ -11344,9 +11162,9 @@
     const textClasses = getStyles(styles$1, ['.toast --text']);
     return /*#__PURE__*/React__default["default"].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);